/* 站点唯一样式表。顺序: 变量 → 重置 → 页面骨架 → 正文排版 → 控件 → 房间三栏。
   严格 CSP(style-src 'self')下不能用 style 属性: 页面只加类名与 data-/aria- 属性来切换状态。 */

:root {
  color-scheme: light;
  --bg: #f4f6f9; --surface: #fff; --surface-2: #eceff4; --border: #d5dbe3;
  --text: #1a2230; --text-dim: #566170;
  --accent: #2158d6; --accent-hover: #1a47ad; --accent-ink: #fff; --accent-soft: #e5edff;
  --danger: #b3261e; --danger-hover: #8f1f19; --danger-soft: #fdeceb;
  --warn: #8a5300; --warn-soft: #fff3dc;
  --ok: #17692f; --ok-soft: #e4f5ea;
  --code-bg: #f1f3f7;
  --radius: 8px;
  --font: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); font: 1rem/1.6 var(--font);
  overflow-wrap: anywhere; /* 长串不撑出横向滚动条(AC-14.11); 需要不换行的 pre 单独还原 */
}
[hidden] { display: none !important; } /* 否则 .btn 等的 display 会盖过 hidden 属性 */
img { max-width: 100%; height: auto; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.3; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 页面骨架(除房间外的所有页面) ---- */
.site-header { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: inherit; font-weight: 700; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-left: auto; }
.container { flex: 1 0 auto; width: 100%; max-width: 46rem; margin: 0 auto; padding: 1.5rem 1rem 2rem; }
.card { padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card + .card { margin-top: 1rem; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.site-footer { padding: 1.25rem 1rem; background: var(--surface); border-top: 1px solid var(--border); color: var(--text-dim); font-size: .875rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.site-footer p { margin: .5rem 0 0; }

/* ---- 正文排版: 条款/隐私/声明页与渲染后的答案共用 ---- */
.prose { line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1 { font-size: 1.5rem; }
.prose h2 { font-size: 1.25rem; }
.prose h3 { font-size: 1.0625rem; }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose blockquote { margin: .75rem 0; padding: .25rem 1rem; border-left: 4px solid var(--border); color: var(--text-dim); }
.prose code { padding: .1em .35em; border-radius: 4px; background: var(--code-bg); font: .9em var(--mono); }
.prose pre { margin: .75rem 0; padding: .75rem 1rem; overflow-x: auto; border-radius: var(--radius); background: var(--code-bg); overflow-wrap: normal; }
.prose pre code { padding: 0; background: none; font-size: .875rem; white-space: pre; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { padding: .375rem .75rem; border: 1px solid var(--border); }
.actions + .prose { margin-top: .75rem; } /* 记录详情: 模式按钮行与答案之间 */

/* 数据表 (记录列表、账号流水): 单元格不折行, 窄屏时在卡片内横向滚动。
   body 的 overflow-wrap:anywhere 会让单元格最小宽度降为一个字, 表格就被压成「一字一行」而不是撑宽。 */
.scroll-x { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { padding: .375rem .75rem; border: 1px solid var(--border); text-align: left; white-space: nowrap; overflow-wrap: normal; }

/* highlight.js 配色(库本身不带样式; 对比度均 ≥4.5:1 于 --code-bg) */
.hljs-comment, .hljs-quote { color: #5a626b; font-style: italic; }
.hljs-keyword, .hljs-doctag, .hljs-selector-tag, .hljs-type { color: #c0152a; }
.hljs-string, .hljs-regexp, .hljs-addition { color: #0a3069; }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-meta, .hljs-attr, .hljs-variable, .hljs-built_in, .hljs-property { color: #0550ae; }
.hljs-title { color: #6f42c1; }
.hljs-deletion { color: #b31d28; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ---- 按钮: 高度 ≥44px 便于手机点按 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  min-height: 2.75rem; padding: .5rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  white-space: nowrap; /* 全局的 overflow-wrap:anywhere 会让按钮最小宽度降为一个字, 窄容器里标签被拆成竖排 */
}
.btn:hover { background: var(--surface-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { border-color: var(--danger); background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- 表单 ---- */
.field { display: grid; gap: .25rem; margin: 0 0 1rem; }
.field > label { font-weight: 600; }
.hint { color: var(--text-dim); font-size: .875rem; }
.hint:empty { display: none; } /* 等脚本填充的提示行, 填充前不占位 */
.hint[data-over] { color: var(--danger); font-weight: 600; } /* 简历字数超限 */
.field > p { margin: 0; } /* .field 是 grid, grid 项的外边距不折叠: 段落默认的 1em 上下边距会把间距撑大 */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  width: 100%; min-height: 2.75rem; padding: .5rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: inherit; font: inherit; /* 字号 ≥16px, iOS 聚焦时不会自动放大页面 */
}
textarea { min-height: 8rem; resize: vertical; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); }
.check { display: flex; align-items: flex-start; gap: .5rem; }
.check input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .3rem; accent-color: var(--accent); }

/* ---- 提示条: 错误/余额/红包结果等(配合 role="alert" 或 role="status") ---- */
.alert { margin: 0 0 1rem; padding: .625rem .875rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.alert > :first-child { margin-top: 0; } /* 内含段落与按钮的结果条 (注册红包): 段落的默认上外边距会让上下留白不对称 */
.alert-error { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.alert-warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.alert-ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }

/* ---- 对话框: 原生 <dialog>.showModal(), 试用到点/余额不足的付费墙与确认框共用 ---- */
dialog {
  width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  overflow: auto; padding: 1.25rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgb(15 23 42 / .25);
}
dialog::backdrop { background: rgb(15 23 42 / .5); }
dialog h2 { margin: 0 0 .5rem; font-size: 1.125rem; }
dialog > p:first-child { margin-top: 0; } /* 脚本生成的确认框只有一段文字 */
dialog .actions { justify-content: flex-end; margin-top: 1rem; }

/* ---- 房间: 顶栏 → 模式页签 → 面板切换条(仅窄屏) → 三栏 → 底部控制条 ----
   结构: body.room-page > .room-topbar + .mode-tabs + .panel-tabs + .room-cols + .room-controls + .site-footer(一行)
     .mode-tabs > .mode-item > (button.btn.mode-tab[role=tab][aria-selected] + p.mode-desc)   说明常显
     .panel-tabs > button.btn.panel-tab[role=tab][aria-selected]                               问题 / 答案 / 对话
     .room-cols[data-panel=questions|answer|dialog] > .col.col-questions + .col.col-answer + .col.col-dialog
     .col > h2 + .col-body(滚动区) [+ .dialog-input]
   整页恰好一屏高, 三栏各自滚动, 控制条与一行页脚是最后两个 flex 子项因而始终贴底。
   窗口 <1000px 时 data-panel 决定显示哪一栏(静态 HTML 默认写 answer, 脚本失效也可用)。 */
.room-page { height: 100vh; height: 100dvh; }
.room-topbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .5rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.room-topbar .brand img { width: 28px; height: 28px; }
.pill { display: inline-block; padding: .125rem .625rem; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font-size: .875rem; font-weight: 600; }
.pill[data-state="live"] { background: var(--ok-soft); color: var(--ok); }
.pill[data-state="connecting"], .pill[data-state="paused"] { background: var(--warn-soft); color: var(--warn); }
.pill[data-state="error"] { background: var(--danger-soft); color: var(--danger); }

.mode-tabs { flex: none; display: flex; gap: .5rem; padding: .5rem 1rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.mode-item { flex: 1 0 10rem; min-width: 0; scroll-snap-align: start; } /* 宽屏均分, 窄屏横向滑动, 说明始终可见 */
.mode-tab, .panel-tab { width: 100%; }
.mode-tab[aria-selected="true"], .panel-tab[aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.mode-desc { margin: .25rem 0 0; color: var(--text-dim); font-size: .8125rem; line-height: 1.4; }

.panel-tabs { display: none; }
.room-cols { flex: 1 1 0; min-height: 12rem; display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.4fr) minmax(15rem, 1.3fr); grid-template-rows: minmax(0, 1fr); gap: .75rem; padding: .75rem 1rem; }
.col { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.col > h2 { flex: none; margin: 0; padding: .5rem .75rem; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: .9375rem; }
.col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .75rem; }
.dialog-input { flex: none; display: flex; gap: .5rem; padding: .5rem .75rem; border-top: 1px solid var(--border); }
.dialog-input input { flex: 1 1 auto; min-width: 0; }
.col-foot { flex: none; display: flex; gap: .5rem; padding: .5rem .75rem; border-top: 1px solid var(--border); }
.col-foot .btn { flex: 1 1 0; }
.room-controls { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem; background: var(--surface); border-top: 1px solid var(--border); }
.room-page .site-footer { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .125rem 1rem; padding: .375rem 1rem; font-size: .75rem; } /* 页脚压成一行, 不挤占三栏 */
.room-page .site-footer p { margin: 0; }

/* 房间内容(room.js 生成): 通知条 / 问题列表 / 答案头 / 对话行 */
.room-notice { flex: none; margin: 0; padding: .5rem 1rem; border-width: 0 0 1px; border-radius: 0; }
.room-topbar output { font-weight: 600; }
.btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.btn-sm { flex: none; min-height: 2rem; padding: .25rem .625rem; font-size: .875rem; }
@media (pointer: coarse) { .btn-sm { min-height: 2.75rem; } }
.q-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .375rem; }
.q-item { width: 100%; display: flex; gap: .5rem; align-items: baseline; padding: .5rem .625rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.q-item:hover { background: var(--surface-2); }
.q-item[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.q-src { flex: none; padding: 0 .375rem; border-radius: 4px; background: var(--surface-2); color: var(--text-dim); font-size: .75rem; }
.q-text { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.answer-q { margin: 0 0 .75rem; font-weight: 600; }
.answer-note { margin: .5rem 0 0; color: var(--text-dim); font-size: .875rem; }
[data-role="answer-view"]:not(:empty) { margin-bottom: 1rem; }
.dialog-line { display: flex; gap: .5rem; align-items: flex-start; padding: .375rem 0; border-bottom: 1px solid var(--surface-2); }
.dialog-time { flex: none; padding-top: .125rem; color: var(--text-dim); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.dialog-text { flex: 1 1 auto; min-width: 0; }
.dialog-role { flex: none; padding-top: .125rem; font-size: .8125rem; font-weight: 600; }
.dialog-role[data-role-tag="interviewer"] { color: var(--accent); }
.vad { flex: none; margin: 0; padding: .25rem .75rem; color: var(--ok); font-size: .875rem; }
.sticky-foot { position: sticky; bottom: 0; padding-top: .5rem; background: var(--surface); } /* 开始卡片比窄屏的答案栏高时, 错误提示与开始按钮始终贴在栏底可见 */

@media (max-width: 999.98px) {
  .panel-tabs { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; padding: .375rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
  .room-cols { grid-template-columns: minmax(0, 1fr); padding: .5rem; }
  .room-cols > .col { display: none; }
  .room-cols[data-panel="questions"] > .col-questions,
  .room-cols[data-panel="answer"] > .col-answer,
  .room-cols[data-panel="dialog"] > .col-dialog { display: flex; }
}