*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100vh;background:#0a0a0a;font-family:-apple-system,'PingFang SC','Hiragino Sans GB','Source Han Sans SC',sans-serif;color:#f0f0f0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:root{--muted:#6a6a6a;--bg:#0a0a0a;--text:rgba(255,255,255,.78);--text-strong:rgba(255,255,255,.95);--text-soft:rgba(255,255,255,.55);--line:rgba(255,255,255,.1);--line-soft:rgba(255,255,255,.06);--line-strong:rgba(255,255,255,.22)}
/* ══ LAYOUT ═══════════════════════════════ */
#app{max-width:760px;margin:0 auto;padding:24px 20px 80px;min-height:100vh}
/* ── Top bar ── */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:10px;flex-wrap:wrap}
.brand{font-size:13px;color:rgba(255,255,255,.55);letter-spacing:3px;text-transform:uppercase;font-weight:500}
.settings-btn{background:transparent;border:1px solid var(--line);color:var(--text-soft);padding:6px 12px;border-radius:5px;font-size:11px;cursor:pointer;font-family:inherit;transition:all .2s}
.settings-btn:hover{border-color:var(--line-strong);color:#fff}
.settings-btn-primary{background:rgba(176,176,255,.12);border-color:rgba(176,176,255,.35);color:rgba(255,255,255,.9);font-weight:500}
.settings-btn-primary:hover{background:rgba(176,176,255,.22);border-color:rgba(176,176,255,.6);color:#fff}
/* Project continuation banner (Step 1, when user clicks "+ 新一轮追踪") */
.project-banner{background:rgba(176,176,255,.08);border:1px solid rgba(176,176,255,.35);border-radius:8px;padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.project-banner-text{flex:1;min-width:0}
.project-banner-label{font-size:11px;color:rgba(176,176,255,.75);letter-spacing:.4px;margin-bottom:3px;font-weight:500}
.project-banner-name{font-size:14px;color:#fff;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-banner-clear{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.55);padding:5px 10px;border-radius:5px;font-size:11px;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0}
.project-banner-clear:hover{border-color:rgba(255,255,255,.45);color:#fff}
/* Per-project "新一轮" button inside Problem Library */
.pl-project-new{background:rgba(176,176,255,.12);border:1px solid rgba(176,176,255,.3);color:rgba(176,176,255,.95);padding:4px 10px;border-radius:12px;font-size:11px;cursor:pointer;font-family:inherit;flex-shrink:0;transition:all .15s;font-weight:500}
.pl-project-new:hover{background:rgba(176,176,255,.22);border-color:rgba(176,176,255,.55);color:#fff}
/* 2026-04-26 v3 · Project Timeline View — cross-session 飞轮可视化 */
.tl-card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px;padding:12px 14px;position:relative}
.tl-card[data-step="8"]{border-color:rgba(78,205,196,.32);background:rgba(78,205,196,.04)}
.tl-card-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.tl-card-num{font-size:12.5px;font-weight:600;color:rgba(176,176,255,.95);letter-spacing:.3px}
.tl-card-date{font-size:11px;color:rgba(255,255,255,.45);flex:1}
.tl-card-go{background:transparent;border:1px solid var(--line);color:var(--text-soft);padding:4px 10px;border-radius:12px;font-size:11px;cursor:pointer;font-family:inherit}
.tl-card-go:hover{border-color:rgba(176,176,255,.55);color:#fff}
.tl-card-topic{font-size:13px;color:var(--text-strong);font-weight:500;margin-bottom:4px;line-height:1.5}
.tl-card-decision{font-size:11.5px;color:rgba(255,255,255,.65);line-height:1.6;margin:5px 0}
.tl-belief{font-size:11.5px;color:rgba(255,255,255,.78);margin:6px 0 2px}
.tl-belief strong{color:#fff;font-weight:600;letter-spacing:.3px}
.tl-delta{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:8px;letter-spacing:.5px}
.tl-delta-up{background:rgba(78,205,196,.15);color:rgba(120,235,220,.95)}
.tl-delta-down{background:rgba(255,107,107,.15);color:rgba(255,150,150,.95)}
.tl-delta-flat{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5)}
.tl-commits{margin-top:6px;font-size:11px;color:rgba(255,255,255,.62);line-height:1.7;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tl-commit{background:rgba(255,255,255,.04);border:1px solid var(--line-soft);border-radius:10px;padding:2px 8px;font-size:10.5px}
.tl-line{width:1px;height:18px;background:linear-gradient(to bottom,rgba(176,176,255,.45),rgba(176,176,255,.05));margin:0 auto}
.tl-curve{margin-top:14px;padding:10px 12px;background:rgba(176,176,255,.04);border:1px solid rgba(176,176,255,.18);border-radius:8px}
.tl-curve-label{font-size:10.5px;color:rgba(176,176,255,.85);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:6px}
.tl-footer{margin-top:18px;display:flex;justify-content:center}
.tl-footer .btn{padding:10px 18px;font-size:13px}
.pl-project-timeline{background:transparent;border:1px solid rgba(176,176,255,.3);color:rgba(176,176,255,.95);padding:4px 10px;border-radius:12px;font-size:11px;cursor:pointer;font-family:inherit;flex-shrink:0;transition:all .15s;font-weight:500}
.pl-project-timeline:hover{background:rgba(176,176,255,.18);border-color:rgba(176,176,255,.55);color:#fff}
/* 2026-04-26 v2 · Step 8 folded sections — todos and pre-mortem expanded; everything
else collapsed. Lets the case-owner see what to DO + what could fail without
wading through analysis cards. */
.s8-fold{margin:12px 0;border:1px solid var(--line-soft);border-radius:8px;background:rgba(255,255,255,.02)}
.s8-fold>summary{padding:11px 14px;cursor:pointer;color:rgba(255,255,255,.62);font-size:12.5px;font-weight:500;letter-spacing:.3px;list-style:none;user-select:none;transition:background .15s}
.s8-fold>summary::-webkit-details-marker{display:none}
.s8-fold>summary:hover{background:rgba(255,255,255,.04);color:#fff}
.s8-fold[open]>summary{border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.04);color:rgba(255,255,255,.85)}
.s8-fold-body{padding:14px 16px}
.s8-fold-body h4{font-size:12.5px;color:rgba(176,176,255,.85);margin:0 0 8px;font-weight:600;letter-spacing:.3px}
/* F2 (2026-04-26) · Per-bubble follow-up composer — sits inside .rn-bubble-overlay */
.fu-composer{margin-top:14px;padding:12px 14px;background:rgba(176,176,255,.04);border:1px solid rgba(176,176,255,.18);border-radius:9px}
.fu-label{font-size:11.5px;color:rgba(176,176,255,.85);font-weight:500;letter-spacing:.3px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.fu-counter{font-size:10.5px;color:rgba(255,255,255,.4);font-weight:400}
.fu-input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:9px 11px;color:#f0f0f0;font-size:13px;line-height:1.6;resize:vertical;font-family:inherit;outline:none}
.fu-input:focus{border-color:rgba(176,176,255,.45);background:rgba(255,255,255,.06)}
.fu-input:disabled{opacity:.4;cursor:not-allowed}
.fu-input::placeholder{color:rgba(255,255,255,.28)}
.fu-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.fu-send{background:rgba(176,176,255,.18);border:1px solid rgba(176,176,255,.4);color:#fff;padding:6px 14px;border-radius:6px;font-size:12.5px;font-family:inherit;cursor:pointer;transition:all .15s}
.fu-send:hover{background:rgba(176,176,255,.32);border-color:rgba(176,176,255,.65)}
.fu-send:disabled{opacity:.45;cursor:not-allowed}
.fu-status{font-size:11px;color:rgba(255,255,255,.5);flex:1}
.fu-live{margin-top:14px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.12)}
.fu-live-q{font-size:12.5px;color:rgba(255,255,255,.62);margin-bottom:8px;line-height:1.7}
.fu-live-a{font-size:13.5px;color:var(--text-strong);line-height:1.85}
.fu-live-a.cur::after{content:'▎';margin-left:1px;animation:fuCursor 1.1s steps(1) infinite;color:rgba(176,176,255,.7)}
@keyframes fuCursor{50%{opacity:0}}
/* F6a (2026-04-26) · Replay button — 在已完成的 step 区域底部显示，点击重跑后续步骤 */
.replay-btn-wrap{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-soft);display:flex;justify-content:flex-end}
.replay-btn{background:transparent;border:1px solid var(--line);color:rgba(255,255,255,.45);padding:6px 12px;border-radius:14px;font-size:11.5px;cursor:pointer;font-family:inherit;transition:all .18s;letter-spacing:.2px}
.replay-btn:hover{border-color:rgba(255,140,66,.5);color:rgba(255,180,120,.95);background:rgba(255,140,66,.08)}
/* F4 (2026-04-26) · Example Questions Library — 9 类目精选题，暗示话题严肃度 */
.example-questions{margin-top:30px;padding-top:22px;border-top:1px solid var(--line-soft)}
.eq-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.eq-title{font-size:14px;font-weight:600;color:var(--text-strong);letter-spacing:.3px}
.eq-sub{font-size:11.5px;color:var(--text-soft)}
.eq-chips{display:flex;gap:7px;flex-wrap:wrap}
.eq-cat-chip{display:flex;align-items:center;gap:6px;padding:7px 13px 7px 11px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid var(--line-soft);color:var(--text-soft);font-size:12px;font-family:inherit;cursor:pointer;transition:all .2s;line-height:1.3}
.eq-cat-chip:hover{border-color:rgba(255,255,255,.3);color:var(--text-strong);background:rgba(255,255,255,.05)}
.eq-cat-chip.active{border-color:rgba(176,176,255,.5);background:rgba(176,176,255,.1);color:#fff;box-shadow:0 0 0 1px rgba(176,176,255,.2)}
.eq-icon{font-size:13px;flex-shrink:0}
.eq-name{font-weight:500;letter-spacing:.2px}
.eq-panel{margin-top:12px;padding:10px 0;border-top:1px dashed var(--line-soft);display:flex;flex-direction:column;gap:8px}
.eq-question{padding:11px 14px;background:rgba(255,255,255,.025);border:1px solid var(--line-soft);border-radius:7px;font-size:13px;color:rgba(255,255,255,.7);line-height:1.65;cursor:pointer;transition:all .15s}
.eq-question:hover{border-color:rgba(176,176,255,.45);background:rgba(176,176,255,.05);color:#fff;transform:translateX(2px)}
/* Problem Library on Step 1 home (主页问题库) */
.problem-library{margin-top:40px;padding-top:28px;border-top:1px solid var(--line-soft)}
.problem-library-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.problem-library-title{font-size:15px;font-weight:600;color:var(--text-strong);letter-spacing:.3px}
.problem-library-sub{font-size:12px;color:var(--text-soft);margin-top:3px}
.problem-library-empty{font-size:13px;color:rgba(255,255,255,.45);padding:20px 14px;text-align:center;line-height:1.8;background:rgba(255,255,255,.015);border:1px dashed var(--line);border-radius:8px}
.pl-project{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:9px;margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.pl-project:hover{border-color:rgba(255,255,255,.22)}
.pl-project.open{border-color:rgba(176,176,255,.35);background:rgba(176,176,255,.03)}
.pl-project-head{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;user-select:none}
.pl-chev{font-size:11px;color:rgba(255,255,255,.4);width:12px;transition:transform .2s;flex-shrink:0}
.pl-project.open .pl-chev{transform:rotate(90deg);color:rgba(176,176,255,.9)}
.pl-project-name{flex:1;font-size:14px;font-weight:500;color:var(--text);line-height:1.5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-project-meta{font-size:11px;color:rgba(255,255,255,.38);display:flex;gap:8px;align-items:center;flex-shrink:0}
.pl-project-count{background:rgba(255,255,255,.07);color:rgba(255,255,255,.65);padding:2px 8px;border-radius:10px;font-size:10.5px;font-weight:500}
.pl-sessions{display:none;padding:0 16px 14px 40px;border-top:1px solid var(--line-soft)}
.pl-project.open .pl-sessions{display:block}
.pl-session{padding:12px 14px;margin-top:10px;background:rgba(255,255,255,.02);border:1px solid var(--line-soft);border-radius:7px;cursor:pointer;transition:all .2s}
.pl-session:hover{border-color:rgba(176,176,255,.4);background:rgba(176,176,255,.05)}
.pl-session.current{border-color:rgba(78,205,196,.5);background:rgba(78,205,196,.06)}
.pl-session-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.pl-session-date{font-size:11px;color:rgba(255,255,255,.4);white-space:nowrap;flex-shrink:0}
.pl-session-step{font-size:10px;padding:2px 7px;border-radius:9px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);font-weight:500}
.pl-session-step.done{background:rgba(78,205,196,.12);color:rgba(78,205,196,.9)}
.pl-session-summary{font-size:12.5px;color:rgba(255,255,255,.65);line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pl-session-summary.loading{color:rgba(255,255,255,.3);font-style:italic}
/* Follow-up badge (Phase 2.3) */
#followup-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:4px;background:#ff6b6b;color:#fff;border-radius:8px;font-size:10px;font-weight:600;line-height:1}
/* Follow-up item card */
.fu-card{background:rgba(255,224,102,.06);border:1px solid rgba(255,224,102,.28);border-radius:9px;padding:14px 16px;margin-bottom:12px}
.fu-meta{display:flex;gap:10px;align-items:baseline;margin-bottom:8px;font-size:11.5px;color:rgba(255,255,255,.5)}
.fu-days{background:rgba(255,140,66,.18);color:rgba(255,180,120,.95);padding:2px 8px;border-radius:10px;font-size:10.5px;font-weight:600;letter-spacing:.3px}
.fu-todo{font-size:14.5px;color:var(--text-strong);line-height:1.65;margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--line-soft)}
.fu-status-label{font-size:12px;color:rgba(255,255,255,.68);margin-bottom:6px;font-weight:500}
.fu-status-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.fu-status-opt{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text-soft);padding:5px 11px;border-radius:14px;font-size:12px;cursor:pointer;font-family:inherit;transition:all .15s}
.fu-status-opt:hover{border-color:rgba(255,255,255,.35);color:#fff}
.fu-status-opt.sel{background:rgba(176,176,255,.2);border-color:rgba(176,176,255,.6);color:#fff;font-weight:500}
.fu-reply{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:10px 12px;color:#f5f5f5;font-size:13.5px;line-height:1.7;resize:vertical;min-height:60px;outline:none;font-family:inherit;margin-bottom:10px}
.fu-reply:focus{border-color:rgba(176,176,255,.45)}
.fu-reply::placeholder{color:rgba(255,255,255,.22)}
.fu-submit{font-size:12.5px;padding:6px 14px}
.fu-empty{font-size:13px;color:rgba(255,255,255,.5);padding:20px;text-align:center;line-height:1.8}
.fu-card.submitted{opacity:.55;background:rgba(78,205,196,.05);border-color:rgba(78,205,196,.22)}
.fu-card.submitted .fu-submit{display:none}
/* B1 (2026-04-25) — Mode B 详细分析 collapsible */
.analysis-details{margin-top:14px;border:1px solid rgba(176,176,255,.22);border-radius:7px;background:rgba(176,176,255,.04)}
.analysis-details summary{padding:9px 14px;cursor:pointer;color:rgba(176,176,255,.85);font-size:12.5px;font-weight:500;letter-spacing:.3px;list-style:none;user-select:none;transition:background .15s}
.analysis-details summary:hover{background:rgba(176,176,255,.07);color:rgba(220,220,255,.95)}
.analysis-details summary::-webkit-details-marker{display:none}
.analysis-details[open] summary{border-bottom:1px solid rgba(176,176,255,.18);background:rgba(176,176,255,.07);color:#fff}
.analysis-body{padding:14px 16px;font-size:13.5px;line-height:1.85;color:rgba(255,255,255,.82)}
.analysis-body p{margin:0 0 10px}
.analysis-body p:last-child{margin-bottom:0}
/* ── Progress bar ── */
.progress{display:flex;align-items:center;gap:0;margin-bottom:16px}
.pdot{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:10px;color:rgba(255,255,255,.28);flex-shrink:0;transition:all .3s;cursor:pointer;font-weight:500}
.pdot.done{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.65)}
.pdot.now{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;box-shadow:0 0 10px rgba(255,255,255,.22)}
.pline{flex:1;height:1px;background:var(--line-soft);min-width:4px}
/* ── Advisor bar ── */
.advisor-bar{display:flex;align-items:center;gap:7px;padding:0 0 18px;flex-wrap:wrap}
.advisor-chip{
display:flex;align-items:center;gap:6px;
padding:5px 12px 5px 7px;border-radius:16px;
background:rgba(255,255,255,.025);border:1px solid var(--line-soft);
transition:all .35s;
}
.advisor-chip.active{border-color:var(--c);background:rgba(255,255,255,.045)}
.advisor-chip.speaking{border-color:var(--c);box-shadow:0 0 12px var(--c-glow2);animation:chipPulse 2s ease-in-out infinite}
@keyframes chipPulse{0%,100%{box-shadow:0 0 8px var(--c-glow2)}50%{box-shadow:0 0 16px var(--c-glow)}}
.chip-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0;opacity:.55;transition:opacity .3s}
.advisor-chip.active .chip-dot,.advisor-chip.speaking .chip-dot{opacity:1}
.chip-name{font-size:10px;color:rgba(255,255,255,.38);letter-spacing:.3px;transition:color .3s;font-weight:500}
.advisor-chip.active .chip-name{color:rgba(255,255,255,.7)}
.advisor-chip.speaking .chip-name{color:var(--c)}
/* ── Step containers ── */
.step{display:none;animation:fadeIn .3s ease}
.step.active{display:block}
/* ── Fast-mode dual-pane (Step 7 + Step 8 visible together while streaming) ── */
body.fm-dual #s7,
body.fm-dual #s8 { display:block }
body.fm-dual #s7 { border-bottom:2px dashed rgba(176,176,255,.35); margin-bottom:18px; padding-bottom:14px }
body.fm-dual #s8 { border-top:none }
body.fm-dual #s8 .sh::before { content:'⏬ '; opacity:.7 }
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* T1.5 (2026-04-25) — align number circle to title baseline (was align-items:center
which floated the circle between title+subtitle, looked off across 8 cards). */
.sh{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px}
.snum{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:11px;color:rgba(255,255,255,.8);flex-shrink:0;font-weight:600;margin-top:1px}
.stitle{font-size:16px;font-weight:600;color:#fff;letter-spacing:.3px;line-height:1.5}
.ssub{font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.2px;line-height:1.4}
/* ── Inputs & Buttons ── */
.ginput{width:100%;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:7px;padding:12px 14px;color:#f5f5f5;font-size:14px;line-height:1.7;resize:none;outline:none;font-family:inherit;transition:border-color .2s}
.ginput:focus{border-color:rgba(255,255,255,.32)}
.ginput::placeholder{color:rgba(255,255,255,.22)}
.btn{padding:8px 16px;border-radius:6px;border:none;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;font-family:inherit;letter-spacing:.2px}
.btn-w{background:#fff;color:#000}
.btn-w:hover{background:#e8e8e8}
.btn-w:disabled{background:rgba(255,255,255,.2);color:rgba(0,0,0,.4);cursor:not-allowed}
.btn-g{background:transparent;border:1px solid var(--line);color:var(--text-soft)}
.btn-g:hover{border-color:var(--line-strong);color:rgba(255,255,255,.82)}
/* ── Chat bubbles (Step 2) ── */
.cmsg{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start}
.cmsg.u{flex-direction:row-reverse}
.cbub{padding:11px 15px;border-radius:10px;font-size:14px;line-height:1.75;max-width:86%}
.cbub.f{background:rgba(255,255,255,.055);border:1px solid var(--line);color:var(--text)}
.cbub.u{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);color:var(--text)}
.cav{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;background:#0a0a0a}
/* Streaming-in-progress indicator: a soft breathing dot.
* Applied via `.cur` class on any element that is currently receiving
* stream chunks. Replaces the old typewriter cursor (▍) with a calmer
* meditation-like pulse — signals "AI is still thinking, relax." */
.cur::after{
content:'●';
display:inline-block;
margin-left:6px;
vertical-align:middle;
font-size:.7em;
color:rgba(176,176,255,.65);
animation:streamBreathe 2.2s cubic-bezier(.4,0,.2,1) infinite;
text-shadow:0 0 8px rgba(176,176,255,.4);
}
@keyframes streamBreathe{
0%,100%{opacity:.25;transform:scale(.7)}
50%{opacity:1;transform:scale(1.05)}
}
/* ── Persona cards (S3/S4 opinions) ── */
.ocard{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:9px;padding:16px 18px;margin-bottom:12px;transition:all .3s}
.ocard.on{border-color:rgba(255,255,255,.22)}
.ocard-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ocard-h .ocard-n{margin-bottom:0}
.ocard-n{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:8px;letter-spacing:.4px}
.ocard-t{font-size:13px;color:var(--text);line-height:1.7;white-space:pre-wrap}
/* ── Dimension cards (S5) ── */
.dcard{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:8px;margin-bottom:10px;cursor:pointer;transition:all .2s}
.dcard:hover{border-color:rgba(255,255,255,.22)}
.dcard.sel{border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.055)}
.dcard .dbody{flex:1;min-width:0}
.dicon{width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;color:rgba(255,255,255,.32);margin-top:2px}
.dcard.sel .dicon{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}
.dlabel{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.82);letter-spacing:.3px;margin-bottom:6px}
.dcard.sel .dlabel{color:#fff}
.dtext{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.75;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;transition:max-height .25s}
.dcard.expanded .dtext{display:block;-webkit-line-clamp:unset}
.dtext p{margin-bottom:8px}
.dtext p:last-child{margin-bottom:0}
.dexpand{margin-top:8px;background:transparent;border:none;color:rgba(176,176,255,.7);font-size:12px;cursor:pointer;padding:2px 0;font-family:inherit;letter-spacing:.3px}
.dexpand:hover{color:#fff;text-decoration:underline}
/* ── Debate messages (S6) ── */
.dbmsg{padding:14px 16px;background:rgba(255,255,255,.025);border:1px solid var(--line-soft);border-radius:8px;margin-bottom:10px}
.dbmsg.h{border-color:var(--line);background:rgba(255,255,255,.045)}
.dbmsg-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dbmsg-h .dbmsg-n{margin-bottom:0}
.dbmsg-n{font-size:12px;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:6px;letter-spacing:.4px}
.dbmsg-t{font-size:14px;color:var(--text);line-height:1.8;white-space:pre-wrap}
/* ── Dimension sections (S6 multi-dim debate) ── */
.dim-section{border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:18px;background:rgba(255,255,255,.015);transition:border-color .3s}
.dim-section.active{border-color:rgba(176,176,255,.45);box-shadow:0 0 0 1px rgba(176,176,255,.15),0 0 24px rgba(176,176,255,.08)}
.dim-section.done{opacity:.92}
.dim-header{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.dim-badge{font-size:11px;font-weight:600;color:rgba(176,176,255,.85);background:rgba(176,176,255,.1);padding:3px 9px;border-radius:10px;letter-spacing:.4px;white-space:nowrap;flex-shrink:0}
.dim-section.done .dim-badge{color:rgba(255,255,255,.55);background:rgba(255,255,255,.07)}
.dim-title{font-size:14.5px;font-weight:600;color:var(--text-strong);line-height:1.5;letter-spacing:.2px;flex:1;min-width:0}
.dim-body{display:flex;flex-direction:column;gap:0}
.dim-body .dbmsg{margin-bottom:10px}
.dim-body .dbmsg:last-child{margin-bottom:0}
/* ── Harvest cards (S8) — compacted 2026-04-25 ── */
.scard{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:8px;padding:11px 14px;margin-bottom:9px}
.st{font-size:12px;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:7px;letter-spacing:.35px}
.sb{font-size:12.5px;color:var(--text);line-height:1.65;white-space:pre-wrap}
/* Step 7: premortem + summary cards side-by-side on desktop linear-mode only.
Sidebar (rt-mode) is only ~340px wide — 2 columns crammed in becomes
unreadable. Roundtable mode forces single-column stack via the more
specific selector below. (Michael 2026-04-26 review.) */
@media (min-width:760px){
#s7-content{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
#s7-content .scard{margin-bottom:0}
}
/* Step 8: per-persona evals 2-col grid in linear mode only */
@media (min-width:760px){
#s8-content .eval-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
#s8-content .eval-grid .scard{margin-bottom:0}
}
/* Roundtable sidebar override: single-column stack for everything */
body.rt-mode #rt-stage #s7-content,
body.rt-mode #rt-stage #s8-content .eval-grid{
display:flex;flex-direction:column;gap:9px;
}
body.rt-mode #rt-stage #s7-content .scard,
body.rt-mode #rt-stage #s8-content .eval-grid .scard{margin-bottom:0}
/* ── Interactive To-Do list (S8) ── */
/* 2026-05-08 · grid layout works on desktop AND mobile. Previous flex layout
broke on desktop after click: coin + attribution chip + persistent saved-flash
squeezed .todo-text to ~80px, wrapping it to many lines (case-of called it
"竖排"). Mobile fix in 05c1bb2 only patched body.rt-mode @media. Now base. */
.todo-list{display:flex;flex-direction:column;gap:10px}
.todo-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-auto-flow:column;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,.025);border:1px solid var(--line-soft);border-radius:7px;cursor:pointer;transition:all .2s}
.todo-item:hover{border-color:var(--line);background:rgba(255,255,255,.04)}
.todo-item input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.32);border-radius:4px;background:transparent;cursor:pointer;position:relative;margin:0;transition:all .2s}
.todo-item input[type="checkbox"]:hover{border-color:rgba(255,255,255,.55)}
.todo-item input[type="checkbox"]:checked{background:#fff;border-color:#fff}
.todo-item input[type="checkbox"]:checked::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);color:#000;font-size:12px;font-weight:700;line-height:1}
.todo-text{font-size:13px;color:var(--text);line-height:1.55;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}
.todo-text strong{color:var(--text-strong);font-weight:600}
.todo-item.done{background:rgba(255,255,255,.015);border-color:var(--line-soft);opacity:.55}
.todo-item.done .todo-text{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
/* 2026-04-26 · attribution chip — shows which advisors recommended this todo */
.todo-from{font-size:10.5px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:3px 8px;letter-spacing:.5px;font-weight:500;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.todo-item.done .todo-from{opacity:.6}
/* ── Client Achievement inputs (S8) ── */
.achievement-item{margin-bottom:14px}
.achievement-item:last-child{margin-bottom:0}
.achievement-item label{display:block;font-size:13px;color:rgba(255,255,255,.78);margin-bottom:7px;font-weight:500;letter-spacing:.2px}
.achievement-item textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:7px;padding:11px 13px;color:#f5f5f5;font-size:14px;line-height:1.75;resize:vertical;min-height:72px;outline:none;font-family:inherit;transition:border-color .2s}
.achievement-item textarea:focus{border-color:rgba(176,176,255,.45)}
.achievement-item textarea::placeholder{color:rgba(255,255,255,.22)}
.achievement-hint{font-size:13px;color:rgba(255,255,255,.65);line-height:1.75;margin-bottom:14px;padding:10px 14px;background:rgba(176,176,255,.05);border-left:3px solid rgba(176,176,255,.5);border-radius:0 6px 6px 0}
/* ── Reflection panel (S8 top card) ── */
.reflection-panel{background:rgba(176,176,255,.04);border-color:rgba(176,176,255,.22)}
.reflection-panel .st{font-size:14px;color:rgba(176,176,255,.95)}
.reflection-panel .btn-full{margin-top:16px}
/* ── Pre-Mortem card (Phase 4.4, Step 6.5 shown in Step 7 UI) ── */
.premortem-card{background:rgba(255,140,66,.04);border-color:rgba(255,140,66,.25)}
.premortem-card .st{color:rgba(255,180,120,.95)}
.summary-card{background:rgba(255,255,255,.035)}
/* 2026-04-26 — Step 8 todo card "我现在该做什么" gets the action accent color
(Jobsian: the call-to-action visually wins). Cool blue-purple to differentiate
from the warm orange premortem-card and the neutral .summary-card. */
.action-card{background:rgba(176,176,255,.05);border-color:rgba(176,176,255,.32)}
.action-card .st{color:rgba(210,210,255,.95);font-size:13.5px}
/* ── Phrase-level highlight (Phase 2.13 — 2026-04-22 upgrade) ── */
/* Highlighted phrase marks */
mark.r-star{background:rgba(255,224,102,.25);color:inherit;border-bottom:2px solid rgba(255,224,102,.7);padding:1px 2px;border-radius:2px;cursor:help}
mark.r-bang{background:rgba(255,80,80,.22);color:inherit;border-bottom:2px solid rgba(255,80,80,.75);padding:1px 2px;border-radius:2px;cursor:help}
mark.r-note{background:rgba(176,176,255,.22);color:inherit;border-bottom:2px solid rgba(176,176,255,.8);padding:1px 2px;border-radius:2px;cursor:help}
mark.r-star:hover,mark.r-bang:hover,mark.r-note:hover{filter:brightness(1.25)}
/* Floating toolbar — appears near selection */
#phrase-toolbar{position:absolute;z-index:200;display:none;gap:4px;padding:6px;background:rgba(18,18,26,.96);border:1px solid rgba(255,255,255,.25);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.6);backdrop-filter:blur(6px);user-select:none}
#phrase-toolbar .pt-btn{background:transparent;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);padding:6px 11px;border-radius:6px;font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s;letter-spacing:.2px}
#phrase-toolbar .pt-btn:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff;transform:translateY(-1px)}
/* Inline note editor — appears below selection when 📝 clicked */
#phrase-note-editor{position:absolute;z-index:200;display:none;width:340px;padding:14px;background:rgba(18,18,26,.98);border:1px solid rgba(176,176,255,.4);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.7);backdrop-filter:blur(6px)}
#phrase-note-editor .pne-snippet{font-size:12.5px;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:10px;padding:8px 10px;background:rgba(176,176,255,.08);border-left:2px solid rgba(176,176,255,.6);border-radius:0 5px 5px 0;max-height:80px;overflow:hidden;font-style:italic}
#phrase-note-editor .pne-input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:10px 12px;color:#f5f5f5;font-size:13.5px;line-height:1.7;resize:vertical;min-height:64px;outline:none;font-family:inherit;transition:border-color .2s}
#phrase-note-editor .pne-input:focus{border-color:rgba(176,176,255,.6)}
#phrase-note-editor .pne-input::placeholder{color:rgba(255,255,255,.25)}
#phrase-note-editor .pne-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
#phrase-note-editor .pne-btns .btn{padding:6px 14px;font-size:12.5px}
/* Hint when hovering over markable text (subtle) */
[data-markable]{cursor:text}
[data-markable]::selection,[data-markable] *::selection{background:rgba(176,176,255,.35);color:#fff}
/* ── Markdown rendered ── */
.md-body{font-size:14px;color:var(--text);line-height:1.85}
.md-body p{margin-bottom:12px}
.md-body p:last-child{margin-bottom:0}
/* 2026-04-26 v4 · md-body headings scaled down. Were 17/16/15/14 — too big
inside Step 7/8 cards, made content look ugly and unbalanced relative to
13px body. Tightened to 15/14/13/12.5. Headings now sit close to body. */
.md-body h1,.md-body h2,.md-body h3,.md-body h4{font-weight:600;color:var(--text-strong);margin:14px 0 7px;letter-spacing:.2px;line-height:1.4}
.md-body h1:first-child,.md-body h2:first-child,.md-body h3:first-child{margin-top:0}
.md-body h1{font-size:15px}
.md-body h2{font-size:14px}
.md-body h3{font-size:13px}
.md-body h4{font-size:12.5px}
.md-body ul,.md-body ol{padding-left:22px;margin-bottom:12px}
.md-body li{margin-bottom:6px;line-height:1.8}
.md-body li>p{margin-bottom:6px}
.md-body li:last-child{margin-bottom:0}
.md-body strong{color:var(--text-strong);font-weight:600}
.md-body em{color:rgba(255,255,255,.7);font-style:italic}
.md-body blockquote{padding:10px 14px;border-left:3px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04);border-radius:0 5px 5px 0;margin:12px 0;color:rgba(255,255,255,.6);font-style:italic}
.md-body blockquote p{margin-bottom:6px}
.md-body code{font-family:'SF Mono','Menlo','Monaco',monospace;font-size:13px;background:rgba(255,255,255,.08);padding:2px 6px;border-radius:4px;color:rgba(255,255,255,.85)}
.md-body pre{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;padding:14px 16px;overflow-x:auto;margin-bottom:12px;line-height:1.65}
.md-body pre code{background:none;padding:0;font-size:13px}
.md-body hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.md-body a{color:rgba(176,176,255,.85);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(176,176,255,.35)}
.md-body a:hover{color:#fff;text-decoration-color:#fff}
.md-body table{border-collapse:collapse;margin-bottom:12px;font-size:13px;width:100%}
.md-body th,.md-body td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.md-body th{background:rgba(255,255,255,.05);color:var(--text-strong);font-weight:600}
/* ── Loading ── */
.loading-text{font-size:13px;color:rgba(255,255,255,.45);padding:14px 0;font-style:italic;line-height:1.7}
/* ── Error ── */
.error-msg{font-size:13px;color:rgba(255,120,120,.82);padding:12px 14px;background:rgba(255,0,0,.05);border:1px solid rgba(255,0,0,.12);border-radius:6px;margin:10px 0;line-height:1.7}
/* ── Settings modal ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal{background:#111;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:24px;width:100%;max-width:440px}
.modal h3{font-size:16px;margin-bottom:16px;color:#fff;letter-spacing:.3px}
.modal label{display:block;font-size:12px;color:rgba(255,255,255,.55);margin-bottom:6px;margin-top:14px;letter-spacing:.2px}
.modal label:first-of-type{margin-top:0}
.modal input,.modal select{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:9px 12px;color:#f0f0f0;font-size:13px;outline:none;font-family:inherit}
.modal input:focus,.modal select:focus{border-color:rgba(255,255,255,.32)}
.modal-btns{display:flex;gap:10px;margin-top:20px;justify-content:flex-end}
/* ── Fullwidth button ── */
.btn-full{width:100%;margin-top:12px;padding:11px 16px;font-size:14px}
/* ── Step 1 row · persona chip + submit (Phase 7.1) ── */
.s1-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.s1-row .btn{flex:1}
/* §3.9 Y-fork: lightweight off-ramp to /chat.html for users who don't want
to commit to the 8-step flow yet. Sits below s1-row, above example chips. */
.s1-fork{margin-top:14px;padding:10px 14px;border-radius:8px;background:rgba(78,205,196,.04);border:1px solid rgba(78,205,196,.15);font-size:13px;color:rgba(255,255,255,.55);line-height:1.6;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.s1-fork a{color:rgba(78,205,196,.9);text-decoration:none;font-weight:500}
.s1-fork a:hover{color:rgba(78,205,196,1);text-decoration:underline}
.s1-fork-hint{font-size:11.5px;color:rgba(255,255,255,.38);width:100%;margin-top:2px}
.persona-chip{padding:9px 14px;font-size:12px;background:rgba(176,176,255,.08);border-color:rgba(176,176,255,.3);color:rgba(255,255,255,.85);white-space:nowrap}
.persona-chip:hover{background:rgba(176,176,255,.16);border-color:rgba(176,176,255,.55);color:#fff}
.persona-chip #s1-persona-count{color:rgba(176,176,255,.9);font-weight:500;margin-left:2px}
/* ── Persona Picker modal (Phase 7.1) ── */
.pp-modal{max-width:680px;max-height:85vh;display:flex;flex-direction:column}
.pp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.pp-count{font-size:12px;color:rgba(255,255,255,.6)}
.pp-count.over{color:#ff8080}
.pp-count #pp-count{color:rgba(176,176,255,.95);font-weight:600;font-size:13px}
.pp-actions{display:flex;gap:8px;margin-bottom:12px}
.pp-suggest-btn{flex:1;background:rgba(176,176,255,.1);border:1px solid rgba(176,176,255,.32);color:rgba(255,255,255,.9);padding:9px 12px;font-size:12px}
/* B3 (2026-04-25) — persona templates strip in picker modal */
.pp-templates{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 0 12px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06)}
.pp-templates-label{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.4px;font-weight:500;margin-right:2px}
.pp-templates-hint{font-size:11.5px;color:rgba(255,255,255,.42);font-style:italic;line-height:1.6;padding:2px 0}
.pp-template-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 4px 5px 10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;color:rgba(255,255,255,.78);font-size:11.5px;cursor:pointer;font-family:inherit;transition:all .15s;letter-spacing:.2px}
.pp-template-chip:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.32);color:#fff}
.pp-template-chip.active{background:rgba(176,176,255,.15);border-color:rgba(176,176,255,.55);color:#fff;font-weight:500}
.pp-template-name{}
.pp-template-count{font-size:10px;color:rgba(255,255,255,.42);background:rgba(255,255,255,.06);padding:1px 6px;border-radius:8px}
.pp-template-chip.active .pp-template-count{background:rgba(176,176,255,.25);color:rgba(255,255,255,.85)}
.pp-template-del{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.32);font-size:14px;border-radius:50%;transition:all .12s;line-height:1}
.pp-template-del:hover{background:rgba(255,90,90,.22);color:#ff8888}
.pp-template-save-btn{background:rgba(78,205,196,.08);border-color:rgba(78,205,196,.35);color:rgba(78,205,196,.95);padding:9px 12px;font-size:12px}
.pp-template-save-btn:hover{background:rgba(78,205,196,.16);border-color:rgba(78,205,196,.6);color:#fff}
.pp-suggest-btn:hover:not(:disabled){background:rgba(176,176,255,.2);border-color:rgba(176,176,255,.6);color:#fff}
.pp-suggest-btn:disabled{opacity:.5;cursor:wait}
.pp-clear-btn{padding:9px 12px;font-size:12px}
.pp-reasoning{background:rgba(176,176,255,.06);border:1px solid rgba(176,176,255,.25);border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.82)}
.pp-reasoning::before{content:'🎙 主持人理由';display:block;font-size:10.5px;color:rgba(176,176,255,.85);letter-spacing:.4px;margin-bottom:5px;font-weight:500}
.pp-hint{background:rgba(255,200,100,.05);border:1px solid rgba(255,200,100,.28);border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:12.5px;line-height:1.7;color:rgba(255,220,180,.9)}
.pp-grid{overflow-y:auto;flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding-right:4px;margin-bottom:4px}
.pp-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:all .15s;user-select:none}
.pp-card:hover{border-color:rgba(176,176,255,.4);background:rgba(176,176,255,.05)}
.pp-card.selected{border-color:rgba(176,176,255,.7);background:rgba(176,176,255,.12)}
.pp-card.selected::before{content:'✓';color:rgba(176,176,255,.95);font-weight:700;margin-right:-2px}
.pp-card.disabled{opacity:.35;cursor:not-allowed}
.pp-card.disabled:hover{border-color:var(--line);background:rgba(255,255,255,.025)}
.pp-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;background:#222}
.pp-av.av-grid{background-image:url(/portrait-grid.png);background-size:500% 500%}
.pp-av.av-initial{background:transparent;border:1.5px solid currentColor}
.pp-meta{flex:1;min-width:0}
.pp-name{font-size:13px;color:var(--text-strong);font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-title{font-size:11px;color:rgba(255,255,255,.48);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
/* ── Step done banner ── */
.done-banner{text-align:center;font-size:13px;color:rgba(255,255,255,.38);padding:24px 0;margin-top:18px;letter-spacing:.5px}
/* ══ PERSONA IDENTITY COLOR SYSTEM ════════════════════ */
[data-p="mao"] {--c:#FF3B3B;--c-glow:rgba(255,59,59,.5);--c-glow2:rgba(255,59,59,.15)}
[data-p="pg"] {--c:#FF8C42;--c-glow:rgba(255,140,66,.5);--c-glow2:rgba(255,140,66,.15)}
[data-p="jobs"] {--c:#B0B0FF;--c-glow:rgba(176,176,255,.5);--c-glow2:rgba(176,176,255,.15)}
[data-p="brucelee"]{--c:#FFE066;--c-glow:rgba(255,224,102,.5);--c-glow2:rgba(255,224,102,.15)}
[data-p="kk"] {--c:#4ECDC4;--c-glow:rgba(78,205,196,.5);--c-glow2:rgba(78,205,196,.15)}
[data-p="huineng"] {--c:#B39DDB;--c-glow:rgba(179,157,219,.5);--c-glow2:rgba(179,157,219,.15)}
[data-p="laozi"] {--c:#69D99A;--c-glow:rgba(105,217,154,.5);--c-glow2:rgba(105,217,154,.15)}
[data-p="zhuangzi"]{--c:#D7B46A;--c-glow:rgba(215,180,106,.5);--c-glow2:rgba(215,180,106,.15)}
[data-p="zhang-ailing"]{--c:#C06C84;--c-glow:rgba(192,108,132,.5);--c-glow2:rgba(192,108,132,.15)}
/* Persona avatar circle */
.p-av{
width:32px;height:32px;border-radius:50%;position:relative;
border:1.5px solid var(--c,rgba(255,255,255,.18));
display:flex;align-items:center;justify-content:center;
font-size:12px;flex-shrink:0;background:#0a0a0a;
color:var(--c,rgba(255,255,255,.5));font-weight:600;
transition:all .35s cubic-bezier(.4,0,.2,1);
}
.p-av.speaking{
animation:pSpeak 1.8s ease-in-out infinite;
box-shadow:0 0 12px var(--c-glow),0 0 30px var(--c-glow2);
}
@keyframes pSpeak{
0%,100%{box-shadow:0 0 10px var(--c-glow),0 0 25px var(--c-glow2)}
50%{box-shadow:0 0 20px var(--c),0 0 45px var(--c-glow)}
}
.p-av.speaking::after{
content:'';position:absolute;inset:-4px;border-radius:50%;
border:1px solid var(--c);
animation:pRipple 1.8s ease-out infinite;pointer-events:none;opacity:.5;
}
@keyframes pRipple{
0%{transform:scale(1);opacity:.5}
100%{transform:scale(1.7);opacity:0}
}
/* Colored card accents via data-p */
.ocard[data-p]{border-left:3px solid var(--c)}
.ocard[data-p] .ocard-n{color:var(--c)}
.ocard[data-p].on{box-shadow:0 0 20px var(--c-glow2,transparent)}
.dbmsg[data-p]{border-left:3px solid var(--c)}
.dbmsg[data-p] .dbmsg-n{color:var(--c)}
/* ── History session cards ── */
.hcard{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:all .2s}
.hcard:hover{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.055)}
.hcard-q{font-size:13px;color:var(--text);line-height:1.65;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcard-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:rgba(255,255,255,.38)}
.hcard-step{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:10px;background:rgba(255,255,255,.07);font-size:10px;color:rgba(255,255,255,.5)}
.hcard-step.done{background:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
.hcard-btns{display:flex;gap:8px;margin-top:8px}
/* ── User Wiki modal body readability boost ── */
#wiki-content.md-body{font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.82)}
#wiki-content.md-body h2{margin-top:22px;padding-top:14px;border-top:1px solid var(--line-soft)}
#wiki-content.md-body h2:first-child{border-top:none;padding-top:0;margin-top:0}
#wiki-content.md-body h3{color:rgba(176,176,255,.88);margin-top:16px}
/* ── Portrait card UI (C2 — replaces raw markdown wiki dump) ── */
.portrait{font-size:14px;line-height:1.7;color:rgba(255,255,255,.86)}
.portrait-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.portrait-name{font-size:24px;font-weight:600;color:#fff;letter-spacing:.5px}
.portrait-meta{font-size:13px;color:rgba(255,255,255,.55)}
.portrait-meta b{color:rgba(176,176,255,.95);font-weight:600;font-variant-numeric:tabular-nums}
.portrait-section{margin:24px 0}
.portrait-section-title{font-size:15px;font-weight:600;color:#fff;margin-bottom:4px;letter-spacing:.3px}
.portrait-section-sub{font-size:12.5px;color:rgba(255,255,255,.48);margin-bottom:12px;line-height:1.6}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.fact-card{background:rgba(176,176,255,.06);border:1px solid rgba(176,176,255,.2);border-radius:10px;padding:12px 14px}
.fact-relation{font-size:11.5px;color:rgba(176,176,255,.85);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;font-weight:500}
.fact-body{font-size:14.5px;color:rgba(255,255,255,.92);line-height:1.55;font-weight:400}
.fact-date{margin-top:8px;font-size:11px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.index-list{display:flex;flex-direction:column;gap:0;margin-top:6px}
.index-row{border-bottom:1px solid rgba(255,255,255,.05)}
.index-row:last-child{border-bottom:none}
.index-row-head{display:flex;gap:14px;align-items:center;padding:10px 4px;cursor:pointer;transition:background .15s}
.index-row-head:hover{background:rgba(255,255,255,.04)}
.index-row-meta{font-size:11.5px;color:rgba(255,255,255,.45);min-width:130px;font-variant-numeric:tabular-nums}
.index-row-hook{flex:1;font-size:14px;color:rgba(255,255,255,.85);line-height:1.5}
.index-row-arrow{color:rgba(255,255,255,.4);font-size:12px;width:14px}
.index-row-body{padding:8px 4px 12px 144px;font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.7}
.index-row-body .md-body{font-size:13.5px;line-height:1.7}
.portrait-more-btn{margin-top:12px;background:transparent;border:1px solid rgba(176,176,255,.35);color:rgba(176,176,255,.95);padding:8px 14px;border-radius:6px;cursor:pointer;font-size:12.5px;transition:all .15s}
.portrait-more-btn:hover{background:rgba(176,176,255,.12);border-color:rgba(176,176,255,.6)}
.portrait-empty{text-align:center;padding:50px 30px;color:rgba(255,255,255,.7)}
.portrait-empty-icon{font-size:48px;margin-bottom:14px;opacity:.5}
.portrait-empty-title{font-size:18px;font-weight:600;color:#fff;margin-bottom:10px}
.portrait-empty-body{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.6);max-width:380px;margin:0 auto 24px}
.portrait-empty-mini{font-size:13px;color:rgba(255,255,255,.45);padding:10px 4px;font-style:italic}
.portrait-legacy{margin-top:32px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.12)}
.portrait-legacy summary{font-size:13px;color:rgba(255,255,255,.55);cursor:pointer;padding:6px 0}
.portrait-legacy summary:hover{color:rgba(176,176,255,.85)}
.portrait-legacy[open] summary{color:rgba(176,176,255,.95);margin-bottom:14px}
/* D3: backfill CTA + re-extract icon + progress overlay */
.portrait-integrate-btn{display:block;width:100%;margin:14px 0 4px;padding:14px 18px;background:linear-gradient(135deg,rgba(176,176,255,.18),rgba(220,176,255,.12));border:1px solid rgba(176,176,255,.4);color:#fff;border-radius:10px;cursor:pointer;font-size:14.5px;line-height:1.5;text-align:left;transition:all .2s}
.portrait-integrate-btn:hover{background:linear-gradient(135deg,rgba(176,176,255,.28),rgba(220,176,255,.18));border-color:rgba(176,176,255,.65);transform:translateY(-1px)}
.portrait-integrate-hint{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:10px;line-height:1.6;padding:0 4px}
.portrait-reextract-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:8px;padding:0;background:transparent;border:1px solid rgba(176,176,255,.3);border-radius:50%;color:rgba(176,176,255,.85);cursor:pointer;font-size:13px;line-height:1;transition:all .15s;vertical-align:middle}
.portrait-reextract-icon:hover{background:rgba(176,176,255,.15);border-color:rgba(176,176,255,.7);transform:rotate(180deg)}
.portrait-progress-overlay{position:absolute;inset:0;background:rgba(10,10,10,.85);display:flex;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(8px)}
.portrait-progress-card{background:rgba(255,255,255,.06);border:1px solid var(--line-soft);border-radius:14px;padding:32px 38px;text-align:center;max-width:340px}
.portrait-progress-spinner{font-size:36px;margin-bottom:12px;animation:portrait-spin 2s ease-in-out infinite}
.portrait-progress-done .portrait-progress-spinner,.portrait-progress-error .portrait-progress-spinner{animation:none}
.portrait-progress-done .portrait-progress-spinner{color:#8fe08f}
.portrait-progress-error .portrait-progress-spinner{color:#ffacb8}
.portrait-progress-title{font-size:15px;font-weight:600;color:#fff;margin-bottom:6px}
.portrait-progress-sub{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.6}
@keyframes portrait-spin{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.1) rotate(-5deg)}}
.portrait-footer{margin-top:32px;padding-top:18px;border-top:1px solid var(--line-soft)}
.portrait-privacy{background:rgba(140,180,255,.07);border:1px solid rgba(140,180,255,.22);border-radius:10px;padding:14px 16px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.78)}
.portrait-privacy strong{color:rgba(176,205,255,.95);font-weight:600}
.portrait-privacy-hint{display:block;margin-top:8px;color:rgba(255,255,255,.5);font-size:11.5px;font-style:italic}
/* ── Mode toggle ── */
.mode-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.mode-toggle input{display:none}
.mode-label{font-size:11px;color:rgba(255,255,255,.45);padding:5px 10px;border:1px solid var(--line);border-radius:5px;transition:all .2s}
.mode-toggle input:checked ~ .mode-label{color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.07)}
/* ── User mode answer inputs (Step 3) ── */
.qa-card{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:9px;padding:16px 18px;margin-bottom:12px}
.qa-card[data-p]{border-left:3px solid var(--c)}
.qa-q{font-size:14px;color:var(--text);line-height:1.75;margin-bottom:12px}
.qa-a{width:100%;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:10px 12px;color:#f5f5f5;font-size:14px;line-height:1.7;resize:vertical;min-height:56px;outline:none;font-family:inherit;transition:border-color .2s}
.qa-a:focus{border-color:rgba(255,255,255,.32)}
.qa-a::placeholder{color:rgba(255,255,255,.22)}
/* Host facilitator avatar */
.host-av{
width:32px;height:32px;border-radius:50%;flex-shrink:0;
border:1.5px solid rgba(255,255,255,.28);background:#0a0a0a;
display:flex;align-items:center;justify-content:center;
font-size:15px;box-shadow:0 0 12px rgba(255,255,255,.06);
}
/* ── Scrollbar (subtle) ── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16)}
/* ── Selection ── */
::selection{background:rgba(255,255,255,.22);color:#fff}
/* ── Responsive tweaks ── */
@media (max-width:600px){
#app{padding:16px 14px 60px}
.stitle{font-size:15px}
.md-body{font-size:13.5px;line-height:1.8}
.cbub,.ocard-t,.dbmsg-t,.sb{font-size:13.5px}
.ocard,.dbmsg,.scard,.qa-card{padding:14px 15px}
}
/* ═══════════════════════════════════════════════════════════════════════════
Roundtable v1 · Phase 6 · 2026-04-23
Ported from /Users/a1-6/Documents/CC/counsel/public/session.html
Active only when body.rt-mode is set. Linear UI untouched when absent.
═══════════════════════════════════════════════════════════════════════════ */
/* When roundtable is active: hide progress/advisor/step scaffolding, let the
roundtable shell take the visual stage. Step content is re-mounted into
#rt-stage by app.js. */
body.rt-mode { background:#000; overflow:hidden; height:100vh }
body.rt-mode #app { padding:0; max-width:none; height:100vh; display:flex; flex-direction:column }
body.rt-mode .topbar { flex-shrink:0; margin:0; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.6); backdrop-filter:blur(12px); z-index:50 }
body.rt-mode .brand { font-size:14px }
body.rt-mode .progress,
body.rt-mode .advisor-bar { display:none }
/* Keep default .step visibility rules (.step hidden, .step.active shown) —
the linear rules already do the right thing inside #rt-stage. */
/* 2026-04-27 · 圆桌真前置 fix — Steps must NEVER show at #app top-level in
rt-mode. Previously: between body.rt-mode being added (sync) and
mountRoundtableSteps moving #s1-#s8 into #rt-stage (async, after
loadActivePersonas fetch — 100-500ms on slow mobile), `.step.active` would
render at the top of #app, with #roundtable's empty shell appearing BELOW
it via flex:column. User saw "圆桌埋在下面". This rule kills the top-level
render entirely; once mountRoundtableSteps appendChild's them into
#rt-stage they're no longer direct #app children → rule no longer
applies → they show normally inside the side-pane. */
body.rt-mode #app > .step{ display:none!important }
/* T-issue#1 (2026-04-25) — #roundtable's display:flex was overriding the
HTML hidden attribute, leaking the rt-progress strip + roundtable shell
into linear (列表) mode at the bottom of the page. Default to hidden,
only show when body.rt-mode is set. */
#roundtable { display:none }
body.rt-mode #roundtable { position:relative; flex:1; width:100%; display:flex; color:#f0f0f0; overflow:hidden }
.rt-scene-pane { flex:1; position:relative; overflow:hidden; background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(255,255,255,.025) 0%,#000 65%) }
.rt-scene-pane::after { content:''; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px); background-size:40px 40px; opacity:.4 }
.rt-side-pane { width:340px; flex-shrink:0; border-left:1px solid rgba(255,255,255,.1); background:rgba(6,6,6,.97); backdrop-filter:blur(16px); display:flex; flex-direction:column; overflow:hidden }
/* Progress strip at top of sidebar (横排, as designed) — T-issue#1 follow-up
(2026-04-25): tightened sizing so all 8 labels fit without overflow on
desktop (was: 摘果 clipped at right edge). */
.rt-progress { display:flex; align-items:center; gap:2px; padding:11px 10px; border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0; overflow-x:auto }
.rt-progress::-webkit-scrollbar { height:2px }
.rt-pnode { display:flex; align-items:center; gap:3px; font-size:8.5px; color:rgba(255,255,255,.25); cursor:pointer; white-space:nowrap; transition:color .2s; flex-shrink:0; letter-spacing:.2px }
.rt-pnode.done { color:rgba(255,255,255,.5) }
.rt-pnode.now { color:#fff }
.rt-pdot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.12); flex-shrink:0; transition:all .2s }
.rt-pnode.done .rt-pdot { background:rgba(255,255,255,.55) }
.rt-pnode.now .rt-pdot { background:#fff; box-shadow:0 0 6px rgba(255,255,255,.6) }
.rt-pnode + .rt-pnode::before { content:''; width:5px; height:1px; background:rgba(255,255,255,.08); margin-right:1px }
/* Layout toggle group in topbar */
.layout-toggle-group { display:flex; gap:3px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); border-radius:6px; padding:3px; backdrop-filter:blur(10px) }
.lt-btn { padding:4px 12px; border-radius:4px; border:none; font-size:10px; cursor:pointer; font-family:inherit; background:transparent; color:rgba(255,255,255,.4); transition:all .2s }
.lt-btn.on { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3) }
.lt-btn:hover { color:rgba(255,255,255,.85) }
/* ─── LAYOUT A · Flat Ring ─────────────────────────────────────────────── */
#ring-scene { position:absolute; inset:0; display:none; align-items:center; justify-content:center }
#ring-scene.on { display:flex }
.ring-wrap { position:relative; width:540px; height:540px }
.orb { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(255,255,255,.22); pointer-events:none }
.orb-1 { width:424px; height:424px }
.orb-2 { width:480px; height:480px; border-color:rgba(255,255,255,.08) }
.orb-3 { width:368px; height:368px; border-color:rgba(255,255,255,.06) }
.ring-center-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%); pointer-events:none }
.ring-host { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:5px; z-index:20 }
.ring-host-av { width:64px; height:64px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); background:rgba(14,14,14,.95); display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 0 28px rgba(255,255,255,.1),0 0 60px rgba(255,255,255,.04); transition:all .3s; position:relative }
.ring-host.speaking .ring-host-av { border-color:#fff; animation:wSpeak 1.6s ease-in-out infinite }
.ring-host.speaking .ring-host-av::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(255,255,255,.3); animation:ripple 1.6s ease-out infinite }
.ring-host-label { font-size:9px; color:rgba(255,255,255,.45); letter-spacing:2px }
/* 2026-04-26 v2 · Breathing pivot — relocated to right-bottom (was center,
but persona bubbles covered it). Bottom-left is taken by rt-topic-pill,
top-left by rt-corner-tl (facilitator avatar), top-right is bare — but
right-bottom is the most-empty quadrant on the round-table scene. */
.rt-pivot{position:absolute;width:120px;height:120px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:24}
.rt-pivot-corner{right:18px;bottom:18px}
.rt-pivot-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rt-pivot-circle{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.35);stroke-width:.8;filter:drop-shadow(0 0 18px rgba(255,255,255,.18));transform-origin:center center;transform-box:fill-box;animation:rtBreathe 4.2s ease-in-out infinite}
.rt-pivot:not(.has-topic) .rt-pivot-circle{stroke:rgba(255,255,255,.18);filter:drop-shadow(0 0 10px rgba(255,255,255,.08))}
.rt-pivot-text{position:relative;z-index:2;font-size:13px;font-weight:500;letter-spacing:.5px;color:rgba(255,255,255,.85);text-align:center;line-height:1.5;max-width:110px;user-select:none;transition:color .4s,opacity .4s}
.rt-pivot:not(.has-topic) .rt-pivot-text{color:rgba(255,255,255,.25)}
@keyframes rtBreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.04);opacity:1}}
.rt-pivot.pulse .rt-pivot-circle{animation:rtPulse .45s ease-out 1,rtBreathe 4.2s ease-in-out infinite .45s}
@keyframes rtPulse{0%{transform:scale(1);filter:drop-shadow(0 0 18px rgba(255,255,255,.18))}35%{transform:scale(.93);filter:drop-shadow(0 0 10px rgba(255,255,255,.3))}70%{transform:scale(1.12);filter:drop-shadow(0 0 40px rgba(255,255,255,.7))}100%{transform:scale(1);filter:drop-shadow(0 0 18px rgba(255,255,255,.18))}}
/* 2026-04-26 · Corner anchors (top-left = facilitator; bottom-left existing rt-topic-pill keeps your question) */
.rt-corner{position:absolute;display:flex;flex-direction:column;gap:6px;font-family:inherit;color:rgba(255,255,255,.7);user-select:none;pointer-events:auto;z-index:25}
.rt-corner-label{font-size:9px;letter-spacing:1.4px;color:rgba(255,255,255,.32);font-weight:600;text-transform:uppercase}
.rt-corner-tl{top:14px;left:14px;align-items:flex-start}
.rt-corner-tl .rt-corner-av{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .35s;position:relative}
.rt-corner-tl.lit .rt-corner-av{border-color:rgba(255,255,255,.45);box-shadow:0 0 12px rgba(255,255,255,.18)}
.rt-corner-tl.speaking .rt-corner-av{border-color:rgba(255,255,255,.7);box-shadow:0 0 20px rgba(255,255,255,.38);animation:rtCornerPulse 1.6s ease-in-out infinite}
.rt-corner-tl.speaking .rt-corner-av::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(255,255,255,.32);animation:ripple 1.6s ease-out infinite}
.rt-corner-tl.dim .rt-corner-av{opacity:.55}
@keyframes rtCornerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.rn { position:absolute; display:flex; flex-direction:column; align-items:center; gap:4px; z-index:15; transform:translate(-50%,-50%); transition:transform .25s; cursor:pointer }
.rn:hover { transform:translate(-50%,-50%) scale(1.08) }
.rn-av { width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.1); background:rgba(10,10,10,.95); display:flex; align-items:center; justify-content:center; font-size:18px; position:relative; transition:all .3s; backdrop-filter:blur(4px) }
.rn-label { font-size:8px; color:rgba(255,255,255,.22); white-space:nowrap; transition:color .3s; text-align:center }
.rn.dim .rn-av { opacity:.2 }
.rn.dim .rn-label { opacity:.35 }
.rn.waiting .rn-av { opacity:.1 }
.rn.waiting .rn-label { opacity:.22 }
.rn.lit .rn-av { border-color:rgba(255,255,255,.38); box-shadow:0 0 12px rgba(255,255,255,.14) }
.rn.lit .rn-label { color:rgba(255,255,255,.55) }
.rn.speaking .rn-av { border-color:#fff; animation:wSpeak 1.6s ease-in-out infinite }
.rn.speaking .rn-av::after { content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(255,255,255,.3); animation:ripple 1.6s ease-out infinite }
.rn.speaking .rn-label { color:#fff }
.rn.done .rn-av { border-color:rgba(255,255,255,.25); opacity:.65 }
.rn.done .rn-label { color:rgba(255,255,255,.38) }
/* Portrait-grid cropping — 5×5 grid, 6 v1 personas have fixed positions */
.rn-av.av-grid,
.seat-av.av-grid { background-image:url('/assets/portrait-grid.png'); background-size:500% 500%; filter:brightness(1.1) contrast(1.25) grayscale(.08) sepia(.06) }
/* Initial-letter fallback for personas without a portrait-grid slot.
Covers custom personas (Phase 7 Personal Council) so every advisor gets
a recognizable seat marker even before their portrait is drawn. */
.rn-av.av-initial,
.seat-av.av-initial { font-weight:600; letter-spacing:.5px; border-width:1.5px; background:rgba(10,10,10,.85) }
.rn-av.av-initial { font-size:14px }
.seat-host .seat-av.av-initial { font-size:18px }
.seat-adv .seat-av.av-initial { font-size:13px }
/* Specificity prefix .av-grid is load-bearing: without it, .seat-av's
background: shorthand at line ~504 (declared AFTER these rules) resets
background-position back to 0% 0%, making every Table-layout avatar look
like Mao. Keep the prefix. */
.av-grid.p-mao { background-position: 0% 0% }
.av-grid.p-jobs { background-position: 25% 0% }
.av-grid.p-pg { background-position: 25% 25% }
.av-grid.p-kk { background-position: 0% 25% } /* 张一鸣's slot reused; KK portrait pending v2 */
.av-grid.p-brucelee { background-position: 0% 75% }
/* huineng has NO grid slot — emoji fallback 🪷 rendered instead via JS */
@keyframes wSpeak { 0%,100% { box-shadow:0 0 18px rgba(255,255,255,.5),0 0 40px rgba(255,255,255,.15) } 50% { box-shadow:0 0 32px rgba(255,255,255,.9),0 0 70px rgba(255,255,255,.28) } }
@keyframes ripple { 0% { transform:scale(1); opacity:.5 } 100% { transform:scale(1.85); opacity:0 } }
/* ─── LAYOUT B · 42° Isometric Table ──────────────────────────────────── */
#table-scene { position:absolute; inset:0; display:none; align-items:center; justify-content:center }
#table-scene.on { display:flex }
.tbl-wrap { position:relative; width:560px; height:420px }
.tbl-surface { position:absolute; width:340px; height:188px; left:50%; top:50%; transform:translate(-50%,-50%) rotateX(42deg); border-radius:50%; background:radial-gradient(ellipse at 45% 38%,#161616 0%,#0d0d0d 55%,#080808 100%); border:1px solid rgba(255,255,255,.28); box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 70px rgba(255,255,255,.08),0 36px 90px rgba(0,0,0,.98),inset 0 0 40px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.12) }
.tbl-surface::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:200px; height:80px; border-radius:50%; background:radial-gradient(ellipse,rgba(255,255,255,.03) 0%,transparent 70%) }
.tbl-ring { position:absolute; width:382px; height:208px; left:50%; top:50%; transform:translate(-50%,-50%) rotateX(42deg); border-radius:50%; border:1px solid rgba(255,255,255,.1) }
.tbl-ring2 { position:absolute; width:310px; height:168px; left:50%; top:50%; transform:translate(-50%,-50%) rotateX(42deg); border-radius:50%; border:1px solid rgba(255,255,255,.06) }
.tbl-topic { position:absolute; left:50%; top:50%; transform:translate(-50%,-46%); text-align:center; z-index:15; pointer-events:none }
.tbl-topic-l { font-size:7.5px; color:rgba(255,255,255,.22); letter-spacing:3px; text-transform:uppercase; margin-bottom:3px }
.tbl-topic-t { font-size:12px; color:rgba(255,255,255,.4); max-width:240px; line-height:1.4 }
.seat { position:absolute; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; z-index:20; transform:translate(-50%,-50%); transition:transform .25s }
.seat:hover { transform:translate(-50%,-50%) scale(1.1)!important }
/* Host seat sits at the center of the table wrap (fix for TS version's implicit (0,0) default) */
.seat.seat-host { top:50%; left:50% }
.seat-av { border-radius:50%; border:1px solid rgba(255,255,255,.1); background:rgba(10,10,10,.95); display:flex; align-items:center; justify-content:center; position:relative; transition:all .3s; backdrop-filter:blur(4px); overflow:hidden }
.seat-host .seat-av { width:56px; height:56px; font-size:22px; border-color:rgba(255,255,255,.3); box-shadow:0 0 20px rgba(255,255,255,.08) }
.seat-host .seat-label { font-size:8.5px; color:rgba(255,255,255,.4); letter-spacing:1px }
.seat-adv .seat-av { width:38px; height:38px; font-size:16px }
.seat-label { font-size:8.5px; color:rgba(255,255,255,.2); white-space:nowrap; text-align:center; transition:color .3s }
.seat.dim .seat-av { opacity:.2 }
.seat.dim .seat-label { opacity:.35 }
.seat.waiting .seat-av { opacity:.1 }
.seat.waiting .seat-label { opacity:.2 }
.seat.lit .seat-av { border-color:rgba(255,255,255,.38); box-shadow:0 0 12px rgba(255,255,255,.14) }
.seat.lit .seat-label { color:rgba(255,255,255,.55) }
.seat.speaking .seat-av { border-color:#fff; animation:wSpeak 1.6s ease-in-out infinite }
.seat.speaking .seat-av::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid rgba(255,255,255,.28); animation:ripple 1.6s ease-out infinite }
.seat.speaking .seat-label { color:#fff }
.seat.done .seat-av { border-color:rgba(255,255,255,.22); opacity:.6 }
.seat.done .seat-label { color:rgba(255,255,255,.32) }
/* ─── Bubble (shared by both layouts) ─────────────────────────────────── */
/* C1 (2026-04-25) · Pattern A bubble冒泡 polish — bounce-out from avatar */
.rn-bubble { position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); background:rgba(8,8,8,.97); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:8px 12px; max-width:200px; min-width:120px; cursor:pointer; z-index:200; backdrop-filter:blur(16px); box-shadow:0 8px 32px rgba(0,0,0,.6); transition:border-color .2s,box-shadow .2s,transform .25s; pointer-events:auto; animation:bubblePop .42s cubic-bezier(.34,1.56,.64,1); transform-origin:bottom center }
/* Dual-layer triangle tail: outer border + inner fill, looks crisper at all
zoom levels and matches the demo's speech-bubble feel. */
.rn-bubble::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:rgba(255,255,255,.18); pointer-events:none }
.rn-bubble::before { content:''; position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:rgba(8,8,8,.97); z-index:1; pointer-events:none }
.rn-bubble:hover { border-color:var(--pc,rgba(255,255,255,.4)); box-shadow:0 8px 40px rgba(0,0,0,.7),0 0 16px var(--pc-glow,rgba(255,255,255,.12)); transform:translateX(-50%) translateY(-3px) }
.rn-bubble.active { border-color:var(--pc,rgba(255,255,255,.55)); box-shadow:0 8px 40px rgba(0,0,0,.7),0 0 20px var(--pc-glow,rgba(255,255,255,.2)) }
.rn-bubble-tag { display:inline-block; font-size:7px; padding:1px 6px; border-radius:3px; background:var(--pc,#fff); color:#000; margin-bottom:5px; font-weight:600; letter-spacing:.5px }
.rn-bubble-text { font-size:10.5px; color:rgba(255,255,255,.88); line-height:1.5; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; max-height:6.5em; overflow-y:auto; white-space:pre-wrap; word-break:break-word }
.rn-bubble-text.cur::after { content:'▋'; animation:blink .85s infinite; color:#fff }
.rn-bubble-hint { font-size:8px; color:rgba(255,255,255,.35); margin-top:5px; text-align:center; transition:color .2s }
.rn-bubble.active .rn-bubble-hint { color:var(--pc,rgba(255,255,255,.7)) }
@keyframes bubbleRise { from { opacity:0; transform:translateX(-50%) scale(.88) translateY(6px) } to { opacity:1; transform:translateX(-50%) scale(1) translateY(0) } }
/* C1 — bubblePop: more theatrical entry from avatar (origin: bottom center).
Starts tiny + below avatar, springs out with slight overshoot.
cubic-bezier(.34,1.56,.64,1) is the "back" easing that pops past 1.0 then settles. */
@keyframes bubblePop {
0% { opacity:0; transform:translateX(-50%) scale(.35) translateY(14px) }
60% { opacity:1; transform:translateX(-50%) scale(1.06) translateY(-2px) }
100% { opacity:1; transform:translateX(-50%) scale(1) translateY(0) }
}
@keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }
/* ─── Expanded bubble overlay (portaled to document.body) ─────────────────
Seats use `transform:translate(-50%,-50%)` which creates a containing
block, so a `position:fixed` inside a seat would be anchored to the seat
instead of the viewport — right-seats ended up hiding behind the sidebar
(Michael 2026-04-24). We fix this by portaling the expanded content to
document.body as a SEPARATE `.rn-bubble-overlay` element; the collapsed
bubble stays at the seat unchanged. */
.rn-bubble-overlay {
position:fixed; top:60px;
/* Center inside the scene pane (sidebar is 340px on the right). */
left:calc((100vw - 340px) / 2);
transform:translateX(-50%);
width:min(560px, calc(100vw - 340px - 60px));
max-height:calc(100vh - 90px);
padding:22px 26px 20px;
border-radius:12px;
background:linear-gradient(155deg, rgba(10,10,10,.985), rgba(14,14,18,.99));
border:1.5px solid var(--pc, rgba(255,255,255,.35));
box-shadow:0 24px 60px rgba(0,0,0,.78), 0 0 50px var(--pc-glow, rgba(255,255,255,.25));
backdrop-filter:blur(20px);
display:flex; flex-direction:column; gap:10px;
z-index:900;
animation:bubbleOverlayIn .28s cubic-bezier(.2,.75,.2,1);
}
@keyframes bubbleOverlayIn {
from { opacity:.25; transform:translateX(-50%) scale(.78) translateY(18px) }
to { opacity:1; transform:translateX(-50%) scale(1) translateY(0) }
}
.rn-bubble-overlay .rn-bubble-tag { display:inline-block; align-self:flex-start; font-size:12px; padding:3px 10px; border-radius:5px; background:var(--pc, #fff); color:#000; font-weight:600; letter-spacing:.3px; margin-bottom:2px }
.rn-bubble-body { flex:1; overflow-y:auto; font-size:14px; line-height:1.78; color:rgba(255,255,255,.92); padding-right:8px; white-space:normal; min-height:0 }
.rn-bubble-body::-webkit-scrollbar { width:4px }
.rn-bubble-body::-webkit-scrollbar-thumb { background:var(--pc, rgba(255,255,255,.24)); border-radius:2px }
.rn-bubble-body h1, .rn-bubble-body h2, .rn-bubble-body h3 { font-size:15px; color:#fff; margin:8px 0 5px }
.rn-bubble-body p { margin:6px 0 }
.rn-bubble-body ul, .rn-bubble-body ol { padding-left:22px; margin:6px 0 }
.rn-bubble-body strong { color:#fff }
.rn-bubble-body blockquote { border-left:2px solid var(--pc, rgba(255,255,255,.35)); padding-left:12px; margin:8px 0; color:rgba(255,255,255,.78) }
/* T1.2 (2026-04-25) — bumped from 26px translucent to 38px solid white circle
so testers don't miss it. Added optional scrim (.rn-bubble-scrim) for
click-outside-to-close, wired via expandBubble. */
.rn-bubble-overlay .rn-bubble-close {
position:absolute; top:12px; right:14px;
width:38px; height:38px;
background:#fff; border:none; cursor:pointer;
color:#0a0a0a; font-size:26px; line-height:1; font-weight:600;
font-family:inherit; transition:transform .12s, box-shadow .15s, background .15s;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
box-shadow:0 4px 14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.4);
z-index:1;
}
.rn-bubble-overlay .rn-bubble-close:hover { background:#f0f0f0; transform:scale(1.08); box-shadow:0 6px 20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.65) }
.rn-bubble-overlay .rn-bubble-close:active { transform:scale(.96) }
/* Scrim sits behind the panel and consumes outside clicks. */
.rn-bubble-scrim {
position:fixed; inset:0;
background:rgba(0,0,0,.45);
backdrop-filter:blur(2px);
z-index:899;
cursor:pointer;
animation:scrimIn .2s ease-out;
}
@keyframes scrimIn { from { opacity:0 } to { opacity:1 } }
.rn-bubble-overlay .rn-bubble-composer { display:flex; flex-direction:column; gap:8px; border-top:1px solid rgba(255,255,255,.1); padding-top:12px; margin-top:4px }
.rn-bubble-overlay .rn-bubble-composer textarea { width:100%; background:rgba(255,255,255,.04); border:1px solid var(--pc, rgba(255,255,255,.18)); border-radius:7px; padding:10px 12px; color:#f0f0f0; font-size:13px; line-height:1.6; outline:none; resize:vertical; font-family:inherit; min-height:68px }
.rn-bubble-overlay .rn-bubble-composer textarea:focus { border-color:var(--pc, rgba(255,255,255,.45)); background:rgba(255,255,255,.06) }
.rn-bubble-overlay .rn-bubble-composer .rn-composer-actions { display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap }
.rn-bubble-overlay .rn-bubble-composer button { padding:8px 16px; background:var(--pc, rgba(255,255,255,.2)); color:#0a0a0a; border:none; border-radius:6px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:filter .15s }
.rn-bubble-overlay .rn-bubble-composer .rn-composer-skip { background:rgba(255,255,255,.08); color:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.18); font-weight:500 }
.rn-bubble-overlay .rn-bubble-composer .rn-composer-skip:hover { background:rgba(255,255,255,.14); color:#fff }
.rn-bubble-overlay .rn-bubble-composer button:hover { filter:brightness(1.12) }
/* Visual cue on the collapsed bubble while its overlay is open. */
.rn-bubble.expanded {
border-color:var(--pc, rgba(255,255,255,.6));
box-shadow:0 8px 40px rgba(0,0,0,.7), 0 0 22px var(--pc-glow, rgba(255,255,255,.3));
}
/* T2.1 (2026-04-25) — Step 6 focus mode: dim non-speaking advisors so
the eye tracks the current speaker first. .completed = mid-fade after
their turn; .dimmed = strong fade while someone else speaks. */
.rn-bubble.dimmed {
opacity:.22; transform:translateX(-50%) scale(.82);
transition:opacity .25s ease, transform .25s ease;
}
.rn-bubble.dimmed:hover { opacity:.65 }
.rn-bubble.completed {
opacity:.62; transform:translateX(-50%) scale(.94);
transition:opacity .25s ease, transform .25s ease;
}
.rn-bubble.completed:hover { opacity:.95 }
/* Host bubble — readable rendered markdown with internal scroll.
Advisor bubbles keep the compact preview+click-to-expand pattern. */
.rn-bubble.host-bubble { max-width:420px; min-width:280px; padding:10px 14px; cursor:default }
.rn-bubble.host-bubble:hover { transform:translateX(-50%) }
.rn-bubble.host-bubble .rn-bubble-text { font-size:12px; display:block; -webkit-line-clamp:unset; max-height:200px; overflow-y:auto; overflow-x:hidden; white-space:normal }
.rn-bubble.host-bubble .rn-bubble-text::-webkit-scrollbar { width:3px }
.rn-bubble.host-bubble .rn-bubble-text::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22) }
.rn-bubble.host-bubble .rn-bubble-text h1,
.rn-bubble.host-bubble .rn-bubble-text h2,
.rn-bubble.host-bubble .rn-bubble-text h3 { font-size:13px; margin:6px 0 4px; color:#fff }
.rn-bubble.host-bubble .rn-bubble-text p { margin:4px 0 }
.rn-bubble.host-bubble .rn-bubble-text ul,
.rn-bubble.host-bubble .rn-bubble-text ol { padding-left:18px; margin:4px 0 }
/* ─── #rt-stage — where step content mounts inside the sidebar ───────── */
#rt-stage { flex:1; overflow-y:auto; padding:14px 16px; position:relative }
#rt-stage .step { margin-bottom:0 }
#rt-stage::-webkit-scrollbar { width:3px }
#rt-stage::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18) }
/* Sidebar-specific: shrink step headers, fit inputs to narrower width */
/* 2026-04-26 v2 · Sidebar font scale — Michael 嫌字太大. Established a tight
scale: titles 11px, body 11.5px, meta 9px. Down ~1px across the board
from the prior values. Linear desktop mode (outside #rt-stage) keeps its
13-15px scale unchanged. */
body.rt-mode #rt-stage .sh { margin-bottom:8px }
body.rt-mode #rt-stage .stitle { font-size:11.5px }
body.rt-mode #rt-stage .ssub { font-size:9px }
body.rt-mode #rt-stage .ginput { font-size:11.5px }
/* F6 · General content text inside the 340px sidebar — step 4 opinion bodies,
step 7 pre-mortem / summary cards, step 8 eval + bayesian markdown — all
dropped ~15-20% from desktop default so they don't cramp the narrow pane. */
body.rt-mode #rt-stage .ocard-t { font-size:11.5px; line-height:1.6 }
body.rt-mode #rt-stage .sb { font-size:11.5px; line-height:1.55 }
body.rt-mode #rt-stage .md-body p { font-size:11.5px; line-height:1.65 }
body.rt-mode #rt-stage .md-body li { font-size:11.5px; line-height:1.65 }
body.rt-mode #rt-stage .md-body h3 { font-size:12.5px; margin:8px 0 4px }
body.rt-mode #rt-stage .md-body h4 { font-size:11.5px; margin:6px 0 3px }
body.rt-mode #rt-stage .ocard-h .ocard-n { font-size:10.5px }
body.rt-mode #rt-stage .scard .st { font-size:11px; letter-spacing:.3px }
body.rt-mode #rt-stage .scard { padding:11px 12px }
body.rt-mode #rt-stage .ocard { padding:10px 12px }
body.rt-mode #rt-stage .btn { font-size:11.5px; padding:8px 12px }
/* In rt-mode, Step 2 facilitator output ALSO renders as a host bubble on the
stage (see rehydrateSceneForStep, app.js). The sidebar chat keeps the full
exchange (facilitator + user) so the case-owner can re-read the locked
statement on review without having to expand the topic pill. */
body.rt-mode #s2-chat .cmsg.u { margin-bottom:6px }
body.rt-mode #s2-chat .cmsg.u .cbub { font-size:11px; padding:6px 9px }
/* Step 3 live persona-question cards render both as bubbles above seats AND
as bounded, internally-scrollable cards in the sidebar. The post-streaming
answer form (.qa-card) uses the existing compact styling below. */
body.rt-mode #s3-content > .ocard {
max-height:160px; margin-bottom:8px; padding:8px 10px;
display:flex; flex-direction:column;
background:rgba(18,18,18,.75); border:1px solid rgba(255,255,255,.08); border-radius:8px;
}
body.rt-mode #s3-content > .ocard .ocard-h { gap:6px; margin-bottom:6px; flex-shrink:0 }
body.rt-mode #s3-content > .ocard .ocard-n { font-size:10px }
body.rt-mode #s3-content > .ocard .ocard-t { font-size:10.5px; line-height:1.55; overflow-y:auto; flex:1; padding-right:4px }
body.rt-mode #s3-content > .ocard .ocard-t::-webkit-scrollbar { width:2px }
body.rt-mode #s3-content > .ocard .ocard-t::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18) }
body.rt-mode #s3-content .loading-text { font-size:10.5px }
/* Compact .qa-card in rt-mode to fit the 340px sidebar */
body.rt-mode .qa-card { padding:10px 12px; margin-bottom:8px }
body.rt-mode .qa-card .ocard-h { gap:6px; margin-bottom:6px }
body.rt-mode .qa-card .ocard-n { font-size:10px }
body.rt-mode .qa-card .qa-q { font-size:11px; line-height:1.55; margin-bottom:7px }
body.rt-mode .qa-card .qa-a { font-size:11px; padding:6px 8px; min-height:44px }
/* Step 4 persona-opinion cards now ride a horizontal scroll-snap track in
rt-mode (Michael 2026-04-25). Each card is fixed-width so 17 advisors stay
readable without cramming; user swipes / arrow-keys / drag to move through
them. Vertical layout retained when not in rt-mode. */
/* T-issue#2 (2026-04-25) — case-owner pushback: horizontal scroll-snap was
confusing in narrow sidebar. Stack vertically: full-width cards top-down,
sidebar already scrolls vertically as whole. */
body.rt-mode #s4-cards {
display:flex; flex-direction:column; gap:10px;
padding-bottom:6px;
}
body.rt-mode #s4-cards > .ocard {
width:100%; max-width:100%; height:auto; max-height:none;
margin-bottom:0; padding:11px 13px;
display:flex; flex-direction:column;
background:rgba(18,18,18,.75); border:1px solid rgba(255,255,255,.08); border-radius:8px;
}
body.rt-mode #s4-cards > .ocard .ocard-h { gap:6px; margin-bottom:6px; flex-shrink:0 }
body.rt-mode #s4-cards > .ocard .ocard-n { font-size:10px }
body.rt-mode #s4-cards > .ocard .ocard-t { font-size:11px; line-height:1.6; overflow-y:auto; flex:1; padding-right:4px }
body.rt-mode #s4-cards > .ocard .ocard-t::-webkit-scrollbar { width:2px }
body.rt-mode #s4-cards > .ocard .ocard-t::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18) }
body.rt-mode #s4-cards > .ocard[data-p] { border-left:3px solid var(--c,rgba(255,255,255,.3)) }
/* C3: sidebar opinion + question cards are clickable in rt-mode → speech panel.
Hover lift matches bubble interaction so users learn the pattern once. */
body.rt-mode #s3-content > .ocard,
body.rt-mode #s4-cards > .ocard { cursor:pointer; transition:border-color .2s, transform .2s }
body.rt-mode #s3-content > .ocard:hover,
body.rt-mode #s4-cards > .ocard:hover { border-color:rgba(255,255,255,.22); transform:translateY(-1px) }
/* But keep the answer textarea interactive (not triggering card click) */
body.rt-mode .qa-card { cursor:default }
/* ─── #view-speech · speech panel anchored to viewport right edge ─────
position:fixed + high z-index so the panel slides in from the true right
edge of the screen, overlaying the sidebar (which sits at z-index ~1). */
#view-speech { position:fixed; top:0; right:0; width:0; height:100vh; overflow:hidden; background:rgba(10,10,10,.98); border-left:1px solid rgba(255,255,255,.1); backdrop-filter:blur(20px); transition:width .32s cubic-bezier(.4,0,.2,1); z-index:1000 }
#view-speech.open { width:420px }
#view-speech.slide-in { animation:slideIn .3s ease-out }
@keyframes slideIn { from { opacity:0; transform:translateX(24px) } to { opacity:1; transform:translateX(0) } }
.vs-inner { width:380px; padding:20px; height:100%; overflow-y:auto; display:flex; flex-direction:column }
.vs-body { flex:1 0 auto; min-height:120px }
.vs-composer { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:8px; flex-shrink:0 }
.vs-composer textarea { width:100%; box-sizing:border-box; min-height:72px; resize:vertical; padding:9px 11px; border-radius:6px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:#fff; font-size:12px; font-family:inherit; line-height:1.5 }
.vs-composer textarea:focus { outline:none; border-color:var(--pc,rgba(255,255,255,.3)); background:rgba(255,255,255,.05) }
.vs-composer-btn { padding:8px 12px; border-radius:6px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; font-size:11.5px; cursor:pointer; transition:all .2s }
.vs-composer-btn:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28) }
.vs-inner::-webkit-scrollbar { width:3px }
.vs-inner::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18) }
.vs-back { display:inline-flex; align-items:center; gap:6px; margin-bottom:16px; font-size:10px; color:rgba(255,255,255,.4); letter-spacing:1px; cursor:pointer; padding:6px 10px; border-radius:6px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); transition:all .2s }
.vs-back:hover { color:#fff; border-color:rgba(255,255,255,.25) }
.vs-hdr { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:14px }
.vs-av { width:40px; height:40px; border-radius:50%; border:1.5px solid var(--pc,rgba(255,255,255,.3)); background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; box-shadow:0 0 16px var(--pc-glow,rgba(255,255,255,.1)) }
.vs-name { font-size:13px; font-weight:600; color:#fff }
.vs-meta { font-size:9px; color:rgba(255,255,255,.35); letter-spacing:.5px; margin-top:2px }
.vs-body { font-size:12px; color:rgba(255,255,255,.72); line-height:1.8 }
.vs-body p { margin-bottom:8px }
.vs-body blockquote { padding:8px 11px; background:rgba(255,255,255,.04); border-left:2px solid rgba(255,255,255,.2); border-radius:0 6px 6px 0; margin:10px 0; color:rgba(255,255,255,.55); font-style:italic }
.vs-body strong { color:rgba(255,255,255,.92); font-weight:600 }
.vs-body h1,.vs-body h2,.vs-body h3 { color:rgba(255,255,255,.92); margin:12px 0 6px; font-weight:600 }
.vs-body h1 { font-size:15px } .vs-body h2 { font-size:13.5px } .vs-body h3 { font-size:12.5px }
.vs-body code { font-family:monospace; font-size:11px; background:rgba(255,255,255,.07); padding:2px 5px; border-radius:3px }
/* ══ AUTH OVERLAY (Phase A) ═══════════════════════════════ */
.auth-overlay{position:fixed;inset:0;background:rgba(10,10,10,.92);backdrop-filter:blur(12px);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.auth-card{width:100%;max-width:360px;background:#141414;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:28px 24px 22px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.auth-card h2{font-size:18px;letter-spacing:6px;font-weight:500;color:rgba(255,255,255,.92);text-align:center;margin-bottom:22px}
.auth-tabs{display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08)}
.auth-tab{flex:1;background:transparent;border:none;color:rgba(255,255,255,.5);padding:10px 0;font-size:13px;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;transition:all .2s}
.auth-tab.on{color:#fff;border-bottom-color:rgba(176,176,255,.7)}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.3px}
.auth-form input{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:10px 12px;font-size:14px;color:#fff;font-family:inherit;transition:border-color .15s}
.auth-form input:focus{outline:none;border-color:rgba(176,176,255,.55);background:rgba(255,255,255,.06)}
.auth-error{min-height:16px;color:#ff8a8a;font-size:11px}
.auth-submit{background:rgba(176,176,255,.18);border:1px solid rgba(176,176,255,.45);color:#fff;padding:10px 14px;border-radius:6px;font-size:13px;cursor:pointer;font-family:inherit;margin-top:4px;transition:all .15s;font-weight:500}
.auth-submit:hover:not(:disabled){background:rgba(176,176,255,.3);border-color:rgba(176,176,255,.7)}
.auth-submit:disabled{opacity:.5;cursor:wait}
.auth-hint{margin-top:14px;font-size:10.5px;color:rgba(255,255,255,.35);text-align:center;line-height:1.55}
/* Settings logout block */
.settings-divider{height:1px;background:rgba(255,255,255,.08);margin:20px 0 14px}
.settings-account{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-account-label{font-size:11px;color:rgba(255,255,255,.5)}
.settings-account-label span{color:rgba(255,255,255,.85);font-weight:500}
.settings-logout{padding:5px 12px!important;font-size:11px!important}
/* Mobile: wrap auth-tabs nicely */
@media (max-width:480px){.auth-card{padding:22px 18px 18px}.auth-card h2{font-size:16px;letter-spacing:4px}}
/* ─── Phase H · Floating feedback button + modal ──────────────────────── */
.fb-dock{position:fixed;right:20px;bottom:20px;z-index:9000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.fb-fab{
width:48px;height:48px;border-radius:50%;
background:rgba(176,176,255,.28);border:1px solid rgba(176,176,255,.55);
color:#fff;font-size:20px;line-height:1;cursor:pointer;font-family:inherit;
display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 0 rgba(176,176,255,.55);
transition:all .2s, box-shadow .6s;
pointer-events:auto;
}
.fb-fab:hover{transform:scale(1.08);background:rgba(176,176,255,.42);border-color:rgba(176,176,255,.8);box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 0 8px rgba(176,176,255,0)}
.fb-fab:active{transform:scale(.94)}
.fb-dock.on .fb-fab{background:rgba(176,176,255,.48);border-color:rgba(176,176,255,.9)}
.fb-popover{
width:min(292px,calc(100vw - 28px));padding:12px;background:#101010;
border:1px solid rgba(176,176,255,.38);border-radius:12px;
box-shadow:0 18px 60px rgba(0,0,0,.62),0 0 0 1px rgba(176,176,255,.12) inset;
opacity:0;pointer-events:none;transform:translateY(8px) scale(.98);transform-origin:bottom right;
transition:opacity .18s ease,transform .18s ease;
}
.fb-dock.on .fb-popover{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.fb-popover-qr{display:grid;gap:10px}
.fb-popover-qr img{
width:100%;height:auto;max-height:min(70vh,420px);object-fit:contain;background:#191919;
border:1px solid rgba(255,255,255,.1);border-radius:8px;-webkit-touch-callout:default;user-select:auto;
}
.fb-popover-copy b{display:block;color:#fff;font-size:13px;margin-bottom:2px}
.fb-popover-copy span{display:block;color:rgba(255,255,255,.66);font-size:12px;line-height:1.5}
.fb-popover-feedback{width:100%;margin-top:10px;padding:9px 12px;border-radius:8px;border:1px solid rgba(176,176,255,.45);background:rgba(176,176,255,.18);color:#fff;font-family:inherit;font-size:12.5px;cursor:pointer}
.fb-popover-feedback:hover{background:rgba(176,176,255,.28)}
.fb-modal{position:fixed;inset:0;z-index:9100;background:rgba(8,8,8,.78);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .22s}
.fb-modal.on{opacity:1;pointer-events:auto}
.fb-card{width:min(440px,100%);background:#0e0e0e;border:1px solid rgba(176,176,255,.42);border-radius:14px;padding:22px 24px 18px;box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 1px rgba(176,176,255,.18) inset;transform:translateY(8px);transition:transform .22s}
.fb-modal.on .fb-card{transform:translateY(0)}
.fb-title{font-size:17px;font-weight:600;color:#fff;margin-bottom:6px;letter-spacing:.4px}
.fb-sub{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.7;margin-bottom:12px}
.fb-text{width:100%;box-sizing:border-box;min-height:110px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:10px 12px;color:#f0f0f0;font-size:13px;line-height:1.7;font-family:inherit;resize:vertical;outline:none;transition:border-color .15s}
.fb-text:focus{border-color:rgba(176,176,255,.55);background:rgba(255,255,255,.06)}
.fb-context-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:rgba(255,255,255,.6);margin-top:10px;cursor:pointer;user-select:none}
.fb-context-row input{margin:0;cursor:pointer}
.fb-error{min-height:16px;color:#ff8a8a;font-size:11.5px;margin-top:6px}
.fb-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.fb-cancel{background:transparent;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75);padding:8px 14px;border-radius:7px;font-size:12.5px;cursor:pointer;font-family:inherit;transition:all .15s}
.fb-cancel:hover{border-color:rgba(255,255,255,.4);color:#fff}
.fb-submit{background:rgba(176,176,255,.3);border:1px solid rgba(176,176,255,.55);color:#fff;padding:8px 16px;border-radius:7px;font-size:12.5px;cursor:pointer;font-family:inherit;font-weight:500;transition:all .15s}
.fb-submit:hover:not(:disabled){background:rgba(176,176,255,.5);border-color:rgba(176,176,255,.85)}
.fb-submit:disabled{opacity:.55;cursor:wait}
/* Make the floating button stay clear of mobile bottom-edge UI */
@media (max-width:600px){
.fb-dock{right:14px;bottom:14px}
.fb-fab{width:42px;height:42px;font-size:17px}
.fb-popover{width:min(272px,calc(100vw - 28px));padding:10px}
}
/* ─── F5 · Persona picker selected-strip ────────────────────────────────
Selected advisors pop out of the grid into a compact horizontal chip strip
above it — so "who's on the team" is one glance instead of a scan. */
.pp-selected-strip{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.pp-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 4px 4px 8px;background:rgba(176,176,255,.14);border:1px solid rgba(176,176,255,.4);border-radius:16px;font-size:11.5px;color:rgba(255,255,255,.92);user-select:none}
.pp-chip-av{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;flex-shrink:0;background:#222}
.pp-chip-av.av-grid{background-image:url(/portrait-grid.png);background-size:500% 500%}
.pp-chip-av.av-initial{background:transparent;border:1px solid currentColor}
.pp-chip-name{line-height:1.2;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-chip-x{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.7);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;padding:0;transition:all .15s}
.pp-chip-x:hover{background:rgba(255,120,120,.4);color:#fff}
/* ─── F7.4 · Step 8 per-advisor scard border ───────────────────────────── */
.scard[data-p]{border-left:2px solid var(--c,rgba(255,255,255,.3))}
.scard[data-p] .st{color:var(--c,#fff)}
/* ─── F7.3/7.4/7.1 · Host-bubble variant tags (color only) ──────────────── */
.rn-bubble.host-bubble.v-premortem .rn-bubble-tag{background:#ff8a66;color:#000}
.rn-bubble.host-bubble.v-bayesian .rn-bubble-tag{background:#b39ddb;color:#000}
.rn-bubble.host-bubble.v-summary .rn-bubble-tag{background:#b0b0ff;color:#000}
.rn-bubble.host-bubble.v-dimensions .rn-bubble-tag{background:#4ecdc4;color:#000}
/* ─── F2 · Todo "saved" ephemeral flash ───────────────────────────────── */
.todo-saved-flash{display:inline-block;margin-left:10px;font-size:11px;color:#8fe08f;animation:todoFlashIn .18s ease-out;vertical-align:middle}
/* 2026-04-26 v4 · persistent confirm chip — must NOT push the row taller.
Was display:block + margin-top:6px → made todo row stretch. Now inline-flex
with flex-shrink:0, sits next to text in same row, short label. */
.todo-saved-flash.persistent{display:inline-flex;align-items:center;flex-shrink:0;margin-left:8px;margin-top:0;font-size:10.5px;color:rgba(143,224,143,.95);background:rgba(143,224,143,.1);border:1px solid rgba(143,224,143,.3);padding:2px 8px;border-radius:9px;letter-spacing:.2px;line-height:1.3;white-space:nowrap}
@keyframes todoFlashIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}
/* ─── #2 · Topic pill (lower-left, 圆桌 locked 核心问题 across Steps 3-8) ── */
.rt-topic-pill{
position:absolute;left:16px;bottom:16px;z-index:40;
max-width:300px;padding:8px 12px 9px;
background:rgba(20,20,20,.86);border:1px solid rgba(255,255,255,.14);border-radius:10px;
backdrop-filter:blur(10px);cursor:pointer;user-select:none;
transition:max-width .25s ease, max-height .25s ease;
box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.rt-topic-pill:hover{border-color:rgba(255,255,255,.3)}
.rt-topic-pill-label{font-size:9px;color:rgba(255,255,255,.45);letter-spacing:1.4px;margin-bottom:3px;font-weight:500;text-transform:uppercase}
.rt-topic-pill-summary{font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.88);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.rt-topic-pill-full{display:none;font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.85)}
.rt-topic-pill-full p{margin:0 0 6px}
.rt-topic-pill-full ul,.rt-topic-pill-full ol{margin:0 0 6px;padding-left:18px}
.rt-topic-pill-full li{margin-bottom:3px}
.rt-topic-pill-full strong{color:#fff}
.rt-topic-pill.expanded{max-width:460px;max-height:50vh;overflow-y:auto}
.rt-topic-pill.expanded .rt-topic-pill-summary{display:none}
.rt-topic-pill.expanded .rt-topic-pill-full{display:block}
.rt-topic-pill::-webkit-scrollbar{width:3px}
.rt-topic-pill::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:2px}
/* ─── #1 · Pulse the sidebar submit button once auto-chain finishes ───── */
@keyframes s3SubmitPulse{0%,100%{box-shadow:0 0 0 0 rgba(176,176,255,.5)}50%{box-shadow:0 0 0 8px rgba(176,176,255,0)}}
.pulse-submit{animation:s3SubmitPulse 1.4s ease-in-out 3}
/* ─── #4 · Step 3 → Step 4 confirmation card (scene center) ─────────────
Backdrop dims the scene; card is absolutely centered with primary/secondary
actions. Hidden by default; .on shows it. Clicking backdrop = revise. */
.rt-confirm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s ease}
.rt-confirm-backdrop.on{opacity:1;pointer-events:auto}
.rt-confirm-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);z-index:60;width:min(420px,calc(100% - 32px));padding:22px 24px 18px;background:#0e0e0e;border:1px solid rgba(176,176,255,.42);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.65),0 0 0 1px rgba(176,176,255,.18) inset;opacity:0;pointer-events:none;transition:opacity .22s ease, transform .22s ease}
.rt-confirm-card.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.rt-confirm-title{font-size:17px;font-weight:600;color:#fff;margin-bottom:6px;letter-spacing:.5px}
.rt-confirm-sub{font-size:12.5px;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:16px}
.rt-confirm-actions{display:flex;gap:8px;justify-content:flex-end}
.rt-confirm-primary{background:rgba(176,176,255,.22);border:1px solid rgba(176,176,255,.55);color:#fff;padding:9px 16px;border-radius:7px;font-size:12.5px;cursor:pointer;font-family:inherit;font-weight:500;transition:all .15s}
.rt-confirm-primary:hover{background:rgba(176,176,255,.36);border-color:rgba(176,176,255,.85)}
.rt-confirm-secondary{background:transparent;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75);padding:9px 14px;border-radius:7px;font-size:12.5px;cursor:pointer;font-family:inherit;transition:all .15s}
.rt-confirm-secondary:hover{border-color:rgba(255,255,255,.42);color:#fff}
/* ─── Wave 2 · Spotlight bubble (Step 4 + Step 6 read-only browse) ─────
Center of the scene pane shows ONE advisor's full speech in a large
readable card. Ring seats stay as context. ←/→ buttons + keyboard
cycle through advisors who have spoken. */
.rt-spotlight{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
z-index:38;
width:min(380px, calc(100% - 220px));max-height:62vh;
padding:14px 16px 12px;
background:rgba(8,8,8,.92);border:1px solid var(--pc, rgba(255,255,255,.16));border-radius:12px;
backdrop-filter:blur(14px);
box-shadow:0 18px 60px rgba(0,0,0,.65), 0 0 24px var(--pc-glow, rgba(176,176,255,.18));
display:flex;flex-direction:column;
pointer-events:auto;
}
/* T1.4 follow-up (2026-04-25) — spotlight bubble had no close affordance,
case-owner had to click outside / wait for replacement. Match the bubble-
overlay × style for consistency. */
.rt-sp-close{
position:absolute; top:10px; right:12px;
width:32px; height:32px;
background:#fff; border:none; cursor:pointer;
color:#0a0a0a; font-size:22px; line-height:1; font-weight:600;
font-family:inherit; transition:transform .12s, box-shadow .15s;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
box-shadow:0 4px 12px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.4);
z-index:1;
}
.rt-sp-close:hover{ transform:scale(1.08); box-shadow:0 6px 16px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.65) }
.rt-sp-close:active{ transform:scale(.96) }
.rt-spotlight-tag{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-shrink:0}
.rt-sp-name{font-size:13px;font-weight:600;color:var(--pc, #fff);letter-spacing:.4px}
.rt-sp-camp{font-size:10px;padding:2px 8px;border-radius:11px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.78);letter-spacing:.4px}
.rt-spotlight.camp-pro .rt-sp-camp{background:rgba(91,155,213,.28);color:#bcd9ee}
.rt-spotlight.camp-con .rt-sp-camp{background:rgba(232,90,90,.28);color:#f0baba}
.rt-spotlight.camp-neutral .rt-sp-camp{background:rgba(160,160,160,.28);color:#d6d6d6}
.rt-spotlight-body{flex:1;overflow-y:auto;font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.86);padding-right:4px}
.rt-spotlight-body::-webkit-scrollbar{width:3px}
.rt-spotlight-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px}
.rt-spotlight-body p{margin:0 0 7px}
.rt-spotlight-body strong{color:#fff}
.rt-spotlight-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-shrink:0;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.rt-sp-arrow{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);font-size:14px;cursor:pointer;font-family:inherit;transition:all .15s;display:flex;align-items:center;justify-content:center;line-height:1}
.rt-sp-arrow:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
.rt-sp-arrow:disabled{opacity:.3;cursor:not-allowed}
.rt-sp-pos{font-size:10.5px;color:rgba(255,255,255,.55);letter-spacing:1.2px;font-variant-numeric:tabular-nums}
/* Spotlit seat: extra glow ring */
.rn.spotlit, .seat.spotlit { z-index:5 }
.rn.spotlit::after, .seat.spotlit::after{
content:'';position:absolute;inset:-6px;border-radius:50%;
border:2px solid rgba(255,255,255,.7);
animation:spotlitPulse 1.6s ease-in-out infinite;pointer-events:none;
}
@keyframes spotlitPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.08)}}
/* ─── Wave 4 · Step 8 task-coin flash ───────────────────────────────── */
@keyframes coinPop{0%{transform:scale(.4) rotate(-180deg);opacity:0}40%{transform:scale(1.2) rotate(0);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.todo-coin{display:inline-block;margin-left:8px;font-size:14px;animation:coinPop .42s cubic-bezier(.34,1.56,.64,1);vertical-align:middle}
.todo-item.done .todo-coin{filter:drop-shadow(0 0 6px rgba(255,200,80,.6))}
/* ─── Wave 4 · Step 7 premortem-theatre tint (host bubble in v-premortem) ─── */
.rn-bubble.host-bubble.v-premortem{
background:linear-gradient(180deg, rgba(50,15,10,.88) 0%, rgba(20,8,8,.92) 100%);
border-color:rgba(255,138,102,.45);
box-shadow:0 12px 40px rgba(255,90,40,.25), inset 0 0 20px rgba(255,90,40,.08);
}
.rn-bubble.host-bubble.v-premortem .rn-bubble-text{color:rgba(255,220,210,.92)}
/* ─── Step 6 dim tracker (upper-right of scene pane) ───────────────────
Vertical chip column listing all dimensions being debated. .now = current,
.done = finished, .upcoming = pending. Constrained max-width so it doesn't
overlap the central round table. Click any chip to scroll the sidebar to
that dim's section. */
.rt-dim-tracker{
position:absolute;top:14px;right:14px;z-index:42;
width:152px;max-width:152px;padding:7px 9px 8px;
background:rgba(20,20,20,.86);border:1px solid rgba(255,255,255,.12);border-radius:10px;
backdrop-filter:blur(10px);
box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.rt-dim-tracker-label{font-size:9px;color:rgba(255,255,255,.45);letter-spacing:1.4px;margin-bottom:6px;font-weight:500;text-transform:uppercase}
.rt-dim-tracker-row{display:flex;flex-direction:column;gap:5px;flex-wrap:nowrap}
.rt-dim-chip{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;font-size:10.5px;color:rgba(255,255,255,.62);cursor:pointer;font-family:inherit;transition:all .15s;width:100%;text-align:left}
.rt-dim-chip-n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.08);font-size:9.5px;font-weight:600;color:rgba(255,255,255,.7);flex-shrink:0}
.rt-dim-chip-l{line-height:1.25;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-dim-chip:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
.rt-dim-chip.done{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.16)}
.rt-dim-chip.done .rt-dim-chip-n{background:rgba(176,176,255,.22);color:rgba(255,255,255,.85)}
.rt-dim-chip.now{background:rgba(176,176,255,.18);border-color:rgba(176,176,255,.55);color:#fff}
.rt-dim-chip.now .rt-dim-chip-n{background:rgba(176,176,255,.55);color:#000;animation:dimChipPulse 1.6s ease-in-out infinite}
@keyframes dimChipPulse{0%,100%{box-shadow:0 0 0 0 rgba(176,176,255,.45)}50%{box-shadow:0 0 0 4px rgba(176,176,255,0)}}
.rt-dim-chip.focus{border-color:rgba(255,255,255,.4)}
/* ─── Step 6 seat camp colors ──────────────────────────────────────────
Subtle ring + glow tint applied to a seat's persona avatar based on the
advisor's declared 立场 (parsed from the first lines of their debate
stream). Three camps: pro (cool blue), con (warm coral), neutral (slate).
Cleared between dimensions and on Step 6 exit. */
.rn.camp-pro .av-grid,
.rn.camp-pro .av-initial,
.seat.camp-pro .seat-av,
.rn.camp-pro,
.seat.camp-pro {
box-shadow:0 0 0 2px #5b9bd5, 0 0 14px rgba(91,155,213,.55);
}
.rn.camp-con .av-grid,
.rn.camp-con .av-initial,
.seat.camp-con .seat-av,
.rn.camp-con,
.seat.camp-con {
box-shadow:0 0 0 2px #e85a5a, 0 0 14px rgba(232,90,90,.55);
}
.rn.camp-neutral .av-grid,
.rn.camp-neutral .av-initial,
.seat.camp-neutral .seat-av,
.rn.camp-neutral,
.seat.camp-neutral {
box-shadow:0 0 0 2px #a0a0a0, 0 0 10px rgba(160,160,160,.45);
}
/* C2 (2026-04-25) · Camp region labels around the ring — fade in on reseat */
#rt-camp-regions{position:absolute;inset:0;pointer-events:none;z-index:6}
.rt-camp-region{position:absolute;font-size:11px;letter-spacing:6px;font-weight:600;text-transform:none;opacity:0;animation:campRegionFadeIn .9s ease-out .15s forwards;pointer-events:none}
.rt-camp-region.rt-camp-pro{left:6%;top:50%;transform:translateY(-50%) rotate(-90deg);color:rgba(91,155,213,.55);text-shadow:0 0 14px rgba(91,155,213,.4)}
.rt-camp-region.rt-camp-con{right:6%;top:50%;transform:translateY(-50%) rotate(90deg);color:rgba(232,90,90,.55);text-shadow:0 0 14px rgba(232,90,90,.4)}
.rt-camp-region.rt-camp-neu{left:50%;bottom:8%;transform:translateX(-50%);color:rgba(180,180,180,.55);text-shadow:0 0 12px rgba(180,180,180,.35)}
@keyframes campRegionFadeIn{from{opacity:0}to{opacity:1}}
/* ─── Step 6 sidebar swipe per dim ─────────────────────────────────────
Each .dim-body becomes a horizontal scroll-snap track of advisor cards
(.dbmsg). Long debates with many advisors stay readable without an
8000px-tall sidebar; user swipes/drags through positions. The host
summary card (.dbmsg.h) is double-width so it reads naturally as the
capstone. */
body.rt-mode .dim-section { margin-bottom:10px }
body.rt-mode .dim-section .dim-header { padding:8px 10px 6px }
body.rt-mode .dim-section .dim-badge { font-size:9.5px }
body.rt-mode .dim-section .dim-title { font-size:12px }
body.rt-mode .dim-body{
display:flex; flex-direction:column; gap:10px;
padding:6px 4px 8px;
scrollbar-width:thin;
}
body.rt-mode .dim-body::-webkit-scrollbar{height:6px}
body.rt-mode .dim-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
body.rt-mode .dim-body .dbmsg{
width:100%; max-width:100%; height:auto; max-height:none;
margin:0; padding:10px 12px;
display:flex; flex-direction:column;
background:rgba(18,18,18,.75); border:1px solid rgba(255,255,255,.08); border-radius:8px;
}
body.rt-mode .dim-body .dbmsg.h{border-color:rgba(176,176,255,.35)}
body.rt-mode .dim-body .dbmsg .dbmsg-h{flex-shrink:0;margin-bottom:6px}
body.rt-mode .dim-body .dbmsg .dbmsg-n{font-size:10.5px}
body.rt-mode .dim-body .dbmsg .dbmsg-t{font-size:11px;line-height:1.6;flex:1;overflow-y:auto;padding-right:4px}
body.rt-mode .dim-body .dbmsg .dbmsg-t::-webkit-scrollbar{width:2px}
body.rt-mode .dim-body .dbmsg .dbmsg-t::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
/* ─── F9 · Responsive roundtable ≤900px ───────────────────────────────── */
@media (max-width:900px){
/* Shrink the stage geometry so ring + table still fit on narrow desktops
and most tablet widths. Seats themselves get a size floor below. */
body.rt-mode .ring-wrap{width:340px;height:340px}
body.rt-mode .tbl-wrap{width:340px;height:260px}
body.rt-mode .seat-adv,
body.rt-mode .rn{width:42px;height:42px;font-size:11px}
body.rt-mode .rn-bubble{max-width:160px;font-size:10px}
body.rt-mode .rn-bubble-text{font-size:10px}
/* Stack scene above sidebar instead of side-by-side */
body.rt-mode .rt-scene-pane{height:55vh;width:100%;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
body.rt-mode .rt-side-pane{width:100%;border-left:none;border-top:1px solid rgba(255,255,255,.08);height:45vh}
body.rt-mode #roundtable{flex-direction:column}
/* Expanded overlay: full width, no horizontal centering */
body.rt-mode .rn-bubble-overlay{left:16px!important;right:16px!important;width:auto!important;transform:none!important;max-width:none!important}
/* Topic pill shrinks on mobile */
body.rt-mode .rt-topic-pill{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:6px 10px}
body.rt-mode .rt-topic-pill-summary{font-size:10.5px;-webkit-line-clamp:2}
/* Dim tracker shrinks on mobile */
body.rt-mode .rt-dim-tracker{top:10px;right:10px;max-width:calc(100% - 20px);padding:5px 8px}
body.rt-mode .rt-dim-chip-l{display:none}
body.rt-mode .rt-dim-chip{padding:3px 4px}
/* Step 4 + Step 6 cards: full-width column at narrow viewports too */
body.rt-mode #s4-cards > .ocard,
body.rt-mode .dim-body .dbmsg{width:100%;max-width:100%;height:auto;max-height:none}
}
/* T3.2 (2026-04-25) — phone breakpoint: shrink seats further so 圆桌 doesn't
overlap on portrait mobile. */
@media (max-width:480px){
body.rt-mode .ring-wrap{width:280px;height:280px}
body.rt-mode .tbl-wrap{width:280px;height:220px}
body.rt-mode .seat-adv,
body.rt-mode .rn{width:32px;height:32px;font-size:9.5px}
body.rt-mode .rn-bubble{max-width:60vw;font-size:10px;padding:5px 8px}
body.rt-mode .rn-bubble-text{font-size:10px;-webkit-line-clamp:2}
body.rt-mode .rn-bubble-overlay{left:10px!important;right:10px!important;padding:14px 14px 12px;max-height:78vh}
body.rt-mode .rn-bubble-overlay .rn-bubble-close{width:34px;height:34px;font-size:22px;top:10px;right:10px}
body.rt-mode .rn-bubble-body{font-size:13px;line-height:1.7}
body.rt-mode .rt-scene-pane{height:50vh}
body.rt-mode .rt-side-pane{height:50vh}
}
/* 2026-04-26 · Phase 6.7 v3 — minimal mobile roundtable (tighter).
v2 was 240px ring + breathing animation + 32px dots — Michael said "smaller,
占整个界面 1/5". v3:
- 140px ring (~20vh total scene-pane), 22px colored dots, 64px center pivot
- Force-show #ring-scene + hide #table-scene (was: rt-mode default LAYOUT
'B' showed table-scene but its .tbl-wrap was hidden → empty white area;
Michael couldn't see anything after pressing 圆桌 toggle)
- Trim topbar: hide non-essential buttons (模拟 toggle / 🎭 圆桌 toggle /
layout switcher / 我的画像) so brand + 5 essentials wrap into ≤2 rows
Sidebar transcript is still the workbench below. */
@media (orientation: portrait) and (max-width:480px){
body.rt-mode{
--rt-mobile-ring-size:clamp(118px,20vh,140px);
--rt-mobile-scene-h:calc(var(--rt-mobile-ring-size) + 16px);
}
@supports (height:1dvh){
body.rt-mode{
--rt-mobile-ring-size:clamp(118px,20dvh,140px);
}
}
/* === Fix 1: actually show the ring scene =================================
rt-mode default LAYOUT='B' makes #table-scene the visible one but its
.tbl-wrap is hidden below. Force the ring scene visible on mobile so the
.ring-wrap inside it actually paints. =================================== */
body.rt-mode #ring-scene{display:flex!important;align-items:center;justify-content:center}
body.rt-mode #table-scene{display:none!important}
/* Hide visual noise from the table layout AND extra orbs */
body.rt-mode .tbl-wrap,
body.rt-mode .orb,
body.rt-mode .orb-1,
body.rt-mode .orb-2,
body.rt-mode .orb-3,
body.rt-mode .tbl-surface,
body.rt-mode .tbl-ring,
body.rt-mode .tbl-ring2,
body.rt-mode .seat.seat-host,
body.rt-mode .ring-host{
display:none!important;
}
/* === Fix 3: tiny ring (~1/5 viewport height) ============================ */
body.rt-mode .ring-wrap{
width:var(--rt-mobile-ring-size)!important;
height:var(--rt-mobile-ring-size)!important;
margin:0 auto!important;
transform:none!important;
}
body.rt-mode .ring-wrap::before{
content:'';position:absolute;inset:6px;border-radius:50%;
border:1px dashed rgba(255,255,255,.1);
animation:rtMobileBreath 4.8s ease-in-out infinite;pointer-events:none;
}
@keyframes rtMobileBreath{
0%,100%{transform:scale(.985);opacity:.55}
50%{transform:scale(1.015);opacity:.95}
}
/* 2026-04-27 v5 — refined seat icons. Was: solid colored circle 22px (read
as "just a dot" — Michael's complaint). Now: 26px gem with depth gradient,
persona color used as restrained accent (border + inner glow) instead of
raw fill. Matches the project's dark-with-soft-accents palette
(rgba(176,176,255,.X) action cards, rgba(255,180,120,.X) warning cards)
rather than the saturated 6-color rainbow that read as out-of-place. */
body.rt-mode .rn,
body.rt-mode .seat-adv{
width:26px!important;height:26px!important;font-size:0!important;
}
body.rt-mode .rn-av,
body.rt-mode .seat-av{
background-image:
radial-gradient(circle at 32% 28%, rgba(255,255,255,.18) 0%, transparent 48%),
radial-gradient(circle at 70% 75%, color-mix(in srgb, var(--p-color, #888) 55%, transparent) 0%, transparent 60%)!important;
background-color:rgba(16,16,20,.95)!important;
border:1px solid color-mix(in srgb, var(--p-color, #888) 60%, rgba(255,255,255,.06))!important;
border-radius:50%!important;
width:100%!important;height:100%!important;
color:transparent!important;
box-shadow:
0 1px 3px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(0,0,0,.3),
0 0 8px color-mix(in srgb, var(--p-color, #888) 32%, transparent)!important;
}
body.rt-mode .seat-label,
body.rt-mode .rn-label{display:none!important;}
/* Active speaker pulses — softer brightness shift over the gem */
body.rt-mode .rn.speaking .rn-av,
body.rt-mode .seat-adv.speaking .seat-av{
border-color:color-mix(in srgb, var(--p-color, #fff) 80%, white)!important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--p-color, #fff) 50%, transparent),
0 0 14px color-mix(in srgb, var(--p-color, #fff) 70%, transparent)!important;
transform:scale(1.18);transition:transform .25s ease, box-shadow .25s ease;
}
/* No seat bubbles on phone — sidebar transcript is the workbench */
body.rt-mode .rn-bubble:not(.expanded){display:none!important;}
/* Center pivot (topic card): 64px, fits nicely in a 140px ring */
body.rt-mode .rt-pivot{
position:absolute!important;
left:50%!important;top:50%!important;
right:auto!important;bottom:auto!important;
transform:translate(-50%,-50%)!important;
width:64px!important;height:64px!important;
z-index:5;
}
body.rt-mode .rt-pivot-text{
font-size:8px!important;line-height:1.25!important;padding:0 4px;
color:rgba(255,255,255,.78);
}
/* Scene pane is HARD locked to a fixed height; no flexbox computation can
shrink it ever (Michael 2026-04-27 — "永远不要挤压这个窗口"). */
body.rt-mode .rt-scene-pane{
height:var(--rt-mobile-scene-h)!important;
flex:0 0 var(--rt-mobile-scene-h)!important;
flex-shrink:0!important;
max-height:var(--rt-mobile-scene-h)!important;
min-height:var(--rt-mobile-scene-h)!important;
padding:0!important;
border-bottom:1px solid rgba(255,255,255,.06)!important;
background:radial-gradient(ellipse at center,rgba(176,176,255,.04) 0%,transparent 60%);
}
/* 2026-04-27 v6 — drop min-height:65vh and use flex:1 1 0 with min-height:0
so scene-pane can NEVER be squeezed by side-pane content, even when Step
6/7/8 generates pages of cards. Was: min-height:65vh + flex:1 1 auto
could push scene-pane to shrink (despite scene's flex-shrink:0) on iOS
when total intrinsic content exceeded 100vh. Now side-pane is strictly
"remaining space, scrolls internally". User's "永远不要挤压圆桌" = held. */
body.rt-mode .rt-side-pane{
height:auto!important;flex:1 1 0%!important;
min-height:0!important;
padding-top:8px!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch;
}
/* Spotlight no longer primary — sidebar is */
body.rt-mode .rt-spotlight{display:none!important;}
/* 2026-04-27 — hide topic-pill on mobile portrait. Desktop's lower-left
"核心问题" card is too dominant on a 140px ring; case-owner's question
is already at top of side-pane workbench. User: "太占地方". */
body.rt-mode .rt-topic-pill{display:none!important;}
/* === Fix 2 (v4): keep all buttons, single row + horizontal scroll =======
Michael wanted all the labels on mobile too — single row, scroll if
overflow. Removes the v3 hide-buttons approach. =================== */
body.rt-mode .topbar{
flex-wrap:nowrap!important;
gap:6px;padding:7px 10px!important;
overflow:hidden;
}
body.rt-mode .topbar > div{
flex-wrap:nowrap!important;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
gap:5px!important;
flex:1 1 auto;min-width:0;
}
body.rt-mode .topbar > div::-webkit-scrollbar{display:none}
body.rt-mode .topbar .settings-btn,
body.rt-mode .topbar .mode-toggle,
body.rt-mode .topbar .layout-toggle-group{
flex-shrink:0;
padding:5px 9px;font-size:10.5px;
}
body.rt-mode .topbar .brand{
flex-shrink:0;font-size:12px;letter-spacing:2px;
}
/* 2026-04-27 · Step 7/8 mobile typography polish ────────────────────── */
/* Inherited <900px stack rules made cards too padded + fonts too varied
once the workbench is full-width. Tighten + standardize hierarchy:
title 11.5px (de-emph) → body 13px → action card 13.5-14px. */
body.rt-mode #rt-stage .scard{
padding:11px 13px!important;margin:8px 0!important;
border-radius:9px!important;
}
body.rt-mode #rt-stage .scard .st{
font-size:11.5px!important;letter-spacing:.4px!important;
}
body.rt-mode #rt-stage .scard .sb,
body.rt-mode #rt-stage .scard .md-body p,
body.rt-mode #rt-stage .scard .md-body li{
font-size:13px!important;line-height:1.65!important;
}
body.rt-mode #rt-stage .scard .md-body h2,
body.rt-mode #rt-stage .scard .md-body h3{
font-size:13.5px!important;margin:10px 0 4px!important;
}
body.rt-mode #rt-stage .scard .md-body strong{font-size:13.5px}
/* Action card (Step 8 todos) — 案主第一眼焦点 */
body.rt-mode #rt-stage .action-card{
background:rgba(176,176,255,.07)!important;
border:1px solid rgba(176,176,255,.42)!important;
padding:13px 14px!important;
}
body.rt-mode #rt-stage .action-card .st{font-size:12.5px!important;color:#e0e0ff}
/* 2026-04-27 — todo-item must STAY a single horizontal row when clicked.
Bug: clicking appended .todo-coin (🪙) + .todo-saved-flash ("✓ 7 天后跟进")
to the label; with mobile width ~340px, checkbox(21) + gap + attribution
(max 140) + coin(22) + flash(80) consumed >220px → todo-text wrapped to
3-4 lines AND, on iOS Safari, the flex computation occasionally broke
into multi-row layout (despite flex-wrap:nowrap) when item became wider
than container. Use grid for explicit row contract. */
body.rt-mode #rt-stage .action-card .todo-item{
display:grid!important;
grid-template-columns:auto minmax(0,1fr) auto auto auto!important;
grid-template-rows:auto!important;
align-items:center!important;
gap:8px!important;
padding:9px 0!important;
border-bottom:1px solid rgba(255,255,255,.06)!important;
width:100%!important;min-width:0!important;
flex-wrap:nowrap!important;
}
body.rt-mode #rt-stage .action-card .todo-item input[type="checkbox"]{
grid-column:1; margin:0!important;
}
body.rt-mode #rt-stage .action-card .todo-text{
grid-column:2;
font-size:13px!important;line-height:1.5!important;
min-width:0!important;
overflow:hidden!important;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
word-break:break-word;
}
body.rt-mode #rt-stage .action-card .todo-from{
grid-column:3;
max-width:96px!important;
font-size:9.5px!important;padding:2px 6px!important;
margin:0!important;align-self:center!important;
}
body.rt-mode #rt-stage .action-card .todo-coin{
grid-column:4;
margin:0!important;
}
body.rt-mode #rt-stage .action-card .todo-saved-flash,
body.rt-mode #rt-stage .action-card .todo-saved-flash.persistent{
grid-column:5;
margin:0!important;font-size:9.5px!important;padding:2px 6px!important;
flex-shrink:0!important;white-space:nowrap!important;
}
body.rt-mode #rt-stage .action-card li{
font-size:13px!important;line-height:1.55!important;
}
body.rt-mode #rt-stage .action-card h2,
body.rt-mode #rt-stage .action-card h3{
font-size:14px!important;margin:0 0 8px!important;color:#fff;
}
/* Warning card (Step 7/8 premortem) */
body.rt-mode #rt-stage .warning-card{
background:rgba(255,180,120,.05)!important;
border:1px solid rgba(255,180,120,.35)!important;
}
/* Folded details (mobile default closed via JS detailsOpenAttr) */
body.rt-mode #rt-stage details.s8-fold{
margin:8px 0;border:1px solid rgba(255,255,255,.08);
border-radius:8px;padding:8px 10px;
}
body.rt-mode #rt-stage details.s8-fold > summary{
font-size:11.5px;color:rgba(255,255,255,.78);cursor:pointer;
list-style:none;padding:2px 0;
}
body.rt-mode #rt-stage details.s8-fold > summary::-webkit-details-marker{display:none}
body.rt-mode #rt-stage details.s8-fold > summary::after{
content:" ▾";float:right;color:rgba(255,255,255,.5);
}
body.rt-mode #rt-stage details.s8-fold[open] > summary::after{content:" ▴"}
}
/* C3 · LANDSCAPE phone — desktop-like side-by-side at small height. The
default <900px rules stack vertically (good for portrait wide tablets);
landscape phones with low height can keep the desktop layout shrunk so
the ring stays usable. */
@media (orientation: landscape) and (max-height:500px){
/* 2026-04-26 — force ring scene visible (mirrors portrait rule). Without
this, rotation from portrait→landscape leaves LAYOUT='B' active with
#table-scene.on but its .tbl-wrap was sized for desktop → roundtable
either invisible or the desktop table layout intrudes. */
body.rt-mode #ring-scene{display:flex!important;align-items:center;justify-content:center}
body.rt-mode #table-scene{display:none!important}
body.rt-mode #roundtable{flex-direction:row}
body.rt-mode .rt-scene-pane{height:100vh;width:auto;flex:1;border-bottom:none;border-right:1px solid rgba(255,255,255,.08)}
body.rt-mode .rt-side-pane{height:100vh;width:260px;border-top:none;border-left:1px solid rgba(255,255,255,.1)}
body.rt-mode .ring-wrap{width:200px!important;height:200px!important}
body.rt-mode .tbl-wrap{width:260px;height:200px}
body.rt-mode .seat-adv,
body.rt-mode .rn{width:32px;height:32px;font-size:10px}
body.rt-mode .rn-bubble{max-width:130px;font-size:9.5px}
}
/* T1.1 (2026-04-25) — hide 主持人推荐 until §3.8.5 / Phase 7.1 lands.
Picker now forces 案主 to choose; localStorage 'counsel:default-personas'
already remembers prior selection. */
.pp-suggest-btn{display:none!important}
#pp-reasoning{display:none!important}
/* 2026-04-27 — "落地" commitment ceremony. Shown once per page-session after
the first todo check (Step 8 action card). Goal: give the commitment a
visible place to land — not just a checkbox toggle. Tells the user their
commitment is recorded + previews the 7-day follow-up loop + invites the
next iteration. Restrained palette (rgba(176,176,255,.X)) matches the
action-card it sits below. */
.commit-ceremony{
margin:14px 0 18px;
padding:14px 16px;
background:linear-gradient(135deg, rgba(176,176,255,.08) 0%, rgba(176,176,255,.025) 100%);
border:1px solid rgba(176,176,255,.32);
border-radius:10px;
position:relative;
animation:ceremonyIn .42s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ceremonyIn{
from{opacity:0; transform:translateY(-8px) scale(.985)}
to{opacity:1; transform:translateY(0) scale(1)}
}
.commit-ceremony-title{
font-size:13px; font-weight:600; color:#e0e0ff;
margin-bottom:8px; letter-spacing:.3px;
}
.commit-ceremony-body{
font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.74);
}
.commit-ceremony-body p{ margin:0 0 6px; }
.commit-ceremony-body p:last-child{ margin-bottom:0; }
.commit-ceremony-body .hl{ color:rgba(176,176,255,.95); font-weight:500; }
.commit-ceremony-meta{
margin-top:10px; padding-top:10px;
border-top:1px dashed rgba(176,176,255,.18);
font-size:11px; color:rgba(255,255,255,.42);
font-style:italic;
}
.commit-ceremony-close{
position:absolute; top:6px; right:8px;
width:24px; height:24px; border-radius:50%;
background:transparent; border:none;
color:rgba(255,255,255,.42); cursor:pointer;
font-size:16px; line-height:1; padding:0;
display:flex; align-items:center; justify-content:center;
transition:color .15s, background .15s;
}
.commit-ceremony-close:hover{
color:rgba(255,255,255,.92);
background:rgba(255,255,255,.08);
}
/* Mobile portrait — slightly tighter spacing */
@media (orientation:portrait) and (max-width:480px){
body.rt-mode #rt-stage .commit-ceremony{
padding:12px 14px; margin:10px 0 14px;
}
body.rt-mode #rt-stage .commit-ceremony-title{ font-size:12.5px }
body.rt-mode #rt-stage .commit-ceremony-body{ font-size:12px; line-height:1.65 }
body.rt-mode #rt-stage .commit-ceremony-meta{ font-size:10.5px }
}
/* ═══ Persona wish notification banner (2026-04-27) ═══ */
#wish-notif-banner{
position:fixed; top:0; left:0; right:0; z-index:9000;
display:flex; align-items:center; justify-content:center; gap:14px;
padding:10px 16px; font-size:13px;
background:linear-gradient(90deg,#fff7e6 0%,#fff2cc 100%);
border-bottom:1px solid #f0d68a; color:#5a4400;
box-shadow:0 1px 4px rgba(0,0,0,.06);
}
#wish-notif-banner .wb-text{ flex:1; max-width:720px; line-height:1.5 }
#wish-notif-banner .wb-text b{ color:#7a3d00 }
#wish-notif-banner .wb-ack{
padding:5px 12px; font-size:12px; border:1px solid #c9a050;
background:#fff; border-radius:5px; cursor:pointer; color:#5a4400;
}
#wish-notif-banner .wb-ack:hover{ background:#fff7e6 }
@media (max-width:540px){
#wish-notif-banner{ font-size:12px; padding:8px 12px; gap:8px }
#wish-notif-banner .wb-text{ font-size:11.5px }
}
/* ═══ Feedback reply notification banner (2026-04-28) ═══ */
#feedback-reply-banner{
position:fixed; top:0; left:0; right:0; z-index:9001;
display:flex; align-items:center; justify-content:center; gap:14px;
padding:10px 16px; font-size:13px;
background:linear-gradient(90deg,#eef2ff 0%,#e7f8f4 100%);
border-bottom:1px solid rgba(86,122,170,.35); color:#17324d;
box-shadow:0 1px 5px rgba(0,0,0,.08);
}
#feedback-reply-banner .frb-text{ flex:1; max-width:760px; line-height:1.45; display:grid; gap:3px }
#feedback-reply-banner .frb-text b{ color:#08233a }
#feedback-reply-banner .frb-original{ color:rgba(23,50,77,.68); font-size:11.5px }
#feedback-reply-banner .frb-reply{ color:#17324d }
#feedback-reply-banner .frb-ack{
padding:5px 12px; font-size:12px; border:1px solid rgba(86,122,170,.45);
background:#fff; border-radius:5px; cursor:pointer; color:#17324d;
}
#feedback-reply-banner .frb-ack:hover{ background:#f8fbff }
#wish-notif-banner ~ #feedback-reply-banner{ top:44px }
@media (max-width:540px){
#feedback-reply-banner{ font-size:12px; padding:8px 12px; gap:8px }
#feedback-reply-banner .frb-original{ display:none }
#wish-notif-banner ~ #feedback-reply-banner{ top:38px }
}