/* SMAU FILE
 * Path: css/smau-overlays.css
 *
 * Owns:
 *   - Overlay root container sizing/stacking + inertness contract for direct children (scoped)
 *   - Generic overlay surface mechanics for OWNED direct children under overlay root (scoped):
 *       - baseline positioning (absolute/inset 0)
 *       - open/closed gating (visibility/opacity + pointer-events)
 *       - closed-state gesture safety (no dead zones)
 *       - optional z-band mapping via data-zband
 *       - app drawer "peek" semantics (explicit allow-list)
 *   - Notification surface safety + hit-testing ONLY (no layout/placement/animation beyond gating)
 *   - Call overlay baseline surface mechanics + minimal interior visuals (scoped)
 * Invariants:
 *   - Mechanics truth is data-state ONLY in this file
 *     - open:   [data-state="open"]
 *     - closed: anything else (including missing)
 *     - exception: app drawer supports [data-state="peek"] (open-ish, explicit allow-list)
 *   - Overlay root is always inert (pointer-events:none); only opened direct children can receive input
 *   - Closed overlays must not create gesture dead zones (touch-action stays pan-safe)
 *   - Notifications: hit-testing ONLY (never layout/placement/animation ownership)
 *   - aria-hidden is compatibility only (mirror-only); notification surfaces may use aria-hidden="true" as a safety hard-override
 *   - Z-index uses SMAU token bands only (no ad-hoc escalation)
 *   - prefers-reduced-motion reduces motion without redesign
 * DOM Roots:
 *   - #smau-overlay-root, .smau-overlay-root
 */

:where(#smau-overlay-root, .smau-overlay-root) {
  --smau-ov-dur-ui: var(--smau-dur-ui, 0.18s);
  --smau-ov-dur-layer: var(--smau-dur-layer, 0.24s);
  --smau-ov-ease-out: var(--smau-ease-out, ease);
  --smau-ov-ease-io: var(--smau-ease-io, ease);

  position: absolute;
  inset: 0;

  z-index: var(--z-overlay-root, 160);

  pointer-events: none;
  touch-action: pan-x pan-y pinch-zoom;
}

/* Sentinel nodes are always inert and never block input. */
:where(#smau-overlay-root, .smau-overlay-root) > :is([data-sentinel], .smau-overlay-sentinel) {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  position: absolute !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;

  z-index: -1 !important;
}

/* Optional z-band mapping (direct children only). */
:where(#smau-overlay-root, .smau-overlay-root) > [data-zband="overlay"] { z-index: var(--z-overlay, var(--z-overlay-root, 160)); }
:where(#smau-overlay-root, .smau-overlay-root) > [data-zband="modal"] { z-index: var(--z-modal, 200); }
:where(#smau-overlay-root, .smau-overlay-root) > [data-zband="tray"] { z-index: var(--z-tray, 220); }
:where(#smau-overlay-root, .smau-overlay-root) > [data-zband="toast"] { z-index: var(--z-toast-stack, 240); }
:where(#smau-overlay-root, .smau-overlay-root) > [data-zband="system"] { z-index: var(--z-system, 260); }

/* ---------------------------------------------------------------------------
 * Notifications (HIT-TESTING ONLY; data-state truth)
 * NOTE: visuals/layout/animation belong to css/smau-notifications.css
 * --------------------------------------------------------------------------- */

:where(#smau-overlay-root, .smau-overlay-root) > #notify-toast-stack {
  pointer-events: none;
  touch-action: pan-x pan-y pinch-zoom;
  z-index: var(--z-toast-stack, 240);
}

:where(#smau-overlay-root, .smau-overlay-root) > #notify-toast-stack .notify-toast-card {
  pointer-events: auto;
}

/* Default closed-safe for notify surfaces (no dead zones). */
:where(#smau-overlay-root, .smau-overlay-root) > :is(#notify-backdrop, #notify-banner) {
  pointer-events: none;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

/* Safety hard-override for notifications only: aria-hidden="true" always wins. */
:where(#smau-overlay-root, .smau-overlay-root) > :is(#notify-backdrop, #notify-banner, #notify-toast-stack)[aria-hidden="true"] {
  pointer-events: none !important;
  touch-action: pan-x pan-y pinch-zoom !important;
}

/* Backdrop open blocks input. */
:where(#smau-overlay-root, .smau-overlay-root) > #notify-backdrop[data-state="open"] {
  pointer-events: auto;
  touch-action: none;
  z-index: var(--z-notify-backdrop, var(--z-tray, 220));
}

/* Banner open-ish blocks input (compact/full only). */
:where(#smau-overlay-root, .smau-overlay-root) > #notify-banner:is([data-state="compact"], [data-state="full"]) {
  pointer-events: auto;
  touch-action: none;
  z-index: var(--z-notify-banner, var(--z-tray, 220));
}

/* Guard: stray "open" should not become a blocker. */
:where(#smau-overlay-root, .smau-overlay-root) > #notify-banner[data-state="open"] {
  pointer-events: none !important;
  touch-action: pan-x pan-y pinch-zoom !important;
}

/* ---------------------------------------------------------------------------
 * Owned overlay surfaces (direct children only)
 * Mechanics truth: data-state only
 *
 * Critical: gate all overlay surfaces tagged with data-overlay,
 * except notification roots (they have non-"open" truth states).
 * --------------------------------------------------------------------------- */

:where(#smau-overlay-root, .smau-overlay-root) >
  [data-overlay]:not(#notify-backdrop):not(#notify-banner):not(#notify-toast-stack) {
  position: absolute;
  inset: 0;

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

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

  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior: contain;

  transition:
    opacity var(--smau-ov-dur-ui) var(--smau-ov-ease-out),
    visibility 0s linear var(--smau-ov-dur-ui);

  will-change: opacity;
}

/* Default band for generic overlay surfaces. Specific z-bands can override via data-zband mapping above. */
:where(#smau-overlay-root, .smau-overlay-root) >
  [data-overlay]:not(#notify-backdrop):not(#notify-banner):not(#notify-toast-stack) {
  z-index: var(--z-overlay, var(--z-overlay-root, 160));
}

/* Open gate (generic). */
:where(#smau-overlay-root, .smau-overlay-root) >
  [data-overlay]:not(#notify-backdrop):not(#notify-banner):not(#notify-toast-stack)[data-state="open"] {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;

  transition:
    opacity var(--smau-ov-dur-ui) var(--smau-ov-ease-out),
    visibility 0s linear 0s;
}

/* Modal-like interaction trapping for modal-ish overlays only. */
:where(#smau-overlay-root, .smau-overlay-root) > :is(
  .smau-modal-backdrop,
  .smau-scrim,
  [data-overlay="call"],
  [data-overlay="creator"],
  [data-overlay="settings"],
  [data-overlay="import"],
  [data-overlay="library"],
  [data-overlay="aboutSheet"],
  [data-overlay="supportSheet"],
  [data-overlay="qs-notify-prefs"]
)[data-state="open"] {
  touch-action: none;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------------------
 * App drawer compound mechanics (peek state allow-list)
 * --------------------------------------------------------------------------- */

/* Sheet hit-surface should not cover full screen. */
:where(#smau-overlay-root, .smau-overlay-root) > :is(
  #home-drawer-surface,
  .home-drawer-surface,
  #app-drawer-surface
)[data-overlay="appDrawer"] {
  inset: auto 0 0 0;
  height: 88%;
}

/* Backdrop peek: visible but click-through. */
:where(#smau-overlay-root, .smau-overlay-root) > :is(
  #home-drawer-backdrop,
  .home-drawer-backdrop,
  #app-drawer-backdrop
):is([data-overlay="appDrawerBackdrop"], [data-overlay="appDrawer"])[data-state="peek"] {
  pointer-events: none;
  visibility: visible;
  opacity: 1;

  transition:
    opacity var(--smau-ov-dur-ui) var(--smau-ov-ease-out),
    visibility 0s linear 0s;

  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior: contain;
}

/* Sheet peek: visible + interactive. */
:where(#smau-overlay-root, .smau-overlay-root) > :is(
  #home-drawer-surface,
  .home-drawer-surface,
  #app-drawer-surface
)[data-overlay="appDrawer"][data-state="peek"] {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;

  transition:
    opacity var(--smau-ov-dur-ui) var(--smau-ov-ease-out),
    visibility 0s linear 0s;

  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior: contain;
}

/* Drawer/folder remain pan-safe by default (no dead zones). */
:where(#smau-overlay-root, .smau-overlay-root) > :is(
  #home-drawer-backdrop,
  .home-drawer-backdrop,
  #home-drawer-surface,
  .home-drawer-surface,
  #home-folder-backdrop,
  .home-folder-backdrop
) {
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------------------
 * Visuals (scoped)
 * --------------------------------------------------------------------------- */

:where(#smau-overlay-root, .smau-overlay-root) > .smau-scrim {
  background: rgba(0, 0, 0, 0.45);
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  :where(#smau-overlay-root, .smau-overlay-root) > .smau-scrim {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

:where(#smau-overlay-root, .smau-overlay-root) > .call-overlay {
  background: rgba(0, 0, 0, 0.48);
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior: contain;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  :where(#smau-overlay-root, .smau-overlay-root) > .call-overlay {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

:where(#smau-overlay-root, .smau-overlay-root) > .call-overlay > .call-overlay-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  background: rgba(12, 16, 24, 0.95);
  border-radius: 16px 16px 0 0;
  padding: 20px;

  color: #fff;
}

:where(#smau-overlay-root, .smau-overlay-root) > .call-overlay > .call-overlay-inner > .call-overlay-header {
  text-align: center;
  margin-bottom: 16px;
}

:where(#smau-overlay-root, .smau-overlay-root) > .call-overlay > .call-overlay-inner > .call-overlay-header > .call-overlay-label {
  font-size: 12px;
  opacity: 0.7;
}

:where(#smau-overlay-root, .smau-overlay-root) > .call-overlay > .call-overlay-inner > .call-overlay-header > .call-overlay-contact {
  font-size: 20px;
  font-weight: 600;
  margin-top: 4px;
}

:where(#smau-overlay-root, .smau-overlay-root) > .call-overlay > .call-overlay-inner > .call-overlay-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 6px;
}

:where(#smau-overlay-root, .smau-overlay-root) > .call-overlay > .call-overlay-inner > .call-overlay-actions > .call-btn {
  width: 70px;
  height: 70px;
  border-radius: 999px;
  border: none;

  font-size: 16px;
  color: #fff;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(#smau-overlay-root, .smau-overlay-root) > .call-overlay > .call-overlay-inner > .call-overlay-actions > .call-decline {
  background: #e34141;
}

:where(#smau-overlay-root, .smau-overlay-root) > .call-overlay > .call-overlay-inner > .call-overlay-actions > .call-accept {
  background: #3fc36f;
}

@media (prefers-reduced-motion: reduce) {
  :where(#smau-overlay-root, .smau-overlay-root) > :is(
    [data-overlay],
    .smau-modal-backdrop,
    .smau-scrim,
    .call-overlay,
    #home-drawer-backdrop,
    .home-drawer-backdrop,
    #home-drawer-surface,
    .home-drawer-surface,
    #home-folder-backdrop,
    .home-folder-backdrop
  ) {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}