/* ─────────────────────────────────────────────────────────────────────
   ConvoStatus — Console (Rings · Solid · 5-digit Tokens)

   Palette, layout, and component styles come from the redesign mockup
   (redesign_files/index.html). Production-only blocks (auth panel, stats,
   suggestion card, legend, toast, system-prompt, debug SETUP cluster)
   sit underneath and adopt the same tokens.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --bg:               #141C19;
  --bg-deep:          #0E1614;
  --surface:          rgba(234, 232, 225, 0.04);
  --hairline:         rgba(234, 232, 225, 0.08);
  --hairline-strong:  rgba(234, 232, 225, 0.16);

  --ink:        #EAE8E1;
  --ink-soft:   rgba(234, 232, 225, 0.66);
  --ink-mute:   rgba(234, 232, 225, 0.46);
  --ink-faint:  rgba(234, 232, 225, 0.26);
  --ink-ghost:  rgba(234, 232, 225, 0.12);

  --neon:           #D9FF00;
  --opal:           #9AC2C5;
  --silent-col:     var(--opal);
  --human-col:      #9095E3;
  --device-col:     var(--neon);
  --responding-col: #22E4F5;
  --tokens-col:     var(--opal);
  --col:            var(--silent-col);
  --suggestion-col: var(--opal);

  --font-display: 'Bebas Neue', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --cam-size: 140px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background:
    radial-gradient(120% 80% at 50% 0%,   rgba(154,194,197,0.04) 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 100%, rgba(99,105,209,0.05) 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body.state-silent     { --col: var(--silent-col);     --suggestion-col: var(--opal); }
body.state-human      { --col: var(--human-col);      --suggestion-col: var(--human-col); }
body.state-device     { --col: var(--device-col);     --suggestion-col: var(--device-col); }
body.state-responding { --col: var(--responding-col); --suggestion-col: var(--responding-col); }

/* ── CTA / connect / disconnect ─────────────────────────────────────── */
.cta-primary {
  font-family: var(--font-mono);
  font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--neon); color: #0E1614;
  border: 1px solid var(--neon);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s, opacity 0.2s, color 0.2s, border-color 0.2s;
  box-shadow: 0 0 24px rgba(217,255,0,0.22);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-size: 0.75rem;
  padding: 0.85rem 1.75rem;
}
.cta-primary:hover:not(:disabled)  { background: #E8FF3A; box-shadow: 0 0 36px rgba(217,255,0,0.45); }
.cta-primary:active:not(:disabled) { transform: translateY(1px); }
.cta-primary:disabled              { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.cta-primary .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #0E1614;
}

.connect-big {
  align-self: flex-start;
  font-size: 0.85rem; padding: 1.1rem 2.4rem;
  margin-top: 0.6rem;
}

.cta-primary.stop-btn {
  background: transparent;
  border-color: rgba(230,74,23,0.4);
  color: #FF8866;
  box-shadow: none;
}
.cta-primary.stop-btn:hover:not(:disabled) {
  background: rgba(230,74,23,0.08);
  border-color: rgba(230,74,23,0.6);
  color: #FFB59A;
}

/* ── Cam thumb (live-only) ──────────────────────────────────────────── */
.cam-wrap {
  position: fixed;
  top: 1.5rem; right: 1.5rem;
  width: var(--cam-size);
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
body.connected .cam-wrap { opacity: 1; pointer-events: auto; }
.cam-wrap video {
  width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1);
  display: none;
}
.cam-wrap.live video { display: block; }
.cam-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.32; color: var(--ink);
}
.cam-wrap.live .cam-placeholder { display: none; }
.cam-tag {
  position: absolute; bottom: 6px; left: 8px;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.5rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
  background: rgba(14, 22, 20, 0.72);
  padding: 0.22rem 0.5rem; border-radius: 3px;
  backdrop-filter: blur(6px);
}
.cam-tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-faint);
}
body.connected .cam-tag::before {
  background: #FF5B3A;
  box-shadow: 0 0 6px rgba(255, 91, 58, 0.7);
  animation: rec-blink 1.4s ease-in-out infinite;
}
@keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ── Console layout ─────────────────────────────────────────────────── */
.var-console { width: 100%; height: 100vh; position: relative; }
.var-console .var-stage {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(440px, 1.05fr) minmax(420px, 1fr);
  padding: 3rem 3rem 3rem 4rem;
  gap: 2rem;
}
.con-left {
  display: flex; flex-direction: column; justify-content: center;
  gap: 1.6rem; min-width: 0;
  padding-right: 1rem;
}
.con-right {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

/* Stage-block visibility is controlled via [hidden] from JS. */
[id^="stage-"][hidden] { display: none !important; }

.con-hero {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3.4rem, 8vw, 6.8rem);
  line-height: 0.92; color: var(--ink); text-wrap: balance;
  letter-spacing: 0.005em;
}
.con-sub {
  color: var(--ink-soft); line-height: 1.55; max-width: 42ch;
  font-size: 1rem;
}
.con-hero-mid {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 0.96; color: var(--ink);
  margin-bottom: 0.4rem;
}

.warmup-bar {
  position: relative; height: 2px; width: 100%; max-width: 380px;
  background: var(--ink-ghost); overflow: hidden;
}
.warmup-bar .bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--col);
  transition: width 0.4s linear;
  box-shadow: 0 0 12px color-mix(in srgb, var(--col) 50%, transparent);
}
.warmup-pct {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.2em; color: var(--ink-mute);
  margin-top: -0.2rem;
}

/* Warmup step list */
.warm-steps { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.warm-steps li {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  transition: color 0.3s;
}
.warm-steps li .glyph {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.2px solid var(--ink-ghost);
  position: relative;
}
.warm-steps li.done { color: var(--ink-soft); }
.warm-steps li.done .glyph {
  background: var(--col); border-color: var(--col);
  box-shadow: 0 0 10px color-mix(in srgb, var(--col) 45%, transparent);
}
.warm-steps li.done .glyph::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--bg);
  clip-path: polygon(15% 50%, 40% 75%, 85% 25%, 75% 15%, 40% 55%, 25% 40%);
}
.warm-steps li.active { color: var(--ink); }
.warm-steps li.active .glyph {
  border-color: var(--col);
  animation: glyph-spin 1s linear infinite;
}
.warm-steps li.active .glyph::before {
  content: ""; position: absolute; inset: -1.2px;
  border-radius: 50%;
  border: 1.2px solid transparent;
  border-top-color: var(--col);
}
@keyframes glyph-spin { to { transform: rotate(360deg); } }
.warm-steps li .pct {
  font-size: 0.65rem; color: var(--ink-faint); letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.warm-steps li.done .pct { color: var(--ink-soft); }

/* Live left column */
.con-live { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.con-pred {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(4rem, 9.5vw, 8.4rem);
  line-height: 0.92; color: var(--col); text-transform: uppercase;
  letter-spacing: 0.005em;
  text-shadow: 0 0 60px color-mix(in srgb, var(--col) 18%, transparent);
  transition: color 0.5s ease, text-shadow 0.5s ease;
  text-wrap: balance;
}
.con-slider { width: min(580px, 100%); }

/* ── Native-mode strip-down ─────────────────────────────────────────────
   Hide every SAA-specific surface so the comparison-reel viewer focuses on
   the load-bearing fact: OpenAI's server VAD is segmenting turns, the mic
   is always open, and the AI will end up responding to its own playback.
   Orb + sound bars + the big LISTENING/RESPONDING label stay. */
.native-eyebrow {
  display: none;                            /* shown only in mode-native */
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
body.mode-native .native-eyebrow { display: inline-block; }
body.mode-native .con-slider,
body.mode-native .stats,
body.mode-native .tokens-block,
body.mode-native .suggestion,
body.mode-native .legend { display: none !important; }

/* ── Orb (Rings) ────────────────────────────────────────────────────── */
.orb-wrap {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  width: min(56vh, 520px);
  height: min(56vh, 520px);
}
.orb-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  transition: border-color 0.5s, opacity 0.5s;
}
.orb-ring.r1 { inset: 0;     border: 1.25px solid var(--col); opacity: 0.32; animation: ring-breathe 3.4s ease-in-out infinite; }
.orb-ring.r2 { inset: -22px; border: 1px    solid var(--col); opacity: 0.16; animation: ring-breathe 3.4s ease-in-out infinite 0.5s; }
.orb-ring.r3 { inset: -48px; border: 0.75px solid var(--col); opacity: 0.08; animation: ring-breathe 3.4s ease-in-out infinite 1s; }
@keyframes ring-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.025); }
}

.orb.body {
  width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, color-mix(in srgb, var(--col) 22%, transparent), transparent 62%),
    radial-gradient(circle at 64% 70%, rgba(0,0,0,0.55), transparent 70%),
    radial-gradient(circle at center, color-mix(in srgb, var(--col) 4%, transparent) 0%, rgba(14, 22, 20, 0.7) 100%);
  border: 1.25px solid var(--col);
  transition: border-color 0.5s, background 0.5s, box-shadow 0.5s;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.orb.active  { animation: orb-pulse 2.4s ease-in-out infinite; }
.orb.warming { animation: orb-warm 1.8s ease-in-out infinite; }
@keyframes orb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--col) 18%, transparent); }
  50%       { box-shadow: 0 0 80px 18px color-mix(in srgb, var(--col) 14%, transparent); }
}
@keyframes orb-warm {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--col) 12%, transparent); transform: scale(1); }
  50%       { box-shadow: 0 0 36px 6px color-mix(in srgb, var(--col) 18%, transparent); transform: scale(1.012); }
}
.orb .sheen {
  position: absolute; top: 8%; left: 18%;
  width: 36%; height: 22%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.08), transparent 70%);
  filter: blur(6px); pointer-events: none;
}

/* Brand icon — visible only during standby (idle + permissions, before the
   SDK connects). Once `body.connected`, the orb hands the stage over to its
   bars + state colour and the icon fades out. */
.orb .orb-icon {
  width: 46%;
  height: auto;
  opacity: 0;
  fill: var(--col);
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--col) 30%, transparent));
  transition: opacity 0.6s ease, fill 0.5s ease, filter 0.5s ease;
  pointer-events: none;
  position: absolute;
}
body:not(.connected) .orb .orb-icon {
  opacity: 0.85;
  animation: orb-icon-breathe 4.2s ease-in-out infinite;
}
@keyframes orb-icon-breathe {
  0%, 100% { opacity: 0.5;  transform: scale(1);     }
  50%       { opacity: 0.95; transform: scale(1.025); }
}
.orb .bars {
  display: flex; align-items: center; gap: 6px; height: 56px;
  opacity: 0;
  transition: opacity 0.3s;
}
.orb .bars.visible { opacity: 1; }
.orb .bars span {
  width: 4px; border-radius: 2px;
  background: var(--col);
  box-shadow: 0 0 8px color-mix(in srgb, var(--col) 35%, transparent);
  animation: bar-dance 0.55s ease-in-out infinite alternate;
  height: 8px;
}
.orb .bars span:nth-child(1) { animation-delay: 0s;    animation-duration: 0.5s; }
.orb .bars span:nth-child(2) { animation-delay: 0.08s; animation-duration: 0.7s; }
.orb .bars span:nth-child(3) { animation-delay: 0.16s; animation-duration: 0.4s; }
.orb .bars span:nth-child(4) { animation-delay: 0.24s; animation-duration: 0.6s; }
.orb .bars span:nth-child(5) { animation-delay: 0.32s; animation-duration: 0.5s; }
@keyframes bar-dance {
  from { height: 8px; }
  to   { height: 44px; }
}

/* ── Slider (Solid) ─────────────────────────────────────────────────── */
.csl { display: flex; flex-direction: column; gap: 0.7rem; user-select: none; }
.csl-labels {
  display: flex; align-items: baseline; justify-content: space-between;
}
.csl-labels .mono-tiny { display: block; margin-bottom: 0.2rem; }
.csl-labels .lbl-val {
  font-family: var(--font-mono); font-size: 1rem; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  color: var(--col);
  transition: color 0.4s;
}
.csl-labels .lbl-val[data-active="0"] { color: var(--ink-faint); }
.csl-labels .lbl-val.thresh { color: var(--ink-soft); }
.csl-labels .lbl-right { text-align: right; }
.mono-tiny {
  font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint);
}

.solid-track {
  position: relative; height: 28px;
  cursor: pointer; touch-action: none;
  border-radius: 4px;
}
.solid-track-bg {
  position: absolute; inset: 0;
  background: var(--ink-ghost);
  border-radius: 4px;
  overflow: hidden;
}
.solid-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--col) 55%, transparent),
    color-mix(in srgb, var(--col) 92%, transparent));
  border-radius: 4px;
  transition: width 0.42s cubic-bezier(.2,.8,.2,1), background 0.5s;
  pointer-events: none;
}
.solid-thumb {
  position: absolute; top: -4px; bottom: -4px;
  left: 85%;
  width: 4px;
  background: var(--ink);
  transform: translateX(-50%);
  border-radius: 2px;
  cursor: grab;
  box-shadow: 0 0 0 1px var(--bg), 0 4px 12px rgba(0,0,0,0.4);
  outline: none;
}
.solid-thumb:focus-visible {
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 4px rgba(217,255,0,0.20), 0 4px 12px rgba(0,0,0,0.4);
}
.solid-thumb:active { cursor: grabbing; }
.solid-thumb::before {
  /* hit-target enlargement for the slim thumb */
  content: ""; position: absolute; inset: -6px -10px;
}
.solid-thumb .thumb-val {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--ink); font-variant-numeric: tabular-nums;
  background: rgba(20, 28, 25, 0.95);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  padding: 0.1rem 0.35rem; white-space: nowrap;
  pointer-events: none;
}

/* ── Tokens block (5-digit) ─────────────────────────────────────────── */
.tokens-block {
  display: flex; flex-direction: column; gap: 0.2rem;
  margin-top: 0.6rem;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.tokens-block.visible { opacity: 1; }
.tokens-count {
  font-family: var(--font-mono); font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-size: 2.4rem;
  letter-spacing: -0.02em; color: var(--tokens-col);
  text-shadow: 0 0 24px color-mix(in srgb, var(--tokens-col) 22%, transparent);
  line-height: 1;
  transition: color 0.4s, text-shadow 0.4s;
}
.tokens-label {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute);
}
@keyframes tick-flash {
  0%   { opacity: 1; }
  40%  { opacity: 0.4; }
  100% { opacity: 1; }
}
.tokens-count.ticking { animation: tick-flash 0.12s ease-out; }

/* ── Stats row (compact, lives inside live column) ──────────────────── */
.stats {
  display: flex;
  gap: 1.8rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}
.stat { display: flex; flex-direction: column; gap: 0.25rem; }
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stat-val {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ── System Prompt (debug only) ─────────────────────────────────────── */
.prompt-block[hidden] { display: none; }
.prompt-block {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.prompt-block-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.prompt-block-label .opt {
  color: var(--ink-faint);
  text-transform: lowercase;
  letter-spacing: 0.06em;
}
.prompt-block textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 3.6rem;
  outline: none;
  transition: border-color 0.2s, opacity 0.2s;
}
.prompt-block textarea::placeholder { color: rgba(255, 255, 255, 0.22); }
.prompt-block textarea:focus { border-color: rgba(217, 255, 0, 0.45); }
.prompt-block textarea:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Floating status cluster ──────────────────────────────────────────── */
.float-setup {
  position: fixed;
  top: 1.5rem; left: 2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  z-index: 12;
  pointer-events: none;
}
.float-setup > * { pointer-events: auto; }
.float-setup #btnSettings { display: none; }
body.debug .float-setup #btnSettings { display: inline-flex; }
.float-setup .pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(13, 21, 18, 0.5);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.float-setup .pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: background 0.4s, box-shadow 0.4s;
}
body.connected .float-setup .pill .dot {
  background: var(--device-col);
  box-shadow: 0 0 8px rgba(217,255,0,0.55);
}
.float-setup .topbar-btn {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: rgba(13, 21, 18, 0.5);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color 0.2s, border-color 0.2s, background 0.2s, opacity 0.2s;
}
.float-setup .topbar-btn:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--hairline-strong);
  background: rgba(13, 21, 18, 0.7);
}
.float-setup .topbar-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.float-setup .topbar-btn.is-active {
  color: var(--neon);
  border-color: rgba(217, 255, 0, 0.45);
  background: rgba(217, 255, 0, 0.08);
}

/* ── Selection view (debug entry screen — #stage-select) ────────────── */
.select-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin: 0.2rem 0;
}
.provider-card {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.85rem 0.9rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.provider-card:hover { border-color: var(--hairline-strong); background: rgba(234,232,225,0.06); }
.provider-card:active { transform: translateY(1px); }
.provider-card.is-active {
  border-color: var(--neon);
  background: rgba(217,255,0,0.06);
  box-shadow: 0 0 20px rgba(217,255,0,0.14);
}
.provider-card .pc-label {
  font-family: var(--font-display); font-size: 1.4rem; line-height: 1;
  color: var(--ink); letter-spacing: 0.02em;
}
.provider-card .pc-sub {
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
}
.provider-card .pc-model {
  font-family: var(--font-mono); font-size: 0.65rem;
  color: var(--ink-faint); word-break: break-all; line-height: 1.3;
}
.provider-card .pc-tag {
  margin-top: 0.1rem;
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.provider-card.is-active .pc-tag { color: var(--neon); }

.select-config { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.4rem; }
.cfg-row { display: flex; align-items: center; gap: 0.9rem; }
.cfg-field { display: flex; flex-direction: column; gap: 0.3rem; cursor: text; }
.cfg-label {
  font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
}
.cfg-row > .cfg-label { min-width: 5.5rem; }
.cfg-label .req { color: var(--neon); }
.cfg-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.select-config select,
.select-config input,
.select-config textarea {
  padding: 0.5rem 0.7rem;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s, opacity 0.2s;
}
.select-config select { flex: 1; cursor: pointer; }
.select-config textarea { resize: vertical; min-height: 2.6rem; line-height: 1.45; }
.select-config input::placeholder,
.select-config textarea::placeholder { color: rgba(255,255,255,0.22); }
.select-config select:focus,
.select-config input:focus,
.select-config textarea:focus { border-color: rgba(217,255,0,0.45); }
.select-config select:disabled,
.select-config input:disabled,
.select-config textarea:disabled { opacity: 0.55; cursor: not-allowed; }

/* Segmented control (SAA-driven / Native) */
.seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.seg button {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  background: transparent; color: var(--ink-mute);
  border: none; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.seg button + button { border-left: 1px solid var(--hairline); }
.seg button:hover { color: var(--ink); }
.seg button.is-active { background: rgba(217,255,0,0.12); color: var(--neon); }

#btnStartSelected { align-self: flex-start; margin-top: 0.8rem; }

@media (max-width: 720px) {
  .select-grid { grid-template-columns: 1fr; }
  .cfg-keys { grid-template-columns: 1fr; }
}

/* ── Suggestion card (guided walkthrough) ───────────────────────────── */
.suggestion {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  max-width: min(46rem, calc(100vw - var(--cam-size) - 7rem));
  padding: 1.1rem 1.6rem;
  text-align: center;
  background: rgba(14, 22, 20, 0.92);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(10px);
  transition: opacity 0.5s ease, border-color 0.5s, color 0.5s, transform 0.4s;
}
.suggestion.visible { opacity: 1; }
.suggestion-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.suggestion-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  color: var(--suggestion-col);
  letter-spacing: -0.005em;
  line-height: 1.25;
  transition: opacity 0.3s, transform 0.3s, color 0.5s;
}
.suggestion-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.35;
}
.suggestion-text.changing { opacity: 0; transform: translateY(-4px); }

/* ── Bottom controls (legend + disconnect) ──────────────────────────── */
.bottom-controls {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 2rem 1.5rem 3rem;
  z-index: 10;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
body.connected .bottom-controls { opacity: 1; pointer-events: auto; }

.legend {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 0.3s, opacity 0.3s;
  opacity: 0.55;
}
.legend-item.is-active {
  color: var(--ink);
  opacity: 1;
}
.legend-swatch {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.3s;
}
.legend-item[data-state="silent"] { --swatch: var(--silent-col); }
.legend-item[data-state="human"]  { --swatch: var(--human-col);  }
.legend-item[data-state="device"] { --swatch: var(--device-col); }
.legend-item.is-active .legend-swatch {
  box-shadow: 0 0 10px color-mix(in srgb, var(--swatch) 70%, transparent);
}

/* ── Toast ──────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  background: rgba(230,74,23,0.12);
  border: 1px solid rgba(230,74,23,0.5);
  color: #FFB59A;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  max-width: 60vw;
  text-align: center;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.toast.visible { opacity: 1; pointer-events: auto; }

/* ── Stage fade-in ──────────────────────────────────────────────────── */
.stage-anim { animation: stage-fade 0.65s cubic-bezier(.2,.8,.2,1) both; }
@keyframes stage-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .var-console .var-stage { padding: 2.5rem 2rem 2.5rem 2.5rem; }
  .cam-wrap { top: 1rem; right: 1rem; --cam-size: 120px; }
  .auth { top: 4rem; left: 1rem; width: clamp(300px, 50vw, 420px); padding: 0.95rem 1.15rem; }
  .stats { gap: 1.25rem; }
  .stat-val { font-size: 0.85rem; }
  .prompt-block textarea { font-size: 0.86rem; min-height: 3.2rem; }
}

@media (max-width: 880px) {
  .var-console .var-stage {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
  }
  .con-right { display: none; }
}

@media (max-width: 760px) {
  .suggestion {
    max-width: calc(100vw - 2rem);
    padding-inline: 1.1rem;
  }
  .auth { width: calc(100vw - 2.4rem); }
}