@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url('/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-display: swap; src: url('/fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('/fonts/space-grotesk-700.woff2') format('woff2'); }

:root {
  --font-display: 'Space Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bg: #ffffff;
  --sidebar: #fafafa;
  --panel: #ffffff;
  --panel-2: #f4f4f5;
  --line: #e7e7ea;
  --text: #18181b;
  --muted: #71717a;
  --accent: #2563eb;
  --accent-2: #16a34a;
  --danger: #dc2626;
  --warn: #b45309;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow: 0 4px 14px rgba(16,24,40,.08);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #111317;
  --sidebar: #0d0f12;
  --panel: #181b21;
  --panel-2: #20242b;
  --line: #2a2f37;
  --text: #e9ebef;
  --muted: #9096a0;
  --accent-2: #2ec36b;
  --warn: #d99a2b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 6px 18px rgba(0,0,0,.45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Hide the file input off-screen rather than display:none — iOS Safari won't open the
   picker when you programmatically .click() a display:none file input. */
.file-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14.5px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.muted { color: var(--muted); }
.small { font-size: 12px; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 5px; font-size: 12px; color: var(--text); }

/* topbar */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px; border-bottom: 1px solid var(--line); background: var(--bg); }
.brand { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
#brandName { background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 78%, var(--accent))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.result-head h1, .dash-h, .login-card h2, .stat-val, .donut-total { font-family: var(--font-display); }
.status { font-size: 12px; color: var(--muted); }
.status.ok { color: var(--accent-2); }
.status.bad { color: var(--danger); }

/* layout */
main { display: grid; grid-template-columns: 320px 1fr; gap: 0; height: calc(100vh - 54px); }
.panel { overflow-y: auto; padding: 20px; }
.panel.left { border-right: 1px solid var(--line); background: var(--sidebar); }

/* dropzone */
.dropzone { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 24px 16px; text-align: center; background: var(--panel); transition: border-color .15s, background .15s; }
.dropzone.drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dz-title { font-weight: 600; margin: 4px 0; }
.link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; }
.rec-row { margin-top: 14px; display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rec { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 12.5px; transition: background .12s, border-color .12s; }
.rec:hover { background: var(--panel-2); }
.rec.recording { color: #fff; background: var(--danger); border-color: var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .6; } }

/* controls */
.controls { display: grid; gap: 12px; margin: 18px 0; }
.controls label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 500; }
.controls label.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 400; }
.controls label.disabled { opacity: .5; }
.controls textarea { resize: vertical; }
select, input[type=text], input[type=search], input[type=password], textarea, .search, .rep-sel {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

/* history + search */
.search-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; }
.search { width: 100%; margin: 0; }
.search-row .search { flex: 1; }
.sem.check { font-size: 11.5px; color: var(--muted); white-space: nowrap; gap: 4px; display: flex; align-items: center; }
.history { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.history li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; background: var(--panel); transition: border-color .12s, box-shadow .12s; }
.history li:hover { border-color: color-mix(in srgb, var(--text) 20%, transparent); box-shadow: var(--shadow-sm); }
.history li.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.history .h-title { font-weight: 600; font-size: 13px; }
.history .h-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* models manager */
.models { margin: 16px 0 6px; }
.models summary { cursor: pointer; color: var(--muted); font-size: 12px; user-select: none; font-weight: 500; }
.model-list { list-style: none; padding: 10px 0 0; margin: 0; display: grid; gap: 6px; }
.model-list li { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }

/* The setup checklist. Its own layout — it used to borrow .model-list, whose
   flex + space-between (built for the model manager's name/size/button row) scattered
   each item's badge, title and fix across the width. */
.setup-list { list-style: none; padding: 12px 0 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.setup-list li { display: flex; align-items: flex-start; gap: 10px; }
.setup-list li.setup-head { display: block; margin-bottom: 2px; font-size: 13.5px; }
.setup-badge { flex: none; margin-top: 1px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; min-width: 42px; text-align: center; }
.setup-badge.ok { background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--accent-2); }
.setup-badge.check { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.setup-badge.fix { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.setup-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setup-title { font-weight: 600; font-size: 13px; line-height: 1.4; }
.setup-detail { color: var(--muted); font-size: 12px; line-height: 1.45; }
.setup-fix { color: var(--muted); font-size: 12px; line-height: 1.45; }
.setup-fix::before { content: "→ "; opacity: .6; }
.m-dl { color: var(--accent-2); font-size: 11px; font-weight: 500; }
.m-get { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 2px 9px; cursor: pointer; font-size: 11.5px; }
.m-get:hover { background: var(--panel-2); }

/* result */
.empty { display: grid; place-content: center; height: 100%; text-align: center; gap: 8px; color: var(--text); padding: 20px; }
.result { max-width: 800px; margin: 0 auto; position: relative; }
.result-head h1 { margin: 0 0 8px; font-size: 22px; font-weight: 650; letter-spacing: -.015em; }
.meta { color: var(--muted); font-size: 12px; display: flex; gap: 14px; flex-wrap: wrap; }

.card, .chapters-box, .repout { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; box-shadow: var(--shadow-sm); }
.card h2 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }
.cols h4, .byspk h4, .chapters-box h4 { margin: 0 0 7px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.cols ul { margin: 0; padding-left: 18px; }
.cols li { margin-bottom: 5px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.tag { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: var(--muted); }

/* progress + player */
.prog { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 11px 14px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.prog .bar { flex: 1; height: 5px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.prog .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .3s ease; }
.prog span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.player { width: 100%; height: 36px; margin: 6px 0 16px; }

/* buttons */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0; }
.toolbar .grow { flex: 1; }
.tb-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 1px; }
.btn { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 13px; cursor: pointer; font-size: 13px; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--text) 20%, transparent); }
.btn.danger:hover { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 500; }
.btn.accent:hover { background: color-mix(in srgb, var(--accent) 88%, black); border-color: transparent; }
.rep-sel { font-size: 12.5px; }

/* segments */
.seg-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.seg-hint { margin: 4px 0 10px; }
.segments { display: grid; gap: 1px; }
.seg { display: grid; grid-template-columns: 60px 1fr; gap: 14px; padding: 7px 10px; border-radius: 8px; transition: background .1s; }
.seg:hover { background: var(--panel-2); }
.seg.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.seg .t { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 2px; cursor: pointer; }
.seg.on .t { color: var(--accent); }
.seg .x { white-space: pre-wrap; }
.seg-text { white-space: pre-wrap; }
.seg-text.editing { outline: none; border-radius: 5px; padding: 2px 6px; background: var(--panel-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.seg-text .w { border-radius: 3px; }
.w.wordon { background: color-mix(in srgb, var(--accent) 24%, transparent); font-weight: 600; }
.seg-en { color: var(--muted); font-style: italic; margin-top: 4px; white-space: pre-wrap; }

/* speaker chips */
.spk { display: inline-block; border: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; line-height: 1.7; padding: 0 9px; border-radius: 999px; margin-right: 8px; color: #fff; vertical-align: 1px; }
.spk:hover { filter: brightness(1.08); }
.spk-0 { background: #2563eb; } .spk-1 { background: #0f766e; }
.spk-2 { background: #7c3aed; } .spk-3 { background: #c2410c; }
.spk-4 { background: #be185d; } .spk-5 { background: #0369a1; }

/* by-speaker */
.byspk { margin-top: 14px; }
.bs-row { display: flex; gap: 8px; margin-bottom: 5px; font-size: 13px; }
.bs-name { font-weight: 600; white-space: nowrap; color: var(--accent); }

/* chapters */
.chap { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; }
.chap-t { background: var(--panel-2); border: 1px solid var(--line); color: var(--accent); border-radius: 6px; padding: 1px 8px; font-size: 11.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.chap-t:hover { border-color: var(--accent); }
.chap-title { font-weight: 600; font-size: 13px; }
.chap-sum { color: var(--muted); font-size: 12.5px; }

/* repurpose */
.rep-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 13px; margin-bottom: 10px; color: var(--text); }
.rep-body { white-space: pre-wrap; word-break: break-word; font: 13px/1.6 -apple-system, "Segoe UI", sans-serif; margin: 0; max-height: 420px; overflow: auto; color: var(--text); }

/* bilingual view toggle */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.view-toggle button { background: transparent; color: var(--muted); border: none; border-left: 1px solid var(--line); padding: 5px 13px; font-size: 12px; cursor: pointer; transition: background .1s; }
.view-toggle button:first-child { border-left: none; }
.view-toggle button:hover { background: var(--panel-2); }
.view-toggle button.on { background: var(--accent); color: #fff; }

/* misc */
.warn { color: #b45309 !important; }
#engineNote { margin-top: -4px; }

/* login — a split front door: credentials left, a live auto-scrolling homepage tour
   right. Deliberately styled with explicit white/blue and Figtree (not the app's theme
   tokens), so the sign-in screen is always the branded look regardless of the app theme. */
.login-overlay { position: fixed; inset: 0; z-index: 50; display: flex; background: #fff;
  font-family: 'Figtree', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
/* While auth is still being checked the cover is a plain white splash — no form, no app. */
.login-overlay.login-checking .login-left, .login-overlay.login-checking .login-right { visibility: hidden; }
.login-left { flex: 1 1 46%; display: flex; align-items: center; justify-content: center; padding: 32px; }
.login-inner { width: 100%; max-width: 360px; }
.login-brand-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: #0c1a2e; text-decoration: none; margin-bottom: 34px; }
.login-brand-mark svg { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
/* A full wordmark logo (white-label) replaces the bar mark + name in the topbar and login. */
.brand-logo { height: 26px; width: auto; display: block; }
.login-brand-mark .brand-logo { height: 30px; }
.login-card { background: none; border: 0; border-radius: 0; padding: 0; width: auto; max-width: none; display: grid; gap: 15px; box-shadow: none; }
.login-card h2 { margin: 0; font-family: 'Figtree', sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #0c1a2e; line-height: 1.1; }
.login-sub { margin: -7px 0 6px; color: #586683; font-size: 15px; }
.login-field { display: grid; gap: 6px; }
.login-field span { font-size: 12.5px; font-weight: 600; color: #46536e; }
.login-card input { padding: 12px 13px; font-size: 14.5px; border: 1px solid #d7e0f0; border-radius: 10px; background: #fff; color: #0c1a2e; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.login-card input::placeholder { color: #9aa6bd; }
.login-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.login-card button { margin-top: 4px; background: var(--accent-fill, var(--accent)); color: var(--accent-fill-text, #fff); border: none; border-radius: 10px; padding: 12px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); transition: transform .15s, box-shadow .2s, filter .2s; }
.login-card button:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 38%, transparent); }
.login-err { color: var(--danger); font-size: 13px; margin: 2px 0 0; }
.login-foot { margin: 30px 0 0; font-size: 12.5px; color: #8a97ad; }
.login-foot a { color: var(--accent); text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }
.login-right { flex: 1 1 54%; position: relative; overflow: hidden; border-left: 1px solid #eef1f7;
  background: radial-gradient(120% 100% at 100% 0%, #e9f0ff 0%, #f5f8ff 45%, #eef3fe 100%);
  display: flex; align-items: center; justify-content: center; padding: 40px; }
.lp-browser { width: 100%; max-width: 640px; background: #fff; border: 1px solid #e3e9f4; border-radius: 16px; box-shadow: 0 40px 90px rgba(16,40,90,.22); overflow: hidden; }
.lp-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid #eef1f7; background: #fbfcfe; }
.lp-bar .lpd { width: 10px; height: 10px; border-radius: 50%; background: #dfe5f0; }
.lp-bar .lp-url { margin-left: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: #8a97ad; }
.lp-stage { position: relative; width: 100%; height: 62vh; max-height: 640px; overflow: hidden; background: #fff; }
.lp-frame { border: 0; display: block; transform-origin: top left; pointer-events: none; }
@media (max-width: 900px) {
  .login-right { display: none; }
  .login-left { flex: 1 1 100%; }
}
.brand-footer { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); }
.brand-footer:empty { display: none; }

/* logo mark + theme toggle */
.logo { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 5px; border-radius: 7px; display: inline-flex; align-items: center; transition: background .12s, color .12s; }
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; display: block; }

/* top nav (calls / dashboard) */
.nav { display: flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.nav button { background: none; border: none; color: var(--muted); cursor: pointer; padding: 5px 14px; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 500; }
.nav button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }

/* library controls */
.lib-bar { display: flex; gap: 8px; margin: 0 0 8px; }
.sort { font-size: 12.5px; padding: 6px 8px; width: 100%; }
.tag-filter { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.tag-filter:empty { display: none; }
.tagchip { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 2px 9px; font-size: 11px; cursor: pointer; }
.tagchip:hover { border-color: var(--accent); color: var(--text); }
.tagchip.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* per-call tags */
.call-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ct-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.ct-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 11.5px; }
.ct-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.ct-x:hover { color: var(--danger); }
.ct-input { background: none; border: 1px dashed var(--line); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 11.5px; color: var(--text); width: 78px; }
.ct-input:focus { outline: none; border-color: var(--accent); border-style: solid; }

/* in-call find */
.find { display: flex; align-items: center; gap: 6px; }
.find input { padding: 5px 9px; font-size: 12.5px; width: 150px; }
.find .icon-btn { padding: 3px 7px; font-size: 13px; line-height: 1; border: 1px solid var(--line); border-radius: 7px; }
.find-hit { background: color-mix(in srgb, var(--accent-2) 16%, transparent); border-radius: 4px; }
.find-current { background: color-mix(in srgb, var(--accent-2) 38%, transparent); box-shadow: 0 0 0 1px var(--accent-2); }

/* dashboard */
.dashboard { max-width: 880px; margin: 0 auto; }
.dash-h { margin: 4px 0 14px; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }
.stat-val { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.stat-key { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.dash-sec { margin-bottom: 26px; }
.dash-sec h3 { margin: 0 0 12px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.bar-row { display: grid; grid-template-columns: 1fr 110px auto; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bar-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
.activity { display: flex; align-items: flex-end; gap: 6px; height: 92px; padding-top: 8px; }
.act-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.act-col i { width: 100%; max-width: 28px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 4px; }
.act-date { font-size: 9px; color: var(--muted); white-space: nowrap; }
.recent-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 6px; cursor: pointer; background: var(--panel); transition: border-color .12s; }
.recent-row:hover { border-color: var(--accent); }
.rec-title { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* sentiment */
.sentiment { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; vertical-align: 2px; text-transform: capitalize; }
.sentiment:empty { display: none; }
.sent-pos { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.sent-neu { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.sent-neg { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.sent-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sent-dot.sent-pos { background: #16a34a; } .sent-dot.sent-neu { background: var(--muted); } .sent-dot.sent-neg { background: var(--danger); }
.bar-fill.sent-pos { background: #16a34a; } .bar-fill.sent-neu { background: var(--muted); } .bar-fill.sent-neg { background: var(--danger); }

/* talk time */
.talktime { margin-top: 12px; }
.talktime:empty { display: none; }
.talktime h4 { margin: 0 0 7px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.tt-row { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12.5px; }
.tt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-track { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.tt-fill { display: block; height: 100%; border-radius: 99px; }
.tt-fill.spk-0 { background: #2563eb; } .tt-fill.spk-1 { background: #0f766e; } .tt-fill.spk-2 { background: #7c3aed; } .tt-fill.spk-3 { background: #c2410c; } .tt-fill.spk-4 { background: #be185d; } .tt-fill.spk-5 { background: #0369a1; }
.tt-pct { color: var(--muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* dashboard controls */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-head .dash-h { margin: 0; }
.dash-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.range-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.range-toggle button { background: none; border: none; border-left: 1px solid var(--line); color: var(--muted); padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer; }
.range-toggle button:first-child { border-left: none; }
.range-toggle button.on { background: var(--accent); color: #fff; }

/* saved views */
.views { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 10px; }
.views:empty { display: none; }
.views-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.view-chip { display: inline-flex; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.view-chip.on { border-color: var(--accent); }
.view-name { background: none; border: none; color: var(--text); cursor: pointer; font: inherit; font-size: 11.5px; padding: 2px 4px 2px 10px; }
.view-chip.on .view-name { color: var(--accent); }
.view-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 7px 0 2px; line-height: 1; }
.view-x:hover { color: var(--danger); }
.tagchip.save { border-style: dashed; color: var(--accent); }

/* interactive dashboard charts */
.dash-charts { display: grid; grid-template-columns: 290px 1fr; gap: 20px; margin-bottom: 26px; }
.chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.chart-card h3 { margin: 0 0 12px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.donut-body { display: flex; align-items: center; gap: 18px; }
.donut-svg { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.donut { width: 120px; height: 120px; }
.donut-seg { transition: opacity .12s; }
.donut-seg:hover { opacity: .82; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-total { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.donut-sub { font-size: 10px; color: var(--muted); }
.sent-stroke-pos { stroke: #16a34a; } .sent-stroke-neu { stroke: var(--muted); } .sent-stroke-neg { stroke: var(--danger); }
.donut-legend { display: grid; gap: 4px; flex: 1; }
.leg-row { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text); padding: 3px 5px; border-radius: 6px; text-align: left; }
.leg-row:hover { background: var(--panel-2); }
.leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.leg-dot.sent-pos { background: #16a34a; } .leg-dot.sent-neu { background: var(--muted); } .leg-dot.sent-neg { background: var(--danger); }
.leg-key { text-transform: capitalize; flex: 1; }
.leg-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.area-chart { width: 100%; height: auto; display: block; overflow: visible; }
.area-fill { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.area-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.area-dot { fill: var(--bg); stroke: var(--accent); stroke-width: 2; transition: r .1s; }
.area-dot:hover { r: 5; }
.bar-row.clickable { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: 0 -4px 6px; }
.bar-row.clickable:hover { background: var(--panel-2); }
/* ---- sales ---------------------------------------------------------------- */
/* Intent is a number people will argue about, so it is rendered as a number with a
   band behind it rather than as a bare colour — the figure stays legible in a
   screenshot pasted into a chat, which is where these end up. */
.intent { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.intent.hot { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.intent.warm { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.intent.cool { background: var(--panel-2); color: var(--muted); }
.intent.cold { background: var(--panel-2); color: var(--muted); }
.intent.none { background: transparent; color: var(--muted); border: 1px dashed var(--line); }

.sales-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 6px; cursor: pointer; background: var(--panel); transition: border-color .12s; }
.sales-row:hover { border-color: var(--accent); }
.sales-title { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sales-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sales-amount { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.inst-table { display: grid; gap: 2px; }
.inst-row { display: grid; grid-template-columns: 90px 1fr 70px 70px 70px; gap: 8px; padding: 6px 8px; border-radius: 7px; font-size: 13px; align-items: center; }
.inst-row:not(.inst-hdr) { cursor: pointer; }
.inst-row:not(.inst-hdr):hover { background: var(--panel-2); }
.inst-row.on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.inst-hdr { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); cursor: default; }
.inst-sym { font-weight: 650; font-size: 12px; letter-spacing: .01em; }
.inst-num { font-variant-numeric: tabular-nums; text-align: right; }

.class-bars { display: flex; flex-direction: column; gap: 7px; }
.class-bar { display: grid; grid-template-columns: 76px 1fr 40px; gap: 10px; align-items: center; font-size: 12.5px; }
.class-bar .bar { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.class-bar .bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.class-bar .n { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }

.sales-note { border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px; font-size: 13px; color: var(--muted); }
.sales-note strong { color: var(--text); font-weight: 600; }
.sales-note code { font-size: 12px; background: var(--panel-2); padding: 1px 5px; border-radius: 5px; }

.sig-list { display: flex; flex-direction: column; gap: 6px; }
.sig { border-left: 3px solid var(--line); padding: 6px 0 6px 11px; font-size: 13px; }
.sig.high { border-left-color: var(--danger); }
.sig.medium { border-left-color: var(--accent); }
.sig .sig-head { font-weight: 600; }
.sig .sig-detail { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.dash-tip { position: fixed; z-index: 60; display: none; background: var(--text); color: var(--bg); font-size: 11.5px; padding: 4px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; box-shadow: var(--shadow); }
.drill-wrap { margin: 0 0 8px; }
.drill-wrap:empty { display: none; }
.dpill { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 11.5px; text-transform: capitalize; }
.dpill-x { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
@media (max-width: 900px) { .dash-charts { grid-template-columns: 1fr; } }

/* QA / compliance */
.qa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.qa-head h2 { margin: 0; font-size: 14px; }
.qa-score { font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 2px 9px; border-radius: 999px; }
.qa-score.good { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.qa-score.mid { background: color-mix(in srgb, #e3a008 18%, transparent); color: #b45309; }
.qa-score.bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.qa-flag { font-size: 11.5px; color: var(--danger); font-weight: 600; }
.qa-overall { margin: 0 0 12px; }
.qa-list { display: grid; gap: 7px; }
.qa-row { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; }
.qa-mark { font-weight: 700; text-align: center; line-height: 1.4; }
.qa-pass .qa-mark { color: #16a34a; } .qa-fail .qa-mark { color: var(--danger); } .qa-na .qa-mark { color: var(--muted); }
.qa-name { font-size: 13px; }
.qa-fail .qa-name { font-weight: 600; }
.qa-note { font-size: 12px; color: var(--muted); margin-top: 1px; }
.qa-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.qa-sev { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; }
.sev-critical { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.sev-major { background: color-mix(in srgb, #e3a008 18%, transparent); color: #b45309; }
.sev-minor { background: var(--panel-2); color: var(--muted); }
.qa-critical { background: color-mix(in srgb, var(--danger) 7%, transparent); border-radius: 7px; padding: 4px 6px; margin: 0 -6px; }
.qa-escalated { color: #fff !important; background: var(--danger); padding: 2px 9px; border-radius: 999px; }
.qa-quote { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; font-size: 12px; }
.qa-quote-time { flex-shrink: 0; font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: none; border-radius: 5px; padding: 1px 6px; cursor: pointer; }
.qa-quote-time:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.qa-quote-text { color: var(--text); font-style: italic; }
.qa-quote-unverified .qa-quote-text { color: var(--muted); }
.qa-quote-warn { color: #b45309; font-size: 11px; }
.escalated { color: var(--danger); font-weight: 600; }
.meta-flag { color: var(--danger) !important; font-weight: 600; }

/* review workflow */
.review-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.review-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.review-status { font-size: 11px; font-weight: 700; text-transform: capitalize; padding: 2px 9px; border-radius: 999px; }
.rs-pending { background: var(--panel-2); color: var(--muted); }
.rs-reviewed { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; }
.rs-escalated { background: var(--danger); color: #fff; }
.review-note { font-size: 12px; color: var(--muted); font-style: italic; }
.review-bar .btn { padding: 4px 10px; font-size: 12px; }

/* ask this call */
.ask-block h2 { margin: 0 0 9px; font-size: 14px; }
.ask-row { display: flex; gap: 8px; }
.ask-row input { flex: 1; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font: inherit; font-size: 13px; }
.ask-out { margin-top: 10px; }
.ask-qa { display: grid; gap: 6px; }
.ask-q { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ask-a { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.ask-cites { display: grid; gap: 4px; margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--line); }
.ask-cite { display: flex; align-items: baseline; gap: 7px; font-size: 12px; }
.ask-cite.unverified .qa-quote-text { color: var(--muted); }

/* coaching brief */
.agent-row.clickable { cursor: pointer; }
.agent-row.clickable:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.coach-out:empty { display: none; }
.coach-card { margin-top: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.coach-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.coach-summary { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.coach-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.coach-card h4 { margin: 0 0 5px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.coach-card ul { margin: 0 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.coach-eg { font-size: 12px; color: var(--muted); font-style: italic; margin: 1px 0 4px; }
@media (max-width: 760px) { .coach-cols { grid-template-columns: 1fr; } }

/* insights */
.ins-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ins-summary { margin: 8px 0 12px; font-size: 13.5px; line-height: 1.5; }
.ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ins-grid h4 { margin: 0 0 5px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ins-grid ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.ins-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.ins-theme { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.ins-count { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 10.5px; font-weight: 700; }
@media (max-width: 760px) { .ins-grid { grid-template-columns: 1fr; } }

/* compliance by criterion */
.crit-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) 2fr 44px 42px; gap: 10px; align-items: center; padding: 3px 0; font-size: 12.5px; }
.crit-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crit-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crit-track { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.crit-fill { display: block; height: 100%; border-radius: 99px; }
.crit-fill.good { background: #16a34a; } .crit-fill.mid { background: #e3a008; } .crit-fill.bad { background: var(--danger); }
.crit-pct { font-weight: 600; text-align: right; }

/* speaker-aware lists */
.sp-list { margin-top: 8px; }
.sp-list h4 { margin: 0 0 3px; font-size: 12px; }
.sp-list ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.sp-list.commitments h4 { color: var(--accent); }
.sp-list.objections h4 { color: #b45309; }

/* upload queue */
.upload-queue { display: grid; gap: 5px; margin: 10px 0; }
.uq-row { display: flex; align-items: center; gap: 8px; font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; }
.uq-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uq-status { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.uq-processing .uq-status { color: var(--accent); }
.uq-done .uq-status { color: var(--accent-2); }
.uq-error .uq-status { color: var(--danger); }
.uq-cancel { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 3px; }
.uq-cancel:hover { color: var(--danger); }
.uq-clear { justify-self: start; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; font-size: 11px; padding: 3px 9px; cursor: pointer; }

/* accessibility: visible keyboard focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rubric-text { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; font-size: 12px; resize: vertical; margin: 8px 0; }

/* agent leaderboard */
.agent-table { display: grid; gap: 2px; }
.agent-row { display: grid; grid-template-columns: 1.5fr .6fr .8fr .8fr .7fr; gap: 8px; padding: 6px 8px; border-radius: 7px; font-size: 13px; align-items: center; }
.agent-row:not(.agent-hdr):hover { background: var(--panel-2); }
.agent-hdr { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.agent-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-cell.good { color: #16a34a; } .qa-cell.mid { color: #b45309; } .qa-cell.bad { color: var(--danger); }
.flag-cell { color: var(--danger); font-weight: 600; }

/* print / pdf — dashboard only */
@media print {
  :root, [data-theme="dark"] { --bg: #fff; --sidebar: #fff; --panel: #fff; --panel-2: #f3f3f4; --text: #18181b; --line: #e2e2e5; --muted: #555; color-scheme: light; }
  body * { visibility: hidden; }
  #dashboard, #dashboard * { visibility: visible; }
  main { display: block; height: auto; }
  .panel.right { overflow: visible; }
  #dashboard { position: absolute; left: 0; top: 0; width: 100%; max-width: none; padding: 8px 16px; }
  .dash-ctrl { display: none !important; }
  .bar-fill, .tt-fill, .act-col i, .stat-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 760px) {
  main { grid-template-columns: 1fr; height: auto; }
  .panel { padding: 16px; }
  .panel.left { border-right: none; border-bottom: 1px solid var(--line); }
  /* The dashboard is the homepage. On a phone, show the numbers first — the upload
     panel drops below rather than burying the dashboard under a screenful of controls.
     (Sales and Compliance already hide the left panel entirely.) */
  html[data-view="dashboard"] .panel.right { order: -1; }
  html[data-view="dashboard"] .panel.left { border-bottom: none; border-top: 1px solid var(--line); }

  /* Topbar: wrap, keep the brand on one line, and let the nav scroll sideways so every
     tab stays reachable instead of being clipped off the edge. */
  .topbar { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .brand { flex: none; white-space: nowrap; }
  .nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav button, .nav .nav-link { white-space: nowrap; flex: none; }
  .topbar-right { gap: 10px; }
  #asrStatus, #llmStatus, #modelTag { display: none; }  /* status text is desktop chrome; the icons stay */
}
@media (max-width: 420px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .inst-row { grid-template-columns: 64px 1fr 38px 44px 44px; gap: 6px; font-size: 12px; }
  .agent-row { grid-template-columns: 1.4fr .6fr .8fr .8fr .7fr; gap: 6px; font-size: 12px; }
}

/* ---- hardening build-out: redaction · confidence · bulk · observability ---- */
.history li { display: flex; gap: 9px; align-items: flex-start; }
.history li .h-main { flex: 1; min-width: 0; }
.h-check { margin-top: 3px; flex: none; cursor: pointer; accent-color: var(--accent); }
.history li.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }

.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; padding: 8px 10px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 9px; }
.bulk-n { font-size: 12px; font-weight: 600; color: var(--text); margin-right: 4px; }
.bulk-btn { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.bulk-btn:hover { background: var(--panel-2); }
.bulk-btn:disabled { opacity: .5; cursor: default; }
.bulk-btn.danger:hover { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

.meta-conf { color: var(--accent-2); font-weight: 600; }
.conf-low-meta { color: #d97706 !important; }
.meta-redact { color: var(--accent); font-weight: 600; }
.redacted-text { background: color-mix(in srgb, #d97706 14%, transparent); border-radius: 4px; padding: 0 3px; }

.sys-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.sys-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; text-align: center; }
.sys-v { font-size: 18px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sys-k { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Docs link in the top nav — a real anchor rather than a view button, so it styles
   like the buttons beside it without inheriting their active/toggle behaviour. */
.nav a.nav-link {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 8px;
  color: inherit; text-decoration: none; font: inherit;
  border: 1px solid transparent;
}
.nav a.nav-link:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }


/* Audio format chip. `narrow` marks sub-16 kHz telephony, which caps achievable
   accuracy — worth showing plainly rather than leaving people to blame the model. */
.meta-audio { color: var(--muted); }
.meta-audio.narrow { color: #b45309; background: color-mix(in srgb, #b45309 10%, transparent);
  border-radius: 5px; padding: 1px 6px; }
[data-theme="dark"] .meta-audio.narrow { color: #e0a33a; background: color-mix(in srgb, #e0a33a 14%, transparent); }

/* A segment the recogniser was unsure of. Deliberately understated — a marker, not an
   alarm: plenty of lines in poor telephony audio are weak, and a page of red would be
   ignored within a minute. The left rule is the signal; the tint just supports it. */
.seg.seg-low { border-left: 2px solid #d19a3a; padding-left: 8px; margin-left: -10px;
  background: color-mix(in srgb, #d19a3a 5%, transparent); border-radius: 0 6px 6px 0; }
.seg.seg-low .seg-text { color: color-mix(in srgb, var(--text) 78%, var(--muted)); }
[data-theme="dark"] .seg.seg-low { background: color-mix(in srgb, #d19a3a 9%, transparent); }

/* ── product profile ─────────────────────────────────────────────────────────
   'personal' is a transcription tool; 'qa' is the call-review console. The QA
   chrome is hidden rather than deleted — one env var (SR_PROFILE) switches the
   whole console back on. */
html[data-profile="personal"] .qa-only { display: none !important; }

/* ── live transcript during a job ────────────────────────────────────────────
   Muted on purpose: this is provisional text being decoded, not the result. */
.live-text {
  max-height: 8.5em;
  overflow-y: auto;
  margin: .5rem 0 .75rem;
  padding: .55rem .7rem;
  border-left: 2px solid var(--line, #d8dee4);
  background: var(--panel-2, rgba(127, 127, 127, .06));
  border-radius: 4px;
  font-size: .88rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ── where your data goes ────────────────────────────────────────────────── */
.egress { margin-top: .9rem; text-align: left; }
.egress-title { font-weight: 600; margin: 0 0 .4rem; }
.egress-list { display: grid; grid-template-columns: auto 1fr; gap: .18rem .7rem; margin: 0 0 .5rem; }
.egress-list dt { font-weight: 600; opacity: .8; }
.egress-list dd { margin: 0; }
.egress-note { margin: 0; opacity: .75; }

/* ── save confirmation on an inline edit ─────────────────────────────────────
   A save that changes nothing visible is indistinguishable from one that failed. */
.seg-text.save-ok  { animation: sr-save-ok 1.6s ease-out; }
.seg-text.save-bad { animation: sr-save-bad 1.6s ease-out; }
@keyframes sr-save-ok  { 0%, 55% { background: rgba(22, 163, 74, .22); } 100% { background: transparent; } }
@keyframes sr-save-bad { 0%, 55% { background: rgba(220, 38, 38, .22); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .seg-text.save-ok, .seg-text.save-bad { animation: none; }
  .seg-text.save-bad { outline: 2px solid rgba(220, 38, 38, .5); }
}

/* ── model sizes in the manager ──────────────────────────────────────────── */
.m-size { opacity: .6; font-size: .82rem; margin-left: .45rem; font-variant-numeric: tabular-nums; }

/* ── read-only demo ──────────────────────────────────────────────────────────
   Hide the controls that cannot work rather than letting a visitor click them
   and collect a 403. The server refuses regardless — this is the courtesy half. */
html[data-readonly="1"] .dropzone,
html[data-readonly="1"] #delBtn,
html[data-readonly="1"] #redactBtn,
html[data-readonly="1"] #reanalyzeBtn,
html[data-readonly="1"] #qaBtn,
html[data-readonly="1"] #translateBtn,
html[data-readonly="1"] .bulk-bar,
html[data-readonly="1"] .models { display: none !important; }

/* ── roles ───────────────────────────────────────────────────────────────────
   admin-only chrome hides for everyone else; a viewer also loses the mutating
   controls (the server refuses regardless — this is the courtesy half, same
   pattern as read-only mode). No data-role set = auth off = the open tool. */
html[data-role="reviewer"] .admin-only,
html[data-role="viewer"] .admin-only { display: none !important; }
html[data-role="viewer"] .dropzone,
html[data-role="viewer"] #delBtn,
html[data-role="viewer"] #redactBtn,
html[data-role="viewer"] #reanalyzeBtn,
html[data-role="viewer"] #qaBtn,
html[data-role="viewer"] #translateBtn,
html[data-role="viewer"] .bulk-bar,
html[data-role="viewer"] .models { display: none !important; }
html[data-role="reviewer"] #delBtn { display: none !important; }
/* Delete is admin-only on the single call, so it must be admin-only in bulk too —
   the bulk bar was hidden for viewers only, leaving reviewers a button the server
   refuses. */
html[data-role="reviewer"] .bulk-danger { display: none !important; }

.user-chip {
  font-size: .78rem; opacity: .75; white-space: nowrap;
  padding: .15rem .5rem; border: 1px solid var(--line, #d8dee4); border-radius: 999px;
}
/* A row on desktop, stacked on narrow screens. Left unconstrained, the fields spanned
   the full console width, which reads as a broken layout rather than a form. */
.user-add {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  margin-top: .6rem; max-width: 46rem;
}
.user-add input { font: inherit; padding: .38rem .55rem; flex: 1 1 11rem; min-width: 0; }
.user-add select { font: inherit; padding: .38rem .55rem; flex: 0 1 16rem; }
.user-add button { flex: 0 0 auto; }
.user-add .login-err { flex: 1 0 100%; margin: 0; }
@media (max-width: 620px) { .user-add > * { flex: 1 1 100%; } }
/* Per-row change-password field: wrap it onto its own line under the account. */
#userList li { flex-wrap: wrap; row-gap: 8px; }
.user-pw { display: flex; gap: 6px; flex: 1 0 100%; }
.user-pw input { flex: 1 1 auto; min-width: 0; font: inherit; padding: .38rem .55rem; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); }
.user-pw button { flex: 0 0 auto; }

/* ── admin console ───────────────────────────────────────────────────────────
   The audit trail needs a reader: "we record every change" is worth little to a
   compliance buyer if seeing it means curl. */
.admin-block { margin-bottom: 2rem; }
.admin-block h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.admin-block > p { margin: 0 0 .75rem; max-width: 62ch; }

.audit-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.audit-controls .search { flex: 1 1 12rem; min-width: 0; }
.audit-controls a.m-get { text-decoration: none; display: inline-block; }

/* The table is wide and must scroll in its own box — never the page body. */
.audit-wrap { overflow-x: auto; border: 1px solid var(--line, #d8dee4); border-radius: 6px; }
.audit-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.audit-table th, .audit-table td {
  text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line, #d8dee4);
  white-space: nowrap;
}
.audit-table th { font-weight: 600; position: sticky; top: 0; background: var(--panel, #fff); }
.audit-table tr:last-child td { border-bottom: 0; }
.audit-ts { font-variant-numeric: tabular-nums; opacity: .75; }
.audit-path, .audit-detail { font-family: ui-monospace, Consolas, monospace; font-size: .95em; }
.audit-detail { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; }
/* A refused action and an abandoned one are the rows an auditor is looking for. */
.audit-bad td { background: rgba(220, 38, 38, .07); }
.audit-aborted td { background: rgba(217, 119, 6, .10); }

/* ── first-run nudge off the shared password ─────────────────────────────── */
.nudge {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
  padding: .6rem .85rem; margin: 0 0 .9rem;
  border: 1px solid var(--line, #d8dee4); border-left: 3px solid var(--accent, #2563eb);
  border-radius: 5px; background: var(--panel-2, rgba(127, 127, 127, .06));
  font-size: .88rem;
}
.link-btn {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent, #2563eb); text-decoration: underline;
}
.link-btn:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }

/* The admin console takes the full width: the call library and the upload controls are
   irrelevant to managing accounts, and the audit table needs the room. */
/* The upload controls have nothing to do with reading the pipeline or managing
   accounts, and both of those views want the width for their tables. */
html[data-view="admin"] main,
html[data-view="sales"] main,
html[data-view="compliance"] main { grid-template-columns: 1fr; }
html[data-view="admin"] .panel.left,
html[data-view="sales"] .panel.left,
html[data-view="compliance"] .panel.left { display: none; }

/* A QA verdict that did not read the whole call must say so next to the score. */
.qa-partial { background: rgba(217, 119, 6, .14); color: var(--warn, #b45309); }

/* The library is paged; say so rather than truncating in silence. */
.history-more { display: flex; align-items: center; gap: .6rem; padding: .5rem 0 .2rem; }

/* ── QA adjudication ─────────────────────────────────────────────────────────
   The reviewer's verdict is the record; the model's is shown beside it so the
   disagreement stays visible rather than being quietly replaced. */
.qa-adjudicate { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.qa-vbtn {
  font: inherit; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .1rem .45rem; border: 1px solid var(--line, #d8dee4); border-radius: 3px;
  background: transparent; color: var(--muted, #667); cursor: pointer;
}
.qa-vbtn:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.qa-vbtn.on { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; }
.qa-vbtn:disabled { opacity: .55; cursor: default; }
.qa-vbtn:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }
.qa-adj {
  margin-top: .3rem; font-size: .8rem; color: #92400e;
  background: rgba(217, 119, 6, .10); padding: .25rem .45rem; border-radius: 3px;
}
.qa-adj-why { font-style: italic; }
.qa-adj-stale { font-weight: 600; }

/* API key issued once, shown once. Deliberately loud: the value cannot be recovered. */
.key-new{margin-top:10px;padding:10px 12px;border:1px solid var(--accent,#2563eb);border-radius:6px}
.key-val{display:block;margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85rem;word-break:break-all;user-select:all}
.key-revoked{opacity:.55;text-decoration:line-through}

/* ---- compliance phrase panel ------------------------------------------------ */
.compliance-card { border-left: 3px solid var(--warn); }
.compliance-card.has-critical { border-left-color: var(--danger); }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.card-head h4 { margin: 0; font-size: 14px; font-weight: 600; }
.lex-count { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 2px 8px; }
.lex-count.critical { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.lex-hit { padding: 9px 0; border-top: 1px solid var(--line); }
.lex-hit:first-of-type { border-top: none; }
.lex-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lex-badge { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.lex-badge.sev-critical { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.lex-badge.sev-major { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.lex-badge.sev-minor { background: var(--panel-2); color: var(--muted); }
.lex-cat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lex-label { font-size: 13px; font-weight: 550; }
.lex-terms { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.lex-term { font-size: 11.5px; font-family: var(--font-mono, ui-monospace, monospace); background: var(--panel-2); border-radius: 5px; padding: 1px 6px; }
.lex-snippet { font-size: 12px; margin-top: 5px; font-style: italic; line-height: 1.45; }

/* ---- compliance watchlist editor (admin) ------------------------------------ */
.lex-admin { list-style: none; padding: 10px 0 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lex-admin-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.lex-admin-main { flex: 1; min-width: 0; }
.lex-admin-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lex-del { flex: none; background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.lex-del:hover { color: var(--danger); }
.lex-admin-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.btn-secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.btn-secondary:hover { border-color: var(--danger); color: var(--danger); }

/* ---- conversation metrics (call view) --------------------------------------- */
.conv-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.conv-chip { display: flex; flex-direction: column; gap: 1px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-width: 68px; }
.conv-v { font-size: 15px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.conv-k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.conv-flag { font-size: 12px; color: var(--warn); margin-top: 8px; }
.conv-flag::before { content: "⚑ "; }

/* ---- call signal strip ------------------------------------------------------- */
.signal-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 14px; }
.sig { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--text); white-space: nowrap; }
.sig.qa.good { background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--accent-2); }
.sig.qa.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.sig.qa.bad, .sig.sig-lex.critical, .sig.sig-esc { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.sig.sig-lex { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.sig.sig-intent.hot { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.sig.sig-intent.warm { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.sig.sig-intent.cool, .sig.sig-intent.cold, .sig.sig-dep { background: var(--panel-2); color: var(--muted); }
.sig.sig-wd, .sig.sig-lowconf { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.sig.sig-sent.pos { background: color-mix(in srgb, var(--accent-2) 15%, transparent); color: var(--accent-2); }
.sig.sig-sent.neg { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.sig.sig-sent.neu { background: var(--panel-2); color: var(--muted); }

/* ---- sparklines -------------------------------------------------------------- */
.spark { width: 100%; height: 26px; margin-top: 8px; display: block; overflow: visible; }
.spark-fill { opacity: .1; }
.stat-card .spark { height: 24px; }

/* ---- agent scorecard modal -------------------------------------------------- */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(16,24,40,.55); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.modal-card { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; width: 720px; max-width: 96vw; padding: 26px 28px; box-shadow: 0 24px 60px rgba(16,24,40,.28); position: relative; }
.modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
.modal-close:hover { color: var(--text); }
.score-warn { margin: 6px 0 16px; font-size: 13px; color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); border-radius: 8px; padding: 8px 12px; }
.score-h3 { margin: 20px 0 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.score-trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.score-trend { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.score-trend-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.score-trend-label { font-size: 12px; color: var(--muted); }
.score-trend-val { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.score-foot { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.score-coach { margin-top: 14px; white-space: pre-wrap; line-height: 1.5; }
.score-coach:not(.muted) { color: var(--text); }

/* ---- compliance marker on a sales/pipeline row ------------------------------ */
.row-risk { margin-right: 6px; }
.row-risk.crit { filter: none; }

/* ---- read-only demo: hide every control that would spend on the operator's account -- */
html[data-readonly] .gen-btn,
html[data-readonly] #askBlock,
html[data-readonly] #reanalyzeBtn { display: none !important; }

/* ---- shared date-range control ---------------------------------------------- */
.range-ctrl { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.range-toggle .range-cust { border-left: 1px solid var(--line); }
.range-toggle .range-cust.on { background: var(--accent); color: #fff; }
.range-dates { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.range-dates input[type="date"] { font: inherit; font-size: 12px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); color-scheme: light dark; }

/* ---- dashboard empty state (fresh instance / homepage) --------------------- */
.dash-blank { border: 1px dashed var(--line); border-radius: var(--radius); padding: 40px 28px; text-align: center; margin-top: 8px; }
.dash-blank-t { font-size: 18px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 6px; }
.dash-blank .muted { max-width: 42ch; margin: 0 auto; }

/* ---- CRM CSV import (admin) ------------------------------------------------- */
.crm-import { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.crm-csv { width: 100%; min-height: 90px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text); resize: vertical; }

/* ---- view loading state ----------------------------------------------------- */
.view-loading { padding: 40px 24px; font-size: 14px; }

/* ---- nav grouping + collapsible cards + dashboard semantics ----------------- */
.nav-div { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--line); flex: none; }
.card-head-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.card-chev { margin-left: auto; color: var(--muted); font-size: 12px; transition: transform .12s; }
.card.collapsed > :not(:first-child) { display: none !important; }
.stat-val.good { color: var(--accent-2); }
.stat-val.warn { color: var(--warn); }
.stat-val.bad { color: var(--danger); }