/* ============================================================
   Live Voice Assistant — OpenAI Realtime (gpt-realtime-2)
   (2026-06-01) — INLINE (no popup) + audio-reactive liquid blob
   Brand accent (cool blue) #2f5ca8.
   ============================================================ */

:root {
  /* Bind the brand to the theme accent so every brand-coloured TEXT (status,
     timer, call button) stays readable in BOTH themes. In dark this resolves to
     #2f5ca8 (unchanged); in light it becomes the darker #163a6b accent so the
     text isn't a washed-out light-blue on the white panel. */
  --rt-brand: var(--accent, #2f5ca8);
  --rt-brand-2: var(--accent-secondary, #3a68b0);
  --rt-ink: #0d1a24;
}

/* ── Live-Call trigger button (both chat headers) ───────────────────── */
.rt-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(47, 92, 168, 0.35);
  background: linear-gradient(135deg, rgba(47, 92, 168, 0.12), rgba(58, 104, 176, 0.08));
  color: var(--rt-brand);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.rt-call-btn:hover {
  background: linear-gradient(135deg, rgba(47, 92, 168, 0.2), rgba(58, 104, 176, 0.14));
  box-shadow: 0 4px 14px rgba(47, 92, 168, 0.28);
  transform: translateY(-1px);
}
.rt-call-btn:active { transform: translateY(0); }
.rt-call-btn svg { flex-shrink: 0; }
.rt-call-btn__label { line-height: 1; }
.rt-call-btn::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rt-brand);
  box-shadow: 0 0 0 0 rgba(47, 92, 168, 0.6);
  animation: rt-livedot 2.4s ease-out infinite;
}
@keyframes rt-livedot {
  0%   { box-shadow: 0 0 0 0 rgba(47, 92, 168, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(47, 92, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 92, 168, 0); }
}

/* The vault header is a flex row; keep the sub line on its own row below. */
.vault-chat-inline-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.vault-chat-inline-header .vault-chat-inline-sub { flex-basis: 100%; }

/* ════════════════════════════════════════════════════════════════════
   INLINE call panel — mounts INSIDE the active chat card (no popup),
   just above the message stream. Background matches the dashboard surface
   (theme-aware via --bg-* vars), with the brand logo as a centered,
   voice-reactive mark + greeting + status + controls. The chat transcript
   keeps streaming below it on the same page.
   ════════════════════════════════════════════════════════════════════ */
.rt-inline {
  display: none;
  position: relative;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 24px 20px 24px;
  border-radius: 20px;
  border: 1px solid var(--border, rgba(47, 92, 168, 0.18));
  background: var(--bg-card, rgba(28, 16, 16, 0.5));
  /* Apple-style material: stronger frost + a hairline top inner-highlight and a
     soft layered shadow for real depth (not flat glass). */
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 12px 32px rgba(0, 0, 0, 0.22);
  overflow: hidden; /* clip the ambient aurora */
  animation: rt-slide-in var(--dur-slow, 320ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.rt-inline.is-open { display: flex; }
/* ── Ambient cool aurora — a very-low-opacity Gemini-style living gradient,
   dialed way down (Apple restraint). Drifts slowly; static under reduce. ── */
.rt-inline::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 28% 30%, rgba(47, 92, 168, 0.10), transparent 70%),
    radial-gradient(34% 40% at 74% 36%, rgba(78, 200, 208, 0.08), transparent 72%),
    radial-gradient(40% 46% at 56% 78%, rgba(127, 140, 224, 0.07), transparent 74%);
  filter: blur(14px);
  opacity: 0.9;
  animation: rt-aurora calc(var(--dur-breath, 4s) * 5) ease-in-out infinite alternate;
}
.rt-inline > * { position: relative; z-index: 1; } /* keep content above aurora */
@keyframes rt-aurora {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.05); }
  50%  { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.12); }
  100% { transform: translate3d(-2%, 3%, 0) rotate(-6deg) scale(1.06); }
}
@keyframes rt-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* small close (×) in the top-right corner of the inline panel */
.rt-inline-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(47, 92, 168, 0.2));
  background: var(--bg-glass, rgba(28, 16, 16, 0.4));
  color: var(--text-muted, rgba(245, 235, 229, 0.5));
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.rt-inline-close:hover { color: var(--rt-brand); transform: scale(1.06); }

/* small settings (gear) in the top-left corner — opens the prefs editor */
.rt-inline-prefs {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(47, 92, 168, 0.2));
  background: var(--bg-glass, rgba(28, 16, 16, 0.4));
  color: var(--text-muted, rgba(245, 235, 229, 0.5));
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;
}
.rt-inline-prefs:hover { color: var(--rt-brand); transform: rotate(35deg); }
.rt-inline-prefs svg { display: block; }

/* ── Preferences editor (user-editable instructions + behavior knobs) ──
   An overlay card that fills the inline panel when the gear is tapped. */
.rt-prefs {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  text-align: left;
  border-radius: 20px;
  /* MUST be a fully opaque surface — this is a modal overlay over the live call
     stage. --bg-card is a near-transparent glass value in dark mode
     (rgba(255,255,255,0.03)), which let the orb/greeting/controls bleed
     through. Use a solid cool-dark panel here; light theme overrides to #fff. */
  background: #13161d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow-y: auto;
  animation: rt-prefs-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.rt-prefs.is-open { display: flex; }
@keyframes rt-prefs-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
.rt-prefs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rt-prefs-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #e8ebf2);
}
.rt-prefs-x {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(47, 92, 168, 0.2));
  background: transparent;
  color: var(--text-muted, rgba(245, 235, 229, 0.5));
  cursor: pointer;
  transition: color 0.2s ease, transform 0.15s ease;
}
.rt-prefs-x:hover { color: var(--rt-brand); transform: scale(1.06); }
.rt-prefs-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.rt-prefs-field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted, #69727f);
}
.rt-prefs-row { display: flex; gap: 10px; }
.rt-prefs textarea,
.rt-prefs select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(47, 92, 168, 0.22));
  background: var(--bg-elevated, rgba(40, 24, 22, 0.6));
  color: var(--text-primary, #e8ebf2);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.45;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rt-prefs textarea { resize: vertical; min-height: 56px; }
.rt-prefs textarea:focus,
.rt-prefs select:focus {
  outline: none;
  border-color: var(--rt-brand);
  box-shadow: 0 0 0 3px rgba(47, 92, 168, 0.18);
}
.rt-prefs-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  align-self: flex-end;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--text-secondary, #a3acbd);
  cursor: pointer;
}
.rt-prefs-toggle input { width: 16px; height: 16px; accent-color: var(--rt-brand); cursor: pointer; }
.rt-prefs-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}
.rt-prefs-status { font-size: 12px; font-weight: 600; color: var(--text-muted, #69727f); margin-right: auto; }
.rt-prefs-status.is-ok { color: #4caf7d; }
.rt-prefs-status.is-err { color: #e0564a; }
.rt-prefs-save {
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--rt-brand), var(--rt-brand-2));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47, 92, 168, 0.3);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.rt-prefs-save:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(47, 92, 168, 0.42); }
.rt-prefs-save:active { transform: translateY(0); }
.rt-prefs-note {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted, #69727f);
  opacity: 0.85;
}

/* ── First-run setup mode ─────────────────────────────────────────────────
   The same editor, shown once before the very first call. An intro line +
   a stronger primary action ("Save & start"). The intro is hidden in the
   normal (mid-call, gear-opened) editing mode. */
.rt-prefs-intro {
  display: none;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary, #a3acbd);
}
.rt-prefs--setup .rt-prefs-intro { display: block; }

/* ── Visualizer stage ─────────────────────────────────────────────────
   A square arena holding the sound-wave <canvas>. There is no central mark:
   the radial equalizer / oscilloscope / sonar rings fill the whole stage. */
.rt-stage {
  position: relative;
  width: clamp(150px, 40vw, 200px);
  height: clamp(150px, 40vw, 200px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rt-viz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Visualizer-mode chooser (bars / wave / rings) ───────────────────── */
.rt-viz-modes {
  display: inline-flex;
  gap: 4px;
  margin: 2px 0 0;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg-glass, rgba(28, 16, 16, 0.4));
  border: 1px solid var(--border, rgba(47, 92, 168, 0.16));
}
.rt-viz-mode {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, rgba(245, 235, 229, 0.5));
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.rt-viz-mode:hover { color: var(--rt-brand); transform: translateY(-1px); }
.rt-viz-mode svg { display: block; }
.rt-viz-mode.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--rt-brand), var(--rt-brand-2));
  box-shadow: 0 3px 10px rgba(47, 92, 168, 0.32);
}

.rt-inline-greeting {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary, #e8ebf2);
}
.rt-status {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rt-brand);
  transition: color var(--dur-base, 200ms) var(--ease-out, ease);
}
/* ── Call-state colour language (mirrors the canvas STATE_VIZ; all COOL) ──
   The renderer writes data-rt-state on .rt-inline + .rt-stage. */
.rt-inline[data-rt-state="thinking"] .rt-status { color: #4ec8d0; }      /* cool teal */
.rt-inline[data-rt-state="speaking"] .rt-status { color: #6fa0e0; }      /* brighter cool */
.rt-inline[data-rt-state="connecting"] .rt-status,
.rt-inline[data-rt-state="reconnecting"] .rt-status { color: #8aa0b8; }  /* calm slate */
.rt-inline[data-rt-state="muted"] .rt-status { color: #8a93a3; }
.rt-inline[data-rt-state="error"] .rt-status { color: #e0564a; }

/* Light theme: the state tints above are tuned for the dark panel and wash out
   on the white light-mode surface. Swap to darker, on-brand cool equivalents
   that keep a readable contrast ratio (WCAG-AA-ish) on a near-white card. */
[data-theme="light"] .rt-inline[data-rt-state="thinking"] .rt-status { color: #0e7d86; }
[data-theme="light"] .rt-inline[data-rt-state="speaking"] .rt-status { color: #235e9c; }
[data-theme="light"] .rt-inline[data-rt-state="connecting"] .rt-status,
[data-theme="light"] .rt-inline[data-rt-state="reconnecting"] .rt-status { color: #4a5b6e; }
[data-theme="light"] .rt-inline[data-rt-state="muted"] .rt-status { color: #586374; }
[data-theme="light"] .rt-inline[data-rt-state="error"] .rt-status { color: #c0392b; }

/* Light theme: a clean bright-white card lifting off the cream page with a soft
   cool hairline + gentle layered shadow (the dark-tuned heavy black shadow and
   white inset highlight read muddy on light). The settings drawer goes fully
   opaque so the canvas/aurora behind never bleeds through. Stays cool-only. */
[data-theme="light"] .rt-inline {
  background: var(--bg-card, #fff);
  border-color: rgba(22, 58, 107, 0.16);
  box-shadow:
    0 1px 2px rgba(20, 30, 50, 0.05),
    0 14px 34px rgba(20, 30, 50, 0.10);
}
[data-theme="light"] .rt-prefs { background: #fff; }
[data-theme="light"] .rt-inline-close,
[data-theme="light"] .rt-inline-prefs { background: rgba(22, 58, 107, 0.06); }

/* Idle/listening: the stage breathes with a soft cool halo. */
.rt-stage::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--rt-brand) 22%, transparent), transparent 68%);
  opacity: 0.5;
  animation: rt-breathe var(--dur-breath, 4s) ease-in-out infinite;
}
@keyframes rt-breathe {
  0%, 100% { transform: scale(0.94); opacity: 0.36; }
  50%      { transform: scale(1.06); opacity: 0.6; }
}
/* Thinking: a faint cool sparkle/sheen sweeps the stage so "processing" feels
   alive on-brand (Gemini sparkle, cool, subtle). */
.rt-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(120, 226, 230, 0.16) 40deg, transparent 90deg);
  transition: opacity var(--dur-base, 200ms) var(--ease-out, ease);
}
.rt-inline[data-rt-state="thinking"] .rt-stage::after {
  opacity: 1;
  animation: rt-sparkle calc(var(--dur-breath, 4s) * 0.5) linear infinite;
}
@keyframes rt-sparkle { to { transform: rotate(360deg); } }
.rt-caption {
  max-width: 94%;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary, #a3acbd);
  min-height: 18px;
}
.rt-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
.rt-timer {
  font-size: 13px;
  font-weight: 700;
  color: var(--rt-brand);
}
.rt-cost-hint {
  font-size: 11px;
  color: var(--text-muted, #69727f);
}

/* end-call button */
.rt-end {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--accent, #2f5ca8), var(--accent-tertiary, #284f8a));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #2f5ca8) 28%, transparent);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.rt-end:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #2f5ca8) 38%, transparent); }
.rt-end:active { transform: translateY(0); }

/* ── In-call control cluster: Mute · Photo · Stop · End ─────────────────
   Sits in a single right-aligned row beside the timer. The first three are
   compact round icon buttons (.rt-ctl) sharing the cool accent treatment;
   .rt-end keeps its pill shape at the end of the row. */
.rt-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rt-ctl {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(47, 92, 168, 0.22));
  background: var(--bg-glass, rgba(28, 16, 16, 0.4));
  color: var(--text-secondary, #a3acbd);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.rt-ctl:hover {
  color: var(--rt-brand);
  border-color: color-mix(in srgb, var(--rt-brand) 45%, transparent);
  background: color-mix(in srgb, var(--rt-brand) 10%, var(--bg-glass, rgba(28, 16, 16, 0.4)));
  transform: translateY(-1px);
}
.rt-ctl:active { transform: translateY(0); }
.rt-ctl svg { display: block; }

/* Mute toggle — swap the two glyphs; muted state reads as engaged via a filled
   cool-accent treatment (the slashed-mic glyph already signals "off"). */
.rt-ctl .rt-ctl-off { display: none; }
.rt-ctl.is-muted .rt-ctl-on { display: none; }
.rt-ctl.is-muted .rt-ctl-off { display: block; }
.rt-ctl.is-muted {
  color: var(--rt-brand);
  border-color: color-mix(in srgb, var(--rt-brand) 50%, transparent);
  background: color-mix(in srgb, var(--rt-brand) 16%, var(--bg-glass, rgba(28, 16, 16, 0.4)));
}
.rt-ctl.is-muted:hover {
  color: var(--rt-brand);
  border-color: color-mix(in srgb, var(--rt-brand) 70%, transparent);
  background: color-mix(in srgb, var(--rt-brand) 24%, var(--bg-glass, rgba(28, 16, 16, 0.4)));
}

/* Stop (cut the assistant off) — leans red to read as an interrupt. */
.rt-ctl-stop:hover {
  color: #e0564a;
  border-color: rgba(224, 86, 74, 0.55);
  background: rgba(224, 86, 74, 0.12);
}

/* transient tool-activity chips, mirrored onto the inline panel */
.rt-inline-chips {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  min-height: 0;
}
.rt-chip {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #27486a;
  background: rgba(47, 92, 168, 0.12);
  border: 1px solid rgba(47, 92, 168, 0.24);
  animation: rt-chip-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.rt-chip.is-leaving { opacity: 0; transform: translateY(-6px); }
@keyframes rt-chip-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* bottom control row: timer + cost + end button */
.rt-inline-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  padding-top: 8px;
}
.rt-inline .rt-meta { flex-direction: column; align-items: center; gap: 0; }

/* ── tool-activity chip (shows a tool actually fired) ──────────────── */
.rt-tool-chip {
  align-self: flex-start;
  max-width: 90%;
  margin: 4px 0;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #27486a;
  background: rgba(47, 92, 168, 0.10);
  border: 1px solid rgba(47, 92, 168, 0.22);
  animation: rt-bubble-in 0.25s ease;
}

/* ── Transcript bubbles (appended into the active chat stream) ──────── */
/* Shared bubble spec — kept identical to .chatbot-msg + .vault-chat-bubble
   (radius 16px w/ one 5px tail corner, padding 10px 14px, 13.5px/1.5) so the
   voice transcript, the Overview chatbot and the Vault chat all read as one
   consistent, professional surface in both dark and warm-light themes. */
.rt-bubble {
  max-width: 86%;
  margin: 6px 0;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  animation: rt-bubble-in 0.25s ease;
}
@keyframes rt-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rt-bubble.user {
  margin-left: auto;
  background: linear-gradient(135deg, var(--accent, #2f5ca8), var(--accent-secondary, #3a68b0));
  color: #fff;
  box-shadow: 0 2px 8px rgba(47, 92, 168, 0.22);
  border-bottom-right-radius: 5px;
}
.rt-bubble.bot {
  margin-right: auto;
  background: var(--bg-elevated, rgba(38, 22, 22, 0.6));
  border: 1px solid var(--border, rgba(47, 92, 168, 0.15));
  color: var(--text-primary, #e8ebf2);
  border-bottom-left-radius: 5px;
}

/* ── Spring micro-interactions (Apple soft "pop") ─────────────────────── */
.rt-ctl, .rt-end, .rt-call-btn, .rt-viz-mode {
  transition-timing-function: var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.rt-ctl:active, .rt-viz-mode:active { transform: scale(0.92); }
.rt-call-btn:active { transform: scale(0.96); }
.rt-end:active { transform: scale(0.96); }

/* ── Reduced motion — opacity-only / static, never scale or drift ─────── */
@media (prefers-reduced-motion: reduce) {
  .rt-inline, .rt-chip, .rt-bubble, .rt-tool-chip, .rt-call-btn::before,
  .rt-inline::before, .rt-stage::before, .rt-stage::after {
    animation: none !important;
  }
  .rt-inline::before { opacity: 0.5; }       /* static aurora wash */
  .rt-stage::before { opacity: 0.4; transform: none; }
  .rt-inline[data-rt-state="thinking"] .rt-stage::after { opacity: 0.5; transform: none; }
  .rt-ctl:active, .rt-viz-mode:active, .rt-call-btn:active, .rt-end:active { transform: none; }
}

/* ── Calling state — neutralize the host card ───────────────────────────
   The voice panel (.rt-inline) is mounted *inside* the assistant card,
   leaving the card's own header ("Assistant — quick note" / Live / Open
   full Vault), input row and message stream visible above/below it. In
   light mode the card's dark --vault gradient rendered behind the header as
   an ugly gray strip clashing with the panel. While a call is active we
   strip the host card down to nothing so the voice panel stands alone as a
   clean, full-width dedicated surface (themed by its own .rt-inline rules,
   independent of the card's theme overrides). Applies to both surfaces
   (overview .cc-asistan-card + vault .vault-chat-inline). */
.rt-calling {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.rt-calling > *:not(.rt-inline) { display: none !important; }
.rt-calling > .rt-inline { margin: 0; }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .rt-inline { padding: 20px 14px 20px; }
  .rt-stage { width: clamp(132px, 46vw, 172px); height: clamp(132px, 46vw, 172px); }
  .rt-inline-greeting { font-size: 17px; }
  .rt-call-btn__label { display: none; }
  .rt-end span { display: none; }
  .rt-end { padding: 8px 11px; }
}