/* 思想实验田 · 暗色 Discord 风 */
:root {
  --bg:        #313338;
  --bg-rail:   #1E1F22;
  --bg-card:   #232428;
  --bg-pill:   #2B2D31;
  --line:      #3F4147;
  --txt:       #DBDEE1;
  --txt-muted: #949BA4;
  --txt-dim:   #6D7178;
  --blurple:   #5865F2;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #2B2D31;
  color: var(--txt);
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.app { display: flex; min-height: 100vh; }

/* 左侧服务器栏 */
.rail {
  width: 64px; flex-shrink: 0; background: var(--bg-rail);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 14px 0; position: sticky; top: 0; height: 100vh;
}
.rail .server {
  width: 46px; height: 46px; border-radius: 15px; background: var(--blurple);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px;
}
.rail .divider { width: 32px; height: 2px; background: var(--bg-pill); border-radius: 2px; }

/* 主区 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chan-header {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,.25); background: var(--bg); position: sticky; top: 0; z-index: 20;
}
.chan-header .back {
  color: var(--txt-muted); display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--bg-pill); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px 4px 7px;
}
.chan-header .back i { font-size: 14px; }
.chan-header .back:hover { color: #fff; border-color: var(--blurple); background: var(--blurple); }
.chan-header .hash { color: var(--txt-muted); font-size: 22px; }
.chan-header .title { color: #F2F3F5; font-size: 16px; font-weight: 500; }
.chan-header .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.chan-header .sub { color: var(--txt-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-header .members { margin-left: auto; color: var(--txt-muted); font-size: 13px; display: flex; align-items: center; gap: 4px; }
.lang-toggle {
  margin-left: auto; background: var(--bg-pill); color: var(--txt); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .15s; letter-spacing: .3px;
}
.lang-toggle:hover { color: #fff; border-color: var(--blurple); background: var(--blurple); }
.chan-header .lang-toggle + .members { margin-left: 12px; }

.scroll { background: var(--bg); flex: 1; }
.thread { max-width: 920px; margin: 0 auto; padding: 8px 8px 40px; }

/* 议题横幅 + 选角 */
.topic {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin: 14px 8px 6px;
}
.topic .label { font-size: 12px; color: var(--txt-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.topic .q { font-size: 19px; font-weight: 500; color: #fff; line-height: 1.4; }
.topic .qsub { font-size: 14px; color: var(--txt-muted); line-height: 1.55; margin-top: 6px; }
.lineup { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 8px 4px; }
.lineup .seat {
  display: inline-flex; align-items: center; gap: 7px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px 3px 3px; position: relative;
  text-decoration: none; cursor: pointer; transition: border-color .15s, transform .15s;
  color: var(--txt);
}
.lineup a.seat:hover { border-color: var(--blurple); transform: translateY(-1px); z-index: 50; }
.lineup .seat-all {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--txt-muted); font-size: 13px; border: 1px dashed var(--line);
  border-radius: 20px; padding: 4px 12px; cursor: pointer; transition: all .15s;
}
.lineup .seat-all:hover { color: #fff; border-color: var(--blurple); }
.lineup .seat .av { width: 24px; height: 24px; }
.lineup .seat .nm { font-size: 13px; color: var(--txt); }
.lineup .seat .tip { top: 132%; left: 0; width: 200px; font-size: 12.5px; line-height: 1.5; }
.lineup .seat:hover .tip { visibility: visible; opacity: 1; }

/* 轮次分隔 */
.round-div { display: flex; align-items: center; gap: 10px; padding: 14px 12px 6px; }
.round-div .ln { flex: 1; height: 1px; background: var(--line); }
.round-div .lbl { color: var(--txt-muted); font-size: 12px; font-weight: 500; }

/* 帖子 */
.post { display: flex; gap: 14px; padding: 9px 12px; border-radius: 8px; scroll-margin-top: 70px; }
.post:hover { background: rgba(255,255,255,.018); }
.av {
  flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; font-size: 17px; font-weight: 500;
}
.av-wrap { position: relative; display: inline-flex; flex-shrink: 0; cursor: help; }
.av-wrap .av-tip { top: 50px; left: 0; width: 248px; }
.av-wrap:hover .av-tip, .av-wrap.open .av-tip { visibility: visible; opacity: 1; }
.av-tip .at-name { font-size: 14px; font-weight: 500; }
.av-tip .at-handle { font-size: 12px; color: var(--txt-muted); font-family: "SF Mono", Menlo, monospace; margin-left: 6px; }
.av-tip .at-name-en { font-size: 13px; color: var(--txt); margin-top: 2px; }
.av-tip .at-school { font-size: 12px; color: var(--txt-muted); margin-top: 3px; }
.av-tip .at-reason { font-size: 13px; color: var(--txt); line-height: 1.55; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.av-tip .at-reason b { color: var(--txt-muted); font-weight: 400; }
.body { flex: 1; min-width: 0; }
.meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.meta .name { font-size: 15px; font-weight: 500; }
.meta .info { font-size: 11px; color: var(--txt-muted); }

/* 回复引用块 */
.reply {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 2px; max-width: 100%;
  color: var(--txt-muted); font-size: 12px; cursor: pointer; border-radius: 4px;
  padding: 1px 4px; margin-left: -4px; transition: background .12s;
}
.reply:hover { background: rgba(88,101,242,.18); }
.reply .at { font-weight: 500; }
.reply .quote { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply .jump { color: var(--txt-dim); font-size: 13px; }
.flash { animation: flash 1.4s ease; }
@keyframes flash {
  0% { background: rgba(88,101,242,.30); }
  60% { background: rgba(88,101,242,.16); }
  100% { background: transparent; }
}

/* 正文 + 古文整段 hover 白话 */
.text { margin: 2px 0 0; font-size: 15px; line-height: 1.6; color: var(--txt); }
.htext { position: relative; cursor: help; border-radius: 6px; }
.htext:hover { background: rgba(255,255,255,.03); }
.htext .badge-cls {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: 2px; margin-left: 6px;
  font-size: 10px; color: var(--txt-dim); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px;
}

/* 工具提示通用(hover 或 .open) */
.tip {
  position: absolute; z-index: 40; background: #0F1013; border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; visibility: hidden; opacity: 0;
  transition: opacity .12s; pointer-events: none; width: 250px;
  max-width: calc(100vw - 16px);
}
.htext .tip { top: 106%; left: 0; right: auto; }
.htext:hover .tip, .htext.open .tip { visibility: visible; opacity: 1; }
.tip .badge-bai { display: inline-block; font-size: 11px; border-radius: 6px; padding: 1px 7px; margin-bottom: 6px; }
.tip .bai { display: block; font-size: 14px; color: var(--txt); line-height: 1.6; }

/* 术语逐词 hover 释义 */
.gloss { border-bottom: 1px dashed #8A92A0; cursor: help; position: relative; }
.gloss .gloss-tip { top: 138%; left: 0; width: 252px; }
.gloss:hover .gloss-tip, .gloss.open .gloss-tip { visibility: visible; opacity: 1; }
.gloss-tip .g-term { display: block; font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 4px; }
.gloss-tip .g-def { display: block; font-size: 13px; color: var(--txt); line-height: 1.55; }

/* reaction 立场药丸 */
.reacts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 9px; }
.rwrap { position: relative; display: inline-block; }
.pill {
  display: inline-flex; align-items: center; gap: 5px; background: var(--bg-pill);
  border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; font-size: 13px;
  color: #B5BAC1; cursor: default;
}
.rwrap .rtip { bottom: 150%; left: 0; min-width: 160px; width: auto; }
.rwrap:hover .rtip, .rwrap.open .rtip { visibility: visible; opacity: 1; }
.rtip .rhead { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.rrow { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.rrow .nm { color: var(--txt); font-size: 13px; }
.net { margin-left: 4px; font-size: 12px; color: var(--txt-muted); }
.net b { font-weight: 500; }

/* 三方 AI 收尾 */
.summaries { margin: 26px 8px 8px; }
.sum-head { display: flex; align-items: center; gap: 10px; padding: 0 4px 12px; }
.sum-head .ln { flex: 1; height: 1px; background: var(--line); }
.sum-head .lbl { color: #F2F3F5; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.sum-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* 横排时三张卡用 subgrid 共享行轨：who + 综述/洞察/建议(各 标签+正文) = 7 行，跨列对齐 */
@media (min-width: 760px) {
  .sum-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(7, auto); }
  .sum-card { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
.sum-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.sum-card .who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sum-card .who .nm { font-size: 15px; font-weight: 500; }
.sum-card .who .eng { font-size: 10px; color: var(--txt-dim); margin-top: 1px; }
.sum-card .sec-lbl { font-size: 11px; color: var(--txt-muted); margin: 8px 0 4px; display: flex; align-items: center; gap: 5px; }
.sum-card .sec-txt { font-size: 14px; line-height: 1.6; color: var(--txt); }

/* 本场留下的钩子（三方 AI 在辩论之外看见的延伸角度） */
.hooks { margin: 26px 8px 8px; }
.hooks-sub { color: var(--txt-muted); font-size: 12px; text-align: center; margin: -4px 0 14px; }
/* 每条钩子横铺单列、整宽展开——避免 2 列时奇数个末尾落单对不齐 */
.hooks-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hook { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.hook-who { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.hook-who .nm { font-size: 14px; font-weight: 500; }
.hook-txt { font-size: 14px; line-height: 1.6; color: var(--txt); }
.hook.has-answer .hook-main { cursor: pointer; }
.hook-toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 12px; color: #a29bfe; font-weight: 600; user-select: none; }
.hook-toggle .ti { transition: transform .2s ease; }
.hook.open .hook-toggle .ti { transform: rotate(180deg); }
.hook-answer { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); min-width: 0; }
.hook.open .hook-answer { display: block; }
.ha-lead { font-size: 13.5px; line-height: 1.62; color: var(--txt); margin: 0 0 11px; }
.ha-tail { font-size: 12.5px; line-height: 1.65; color: var(--txt-muted); margin: 11px 0 0; }
.ha-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; overscroll-behavior-x: contain; }
.ha-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 12.5px; }
.ha-table th, .ha-table td { text-align: left; vertical-align: top; padding: 7px 9px; border: 1px solid var(--line); line-height: 1.5; }
.ha-table th { color: #fff; font-weight: 700; background: rgba(255,255,255,0.04); white-space: nowrap; }
.ha-table td:first-child { white-space: nowrap; font-weight: 600; color: #fff; }
.ha-table strong { color: #fff; font-weight: 700; }

.err { color: var(--txt-muted); padding: 40px 24px; max-width: 620px; margin: 0 auto; line-height: 1.7; }
.err code { background: var(--bg-pill); padding: 2px 6px; border-radius: 4px; color: #fff; }
.ti { line-height: 1; }
/* **重点** → <strong>：暗色主题下用纯白 + 加粗让重点跳出来 */
.text strong, .bai strong, .sec-txt strong, .hook-txt strong { font-weight: 700; color: #fff; }
@media (max-width: 600px) { .rail { display: none; } .thread { padding: 6px 4px 40px; } }

/* ---- login-free debate comments (bigcat-engage backend) ---- */
.dcomments { max-width: 760px; margin: 40px auto 60px; padding: 26px 20px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.dcomments .dc-head { font-size: 1.05rem; font-weight: 600; letter-spacing: 1px; margin-bottom: 5px; color: #e4e6eb; }
.dcomments .dc-sub { font-size: 0.83rem; color: #8a93a6; margin-bottom: 16px; }
.dc-form { position: relative; }
.dc-form .dc-name { width: 100%; max-width: 260px; padding: 9px 12px; margin-bottom: 8px; border-radius: 9px; font-size: 0.88rem; font-family: inherit; color: #e4e6eb; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.14); }
.dc-form .dc-body { display: block; width: 100%; min-height: 80px; padding: 10px 13px; border-radius: 9px; font-size: 0.9rem; font-family: inherit; color: #e4e6eb; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.14); resize: vertical; }
.dc-form .dc-name:focus, .dc-form .dc-body:focus { outline: none; border-color: #7b61ff; }
.dc-form .dc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dc-row { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.dc-send { padding: 9px 22px; border: none; border-radius: 9px; background: linear-gradient(135deg,#7b61ff,#00d4ff); color: #fff; font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: inherit; transition: opacity .15s; }
.dc-send:hover { opacity: 0.88; }
.dc-send:disabled { opacity: 0.5; cursor: default; }
.dc-msg { font-size: 0.82rem; min-height: 16px; color: #4fd08a; }
.dc-msg.err { color: #ff6ec4; }
.dc-list { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.dc-empty { font-size: 0.85rem; color: #8a93a6; padding: 6px 2px; }
.dc-item { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 11px; padding: 12px 15px; }
.dc-meta { font-size: 0.77rem; color: #8a93a6; margin-bottom: 5px; }
.dc-meta b { color: #cdd2dd; font-weight: 700; }
.dc-text { font-size: 0.92rem; color: #d8dbe2; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

/* ---- Per-speaker TTS ---- */
.tts-play{background:none;border:none;cursor:pointer;color:var(--muted,#8a93a0);padding:2px 6px;border-radius:6px;font-size:15px;line-height:1;transition:color .15s,background .15s}
.tts-play:hover{color:var(--accent,#5865f2);background:rgba(88,101,242,.12)}
.post.tts-active{background:rgba(88,101,242,.08);box-shadow:inset 3px 0 0 var(--accent,#5865f2);border-radius:6px;transition:background .2s}
@media(max-width:600px){.tts-fab span{display:none}.tts-fab{padding:12px;border-radius:50%}}

/* ---- Full TTS control bar (dark theme, matches site-wide controls) ---- */
.ta-tts{position:fixed;bottom:18px;right:18px;z-index:9999;display:flex;align-items:center;gap:2px;
  background:rgba(32,34,42,0.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.08);border-radius:26px;padding:6px;
  box-shadow:0 8px 28px rgba(0,0,0,0.45);font-family:inherit}
.ta-tts .ta-btn{background:transparent;border:none;cursor:pointer;color:#c8cdd8;
  padding:7px 10px;border-radius:16px;font-size:13px;font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;
  transition:background .15s,color .15s}
.ta-tts .ta-btn:hover{background:rgba(88,101,242,.18);color:#fff}
.ta-tts .ta-play{background:#5865f2;color:#fff}
.ta-tts .ta-play:hover{filter:brightness(1.12)}
.ta-tts .ta-btn .ti{font-size:16px}
.ta-tts .ta-sep{width:1px;height:18px;background:rgba(255,255,255,0.12);margin:0 4px}
.ta-tts .ta-prog{font-size:11px;color:#9aa2b1;padding:0 4px;min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
.ta-tts .ta-seek{position:relative;width:96px;height:16px;cursor:pointer;display:flex;align-items:center;margin:0 4px}
.ta-tts .ta-track{position:absolute;left:0;right:0;height:3px;background:rgba(255,255,255,0.14);border-radius:2px}
.ta-tts .ta-fill{position:absolute;left:0;height:3px;background:#5865f2;border-radius:2px;width:0%}
.ta-tts .ta-time{font-size:10px;color:#8a93a0;font-variant-numeric:tabular-nums;min-width:66px;text-align:right}
.ta-tts .ta-rate{background:transparent;border:none;cursor:pointer;color:#9aa2b1;font-size:12px;
  font-weight:700;padding:6px 9px;border-radius:14px;min-width:36px;font-variant-numeric:tabular-nums}
.ta-tts .ta-rate:hover{background:rgba(88,101,242,.18);color:#fff}
.tts-play{background:none;border:none;cursor:pointer;color:#8a93a0;padding:2px 6px;border-radius:6px;font-size:14px;line-height:1;vertical-align:middle;transition:color .15s,background .15s}
.tts-play:hover{color:#5865f2;background:rgba(88,101,242,.14)}
.post.tts-active{background:rgba(88,101,242,.09);box-shadow:inset 3px 0 0 #5865f2;border-radius:6px;transition:background .2s}
@media(max-width:640px){.ta-tts .ta-time{display:none}.ta-tts .ta-seek{width:60px}}
.sum-card.tts-active{box-shadow:inset 3px 0 0 #5865f2,0 0 0 1px rgba(88,101,242,.3);transition:box-shadow .2s}