/* Apex Omi operator console.
   Every dynamic value arrives as a CSS custom property (--pct, --level,
   --speaker-color) so generated markup never needs a style attribute. */

/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#0d1117;--surface:#151d2b;--card:#17202e;--raise:#1c2636;
  --subtle:rgba(255,255,255,.035);--border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.16);
  --text:#ecf3ff;--muted:#9fb0c6;
  --accent:#14b8a6;--accent2:#0d9488;--accent-ink:#041411;
  --ok:#34d399;--warn:#fbbf24;--danger:#f87171;--info:#60a5fa;--live:#fb7185;
  --radius:14px;--radius-sm:10px;--radius-pill:999px;
  --shadow:0 18px 44px rgba(0,0,0,.28);--shadow-sm:0 8px 24px rgba(0,0,0,.14);
  --gap:16px;
  font-family:"Space Grotesk",Inter,ui-sans-serif,system-ui,sans-serif;
  color-scheme:dark;
}
body.light{
  --bg:#eef5f3;--surface:#fff;--card:#fff;--raise:#f5f8f8;
  --subtle:rgba(15,23,42,.04);--border:rgba(15,23,42,.12);--border-strong:rgba(15,23,42,.24);
  --text:#0f172a;--muted:#4a586b;
  --accent:#0d9488;--accent2:#0f766e;--accent-ink:#f0fdfa;
  --ok:#15803d;--warn:#b45309;--danger:#b91c1c;--info:#1d4ed8;--live:#be123c;
  --shadow:0 14px 35px rgba(15,23,42,.09);--shadow-sm:0 6px 18px rgba(15,23,42,.07);
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{letter-spacing:-.02em}
p{text-wrap:pretty}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;word-break:break-all}
.muted{color:var(--muted)}

/* ------------------------------------------------------------ a11y basics */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:60;padding:10px 14px;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink);font-weight:800;text-decoration:none;transition:top .15s}
.skip-link:focus{top:12px}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.panel-icon{width:20px;height:20px;color:var(--muted)}
.state-icon{width:26px;height:26px}

/* ---------------------------------------------------------------- topbar */
.topbar{position:sticky;top:0;z-index:20;height:64px;display:flex;align-items:center;gap:16px;padding:0 20px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:baseline;gap:7px;font-weight:900;letter-spacing:.08em}
.brand strong{font-family:Orbitron,ui-sans-serif;font-size:1.1rem}
.brand span{font-size:.72rem;color:var(--accent);letter-spacing:.18em}
.topbar-health{display:flex;align-items:center;gap:9px;margin-right:auto;color:var(--muted);font-size:.88rem}
.topbar-actions{display:flex;align-items:center;gap:10px}
.topbar-actions form{display:inline}
.who{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--muted);font-size:.85rem}
.system-dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.system-dot[data-tone="ok"]{background:var(--ok);box-shadow:0 0 12px color-mix(in srgb,var(--ok) 60%,transparent)}
.system-dot[data-tone="warn"]{background:var(--warn);box-shadow:0 0 12px color-mix(in srgb,var(--warn) 60%,transparent)}
.system-dot[data-tone="danger"]{background:var(--danger);box-shadow:0 0 12px color-mix(in srgb,var(--danger) 60%,transparent)}
.icon-dark{display:none}
body.light .icon-dark{display:block}
body.light .icon-light{display:none}

/* ------------------------------------------------------------------ rail */
.shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:calc(100vh - 64px)}
.rail{position:sticky;top:64px;height:calc(100vh - 64px);padding:16px 12px;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.rail-tabs{display:flex;flex-direction:column;gap:6px}
.nav{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;border:1px solid transparent;border-radius:11px;padding:10px 13px;background:transparent;color:var(--muted);font-weight:650;text-align:left;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.nav:hover{background:var(--subtle);border-color:var(--border);color:var(--text)}
.nav.active{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--text);box-shadow:inset 3px 0 var(--accent)}
.nav.active .icon{color:var(--accent)}
.rail-foot{margin:0;padding:10px 6px 0;border-top:1px solid var(--border)}
.rail-capture{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.8rem}
.rail-capture[data-tone="ok"]{color:var(--ok)}
.rail-capture[data-tone="live"]{color:var(--live)}
.rail-capture[data-tone="danger"]{color:var(--danger)}

/* ------------------------------------------------------------- workspace */
.workspace{padding:24px;min-width:0}
.view{display:none;max-width:1500px;margin:auto}
.view.active{display:block}
.view:focus{outline:none}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:20px}
.page-head h1{font-size:clamp(1.7rem,2.6vw,2.5rem);margin:4px 0 8px;letter-spacing:-.035em;text-wrap:balance}
.page-head>div>p{margin:0;color:var(--muted);max-width:64ch}
.page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eyebrow{margin:0 0 5px;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.stamp{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.result-line{margin:0;color:var(--muted);font-size:.86rem}

/* --------------------------------------------------------------- surfaces */
.panel,.metric,.recording-note,.searchbar,.card-list>article,.feed-card,.mini-row{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm)}
.panel{padding:20px}
.panel h2{margin:2px 0 12px;font-size:1.15rem}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}
.panel-head h2{margin:0}
.panel-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grid.two{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.7fr);gap:var(--gap);align-items:start}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.stack,.card-list,.mini-list{display:grid;gap:10px}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.recording-note{display:flex;align-items:flex-start;gap:11px;padding:12px 16px;margin:0 0 16px;color:var(--muted);border-color:color-mix(in srgb,var(--accent) 27%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--card))}
.recording-note .icon{color:var(--accent);margin-top:2px}
.recording-note strong{color:var(--text)}

/* --------------------------------------------------------------- metrics */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 16px}
.metric{display:flex;flex-direction:column;gap:2px;padding:16px 18px;text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.metric:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));transform:translateY(-2px)}
.metric-top{display:flex;align-items:center;gap:8px;color:var(--muted)}
.metric small{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.metric strong{font-size:2.1rem;line-height:1.2;font-variant-numeric:tabular-nums}
.metric-sub{color:var(--muted);font-size:.83rem}

/* ---------------------------------------------------------------- states */
[data-state="loading"]{position:relative}
.skeleton{display:grid;gap:8px;margin:0;padding:16px;border:1px solid var(--border);border-radius:var(--radius)}
.skeleton span{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,var(--subtle),var(--border),var(--subtle));background-size:220% 100%;animation:shimmer 1.4s infinite linear}
.skeleton span:first-child{width:38%}
.skeleton span:last-child{width:82%}
.state-block{display:grid;justify-items:start;gap:8px;padding:22px;border:1px dashed var(--border-strong);border-radius:var(--radius);color:var(--muted)}
.state-block[data-tone="danger"]{border-color:color-mix(in srgb,var(--danger) 45%,var(--border));background:color-mix(in srgb,var(--danger) 7%,transparent)}
.state-block[data-tone="danger"] .state-icon{color:var(--danger)}
.state-title{margin:0;color:var(--text);font-weight:700}
.state-detail{margin:0;max-width:62ch}
.state-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
[data-state="error"]{border-radius:var(--radius)}
.empty{color:var(--muted)}
.inline-alert{display:block;margin:0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--danger) 45%,var(--border));border-radius:var(--radius-sm);background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);font-size:.88rem}

/* --------------------------------------------------------------- controls */
button,a.button-link,input,select,textarea{min-height:44px}
.record-btn,.primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--accent2);border-radius:11px;padding:9px 15px;background:var(--accent);color:var(--accent-ink);font-weight:800;cursor:pointer;text-decoration:none;transition:background-color .15s,box-shadow .15s,transform .15s}
.record-btn:hover,.primary:hover{background:color-mix(in srgb,var(--accent) 82%,#fff);box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 22%,transparent)}
.record-btn:active,.primary:active{transform:scale(.97)}
.primary:disabled,.quiet:disabled{opacity:.55;cursor:not-allowed}
.record-dot{width:9px;height:9px;border-radius:50%;background:currentColor}
.record-btn.armed{background:var(--live);border-color:var(--live);color:#fff}
.record-btn.armed .record-dot{animation:pulse 1.6s infinite}
.quiet,.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:var(--subtle);color:var(--text);cursor:pointer;transition:border-color .15s,background-color .15s}
.quiet:hover,.icon-btn:hover{border-color:var(--border-strong);background:var(--raise)}
.danger{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid color-mix(in srgb,var(--danger) 60%,var(--border));border-radius:var(--radius-sm);padding:8px 12px;background:color-mix(in srgb,var(--danger) 14%,var(--card));color:var(--danger);font-weight:750;cursor:pointer;transition:background-color .15s,border-color .15s,transform .15s}
.danger:hover{background:color-mix(in srgb,var(--danger) 22%,var(--card));border-color:var(--danger)}
.danger:active{transform:scale(.96)}
.danger:disabled{opacity:.48;cursor:not-allowed;transform:none}
.icon-btn{width:44px;padding:0}
a.button-link.disabled{opacity:.5;cursor:not-allowed}
.link{border:0;padding:0;background:none;color:var(--accent);font-weight:650;cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 13px;background:var(--subtle);color:var(--muted);font-size:.85rem;font-weight:650;cursor:pointer}
.chip:hover{border-color:var(--border-strong);color:var(--text)}
.chip.active{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--text)}
.chip-count{padding:1px 7px;border-radius:var(--radius-pill);background:var(--subtle);color:var(--muted);font-size:.74rem;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-pill);background:var(--subtle);color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.pill[data-tone="ok"]{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.pill[data-tone="warn"]{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.pill[data-tone="danger"]{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.pill[data-tone="info"]{background:color-mix(in srgb,var(--info) 16%,transparent);color:var(--info)}
.pill[data-tone="live"]{background:color-mix(in srgb,var(--live) 18%,transparent);color:var(--live)}
.tag{display:inline-flex;padding:3px 9px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:.72rem;font-weight:800}
.meta-item{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:.8rem}
.meta-item .icon{width:14px;height:14px}
dl{display:grid;gap:0;margin:0}
dl>div{display:flex;justify-content:space-between;gap:15px;padding:9px 0;border-top:1px solid var(--border)}
dt{color:var(--muted)}
dd{margin:0;font-weight:650;text-align:right}
dd[data-tone="ok"]{color:var(--ok)}
dd[data-tone="warn"]{color:var(--warn)}
dd[data-tone="danger"]{color:var(--danger)}
.contract dd{text-align:right;font-weight:500;color:var(--muted)}
.steps{margin:0;padding-left:20px;color:var(--muted);display:grid;gap:6px}
.group-head{display:flex;align-items:center;gap:9px;margin:14px 0 8px;font-size:.86rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ------------------------------------------------------------------ forms */
input,textarea,select{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--subtle);padding:10px 12px;outline:none}
input[type=color]{padding:4px;height:44px}
textarea{resize:vertical;min-height:80px}
label{display:grid;gap:5px;color:var(--muted);font-size:.85rem}
.field{display:grid;gap:6px;align-content:start}
.field label{font-weight:650}
.field .hint,.hint{margin:0;color:var(--muted);font-size:.78rem}
.hint[data-tone="ok"]{color:var(--ok)}
.hint[data-tone="warn"]{color:var(--warn)}
.record-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}
.record-form .wide{grid-column:1/-1}
.record-form .narrow{max-width:180px}
.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px}
.inline-field{display:inline-grid;gap:5px;color:var(--muted);font-size:.82rem}
.inline-field select{min-width:200px}
.switch{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem}
.switch input{width:18px;height:18px;min-height:18px;accent-color:var(--accent)}
.input-icon{position:relative;display:block;flex:1}
.input-icon .icon{position:absolute;left:12px;top:50%;margin-top:-9px;color:var(--muted);pointer-events:none}
.input-icon input{padding-left:38px}
.input-affix{display:flex;gap:8px}
.searchbar{display:flex;gap:10px;padding:10px;margin-bottom:12px}
#panel-webhooks form{display:grid;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
#panel-webhooks .form-actions{justify-content:flex-start}

/* ------------------------------------------------------- capture panel */
.meter{height:96px;display:flex;align-items:end;border-radius:12px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 9%,transparent));overflow:hidden}
.meter i{display:block;width:100%;height:var(--level,3%);background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#fff));transition:height .08s linear}
.capture-panel p{margin:12px 0}
.capture-panel dl{margin-top:6px}

/* ------------------------------------------------------------ feed cards */
.feed-card{padding:0;overflow:hidden}
.feed-open{display:grid;gap:7px;width:100%;padding:15px 16px;border:0;background:none;text-align:left;cursor:pointer}
.feed-open:hover{background:var(--subtle)}
.feed-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.feed-title{font-size:1.02rem;font-weight:700}
.feed-preview{color:var(--muted);line-height:1.5}
.feed-meta{display:flex;gap:14px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--border)}

/* --------------------------------------------------------- memory cards */
.memory-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.memory-stat{display:grid;gap:3px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--card)),var(--card));box-shadow:var(--shadow-sm)}
.memory-stat small{color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.memory-stat strong{font-size:1.65rem;font-variant-numeric:tabular-nums}
.memory-stat span{color:var(--muted);font-size:.76rem}
.memory-workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:var(--gap);align-items:start}
.memory-library{min-width:0}
.memory-toolbar{justify-content:space-between;align-items:end}
.memory-view-controls{display:flex;align-items:end;gap:10px;margin-left:auto}
.memory-view-controls .inline-field select{min-width:145px}
.memory-selection-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 5%,var(--card));box-shadow:var(--shadow-sm)}
.memory-selection-bar>div:first-child{display:grid;gap:2px}
.memory-selection-bar strong{font-variant-numeric:tabular-nums}
.memory-selection-bar span{color:var(--muted);font-size:.78rem}
.memory-selection-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.memory-chat-panel{position:sticky;top:88px;min-width:0;padding:18px}
.memory-chat-panel .panel-head{align-items:center}
.memory-chat-panel .panel-head h2{margin:2px 0 0}
.memory-chat-intro{margin:0 0 12px;color:var(--muted);font-size:.86rem;line-height:1.45}
.memory-chat-panel .chat-thread{min-height:320px;max-height:44vh}
.memory-chat-panel .composer{grid-template-columns:minmax(0,1fr) auto}
.card-list>article{padding:16px}
.card-list h3{margin:0 0 6px;font-size:1.02rem;line-height:1.45}
.card-list p{margin:0;color:var(--muted)}
.memory-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.memory-source{font-size:.86rem}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.row-actions .quiet{min-height:36px;padding:6px 10px;font-size:.83rem}
.confidence{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.76rem;font-variant-numeric:tabular-nums}
.confidence .bar{display:block;width:56px;height:6px;border-radius:var(--radius-pill);background:var(--subtle);overflow:hidden}
.confidence .bar i{display:block;width:var(--pct,0%);height:100%;background:var(--muted)}
.confidence[data-tone="ok"] .bar i{background:var(--ok)}
.confidence[data-tone="warn"] .bar i{background:var(--warn)}
.confidence[data-tone="danger"] .bar i{background:var(--danger)}
.memory-card{content-visibility:auto;contain-intrinsic-size:auto 180px;transition:border-color .15s,background-color .15s}
.memory-card[data-picked="true"]{border-color:color-mix(in srgb,var(--accent) 58%,var(--border));background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.memory-pick{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;margin:-9px -6px -9px -8px;cursor:pointer}
.memory-pick input{width:18px;height:18px;min-height:18px;accent-color:var(--accent);cursor:pointer}
#memory-results[data-density="compact"]{gap:6px}
#memory-results[data-density="compact"] .memory-card{padding:10px 12px}
#memory-results[data-density="compact"] .memory-head{margin-bottom:5px}
#memory-results[data-density="compact"] h3{font-size:.91rem;line-height:1.35;margin-bottom:3px}
#memory-results[data-density="compact"] .row-actions{margin-top:7px}
#memory-results[data-density="compact"] .row-actions .quiet,#memory-results[data-density="compact"] .row-actions .danger{min-height:30px;padding:4px 8px;font-size:.76rem}

/* ----------------------------------------------------------- task cards */
.task-group{display:grid}
.task-card{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.task-card[data-overdue="true"]{border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}
.task-main{display:grid;gap:7px;min-width:0}
.task-main h3{margin:2px 0 0}
.task-meta{display:flex;gap:14px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--border)}
.task-actions{display:grid;gap:8px;align-content:start}
.delete-task{color:var(--danger)}
.delete-task:hover{border-color:color-mix(in srgb,var(--danger) 55%,var(--border));background:color-mix(in srgb,var(--danger) 10%,transparent)}
.agenda-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);margin-bottom:8px}
.agenda-card[data-overdue="true"]{border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}
.agenda-card h4{margin:0 0 4px;font-size:.98rem}
.agenda-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.status-head h2{margin:0}

/* -------------------------------------------------------- speaker cards */
.speaker-card{display:flex;align-items:flex-start;gap:14px;border-left:3px solid var(--speaker-color,var(--border))}
.speaker-card .swatch{width:14px;height:14px;margin-top:4px;border-radius:50%;background:var(--speaker-color,var(--accent))}
.speaker-body{display:grid;gap:5px;flex:1;min-width:0}
.speaker-actions{display:grid;gap:8px;justify-items:end}
.segment-card{display:grid;gap:10px}
.segment-card[data-picked="true"]{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));background:color-mix(in srgb,var(--accent) 6%,transparent)}
.segment-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.segment-pick{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;cursor:pointer}
.segment-pick input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.segment-pick input:disabled{cursor:not-allowed;opacity:.5}
.segment-batch{padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--subtle)}
.seg-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.8rem}
.seg-speaker{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.86rem}
.seg-speaker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--speaker-color,var(--muted))}
.seg-speaker[data-identified="false"]{color:var(--muted);font-weight:650;font-style:italic}
.seg-speaker[data-identified="false"]::before{background:none;border:1px dashed var(--border-strong)}
.segment-actions{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border)}
.segment-card[data-confirmed="true"]{border-color:color-mix(in srgb,var(--ok) 35%,var(--border))}

/* ------------------------------------------------------- speaker studio */
.speaker-studio{display:grid;grid-template-columns:minmax(270px,320px) minmax(0,1fr);gap:18px;align-items:start}
.speaker-profile-rail{position:sticky;top:88px;display:grid;align-content:start;gap:14px;max-height:calc(100vh - 112px);padding:16px;overflow:hidden}
.speaker-profile-rail .panel-head{align-items:center}
.speaker-profile-rail .panel-head h2{margin:2px 0 0}
.speaker-profile-rail .chips{margin:0}
.speaker-profile-list{display:grid;align-content:start;gap:9px;min-height:160px;max-height:calc(100vh - 250px);padding:2px 4px 2px 2px;overflow:auto}
.speaker-profile-list .speaker-card{display:grid;grid-template-columns:4px minmax(0,1fr);gap:10px;padding:12px;border:1px solid var(--border);border-left:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:none}
.speaker-profile-list .swatch{grid-row:1 / span 2;width:4px;height:auto;min-height:58px;margin:0;border-radius:8px}
.speaker-profile-list .speaker-actions{grid-column:2;display:flex;justify-content:space-between;justify-items:normal}
.speaker-profile-list .speaker-body{align-content:start}
.speaker-profile-list .speaker-body h3{margin:0;font-size:1rem}
.speaker-profile-list .speaker-body p{margin:0;color:var(--muted);font-size:.8rem}
.speaker-profile-list .speaker-body .task-meta{padding-top:6px;border-top:1px solid var(--border)}
.training-workbench{display:grid;gap:18px;min-width:0}
.conversation-picker{padding:18px}
.training-lead{max-width:72ch;margin:-4px 0 16px;color:var(--muted)}
.conversation-picker>.field{max-width:none}
.training-conversation-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:390px;margin-top:12px;padding:2px;overflow:auto;overscroll-behavior:contain}
.training-conversation-list>.state-detail{grid-column:1/-1}
.training-conversation{position:relative;display:grid;gap:7px;min-width:0;min-height:0;padding:13px;border:1px solid var(--border);border-radius:var(--radius);background:var(--subtle);text-align:left;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto 116px;transition:border-color .15s,background-color .15s,transform .15s}
.training-conversation:hover{border-color:var(--border-strong);background:var(--raise)}
.training-conversation:active{transform:scale(.98)}
.training-conversation[aria-pressed="true"]{border-color:color-mix(in srgb,var(--accent) 65%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--card));box-shadow:inset 3px 0 0 var(--accent)}
.training-conversation-top,.training-conversation-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.training-conversation-top strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.training-conversation-preview{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:.82rem;line-height:1.45;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.training-conversation-meta{justify-content:flex-start;flex-wrap:wrap;color:var(--muted);font-size:.72rem}
.training-conversation-meta span+span::before{content:'·';margin-right:8px;color:var(--border-strong)}
.training-stage{min-width:0;padding:0;overflow:clip}
.training-conversation-current{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--card)),var(--card) 62%)}
.training-conversation-current h2{margin:3px 0 4px}
.training-conversation-current p:last-child{margin:0;color:var(--muted);font-size:.82rem}
.training-conversation-current[data-state="empty"]{background:var(--card)}
.training-action-bar{position:sticky;top:72px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(12px)}
.training-action-copy{display:grid;gap:3px;min-width:135px}
.training-action-copy span{color:var(--muted);font-size:.76rem}
.training-action-controls{display:flex;align-items:end;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.training-action-controls .inline-field{min-width:180px}
.training-segment-list{display:grid;gap:10px;min-height:180px;padding:18px}
.training-segment-list>.segment-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:var(--card);box-shadow:var(--shadow-sm)}
.training-segment-list>.state-detail{text-align:center;padding:38px 16px}
.training-notes{margin-top:18px;padding:0}
.training-notes summary{padding:15px 18px;font-weight:750;cursor:pointer;list-style:none}
.training-notes summary::-webkit-details-marker{display:none}
.training-notes summary::after{content:'+';float:right;color:var(--muted);font-size:1.2rem}
.training-notes[open] summary::after{content:'−'}
.training-notes .steps{margin:0;padding:0 38px 18px 46px}

/* ------------------------------------------------------------- mini list */
.mini-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.mini-main{display:grid;gap:3px;min-width:0}
.mini-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ------------------------------------------------------------------ chat */
.chat-panel{max-width:980px}
.chat-thread{min-height:400px;max-height:58vh;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:6px}
.bubble{max-width:82%;border-radius:15px;padding:12px 15px;line-height:1.55}
.bubble .answer{margin:0;white-space:pre-wrap}
.bubble.assistant{align-self:flex-start;background:var(--subtle);border:1px solid var(--border)}
.bubble.user{align-self:flex-end;background:color-mix(in srgb,var(--accent) 18%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border))}
.bubble.failed{border-color:color-mix(in srgb,var(--danger) 45%,var(--border));background:color-mix(in srgb,var(--danger) 8%,transparent)}
.bubble.failed .quiet{margin-top:10px;min-height:36px}
.bubble.pending .answer::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4,end) infinite}
.citations{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid var(--border)}
.citation-label{color:var(--muted);font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.citation-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 11px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--card);color:var(--text);font-size:.8rem}
button.citation-chip{cursor:pointer}
button.citation-chip:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent)}
.no-citation{margin:10px 0 0;color:var(--warn);font-size:.84rem}
.starters{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.composer{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:12px}
.composer textarea{min-height:76px}
.composer-side{display:grid;gap:8px;align-content:start}
.composer .hint{grid-column:1/-1}

/* ---------------------------------------------------------------- dialog */
.dialog{width:min(760px,calc(100vw - 32px));max-height:min(84vh,900px);padding:0;border:1px solid var(--border);border-radius:18px;background:var(--card);color:var(--text);box-shadow:var(--shadow)}
.dialog::backdrop{background:rgba(3,7,14,.62);backdrop-filter:blur(3px)}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 14px;border-bottom:1px solid var(--border)}
.dialog-head h2{margin:0 0 4px}
.dialog-body{max-height:52vh;overflow:auto;padding:18px 22px}
.dialog-section{margin-bottom:18px}
.dialog-section h3{margin:0 0 8px;font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dialog-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 22px 18px;border-top:1px solid var(--border)}
.recording-player{width:100%;min-height:44px;margin-bottom:10px;border-radius:var(--radius-sm)}
.transcript{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.transcript li{display:grid;grid-template-columns:64px 150px minmax(0,1fr);gap:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.seg-text{line-height:1.55}

/* ----------------------------------------------------------------- toast */
#toast{position:fixed;right:20px;bottom:20px;z-index:70;max-width:420px;padding:12px 16px;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:11px;background:var(--card);box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .18s,transform .18s}
#toast.show{opacity:1;transform:none}
#toast[data-tone="warn"]{border-left-color:var(--warn)}
#toast[data-tone="error"]{border-left-color:var(--danger)}

/* ------------------------------------------------------------ login page */
.auth-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 35%),var(--bg)}
.login-card{width:min(420px,calc(100% - 32px));padding:30px;border:1px solid var(--border);border-radius:20px;background:var(--card);box-shadow:var(--shadow)}
.login-card h1{font-size:2rem;margin:18px 0 8px}
.login-card p{color:var(--muted)}
.login-card form{display:grid;gap:14px;margin-top:20px}
.alert{padding:10px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}

/* ------------------------------------------------------------ animations */
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(255,255,255,.14)}}
@keyframes shimmer{from{background-position:220% 0}to{background-position:-40% 0}}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ------------------------------------------------------------ responsive */
@media(max-width:1200px){
  .grid.two{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .memory-workspace{grid-template-columns:1fr}
  .memory-chat-panel{position:relative;top:auto}
  .speaker-studio{grid-template-columns:minmax(240px,280px) minmax(0,1fr)}
  .training-conversation-list{grid-template-columns:1fr}
  .transcript li{grid-template-columns:60px minmax(0,1fr)}
  .transcript .seg-text{grid-column:1/-1}
}
@media(max-width:900px){
  .shell{grid-template-columns:76px minmax(0,1fr)}
  .rail{padding:12px 8px}
  .nav{justify-content:center;padding:11px}
  .nav-label{display:none}
  .rail-foot{display:none}
  .settings-grid,.record-form{grid-template-columns:1fr}
  .workspace{padding:18px}
  .page-head{flex-direction:column;align-items:stretch}
  .task-card,.agenda-card,.mini-row,.speaker-card{flex-direction:column;align-items:stretch}
  .speaker-actions{justify-items:start}
  .memory-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .memory-toolbar{align-items:stretch}
  .memory-view-controls{width:100%;margin-left:0}
  .memory-view-controls .inline-field{flex:1}
  .memory-selection-bar{align-items:stretch;flex-direction:column}
  .memory-selection-actions{justify-content:flex-start}
  .speaker-studio{grid-template-columns:1fr}
  .speaker-profile-rail{position:static;max-height:none}
  .speaker-profile-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}
  .training-action-bar{position:static;align-items:stretch;flex-direction:column}
  .training-action-controls{justify-content:flex-start}
  }
@media(max-width:560px){
  .topbar{gap:10px;padding:0 14px}
  .topbar-health span:not(.system-dot){display:none}
  .who{display:none}
  .shell{display:block}
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:30;flex-direction:row;border-right:0;border-top:1px solid var(--border);padding:6px}
  .rail-tabs{flex-direction:row;width:100%;overflow-x:auto}
  .nav{min-width:56px}
  .workspace{padding:14px 14px 88px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .metric strong{font-size:1.7rem}
  .composer{grid-template-columns:1fr}
  .composer-side{grid-auto-flow:column;justify-content:start}
  .memory-summary{grid-template-columns:1fr 1fr;gap:8px}
  .memory-stat{padding:11px 12px}
  .memory-stat strong{font-size:1.35rem}
  .searchbar{flex-direction:column}
  .memory-view-controls{display:grid;grid-template-columns:1fr 1fr}
  .memory-chat-panel .composer{grid-template-columns:1fr}
  .speaker-profile-list{grid-template-columns:1fr}
  .training-conversation-current{align-items:flex-start;flex-direction:column}
  .training-action-controls{display:grid;grid-template-columns:1fr;width:100%}
  .training-action-controls .inline-field{min-width:0;width:100%}
  .training-action-controls button{width:100%}
  .training-segment-list{padding:12px}
  .record-btn,.page-actions>*{flex:1}
  .bubble{max-width:94%}
  .dialog{width:100vw;max-width:100vw;max-height:100vh;border-radius:0}
}

/* ------------------------------------------------------ user preferences */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media(prefers-contrast:more){
  :root{--border:rgba(255,255,255,.34);--border-strong:rgba(255,255,255,.55);--muted:#cbd8e8}
  body.light{--border:rgba(15,23,42,.38);--border-strong:rgba(15,23,42,.6);--muted:#33415a}
  .state-block{border-style:solid}
}