/* ============================================================
   css/panels/panels-vocabulary-sentence.css — 句子收录（2028-09 第 2 窗口）
   ------------------------------------------------------------
   这一页已经整份换成外文统一界面：返回头、三态、自绘输入框、目录行、按钮
   全部用公共零件（panels-learning.css / panels-ec.css / panels-ec-ui.css）。
   所以这里只剩两样这一页特有的东西：
     · 拆出来的那些词（.vs-word / .vs-word.is-new，点一下看它的意思）
     · 那个词的小抽屉的头（.vs-pop-head / .vs-pop-word；抽屉本体走 .vb-scrim/.vb-sheet）
   零 emoji；触摸目标 ≥44px；<370px 不破版；支持 prefers-reduced-motion。
   ============================================================ */

.vs-words { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.vs-word {
    min-height: var(--ec-touch); padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--ec-line-soft); background: var(--ec-surface);
    color: var(--ec-ink); font-family: var(--font-body); font-size: 14px;
    cursor: pointer;
    transition: transform var(--ec-dur-fast) var(--ec-ease), border-color var(--ec-dur) var(--ec-ease), background var(--ec-dur) var(--ec-ease);
}
.vs-word:active { transform: scale(0.95); }
.vs-word.is-new { color: var(--ec-rose-ink); border-color: rgba(201,168,168,0.38); background: var(--rose-light); }
.vs-word:hover { border-color: rgba(201,168,168,0.35); }
[data-theme-mode="dark"] .vs-word { background: var(--ec-surface-2); }

.vs-pop-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 2px 10px; border-bottom: 1px solid var(--ec-line-soft);
}
/* ★ W5（甲方 2028-09-28 第 8、9 条）——
   ① z-index：这个小抽屉现在挂到 `#app` 里（见 `ecMountOverlay`），而且**要从单词详情页上面浮出来**
      （详情页是 1700），所以它必须比详情页更高，否则点了词什么都看不到（第 9 条的真根因之一）；
   ② 铺满视口 + 自己限宽居中：`#app` 是限宽容器（桌面 480 居中），照旧只在中间那一条里画。 */
.vs-pop { z-index: 1720; max-width: 480px; margin: 0 auto; overscroll-behavior: contain; }
.vs-pop-word { font-family: var(--font-display); font-size: 22px; color: var(--ec-ink); word-break: break-word; }
.vs-pop .ec-word-zh { margin-top: 12px; }
.vs-pop .ec-word-ph { margin-top: 8px; }

/* ★ 甲方第 1 条「词卡弹出来只有字、看不清（缺卡底）」的真根因 ——
   这个泡泡由 `ecMountOverlay` 挂到 `#app` 上（比详情页更高，才能从详情页上面浮出来），
   而 `--ec-*` 那一套令牌**只定义在 `#nest-sub-vocabulary` 里面**
   （css/panels/panels-learning.css，全站唯一一份）——泡泡正好在面板之外：
     · `.vb-sheet` 的 `background: var(--ec-surface)` 失效 → **卡底没了**；
     · `border-radius: var(--ec-radius)` 失效 → 方角；
     · `box-shadow: var(--ec-shadow-3)` 失效 → 没有浮起来的层次；
     · `transition: … var(--ec-dur) var(--ec-ease)` 失效 → 开合连动画都没有。
   这里按详情页那张卡（`.vd-card`）同一档质感，给泡泡**自带一份底**：
   只在本组件自己的文件里给字面值，**不重定义任何令牌**（长期规则 #214/#226），
   深浅两套主题各自一份，和全局 `--bg-primary` 一起走。 */
.vs-pop {
    transition: opacity .18s ease;
}
.vs-pop .vb-sheet {
    background: var(--bg-primary, #F8F4EF);
    border: 1px solid var(--ec-line, rgba(180,160,140,0.22));
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 34px rgba(60,50,45,0.16);
    transition: transform .24s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
}
[data-theme-mode="dark"] .vs-pop .vb-sheet {
    background: var(--bg-primary, #241F1C);
    border-color: rgba(212,184,140,0.18);
    box-shadow: 0 -10px 34px rgba(0,0,0,0.42);
}

/* ===== TASK-WORD-10ISSUES-W2（#6）：泡泡里那几块 =====
   泡泡是全站**唯一**的点词组件（学习卡 / 阅读器 / 详情 / 句子收录都开它）。
   这一轮给它补上「当前词性」与「当前例句」，并把「上义词」摆在例句下面，能就地换。 */
.vs-pop-main { padding: 12px 2px 0; }
/* 当前这一档词性：一枚小签（不可点 —— 她就是点的这一档，换了会看不懂） */
.vs-pop-pos-row { margin-top: 10px; }
.vs-pop-pos-row .vb-pos-chip { cursor: default; }
.vs-pop-pos-row .vb-pos-chip:active { transform: none; }
/* 当前例句：她点的是句子里的这个用法，把那一句原样摆出来（左边一道细线，像引用） */
.vs-pop-ex {
    margin-top: 12px; padding: 8px 0 8px 10px;
    border-left: 2px solid var(--ec-line);
}
.vs-pop-ex-en { font-family: var(--font-display); font-size: 14px; line-height: 1.8; color: var(--ec-ink); }
.vs-pop-ex-zh { margin-top: 3px; font-size: 12px; line-height: 1.7; color: var(--ec-sub); }
/* 这个词还有别的词性：摆在例句下面，点一条就换上面的释义与例句（不关泡泡） */
.vs-pop-others { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.vs-pop-other {
    display: flex; align-items: baseline; gap: 8px; width: 100%; box-sizing: border-box;
    padding: 8px 2px; border: 0; border-top: 1px solid var(--ec-line-soft);
    background: none; text-align: left; cursor: pointer; color: var(--ec-sub);
    font-family: var(--font-body);
    transition: background var(--ec-dur) var(--ec-ease);
}
.vs-pop-other:active { background: var(--ec-tap); }
.vs-pop-other.is-on { color: var(--ec-rose-ink); }
.vs-pop-other-zh { font-size: 12.5px; line-height: 1.6; }
.vs-pop .ec-actions { margin-top: 14px; }

@media (max-width: 369px) {
    .vs-words { gap: 6px; }
    .vs-word { padding: 7px 12px; font-size: 13.5px; }
    .vs-pop-word { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .vs-word { transition: none !important; transform: none !important; }
}