/* Neva companion shell (src/neva/led/shell.js): base tokens, slots, the host
   and the particle anchor. The notch chrome itself (glass, toolbar, compact
   row, resident) is styled in src/neva/notch.css. Owner correction R3: there
   is ONE chrome; the LED setting only changes the visualizer in the Siri slot,
   so no LED strip, tab bar or second surface exists any more. */

.neva-led {
  --led-ink: #f0f1f5;
  --led-muted: #a4a6b0;
  --led-focus: #a9b9fc;
  --led-listening: #73d9ed;
  --led-thinking: #718bff;
  --led-speaking: #f28cc9;
  --led-paused: #d9c38a;
  --led-error: #ffd3d0;
  --led-accent: transparent;
  position: relative;
  z-index: 3;
  display: block;
  flex: none;
  width: 300px;
  height: 48px;
  color: var(--led-ink);
  font: 13px/1.4 var(--font-sans, "Inter", "SF Pro Display", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
  pointer-events: auto;
}
.neva-led *, .neva-led *::before, .neva-led *::after { box-sizing: border-box; }
.neva-led button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.neva-led button:focus-visible { outline: 2px solid var(--led-focus); outline-offset: 3px; }
.neva-led svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.neva-led[data-led-voice-state="listening"] { --led-accent: var(--led-listening); }
.neva-led[data-led-voice-state="thinking"] { --led-accent: var(--led-thinking); }
.neva-led[data-led-voice-state="speaking"] { --led-accent: var(--led-speaking); }
.neva-led[data-led-voice-state="paused"] { --led-accent: var(--led-paused); }
.neva-led[data-led-voice-state="muted"] { --led-accent: var(--led-muted); }
.neva-led[data-led-voice-state="error"] { --led-accent: var(--led-error); }

/* ---- the body: toolbar and the active page's slot (geometry in notch.css) ---- */
.neva-led__body {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.neva-led__slots {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 4px;
  border-radius: 16px;
  overflow: hidden;
}
.neva-led__panel {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff20 transparent;
}
.neva-led__mount { height: 100%; padding: 8px; }
.neva-led__note { margin: 0; color: var(--led-muted); font-size: 12px; }
.neva-led__announce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- expanded ---- */
.neva-led[data-mode="expanded"] { z-index: 400; }
.neva-led[data-mode="expanded"] .neva-led__body { opacity: 1; visibility: visible; }

/* The obstacle carries .neva-panel so dock.js's particle placement steers
   revealed particles around the open display. It must not look like one; the
   shell paints its left/width/height with the glass. */
.neva-led .neva-led__obstacle.neva-panel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 300px;
  height: 48px;
  min-width: 0;
  max-width: none;
  padding: 0;
  transform: none;
  opacity: 0;
  visibility: hidden;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  transition: none;
}
.neva-led .neva-led__obstacle.neva-panel.open { visibility: visible; }

/* ---- hidden (under an overlay): the box stays, and the docked particles' aim with it ---- */
.neva-led[data-hidden="true"] { visibility: hidden; }

/* ---- reduced motion / Gentle motion: same states, no travel ---- */
.neva-led.is-reduced, .neva-led.is-reduced * { transition-duration: .01ms !important; transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .neva-led, .neva-led * { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---- the host: ONE viewport root ----
   The published .neva-dock hosts the companion and is the single fixed root
   on every route (Home, Desk, Calendar, Progress, Continue, planner pages):
   centred on the bottom edge, never seated in a desk row, never hidden by a
   page. Its own bar, notch mask and legacy keys are retired. The shell paints
   only its transform, to hang the same glass from the top edge while a Desk
   window is maximized (owner reference neva-notch.js paint()). */
body .neva-root > .neva-dock.has-neva-led {
  position: fixed;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 0;
  display: flex !important;
  visibility: visible;
  width: auto;
  max-width: none;
  height: 48px;
  margin: 0;
  padding: 0 !important;
  gap: 0;
  align-items: flex-end;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  opacity: 1;
  filter: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 1450;
}
.neva-dock.has-neva-led::before { display: none !important; }
.neva-dock.has-neva-led > .neva-dock-group,
.neva-dock.has-neva-led > .neva-looks-chip { display: none !important; }

/* The particle anchor: an invisible, noninteractive compatibility box at the
   wave's centre. It keeps a real 38px box (dock.js measures it to aim and
   scale docked particles); nothing in it is ever painted or pressable. The
   one Bring out / Tuck in command is Context's "Show or hide Neva". */
.neva-led .neva-led__anchor { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: 0; pointer-events: none; }
.neva-led .neva-led__anchor > #nevaBtn {
  position: absolute;
  inset: 0;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  opacity: 0 !important;
  pointer-events: none !important;
  cursor: default;
  outline: none !important;
}
.neva-led #nevaStage {
  position: absolute;
  inset: 0;
  bottom: auto;
  width: 38px;
  height: 38px;
  margin: 0;
  /* No breathing scale: the anchor box is measured and must not move. */
  animation: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.neva-led #nevaStage > *, .neva-led #nevaStage::after { visibility: hidden !important; animation: none !important; }

/* R5: closed legacy surfaces are out of the tab order, not merely transparent.
   The Ask Neva bar (#nevaPromptBar, neva.prompt.js) and the closed flyouts
   (.neva-panel, e.g. Appearance #neva-panel-looks) fade to opacity 0 but kept
   their fields and keys focusable: invisible Tab stops between the page and
   the companion. visibility follows the fade (hidden only after it ends;
   visible at once on open, so show()'s focus still lands). Nothing reopens,
   moves or repaints the retired orb or dock menu. */
body.has-neva-led .neva-prompt:not(.is-open) { visibility: hidden; }
body.has-neva-led .neva-prompt {
  transition:
    opacity .5s var(--chrome-ease, cubic-bezier(.2,.6,.2,1)),
    filter .5s var(--chrome-ease, cubic-bezier(.2,.6,.2,1)),
    transform .5s var(--chrome-ease, cubic-bezier(.2,.6,.2,1)),
    visibility 0s linear .5s;
}
body.has-neva-led .neva-prompt.is-open { visibility: visible; transition-delay: 0s, 0s, 0s, 0s; }
body.has-neva-led .neva-panel:not(.open):not(.neva-led__obstacle) { visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
body.has-neva-led .neva-panel.open:not(.neva-led__obstacle) { visibility: visible; }

/* Other bottom surfaces sit above the notch (the clearance is painted by the shell). */
body.has-neva-led .neva-looks-panel { bottom: var(--neva-led-clearance, 118px); max-height: calc(100dvh - var(--neva-led-clearance, 118px) - 16px); }
body.has-neva-led .neva-prompt { bottom: max(132px, var(--neva-led-clearance, 0px)); }
body.has-neva-led:is([data-space="desk"], [data-space="focus"]) .neva-prompt { bottom: max(178px, var(--neva-led-clearance, 0px)); }