/* ============================================================
   Sidecar Sales Copilot — Material You
   ----------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Surface elevation tokens (Material 3 dark) */
  --m-surface:           #131316;
  --m-surface-1:         #1a1a1f;
  --m-surface-2:         #1f1f25;
  --m-surface-3:         #25252c;
  --m-surface-4:         #2c2c34;
  --m-surface-bright:    #36363f;

  --m-outline:           rgba(255,255,255,0.08);
  --m-outline-strong:    rgba(255,255,255,0.14);

  --m-on-surface:        #e6e6ea;
  --m-on-surface-2:      #b8b8c0;
  --m-on-surface-dim:    #82828c;

  /* Brand accent (used sparingly — primary action + insight) */
  --m-primary:           #e64545;
  --m-primary-soft:      rgba(230,69,69,0.14);
  --m-primary-press:     #c83a3a;
  --m-on-primary:        #ffffff;

  --m-success:           #4ade80;
  --m-warn:              #fbbf24;
  --m-error:             #f87171;

  --m-info:              #6aa9ff;
  --m-customer:          #4ade80;

  /* Shape scale */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Elevation */
  --el-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.15);
  --el-2: 0 2px 6px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.20);
  --el-3: 0 6px 16px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.20);
  --el-4: 0 12px 28px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.25);

  /* Motion */
  --ease-spring: cubic-bezier(.2, .8, .2, 1);
  --ease-out:    cubic-bezier(.2, .6, .3, 1);

  /* Translucent appbar fill — driven via a token so the light theme can
     override it without us hardcoding rgba on the .appbar rule. */
  --appbar-bg: rgba(19,19,22,0.85);
  /* Floating action-bar (Connect / Dial / Mute / Hangup) at the bottom
     of the agent page. Also translucent + backdrop-blurred. */
  --action-bar-bg: rgba(31,31,37,0.92);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--m-surface); color: var(--m-on-surface); }
body {
  font-family: "Inter", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  min-height: 100vh;
  padding-bottom: 220px; /* leave room for floating action bar */
}

/* Self-hosted Material Symbols subset — only the ~55 icons this app uses,
   pinned to the opsz24/wght400/FILL0/GRAD0 instance (~8KB). Replaces the
   Google Fonts <link> that used display=block, which blocked every icon's
   paint on a cold cross-origin font download (the 0.75–1.6s render times
   Cloudflare flagged). Same-origin + preloaded + display=block here means
   the icon paints near-instantly with no fallback-text flash. */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/material-symbols-rounded-subset-v3.woff2") format("woff2");
}

/* Material Symbols: optical sizing */
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ============================================================
   APP BAR
   ============================================================ */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 12px 24px;
  background: var(--appbar-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--m-outline);
}
.appbar-left   { display: flex; align-items: center; gap: 12px; }
.appbar-center { display: flex; justify-content: center; }
.appbar-right  { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }

.logo-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff6b6b, var(--m-primary) 60%, #8a1f1f);
  box-shadow: 0 0 12px rgba(230,69,69,0.55);
  flex: 0 0 auto;
}
.app-title {
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--m-on-surface);
}

.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--m-surface-2);
  border: 1px solid var(--m-outline);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  color: var(--m-on-surface-2);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.status-chip .material-symbols-rounded { font-size: 18px; color: var(--m-on-surface-dim); }
.status-chip[data-state="active"]    { background: rgba(74,222,128,0.10); color: var(--m-success); border-color: rgba(74,222,128,0.30); }
.status-chip[data-state="active"] .material-symbols-rounded { color: var(--m-success); }
.status-chip[data-state="ringing"]   { background: rgba(251,191,36,0.10); color: var(--m-warn); border-color: rgba(251,191,36,0.30); }
.status-chip[data-state="error"]     { background: rgba(248,113,113,0.10); color: var(--m-error); border-color: rgba(248,113,113,0.30); }
.call-timer {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 12px; color: inherit; opacity: 0.85;
  padding-left: 4px; border-left: 1px solid currentColor;
  margin-left: 4px; padding-left: 10px;
}

.chip-row { display: inline-flex; align-items: center; gap: 6px; }
.led-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--m-surface-2);
  border: 1px solid var(--m-outline);
  color: var(--m-on-surface-dim);
  transition: all .2s var(--ease-out);
}
.led-chip .material-symbols-rounded { font-size: 18px; }
.led-chip.on   { background: rgba(74,222,128,0.14);  color: var(--m-success); border-color: rgba(74,222,128,0.30);
                 box-shadow: 0 0 0 4px rgba(74,222,128,0.06); }
.led-chip.warn { background: rgba(251,191,36,0.14);  color: var(--m-warn);    border-color: rgba(251,191,36,0.30);
                 box-shadow: 0 0 0 4px rgba(251,191,36,0.06); }
.led-chip.bad  { background: rgba(248,113,113,0.16); color: var(--m-error);   border-color: rgba(248,113,113,0.32);
                 box-shadow: 0 0 0 4px rgba(248,113,113,0.07); }

.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: transparent;
  color: var(--m-on-surface-2);
  border: 1px solid var(--m-outline);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: all .15s var(--ease-out);
}
.nav-link:hover { background: var(--m-surface-2); color: var(--m-on-surface); border-color: var(--m-outline-strong); }
.nav-link .material-symbols-rounded { font-size: 18px; }

/* ============================================================
   HERO COACH
   ============================================================ */
.hero-coach {
  max-width: 1400px;
  margin: 24px auto 0;
  padding: 0 24px;
}

.hero-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px; flex-wrap: wrap;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--m-on-surface-2);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
}
.hero-eyebrow .material-symbols-rounded { font-size: 16px; color: var(--m-primary); }
.hero-hint {
  color: var(--m-on-surface-dim); font-size: 13px;
}

.hero-stage {
  position: relative;
  min-height: 140px;
  background: linear-gradient(140deg, var(--m-surface-2) 0%, var(--m-surface-1) 100%);
  border: 1px solid var(--m-outline);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  display: flex; align-items: center;
  box-shadow: var(--el-2);
  overflow: hidden;
}
.hero-stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(230,69,69,0.06), transparent 60%),
    radial-gradient(ellipse 50% 70% at 100% 100%, rgba(106,169,255,0.05), transparent 60%);
  pointer-events: none;
}

.hero-listening {
  display: flex; align-items: center; gap: 18px;
  color: var(--m-on-surface-dim);
  position: relative; z-index: 1;
}
.listening-orb {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%),
              radial-gradient(circle, var(--m-primary), transparent 70%);
  position: relative;
  animation: orb-pulse 2.2s var(--ease-spring) infinite;
}
.listening-orb::before, .listening-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--m-primary); opacity: 0;
  animation: orb-ring 2.2s var(--ease-spring) infinite;
}
.listening-orb::after { animation-delay: 1.1s; }
@keyframes orb-pulse {
  0%, 100% { transform: scale(0.95); filter: brightness(0.9); }
  50%      { transform: scale(1.08); filter: brightness(1.2); }
}
@keyframes orb-ring {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.0); opacity: 0;   }
}
.listening-text { margin: 0; font-size: 15px; }

.hero-card {
  position: relative; z-index: 1;
  width: 100%;
  animation: card-rise .45s var(--ease-spring) both;
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-card-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.hero-card-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: var(--m-primary);
  color: var(--m-on-primary);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--r-xs);
}
.hero-card-ts {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--m-on-surface-dim);
}
.hero-card-text {
  margin: 0;
  font-size: 22px; line-height: 1.35;
  font-weight: 500; letter-spacing: -0.015em;
  color: var(--m-on-surface);
}

.hero-history {
  margin-top: 16px;
}
.hero-history-label {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--m-on-surface-dim);
}
.hero-history-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.hero-history-list li {
  display: flex; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--m-outline);
  font-size: 13px;
  color: var(--m-on-surface-2);
}
.hero-history-list li:last-child { border-bottom: 0; }
.hero-history-list .li-ts {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--m-on-surface-dim);
  min-width: 56px;
  padding-top: 2px;
}
.hero-history-list .li-text { flex: 1; }
.hero-history-list .li-text strong { color: var(--m-on-surface); font-weight: 500; }

/* ============================================================
   MAIN GRID — Conversation / Context
   ============================================================ */
.main-grid {
  max-width: 1400px;
  margin: 24px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
}
@media (max-width: 1000px) {
  .main-grid { grid-template-columns: 1fr; }
}

.surface {
  background: var(--m-surface-1);
  border: 1px solid var(--m-outline);
  border-radius: var(--r-lg);
  box-shadow: var(--el-1);
  display: flex; flex-direction: column;
  min-height: 360px;
  min-width: 0;
}
.surface-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--m-outline);
}
.surface-title {
  display: inline-flex; align-items: center; gap: 10px;
}
.surface-title h2 {
  margin: 0;
  font-size: 14px; font-weight: 600;
  color: var(--m-on-surface);
  letter-spacing: -0.005em;
}
.surface-title .material-symbols-rounded {
  font-size: 20px; color: var(--m-on-surface-dim);
}

/* ----- Switch (Material-style) ----- */
.switch {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--m-on-surface-2);
  cursor: pointer;
  user-select: none;
  /* Keep the label on one line and don't let a cramped flex row (e.g. the
     appbar next to the "Updated …" timestamp) squash it — the wrap was
     splitting "Auto-refresh" across two lines and shrinking the track. */
  white-space: nowrap;
  flex-shrink: 0;
}
.switch input {
  appearance: none; -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;            /* hold the 34px track; never compress the oval */
  width: 34px; height: 20px;
  background: var(--m-surface-3);
  border: 1px solid var(--m-outline-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.switch input::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--m-on-surface-dim);
  border-radius: 50%;
  transition: left .2s var(--ease-spring), background .2s var(--ease-out);
}
.switch input:checked {
  background: var(--m-primary-soft);
  border-color: var(--m-primary);
}
.switch input:checked::after {
  left: 16px;
  background: var(--m-primary);
}

/* ============================================================
   TRANSCRIPT
   ============================================================ */
.transcript-stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 60vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.transcript-stream::-webkit-scrollbar { width: 8px; }
.transcript-stream::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10); border-radius: 4px;
}
.transcript-empty {
  text-align: center;
  color: var(--m-on-surface-dim);
  font-size: 13px;
  padding: 40px 20px 0;
  margin: 0;
}

.bubble {
  max-width: 82%;
  padding: 10px 14px;
  background: var(--m-surface-2);
  border: 1px solid var(--m-outline);
  border-radius: var(--r-md);
  font-size: 14px; line-height: 1.45;
  color: var(--m-on-surface);
  overflow-wrap: anywhere;
  animation: bubble-in .25s var(--ease-out) both;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bubble-meta {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--m-on-surface-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.bubble.customer {
  align-self: flex-start;
  background: var(--m-surface-2);
  border-bottom-left-radius: 4px;
}
.bubble.customer .bubble-meta { color: var(--m-customer); }
.bubble.rep {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(106,169,255,0.10), rgba(106,169,255,0.04));
  border-color: rgba(106,169,255,0.22);
  border-bottom-right-radius: 4px;
}
.bubble.rep .bubble-meta { color: var(--m-info); }
.bubble.note {
  align-self: center;
  background: transparent;
  border: 1px dashed var(--m-outline-strong);
  color: var(--m-on-surface-dim);
  font-style: italic;
  font-size: 12.5px;
}

/* ============================================================
   CONTEXT
   ============================================================ */
.context-cards {
  flex: 1; min-width: 0;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
  max-height: 60vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.context-empty {
  margin: 0;
  color: var(--m-on-surface-dim);
  font-size: 13px;
  line-height: 1.5;
}

.ctx-card {
  background: var(--m-surface-2);
  border: 1px solid var(--m-outline);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  min-width: 0; max-width: 100%;
  overflow: hidden;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.ctx-card.fresh { animation: card-rise .4s var(--ease-spring); }
.ctx-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.ctx-title { font-weight: 600; color: var(--m-on-surface); font-size: 14px; }
.ctx-tag {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-xs); font-weight: 700;
  background: rgba(106,169,255,0.14); color: var(--m-info);
}
.ctx-tag.competitor { background: rgba(230,69,69,0.16); color: #ff7c7c; }
.ctx-tag.account    { background: rgba(74,222,128,0.14); color: var(--m-success); }
.ctx-tag.objection  { background: rgba(251,191,36,0.16); color: var(--m-warn); }
.ctx-tag.followup   { background: rgba(106,169,255,0.16); color: var(--m-info); }
.ctx-tag.escalation { background: rgba(248,113,113,0.18); color: var(--m-error); }
.ctx-tag.signal     { background: rgba(74,222,128,0.16); color: var(--m-success); }
.ctx-ts {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 10.5px; color: var(--m-on-surface-dim);
}
.ctx-body {
  font-size: 13px; color: var(--m-on-surface-2);
  min-width: 0; overflow: hidden;
  overflow-wrap: anywhere; word-break: break-word;
}
.ctx-body dl {
  margin: 6px 0 0;
  display: grid;
  grid-template-columns: minmax(60px, max-content) minmax(0, 1fr);
  gap: 4px 12px;
  font-size: 12.5px;
  min-width: 0;
}
.ctx-body dt { color: var(--m-on-surface-dim); }
.ctx-body dd {
  margin: 0; color: var(--m-on-surface);
  min-width: 0; max-width: 100%;
  overflow-wrap: anywhere; word-break: break-word;
}
.ctx-body dd.long {
  display: -webkit-box;
  -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; position: relative;
  cursor: pointer;
}
.ctx-body dd.long.expanded { display: block; -webkit-line-clamp: unset; }
.ctx-body dd.long::after {
  content: "… click";
  position: absolute; right: 0; bottom: 0;
  background: var(--m-surface-2);
  color: var(--m-on-surface-dim);
  font-size: 10.5px; padding: 0 4px;
}
.ctx-body dd.long.expanded::after { content: ""; }
.ctx-body pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--m-surface);
  border: 1px solid var(--m-outline);
  border-radius: var(--r-xs);
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap; word-break: break-word;
  font: 11.5px "Roboto Mono", ui-monospace, monospace;
  color: var(--m-on-surface-2);
}

/* ============================================================
   FLOATING ACTION BAR
   ============================================================ */
.action-bar {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  width: min(1400px, calc(100% - 48px));
  z-index: 30;

  background: var(--action-bar-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--m-outline-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--el-4);

  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}

.action-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.action-divider {
  width: 1px; height: 28px;
  background: var(--m-outline-strong);
  margin: 0 4px;
}

.input-group {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
  display: flex; align-items: center;
  background: var(--m-surface);
  border: 1px solid var(--m-outline);
  border-radius: var(--r-pill);
  padding: 0 16px 0 12px;
  height: 44px;
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.input-group:focus-within {
  border-color: var(--m-primary);
  box-shadow: 0 0 0 4px var(--m-primary-soft);
}
.input-group .material-symbols-rounded {
  color: var(--m-on-surface-dim);
  font-size: 20px;
  margin-right: 8px;
}
.input-group input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0; outline: 0;
  color: var(--m-on-surface);
  font: inherit;
  font-size: 14px;
}
.input-group input::placeholder { color: var(--m-on-surface-dim); }

/* Buttons */
.btn-tonal, .btn-filled, .btn-text {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px;
  padding: 0 20px;
  font: inherit; font-size: 14px; font-weight: 500;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s var(--ease-out), color .15s var(--ease-out),
              box-shadow .15s var(--ease-out), transform .1s var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-tonal {
  background: var(--m-surface-3);
  color: var(--m-on-surface);
  border-color: var(--m-outline);
}
.btn-tonal:hover  { background: var(--m-surface-4); }
.btn-tonal:active { transform: scale(0.98); }
/* "Go Online" while registered — green so it's obvious the subscriber is
   live and accepting inbound. Driven by the isRegistered$ subscription. */
.btn-tonal.online-active {
  background: rgba(74,222,128,0.16);
  border-color: rgba(74,222,128,0.40);
  color: var(--m-success);
}
.btn-tonal.online-active:hover { background: rgba(74,222,128,0.24); }

.btn-filled {
  background: var(--m-primary);
  color: var(--m-on-primary);
  box-shadow: 0 2px 8px rgba(230,69,69,0.25);
}
.btn-filled:hover  { background: var(--m-primary-press); box-shadow: 0 4px 14px rgba(230,69,69,0.35); }
.btn-filled:active { transform: scale(0.98); }

.btn-text {
  height: 36px; padding: 0 12px;
  background: transparent; color: var(--m-on-surface-2);
  border-color: transparent;
}
.btn-text:hover { background: var(--m-surface-2); color: var(--m-on-surface); }

.btn-tonal:disabled, .btn-filled:disabled {
  opacity: 0.45; cursor: not-allowed; transform: none;
  box-shadow: none;
}
.btn-tonal .material-symbols-rounded,
.btn-filled .material-symbols-rounded { font-size: 20px; }

/* FABs (icon-only round buttons) */
.fab, .fab-tonal, .fab-success, .fab-danger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s var(--ease-out), transform .1s var(--ease-out),
              box-shadow .15s var(--ease-out);
  flex: 0 0 auto;
}
.fab { background: var(--m-surface-3); color: var(--m-on-surface); border-color: var(--m-outline); }
.fab:hover { background: var(--m-surface-4); }
.fab-tonal {
  background: var(--m-surface-3); color: var(--m-on-surface);
  border-color: var(--m-outline);
}
.fab-tonal:hover  { background: var(--m-surface-4); }
.fab-tonal:active { transform: scale(0.94); }
.fab-tonal:disabled { opacity: 0.45; cursor: not-allowed; }
.fab-tonal.active {
  background: rgba(74,222,128,0.18);
  border-color: rgba(74,222,128,0.40);
  color: var(--m-success);
  box-shadow: 0 0 0 4px rgba(74,222,128,0.08);
}
.fab-tonal.active .material-symbols-rounded { color: var(--m-success); }

/* Muted state — fab-tonal.muted (used by the mic button). Reads as a
   warning chip with the slashed-mic icon. Distinct from .active so we
   don't conflate "currently doing something" with "currently muted". */
.fab-tonal.muted {
  background: rgba(230,69,69,0.18);
  border-color: rgba(230,69,69,0.42);
  color: var(--m-primary, #ff6363);
  box-shadow: 0 0 0 4px rgba(230,69,69,0.10);
}
.fab-tonal.muted .material-symbols-rounded {
  color: var(--m-primary, #ff6363);
  animation: mute-pulse 1.6s ease-in-out infinite;
}
@keyframes mute-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.fab-success {
  background: var(--m-success); color: #0a1a0f;
  box-shadow: 0 2px 8px rgba(74,222,128,0.30);
}
.fab-success:hover  { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(74,222,128,0.40); }
.fab-success:active { transform: scale(0.94); }

.fab-danger {
  background: var(--m-error); color: #2a0a0a;
  box-shadow: 0 2px 8px rgba(248,113,113,0.30);
}
.fab-danger:hover  { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(248,113,113,0.40); }
.fab-danger:active { transform: scale(0.94); }
.fab-danger:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.fab .material-symbols-rounded,
.fab-tonal .material-symbols-rounded,
.fab-success .material-symbols-rounded,
.fab-danger .material-symbols-rounded { font-size: 22px; }

/* ----- Incoming-call banner ----- */
.invite-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(140deg, rgba(74,222,128,0.18), rgba(74,222,128,0.06));
  border: 1px solid rgba(74,222,128,0.32);
  border-radius: var(--r-md);
  animation: card-rise .35s var(--ease-spring);
}
.invite-banner .ringing {
  color: var(--m-success);
  font-size: 26px;
  animation: ring 0.9s ease-in-out infinite;
}
@keyframes ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(14deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(8deg); }
}
.invite-body {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.invite-body strong { color: var(--m-on-surface); font-size: 14px; font-weight: 600; }
.invite-from {
  font-size: 12px; color: var(--m-on-surface-2);
  font-family: "Roboto Mono", ui-monospace, monospace;
}

/* Post-call variant: same layout as .invite-banner but neutral colors —
   the call already ended, no ringing urgency. */
.post-call-banner {
  background: linear-gradient(140deg, rgba(106,169,255,0.14), rgba(106,169,255,0.04));
  border-color: rgba(106,169,255,0.30);
}
.post-call-banner > .material-symbols-rounded {
  color: var(--m-info, #6aa9ff);
  font-size: 26px;
}

/* ----- Audio meter + stats ----- */
.action-meta {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.meter {
  flex: 1; min-width: 160px;
  height: 6px;
  background: var(--m-surface);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.meter-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--m-success), var(--m-warn), var(--m-primary));
  transition: width .08s linear;
  border-radius: inherit;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(60px, auto));
  gap: 14px;
}
.stat {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 1px;
  min-width: 60px;
}
.stat-num {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 20px; font-weight: 600;
  color: var(--m-on-surface);
  line-height: 1;
}
#stat-insights { color: var(--m-primary); }
.stat-error { color: var(--m-error); }
.stat-error[data-zero="true"] { color: var(--m-on-surface); }
.stat-label {
  font-size: 10px;
  color: var(--m-on-surface-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
}
#stat-insights-wrap.flash { animation: stat-flash 1s var(--ease-out); }
@keyframes stat-flash {
  0%   { background: var(--m-primary-soft); }
  100% { background: transparent; }
}
#stat-insights-wrap {
  border-radius: var(--r-xs);
  padding: 4px 8px;
  transition: background .3s var(--ease-out);
}

#remote-audio { display: none; }

/* ============================================================
   DEBUG DRAWER
   ============================================================ */
.debug-drawer {
  max-width: 1400px;
  margin: 24px auto 0;
  padding: 0 24px;
  background: transparent;
}
.debug-drawer > .debug-toolbar,
.debug-drawer > ol,
.debug-drawer > summary {
  background: var(--m-surface-1);
}
.debug-drawer summary {
  border: 1px solid var(--m-outline);
  border-radius: var(--r-lg);
}
.debug-drawer[open] summary {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: none;
}
.debug-drawer .debug-toolbar {
  border-left: 1px solid var(--m-outline);
  border-right: 1px solid var(--m-outline);
}
.debug-drawer > ol {
  border: 1px solid var(--m-outline);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.debug-drawer > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  cursor: pointer;
  color: var(--m-on-surface-dim);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  list-style: none;
}
.debug-drawer > summary::-webkit-details-marker { display: none; }
.debug-drawer > summary::after {
  content: "▾"; font-family: sans-serif; font-size: 12px; /* was expand_more */;
  font-family: "Material Symbols Rounded";
  margin-left: auto;
  font-size: 20px;
  transition: transform .2s var(--ease-out);
}
.debug-drawer[open] > summary::after { transform: rotate(180deg); }

.debug-toolbar {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--m-outline);
  flex-wrap: wrap;
}
#filter-text {
  flex: 1; min-width: 180px;
  padding: 8px 12px;
  background: var(--m-surface);
  color: var(--m-on-surface);
  border: 1px solid var(--m-outline);
  border-radius: var(--r-xs);
  font: inherit; font-size: 13px;
}
#filter-text:focus { outline: none; border-color: var(--m-primary); }

#events {
  margin: 0; padding: 0; list-style: none;
  max-height: 40vh; overflow-y: auto;
  border-top: 1px solid var(--m-outline);
  font: 12px "Roboto Mono", ui-monospace, monospace;
}
#events li {
  display: grid; grid-template-columns: 70px 120px 1fr;
  gap: 12px; padding: 6px 20px;
  border-bottom: 1px solid var(--m-outline);
  cursor: pointer;
}
#events li:hover { background: var(--m-surface-2); }
#events .ts { color: var(--m-on-surface-dim); }
#events .type {
  font-weight: 600; color: var(--m-on-surface-2);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px;
}
#events .summary {
  color: var(--m-on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#events .json {
  display: none; grid-column: 1 / -1;
  margin: 6px 0 0; padding: 10px;
  white-space: pre-wrap; color: var(--m-on-surface-2);
  background: var(--m-surface); border-radius: var(--r-xs);
  font-size: 11px;
}
#events li.expanded .summary { white-space: normal; }
#events li.expanded .json { display: block; }
#events .t-insight    .type { color: var(--m-primary); }
#events .t-skip       .type { color: var(--m-on-surface-dim); }
#events .t-tool_call  .type { color: var(--m-info); }
#events .t-tool_result .type { color: var(--m-success); }
#events .t-error      .type { color: var(--m-error); }
#events .t-final      .type { color: var(--m-warn); }

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (max-width: 900px) {
  .appbar { grid-template-columns: 1fr; row-gap: 8px; padding: 12px 16px; }
  .appbar-center, .appbar-right { justify-content: flex-start; }
  .hero-coach, .main-grid, .debug-drawer { margin-left: 16px; margin-right: 16px; padding: 0 0; }
  .hero-stage { padding: 22px; }
  .hero-card-text { font-size: 19px; }
  .action-bar { width: calc(100% - 24px); padding: 12px; border-radius: var(--r-lg); }
  .action-row { gap: 8px; }
  .btn-tonal, .btn-filled { padding: 0 14px; }
  body { padding-bottom: 280px; }
}

/* ============================================================
   Mobile (≤ 600 px) — phone-sized viewports.
   Goal: every page fits the viewport with no horizontal scroll except
   for the wide call tables, which scroll inside their own container.
   ----------------------------------------------------------- */
@media (max-width: 600px) {
  /* Appbar nav: stop stacking children in a single overflowing row.
     Wrap onto multiple rows; right-side children align to the start so
     the title sits at the top and chips/links flow below it. */
  .appbar-left, .appbar-right, .appbar-center {
    flex-wrap: wrap;
    width: 100%;
    row-gap: 6px;
  }
  .appbar-right { gap: 6px; }
  .nav-link { padding: 6px 12px; font-size: 12px; }
  .nav-link .material-symbols-rounded { font-size: 18px; }

  /* The monitor's `table.live` has 9 columns — too many to reflow
     cleanly. Keep the horizontal-scroll fallback for that one. */
  .live-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.live { font-size: 12px; }
  table.live th, table.live td { padding: 10px 10px; }

  /* The CDR `table.calls` reflows into stacked cards on mobile so the
     full content of every row is visible without swiping. The renderer
     stamps a `data-label` on each <td>; the mobile CSS surfaces those
     labels (since the THEAD is hidden) as small uppercase prefixes
     before each value. */
  .calls-wrap { overflow: visible; border: 0; }
  table.calls { font-size: 13px; }
  table.calls thead { display: none; }
  table.calls, table.calls tbody, table.calls tr { display: block; }
  table.calls tr {
    border: 1px solid var(--m-outline);
    border-radius: var(--r-sm);
    margin-bottom: 10px;
    padding: 12px 14px;
    background: var(--m-surface-1);
  }
  table.calls tr.click-row:hover { background: var(--m-surface-2); }
  table.calls td {
    display: flex; align-items: baseline;
    justify-content: flex-start;
    padding: 4px 0; border: 0;
    text-align: left;
    width: auto !important; white-space: normal;
    word-break: break-word; overflow: visible;
    max-width: none;
  }
  /* The label prefix — small uppercase, dim. The Started/Call ID rows
     stack the label above; numeric stat rows put it inline. */
  table.calls td::before {
    content: attr(data-label);
    color: var(--m-on-surface-dim);
    font-family: inherit; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    font-size: 10px;
    min-width: 72px;
    margin-right: 10px;
    flex-shrink: 0;
  }
  /* Call ID needs its own line — UUIDs are too wide to share with a label. */
  table.calls td.id {
    flex-direction: column; gap: 2px;
    align-items: flex-start;
  }
  table.calls td.id::before { margin-right: 0; }
  table.calls td.id { font-size: 11.5px; }

  /* CDR KPI strip: each tile was full-width single column on phones,
     which is a lot of vertical scrolling. Pack 2 per row instead. */
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .kpi-tile .value { font-size: 22px; }

  /* CDR sub-grids stack already, but the inner cards need padding tweaks
     so titles + info bubbles don't crowd the right edge. */
  .surface-head { padding: 12px 14px; }
  .surface-body { padding: 12px 14px; }
  .surface-title h2 { font-size: 15px; }

  /* Floating action bar: drop to the very bottom edge and use the full
     available width so the destination input has room to breathe. */
  .action-bar {
    left: 0; right: 0; bottom: 0;
    transform: none;
    width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 10px 14px;
  }
  .action-bar .input-group { flex: 1 1 100%; }
  .action-row { gap: 6px; }

  /* about_monitor.html long-form doc — narrower margins, smaller hero. */
  .doc { padding: 0 16px; margin-top: 24px; }
  .doc h1 { font-size: 28px; }
  .doc .deck { font-size: 16px; }

  /* CDR call-detail modal: was steal too much horizontal real estate to
     fit inside a phone-width viewport.
       backdrop padding: 60/20 → 24/8 (more usable width, closer to viewport)
       header/body padding: 22/28 → 16/14 (recovers 28px of usable column)
       dt-pair value max-width: 280 → none + word-break (cells wrap rather
         than ellipsis-truncate into invisibility)
       transcript bubble max-width: 86% → 95% (so they don't pile up too
         narrow once the modal itself is already narrow). */
  .modal-back { padding: 24px 8px; }
  .modal-header { padding: 16px 14px 12px; }
  .modal-header h2 { font-size: 16px; }
  .modal-close { top: 10px; right: 10px; width: 32px; height: 32px; }
  .modal-body { padding: 12px 14px 20px; max-height: 80vh; }
  .detail-chips { gap: 6px; }
  .detail-tools li:not(.empty) { padding: 12px 12px 12px 38px; }
  .detail-tools li:not(.empty)::before { left: 12px; }
  .detail-tools .dt-pair .v {
    max-width: none;
    white-space: normal;
    word-break: break-all;
  }
  .detail-transcript li { max-width: 95%; }
  .detail-transcript { max-height: 280px; }
}

/* ============================================================
   Light theme — opt-in via <html data-theme="light"> (see theme.js).
   Overrides only the surface / on-surface / outline tokens; brand
   accents (primary, success, info, warn) are saturated enough to read
   on both palettes so they stay unchanged. Shadows lighten because
   dark-theme drop shadows look like black halos on a white page.
   ----------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --m-surface:           #f5f5f8;
  --m-surface-1:         #ffffff;
  --m-surface-2:         #eeeef2;
  --m-surface-3:         #e3e3ea;
  --m-surface-4:         #d6d6df;
  --m-surface-bright:    #c8c8d2;

  --m-outline:           rgba(0,0,0,0.10);
  --m-outline-strong:    rgba(0,0,0,0.20);

  --m-on-surface:        #16161a;
  --m-on-surface-2:      #44444c;
  --m-on-surface-dim:    #7a7a83;

  --m-primary-soft:      rgba(230,69,69,0.12);

  --el-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --el-2: 0 2px 6px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --el-3: 0 6px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.04);
  --el-4: 0 12px 28px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06);

  --appbar-bg: rgba(255,255,255,0.85);
  --action-bar-bg: rgba(255,255,255,0.92);
}

/* The theme-toggle button lives in the appbar nav. Inherits .nav-link
   sizing so it doesn't need its own dimensions; just swaps the icon
   based on which palette is active. */
.theme-toggle {
  background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--m-on-surface-2); font: inherit; padding: 6px 10px;
  border-radius: var(--r-pill);
}
.theme-toggle:hover { background: var(--m-surface-3); color: var(--m-on-surface); }
.theme-toggle .material-symbols-rounded { font-size: 20px; }
/* Show the dark-mode icon when light is active (clicking flips to dark)
   and the light-mode icon when dark is active. */
:root[data-theme="light"] .theme-toggle .icon-when-dark { display: none; }
:root:not([data-theme="light"]) .theme-toggle .icon-when-light { display: none; }

/* ============================================================
   Info bubble — small circular ghost "button-looking" element that
   appears next to a card title. It is intentionally a <span>, not a
   <button>, because clicking it does nothing — the value is the
   native tooltip on hover. We give it a tabindex so keyboard users
   can focus it and read the title via assistive tooling.

   Layout: sized to match an icon's intrinsic 18 px line-height; sits
   centered with the surrounding card-title text.
   ----------------------------------------------------------- */
.info-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-left: 4px;
  border: 1px solid var(--m-outline);
  border-radius: var(--r-pill);
  color: var(--m-on-surface-dim);
  background: transparent;
  cursor: help;
  transition: all .15s var(--ease-out);
  flex-shrink: 0;
}
.info-bubble:hover,
.info-bubble:focus {
  background: var(--m-surface-3);
  color: var(--m-on-surface-2);
  border-color: var(--m-outline-strong);
}
.info-bubble .material-symbols-rounded {
  font-size: 14px;
}

/* ============================================================
   Touch tooltip popover — rendered by tooltip.js on devices that lack
   hover. Positioned absolutely by JS; styles below cover the shell.
   ----------------------------------------------------------- */
.rt-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px;
  background: var(--m-surface-bright, #36363f);
  color: var(--m-on-surface);
  border: 1px solid var(--m-outline-strong);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: var(--el-3);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
  white-space: normal;
}
.rt-tooltip.rt-tooltip-visible {
  opacity: 1;
  transform: translateY(0);
}
:root[data-theme="light"] .rt-tooltip {
  background: #1f1f25;       /* dark popover even in light mode for contrast */
  color: #f1f1f4;
  border-color: rgba(0,0,0,0.18);
}

/* CDR detail section chevron — replace missing icon with unicode */
.detail-section-chevron {
  font-family: sans-serif !important;
  font-size: 14px !important;
  margin-left: auto;
  transition: transform .2s ease;
}
.detail-section-chevron::before {
  content: "";
}
details[open] > summary .detail-section-chevron {
  transform: rotate(180deg);
}