/* ============================
   SMAU OS – Base / Root / Reset
   ============================ */

:root {
  --os-bg: radial-gradient(circle at top, #181c2a, #05060a 60%);
  --os-ink: #f5f5f8;
  --os-muted: #a3a6b8;
  --os-soft: #161824;
  --os-card: #10121b;

  --os-border: rgba(255, 255, 255, 0.08);
  --os-border-strong: rgba(255, 255, 255, 0.16);

  --os-accent: #4f8cff;
  --os-accent-soft: rgba(79, 140, 255, 0.18);
  --os-bad: #ff4f6b;
  --os-good: #3fd28b;

  --phone-w: 380px;
  --phone-h: 760px;
  --radius-phone: 32px;
  --radius-card: 18px;

  --transition-fast: 0.18s ease;
  --transition-med: 0.24s ease;

  --shadow-phone: 0 26px 70px rgba(0, 0, 0, 0.7);
  --shadow-card: 0 14px 40px rgba(0, 0, 0, 0.55);

  --home-icon-size: 64px;
  --tap-target-min: 44px;

  --edge-gutter: 12px;

  --edge-hint-w: 44px;
  --edge-hint-opacity: 0.55;
  --edge-hint-blur: 14px;

  /* ============================================================
     Z-INDEX STACK (BASE DEFAULTS)
     Other CSS files can override, but the relative ordering matters.
     ============================================================ */
  --z-screens: 0;
  --z-statusbar: 60;

  /* Notify layer contract:
     - backdrop sits ABOVE screens, BELOW tray host
     - tray host (banner) sits above backdrop
     - toast stack floats above tray host
     - "shade inner" lives inside banner and is styled elsewhere */
  --z-notify-backdrop: 190;
  --z-notify-banner: 200;
  --z-toast-stack: 260;
  --z-notify-shade: 320; /* reserved for inner shade content if needed */

  --z-modal: 700;
  --z-folder: 740;

  /* overlay root should be above in-phone UI, but still inside phone */
  --z-overlay-root: 800;

  /* Edge hint visuals should never beat modals/shade */
  --z-edge-hint: 180;

  /* Touch-safe timings (kept separate so reduced-motion can clamp them) */
  --anim-tap-flash: 0.12s;
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Click/tap affordance
   NOTE: do NOT force touch-action on ALL buttons globally.
   Many scrollable lists use buttons; users drag-scroll starting on them. */
.home-icon,
.home-dock-item,
.home-dock-icon,
.app-header-btn,
.notify-banner-open,
.mode-card,
.creator-list button {
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
}

/* Focus ring: keep it visible, but only when keyboard semantics apply */
button:focus-visible,
.home-icon:focus-visible,
.home-dock-item:focus-visible,
.app-header-btn:focus-visible,
.notify-banner-open:focus-visible,
.mode-card:focus-visible,
.creator-list button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(79, 140, 255, 0.35),
    0 0 0 5px rgba(0, 0, 0, 0.65);
}

/* Selection policy:
   Default: no selection to feel "app-like"
   Allow selection in inputs/textarea and anything explicitly marked selectable. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ============================================================
   GLOBAL SCROLLBAR HIDING (Fake OS feel)
   ============================================================ */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ============================================================
   MOBILE VIEWPORT SANITY
   ============================================================ */

html {
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
  overflow: hidden;
}

/* Keep both, because some engines still behave better with 100% + fixed body */
body {
  width: 100%;
  height: 100%;
}

/* Use dvh if supported (prevents URL bar math issues) */
@supports (height: 100dvh) {
  body {
    height: 100dvh;
  }
}

/* Prevent “rubber band” on iOS Safari and stop the page from moving */
body {
  position: fixed;
  inset: 0;

  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--os-bg);
  color: var(--os-ink);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 16px;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  overscroll-behavior: none;
  overflow: hidden;

  /* IMPORTANT FIX:
     We still prevent the *page* from being a scroll surface via fixed + overflow hidden,
     but we must NOT disable touch panning globally or inner scroll areas break. */
  touch-action: pan-y pinch-zoom;
}

/* Allow selection in form fields even with global no-select */
input,
textarea,
select {
  -webkit-user-select: text;
  user-select: text;
}

/* ============================================================
   GLOBAL “REAL APP” FILL
   ============================================================ */

.smau-shell-wrap {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Prevent accidental inner overflow from creating a phantom scroll layer */
.smau-shell-wrap,
.smau-shell,
.smau-phone-inner,
.smau-main {
  min-height: 0;
  min-width: 0;
}

/* Global gesture defaults:
   Allow vertical scroll within the phone. Individual gesture systems can still preventDefault
   once they commit to a gesture. */
.smau-shell,
.smau-phone-inner,
.smau-main {
  touch-action: pan-y pinch-zoom;
}

/* ============================================================
   SCREEN VISIBILITY (CRITICAL)
   aria-hidden does NOT hide visually. We must.
   ============================================================ */

.smau-main {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Screens are stacked and hidden by default */
.smau-main .smau-screen,
.smau-main [id^="screen-"] {
  position: absolute;
  inset: 0;

  display: none !important;

  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;

  z-index: var(--z-screens);
}

/* Only active screens show */
.smau-main .smau-screen.is-active,
.smau-main [id^="screen-"].is-active {
  display: flex !important;
}

/* If something uses aria-hidden instead of is-active, honor it (defensive) */
.smau-main .smau-screen[aria-hidden="false"],
.smau-main [id^="screen-"][aria-hidden="false"] {
  display: flex !important;
}

.smau-main .smau-screen[aria-hidden="true"],
.smau-main [id^="screen-"][aria-hidden="true"] {
  display: none !important;
}

/* ============================================================
   APP SCREEN + APP VIEW BASELINE (CRITICAL)
   This prevents “router opened an app but view is blank” when
   other CSS files are missing or inconsistent.
   ============================================================ */

/* IMPORTANT:
   Do NOT force #screen-app to display:flex unconditionally.
   Screen visibility is controlled above via .smau-screen rules. */
#screen-app {
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* If you use an .app-layer wrapper, it must fill available height. */
#screen-app .app-layer {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Host container for app views */
#screen-app .app-views {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  position: relative;
}

/* Baseline: app views exist, but are hidden unless active */
.app-view {
  display: none;
  min-height: 0;
  min-width: 0;
}

/* Active view becomes visible. Support either class as “active”. */
.app-view.is-active,
.app-view.app-active,
#screen-app .app-view.is-active,
#screen-app .app-view.app-active {
  display: block;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
  pointer-events: auto;
}

/* Safety: a view that is active should not be accidentally inert. */
.app-view.is-active *,
.app-view.app-active * {
  pointer-events: auto;
}

/* Known scroll surfaces should always be allowed to pan-y */
#screen-app .app-view.is-active,
.app-view.is-active,
.smau-drawer-panel,
.smau-drawer-list {
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

/* global utility */
.hidden {
  display: none !important;
}

.tap-flash {
  animation: smau-tap-flash var(--anim-tap-flash) ease-out;
  transform-origin: center;
}

@keyframes smau-tap-flash {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   LAYER BINDINGS (CANONICAL)
   ============================================================ */

/* Status bar / notch should always sit above screens */
.smau-statusbar,
.smau-notch,
#smau-statusbar,
#smau-notch {
  position: relative;
  z-index: var(--z-statusbar);
}

/* ------------------------------------------------------------
   HARD SAFETY: consent/mode screens should never appear under
   stray notify layers if something gets stuck.
   ------------------------------------------------------------ */
#screen-audio-consent.is-active,
#screen-mode.is-active {
  z-index: calc(var(--z-notify-banner) + 1);
}

/* Ensure consent buttons are always hittable */
#screen-audio-consent button,
#screen-audio-consent .audio-consent-actions,
#screen-audio-consent .audio-consent-actions button {
  pointer-events: auto;
}

/* ============================================================
   NOTIFY LAYERS (BASE SAFETY ONLY)
   ============================================================ */

#notify-toast-stack,
.notify-toast-stack {
  position: absolute;
  inset: 0;
  z-index: var(--z-toast-stack);
  pointer-events: none;
}

/* Banner host layer: default inert. QS CSS/JS will make it interactive. */
#notify-banner,
.notify-banner {
  position: absolute;
  inset: 0;
  z-index: var(--z-notify-banner);
  pointer-events: none;
}

/* If banner is explicitly hidden or aria-hidden, it must stay inert. */
#notify-banner.hidden,
.notify-banner.hidden,
#notify-banner[aria-hidden="true"],
.notify-banner[aria-hidden="true"] {
  pointer-events: none !important;
}

/* Safety: if banner is declared "not hidden" and aria-hidden is false, it should be interactive */
#notify-banner:not(.hidden)[aria-hidden="false"],
.notify-banner:not(.hidden)[aria-hidden="false"] {
  pointer-events: auto;
}

/* Backdrop: default inert unless visible class is set by QS JS */
#notify-backdrop,
.notify-backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--z-notify-backdrop);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* "Visible" class is what the QS spec uses */
#notify-backdrop.is-visible,
.notify-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* aria-hidden wins (safety catch) */
#notify-backdrop[aria-hidden="true"],
.notify-backdrop[aria-hidden="true"] {
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ============================================================
   OVERLAY ROOT
   ============================================================ */

#smau-overlay-root,
.smau-overlay-root {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay-root);

  pointer-events: none; /* container never blocks */
}

/* Critical: ONLY the open overlay itself can receive taps. */
#smau-overlay-root > .is-open:not(.smau-overlay-sentinel),
.smau-overlay-root > .is-open:not(.smau-overlay-sentinel) {
  pointer-events: auto !important;
}

.smau-overlay-sentinel {
  pointer-events: none !important;
}

/* All direct overlay nodes are inert unless opened */
#smau-overlay-root > [data-overlay],
#smau-overlay-root > .smau-modal-backdrop,
#smau-overlay-root > .home-drawer-backdrop,
#smau-overlay-root > #home-folder-backdrop,
.smau-overlay-root > [data-overlay],
.smau-overlay-root > .smau-modal-backdrop,
.smau-overlay-root > .home-drawer-backdrop,
.smau-overlay-root > #home-folder-backdrop {
  position: absolute;
  inset: 0;

  pointer-events: none;
  visibility: hidden;
  opacity: 0;

  -webkit-user-select: none;
  user-select: none;
}

/* Aria-hidden should always mean inert (scoped to overlays only) */
#smau-overlay-root > [aria-hidden="true"],
.smau-overlay-root > [aria-hidden="true"] {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Any overlay becomes interactive when open */
#smau-overlay-root > [data-overlay].is-open,
#smau-overlay-root > .smau-modal-backdrop.is-open,
#smau-overlay-root > .home-drawer-backdrop.is-open,
#smau-overlay-root > #home-folder-backdrop.is-open,
.smau-overlay-root > [data-overlay].is-open,
.smau-overlay-root > .smau-modal-backdrop.is-open,
.smau-overlay-root > .home-drawer-backdrop.is-open,
.smau-overlay-root > #home-folder-backdrop.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

/* If an overlay is open but aria-hidden is still "true", keep it inert. */
#smau-overlay-root > .is-open[aria-hidden="true"],
.smau-overlay-root > .is-open[aria-hidden="true"] {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ============================================================
   HOTFIX: Open modal backdrops must be clickable even if a module
   forgets to flip aria-hidden.
   ============================================================ */

#smau-overlay-root > .smau-modal-backdrop.is-open,
.smau-overlay-root > .smau-modal-backdrop.is-open {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Even if aria-hidden is stale, "is-open" wins for modal backdrops */
#smau-overlay-root > .smau-modal-backdrop.is-open[aria-hidden="true"],
.smau-overlay-root > .smau-modal-backdrop.is-open[aria-hidden="true"] {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================================
   EDGE SWIPE VISUAL HINTS (pure polish; no functional impact)
   ============================================================ */

body.smau-edge-swipe .smau-phone-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-edge-hint);

  opacity: 0;
  transition: opacity var(--transition-fast);
  backdrop-filter: blur(0px);
}

body.smau-edge-swipe.smau-edge-left .smau-phone-inner::before {
  opacity: 1;
  background:
    radial-gradient(circle at 0% 50%,
      rgba(79, 140, 255, var(--edge-hint-opacity)) 0%,
      rgba(79, 140, 255, 0.18) 22%,
      rgba(0, 0, 0, 0) 52%);
}

body.smau-edge-swipe.smau-edge-right .smau-phone-inner::before {
  opacity: 1;
  background:
    radial-gradient(circle at 100% 50%,
      rgba(79, 140, 255, var(--edge-hint-opacity)) 0%,
      rgba(79, 140, 255, 0.18) 22%,
      rgba(0, 0, 0, 0) 52%);
}

body.smau-edge-swipe .smau-phone-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--edge-hint-w);
  pointer-events: none;
  z-index: calc(var(--z-edge-hint) + 1);

  opacity: 0;
  filter: blur(var(--edge-hint-blur));
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

body.smau-edge-swipe.smau-edge-left .smau-phone-inner::after {
  left: 0;
  opacity: 0.8;
  transform: translateX(-8px);
  background: linear-gradient(
    180deg,
    rgba(79, 140, 255, 0.0),
    rgba(79, 140, 255, 0.35),
    rgba(79, 140, 255, 0.0)
  );
}

body.smau-edge-swipe.smau-edge-right .smau-phone-inner::after {
  right: 0;
  opacity: 0.8;
  transform: translateX(8px);
  background: linear-gradient(
    180deg,
    rgba(79, 140, 255, 0.0),
    rgba(79, 140, 255, 0.35),
    rgba(79, 140, 255, 0.0)
  );
}

/* ============================================================
   POINTER-EVENT SAFETY (SCOPED)
   Only the active screen inside .smau-main can receive clicks.
   ============================================================ */

.smau-main .smau-screen {
  pointer-events: none !important;
}

.smau-main .smau-screen.is-active {
  pointer-events: auto !important;
}

/* Extra: when app-open, home MUST be blocked */
body.smau-app-open #screen-home {
  pointer-events: none !important;
}

body.smau-app-open #screen-home * {
  pointer-events: none !important;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tap-flash {
    animation: none !important;
  }

  body.smau-edge-swipe .smau-phone-inner::before,
  body.smau-edge-swipe .smau-phone-inner::after {
    transition: none !important;
  }
}