:root {
  color-scheme: dark;
  --sidebar-width: 216px;
  --sidebar-collapsed-width: 72px;
  --bg: #0f1115;
  --panel: #181b22;
  --panel-2: #1f232c;
  --border: #2a2f3a;
  --text: #e6e9ef;
  --muted: #98a2b3;
  --accent: #6c8cff;
  --accent-hover: #5a7bff;
  --danger: #ff6b6b;
  --ok: #45c98a;
  --radius: 10px;
  --header-bg: rgba(15, 17, 21, .94);
  --accent-soft: rgba(108, 140, 255, .12);
  --accent-border: rgba(108, 140, 255, .34);
  --danger-soft: #3a2a2a;
  --ok-soft: #1f3a2a;
  --direction-outbound-bg: #3a3218;
  --direction-outbound-text: #f6c343;
  --overlay: rgba(0, 0, 0, .64);
  --shadow: rgba(0, 0, 0, .22);
  --recording-bg: #111318;
  --bubble-user: #292c33;
  --subtle-border: rgba(255, 255, 255, .04);
  --inset-bg: rgba(0, 0, 0, .24);
  --inset-text: #d9e6dc;
  --tool-ok-border: #23663f;
  --tool-ok-bg: #101d17;
  --tool-error-border: #754047;
  --tool-error-bg: #211416;
  --tool-running-border: #7b6225;
  --tool-running-bg: #211d12;
  --ended-bg: #282a2e;
  --ended-border: #40444b;
  --ended-text: #c6c9cf;
  --ended-assistant-bg: #142c48;
  --ended-assistant-border: #29537b;
  --ended-assistant-text: #71b8ff;
  --ended-customer-bg: #142b2d;
  --ended-customer-border: #28565a;
  --ended-customer-text: #51ddd1;
  --ended-silence-bg: #352313;
  --ended-silence-border: #694625;
  --ended-silence-text: #ffad55;
  --ended-error-bg: #32191c;
  --ended-error-border: #754047;
  --ended-error-text: #ff7b83;
  --wave-bg: #111318;
  --wave-grid: rgba(152, 162, 179, .22);
  --wave-label: rgba(230, 233, 239, .7);
  --wave-divider: rgba(42, 47, 58, .8);
  --wave-playhead: #e6e9ef;
  --wave-timeline: rgba(152, 162, 179, .35);
  --wave-timeline-label: rgba(152, 162, 179, .85);
  --wave-caller: #f59e0b;
  --wave-assistant: #2bbbad;
  --wave-mixed: #6c8cff;
  --speaker-assistant: #2bbbad;
  --speaker-user: #f6c343;
  --tool-success-text: #45c98a;
  --tool-error-text: #ff7b83;
  --tool-running-text: #e7b955;
  --login-brand-bg:
    radial-gradient(1100px 500px at -10% -10%, rgba(108,140,255,.30), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(69,201,138,.18), transparent 55%),
    linear-gradient(160deg, #11151f 0%, #0c0e14 100%);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-2: #f0f3f8;
  --border: #d9e0ea;
  --text: #18202d;
  /* Keeps helper text above 4.5:1 on both light panel backgrounds. */
  --muted: #626c7e;
  --accent: #4969dc;
  --accent-hover: #3858c9;
  --danger: #c83e4d;
  --ok: #16815b;
  --header-bg: rgba(245, 247, 251, .94);
  --accent-soft: rgba(73, 105, 220, .10);
  --accent-border: rgba(73, 105, 220, .28);
  --danger-soft: #fdecef;
  --ok-soft: #e6f6ef;
  --direction-outbound-bg: #fff5cc;
  --direction-outbound-text: #805f00;
  --overlay: rgba(21, 29, 43, .44);
  --shadow: rgba(28, 39, 58, .12);
  --recording-bg: #f7f9fc;
  --bubble-user: #e8edfa;
  --subtle-border: rgba(24, 32, 45, .08);
  --inset-bg: #e8edf5;
  --inset-text: #263447;
  --tool-ok-border: #8bc7aa;
  --tool-ok-bg: #eef9f3;
  --tool-error-border: #e3a3aa;
  --tool-error-bg: #fdf0f1;
  --tool-running-border: #d8bc72;
  --tool-running-bg: #fff8e6;
  --ended-bg: #eef1f5;
  --ended-border: #cbd3df;
  --ended-text: #4a5567;
  --ended-assistant-bg: #e6f2ff;
  --ended-assistant-border: #9bc8f4;
  --ended-assistant-text: #1f67aa;
  --ended-customer-bg: #e5f7f5;
  --ended-customer-border: #91cec9;
  --ended-customer-text: #19756e;
  --ended-silence-bg: #fff2e2;
  --ended-silence-border: #e5bb87;
  --ended-silence-text: #9a5a19;
  --ended-error-bg: #fdecee;
  --ended-error-border: #e4a1a8;
  --ended-error-text: #b53240;
  --wave-bg: #f7f9fc;
  --wave-grid: rgba(102, 112, 133, .22);
  --wave-label: rgba(24, 32, 45, .70);
  --wave-divider: rgba(203, 211, 223, .90);
  --wave-playhead: #18202d;
  --wave-timeline: rgba(102, 112, 133, .40);
  --wave-timeline-label: rgba(71, 84, 103, .88);
  --wave-mixed: #4969dc;
  --speaker-assistant: #126e68;
  --speaker-user: #805000;
  --tool-success-text: #176847;
  --tool-error-text: #a82f3c;
  --tool-running-text: #765800;
  --login-brand-bg:
    radial-gradient(1100px 500px at -10% -10%, rgba(73,105,220,.22), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(22,129,91,.14), transparent 55%),
    linear-gradient(160deg, #f0f4ff 0%, #e9eef8 100%);
}
* { box-sizing: border-box; }
html { min-width: 0; background: var(--bg); }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-width: 0;
}
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 65px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.app-brand { color: var(--text); font-size: 18px; font-weight: 700; letter-spacing: .3px; text-decoration: none; white-space: nowrap; }
.app-header .header-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
#workspacePicker { width: auto; max-width: min(300px, 48vw); font-size: 12px; padding: 6px; }
.app-header .status { font-size: 13px; color: var(--muted); white-space: nowrap; }
.app-header .status b { color: var(--text); }
.app-header .header-link { font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.app-header .header-link:hover { color: var(--text); }
.header-link-compact { display: none; }
#tokenBtn { font-size: 12px; padding: 6px 10px; }
.layout { display: flex; align-items: flex-start; min-width: 0; }
.sidebar {
  width: var(--sidebar-width); flex-shrink: 0;
  padding: 20px 12px;
  border-right: 1px solid var(--border);
  min-height: calc(100vh - 65px);
  min-height: calc(100dvh - 65px);
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 65px;
  transition: width .18s ease, padding .18s ease;
}
.sidebar-links { display: flex; flex-direction: column; gap: 4px; }
.sidebar-toggle {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px;
  margin-top: auto; padding: 8px 12px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); text-align: left;
}
.sidebar-toggle:hover { background: var(--panel-2); color: var(--text); }
.sidebar-toggle-icon { width: 20px; flex: 0 0 20px; font-size: 18px; line-height: 1; text-align: center; }
.sidebar-toggle-label { white-space: nowrap; }
.sidebar-resizer {
  position: absolute; z-index: 2; top: 0; right: -12px; width: 24px; height: 100%;
  cursor: col-resize; touch-action: none;
}
.sidebar-resizer::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 11px; width: 2px;
  background: transparent; transition: background .15s ease;
}
.sidebar-resizer:hover::after,
.sidebar-resizer:focus::after,
html.sidebar-resizing .sidebar-resizer::after { background: var(--accent); }
.sidebar-resizer:focus { outline: 2px solid var(--accent); outline-offset: -5px; border-radius: 7px; }
html.sidebar-resizing, html.sidebar-resizing body { cursor: col-resize; user-select: none; }
html.sidebar-resizing .sidebar { transition: none; }

@media (min-width: 768px) {
  :root[data-sidebar-collapsed="true"] .sidebar {
    width: var(--sidebar-collapsed-width); padding-inline: 10px;
  }
  :root[data-sidebar-collapsed="true"] .nav-item,
  :root[data-sidebar-collapsed="true"] .sidebar-toggle { justify-content: center; padding-inline: 10px; }
  :root[data-sidebar-collapsed="true"] .nav-label,
  :root[data-sidebar-collapsed="true"] .sidebar-toggle-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  :root[data-sidebar-collapsed="true"] .nav-icon { font-size: 17px; }
  :root[data-sidebar-collapsed="true"] [data-tooltip]::after {
    content: attr(data-tooltip); position: absolute; z-index: 100; top: 50%; left: calc(100% + 14px);
    padding: 6px 9px; transform: translateY(-50%); border: 1px solid var(--border);
    border-radius: 6px; background: var(--panel); color: var(--text);
    box-shadow: 0 6px 18px var(--shadow); font-size: 12px; font-weight: 600;
    line-height: 1.2; opacity: 0; pointer-events: none; white-space: nowrap;
  }
  :root[data-sidebar-collapsed="true"] [data-tooltip]:hover::after,
  :root[data-sidebar-collapsed="true"] [data-tooltip]:focus::after { opacity: 1; }
}
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 42px; text-align: left; text-decoration: none;
  background: transparent; color: var(--muted);
  padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--panel-2); color: var(--accent); }
.nav-icon { width: 20px; flex: 0 0 20px; text-align: center; }
.nav-label { white-space: nowrap; }
.content { flex: 1; min-width: 0; }
.view { padding: 28px; }
main.view {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { margin: 0; }
.logs-stats { display: grid; grid-template-columns: repeat(3, minmax(120px, 160px)); gap: 16px; margin-bottom: 20px; }
.stat-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; min-width: 0;
}
.stat-card .v { font-size: 22px; font-weight: 700; }
.stat-card .k { font-size: 12px; color: var(--muted); margin-top: 2px; }
.logs-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); align-items: end; gap: 10px;
  padding: 14px; margin-bottom: 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.logs-filter { min-width: 0; margin: 0; }
.logs-filter-search { grid-column: span 2; }
.logs-filter span { display: block; margin-bottom: 4px; }
.logs-filter input, .logs-filter select { padding: 7px 9px; font-size: 12px; }
.logs-clear { padding: 7px 11px; margin-bottom: 1px; }
.logs-mobile-sort, .logs-mobile-order { display: none; }
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 6px; }
.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.logs-table th, .logs-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.logs-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.logs-sort {
  position: relative; background: transparent; color: inherit; border-radius: 4px;
  padding: 2px 15px 2px 0; font-size: inherit; white-space: nowrap;
}
.logs-sort:hover { color: var(--text); }
.logs-sort.active { color: var(--accent); }
.logs-sort.active::after { position: absolute; right: 1px; content: '↓'; }
.logs-sort.active.asc::after { content: '↑'; }
.logs-table td.num, .logs-table th.num { text-align: right; }
.logs-table tbody tr:hover { background: var(--panel-2); }
.logs-table .cost { font-weight: 600; }
.logs-table .model-cell { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.logs-assistant { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.logs-assistant-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.logs-assistant-link {
  position: relative; display: inline-grid; flex: 0 0 28px; width: 28px; height: 28px;
  place-items: center; border-radius: 6px; color: var(--muted); text-decoration: none;
}
.logs-assistant-link::before { content: ''; position: absolute; inset: -8px; }
.logs-assistant-link:hover { color: var(--accent); background: var(--accent-soft); }
.logs-assistant-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.logs-row-toggle {
  min-height: 0; padding: 0; border-radius: 4px; background: transparent;
  color: inherit; font-size: inherit; font-weight: inherit; text-align: left; white-space: nowrap;
}
.logs-row-toggle:hover { color: var(--accent); }
.call-id {
  display: inline-block; max-width: 140px; overflow: hidden; vertical-align: middle;
  color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; text-overflow: ellipsis; white-space: nowrap; user-select: all;
}
.voice-chip { display: inline-block; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 11px; }
.logs-empty { color: var(--muted); font-size: 13px; padding: 18px 12px; }
.logs-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 14px; color: var(--muted); font-size: 12px;
}
.logs-page-controls { display: flex; align-items: center; gap: 10px; }
.logs-page-controls button { padding: 6px 10px; }
.logs-page-controls button:disabled { cursor: default; opacity: .45; }
.logs-page-size { display: flex; align-items: center; gap: 6px; margin: 0; }
.logs-page-size select { width: auto; padding: 5px 24px 5px 7px; font-size: 12px; }
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.panel h2 { font-size: 15px; margin: 0 0 16px; }
label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px; }
input, textarea, select {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
}
textarea { resize: vertical; min-height: 64px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent); }
/* Per-field help text. This had no rule at all, so every hint rendered at the
   browser's default 16px with 16px margins -- louder than the label above it
   and the value beside it, which is what made the form look shouty. */
.hint { font-size: 12px; line-height: 1.45; color: var(--muted); margin: 5px 0 0; }
.row { display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.row > * { min-width: 0; }
/* Wraps rather than crushing: a three-across row inside a column was giving
   each field ~140px, so hint text stacked one or two words per line. The basis
   is what decides how many fit, so it is set wide enough that a half-width
   section takes two per line rather than three thin ones. */
.row > div { flex: 1 1 220px; }
.row > .voice-field { flex: 1.25 1 260px; }
/* Some rows hold bare controls rather than label+field wrappers. Without a
   basis they inherit `width: 100%` and each claims a line of its own. */
.row > input, .row > select, .row > textarea { flex: 1 1 170px; width: auto; }
.row > button { flex: 0 0 auto; }
.voice-picker-inline { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.voice-picker-inline > select, .voice-picker-inline > input { flex: 1; width: auto; min-width: 0; }
.voice-selected-preview {
  flex: 0 0 auto; min-width: 72px; padding: 8px 10px; color: var(--accent); white-space: nowrap;
}
.voice-selected-preview:hover:not(:disabled) { background: var(--accent-soft); }
.voice-selected-preview.loading { color: var(--muted); cursor: wait; }
.voice-selected-preview.playing { background: var(--accent); border-color: var(--accent); color: #fff; }
.voice-selected-preview:disabled { cursor: not-allowed; opacity: .5; }
.voice-browser {
  margin: 12px 0 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2); overflow: hidden;
}
.voice-browser summary {
  cursor: pointer; padding: 10px 12px; color: var(--text); font-size: 12px;
  font-weight: 600; user-select: none;
}
.voice-browser[open] summary { border-bottom: 1px solid var(--border); }
.voice-preview-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 7px; max-height: 310px; overflow-y: auto; padding: 9px;
}
.voice-preview-row {
  display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--border);
  border-radius: 7px; background: var(--panel); overflow: hidden;
}
.voice-preview-row.selected { border-color: var(--accent); background: var(--accent-soft); }
.voice-preview-choice {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 0; background: transparent;
  color: var(--text); text-align: left; font-weight: 500;
}
.voice-preview-choice:hover { background: var(--panel-2); }
.voice-preview-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-preview-meta {
  display: block; overflow: hidden; color: var(--muted); font-size: 10px;
  font-weight: 400; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
}
.voice-preview-play {
  flex: 0 0 74px; padding: 7px 9px; border-left: 1px solid var(--border); border-radius: 0;
  background: transparent; color: var(--accent); font-size: 11px;
}
.voice-preview-play:hover { background: var(--accent-soft); }
.voice-preview-play.loading { color: var(--muted); cursor: wait; }
.voice-preview-play.playing { background: var(--accent); color: #fff; }
button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid transparent; padding: 4px 8px; }
.btn-danger:hover { border-color: var(--danger); }
.actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; }
.list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.card .top { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.card.chk-card { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.card.chk-card input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.card .name { font-weight: 600; font-size: 14px; }
.card .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.card .prompt { font-size: 12px; color: var(--muted); margin-top: 8px; max-height: 40px; overflow: hidden; }
.card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.chip { display: inline-block; font-size: 11px; background: var(--accent-soft); color: var(--accent); padding: 2px 8px; border-radius: 999px; margin-right: 4px; }
.chip.sentiment-positive { background: var(--ok-soft); color: var(--ok); }
.chip.sentiment-negative { background: var(--danger-soft); color: var(--danger); }
.empty { color: var(--muted); font-size: 13px; padding: 14px 0; }
.editing-banner { font-size: 12px; color: var(--accent); margin-bottom: 8px; }
.hidden { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.theme-glyph { width: 16px; font-size: 17px; line-height: 1; text-align: center; }
.login-theme-toggle { position: absolute; top: 20px; right: 20px; z-index: 2; }
.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; min-height: 100vh; min-height: 100dvh; overflow-y: auto;
}
/* Left: branded marketing panel */
.login-brand {
  flex: 1.1; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 56px 32px;
  background: var(--login-brand-bg);
  border-right: 1px solid var(--border);
}
.brand-inner { max-width: 460px; margin: auto 0; }
.brand-logo { font-size: 18px; font-weight: 700; letter-spacing: .3px; margin-bottom: 40px; }
.brand-headline { font-size: 40px; line-height: 1.1; margin: 0 0 18px; font-weight: 700; letter-spacing: -0.5px; }
.brand-sub { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0 0 32px; }
.brand-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.brand-points li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text); }
.brand-points li span { font-size: 18px; }
.brand-foot { font-size: 12px; color: var(--muted); }

/* Right: sign-in card */
.login-panel { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 32px; }
.login-card { width: 360px; min-width: 0; max-width: 100%; }
.login-logo { font-size: 15px; font-weight: 700; color: var(--muted); margin-bottom: 28px; }
.login-card h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.3px; }
.login-card p { margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.login-error { color: var(--danger); font-size: 12px; min-height: 16px; margin-top: 12px; }
.login-foot { margin-top: 20px !important; font-size: 12px; }
.email-login-form { display: flex; flex-direction: column; gap: 10px; }
.email-login-form label { font-size: 13px; font-weight: 600; }
.email-login-form input { width: 100%; box-sizing: border-box; padding: 12px; }
.email-login-form button, #email-confirm-btn { width: 100%; padding: 12px 16px; font-size: 15px; }
.login-card #email-login-hint { margin: 0; font-size: 12px; }
.login-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; font-size: 12px; color: var(--muted); }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-status { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ok); overflow-wrap: anywhere; }
.login-status:empty { display: none; }
#email-cancel-btn { display: block; margin: 12px auto 0; }

.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; box-sizing: border-box;
  background: #fff; color: #1f1f1f; text-decoration: none;
  border-radius: 10px; padding: 12px 16px; font-size: 15px; font-weight: 600;
  transition: box-shadow .15s, transform .02s;
}
.google-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
.google-btn:active { transform: translateY(1px); }

@media (max-width: 820px) {
  .login-brand { display: none; }
  .login-panel { flex: 1; }
}
.user-email { font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.checks { display: flex; gap: 16px; margin-top: 4px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
/* Multi-line labels: keep the box on the first line rather than centred
   against the whole wrapped paragraph. */
.chk:has(span) { align-items: flex-start; }
.chk:has(span) input { margin-top: 2px; }
.chk input { width: auto; flex: 0 0 auto; }
.reveal {
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 8px;
  padding: 12px 14px; margin: 14px 0; font-size: 13px; word-break: break-all;
}
.reveal code { background: transparent; color: var(--accent); }
.chip.off { background: var(--danger-soft); color: var(--danger); }

/* --- master/detail Assistants view --- */
.view-md { display: grid; gap: 0; padding: 0; min-height: calc(100vh - 65px); min-height: calc(100dvh - 65px); }
main.view-md { grid-template-columns: 320px minmax(0, 1fr); max-width: none; }
.md-master { border-right: 1px solid var(--border); padding: 20px 16px; overflow-y: auto; }
.md-master-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.md-master-head h2 { margin: 0; font-size: 15px; }
.md-master-head .btn-primary { font-size: 12px; padding: 6px 10px; }
.md-list { display: flex; flex-direction: column; gap: 8px; }
.md-list .item {
  width: 100%; color: var(--text); text-align: left;
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); cursor: pointer; transition: border-color .1s;
}
.md-list .item:hover { border-color: var(--accent); }
.md-list .item.active { border-color: var(--accent); background: var(--accent-soft); }
.md-list .item .name { font-size: 14px; font-weight: 600; }
.md-list .item .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.md-list .empty { color: var(--muted); font-size: 13px; padding: 10px 0; }

/* Capped at 760px, this left a third of a 1680px window empty to the right
   while the form itself ran to five screens of scrolling. The cap is now wide
   enough to hold two columns of fields and no wider -- a single input stretched
   to 1400px is worse to read, not better. */
.md-detail { padding: 24px 32px; max-width: 1440px; container-type: inline-size; }
.md-empty { color: var(--muted); padding: 60px 0; text-align: center; }
.detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.detail-head h2 { margin: 0; font-size: 22px; }
.detail-actions { display: flex; gap: 8px; }
.detail-sep { border: none; border-top: 1px solid var(--border); margin: 28px 0 20px; }
.detail-sub { font-size: 15px; margin: 0 0 4px; }

/* --- assistant form: sectioned, and two columns when there is room --- */
/* The pipeline toggles (#cascadingFields / #realtimeOnlyFields) are wrappers
   that exist only to be shown and hidden, so they take `display: contents` and
   let their sections place themselves in the form's own grid. `.hidden` is
   `display: none !important`, so hiding still wins. */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.form-grid > #cascadingFields,
.form-grid > #realtimeOnlyFields { display: contents; }
.fset {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 18px;
  min-width: 0;
}
.fset > h3,
.fset > .detail-sub {
  margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--text);
}
.fset > h3 + .muted { margin-bottom: 10px; }
.fset > :is(h3, .detail-sub) + .hint { margin-bottom: 12px; }
/* First label in a section sits under the heading, so it does not need the
   12px of separation it uses between fields. */
.fset > label:first-of-type,
.fset > h3 + label,
.fset > h3 + .muted + label,
.fset > h3 + .row { margin-top: 6px; }
.fset > .row + .row,
.fset > .muted + .row { margin-top: 12px; }
.fset .actions { margin-top: 0; }
.fset > .list { margin-top: 10px; }
.fset > form + .list:empty { margin-top: 0; }
/* The provider tuning block is a sub-group inside the Voice section. The rule
   above it is drawn by the polish layer's sub-heading treatment, so this only
   supplies the spacing -- a border here would double it up. */
#ttsSettingsPanel { margin-top: 16px; }
#ttsSettingsPanel > .muted { margin-bottom: 4px; }
.voice-browser { margin-top: 14px; }
/* Long-form and full-bleed sections keep the whole width in either layout. */
.fset--wide { grid-column: 1 / -1; }
.fset--wide textarea { min-height: 108px; }
.form-actions { grid-column: 1 / -1; }

/* Keyed off the pane, not the window: the sidebar collapses and the master
   list resizes, so the same window width can leave very different room here.
   A browser without container queries keeps the single column, which is what
   this form did before -- degraded, not broken. */
@container (min-width: 900px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}


/* --- test modal --- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-card {
  width: 520px; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; min-height: 0;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h3 { margin: 0; font-size: 16px; }
.test-status { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.test-status.live { color: var(--ok); }
.test-status.err { color: var(--danger); }
.test-transcript {
  flex: 1; min-height: 240px; max-height: 360px; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; font-size: 13px; line-height: 1.5; margin-bottom: 12px;
}
.test-transcript .row { margin: 4px 0; }
.test-transcript .you { color: var(--accent); }
.test-transcript .bot { color: var(--text); }
.test-transcript .empty { color: var(--muted); font-style: italic; }
.test-foot { min-height: 16px; font-size: 12px; }

/* --- logs recording + transcript --- */
.logs-table tr.has-details .toggle::before { content: '▸ '; color: var(--muted); }
.logs-table tr.has-details.open .toggle::before { content: '▾ '; color: var(--accent); }
.logs-table tr.transcript-row { background: var(--panel-2); }
.logs-table tr.transcript-row td { padding: 12px 16px; }
.transcript-body { font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.call-recording {
  display: block; margin-bottom: 14px; overflow: hidden; white-space: normal;
  border: 1px solid var(--border); border-radius: 8px; background: var(--recording-bg); color: var(--text);
}
.recording-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.recording-head strong { font-size: 13px; }
.waveform-legend { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 11px; }
.waveform-legend span { display: flex; align-items: center; gap: 5px; }
.waveform-legend i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.waveform-legend .caller i { background: #f59e0b; }
.waveform-legend .assistant i { background: #2bbbad; }
.waveform-stage { position: relative; min-height: 170px; }
.waveform-canvas {
  display: block; width: 100%; height: 170px; cursor: crosshair;
  touch-action: none;
}
.waveform-canvas:focus { outline: 1px solid var(--accent); outline-offset: -2px; }
.waveform-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; pointer-events: none;
}
.recording-controls {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 11px;
}
.recording-play {
  width: 32px; height: 30px; padding: 0; border-radius: 7px;
  background: #287f77; color: #fff; font-size: 13px;
}
.recording-play:hover { background: #32988e; }
.recording-time { min-width: 88px; font-variant-numeric: tabular-nums; }
.recording-speed { display: flex; align-items: center; gap: 6px; margin: 0; }
.recording-speed select { width: auto; padding: 4px 22px 4px 7px; font-size: 11px; }
.recording-download {
  margin-left: auto; color: var(--muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px;
}
.recording-download:hover { color: var(--text); }
.recording-audio { display: none; }
.recording-audio.recording-audio-fallback { display: block; width: calc(100% - 24px); height: 32px; margin: 0 12px 10px; }
.call-transcript {
  display: flex; flex-direction: column; gap: 12px; padding: 4px 6px 8px;
  white-space: normal;
}
.transcript-turn { display: flex; flex-direction: column; max-width: min(72%, 720px); }
.transcript-turn.user { align-self: flex-end; align-items: flex-end; }
.transcript-turn.assistant { align-self: flex-start; align-items: flex-start; }
.transcript-bubble {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 12px;
  background: var(--panel); border: 1px solid var(--subtle-border); border-radius: 8px;
  color: var(--text); box-shadow: 0 1px 2px var(--shadow);
}
.transcript-turn.user .transcript-bubble { background: var(--bubble-user); }
.transcript-bubble b { color: var(--speaker-assistant); font-size: 10px; font-weight: 600; }
.transcript-turn.user .transcript-bubble b { color: var(--speaker-user); }
.transcript-bubble span { font-size: 12px; }
.transcript-time { margin-top: 3px; color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.transcript-turn[data-recording-seek] { cursor: pointer; }
.transcript-turn[data-recording-seek]:hover .transcript-bubble,
.transcript-turn[data-recording-seek]:focus .transcript-bubble { border-color: var(--accent); }
.transcript-turn[data-recording-seek]:focus { outline: none; }
.tool-timeline-entry {
  display: flex; flex-direction: column; align-self: center; align-items: center;
  width: min(100%, 680px);
}
.tool-timeline-event {
  width: min(100%, 390px); border: 1px solid var(--tool-ok-border); border-radius: 7px;
  background: var(--tool-ok-bg); color: var(--text); overflow: hidden;
  transition: width .16s ease, border-color .16s ease;
}
.tool-timeline-event[open] { width: 100%; }
.tool-timeline-event.error { border-color: var(--tool-error-border); background: var(--tool-error-bg); }
.tool-timeline-event.running { border-color: var(--tool-running-border); background: var(--tool-running-bg); }
.tool-timeline-event summary {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  cursor: pointer; list-style: none; user-select: none;
}
.tool-timeline-event summary::-webkit-details-marker { display: none; }
.tool-event-icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px;
  border-radius: 6px; background: #a96c0c; font-size: 12px;
}
.tool-event-heading { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.tool-event-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; }
.tool-event-heading small { color: var(--tool-success-text); font-size: 9px; }
.tool-timeline-event.error .tool-event-heading small { color: var(--tool-error-text); }
.tool-timeline-event.running .tool-event-heading small { color: var(--tool-running-text); }
.tool-event-duration { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.tool-event-chevron { color: var(--muted); font-size: 14px; transition: transform .16s ease; }
.tool-timeline-event[open] .tool-event-chevron { transform: rotate(180deg); }
.tool-event-details { display: grid; gap: 10px; padding: 0 11px 11px; border-top: 1px solid var(--subtle-border); }
.tool-event-details section { min-width: 0; padding-top: 10px; }
.tool-event-details b { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.tool-event-details pre {
  max-height: 280px; margin: 0; padding: 9px; overflow: auto; border-radius: 5px;
  background: var(--inset-bg); color: var(--inset-text); font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.tool-event-time { margin-top: 3px; color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.tool-event-time[data-recording-seek] { cursor: pointer; }
.tool-event-time[data-recording-seek]:hover,
.tool-event-time[data-recording-seek]:focus { color: var(--accent); outline: none; }
.ended-reason {
  display: inline-block; max-width: 145px; padding: 2px 6px; overflow: hidden;
  border: 1px solid var(--ended-border); border-radius: 999px; background: var(--ended-bg);
  color: var(--ended-text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap;
}
.ended-reason.assistant { border-color: var(--ended-assistant-border); background: var(--ended-assistant-bg); color: var(--ended-assistant-text); }
.ended-reason.customer { border-color: var(--ended-customer-border); background: var(--ended-customer-bg); color: var(--ended-customer-text); }
.ended-reason.silence { border-color: var(--ended-silence-border); background: var(--ended-silence-bg); color: var(--ended-silence-text); }
.ended-reason.error { border-color: var(--ended-error-border); background: var(--ended-error-bg); color: var(--ended-error-text); }
.transcript-body .summary { background: var(--accent-soft); border: 1px solid var(--border); padding: 12px 16px; margin-bottom: 12px; border-radius: 12px; color: var(--text); }
.transcript-body .you { color: var(--accent); }
.source-chip { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--panel-2); }
.source-chip.web { color: var(--accent); }
.source-chip.phone { color: var(--ok); }
.direction-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.direction-chip.inbound { background: var(--ok-soft); color: var(--ok); }
.direction-chip.outbound { background: var(--direction-outbound-bg); color: var(--direction-outbound-text); }
.direction-chip.web, .direction-chip.other { background: var(--accent-soft); color: var(--accent); }
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 18px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none;
  z-index: 1100; box-shadow: 0 8px 24px var(--shadow);
}
#toast.show { opacity: 1; }
#toast.err { border-color: var(--danger); color: var(--danger); }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ---------- simulations ---------- */
.sim-status {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
  font-size: 10px; white-space: nowrap;
}
.sim-status.passed { border-color: var(--tool-ok-border); background: var(--tool-ok-bg); color: var(--ok); }
.sim-status.failed,
.sim-status.error { border-color: var(--tool-error-border); background: var(--tool-error-bg); color: var(--tool-error-text); }
.sim-status.running { border-color: var(--tool-running-border); background: var(--tool-running-bg); color: var(--tool-running-text); }
.sim-error { color: var(--tool-error-text); }
.sim-run-detail {
  display: grid; gap: 12px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--subtle-border);
}
.sim-checks { width: 100%; border-collapse: collapse; font-size: 12px; }
.sim-checks th, .sim-checks td {
  padding: 6px 8px; border-bottom: 1px solid var(--subtle-border);
  text-align: left; vertical-align: top; overflow-wrap: anywhere;
}
.sim-checks th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.sim-run-controls { align-items: end; }
.sim-run-controls .actions { margin: 0 0 2px; }

/* =========================================================
   APIFleet — UI polish layer
   Built on the existing design tokens in :root

   Sits ahead of the responsive blocks below on purpose, so the
   narrow-viewport overrides still get the last word.
   ========================================================= */

:root{
  --p-radius: 10px;
  --p-radius-lg: 14px;
  --p-field-h: 38px;
  --p-ring: 0 0 0 3px var(--accent-soft);
  --p-shadow-sm: 0 1px 2px rgba(28,39,58,.06), 0 1px 1px rgba(28,39,58,.04);
  --p-shadow-md: 0 4px 16px -4px rgba(28,39,58,.14), 0 1px 3px rgba(28,39,58,.06);
  --p-hover-border: color-mix(in srgb, var(--border) 55%, var(--text));
}

/* ---------- App chrome ---------- */
/* opaque so sticky content doesn't bleed through while scrolling */
.app-header{
  background: var(--bg) !important;
  border-bottom: 1px solid var(--subtle-border);
}
.nav-item{ border-radius: var(--p-radius); transition: background .14s ease; }
.nav-item.active{
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Master list: sticky column, own scroll ---------- */
.md-master{
  position: sticky;
  top: 65px;                      /* height of .app-header */
  height: calc(100vh - 65px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--subtle-border);
  padding: 16px 14px 24px;
}
.md-master-head{
  position: sticky;
  top: -16px;
  z-index: 2;
  background: var(--bg);
  align-items: center;
  padding: 8px 2px 12px;
  margin: -8px -2px 4px;
}
.md-list .item{
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--p-radius);
  padding: 10px 12px 10px 14px;
  background: transparent;
  transition: background .14s ease, border-color .14s ease;
}
.md-list .item:hover{ background: var(--panel); border-color: var(--border); }
.md-list .item.active{
  background: var(--panel);
  border-color: var(--accent-border);
  box-shadow: var(--p-shadow-sm);
}
.md-list .item.active::before{
  content: "";
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.md-list .item .name{ font-weight: 600; letter-spacing: -.005em; }
.md-list .item .sub{ font-size: 11.5px; opacity: .85; margin-top: 2px; }

/* ---------- Detail pane ---------- */
.md-detail{
  max-width: 1080px;
  padding: 0 40px 96px;
}
.detail-head{
  position: sticky;
  top: 65px;
  z-index: 6;
  align-items: center;
  gap: 14px;
  margin: 0 -40px 20px;
  padding: 18px 40px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--subtle-border);
  box-shadow: 0 8px 12px -12px rgba(28,39,58,.5);
}
.detail-head h2{
  margin: 0;
  min-width: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.detail-actions{ flex: 0 0 auto; align-items: center; gap: 8px; }

/* ---------- Sections ---------- */
.detail-sep{ display: none; }          /* replaced by heading rules below */
/* Scoped away from the section cards: inside one, the card's own border is
   already the separator and this would draw a second line under the heading. */
.detail-sub:not(.fset > *){
  margin: 40px 0 6px;
  padding-top: 26px;
  border-top: 1px solid var(--subtle-border);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}

/* ---------- Form fields ---------- */
/* `.fset >` is paired with every `form >` selector below: the fields moved
   into section elements, so a child combinator on the form no longer reaches
   them. */
.md-detail form > label,
.md-detail .fset > label,
.md-detail .row > div > label{
  display: block;
  margin: 20px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  opacity: .82;
  letter-spacing: .005em;
}
.md-detail .row > div > label{ margin-top: 0; }

/* Provider boolean settings live inside a `.row`, whose general input rule
   otherwise stretches a checkbox to the full field width. Keep the control
   beside its label and make the whole line an obvious click target. */
.md-detail .row > div > label.tts-setting-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 13px;
  opacity: 1;
  cursor: pointer;
}
.md-detail label.tts-setting-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: 0 0 16px;
  margin: 1px 0 0;
  padding: 0;
  border-radius: 4px;
  box-shadow: none;
  accent-color: var(--accent);
}

.md-detail form > input,
.md-detail form > select,
.md-detail form > textarea,
.md-detail .fset > input,
.md-detail .fset > select,
.md-detail .fset > textarea,
.md-detail .row input,
.md-detail .row select,
.md-detail .row textarea{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--p-radius);
  background: var(--panel);
  box-shadow: var(--p-shadow-sm);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.md-detail input:not([type=checkbox]):not([type=radio]),
.md-detail select{ min-height: var(--p-field-h); padding: 8px 11px; }

.md-detail textarea{
  min-height: 132px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}
.md-detail .row textarea{ min-height: 96px; }

.md-detail input:hover:not(:disabled),
.md-detail select:hover:not(:disabled),
.md-detail textarea:hover:not(:disabled){
  border-color: var(--p-hover-border);
}
.md-detail input:focus,
.md-detail select:focus,
.md-detail textarea:focus,
.md-detail button:focus-visible{
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--p-ring);
}
.md-detail input:disabled,
.md-detail select:disabled,
.md-detail textarea:disabled{
  background: var(--panel-2);
  box-shadow: none;
  opacity: .85;
}

/* multi-select listboxes (e.g. Emotion) */
.md-detail select[multiple],
.md-detail select[size]{ min-height: 104px; padding: 6px; }
.md-detail select[multiple] option{ padding: 4px 8px; border-radius: 6px; font-size: 12.5px; }

/* helper text */
.md-detail p.muted,
.md-detail p.hint,
.md-detail .hint{
  margin: 7px 0 0;
  max-width: 68ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* inline bold sub-group headings inside the form */
/* `strong` as well as `b`, and inside a section as well as the form, because
   that is what the markup uses -- e.g. the per-provider voice settings block. */
.md-detail form > p:has(> :is(b, strong):first-child),
.md-detail .fset > p:has(> :is(b, strong):first-child){
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px dashed var(--subtle-border);
  color: var(--text);
  font-size: 12.5px;
  max-width: 78ch;
}
.md-detail b, .md-detail strong{ font-weight: 650; letter-spacing: -.005em; }

/* ---------- Field rows: responsive grid, top aligned ---------- */
/* Reconstructed from the heading -- the pasted layer was truncated here.
   Grid rather than flex so the `width: 100%` above is harmless: each control
   gets its own track instead of claiming a whole line. */
.md-detail .row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: start;
  gap: 14px 16px;
}
.md-detail .row > *{ min-width: 0; }
/* A bare button in a row is an action, not a field -- it keeps its own width. */
.md-detail .row > button{ justify-self: start; align-self: end; width: auto; }
/* Field labels drop their top margin inside a row, so help text belonging to
   whatever came before would otherwise sit flush against the next label. */
.md-detail :is(.hint, .muted) + .row,
.md-detail .row + .row{ margin-top: 18px; }
.md-detail .row > .voice-field{ grid-column: span 2; }
@container (max-width: 620px) {
  .md-detail .row > .voice-field{ grid-column: auto; }
}

/* Compact laptop and tablet navigation. */
@media (max-width: 1100px) {
  .app-header .status, .user-email { display: none; }
  main.view { grid-template-columns: 1fr; }
  main.view-md { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .md-detail { padding-inline: 24px; }
}

@media (max-width: 900px) {
  main.view-md { grid-template-columns: 1fr; }
  /* Stacked above the detail pane here, so it is a normal block again --
     a sticky full-height column would pin the list over the form. */
  .md-master {
    position: static; height: auto; max-height: 320px;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .detail-head { position: static; }
  .logs-filter-search { grid-column: span 1; }
}

/* Phone navigation and content. */
@media (max-width: 767px) {
  .app-header { min-height: 60px; padding: 9px 16px; }
  .app-brand { font-size: 16px; }
  .app-header .header-right { gap: 7px; }
  .app-header .header-link { font-size: 12px; }
  .header-link-wide { display: none; }
  .header-link-compact { display: inline; }
  .app-header .theme-label { display: none; }
  .app-header .theme-toggle { width: 40px; min-width: 40px; padding-inline: 0; }
  .layout { display: block; }
  .sidebar {
    width: 100%; min-height: 0; height: auto; padding: 8px 12px;
    border-right: 0; border-bottom: 1px solid var(--border);
    flex-direction: row; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; position: sticky; top: 60px; z-index: 40;
    background: var(--header-bg); backdrop-filter: blur(14px);
  }
  .sidebar-links { display: flex; flex: 0 0 auto; flex-direction: row; gap: 6px; }
  .sidebar-toggle, .sidebar-resizer { display: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .nav-item { justify-content: flex-start; flex: 0 0 auto; min-height: 40px; padding: 8px 11px; gap: 7px; scroll-margin-inline: 12px; }
  .nav-label { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: nowrap; }
  .nav-icon { width: auto; flex-basis: auto; font-size: 15px; }
  .view { padding: 18px 16px 28px; }
  .panel { padding: 16px; }
  .logs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .stat-card { padding: 12px; }
  .stat-card .v { font-size: clamp(18px, 5.5vw, 22px); }
  .stat-card .k { font-size: 11px; }
  .logs-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .logs-filter-search { grid-column: 1 / -1; }
  .logs-mobile-sort { display: block; }
  .logs-mobile-order { display: block; align-self: end; margin-bottom: 1px; padding: 7px 10px; }
  .logs-clear { grid-column: 1 / -1; }
  .logs-footer { align-items: flex-start; flex-direction: column; }
  .logs-page-controls { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .md-master { max-height: 280px; padding: 16px; }
  .md-detail { padding: 20px 16px 32px; max-width: none; }
  .detail-head { align-items: flex-start; gap: 12px; }
  .detail-head h2 { font-size: 20px; overflow-wrap: anywhere; }
  .detail-actions { flex-wrap: wrap; justify-content: flex-end; }
  .checks { flex-wrap: wrap; }
  .login-panel { padding: 72px 24px 32px; }
  .modal-card { padding: 18px; }
  .test-transcript { min-height: 180px; }
  .waveform-canvas { height: 145px; }
  .waveform-stage { min-height: 145px; }
  .recording-controls { flex-wrap: wrap; }
  .recording-download { margin-left: 0; }
  .transcript-turn { max-width: 90%; }
  .tool-timeline-event, .tool-timeline-event[open] { width: 100%; }
  #toast { width: calc(100% - 32px); bottom: 16px; text-align: center; }
}

@media (max-width: 620px) {
  .app-header .header-link { display: none; }
  .row { flex-direction: column; gap: 0; }
  .row > button { width: 100%; margin-top: 10px; }
  .actions { flex-wrap: wrap; }

  /* Call logs become cards instead of a horizontally scrolling wide table. */
  .table-wrap { overflow: visible; }
  .logs-table, .logs-table tbody { display: block; width: 100%; }
  .logs-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .logs-table tbody { display: grid; gap: 10px; }
  .logs-table tbody tr:not(.transcript-row) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 14px; padding: 14px;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px;
  }
  .logs-table tbody tr:not(.transcript-row):hover { background: var(--panel-2); }
  .logs-table tbody tr:not(.transcript-row) td {
    display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; text-align: left;
  }
  .logs-table tbody tr:not(.transcript-row) td::before {
    content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
  }
  .logs-table tbody tr:not(.transcript-row) td.toggle,
  .logs-table tbody tr:not(.transcript-row) td[data-label="Call ID"],
  .logs-table tbody tr:not(.transcript-row) td[data-label="Assistant"],
  .logs-table tbody tr:not(.transcript-row) td[data-label="Model"] { grid-column: 1 / -1; }
  .logs-table tr.has-details .toggle { position: relative; padding-right: 24px; }
  .logs-table tr.has-details .toggle::before { content: attr(data-label); }
  .logs-table tr.has-details .toggle::after { content: '▸'; position: absolute; top: 1px; right: 2px; color: var(--muted); font-size: 13px; }
  .logs-table tr.has-details.open .toggle::after { content: '▾'; color: var(--accent); }
  .logs-row-toggle { max-width: 100%; white-space: normal; }
  .logs-table tbody tr:not(.transcript-row) td.num { text-align: left; }
  .logs-table .model-cell { max-width: none; }
  .logs-table .call-id { max-width: 100%; overflow: visible; font-size: 10px; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
  .logs-table tr.transcript-row { display: block; margin-top: -10px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 9px 9px; overflow: hidden; }
  .logs-table tr.transcript-row.hidden { display: none; }
  .logs-table tr.transcript-row td { display: block; padding: 12px; border: 0; white-space: normal; }
  .logs-empty { display: block !important; grid-column: 1 / -1; padding: 18px !important; }
  .recording-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 360px) {
  .app-header { padding-inline: 12px; }
  .app-brand { font-size: 15px; }
  .sidebar { padding-inline: 8px; }
  .logs-filters { grid-template-columns: 1fr; }
  .logs-filter-search, .logs-clear { grid-column: auto; }
  .logs-page-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .logs-page-size, #logsPageInfo { grid-column: 1 / -1; }
}

@media (hover: none) and (pointer: coarse) {
  button, .nav-item, .header-link { min-height: 42px; }
  input, textarea, select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Cost breakdown panel. Monospace on purpose: the figures are column-aligned
   with padding, which only lines up in a fixed-width face. */
.cost-tip {
  position: fixed;
  z-index: 60;
  max-width: min(92vw, 30rem);
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .74rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  pointer-events: none;
}
.logs-table .cost { cursor: help; }
.logs-table .cost:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Shared APIFleet mark; follows each surface’s existing text color. */
.product-mark { display: inline-block; width: 1.35em; height: 1em; vertical-align: -.12em; fill: currentColor; flex: none; }