:root {
  --bg: #f6f3ec;
  --panel: #fffdf7;
  --panel-2: #f1ece1;
  --ink: #211d18;
  --muted: #7a7165;
  --faint: #a89e8f;
  --line: #e4ddcf;
  --line-strong: #d3c9b6;
  --accent: #b8442b;
  --accent-soft: #f6e7e1;
  --hot: #d97706;
  --confuse: #7c4dd1;
  --agree: #2f8f5b;
  --question: #2563b8;
  --radius: 3px;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Fraunces", Georgia, "Songti SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

a { color: var(--accent); }

.mono { font-family: var(--mono); }
.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- topbar ---- */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 窄屏下换行而不是把元素挤出屏幕造成横向溢出 */
  gap: 16px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-strong);
  flex: 0 0 auto;
}
.topbar .brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.topbar .title {
  color: var(--muted);
  font-size: 13px;
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
.spacer { flex: 1; }

.live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(184, 68, 43, 0.6);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(184,68,43,.5);}
  70% { box-shadow: 0 0 0 7px rgba(184,68,43,0);}
  100% { box-shadow: 0 0 0 0 rgba(184,68,43,0);}
}

.stat { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.stat b { color: var(--ink); font-weight: 600; }

.badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
}
.badge.on { color: var(--agree); border-color: #bfe0cc; background: #effaf2; }
.badge.off { color: var(--faint); }
.badge.warn { color: var(--accent); border-color: #f0cdc3; background: var(--accent-soft); }

/* ---- view tabs ---- */
.tabs { display: flex; gap: 2px; background: var(--panel-2); padding: 3px; border-radius: var(--radius); }
.tabs button {
  font-family: var(--mono);
  font-size: 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
}
.tabs button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* ---- follow toggle ---- */
.toggle {
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}
.toggle.on { background: var(--accent-soft); color: var(--accent); border-color: #f0cdc3; }

/* ---- layout: 分享 | 讨论 ---- */
.stage { flex: 1; display: flex; min-height: 0; }
.col { display: flex; flex-direction: column; min-height: 0; }
.col-share { flex: 1; min-width: 0; }
.col-discuss {
  width: 380px;
  flex: 0 0 auto;
  border-left: 1px solid var(--line-strong);
  background: var(--panel);
}
.col-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.col-share .col-head { background: transparent; }
.col-label { font-family: var(--serif); font-weight: 600; font-size: 15px; }
.col-sub { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .03em; }

.canvas { flex: 1; overflow-y: auto; padding: 22px 30px 30px; }
.discussion { flex: 1; overflow-y: auto; padding: 14px 16px; }
@media (max-width: 820px) { .col-discuss { width: 300px; } }

.canvas-inner { max-width: 820px; margin: 0 auto; }

/* ---- outline view ---- */
.section {
  margin-bottom: 26px;
  border-left: 2px solid var(--line-strong);
  padding-left: 16px;
}
.section.active { border-left-color: var(--accent); }
.section-head { display: flex; align-items: baseline; gap: 10px; }
.section-head h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.section-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.section-head h2.provisional { color: var(--faint); font-style: italic; }
.provis-tag {
  font-family: var(--mono); font-style: normal; font-size: 10px;
  color: var(--accent); letter-spacing: .04em;
  border: 1px dashed #f0cdc3; border-radius: 999px; padding: 1px 8px;
  vertical-align: middle; animation: blink 1.4s steps(1) infinite;
}

.point {
  position: relative;
  margin: 8px 0;
  padding: 6px 10px 6px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s;
}
.point:hover { background: var(--panel); }
.point.selected { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.point.open { color: var(--muted); }
.point.open::after { content: "▍"; animation: blink 1s steps(1) infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }
.point .ptext { }

.spk { font-family: var(--mono); font-size: 10px; padding: 1px 6px; border-radius: 999px; margin-right: 4px; white-space: nowrap; vertical-align: middle; }

.signals { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.chip {
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  white-space: nowrap;
}
.chip.heat { color: var(--hot); border-color: #f0d9b0; background: #fdf4e3; }
.chip.confuse { color: var(--confuse); border-color: #ddd0f2; background: #f4eefe; }
.chip.controversy { color: var(--accent); border-color: #f0cdc3; background: var(--accent-soft); }

/* clusters under a node */
.clusters { margin: 6px 0 2px 14px; }
.cluster {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 10px;
  margin: 5px 0;
  background: var(--panel);
}
.cluster .clabel { font-size: 13px; font-weight: 600; }
.cluster .csummary { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cluster .ctype {
  font-family: var(--mono); font-size: 9px; letter-spacing: .05em;
  padding: 1px 5px; border-radius: 3px; text-transform: uppercase; margin-right: 6px;
}
.ctype.question { background: #e3effb; color: var(--question); }
.ctype.opinion { background: #f3eefe; color: var(--confuse); }
.ctype.agreement { background: #eaf7ef; color: var(--agree); }
.ctype.confusion { background: #f4eefe; color: var(--confuse); }
.ctype.suggestion, .ctype.other { background: var(--panel-2); color: var(--muted); }
.cluster .csize { font-family: var(--mono); font-size: 11px; color: var(--faint); float: right; }
.cluster .cmembers { margin-top: 6px; font-size: 12px; color: var(--muted); display: none; }
.cluster.expanded .cmembers { display: block; }
.cluster .cmembers div { padding: 2px 0; border-top: 1px dotted var(--line); }
.cluster .cmeta { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 4px; }

.speaking {
  margin: 6px 0 2px 14px;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  background: var(--panel);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
}
.speaking .cursor { color: var(--accent); animation: blink 1s steps(1) infinite; font-style: normal; }

/* flash a node when jumped to from a comment (§点击评论跳转到原文) */
@keyframes jumpflash { 0%, 35% { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } 100% { background: transparent; box-shadow: none; } }
.jump-flash { animation: jumpflash 1.6s ease-out; border-radius: var(--radius); }

.emoji-row { margin-top: 4px; }
.emoji-tag {
  font-size: 13px; margin-right: 8px;
  font-family: var(--mono); color: var(--muted);
}

/* ---- discussion panel (right) ---- */
.disc-group { margin-bottom: 20px; }
.disc-group h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.emoji-tally {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 16px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--mono); font-size: 13px; color: var(--muted);
}
.emoji-tally span b { color: var(--ink); }
.discussion .q {
  padding: 9px 10px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); cursor: pointer;
}
.discussion .q:hover { border-color: var(--line-strong); }
.discussion .q .qlabel { font-size: 13px; padding-right: 26px; }
.discussion .q .qmeta { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 3px; }
.discussion .q .qcount { float: right; color: var(--question); font-weight: 600; font-family: var(--mono); }
.discussion .empty { color: var(--faint); font-size: 13px; font-style: italic; }
.supp-item { padding: 9px 11px; margin-bottom: 8px; border: 1px solid var(--line); border-left: 3px solid var(--question); border-radius: var(--radius); background: #f3f8fe; cursor: pointer; font-size: 13px; }
.supp-item:hover { border-left-color: var(--accent); }
.supp-src { font-family: var(--mono); font-size: 10px; color: var(--question); margin-top: 4px; }

/* ---- cards view ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); overflow: hidden; display: flex; flex-direction: column;
}
.card .card-top { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.card .card-top h2 { font-family: var(--serif); font-size: 17px; margin: 0; }
.card .card-idx { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.card img { width: 100%; display: block; max-height: 150px; object-fit: cover; }
.card .card-body { padding: 10px 14px; font-size: 13px; }
.card .card-body ul { margin: 0; padding-left: 16px; color: var(--ink); }
.card .card-body li { margin: 3px 0; }
.card .card-foot {
  margin-top: auto; padding: 9px 14px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* ---- timeline view ---- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--line-strong);
}
.tl-item { position: relative; margin-bottom: 14px; }
.tl-item::before {
  content: ""; position: absolute; left: -22px; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--panel); border: 2px solid var(--line-strong);
}
.tl-item.slide::before { background: var(--accent); border-color: var(--accent); }
.tl-item.comment::before { background: var(--question); border-color: var(--question); }
.tl-item.emoji::before { background: var(--hot); border-color: var(--hot); }
.tl-time { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.tl-item.slide .tl-body { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.tl-item .tl-body { font-size: 14px; }
.tl-item.comment .tl-body { color: var(--ink); }
.tl-anchor { font-family: var(--mono); font-size: 10px; color: var(--faint); }

/* ---- 纪要 digest view ---- */
.digest-loading { color: var(--muted); font-style: italic; padding: 30px 0; text-align: center; }
.digest .dg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--line-strong); padding-bottom: 14px; margin-bottom: 18px; }
.digest h1 { font-family: var(--serif); font-size: 25px; margin: 0 0 4px; }
.digest .dg-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.digest .dg-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.dg-hl-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; }
.dg-overview { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 22px; }
.dg-overview p { margin: 0; font-size: 15px; }
.dg-sec { margin-bottom: 24px; }
.dg-sec h2 { font-family: var(--serif); font-size: 20px; margin: 0 0 6px; }
.dg-summary { margin: 0 0 6px; font-size: 15px; line-height: 1.65; }
.dg-hl { list-style: none; margin: 0; padding: 0; }
.dg-hl li { padding: 6px 0; border-top: 1px dotted var(--line); font-size: 14px; }
.dg-kind { font-family: var(--mono); font-size: 10px; padding: 1px 6px; border-radius: 3px; margin-right: 6px; white-space: nowrap; }
.dg-kind.question { background: #e3effb; color: var(--question); }
.dg-kind.opinion { background: #f3eefe; color: var(--confuse); }
.dg-kind.agreement { background: #eaf7ef; color: var(--agree); }
.dg-kind.confusion { background: #f4eefe; color: var(--confuse); }
.dg-kind.suggestion, .dg-kind.other { background: var(--panel-2); color: var(--muted); }
.dg-note { color: var(--faint); font-size: 12px; }

/* action items block */
.dg-actions-block { background: var(--accent-soft); border: 1px solid #f0cdc3; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 22px; }
.dg-act-list { list-style: none; margin: 0; padding: 0; }
.dg-act-list li { padding: 6px 0; border-top: 1px dotted #e7c8bf; font-size: 14px; }
.dg-act-list li:first-child { border-top: 0; }
.dg-act { font-family: var(--mono); font-size: 10px; padding: 1px 7px; border-radius: 3px; margin-right: 6px; white-space: nowrap; color: #fff; }
.dg-act.action { background: var(--agree); }
.dg-act.decision { background: var(--accent); }
.dg-act.question { background: var(--question); }
.dg-act.risk { background: var(--hot); }

.dg-share-link { align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 18px; }
.dg-share-link a { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.dg-foot { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* ---- 思维导图 mindmap ---- */
.mm-wrap { overflow: auto; max-width: 100%; }
.mm-link { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.mm-dot.mm-root, .mm-dot.mm-sec { fill: var(--accent); }
.mm-dot.mm-pt { fill: var(--line-strong); }
.mm-label { font-family: var(--sans); fill: var(--ink); font-size: 13px; }
.mm-label.mm-root { font-family: var(--serif); font-weight: 600; font-size: 16px; }
.mm-label.mm-sec { font-weight: 600; font-size: 14px; }
.mm-label.mm-pt { fill: var(--muted); font-size: 12px; }
.mm-heat { font-size: 10px; fill: var(--hot); font-family: var(--mono); }

/* ---- 回放 replay bar ---- */
.replay-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 10px 16px; margin: 0 auto 18px; max-width: 820px;
}
.replay-bar input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; }
.rp-time { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---- composer ---- */
.composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--line-strong);
  background: var(--panel);
  padding: 10px 20px 12px;
}
.anchor-preview {
  font-size: 12px; color: var(--muted); margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.anchor-preview .pill {
  font-family: var(--mono); font-size: 11px;
  background: var(--accent-soft); color: var(--accent);
  padding: 2px 9px; border-radius: 999px; border: 1px solid #f0cdc3;
}
.anchor-preview .clear { cursor: pointer; color: var(--faint); text-decoration: underline; font-size: 11px; }
.composer-row { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea {
  flex: 1; resize: none; height: 42px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--sans); font-size: 14px; background: var(--bg); color: var(--ink);
}
.composer textarea:focus { outline: none; border-color: var(--accent); }
.btn {
  font-family: var(--mono); font-size: 13px;
  padding: 10px 18px; border: 0; border-radius: var(--radius);
  background: var(--accent); color: #fff; cursor: pointer;
}
.btn:disabled { opacity: .4; cursor: default; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.emoji-bar { display: flex; gap: 6px; margin-top: 8px; }
.emoji-bar button {
  font-size: 18px; line-height: 1; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); cursor: pointer; transition: transform .08s;
}
.emoji-bar button:hover { transform: scale(1.12); border-color: var(--line-strong); }
.emoji-bar button:active { transform: scale(.92); }

/* ---- speaker console ---- */
.console { max-width: 760px; margin: 0 auto; padding: 24px 20px; overflow-y: auto; flex: 1; }
.console h1 { font-family: var(--serif); font-size: 26px; margin: 0 0 4px; }
.console .sub { color: var(--muted); margin-bottom: 22px; }
.panel {
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px;
}
.panel h3 { margin: 0 0 12px; font-size: 14px; font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input, .field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); font-family: var(--sans); font-size: 14px; background: var(--bg);
}
.field textarea { resize: vertical; min-height: 60px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.asr-status { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.asr-live { min-height: 40px; padding: 10px; background: var(--bg); border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); font-size: 14px; }
.mic-on { color: var(--accent) !important; }
.slide-list { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.slide-list div { padding: 3px 0; border-top: 1px dotted var(--line); }
.hint { font-size: 12px; color: var(--faint); margin-top: 6px; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: var(--radius); font-size: 13px; font-family: var(--mono); opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: .95; }

/* ---- 移动端（≤720px）：观众画布双栏堆叠为单栏，整页纵向滚动 ----
   桌面是 height:100vh + 左右双栏（各自内部滚动）；窄屏下若不改造，flex 行布局
   会把「分享内容」列挤成一条竖排、整页横向溢出（手机上打开 /?room= 即原 Bug）。 */
@media (max-width: 720px) {
  /* 整页改为自然高度 + 纵向滚动；禁掉横向溢出兜底任何超长串 */
  html, body { height: auto; }
  body { min-height: 100vh; overflow-x: hidden; overflow-y: auto; }

  /* 顶栏换行吸顶；视图标签条横向滚动而非把其它元素挤出屏幕 */
  .topbar { flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; position: sticky; top: 0; z-index: 20; }
  .topbar .spacer { display: none; }
  .topbar .title { border-left: 0; padding-left: 0; }
  .tabs { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

  /* 分享 | 讨论：左右 → 上下，各占满宽度，分隔线由左边框改为上边框 */
  .stage { flex-direction: column; flex: 0 0 auto; }
  .col-share, .col-discuss { width: auto; flex: 0 0 auto; }
  .col-discuss { border-left: 0; border-top: 1px solid var(--line-strong); }

  /* 内容区交还整页滚动：取消各自内部滚动、收紧内边距、放开宽度上限 */
  .canvas { overflow-y: visible; padding: 16px 16px 22px; }
  .discussion { overflow-y: visible; padding: 12px 14px 18px; }
  .canvas-inner { max-width: 100%; }

  /* 评论框吸附底部，始终可见 */
  .composer { position: sticky; bottom: 0; z-index: 20; padding: 8px 12px 10px; }
}