:root{
  --pink:#ff8fb1; --pink-d:#ff6f9c; --bg:#fff7fb; --card:#ffffff;
  --text:#4a3b45; --muted:#9a8a93; --user:#ffe1ec; --ai:#eef4ff; --accent:#7c5cff;
  --bg-a:#fff0f7; --bg-b:#f3f0ff;                      /* 页面渐变底色 */
  --soft:#f6f4f8; --soft-2:#faf7fb;                    /* 按钮浅底 / 输入胶囊底 */
  --border:#e2dcec; --border-2:#f0e4ec;                /* 通用边框 / 列表卡边框 */
  --active:#f6eff5; --sep:#f0e9ef;                     /* 按压态 / 分隔线 */
  --topbar-shadow:rgba(255,143,177,.15);
  --chip-bg:#f4f0ff; --chip-border:#e6ddff; --chip-active:#e9e1ff;   /* 生词小卡片 */
  --w-word:#5b3fd6; --w-phon:#a596ff; --w-mean:#6b6477;
  --zh:#9a8fb0; --zh-border:#ece6f7;                   /* 中文翻译 */
  --hint-bg:#fffbe9; --hint-border:#ffe2a8;            /* 提示条 */
  --ex-bg:#ffffff; --ex-border:#ffd66b; --ex-active:#fff3d6;         /* 例句胶囊 */
  --tip-bg:#eaf3ff; --tip-c:#3a5a8a;                   /* 安全提示 */
  --li-bg:#faf6f9; --li-active:#f3e9f0;                /* 历史/生词列表卡 */
  --del-bg:#fff0f3; --del-c:#d05a7a; --del-active:#ffe0e8;           /* 删除键 */
  --speak-bg:#eef3ff; --speak-c:#4a6cf7;               /* 播放键 */
  --master-bg:#eafbf0; --master-c:#2ba65a;             /* 已掌握键 */
  --sel-bg:#eef2ff;                                    /* 选中态底色 */
  --replay-bg:#eeeeee; --btn-ghost:#f0eef2;
  --fix-bg:#fff4f6; --fix-border:#ffd9e0; --fix-c:#d05a7a; --fix-right-c:#2f9e44;  /* ✏️ 纠错小卡片 */
  --kb:0px; /* 软键盘高度，由 JS 写入，把聊天框底部抬到键盘顶 */
}
/* ---------- 颜色主题：body[data-theme] 切换（不写 = 默认樱花粉） ---------- */
body[data-theme="ocean"]{
  --pink:#5aa9ff; --pink-d:#3b8fe8; --bg-a:#eef6ff; --bg-b:#e9f3ff;
  --text:#2d3e50; --muted:#7d8ba0; --user:#d6ecff; --ai:#f0f7ff; --accent:#2563eb;
  --soft:#eef3f9; --soft-2:#f4f9ff; --border:#d8e4f0; --border-2:#e2ecf6;
  --active:#e8f1fb; --sep:#e4edf6; --topbar-shadow:rgba(90,169,255,.2);
  --chip-bg:#e8f1ff; --chip-border:#cfe2fb; --chip-active:#dceafd;
  --w-word:#2563eb; --w-phon:#7fa7e8; --w-mean:#5a6b7d;
  --zh:#7d93b5; --zh-border:#dfe9f5;
  --li-bg:#f2f8ff; --li-active:#e4effb; --sel-bg:#dcecfd;
}
body[data-theme="mint"]{
  --pink:#4ecb9d; --pink-d:#38b184; --bg-a:#eefcf5; --bg-b:#eafaf3;
  --text:#33443c; --muted:#84a094; --user:#d4f5e6; --ai:#f0fbf7; --accent:#0d9488;
  --soft:#eef6f2; --soft-2:#f4fbf8; --border:#d5e8df; --border-2:#dfeee7;
  --active:#e6f5ee; --sep:#e2f0e9; --topbar-shadow:rgba(78,203,157,.2);
  --chip-bg:#e6f8f0; --chip-border:#cdeede; --chip-active:#d8f2e6;
  --w-word:#0d9488; --w-phon:#7fc4ac; --w-mean:#5f7369;
  --zh:#7fa394; --zh-border:#ddeee7;
  --li-bg:#f2fbf7; --li-active:#e2f4ec; --sel-bg:#d9f3e8;
}
body[data-theme="sunset"]{
  --pink:#ffa26b; --pink-d:#f8873c; --bg-a:#fff5ec; --bg-b:#fff1e6;
  --text:#4d3a2d; --muted:#a08a78; --user:#ffe8d1; --ai:#fff6ec; --accent:#ea580c;
  --soft:#f8f1ea; --soft-2:#fdf6ef; --border:#ecdcc9; --border-2:#f0e4d6;
  --active:#f9eee0; --sep:#f3e6d7; --topbar-shadow:rgba(255,162,107,.2);
  --chip-bg:#fff1e2; --chip-border:#ffdfc2; --chip-active:#ffe8d1;
  --w-word:#c2560e; --w-phon:#e8a06b; --w-mean:#75604e;
  --zh:#b09275; --zh-border:#f2e4d3;
  --li-bg:#fdf5ee; --li-active:#f7ebdd; --sel-bg:#ffe9d6;
}
body[data-theme="dark"]{
  --pink:#f47fa8; --pink-d:#e05f92; --bg-a:#1c1a24; --bg-b:#16141e;
  --card:#26242e; --text:#efe9f2; --muted:#9d94a8; --user:#483340; --ai:#2d2b3a; --accent:#9b7bff;
  --soft:#2f2c38; --soft-2:#2a2833; --border:#3d3948; --border-2:#3a3546;
  --active:#373243; --sep:#3a3644; --topbar-shadow:rgba(0,0,0,.45);
  --chip-bg:#332f42; --chip-border:#453f5c; --chip-active:#3d3850;
  --w-word:#c3aeff; --w-phon:#9186c9; --w-mean:#b5adc2;
  --zh:#a89bb5; --zh-border:#453f56;
  --hint-bg:#3a3320; --hint-border:#6b5c2a;
  --ex-bg:#332f3a; --ex-border:#6b5c3a; --ex-active:#3d3846;
  --tip-bg:#2c3550; --tip-c:#a9c1f0;
  --li-bg:#2b2936; --li-active:#35313f; --sel-bg:#3a3560;
  --del-bg:#462d38; --del-c:#ff9ab3; --del-active:#57343f;
  --speak-bg:#2c3550; --speak-c:#9db8ff;
  --master-bg:#2c4a3a; --master-c:#7fe0a5;
  --replay-bg:#46424e; --btn-ghost:#36333f;
  --fix-bg:#3d2a34; --fix-border:#5e3a48; --fix-c:#ff9ab3; --fix-right-c:#69db7c;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,var(--bg-a),var(--bg-b));
  color:var(--text); display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden;
}
.topbar{
  display:flex; align-items:center;
  padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top,0px));
  background:var(--card); box-shadow:0 2px 10px var(--topbar-shadow); flex:0 0 auto;
  transition:transform .22s ease, opacity .22s ease;
  position:sticky; top:0; z-index:30;
}
/* 聊天页面向下滑时，顶部菜单自动藏起来，给内容留出更多空间；向上滑再出现 */
.topbar.hide-away{transform:translateY(-110%); opacity:0; pointer-events:none;}
.icon-btn{background:none; border:none; font-size:24px; cursor:pointer; padding:6px 8px; border-radius:10px; line-height:1;}
.icon-btn:active{background:var(--active);}

/* 折叠菜单：标题 / 模式 / 设置 / 换主题 全部收进 ☰，不再常驻占宽 */
.app-menu{position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.28);}
.menu-card{
  position:absolute; top:calc(8px + env(safe-area-inset-top,0px)); left:10px; right:10px;
  background:var(--card); border-radius:16px; padding:8px; box-shadow:0 8px 30px rgba(0,0,0,.18);
  animation:menuIn .15s ease;
}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px);}to{opacity:1; transform:none;}}
.menu-title{font-weight:700; font-size:16px; padding:8px 12px 10px; color:var(--text);}
.menu-item{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; font-size:15px; color:var(--text); text-align:left;
  padding:12px; border-radius:12px; cursor:pointer;
}
.menu-item:active{background:var(--active);}
.menu-val{font-size:14px; color:var(--accent); font-weight:600;}
.menu-sep{height:1px; background:var(--sep); margin:4px 8px;}
.menu-version{font-size:11px; color:var(--muted); text-align:center; padding:6px 0 4px;}
.menu-topic{font-size:13px; color:var(--muted); padding:6px 12px 4px;}
main{flex:1; overflow:hidden; padding:16px; -webkit-overflow-scrolling:touch; min-height:0;}
.scenario-panel{height:100%; overflow:auto; -webkit-overflow-scrolling:touch;}
.hidden{display:none !important;}
/* 语音输入栏整体禁止选中：双保险，配合 app.js 里对 contextmenu 的拦截，
   压住鸿蒙长按弹出的「选择/复制/识别文字」菜单。键盘栏不能这样设，那里要选字。 */
.voice-pane,.voice-pane *{user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}

.scenario-panel h2{font-size:18px; margin:6px 4px 14px;}
.scenario-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px;}
.scenario-card{
  background:var(--card); border:none; border-radius:18px; padding:18px 10px;
  text-align:center; cursor:pointer; box-shadow:0 4px 14px rgba(124,92,255,.08);
  transition:transform .12s;
}
.scenario-card:active{transform:scale(.96);}
.sc-emoji{font-size:40px;}
.sc-title{margin-top:8px; font-weight:600; font-size:15px;}

.chat-panel{display:flex; flex-direction:column; height:100%; min-height:0; padding-bottom:var(--kb); transition:padding-bottom .12s ease;}
.messages{flex:1; overflow:auto; display:flex; flex-direction:column; gap:12px; padding:6px 2px; -webkit-overflow-scrolling:touch; min-height:0;}
/* 消息：头像🦊与🔊播放键并排同一行（紧凑），气泡满宽在下面——文字最宽 */
.msg{display:flex; flex-direction:column; gap:4px; max-width:100%; align-items:stretch;}
.msg-header{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px;}
.avatar{font-size:20px; line-height:1;}
.bubble{
  width:100%; max-width:100%; box-sizing:border-box; background:var(--ai);
  padding:11px 14px; border-radius:16px; border-top-left-radius:4px;
  line-height:1.5; font-size:16px; word-break:break-word;
}
.msg.user .bubble{background:var(--user); border-top-left-radius:16px; border-top-right-radius:4px;}
.replay{background:var(--replay-bg); border:none; border-radius:10px; padding:4px 10px; font-size:13px; cursor:pointer; opacity:.85;}
.replay:active{opacity:1;}
.replay-cache{background:#2563eb; color:#fff;}      /* 蓝：播放已缓存声音 */
.replay-resynth{background:#ea580c; color:#fff;}     /* 橙：重新合成播放 */
.voice-order{display:flex; flex-direction:column; gap:6px; margin:4px 0;}
.voice-item{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:var(--soft); cursor:pointer; border:1px solid transparent;}
.voice-item.sel{background:var(--sel-bg); border-color:var(--accent);}
.vi-no{font-size:12px; color:var(--zh); min-width:46px;}
.vi-name{flex:1; font-size:15px;}
.vi-btns{display:flex; gap:4px;}
.vi-move{background:var(--card); border:1px solid var(--border); border-radius:8px; width:28px; height:28px; cursor:pointer; font-size:12px; line-height:1;}
.vi-move:active{background:var(--active);}
.bubble-text{white-space:pre-wrap;}
.bubble-zh{font-size:14px; color:var(--zh); margin-top:6px; line-height:1.45; border-top:1px dashed var(--zh-border); padding-top:6px;}
.words{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.engine-tag{font-size:11px; color:var(--zh); letter-spacing:.3px; flex:1; min-width:0; line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.replay-group{display:flex; gap:6px; flex:0 0 auto;}
.word-chip{background:var(--chip-bg); border:1px solid var(--chip-border); border-radius:12px; padding:4px 10px; font-size:13px; cursor:pointer; line-height:1.4; text-align:left;}
.word-chip:active{background:var(--chip-active);}
.word-chip .w-word{font-weight:700; color:var(--w-word);}
.word-chip .w-phon{color:var(--w-phon); margin:0 5px;}
.word-chip .w-mean{color:var(--w-mean);}
.typing .bubble-text::after{content:'···'; animation:blink 1s infinite;}
/* 逐句配色：英文/中文第 i 句同色（行内着色、不换行、不加表情），靠颜色一眼配对 */
.bubble-text .pair-en, .bubble-zh .pair-zh { font-weight: 500; }
@keyframes blink{0%,100%{opacity:.2;}50%{opacity:1;}}

/* 中文翻译显隐：「译」键直接内联切换 .bubble-zh 的 display，不依赖此规则 */
.toggle-zh{background:#16a34a; color:#fff;}        /* 绿：翻译可见 */
.toggle-zh.off{background:#c7c0d0; color:#fff;}    /* 灰：翻译已隐藏 */

.hint{background:var(--hint-bg); border:1px solid var(--hint-border); border-radius:12px; padding:6px 10px; margin-bottom:8px; font-size:13px; line-height:1.4; transition:opacity .35s; cursor:pointer;}
.hint.hint-fade{opacity:0;}
.examples{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.example-chip{
  background:var(--ex-bg); border:1px solid var(--ex-border); border-radius:999px; padding:6px 12px;
  font-size:14px; cursor:pointer; color:var(--text);
}
.example-chip:active{background:var(--ex-active);}

.secure-tip{background:var(--tip-bg); border-radius:12px; padding:8px 12px; margin-bottom:10px; font-size:13px; color:var(--tip-c);}

/* 底部输入区（豆包式：菜单/语音/发送都收进输入框胶囊内，发送键是小箭头嵌在框内右下） */
.composer{
  flex:0 0 auto; display:flex; align-items:flex-end; gap:6px; background:transparent;
  margin:8px -16px 0; padding:8px 8px; padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
}
/* 输入框本体：一个圆角胶囊，☰在左、文本框居中、右侧放话筒/发送小键 */
.mode-pane{
  display:flex; align-items:center; gap:4px; flex:1; min-width:0;
  background:var(--soft-2); border:1px solid var(--border); border-radius:18px;
  padding:5px 8px; position:relative;
}
.voice-pane{display:flex; align-items:center; gap:8px; flex:1; min-width:0;}
/* 文本框基础样式（弹窗输入框等共用），聊天框由下方 #textInput 覆盖为无边框透明 */
.text-input{flex:1; width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:14px; outline:none; font-size:16px; line-height:1.5; padding:11px 12px; background:var(--soft-2); min-width:0; resize:none; overflow-y:auto; overflow-wrap:anywhere; word-break:break-word; min-height:44px; max-height:150px; font-family:inherit;}
/* 聊天文本框：去掉自身边框/底色，由 .mode-pane 胶囊提供外观；右侧预留小键空间 */
#textInput{
  flex:1; width:100%; box-sizing:border-box; border:none; outline:none; background:transparent;
  font-size:16px; line-height:1.5; padding:10px 2px 10px 8px; min-width:0; resize:none;
  overflow-y:auto; overflow-wrap:anywhere; word-break:break-word; min-height:38px; max-height:150px;
  font-family:inherit; color:var(--text);
}
/* ☰ 菜单键嵌在输入框左侧，小且低调 */
.composer-menu{flex:0 0 auto; padding:4px 6px; color:var(--muted); font-size:22px; background:none; border:none; cursor:pointer; line-height:1;}
.composer-menu:active{background:var(--active);}
/* 话筒键：空状态时显示在右侧，小圆点 */
.mode-btn{font-size:16px; background:var(--pink); border:none; color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.mode-btn:active{background:var(--pink-d);}
/* 💡 智能引导键：用主题强调色（与粉色话筒键区分），点一下让 Lily 给示范句 */
.guide-btn{background:var(--accent);}
.guide-btn:active{background:var(--accent); filter:brightness(.88);}
/* 发送键：小箭头，嵌在输入框内右下，仅输入时显示 */
.send-btn{background:var(--accent); color:#fff; border:none; border-radius:50%; width:32px; height:32px; font-size:18px; line-height:1; cursor:pointer; flex:0 0 auto; display:none; align-items:center; justify-content:center;}
.composer.typing .send-btn{display:flex;}
/* 以下三条只针对键盘输入栏(#kbMode)：语音栏里没有「输入中」这个概念，
   否则从键盘切到语音时残留的 .typing 会把语音栏的 ☰/💡/⌨️ 一起藏掉。 */
.composer.typing #kbMode .composer-menu{display:none;}
.composer.typing #kbMode .mode-btn{display:none;}
.record-btn{
  flex:1; min-width:0; background:var(--pink); color:#fff; border:none; border-radius:999px;
  padding:13px 12px; font-size:16px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  transition:background .12s ease; white-space:nowrap; overflow:hidden;
}

/* ---------- 按住说话的即时反馈（就地画在按钮上，不弹浮层、不遮聊天内容）----------
   按下后按钮本身略微变深并显示声波 + 「松手发送，上移取消」；
   上滑超过阈值则变红 + 声波压平 + 「松开手指，取消发送」。 */
.record-btn.recording{background:var(--pink-d);}
.record-btn.cancel{background:#d9435e;}
/* 按钮里的文字全部改由伪元素生成，DOM 里不留任何文字节点。
   鸿蒙(华为浏览器)长按会识别按钮上的文字、弹出「选择 / 复制 / 识屏」菜单，直接把「按住说话」
   这个按钮整个吃掉；JS 的 contextmenu 拦不住系统那一层，只有让按钮上没有文字节点才有效。
   伪元素的内容不可选中，也不会成为长按选择/识屏的锚点。 */
.record-btn::after{content:"按住说话";}
.record-btn.recording::after{content:"松手发送，上移取消";}
.record-btn.cancel::after{content:"松开手指，取消发送";}
.rec-mic{flex:0 0 auto; display:block;}
.record-btn.recording .rec-mic,.record-btn.cancel .rec-mic{display:none;}
.rec-wave{display:flex; align-items:center; justify-content:center; gap:3px; height:20px; flex:0 0 auto;}
.rec-wave i{display:block; width:3px; height:12px; border-radius:2px; background:#fff; animation:recwave .9s ease-in-out infinite;}
.rec-wave i:nth-child(1){animation-delay:0s;}
.rec-wave i:nth-child(2){animation-delay:.12s;}
.rec-wave i:nth-child(3){animation-delay:.24s;}
.rec-wave i:nth-child(4){animation-delay:.36s;}
.rec-wave i:nth-child(5){animation-delay:.48s;}
.rec-wave i:nth-child(6){animation-delay:.60s;}
.rec-wave i:nth-child(7){animation-delay:.72s;}
/* 有真实音量数据时（app.js 接上 AnalyserNode 后会加 .live）关掉这段循环动画，
   每根柱子的高度改由 JS 按实时音量设置——安静时趴着，说话才跳。
   万一设备拿不到 Web Audio，.live 不会被加上，就还走上面这段动画兜底。 */
.rec-wave.live i{animation:none; transition:height .07s linear;}
@keyframes recwave{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1.4);}}
/* 进入取消态：声波停住并压平，一眼看出「松手不会发送」 */
.record-btn.cancel .rec-wave i{animation:none; transform:scaleY(.3); opacity:.55;}
#speakToggle{opacity:.5; flex:0 0 auto; font-size:20px; background:none; border:none; cursor:pointer; padding:6px; border-radius:10px;}
#speakToggle.active{opacity:1;}
.menu-val.off{color:var(--muted);}

.modal{position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;}
.modal-card{background:var(--card); border-radius:20px; padding:22px; width:100%; max-width:360px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-y:auto; -webkit-overflow-scrolling:touch;}
.modal-card h3{margin:0 0 16px;}
.field{display:block; margin-bottom:14px; font-size:14px;}
.field select,.field input{width:100%; margin-top:6px; padding:10px; border:1px solid var(--border); border-radius:12px; font-size:15px; background:var(--soft-2); color:var(--text);}
.field small{color:var(--muted); display:block; margin-top:4px;}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; position:sticky; bottom:0; background:var(--card); padding-top:10px; margin-top:6px;}
.btn{border:none; border-radius:12px; padding:10px 18px; font-size:15px; cursor:pointer;}
.btn.primary{background:var(--accent); color:#fff;}
.btn.ghost{background:var(--btn-ghost); color:var(--text);}
.settings-msg{color:green; font-size:14px; min-height:18px; margin:8px 0 0;}

.rate-selector{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0;}
.rate-btn{border:1px solid var(--border); background:var(--soft); color:var(--text); border-radius:12px; padding:9px 0; min-width:54px; flex:1; font-size:15px; cursor:pointer;}
.rate-btn.active{background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700;}
.rate-btn:active{transform:scale(.96);}

/* ---------- 年级选择器（复用 rate 按钮风格） ---------- */
.grade-selector{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0;}
.grade-btn{border:1px solid var(--border); background:var(--soft); color:var(--text); border-radius:12px; padding:9px 0; min-width:54px; flex:1; font-size:15px; cursor:pointer;}
.grade-btn.active{background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700;}
.grade-btn:active{transform:scale(.96);}

.toast{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%);
  background:rgba(0,0,0,.8); color:#fff; padding:10px 16px; border-radius:999px;
  font-size:14px; z-index:60; max-width:90vw; text-align:center;
}

/* ---------- 历史话题列表 ---------- */
.hist-list{max-height:55vh; overflow-y:auto; margin:0 -4px;}
.hist-empty{color:var(--muted); text-align:center; padding:26px 0; font-size:14px;}
.hist-item{display:flex; align-items:stretch; gap:6px; margin-bottom:8px;}
.hist-main{flex:1; min-width:0; text-align:left; background:var(--li-bg); border:1px solid var(--border-2);
  border-radius:14px; padding:10px 12px; cursor:pointer; font:inherit;}
.hist-main:active{background:var(--li-active);}
.hist-title{font-size:15px; font-weight:600; color:var(--text); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.hist-meta{font-size:12px; font-weight:400; color:var(--muted);}
.hist-last{font-size:13px; color:var(--muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hist-del{border:none; background:var(--del-bg); color:var(--del-c); border-radius:12px; width:42px; font-size:16px; cursor:pointer;}
.hist-del:active{background:var(--del-active);}

/* ---------- 生词本列表 ---------- */
.wb-list{max-height:60vh; overflow-y:auto; margin:0 -4px;}
.wb-empty{color:var(--muted); text-align:center; padding:26px 0; font-size:14px;}
.wb-item{display:flex; align-items:stretch; gap:6px; margin-bottom:8px;}
.wb-main{flex:1; min-width:0; text-align:left; background:var(--li-bg); border:1px solid var(--border-2);
  border-radius:14px; padding:10px 12px; cursor:pointer; font:inherit;}
.wb-main:active{background:var(--li-active);}
.wb-word{font-size:16px; font-weight:600; color:var(--text);}
.wb-phon{font-size:13px; color:var(--muted); margin-left:6px;}
.wb-pos{font-size:12px; color:var(--del-c); margin-left:4px;}
.wb-mean{font-size:14px; color:var(--text); margin-top:3px;}
.wb-meta{font-size:11px; color:var(--muted); margin-top:4px; display:flex; gap:8px; flex-wrap:wrap;}
.wb-btns{display:flex; flex-direction:column; gap:4px;}
.wb-btn{border:none; border-radius:10px; width:42px; height:32px; font-size:15px; cursor:pointer; line-height:1;}
.wb-btn.speak{background:var(--speak-bg); color:var(--speak-c);}
.wb-btn.speak:active{background:var(--sel-bg);}
.wb-btn.master{background:var(--master-bg); color:var(--master-c);}
.wb-btn.master:active{background:var(--active);}
.wb-btn.del{background:var(--del-bg); color:var(--del-c);}
.wb-btn.del:active{background:var(--del-active);}
.wb-item.mastered .wb-main{opacity:.55; text-decoration:line-through;}
.wb-item.mastered .wb-word::after{content:" ✓"; color:var(--master-c); font-weight:700;}

/* ---------- 设置弹窗分组标题 ---------- */
.group-title{font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.3px;
  margin:2px 0 4px; padding-bottom:4px;}

/* ---------- ✏️ 语法小提示卡（@@FIX@@）：错句划掉→正确句，点卡片朗读正确句 ---------- */
.fix-card{margin:0 0 8px; padding:8px 10px; border-radius:12px;
  background:var(--fix-bg); border:1px solid var(--fix-border); cursor:pointer;}
.fix-card:active{filter:brightness(.97);}
.fix-title{font-size:12px; font-weight:700; color:var(--fix-c); margin-bottom:4px;}
.fix-line{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; font-size:15px; line-height:1.5;}
.fix-wrong{text-decoration:line-through; color:var(--fix-c);}
.fix-arrow{color:var(--muted);}
.fix-right{font-weight:700; color:var(--fix-right-c);}
.fix-why{font-size:12px; color:var(--muted); margin-top:4px;}

/* ---------- 🎯 语法训练营选择面板：8 个语法点卡片，带星星进度 ---------- */
.grammar-sub{font-size:13px; color:var(--muted); margin:-6px 0 12px; line-height:1.5;}
.grammar-list{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;}
.grammar-item{display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  border:1px solid var(--border-2); background:var(--soft-2); border-radius:14px;
  padding:10px 12px; cursor:pointer; font-family:inherit;}
.grammar-item:active{background:var(--active); transform:scale(.98);}
.g-emoji{font-size:24px; flex-shrink:0;}
.g-info{flex:1; min-width:0;}
.g-title{font-size:15px; font-weight:700; color:var(--text);}
.g-desc{font-size:12px; color:var(--muted); margin-top:2px; line-height:1.45;}
.g-stars{font-size:13px; letter-spacing:1px; flex-shrink:0;}

/* ---------- 💡 智能引导气泡：不知道说什么时，Lily 给 1~2 句示范 ---------- */
.guide-bubble{background:var(--hint-bg); border:1px solid var(--hint-border);}
.guide-title{font-size:13px; font-weight:700; color:var(--accent); margin-bottom:8px;}
.guide-item{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:8px 10px; margin-bottom:8px;}
.guide-en{font-size:16px; font-weight:600; cursor:pointer; line-height:1.45;}
.guide-en:active{opacity:.7;}
.guide-zh{font-size:13px; color:var(--muted); margin-top:3px;}
.guide-btns{margin-top:6px;}
.guide-use{border:none; background:var(--accent); color:#fff; border-radius:10px; padding:5px 12px; font-size:13px; cursor:pointer;}
.guide-use:active{filter:brightness(.9);}
.guide-tip{font-size:11px; color:var(--muted);}
/* 输入中（发送键亮出）时，💡 引导键让位隐藏，与话筒键行为一致（同样只限键盘栏） */
.composer.typing #kbMode .guide-btn{display:none;}

/* ---------- 删除消息按钮+弹出菜单 ---------- */
.msg{position:relative;}  /* 给绝对定位的删除按钮做锚点 */
.msg-del-btn{
  background:var(--card); border:1px solid var(--border); border-radius:50%;
  width:28px; height:28px; font-size:15px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); padding:0; flex:0 0 auto;
  opacity:0; transition:opacity .15s;
}
/* 助手消息：删除键排在 header 行的「合成/缓存」右边（跟着行内排布，不再覆盖在下方）；
   用户消息：没有 header 行，删除键挂在右上角。 */
.msg-header .msg-del-btn{position:static;}
.msg > .msg-del-btn{position:absolute; top:0; right:0; z-index:5;}
.msg:hover .msg-del-btn, .msg-del-btn:focus{opacity:1;}
.msg.typing .msg-del-btn{display:none;}  /* 正在流式输出的消息不显示删除 */
.msg-del-btn:active{background:var(--active);}
/* 触摸设备（手机/平板）：删除按钮始终半透明可见，方便发现 */
@media (hover: none) and (pointer: coarse) {
  .msg-del-btn{opacity:0.35;}
}

.msg-menu{
  position:fixed; z-index:100; min-width:120px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.15); padding:4px; overflow:hidden;
  animation:menuIn .12s ease;
}
.msg-menu-item{
  display:block; width:100%; box-sizing:border-box;
  background:none; border:none; text-align:left; font-size:14px; color:var(--text);
  padding:10px 14px; border-radius:8px; cursor:pointer; font-family:inherit;
}
.msg-menu-item:active{background:var(--active);}
.msg-menu-item.del{color:var(--del-c);}
.msg-menu-item.del:active{background:var(--del-bg);}

/* —— 金币顶栏 + 充值弹窗 —— */
.credits-bar{
  display:flex; align-items:center; gap:4px; margin-left:auto;
  background:var(--active); border-radius:20px; padding:2px 10px 2px 8px;
  font-size:13px; color:var(--text);
}
.credits-bar.hidden{display:none;}
.credits-ico{font-size:14px;}
.credits-num{font-weight:600; min-width:24px; text-align:center;}
.credits-recharge{
  background:linear-gradient(135deg,#ff8fb1,#ffa26b); color:#fff;
  border:none; border-radius:12px; padding:2px 10px; font-size:12px;
  font-weight:600; cursor:pointer; font-family:inherit;
}
.credits-recharge:active{opacity:.85;}

.credits-big-row{text-align:center; margin:12px 0 4px;}
.credits-big-num{
  font-size:48px; font-weight:700;
  background:linear-gradient(135deg,#ff8fb1,#ffa26b);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; line-height:1.1;
}
.credits-big-label{color:var(--muted); font-size:14px; margin-top:4px;}
.credits-hint{text-align:center; color:var(--muted); font-size:13px; margin-top:4px;}
.recharge-tip{text-align:center; color:#ffa26b; font-size:13px; margin-top:8px;}

.recharge-plans{margin-top:16px;}
.plan-title{font-size:13px; color:var(--muted); margin-bottom:8px; text-align:center;}
.plan-list{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
.plan-item{
  background:var(--active); border-radius:10px; padding:10px; text-align:center;
  border:1px solid var(--border);
}
.plan-amount{font-size:18px; font-weight:700; color:var(--text);}
.plan-credits{font-size:12px; color:var(--muted); margin-top:2px;}
.plan-tag{
  display:inline-block; font-size:10px; color:#fff; background:#4ecb9d;
  padding:1px 6px; border-radius:6px; margin-top:4px;
}
.recharge-notice{
  text-align:center; color:var(--muted); font-size:12px;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--border);
}