/*
 * 华生对话面板 + 桌面伴随形象入口(D-8c2)
 *
 * 材质与几何一律引用 style.css 的 --reader-overlay-* / --overlay-* 语义 token:
 * 面板与解析面板、查词弹窗同属「阅读器工具层」,不另起一套观感。
 * 形象本体的色板/动效在 components/watson-figure.css(设计定稿 v4.2,勿在此覆盖)。
 *
 * 非模态:不锁背景、不注册 overlay-manager(那是互斥层,会把解析面板顶掉),
 * 面板与解析面板分侧共存 —— 解析面板贴题目(JS 定位),华生停靠视口右缘。
 */

/* ---------- 伴随形象入口 ---------- */

.watson-launcher {
    position: fixed;
    /* 贴边并入全家浮层同一把尺(§5.4:旧 20 废止);拖过之后由 JS 写 left/top 覆盖 */
    right: var(--dl-vp-margin, 16px);
    bottom: var(--dl-vp-margin, 16px);
    z-index: var(--z-watson-launcher);
    /* 标签与嘀咕气泡都 absolute 出流,流里只剩形象一件 —— 所以这个盒子 = 形象本身,
       写 left/top 就是在写形象的落点(原先的 flex gap 随标签出流一并作废)。 */
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    /* 入场只做淡入,不做位移:形象自身有呼吸/微动作,再叠位移会打架 */
    opacity: 1;
    transition: opacity var(--transition-normal) ease-out;
}

.watson-launcher[hidden] {
    display: none;
}

/* §5.4 几何:宽读令牌,高按 SVG viewBox 48×58 的原比例推(不写死),
   所有剧目位移以 viewBox 单位书写,换档自动等比。**不随阅读器缩放**——
   缩放的是纸,桌宠站在视口这张桌子上。 */
.watson-launcher__figure {
    display: block;
    width: var(--dl-watson-w, 88px);
    height: auto;
    aspect-ratio: 48 / 58;
    pointer-events: none;
}

/* 部件级命中(§8.6 → §14.4.3 扩到 9 类):整个形象仍然透传给根按钮,只有下面这些吃指针。
   开在 g[data-part] 上,子元素跟着继承 —— 镜片那块半透明填充也就成了可摸的面,
   不然一副线框眼镜只有 .95px 的描边可点。眼镜收在手里/挂领口时不开:那时候它不在脸上,摸不着。
   装扮没穿时对应的 g 是 display:none,不必在这里另判。
   小件(徽章、流苏、领结)各自带一枚透明 circle.part-hit 把可摸范围撑到 ≈11px。 */
.watson-launcher__figure [data-part="sprout"],
.watson-launcher__figure [data-part="hand"],
.watson-launcher__figure [data-part="phones"],
.watson-launcher__figure [data-part="hat"],
.watson-launcher__figure [data-part="tassel"],
.watson-launcher__figure [data-part="scarf"],
.watson-launcher__figure [data-part="knot"],
.watson-launcher__figure [data-part="body"],
.watson-launcher__figure [data-part="bag"],
.watson-launcher__figure .g-on [data-part="specs"] {
    pointer-events: all;
}

/* 拖拽中:光标换手形,并停掉入场淡入过渡免得跟指针抢位置。
   `will-change` 只在这个类上给,不常驻——常驻等于让浏览器一直替一个静止的元素留着合成层。 */
.watson-launcher.is-dragging {
    transition: none;
    will-change: transform;
    cursor: grabbing;
}

/* 形象子树里有头发/呼吸两条无限动画,拖动时把它们的重绘圈在这个盒子里,
   不要每帧连累整页。只在拖动期间加:形象自己的退场/回场剧目会移出这个盒子,
   常驻 `contain: paint` 会把它们裁掉(.figure 是特意写着 overflow: visible 的)。 */
.watson-launcher.is-dragging .watson-launcher__figure {
    contain: layout paint;
}

/* 拖动期间的光标罩:一张透明全屏板,整页光标由它一个元素说了算(N-09)。
   原先是 `body.watson-dragging *` 逐元素 `cursor: grabbing !important`,
   起拖那一刻整篇文档要重算一遍样式,阅读器上就是按下去卡一下的那个尖峰。
   指针事件在 setPointerCapture 手里,罩子不参与拖动判定。 */
.watson-drag-shield {
    position: fixed;
    inset: 0;
    z-index: var(--z-global-overlay, 9999);
    background: transparent;
    cursor: grabbing;
}

/* 悬停标签:150ms(D-020 动效定标,原样迁移)
 *
 * 出流 + 按停靠边翻面(U80 的剩余部分):
 * ① 这一枚是标签本体(全入口只有这一份),常态 opacity:0、悬停/聚焦才显形。留在 flex 流里
 *    它就恒占约 80px 的布局宽,桌宠贴左边缘时 root 的左边界被推出视口,标签跟着半截出屏。
 *    absolute 出流之后 root 的盒子 = 形象本身:`_placeFigureAt` 量到的水平偏移恒为 0,
 *    嘀咕气泡那条「锚形象中线」的 right 偏移(watson-figure.css .watson-mutter)也名副其实。
 * ② 翻面由 JS 落位时写 data-label-side:贴左侧停靠 → 标签挂形象右边,其余 → 仍在左边。
 *    两侧都留 --overlay-gap-tight 的空当,与原先 flex gap 同值,观感不变。
 * ③ 出流不丢信息:同一个节点、同一段文字、同一条显隐规则,只是不再占布局;
 *    顺带去掉了形象旁边那条隐形却可点的 80px 命中带。
 */
.watson-launcher__label {
    position: absolute;
    top: 50%;
    right: calc(100% + var(--overlay-gap-tight));
    transform: translateY(-50%);
    padding: 4px 9px;
    border-radius: var(--overlay-radius-button);
    background: var(--reader-overlay-surface);
    box-shadow: var(--reader-overlay-shadow-soft), var(--reader-overlay-edge);
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 150ms ease-out;
}

/* 贴屏幕左侧停靠时标签翻到形象右边(JS 落位时写这个属性),否则它会被挤出视口 */
.watson-launcher[data-label-side="right"] .watson-launcher__label {
    right: auto;
    left: calc(100% + var(--overlay-gap-tight));
}

@media (hover: hover) {
    .watson-launcher:hover .watson-launcher__label,
    .watson-launcher:focus-visible .watson-launcher__label {
        opacity: 1;
    }
}

/* 触摸设备上的一次性提示(§14.12 / D-203):没有悬停,标签永远显不出来,
   而手机是获客第一入口 —— 本次页面加载首次挂上华生后显示 4 秒再淡出;
   打开过一次面板的用户此后永远安静(JS 记 watson:panel-opened)。
   淡出这一段的 200ms 只在触摸态生效,桌面悬停仍是 150ms(上面那条不动)。 */
@media (hover: none) {
    .watson-launcher[data-hint="1"] .watson-launcher__label {
        opacity: 1;
        transition-duration: 200ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .watson-launcher__label {
        transition: none;
    }
}

.watson-launcher:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
    border-radius: var(--overlay-radius-button);
}

/* ---------- 面板本体 ---------- */

/* ---------- 对话面板共享基类 .dl-chat-panel(3-H 抽出) ----------
 *
 * 华生面板与意见反馈面板是同一种窗口:同一张表面、同一条 44 头部、同一只输入胶囊。
 * 通用规则一律写成两个类名的并列选择器 —— 华生这边一个声明、一个先后都没动,
 * 反馈面板挂上 .dl-chat-panel 就拿到同一套观感;两边各自的差异留在各自的类里。
 * 反馈面板自己的部件(附件行、截图钮、入口菜单)在 components/feedback-panel.css。
 */

.dl-chat-panel,
.watson-panel {
    position: fixed;
    z-index: var(--z-watson-panel);
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    /* 舒适材质面板走 16（设计语言 §3.5）：弹窗与菜单才是 12 */
    border-radius: var(--dl-r-panel);
    background: var(--dl-surface);
    /* 全站浮层同一种边缘(P-05):弃用 --reader-overlay-shadow/-edge 那一套 */
    box-shadow: var(--dl-sh-menu);
    overflow: hidden;
    /* 出入场只有两种手势(§6.1 D):停靠态朝桌宠缩放,自由态原地淡入上移 */
    opacity: 0;
    transition: opacity var(--dl-t-panel) var(--dl-ease-out),
                transform var(--dl-t-panel) var(--dl-ease-out);
}

/* 位置与尺寸一律由 JS 写(W-04:可拖、可调、逐用户记忆);这里只给首帧兜底 */
.watson-panel {
    right: var(--dl-vp-margin, 16px);
    bottom: calc(var(--dl-vp-margin, 16px) + var(--dl-watson-w, 88px) * 58 / 48 + var(--dl-gap-anchor, 8px));
    width: 440px;
    height: min(680px, calc(100vh - 96px));
}

.dl-chat-panel[data-anim="dock"],
.watson-panel[data-anim="dock"] {
    transform: scale(.2);
}

.dl-chat-panel[data-anim="free"],
.watson-panel[data-anim="free"] {
    transform: translateY(var(--dl-shift-panel, 8px));
}

.dl-chat-panel[hidden],
.watson-panel[hidden] {
    display: none;
}

.dl-chat-panel.is-open,
.watson-panel.is-open {
    opacity: 1;
    transform: none;
}

/* 收起比展开快一档:退场不需要被看清 */
.dl-chat-panel.is-closing,
.watson-panel.is-closing {
    transition-duration: 160ms;
}

/* 华生面板的开合定值(§3.23 D):开 180 / 关 120,只改这一块面板,不动全局 --dl-t-panel。
 * 停靠态的起点从 scale(.2) 改成 .92——从很小长到原大要走一段长距离,那段距离就是等待感;
 * .92 只是「刚落下」的一点余量。关只淡出、不位移:退场时位移只会让人多看一眼要走的东西。 */
.watson-panel {
    transition-duration: 180ms;
}

.watson-panel[data-anim="dock"] {
    transform: scale(.92);
}

/* 上面那条只是**入场的起点**，开着的时候必须让位给 `.is-open` 的 transform:none。
 * 两者原本特异性都是 (0,2,0)，而起点写在 `.is-open` 后面——后写的赢，于是停靠态的面板
 * 一直挂着 scale(.92)：440 宽的窗口在屏幕上恒定量出 404.8，里面每个定值都缩了 8%。
 * 这里把开态单独提到 (0,3,0) 压住它。收起态不必管：`.is-closing` 写在起点之后，本就赢。 */
.watson-panel[data-anim="dock"].is-open,
.watson-panel[data-anim="free"].is-open {
    transform: none;
}

.watson-panel.is-closing {
    transition-duration: 120ms;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .watson-panel,
    .watson-panel.is-closing {
        transition-duration: 1ms;
    }
}

/* 拖动/缩放中:一切位置过渡关掉,否则过渡会和指针抢位置 */
.dl-chat-panel.is-dragging,
.dl-chat-panel.is-resizing,
.watson-panel.is-dragging,
.watson-panel.is-resizing {
    transition: none !important;
    user-select: none;
}

/* ---------- 缩放手柄看得见（八方向，2026-09-16） ----------
 *
 * 手柄的几何、热区、指针形状在 utils/drag-resize.js 里 —— 那是通用底座、不带任何样式。
 * 这一节只给**华生面板**加提示：别的面板挂同一个底座，不该跟着长出角标。
 *
 * 为什么要提示:透明条唯一的线索是指针变形,得先把指针挪过去才知道它在那儿,
 * 于是「窗口能调大小」这件事一直没被发现(用户 2026-09-16)。
 */

/* 右下角常驻角标:两条极短斜线,与 textarea 原生 resize 角同一套视觉语言。
   常态很淡(在那儿,但不喊);指针进面板才提一档。
   11x11 的格子从角内缩 4px 起算 —— 面板圆角 16,再往外画就被圆角裁掉半截。 */
.watson-panel .dr-resize-handle[data-dr-edge="se"]::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 11px;
    height: 11px;
    color: var(--dl-ink-3);
    opacity: .45;
    background-image: linear-gradient(135deg,
        transparent 0 47%, currentColor 47% 53%,
        transparent 53% 74%, currentColor 74% 80%, transparent 80%);
    transition: opacity var(--dl-t-state) ease-out;
}

/* 四条边:指针停在哪条边上,哪条边浮出一条 2px 细线,离开即隐。
   线只长在直边段上(手柄本身就从 16px 起算 = 圆角结束处),不会被圆角切出断头。
   颜色与角标同一个 token:「这里能拉」全程一个颜色。 */
.watson-panel .dr-resize-handle::before {
    content: "";
    position: absolute;
    background: var(--dl-ink-3);
    opacity: 0;
    transition: opacity var(--dl-t-state) ease-out;
}

.watson-panel .dr-resize-handle[data-dr-edge="n"]::before { top: 0; left: 0; right: 0; height: 2px; }
.watson-panel .dr-resize-handle[data-dr-edge="s"]::before { bottom: 0; left: 0; right: 0; height: 2px; }
.watson-panel .dr-resize-handle[data-dr-edge="w"]::before { left: 0; top: 0; bottom: 0; width: 2px; }
.watson-panel .dr-resize-handle[data-dr-edge="e"]::before { right: 0; top: 0; bottom: 0; width: 2px; }

@media (hover: hover) {
    .watson-panel:hover .dr-resize-handle[data-dr-edge="se"]::after { opacity: .8; }
    /* 提示线比面板自己那条 1px 边框(灰度 208)深一档就够:够得着的线索,不是一条新的分隔线。
       满色(opacity 1)量出来是灰度 151 —— 粗一倍又深两倍多,盖过了边框自己。压到 .7 落在 182。 */
    .watson-panel .dr-resize-handle:hover::before { opacity: .7; }
}

/* 头部四枚按钮抬到手柄上方。顶边与两个上角的手柄是后插入的定位元素,默认盖在头部之上
   (这正是「上沿一按是拉高度而不是移动窗口」的来源);不抬的话右上角关闭钮的右上
   8x8 会变成缩放热区,点下去窗口不关、反而解除停靠。 */
.watson-panel__header .watson-panel__action,
.watson-panel__header .watson-panel__sub {
    position: relative;
    z-index: 3;
}

/* ---------- 头部 ---------- */

.dl-chat-panel__header,
.watson-panel__header {
    display: flex;
    align-items: center;
    gap: var(--overlay-gap-tight);
    flex: none;
    height: 44px;
    padding: 0 8px 0 12px;
    border-bottom: 1px solid var(--dl-line);
    /* 整条头部就是窗口的抓手(按钮除外) */
    cursor: grab;
    touch-action: none;
}

.dl-chat-panel.is-dragging .dl-chat-panel__header,
.watson-panel.is-dragging .watson-panel__header {
    cursor: grabbing;
}

.dl-chat-panel__title,
.watson-panel__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--dl-ink);
    font-size: var(--dl-fs-body);
    font-weight: 600;
    line-height: var(--dl-lh-body);
}

/* 思考态只有一颗点,不写字:状态归状态,正文归正文。
   回复位置那枚等待指示器已换成迷你华生(§14.5),这条脉冲只剩标题栏这一个消费点。 */
@keyframes watson-think {
    0%, 100% { opacity: 0.28; }
    45% { opacity: 0.85; }
}

.watson-panel__pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dl-ink);
    animation: watson-think 1.6s ease-in-out infinite;
}

.watson-panel__pulse[hidden] {
    display: none;
}

/* 「华生」这两个字不参与收缩:它是应用名,长度是定的,该让位的是话题名不是它。
   (改名钮从 flex:1 换成 flex:0 1 auto 之后,超长话题名会把整行撑出头部,
   收缩就按基准宽摊到每个可缩的子项上——实测 30 字的话题名把标题从 28px 压到 21px,
   「华生」当场折成上下两行。三枚动作钮早就是 flex:none,标题同理。) */
.watson-panel__title {
    flex: none;
}

/* 副名与锚点:恒显「Watson」,挂着题时接成「Watson · 第 23 题」。
   它只说「我现在在问哪」——用户还没发出去、正准备问的那个上下文;
   「AI 在讲哪」由每条回答自己上方那行 .watson-turn__source 承担(一次对话可以跨卷)。 */
/* 自 §8 R3 起这一格是**话题标题**,点一下就地改名(所以它是 <button> 而不是 <span>):
   按钮的默认边框与底色全部去掉——它读起来必须还是一行小字,不是一枚控件。
   可点的暗示只在悬停时给一层浅底,与头部另外几枚动作钮同一套(--dl-hover)。 */
.watson-panel__sub {
    /* 只占话题名自己那几个字宽(能缩、不能长)。原来是 flex:1,一路铺到「新话题」钮跟前:
       鼠标停在面板右侧空白就落在这枚钮上,一点就进了改名态(用户 2026-09-16「不能占据太多横屏」)。 */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 2px 6px;
    margin-left: -6px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--dl-ink-3);
    font-family: inherit;
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-lh-caption);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dl-t-state) ease-out;
}

/* 没有话题可改名时(还没建行)按钮是 disabled:不给悬停底、也不给手型 */
.watson-panel__sub:disabled {
    cursor: default;
}

@media (hover: hover) {
    .watson-panel__sub:not(:disabled):hover {
        background: var(--dl-hover);
        color: var(--dl-ink-2);
    }
}

.watson-panel__sub:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

.watson-panel__sub[hidden] {
    display: none;
}

/* 话题名右边剩下的那片空白还给「搬窗口」:三枚动作钮由一条 auto 外边距推到右头,
   空白于是长在外边距里 —— 外边距不是子元素,落在头部身上,按住就能拖。
   改名态不走这条:那时 sub 与动作钮之间插着 .watson-panel__rename(它自己 flex:1 占满),
   相邻选择器自然不命中,输入框照样有整行可写。 */
.watson-panel__sub + .watson-panel__action {
    margin-left: auto;
}

/* 改名态:标题原地换成输入框,占同一格、同一号字。描边只有一圈 ring,
   与输入胶囊聚焦时那一圈同一个做法——面板里不该出现第二种「正在输入」的长相。 */
.watson-panel__rename {
    flex: 1;
    min-width: 0;
    padding: 2px 6px;
    margin-left: -6px;
    border: none;
    border-radius: 4px;
    background: var(--dl-surface);
    box-shadow: 0 0 0 1px rgba(11, 18, 32, .20);
    color: var(--dl-ink);
    font-family: inherit;
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-lh-caption);
}

.watson-panel__rename:focus,
.watson-panel__rename:focus-visible {
    outline: none;
}

.dl-chat-panel__action,
.watson-panel__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--dl-ctl-sm);
    height: var(--dl-ctl-sm);
    padding: 0;
    /* 圆角同心(§3.17):面板 16、头部内距 12 → 钮 4。同心才看不出「圆角套圆角」的错位 */
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--dl-ink-2);
    cursor: pointer;
    transition: background-color var(--dl-t-state) ease-out;
}

.dl-chat-panel__action svg,
.watson-panel__action svg {
    width: 16px;
    height: 16px;
}

/* 「历史」那枚图标按 16 的 viewBox 画,1:1 显示;邻居(新话题/关闭)是 24 缩到 16,
   1.5 的描边落屏正好 1px。这枚不减到 1 就会比左右两枚粗一半。 */
.watson-panel__action .dl-ico--16 {
    stroke-width: 1;
}

@media (hover: hover) {
    .dl-chat-panel__action:hover,
    .watson-panel__action:hover {
        background: var(--dl-hover);
        color: var(--dl-ink);
    }
}

.watson-panel__action.is-active {
    background: var(--dl-hover);
    color: var(--dl-ink);
}

.dl-chat-panel__action:focus-visible,
.watson-panel__action:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

/* 历史视图的返回行:一条明摆着的回头路,不做成按钮块 */
.watson-panel__back {
    flex: none;
    align-self: flex-start;
    margin-bottom: var(--overlay-gap-normal);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--dl-ink-2);
    font-family: inherit;
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-lh-caption);
    cursor: pointer;
}

@media (hover: hover) {
    .watson-panel__back:hover {
        color: var(--dl-ink);
    }
}

/* R1 那一行「从「X」发起」:这段对话怎么起头的。
   与匿名剩余轮次那行同一个位置语义(表头之下、正文之上)、同一号字与同一档灰,
   所以内距照抄 .watson-panel__quota——两行小字挤在一起时左缘必须对齐。
   一行装不下就截断:它是背景交代,不值得占两行。 */
.watson-panel__origin {
    flex: none;
    margin: 0;
    padding: var(--overlay-gap-normal) var(--overlay-pad-comfortable) 0;
    overflow: hidden;
    color: var(--dl-ink-3);
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-lh-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watson-panel__origin[hidden] {
    display: none;
}

/* ---------- 正文区 ---------- */

.dl-chat-panel__body,
.watson-panel__body {
    flex: 1;
    min-height: 0;
    /* 列布局是给空态用的:空态那句话 margin:auto 0 垂直居中,
       不然 560px 的箱子顶着一行灰字、底下 370px 空白,第一眼像没加载完 */
    display: flex;
    flex-direction: column;
    padding: var(--overlay-pad-comfortable);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 华生可调大小,右侧让出 8px 给缩放手柄:滚动条紧贴面板右缘的话,拖滚动条会变成拖着改窗口大小。
   内衬相应减 8,内容左右仍是同一条 14 的边距。反馈面板不可调大小,没这一笔。 */
.watson-panel__body {
    margin-right: 8px;
    padding-right: 6px;
    /* 阅读器整个 body 禁选(style.css `body.pdf-view-body`),线程区得自己要回来:
       华生说的话本来就是拿来抄走的(N-24)。 */
    user-select: text;
}

/* 拖着头部横扫过线程区时别顺手把字选中——拖窗口和划字是两件事 */
.watson-panel.is-dragging .watson-panel__body {
    user-select: none;
}

.watson-panel__empty {
    margin: auto 0;
    color: var(--color-text-lighter);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    text-align: center;
}

.dl-chat-panel__turn + .dl-chat-panel__turn,
.watson-turn + .watson-turn {
    margin-top: var(--overlay-gap-section);
}

/* 用户提问:右置灰底气泡,华生回答无气泡全宽 —— 两边形态不同,一眼分得清谁在说话 */
.dl-chat-panel__ask,
.watson-turn__ask {
    max-width: 85%;
    margin-left: auto;
    width: fit-content;
    padding: 8px 12px;
    border-radius: var(--dl-r-bubble);
    background: var(--dl-surface-2);
    color: var(--dl-ink);
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 排队中的提问(A3):上一句还在说的时候又问的那一句。形态与已发出的一样(同一只气泡)——
   它迟早要变成一条正常的提问,形态换来换去会让人以为那是另一种东西。
   差别只有两处:字色退一档 + 底下一行小字说清它在等,并给一条退路。 */
.watson-turn.is-queued .watson-turn__ask {
    color: var(--dl-ink-2);
}

.watson-turn__queued {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
    color: var(--color-text-lighter);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

/* 「撤回」「重发」:文字链,不做成按钮块 —— 与卷次小字那条链子同一套分寸 */
.watson-turn__queued-action {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-underline-offset: 2px;
}

@media (hover: hover) {
    .watson-turn__queued-action:hover {
        color: var(--dl-ink-2);
        text-decoration: underline;
    }
}

.watson-turn__queued-action:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
    border-radius: var(--border-radius-sm);
}

/* 回答上方那行卷次小字:「2022 英语一 · 第 3 题」。
   它同时是「去看这题」的入口 —— 挂在本来就要显示的字上,不另加按钮。
   分寸:比正文轻一号(xs)、次级文字色,不给背景、不做药丸、不做按钮形。 */
.watson-turn__source {
    margin-top: 12px;
    color: var(--color-text-lighter);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    word-break: break-word;
}

/* 可点暗示只在悬停时出现,且只有一条下划线:静息态与不可点的那行一模一样,
   免得每条回答顶上都挂着一个在喊「点我」的东西。 */
.watson-turn__source-link {
    cursor: pointer;
    text-underline-offset: 2px;
}

@media (hover: hover) {
    .watson-turn__source-link:hover {
        color: var(--color-text-light);
        text-decoration: underline;
    }
}

.watson-turn__source-link:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
    border-radius: var(--border-radius-sm);
}

/* 卷别是猜出来的时候的轻声括注 */
.watson-turn__source-note {
    color: var(--color-text-faint);
}

/* 回答正文（W-07 输出层次）。
   一段回答里有三种东西:结论、要点、旁证。它们靠字重与留白分开,不靠缩进和竖线——
   竖线把整段推成一个「引用块」,读起来像华生在念别人的话,而不是在回答你。 */
.dl-chat-panel__reply,
.watson-turn__reply {
    margin-top: 12px;
    color: var(--dl-ink);
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    word-break: break-word;
}

/* 有卷次小字时,回答紧跟其后:两者是一件事,不该被一整个段间距劈开 */
.watson-turn__source + .watson-turn__reply {
    margin-top: 2px;
}

/* 逐字输出时正文末尾的光标(§3.23 A.6):1px 竖线,只在写的过程中在。
 * 挂在最后一个块级子元素上而不是容器上——挂容器会让它掉到下一行去,
 * 那看起来是「另起一行的一个点」,不是「笔停在这里」。 */
.watson-turn__reply.is-streaming > :last-child::after,
.watson-turn__reply.is-streaming:empty::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -.15em;
    background: var(--dl-ink-2);
    animation: watson-caret-blink 1s steps(1, end) infinite;
}

@keyframes watson-caret-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .watson-turn__reply.is-streaming > :last-child::after,
    .watson-turn__reply.is-streaming:empty::after {
        animation: none;
        opacity: 1;
    }
}

/* 华生引用原文时写的 『…』:点它 = 在试卷上标出这句。
   暗示只有底部一条虚线 —— 不变色、不加图标,读起来仍然是原文本身。
   只在「原文就在眼前」时才挂(见 watson-panel._setReply),别处保持纯文字。 */
.watson-quote {
    border-bottom: 1px dotted color-mix(in srgb, var(--color-text) 32%, transparent);
    cursor: pointer;
}

.watson-quote:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
    border-radius: var(--border-radius-sm);
}

/* 复制(N-24):落在每条回答右下角。静息时不画出来——每条回答底下常挂一枚按钮,
   一列灰字就变成了一列按钮;鼠标进到这一轮才浮出来,键盘聚焦时同样出现。
   没有悬停能力的设备上恒显:那里没有「浮出来」这回事,藏了就等于没有。 */
.watson-turn__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

.watson-copy {
    padding: 2px 6px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--dl-ink-3);
    font-family: inherit;
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-lh-caption);
    cursor: pointer;
    transition: opacity var(--dl-t-state) ease-out,
                background-color var(--dl-t-state) ease-out;
}

@media (hover: hover) {
    .watson-copy {
        opacity: 0;
    }

    .watson-turn:hover .watson-copy {
        opacity: 1;
    }

    .watson-copy:hover {
        background: var(--dl-hover);
        color: var(--dl-ink-2);
    }
}

.watson-copy:focus-visible {
    opacity: 1;
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

/* 还有更早的对话时,列表顶上一行静态说明。**不做翻页按钮**:那又是一个入口。 */
.watson-panel__more {
    flex: none;
    margin: 0 0 var(--overlay-gap-section);
    color: var(--color-text-faint);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    text-align: center;
}

/* R4 时间分隔:话题里两条消息隔了 30 分钟以上,中间横一道线,线上坐一枚「3 天前」。
   一条细线一枚小字,不给底、不做药丸——它是尺子上的刻度,不是可点的东西。
   上下留 section 的量:线两边各是一段对话,靠得太近就读成同一段了。 */
.watson-gap {
    display: flex;
    align-items: center;
    gap: var(--overlay-gap-normal);
    flex: none;
    margin: var(--overlay-gap-section) 0;
    color: var(--dl-ink-3);
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-lh-caption);
}

.watson-gap::before,
.watson-gap::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dl-line);
}

.watson-gap__label {
    flex: none;
    white-space: nowrap;
}

/* R3 历史列表:一行一条话题,标题在上、相对时间与卷名在下。
   没有删除、没有归档(功能克制,D-143),所以整行就是一枚按钮,点哪儿都是打开。 */
.watson-threads {
    display: flex;
    flex-direction: column;
    flex: none;
}

.watson-thread {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--overlay-gap-normal) var(--overlay-gap-normal)
             var(--overlay-gap-normal) var(--overlay-gap-tight);
    margin: 0 calc(var(--overlay-gap-tight) * -1);
    border: none;
    border-radius: var(--overlay-radius-button);
    background: transparent;
    color: var(--dl-ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--dl-t-state) ease-out;
}

@media (hover: hover) {
    .watson-thread:hover {
        background: var(--dl-hover);
    }
}

.watson-thread:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

/* 正开着的那条:只加一层浅底,不换颜色不加勾——「你在这儿」不需要第二种语义色 */
.watson-thread.is-current {
    background: var(--dl-surface-2);
}

.watson-thread__title {
    overflow: hidden;
    color: var(--dl-ink);
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watson-thread__meta {
    color: var(--dl-ink-3);
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-lh-caption);
}

.dl-chat-panel__turn,
.watson-turn {
    flex: none;
}

.watson-turn__reply > :first-child {
    margin-top: 0;
}

.watson-turn__reply > :last-child {
    margin-bottom: 0;
}

.watson-turn__reply p {
    margin: 0 0 8px;
}

/* 第一段是结论行:学生扫一眼就该拿到答案,不用先读完再自己总结 */
.watson-turn__reply > p:first-child {
    font-weight: 500;
    color: var(--dl-ink);
}

/* 小标题降成一行标签:12px 弱墨,只用来分段,不跟正文抢重量 */
.watson-turn__reply h3,
.watson-turn__reply h4 {
    margin: 12px 0 4px;
    color: var(--dl-ink-3);
    font-size: var(--dl-fs-caption);
    font-weight: 500;
    line-height: var(--dl-lh-caption);
    letter-spacing: .02em;
}

.watson-turn__reply ul,
.watson-turn__reply ol {
    margin: 4px 0 8px;
    padding-left: 16px;
}

.watson-turn__reply li {
    margin: 2px 0;
}

.watson-turn__reply blockquote {
    margin: 4px 0 8px;
    padding-left: 10px;
    border-left: 2px solid color-mix(in srgb, var(--dl-ink) 20%, transparent);
    color: var(--dl-ink-2);
}

.watson-turn__reply table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.watson-turn__reply th,
.watson-turn__reply td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--dl-line);
    text-align: left;
    vertical-align: top;
}

.watson-turn__reply th {
    font-weight: 500;
}

.watson-turn__reply code {
    padding: 0 4px;
    border-radius: 4px;
    background: var(--dl-surface-2);
    font-size: 0.92em;
}

.watson-turn__reply pre {
    max-height: 240px;
    margin: 4px 0 8px;
    padding: 8px;
    border-radius: 8px;
    background: var(--dl-surface-2);
    overflow: auto;
}

.watson-turn__reply pre code {
    padding: 0;
    background: transparent;
}

.watson-turn__reply hr {
    margin: 12px 0;
    border: none;
    border-top: 1px solid var(--dl-line);
}

.watson-turn__error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* 状态说明（如「还没解锁」）：与出错分开的一条路。淡红在这套界面里恒等于「出错了」，
   而这类提示说的是「功能好好的，只是你还没到那一层」，用配额提示同款的中性正文色。 */
.watson-turn__notice {
    color: var(--dl-ink-3);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* 登录按钮(匿名额度用满 / 服务端给了 login 动作)。做成文字链一样的轻按钮:
   它是一条出路,不是这一轮回答的主角,不该比华生说的话更显眼。 */
.watson-turn__actions {
    display: flex;
    gap: var(--overlay-gap-normal);
    margin-top: var(--overlay-gap-normal);
}

.watson-turn__action {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: none;
    border-radius: var(--overlay-radius-button);
    background: var(--dl-surface);
    box-shadow: inset 0 0 0 1px var(--btn-secondary-ring);
    color: var(--dl-ink);
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    text-decoration: none;
    cursor: pointer;
}

.watson-turn__action:hover {
    background: var(--dl-hover);
}

/* 匿名剩余轮次(仅剩 ≤3 轮时出现)。落在线程顶部一行小字,前面十几轮一点计数痕迹都不留。 */
.watson-panel__quota {
    flex: none;
    margin: 0;
    padding: var(--overlay-gap-normal) var(--overlay-pad-comfortable) 0;
    color: var(--dl-ink-3);
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-lh-caption);
}

.watson-panel__quota[hidden] {
    display: none;
}

/* 思考态(§14.5 / D-198):三点脉冲已退役,换成缓缓跳动的迷你华生 —— 部件与动效在
   components/thinking-indicator.js / .css,这里只管它落在气泡位置上的排布与取色。 */
.watson-panel .dl-thinking,
.feedback-panel .dl-thinking {
    margin-top: var(--overlay-gap-normal);
    color: var(--dl-ink-2);
}

/* 刚揭示的那几个字：80ms 淡入，写出来的边缘是软的 */
.watson-turn__fresh {
    animation: watson-fresh 80ms linear;
}

@keyframes watson-fresh {
    from { opacity: 0.2; }
    to { opacity: 1; }
}

/* ---------- 输入区 ---------- */

.dl-chat-panel__composer[hidden],
.watson-panel__composer[hidden] {
    display: none;
}

.dl-chat-panel__composer,
.watson-panel__composer {
    flex: none;
    padding: 8px var(--overlay-pad-comfortable) var(--overlay-pad-comfortable);
}

/* 输入胶囊:圆角 28、最小高 52,描边走 --dl-sh-1 的 ring(不用 border,不占布局盒);
   聚焦只把 ring 加深,**不上蓝**(W-08 反转 D-123) */
.dl-chat-panel__capsule,
.watson-composer {
    display: flex;
    align-items: flex-end;
    gap: var(--overlay-gap-normal);
    min-height: var(--dl-composer-h);
    padding: 10px 10px 10px 16px;
    border-radius: var(--dl-r-composer);
    background: var(--dl-surface);
    box-shadow: var(--dl-sh-1);
    transition: box-shadow var(--dl-t-state) ease-out;
}

.dl-chat-panel__capsule:focus-within,
.watson-composer:focus-within {
    box-shadow: 0 0 0 1px rgba(11, 18, 32, .20);
}

/* 单行态里占位与文字必须在胶囊正中（用户 2026-09-06 08:58），两块面板同一套数：
 *   胶囊内容盒 = 52 − 上下内距 20 = 32；输入框 min-height 也是 32，于是 `align-items:flex-end`
 *   在单行态没有余量可让，框与胶囊上下同心；框内 6 + 行高 20 + 6 = 32，字也正好在框正中。
 *   （原来是内距 5、无 min-height：框高 30 落在 32 的内容盒底部，字比中线低 2px。）
 * 上限 = 6 行：20 × 6 + 上下内距 12 = 132（原 152 其实是 7 行）。华生那支的 JS
 * `INPUT_MAX_H` 同值；反馈面板的 JS 仍按 152 写内联高度，由这里的 max-height 夹到 132，
 * 效果一样是「长到 6 行就不再长」。 */
.dl-chat-panel__input,
.watson-panel__input {
    flex: 1;
    min-width: 0;
    min-height: 32px;
    max-height: 132px;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: var(--dl-ink);
    font-family: inherit;
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    resize: none;
    overflow-y: auto;
}

/* 华生这一支再多一条：没到 6 行时**不出滚动条**。
 * 页面带缩放时 scrollHeight 会向下取整，差那不到 1px 就让一根竖线常驻在框里，
 * 而那时根本没有可滚的内容。到顶之后由 `_syncComposer` 把 inline 的 `overflow-y` 改回 auto。
 * 反馈面板的自动增高在 `feedback-panel.js` 的 `_syncComposer` 里，同样自己写 inline
 * `overflow-y`，所以这条只落在华生这一支上。 */
.watson-panel__input {
    overflow-y: hidden;
}

.dl-chat-panel__input:focus,
.dl-chat-panel__input:focus-visible,
.watson-panel__input:focus,
.watson-panel__input:focus-visible {
    outline: none;
}

.dl-chat-panel__tools,
.watson-composer__tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

/* 深度思考:贴着送出钮的小胶囊,不单独占一行。
   关 = 只有一行弱墨字;开 = 淡灰面 + 满墨字。整条链子上没有第二种颜色。 */
.watson-panel__deep {
    flex: none;
    height: var(--dl-ctl-sm);
    padding: 0 10px;
    border: none;
    border-radius: var(--dl-r-pill);
    background: transparent;
    color: var(--dl-ink-3);
    font-family: inherit;
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-ctl-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dl-t-state) ease-out,
                background-color var(--dl-t-state) ease-out;
}

@media (hover: hover) {
    .watson-panel__deep:hover {
        background: var(--dl-hover);
        color: var(--dl-ink-2);
    }
}

.watson-panel__deep.is-active {
    background: var(--dl-hover);
    color: var(--dl-ink);
}

.watson-panel__deep:focus-visible,
.dl-chat-panel__send:focus-visible,
.watson-panel__send:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

/* 送出钮 = 站内主按钮的同一把令牌(墨底白字),不是第三种蓝 */
.dl-chat-panel__send,
.watson-panel__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--dl-ctl-sm);
    height: var(--dl-ctl-sm);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    cursor: pointer;
    transition: background-color var(--dl-t-state) ease-out,
                opacity var(--dl-t-state) ease-out;
}

.dl-chat-panel__send svg,
.watson-panel__send svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.dl-chat-panel__send:disabled,
.watson-panel__send:disabled {
    opacity: var(--dl-send-disabled-op);
    cursor: default;
}

/* 华生还在说的时候点它 = 排队(A3)。钮不再禁用,只轻一档:按下去有效,
   但不会立刻有回答。不换图标、不改成停止钮 —— 那是另一件事。 */
.watson-panel__send.is-queueing:not(:disabled) {
    opacity: var(--dl-send-queueing-op);
}

@media (hover: hover) {
    .dl-chat-panel__send:not(:disabled):hover,
    .watson-panel__send:not(:disabled):hover {
        background: var(--btn-primary-bg-hover);
    }
}

/* ---------- 华生跳句高亮(W-06) ----------
 *
 * 点华生话里的『引文』→ 在试卷上标出这一句。样式挂在这里而不是 style.css:
 * 它是华生这条链子的一环,与解析面板的证据高亮(暖金、常驻、带返回浮标)是两件事。
 *
 * 颜色改用整句翻译那一档蓝(--dl-tint-sentence):全站凡是「就是这一句」都一个颜色。
 * 2.4 秒后自己淡掉——华生指的是「看这一句」,看完就该消失。
 */
.evidence-highlight[data-source="watson"] {
    background-color: var(--dl-tint-sentence);
}

.evidence-highlight[data-source="watson"].is-attention {
    background-color: rgba(49, 130, 206, .30);
}

html.theme-dark .evidence-highlight[data-source="watson"].is-attention {
    background-color: rgba(96, 165, 250, .38);
}

/* 到时淡出。写成三类叠加是为了压过 .evidence-highlight.is-visible 的 opacity:1 */
.evidence-highlight.is-visible.is-fading {
    opacity: 0;
    transition: opacity 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .evidence-highlight.is-visible.is-fading {
        transition: none;
    }
}

/* ---------- 主题(阅读器判例:深色浮层底 #18181B,不取令牌表的石板蓝) ----------
 *
 * 与 context-menu.css 的 `.dl-float` 覆写同一条判例:阅读器深色下周边一切都是中性灰黑,
 * 浮层独自带蓝会让同屏出现两种「黑」。华生面板不是 .dl-float(它有自己的出入场),
 * 所以在这里把同一组值再挂一遍。⋯ 菜单本身是 .dl-float,已被那边覆盖。
 */
html.theme-dark .dl-chat-panel,
html.theme-dark .watson-panel,
html.theme-eye-care .dl-chat-panel,
html.theme-eye-care .watson-panel {
    --dl-ink: var(--theme-text);
    --dl-ink-2: var(--theme-text-secondary);
}

html.theme-dark .dl-chat-panel,
html.theme-dark .watson-panel {
    --dl-surface: #18181B;
    --dl-surface-2: #0F0F11;
    --dl-focus-ring: 0 0 0 2px #18181B, 0 0 0 4px rgba(49, 130, 206, .55);
}

html.theme-dark .dl-chat-panel__capsule:focus-within,
html.theme-dark .watson-composer:focus-within {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
}

html.theme-eye-care .dl-chat-panel,
html.theme-eye-care .watson-panel {
    --dl-surface: #FFFCF7;
    --dl-surface-2: color-mix(in srgb, var(--theme-bg-secondary) 60%, #FFFCF7);
    /* 护眼是亮底,焦点环跟主令牌一起去蓝(A4);深色那一支保持原值,中性环在暗底上看不见 */
    --dl-focus-ring: 0 0 0 2px #FFFCF7, 0 0 0 4px rgba(13, 13, 13, .40);
}

@media (prefers-reduced-motion: reduce) {
    .watson-launcher,
    .watson-launcher__label,
    .dl-chat-panel,
    .dl-chat-panel__action,
    .dl-chat-panel__send,
    .watson-panel,
    .watson-panel__action,
    .watson-panel__deep,
    .watson-panel__send,
    .watson-copy {
        transition: none;
    }

    .dl-chat-panel,
    .dl-chat-panel[data-anim="dock"],
    .dl-chat-panel[data-anim="free"],
    .watson-panel,
    .watson-panel[data-anim="dock"],
    .watson-panel[data-anim="free"] {
        transform: none;
    }

    .watson-panel__pulse {
        animation: none;
        opacity: .6;
    }


    /* 缩放提示照常出现,只是不再淡入:能不能看见是可用性,淡入才是动效 */
    .watson-panel .dr-resize-handle::before,
    .watson-panel .dr-resize-handle[data-dr-edge="se"]::after {
        transition: none;
    }

    /* 逐字仍然逐字，只是不再淡入：配速是内容节奏，淡入才是动效 */
    .watson-turn__fresh {
        animation: none;
    }
}

/* ---------- 「问华生」入口(§1.8 / §8.7) ----------
 *
 * 五处入口(词弹窗动作行、右键菜单、句子浮条、选区浮条、解析面板)统一成
 * 「18px 迷你华生 + 文字」。这里只管图标与文字的排布,按钮本身的表面、内边距、
 * 悬停底色仍归各自宿主(.dl-wordpop__act / .dl-menu__item / …)—— 一个入口一套皮,
 * 这一层再画一遍就会跟宿主打架。
 *
 * 图标由 watson-figure.js 的 buildMini() 生成,描边走 currentColor,
 * 所以按钮文字什么颜色它就什么颜色,禁用态、深浅色主题都不用另写。
 */

.dl-ask-watson {
    display: inline-flex;
    align-items: center;
    gap: var(--dl-icon-gap, 10px);
}

.dl-ask-watson__icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: inherit;
}

/* 菜单行(右键菜单、句子浮条)是 `[16 图标槽 | 10 间隙 | 文字 | 快捷键]` 四列栅格,
   图标进它自己的槽、尺寸随槽走 —— 在这里把 18 收回 `--dl-icon`,
   文字才仍从 38 起,换图标不推动任何一行(§1.2 零位移)。 */
.dl-menu__icon .dl-ask-watson__icon {
    width: var(--dl-icon);
    height: var(--dl-icon);
}

/* 单词页例句的动作行(`.vocab-d-ex-acts`)是 12/16 的说明行,旁边两个纯文字动作把行高定在
   16 + 上下各 2 内边距 = 20。18 的头像会把这一行顶高 2px,故收到 --dl-icon(16)= 行的文字盒高,
   一个像素不长(§1.2 零位移)。
   另一件事是对齐:这一行按 baseline 排,而 inline-flex 按钮的基线取自第一个子项 ——
   这里第一个子项是 svg,它的基线是自己的下边缘,照 baseline 排会把整枚按钮顶高约 4px。
   两侧盒高既然已经相等,改按中线排就与两个文字动作严丝合缝。 */
.vocab-d-ex-act.dl-ask-watson {
    align-self: center;
    gap: var(--dl-icon-gap-lg, 8px);
}

.vocab-d-ex-act .dl-ask-watson__icon {
    width: var(--dl-icon);
    height: var(--dl-icon);
}

/* 做题记录行(`.papers-records-bar`,12/16)里「问华生错题分布 →」是嵌在一句话中间的行内文字。
   同上收到 --dl-icon = 16 = 这一行的 line-height,于是图标与行盒恰好一样高,
   `vertical-align: bottom`(贴行盒下沿)就让它严丝合缝填满行盒、一个像素不多占。
   必须显式写这一条:inline-flex 盒的默认基线取自第一个子项(svg,基线 = 自身下边缘),
   照 baseline 排会把行盒撑到 19;实测 middle 撑到 18、bottom 与「没有图标」时逐字相同(16)。 */
.papers-records-bar__link.dl-ask-watson {
    display: inline-flex;
    vertical-align: bottom;
    gap: var(--dl-icon-gap-lg, 8px);
}

.papers-records-bar__link .dl-ask-watson__icon {
    width: var(--dl-icon);
    height: var(--dl-icon);
}

/* 悬停时头像弹一下(§1.8):120ms 内涨到 1.08 再回来,不停在放大态 —— 停住就成了状态,
   而这只是一次招呼。用动画不用 transition:transition 会让指针一进一出各演一遍。 */
@keyframes dl-ask-watson-pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* 三条选择器 = 三种宿主形状:①`.dl-ask-watson` 自己就是按钮或包着图标与文字的那一层;
   ②菜单行图标另有栅格槽,行上不挂 `.dl-ask-watson`;③解析面板动作行末尾还有一枚 `›`,
   图标与文字包成一组、`.dl-ask-watson` 落在组上,指针压在 `›` 上时也该弹一下。 */
@media (hover: hover) {
    .dl-ask-watson:hover .dl-ask-watson__icon,
    .dl-menu__item:hover .dl-ask-watson__icon,
    .explanation-evidence-action:hover .dl-ask-watson__icon {
        animation: dl-ask-watson-pop 120ms ease-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dl-ask-watson:hover .dl-ask-watson__icon,
    .dl-menu__item:hover .dl-ask-watson__icon,
    .explanation-evidence-action:hover .dl-ask-watson__icon {
        animation: none;
    }
}