/* ============================================================
   Stargaze background + dynamic spotlight overrides
   Loaded last so it wins the cascade.
   ============================================================ */

/* COLOR SCHEME → ui/shared/css/design-system.css (single source of truth).
   No raw hex/rgb here: use var(--brand) / var(--accent) / var(--accent-hover) for
   the brand accent, rgba(var(--brand-rgb), a) for any accent opacity, var(--success|
   warning|danger) (or rgba(var(--*-rgb), a)) for status, var(--purple) for the 2nd hue.
   Need a colour that doesn't exist yet? Add a token to the palette in design-system.css
   (the dark :root block AND its body.light-mode twin), then reference it here.
   Re-theming the whole app (e.g. peach → green) is then a one-file edit. */

/* —— Background genui + overlay —— */
.stargaze-genui {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.stargaze-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* The edge vignette fades to the page-background colour, so it tracks the
     "Background" palette swatch (--bg-0-rgb) live in both themes. */
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,   transparent 0%,  rgba(var(--bg-0-rgb), 0.6) 92%),
    radial-gradient(ellipse 100% 70% at 50% 100%, transparent 30%, rgba(var(--bg-0-rgb), 0.6) 100%);
  opacity: 0.55;
  transition: opacity 0.3s, background 0.3s;
}
/* Light mode only differs in strength — the colour auto-switches via --bg-0-rgb. */
body.light-mode .stargaze-overlay { opacity: 0.45; }

/* —— Page background: the "Background" palette swatch (--bg-0). Solid (not the
   design-system gradient) so the animated genui shows through cleanly; tracks
   the swatch live in both themes. body resolves --bg-0 per theme; html keeps the
   dark base (only the few-px padding frame shows it). —— */
html, body { background: var(--bg-0) !important; }
/* Lift the main layout shell above the stargaze genui/overlay. Scoped to the
   actual layout containers — NOT `body > *` — so dynamically-appended popups
   (.tutorial-popover, .session-row-actions, .feedback-modal, etc.) keep their
   own `position: fixed` instead of being forced into `position: relative`. */
#stage { position: relative; z-index: 2; }
/* z-index 3 keeps the header (and its dropdown menus, which open down over
   the stage) above #stage, while staying above the z-index-1 cursor glow so
   the glow never washes over the header. */
#main-header { position: relative; z-index: 3; }

/* —— App-wide Restricted Access gate ——————————————————————————————
   When the visitor isn't authorized (body.app-restricted, set in main.js), the
   whole stage becomes the lock screen: every page (#main-panel), the chat panel
   and its resize handle are hidden, and the page tab buttons are removed so
   there's nothing to navigate to. The account avatar stays (it's how you sign
   in) and the overlay's own Sign-in button opens the same menu. */
#app-restricted-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-0);
  z-index: 30;
}
.app-restricted-card {
  margin: auto;
  background: var(--bg-elev);
  border: var(--border-width) solid var(--border);
  border-radius: 12px;
  padding: 32px 40px;
  text-align: center;
  max-width: 360px;
}
.app-restricted-icon  { color: var(--warning); margin-bottom: 12px; }
.app-restricted-title { font-size: 16px; font-weight: 600; color: var(--fg-1); margin-bottom: 8px; }
.app-restricted-desc  { font-size: 13px; color: var(--fg-3); margin-bottom: 18px; }
.app-restricted-btn {
  background: var(--brand);
  color: var(--bg-0);
  border: none;
  border-radius: 8px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.app-restricted-btn:hover { background: var(--accent-hover); }

/* `#stage >` is intentional: it lifts specificity above the admin-tools lock
   rule (files.css `body.admin-restricted #main-panel{display:flex!important}`)
   so the app-wide lock always wins when both could apply. */
body.app-restricted #stage > #main-panel,
body.app-restricted #stage > #chat-panel,
body.app-restricted #stage > #chat-resize-handle { display: none !important; }
body.app-restricted #app-restricted-overlay { display: flex !important; }
/* Keep the account avatar (sign-in entry) but remove the page tabs so a locked
   visitor can't navigate. The avatar is #user-dropdown inside #main-tabs. */
body.app-restricted #main-tabs > :not(#user-dropdown),
body.app-restricted #main-tabs-chev-left,
body.app-restricted #main-tabs-chev-right,
body.app-restricted #chat-toggle-btn,
body.app-restricted #session-new-header-btn { display: none !important; }

/* —— Chat panel: transparent — sits on the background directly —— */
#chat-panel,
#chat-panel > #chat-header,
#chat-panel > #chat-messages {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#chat-panel {
  /* design-system.css styles this as a floating card (full border + 22px
     radius + shadow). Strip all of it so the chat sits edgeless on the
     stage — otherwise a faint hairline traces the top/right/bottom. */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Chat bubbles follow the theme by default and are overridable — including
   opacity — from the Appearance panel's "User bubble" / "Agent bubble" swatches.
   A 0-opacity bubble = text with no background.

   IMPORTANT: the theme-following default is derived HERE, at the bubble element,
   via color-mix(... var(--bg-elev) ...) — NOT as a global token at :root. The
   Appearance theme override of --bg-elev lands on <body>, so a default computed
   at :root would bake in the *old* panel colour before the override applies
   (that was the "peach bubbles in every theme" bug). Resolving --bg-elev here,
   inside <body>, picks up the live themed panel colour. The "User/Agent bubble"
   swatches (--user-bubble-bg / --agent-bubble-bg) stay UNSET unless customised,
   so this fallback is what normally paints. */
.chat-bubble { background: var(--chat-bubble-bg, inherit) !important; }
.chat-bubble.user  { --chat-bubble-bg: var(--user-bubble-bg, color-mix(in oklab, var(--bg-elev) 82%, transparent)); }
.chat-bubble.agent { --chat-bubble-bg: var(--agent-bubble-bg, color-mix(in oklab, var(--bg-elev) 82%, transparent)); }
body.light-mode .chat-bubble.user  { --chat-bubble-bg: var(--user-bubble-bg, color-mix(in oklab, var(--bg-elev) 85%, transparent)); }
body.light-mode .chat-bubble.agent { --chat-bubble-bg: var(--agent-bubble-bg, color-mix(in oklab, var(--bg-elev) 85%, transparent)); }
#chat-header {
  border-bottom: var(--border-width) solid color-mix(in oklab, currentColor 8%, transparent) !important;
}
/* Messages stay fully visible all the way to the bottom of the panel and
   scroll *behind* the floating input area, which has a transparent footer
   and a translucent glass pill — so the pill and its buttons read as
   floating on top of the message bubbles. chat.js still reserves
   --chat-input-h + 24px of bottom padding so the newest message rests just
   above the pill at scroll-bottom (visible, never tucked under it); older
   bubbles pass behind the glass as you scroll. No fade mask: a mask would
   dissolve the bubbles before they reached the pill, which is the opposite
   of the floating-on-top effect we want here. */
/* Message bubbles get their own glass surface */
  #chat-panel .chat-bubble {
    /* Per-role bubble token (set by .chat-bubble.user/.agent above); the glass
       tint is the fallback for any bubble without a role class. */
    background: var(--chat-bubble-bg, color-mix(in oklab, currentColor 7%, transparent)) !important;
    border: var(--border-width) solid color-mix(in oklab, currentColor 12%, transparent) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border-radius: 14px !important;
    position: relative;
    overflow: hidden;
}
/* Grouped agent bubbles — consecutive prose from one reply "joins up" into a
   single glass stack: the touching corners square off so the run reads as one
   block (the tight gap comes from the .grouped-cont margin in app1.css; the
   rounded tail survives only at the very bottom of the run). Toggled by
   _applyGrouping in chat-bubble.js. Needs !important here to beat the 14px glass
   radius above. */
#chat-panel .chat-bubble.grouped-cont {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}
#chat-panel .chat-bubble.grouped-open {
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}
/* Input row sits directly on the page background — no wrapping glass surface */
#chat-input-area {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: 0 !important;
  position: absolute;
  overflow: visible;
  bottom: 6px;
}
/* —— The FLOATING GLASS pill skin — shared by all floating pills ——
   CHAT-PILL-SYNC (float skin): the web-chat pill (#chat-panel .chat-pill, over
   the message list), the ability-table search/chat pill (.ability-search-pill,
   above the per-agent + admin ability tables), the Gen UI prompt bar
   (#genui-prompt-row, over the iframe viewport), and the in-app browser pill
   (.browser-prompt-row, over the browser stage). The base .chat-pill (app1.css)
   paints an opaque pill with a hard border; these rules strip that to the
   transparent-tint + soft-border + blur glass look so all read as one matched
   control, each floating on top of its panel's content (which passes behind the
   glass). The tint is opaque enough that masked/blurred content behind never
   bleeds through. Geometry/behaviour stay in app1.css; per-panel float LAYOUT
   lives in each panel's own CSS — change the glass LOOK here so every floating
   pill updates together. */
#chat-panel .chat-pill,
.ability-search-pill.chat-pill,
#genui-prompt-row.chat-pill,
.browser-prompt-row.chat-pill,
#ac-pa-bar-row.chat-pill,
#ac-ds-pa-bar-row.chat-pill {
  background: color-mix(in oklab, currentColor 7%, transparent) !important;
  border: var(--border-width) solid color-mix(in oklab, currentColor 12%, transparent) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}
#chat-panel .chat-pill:focus-within,
.ability-search-pill.chat-pill:focus-within,
#genui-prompt-row.chat-pill:focus-within,
.browser-prompt-row.chat-pill:focus-within,
#ac-pa-bar-row.chat-pill:focus-within,
#ac-ds-pa-bar-row.chat-pill:focus-within {
  border-color: color-mix(in oklab, currentColor 22%, transparent) !important;
  background: color-mix(in oklab, currentColor 9%, transparent) !important;
}
#chat-panel .chat-pill.drag-over,
.ability-search-pill.chat-pill.drag-over,
#genui-prompt-row.chat-pill.drag-over,
.browser-prompt-row.chat-pill.drag-over,
#ac-pa-bar-row.chat-pill.drag-over,
#ac-ds-pa-bar-row.chat-pill.drag-over {
  border: 1px dashed color-mix(in oklab, currentColor 25%, transparent) !important;
  background: color-mix(in oklab, currentColor 10%, transparent) !important;
}
/* Chat composer pill — its OWN customisable background (Appearance → "Chat pill",
   --chat-pill-bg), independent of the other floating pills above. Left UNSET by
   default so it falls back to the SAME theme-derived panel tint as the message
   bubbles (color-mix on --bg-elev, resolved here inside <body> so it tracks the
   live theme — same reasoning as the bubble default), making the user bubble,
   agent bubble and chat pill match out of the box. Pin --chat-pill-bg (or set 0
   opacity) to recolour just this pill. The shared rules above still supply the
   border/blur/focus/drag feedback; these override only the background so a pinned
   colour survives focus + drag instead of flashing back to glass. */
#chat-panel .chat-pill,
#chat-panel .chat-pill:focus-within,
#chat-panel .chat-pill.drag-over {
  background: var(--chat-pill-bg, color-mix(in oklab, var(--bg-elev) 82%, transparent)) !important;
}
body.light-mode #chat-panel .chat-pill,
body.light-mode #chat-panel .chat-pill:focus-within,
body.light-mode #chat-panel .chat-pill.drag-over {
  background: var(--chat-pill-bg, color-mix(in oklab, var(--bg-elev) 85%, transparent)) !important;
}
/* App Settings page-assistant pill — unlike the other floating-glass pills (which
   sit over sparse or blurred content), this one floats over the busy admin
   settings tables, so the rows must NOT read through it. Override the glass tint
   with the OPAQUE panel surface so content behind is fully blocked; the shared
   rules above still give it the border + blur + focus/drag feedback. --bg-elev is
   theme-aware, so one rule covers light + dark. */
#ac-pa-bar-row.chat-pill,
#ac-pa-bar-row.chat-pill:focus-within,
#ac-pa-bar-row.chat-pill.drag-over,
#ac-ds-pa-bar-row.chat-pill,
#ac-ds-pa-bar-row.chat-pill:focus-within,
#ac-ds-pa-bar-row.chat-pill.drag-over {
  background: var(--bg-elev) !important;
}
/* Agent Settings page-assistant bar reuses the shared ability search/chat pill
   (.ability-search-pill). At the BOTTOM of that page it floats over the busy Agent
   Tools / Models tables, so give THIS placement the same opaque panel surface as
   #ac-pa-bar-row — scoped to #ac-as-pa-bar so the agent-card pill (over its sparse
   tab) stays translucent glass. */
#ac-as-pa-bar .ability-search-pill.chat-pill,
#ac-as-pa-bar .ability-search-pill.chat-pill:focus-within,
#ac-as-pa-bar .ability-search-pill.chat-pill.drag-over {
  background: var(--bg-elev) !important;
}
#chat-panel .chat-pill-input,
.ability-search-pill .chat-pill-input,
#genui-prompt-row .chat-pill-input,
.browser-prompt-row .chat-pill-input,
#ac-pa-bar-row .chat-pill-input,
#ac-ds-pa-bar-row .chat-pill-input {
  background: transparent !important;
}
/* —— Main panel: a real panel (glass) —— */
#main-panel {
  background: color-mix(in oklab, currentColor 4%, transparent) !important;
  border: var(--border-width) solid color-mix(in oklab, currentColor 10%, transparent) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  box-shadow:
    0 1px 0 color-mix(in oklab, currentColor 6%, transparent) inset,
    0 20px 60px -30px rgba(var(--shadow-rgb),0.6) !important;
  /* top/bottom 0 so the card aligns with the chat pane (header top / input
     pill bottom); left trimmed for a tighter gutter; right 1px to the handle. */
  margin: 0 1px 6px 2px !important;
  overflow: hidden !important;
  position: relative;
}
body.light-mode #main-panel {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset, /* KEEP (intentional): white inset glass top-highlight; ink-rgb is dark in light mode and would invert it */
    0 15px 50px -25px rgba(var(--shadow-rgb),0.18) !important;
}
/* Tighter on small screens — the outer margin ate too much width, squashing
   content. Pull panels closer to the screen edge and trim chat padding. */
@media (max-width: 800px) {
  #main-panel { margin: 2px !important; }
  #chat-messages-inner { padding-left: 8px; padding-right: 8px; }
  #chat-input-area { padding-left: 6px; padding-right: 6px; }
}

/* —— Dynamic cursor-follow spotlight — applied via JS to .spot elements ——
   Tinted with the theme accent (var(--brand-rgb)) so the glow follows whatever
   theme/preset is active in BOTH modes — no hard-coded blue/orange. */
.spot { position: relative; --spot-color: rgba(var(--brand-rgb), 0.12); }
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    var(--spot-radius, 320px) circle at var(--mx, -100%) var(--my, -100%),
    var(--spot-color, rgba(var(--brand-rgb), 0.12)) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: inherit;
}
.spot.spot-active::before { opacity: 1; }

/* Size variants */
#main-panel.spot { --spot-radius: 600px; --spot-color: rgba(var(--brand-rgb), 0.07); }
.main-tab.spot         { --spot-radius: 140px; }
.chat-bubble.spot      { --spot-radius: 240px; }

/* —— Cursor glow: a single full-viewport layer behind every panel ——
   This lives at the page-background level (below #stage), so the chat panel
   (transparent) and main panel (glass) never clip it. Its only edges are the
   screen edges, where the radial gradient has already faded to nothing — so
   there is no visible hard edge anywhere around the chat panel. Driven in
   viewport pixels by the pointermove handler below. */
#cursor-glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --glow-color: rgba(var(--brand-rgb), 0.06);
  background: radial-gradient(
    var(--glow-radius, 520px) circle at var(--gx, -100%) var(--gy, -100%),
    var(--glow-color, rgba(var(--brand-rgb), 0.06)) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}
#cursor-glow.is-on { opacity: 1; }
/* Glow colour follows the theme accent (var(--brand-rgb)) in both modes. */
@media (prefers-reduced-motion: reduce) { #cursor-glow { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .stargaze-genui { display: none; }
}

/* —— "Load earlier messages" button in chat —— */
.load-earlier-btn {
  text-align: center;
  font-size: 12px;
  color: var(--fg-3);
  cursor: pointer;
  padding: 6px 12px;
  margin: 4px 0;
  border-radius: 6px;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.load-earlier-btn:hover {
  background: rgba(var(--ink-rgb),0.06);
  color: var(--fg-1);
}
body.light-mode .load-earlier-btn:hover {
  background: rgba(var(--ink-rgb),0.04);
  color: var(--fg-1);
}

/* ── Chat pill focused: hide main app header + chat panel header ──
   When the chat pill is focused on MOBILE, the user is typing — reclaim
   vertical space by hiding the top chrome (#main-header) and the chat panel's
   own header (#chat-header + #chat-sub-header). Toggled by chat-ui.js
   focusin/focusout on the document. Only active at narrow (≤800px) viewports. */
@media (max-width: 800px) {
  body.chat-pill-focused #main-header,
  body.chat-pill-focused #chat-header,
  body.chat-pill-focused #chat-sub-header {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: max-height 0.15s ease, opacity 0.15s ease, padding 0.15s ease !important;
  }
}

/* Feedback styles moved to ui/shared/css/app1.css (dropdown-feedback-view).
   All panels share the login-panel look: 360px, 12px border-radius,
   var(--bg-elev) background, var(--border) border, login-panel shadow. */