/* 表达详情弹窗 expression drill —— 增强层，不属于 React bundle */
/* --- 遮罩与容器（沿用 .sheet-overlay 的动效规范）--- */
.exd-overlay{position:absolute;inset:0;z-index:40;background:#0006;display:flex;align-items:flex-end;
             animation:exd-fade .2s ease}
.exd-sheet{width:100%;max-height:88%;background:#fff;border-radius:22px 22px 0 0;display:flex;flex-direction:column;
           animation:exd-up .26s cubic-bezier(.22,1,.36,1)}
@keyframes exd-fade{from{opacity:0}to{opacity:1}}
@keyframes exd-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.exd-handle{width:40px;height:4px;border-radius:99px;background:#d9d2ee;margin:8px auto 10px;flex:none}

/* --- 顶部：表达原句（吸顶）--- */
.exd-head{flex:none;display:flex;align-items:flex-start;gap:10px;padding:0 18px 12px;border-bottom:1px solid #efeafc}
.exd-head-main{flex:1;min-width:0}
.exd-head-en{font-size:17px;font-weight:800;color:#4c1d95;line-height:1.3}
.exd-head-zh{margin-top:3px;font-size:12.5px;color:#8b83a6}
.exd-head-spk{flex:none;width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
              background:#7c3aed;color:#fff;display:grid;place-items:center;
              box-shadow:0 3px 8px #7c3aed59}
.exd-head-spk svg{width:15px;height:15px}
.exd-close{flex:none;width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
           background:#f3f0fb;color:#6d28d9;font-size:15px;display:grid;place-items:center}

/* --- 滚动区 --- */
.exd-body{flex:1;min-height:0;overflow-y:auto;padding:0 18px;-webkit-overflow-scrolling:touch}
.exd-sec{padding:14px 0;border-bottom:1px solid #efeafc}
.exd-sec-last{border-bottom:none;padding-bottom:8px}
.exd-title{margin:0 0 9px;font-size:14px;font-weight:800;color:#6d28d9;display:flex;align-items:center;gap:7px}
.exd-count{font-size:11px;font-weight:600;color:#a99bd0}

/* --- 句型 --- */
/* 纵向排列：句型模板可能很长（如 "Excuse me, could you please + 动词原形 + 地点?"），
   横向 flex 会把右侧说明挤成一字宽的竖排 */
.exd-pattern{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:11px 12px;
             border-radius:12px;background:linear-gradient(135deg,#f6f2ff,#efe9fd);border:1px solid #ece7fb}
.exd-pattern code{max-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
                  font-weight:700;color:#4c1d95;background:#fff;padding:5px 10px;border-radius:8px;
                  box-shadow:0 1px 3px #7c3aed1f;white-space:normal;word-break:break-word;line-height:1.5}
.exd-pattern span{font-size:12px;color:#6b6383;line-height:1.45}

/* --- 音频条（对齐 .lc-audio）--- */
.exd-audio{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 8px;background:#f1ecff;border-radius:10px}
.exd-play{width:28px;height:28px;flex:none;border:none;cursor:pointer;border-radius:50%;background:#7c3aed;
          color:#fff;display:grid;place-items:center;box-shadow:0 3px 8px #7c3aed59}
.exd-play svg{width:13px;height:13px}
.exd-wave{flex:1;min-width:0;display:flex;align-items:center;gap:2px;height:26px;overflow:hidden}
/* 每根波形条的 height 由组件按振幅内联注入；下面是兜底高度，避免无数据时塌成 0 */
.exd-wave i{flex:1;min-width:1.5px;max-width:3px;border-radius:2px;background:#cdbdf5;height:40%}
.exd-wave i.on{background:#7c3aed}
.exd-wave i:nth-child(4n+1){height:70%}
.exd-wave i:nth-child(4n+2){height:35%}
.exd-wave i:nth-child(4n+3){height:95%}
.exd-wave i:nth-child(6n){height:55%}
.exd-wave i:nth-child(7n){height:25%}
.exd-time{flex:none;font-size:11px;color:#7c6aa8;font-variant-numeric:tabular-nums}
.exd-speed{flex:none;font-size:10.5px;font-weight:700;color:#7c3aed;background:#ece5fb;padding:3px 7px;border-radius:7px;
           border:none;cursor:pointer}

/* --- 对话（对齐 .lc-dialogue / .lc-dturn）--- */
.exd-dialogue{display:flex;flex-direction:column;gap:10px}
.exd-turn{display:flex;align-items:flex-end;gap:7px}
.exd-turn.user{justify-content:flex-end}
.exd-avatar{flex:none;width:26px;height:26px;border-radius:50%;background:#ede9fe;display:grid;place-items:center;font-size:14px}
.exd-bubble{max-width:76%;padding:8px 11px;font-size:12.5px;line-height:1.4;border-radius:14px}
.exd-turn.ai .exd-bubble{background:#f0ecfa;color:#2f2a3d;border-bottom-left-radius:4px}
.exd-turn.user .exd-bubble{background:linear-gradient(135deg,#8b7bf0,#7c3aed);color:#fff;border-bottom-right-radius:4px}
/* flex-start：多行气泡时喇叭图标对齐首行，不会浮在中间 */
.exd-bubble-en{display:flex;align-items:flex-start;gap:6px}
.exd-bubble-en>span{min-width:0}
.exd-bubble-zh{margin-top:3px;font-size:11px;opacity:.7;line-height:1.35}
.exd-bubble-spk{flex:none;cursor:pointer;background:none;border:none;padding:0;color:inherit;opacity:.6;
                display:grid;place-items:center;width:16px;height:16px;margin-top:1px}
.exd-bubble-spk svg{width:14px;height:14px}
.exd-bubble-spk:hover{opacity:1}
.exd-bubble-spk.on{opacity:1}
.exd-turn.user .exd-bubble-spk{color:#fff}
/* 命中该表达的那一句：左侧高亮条 */
.exd-turn.hit .exd-bubble{box-shadow:inset 3px 0 0 #7c3aed;background:#e9e2fb}

/* --- 举一反三 --- */
.exd-vars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.exd-var{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border-radius:12px;
         background:#f4f0ff;border:1px solid #ece7fb;cursor:pointer}
.exd-var:active{background:#ece5fb}
.exd-var-main{flex:1;min-width:0}
.exd-var-en{font-size:12.5px;font-weight:700;color:#4c1d95;line-height:1.35}
/* 三行：英文 / 中文翻译 / 使用场景，与对话气泡、标题栏的中英对照方式保持一致 */
.exd-var-zh{margin-top:3px;font-size:11.5px;color:#5b5470;line-height:1.4}
.exd-var-note{margin-top:3px;font-size:10.5px;color:#9a92b0;line-height:1.35;
              padding-left:7px;border-left:2px solid #ddd3f7}
.exd-var-tag{flex:none;margin-top:1px;font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px}
.exd-var-tag.formal{color:#4c1d95;background:#e5defc}
.exd-var-tag.casual{color:#0e7490;background:#d9f2f7}
.exd-var-spk{flex:none;border:none;background:none;color:#b9a9e6;cursor:pointer;padding:0;
             display:grid;place-items:center;width:22px;height:22px;margin-top:1px}
.exd-var-spk svg{width:15px;height:15px}
.exd-var-spk:hover,.exd-var-spk.on{color:#7c3aed}

/* --- 底部 CTA（吸底）--- */
.exd-foot{flex:none;padding:10px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid #efeafc;
          background:#fff;border-radius:0 0 22px 22px;display:flex;gap:9px}
.exd-btn{height:46px;border-radius:12px;border:none;cursor:pointer;font-size:14.5px;font-weight:700}
.exd-btn-ghost{flex:none;width:46px;background:#f3f0fb;color:#6d28d9;font-size:17px}
.exd-btn-main{flex:1;background:linear-gradient(135deg,#8b7bf0,#7c3aed);color:#fff;
              box-shadow:0 6px 16px -4px #7c3aed80}
.exd-btn-main:active{transform:translateY(1px)}

/* --- 关闭动画 --- */
.exd-overlay.exd-closing{animation:exd-fade .18s ease reverse forwards}
.exd-overlay.exd-closing .exd-sheet{animation:exd-up .2s cubic-bezier(.4,0,1,1) reverse forwards}

/* --- 骨架屏（等 OpenAI 返回，通常 3-8 秒）--- */
.exd-skel{padding:18px 0}
.exd-skel-tip{font-size:12.5px;color:#8b83a6;margin-bottom:14px;text-align:center}
.exd-skel-row{height:38px;border-radius:12px;margin-bottom:10px;
              background:linear-gradient(90deg,#f4f0ff 25%,#ebe4fb 37%,#f4f0ff 63%);
              background-size:400% 100%;animation:exd-shimmer 1.4s ease infinite}
.exd-skel-row:nth-child(odd){width:78%}
.exd-skel-row:nth-child(even){width:64%;margin-left:auto}
@keyframes exd-shimmer{from{background-position:100% 50%}to{background-position:0 50%}}

/* --- 错误态 --- */
.exd-error{padding:28px 8px;text-align:center}
.exd-error-msg{font-size:13px;color:#6b6383;line-height:1.5;margin-bottom:14px}
.exd-retry{border:none;cursor:pointer;background:#ece5fb;color:#6d28d9;
           font-size:13px;font-weight:700;padding:9px 22px;border-radius:10px}

/* --- 正在朗读的那一轮 --- */
.exd-turn.playing .exd-bubble{outline:2px solid #7c3aed;outline-offset:1px}
.exd-turn.playing.ai .exd-bubble{background:#e4dbfa}

/* --- 循环开关：对单句和整段播放都生效 --- */
.exd-loop{flex:none;width:24px;height:24px;border:none;cursor:pointer;border-radius:7px;padding:0;
          background:transparent;color:#b9a9e6;display:grid;place-items:center}
.exd-loop svg{width:14px;height:14px}
.exd-loop:hover{color:#7c3aed}
.exd-loop.on{background:#7c3aed;color:#fff}

/* 单句循环时给气泡一个持续的脉冲，明确「正在重复这一句」 */
.exd-turn.playing .exd-bubble{animation:exd-pulse 1.6s ease-in-out infinite}
@keyframes exd-pulse{0%,100%{outline-color:#7c3aed}50%{outline-color:#c4b5fd}}

/* ======================= 重点词汇增强 =======================
   .lc-vrow 由 React 渲染，这里只加装饰性样式，不改其布局基础 */

.lc-vrow.lcx-row{cursor:pointer;position:relative}
.lc-vrow.lcx-row:active{background:#ece5fb}

/* 原 .lc-vspk 是 font-size 撑起的 emoji，换 SVG 后要显式定尺寸 */
.lc-vspk.lcx-spk{display:grid;place-items:center;width:17px;height:17px;
                 color:#8b7fb0;cursor:pointer;transition:color .15s}
.lc-vspk.lcx-spk svg{width:14px;height:14px}
.lc-vspk.lcx-spk:hover,.lc-vspk.lcx-spk.on{color:#7c3aed}

.lcx-caret{flex:none;margin-left:2px;color:#c9bced;font-size:14px;line-height:1;
           transition:transform .2s ease}
.lc-vrow.lcx-open .lcx-caret{transform:rotate(90deg);color:#7c3aed}

/* 展开面板：插在词汇行之后的兄弟节点 */
.lcx-panel{padding:10px 12px 12px 39px;background:#f7f4ff;border-left:2px solid #7c3aed;
           animation:lcx-open .18s ease}
@keyframes lcx-open{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.lcx-def{font-size:12px;color:#5b5470;line-height:1.5}

.lcx-ex{display:flex;align-items:flex-start;gap:8px;margin-top:9px;padding:9px 10px;
        background:#fff;border:1px solid #ece7fb;border-radius:10px}
.lcx-ex-spk{flex:none;border:none;background:none;padding:0;cursor:pointer;color:#b9a9e6;
            display:grid;place-items:center;width:18px;height:18px;margin-top:1px}
.lcx-ex-spk svg{width:14px;height:14px}
.lcx-ex-spk:hover,.lcx-ex-spk.on{color:#7c3aed}
.lcx-ex-main{flex:1;min-width:0}
.lcx-ex-en{font-size:12.5px;font-weight:600;color:#2f2a3d;line-height:1.4}
.lcx-ex-zh{margin-top:2px;font-size:11px;color:#8b83a6;line-height:1.4}
.lcx-ex-loop{flex:none;margin-top:1px}

.lcx-tip{margin-top:8px;font-size:10.5px;color:#9a92b0;line-height:1.4;
         padding-left:7px;border-left:2px solid #ddd3f7}

.lcx-skel{display:flex;align-items:center;gap:7px;font-size:12px;color:#8b83a6}
.lcx-skel-dot{width:7px;height:7px;border-radius:50%;background:#7c3aed;
              animation:lcx-blink 1s ease-in-out infinite}
@keyframes lcx-blink{0%,100%{opacity:.25}50%{opacity:1}}
.lcx-err{font-size:12px;color:#b4576b}

/* ======================= 隐藏聊天里的长教学内容 =======================
   只隐藏 .msg-row（头像+气泡）；同级的 .msg-learn-row（课程卡片入口）保持可见 */
.msg-row.mbx-hidden{display:none}

/* ======================= 课程卡片「对话练习」区 =======================
   原 .lc-dspk / .lc-davatar 是 emoji（靠 font-size 撑大小），换 SVG 后要显式定尺寸 */

.lc-dspk.lcx-dspk{display:inline-grid;place-items:center;width:15px;height:15px;
                  cursor:pointer;opacity:.55;color:inherit;transition:opacity .15s}
.lc-dspk.lcx-dspk svg{width:13px;height:13px}
.lc-dspk.lcx-dspk:hover,.lc-dspk.lcx-dspk.on{opacity:1}

.lc-davatar.lcx-ava{display:grid;place-items:center;color:#7c3aed}
.lc-davatar.lcx-ava svg{width:14px;height:14px}
/* 学员侧头像用紫色实底，跟 user 气泡呼应 */
.lc-dturn.user .lc-davatar.lcx-ava{background:linear-gradient(135deg,#8b7bf0,#7c3aed);color:#fff}

/* 正在朗读的那一句 */
.lc-dturn .lc-dbubble{transition:box-shadow .15s}
.lc-dturn.lcx-playing .lc-dbubble{box-shadow:0 0 0 2px #7c3aed}

/* ======================= 短语练习（替换对话练习）======================= */
.lc-sec.lcp-replaced{display:none}

.lcp-sec .lcp-audio{margin-bottom:11px}
.lcp-text{margin:0;font-size:13px;line-height:1.75;color:#2f2a3d}
.lcp-s{border-radius:4px;transition:background .15s}
/* 朗读到哪句就高亮哪句 */
.lcp-s.on{background:#e9e2fb;box-shadow:0 0 0 2px #e9e2fb}

.lcp-zh-toggle{display:block;margin:10px 0 0;padding:4px 11px;border:none;cursor:pointer;
               border-radius:99px;background:#f1ecff;color:#7c3aed;font-size:11.5px;font-weight:600}
.lcp-zh{display:none;margin:9px 0 0;font-size:12px;line-height:1.7;color:#8b83a6}
.lcp-zh.show{display:block}

.lcp-skel{display:flex;align-items:center;gap:7px;padding:14px 0;font-size:12px;color:#8b83a6}

/* ======================= 声音与情绪设置 ======================= */
.vs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.vs-item{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:12px;
         background:#f4f0ff;border:1px solid #ece7fb;cursor:pointer}
.vs-item.on{background:#ece5fb;border-color:#7c3aed}
.vs-radio{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid #c9bced;background:#fff}
.vs-item.on .vs-radio{border-color:#7c3aed;box-shadow:inset 0 0 0 3px #fff;background:#7c3aed}
.vs-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vs-name{font-size:13px;font-weight:700;color:#2f2a3d}
.vs-meta{font-size:10.5px;color:#8b83a6}
.vs-try{flex:none;border:none;background:none;padding:0;cursor:pointer;color:#b9a9e6;
        display:grid;place-items:center;width:24px;height:24px}
.vs-try svg{width:15px;height:15px}
.vs-try:hover,.vs-try.on{color:#7c3aed}

.vs-emos{display:flex;flex-wrap:wrap;gap:7px}
.vs-emo{border:1px solid #e5defc;background:#fff;color:#6d28d9;cursor:pointer;
        padding:6px 14px;border-radius:99px;font-size:12.5px;font-weight:600}
.vs-emo.on{background:#7c3aed;color:#fff;border-color:#7c3aed}
.vs-tip{margin:10px 0 0;font-size:11px;color:#9a92b0;line-height:1.5}