/* ==========================================================================
   英语学习伴侣 · 样式（v5 视觉重做）
   --------------------------------------------------------------------------
   设计目标：像读一篇排版舒服的文章，而不是一堆被高亮的"可点击控件"。
   英文默认**没有任何底色**，只在点击/播放时给反馈 —— 阅读优先。

   三块新东西：
     · .wline    每条回答顶部那条词形细线（当前词的变形 / 同族词）
     · .used-bar 回答底部那个小气泡（这一轮用上了哪几个复习词）
     · .panel    设置 / 单词库，推倒重做
   ========================================================================== */

:root {
  --bg:          #f7f7fb;
  --bg-soft:     #f1f2f8;
  --surface:     #ffffff;
  --surface-2:   #f4f5fa;
  --ink:         #16171d;
  --ink-2:       #5a5c68;
  --ink-3:       #9698a6;
  --line:        #e8e9f1;
  --line-2:      #f0f1f7;
  --primary:     #4a63e7;
  --primary-dk:  #3548c8;
  --primary-soft:#eef1ff;
  --primary-mid: #7d5cf0;
  --mint:        #0d7a51;
  --mint-soft:   #eef8f3;
  --mint-line:   #cfe9dd;
  --quote-bg:    #f6f7fc;
  --quote-line:  #dcdfee;
  --danger:      #e2513f;
  --ok:          #17a06a;
  --gold:        #d99a15;
  --shadow:      0 1px 2px rgba(20,22,40,.04), 0 6px 20px rgba(20,22,40,.06);
  --shadow-md:   0 4px 10px rgba(20,22,40,.06), 0 14px 34px rgba(20,22,40,.09);
  --shadow-lg:   0 14px 44px rgba(20,22,40,.18);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-en: "SF Pro Text", -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --radius: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.4;
  overscroll-behavior-y: none;
}
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
h1,h2,h3 { margin: 0; font-weight: 650; }

/* ============================== 顶栏 ============================== */
.topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: max(9px, env(safe-area-inset-top)) 12px 9px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}
.brand { display: flex; align-items: baseline; gap: 0; flex: 1; min-width: 0; }

/* "彤仔"两个字本身就是 logo —— 不加方形图标，靠字形做识别度 */
.logo-zi {
  font-size: 21px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1;
  background: linear-gradient(118deg, #5a72f0 0%, #7d5cf0 52%, #b45ce8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-right: 1px; white-space: nowrap;
}
.logo-rest {
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .2px; white-space: nowrap; margin-left: 3px;
}
.top-act {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 20px;
  background: var(--primary-soft); color: var(--primary-dk);
  font-size: 13px; font-weight: 650; transition: background .15s, color .15s;
}
.top-act:hover { background: #e3e8ff; }
.top-act:disabled { cursor: default; }
.top-act-ico { display: block; flex: 0 0 auto; transform-origin: 50% 50%; }
.top-act.loading .top-act-ico { animation: spin 1.15s linear infinite; }
.top-act.loading { color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px; color: var(--ink-2);
  transition: background .15s;
}
.icon-btn:hover { background: var(--surface-2); }
.bars, .bars::before, .bars::after {
  display: block; width: 17px; height: 1.8px; border-radius: 2px; background: var(--ink-2);
  content: ""; position: relative;
}
.bars::before { position: absolute; top: -5.5px; }
.bars::after  { position: absolute; top: 5.5px; }

.rate-btn {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); padding: 6px 8px; border-radius: 9px;
  font-variant-numeric: tabular-nums;
}
.rate-btn:hover { background: var(--primary-soft); color: var(--primary-dk); }
.top-rate { padding: 6px 9px; border-radius: 20px; }

/* ============================== 对话区 ============================== */
.chat-wrap {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  /* 关掉浏览器的滚动锚定 —— 它会在内容变化时自作主张调整滚动位置，
     正是"生成时页面自己往下跑"的帮凶之一 */
  overflow-anchor: none;
  overscroll-behavior-y: contain;
  position: relative;
}
.chat-wrap > * { overflow-anchor: none; }
.chat {
  max-width: 720px; margin: 0 auto;
  padding: 16px 18px 28px;
  display: flex; flex-direction: column;
}

/* ---------- ① 词形线 ----------
   每条 AI 回答的**最上方**那一条细线（就在"✅ 全对"那一行的上面）。
   折叠时只是一条线 + 中间一个小词名 + 右边一个小箭头，几乎不占地方。 */
.wline { margin: 0 0 13px; }
.wl-bar {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 1px 0; cursor: pointer; user-select: none;
}
.wl-rule {
  flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(74,99,231,0), rgba(74,99,231,.20));
  transition: background .26s;
}
.wl-bar > .wl-rule:nth-of-type(2) { background: linear-gradient(270deg, rgba(74,99,231,0), rgba(74,99,231,.20)); }
.wl-word {
  font-family: var(--font-en); font-size: 12px; font-weight: 650;
  color: var(--ink-3); letter-spacing: .2px; white-space: nowrap;
  transition: color .2s;
}
.wl-chev { flex: none; color: var(--ink-3); transition: transform .28s cubic-bezier(.32,.72,0,1); }
.wline.open .wl-chev { transform: rotate(180deg); color: var(--primary-dk); }
.wline.open .wl-word { color: var(--primary-dk); }
.wline.open .wl-rule { background: linear-gradient(90deg, rgba(74,99,231,0), rgba(74,99,231,.42)); }
.wline.open .wl-bar > .wl-rule:nth-of-type(2) { background: linear-gradient(270deg, rgba(74,99,231,0), rgba(74,99,231,.42)); }

/* 展开后的内容：字比正文**小一号**，形成对比，但结构只有"一行词头 + 两列网格" */
.wl-body {
  margin-top: 9px; padding: 11px 12px;
  background: var(--surface); border-radius: 13px;
  box-shadow: 0 1px 2px rgba(20,22,40,.04), 0 0 0 .5px rgba(20,22,40,.05);
  animation: fb-drop .26s cubic-bezier(.32,.72,0,1);
}
.wl-body[hidden] { display: none; }
.wl-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.wl-hw { font-family: var(--font-en); font-size: 15px; font-weight: 750; letter-spacing: -.2px; cursor: pointer; }
.wl-hw:active { color: var(--primary-dk); }
.wl-pos {
  font-size: 10px; font-weight: 700; color: var(--primary-dk);
  background: var(--primary-soft); padding: 1.5px 6px; border-radius: 5px;
}
.wl-zh { font-size: 11.5px; color: var(--ink-2); }
.wl-say {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-dk);
  transition: transform .16s;
}
.wl-say:active { transform: scale(.9); }
.wl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.wl-item {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  background: var(--surface-2); border-radius: 9px; padding: 6px 9px;
}
.wl-lbl { font-size: 10px; font-weight: 650; color: var(--ink-3); flex: none; }
.wl-val {
  font-family: var(--font-en); font-size: 13px; font-weight: 650;
  cursor: pointer; border-radius: 4px; padding: 0 2px; margin: 0 -2px;
}
.wl-val:active { background: var(--primary-soft); }
.wl-mean { font-size: 10.5px; color: var(--ink-3); }
.wl-empty { font-size: 11.5px; color: var(--ink-3); padding: 2px 0; }
@media (max-width: 340px) { .wl-grid { grid-template-columns: 1fr; } }

/* ---------- 词义对比表 ----------
   模型做 join / engage 这种对比时会写 markdown 表格。以前不认它，
   用户看到的就是一堆裸露的竖线；现在渲染成一张干净的对比卡。 */
.tbl-wrap { margin: 0 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border-radius: 13px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,22,40,.04), 0 0 0 .5px rgba(20,22,40,.05);
  font-size: 13px; line-height: 1.6;
}
.cmp-tbl th, .cmp-tbl td {
  text-align: left; padding: 8px 10px; vertical-align: top;
  border-bottom: 1px solid var(--line-2);
}
.cmp-tbl thead th {
  font-size: 13px; font-weight: 750; color: var(--primary-dk);
  background: var(--primary-soft); white-space: nowrap;
}
.cmp-tbl thead th:first-child { background: transparent; }
.cmp-tbl tbody th {
  width: 1%; font-size: 11.5px; font-weight: 650; color: var(--ink-3);
  white-space: nowrap; background: var(--surface);
}
.cmp-tbl tr:last-child th, .cmp-tbl tr:last-child td { border-bottom: none; }
.cmp-tbl .en { font-size: 13px; }

/* ---------- ② 底部那一个小气泡 ----------
   用户要求：折叠时**只有一个小书图标**，连数字都不要；点开只有"单词 + 意思"。 */
.used-bar { margin-top: 12px; }
.used-toggle {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mint-soft); color: var(--mint);
  box-shadow: inset 0 0 0 1px var(--mint-line);
  transition: background .16s, transform .16s;
}
.used-toggle:active { transform: scale(.92); }
.used-toggle.open { background: #dcf2e8; }
.used-list {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px;
  animation: fb-drop .22s cubic-bezier(.32,.72,0,1);
}
.used-list[hidden] { display: none; }
.ul-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--mint-soft); border-radius: 8px; padding: 4px 9px;
}
.ul-chip b { font-family: var(--font-en); font-size: 12.5px; font-weight: 650; color: var(--mint); cursor: pointer; }
.ul-chip em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }

/* ---------- 消息 ---------- */
.message { display: block; }
.message + .message { margin-top: 20px; }

.message.user { display: flex; justify-content: flex-end; }
.message.user .bubble {
  max-width: 82%;
  background: linear-gradient(135deg, #5670ee, #4a63e7);
  color: #fff;
  border-radius: 17px 17px 5px 17px; padding: 10px 14px;
  font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  box-shadow: 0 3px 12px rgba(74,99,231,.20);
}

.message.ai .bubble { display: block; }
.msg-text { font-size: 16px; line-height: 1.78; color: var(--ink); }

/* ---------- 块级排版 ---------- */
.blk { margin: 0 0 14px; }
.blk:last-child { margin-bottom: 0; }
.blk-hr { height: 1px; background: var(--line); margin: 16px 0; }
.blk-p { white-space: pre-wrap; word-break: break-word; }
.blk-h { font-size: 16.5px; font-weight: 700; margin: 20px 0 10px; }
.blk-li { display: flex; gap: 8px; margin-bottom: 7px; padding-left: 2px; }
.blk-li .mk { flex: 0 0 auto; color: var(--ink-3); font-weight: 600; min-width: 12px; }
.blk-li .li-body { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.blk-quote {
  background: var(--quote-bg); border-left: 3px solid var(--quote-line);
  border-radius: 4px 10px 10px 4px;
  padding: 10px 14px; margin: 14px 0; color: var(--ink-2); font-size: 15px;
}

/* ---------- 英文：整句可点，默认无底色 ---------- */
.en {
  font-family: var(--font-en);
  font-weight: 500;
  cursor: pointer;
  border-radius: 5px;
  padding: 1px 2px;
  margin: 0 -2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background .14s ease, box-shadow .14s ease;
  position: relative;
}
@media (hover: hover) {
  .en:hover {
    background: rgba(74,99,231,.07);
    box-shadow: inset 0 -1.5px 0 rgba(74,99,231,.40);
  }
}
.en:active { background: rgba(74,99,231,.14); }

/* 播放中：淡淡的呼吸微光，覆盖**整句**。 */
.en.playing {
  background: rgba(74,99,231,.085);
  color: inherit;
  animation: glow-soft 1.9s ease-in-out infinite;
}
@keyframes glow-soft {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(74,99,231,.26), 0 0 10px rgba(74,99,231,.16); }
  50%      { box-shadow: 0 0 0 1.5px rgba(74,99,231,.44), 0 0 20px rgba(74,99,231,.30); }
}
.en.loading { background: rgba(74,99,231,.10); }
.en.loading::after {
  content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  background-size: 200% 100%; animation: sweep .8s linear infinite; pointer-events: none;
}
@keyframes sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.en.faved { box-shadow: inset 0 -1.5px 0 var(--gold); }
.en.faved::before { content: "⭐"; font-size: 8px; margin-right: 1px; vertical-align: super; }
.en.longpressing { animation: lp-charge .45s ease forwards; }
@keyframes lp-charge {
  0% { transform: scale(1); }
  60% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(74,99,231,.12); }
  100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(74,99,231,.2); }
}

/* 行内样式 */
strong, b { font-weight: 700; color: var(--ink); }
code {
  font-family: var(--font-en); font-size: .95em;
  background: var(--surface-2); border-radius: 5px; padding: 1.5px 5px;
}

/* ---------- 段落连读 / 整段：**已整个删除** ----------
   用户的原话：「整段播放大半也是中文夹英文，英文本来就没几段，我自己点就行了；
   点整段还要重新加载一次语音，而那小段本来就预 TTS 好了，直接就能播。
   这功能直接去掉，不要再让我看到乱七八糟的小喇叭。」
   所以这里不再有任何 🔊 徽标 —— 每个英文句子自己就是可点可读的单元。 */

@keyframes fb-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 联网来源 ---------- */
.assoc-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 12px; padding: 9px 11px;
  background: var(--surface-2); border-radius: 12px;
  font-size: 12.5px; color: var(--ink-2);
}
.assoc-label { font-weight: 650; color: var(--ink-2); margin-right: 2px; }
.assoc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); color: var(--primary-dk); border: 1px solid var(--line);
  padding: 3px 10px; border-radius: 20px; font-size: 12.5px;
  text-decoration: none; transition: all .15s;
}
.assoc-chip:hover { background: var(--primary-soft); }

/* 打字指示 */
.typing-bubble { display: flex; gap: 5px; padding: 6px 2px; }
.typing-bubble .dot { width: 7px; height: 7px; border-radius: 50%; background: #c9c9d4; animation: blink 1.2s infinite ease-in-out; }
.typing-bubble .dot:nth-child(2) { animation-delay: .18s; }
.typing-bubble .dot:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ============================== 输入区 ============================== */
.composer {
  flex: 0 0 auto;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
}
.composer-inner {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 7px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 21px; padding: 5px 5px 5px 12px;
  transition: border-color .18s, box-shadow .18s;
}
.composer-inner:focus-within { border-color: #c3caf5; box-shadow: 0 0 0 3px rgba(74,99,231,.07); }
#input {
  flex: 1; border: none; outline: none; resize: none; background: none;
  font-family: inherit; font-size: 16px; line-height: 1.5; color: var(--ink);
  min-height: 26px; max-height: 152px;   /* 空时 1 行，最多约 6 行，再多就内部滚动 */
  overflow-y: auto; padding: 3px 0;
}
#input::placeholder { color: var(--ink-3); }

.jump-latest {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(8px);
  bottom: 96px; z-index: 30;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 650; color: var(--primary-dk);
  box-shadow: 0 4px 16px rgba(20,22,40,.12);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.jump-latest.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

.round-btn {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  transition: background .18s ease, box-shadow .18s ease;
}
.round-btn.send { background: var(--primary); box-shadow: 0 2px 8px rgba(74,99,231,.28); }
.round-btn.send:hover { background: var(--primary-dk); }
/* 生成中：同一个圆钮变成"停止"，不额外占位。
   注意：SVG 元素**没有** .hidden 这个 JS 属性（那是 HTMLElement 才有的），
   所以图标显隐一律用 CSS 类控制，不能靠 el.hidden = true。 */
.round-btn .ico-stop { display: none; }
.round-btn.stop .ico-send { display: none; }
.round-btn.stop .ico-stop { display: block; }
.round-btn.send.stop { background: #3a3a45; box-shadow: 0 2px 8px rgba(30,30,40,.26); }
.round-btn.send.stop:hover { background: #23232b; }
.round-btn:disabled { opacity: .45; box-shadow: none; }

/* ========================= 长按浮出菜单 ========================= */
.lp-menu {
  position: fixed; z-index: 60; background: var(--surface); border-radius: 14px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  padding: 9px; min-width: 200px; max-width: 88vw;
  animation: lp-pop .22s cubic-bezier(.2,1.1,.4,1);
}
@keyframes lp-pop { from { opacity: 0; transform: scale(.88) translateY(6px); } to { opacity: 1; transform: none; } }
.lp-preview {
  font-family: var(--font-en); font-size: 12.5px; color: var(--ink-2);
  padding: 3px 5px 8px; border-bottom: 1px solid var(--line); margin-bottom: 7px;
  max-height: 48px; overflow: hidden;
}
.lp-actions { display: flex; gap: 4px; }
.lp-act { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 6px; border-radius: 10px; transition: background .15s; }
.lp-act:hover { background: var(--primary-soft); }
.lp-act span { font-size: 18px; line-height: 1; }
.lp-act em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.lp-act.on { background: var(--primary-soft); }
.lp-act.on em { color: var(--primary-dk); }

/* ============================== 面板 ============================== */
.scrim {
  position: fixed; inset: 0; background: rgba(20,22,40,.34);
  opacity: 0; pointer-events: none; transition: opacity .24s; z-index: 40;
}
.scrim.show { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100vw);
  background: var(--bg); z-index: 50;
  transform: translateX(102%);
  transition: transform .42s cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
  box-shadow: -18px 0 60px rgba(20,22,40,.16);
  will-change: transform;
}
.panel.show { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .panel { transition-duration: .01ms; }
  .seg-ind { transition-duration: .01ms; }
  .tab-pane.active { animation: none; }
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(15px, env(safe-area-inset-top)) 18px 8px;
}
.panel-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.panel-head .icon-btn {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2);
  transition: background .18s, transform .18s;
}
.panel-head .icon-btn:active { transform: scale(.9); background: var(--line); }

/* ---------- 新建对话 + 历史对话（压得很扁，不抢二级菜单空间） ---------- */
.panel-top { padding: 6px 16px 0; }
.newchat-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px; border-radius: 14px;
  background: linear-gradient(135deg, #5670ee, #4a63e7);
  color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: .2px;
  box-shadow: 0 4px 14px rgba(74,99,231,.26);
  transition: transform .16s, box-shadow .16s;
}
.newchat-btn:active { transform: scale(.985); box-shadow: 0 2px 8px rgba(74,99,231,.22); }

.hist-toggle {
  width: 100%; display: flex; align-items: center; gap: 7px;
  padding: 11px 4px 9px; color: var(--ink-2);
  font-size: 13px; font-weight: 650;
}
.hist-toggle .hist-label { flex: 1; text-align: left; }
.hist-count {
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  background: var(--surface-2); padding: 2px 7px; border-radius: 20px;
}
.hist-count[hidden] { display: none; }
.hist-toggle .chev { transition: transform .28s cubic-bezier(.32,.72,0,1); color: var(--ink-3); }
.hist-toggle.open .chev { transform: rotate(180deg); }

.hist-list {
  max-height: 34vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  margin-bottom: 6px; display: flex; flex-direction: column; gap: 4px;
  animation: fb-drop .26s cubic-bezier(.32,.72,0,1);
}
.hist-list[hidden] { display: none; }
.hist-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 12px;
  background: var(--surface); border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.hist-item:active { background: var(--surface-2); }
.hist-item.on { border-color: #c9d2f8; background: var(--primary-soft); }
.hi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hi-title {
  font-size: 13.5px; font-weight: 650; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist-item.on .hi-title { color: var(--primary-dk); }
.hi-sub { font-size: 11px; color: var(--ink-3); }
.hi-del {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-3);
  transition: background .15s, color .15s;
}
.hi-del:active { background: #ffece8; color: var(--danger); }
.hist-empty { font-size: 12.5px; color: var(--ink-3); padding: 10px 4px; }

/* ---------- iOS 分段控件 ---------- */
.seg {
  position: relative; display: flex; gap: 0;
  margin: 8px 16px 0; padding: 3px;
  background: var(--surface-2); border-radius: 11px;
}
.seg-ind {
  position: absolute; top: 3px; left: 0; height: calc(100% - 6px);
  background: var(--surface); border-radius: 8.5px;
  box-shadow: 0 1px 3px rgba(20,22,40,.10), 0 0 0 .5px rgba(20,22,40,.04);
  transition: transform .32s cubic-bezier(.32,.72,0,1), width .32s cubic-bezier(.32,.72,0,1);
  pointer-events: none;
}
.seg-btn {
  position: relative; z-index: 1; flex: 1;
  padding: 7px 0; border-radius: 8.5px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: color .2s;
}
.seg-btn.active { color: var(--ink); font-weight: 650; }

.panel-body { flex: 1; overflow-y: auto; padding: 14px 16px max(32px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: paneIn .32s cubic-bezier(.32,.72,0,1); }
@keyframes paneIn {
  from { opacity: 0; transform: translateY(6px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 设置区块 ---------- */
.setting-block {
  background: var(--surface);
  border-radius: var(--radius); padding: 15px 16px; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(20,22,40,.04), 0 0 0 .5px rgba(20,22,40,.05);
}
.setting-title {
  font-size: 13px; font-weight: 650; margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  letter-spacing: -.1px;
}
.setting-note { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.setting-hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.65; margin: 10px 0 0; }

/* 朗读音色：英文 / 中文两行，各带标签 —— 以前全挤在一排，看不出哪几个是一组 */
.voice-group { display: flex; flex-direction: column; gap: 9px; }
.voice-row { display: flex; align-items: center; gap: 10px; }
.voice-lbl {
  flex: 0 0 58px; font-size: 12px; font-weight: 650; color: var(--ink-3);
}
.voice-btns { flex: 1; display: flex; gap: 6px; }
.vbtn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 6px; border-radius: 11px;
  background: var(--surface-2); border: 1.5px solid transparent;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: all .16s cubic-bezier(.32,.72,0,1);
}
.vbtn:active { transform: scale(.97); }
.vbtn.sel { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dk); font-weight: 700; }
.vb-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--line); transition: background .16s, box-shadow .16s;
}
.vbtn.sel .vb-dot { background: var(--primary); box-shadow: 0 0 0 3px rgba(74,99,231,.16); }
.voice-none { font-size: 12px; color: var(--ink-3); }

/* 回答长度：用胶囊按钮，**不用横条**（手机上横条太容易误触） */
.chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.len-chip {
  flex: 1 1 0; min-width: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border-radius: 12px;
  background: var(--surface-2); border: 1.5px solid transparent;
  transition: all .16s cubic-bezier(.32,.72,0,1);
}
.len-chip b { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.len-chip em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.len-chip:active { transform: scale(.97); }
.len-chip.sel { background: var(--primary-soft); border-color: var(--primary); }
.len-chip.sel b { color: var(--primary-dk); }
.len-chip.sel em { color: var(--primary); }

/* ---------- 开关（深度思考） ---------- */
.switch-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line);
}
.switch-label { flex: 1; font-size: 13px; font-weight: 650; display: flex; flex-direction: column; gap: 2px; }
.switch-label em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--ink-3); line-height: 1.5; }
.switch {
  flex: none; width: 48px; height: 29px; border-radius: 15px;
  background: var(--line); position: relative;
  transition: background .24s cubic-bezier(.32,.72,0,1);
}
.switch .knob {
  position: absolute; top: 2.5px; left: 2.5px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(20,22,40,.22), 0 0 0 .5px rgba(20,22,40,.05);
  transition: transform .24s cubic-bezier(.32,.72,0,1);
}
.switch.on { background: var(--ok); }
.switch.on .knob { transform: translateX(19px); }

/* ---------- 单词库 ---------- */
.bank-hero {
  background: linear-gradient(150deg, #5a72f0 0%, #4a63e7 48%, #6b52e8 100%);
  border-radius: 18px; padding: 17px 18px 15px; margin-bottom: 12px;
  color: #fff; box-shadow: 0 8px 24px rgba(74,99,231,.24);
}
.bh-row { display: flex; align-items: center; gap: 14px; }
.bh-stat { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bh-sep { width: 1px; height: 34px; background: rgba(255,255,255,.26); flex: none; }
.bh-num { font-size: 27px; font-weight: 800; letter-spacing: -.8px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.bh-num.alt { opacity: .8; font-size: 24px; }
.bh-cap { font-size: 11.5px; opacity: .78; font-weight: 600; }
.bh-bar {
  height: 5px; border-radius: 3px; background: rgba(255,255,255,.24);
  margin: 14px 0 8px; overflow: hidden;
}
.bh-bar i { display: block; height: 100%; border-radius: 3px; background: #fff; transition: width .6s cubic-bezier(.32,.72,0,1); }
.bh-foot { font-size: 11px; opacity: .8; }

.bank-card {
  background: var(--surface); border-radius: var(--radius); padding: 14px 15px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(20,22,40,.04), 0 0 0 .5px rgba(20,22,40,.05);
}
.today-card { padding: 13px 15px 14px; }
.bc-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.bc-title { font-size: 14px; font-weight: 700; }
.bc-badge {
  font-size: 11px; font-weight: 700; color: var(--primary-dk);
  background: var(--primary-soft); padding: 2px 8px; border-radius: 20px;
  font-variant-numeric: tabular-nums;
}
.bc-chev { margin-left: auto; color: var(--ink-3); transition: transform .28s cubic-bezier(.32,.72,0,1); }
.bc-chev.open { transform: rotate(180deg); }
.bc-sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin-top: 6px; }
.bc-empty { font-size: 12px; color: var(--ink-3); padding: 8px 0 2px; }
.today-words {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px;
  max-height: 34vh; overflow-y: auto;
  animation: fb-drop .24s cubic-bezier(.32,.72,0,1);
}
.today-words[hidden] { display: none; }
.tw {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--surface-2); border-radius: 9px; padding: 5px 10px;
}
.tw b { font-family: var(--font-en); font-size: 13.5px; font-weight: 650; color: var(--ink); cursor: pointer; }
.tw b:active { color: var(--primary-dk); }
.tw em { font-style: normal; font-size: 11px; color: var(--ink-3); }

.bank-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 12px; }
.bg-cell {
  background: var(--surface); border-radius: 13px; padding: 11px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  box-shadow: 0 1px 2px rgba(20,22,40,.04), 0 0 0 .5px rgba(20,22,40,.05);
}
.bg-cell b { font-size: 17px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.bg-cell span { font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
@media (max-width: 340px) { .bank-grid { grid-template-columns: repeat(2, 1fr); } }

.bank-actions { display: flex; gap: 8px; }
.bank-btn {
  flex: 1; padding: 12px; border-radius: 13px;
  background: var(--surface); color: var(--ink-2);
  font-size: 13.5px; font-weight: 650;
  box-shadow: 0 1px 2px rgba(20,22,40,.04), 0 0 0 .5px rgba(20,22,40,.05);
  transition: transform .16s, background .16s;
}
.bank-btn:active { transform: scale(.98); }
.bank-btn.primary { background: var(--primary-soft); color: var(--primary-dk); }
.bank-btn:disabled { opacity: .55; }
.bank-token { margin-top: 9px; display: flex; flex-direction: column; gap: 8px; }
.bank-token[hidden] { display: none; }
.text-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--ink);
}
.text-input:focus { outline: none; border-color: var(--primary); }
.bank-foot { font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 12px; line-height: 1.6; }

.bank-skeleton { display: flex; flex-direction: column; gap: 10px; }
.bank-skeleton span {
  display: block; height: 78px; border-radius: var(--radius);
  background: linear-gradient(100deg, #eef0f6 30%, #f6f7fb 50%, #eef0f6 70%);
  background-size: 220% 100%; animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }

.empty-hint {
  font-size: 12.5px; color: var(--ink-3); line-height: 1.75;
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: 12px; padding: 18px; text-align: center;
}

/* ========================= 设置变更确认弹窗 ========================= */
#toast {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.92);
  background: rgba(28,28,36,.9); color: #fff;
  padding: 11px 20px; border-radius: 13px;
  font-size: 13.5px; font-weight: 600; z-index: 95;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,1.1,.4,1);
  max-width: 80vw; text-align: center; line-height: 1.5;
  backdrop-filter: blur(8px);
}
#toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (max-width: 380px) {
  .logo-zi { font-size: 19px; }
  .logo-rest { font-size: 12px; }
  .top-act { padding: 6px 10px; }
  .chat { padding: 14px 14px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}