/* ═══════════════════════════════════════════════════════════
   ProxVox : Design System & Global Styles
   "Modern Pro" : Dark Charcoal + Electric Indigo
═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  --bg-primary:    #1A1D21;
  --bg-secondary:  #141618;
  --bg-card:       #22262C;
  --bg-hover:      #2C313A;
  --bg-glass:      rgba(26, 29, 33, 0.85);

  --accent:        #5865F2;
  --accent-hover:  #4752C4;
  --accent-glow:   rgba(88, 101, 242, 0.3);
  --bg-bubble:     #312450;
  --bg-bubble-alt: #3d2d64;

  --text-primary:  #F2F3F5;
  --text-secondary:#B9BBBE;
  --text-dim:      #72767D;

  --success:       #3BA55D;
  --danger:        #ED4245;
  --warning:       #FAA61A;

  --border:        rgba(255,255,255,0.06);
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-pill:   999px;

  --shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:     0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:     0 16px 48px rgba(0,0,0,0.5);
  --shadow-glow:   0 0 24px var(--accent-glow);

  --font:          'Inter', -apple-system, sans-serif;
  --transition:    0.2s ease;

  --caption-size:  1.5rem;
  --sidebar-w:     72px;
}

/* ── High Contrast Mode ─────────────────────────────────── */
body.high-contrast {
  --bg-primary:    #000000;
  --bg-secondary:  #0A0A0A;
  --bg-card:       #111111;
  --text-primary:  #FFFFFF;
  --text-secondary:#EEEEEE;
  --border:        rgba(255,255,255,0.2);
}

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── View Transitions ───────────────────────────────────── */
.view {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(8px);
}

.view.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}


/* ════════════════════════════════════════════════════════════
   LOBBY VIEW
════════════════════════════════════════════════════════════ */

#view-lobby {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.lobby-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(88,101,242,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(88,101,242,0.1) 0%, transparent 60%),
    var(--bg-primary);
  z-index: 0;
}

.lobby-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.lobby-header {
  text-align: center;
}

.lobby-back-btn {
  /* Anchored to the viewport corner: the .view ancestor's transform makes it
     the containing block for this fixed element, and .view is position:fixed
     inset:0 (full screen). This keeps a comfortable, consistent gutter from the
     real top-left instead of floating at the centered .lobby-container's edge on
     wide screens or clipping tight against the edge on narrow ones. */
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 20;
}
.lobby-back-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.logo-icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 12px var(--accent));
}

/* ── ProxVox two-tone logotype ───────────────────────────────────────────── */
.logo-svg-icon { display: flex; align-items: center; filter: drop-shadow(0 0 8px rgba(124,92,191,0.5)); }
.logo-svg-icon svg { width: 64px; height: 64px; }           /* centered lobby logo */
.logo-prox { color: #ffffff; }
.logo-vox  { color: var(--accent); }

/* Hero brand mark : landing page large logo */
.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.hero-brand-icon {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 0 20px rgba(124,92,191,0.5));
}
.hero-brand-name {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.logo-text {
  font-size: 2rem;
  font-weight: 700;
  /* No gradient : two-tone handled by .logo-prox / .logo-vox children */
}

.logo-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.lobby-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-primary:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.card-secondary:hover { border-color: rgba(255,255,255,0.15); }

.card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mic card icon : filled circle with a stem */
.card-icon--mic {
  background: var(--accent);
  position: relative;
}
.card-icon--mic::before {
  content: '';
  width: 14px;
  height: 20px;
  border-radius: 8px 8px 6px 6px;
  background: #fff;
  display: block;
}
.card-icon--mic::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background: #fff;
  border-radius: 1px;
}

/* Headset card icon : arc with stem */
.card-icon--headset {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  position: relative;
  overflow: visible;
}
.card-icon--headset::before {
  content: '';
  width: 20px;
  height: 12px;
  border: 3px solid rgba(255,255,255,0.6);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  display: block;
}
.card-title { font-size: 1.25rem; font-weight: 700; }
.card-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

.free-tier-notice {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
  margin-bottom: 10px;
  line-height: 1.4;
}

/* Highlighted callout shown to first-time users who still have their demo */
.free-tier-notice.session-demo-callout {
  background: rgba(124, 92, 191, 0.12);
  border: 1px solid rgba(124, 92, 191, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-primary);
  text-align: left;
}
.free-tier-notice.session-demo-callout strong {
  display: block;
  color: var(--accent);
  margin-bottom: 2px;
}
.free-tier-notice.session-demo-callout .notice-upsell {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.free-tier-notice.session-demo-callout .notice-upsell a {
  color: var(--accent);
  text-decoration: none;
}
.free-tier-notice.session-demo-callout .notice-upsell a:hover {
  text-decoration: underline;
}

.session-ended-nudge {
  display: block;
  margin-top: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.form-group input,
.form-group select {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.95rem;
  padding: 10px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group select option { background: var(--bg-card); }

.label-hint {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 4px;
}

.lang-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

/* The source/edit pickers can list 80+ languages when searching — two columns by
   default (and the search results render the same way), capped in height with
   internal scroll so the card never grows past the viewport (this was pushing the
   Create button off-screen on small laptops). Long enriched names ("Spanish
   (Latin America)") wrap to a second line rather than truncating to "Spani…". */
#source-language-grid,
#session-edit-lang-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  max-height: 38vh;
  overflow-y: auto;
  padding-right: 4px;   /* room for the scrollbar so cards aren't clipped */
}
#source-language-grid .lang-option,
#session-edit-lang-grid .lang-option {
  position: relative;        /* anchor the absolutely-placed Event badge */
  align-items: center;       /* center the name with the flag (1- or 2-line) */
  padding-right: 10px;
}
#source-language-grid .lang-name,
#session-edit-lang-grid .lang-name {
  white-space: normal;       /* allow wrapping… */
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;     /* …to at most two lines */
  -webkit-box-orient: vertical;
}
/* Float the Event badge to the top-right corner so it never steals width from a
   wrapping name (kept it from forcing "Spanish (Latin America)" onto 3 lines). */
#source-language-grid .lang-tier-badge,
#session-edit-lang-grid .lang-tier-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  margin-left: 0;
}
@media (max-width: 640px) {
  #source-language-grid,
  #session-edit-lang-grid { max-height: 44vh; }
}

.lang-option {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}

.lang-option:hover {
  background: var(--bg-hover);
  border-color: rgba(255,255,255,0.1);
}

.lang-option.selected {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.lang-option.selected .lang-name {
  color: #fff;
}

.lang-option .lang-flag { font-size: 1.1rem; flex-shrink: 0; }
.lang-option .lang-name {
  font-size: 0.8rem; font-weight: 500; color: var(--text-dim);
  flex: 1; min-width: 0;            /* allow the name to shrink… */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  /* …and ellipsize */
}

/* Search box for the Event-tier extended language catalogue (80+ languages). */
.lang-search-input {
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
}
.lang-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

/* Tier-entitlement notice extras (session create). */
.tier-warn { color: #f0b429; }
.upsell-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.upsell-link:hover { text-decoration: underline; }

/* "Event" badge on extended-catalogue languages in the source picker. */
.lang-tier-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 1px 4px;
}
.lang-option.selected .lang-tier-badge { color: #fff; background: rgba(0,0,0,0.18); }


.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.02em;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: #36393F; border-color: rgba(255,255,255,0.15); }

.lobby-footer {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
}


/* ════════════════════════════════════════════════════════════
   STAGE VIEW
════════════════════════════════════════════════════════════ */

#view-stage {
  display: flex;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
}

.sidebar-logo {
  font-size: 1.5rem;
  padding: 10px;
  filter: drop-shadow(0 0 8px var(--accent));
}
.sidebar-logo svg {
  width: 40px;
  height: 40px;
  display: block;
}

.sidebar-divider {
  width: 36px;
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.sidebar-spacer { flex: 1; }

.sidebar-btn {
  width: 52px;
  min-height: 52px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all var(--transition);
  color: var(--text-dim);
  padding: 8px 4px;
}
.sidebar-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-btn.active { background: var(--accent); color: #fff; }
.sidebar-btn.danger:hover { background: rgba(237,66,69,0.2); color: var(--danger); }

/* Sidebar LIVE indicator */
.sidebar-btn--live { gap: 3px; }

.sidebar-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  flex-shrink: 0;
  animation: live-pulse 2s ease-in-out infinite;
}
.sidebar-live-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  color: inherit;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 6px var(--success); }
  50%       { opacity: 0.6; box-shadow: 0 0 12px var(--success); }
}

/* ── Main Stage ──────────────────────────────────────────── */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(88,101,242,0.08) 0%, transparent 60%), var(--bg-primary);
}

/* ── Top Bar ─────────────────────────────────────────────── */
.top-bar {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
  gap: 12px;
}

.top-bar-left { flex: 1; min-width: 0; }
.top-bar-center { flex: 1; display: flex; justify-content: center; }
.top-bar-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.session-info { display: flex; align-items: center; gap: 10px; min-width: 0; }

.session-name-display {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-code-badge {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--accent);
  white-space: nowrap;
  letter-spacing: 0.1em;
}


.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
  transition: all 0.3s;
}

.status-indicator.live .status-dot {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: pulse-dot 2s infinite;
}

.status-indicator.error .status-dot { background: var(--danger); }
.status-indicator.connecting .status-dot { background: var(--warning); animation: pulse-dot 1s infinite; }

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

.status-text { color: var(--text-secondary); font-size: 0.8rem; }

/* ── Credit Pill (presenter stage top-bar) ──────────────────────────────── */
.credit-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-pill);
  padding: 4px 10px 4px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: border-color 0.2s, background 0.2s;
}
.credit-pill.credit-low {
  background: color-mix(in srgb, var(--warning) 14%, var(--bg-card));
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  color: var(--warning);
}
.credit-pill-icon { font-size: 0.85rem; opacity: 0.75; }
.credit-pill-value { letter-spacing: 0.01em; }
/* .credit-pill-hide removed — pill is toggled via the sidebar ⏱ button */

.audience-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}

.icon-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font);
  padding: 4px 8px;
  transition: all var(--transition);
}
.icon-btn:hover { background: var(--bg-card); color: var(--text-primary); }


/* ── Presenter Bar ───────────────────────────────────────── */
.presenter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.waveform-container {
  flex: 1;
  height: 48px;
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

#waveform-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.mic-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.btn-mic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  box-shadow: 0 4px 12px var(--accent-glow);
  flex-shrink: 0;
}
.btn-mic:hover { transform: scale(1.06); }
.btn-mic.muted  { background: var(--bg-hover); box-shadow: none; }
.btn-mic.recording { animation: recording-pulse 2s infinite; }

/* Mic SVG : inherits color from button state */
.mic-svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
  overflow: visible;
}
.mic-svg .mic-body  { fill: #fff; }
.mic-svg .mic-arc,
.mic-svg .mic-stem,
.mic-svg .mic-base  { stroke: #fff; fill: none; }
.mic-svg .mic-slash { stroke: transparent; fill: none; }   /* hidden by default */

/* Muted state : dim everything, show slash */
.btn-mic.muted .mic-svg .mic-body  { fill:   rgba(255,255,255,0.35); }
.btn-mic.muted .mic-svg .mic-arc,
.btn-mic.muted .mic-svg .mic-stem,
.btn-mic.muted .mic-svg .mic-base  { stroke: rgba(255,255,255,0.35); }
.btn-mic.muted .mic-svg .mic-slash { stroke: rgba(255,255,255,0.6); }

/* Recording state : bright white */
.btn-mic.recording .mic-svg .mic-body { fill: #fff; }

@keyframes recording-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

/* ── Mic connecting state ────────────────────────────────────────────────────
   Shown while the Azure SDK WebSocket is re-establishing after mic un-mute.
   A thin rotating arc ring wraps the button; the mic icon dims to signal
   "not ready yet — wait before speaking." No emoji, no overlay.           */
.btn-mic-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* The rotating arc ring — rendered as a conic-gradient on a pseudo-element
   so it tracks the circular button without any extra DOM elements.         */
.btn-mic-wrap::before {
  content: "";
  position: absolute;
  inset: -4px;                        /* 4px gap between ring and button    */
  border-radius: 50%;
  background: conic-gradient(
    var(--accent) 0deg 90deg,
    transparent 90deg 360deg
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.btn-mic-wrap.connecting::before {
  opacity: 1;
  animation: mic-ring-spin 0.9s linear infinite;
}

/* Dim the mic icon while connecting (same dimming treatment as .muted,
   but without the slash — the mic is off but a reconnect is in progress) */
.btn-mic-wrap.connecting .btn-mic {
  background: var(--bg-hover);
  box-shadow: none;
  pointer-events: none;               /* prevent double-click while connecting */
}
.btn-mic-wrap.connecting .btn-mic .mic-svg .mic-body { fill: rgba(255,255,255,0.4); }
.btn-mic-wrap.connecting .btn-mic .mic-svg .mic-arc,
.btn-mic-wrap.connecting .btn-mic .mic-svg .mic-stem,
.btn-mic-wrap.connecting .btn-mic .mic-svg .mic-base { stroke: rgba(255,255,255,0.4); }

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

.mic-status.connecting { color: var(--text-dim); }

.mic-info { display: flex; flex-direction: column; gap: 2px; }
.mic-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.mic-status { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.mic-status.active { color: var(--success); }
.mic-status.muted { color: var(--danger); }

.flag-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.flag-toggle-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
  color: var(--text-secondary);
}
.flag-toggle-btn:hover { background: rgba(255,255,255,0.12); }
.flag-toggle-btn.active {
  background: rgba(88, 166, 255, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}
.flag-toggle-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}

.session-share { display: flex; align-items: center; gap: 8px; }
.share-label { font-size: 0.75rem; color: var(--text-dim); }
.share-code { font-family: monospace; font-size: 1rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); }


/* ── Caption Feed ────────────────────────────────────────── */
.caption-feed {
  flex: 1;
  overflow-y: auto;
  padding: 32px 10%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* No scroll-behavior: smooth here. Auto-scroll is driven programmatically
     via requestAnimationFrame so layout is complete before scrollTop is set.
     Smooth CSS scroll conflicts with rapid interim-caption updates on mobile. */
}

.caption-feed::-webkit-scrollbar { width: 4px; }
.caption-feed::-webkit-scrollbar-track { background: transparent; }
.caption-feed::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Jump-to-latest button ─────────────────────────────────────
   Shown only when the viewer has scrolled up away from the live feed.
   Anchored to the bottom-centre of .stage so it sits over the caption
   area for both presenter and attendee, on mobile and desktop. */
.jump-latest-btn {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  min-height: 44px;                 /* comfortable tap target on mobile */
  border: none;
  border-radius: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;             /* inert until .visible */
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.jump-latest-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.jump-latest-btn:hover { filter: brightness(1.08); }
.jump-latest-btn:active { transform: translateX(-50%) translateY(1px); }
.jump-latest-arrow { font-size: 1.05rem; line-height: 1; }
/* Unread-count pill, shown only when finals arrived while scrolled up. */
.jump-latest-count {
  display: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.25);
  font-size: 0.78rem;
  line-height: 20px;
  text-align: center;
}
.jump-latest-btn.has-count .jump-latest-count { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .jump-latest-btn { transition: opacity 0.2s ease; transform: translateX(-50%); }
  .jump-latest-btn.visible { transform: translateX(-50%); }
}

/* On mobile the bottom action bar is fixed at ~65px + safe-area-inset-bottom.
   Lift the jump button above it so it is never hidden underneath. */
@media (max-width: 768px) {
  .jump-latest-btn {
    bottom: calc(65px + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 10000;
  }
  .jump-latest-btn:active { transform: translateX(-50%) translateY(1px); }
}

.caption-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-dim);
}

/* CSS speech-bubble icon : replaces emoji in placeholder */
.placeholder-icon {
  width: 40px;
  height: 34px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  position: relative;
  opacity: 0.4;
}
.placeholder-icon::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 12px;
  border: 6px solid transparent;
  border-top-color: rgba(255,255,255,0.15);
  border-bottom: none;
}
.caption-placeholder p { font-size: 0.9rem; }

/* Caption Blocks */
.caption-block {
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;
  opacity: 0;
  transform: translateY(16px);
  background: var(--bg-bubble);
  padding: 16px 24px;
  border-radius: 16px;
  border-bottom-left-radius: 4px; /* Message-tail effect */
  max-width: 85%;
  align-self: flex-start;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
}

.caption-block.visible {
  opacity: 1;
  transform: translateY(0);
}

.caption-block.interim {
  opacity: 0.7;
  background: rgba(49, 36, 80, 0.4);
  backdrop-filter: blur(4px);
  border-style: dashed;
}

/* Language flag on confirmed (final) caption blocks */
.caption-lang-flag {
  display: block;
  font-size: 1em;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 0.7;
}


.caption-text {
  font-size: var(--caption-size);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-primary);
  word-break: break-word;
}

.caption-block.translated .caption-text {
  color: var(--text-secondary);
  font-style: italic;
  font-size: calc(var(--caption-size) * 0.85);
}

.caption-block.final .caption-text { color: var(--text-primary); }

.caption-lang-flag {
  display: block;
  font-size: 1em;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 0.7;
}

.caption-lang-flag.interim-flag {
  opacity: 0.4;
}

/* ── Language Pill ───────────────────────────────────────── */
.language-pill {
  background: var(--accent);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: all var(--transition);
  user-select: none;
}

.language-pill:hover { background: var(--accent-hover); transform: scale(1.04); }
.pill-flag { font-size: 1rem; }
.pill-text { font-size: 0.8rem; font-weight: 600; color: #fff; }
.pill-chevron { font-size: 0.6rem; color: rgba(255,255,255,0.7); }

.mobile-leave-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(237,66,69,0.1);
  color: var(--danger);
  border: 1px solid rgba(237,66,69,0.2);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.mobile-leave-btn:hover { background: rgba(237,66,69,0.2); color: var(--danger); }


/* ════════════════════════════════════════════════════════════
   LANGUAGE MODAL
════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 0.2s ease;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Session edit modal ─────────────────────────────────────────────────── */
.session-edit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 460px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  animation: slide-up 0.3s cubic-bezier(0.22,1,0.36,1);
  overflow: hidden;
}
.modal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}
.modal-card-title { font-size: 1.1rem; font-weight: 700; margin: 0; }
.modal-close-btn {
  background: none; border: none;
  color: var(--text-dim); cursor: pointer;
  padding: 6px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition);
}
.modal-close-btn svg { width: 16px; height: 16px; }
.modal-close-btn:hover { color: var(--text-primary); }

.modal-card-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.field-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.field-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input, var(--bg-hover));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color var(--transition);
}
.field-input:focus { outline: none; border-color: var(--accent); }

/* session-edit-lang-grid reuses .lang-selection-grid + .lang-option from session creation */

.modal-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* Session edit is now triggered via the gear icon in the left sidebar */

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 380px;
  max-width: calc(100vw - 40px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 { font-size: 1.1rem; font-weight: 700; }

.modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}
.modal-close:hover { color: var(--text-primary); }

.modal-search {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 10px 14px;
  outline: none;
  width: 100%;
  transition: border-color var(--transition);
}
.modal-search:focus { border-color: var(--accent); }

.lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  overflow-y: auto;
}

.lang-option {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all var(--transition);
}
.lang-option:hover { border-color: var(--accent); background: rgba(88,101,242,0.1); }
.lang-option.selected { border-color: var(--accent); background: rgba(88,101,242,0.2); }
.lang-flag { font-size: 1.4rem; }
.lang-name { font-size: 0.875rem; font-weight: 500; }


/* ════════════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════════════ */

.toast.show {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.toast .toast-msg {
  flex: 1;
  line-height: 1.4;
  word-break: break-word;
}
.toast .toast-close {
  flex-shrink: 0;
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.toast .toast-close:hover {
  background: rgba(255,255,255,0.35);
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  max-width: min(520px, calc(100vw - 32px));
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 200;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  /* Re-enable interaction so the ✕ is clickable and the text is
     selectable/copyable. Without this the toast is inert. */
  pointer-events: auto;
}

.toast.success { border-color: var(--success); color: var(--success); }
.toast.error   { border-color: var(--danger);  color: var(--danger);  }
.toast.info    { border-color: var(--accent);   color: var(--accent);  }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

/* ── Hide/Show helpers ─────────────────────────────────────── */
.desktop-only { display: flex; }

/* ── Mobile Bottom Action Bar (hidden on desktop) ──────────── */
.mobile-bottom-bar { display: none; }
.mobile-lang-fab   { display: none; }


/* ── iPad (≤900px) ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .lobby-cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .caption-feed { padding: 24px 6%; }
  :root { --caption-size: 1.25rem; }
  .presenter-bar { flex-wrap: wrap; }
  .session-share { display: none; }
}


/* ── Mobile (≤768px) ────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
    --caption-size: 1.15rem;
  }

  /* Hide desktop sidebar */
  .sidebar { display: none; }

  /* Hide ALL desktop-only controls in the top bar */
  .desktop-only { display: none !important; }

  /* ── Top Bar: minimal : name + status only ──────────────── */
  .top-bar {
    height: 52px;
    padding: 0 14px;
    flex-wrap: nowrap;
  }
  .top-bar-left { flex: 1; min-width: 0; }
  .top-bar-center { flex: 0 0 auto; }
  .top-bar-right { flex: 0 0 auto; gap: 6px; }

  /* Session name: always readable, never truncated rudely */
  .session-name-display {
    font-size: 0.95rem;
    font-weight: 700;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .session-code-badge { font-size: 0.65rem; }

  /* Audience badge stays visible in top-right */
  .audience-badge {
    padding: 3px 7px;
    font-size: 0.75rem;
  }

  /* ── Caption feed: taller to use all the freed-up space ── */
  .caption-feed {
    padding: 16px 5%;
    /* leave room for bottom bar */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 12px));
  }

  /* ── Presenter bar: tighten for mobile ─────────────────── */
  .presenter-bar {
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    gap: 12px;
  }
  .waveform-container { flex: 1; }

  /* ══════════════════════════════════════════════════════════
     MOBILE BOTTOM ACTION BAR
     Fixed to the bottom : like native iOS/Android app chrome.
     Provides: Language FAB (left), Font controls (center),
               TTS toggle (center), Leave button (right)
  ══════════════════════════════════════════════════════════ */
  .mobile-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(65px + env(safe-area-inset-bottom, 0px));
    padding: 0 16px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-glass) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-top: 1px solid var(--accent);
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
  }

  .mobile-bar-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }

  .mobile-bar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .mobile-bar-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }

  /* ── Language FAB (floating pill, bottom-left) ───────────── */
  .mobile-lang-fab {
    display: flex !important;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(88, 101, 242, 0.45);
    white-space: nowrap;
    transition: all 0.2s;
  }
  .mobile-lang-fab:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.3);
  }

  /* ── Center group: font size + TTS ───────────── */
  .mobile-bar-btn {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font);
    padding: 7px 10px;
    transition: all 0.15s;
    min-width: 38px;
    text-align: center;
  }
  .mobile-bar-btn:active { background: var(--bg-card); color: var(--text-primary); }

  /* ── Leave button ─────────────────────────────────────── */
  .mobile-leave-btn {
    background: rgba(237, 66, 69, 0.12);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    color: var(--danger);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--font);
    padding: 7px 12px;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .mobile-leave-btn:active { background: rgba(237,66,69,0.25); }
}

/* ════════════════════════════════════════════════════════════
   CAPTIONS OPT-IN OVERLAY (attendees only)
════════════════════════════════════════════════════════════ */

.captions-disabled-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 20, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
  padding: 24px;
}

.captions-enable-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.captions-enable-icon {
  width: 52px;
  height: 44px;
  background: var(--accent);
  border-radius: 14px;
  position: relative;
  filter: drop-shadow(0 0 16px var(--accent-glow));
}
.captions-enable-icon::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 14px;
  border: 8px solid transparent;
  border-top-color: var(--accent);
  border-bottom: none;
}

.captions-enable-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.captions-enable-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.captions-enable-card .btn {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
}

.captions-note {
  font-size: 0.78rem !important;
  color: var(--text-dim) !important;
}


/* ── Audio Feedback Animations ──────────────────────────── */
.pulse-active {
  animation: tts-pulse 0.5s ease-out;
  color: var(--accent) !important;
}

@keyframes tts-pulse {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.3); filter: brightness(1.5); text-shadow: 0 0 10px var(--accent); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ── Share Modal & QR Code ──────────────────────────────── */
.share-modal {
  max-width: 400px;
  width: 95%;
  text-align: center;
  /* Scrollable on small viewports so QR never overflows the panel */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.share-content {
  padding: 1rem 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.share-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.qr-container {
  background: white;
  padding: 12px;
  border-radius: 12px;
  display: inline-block;
  /* Cap so it never exceeds the modal width on small windows */
  max-width: min(200px, 80vw);
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.qr-container img,
.qr-container canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.share-divider {
  position: relative;
  margin: 1.5rem 0;
  border-top: 1px solid var(--border);
}

.share-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  padding: 0 10px;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--text-muted);
}

.share-link-box {
  display: flex;
  gap: 8px;
  background: var(--bg-input);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.share-link-box input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 8px;
  font-size: 0.85rem;
  outline: none;
}

.share-link-box button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0 15px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.share-link-box button:active {
  transform: scale(0.95);
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD & AUTH STYLES
   "Workspaces" Premium Design
════════════════════════════════════════════════════════════ */

.lobby-auth-promo { width: 100%; }

/* Presenter CTA card : shown to guests instead of the presenter form card */
.lobby-presenter-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  width: 100%;
}
.presenter-cta-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent);
  flex-shrink: 0;
  position: relative;
}
.presenter-cta-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 20px;
  border-radius: 8px 8px 6px 6px;
  background: #fff;
}
.presenter-cta-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.presenter-cta-text strong { color: var(--text-primary); font-size: 0.95rem; }
.presenter-cta-text span  { color: var(--text-dim);     font-size: 0.85rem; }

/* Full-width join card when presenter card is hidden */
.lobby-cards:has(.lobby-card-presenter[style*="display: none"]) {
  grid-template-columns: 1fr;
  max-width: 480px;
  margin: 0 auto;
}
/* Fallback for browsers without :has() : card-full class set by JS */
.card.card-full { max-width: 480px; width: 100%; }

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
/* ── Auth modal — login / signup / verify-pending ───────────────────────── */
.auth-modal {
  max-width: 420px;
  padding: 0;          /* inner sections own their own padding */
}

/* The close button sits in the top-right corner of the card */
.auth-modal .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.25rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

/* Login and signup inner panels — match the verify-pending card anatomy */
#auth-login-form,
#auth-signup-form {
  padding: 40px 36px 36px;
}

/* Logo / wordmark at the top of every auth state */
.auth-modal-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.auth-modal-brand-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 6px;
}
.auth-modal-brand-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.modal-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
  line-height: 1.2;
}
.modal-subtitle {
  font-size: 0.875rem;
  color: var(--text-dim);
  margin: 0 0 24px;
  line-height: 1.5;
}
.auth-switch { margin-top: 20px; text-align: center; font-size: 0.85rem; color: var(--text-dim); }
.auth-switch a { color: var(--accent); font-weight: 600; text-decoration: none; }
.btn-full { width: 100%; margin-top: 10px; }

/* Dashboard Layout */
#view-dashboard { 
  background: var(--bg-secondary); 
  display: flex; 
  flex-direction: column; 
  height: 100vh;
  overflow: hidden;
}

.dashboard-header {
  padding: 20px 40px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-user { display: flex; align-items: center; gap: 16px; font-weight: 600; font-size: 0.9rem; }
.dashboard-header-right { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 0.9rem; }

/* Account menu (deactivate / GDPR delete) */
.account-menu-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.account-menu-btn { padding: 6px 8px; color: var(--text-dim); }
.account-menu-btn:hover { color: var(--text-primary); }

/* ── Avatar dropdown menu ──────────────────────────────────────────────────── */
.avatar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
  animation: fadeSlideDown 0.12s ease;
}
.avatar-dropdown.open { display: block; }

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.avatar-dropdown-header {
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.avatar-dropdown-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-dropdown-email {
  font-size: 0.75rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}
.avatar-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.1s;
}
.avatar-dropdown-item:hover { background: var(--bg-hover); }
.avatar-dropdown-item--danger { color: var(--danger, #ef4444); }
.avatar-dropdown-item--danger:hover { background: color-mix(in srgb, var(--danger, #ef4444) 8%, transparent); }

/* Avatar initials button */
.avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.avatar-btn:hover { opacity: 0.85; }
.avatar-initials {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  user-select: none;
  pointer-events: none;
}
.account-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  min-width: 200px;
  z-index: 200;
  overflow: hidden;
}
.account-menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background var(--transition);
}
.account-menu-item:hover { background: var(--bg-hover); }
.account-menu-item.danger { color: var(--danger); }

/* ── Account Settings page ───────────────────────────────────────────── */
#view-account { overflow-y: auto; }
.account-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.account-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.account-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  padding: 6px 10px;
}
.account-back-btn:hover { color: var(--text-primary); }
.account-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.account-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
}
.account-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.account-avatar svg { width: 28px; height: 28px; }
.account-identity-name { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.account-identity-email { font-size: 0.9rem; color: var(--text-secondary); margin-top: 2px; }

.account-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.account-section:last-child { border-bottom: none; }
.account-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Reusable help tooltip (hover + keyboard focus) */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  cursor: help;
  outline: none;
}
.help-tip svg { width: 14px; height: 14px; }
.help-tip:hover, .help-tip:focus-visible { color: var(--accent); }
.help-tip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 10px 12px;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--text-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50;
}
.help-tip-bubble strong { color: var(--text-primary); font-weight: 700; }
.help-tip:hover .help-tip-bubble,
.help-tip:focus-visible .help-tip-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Credits section */
.account-credits-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.account-credits-total-label { font-size: 0.85rem; color: var(--text-secondary); }
.account-credits-total-value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.account-lots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.account-lots-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-dim);
  padding: 28px 16px;
  font-size: 0.9rem;
}
.account-lots-empty-arrow { font-size: 1.4rem; margin-top: 6px; opacity: 0.5; }
.account-lot-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.account-lot-card.lot-active { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.lot-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lot-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 10px;
}
.lot-badge-active   { background: var(--accent); color: #fff; }
.lot-badge-available{ background: #1a7a1a; color: #fff; }
.lot-badge-queued   { background: var(--bg-hover); color: var(--text-dim); }
.lot-tier-badge { font-size: 0.72rem; color: var(--text-secondary); }
.lot-pkg-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
.lot-progress {
  height: 6px;
  background: var(--bg-hover);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.lot-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; }
.lot-mins { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.lot-mins-total { font-weight: 400; color: var(--text-dim); font-size: 0.85rem; }
.lot-reserved-note { font-size: 0.74rem; color: var(--accent); margin-top: 4px; }
.lot-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 0.76rem; color: var(--text-muted); }
.account-credits-actions { margin-top: 18px; text-align: right; }

/* Account info rows */
.account-info-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.account-info-row + .account-info-row { border-top: 1px solid var(--border); }
.account-info-label { font-size: 0.85rem; color: var(--text-secondary); }
.account-info-value { font-size: 0.92rem; color: var(--text-primary); }
.account-info-muted { color: var(--text-dim); }
.account-info-action { font-size: 0.82rem; color: var(--accent); justify-self: end; }
.account-info-action[disabled] { color: var(--text-dim); cursor: not-allowed; opacity: 0.6; }
.account-info-soon { color: var(--text-dim); font-size: 0.76rem; }

/* Edit profile inline form */
.account-edit-profile {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.account-edit-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0;
}

/* Phone verification UI */
.account-edit-hint {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: -6px 0 4px;
  line-height: 1.5;
}
.phone-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.phone-input-row input {
  flex: 1;
  min-width: 0;
}
.phone-verified-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--success, #22c55e);
  background: color-mix(in srgb, var(--success, #22c55e) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success, #22c55e) 30%, transparent);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.form-hint {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 4px;
  display: block;
}
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.phone-status-msg {
  font-size: 0.82rem;
  padding: 8px 12px;
  border-radius: var(--radius);
  margin-top: -4px;
}
.phone-status-msg.success {
  color: var(--success, #22c55e);
  background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--success, #22c55e) 25%, transparent);
}
.phone-status-msg.error {
  color: var(--danger, #ef4444);
  background: color-mix(in srgb, var(--danger, #ef4444) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 20%, transparent);
}
.phone-status-msg.info {
  color: var(--text-secondary);
  background: var(--bg-hover);
  border: 1px solid var(--border);
}

/* Danger zone */
.account-danger-zone {
  background: rgba(237,66,69,0.05);
  border: 1px solid rgba(237,66,69,0.2);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.account-danger-actions { display: flex; flex-direction: column; gap: 16px; }
.account-danger-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.account-danger-label { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); }
.account-danger-desc { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; max-width: 420px; }
.account-danger-btn { flex-shrink: 0; }
.account-danger-btn.danger { color: var(--danger); border-color: rgba(237,66,69,0.4); }
.account-danger-btn.danger:hover { background: rgba(237,66,69,0.12); }

@media (max-width: 640px) {
  .account-info-row { grid-template-columns: 1fr auto; }
  .account-info-label { grid-column: 1 / -1; }
  .account-danger-item { flex-direction: column; align-items: flex-start; }
}

.dashboard-content { flex: 1; padding: 40px; overflow-y: auto; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.section-header h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }

/* Session Grid */
.session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.session-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}

.session-card:hover { 
  transform: translateY(-4px); 
  border-color: rgba(88,101,242,0.4); 
}

.session-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), #a29bfe);
  opacity: 0.8;
}

.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dash-session-name { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.dash-session-id { font-family: monospace; font-size: 0.85rem; color: var(--text-dim); background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; }

.card-stats { display: flex; gap: 16px; margin: 8px 0; }
.stat-item { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); }

.card-actions { display: flex; gap: 10px; margin-top: auto; }
.btn-sm { padding: 8px 16px; font-size: 0.8rem; }
.btn-outline-sm { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.btn-outline-sm:hover { border-color: var(--text-dim); color: var(--text-primary); }

/* ── Transcript section in session cards ─────────────────────────────────── */
.card-transcript {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: rgba(124,92,191,0.07);
  border: 1px solid rgba(124,92,191,0.2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tx-meta  { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; }
.tx-lines { color: var(--text-muted); }
.tx-actions { display: flex; align-items: center; gap: 6px; }
.tx-label { color: var(--text-muted); font-size: 0.75rem; }
.tx-empty { color: var(--text-muted); font-size: 0.78rem; font-style: italic;
            margin: 4px 0; padding: 0; background: none; border: none; }

/* Expiry badges */
.tx-expiry        { font-size: 0.72rem; padding: 2px 7px; border-radius: 99px;
                    background: rgba(124,92,191,0.15); color: #c8b8f0; }
.tx-expiry-amber  { background: rgba(251,191,36,0.15);  color: #fbbf24; }
.tx-expiry-red    { background: rgba(239,68,68,0.15);   color: #f87171; }
.tx-expired       { background: rgba(107,114,128,0.15); color: var(--text-muted); }

/* Download format buttons (shared: cards + billing tab) */
.btn-tx {
  background: transparent;
  border: 1px solid rgba(124,92,191,0.4);
  color: #c8b8f0;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.03em;
}
.btn-tx:hover { background: rgba(124,92,191,0.2); border-color: var(--accent); color: #fff; }

/* Billing tab : transcript export row */
.billing-section-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.tx-export-row { display: flex; align-items: center; gap: 6px; }
.tx-export-label { color: var(--text-muted); font-size: 0.8rem; }

/* Post-session transcript ready prompt */
.transcript-ready-prompt {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid rgba(124,92,191,0.5);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(124,92,191,0.15);
  z-index: 200;
  animation: slide-up 0.3s ease;
  max-width: 420px;
  width: calc(100% - 32px);
}
.trp-icon { color: var(--accent); flex-shrink: 0; }
.trp-text { display: flex; flex-direction: column; flex: 1; }
.trp-text strong { font-size: 0.9rem; color: var(--text-primary); }
.trp-text span   { font-size: 0.78rem; color: var(--text-muted); }
.trp-btns { display: flex; gap: 6px; flex-shrink: 0; }
.trp-dismiss { background: none; border: none; color: var(--text-muted); cursor: pointer;
               font-size: 1rem; padding: 0 4px; line-height: 1; flex-shrink: 0; }
.trp-dismiss:hover { color: var(--text-primary); }
@keyframes slide-up { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.grid-placeholder { 
  grid-column: 1 / -1; 
  padding: 80px; 
  text-align: center; 
  color: var(--text-dim); 
  border: 2px dashed var(--border); 
  border-radius: 20px; 
}

@media (max-width: 768px) {
  .dashboard-header { padding: 15px 20px; }
  .dashboard-content { padding: 20px; }
  .session-grid { grid-template-columns: 1fr; }
}

/* ── Dashboard tabs ──────────────────────────────────────────────────────── */
.dash-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  padding: 0 40px;
  flex-shrink: 0;
}

.dash-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 14px 20px;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}

.dash-tab:hover { color: var(--text-primary); }
.dash-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Glossary panel ──────────────────────────────────────────────────────── */
.glossary-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.input-sm {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.85rem;
  padding: 7px 12px;
  outline: none;
  transition: border-color var(--transition);
}
.input-sm:focus { border-color: var(--accent); }
.input-sm::placeholder { color: var(--text-dim); }

.glossary-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
}

/* ── Glossary add/edit form (labelled, stepped layout) ───────────────────── */
.gloss-step { display: flex; gap: 14px; padding: 4px 0 18px; }
.gloss-step + .gloss-step { border-top: 1px solid var(--border); padding-top: 18px; }
.gloss-step-no {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700;
}
.gloss-step-body { flex: 1; min-width: 0; }
.gloss-step-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 10px; }
.gloss-step-optional {
  font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-left: 6px;
}
.gloss-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.gloss-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gloss-field--grow { flex: 1 1 220px; }
.gloss-field--full { width: 100%; margin-top: 12px; }
.gloss-label { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.gloss-req { color: var(--accent); }
.gloss-help { font-size: 0.74rem; color: var(--text-muted); line-height: 1.3; }
.gloss-field .input-sm { width: 100%; }

.gloss-check {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: 0.85rem; color: var(--text-dim); margin-bottom: 12px;
}
.gloss-check input { margin-top: 3px; flex-shrink: 0; }
.gloss-check strong { color: var(--text); }

.gloss-override { padding-left: 2px; }
.gloss-override-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: center; }
.gloss-override-row .input-sm:first-of-type { flex: 0 0 130px; }
.gloss-override-row .input-sm:nth-of-type(2) { flex: 1 1 180px; }
.gloss-override-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gloss-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(124, 92, 191, 0.12); border: 1px solid rgba(124, 92, 191, 0.3);
  border-radius: var(--radius-pill); padding: 3px 6px 3px 10px; font-size: 0.78rem;
}
.gloss-chip-lang { font-weight: 700; color: var(--accent); }
.gloss-chip-txt { color: var(--text); }
.gloss-chip-x {
  border: none; background: none; color: var(--text-muted); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 2px;
}
.gloss-chip-x:hover { color: var(--text); }

.gloss-advanced { margin-top: 4px; }
.gloss-advanced summary {
  cursor: pointer; font-size: 0.82rem; color: var(--text-muted);
  font-weight: 600; padding: 6px 0; user-select: none;
}
.gloss-advanced summary:hover { color: var(--text); }
.gloss-advanced .gloss-grid { margin-top: 8px; }

.gloss-form-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}

.gloss-verbatim-badge {
  font-size: 0.72rem; font-weight: 600; color: var(--accent);
  background: rgba(124, 92, 191, 0.12); border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.glossary-muted { color: var(--text-muted); }

/* Intro: three capability cards */
.glossary-intro-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.glossary-intro-card {
  flex: 1 1 200px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.gic-icon { font-size: 1.2rem; margin-bottom: 4px; }
.gic-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.gic-body { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }

@media (max-width: 640px) {
  .gloss-override-row .input-sm:first-of-type,
  .gloss-override-row .input-sm:nth-of-type(2) { flex: 1 1 100%; }
}

.glossary-intro {
  background: rgba(124, 92, 191, 0.07);
  border: 1px solid rgba(124, 92, 191, 0.22);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.glossary-intro-title { font-weight: 600; margin-bottom: 6px; }
.glossary-intro-body {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-muted, rgba(255,255,255,0.72));
  margin: 0 0 12px;
}
.glossary-intro-example {
  background: rgba(0,0,0,0.18);
  border-radius: var(--radius, 8px);
  padding: 12px 14px;
}
.glossary-intro-example-title {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, rgba(255,255,255,0.5));
  margin-bottom: 8px;
}
.glossary-intro-example ul {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-muted, rgba(255,255,255,0.8));
}
.glossary-intro-result {
  font-size: 0.84rem;
  color: var(--text-muted, rgba(255,255,255,0.72));
  margin: 0;
}
.glossary-intro-import-note {
  font-size: 0.8rem;
  color: var(--text-dim, rgba(255,255,255,0.55));
  margin: 12px 0 0;
  line-height: 1.5;
}
.glossary-intro code,
.glossary-form-hint code {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.82em;
}

.glossary-form-hint {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted, rgba(255,255,255,0.7));
  background: rgba(124, 92, 191, 0.08);
  border: 1px solid rgba(124, 92, 191, 0.25);
  border-radius: var(--radius, 8px);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.glossary-form-hint .glossary-form-example {
  display: block;
  margin-top: 6px;
  color: var(--text-muted, rgba(255,255,255,0.6));
}
.glossary-form-hint code {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.82em;
}

.glossary-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.glossary-form-row .input-sm { flex: 1; min-width: 120px; }
.glossary-form-row #gloss-lang { flex: 0 0 160px; }

.glossary-form-error {
  margin-top: 10px;
  color: #e74c3c;
  font-size: 0.82rem;
}

.glossary-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.glossary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.glossary-table thead th {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 12px 16px;
  text-align: left;
  text-transform: uppercase;
}

.glossary-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.glossary-table tbody tr:last-child { border-bottom: none; }
.glossary-table tbody tr:hover { background: rgba(88,101,242,0.05); }

.glossary-table td {
  color: var(--text-primary);
  padding: 12px 16px;
  vertical-align: middle;
}

.glossary-lang-badge {
  background: rgba(88,101,242,0.15);
  border-radius: 4px;
  color: var(--accent);
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 7px;
  text-transform: uppercase;
}

.glossary-term { font-weight: 700; }
.glossary-fullform { color: var(--text-secondary); font-style: italic; }
.glossary-def { color: var(--text-secondary); max-width: 340px; }

.glossary-empty {
  color: var(--text-dim);
  padding: 60px;
  text-align: center;
}

.btn-glossary-delete {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 10px;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-glossary-delete:hover { border-color: #e74c3c; color: #e74c3c; }

.glossary-row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.btn-glossary-edit {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 10px;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-glossary-edit:hover { border-color: var(--accent, #7c5cbf); color: var(--accent, #9d7fe0); }

/* Language filter pills */
.glossary-lang-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.glossary-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 999px;
  color: var(--text-dim, rgba(255,255,255,0.7));
  cursor: pointer;
  font-size: 0.82rem;
  padding: 5px 12px;
  transition: all var(--transition, 0.15s);
}
.glossary-lang-pill:hover { border-color: var(--accent, #7c5cbf); color: var(--text, #fff); }
.glossary-lang-pill.active {
  background: rgba(124, 92, 191, 0.18);
  border-color: var(--accent, #7c5cbf);
  color: var(--text, #fff);
}
.glossary-lang-pill-count {
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  font-size: 0.72rem;
  min-width: 18px;
  padding: 1px 6px;
  text-align: center;
}
.glossary-lang-pill.active .glossary-lang-pill-count {
  background: rgba(124, 92, 191, 0.45);
}

/* Caption glossary highlight */
.glossary-term-highlight {
  border-bottom: 2px dotted var(--accent);
  cursor: pointer;
  display: inline;
}
.glossary-term-highlight:hover,
.glossary-term-highlight:focus {
  background: rgba(124, 92, 191, 0.14);
  border-radius: 3px;
  outline: none;
}

/* Click/keyboard popover showing a glossary term's full form + definition. */
.glossary-term-popover {
  position: fixed;
  z-index: 1000;
  max-width: 280px;
  background: var(--bg-card, #1b1b22);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-size: 0.85rem;
  line-height: 1.4;
}
.glossary-term-popover .gtp-term { font-weight: 700; color: var(--accent); }
.glossary-term-popover .gtp-full { color: var(--text); margin-top: 2px; }
.glossary-term-popover .gtp-def { color: var(--text-dim); margin-top: 4px; font-size: 0.8rem; }

@media (max-width: 768px) {
  .dash-tabs { padding: 0 20px; }
  .glossary-form-row { flex-direction: column; align-items: stretch; }
  .glossary-form-row #gloss-lang { flex: 1; }
  .glossary-table thead th:nth-child(4),
  .glossary-table td:nth-child(4) { display: none; }
}

/* ⚠️ Session Warning Banner */
.session-alert-banner {
  background: rgba(255, 166, 0, 0.15);
  border-bottom: 1px solid rgba(255, 166, 0, 0.3);
  backdrop-filter: blur(10px);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  animation: slideDown 0.4s ease-out;
  position: sticky;
  top: 0;
  z-index: 100;
}

.alert-icon { font-size: 1.2rem; }
.alert-text { font-size: 0.9rem; font-weight: 600; color: #ffca28; }
.alert-timer { 
  font-family: monospace; 
  font-size: 1rem; 
  background: rgba(0,0,0,0.3); 
  padding: 2px 8px; 
  border-radius: 4px; 
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.btn-stop { color: #ff4444; border-color: rgba(255,68,68,0.3) !important; }
.btn-stop:hover { background: rgba(255,68,68,0.1); border-color: #ff4444 !important; }

/* ── Inactivity warning banner (presenter-only, Rule 1 at 50 min) ─── */
.inactivity-warning-banner {
  background: rgba(255, 140, 0, 0.12);
  border-bottom-color: rgba(255, 140, 0, 0.35);
  gap: 12px;
}
.inactivity-keepalive-btn {
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.inactivity-keepalive-btn:hover { filter: brightness(1.1); }
.inactivity-warning-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
}
.inactivity-warning-dismiss:hover { color: var(--text-secondary); }

/* Success State for Banner (Presenter Returned) */
.session-alert-banner.success {
  background: rgba(40, 167, 69, 0.2);
  border-bottom-color: rgba(40, 167, 69, 0.4);
}
.session-alert-banner.success .alert-text { color: #2ecc71; }

/* Archived Session Card Styling */
.inactive-card {
  opacity: 0.7;
  filter: grayscale(0.2);
  border-color: rgba(255,255,255,0.05) !important;
}

.inactive-card:hover {
  opacity: 1;
  filter: none;
}

.archive-tag {
  font-size: 0.72rem;
  background: rgba(255,255,255,0.08);
  padding: 2px 7px;
  border-radius: 4px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.live-tag {
  font-size: 0.65rem;
  background: rgba(40, 167, 69, 0.2);
  color: #2ecc71;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  animation: pulse 2s infinite;
}

.dash-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.session-tier-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface-2, #e9eaf0);
  color: var(--text-2, #555);
}
.session-tier-badge--demo    { background: #f0f0f0; color: #888; }
.session-tier-badge--micro   { background: #e8f4fd; color: #1a6fa8; }
.session-tier-badge--starter { background: #eaf4ea; color: #2a7a2a; }
.session-tier-badge--pro     { background: #f0ebff; color: #5b2fc9; }
.session-tier-badge--event   { background: #fff4e0; color: #a05d00; }
.session-tier-badge--growth  { background: #fdeaea; color: #b02020; }

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.btn-delete:hover {
  background: rgba(255,68,68,0.1);
}

/* Stats layout adjustment */
.card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}

/* ── Dictionary Popover (Premium Glassmorphism) ────────────── */
.dictionary-popover {
  position: absolute;
  z-index: 1000;
  width: 280px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.2);
  color: var(--text-primary);
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.dict-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.dict-word {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: capitalize;
}

.dict-phonetic {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-family: monospace;
}

.dict-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.dict-footer {
  margin-top: 12px;
  font-size: 0.7rem;
  color: var(--text-dim);
  text-align: right;
  font-style: italic;
}

.dict-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--text-dim);
  font-size: 0.8rem;
  gap: 8px;
}

/* Highlight clickable words in captions */
.caption-text {
  cursor: pointer;
  transition: color var(--transition);
  position: relative;
}
.caption-text:hover { color: var(--accent); }

/* Dashboard stat labels : replaces inline emoji spans */
.stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  min-width: 54px;
}

/* Audience badge "Live" chip */
.badge-label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--success);
  line-height: 1;
}

/* Sidebar settings icon : plain Unicode cog, no emoji rendering */
.sidebar-icon--settings {
  font-size: 1.4rem;
  font-family: sans-serif; /* forces non-emoji rendering on most systems */
}

/* ── Attendee view: hard-remove flags and interim balloons ── */
body.attendee-view .caption-lang-flag { display: none !important; }
body.attendee-view .caption-block.interim { display: none !important; }


/* ════════════════════════════════════════════════════════════
   BILLING & MONETIZATION UI
════════════════════════════════════════════════════════════ */

/* ── Timer Bar (free-tier countdown at top of stage) ─────── */
.timer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: rgba(0,0,0,0.5);
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-secondary);
  transition: background 0.4s;
  flex-shrink: 0;
}

.timer-bar-label {
  font-weight: 600;
  white-space: nowrap;
}

.timer-bar-track {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}

.timer-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--success);
  transition: width 1s linear, background 0.4s;
}

.timer-bar-time {
  font-weight: 700;
  min-width: 36px;
  text-align: right;
}

.timer-bar.timer-yellow .timer-bar-fill { background: var(--warning); }
.timer-bar.timer-red    .timer-bar-fill { background: var(--danger); }
.timer-bar.timer-red { animation: timer-pulse-bg 1s ease-in-out infinite alternate; }

@keyframes timer-pulse-bg {
  from { background: rgba(0,0,0,0.5); }
  to   { background: rgba(237,66,69,0.15); }
}

/* ── Upgrade Banner ──────────────────────────────────────── */
.upgrade-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(250,166,26,0.15), rgba(237,66,69,0.15));
  border-bottom: 1px solid rgba(250,166,26,0.3);
  font-size: 0.85rem;
  color: var(--text-primary);
  animation: slide-down 0.3s ease;
}

@keyframes slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.upgrade-banner-btn {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition);
}
.upgrade-banner-btn:hover { background: var(--accent-hover); }

.upgrade-banner-dismiss {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 6px;
  border-radius: 4px;
}
.upgrade-banner-dismiss:hover { color: var(--text-primary); }

/* ── Billing Widget (dashboard sessions panel) ───────────── */
/* ── Header balance pill ─────────────────────────────────────────────────── */
.header-balance-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.header-balance-pill:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-hover));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.header-balance-pill.header-balance-low {
  border-color: color-mix(in srgb, #c2610a 30%, var(--border));
}
.header-balance-amount { font-weight: 700; }
.header-balance-sep    { opacity: 0.4; }
.header-balance-tier   { color: var(--text-secondary); font-weight: 500; }
.header-balance-low {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #c2610a;
  line-height: 1;
  align-self: center;
}

.dashboard-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Billing Tab Content ─────────────────────────────────── */
.billing-summary-card {
  padding: 20px 24px;
  margin-bottom: 28px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.billing-summary-row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.billing-summary-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.billing-summary-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
}

.billing-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.billing-compare-note {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.6;
  text-align: center;
}
.billing-compare-note strong { color: var(--accent); }

/* ── Tier Cards ──────────────────────────────────────────── */
.tier-cards-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.tier-card {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.tier-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow), var(--shadow-md);
  transform: scale(1.03);
}
.tier-card.featured:hover {
  transform: scale(1.03) translateY(-4px);
}

.tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
}

.tier-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.tier-hours {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.tier-rate {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin: 6px 0;
}
.tier-rate span {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.tier-price {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  flex: 1;
}
.tier-features li {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 3px 0 3px 20px;
  position: relative;
}
/* Drawn check marker (no emoji) per UI conventions. */
.tier-features li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 4px;
  height: 8px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tier-buy-btn {
  width: 100%;
  justify-content: center;
}

/* ── Top-Up Modal ────────────────────────────────────────── */
.topup-modal {
  max-width: 720px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 28px 24px;
}

.topup-tier-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 4px;
}

.tier-toggle-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.tier-toggle-btn.active {
  background: var(--accent);
  color: #fff;
}

.badge-new {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--warning);
  color: #000;
  margin-left: 4px;
  vertical-align: middle;
}

/* Session-type toggle on the create card — type only; billing lives in the notice below */
.session-tier-toggle { margin-bottom: 0; margin-top: 6px; }
.session-tier-toggle .tier-toggle-btn { white-space: nowrap; }

.topup-cards {
  display: flex;
  /* row-gap is larger so the "MOST POPULAR"/"BEST VALUE" badges (top: -12px)
     don't overlap the card above when the cards stack on narrow screens. */
  gap: 24px 14px;
  flex-wrap: wrap;
  /* Clear the modal subtitle — the featured-card badges float 12px above the
     card top and would otherwise sit on top of the subtitle text. */
  margin-top: 26px;
  margin-bottom: 16px;
}

.topup-note {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
}

/* ── Session Expired Modal ───────────────────────────────── */
/* ── Session Ended Overlay ───────────────────────────────────────────────── */
.session-ended-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 20, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade-in 0.3s ease;
}

.session-ended-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 48px 36px;
  max-width: 420px;
  width: 90%;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  animation: slide-up 0.35s cubic-bezier(0.22,1,0.36,1);
}

.session-ended-icon {
  width: 72px;
  height: 72px;
}
.session-ended-icon svg {
  width: 100%;
  height: 100%;
}

@keyframes expired-ring {
  to { stroke-dashoffset: 0; }
}

.session-ended-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.session-ended-body {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  max-width: 300px;
}

.session-ended-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 260px;
  margin-top: 8px;
}

.session-ended-topup {
  font-size: 1rem;
  padding: 12px 24px;
  letter-spacing: 0.02em;
}

.session-ended-back {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.session-ended-back:hover { color: var(--text-secondary); }

/* Usage summary line inside the inactivity modal */
.inactivity-usage {
  font-size: 0.82rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  margin: 0;
}

.btn-ghost {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 6px;
}

/* ── Billing History Table ───────────────────────────────── */
.billing-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.billing-history-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.billing-history-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.billing-history-table tr:last-child td { border-bottom: none; }
.billing-history-table .history-row-topup td { color: var(--text-primary); }

/* Session ID code-style chip in the history table */
.hist-sid {
  font-family: monospace;
  font-size: 0.78rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
}

/* Deleted-session rows: dim the row + italicise the name so the audit trail
   is visible but visually de-emphasised. The charge itself stays at full
   contrast in the amount column. */
.billing-history-table .history-row-deleted td { color: var(--text-dim); }
.hist-deleted { font-style: italic; }

/* History type badges */
.history-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.history-badge--topup {
  background: rgba(124, 92, 191, 0.18);
  color: #b79ef5;
  border: 1px solid rgba(124, 92, 191, 0.35);
}
.history-badge--usage {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* ── Stage layout adjustment for timer bar ───────────────── */
.stage {
  display: flex;
  flex-direction: column;
}


/* ════════════════════════════════════════════════════════════
   LANDING PAGE  (guest / unauthenticated view)
════════════════════════════════════════════════════════════ */

/* Hide landing for logged-in users, hide in-app lobby for guests */
body.logged-in  #landing-page    { display: none !important; }
body:not(.logged-in) #lobby-container { display: none !important; }
body:not(.logged-in) .lobby-bg   { display: none !important; }

/* ── Landing root ───────────────────────────────────────── */
.landing-page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
}

/* ── Nav ────────────────────────────────────────────────── */
.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(20, 22, 24, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.landing-logo .logo-icon { font-size: 1.2rem; }
.landing-logo .logo-text { font-size: 1.1rem; font-weight: 700; }
.landing-logo .logo-svg-icon svg { width: 22px; height: 22px; }  /* nav stays small */
.dashboard-header .logo-svg-icon svg { width: 28px; height: 28px; }

.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-ghost {
  background: none;
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-ghost:hover {
  border-color: var(--border);
  color: var(--text-primary);
}

/* ── Hero ───────────────────────────────────────────────── */
.landing-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 32px 56px;
  text-align: center;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-glow);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.hero-title-accent {
  background: linear-gradient(90deg, var(--accent), #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.65;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.btn-hero {
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  box-shadow: 0 0 32px var(--accent-glow);
}

.hero-cta-note {
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.75;
  letter-spacing: 0.03em;
}

.hero-join-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero-join-label {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.hero-join-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-code-input {
  width: 140px;
  padding: 9px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.12em;
  text-align: center;
  outline: none;
  transition: border-color var(--transition);
}
.hero-code-input:focus { border-color: var(--accent); }


.hero-lang-select {
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
  max-width: 160px;
}

/* ── Hero proof strip ───────────────────────────────────── */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 32px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.hero-proof span { white-space: nowrap; }

/* ── Pricing section ────────────────────────────────────── */
.landing-pricing {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 32px 40px;
  text-align: center;
}

.landing-section-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.landing-section-sub {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 36px;
}

.landing-pricing-grid {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* ── Landing tier card ──────────────────────────────────── */
.landing-tier-card {
  flex: 1;
  min-width: 220px;
  max-width: 270px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.landing-tier-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.landing-tier-card.ltc-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow), var(--shadow-md);
  transform: scale(1.03);
}
.landing-tier-card.ltc-featured:hover { transform: scale(1.03) translateY(-4px); }

.ltc-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
}

.ltc-name {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.ltc-price {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin: 4px 0 2px;
}
.ltc-price strong { color: var(--text-primary); }

.ltc-price-note {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.ltc-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}
.ltc-features li {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 3px 0 3px 20px;
  line-height: 1.5;
  position: relative;
}
/* Drawn check marker (no emoji) per UI conventions. */
.ltc-features li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 4px;
  height: 8px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ltc-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-pill);
}

/* ── Compare footnote ───────────────────────────────────── */
.landing-compare {
  font-size: 0.78rem;
  color: var(--text-dim);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}
.landing-compare strong { color: var(--accent); }

/* ── FAQ ────────────────────────────────────────────────── */
.landing-faq {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  padding: 14px 4px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 1.1rem;
  color: var(--text-dim);
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  padding: 0 4px 14px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ── Footer ─────────────────────────────────────────────── */
.landing-footer {
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: auto;
}

/* ════════════════════════════════════════════════════════════
   TERMS OF SERVICE UI
════════════════════════════════════════════════════════════ */

/* ── Version badge (inline in text) ─────────────────────── */
.terms-version-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-glow);
  color: var(--accent);
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Checkbox row in signup form ─────────────────────────── */
.terms-checkbox-row { margin-top: 4px; }

.form-group-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 4px;
}

.form-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted, var(--text-dim));
  font-style: italic;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.terms-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
}
.terms-link:hover { text-decoration-style: solid; }

.terms-error {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--danger);
}

/* ── Terms modal ─────────────────────────────────────────── */
.terms-modal {
  max-width: 680px;
  width: 96%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

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

.terms-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.terms-summary p { margin-bottom: 10px; font-size: 0.875rem; color: var(--text-secondary); }
.terms-summary ul { margin: 8px 0 12px 18px; }
.terms-summary li { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 6px; }
.terms-summary strong { color: var(--text-primary); }

.terms-full-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: underline;
}

.terms-loading { color: var(--text-dim); font-size: 0.875rem; }

.terms-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* ── T&C update / re-acceptance modal ────────────────────── */
.terms-update-modal {
  max-width: 420px;
  text-align: center;
  padding: 36px 28px;
}
.terms-update-icon { display: flex; justify-content: center; margin-bottom: 16px; }
.terms-update-icon svg { width: 64px; height: 64px; filter: drop-shadow(0 0 12px rgba(124,92,191,0.4)); }
.terms-update-modal h2 { font-size: 1.2rem; margin-bottom: 10px; }
.terms-update-modal p { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 16px; }
.terms-update-meta {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 20px;
  text-align: left;
}
.terms-update-meta p { font-size: 0.8rem; margin-bottom: 6px; }
.terms-summary-text { font-size: 0.8rem; color: var(--text-dim) !important; font-style: italic; }
.terms-update-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .landing-nav  { padding: 14px 20px; }
  .landing-hero { padding: 48px 20px 40px; }
  .landing-pricing { padding: 32px 20px; }
  .landing-faq  { padding: 0 20px 36px; }
  .landing-footer { padding: 16px 20px; }
  .landing-pricing-grid { flex-direction: column; align-items: center; }
  .landing-tier-card { max-width: 100%; }
  .landing-tier-card.ltc-featured { transform: none; }
  .hero-join-row { flex-direction: column; width: 100%; }
  .hero-code-input, .hero-lang-select { width: 100%; max-width: 100%; }
}


/* ── Idle session: warning banner, abandoned overlay, Coffee Break ── */
.idle-warning-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: #b45309; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; gap: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  animation: slide-down .3s ease;
}
@keyframes slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.idle-warning-body { display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap; }
.idle-countdown { font-weight: 700; font-size: 1rem; min-width: 60px; }
.idle-warning-actions { display: flex; gap: 8px; flex-shrink: 0; }

.abandoned-overlay {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(0,0,0,.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.abandoned-card {
  background: var(--surface); border-radius: 12px; padding: 40px 36px;
  max-width: 420px; width: 92%; text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.abandoned-title { font-size: 1.4rem; margin: 0 0 12px; }
.abandoned-note { font-size: 0.85rem; color: var(--text-secondary); margin: 10px 0 24px; }
.abandoned-actions { display: flex; flex-direction: column; gap: 12px; }

.attendee-pause-banner {
  position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
  z-index: 800; background: rgba(0,0,0,.75); color: #fff;
  padding: 10px 20px; border-radius: 8px; font-size: 0.9rem;
  text-align: center; pointer-events: none;
}

.coffee-break-btn {
  margin-left: 8px;
  font-size: 0.8rem;
}
/* When the break is active, the toggle button reads "End coffee break". */
.coffee-break-btn.on-break {
  background: #b45309; color: #fff; border-color: #b45309;
}

/* Non-blocking top info strip shown to BOTH presenter and attendees during a
   coffee break. Sits at the very top, full width, does not cover captions. */
.coffee-break-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 850;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #6b4423; color: #fff;
  padding: 9px 16px; font-size: 0.92rem; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  animation: slide-down .3s ease;
}
.coffee-break-banner .cb-icon { font-size: 1.1rem; }
@media (max-width: 600px) {
  .coffee-break-banner { font-size: 0.82rem; padding: 8px 12px; }
}

/* ── Credit Warning Banners (presenter only) ────────────────────────────────── */

/* 10-min: amber, dismissible, sits below the top alert banners */
.credit-warning-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 860;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #92400e; color: #fef3c7;
  padding: 9px 16px; font-size: 0.9rem; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  animation: slide-down .3s ease;
}
.credit-warning-text { flex: 1; }
.credit-warning-dismiss {
  background: none; border: none; color: #fef3c7;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  padding: 0 4px; opacity: .8;
}
.credit-warning-dismiss:hover { opacity: 1; }

/* 5-min: red, non-dismissible */
.credit-critical-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 870;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #7f1d1d; color: #fee2e2;
  padding: 10px 16px; font-size: 0.9rem; text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  animation: slide-down .3s ease;
}
.credit-critical-icon {
  font-style: normal; font-weight: 700;
  width: 20px; height: 20px; line-height: 20px;
  background: #fee2e2; color: #7f1d1d;
  border-radius: 50%; text-align: center; font-size: 0.75rem;
  flex-shrink: 0;
}
.credit-critical-text { flex: 1; }

.credit-topup-btn {
  background: rgba(255,255,255,.15);
  color: inherit; border: 1px solid rgba(255,255,255,.4);
  padding: 4px 12px; border-radius: 6px; font-size: 0.82rem;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.credit-topup-btn:hover { background: rgba(255,255,255,.28); }
.credit-topup-btn--critical { border-color: rgba(255,255,255,.5); }

@media (max-width: 600px) {
  .credit-warning-banner,
  .credit-critical-banner { font-size: 0.78rem; padding: 8px 12px; gap: 8px; }
}

/* ── Caption Display Panel ──────────────────────────────────────────────────── */
.caption-display-panel {
  max-width: 520px; width: 95%;
  /* Scrollable when viewport is short */
  max-height: 90vh; display: flex; flex-direction: column;
}
.caption-display-body {
  padding: 4px 0 8px;
  overflow-y: auto;
  flex: 1;
  /* Ensure the body can shrink and scroll without pushing the QR outside */
  min-height: 0;
}

.cdp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.cdp-row label { font-size: 0.9rem; color: var(--text-secondary); flex: 1; }

.cdp-lang2-wrap { display: flex; align-items: center; gap: 8px; }
.cdp-checkbox { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

.cdp-select {
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font-size: 0.9rem;
}
.cdp-range { width: 140px; accent-color: var(--accent); }
.cdp-color-input { width: 44px; height: 32px; border: none; border-radius: 6px; cursor: pointer; padding: 2px; background: none; }

.cdp-preview {
  margin: 14px 0; padding: 14px 18px; border-radius: 8px;
  text-align: center; font-weight: 600; transition: all 0.2s;
  font-size: 28px; color: #fff; background: #000;
  /* Clamp preview font size so it never overflows the panel */
  word-break: break-word;
}

.cdp-link-row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.cdp-url-input {
  flex: 1; min-width: 0; padding: 6px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-primary); font-size: 0.78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cdp-qr-container {
  display: flex; justify-content: center;
  padding: 12px 0 4px;
}
/* Ensure the QR image never exceeds the panel width */
.cdp-qr-container img,
.cdp-qr-container canvas {
  max-width: 100%; height: auto;
}

.cdp-hint {
  font-size: 0.78rem; color: var(--text-secondary);
  margin: 8px 0 4px; line-height: 1.5;
}