/*
 * File:        core.css
 * Path:        app/public/
 * Project:     talk.askingqu.com 独立对谈页
 * Description: 两版共用样式；现场版只通过 body.mode-expo 覆盖（深色、大麦克风、首屏极简）
 * Author:      曲索文 / 文涵清澄
 * Created:     2026-11-05  v1.0
 * Purpose:     两版同核
 */
:root {
  --bg: #f6f4ef; --card: #ffffff; --ink: #1d2433; --sub: #6b7280; --line: #e5e2da;
  --brand: #1f4e79; --brand-ink: #ffffff; --accent: #e0563b; --me: #1f4e79; --me-ink: #fff;
  --r: 14px; --font: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); display: flex; flex-direction: column; min-height: 100dvh; }
button { font: inherit; cursor: pointer; }

.bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; flex: 1; min-width: 0; white-space: nowrap; }
.seal { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-size: 17px; }
.langs { display: flex; gap: 4px; }
.langs button, .acts button, .acts a { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 14px; text-decoration: none; }
.langs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.acts { display: flex; gap: 6px; }

/* 登录 */
.login-main { flex: 1; display: grid; place-content: center; gap: 20px; padding: 16px; }
.slogan { font-size: clamp(22px, 5vw, 34px); font-weight: 700; text-align: center; margin: 0; letter-spacing: 1px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; width: min(360px, calc(100vw - 32px)); display: grid; gap: 14px; }
.card label { display: grid; gap: 4px; font-size: 14px; color: var(--sub); }
.card input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; }
.primary { background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 700; }
.primary:disabled { opacity: .6; }
.msg.err, .card .msg { color: #b42318; min-height: 1.4em; margin: 0; font-size: 14px; }
.foot { text-align: center; color: var(--sub); font-size: 12px; padding: 12px; }

/* 对谈 */
.hero { text-align: center; padding: 24px 16px 8px; }
.hero .hint { color: var(--sub); margin: 8px 0 0; font-size: 15px; }
body.talking .hero { display: none; }
.log { flex: 1; overflow-y: auto; padding: 8px 16px; width: 100%; max-width: 860px; margin: 0 auto; }
.msg { display: flex; flex-direction: column; margin: 10px 0; }
.msg .bub { max-width: 82%; padding: 10px 14px; border-radius: var(--r); white-space: pre-wrap; word-break: break-word; }
.msg time { font-size: 12px; color: var(--sub); margin-top: 2px; }
.msg.me { align-items: flex-end; } .msg.me .bub { background: var(--me); color: var(--me-ink); border-bottom-right-radius: 4px; }
.msg.bot { align-items: flex-start; } .msg.bot .bub { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }

.thinking { align-self: center; max-width: 860px; width: calc(100% - 32px); color: var(--sub); font-size: 15px; padding: 4px 0; }
.thinking .dots::after { content: ''; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.thinking .bar2 { display: block; height: 3px; margin-top: 6px; max-width: 220px; background: var(--line); border-radius: 2px; position: relative; overflow: hidden; }
.thinking .bar2::after { content: ''; position: absolute; inset: 0 auto 0 -40%; width: 40%; background: var(--accent); animation: slide 1.1s linear infinite; }
@keyframes slide { to { left: 100%; } }
.status { text-align: center; min-height: 1.4em; margin: 0; font-size: 14px; color: var(--sub); }
.status.err { color: #b42318; }

.dock { width: 100%; max-width: 860px; margin: 0 auto; padding: 8px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); display: grid; gap: 8px; }
.tf { display: flex; gap: 8px; }
.tf textarea { flex: 1; font: inherit; resize: none; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.send { width: 52px; font-size: 18px; }
body.no-text .tf { display: none; }
.mic-row { display: flex; gap: 8px; align-items: stretch; }
.mic { flex: 1; min-height: 62px; border: 0; border-radius: var(--r); background: var(--brand); color: var(--brand-ink); font-size: 20px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.mic small { font-size: 12px; font-weight: 400; opacity: .85; }
.mic.rec { background: var(--accent); }
.mic-ico { display: none; }
.vopt { display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); font-size: 14px; font-weight: 700; }
.vopt input { width: 22px; height: 22px; accent-color: var(--brand); margin: 0; }
.kbd { display: none; }
.lvl { display: flex; align-items: center; gap: 10px; }
.lvl[hidden] { display: none; }
.lvl i { display: block; height: 10px; width: 0; background: var(--accent); border-radius: 5px; transition: width .08s linear; flex: 0 1 auto; max-width: 100%; }
.lvl b { margin-left: auto; color: var(--accent); font-size: 14px; }

/* ---------- 现场版：深色、首屏只有口号+大麦克风+语言切换 ---------- */
body.mode-expo, html[data-mode="expo"] body {
  --bg: #0b1220; --card: #141d30; --ink: #eef2f8; --sub: #93a1b8; --line: #26324a;
  --brand: #3b82f6; --accent: #f97316; --me: #2563eb;
}
body.mode-expo .acts #clear { display: none; }
body.mode-expo .hero { padding-top: 6vh; }
body.mode-expo .hero .slogan { font-size: clamp(28px, 6vw, 52px); }
body.mode-expo .vopt { display: none; }
body.mode-expo .kbd { display: block; border: 1px solid var(--line); background: var(--card); color: var(--sub); border-radius: var(--r); padding: 0 14px; font-size: 14px; }
body.mode-expo .mic-row { flex-direction: column; align-items: center; }
body.mode-expo .mic { flex: none; width: clamp(160px, 34vmin, 260px); height: clamp(160px, 34vmin, 260px); border-radius: 50%; font-size: 22px;
  box-shadow: 0 0 0 10px rgba(59,130,246,.15), 0 0 60px rgba(59,130,246,.35); }
body.mode-expo .mic.rec { box-shadow: 0 0 0 14px rgba(249,115,22,.2), 0 0 80px rgba(249,115,22,.5); }
body.mode-expo .mic-ico { display: block; width: 34px; height: 46px; border: 4px solid currentColor; border-radius: 18px; margin-bottom: 8px; }
body.mode-expo:not(.talking) .log { flex: 0; }
body.mode-expo:not(.talking) .dock { flex: 1; align-content: start; }
body.mode-expo .langs button { padding: 6px 16px; font-size: 16px; }
body.mode-expo.talking .mic { width: 120px; height: 120px; font-size: 16px; }
body.mode-expo.talking .mic-ico { width: 22px; height: 30px; border-width: 3px; margin-bottom: 4px; }

@media (max-width: 520px) {
  .bar { flex-wrap: wrap; }
  .brand { flex-basis: 100%; }
  .msg .bub { max-width: 92%; }
}