/* popups.css — one translucent-glass treatment for every popup/overlay
   surface in the app (model menu, models-menu submenu, user menu, info
   popovers, ready-prompts .pp-menu, the key/nda-copy/more/shield/models
   sheets, the audit drawer, the NDA wall, dialogs and toasts), so a popup
   never reads as an opaque card sitting oddly on top of the glass bars
   around it. Extends, never replaces, each surface's own layout rules in
   app.css / models-menu.css / prompt-presets.css / wall.css; those keep
   sizing, position and animation, this file only adds background, blur,
   border, depth and z-index where a rule here is missing there.

   --bg-elevated varies per theme/edition (see css/app.css, css/kits.css),
   so the translucent fill is color-mix() against that token rather than a
   literal rgba() — the same pattern css/app.css already uses for .sidebar
   and css/prompt-presets.css already uses for .pp-menu. */

:root {
  --popup-glass-a: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
  --popup-glass-b: color-mix(in srgb, var(--bg-elevated) 65%, transparent);
  --popup-border: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
  --popup-row-hover: rgba(255,255,255,.06);
}
@media (prefers-color-scheme: light) {
  :root {
    --popup-row-hover: rgba(0,0,0,.045);
  }
}
:root[data-theme="light"] { --popup-row-hover: rgba(0,0,0,.045); }
:root[data-theme="dark"] { --popup-row-hover: rgba(255,255,255,.06); }

/* -------------------------------------------------------------------
   Shared glass treatment. One list, so every popup drifts together if
   the blur/shadow recipe ever changes.
------------------------------------------------------------------- */
.model-menu,
.models-menu,
.models-submenu,
.model-menu-submenu,
.user-menu,
.info-popover,
.pp-menu,
.key-sheet,
.nda-copy-sheet,
.nda-copy-card,
.more-sheet,
.shield-sheet,
.models-sheet,
.audit-drawer,
dialog,
.dialog,
.modal {
  background: var(--popup-glass-b);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border-radius: var(--radius-md, 12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 80px rgba(0,0,0,.4);
}
/* the gradient hairline sits ON TOP of the solid glass fill (two
   background layers) so it never fights the color-mix() background above */
.model-menu,
.models-menu,
.models-submenu,
.model-menu-submenu,
.user-menu,
.info-popover,
.pp-menu,
.key-sheet,
.nda-copy-sheet,
.nda-copy-card,
.more-sheet,
.shield-sheet,
.models-sheet,
.audit-drawer,
dialog,
.dialog,
.modal {
  background-image: linear-gradient(var(--popup-glass-b), var(--popup-glass-b)), var(--popup-border);
}

.toast, .toasts {
  background: var(--popup-glass-a);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md, 12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 80px rgba(0,0,0,.4);
}

/* Sheets/drawers already carry their own scrim behind them; the sheet
   panel itself gets the same glass, softened slightly less (they sit on
   a dedicated scrim, not directly on page content). */
.key-sheet, .nda-copy-sheet, .nda-copy-card, .more-sheet, .shield-sheet, .models-sheet, .audit-drawer {
  border-color: rgba(255,255,255,.14);
}

/* -------------------------------------------------------------------
   Rows/items inside popups: no opaque fill, ever — soft rgba only.
   Overrides the solid --bg-sunken / --accent-soft hovers those rules used
   before this file existed, at the same or higher specificity.
------------------------------------------------------------------- */
.model-menu .model-menu-item:hover,
.model-menu .model-menu-company:hover,
.models-menu .model-menu-item:hover,
.models-submenu .model-menu-item:hover,
.model-menu-submenu .model-menu-item:hover,
.user-menu .user-menu-item:hover,
.more-sheet .more-sheet-item:hover,
.pp-menu .pp-item:hover,
.pp-menu .pp-item:focus-visible {
  background: var(--popup-row-hover) !important;
}
.model-menu .model-menu-company.is-open {
  background: var(--popup-row-hover) !important;
}

/* -------------------------------------------------------------------
   #nda-wall — a full-screen wall, not a small popup, but it must still
   escalate above a dialog opened while it is up (layers.css does not
   cover it: it has no ancestor stacking-context trap of its own, so it
   only needs a z-index token here, one step above --z-dialog).
------------------------------------------------------------------- */
#nda-wall {
  z-index: calc(var(--z-dialog, 1200) + 50) !important;
}
#nda-wall .nda-wall-sheet {
  background: var(--popup-glass-b);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 80px rgba(0,0,0,.4);
}

/* -------------------------------------------------------------------
   .pp-menu was missing from layers.css's own z-index mapping — add it
   here rather than editing that file.
------------------------------------------------------------------- */
.pp-menu { z-index: var(--z-menu, 1000) !important; }

/* -------------------------------------------------------------------
   #layer-root — the shared portal target (js/layers-portal.js). It must
   never itself become a stacking-context trap or clip a portaled child,
   and must never intercept clicks meant for the page.
------------------------------------------------------------------- */
#layer-root {
  position: fixed;
  inset: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: var(--z-menu, 1000);
}
#layer-root > * { pointer-events: auto; }

/* -------------------------------------------------------------------
   prefers-reduced-transparency — solid fallback, no blur, for every
   surface above.
------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .model-menu,
  .models-menu,
  .models-submenu,
  .model-menu-submenu,
  .user-menu,
  .info-popover,
  .pp-menu,
  .key-sheet,
  .nda-copy-sheet,
  .nda-copy-card,
  .more-sheet,
  .shield-sheet,
  .models-sheet,
  .audit-drawer,
  dialog,
  .dialog,
  .modal,
  .toast,
  .toasts,
  #nda-wall .nda-wall-sheet {
    background: var(--bg-elevated) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}