/* ── Design tokens ─────────────────────────────────────────────────────────── */

:root {
  /* Brand / state colors (mic + blob states) */
  --blob-blue:     #5B8DEF;   /* idle / primary */
  --blob-red:      #F0617A;   /* listening */
  --blob-yellow:   #F5B544;   /* processing / requesting */
  --blob-green:    #34C29E;   /* connected / success */
  --blob-purple:   #B06AD9;   /* speaking */

  /* Soft pastel light theme */
  --bg:            #FFF7FB;   /* page base (pink-cream) */
  --surface:       #FFFFFF;   /* cards / panels */
  --surface-2:     #FBF8FE;   /* inputs / insets */
  --text:          #3D3A52;   /* headings */
  --text-70:       #5E5A78;
  --text-54:       #8E8AA6;
  --text-30:       #BCB9D0;
  --border:        rgba(80,60,100,0.12);
  --shadow:        0 18px 44px rgba(150,110,150,0.18);
  --shadow-sm:     0 6px 18px rgba(150,110,150,0.12);

  /* Scene pastels */
  --pink-1:        #FFE6EE;
  --pink-2:        #FBD0DF;
  --pink-3:        #F7B9CD;

  --error:         #E0556E;
  --success:       var(--blob-green);
  --primary:       var(--blob-blue);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Auth view ─────────────────────────────────────────────────────────────── */

#auth-view {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* soft sunburst base */
  background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #FFF1F6 50%, #FBE0EA 100%);
}

/* Sunburst rays */
.auth-scene { position: absolute; inset: 0; pointer-events: none; }
.auth-scene::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(
    from 0deg at 50% 40%,
    rgba(255,255,255,0) 0deg 7deg,
    rgba(255,193,214,0.22) 7deg 14deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
}

/* Fluffy clouds */
.cloud {
  position: absolute;
  background: rgba(255,255,255,0.78);
  border-radius: 999px;
  filter: blur(1px);
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.cloud-1 { width: 120px; height: 34px; top: 14%;  left: 16%; }
.cloud-1::before { width: 52px; height: 52px; top: -22px; left: 18px; }
.cloud-1::after  { width: 38px; height: 38px; top: -14px; left: 60px; }
.cloud-2 { width: 150px; height: 40px; top: 9%;  right: 12%; opacity: 0.85; }
.cloud-2::before { width: 60px; height: 60px; top: -26px; left: 26px; }
.cloud-2::after  { width: 44px; height: 44px; top: -16px; left: 74px; }
.cloud-3 { width: 90px;  height: 26px; top: 26%; left: 8%; opacity: 0.7; }
.cloud-3::before { width: 40px; height: 40px; top: -16px; left: 14px; }
.cloud-3::after  { width: 30px; height: 30px; top: -10px; left: 44px; }

/* Bottom hill */
.hill {
  position: absolute;
  bottom: 0;
  left: -8%;
  width: 116%;
  height: 150px;
  background: linear-gradient(180deg, #FBD3E1 0%, #F6BDD0 100%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.auth-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 392px;
  padding: 24px 18px;
}

/* Blob character shown above auth card */
.auth-blob-wrap {
  margin-bottom: -22px;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.auth-card {
  background: var(--surface);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 40px 30px 30px;
  width: 100%;
}

.auth-card h1 {
  font-size: 25px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  text-align: center;
  letter-spacing: -0.3px;
}

.auth-card .subtitle {
  text-align: center;
  color: var(--text-54);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 auto 26px;
  max-width: 300px;
}

/* Icon inputs */
.input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 0 14px;
  margin-bottom: 14px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.input-wrap:focus-within {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(91,141,239,0.14);
}

.input-icon { color: var(--text-30); flex-shrink: 0; }
.input-wrap:focus-within .input-icon { color: var(--primary); }

.input-wrap input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 0;
  font-size: 15px;
  color: var(--text);
  font-family: inherit;
}
.input-wrap input::placeholder { color: var(--text-30); }

.pw-toggle {
  background: none;
  border: none;
  color: var(--text-30);
  cursor: pointer;
  display: flex;
  padding: 4px;
  flex-shrink: 0;
}
.pw-toggle:hover, .pw-toggle.active { color: var(--text-54); }

.btn-primary {
  width: 100%;
  padding: 15px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s, transform 0.1s, box-shadow 0.2s;
  margin-top: 6px;
  font-family: inherit;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 20px rgba(91,141,239,0.32);
}

.btn-primary:hover   { background: #4a7ce8; }
.btn-primary:active  { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-54);
}

.auth-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
  color: var(--text-30);
  font-size: 12px;
  font-weight: 600;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Google as a soft circular social button */
.btn-google {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  box-shadow: var(--shadow-sm);
}

.btn-google:hover { border-color: rgba(91,141,239,0.4); box-shadow: 0 8px 22px rgba(150,110,150,0.20); }
.btn-google:active { transform: scale(0.95); }
.btn-google:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-google svg { flex-shrink: 0; }

.auth-error {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(224,85,110,0.10);
  border: 1px solid rgba(224,85,110,0.28);
  border-radius: 12px;
  color: var(--error);
  font-size: 13px;
  text-align: center;
  display: none;
}

.auth-error.visible { display: block; }

/* ── Conversation view ─────────────────────────────────────────────────────── */

#conversation-view {
  width: 100%;
  max-width: 620px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.top-bar h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.conn-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-54);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 20px;
}

.conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-30);
  transition: background 0.3s;
  flex-shrink: 0;
}

.conn-dot.connecting { background: var(--blob-yellow); animation: dot-pulse 0.9s ease-in-out infinite; }
.conn-dot.ready      { background: #9C8CF0;            animation: none; }
.conn-dot.connected  { background: var(--blob-green);  animation: none; }
.conn-dot.error      { background: var(--blob-red);    animation: none; }

@keyframes dot-pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

/* ── Session mode badge ────────────────────────────────────────────────────── */

.mode-badge {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  letter-spacing: 0.2px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-54);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  white-space: nowrap;
}

.mode-badge.mode-identification    { background: #EEF4FF; color: #4278D6; border-color: rgba(66,120,214,0.25); }
.mode-badge.mode-parent_onboarding { background: #FFF5E6; color: #C07010; border-color: rgba(192,112,16,0.25); }
.mode-badge.mode-parent_companion  { background: #E8FBF5; color: #1A9E74; border-color: rgba(26,158,116,0.25); }
.mode-badge.mode-child_onboarding  { background: #F5EEFF; color: #8040B8; border-color: rgba(128,64,184,0.25); }
.mode-badge.mode-child_companion   { background: #E8FBF5; color: #1A9E74; border-color: rgba(26,158,116,0.25); }

.btn-logout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-54);
  transition: border-color 0.2s, color 0.2s;
  font-family: inherit;
}

.btn-logout:hover { border-color: rgba(91,141,239,0.4); color: var(--text-70); }

/* ── Main stage ────────────────────────────────────────────────────────────── */

#conversation-stage {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 20px 4px;
}

#setup-status {
  color: var(--text-54);
  font-size: 14px;
  text-align: center;
}

/* ── Animated Blob character (CSS fallback) ────────────────────────────────── */

.blob-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: 32px;
  flex-shrink: 0;
}

.blob-body {
  width: 100%;
  height: 100%;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: var(--blob-color, var(--blob-blue));
  position: relative;
  overflow: hidden;
  animation: blob-morph 5s ease-in-out infinite,
             blob-float 3s ease-in-out infinite;
  transition: background 0.6s ease;
  box-shadow: 0 20px 50px rgba(150,110,150,0.30),
              0 0 40px var(--blob-glow, rgba(91,141,239,0.25));
}

.blob-body::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 20%;
  width: 40%;
  height: 30%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.40) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.blob-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.blob-eyes { display: flex; gap: 22px; }

.blob-eye {
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  position: relative;
  animation: blink 4s ease-in-out infinite;
}

.blob-eye::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 7px;
  height: 7px;
  background: rgba(0,0,0,0.75);
  border-radius: 50%;
}

.blob-cheek-left,
.blob-cheek-right {
  position: absolute;
  width: 26px;
  height: 16px;
  background: rgba(255,182,193,0.55);
  border-radius: 50%;
  top: 52%;
}
.blob-cheek-left  { left: 18%; }
.blob-cheek-right { right: 18%; }

.blob-mouth {
  width: 32px;
  height: 14px;
  border-bottom: 3px solid rgba(255,255,255,0.90);
  border-radius: 0 0 40px 40px;
  transition: all 0.3s ease;
}

.blob-wrap.listening .blob-mouth { width: 28px; height: 18px; border-bottom-width: 3px; }
.blob-wrap.speaking .blob-mouth {
  width: 36px; height: 22px; border-bottom: none;
  background: rgba(255,255,255,0.85); border-radius: 50%;
  animation: mouth-bounce 0.4s ease-in-out infinite alternate;
}
.blob-wrap.processing .blob-mouth { width: 22px; height: 10px; border-bottom-width: 2px; opacity: 0.6; }

.blob-wrap.idle       { --blob-color: var(--blob-blue);   --blob-glow: rgba(91,141,239,0.30); }
.blob-wrap.connecting { --blob-color: var(--blob-yellow); --blob-glow: rgba(245,181,68,0.32); }
.blob-wrap.listening  { --blob-color: var(--blob-red);    --blob-glow: rgba(240,97,122,0.34); }
.blob-wrap.speaking   { --blob-color: var(--blob-purple); --blob-glow: rgba(176,106,217,0.34); }
.blob-wrap.processing { --blob-color: var(--blob-yellow); --blob-glow: rgba(245,181,68,0.32); }

@keyframes blob-morph {
  0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  20%     { border-radius: 40% 60% 55% 45% / 50% 40% 60% 55%; }
  40%     { border-radius: 50% 50% 30% 70% / 30% 55% 45% 65%; }
  60%     { border-radius: 35% 65% 60% 40% / 55% 45% 55% 45%; }
  80%     { border-radius: 65% 35% 45% 55% / 40% 65% 35% 60%; }
}

@keyframes blob-float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.07); } }
@keyframes mouth-bounce { from { height: 18px; width: 32px; } to { height: 26px; width: 36px; } }

/* ── Voice waveform (modern equalizer) ─────────────────────────────────────── */

.sound-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 40px;
  margin-bottom: 2px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s, transform 0.3s;
}

.sound-dots.active { opacity: 1; transform: scale(1); }

.sound-dot {
  width: 5px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--wave-from, #7AA7FF), var(--wave-to, #5B8DEF));
  transform-origin: center;
}

/* Waves match their mic colour: user = coral/pink (listening mic),
   blob = magenta/purple (speaking mic) — still clearly distinct from each other */
.sound-dots.listening { --wave-from: #FF9FB2; --wave-to: #F0617A; }
.sound-dots.speaking  { --wave-from: #D98AE6; --wave-to: #B06AD9; }

.sound-dots.active .sound-dot {
  animation: wave-bar 1.1s ease-in-out infinite;
}
.sound-dots.speaking.active .sound-dot { animation-duration: 0.7s; }

/* Reactive mode: heights are driven live from the mic — disable the canned wave */
.sound-dots.reactive .sound-dot {
  animation: none;
  transition: transform 0.07s linear;
}

/* Staggered delays form a smooth travelling wave across the bars */
.sound-dots .sound-dot:nth-child(1) { animation-delay: 0.00s; }
.sound-dots .sound-dot:nth-child(2) { animation-delay: 0.12s; }
.sound-dots .sound-dot:nth-child(3) { animation-delay: 0.24s; }
.sound-dots .sound-dot:nth-child(4) { animation-delay: 0.36s; }
.sound-dots .sound-dot:nth-child(5) { animation-delay: 0.24s; }
.sound-dots .sound-dot:nth-child(6) { animation-delay: 0.12s; }
.sound-dots .sound-dot:nth-child(7) { animation-delay: 0.00s; }

@keyframes wave-bar {
  0%, 100% { transform: scaleY(0.4); opacity: 0.7; }
  50%      { transform: scaleY(3.6); opacity: 1; }
}

/* ── Audio panel (mic button + state label) ────────────────────────────────── */

#audio-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.btn-mic {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.25s;
  color: #fff;
  flex-shrink: 0;
}

.btn-mic:disabled          { opacity: 0.4; cursor: not-allowed; transform: none !important; }
.btn-mic:not(:disabled):hover  { transform: scale(1.08); }
.btn-mic:not(:disabled):active { transform: scale(0.93); }

/* Mic button is static (no idle animation) — only colour/shadow change per state */
.btn-mic-idle       { background: linear-gradient(135deg, #FF9FB2, #9C8CF0); box-shadow: 0 10px 28px rgba(156,140,240,0.40); }
.btn-mic-requesting { background: linear-gradient(135deg, #FFD27A, #F5B544); box-shadow: 0 10px 28px rgba(245,181,68,0.40); }
.btn-mic-listening  { background: linear-gradient(135deg, #FF8FA6, #F0617A); box-shadow: 0 10px 28px rgba(240,97,122,0.48); }
.btn-mic-speaking,
.btn-mic-blob_speaking { background: linear-gradient(135deg, #C58AEA, #B06AD9); box-shadow: 0 10px 28px rgba(176,106,217,0.48); }
.btn-mic-processing { background: linear-gradient(135deg, #FFD27A, #F5B544); box-shadow: 0 10px 28px rgba(245,181,68,0.42); }

#audio-state-label {
  font-size: 14px;
  color: var(--text-54);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
}

/* ── Input-mode toggle (Talk / Type) ───────────────────────────────────────── */
.input-mode-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 18px;
}
.mode-tab {
  border: none;
  background: transparent;
  color: var(--text-54);
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.mode-tab.active { background: var(--primary); color: #fff; }

/* ── Type bar (typed/generated text → Cartesia voice) ──────────────────────── */
.type-bar {
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.type-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.type-voice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-54);
}
.type-voice select {
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.type-voice-id {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
}
.type-voice-id:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,141,239,0.15); }
.type-btn-generate {
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  color: var(--blob-purple);
  background: rgba(176,106,217,0.12);
  border: 1.5px solid rgba(176,106,217,0.25);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.18s, opacity 0.18s;
}
.type-btn-generate:not(:disabled):hover { background: rgba(176,106,217,0.2); }
.type-btn-generate:disabled { opacity: 0.45; cursor: not-allowed; }
.type-text {
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  resize: vertical;
  min-height: 52px;
  outline: none;
}
.type-text:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,141,239,0.15); }
.type-btn-send {
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.18s, opacity 0.18s, transform 0.12s;
}
.type-btn-send:not(:disabled):hover  { background: #4a7ce8; }
.type-btn-send:not(:disabled):active { transform: scale(0.98); }
.type-btn-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Bottom session info panel ─────────────────────────────────────────────── */

/* Compact floating session card — pinned to the top-right corner */
.session-panel {
  position: fixed;
  top: 70px;
  right: 16px;
  width: 240px;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.panel-handle { display: none; }

.session-info {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
  line-height: 1.4;
}

.session-info .info-row { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.session-info .info-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-30);
  font-weight: 700;
}

.session-info .info-value {
  color: var(--text-54);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  word-break: break-all;
}

#session-error {
  margin: 8px 20px;
  padding: 10px 14px;
  background: rgba(224,85,110,0.10);
  border: 1px solid rgba(224,85,110,0.28);
  border-radius: 10px;
  color: var(--error);
  font-size: 13px;
  display: none;
}

#session-error.visible { display: block; }

/* ── Biometric-auth-required banner ────────────────────────────────────────── */

.auth-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 12px auto 0;
  padding: 12px 16px;
  background: rgba(245,181,68,0.14);
  border: 1px solid rgba(245,181,68,0.45);
  border-radius: 14px;
}

.auth-banner-icon { font-size: 18px; }

.auth-banner-text { flex: 1; font-size: 13px; line-height: 1.4; color: var(--text-70); }

.auth-banner-btn {
  flex-shrink: 0;
  background: var(--blob-yellow);
  color: #4A3500;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.auth-banner-btn:hover { filter: brightness(1.05); }

/* ── Spinner ───────────────────────────────────────────────────────────────── */

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Server-state indicator ────────────────────────────────────────────────── */

.server-state {
  margin-top: 2px;
  min-height: 16px;
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--text-30);
}

.server-state:empty { display: none; }

/* ── Debug dock: transcript + WebSocket log ────────────────────────────────── */

/* The dock lives inside #conversation-view (max-width: 620px), so it would be
   clamped to that column. Break it out and center it on the viewport with its
   own width, independent of the conversation column's cap. */
.debug-dock {
  width: 92vw;
  max-width: 1600px;
  margin-top: 8px;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0 20px;
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.debug-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-54);
  border-bottom: 1px solid var(--border);
}

.debug-clear {
  background: var(--surface-2);
  color: var(--text-54);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.debug-clear:hover { color: var(--text-70); border-color: rgba(91,141,239,0.35); }

.debug-scroll { height: 338px; overflow-y: auto; padding: 12px; }

/* Transcript and WebSocket Log share the row equally */
.debug-col--ws-log { flex: 1 1 0; }

/* Transcript pane */
.transcript { display: flex; flex-direction: column; gap: 10px; }

.transcript-entry {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  max-width: 88%;
}

.transcript-user { align-self: flex-end;   background: rgba(91,141,239,0.10); border-color: rgba(91,141,239,0.22); }
.transcript-blob { align-self: flex-start; background: rgba(176,106,217,0.10); border-color: rgba(176,106,217,0.22); }

.transcript-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.transcript-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-30);
}

/* Play / Stop button on user + Blob transcript lines. Icon is drawn here so
   the two states read clearly: ▶ play (outlined) vs ■ stop (filled). */
.transcript-play {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: transparent;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.transcript-user .transcript-play { color: var(--blob-blue); }
.transcript-blob .transcript-play { color: var(--blob-purple); }
.transcript-play::before { content: '▶'; transform: translateX(1px); }   /* play glyph, optically centered */
.transcript-play.playing::before { content: '■'; transform: none; }      /* stop glyph */
/* Hover + playing: solid accent fill with a white glyph. Use an explicit colour
   (NOT currentColor — these rules also set color:#fff, which would make the fill
   white-on-white and hide the glyph). */
.transcript-user .transcript-play:not(:disabled):hover,
.transcript-user .transcript-play.playing { background: var(--blob-blue);   border-color: var(--blob-blue);   color: #fff; }
.transcript-blob .transcript-play:not(:disabled):hover,
.transcript-blob .transcript-play.playing { background: var(--blob-purple); border-color: var(--blob-purple); color: #fff; }
.transcript-play:disabled { opacity: 0.3; cursor: default; }

.transcript-user .transcript-label { color: var(--blob-blue); }
.transcript-blob .transcript-label { color: var(--blob-purple); }

.transcript-system {
  align-self: stretch;
  max-width: 100%;
  background: rgba(245,181,68,0.12);
  border-color: rgba(245,181,68,0.40);
}
.transcript-system .transcript-label { color: #C98A12; }

.transcript-text { font-size: 14px; line-height: 1.4; color: var(--text-70); }

/* Highlighted "STT heard" sub-line under a typed You bubble (sent text vs what
   the server actually transcribed). */
.transcript-stt {
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(245,181,68,0.16);
  border: 1px solid rgba(245,181,68,0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.transcript-stt-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B07A10;
}
.transcript-stt-text { font-size: 13px; line-height: 1.35; color: var(--text-70); font-style: italic; }

#tts-audio { display: none; }

/* ── Rive animated blob ────────────────────────────────────────────────────── */

#rive-blob {
  width: 360px;
  height: 360px;
  /* the artboard has transparent padding around the blob — pull neighbours
     into it so the blob sits close to the mic without cropping the art */
  margin-top: -72px;
  margin-bottom: -48px;
  /* soft halo to ground the blob on the background */
  background: radial-gradient(circle at 50% 46%, rgba(255,159,178,0.16) 0%, rgba(156,140,240,0.08) 38%, transparent 62%);
}

/* Rive idle blob on the login screen */
#rive-auth-blob {
  width: 210px;
  height: 210px;
  display: none;
}

/* WebSocket log pane */
.ws-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
}

.ws-entry {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 7px 10px;
  border-left: 3px solid var(--text-30);
}

.ws-entry.ws-out { border-left-color: var(--blob-blue); }
.ws-entry.ws-in  { border-left-color: var(--blob-green); }

.ws-entry-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }

.ws-arrow { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; }
.ws-out .ws-arrow { color: var(--blob-blue); }
.ws-in  .ws-arrow { color: var(--blob-green); }

.ws-action { font-size: 12px; font-weight: 700; color: var(--text-70); }

/* Round-trip latency badge, shown on the ai_response entry */
.ws-latency {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--blob-purple);
  background: rgba(176,106,217,0.12);
  border: 1px solid rgba(176,106,217,0.30);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Server-side stage breakdown badge (STT · Voice · LLM) */
.ws-srv-timing {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--blob-blue);
  background: rgba(91,141,239,0.10);
  border: 1px solid rgba(91,141,239,0.28);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.ws-entry-body {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-54);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 88px;
  overflow-y: auto;
}

/* ── Collapsible audio-chunk group ── */
.ws-audio-group {
  border-left-color: var(--blob-blue);
  cursor: default;
}
.ws-audio-group > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.ws-audio-group > summary::-webkit-details-marker { display: none; }
.ws-audio-group[open] > summary { margin-bottom: 4px; }
.ws-audio-summary {
  font-size: 11px;
  font-weight: 700;
  color: var(--blob-blue);
}
.ws-audio-item {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-54);
  padding: 1px 0 1px 8px;
  line-height: 1.3;
}
.ws-audio-ack {
  color: var(--blob-green, #10b981);
  padding-left: 16px;
}