/* ═══════════════════════════════════════════
   SimulationLab — Gamified Case Experience Studio
   CaseConduit.io Master Stylesheet
   Identity: violet (#a259ff), matching the Portal card.
   Semantic tokens (--bg, --surface, --text…) come from ../shared/theme.css.
   ═══════════════════════════════════════════ */

:root {
    --navy: #0a192f;
    --charcoal: #172a45;
    --deep: #050e1a;
    --accent: #00ced1;
    --text-light: #e6f1ff;
    --text-dim: #8892b0;
    --rose: #f43f5e;
    --amber: #f59e0b;
    --violet: #8b5cf6;
    --emerald: #10b981;
    --blue: #4da3e8;
    --sl-accent: #a259ff;
    --sl-accent-soft: rgba(162, 89, 255, 0.12);
    --sl-accent-border: rgba(162, 89, 255, 0.35);
}
html[data-theme="light"] { --sl-accent: #7c3aed; --sl-accent-soft: rgba(124, 58, 237, 0.09); --sl-accent-border: rgba(124, 58, 237, 0.30); }

* { box-sizing: border-box; }
html, body { margin:0; height:100%; }
body {
    font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg, var(--navy));
    color:var(--text, var(--text-light));
    overflow:hidden;
    display:flex; flex-direction:column;
    -webkit-font-smoothing:antialiased;
}
.dim { color:var(--text-muted, var(--text-dim)); }

/* ─── Scrollbars ─── */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(var(--panel-rgb, 23,42,69), 0.9); border-radius:10px; }

/* ═══ AUTH GATE ═══ */
.auth-gate { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:var(--bg, var(--navy)); color:var(--text-muted, var(--text-dim)); }
.auth-gate-spinner { width:34px; height:34px; border:3px solid var(--sl-accent-soft); border-top-color:var(--sl-accent); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══ HEADER (light strip, like sibling modules) ═══ */
.sl-header { background:#d1d5db; background-image:linear-gradient(to bottom,#d7dbe0,#bdc3c7); border-bottom:2px solid var(--sl-accent); box-shadow:0 4px 12px rgba(0,0,0,0.15); flex-shrink:0; z-index:60; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; gap:14px; }
.sl-header a { text-decoration:none; }
.sl-portal-link { display:flex; align-items:center; gap:5px; color:#475569; transition:color .2s; flex-shrink:0; }
.sl-portal-link:hover { color:var(--sl-accent); }
.sl-wordmark { color:#0f172a; font-weight:800; font-size:19px; letter-spacing:-0.02em; text-transform:uppercase; flex-shrink:0; }
.sl-wordmark span { color:#7c3aed; }
.sl-divider { width:1px; height:18px; background:rgba(71,85,105,0.3); flex-shrink:0; }
.sl-hbtn { background:none; border:none; cursor:pointer; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:#475569; display:flex; align-items:center; gap:6px; transition:color .2s; flex-shrink:0; }
.sl-hbtn:hover { color:#7c3aed; }
.sl-hbtn.tour { color:#6d28d9; }
.sl-mode-toggle { display:flex; background:rgba(15,23,42,0.08); border:1px solid rgba(71,85,105,0.25); border-radius:10px; padding:3px; gap:2px; flex-shrink:0; }
.sl-mode-btn { border:none; background:none; cursor:pointer; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#475569; padding:6px 12px; border-radius:7px; display:flex; align-items:center; gap:6px; transition:all .2s; }
.sl-mode-btn.active { background:#0f172a; color:#c4b5fd; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
.sl-mode-btn:disabled { opacity:0.4; cursor:not-allowed; }
.sl-user-chip { display:flex; align-items:center; gap:8px; padding:4px 8px; background:rgba(15,23,42,0.06); border-radius:9px; flex-shrink:0; }

/* ═══ BUTTONS ═══ */
.sl-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--sl-accent); color:#fff; border:none; border-radius:9px; padding:8px 14px; font-size:12px; font-weight:800; cursor:pointer; transition:all .2s; letter-spacing:0.02em; }
.sl-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.sl-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.sl-btn.big { padding:12px 22px; font-size:13.5px; border-radius:11px; }
.sl-btn.play { background:linear-gradient(135deg, #a259ff, #7c3aed); box-shadow:0 4px 14px rgba(124,58,237,0.35); }
.sl-btn.ghost { background:transparent; color:var(--text, var(--text-light)); border:1px solid var(--border-strong, rgba(255,255,255,0.15)); }
.sl-btn.ghost:hover { border-color:var(--sl-accent-border); color:var(--sl-accent); }
.sl-iconbtn { background:none; border:none; cursor:pointer; color:var(--text-muted, var(--text-dim)); padding:5px; border-radius:7px; display:inline-flex; align-items:center; transition:all .15s; flex-shrink:0; }
.sl-iconbtn:hover { color:var(--text-strong, #fff); background:var(--sl-accent-soft); }
.sl-iconbtn.danger:hover { color:var(--rose); background:rgba(244,63,94,0.1); }
.sl-linkbtn { background:none; border:none; cursor:pointer; color:var(--text-muted, var(--text-dim)); font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:6px; padding:6px 2px; transition:color .2s; }
.sl-linkbtn:hover { color:var(--sl-accent); }

/* ═══ MAIN LAYOUT ═══ */
.sl-main { flex:1; display:flex; overflow:hidden; min-height:0; }

/* ─── Left rail ─── */
.sl-rail { width:270px; flex-shrink:0; background:var(--surface, rgba(23,42,69,0.30)); border-right:1px solid var(--border, rgba(0,206,209,0.08)); overflow-y:auto; padding:18px 16px 30px; }
.sl-rail-section { margin-bottom:22px; }
.sl-rail-title { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted, var(--text-dim)); display:flex; align-items:center; gap:7px; margin:0 0 10px; }
.sl-rail-titlefield { width:100%; background:transparent; border:1px solid transparent; border-radius:8px; color:var(--text-strong, #fff); font-size:15px; font-weight:800; padding:6px 8px; margin-left:-8px; font-family:inherit; transition:border .2s; }
.sl-rail-titlefield:hover, .sl-rail-titlefield:focus { border-color:var(--sl-accent-border); outline:none; }
.sl-rail-format { display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:4px 11px; border-radius:999px; background:var(--sl-accent-soft); border:1px solid var(--sl-accent-border); color:var(--sl-accent); font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; }
.sl-rail-check { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:4px 0; color:var(--text, var(--text-light)); }
.sl-rail-char { display:flex; align-items:center; gap:9px; padding:5px 0; }
.sl-rail-char b { display:block; font-size:12.5px; color:var(--text-strong, #fff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-rail-char span { display:block; font-size:11px; color:var(--text-muted, var(--text-dim)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-rail-run { display:flex; align-items:center; gap:9px; padding:5px 7px; margin:0 -7px; border-radius:9px; border:1px solid transparent; transition:all .15s; }
.sl-rail-run:hover { background:var(--sl-accent-soft); }
.sl-rail-run.sel { border-color:var(--sl-accent-border); background:var(--sl-accent-soft); }
.sl-rail-run input[type=checkbox] { accent-color:var(--sl-accent); cursor:pointer; flex-shrink:0; }
.sl-rail-run .rr-main { flex:1; min-width:0; cursor:pointer; display:flex; align-items:baseline; gap:8px; }
.sl-rail-run .rr-main b { font-size:12.5px; color:var(--sl-accent); flex-shrink:0; }
.sl-rail-run .rr-main span { font-size:11px; color:var(--text-muted, var(--text-dim)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-rail-analyse { width:100%; margin-top:9px; font-size:11px; padding:7px 10px; }
.sl-rail-flow { border-top:1px solid var(--border, rgba(0,206,209,0.08)); padding-top:16px; }
.sl-rail-hint { font-size:11.5px; line-height:1.6; color:var(--text-muted, var(--text-dim)); margin:0; }
.sl-rail-hint b { color:var(--text, var(--text-light)); }

/* ─── Canvas ─── */
.sl-canvas { flex:1; overflow-y:auto; min-width:0; }
.sl-design { max-width:860px; margin:0 auto; padding:30px 28px 80px; }

/* ═══ DESIGN STEPS ═══ */
.sl-step { margin-bottom:34px; }
.sl-step-head { display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
.sl-step-num { width:28px; height:28px; border-radius:9px; background:var(--sl-accent-soft); border:1px solid var(--sl-accent-border); color:var(--sl-accent); font-weight:900; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.sl-step-num.done { background:var(--sl-accent); color:#fff; }
.sl-step-head h2 { margin:0 0 4px; font-size:17px; letter-spacing:-0.01em; color:var(--text-strong, #fff); display:flex; align-items:center; gap:8px; }
.sl-step-head p { margin:0; font-size:12.5px; line-height:1.55; color:var(--text-muted, var(--text-dim)); max-width:640px; }
.sl-step-body { padding-left:42px; }
@media (max-width:720px) { .sl-step-body { padding-left:0; } }

/* ─── Source boxes ─── */
.sl-source-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:720px) { .sl-source-grid { grid-template-columns:1fr; } }
.sl-source { display:flex; align-items:center; gap:12px; background:var(--surface, rgba(23,42,69,0.30)); border:1.5px dashed var(--border-strong, rgba(0,206,209,0.20)); border-radius:13px; padding:15px 16px; cursor:pointer; transition:all .2s; }
.sl-source:hover { border-color:var(--sl-accent-border); background:var(--sl-accent-soft); }
.sl-source.loaded { border-style:solid; border-color:var(--sl-accent-border); cursor:default; }
.sl-source.loaded:hover { background:var(--surface, rgba(23,42,69,0.30)); }
.ss-icon { width:20px; height:20px; color:var(--sl-accent); flex-shrink:0; }
.ss-main { flex:1; min-width:0; }
.ss-label { margin:0 0 3px; font-size:13px; font-weight:800; color:var(--text-strong, #fff); display:flex; align-items:center; gap:8px; }
.ss-ok { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.06em; color:var(--emerald); }
.ss-meta { margin:0; font-size:11.5px; color:var(--text-muted, var(--text-dim)); line-height:1.45; }
.ss-cta { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:var(--sl-accent); background:var(--sl-accent-soft); border:1px solid var(--sl-accent-border); border-radius:8px; padding:6px 11px; flex-shrink:0; }
.sl-paste { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.sl-paste textarea { width:100%; min-height:130px; background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--border-strong, rgba(0,206,209,0.20)); border-radius:11px; color:var(--text, var(--text-light)); font-family:inherit; font-size:13px; padding:12px 14px; resize:vertical; }
.sl-paste textarea:focus { outline:none; border-color:var(--sl-accent-border); }

/* ─── Format picker ─── */
.sl-field-label { font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted, var(--text-dim)); margin:0 0 9px; }
.sl-format-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin-bottom:20px; }
.sl-format { position:relative; text-align:left; background:var(--surface, rgba(23,42,69,0.30)); border:1.5px solid var(--border, rgba(0,206,209,0.08)); border-radius:13px; padding:14px; cursor:pointer; transition:all .2s; display:flex; flex-direction:column; gap:6px; color:var(--text, var(--text-light)); font-family:inherit; }
.sl-format:hover { border-color:var(--sl-accent-border); transform:translateY(-2px); }
.sl-format.active { border-color:var(--sl-accent); background:var(--sl-accent-soft); box-shadow:0 4px 18px rgba(124,58,237,0.18); }
.sl-format.soon { opacity:0.55; }
.sf-icon { width:19px; height:19px; color:var(--sl-accent); }
.sf-label { font-size:13.5px; font-weight:800; color:var(--text-strong, #fff); }
.sf-tag { position:absolute; top:11px; right:11px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.07em; padding:3px 8px; border-radius:999px; background:rgba(100,116,139,0.15); color:var(--text-muted, var(--text-dim)); }
.sf-tag.live { background:var(--sl-accent-soft); color:var(--sl-accent); border:1px solid var(--sl-accent-border); }
.sf-desc { font-size:11px; line-height:1.5; color:var(--text-muted, var(--text-dim)); }

/* ─── Brief fields ─── */
.sl-brief-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
@media (max-width:720px) { .sl-brief-grid { grid-template-columns:1fr; } }
.sl-field { display:flex; flex-direction:column; gap:6px; }
.sl-field.wide { grid-column:1 / -1; }
.sl-field label { font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted, var(--text-dim)); }
.sl-field input, .sl-field select, .sl-field textarea { background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--border-strong, rgba(0,206,209,0.20)); border-radius:9px; color:var(--text, var(--text-light)); font-family:inherit; font-size:13px; padding:9px 12px; }
.sl-field input:focus, .sl-field select:focus, .sl-field textarea:focus { outline:none; border-color:var(--sl-accent-border); }
.sl-field textarea { resize:vertical; }

/* ─── Generate CTA / busy state ─── */
.sl-generate-cta { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.sl-generror { width:100%; background:rgba(244,63,94,0.07); border:1px solid rgba(244,63,94,0.35); border-radius:13px; padding:14px 16px; }
.sl-generror .ge-head { display:flex; align-items:center; gap:8px; margin:0 0 7px; font-size:13px; font-weight:800; color:var(--rose); }
.sl-generror .ge-msg { margin:0 0 7px; font-size:12.5px; line-height:1.55; color:var(--text, var(--text-light)); font-family:'SF Mono',Menlo,Consolas,monospace; word-break:break-word; }
.sl-generror .ge-hint { margin:0; font-size:11.5px; line-height:1.5; color:var(--text-muted, var(--text-dim)); }
.sl-generate-cta .warn { display:flex; align-items:center; gap:6px; color:var(--amber); }
.sl-generating { display:flex; flex-direction:column; align-items:center; gap:12px; padding:44px 20px; text-align:center; background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--sl-accent-border); border-radius:15px; }
.sl-generating.tall { margin:60px auto; max-width:520px; }
.sl-generating p { margin:0; font-size:14px; }
.sl-generating .dim { font-size:12px; }

/* ═══ BLUEPRINT ═══ */
.sl-card { background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--border, rgba(0,206,209,0.08)); border-radius:13px; padding:15px 16px; }
.sl-card.highlight { border-color:var(--sl-accent-border); background:var(--sl-accent-soft); }
.sl-card-kicker { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.09em; color:var(--sl-accent); margin:0 0 9px; }
.sl-bp-group { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:900; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-strong, #fff); margin:24px 0 10px; }
.sl-bp-group .dim { font-weight:600; text-transform:none; letter-spacing:0; }
.sl-bp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:11px; }
.sl-bp-grid.stages { grid-template-columns:1fr; }
.sl-scenario { border-color:var(--sl-accent-border); }
.sl-char-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sl-metric { display:flex; gap:10px; }
.sl-stage { display:flex; gap:12px; align-items:flex-start; }
.sl-stage-num { width:24px; height:24px; border-radius:8px; background:var(--sl-accent-soft); border:1px solid var(--sl-accent-border); color:var(--sl-accent); font-weight:900; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:4px; }
.sl-mini-label { display:block; font-size:9.5px; font-weight:900; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted, var(--text-dim)); margin:7px 0 3px; }
.sl-inline { display:block; width:100%; background:transparent; border:1px solid transparent; border-radius:7px; color:var(--text, var(--text-light)); font-family:inherit; font-size:13px; padding:3px 6px; margin-left:-6px; transition:border .15s; }
.sl-inline.strong { font-weight:800; color:var(--text-strong, #fff); font-size:14px; }
.sl-inline.dim { font-size:12px; color:var(--text-muted, var(--text-dim)); }
.sl-inline:hover, .sl-inline:focus { border-color:var(--sl-accent-border); outline:none; }
.sl-inline-ta { display:block; width:100%; background:transparent; border:1px solid transparent; border-radius:7px; color:var(--text, var(--text-light)); font-family:inherit; font-size:12.5px; line-height:1.55; padding:3px 6px; margin-left:-6px; resize:vertical; transition:border .15s; }
.sl-inline-ta.lg { font-size:13.5px; }
.sl-inline-ta:hover, .sl-inline-ta:focus { border-color:var(--sl-accent-border); outline:none; }
.sl-bp-actions { display:flex; align-items:center; gap:12px; margin-top:26px; flex-wrap:wrap; }

/* ═══ AVATARS ═══ */
.sl-avatar { width:34px; height:34px; border-radius:10px; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; flex-shrink:0; }
.sl-avatar.sm { width:28px; height:28px; border-radius:9px; font-size:11px; }
.sl-avatar.hdr { width:26px; height:26px; border-radius:7px; background:#0f172a; color:#c4b5fd; font-size:11px; }
.sl-avatar.player { background:linear-gradient(135deg, #a259ff, #7c3aed); }

/* ═══ PLAY MODE ═══ */
.sl-play { display:flex; height:100%; min-height:0; }
.sl-play-feedwrap { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.sl-play-scenario { flex-shrink:0; margin:16px 20px 0; padding:13px 16px; background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--sl-accent-border); border-radius:13px; }
.sl-play-scenario p { margin:0 0 6px; font-size:13px; line-height:1.55; }
.sl-play-scenario p:last-child { margin:0; font-size:12px; }
.sl-feed { flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:13px; min-height:0; }
.sl-msg { display:flex; gap:10px; align-items:flex-end; max-width:78%; }
.sl-msg.player { align-self:flex-end; flex-direction:row; }
.sl-msg-bubble { background:var(--surface, rgba(23,42,69,0.45)); border:1px solid var(--border, rgba(0,206,209,0.08)); border-radius:15px 15px 15px 4px; padding:10px 14px; font-size:13.5px; line-height:1.6; }
.sl-msg-bubble.player { background:var(--sl-accent-soft); border-color:var(--sl-accent-border); border-radius:15px 15px 4px 15px; }
.sl-msg-name { margin:0 0 3px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.07em; color:var(--sl-accent); }
.sl-msg-bubble.typing { display:flex; gap:4px; padding:14px 16px; }
.sl-msg-bubble.typing span { width:7px; height:7px; border-radius:50%; background:var(--text-muted, var(--text-dim)); animation:blink 1.2s infinite; }
.sl-msg-bubble.typing span:nth-child(2) { animation-delay:0.2s; }
.sl-msg-bubble.typing span:nth-child(3) { animation-delay:0.4s; }
@keyframes blink { 0%, 70%, 100% { opacity:0.25; } 35% { opacity:1; } }
.sl-composer { flex-shrink:0; display:flex; gap:10px; align-items:flex-end; padding:12px 20px 16px; border-top:1px solid var(--border, rgba(0,206,209,0.08)); }
.sl-composer textarea { flex:1; background:var(--surface, rgba(23,42,69,0.45)); border:1px solid var(--border-strong, rgba(0,206,209,0.20)); border-radius:13px; color:var(--text, var(--text-light)); font-family:inherit; font-size:13.5px; line-height:1.5; padding:11px 14px; resize:none; }
.sl-composer textarea:focus { outline:none; border-color:var(--sl-accent-border); }
.sl-composer .sl-btn { padding:12px 16px; border-radius:12px; }

/* ─── Play side panel ─── */
.sl-play-side { width:250px; flex-shrink:0; border-left:1px solid var(--border, rgba(0,206,209,0.08)); background:var(--surface, rgba(23,42,69,0.20)); overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:16px; }
@media (max-width:820px) { .sl-play-side { display:none; } }
.sl-side-block { }
.sl-side-title { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.09em; color:var(--text-muted, var(--text-dim)); margin:0 0 9px; }
.sl-progress { height:7px; background:rgba(100,116,139,0.2); border-radius:999px; overflow:hidden; margin-bottom:10px; }
.sl-progress.thin { height:5px; margin-bottom:0; }
.sl-progress-fill { height:100%; background:linear-gradient(90deg, #a259ff, #7c3aed); border-radius:999px; transition:width .6s ease; }
.sl-side-stage { display:flex; align-items:center; gap:9px; font-size:12px; padding:4px 0; color:var(--text-muted, var(--text-dim)); }
.sl-side-stage.now { color:var(--text-strong, #fff); font-weight:700; }
.sl-side-stage.done { color:var(--text, var(--text-light)); }
.st-dot { width:19px; height:19px; border-radius:7px; background:rgba(100,116,139,0.15); font-size:10px; font-weight:900; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.sl-side-stage.now .st-dot { background:var(--sl-accent); color:#fff; }
.sl-side-stage.done .st-dot { background:var(--sl-accent-soft); color:var(--sl-accent); }
.sl-metricbar { margin-bottom:10px; }
.mb-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:4px; }
.mb-row b { color:var(--sl-accent); }

/* ═══ BOARDROOM ═══ */
.sl-br-stage { position:relative; flex:1; min-height:0; margin:16px 20px 8px; border-radius:17px; background:radial-gradient(ellipse at 50% 42%, rgba(162,89,255,0.07), transparent 65%), var(--surface, rgba(23,42,69,0.20)); border:1px solid var(--border, rgba(0,206,209,0.08)); overflow:hidden; }
.sl-br-header { position:absolute; top:10px; left:14px; right:10px; display:flex; align-items:center; justify-content:space-between; z-index:6; }
.sl-br-header .sl-card-kicker { margin:0; }
.sl-br-table { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:62%; height:44%; border-radius:50%; background:linear-gradient(160deg, rgba(124,58,237,0.20), rgba(23,42,69,0.55)); border:2px solid var(--sl-accent-border); box-shadow:inset 0 10px 40px rgba(0,0,0,0.25), 0 18px 40px var(--shadow, rgba(0,0,0,0.2)); }
html[data-theme="light"] .sl-br-table { background:linear-gradient(160deg, rgba(124,58,237,0.12), rgba(226,232,243,0.9)); }
.sl-br-stage.deliberating .sl-br-table { animation:brPulse 1.6s ease-in-out infinite; }
@keyframes brPulse { 0%,100% { box-shadow:inset 0 10px 40px rgba(0,0,0,0.25), 0 0 0 0 rgba(162,89,255,0.0); } 50% { box-shadow:inset 0 10px 40px rgba(0,0,0,0.25), 0 0 34px 4px rgba(162,89,255,0.28); } }

.sl-br-seat { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; z-index:4; }
.sl-br-seat.speaking { z-index:8; }
.sl-br-avatar { position:relative; width:58px; height:58px; border-radius:50%; background:radial-gradient(circle at 50% 38%, rgba(255,255,255,0.09), transparent 60%), var(--surface-solid, #0c1e35); border:2.5px solid var(--seat-color); overflow:hidden; transition:all .25s; box-shadow:0 6px 18px var(--shadow, rgba(0,0,0,0.25)); }
.sl-br-avatar img { width:100%; height:100%; object-fit:cover; }
.sl-br-avatar .ba-head { position:absolute; left:50%; top:22%; transform:translateX(-50%); width:36%; height:36%; border-radius:50%; background:var(--seat-color); opacity:0.95; }
.sl-br-avatar .ba-body { position:absolute; left:50%; top:62%; transform:translateX(-50%); width:74%; height:52%; border-radius:50% 50% 0 0; background:var(--seat-color); opacity:0.75; }
.sl-br-seat.speaking .sl-br-avatar { transform:scale(1.12); box-shadow:0 0 0 4px rgba(162,89,255,0.25), 0 0 26px 6px rgba(162,89,255,0.35); }
.sl-br-avatar.chair { border-style:double; border-width:4px; }
.sl-br-nameplate { margin-top:5px; text-align:center; background:var(--surface-solid, #0c1e35); border:1px solid var(--border, rgba(0,206,209,0.08)); border-radius:8px; padding:3px 9px; max-width:150px; }
.sl-br-nameplate b { display:block; font-size:11px; color:var(--text-strong, #fff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-br-nameplate span { display:block; font-size:9.5px; color:var(--text-muted, var(--text-dim)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sl-br-bubble { position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); width:max-content; max-width:280px; background:var(--surface-solid, #0c1e35); border:1.5px solid var(--sl-accent-border); border-radius:13px; padding:10px 13px; font-size:12.5px; line-height:1.55; color:var(--text, var(--text-light)); box-shadow:0 10px 30px var(--shadow-strong, rgba(0,0,0,0.4)); animation:bubbleIn .25s ease; z-index:9; }
.sl-br-bubble::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:var(--sl-accent-border); }
@keyframes bubbleIn { from { opacity:0; transform:translateX(-50%) translateY(6px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
/* Top-row seats: bubble drops BELOW the nameplate (no room above the head) */
.sl-br-seat.bubble-below .sl-br-bubble { bottom:auto; top:calc(100% + 8px); }
.sl-br-seat.bubble-below .sl-br-bubble::after { top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--sl-accent-border); }
/* Edge seats: keep bubbles inside the stage */
.sl-br-seat[style*="left:12%"] .sl-br-bubble, .sl-br-seat[style*="left:14%"] .sl-br-bubble, .sl-br-seat[style*="left:18%"] .sl-br-bubble { left:0; transform:none; }
.sl-br-seat[style*="left:12%"] .sl-br-bubble::after, .sl-br-seat[style*="left:14%"] .sl-br-bubble::after, .sl-br-seat[style*="left:18%"] .sl-br-bubble::after { left:28px; }
.sl-br-seat[style*="left:82%"] .sl-br-bubble, .sl-br-seat[style*="left:86%"] .sl-br-bubble, .sl-br-seat[style*="left:88%"] .sl-br-bubble { left:auto; right:0; transform:none; }
.sl-br-seat[style*="left:82%"] .sl-br-bubble::after, .sl-br-seat[style*="left:86%"] .sl-br-bubble::after, .sl-br-seat[style*="left:88%"] .sl-br-bubble::after { left:auto; right:28px; }

.sl-br-thinking { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; align-items:center; gap:9px; background:var(--surface-solid, #0c1e35); border:1px solid var(--sl-accent-border); border-radius:999px; padding:7px 16px; font-size:11.5px; font-weight:700; color:var(--sl-accent); z-index:7; box-shadow:0 8px 24px var(--shadow, rgba(0,0,0,0.25)); animation:bannerchipup .25s ease; }
@keyframes bannerchipup { from { opacity:0; transform:translate(-50%, 8px); } to { opacity:1; transform:translate(-50%, 0); } }
.sl-br-thinking .bt-dots { display:inline-flex; gap:3px; }
.sl-br-thinking .bt-dots span { width:6px; height:6px; border-radius:50%; background:var(--sl-accent); animation:blink 1.2s infinite; }
.sl-br-thinking .bt-dots span:nth-child(2) { animation-delay:0.2s; }
.sl-br-thinking .bt-dots span:nth-child(3) { animation-delay:0.4s; }
.typing-label { font-style:italic; font-size:11px; color:var(--text-muted, var(--text-dim)); margin-left:7px; align-self:center; }
.sl-spin { animation:spin 0.9s linear infinite; }

.sl-br-minutes { position:absolute; left:12px; bottom:12px; width:230px; max-height:34%; background:rgba(var(--panel-rgb, 23,42,69), 0.55); backdrop-filter:blur(6px); border:1px solid var(--border, rgba(0,206,209,0.08)); border-radius:11px; padding:9px 11px; display:flex; flex-direction:column; z-index:5; }
.sl-br-minutes .bm-title { display:flex; align-items:center; gap:6px; margin:0 0 6px; font-size:9.5px; font-weight:900; text-transform:uppercase; letter-spacing:0.09em; color:var(--text-muted, var(--text-dim)); }
.sl-br-minutes .bm-body { overflow-y:auto; min-height:0; }
.sl-br-minutes .bm-body p { margin:0 0 6px; font-size:10.5px; line-height:1.5; color:var(--text, var(--text-light)); }
.sl-br-minutes .bm-body b { color:var(--sl-accent); font-size:9.5px; letter-spacing:0.04em; }

/* ═══ BRANCHING DECISIONS ═══ */
.sl-bn-wrap { flex:1; min-height:0; display:flex; flex-direction:column; margin:16px 20px; gap:12px; }
.sl-bn-maprow { flex-shrink:0; background:var(--surface, rgba(23,42,69,0.20)); border:1px solid var(--border, rgba(0,206,209,0.08)); border-radius:13px; padding:10px 14px 4px; }
.sl-bn-maprow .sl-card-kicker { margin:0 0 2px; }
.sl-bn-mapwrap { overflow-x:auto; overflow-y:hidden; }
.sl-bn-map .bn-edge { stroke:var(--sl-accent); stroke-width:2.5; opacity:0.55; }
.sl-bn-map .bn-ghost { stroke:var(--text-muted, #8892b0); stroke-width:1.5; stroke-dasharray:3 3; opacity:0.4; }
.sl-bn-map .bn-ghostdot { fill:none; stroke:var(--text-muted, #8892b0); stroke-width:1.2; opacity:0.4; }
.sl-bn-map .bn-node { fill:var(--sl-accent); }
.sl-bn-map .bn-node.head { animation:bnPulse 1.6s ease-in-out infinite; }
.sl-bn-map .bn-node.end { fill:var(--emerald); }
.sl-bn-map .bn-endring { fill:none; stroke:var(--emerald); stroke-width:2; opacity:0.6; }
.sl-bn-map .bn-nodenum { fill:var(--text-muted, #8892b0); font-size:10px; font-weight:700; text-anchor:middle; font-family:inherit; }
@keyframes bnPulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }

.sl-bn-story { flex:1; min-height:0; overflow-y:auto; padding:2px 2px 14px; }
.sl-bn-consequence { background:var(--sl-accent-soft); border:1px solid var(--sl-accent-border); border-radius:13px; padding:14px 17px; margin-bottom:12px; }
.sl-bn-consequence p, .sl-bn-situation p { margin:0 0 10px; font-size:13.5px; line-height:1.65; }
.sl-bn-consequence p:last-child, .sl-bn-situation p:last-child { margin-bottom:0; }
.bn-kicker { display:flex; align-items:center; gap:6px; font-size:10px !important; font-weight:900; text-transform:uppercase; letter-spacing:0.09em; color:var(--sl-accent) !important; margin:0 0 8px !important; }
.sl-bn-situation { background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--border, rgba(0,206,209,0.08)); border-radius:13px; padding:14px 17px; margin-bottom:12px; }
.bn-prompt { font-weight:800; color:var(--text-strong, #fff) !important; margin-top:12px !important; }

.sl-bn-options { display:flex; flex-direction:column; gap:9px; margin-bottom:10px; }
.sl-bn-option { display:flex; align-items:flex-start; gap:12px; text-align:left; width:100%; background:var(--surface, rgba(23,42,69,0.30)); border:1.5px solid var(--border-strong, rgba(0,206,209,0.20)); border-radius:13px; padding:12px 15px; cursor:pointer; transition:all .18s; color:var(--text, var(--text-light)); font-family:inherit; }
.sl-bn-option:hover:not(:disabled) { border-color:var(--sl-accent); background:var(--sl-accent-soft); transform:translateX(4px); }
.sl-bn-option:disabled { opacity:0.45; cursor:not-allowed; }
.bo-letter { width:26px; height:26px; border-radius:8px; background:var(--sl-accent-soft); border:1px solid var(--sl-accent-border); color:var(--sl-accent); font-weight:900; font-size:12.5px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.bo-letter.own { background:transparent; border-style:dashed; }
.bo-main { flex:1; min-width:0; }
.bo-label { display:block; font-size:13.5px; font-weight:700; color:var(--text-strong, #fff); line-height:1.45; }
.bo-hint { display:block; font-size:11.5px; color:var(--text-muted, var(--text-dim)); margin-top:2px; font-style:italic; }

.sl-bn-custom { display:flex; align-items:center; gap:10px; background:var(--surface, rgba(23,42,69,0.20)); border:1.5px dashed var(--border-strong, rgba(0,206,209,0.20)); border-radius:13px; padding:9px 12px; }
.sl-bn-custom input { flex:1; background:transparent; border:none; outline:none; color:var(--text, var(--text-light)); font-family:inherit; font-size:13px; }
.sl-bn-custom .sl-btn { padding:7px 14px; }

.sl-bn-waiting { display:flex; align-items:center; justify-content:center; gap:10px; padding:26px; font-size:12.5px; font-weight:700; color:var(--sl-accent); }
.sl-bn-waiting .bt-dots { display:inline-flex; gap:3px; }
.sl-bn-waiting .bt-dots span { width:6px; height:6px; border-radius:50%; background:var(--sl-accent); animation:blink 1.2s infinite; }
.sl-bn-waiting .bt-dots span:nth-child(2) { animation-delay:0.2s; }
.sl-bn-waiting .bt-dots span:nth-child(3) { animation-delay:0.4s; }

.sl-bn-gauge { margin-bottom:10px; }
.bn-gval { display:inline-flex; align-items:center; gap:7px; }
.bn-gval b { color:var(--sl-accent); }
.bn-delta { font-style:normal; font-size:10.5px; font-weight:900; padding:1px 7px; border-radius:999px; animation:bnDeltaIn .4s ease; }
.bn-delta.up { background:rgba(16,185,129,0.14); color:var(--emerald); }
.bn-delta.down { background:rgba(244,63,94,0.14); color:var(--rose); }
@keyframes bnDeltaIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.sl-progress.danger { background:rgba(244,63,94,0.18); }
.sl-progress-fill.danger { background:linear-gradient(90deg, #f43f5e, #be123c); }
.sl-bn-debrief-gauges { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.bn-dg { font-size:12px; color:var(--text-muted, var(--text-dim)); }
.bn-dg b { color:var(--text, var(--text-light)); }

/* ═══ DASHBOARD SIMULATION ═══ */
.sl-db-wrap { flex:1; min-height:0; overflow-y:auto; margin:16px 20px; display:flex; flex-direction:column; gap:12px; padding-bottom:14px; }
.sl-db-head .sl-card-kicker { margin:0; }
.sl-db-event { display:flex; align-items:center; gap:9px; background:rgba(245,158,11,0.10); border:1px solid rgba(245,158,11,0.35); border-radius:11px; padding:10px 14px; font-size:12.5px; color:var(--amber); animation:bannerchipup .3s ease; }
.sl-db-event b { color:var(--amber); }

.sl-db-kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }
.sl-db-kpi { background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--border, rgba(0,206,209,0.08)); border-radius:13px; padding:11px 13px 9px; }
.dk-name { margin:0 0 4px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted, var(--text-dim)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dk-row { display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.dk-value { font-size:19px; font-weight:900; color:var(--text-strong, #fff); letter-spacing:-0.02em; }
.dk-delta { font-size:10.5px; font-weight:900; padding:1px 7px; border-radius:999px; animation:bnDeltaIn .4s ease; }
.dk-delta.good { background:rgba(16,185,129,0.14); color:var(--emerald); }
.dk-delta.bad { background:rgba(244,63,94,0.14); color:var(--rose); }
.dk-spark { display:block; width:100%; height:30px; }
.dk-spark-empty { height:30px; border-bottom:1px dashed var(--border-strong, rgba(0,206,209,0.20)); }
.dk-line { fill:none; stroke-width:2; stroke:var(--sl-accent); opacity:0.9; }
.dk-line.good { stroke:var(--emerald); }
.dk-line.bad { stroke:var(--rose); }
.dk-dot { fill:var(--sl-accent); }
.dk-dot.good { fill:var(--emerald); }
.dk-dot.bad { fill:var(--rose); }

.sl-db-report { background:var(--sl-accent-soft); border:1px solid var(--sl-accent-border); border-radius:13px; padding:13px 16px; }
.sl-db-report p { margin:0 0 9px; font-size:13px; line-height:1.6; }
.sl-db-report p:last-child { margin-bottom:0; }

.sl-db-levers { background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--border, rgba(0,206,209,0.08)); border-radius:13px; padding:13px 16px; }
.sl-db-levergrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px 18px; margin:10px 0 14px; }
.sl-db-lever .dl-head { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; margin-bottom:4px; }
.sl-db-lever .dl-head b { color:var(--sl-accent); font-size:13px; }
.sl-db-lever input[type=range] { width:100%; accent-color:var(--sl-accent); cursor:pointer; }
.sl-db-lever input[type=range]:disabled { opacity:0.4; cursor:not-allowed; }
.sl-db-lever .dl-range { display:flex; justify-content:space-between; font-size:10px; color:var(--text-muted, var(--text-dim)); }

.sl-db-debrief-kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin-top:6px; }
.sl-db-dk .dk-name { margin-bottom:2px; }
.sl-db-dk .bn-dg { display:block; margin-top:3px; }

/* ═══ CRISIS INBOX ═══ */
.sl-ib-wrap { flex:1; min-height:0; display:flex; flex-direction:column; margin:16px 20px; gap:10px; }
.sl-ib-topbar { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.sl-ib-topbar .sl-card-kicker { margin:0; }
.sl-ib-clock { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--text, var(--text-light)); background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--border-strong, rgba(0,206,209,0.20)); border-radius:999px; padding:6px 14px; }
.sl-ib-clock.hot { border-color:rgba(244,63,94,0.45); }
.ib-hotcount { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.05em; color:var(--rose); background:rgba(244,63,94,0.12); border-radius:999px; padding:2px 9px; animation:blink 1.6s infinite; }

.sl-ib-cols { flex:1; min-height:0; display:flex; gap:12px; }
.sl-ib-list { width:300px; flex-shrink:0; overflow-y:auto; background:var(--surface, rgba(23,42,69,0.20)); border:1px solid var(--border, rgba(0,206,209,0.08)); border-radius:13px; padding:8px; }
.ib-list-head { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.09em; color:var(--text-muted, var(--text-dim)); margin:4px 6px 8px; }
.ib-unreadbadge { background:var(--sl-accent); color:#fff; border-radius:999px; font-size:10px; padding:1px 8px; }
.sl-ib-item { display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:all .15s; }
.sl-ib-item:hover { background:var(--sl-accent-soft); }
.sl-ib-item.sel { border-color:var(--sl-accent-border); background:var(--sl-accent-soft); }
.sl-ib-item.escalated { border-left:3px solid var(--rose); }
.sl-ib-item .ib-ch { width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--text-muted, var(--text-dim)); }
.sl-ib-item .ib-ch.call { color:var(--blue); }
.sl-ib-item .ib-ch.alert { color:var(--amber); }
.ib-main { flex:1; min-width:0; }
.ib-from { margin:0; font-size:12px; font-weight:600; color:var(--text, var(--text-light)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-ib-item.unread .ib-from { font-weight:900; color:var(--text-strong, #fff); }
.ib-subject { margin:1px 0 0; font-size:11.5px; color:var(--text-muted, var(--text-dim)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-ib-item.unread .ib-subject { color:var(--text, var(--text-light)); }
.ib-time { font-size:9.5px; color:var(--text-muted, var(--text-dim)); flex-shrink:0; margin-top:2px; }
.ib-urgent { font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.05em; color:var(--rose); background:rgba(244,63,94,0.12); border-radius:999px; padding:1px 7px; }
.ib-esc { font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.05em; color:var(--amber); background:rgba(245,158,11,0.12); border-radius:999px; padding:1px 7px; }

.sl-ib-pane { flex:1; min-width:0; overflow-y:auto; background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--border, rgba(0,206,209,0.08)); border-radius:13px; padding:16px 18px; }
.sl-ib-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:0 12%; }
.sl-ib-empty p { margin:0; font-size:13px; line-height:1.6; }
.ib-read-head { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.ib-read-from { margin:0; font-size:13.5px; font-weight:800; color:var(--text-strong, #fff); }
.ib-read-meta { margin:1px 0 0; font-size:11px; color:var(--text-muted, var(--text-dim)); }
.ib-read-subject { margin:0 0 10px; font-size:15px; font-weight:800; color:var(--text-strong, #fff); letter-spacing:-0.01em; }
.ib-read-body { border-top:1px solid var(--border, rgba(0,206,209,0.08)); padding-top:12px; margin-bottom:12px; }
.ib-read-body p { margin:0 0 10px; font-size:13px; line-height:1.65; }
.ib-outcome { display:flex; align-items:flex-start; gap:8px; background:var(--sl-accent-soft); border:1px solid var(--sl-accent-border); border-radius:10px; padding:9px 12px; font-size:12px; line-height:1.5; margin-bottom:12px; color:var(--text, var(--text-light)); }
.ib-outcome i { color:var(--sl-accent); flex-shrink:0; margin-top:2px; }
.sl-ib-replybox { display:flex; gap:10px; align-items:flex-end; }
.sl-ib-replybox textarea { flex:1; background:var(--surface, rgba(23,42,69,0.45)); border:1px solid var(--border-strong, rgba(0,206,209,0.20)); border-radius:11px; color:var(--text, var(--text-light)); font-family:inherit; font-size:13px; line-height:1.5; padding:10px 13px; resize:vertical; }
.sl-ib-replybox textarea:focus { outline:none; border-color:var(--sl-accent-border); }
@media (max-width:900px) { .sl-ib-list { width:220px; } }
/* Caller speaking: pulsing ring on the reading-pane avatar + on-air label */
.sl-avatar.ib-speaking { animation:ibSpeak 1.3s ease-in-out infinite; }
@keyframes ibSpeak { 0%,100% { box-shadow:0 0 0 0 rgba(162,89,255,0.0); } 50% { box-shadow:0 0 0 5px rgba(162,89,255,0.30); } }
.ib-onair { color:var(--emerald); font-weight:900; animation:blink 1.6s infinite; }

/* ═══ COURTROOM HEARING ═══ */
/* Reskinned 2026-08-02: the original walnut/parchment/brass in a serif hand
   read as a different product next to the other formats, so the room now wears
   the house set-piece idiom — navy glass, neon cyan lines, studio font (same
   family as the Video Call surface). It is still a set-piece: dark in BOTH
   themes, carrying its OWN tokens below. Those tokens are also the seam a
   future SKIN PACK slots into — a skin is just another set of these values,
   and the walnut original can return as one. Light mode keeps the hard edge so
   the panel reads as deliberate rather than a rendering fault. */
.sl-ct-surface {
    --ct-bg-top:#0d1424; --ct-bg-bottom:#050810;
    --ct-panel:#111c31;
    --ct-ink:#e6f1ff; --ct-ink-dim:#8892b0;
    --ct-accent:#00ced1; --ct-accent-bright:#7ff0f2;
    --ct-accent-line:rgba(0,206,209,0.30);
    --ct-danger:#f43f5e; --ct-danger-soft:#fda4af;
    background:linear-gradient(180deg, var(--ct-bg-top), var(--ct-bg-bottom));
    color:var(--ct-ink);
}
html[data-theme="light"] .sl-ct-surface { box-shadow:inset 0 0 0 1px rgba(0,0,0,0.45); }

.sl-ct-room { flex-shrink:0; padding:14px 22px 12px; background:linear-gradient(180deg, rgba(0,0,0,0.30), transparent); border-bottom:1px solid var(--ct-accent-line); }
.sl-ct-topbar { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:12px; }
.ct-court { margin:0; font-size:9.5px; font-weight:700; letter-spacing:0.17em; text-transform:uppercase; color:var(--ct-accent); }
.ct-matter { margin:0; font-size:12.5px; font-style:italic; color:var(--ct-ink-dim); text-align:right; }

/* The well of the court: witness box | bench | opposing counsel */
.sl-ct-well { display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:16px; align-items:end; }
.sl-ct-flank { display:flex; flex-direction:column; align-items:center; gap:5px; }
.ct-flank-label { margin:0; font-size:9px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:rgba(136,146,176,0.75); }
.sl-ct-person { display:flex; flex-direction:column; align-items:center; gap:5px; }
.sl-ct-person.empty { justify-content:center; min-height:82px; }
.sl-ct-emptybox { width:54px; height:40px; border:1.5px dashed var(--ct-accent-line); border-radius:5px; }
.ct-empty-note, .ct-flank-note { margin:0; font-size:10.5px; font-style:italic; line-height:1.45; text-align:center; color:var(--ct-ink-dim); max-width:170px; }
.sl-ct-benchwrap { display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 18px 11px; border-radius:11px 11px 4px 4px; background:linear-gradient(180deg,#16233c,#0c1526); border:1px solid rgba(0,206,209,0.26); box-shadow:0 12px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06); }
.sl-ct-bench { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ct-bench-note { margin:0; font-size:10.5px; font-style:italic; line-height:1.45; text-align:center; color:var(--ct-ink-dim); max-width:300px; }

/* Neon nameplate (was brass) */
.sl-ct-plate { text-align:center; background:rgba(0,206,209,0.10); border:1px solid var(--ct-accent-line); border-radius:5px; padding:3px 12px; max-width:180px; box-shadow:0 0 14px rgba(0,206,209,0.12), inset 0 1px 0 rgba(255,255,255,0.05); }
.sl-ct-plate b { display:block; font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--ct-accent-bright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-ct-plate.bench { padding:4px 18px; max-width:280px; }
.sl-ct-plate.bench b { font-size:12.5px; letter-spacing:0.05em; }

/* CSS busts — same placeholder idiom as the boardroom seats */
.sl-ct-fig { position:relative; display:block; width:54px; height:52px; }
.sl-ct-fig .cf-head { position:absolute; left:50%; top:0; transform:translateX(-50%); width:21px; height:21px; border-radius:50%; background:#a9bdd8; }
.sl-ct-fig .cf-body { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:46px; height:31px; border-radius:23px 23px 0 0; background:#16233c; border:1px solid rgba(0,206,209,0.22); border-bottom:none; }
.sl-ct-fig .cf-collar { position:absolute; left:50%; bottom:15px; transform:translateX(-50%); width:9px; height:14px; background:#e6f1ff; border-radius:1px 1px 4px 4px; }
.sl-ct-fig.judge { transform:scale(1.16); transform-origin:bottom center; }
.sl-ct-fig.judge .cf-body { background:#101d33; border-color:rgba(0,206,209,0.35); }
.sl-ct-fig.judge .cf-sash { position:absolute; left:50%; bottom:1px; margin-left:11px; transform:translateX(-50%) rotate(-19deg); width:5px; height:28px; background:var(--ct-danger); border-radius:2px; }
.sl-ct-fig.witness .cf-body { background:#1a2a44; }
.sl-ct-fig.counsel .cf-body { background:#0f1b30; }

/* Scales of persuasion */
.sl-ct-scales { margin-top:14px; }
.ct-scale-row { display:flex; align-items:center; gap:12px; }
.ct-scale-side { flex-shrink:0; width:76px; font-size:9px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--ct-ink-dim); }
.ct-scale-side.right { text-align:right; }
.ct-scale-track { position:relative; flex:1; height:9px; border-radius:999px; background:rgba(0,0,0,0.45); border:1px solid rgba(0,206,209,0.20); }
.ct-scale-fill { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg, rgba(0,206,209,0.22), var(--ct-accent)); transition:width .5s ease; }
.ct-scale-pivot { position:absolute; left:50%; top:-5px; bottom:-5px; width:1.5px; background:rgba(230,241,255,0.55); transform:translateX(-50%); }
.ct-scale-needle { position:absolute; top:50%; left:50%; width:3px; height:21px; border-radius:2px; background:var(--ct-ink); transform:translate(-50%,-50%); box-shadow:0 0 9px rgba(0,206,209,0.65); transition:left .5s ease; }
.ct-scale-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:7px; }
.ct-scale-title { font-size:9px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--ct-accent); }
.ct-delta { font-size:10.5px; font-weight:700; padding:1px 9px; border-radius:999px; animation:bnDeltaIn .4s ease; }
.ct-delta.up { background:rgba(0,206,209,0.15); color:var(--ct-accent-bright); border:1px solid var(--ct-accent-line); }
.ct-delta.down { background:rgba(244,63,94,0.15); color:var(--ct-danger-soft); border:1px solid rgba(244,63,94,0.40); }
.ct-scale-note { font-size:11.5px; font-style:italic; color:var(--ct-ink-dim); }

/* Phase breadcrumb */
.sl-ct-phases { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ct-phase { font-size:9px; font-weight:700; letter-spacing:0.17em; text-transform:uppercase; color:rgba(136,146,176,0.55); }
.ct-phase.done { color:var(--ct-ink-dim); }
.ct-phase.now { color:var(--ct-accent); text-shadow:0 0 12px rgba(0,206,209,0.45); }
.ct-phase-sep { font-style:normal; font-size:10px; color:rgba(0,206,209,0.35); }

/* The record */
.sl-ct-record { flex:1; min-height:0; overflow-y:auto; padding:16px 26px 12px; }
.sl-ct-line { margin-bottom:11px; font-size:13.5px; line-height:1.7; }
.ct-speaker { font-size:10.5px; font-weight:700; letter-spacing:0.11em; text-transform:uppercase; color:var(--ct-accent); margin-right:7px; }
.ct-said { color:var(--ct-ink); }
.sl-ct-line.player { border-left:2px solid var(--ct-accent); padding-left:13px; }
.sl-ct-line.player .ct-speaker { color:var(--ct-accent-bright); }
.sl-ct-line.clerk .ct-said { color:var(--ct-ink-dim); font-style:italic; }

.sl-ct-objection { margin:0 0 12px 26px; padding:9px 15px; border-left:3px solid var(--ct-danger); border-radius:0 9px 9px 0; background:rgba(244,63,94,0.11); }
.ct-obj-head { margin:0; font-size:10.5px; font-weight:700; letter-spacing:0.11em; text-transform:uppercase; color:var(--ct-danger-soft); }
.ct-obj-by { color:rgba(253,164,175,0.62); letter-spacing:0.06em; }
.ct-obj-rule { margin:5px 0 0; font-size:12.5px; line-height:1.6; color:var(--ct-accent); }
.ct-obj-rule.overruled { color:rgba(0,206,209,0.72); }
.ct-obj-rule b { font-size:10.5px; letter-spacing:0.11em; text-transform:uppercase; }

.sl-ct-divider { display:flex; align-items:center; gap:14px; margin:17px 0 15px; }
.sl-ct-divider::before, .sl-ct-divider::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--ct-accent-line), transparent); }
.sl-ct-divider span { font-size:9.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ct-accent); white-space:nowrap; }

.sl-ct-waiting { display:flex; align-items:center; justify-content:center; gap:10px; padding:16px; font-size:12.5px; font-style:italic; color:var(--ct-accent); }
.sl-ct-waiting .bt-dots { display:inline-flex; gap:3px; }
.sl-ct-waiting .bt-dots span { width:5px; height:5px; border-radius:50%; background:var(--ct-accent); animation:blink 1.2s infinite; }
.sl-ct-waiting .bt-dots span:nth-child(2) { animation-delay:0.2s; }
.sl-ct-waiting .bt-dots span:nth-child(3) { animation-delay:0.4s; }

/* Witness row */
.sl-ct-callrow { flex-shrink:0; display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:10px 26px; border-top:1px solid rgba(0,206,209,0.18); }
.ct-callrow-label { font-size:9px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--ct-ink-dim); }
.sl-ct-wchip { display:flex; align-items:center; gap:13px; text-align:left; background:rgba(230,241,255,0.05); border:1px solid rgba(0,206,209,0.28); border-radius:9px; padding:6px 13px; cursor:pointer; color:var(--ct-ink); font-family:inherit; transition:all .18s; }
.sl-ct-wchip:hover:not(:disabled) { border-color:var(--ct-accent); background:rgba(0,206,209,0.12); }
.sl-ct-wchip:disabled { opacity:0.45; cursor:not-allowed; }
.sl-ct-wchip.inbox { opacity:1; border-color:var(--ct-accent); background:rgba(0,206,209,0.16); box-shadow:0 0 0 1px rgba(0,206,209,0.22); }
.cw-main { display:flex; flex-direction:column; }
.cw-name { font-size:12.5px; font-weight:700; }
.cw-role { font-size:10px; color:var(--ct-ink-dim); }
.cw-cta { font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ct-accent); }

/* Composer — house chrome; the send button inherits the standard play style */
.sl-ct-composer { flex-wrap:wrap; border-top:1px solid rgba(0,206,209,0.22); }
.sl-ct-composer textarea { min-width:220px; background:rgba(0,0,0,0.32); border-color:rgba(0,206,209,0.28); color:var(--ct-ink); font-family:inherit; font-size:13.5px; }
.sl-ct-composer textarea::placeholder { color:rgba(136,146,176,0.7); }
.sl-ct-composer textarea:focus { border-color:var(--ct-accent); }
.sl-ct-composer .sl-btn.ghost { color:var(--ct-ink); border-color:rgba(0,206,209,0.35); font-family:inherit; }
.sl-ct-composer .sl-btn.ghost:hover { color:var(--ct-accent); border-color:var(--ct-accent); }

@media (max-width:900px) {
    .sl-ct-well { gap:9px; }
    .sl-ct-plate { max-width:100%; }
    .ct-matter { display:none; }
    .sl-ct-room, .sl-ct-record, .sl-ct-callrow, .sl-ct-composer { padding-left:15px; padding-right:15px; }
}
/* Squat frames — an EduLab section iframe can be short. The room folds down to
   a strip of nameplates so the record always has room to breathe. */
@media (max-height:660px) {
    .sl-ct-fig, .ct-bench-note, .ct-flank-note, .ct-empty-note { display:none; }
    .sl-ct-emptybox { width:44px; height:22px; }
    .sl-ct-benchwrap { padding:9px 16px; }
    .sl-ct-room { padding-top:11px; padding-bottom:10px; }
    .sl-ct-scales, .sl-ct-phases { margin-top:9px; }
    .sl-ct-wchip { padding:5px 11px; gap:10px; }
    .sl-ct-callrow { padding-top:7px; padding-bottom:7px; }
}

/* Judgment card — lives in the SHARED debrief, so it wears studio chrome with
   a cyan rule to remember the room by. */
.sl-debrief .sl-ct-judgment .ctj-verdict { margin:0 0 10px; font-size:17px; font-weight:800; line-height:1.4; color:var(--text-strong, #fff); }
.sl-debrief .sl-ct-judgment .ctj-remark { margin:13px 0 0; padding-left:14px; border-left:2px solid var(--accent, #00ced1); font-style:italic; font-size:13.5px; line-height:1.7; }
.sl-debrief .sl-ct-judgment .ctj-attrib { margin:6px 0 0; padding-left:14px; font-size:11.5px; color:var(--text-muted, var(--text-dim)); }

/* ═══ VIDEO CALL ═══ */
/* A video call is a set-piece too, so like the courtroom this surface carries
   its OWN tokens and stays dark in both themes — a call window that turned
   white in light mode would stop reading as a call. Light mode only gains a
   hard edge so it reads as a deliberate panel rather than a rendering fault. */
.sl-cl-surface {
    --cl-top:#0d1424; --cl-bottom:#050810;
    --cl-tile:#111c31; --cl-line:rgba(0,206,209,0.18);
    --cl-teal:#00ced1; --cl-brass:#c9a227;
    --cl-ink:#e6f1ff; --cl-ink-dim:#8892b0;
    background:linear-gradient(180deg, var(--cl-top), var(--cl-bottom));
    color:var(--cl-ink);
}
html[data-theme="light"] .sl-cl-surface { box-shadow:inset 0 0 0 1px rgba(0,0,0,0.45); }

/* ─── Top bar ─── */
.sl-cl-topbar { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 18px; background:rgba(0,0,0,0.30); border-bottom:1px solid var(--cl-line); }
.sl-cl-topbar .cl-who { min-width:0; }
.sl-cl-topbar .cl-who b { display:block; font-size:13px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-cl-topbar .cl-who span { display:block; font-size:10.5px; color:var(--cl-ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-live { margin:0; display:flex; align-items:center; gap:7px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.13em; color:var(--cl-ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-livedot { width:7px; height:7px; border-radius:50%; background:var(--rose); box-shadow:0 0 10px rgba(244,63,94,0.8); animation:clLive 2s ease-in-out infinite; flex-shrink:0; }
@keyframes clLive { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
.sl-cl-topbar .cl-meta { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.cl-turns { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.09em; color:var(--cl-ink-dim); }
.cl-timer { font-family:'SF Mono',Menlo,Consolas,monospace; font-size:13px; font-weight:700; letter-spacing:0.04em; color:var(--cl-teal); background:rgba(0,206,209,0.09); border:1px solid var(--cl-line); border-radius:7px; padding:3px 9px; }
.sl-cl-topbar .cl-leave { color:var(--cl-ink-dim); font-size:11px; }
.sl-cl-topbar .cl-leave:hover { color:var(--cl-teal); }

/* ─── The stage ─── */
.sl-cl-stage { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden; background:radial-gradient(ellipse at 50% 40%, rgba(0,206,209,0.06), transparent 62%); }
.sl-cl-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 42px 20px; border-radius:20px; background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent), var(--cl-tile); border:1px solid var(--cl-line); box-shadow:0 22px 60px rgba(0,0,0,0.45); transition:box-shadow .3s, opacity .3s; }
.sl-cl-tile.thinking { opacity:0.72; }
.cl-ring { position:absolute; inset:-3px; border-radius:22px; border:2px solid transparent; pointer-events:none; transition:border-color .3s; }
.sl-cl-tile.speaking .cl-ring { border-color:rgba(0,206,209,0.55); animation:clSpeak 1.5s ease-in-out infinite; }
@keyframes clSpeak { 0%,100% { box-shadow:0 0 0 0 rgba(0,206,209,0.30); } 50% { box-shadow:0 0 34px 7px rgba(0,206,209,0.28); } }
.sl-cl-tile.speaking { box-shadow:0 22px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,206,209,0.28); }

/* The bust — the boardroom's placeholder idiom, scaled up for a single tile,
   with an idle blink so the tile is never quite still. */
/* Height-responsive: a short frame (an EduLab section iframe, a laptop with the
   transcript open) shrinks the bust rather than cropping the tile. */
.cl-bust { position:relative; display:block; width:clamp(76px, 21vh, 146px); height:clamp(76px, 21vh, 146px); border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 34%, rgba(255,255,255,0.10), transparent 62%), #0a1424; border:3px solid var(--cl-color, var(--cl-teal)); }
.cl-bust img { width:100%; height:100%; object-fit:cover; }
.cl-bust .cb-head { position:absolute; left:50%; top:20%; transform:translateX(-50%); width:37%; height:37%; border-radius:50%; background:var(--cl-color, var(--cl-teal)); opacity:0.95; }
.cl-bust .cb-body { position:absolute; left:50%; top:61%; transform:translateX(-50%); width:76%; height:54%; border-radius:50% 50% 0 0; background:var(--cl-color, var(--cl-teal)); opacity:0.72; }
.cl-bust .cb-eye { position:absolute; top:42%; width:14%; height:11%; border-radius:50%; background:rgba(5,8,16,0.72); animation:clBlink 6.4s infinite; }
.cl-bust .cb-eye.left { left:24%; }
.cl-bust .cb-eye.right { right:24%; }
@keyframes clBlink { 0%,95%,100% { transform:scaleY(1); } 97.5% { transform:scaleY(0.1); } }
.sl-cl-tile.speaking .cl-bust { animation:clTalk 1.5s ease-in-out infinite; }
@keyframes clTalk { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); } }

/* Nameplate — brass rule over teal-lit dark, the call's own furniture */
.cl-plate { text-align:center; max-width:250px; padding:6px 16px; border-radius:9px; background:linear-gradient(180deg, rgba(0,206,209,0.10), rgba(0,0,0,0.35)); border:1px solid var(--cl-line); border-top:2px solid var(--cl-brass); }
.cl-plate b { display:block; font-size:13.5px; font-weight:800; letter-spacing:0.02em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-plate span { display:block; font-size:10.5px; color:var(--cl-ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-status { min-height:14px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.13em; color:var(--cl-teal); }
/* Autoplay-blocked affordance: the status line becomes a real, obvious button. */
.cl-status.cl-tap { cursor:pointer; pointer-events:auto; font-size:12px; text-transform:none; letter-spacing:0.02em; color:var(--sl-accent); animation:clTapPulse 1.6s ease-in-out infinite; }
@keyframes clTapPulse { 0%,100% { opacity:1; } 50% { opacity:0.55; } }
/* …and a big pill lands over the counterpart's tile — on a phone the status
   line is corner-small, but the face is where every eye already is. */
.cl-tap-overlay {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5;
    padding:14px 26px; border-radius:999px; border:1px solid rgba(255,255,255,0.35);
    background:rgba(5,8,16,0.82); color:#fff; font-family:inherit;
    font-size:15px; font-weight:800; letter-spacing:0.02em; cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,0.5); animation:clTapPulse 1.6s ease-in-out infinite;
    white-space:nowrap;
}
.cl-tap-overlay:hover { border-color:var(--sl-accent); color:var(--sl-accent); }
.sl-cl-tile.thinking .cl-status { color:var(--cl-ink-dim); letter-spacing:0.06em; font-weight:700; text-transform:none; font-style:italic; }

/* Self-view — camera off, as the control bar admits */
.sl-cl-self { position:absolute; right:16px; bottom:14px; width:112px; height:76px; border-radius:12px; background:#0a1220; border:1px solid var(--cl-line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; box-shadow:0 10px 26px rgba(0,0,0,0.45); }
.cl-self-initials { width:34px; height:34px; border-radius:11px; background:linear-gradient(135deg, #a259ff, #7c3aed); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:900; }
.cl-self-label { display:flex; align-items:center; gap:4px; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:var(--cl-ink-dim); }

/* ─── Transcript (slides away — a call is for listening to) ─── */
.sl-cl-transcript { flex-shrink:0; max-height:0; overflow:hidden; border-top:1px solid transparent; transition:max-height .3s ease, border-color .3s; }
.sl-cl-transcript.open { max-height:34vh; border-top-color:var(--cl-line); background:rgba(0,0,0,0.28); }
.cl-tr-title { display:flex; align-items:center; gap:6px; margin:0; padding:8px 18px 4px; font-size:9.5px; font-weight:900; text-transform:uppercase; letter-spacing:0.11em; color:var(--cl-ink-dim); }
.cl-tr-body { max-height:calc(34vh - 30px); overflow-y:auto; padding:4px 18px 10px; }
.cl-tr-line { margin-bottom:7px; font-size:12.5px; line-height:1.6; }
.cl-tr-who { font-size:9.5px; font-weight:900; text-transform:uppercase; letter-spacing:0.1em; color:var(--cl-teal); margin-right:7px; }
.cl-tr-line.me .cl-tr-who { color:#c4b5fd; }
.cl-tr-said { color:var(--cl-ink); }

/* ─── Control bar ─── */
.sl-cl-controls { flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:12px 18px; background:rgba(0,0,0,0.34); border-top:1px solid var(--cl-line); }
.sl-cl-cbtn { display:inline-flex; align-items:center; gap:8px; background:rgba(230,241,255,0.06); border:1px solid var(--cl-line); border-radius:999px; padding:8px 16px; color:var(--cl-ink); font-family:inherit; font-size:11.5px; font-weight:800; cursor:pointer; transition:all .18s; }
.sl-cl-cbtn:hover:not(:disabled) { border-color:var(--cl-teal); background:rgba(0,206,209,0.12); }
.sl-cl-cbtn:disabled { opacity:0.4; cursor:not-allowed; }
.sl-cl-cbtn.on { border-color:var(--cl-teal); background:rgba(0,206,209,0.16); color:#fff; }
.sl-cl-cbtn.end { background:linear-gradient(135deg,#f43f5e,#b91c3c); border-color:rgba(244,63,94,0.55); color:#fff; box-shadow:0 4px 14px rgba(244,63,94,0.28); }
.sl-cl-cbtn.end:hover { filter:brightness(1.08); border-color:#f43f5e; background:linear-gradient(135deg,#f43f5e,#b91c3c); }

/* ─── Composer, dressed for the call ─── */
.sl-cl-composer { border-top:1px solid var(--cl-line); background:rgba(0,0,0,0.20); }
.sl-cl-composer textarea { background:rgba(0,0,0,0.34); border-color:var(--cl-line); color:var(--cl-ink); }
.sl-cl-composer textarea::placeholder { color:rgba(136,146,176,0.8); }
.sl-cl-composer textarea:focus { border-color:var(--cl-teal); }

@media (max-width:900px) {
    .sl-cl-topbar { padding-left:14px; padding-right:14px; }
    .cl-live { display:none; }
    .sl-cl-tile { padding:20px 26px 16px; }
    .sl-cl-self { width:88px; height:62px; right:12px; bottom:12px; }
    .sl-cl-cbtn span { display:none; }
    .sl-cl-cbtn { padding:10px 14px; }
}
/* Squat frames — an EduLab section iframe can be short. The bust shrinks so the
   nameplate, controls and composer always keep their place. */
@media (max-height:660px) {
    .sl-cl-tile { gap:10px; padding:16px 30px 12px; }
    .sl-cl-self { width:92px; height:64px; }
    .sl-cl-transcript.open { max-height:28vh; }
    .cl-tr-body { max-height:calc(28vh - 28px); }
    .sl-cl-controls { padding:9px 18px; }
}
/* Very short frames with the transcript open: the tile lies down on its side —
   bust beside the nameplate — so the caller is never cropped in half. */
@media (max-height:560px) {
    .sl-cl-stage { padding:10px 14px; }
    .sl-cl-tile { flex-direction:row; align-items:center; gap:14px; padding:12px 18px; }
    .cl-plate { text-align:left; }
    .cl-status { position:absolute; right:16px; bottom:5px; }
    .sl-cl-transcript.open { max-height:24vh; }
    .cl-tr-body { max-height:calc(24vh - 26px); }
    .sl-cl-controls { padding:7px 18px; }
    .sl-cl-composer { padding-top:9px; padding-bottom:11px; }
}

/* ═══ DEBRIEF ═══ */
.sl-debrief { max-width:760px; margin:0 auto; padding:34px 26px 80px; display:flex; flex-direction:column; gap:14px; }
.sl-debrief-hero { display:flex; gap:20px; align-items:center; background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--sl-accent-border); border-radius:17px; padding:22px 24px; }
.sl-debrief-hero h2 { margin:0 0 6px; font-size:19px; letter-spacing:-0.01em; color:var(--text-strong, #fff); }
.sl-debrief-hero p.dim { margin:0; font-size:13px; line-height:1.6; }
.sl-debrief-score { font-size:42px; font-weight:900; color:var(--sl-accent); flex-shrink:0; letter-spacing:-0.03em; }
.sl-debrief-score small { font-size:16px; color:var(--text-muted, var(--text-dim)); font-weight:700; }
.sl-debrief .sl-card p { margin:0; font-size:13px; line-height:1.6; }

/* ═══ DRAWERS (library / export) ═══ */
.sl-overlay { position:fixed; inset:0; z-index:120; background:var(--overlay, rgba(3,8,16,0.96)); display:none; }
.sl-overlay.open { display:flex; justify-content:flex-end; }
.sl-drawer { width:420px; max-width:92vw; height:100%; background:var(--surface-solid, #0c1e35); border-left:1px solid var(--border-strong, rgba(0,206,209,0.20)); padding:20px 18px 40px; overflow-y:auto; animation:slidein .25s ease; }
@keyframes slidein { from { transform:translateX(30px); opacity:0; } to { transform:none; opacity:1; } }
.sl-drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.sl-drawer-head h3 { margin:0; font-size:15px; display:flex; align-items:center; gap:9px; color:var(--text-strong, #fff); }
.sl-drawer-group { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted, var(--text-dim)); margin:18px 0 8px; }
.sl-lib-item { display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:11px; border:1px solid transparent; transition:all .15s; }
.sl-lib-item:hover { background:var(--sl-accent-soft); }
.sl-lib-item.current { border-color:var(--sl-accent-border); }
.sl-lib-item b { display:block; font-size:13px; color:var(--text-strong, #fff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-lib-item span { display:block; font-size:11px; color:var(--text-muted, var(--text-dim)); }
.sl-export-btn { display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; background:var(--surface, rgba(23,42,69,0.30)); border:1px solid var(--border, rgba(0,206,209,0.08)); border-radius:12px; padding:13px 14px; cursor:pointer; transition:all .15s; color:var(--text, var(--text-light)); font-family:inherit; margin-bottom:9px; }
.sl-export-btn:hover { border-color:var(--sl-accent-border); }
.sl-export-btn:disabled { opacity:0.45; cursor:not-allowed; }
.eb-name { display:block; font-size:13px; font-weight:800; color:var(--text-strong, #fff); margin-bottom:2px; }
.eb-desc { display:block; font-size:11.5px; color:var(--text-muted, var(--text-dim)); line-height:1.5; }

/* ═══ HANDOFF BANNER ═══ */
.sl-handoff { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:140; display:flex; align-items:center; gap:13px; width:min(560px, 92vw); background:var(--surface-solid, #0c1e35); border:1px solid var(--sl-accent-border); border-radius:15px; padding:13px 16px; box-shadow:0 12px 40px var(--shadow-strong, rgba(0,0,0,0.4)); font-size:13px; color:var(--sl-accent); animation:bannerup .35s ease; }
.sl-handoff b, .sl-handoff .dim { color:var(--text, var(--text-light)); }
.sl-handoff .dim { color:var(--text-muted, var(--text-dim)); }
@keyframes bannerup { from { transform:translate(-50%, 16px); opacity:0; } to { transform:translate(-50%, 0); opacity:1; } }

/* ═══ AUTOSAVE & TOAST ═══ */
.sl-autosave { position:fixed; bottom:18px; right:18px; z-index:90; display:flex; align-items:center; gap:8px; background:var(--surface-solid, #0c1e35); border:1px solid var(--border-strong, rgba(0,206,209,0.20)); color:var(--text-muted, var(--text-dim)); border-radius:999px; padding:7px 14px; font-size:11.5px; font-weight:700; opacity:0; transform:translateY(8px); transition:all .3s; pointer-events:none; }
.sl-autosave.show { opacity:1; transform:none; }
.as-dot { width:7px; height:7px; border-radius:50%; background:var(--emerald); }
.sl-toast { position:fixed; bottom:18px; left:50%; transform:translate(-50%, 12px); z-index:150; display:flex; align-items:center; gap:9px; background:var(--surface-solid, #0c1e35); border:1px solid var(--sl-accent-border); color:var(--text, var(--text-light)); border-radius:12px; padding:11px 17px; font-size:12.5px; font-weight:700; opacity:0; transition:all .3s; pointer-events:none; box-shadow:0 10px 30px var(--shadow-strong, rgba(0,0,0,0.4)); max-width:min(560px, 92vw); }
.sl-toast.show { opacity:1; transform:translate(-50%, 0); }
.sl-toast i { color:var(--sl-accent); }
/* Sticky = error: stays until dismissed, clickable, rose-accented */
.sl-toast.sticky { pointer-events:auto; cursor:pointer; border-color:rgba(244,63,94,0.45); background:var(--surface-solid, #0c1e35); box-shadow:0 10px 30px var(--shadow-strong, rgba(0,0,0,0.4)), 0 0 0 3px rgba(244,63,94,0.08); }
.sl-toast.sticky > i { color:var(--rose); }
.sl-toast-close { background:rgba(244,63,94,0.10); border:1px solid rgba(244,63,94,0.30); border-radius:7px; color:var(--rose); cursor:pointer; padding:3px 5px; display:inline-flex; align-items:center; flex-shrink:0; margin-left:4px; }
.sl-toast-close:hover { background:rgba(244,63,94,0.2); }
.sl-toast-close i { color:var(--rose); }

/* ═══ AUTHORLAB CASE PICKER ═══ */
/* Source slots: one per source, each offering its routes as equal choices.
   Both slots share the same grid so their rows line up regardless of how many
   routes each offers (the case slot has three, the teaching note two). */
.sl-slot { margin-bottom:18px; }
.sl-slot:last-of-type { margin-bottom:0; }
.sl-slot-label { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; font-size:12.5px; font-weight:800; color:var(--text, var(--text-light)); }
.sl-slot-req, .sl-slot-opt { font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:3px 8px; }
.sl-slot-req { color:var(--sl-accent); background:var(--sl-accent-soft); border:1px solid var(--sl-accent-border); }
.sl-slot-opt { color:var(--text-muted, var(--text-dim)); border:1px solid var(--border-strong, rgba(0,206,209,0.20)); }
.sl-slot-hint { font-size:11.5px; font-weight:500; color:var(--text-muted, var(--text-dim)); }

.sl-choices { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; align-items:stretch; }
@media (max-width:760px) { .sl-choices { grid-template-columns:1fr; } }

.sl-choice { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; text-align:left; background:var(--surface, rgba(23,42,69,0.30)); border:1.5px dashed var(--border-strong, rgba(0,206,209,0.20)); border-radius:13px; padding:15px 15px 14px; cursor:pointer; font-family:inherit; line-height:1.45; color:var(--text, var(--text-light)); transition:border-color .18s, background .18s, transform .18s; }
.sl-choice:hover { border-color:var(--sl-accent-border); background:var(--sl-accent-soft); transform:translateY(-1px); }
.sl-choice:focus-visible { outline:2px solid var(--sl-accent); outline-offset:2px; }
.sl-choice .sc-icon { width:19px; height:19px; color:var(--sl-accent); margin-bottom:4px; }
.sl-choice .sc-title { font-size:13px; font-weight:800; line-height:1.35; }
.sl-choice .sc-hint { font-size:11.5px; line-height:1.45; color:var(--text-muted, var(--text-dim)); }

.sl-paste-title { margin:0 0 9px; font-size:12.5px; font-weight:800; color:var(--text, var(--text-light)); }

.sl-alp-overlay { position:fixed; inset:0; z-index:150; background:var(--overlay, rgba(3,8,16,0.86)); display:none; align-items:center; justify-content:center; padding:24px; }
.sl-alp-overlay.open { display:flex; }
.sl-alp { width:min(520px, 100%); max-height:80vh; display:flex; flex-direction:column; background:var(--surface-solid, #0c1e35); border:1px solid var(--sl-accent-border); border-radius:16px; box-shadow:0 20px 60px var(--shadow-strong, rgba(0,0,0,0.5)); overflow:hidden; animation:bannerup .28s ease; }
.sl-alp-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border-strong, rgba(0,206,209,0.16)); }
.sl-alp-head h3 { display:flex; align-items:center; gap:9px; margin:0; font-size:14px; font-weight:800; color:var(--text, var(--text-light)); }
.sl-alp-body { padding:10px; overflow-y:auto; }
.sl-alp-empty { margin:0; padding:26px 18px; text-align:center; font-size:12.5px; line-height:1.65; color:var(--text-muted, var(--text-dim)); }
.sl-alp-item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:transparent; border:1px solid transparent; border-radius:11px; padding:12px 13px; cursor:pointer; color:var(--text, var(--text-light)); font-family:inherit; transition:all .16s; }
.sl-alp-item:hover { background:var(--sl-accent-soft); border-color:var(--sl-accent-border); }
.sl-alp-item .alp-main { flex:1; min-width:0; }
.sl-alp-item .alp-title { display:block; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-alp-item .alp-meta { display:block; font-size:11px; color:var(--text-muted, var(--text-dim)); margin-top:2px; }

/* ═══ THE INTERVIEW ═══
   The panel sits along the far side of a long rectangular table, facing you.
   Cooler and more institutional than the boardroom on purpose: this is a room
   where you are being assessed, not one you are chairing. */
.sl-iv-room { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(148,163,184,0.10), transparent 60%),
      linear-gradient(180deg, var(--surface-solid, #0b1727) 0%, var(--surface-solid, #0a1420) 100%);
    border:1px solid var(--border-strong, rgba(0,206,209,0.16)); transition:box-shadow .4s; }
.sl-iv-room.deliberating { box-shadow:inset 0 0 60px rgba(148,163,184,0.12); }
.sl-iv-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border-strong, rgba(0,206,209,0.12)); }

.sl-iv-panelrow { position:relative; flex:1; min-height:250px; }
.sl-iv-seat { position:absolute; top:22px; transform:translateX(-50%); width:132px; display:flex; flex-direction:column; align-items:center; gap:7px; transition:transform .25s; }
.sl-iv-seat.speaking { transform:translateX(-50%) translateY(-3px); }

.sl-iv-avatar { position:relative; width:52px; height:52px; border-radius:50%; display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
    background:color-mix(in srgb, var(--seat-color) 22%, transparent); border:2px solid color-mix(in srgb, var(--seat-color) 55%, transparent); transition:box-shadow .25s, border-color .25s; }
.sl-iv-seat.speaking .sl-iv-avatar { border-color:var(--seat-color); box-shadow:0 0 0 4px color-mix(in srgb, var(--seat-color) 24%, transparent); }
.sl-iv-avatar img { width:100%; height:100%; object-fit:cover; }
.sl-iv-avatar .ba-head { position:absolute; top:9px; width:17px; height:17px; border-radius:50%; background:var(--seat-color); opacity:.92; }
.sl-iv-avatar .ba-body { position:absolute; bottom:-9px; width:34px; height:26px; border-radius:17px 17px 0 0; background:var(--seat-color); opacity:.75; }

.sl-iv-plate { text-align:center; width:100%; }
.sl-iv-plate b { display:block; font-size:11.5px; font-weight:800; color:var(--text, var(--text-light)); line-height:1.3; }
.sl-iv-plate > span { display:block; font-size:10px; color:var(--text-muted, var(--text-dim)); line-height:1.35; margin-top:1px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iv-chairtag { font-size:8.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--sl-accent); background:var(--sl-accent-soft); border-radius:999px; padding:1px 5px; vertical-align:middle; }

/* Live impression — the mechanic that makes this format its own thing. */
.sl-iv-imp { display:block; width:100%; height:3px; margin-top:5px; border-radius:999px; background:rgba(148,163,184,0.20); overflow:hidden; }
.sl-iv-imp .iv-imp-fill { display:block; height:100%; border-radius:999px; transition:width .5s cubic-bezier(.2,.9,.3,1), background .5s; }
.sl-iv-imp.warm .iv-imp-fill { background:#34d399; }
.sl-iv-imp.even .iv-imp-fill { background:#94a3b8; }
.sl-iv-imp.cold .iv-imp-fill { background:#fb7185; }

/* Bubbles open DOWNWARD: every interview seat sits at the top of the room,
   so an upward bubble clips straight off the frame. */
.sl-iv-bubble { position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%); width:max(180px, 100%); max-width:230px;
    background:var(--surface-solid, #12233a); border:1px solid var(--sl-accent-border); border-radius:13px; padding:10px 12px;
    font-size:12px; line-height:1.5; color:var(--text, var(--text-light)); box-shadow:0 10px 30px var(--shadow-strong, rgba(0,0,0,0.45));
    animation:bannerup .25s ease; z-index:5; }
.sl-iv-bubble::after { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-bottom-color:var(--sl-accent-border); }

/* The table: a slab in perspective between you and them. */
.sl-iv-table { position:relative; height:54px; flex-shrink:0;
    background:linear-gradient(180deg, rgba(148,163,184,0.16), rgba(148,163,184,0.06));
    border-top:1px solid rgba(148,163,184,0.28);
    clip-path:polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.sl-iv-table .iv-table-edge { position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg, transparent, rgba(203,213,225,0.4), transparent); }

.sl-iv-you { display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 12px; font-size:11.5px; color:var(--text-muted, var(--text-dim)); border-top:1px solid var(--border-strong, rgba(0,206,209,0.10)); }
.sl-iv-you b { color:var(--text, var(--text-light)); }

/* Transcript glass. Uses the shared --panel-rgb trick (23,42,69 dark →
   255,255,255 light). The previous var(--overlay-soft, …) was permanently dark
   — that token is defined nowhere, so the fallback always won, leaving
   theme-flipped dark text on a dark panel in light mode. */
.sl-iv-notes { position:absolute; right:12px; top:52px; width:210px; max-height:44%; display:flex; flex-direction:column;
    background:rgba(var(--panel-rgb, 23, 42, 69), 0.78); border:1px solid var(--border-strong, rgba(0,206,209,0.14)); border-radius:12px; padding:9px 10px; backdrop-filter:blur(6px); }
/* The bm-* rules are scoped to .sl-br-minutes, so this panel's text was riding
   on inheritance — pin it to the boardroom's treatment explicitly. */
.sl-iv-notes .bm-title { display:flex; align-items:center; gap:6px; margin:0 0 6px; font-size:9.5px; font-weight:900; text-transform:uppercase; letter-spacing:0.09em; color:var(--text-muted, var(--text-dim)); }
.sl-iv-notes .bm-body { overflow-y:auto; min-height:0; }
.sl-iv-notes .bm-body p { margin:0 0 6px; font-size:10.5px; line-height:1.5; color:var(--text, var(--text-light)); }
.sl-iv-notes .bm-body b { color:var(--sl-accent); font-size:9.5px; letter-spacing:0.04em; }
@media (max-width:900px) { .sl-iv-notes { display:none; } }

.sl-iv-thinking { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; align-items:center; gap:9px;
    background:var(--surface-solid, #0c1e35); border:1px solid var(--border-strong, rgba(0,206,209,0.20)); border-radius:999px; padding:7px 14px;
    font-size:11.5px; color:var(--text-muted, var(--text-dim)); z-index:6; }

.sl-iv-tapover { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:9px;
    background:var(--surface-solid, #12233a); color:var(--text, var(--text-light)); border:1.5px solid var(--sl-accent); border-radius:999px;
    padding:13px 20px; font-family:inherit; font-size:13.5px; font-weight:800; cursor:pointer; z-index:20;
    box-shadow:0 12px 34px var(--shadow-strong, rgba(0,0,0,0.5)); animation:ivpulse 1.5s ease-in-out infinite; }
@keyframes ivpulse { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.045); } }

.sl-iv-improw { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.sl-iv-improw .ivr-name { flex:0 0 auto; max-width:88px; font-size:11.5px; font-weight:700; color:var(--text, var(--text-light)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-iv-improw .sl-iv-imp { flex:1; margin-top:0; height:5px; }
.sl-iv-improw .ivr-val { flex:0 0 auto; font-size:11px; font-weight:800; color:var(--text-muted, var(--text-dim)); min-width:20px; text-align:right; }

/* Verdict card on the debrief */
.sl-iv-verdict { border-radius:15px; padding:16px 18px; margin-bottom:14px; border:1px solid var(--border-strong, rgba(0,206,209,0.18)); background:var(--surface, rgba(23,42,69,0.30)); }
.sl-iv-verdict .ivv-kicker { display:flex; align-items:center; gap:7px; margin:0 0 7px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted, var(--text-dim)); }
.sl-iv-verdict .ivv-outcome { margin:0 0 5px; font-size:22px; font-weight:800; letter-spacing:-0.01em; }
.sl-iv-verdict.offer { border-color:rgba(52,211,153,0.4); }
.sl-iv-verdict.offer .ivv-outcome { color:#34d399; }
.sl-iv-verdict.hold { border-color:rgba(148,163,184,0.4); }
.sl-iv-verdict.hold .ivv-outcome { color:#cbd5e1; }
.sl-iv-verdict.no { border-color:rgba(251,113,133,0.4); }
.sl-iv-verdict.no .ivv-outcome { color:#fb7185; }
.sl-iv-verdict .ivv-head { margin:0; font-size:13.5px; line-height:1.6; color:var(--text, var(--text-light)); }
.sl-iv-verdict .ivv-reasons { margin:9px 0 0; padding-left:18px; }
.sl-iv-verdict .ivv-reasons li { font-size:12.5px; line-height:1.65; color:var(--text-muted, var(--text-dim)); }

/* ═══ STAKEHOLDER MAP ═══
   Cartographic rather than conversational: a cool slate field with survey-style
   grid lines, parties plotted by influence and stance, alliance and rivalry
   threads drawn between them. Deliberately unlike the violet chrome — this is a
   map you read, not a room you sit in. */
.sm-room { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
    background:
      radial-gradient(90% 60% at 50% 0%, rgba(56,110,160,0.10), transparent 62%),
      linear-gradient(180deg, #0b1a2b 0%, #0a1523 100%);
    border:1px solid rgba(96,140,190,0.20); transition:box-shadow .4s; }
.sm-room.working { box-shadow:inset 0 0 70px rgba(56,110,160,0.16); }
html[data-theme="light"] .sm-room {
    background: radial-gradient(90% 60% at 50% 0%, rgba(29,111,184,0.06), transparent 62%), var(--surface, #fff);
    border-color: var(--border, rgba(15,30,56,0.10)); }

.sm-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px; border-bottom:1px solid rgba(96,140,190,0.15); }
.sm-moves { font-size:11px; font-weight:700; color:var(--text-muted, #8fa6c2); white-space:nowrap; }
.sm-moves b { color:var(--text, var(--text-light)); font-size:13px; }

.sm-gridwrap { position:relative; flex:1; min-height:280px; padding:22px 20px 26px 34px; }
.sm-axis-y { position:absolute; left:6px; top:50%; transform:rotate(-90deg) translateX(50%); transform-origin:left center;
    font-size:8.5px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:rgba(143,166,194,0.55); white-space:nowrap; }
.sm-axis-x { position:absolute; left:0; right:0; bottom:6px; text-align:center;
    font-size:8.5px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:rgba(143,166,194,0.55); }

.sm-grid { position:relative; width:100%; height:100%;
    background-image:
      linear-gradient(rgba(96,140,190,0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(96,140,190,0.09) 1px, transparent 1px);
    background-size:10% 10%;
    border:1px solid rgba(96,140,190,0.22); border-radius:10px; }
.sm-grid::before, .sm-grid::after { content:''; position:absolute; background:rgba(96,140,190,0.28); }
.sm-grid::before { left:50%; top:0; bottom:0; width:1px; }
.sm-grid::after { top:50%; left:0; right:0; height:1px; }
html[data-theme="light"] .sm-grid {
    background-image: linear-gradient(rgba(29,111,184,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(29,111,184,0.07) 1px, transparent 1px);
    border-color: rgba(29,111,184,0.20); }

.sm-quad { position:absolute; font-size:8px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
    color:rgba(143,166,194,0.35); pointer-events:none; }
.sm-quad.tl { top:7px; left:9px; } .sm-quad.tr { top:7px; right:9px; }
.sm-quad.bl { bottom:7px; left:9px; } .sm-quad.br { bottom:7px; right:9px; }

.sm-threads { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.sm-thread.ally  { stroke:rgba(52,211,153,0.40); }
.sm-thread.rival { stroke:rgba(251,113,133,0.38); stroke-dasharray:3 3; }

/* Nodes are positioned by stance (x) and influence (y). */
.sm-node { position:absolute; transform:translate(-50%, 50%); display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; padding:0; cursor:pointer; font-family:inherit; z-index:3; transition:transform .35s cubic-bezier(.2,.9,.3,1); }
.sm-node:hover { transform:translate(-50%, 50%) scale(1.06); }
.sm-node-dot { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--node-color) 30%, transparent);
    border:2px solid var(--node-color); color:#fff; transition:box-shadow .25s, border-color .25s; }
.sm-node.on .sm-node-dot { box-shadow:0 0 0 5px color-mix(in srgb, var(--node-color) 22%, transparent); }
.sm-node.pulse .sm-node-dot { animation:smPulse 1.4s ease-out 2; }
@keyframes smPulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--node-color) 55%, transparent);} 100%{box-shadow:0 0 0 16px transparent;} }
.sm-node-name { font-size:9.5px; font-weight:800; color:var(--text, var(--text-light)); white-space:nowrap;
    text-shadow:0 1px 3px rgba(0,0,0,0.55); }
html[data-theme="light"] .sm-node-name { text-shadow:0 1px 2px rgba(255,255,255,0.8); }
.sm-node-delta { position:absolute; top:-13px; font-size:9px; font-weight:900; padding:1px 5px; border-radius:999px; }
.sm-node-delta.up { color:#34d399; background:rgba(52,211,153,0.15); }
.sm-node-delta.down { color:#fb7185; background:rgba(251,113,133,0.15); }
.sm-node.q-blocker  .sm-node-dot { border-style:solid; }
.sm-node.q-champion .sm-node-dot { box-shadow:inset 0 0 0 2px rgba(52,211,153,0.45); }

/* Detail panel under the map */
.sm-detail { flex-shrink:0; max-height:38%; overflow-y:auto; padding:12px 15px; border-top:1px solid rgba(96,140,190,0.15); }
.sm-hint { margin:0; font-size:12px; color:var(--text-muted, #8fa6c2); text-align:center; padding:14px 0; }
.sm-working { display:flex; align-items:center; gap:9px; justify-content:center; padding:16px 0; font-size:12px; color:var(--text-muted, #8fa6c2); }
.sm-d-name { margin:0 0 2px; font-size:13.5px; font-weight:800; color:var(--text, var(--text-light)); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.sm-d-quad { font-size:8px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; }
.sm-d-quad.q-blocker  { color:#fb7185; background:rgba(251,113,133,0.14); }
.sm-d-quad.q-champion { color:#34d399; background:rgba(52,211,153,0.14); }
.sm-d-quad.q-waverer  { color:#fbbf24; background:rgba(251,191,36,0.14); }
.sm-d-quad.q-goodwill, .sm-d-quad.q-noise { color:#94a3b8; background:rgba(148,163,184,0.14); }
.sm-d-hard { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#fb7185; display:inline-flex; align-items:center; gap:3px; }
.sm-d-role { margin:0 0 9px; font-size:10.5px; color:var(--text-muted, #8fa6c2); }
.sm-d-agenda p { margin:0 0 5px; font-size:11.5px; line-height:1.55; color:var(--text-muted, #8fa6c2); }
.sm-d-agenda b { color:var(--text, var(--text-light)); }
.sm-d-agenda .revealed { color:#34d399; } .sm-d-agenda .revealed b { color:#34d399; }
.sm-d-agenda .redline { color:#fb7185; } .sm-d-agenda .redline b { color:#fb7185; }
.sm-d-agenda .unknown { display:flex; align-items:center; gap:6px; color:#fbbf24; font-style:italic; }

.sm-d-moves { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.sm-move { display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer; font-family:inherit;
    background:rgba(96,140,190,0.07); border:1px solid rgba(96,140,190,0.18); border-radius:10px; padding:9px 11px; transition:all .18s; }
.sm-move:hover:not(:disabled) { background:rgba(96,140,190,0.14); border-color:rgba(96,140,190,0.4); transform:translateX(2px); }
.sm-move:disabled { opacity:0.4; cursor:not-allowed; }
.sm-move-kind { flex-shrink:0; font-size:7.5px; font-weight:900; letter-spacing:0.08em; text-transform:uppercase; padding:2px 6px; border-radius:4px; }
.k-engage { color:#60a5fa; background:rgba(96,165,250,0.15); }
.k-concede { color:#34d399; background:rgba(52,211,153,0.15); }
.k-pressure { color:#fbbf24; background:rgba(251,191,36,0.15); }
.k-coalition { color:#a78bfa; background:rgba(167,139,250,0.15); }
.k-escalate { color:#fb7185; background:rgba(251,113,133,0.15); }
.sm-move-label { flex:1; font-size:11.5px; line-height:1.45; color:var(--text, var(--text-light)); }
.sm-move-cost { flex-shrink:0; font-size:9px; font-weight:800; color:#fbbf24; background:rgba(251,191,36,0.12); border-radius:999px; padding:2px 7px; }

/* Reaction card over the map */
.sm-reaction { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:min(440px, calc(100% - 28px)); z-index:20;
    background:var(--surface-solid, #12233a); border:1px solid var(--who); border-left:3px solid var(--who);
    border-radius:13px; padding:13px 34px 13px 15px; box-shadow:0 16px 44px rgba(0,0,0,0.45); animation:bannerup .28s ease; }
.sm-reaction-x { position:absolute; top:9px; right:9px; background:none; border:none; cursor:pointer; color:var(--text-muted, #8fa6c2); padding:2px; }
.sm-r-who { margin:0 0 4px; font-size:10px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--who); }
.sm-r-text { margin:0; font-size:12.5px; line-height:1.6; color:var(--text, var(--text-light)); }
.sm-r-ripple { margin-top:9px; padding-top:8px; border-top:1px solid rgba(96,140,190,0.18); font-size:11px; color:var(--text-muted, #8fa6c2); }
.sm-r-ripple .up { color:#34d399; font-weight:800; } .sm-r-ripple .down { color:#fb7185; font-weight:800; }
.sm-r-side { margin-top:6px; display:flex; flex-direction:column; gap:2px; font-size:10.5px; font-style:italic; color:var(--text-muted, #8fa6c2); }

/* Side panel bits */
.sm-decision { margin:0 0 10px; font-size:11.5px; line-height:1.55; color:var(--text-muted, #8fa6c2); }
.sm-support-bar { position:relative; height:8px; border-radius:999px; background:rgba(96,140,190,0.15); overflow:visible; }
.sm-support-fill { height:100%; border-radius:999px; background:#60a5fa; transition:width .6s cubic-bezier(.2,.9,.3,1); }
.sm-support-fill.ok { background:#34d399; }
.sm-support-mark { position:absolute; top:-3px; width:2px; height:14px; background:var(--text, #e6f1ff); border-radius:1px; }
.sm-support-txt { margin:7px 0 0; font-size:11px; color:var(--text-muted, #8fa6c2); }
.sm-support-txt b { color:var(--text, var(--text-light)); }
.sm-capital { display:flex; gap:5px; }
.sm-capital span { width:14px; height:14px; border-radius:50%; background:rgba(96,140,190,0.15); border:1px solid rgba(96,140,190,0.25); }
.sm-capital span.on { background:#fbbf24; border-color:#fbbf24; }
.sm-log { display:flex; flex-direction:column; gap:7px; max-height:150px; overflow-y:auto; }
.sm-log-row { font-size:11px; line-height:1.4; }
.sm-log-move { display:block; color:var(--text, var(--text-light)); }
.sm-log-meta { display:block; color:var(--text-muted, #8fa6c2); font-size:10px; }
.sm-log-meta b.up { color:#34d399; } .sm-log-meta b.down { color:#fb7185; }

/* Outcome + debrief */
.sm-outcome { text-align:center; margin-bottom:18px; }
.sm-o-kicker { margin:0 0 4px; font-size:9.5px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted, #8fa6c2); }
.sm-o-result { margin:0 0 4px; font-size:26px; font-weight:800; letter-spacing:-0.02em; }
.sm-outcome.carried .sm-o-result, .sm-verdict.carried .sm-o-result { color:#34d399; }
.sm-outcome.costly .sm-o-result,  .sm-verdict.costly .sm-o-result  { color:#fbbf24; }
.sm-outcome.defeated .sm-o-result,.sm-verdict.defeated .sm-o-result{ color:#fb7185; }
.sm-o-sub { margin:0; font-size:12px; color:var(--text-muted, #8fa6c2); }
.sm-verdict .sm-o-result { font-size:22px; margin-bottom:9px; }
.bn-dg.warn { color:#fbbf24; }

.sm-shift { display:flex; flex-direction:column; gap:9px; }
.sm-shift-row { display:flex; align-items:center; gap:10px; }
.sm-sh-name { flex:0 0 auto; width:118px; font-size:11.5px; font-weight:700; color:var(--text, var(--text-light));
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sm-sh-bar { position:relative; flex:1; height:6px; border-radius:999px; background:rgba(96,140,190,0.15); }
.sm-sh-bar .from, .sm-sh-bar .to { position:absolute; top:50%; transform:translate(-50%,-50%); border-radius:50%; }
.sm-sh-bar .from { width:7px; height:7px; background:rgba(148,163,184,0.7); }
.sm-sh-bar .to { width:11px; height:11px; border:2px solid var(--surface-solid, #0c1e35); }
.sm-sh-bar .to.up { background:#34d399; } .sm-sh-bar .to.down { background:#fb7185; }
.sm-sh-val { flex:0 0 auto; width:34px; text-align:right; font-size:11px; font-weight:800; color:var(--text-muted, #8fa6c2); }
.sm-sh-val.up { color:#34d399; } .sm-sh-val.down { color:#fb7185; }

@media (max-width: 760px) {
    .sm-gridwrap { min-height:230px; padding:16px 12px 22px 26px; }
    .sm-node-name { font-size:8.5px; }
    .sm-detail { max-height:44%; }
}

/* Debrief written from a reply that was cut off — say so plainly rather than
   present a half-written assessment as a complete one. */
.sl-debrief-partial {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 0 16px; padding: 11px 14px; border-radius: 11px;
    background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.30);
    font-size: 11.5px; line-height: 1.6; color: var(--amber, #f59e0b);
}
.sl-debrief-partial i { flex-shrink: 0; margin-top: 2px; }