/* 句译弹窗 — 统一设计语言 §4.3 落地(2026-08-30 · A-28 趟 2)
 *
 * 真相源:docs/DESIGN_LANGUAGE_2026_08_29.md §4.3;演示页对照 docs/design_demo/02-translation-popovers.html。
 * 材质与公共件(.dl-float / .dl-mat-edge / .dl-sep / .dl-menu__item / .dl-dots)来自
 * static/css/components/context-menu.css —— 该文件必须先于本文件引入。
 *
 * 本轮相对旧版的减法(全部由规范定):
 *   去标题行「句子翻译」(整句已在纸上高亮,标题是废话)、去关闭钮、去箭头、
 *   去「原文 / 译文」两个 label、去加载转圈(换 4px 三点)、去成功/失败底色块、
 *   去入场位移与过渡(§3.7 工具层动效清零)。
 */

.sentence-tooltip {
    /* 宽度由 JS 按「句子所在页的正文栏宽」逐次写内联值(§6.2:页宽 × 175/210);
       这里的 380 只是 JS 量高度之前那一帧的兜底,panel 形态下永远会被覆盖 */
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    color: var(--dl-ink);
    width: 380px;
    max-height: min(480px, 58vh);
    padding: var(--dl-pad-panel);
    z-index: var(--dl-z-sentence-tooltip);
    display: flex;
    flex-direction: column;
}

/* 原文块:次级面 + 8 圆角(§4.3);号数 14/20 = 与词弹窗同一正文型号(§6.14c) */
.dl-sentpop__src {
    padding: var(--dl-sp-8) var(--dl-sp-12);
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    color: var(--dl-ink-2);
    background: var(--dl-surface-2);
    border-radius: var(--dl-r-item-lg);
    flex: none;
}

/* 译文块:无底色;只有它内部滚动,面板不整体滚(§4.3)。
   14/22:与原文同号,行高比原文大 2 —— 汉字比拉丁字母满,行距要多一点才不闷(§6.14c) */
.dl-sentpop__tr {
    padding: var(--dl-sp-8) var(--dl-sp-12) var(--dl-sp-4);
    font-size: var(--dl-fs-body);
    line-height: 22px;
    color: var(--dl-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
}

/* === 动作行「问华生」:与词弹窗同款 ghost 钮(§3.12 / §1.8)===
 * 结构上仍是 .dl-menu__item,这里把菜单行的三件事按掉:
 * 不铺满整行、不占 16 图标槽、hover 用轻一档的 --dl-hover。
 * §1.8 起这一行带一枚 18 的迷你华生头像 —— 但它**不进菜单那个 16 图标槽**:
 * 本行已被按成 inline-flex,图标直接进 flex 行,间距由 .dl-ask-watson 的 gap 给
 * (watson-panel.css),与词弹窗同款。
 * 与 context-menu.css 的 .dl-menu__item:hover 同特异度,靠后加载胜出(引入顺序见 viewer.html)。
 */
.sentence-tooltip .dl-menu__item {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;          /* 面板是竖向 flex,不写就被拉满整行 */
    width: auto;
    height: var(--dl-row);
    margin-left: var(--dl-sp-4);     /* 4 + 内边距 8 = 文字左沿 12,与上面两块同一竖线 */
    padding: 0 var(--dl-sp-8);
    border-radius: 4px;
    color: var(--dl-ink-2);
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
}

.sentence-tooltip .dl-menu__item:hover {
    background: var(--dl-hover);
}

/* 分隔线上下各 6,与词弹窗同节奏 */
.sentence-tooltip .dl-sep {
    margin: 6px 1px;
}

/* === 紧凑视口:底部 sheet(手机 / 平板竖屏)===
 * 形制与另外两个底部浮层统一(M-A,2026-09-17):顶圆角用 --overlay-radius-sheet-top、
 * 安全区走全站统一的 --safe-area-bottom(不再直写 env())、高度带 dvh 兜底、
 * 进退场用 200ms --dl-ease-out 的 translateY —— 与解析抽屉、查词 sheet 同一套。
 * 宽度改 left/right 撑满:100vw 含滚动条宽,窄屏上会顶出横向溢出。
 */
.sentence-tooltip[data-mode="sheet"] {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: min(60vh, 420px);
    max-height: min(60dvh, 420px);
    border-radius: var(--overlay-radius-sheet-top) var(--overlay-radius-sheet-top) 0 0;
    padding-bottom: calc(var(--safe-area-bottom) + var(--dl-sp-8));
    /* 退场要看得见:不跟 .dl-float 那样靠 opacity 瞬灭,靠 translateY 滑下去。
       pointer-events 仍按 .is-open 走,退场途中点不到。 */
    opacity: 1;
    transform: translateY(100%);
    transition: transform var(--dl-t-panel) var(--dl-ease-out);
}

.sentence-tooltip[data-mode="sheet"].is-open {
    transform: translateY(0);
}

/* 手机端「问华生」整行可点（用户 2026-09-18 点名，与词弹窗同一条口径）
   ------------------------------------------------------------
   桌面这一行被按成 `inline-flex` + `align-self: flex-start` + `width: auto`，
   所以只有「问华生」那三个字宽的一小块能点中。手指比光标粗得多，逐字瞄准是
   实打实的操作负担。这里撑满整行，视觉不变（背景透明、图标与文字仍贴左），
   变的只是可点范围。`margin-left` 归零否则左侧那一截仍然点不到。
   词弹窗那一条在 components/word-tooltip.css，两处同改同口径。 */
body.reader-mobile .sentence-tooltip .dl-menu__item {
    display: flex;
    align-self: stretch;
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
}