/* 对话页专用。这一页跟站上其它页长得不一样：整页不滚动，只有对话那块自己滚，
   输入框永远贴在底下。所以它不走 layout.css，自己一套。

   几条定死的：
   一、顶栏、额度条、对话、输入框共用一根 1180 的轴，左右边缘对齐；
   二、深色底上投影等于没有，层次一律靠「底色亮一档 + 一道细边」；
   三、方框一屏只留一种（提问），回答直接排在页面上，靠左边一道金线认；
   四、金色实心只给三处：额度数字、提问框、发送键。其余降成描边；
   五、行长卡在四十来个汉字——铺满是视觉上的事，一行太长照样难读。 */

:root {
  --wall: #050505;
  --card: #111111;
  --gold: #f5c518;
  --gold-line: rgba(245, 197, 24, 0.32);
  --ink: #f2f2f0;
  --ink-2: rgba(242, 242, 240, 0.66);
  --ink-3: rgba(242, 242, 240, 0.4);
  --hair: rgba(255, 255, 255, 0.07);
  --hair-2: rgba(255, 255, 255, 0.14);
  --danger: #e2795c;
  /* 品牌名用 Fraunces；正文英文走 Source Serif，中文落到宋体——
     宋体那份等用户切到中文再拉，英文用户不背这个包袱。 */
  --display: 'Fraunces', 'Noto Serif SC', serif;
  --read: 'Source Serif 4', 'Noto Serif SC', 'Songti SC', Georgia, serif;
  --ui: 'Work Sans', 'Noto Sans SC', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --pad: 44px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--wall); color: var(--ink);
  font-family: var(--ui); font-size: 15px; line-height: 1.7;
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wide { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }

/* ── 顶栏 ─────────────────────────────────────────── */
.top { border-bottom: 1px solid var(--hair); flex: none; }
.top .wide {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 16px;
}
.brand {
  font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
  display: flex; align-items: baseline; gap: 10px;
}
/* 纯文字标签，不加胶囊底。只管 beta 那一个，别把品牌名也缩了 */
.brand .beta { font-family: var(--ui); font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a {
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  transition: color 140ms var(--ease);
}
.nav a:hover { color: var(--gold); }
/* 语言键不装框——它只是个开关，跟旁边的页面链接不是一回事，用一道竖线隔开就够。
   站上其余几页也是这个长相，别两套。 */
.lang {
  font-family: var(--ui); font-size: 13px; color: var(--ink-3);
  background: transparent; border: 0; border-left: 1px solid var(--hair);
  border-radius: 0; padding: 2px 0 2px 22px; cursor: pointer;
  transition: color 140ms var(--ease);
}
.lang:hover { color: var(--gold); }

/* ── 额度条 ───────────────────────────────────────── */
.strip { border-bottom: 1px solid var(--hair); flex: none; }
.strip .wide {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 20px; padding-bottom: 18px;
}
/* 整页的视觉重心。等宽体，位数对得齐 */
.balance {
  font-family: var(--mono); font-size: 31px; font-weight: 500; color: var(--gold);
  line-height: 1; letter-spacing: -0.02em;
}
.balance-l { font-size: 13.5px; color: var(--ink-2); }
.topup {
  font-size: 13px; color: var(--ink); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--hair-2); border-radius: 7px; padding: 7px 14px;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.topup:hover { border-color: var(--gold); color: var(--gold); }
.strip .right { margin-left: auto; display: flex; gap: 8px; }
.strip select, .strip button {
  font-family: var(--ui); font-size: 13px; color: var(--ink-2);
  background: transparent; border: 1px solid var(--hair-2); border-radius: 7px;
  padding: 7px 12px; cursor: pointer;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.strip select:hover, .strip button:hover { color: var(--ink); }

/* ── 对话 ─────────────────────────────────────────── */
.room { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.room::-webkit-scrollbar { width: 6px; }
.room::-webkit-scrollbar-track { background: transparent; }
.room::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 3px; }
.room::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.thread {
  display: flex; flex-direction: column; gap: 30px;
  padding-top: 34px; padding-bottom: 14px; min-height: 100%;
}

.turn { display: flex; flex-direction: column; }
.turn.you { align-items: flex-end; }

/* 提问：一屏只有这一种方框，它就是「谁在说话」的全部标记 */
.ask {
  background: var(--gold); color: #0a0a0a;
  border-radius: 13px; border-bottom-right-radius: 4px;
  padding: 13px 18px; max-width: 620px;
}
.ask .say { font-family: var(--read); font-size: 16px; line-height: 1.75; font-weight: 600; margin: 0; }

/* 回答：不装框，直接排在页面上 */
.reply { border-left: 2px solid var(--gold-line); padding-left: 20px; max-width: 780px; }
.who {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-3); margin-bottom: 7px;
}
.reply .say {
  font-family: var(--read); font-size: 16.5px; line-height: 1.95;
  color: var(--ink); margin: 0; white-space: pre-wrap; word-break: break-word;
}
.cost { margin: 11px 0 0; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* 等回答时那行字自己呼吸一下，说明没卡死 */
.reply.waiting .say { color: var(--ink-3); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* 出错的那一条：竖线和文字都转成警示色 */
.reply.bad { border-left-color: var(--danger); }
.reply.bad .say { color: var(--danger); }

/* 一条都还没有的时候 */
.empty {
  margin: auto; max-width: 460px; text-align: center;
  font-family: var(--read); font-size: 16px; line-height: 2; color: var(--ink-3);
}

/* ── 输入 ─────────────────────────────────────────── */
.write { border-top: 1px solid var(--hair); flex: none; }
.write .wide { padding-top: 16px; padding-bottom: 20px; }
.bar {
  display: flex; gap: 10px; align-items: flex-end;
  background: var(--card); border: 1px solid var(--hair);
  padding: 8px 8px 8px 18px; border-radius: 13px;
  transition: border-color 140ms var(--ease);
}
.bar:focus-within { border-color: var(--hair-2); }
.bar textarea {
  flex: 1; min-width: 0; resize: none; min-height: 32px; max-height: 200px;
  font-family: var(--read); font-size: 16px; line-height: 1.7; color: var(--ink);
  background: transparent; border: 0; outline: none; padding: 8px 0;
}
.bar textarea::placeholder { color: var(--ink-3); font-family: var(--ui); }
.send {
  font-family: var(--ui); font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--gold); color: #0a0a0a; border: 1px solid var(--gold); border-radius: 9px;
  padding: 11px 24px; cursor: pointer;
  transition: background 140ms var(--ease), transform 100ms var(--ease);
}
.send:hover { background: #ffd42e; border-color: #ffd42e; }
.send:active { transform: translateY(1px); }
/* 正在回答时这个键变成「停止」，换描边，别再像个主按钮 */
.send.busy { background: transparent; color: var(--danger); border-color: var(--danger); }
.fine { margin: 11px 0 0 2px; font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 700px) {
  :root { --pad: 20px; }
  .balance { font-size: 26px; }
  .ask, .reply { max-width: 100%; }
  .reply .say { font-size: 16px; line-height: 1.9; }
  .nav { gap: 16px; }
  .thread { gap: 24px; }
}

/* 未登录时这一页只剩登录引导。样式单独写一份——这一页不引全站那张表，
   变量名也跟那边不同，照抄过来只会变成没上色的裸文字。 */
.chat-gate {
  margin: 40px 0 0;
  padding: 40px 34px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--card);
}
.chat-gate h2 {
  margin: 0 0 12px;
  font-family: var(--display); font-size: 26px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
}
.chat-gate p {
  margin: 0 0 24px; max-width: 54ch;
  font-family: var(--ui); font-size: 14px; line-height: 1.75;
  color: var(--ink-2);
}
.chat-gate a {
  display: inline-block;
  font-family: var(--ui); font-size: 15px; font-weight: 600;
  background: var(--gold); color: #0a0a0a; text-decoration: none;
  border: 1px solid var(--gold); border-radius: 6px;
  padding: 11px 24px;
  transition: background-color 140ms var(--ease), transform 140ms var(--ease);
}
.chat-gate a:hover { background: #ffd84d; border-color: #ffd84d; }
.chat-gate a:active { transform: translateY(1px); }

/* 生成分享链接后出现的那一条。放在顶栏下面，不挡对话。 */
.shared {
  border-bottom: 1px solid var(--hair);
  background: rgba(245, 197, 24, 0.06);
  padding: 10px 0;
}
.shared .wide { display: flex; align-items: center; gap: 10px; }
.shared-label {
  font-family: var(--ui); font-size: 12.5px; color: var(--gold);
  white-space: nowrap;
}
.shared-url {
  flex: 1; min-width: 0; background: transparent; border: none;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  padding: 4px 0;
}
.shared-url:focus { outline: none; }
.shared-copy {
  flex: none; background: none; border: 1px solid var(--gold-line);
  color: var(--gold); font-family: var(--ui); font-size: 12px;
  border-radius: 5px; padding: 4px 12px; cursor: pointer;
}
.shared-copy:hover { border-color: var(--gold); }