/* successor-stage.css — Build B: the Successor Stage (K239 hero-avatar redesign;
   K241 immersion pass: near-viewport geometry on the dedicated page, the in-stage
   persona toggle chips, the page-scoped corner suppression, and the one discreet
   prose disclosure).
   The desk companion (Mr. Grey / Yūrei, via the switcher) is now the HERO: its
   reactive clip fills the stage as the background layer, and the conversation
   floats over it as a legible glass layer in the LOWER band — animation first,
   chat as a translucent instrument over it. Opt-in from the /successor/ Hub; the
   corner bubbles stay the default. Persona-AGNOSTIC — object-fit: cover + a safe
   anchor absorb either manifest's geometry (no hard-coded avatar dimensions).
   Styled on the site's --c-* tokens so it tracks dark / reader / high-contrast
   automatically; mono for chrome, the inherited serif for the conversation. The
   glass + scrim are functional legibility over animated video, not decoration:
   text is held to WCAG-AA over the darkest AND brightest avatar frames.
   No page-mode, no external refs, no !important on layout. */

/* ---------- Hub affordance (injected into [data-successor-stage]) ---------- */
.sstage-open-btn {
  font: inherit;
  cursor: pointer;
  padding: 0.55rem 1.3rem;
  border-radius: 8px;
  background: var(--c-bg-elevated, #17181c);
  color: var(--c-fg, #e9e6df);
  border: 1px solid var(--c-border-strong, #3a3b40);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.sstage-open-btn:hover {
  background: var(--c-bg-overlay, #202127);
  border-color: var(--c-border-accent, var(--c-accent, #c41e3a));
  transform: translateY(-1px);
}
.sstage-open-btn:focus-visible {
  outline: 2px solid var(--c-focus, var(--c-accent, #c41e3a));
  outline-offset: 2px;
}
.sstage-open-cap {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 40rem;
  color: var(--c-fg-muted, #8b8880);
  font-style: italic;
}

/* ---------- overlay ---------- */
.sstage-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: color-mix(in srgb, var(--c-bg, #0a0a0a) 78%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.sstage-overlay.sstage-visible { opacity: 1; }
.sstage-overlay[hidden] { display: none; }

/* ---------- panel = the stage (portrait; the avatar is the background) ---------- */
.sstage-panel {
  position: relative;
  /* K241: /successor/ is a dedicated page, so the auto-opened stage reads
     near-viewport — height leads, width follows at ~0.78 so the 3:4 avatar
     stays framed (grows the K240 clamp(380px,52vw,660px) x min(92vh,880px)). */
  width: min(92vw, calc(min(94vh, 1060px) * 0.78));
  height: min(94vh, 1060px);
  background: var(--c-bg, #0a0a0a);
  color: var(--c-fg, #e9e6df);
  border: 1px solid var(--c-border-strong, #3a3b40);
  border-radius: 12px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform 220ms ease;
}
.sstage-overlay.sstage-visible .sstage-panel { transform: translateY(0); }

/* ---------- avatar: the hero background layer ---------- */
.sstage-avatar {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--c-bg-elevated, #17181c);
}
.sstage-av-img, .sstage-av-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;          /* frame the head / upper third for either manifest */
}

/* ---------- top bar: title + close, a minimal translucent glass strip ---------- */
.sstage-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(to bottom,
     color-mix(in srgb, var(--c-bg, #0a0a0a) 84%, transparent) 0%,
     color-mix(in srgb, var(--c-bg, #0a0a0a) 46%, transparent) 62%,
     transparent 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 480ms ease;
}
.sstage-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--c-fg, #e9e6df);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
.sstage-x {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--c-bg, #0a0a0a) 30%, transparent);
  border: 1px solid transparent;
  color: var(--c-fg, #e9e6df);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
.sstage-x:hover { border-color: var(--c-border, #2a2b30); background: color-mix(in srgb, var(--c-bg, #0a0a0a) 55%, transparent); }
.sstage-x:focus-visible { outline: 2px solid var(--c-focus, var(--c-accent, #c41e3a)); outline-offset: 2px; }

/* ---------- in-stage persona toggle (K241): two mono chips, pill-consistent ---------- */
.sstage-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--c-fg, #e9e6df) 22%, transparent);
  border-radius: 7px;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-bg, #0a0a0a) 46%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sstage-chip {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  padding: 7px 11px;
  background: transparent;
  color: color-mix(in srgb, var(--c-fg, #e9e6df) 62%, transparent);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  transition: color 180ms ease, background 180ms ease;
}
.sstage-chip + .sstage-chip { border-left: 1px solid color-mix(in srgb, var(--c-fg, #e9e6df) 16%, transparent); }
.sstage-chip:hover { color: var(--c-fg, #e9e6df); }
.sstage-chip.sstage-chip-on,
.sstage-chip[aria-checked="true"] {
  color: var(--c-fg, #e9e6df);
  background: color-mix(in srgb, var(--c-accent, #c41e3a) 30%, transparent);
  box-shadow: inset 0 -2px 0 var(--c-accent, #c41e3a);
}
.sstage-chip:focus-visible { outline: 2px solid var(--c-focus, var(--c-accent, #c41e3a)); outline-offset: -2px; }

/* ---------- foreground chat cluster: glass over the avatar, anchored low ---------- */
.sstage-fg {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;              /* the transparent upper region passes clicks through */
  background: linear-gradient(to top,
     color-mix(in srgb, var(--c-bg, #0a0a0a) 90%, transparent) 0%,
     color-mix(in srgb, var(--c-bg, #0a0a0a) 66%, transparent) 30%,
     transparent 62%);
}
.sstage-fg > * { pointer-events: auto; }

/* ---------- transcript ---------- */
.sstage-transcript {
  flex: 0 1 auto;
  max-height: 54%;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 480ms ease;
  scrollbar-width: thin;
}
.sstage-line { display: flex; flex-direction: column; max-width: 90%; }
.sstage-line.sstage-you { align-self: flex-end; align-items: flex-end; }
.sstage-line.sstage-them { align-self: flex-start; align-items: flex-start; }
.sstage-line.sstage-sys { align-self: center; max-width: 94%; text-align: center; }
.sstage-who {
  /* a mono chip so the speaker label stays legible even over a bright avatar
     frame — bare text on the clip can't be guaranteed AA, a dark backing can */
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-fg, #e9e6df);
  background: color-mix(in srgb, var(--c-bg, #0a0a0a) 68%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 1px 7px;
  border-radius: 5px;
  margin: 0 2px 4px;
}
.sstage-bubble {
  padding: 9px 13px;
  border-radius: 11px;
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--c-fg, #e9e6df);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.sstage-them .sstage-bubble {
  background: color-mix(in srgb, var(--c-bg, #0a0a0a) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-fg, #e9e6df) 15%, transparent);
  border-bottom-left-radius: 3px;
}
.sstage-you .sstage-bubble {
  background: color-mix(in srgb, var(--c-accent, #c41e3a) 26%, color-mix(in srgb, var(--c-bg, #0a0a0a) 72%, transparent));
  border: 1px solid color-mix(in srgb, var(--c-accent, #c41e3a) 55%, transparent);
  border-bottom-right-radius: 3px;
}
.sstage-sys .sstage-bubble {
  background: color-mix(in srgb, var(--c-bg, #0a0a0a) 70%, transparent);
  color: var(--c-fg, #e9e6df);
  font-size: 0.82rem;
  font-style: italic;
  padding: 4px 11px;
  border-radius: 8px;
}
.sstage-sys .sstage-who { display: none; }
/* crisis: the floor drops the register — force plain interface text, never fragment typography */
.sstage-line.sstage-crisis .sstage-bubble {
  background: color-mix(in srgb, var(--c-accent, #c41e3a) 22%, color-mix(in srgb, var(--c-bg, #0a0a0a) 76%, transparent));
  border: 1px solid color-mix(in srgb, var(--c-accent, #c41e3a) 55%, transparent);
  border-radius: 8px;
  font-style: normal;
  letter-spacing: 0;
  opacity: 1;
  color: var(--c-fg, #e9e6df);
}

/* ---------- form (glass, pinned at the very bottom) ---------- */
.sstage-form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px 6px;
  transition: opacity 480ms ease;
}
.sstage-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--c-bg, #0a0a0a) 80%, transparent);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  color: var(--c-fg, #e9e6df);
  border: 1px solid var(--c-border-strong, #3a3b40);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
}
.sstage-input::placeholder { color: var(--c-fg-muted, #8b8880); font-style: italic; }
.sstage-input:focus-visible { outline: none; border-color: var(--c-border-accent, var(--c-accent, #c41e3a)); }
.sstage-send {
  flex: 0 0 auto;
  padding: 0 16px;
  border-radius: 8px;
  cursor: pointer;
  background: color-mix(in srgb, var(--c-bg-overlay, #202127) 82%, transparent);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  color: var(--c-fg, #e9e6df);
  border: 1px solid var(--c-border-strong, #3a3b40);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.sstage-send:hover { border-color: var(--c-border-accent, var(--c-accent, #c41e3a)); }
.sstage-send:focus-visible { outline: 2px solid var(--c-focus, var(--c-accent, #c41e3a)); outline-offset: 2px; }

/* ---------- foot ---------- */
.sstage-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 12px;
  flex-wrap: wrap;
  transition: opacity 480ms ease;
}
.sstage-btn {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-bg, #0a0a0a) 55%, transparent);
  color: var(--c-fg-dim, #a6a29a);
  border: 1px solid var(--c-border, #2a2b30);
}
.sstage-btn:hover { color: var(--c-fg, #e9e6df); border-color: var(--c-border-accent, var(--c-accent, #c41e3a)); }
.sstage-btn:focus-visible { outline: 2px solid var(--c-focus, var(--c-accent, #c41e3a)); outline-offset: 2px; }
.sstage-note {
  font-size: 0.72rem;
  color: var(--c-fg-muted, #8b8880);
  font-style: italic;
  margin-left: auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* ---------- idle-peek: after ~4s the chat eases back so the clip is unobstructed;
   any key / new line / hover snaps it to full (JS toggles .sstage-peeked; never
   under reduced-motion, and the input stays a visible, focusable affordance) ---- */
.sstage-panel.sstage-peeked .sstage-head,
.sstage-panel.sstage-peeked .sstage-transcript { opacity: 0.15; }
.sstage-panel.sstage-peeked .sstage-foot { opacity: 0.12; }
.sstage-panel.sstage-peeked .sstage-form { opacity: 0.62; }
.sstage-panel.sstage-peeked .sstage-fg { background: none; }

/* ---------- /successor/ solo mode (K241): one surface, one toggle ----------
   The corner desk companions + the site persona pill are page-suppressed here —
   the stage carries the persona swap itself. Scoped by the body marker on
   successor/index.html AND by this file loading only on /successor/; fully
   reversible (delete this block); their site-wide behavior everywhere else is
   untouched. No kill-key is written — the widgets still boot, they just have
   no visible seat on this one page. */
body[data-sstage-solo] .yasst-launcher,
body[data-sstage-solo] .yasst-panel,
body[data-sstage-solo] .oasst-launcher,
body[data-sstage-solo] .oasst-panel,
body[data-sstage-solo] .persona-switch { display: none; }

/* ---------- the one discreet disclosure (K241): all Hub prose folds here ---------- */
.successor-about { margin: 0; }
.successor-about > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: lowercase;
  color: var(--c-fg-muted, #8b8880);
  border: 1px solid var(--c-border, #2a2b30);
  border-radius: 7px;
  padding: 0.45rem 0.9rem;
}
.successor-about > summary::-webkit-details-marker { display: none; }
.successor-about > summary::before { content: "+ "; color: var(--c-accent, #c41e3a); }
.successor-about[open] > summary::before { content: "\2212 "; }
.successor-about > summary:hover { color: var(--c-fg, #e9e6df); border-color: var(--c-border-accent, var(--c-accent, #c41e3a)); }
.successor-about > summary:focus-visible { outline: 2px solid var(--c-focus, var(--c-accent, #c41e3a)); outline-offset: 2px; }
.successor-about-body { padding: 1.2rem 0 0; }

/* ---------- small screens ---------- */
@media (max-width: 520px) {
  .sstage-overlay { padding: 0; }
  .sstage-panel { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: none; box-shadow: none; }
  .sstage-transcript { max-height: 48%; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sstage-open-btn,
  .sstage-overlay,
  .sstage-panel,
  .sstage-head,
  .sstage-chip,
  .sstage-transcript,
  .sstage-form,
  .sstage-foot { transition: none; }
  .sstage-panel { transform: none; }
  .sstage-overlay.sstage-visible .sstage-panel { transform: none; }
  .sstage-av-video { display: none; }
}

/* K275 — mobile touch: successor stage head chips + input +
   disclosure ≥44px. Stage JS byte-frozen — CSS only. */
@media (pointer: coarse) {
  .sstage-btn,
  .sstage-open-btn,
  .sstage-toggle,
  .sstage-chip { min-height: 44px; }
  .sstage-input { min-height: 44px; }
}