/* ============================================================
   cap-widget.css — captions / audio panel / suite / stream-player styles
   ------------------------------------------------------------
   .cap-* namespace. Hosts every visible UI element of the main
   capWidget: the FAB, captions config panel, floating caption
   display, room feed panel, audio panel (Master Stream + Voice
   Suite + Stream Player), audio-item cards, level meter, and all
   light-theme + responsive overrides for the above.

   Depends on the --widget-* variables defined in css/base.css.
   Load AFTER css/base.css.
   ============================================================ */

/* ===== Light-theme overrides for surfaces/borders that were hardcoded
   to white-tinted rgba (designed for dark bg). Mirrored to dark on
   light surfaces so contrast still reads. ===== */
[data-theme="light"] .cap-select,
[data-theme="light"] .cap-input,
[data-theme="light"] .cap-segment,
[data-theme="light"] .cap-meter,
[data-theme="light"] .cap-room-status,
[data-theme="light"] .cap-player,
[data-theme="light"] .cap-suite-ctrl-btn,
[data-theme="light"] .cap-audio-item,
[data-theme="light"] .cap-room-item { background: var(--widget-surface); }
[data-theme="light"] .cap-switch { background: var(--widget-surface); }
[data-theme="light"] .cap-switch-toggle { background: rgba(15, 23, 42, 0.15); }
[data-theme="light"] .cap-switch-toggle::after { background: rgba(31, 41, 55, 0.7); }
[data-theme="light"] .cap-slider { background: var(--widget-surface-strong); }
[data-theme="light"] .cap-side-count,
[data-theme="light"] .cap-master-badge { background: var(--widget-surface-strong); }
[data-theme="light"] .cap-suite-wave-wrap,
[data-theme="light"] .cap-master .cap-suite-wave-wrap { background: var(--widget-wave-bg); }
[data-theme="light"] .cap-side-list::-webkit-scrollbar-thumb,
[data-theme="light"] .cap-panel::-webkit-scrollbar-thumb { background: var(--widget-scrollbar); }
[data-theme="light"] .cap-display-text { color: #0f172a; text-shadow: none; }
/* translated words use --widget-accent, which already resolves to the
   higher-contrast light-theme accent (#0891b2) — no override needed. */
[data-theme="light"] .cap-display-interim { color: rgba(15, 23, 42, 0.55); }
[data-theme="light"] .cap-display-empty { color: rgba(15, 23, 42, 0.45); }
[data-theme="light"] .cap-fab { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04) inset; }
[data-theme="light"] .cap-panel { box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12); }
[data-theme="light"] .cap-side-panel { box-shadow: 0 12px 36px rgba(15, 23, 42, 0.1); }
[data-theme="light"] .cap-display { box-shadow: 0 14px 38px rgba(15, 23, 42, 0.12); }
[data-theme="light"] .cap-display { border-color: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .cap-audio-item,
[data-theme="light"] .cap-room-item { border-color: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .cap-room-item-text.translation { color: #5b21b6; }
[data-theme="light"] .cap-audio-item-text { color: var(--widget-ink); }
[data-theme="light"] .cap-btn.primary { color: #f8fafc; }
[data-theme="light"] .cap-suite-ctrl-btn.primary { color: #f8fafc; }
[data-theme="light"] .cap-master .cap-suite-ctrl-btn.primary { color: #f8fafc; }
[data-theme="light"] .cap-select option { background: #ffffff; color: var(--widget-ink); }
[data-theme="light"] .cap-select option:checked { background: rgba(8, 145, 178, 0.15); color: var(--widget-accent); }

.cap-widget { position: fixed; z-index: 2147483647; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

.cap-fab {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--widget-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--widget-border);
  display: flex; align-items: center; justify-content: center;
  cursor: grab; user-select: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  z-index: 2147483647;
}
.cap-fab:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 14px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(103, 232, 249, 0.3) inset; }
.cap-fab.dragging { cursor: grabbing; transition: none; }
.cap-fab.listening { border-color: var(--widget-accent); }
.cap-fab.listening.translating { border-color: var(--widget-translate); }
.cap-fab.listening::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid var(--widget-accent);
  opacity: 0; animation: fab-pulse 1.8s ease-out infinite;
}
.cap-fab.listening.translating::after { border-color: var(--widget-translate); }
@keyframes fab-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }
.mic-icon { width: 26px; height: 26px; color: var(--widget-ink); transition: color 0.2s ease; }
.cap-fab.listening .mic-icon { color: var(--widget-accent); }
.cap-fab.listening.translating .mic-icon { color: var(--widget-translate); }

.cap-panel {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 360px;
  background: var(--widget-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--widget-border); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2147483647; max-height: 90vh; overflow-y: auto;
}
.cap-panel.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.cap-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--widget-border);
  cursor: grab; user-select: none;
  position: sticky; top: 0;
  background: var(--widget-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  z-index: 1;
}
.cap-panel-header.dragging { cursor: grabbing; }
.cap-panel-title {
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--widget-ink-dim);
  display: flex; align-items: center; gap: 8px;
}
.cap-panel-title .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--widget-ink-dim); transition: background 0.2s ease; }
.cap-panel.listening .cap-panel-title .dot { background: var(--widget-accent); box-shadow: 0 0 8px var(--widget-accent); }
.cap-panel.listening.translating .cap-panel-title .dot { background: var(--widget-translate); box-shadow: 0 0 8px var(--widget-translate); }
.cap-close { background: transparent; border: none; color: var(--widget-ink-dim); font-size: 1.2rem; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.18s ease; }
.cap-close:hover { background: var(--widget-surface-strong); color: var(--widget-ink); }
.cap-header-actions { display: flex; align-items: center; gap: 4px; }
.cap-theme-toggle {
  background: transparent; border: none; color: var(--widget-ink-dim);
  cursor: pointer; width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s ease;
}
.cap-theme-toggle:hover { background: var(--widget-surface-strong); color: var(--widget-ink); }
.cap-theme-toggle svg { width: 16px; height: 16px; }
.cap-theme-toggle .cap-theme-moon { display: none; }
.cap-theme-toggle .cap-theme-sun { display: block; }
[data-theme="light"] .cap-theme-toggle .cap-theme-moon { display: block; }
[data-theme="light"] .cap-theme-toggle .cap-theme-sun { display: none; }

/* Config layout cycle button: shows whichever icon matches the current
   mode (auto / vertical / horizontal). Click cycles through them. */
.cap-layout-toggle .cap-layout-icon { display: none; }
.cap-layout-toggle[data-mode="auto"] .cap-layout-icon-auto { display: block; }
.cap-layout-toggle[data-mode="vertical"] .cap-layout-icon-vertical { display: block; }
.cap-layout-toggle[data-mode="horizontal"] .cap-layout-icon-horizontal { display: block; }
/* In Auto mode tint the sparkle icon with the accent so it stands out
   as "smart / adaptive" vs the explicit-mode icons. */
.cap-layout-toggle[data-mode="auto"] { color: var(--widget-accent); }
.cap-layout-toggle[data-mode="horizontal"],
.cap-layout-toggle[data-mode="vertical"] { color: var(--widget-ink); }
/* Audio panel layout button — tinted to match the audio panel accent so
   the two header layout buttons aren't visually identical. */
.cap-audio-layout-toggle { color: var(--widget-audio) !important; }
.cap-audio-layout-toggle:hover { background: rgba(251, 191, 36, 0.12); }

/* Voice Suite show/hide toggle in the header. Shares state with the ×
   button on the Voice Suite itself; clicking either flips the same flag. */
.cap-suite-visibility-toggle { color: var(--widget-audio) !important; }
.cap-suite-visibility-toggle:hover { background: rgba(251, 191, 36, 0.12); }
.cap-suite-visibility-toggle .cap-suite-vis-icon { display: none; }
.cap-suite-visibility-toggle[data-mode="visible"] .cap-suite-vis-icon-shown { display: block; }
.cap-suite-visibility-toggle[data-mode="hidden"] .cap-suite-vis-icon-hidden { display: block; }
/* When suite is hidden, dim the icon slightly so the user senses the
   toggle is in its "off" state. */
.cap-suite-visibility-toggle[data-mode="hidden"] { opacity: 0.65; }
.cap-panel-body { padding: 16px 18px 18px; }
.cap-section-title { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--widget-ink-dim); margin: 18px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--widget-border); display: flex; align-items: center; gap: 8px; }
.cap-section-title:first-child { margin-top: 0; }
.cap-section-title.room { color: var(--widget-room); }
.cap-section-title.room::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.cap-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cap-row:last-child { margin-bottom: 0; }
.cap-row.hidden { display: none; }
.hidden { display: none; }
/* Dev-only kill switch — beats .visible / .cap-feed-chip.visible toggles */
.cap-dev-hidden { display: none !important; }
.cap-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--widget-ink-dim); }
.cap-select, .cap-input {
  width: 100%; padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--widget-border); border-radius: 8px;
  color: var(--widget-ink); font-family: inherit; font-size: 0.85rem;
  transition: all 0.18s ease;
}
.cap-select { cursor: pointer; }
.cap-input { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }
.cap-select:hover, .cap-input:hover { border-color: rgba(255, 255, 255, 0.2); }
.cap-select:focus, .cap-input:focus { outline: none; border-color: var(--widget-accent); }
/* Native <option> elements ignore most theming. Force dark dropdown so the
   list is readable when the user opens it. */
.cap-select option { background: #1a1d24; color: var(--widget-ink); }
.cap-select option:checked { background: rgba(103, 232, 249, 0.18); color: var(--widget-accent); }
.cap-row-inline { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.cap-color-input { width: 40px; height: 40px; border: 1px solid var(--widget-border); border-radius: 8px; background: transparent; cursor: pointer; padding: 0; }
.cap-color-input::-webkit-color-swatch-wrapper { padding: 4px; }
.cap-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }

.cap-toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cap-btn {
  padding: 11px 14px; border: 1px solid var(--widget-border); border-radius: 8px;
  background: rgba(255, 255, 255, 0.04); color: var(--widget-ink);
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: all 0.18s ease;
}
.cap-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.cap-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cap-btn.primary { background: var(--widget-accent); color: #0a0a0b; border-color: var(--widget-accent); }
.cap-btn.primary:hover:not(:disabled) { background: #9dedf7; border-color: #9dedf7; }
.cap-btn.danger { color: var(--widget-danger); border-color: rgba(248, 113, 113, 0.3); }
.cap-btn.danger:hover:not(:disabled) { background: var(--widget-danger); color: #fff; border-color: var(--widget-danger); }

.cap-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; outline: none; }
.cap-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--widget-accent); border-radius: 50%; cursor: pointer; transition: transform 0.15s ease; }
.cap-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.cap-slider::-moz-range-thumb { width: 16px; height: 16px; background: var(--widget-accent); border-radius: 50%; cursor: pointer; border: none; }

/* ============ AUDIO INPUT CONTROLS ============ */
.cap-switch {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--widget-border);
  border-radius: 8px;
  cursor: pointer; user-select: none;
  transition: border-color 0.18s ease;
}
.cap-switch:hover { border-color: rgba(255, 255, 255, 0.2); }
.cap-switch-label {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.cap-switch-title { font-size: 0.82rem; color: var(--widget-ink); font-weight: 500; }
.cap-switch-desc { font-size: 0.68rem; color: var(--widget-ink-dim); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
.cap-switch-toggle {
  position: relative; width: 36px; height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: background 0.2s ease;
  flex-shrink: 0; margin-left: 12px;
}
.cap-switch-toggle::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--widget-ink-dim);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}
.cap-switch input { display: none; }
.cap-switch input:checked ~ .cap-switch-toggle { background: rgba(103, 232, 249, 0.3); }
.cap-switch input:checked ~ .cap-switch-toggle::after { transform: translateX(16px); background: var(--widget-accent); }

/* Audio level meter */
.cap-meter {
  display: flex; align-items: center; gap: 4px;
  height: 22px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--widget-border);
  border-radius: 8px;
}
.cap-meter-bars {
  flex: 1; display: flex; align-items: center; gap: 2px; height: 100%;
}
.cap-meter-bar {
  flex: 1; height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  transition: background 0.08s ease, height 0.08s ease;
}
.cap-meter-bar.lit { background: var(--widget-accent); height: 14px; }
.cap-meter-bar.lit.mid { background: var(--widget-audio); }
.cap-meter-bar.lit.hot { background: var(--widget-danger); }
.cap-meter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--widget-ink-dim);
  min-width: 36px; text-align: right;
}
.cap-meter.active .cap-meter-label { color: var(--widget-accent); }

.cap-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--widget-border); border-radius: 8px; padding: 3px; }
.cap-segment.two-col { grid-template-columns: repeat(2, 1fr); }
.cap-segment button { padding: 7px 10px; background: transparent; border: none; color: var(--widget-ink-dim); font-family: inherit; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border-radius: 5px; transition: all 0.18s ease; }
.cap-segment button:hover { color: var(--widget-ink); }
.cap-segment button.active { background: rgba(103, 232, 249, 0.12); color: var(--widget-accent); }
.cap-segment.translate button.active { background: rgba(167, 139, 250, 0.15); color: var(--widget-translate); }
.cap-segment.audio button.active { background: rgba(251, 191, 36, 0.15); color: var(--widget-audio); }
.cap-segment.room button.active { background: rgba(134, 239, 172, 0.15); color: var(--widget-room); }

.cap-label-value { display: flex; justify-content: space-between; align-items: center; }
.cap-value { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--widget-accent); }

/* Room status indicator */
.cap-room-status {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--widget-border);
  border-radius: 8px;
  font-size: 0.78rem;
}
.cap-room-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--widget-ink-faint, #4a4640);
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.cap-room-status-dot.connecting { background: var(--widget-warn); animation: status-pulse 1s ease-in-out infinite; }
.cap-room-status-dot.connected { background: var(--widget-room); box-shadow: 0 0 8px var(--widget-room); }
.cap-room-status-dot.error { background: var(--widget-danger); }
@keyframes status-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.cap-room-status-text { color: var(--widget-ink); font-weight: 500; flex: 1; }
.cap-room-status-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--widget-ink-dim); }

.cap-error { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.3); color: var(--widget-danger); padding: 10px 12px; border-radius: 8px; font-size: 0.78rem; margin-top: 12px; display: none; }
.cap-error.visible { display: block; }

/* ============ CAPTION DISPLAY ============ */
.cap-display {
  position: fixed; left: 50%; transform: translateX(-50%);
  /* Fluid across every device (like the cv7 player): the box is gutter-safe
     on phones (94vw) and caps at the player's 900px on large desktops, with
     a sensible minimum so short captions don't collapse on wide screens. */
  width: var(--float-width); max-width: none;
  padding: clamp(13px, 0.8vw + 9px, 22px) clamp(16px, 2vw + 10px, 32px);
  font-family: var(--widget-font);
  background: rgba(var(--display-bg-rgb), 0.78);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: clamp(12px, 1vw + 8px, 14px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease, border-color 0.3s ease;
  z-index: 2147483646; cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.cap-display.visible { opacity: 1; pointer-events: auto; }
.cap-display.translating { border-color: rgba(167, 139, 250, 0.3); }
.cap-display.dragging { cursor: grabbing; }
.cap-display.pos-top { top: 32px; bottom: auto; }
.cap-display.pos-middle { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.cap-display.pos-bottom { bottom: 60px; top: auto; }
.cap-display.listener { border-color: rgba(134, 239, 172, 0.25); }
/* Fixed (embedded) layout — caption as a flush top bar (overrides position
   presets + drag offset via the higher-specificity html.layout-fixed id). */
html.layout-fixed #capDisplay {
  top: 0; right: 0; bottom: auto; left: 0;
  width: 100vw; min-width: 0; max-width: none;
  transform: none;
  border-radius: 0 0 16px 16px;
  border-width: 0 0 1px 0;
  border-bottom-color: color-mix(in srgb, var(--widget-accent) 38%, var(--widget-border));
  box-shadow: 0 8px 26px -10px rgba(0, 0, 0, 0.4);
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  cursor: default;
}
/* Inset variant — the bar is centred within a max content width, so the
   left/right margin is small on phones but grows on big screens. Tune the
   cap with --fixed-inset-max (default 1000px). */
html.layout-fixed.layout-inset #capDisplay {
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: max(16px, calc((100vw - var(--fixed-inset-max, 1000px)) / 2));
  right: max(16px, calc((100vw - var(--fixed-inset-max, 1000px)) / 2));
  width: auto;
  border-radius: 16px; border-width: 1px;
  border-bottom-color: var(--widget-border);
  box-shadow: 0 16px 44px -18px rgba(0, 0, 0, 0.5);
}
.cap-display-speaker {
  display: none;
  align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--speaker-color, var(--widget-room));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cap-display.listener .cap-display-speaker { display: flex; }
.cap-display-speaker.visible { opacity: 1; }
.cap-display-speaker .speaker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
/* Smart original line — the source-language text shown above the primary
   translation when the viewer is reading a translation. Compact + dim so
   the translation stays dominant. Hidden until renderOriginalSecondary
   has content to show. */
.cap-display-orig { display: none; text-align: left; margin-bottom: 9px; line-height: 1.35; overflow-wrap: anywhere; }
.cap-display-orig.visible { display: block; animation: cap-orig-in 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cap-orig-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cap-display-orig-lang { display: inline-block; font-family: var(--widget-font-mono); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--widget-accent-2); margin-right: 0.55em; vertical-align: 0.12em; }
.cap-display-orig-text { font-family: var(--widget-font); font-size: 0.95rem; font-weight: 400; font-style: italic; color: rgba(255, 255, 255, 0.55); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
[data-theme="light"] .cap-display-orig-text { color: rgba(15, 23, 42, 0.5); text-shadow: none; }
/* lang tag keeps the (theme-aware) secondary accent in light mode too —
   --widget-accent-2 already resolves to its darker light-theme value. */
/* AI working indicator — a small animated badge ("Translating" / "Voicing")
   shown while the model is processing, for both speaker and listener. */
.cap-ai-status {
  display: none;
  align-items: center; gap: 7px;
  margin-bottom: 9px;
  font-family: var(--widget-font-mono);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--widget-accent);
}
/* Hidden by request — the animated "Translating" / "Voicing" text badge is
   suppressed even while active. Remove this override to bring it back. */
.cap-ai-status.active { display: none; }
.cap-ai-status[data-kind="voicing"] { color: var(--widget-audio); }
.cap-ai-spark {
  display: inline-block; font-size: 0.85rem; line-height: 1;
  transform-origin: 50% 55%;
  animation: cap-ai-spin 2.6s linear infinite, cap-ai-pulse 1.3s ease-in-out infinite;
}
.cap-ai-dots { display: inline-flex; gap: 3px; }
.cap-ai-dots i {
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: inline-block;
  animation: cap-ai-bounce 1.2s ease-in-out infinite;
}
.cap-ai-dots i:nth-child(2) { animation-delay: 0.16s; }
.cap-ai-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes cap-ai-spin { to { transform: rotate(360deg); } }
@keyframes cap-ai-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes cap-ai-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0) scale(0.8); }
  40%           { opacity: 1;   transform: translateY(-3px) scale(1); }
}
/* Inline "translating…" processing animation painted into the caption body
   while a listener awaits the broadcast translation — a two-tone (cyan→violet)
   wave of dots centered where the translated text will appear. */
.cap-translating { display: inline-flex; align-items: center; gap: 0.3em; vertical-align: 0.08em; margin-left: 0.6em; }
.cap-translating:first-child { margin-left: 0; }
.cap-translating i {
  width: 0.34em; height: 0.34em; border-radius: 50%; display: inline-block;
  background: var(--widget-accent);
  /* idle: a calm "AI live" pulse trailing the translated caption */
  animation: cap-translating-idle 1.8s ease-in-out infinite;
}
/* processing: an active wave while the translation is being generated */
.cap-translating.processing i { width: 0.4em; height: 0.4em; animation: cap-translating-wave 1.15s ease-in-out infinite; }
.cap-translating i:nth-child(2) { animation-delay: 0.18s; background: color-mix(in srgb, var(--widget-accent), var(--widget-accent-2)); }
.cap-translating i:nth-child(3) { animation-delay: 0.36s; background: var(--widget-accent-2); }
@keyframes cap-translating-idle {
  0%, 100% { opacity: 0.3; transform: scale(0.7); }
  50%      { opacity: 0.9; transform: scale(0.95); }
}
@keyframes cap-translating-wave {
  0%, 80%, 100% { transform: translateY(0) scale(0.7); opacity: 0.35; }
  40%           { transform: translateY(-0.28em) scale(1); opacity: 1; }
}
.cap-display-text { font-family: var(--widget-font); font-size: clamp(1.05rem, 2.2vw + 0.45rem, 1.65rem); font-weight: 500; line-height: 1.4; color: #fff; text-align: left; letter-spacing: -0.005em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); min-height: 1.4em; }
.cap-display-text .cap-word { display: inline-block; opacity: 0; transform: translateY(8px); animation: cap-word-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; margin-right: 0.25em; }
/* Translated words follow the accent (theme-aware via the token) so the
   translation reads as the brand colour; original words stay plain ink. */
.cap-display-text .cap-word.translated { color: var(--widget-accent); }
@keyframes cap-word-in { to { opacity: 1; transform: translateY(0); } }
.cap-display-text .cap-word.fading { animation: cap-word-out 0.6s ease forwards; }
@keyframes cap-word-out { to { opacity: 0; transform: translateY(-6px); } }
/* Correction highlight (Engines → Correction highlight): a word the corrector
   changed flashes amber then settles. With Caption word colors on it keeps the
   accent tint instead of returning to plain ink. */
.cap-display-text .cap-word.corrected {
  animation: cap-word-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             cap-fixflash 1.2s ease 0.1s both;
}
@keyframes cap-fixflash {
  0%   { background: rgba(242, 179, 94, 0.28); color: #f2b35e; border-radius: 4px; }
  100% { background: transparent; color: inherit; border-radius: 4px; }
}
.cap-display-text .cap-word.corrected.corrected-keep {
  animation: cap-word-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             cap-fixflash-keep 1.2s ease 0.1s both;
}
@keyframes cap-fixflash-keep {
  0%   { background: rgba(242, 179, 94, 0.28); color: #f2b35e; }
  100% { background: transparent; color: var(--widget-accent); }
}
.cap-display-interim { color: rgba(255, 255, 255, 0.55); font-style: italic; }
/* Live partial (interim-sync, Engines -> Live partial captions): a remote speaker's in-progress
   words — provisional special tint + dotted underline + slight dim, updated in place (no per-word
   fly-in). When the final caption lands the span is removed and the committed word paints in the
   normal style, so the underline visually "resolves" into the final. */
.cap-display-text .cap-word.interim-live {
  animation: none;
  opacity: 0.8;
  transform: none;
  color: var(--cap-interim, #7dd3fc);
  text-decoration: underline dotted var(--cap-interim-underline, #38bdf8);
  text-underline-offset: 3px;
  font-style: italic;
}
[data-theme="light"] .cap-display-text .cap-word.interim-live { color: #0369a1; }
/* Translated partial (ms.fx.interimXlate): dimmed ACCENT hue so a tentative TRANSLATION reads distinct
   from the raw-original partial (blue). Keeps interim-live's opacity + dotted-underline + italic (tentative). */
.cap-display-text .cap-word.interim-live.translated { color: var(--widget-accent); text-decoration-color: var(--widget-accent); }
[data-theme="light"] .cap-display-text .cap-word.interim-live.translated { color: var(--widget-accent); }
/* B2: held "translating…" placeholder — the original partial dims + gently pulses while the
   translated final is in flight, then it's replaced by the committed translation. */
.cap-display-text .cap-word.interim-live.translating { animation: cap-interim-pulse 1.1s ease-in-out infinite; }
@keyframes cap-interim-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }
.cap-display-empty { color: rgba(255, 255, 255, 0.4); font-weight: 400; font-style: italic; font-size: 1.1rem; }
/* Speaker self-verification line (#capSelfXl, ms.fx.interimXlateSelf): live translation of my own speech,
   below the source. Accent + dim + dotted-underline + italic = a tentative translation to verify against. */
.cap-self-xl { margin-top: 6px; text-align: left; color: var(--widget-accent); opacity: 0.85; font-style: italic; font-size: 0.95em; line-height: 1.35; text-decoration: underline dotted var(--widget-accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
[data-theme="light"] .cap-self-xl { color: var(--widget-accent); }

/* Live metrics panel (Engines → Live metrics). Hidden until .visible; a small
   monospace corner readout of caption-quality stats. Never affects layout when off. */
.cap-metrics {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2147483647;   /* body-level HUD — stay above the caption display */
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--widget-mono, ui-monospace, monospace);
  color: rgba(255, 255, 255, 0.9);
  pointer-events: auto;   /* draggable HUD */
  cursor: move;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1.15;
}
.cap-metrics.visible { display: block; }
/* Once dragged, detach from the caption corner and float over the viewport. */
.cap-metrics.dragged { position: fixed; top: 8px; right: auto; }
.cap-metrics.dragging { opacity: 0.9; }
.cap-metrics .cap-metrics-eng {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--widget-accent, #4fd6c0); margin-bottom: 4px;
}
.cap-metrics .cap-metrics-grid {
  display: grid; grid-template-columns: repeat(2, auto); gap: 2px 12px;
}
/* Role switch: author `display:grid` beats the UA [hidden] rule, so hide explicitly. */
.cap-metrics .cap-metrics-grid[hidden] { display: none; }
.cap-metrics .cap-metrics-cell { display: flex; align-items: baseline; gap: 5px; }
/* Tier gate: author display:flex beats the UA [hidden] rule, so hide explicitly. */
.cap-metrics .cap-metrics-cell[hidden] { display: none; }
.cap-metrics .cap-metrics-v { font-size: 13px; font-weight: 700; }
/* Threshold colors (good / warn / bad) — applied to a value span by setMetricColor. */
.cap-metrics .cap-metrics-v.m-good { color: var(--m-good, #34d399); }
.cap-metrics .cap-metrics-v.m-warn { color: var(--m-warn, #fbbf24); }
.cap-metrics .cap-metrics-v.m-bad  { color: var(--m-bad,  #f87171); }
/* Sparklines (advanced tier) — inline SVG polyline after the label. */
.cap-metrics .cap-metrics-spark { display: inline-flex; align-items: center; margin-left: 4px; }
.cap-metrics .cap-metrics-spark:empty { display: none; }
.cap-metrics .cap-spark-svg { display: block; opacity: 0.85; }
.cap-metrics .cap-spark-svg polyline { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.7; }
.cap-metrics .cap-spark-svg polyline.m-good { stroke: var(--m-good, #34d399); opacity: 0.9; }
.cap-metrics .cap-spark-svg polyline.m-warn { stroke: var(--m-warn, #fbbf24); opacity: 0.9; }
.cap-metrics .cap-spark-svg polyline.m-bad  { stroke: var(--m-bad,  #f87171); opacity: 0.9; }
/* Advanced tier: more cells → allow up to 3 columns and a little scroll. */
.cap-metrics.metrics-adv .cap-metrics-grid { grid-template-columns: repeat(3, auto); max-height: 60vh; overflow-y: auto; }
/* Section headers (advanced) — span the full grid width above each group. */
.cap-metrics .cap-metrics-head {
  grid-column: 1 / -1; margin-top: 3px;
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--widget-accent, #4fd6c0); opacity: 0.65;
}
.cap-metrics .cap-metrics-head[hidden] { display: none; }
/* Room status section — connection + people + per-role counts. */
.cap-metrics .cap-metrics-room {
  margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cap-metrics .cap-metrics-room[hidden] { display: none; }
[data-theme="light"] .cap-metrics .cap-metrics-room { border-top-color: rgba(15, 23, 42, 0.1); }
.cap-metrics .rm-line { font-size: 10px; margin-bottom: 3px; }
.cap-metrics .rm-line b { font-weight: 700; }
.cap-metrics .rm-dot { font-size: 8px; vertical-align: middle; }
.cap-metrics .rm-dot.m-good { color: var(--m-good, #34d399); }
.cap-metrics .rm-dot.m-bad  { color: var(--m-bad,  #f87171); }
.cap-metrics .rm-cells { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 9px; }
.cap-metrics .rm-c { color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.cap-metrics .rm-c b { color: rgba(255, 255, 255, 0.92); font-weight: 700; font-variant-numeric: tabular-nums; }
.cap-metrics .rm-c.m-warn { color: var(--m-warn, #fbbf24); }
.cap-metrics .rm-c.m-good { color: var(--m-good, #34d399); }
.cap-metrics .rm-c.m-bad  { color: var(--m-bad,  #f87171); }
.cap-metrics .rm-perms { margin-top: 3px; }
.cap-metrics .rm-peer { font-size: 9px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="light"] .cap-metrics .rm-peer { color: rgba(15, 23, 42, 0.62); }
[data-theme="light"] .cap-metrics .rm-c { color: rgba(15, 23, 42, 0.6); }
[data-theme="light"] .cap-metrics .rm-c b { color: rgba(15, 23, 42, 0.92); }
/* Glass-to-glass latency waterfall (P1) — proportional stage bars under the grid. */
.cap-metrics .cap-metrics-wf {
  margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-direction: column; gap: 2px;
}
.cap-metrics .cap-metrics-wf[hidden] { display: none; }
[data-theme="light"] .cap-metrics .cap-metrics-wf { border-top-color: rgba(15, 23, 42, 0.1); }
.cap-metrics .wf-head {
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--widget-accent, #4fd6c0); opacity: 0.7; margin-bottom: 1px;
}
.cap-metrics .wf-row { display: flex; align-items: center; gap: 5px; font-size: 9.5px; }
.cap-metrics .wf-row.wf-sub { opacity: 0.6; font-size: 8.5px; }
.cap-metrics .wf-k { flex: 0 0 46px; color: rgba(255, 255, 255, 0.6); }
[data-theme="light"] .cap-metrics .wf-k { color: rgba(15, 23, 42, 0.6); }
.cap-metrics .wf-bar { flex: 1 1 auto; height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; }
.cap-metrics .wf-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--m-warn, #fbbf24); transition: width 0.4s ease; }
.cap-metrics .wf-bar > i.m-good { background: var(--m-good, #34d399); }
.cap-metrics .wf-bar > i.m-warn { background: var(--m-warn, #fbbf24); }
.cap-metrics .wf-bar > i.m-bad  { background: var(--m-bad,  #f87171); }
.cap-metrics .wf-v { flex: 0 0 46px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cap-metrics .wf-u { font-size: 8px; font-weight: 400; opacity: 0.5; margin-left: 1px; }
.cap-metrics .wf-cold {
  font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700;
  color: var(--m-bad, #f87171); border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; opacity: 0.85;
}
.cap-metrics .wf-foot { font-size: 8.5px; color: rgba(255, 255, 255, 0.5); margin-top: 1px; letter-spacing: 0.03em; }
.cap-metrics .wf-foot.wf-roster { color: rgba(255, 255, 255, 0.62); }
[data-theme="light"] .cap-metrics .wf-foot { color: rgba(15, 23, 42, 0.5); }
/* Session-summary footer (advanced). */
.cap-metrics .cap-metrics-foot {
  margin-top: 6px; padding-top: 5px; font-size: 9.5px; letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.55); border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cap-metrics .cap-metrics-foot[hidden] { display: none; }
[data-theme="light"] .cap-metrics .cap-metrics-foot { color: rgba(15, 23, 42, 0.55); border-top-color: rgba(15, 23, 42, 0.1); }
.cap-metrics .cap-metrics-l {
  font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
[data-theme="light"] .cap-metrics {
  background: rgba(15, 23, 42, 0.06); color: #0f172a;
  border-color: rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .cap-metrics .cap-metrics-l { color: rgba(15, 23, 42, 0.5); }

/* baai translation + terminology diff (Correction = baai). Hidden until a
   translation lands; sits under the caption text, dim + compact. */
.cap-baai-translate {
  display: none;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(79, 214, 192, 0.28);
  border-left: 2px solid var(--widget-accent, #4fd6c0);
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
}
.cap-baai-translate.visible { display: block; }
.cap-baai-translate .bx-src {
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--widget-accent, #4fd6c0); margin-bottom: 3px;
}
.cap-baai-translate .bx-out { font-weight: 600; }
.cap-baai-translate .bx-diff {
  margin-top: 3px; font-size: 11px; color: rgba(255, 255, 255, 0.45);
}
.cap-baai-translate .bx-diff del { text-decoration: line-through; opacity: 0.75; }
[data-theme="light"] .cap-baai-translate {
  background: rgba(15, 23, 42, 0.05); color: #0f172a;
}
[data-theme="light"] .cap-baai-translate .bx-diff { color: rgba(15, 23, 42, 0.5); }
/* Post-edit diff lanes (glossary / refine) with underlined fixed words. */
.cap-baai-translate .bx-glossary,
.cap-baai-translate .bx-refine {
  margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(79, 214, 192, 0.18);
}
.cap-baai-translate .bx-lane {
  display: block; font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--widget-accent, #4fd6c0); opacity: 0.8; margin-bottom: 2px;
}
.cap-baai-translate .fx-changed {
  background: rgba(79, 214, 192, 0.22); color: inherit; border-radius: 3px; padding: 0 2px;
  text-decoration: underline; text-decoration-color: var(--widget-accent, #4fd6c0); text-underline-offset: 2px;
}
[data-theme="light"] .cap-baai-translate .fx-changed { background: rgba(15, 118, 110, 0.16); }

.cap-loading-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 0 2px 0 6px; animation: dot-pulse 1s ease-in-out infinite; vertical-align: middle; }
.cap-loading-dot.translate { background: var(--widget-translate); }
.cap-loading-dot.audio { background: var(--widget-audio); animation-delay: 0.2s; }
.cap-loading-dot.send { background: var(--widget-room); animation-delay: 0.4s; }
@keyframes dot-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.2); } }

/* Pending-translate dots in the Subtitle pane — one per in-flight
   /v2/translate call for the active subtitle language. Each dot
   fades+scales in, pulses while waiting, then fades+scales out when
   its API call resolves and the translated words land. Tone matches
   .cap-word.translated so it visually previews where the text will go. */
.cap-display-text .cap-pending-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin: 0 3px 0 4px;
  background: #c4b5fd;
  vertical-align: middle;
  opacity: 0;
  transform: scale(0.5);
  animation:
    cap-pending-in 0.22s ease-out forwards,
    cap-pending-pulse 1.1s ease-in-out 0.22s infinite;
}
.cap-display-text .cap-pending-dot.leaving {
  animation: cap-pending-out 0.28s ease forwards;
}
@keyframes cap-pending-in {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 0.85; transform: scale(1); }
}
@keyframes cap-pending-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@keyframes cap-pending-out {
  to { opacity: 0; transform: scale(0.55); }
}
[data-theme="light"] .cap-display-text .cap-pending-dot { background: #8b5cf6; }

/* TTS variant — same dot animation but in the audio-channel tone, so
   "translation pending" and "speech-synthesis pending" are visually
   distinct. One dot per in-flight /v2/tts call for the active dub lang. */
.cap-display-text .cap-pending-dot.tts {
  background: #fbbf24;
}
[data-theme="light"] .cap-display-text .cap-pending-dot.tts {
  background: #d97706;
}

/* ============ AUDIO PANEL (right) ============ */
.cap-side-panel {
  position: fixed; width: 300px; max-height: calc(100vh - 120px);
  background: var(--widget-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--widget-border); border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  z-index: 2147483646; display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cap-side-panel.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.cap-audio-panel { right: 24px; top: 80px; }
.cap-room-panel { left: 24px; top: 80px; }
.cap-side-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--widget-border);
  cursor: grab; user-select: none;
}
.cap-side-panel-header.dragging { cursor: grabbing; }
.cap-side-panel-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.cap-audio-panel .cap-side-panel-title { color: var(--widget-audio); }
.cap-room-panel .cap-side-panel-title { color: var(--widget-room); }
.cap-side-panel-title svg { width: 14px; height: 14px; }
.cap-side-count { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--widget-ink-dim); background: rgba(255, 255, 255, 0.05); padding: 2px 8px; border-radius: 10px; }
.cap-side-panel-header-right { display: flex; align-items: center; gap: 6px; }
.cap-side-panel-close {
  background: transparent; border: none; color: var(--widget-ink-dim);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s ease;
}
.cap-side-panel-close:hover { background: var(--widget-surface-strong); color: var(--widget-ink); }

/* Floating restore chip — appears at the left edge only when the Room
   Feed panel has been dismissed. Drops out of layout otherwise. */
.cap-feed-chip {
  position: fixed;
  left: 16px; top: 80px;
  z-index: 2147483645;
  background: var(--widget-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--widget-border);
  color: var(--widget-room);
  border-radius: 999px;
  padding: 8px 14px 8px 12px;
  font-family: inherit; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: none; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.cap-feed-chip.visible { display: inline-flex; }
.cap-feed-chip:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }
.cap-feed-chip svg { width: 14px; height: 14px; }
.cap-feed-chip-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; color: var(--widget-ink-dim);
  background: var(--widget-surface-strong);
  padding: 1px 7px; border-radius: 10px; min-width: 18px; text-align: center;
}
@media (max-width: 600px) { .cap-feed-chip { left: 12px; top: 14px; padding: 7px 12px 7px 10px; font-size: 0.7rem; } }
.cap-side-list { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 60px; max-height: calc(100vh - 200px); }
.cap-side-list::-webkit-scrollbar { width: 6px; }
.cap-side-list::-webkit-scrollbar-track { background: transparent; }
.cap-side-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
.cap-side-empty { color: var(--widget-ink-dim); font-size: 0.8rem; font-style: italic; text-align: center; padding: 16px 8px; }

/* Audio item */
.cap-audio-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  animation: card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0; transform: translateY(-8px);
}
@keyframes card-in { to { opacity: 1; transform: translateY(0); } }
.cap-audio-item.playing { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.05); }
.cap-audio-item.remote { border-left: 3px solid var(--user-color, var(--widget-room)); }
.cap-audio-item-sender { font-size: 0.7rem; font-weight: 600; color: var(--user-color, var(--widget-room)); display: flex; align-items: center; gap: 6px; }
.cap-audio-item-sender::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cap-audio-item-orig { font-size: 0.72rem; color: var(--widget-ink-dim); font-style: italic; line-height: 1.3; word-break: break-word; }
.cap-audio-item-text { font-size: 0.9rem; color: var(--widget-ink); font-weight: 500; line-height: 1.35; word-break: break-word; }

/* Custom audio player (replaces native <audio controls>) */
.cap-player {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.cap-player-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--widget-audio);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform 0.15s ease;
}
.cap-player-btn:hover { transform: scale(1.08); }
.cap-player-btn svg { width: 12px; height: 12px; color: #1a1d24; }
.cap-player-wave {
  flex: 1; height: 32px;
  cursor: pointer;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.cap-player-wave canvas { display: block; width: 100%; height: 100%; }
.cap-player-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--widget-ink-dim);
  min-width: 64px; text-align: right;
  flex-shrink: 0;
}

.cap-audio-item-meta { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--widget-ink-dim); }

/* Clip card is fully clickable — clicking anywhere outside links/buttons
   jumps the Master Stream to this clip's position. */
.cap-audio-item { cursor: pointer; }
.cap-audio-item:hover { background: var(--widget-surface-strong); }
.cap-audio-item-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed var(--widget-border);
}
.cap-audio-item-jump {
  background: transparent;
  border: 1px solid var(--widget-border);
  color: var(--widget-audio);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: all 0.15s ease;
}
.cap-audio-item-jump:hover {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.45);
}
.cap-audio-item-jump svg { flex-shrink: 0; }
.cap-audio-item-download {
  color: var(--widget-ink-dim);
  text-decoration: none;
  display: inline-flex; align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.cap-audio-item-download:hover {
  color: var(--widget-audio);
  background: var(--widget-surface-strong);
}

/* ============ VOICE SUITE (top of audio panel) ============ */
.cap-suite {
  border-bottom: 1px solid var(--widget-border);
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.06), transparent);
}
.cap-suite-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.cap-suite-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--widget-audio);
  display: flex; align-items: center; gap: 6px;
}
.cap-suite-title::before {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%; background: currentColor;
}
.cap-suite-title.playing::before {
  box-shadow: 0 0 6px currentColor;
  animation: dot-pulse 1.4s ease-in-out infinite;
}
.cap-suite-cog {
  background: transparent; border: none; cursor: pointer;
  color: var(--widget-ink-dim);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.cap-suite-cog:hover { color: var(--widget-ink); background: rgba(255, 255, 255, 0.06); }
.cap-suite-cog svg { width: 14px; height: 14px; }
.cap-suite-cog.active { color: var(--widget-audio); }

/* Voice Suite header actions (cog + close-X) */
.cap-suite-header-actions { display: flex; align-items: center; gap: 2px; }
.cap-suite-close-btn { font-size: 1.1rem; line-height: 1; }
.cap-suite-close-btn:hover { color: var(--widget-danger); }

/* "+ Voice Suite" restore chip — appears in the audio panel header
   only when the suite is dismissed. Lets the user bring it back. */
.cap-suite-restore {
  display: none;
  align-items: center; gap: 4px;
  background: transparent;
  border: 1px dashed var(--widget-border);
  color: var(--widget-audio);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cap-suite-restore:hover {
  border-style: solid;
  background: rgba(251, 191, 36, 0.1);
}
.cap-suite-restore > span:first-child { font-size: 0.8rem; line-height: 1; }

/* Suite-hidden state ("Master-only" view):
     - hides the Voice Suite block
     - hides the per-clip transcript list
   so the audio panel becomes a focused Master Stream surface. The
   restore chip in the audio panel header brings them both back. */
.cap-audio-panel.suite-hidden #capSuite { display: none; }
.cap-audio-panel.suite-hidden #capAudioList { display: none; }
.cap-audio-panel.suite-hidden #capSuiteRestoreBtn { display: inline-flex; }
.cap-audio-panel.suite-hidden.layout-horizontal .cap-audio-tools > .cap-suite.cap-master { border-right: none; }

.cap-suite-wave-wrap {
  height: 48px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.cap-suite-wave { display: block; width: 100%; height: 100%; }
.cap-suite-wave-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; color: var(--widget-ink-dim); font-style: italic;
}

.cap-suite-info {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; gap: 8px;
}
.cap-suite-current {
  font-size: 0.78rem; color: var(--widget-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.cap-suite-current-sender { color: var(--user-color, var(--widget-ink-dim)); font-weight: 600; margin-right: 6px; }
.cap-suite-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem; color: var(--widget-ink-dim);
  flex-shrink: 0;
}

.cap-suite-controls {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px;
}
.cap-suite-ctrl-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--widget-border);
  color: var(--widget-ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.cap-suite-ctrl-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); }
.cap-suite-ctrl-btn.primary {
  background: var(--widget-audio); border-color: var(--widget-audio); color: #1a1d24;
  width: 36px; height: 36px;
}
.cap-suite-ctrl-btn.primary:hover { background: #fcd34d; border-color: #fcd34d; }
.cap-suite-ctrl-btn svg { width: 13px; height: 13px; }
.cap-suite-ctrl-btn.primary svg { width: 15px; height: 15px; }

.cap-suite-config {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--widget-border);
  display: flex; flex-direction: column; gap: 10px;
}
.cap-suite-config.hidden { display: none; }
.cap-suite-config-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; color: var(--widget-ink-dim); gap: 8px;
}
.cap-suite-config-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.cap-suite-config-row input[type="checkbox"] { accent-color: var(--widget-audio); cursor: pointer; }
.cap-suite-config-row .cap-mini-slider {
  width: 90px; height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.cap-suite-config-row .cap-mini-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px;
  background: var(--widget-audio);
  border-radius: 50%; cursor: pointer;
}
.cap-suite-config-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; color: var(--widget-audio);
  min-width: 36px; text-align: right;
}

/* Room feed item */
.cap-room-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--user-color, var(--widget-room));
  border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  animation: card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0; transform: translateY(-8px);
}
.cap-room-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cap-room-item-sender { font-size: 0.7rem; font-weight: 600; color: var(--user-color, var(--widget-room)); display: flex; align-items: center; gap: 6px; min-width: 0; }
.cap-room-item-sender::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.cap-room-item-sender-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-room-item-kind { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em; color: var(--widget-ink-dim); text-transform: uppercase; }
.cap-room-item-text { font-size: 0.88rem; color: var(--widget-ink); line-height: 1.4; word-break: break-word; }
.cap-room-item-text.translation { color: #f0e7ff; }
.cap-room-item-time { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--widget-ink-dim); }

/* ============ STREAM PLAYER (rich, parallel component) ============ */
.cap-sp {
  border-bottom: 1px solid var(--widget-border);
  padding: 14px 14px 12px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(103, 232, 249, 0.10), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(167, 139, 250, 0.08), transparent 60%);
  color: var(--widget-ink);
  display: flex; flex-direction: column; gap: 10px;
}
.cap-sp-header {
  display: flex; justify-content: space-between; align-items: center;
}
.cap-sp-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--widget-accent);
}
.cap-sp-title-icon { width: 14px; height: 14px; }
.cap-sp-badge {
  background: var(--widget-accent); color: #0a0a0b;
  font-size: 0.55rem; font-weight: 800;
  letter-spacing: 0.12em;
  padding: 2px 6px; border-radius: 4px;
}
.cap-sp-header-right { display: flex; align-items: center; gap: 6px; }

/* LIVE / PLAYBACK pill — same semantics as master, slightly bigger */
.cap-sp-pill {
  background: transparent;
  border: 1px solid var(--widget-border);
  color: var(--widget-ink-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all 0.15s ease;
}
.cap-sp-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--widget-ink-dim);
  transition: all 0.2s ease;
}
.cap-sp-pill.live {
  color: var(--widget-accent);
  border-color: rgba(103, 232, 249, 0.45);
  background: rgba(103, 232, 249, 0.10);
}
.cap-sp-pill.live .cap-sp-pill-dot {
  background: var(--widget-accent);
  box-shadow: 0 0 8px var(--widget-accent);
  animation: dot-pulse 1.4s ease-in-out infinite;
}
.cap-sp-pill.playback {
  color: var(--widget-warn);
  border-color: rgba(252, 211, 77, 0.4);
  background: rgba(252, 211, 77, 0.06);
}
.cap-sp-pill.playback .cap-sp-pill-dot { background: var(--widget-warn); }

.cap-sp-icon-btn {
  background: transparent; border: 1px solid transparent;
  color: var(--widget-ink-dim); cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.cap-sp-icon-btn:hover {
  color: var(--widget-ink); background: var(--widget-surface-strong);
  border-color: var(--widget-border);
}
.cap-sp-icon-btn svg { width: 14px; height: 14px; }

/* Waveform region */
.cap-sp-wave {
  position: relative;
  height: 64px;
  background: var(--widget-wave-bg);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.cap-sp-wave-canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 2; }
.cap-sp-wave-buffered {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(103, 232, 249, 0.07);
  pointer-events: none; z-index: 1;
  width: 0;
  transition: width 0.15s linear;
}
.cap-sp-wave-chapters {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none; z-index: 3;
}
.cap-sp-wave-chapters .cap-sp-chapter-tick {
  position: absolute; top: 0; bottom: 0;
  width: 1px; background: rgba(255, 255, 255, 0.18);
}
[data-theme="light"] .cap-sp-wave-chapters .cap-sp-chapter-tick {
  background: rgba(15, 23, 42, 0.22);
}
.cap-sp-wave-hover {
  position: absolute; top: 0; bottom: 0; width: 1.5px;
  background: var(--widget-accent);
  pointer-events: none;
  opacity: 0; z-index: 4;
  transition: opacity 0.1s ease;
}
.cap-sp-wave:hover .cap-sp-wave-hover { opacity: 0.7; }
.cap-sp-wave-tooltip {
  position: absolute; top: -28px;
  transform: translateX(-50%);
  background: var(--widget-bg);
  border: 1px solid var(--widget-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--widget-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  padding: 3px 7px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0; z-index: 5;
  white-space: nowrap; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.1s ease;
}
.cap-sp-wave:hover .cap-sp-wave-tooltip { opacity: 1; }
.cap-sp-wave-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; color: var(--widget-ink-dim);
  font-style: italic; z-index: 2;
}

/* Info row */
.cap-sp-info {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.cap-sp-status {
  font-size: 0.74rem;
  color: var(--widget-ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.cap-sp-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--widget-accent);
  flex-shrink: 0;
}

/* Transport row — big play button in the middle */
.cap-sp-transport {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 4px 0 2px;
}
.cap-sp-skip-btn {
  background: var(--widget-surface);
  border: 1px solid var(--widget-border);
  color: var(--widget-ink);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; font-weight: 700;
  transition: all 0.15s ease;
}
.cap-sp-skip-btn:hover {
  background: var(--widget-surface-strong);
  border-color: rgba(255, 255, 255, 0.25);
}
[data-theme="light"] .cap-sp-skip-btn:hover { border-color: rgba(15, 23, 42, 0.25); }
.cap-sp-skip-btn svg { width: 14px; height: 14px; }
.cap-sp-play-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--widget-accent);
  color: #0a0a0b;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(103, 232, 249, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cap-sp-play-btn:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 22px rgba(103, 232, 249, 0.5);
}
.cap-sp-play-btn svg { width: 18px; height: 18px; }
[data-theme="light"] .cap-sp-play-btn { color: #f8fafc; }

/* Tier rows */
.cap-sp-tier { display: flex; flex-direction: column; gap: 8px; }
.cap-sp.layout-compact .cap-sp-tier-standard { display: none; }
.cap-sp.layout-compact .cap-sp-tier-expert { display: none; }
.cap-sp.layout-compact .cap-sp-info { display: none; }
.cap-sp.layout-standard .cap-sp-tier-expert { display: none; }
.cap-sp.layout-expert .cap-sp-tier-expert { display: flex; }

.cap-sp-row {
  display: flex; align-items: center; gap: 8px;
}
.cap-sp-row-split { justify-content: space-between; flex-wrap: wrap; }
.cap-sp-row-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--widget-ink-dim);
  flex-shrink: 0;
}

/* Chip rows (speed + skip) */
.cap-sp-chips {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.cap-sp-chips button {
  background: var(--widget-surface);
  border: 1px solid transparent;
  color: var(--widget-ink-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem; font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.cap-sp-chips button:hover {
  color: var(--widget-ink); background: var(--widget-surface-strong);
}
.cap-sp-chips button.active {
  color: var(--widget-accent);
  background: rgba(103, 232, 249, 0.12);
  border-color: rgba(103, 232, 249, 0.45);
}
.cap-sp-chips-skip { gap: 4px; }

/* Volume */
.cap-sp-vol {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 120px;
}
.cap-sp-vol-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 3px;
  background: var(--widget-surface-strong);
  border-radius: 2px;
  outline: none;
}
.cap-sp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  background: var(--widget-accent);
  border-radius: 50%; cursor: pointer;
}
.cap-sp-vol-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  background: var(--widget-accent);
  border-radius: 50%; cursor: pointer; border: none;
}
.cap-sp-mute.muted { color: var(--widget-danger); }

/* Expert-tier feature row */
.cap-sp-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.cap-sp-feature {
  background: var(--widget-surface);
  border: 1px solid var(--widget-border);
  color: var(--widget-ink-dim);
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 7px 6px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.cap-sp-feature:hover {
  color: var(--widget-ink);
  background: var(--widget-surface-strong);
  border-color: rgba(103, 232, 249, 0.3);
}
.cap-sp-feature svg { width: 13px; height: 13px; flex-shrink: 0; }
.cap-sp-feature.active {
  color: var(--widget-accent);
  background: rgba(103, 232, 249, 0.12);
  border-color: rgba(103, 232, 249, 0.45);
}

@media (max-width: 600px) {
  .cap-sp { padding: 10px 12px; gap: 8px; }
  .cap-sp-wave { height: 54px; }
  .cap-sp-play-btn { width: 40px; height: 40px; }
  .cap-sp-chips button { padding: 6px 9px; font-size: 0.7rem; }
  .cap-sp-features { grid-template-columns: repeat(2, 1fr); }
}

/* ===== StreamPlayer · light theme overrides =====
   Replace the dark-tuned cyan rgba constants with the light theme's
   darker accent so contrast reads. */
[data-theme="light"] .cap-sp {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(8, 145, 178, 0.10), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(124, 58, 237, 0.07), transparent 60%);
}
[data-theme="light"] .cap-sp-badge { color: #f8fafc; }
[data-theme="light"] .cap-sp-pill.live {
  border-color: rgba(8, 145, 178, 0.5);
  background: rgba(8, 145, 178, 0.10);
}
[data-theme="light"] .cap-sp-pill.live .cap-sp-pill-dot {
  box-shadow: 0 0 8px rgba(8, 145, 178, 0.7);
}
[data-theme="light"] .cap-sp-pill.playback {
  border-color: rgba(180, 83, 9, 0.45);
  background: rgba(180, 83, 9, 0.08);
}
[data-theme="light"] .cap-sp-wave-buffered { background: rgba(8, 145, 178, 0.10); }
[data-theme="light"] .cap-sp-wave-hover { background: #0891b2; }
[data-theme="light"] .cap-sp-chips button.active {
  color: var(--widget-accent);
  background: rgba(8, 145, 178, 0.12);
  border-color: rgba(8, 145, 178, 0.5);
}
[data-theme="light"] .cap-sp-play-btn {
  color: #f8fafc;
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.35);
}
[data-theme="light"] .cap-sp-play-btn:hover {
  box-shadow: 0 6px 22px rgba(8, 145, 178, 0.5);
}
[data-theme="light"] .cap-sp-feature:hover {
  border-color: rgba(8, 145, 178, 0.4);
}
[data-theme="light"] .cap-sp-feature.active {
  background: rgba(8, 145, 178, 0.12);
  border-color: rgba(8, 145, 178, 0.5);
}
[data-theme="light"] .cap-sp-skip-btn:hover {
  border-color: rgba(15, 23, 42, 0.25);
}

/* ============ MASTER STREAM (combined audio) ============ */
.cap-master {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.07), transparent);
}
.cap-master .cap-suite-title { color: var(--widget-translate); }
.cap-master .cap-suite-time { color: var(--widget-translate); }
.cap-master .cap-suite-ctrl-btn.primary {
  background: var(--widget-translate);
  border-color: var(--widget-translate);
  color: #1a1d24;
}
.cap-master .cap-suite-ctrl-btn.primary:hover {
  background: #c4b5fd; border-color: #c4b5fd;
}
.cap-master-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--widget-translate);
  background: rgba(167, 139, 250, 0.12);
  padding: 2px 6px;
  border-radius: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cap-master a.cap-suite-ctrl-btn { color: var(--widget-ink); }
.cap-master a.cap-suite-ctrl-btn:hover { color: var(--widget-translate); }

.cap-master-toggle {
  background: transparent;
  border: 1px solid var(--widget-border);
  color: var(--widget-ink-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.15s ease;
}
.cap-master-toggle:hover { border-color: rgba(255,255,255,0.25); color: var(--widget-ink); }
.cap-master-toggle-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--widget-ink-dim);
  transition: all 0.2s ease;
}
.cap-master-toggle.live {
  color: var(--widget-translate);
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(167, 139, 250, 0.1);
}
.cap-master-toggle.live .cap-master-toggle-dot {
  background: var(--widget-translate);
  box-shadow: 0 0 6px var(--widget-translate);
  animation: dot-pulse 1.4s ease-in-out infinite;
}
.cap-master-toggle.back,
.cap-master-toggle.playback {
  color: var(--widget-warn);
  border-color: rgba(252, 211, 77, 0.4);
  background: rgba(252, 211, 77, 0.06);
}
.cap-master-toggle.back .cap-master-toggle-dot,
.cap-master-toggle.playback .cap-master-toggle-dot { background: var(--widget-warn); }
.cap-master-header-right {
  display: flex; align-items: center; gap: 8px;
}

/* ===== Config panel layout: vertical (default) vs horizontal =====
   Horizontal widens the panel and uses CSS multi-column layout, which
   automatically balances sections across columns without breaking them
   in the middle. Falls back to vertical on small viewports. */
.cap-panel.config-horizontal {
  width: min(720px, calc(100vw - 24px));
}
.cap-panel.config-horizontal .cap-panel-body {
  column-count: 2;
  column-gap: 24px;
  column-rule: 1px solid var(--widget-border);
}
.cap-panel.config-horizontal .cap-row,
.cap-panel.config-horizontal .cap-section-title,
.cap-panel.config-horizontal #capCaptureSection,
.cap-panel.config-horizontal #capListenerSection {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.cap-panel.config-horizontal .cap-section-title:first-child { margin-top: 0; }
/* Re-tighten the first section title that may now land at the top of
   either column after CSS-columns balances the flow. */
.cap-panel.config-horizontal .cap-panel-body > .cap-section-title { margin-top: 0; }
@media (max-width: 700px) {
  /* Smart fallback: phones never get the 2-col layout — even if user
     turned it on previously on desktop. */
  .cap-panel.config-horizontal { width: calc(100vw - 16px); }
  .cap-panel.config-horizontal .cap-panel-body { column-count: 1; }
}

/* ===== Audio Panel layout: vertical (default) vs horizontal =====
   Vertical = Master Stream stacked above Voice Suite (default).
   Horizontal = Master Stream + Voice Suite side-by-side, with the
   audio panel widened to fit both. The clip list always stays below. */
.cap-audio-tools { display: flex; flex-direction: column; }
.cap-audio-panel.layout-horizontal { width: 580px; max-width: calc(100vw - 32px); }
.cap-audio-panel.layout-horizontal .cap-audio-tools {
  flex-direction: row;
  align-items: stretch;
}
.cap-audio-panel.layout-horizontal .cap-audio-tools > .cap-suite {
  flex: 1; min-width: 0;
  border-bottom: none;
  border-right: 1px solid var(--widget-border);
}
.cap-audio-panel.layout-horizontal .cap-audio-tools > .cap-suite:last-child {
  border-right: none;
}
/* Mobile-friendly: under 700px we force vertical no matter the setting */
@media (max-width: 700px) {
  .cap-audio-panel.layout-horizontal { width: calc(100vw - 16px); }
  .cap-audio-panel.layout-horizontal .cap-audio-tools { flex-direction: column; }
  .cap-audio-panel.layout-horizontal .cap-audio-tools > .cap-suite {
    border-right: none;
    border-bottom: 1px solid var(--widget-border);
  }
}

/* ============ RESPONSIVE ============
   Tier strategy:
   - default (>900px): desktop layout, fixed-width panels
   - tablet  (≤900px): narrower panels, side panels shrink
   - mobile  (≤600px): full-bleed panel, side panels become stacked
                        bottom/top sheets, smaller FAB
   - phone   (≤400px): tightest spacing, smallest typography
   - landscape short heights (≤480h): collapse vertical chrome
*/
@media (max-width: 900px) {
  .cap-panel { width: min(360px, calc(100vw - 24px)); }
  .cap-side-panel { width: min(280px, calc(50vw - 18px)); }
  /* .cap-display sizing is fully fluid in its base rule — no override needed. */
}

@media (max-width: 600px) {
  /* Settings panel — full bleed with small margin */
  .cap-panel { width: calc(100vw - 16px); max-height: 88vh; border-radius: 14px; }
  .cap-panel-body { padding: 14px 14px 16px; }
  .cap-panel-header { padding: 12px 14px; }
  .cap-row { margin-bottom: 12px; }
  .cap-section-title { margin: 14px 0 10px; }

  /* Caption display — width/padding/font are fluid in the base rule; only
     nudge the docked position closer to the edge on phones. */
  .cap-display.pos-bottom { bottom: 16px; }
  .cap-display.pos-top { top: 16px; }
  .cap-display-empty { font-size: 0.95rem; }

  /* Side panels — stack as top (room) + bottom-area (audio) sheets so
     they never collide horizontally. The user can still drag them. */
  .cap-side-panel {
    width: calc(100vw - 16px); max-width: none;
    left: 8px; right: 8px;
    max-height: 38vh;
    overflow-y: auto; /* scroll the whole panel — list alone isn't enough
                         when Master Stream + Voice Suite are stacked above */
  }
  .cap-room-panel { top: 70px; bottom: auto; }
  .cap-audio-panel { top: auto; bottom: 84px; }
  .cap-side-list { max-height: none; padding: 10px; overflow: visible; }
  .cap-side-panel-header { padding: 10px 14px; position: sticky; top: 0; background: var(--widget-bg); z-index: 2; }
  /* Compress the two waveform blocks so they fit better on a phone */
  .cap-suite { padding: 10px 12px 10px; }
  .cap-suite-wave-wrap { height: 40px; }
  .cap-suite-controls { gap: 6px; margin-top: 8px; }

  /* Smaller, touch-friendly FAB tucked into a corner so it doesn't
     overlap the caption strip. Keep dragging to reposition. */
  .cap-fab { width: 56px; height: 56px; top: auto; bottom: 18px; left: auto; right: 18px; transform: none; }
  .cap-fab:hover { transform: scale(1.05); }
  .mic-icon { width: 22px; height: 22px; }

  /* Touch targets — bump buttons / segment items so they meet 44px */
  .cap-btn { padding: 13px 14px; }
  .cap-segment button { padding: 10px 10px; }
  .cap-switch { padding: 12px 12px; }
  .cap-select, .cap-input { padding: 12px 12px; font-size: 0.9rem; }
}

@media (max-width: 400px) {
  .cap-panel-body { padding: 12px 12px 14px; }
  .cap-section-title { font-size: 0.6rem; }
  .cap-label { font-size: 0.6rem; }
  .cap-fab { width: 52px; height: 52px; bottom: 14px; right: 14px; }
  .mic-icon { width: 20px; height: 20px; }
  .cap-side-panel { max-height: 40vh; }
  .cap-room-panel { top: 70px; }
  .cap-audio-panel { bottom: 76px; }
}

/* Landscape phones / short windows — compress vertical chrome so the
   caption strip doesn't get hidden behind side panels. */
@media (max-height: 480px) and (max-width: 900px) {
  .cap-side-panel { max-height: 60vh; }
  .cap-room-panel { top: 8px; }
  .cap-audio-panel { bottom: 8px; }
  .cap-panel { max-height: 92vh; }
  .cap-display.pos-bottom { bottom: 8px; }
  .cap-display.pos-top { top: 8px; }
}

/* ============ LISTENER ENRICHED CONFIG ============
   Chipset palettes (text-size, opacity, surface, text color, max words,
   idle-clear, caption language) live inside #capListenerSection. They
   drive the same `cap-display` element, so settings apply immediately. */

/* Wrap-grid chipset for the large language and color rows. The default
   `.cap-segment` uses fixed columns which can't fit 15+ chips. */
.cap-chip-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
}
.cap-chip-grid button {
  flex: 0 0 auto;
  min-width: 44px;
}

/* Tighten 4–5 chip rows so they breathe without scrolling. */
.cap-segment.size, .cap-segment.opacity, .cap-segment.surface,
.cap-segment.maxwords, .cap-segment.idle {
  grid-template-columns: repeat(4, 1fr);
}
.cap-segment.opacity { grid-template-columns: repeat(5, 1fr); }
.cap-segment.surface { grid-template-columns: repeat(3, 1fr); }

/* Per-chipset accent treatments — match the existing semantic colors. */
.cap-segment.size button.active,
.cap-segment.opacity button.active,
.cap-segment.surface button.active,
.cap-segment.maxwords button.active,
.cap-segment.idle button.active {
  background: rgba(103, 232, 249, 0.12);
  color: var(--widget-accent);
}
.cap-segment.lang button.active {
  background: rgba(134, 239, 172, 0.15);
  color: var(--widget-room);
}
.cap-segment.color button.active {
  background: var(--widget-surface-strong);
  color: var(--widget-ink);
  border: 1px solid var(--widget-border);
}

/* Color chip: small swatch dot + label. "Auto" uses a conic gradient. */
.cap-segment.color button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 6px 10px;
}
.cap-color-swatch {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  display: inline-block;
}
[data-theme="light"] .cap-color-swatch { border-color: rgba(15, 23, 42, 0.2); }
.cap-color-swatch.auto {
  background: conic-gradient(#f87171, #fde68a, #86efac, #67e8f9, #c4b5fd, #f9a8d4, #f87171);
}

/* Inline hint text under a config row. */
.cap-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--widget-ink-dim);
  line-height: 1.45;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.cap-hint kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  background: var(--widget-surface-strong);
  border: 1px solid var(--widget-border);
  border-bottom-width: 2px;
  color: var(--widget-ink);
  padding: 1px 5px;
  border-radius: 4px;
  margin: 0 1px;
}

/* ----- Caption display: listener-driven style overrides ----- */
.cap-display.color-custom .cap-display-text,
.cap-display.color-custom .cap-display-text .cap-word,
.cap-display.color-custom .cap-display-text .cap-word.translated,
.cap-display.color-custom .cap-display-interim {
  color: var(--listener-text-color, inherit);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .cap-display.color-custom .cap-display-text,
[data-theme="light"] .cap-display.color-custom .cap-display-text .cap-word,
[data-theme="light"] .cap-display.color-custom .cap-display-text .cap-word.translated {
  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
}
/* Original (secondary) line follows the custom color but stays dimmer so
   the translation keeps visual priority. */
.cap-display.color-custom .cap-display-orig-text {
  color: var(--listener-text-color, inherit);
  opacity: 0.62;
}

/* Surface modes — replace default glassmorphism per user choice. */
.cap-display.surface-solid {
  background: rgba(var(--display-bg-rgb), 0.95);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cap-display.surface-outline {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cap-display.surface-outline .cap-display-text,
.cap-display.surface-outline .cap-display-text .cap-word,
.cap-display.surface-outline .cap-display-text .cap-word.translated,
.cap-display.surface-outline .cap-display-orig-text,
.cap-display.surface-outline .cap-display-orig-lang {
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px 1px 0 #000,  1px 1px 0 #000,
    0 0 8px rgba(0, 0, 0, 0.9);
}
[data-theme="light"] .cap-display.surface-outline .cap-display-text,
[data-theme="light"] .cap-display.surface-outline .cap-display-text .cap-word,
[data-theme="light"] .cap-display.surface-outline .cap-display-text .cap-word.translated,
[data-theme="light"] .cap-display.surface-outline .cap-display-orig-text,
[data-theme="light"] .cap-display.surface-outline .cap-display-orig-lang {
  text-shadow:
    -1px -1px 0 #fff, 1px -1px 0 #fff,
    -1px 1px 0 #fff,  1px 1px 0 #fff,
    0 0 8px rgba(255, 255, 255, 0.9);
}

/* ----- Inline quick-switch pill on the caption display (listener only) -----
   Pinned to the upper-right corner of the display so it's always tappable
   even before a remote speaker has been identified. */
.cap-display-quick {
  display: none;
  position: absolute;
  top: 8px; right: 10px;
  z-index: 2;
  align-items: center; gap: 4px;
  background: var(--widget-surface-strong);
  border: 1px solid var(--widget-border);
  color: var(--widget-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cap-display.listener .cap-display-quick { display: inline-flex; }
.cap-display-quick:hover {
  border-color: var(--widget-accent);
  color: var(--widget-accent);
}
.cap-display-quick .cap-display-quick-arrow {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1;
}
/* Outline-surface mode strips the panel — give the pill a subtle scrim
   so it stays readable against arbitrary backgrounds. */
.cap-display.surface-outline .cap-display-quick {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
[data-theme="light"] .cap-display.surface-outline .cap-display-quick {
  background: rgba(255, 255, 255, 0.7);
  color: var(--widget-ink);
  border-color: rgba(15, 23, 42, 0.18);
}


/* Honor user reduced-motion preference (a11y) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}