/* 意见反馈面板(F-01,docs/DESKTOP_UX_PROGRAM_2026_09_03.md §6.6)
 *
 * 窗口本体、头部、线程、气泡、输入胶囊全部走 .dl-chat-panel 共享基类
 * (定义在 components/watson-panel.css —— 两块面板同一张表面、同一把尺)。
 * 本文件只写反馈独有的三样:附件行、截图钮与截图态、底部那枚粘贴胶囊。
 * 入口浮标与两行入口菜单在 components/feedback.css。
 *
 * 加载顺序要求:本文件排在 watson-panel.css **之后**(base.html / viewer.html 均如此),
 * 同权重时以本文件为准。
 */

/* ---------- 面板 ---------- */

/* 尺寸与位置由 JS 写(440 × min(560, vh−96),不持久化);这里只给首帧兜底。
   先 vh 再 dvh:手机地址栏收起/展开时 100vh 恒取「大视口」,首帧会比屏幕高一截;
   读不懂 dvh 的浏览器落在上一行(写法同 watson-panel.css 的 sheet 高度)。 */
.feedback-panel {
    right: var(--dl-vp-margin, 16px);
    bottom: var(--dl-vp-margin, 16px);
    width: 440px;
    height: min(560px, calc(100vh - 96px));
    height: min(560px, calc(100dvh - 96px));
}

/* 头部三件:标题「反馈」贴左、类型分段控件贴右、关闭钮压边 */
.feedback-panel__title {
    flex: none;
    white-space: nowrap;
}

/* ---------- 类型分段控件(§3.15;圆角同心 §3.17:面板 16 / 头部内距 12 → 钮 4) ---------- */

.feedback-panel__seg {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
}

.feedback-panel__seg-btn {
    flex: none;
    height: var(--dl-ctl-sm);
    padding: 0 8px;
    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-ctl-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dl-t-state) ease-out,
                color var(--dl-t-state) ease-out;
}

@media (hover: hover) {
    .feedback-panel__seg-btn:hover {
        color: var(--dl-ink-2);
    }
}

/* 选中 = --dl-hover 面 + --dl-ink 字:与头部图标钮的按下态同一种"这个是当前的" */
.feedback-panel__seg-btn.is-on {
    background: var(--dl-hover);
    color: var(--dl-ink);
}

.feedback-panel__seg-btn:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

/* ---------- 上下文条(头下一行,自动识别,用户不用写) ---------- */

.feedback-panel__context {
    flex: none;
    padding: 8px var(--overlay-pad-comfortable) 0;
    color: var(--dl-ink-3);
    font-size: var(--dl-fs-caption);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feedback-panel__context[hidden] {
    display: none;
}

/* ---------- 附件行(输入区上方) ---------- */

.feedback-panel__shots {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 var(--overlay-pad-comfortable);
}

.feedback-panel__shots[hidden] {
    display: none;
}

.feedback-panel__shot-cell {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--dl-surface-2);
    box-shadow: inset 0 0 0 1px var(--dl-line);
    overflow: hidden;
}

.feedback-panel__shot-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 传输中先压暗:图已经在这儿了,只是还没落到服务器,不必再写一行「上传中」 */
.feedback-panel__shot-cell.is-uploading img {
    opacity: .45;
}

.feedback-panel__shot-drop {
    position: absolute;
    top: 2px;
    right: 2px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(11, 18, 32, .62);
    color: #fff;
    cursor: pointer;
}

.feedback-panel__shot-drop svg {
    width: 10px;
    height: 10px;
    stroke-width: 2.4;
}

.feedback-panel__shot-drop:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

/* ---------- 截图钮 / 图片钮(ghost,同一套视觉) ---------- */

.feedback-panel__shot-btn,
.feedback-panel__pick-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    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;
}

.feedback-panel__shot-btn svg,
.feedback-panel__pick-btn svg {
    width: 15px;
    height: 15px;
}

@media (hover: hover) {
    .feedback-panel__shot-btn:hover,
    .feedback-panel__pick-btn:hover {
        background: var(--dl-hover);
        color: var(--dl-ink-2);
    }
}

.feedback-panel__shot-btn:focus-visible,
.feedback-panel__pick-btn:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

/* ---------- 截图态 ----------
 *
 * 点「截图」之后页面要让开:反馈面板与桌宠淡出但**不卸载**(卸载会丢草稿与已传的图),
 * 只是变透明并不再接指针。系统截图工具此时截到的是干净的页面。
 */
body.feedback-capturing .feedback-panel,
body.feedback-capturing .watson-launcher {
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-out;
}

.feedback-capture-pill {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: var(--dl-z-context-menu);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px 4px 10px;
    border-radius: var(--dl-r-pill);
}

.feedback-capture-pill[hidden] {
    display: none;
}

.feedback-capture-pill__paste {
    height: var(--dl-ctl-sm);
    padding: 0 6px;
    border: none;
    border-radius: var(--dl-r-pill);
    background: transparent;
    color: var(--dl-ink);
    font-family: var(--dl-font);
    font-size: var(--dl-fs-body);
    line-height: var(--dl-ctl-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dl-t-state) ease-out;
}

/* 右端那枚 × = 不截了(与 Esc 同一件事);圆钮跟着胶囊走 */
.feedback-capture-pill__cancel {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--dl-ctl-sm);
    height: var(--dl-ctl-sm);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--dl-ink-3);
    cursor: pointer;
    transition: background-color var(--dl-t-state) ease-out,
                color var(--dl-t-state) ease-out;
}

.feedback-capture-pill__cancel svg {
    width: 13px;
    height: 13px;
}

@media (hover: hover) {
    .feedback-capture-pill__paste:hover {
        background: var(--dl-hover-strong);
    }

    .feedback-capture-pill__cancel:hover {
        background: var(--dl-hover-strong);
        color: var(--dl-ink);
    }
}

.feedback-capture-pill__paste:focus-visible,
.feedback-capture-pill__cancel:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    body.feedback-capturing .feedback-panel,
    body.feedback-capturing .watson-launcher {
        transition: none;
    }
}

/* ============================================================
   手机形制:近全屏底部 sheet(D-25,2026-09-18 会话 41)
   ------------------------------------------------------------
   手机上原先摆的是桌面那只浮窗:JS 按 min(440, vw−32) × max(320, min(560, vh−96))
   算出 358×560 钉在右下,头部还挂着 makeDraggable,无遮罩、无下滑,只能点 × 或 Esc ——
   正是华生 W-MOBILE 改造前的同一形态。几何逐条照华生 sheet 抄(watson-panel.css
   「手机底部 sheet」一节):两块面板在手机上是同一张纸,不该有两种形状。

   作用域 html[data-device="phone"] 与华生同一把尺,理由也同:反馈面板开在全站
   (首页、单词本、我的都有入口),那里没有 body.reader-mobile。
   判据与 feedback-panel.js 的 isPhoneSheet() **成对**:JS 只写 data-mode="sheet"、
   停掉内联几何与拖拽,几何全在这里;改一处必须改另一处。
   ============================================================ */

html[data-device="phone"] .feedback-panel {
    /* 64 = 手机顶栏 48 + --dl-vp-margin 16,与华生同值:露出来的那一条是「关掉回哪儿」 */
    --feedback-sheet-top: calc(var(--safe-area-top, 0px) + 64px);
    left: 0;
    right: 0;
    top: auto;
    /* --feedback-sheet-kb 由 JS 按 visualViewport 写(D-27):键盘弹出时下半截让开。
       变量名与华生那支分开 —— 两块面板可能先后开在同一页,共用一个名字会互相写脏。 */
    bottom: var(--feedback-sheet-kb, 0px);
    width: auto;
    min-width: 0;
    max-width: none;
    /* 先 vh 兜底再 dvh */
    height: calc(100vh - var(--feedback-sheet-top) - var(--feedback-sheet-kb, 0px));
    height: calc(100dvh - var(--feedback-sheet-top) - var(--feedback-sheet-kb, 0px));
    max-height: none;
    border-radius: var(--overlay-radius-sheet-top) var(--overlay-radius-sheet-top) 0 0;
    /* 出入场只滑不淡:与另外四个底部面板同一个手势 */
    opacity: 1;
}

/* 进场起点:钉在屏下。桌面那种「原地淡入上移」是窗口的手势 */
html[data-device="phone"] .feedback-panel[data-anim="sheet"] {
    transform: translateY(100%);
}

html[data-device="phone"] .feedback-panel[data-anim="sheet"].is-open {
    transform: translateY(0);
}

/* 减动效:不滑,直接在位 */
@media (prefers-reduced-motion: reduce) {
    html[data-device="phone"] .feedback-panel[data-anim="sheet"],
    html[data-device="phone"] .feedback-panel[data-anim="sheet"].is-open {
        transform: none;
    }
}

/* 拖动途中跟手;必须排在 .is-open 之后 —— 两者特异度相同(0,4,1),后写的才压得住。
   反馈只有「下滑关闭」一个去处,不设半档(D-26):写完就发的一次性任务,
   半档只会让文本域变矮,多一档就多一种不可预测。 */
html[data-device="phone"] .feedback-panel.is-sheet-dragging {
    transform: translateY(var(--feedback-sheet-drag-y, 0px));
    transition: none;
}

/* 抓手在手机 sheet 上才显形(基座在 watson-panel.css:332) */
html[data-device="phone"] .feedback-panel .dl-chat-panel__handle {
    display: block;
}

/* 头部:48 高,与华生 sheet、解析抽屉手机档同值。
   touch-action:none 是给拖拽用的(头部与抓手一起当拖把手);线程那块仍是继承来的
   touch-action:manipulation,滚动不受影响。cursor:default —— 拖的不是窗口位置。 */
html[data-device="phone"] .feedback-panel .dl-chat-panel__header {
    height: 48px;
    cursor: default;
    touch-action: none;
}

/* 输入区贴着屏底,安全区自己加上(同华生 composer) */
html[data-device="phone"] .feedback-panel .dl-chat-panel__composer {
    padding-bottom: calc(var(--overlay-pad-comfortable) + var(--safe-area-bottom));
}

/* ---------- 附件:手机走相册/拍照,桌面走截图 + 粘贴(D-32) ----------
 *
 * 桌面那条路是「点截图 → 页面让开 → 用系统截图工具截完按 Ctrl+V」,手机上两头都不成立:
 * 没有 Ctrl+V,navigator.clipboard.read() 在移动端浏览器上基本拿不到授权 ——
 * 于是手机用户根本没法附图,而桌面可以。这是平台功能缺失,不是新增功能。
 * 两枚钮同一套 __shot-btn 视觉、同一个位置,只是各自只在自己那一档出现。
 */
.feedback-panel__pick-btn {
    display: none;
}

html[data-device="phone"] .feedback-panel__shot-btn {
    display: none;
}

html[data-device="phone"] .feedback-panel__pick-btn {
    display: inline-flex;
}

/* ============================================================
   触屏:命中区补到 48,视觉回原值(D-31,2026-09-18 会话 41)
   ------------------------------------------------------------
   口径、理由与本面板共用基类那一份完全相同,见 watson-panel.css 文末同名一节。
   这里只补反馈面板自己那四枚控件。
   ============================================================ */

@media (pointer: coarse) {
    /* 类型分段钮:28 高的一对小字钮,被顶成 ≥48 后 44 高的头部装不下、上下各溢 2px
       被面板的 overflow:hidden 裁掉。横向本来就有 60+ 宽,只要把高收回来。 */
    .feedback-panel__seg-btn,
    .feedback-panel__shot-btn,
    .feedback-panel__pick-btn {
        position: relative;
        min-width: 0;
        min-height: var(--dl-ctl-sm);
    }

    /* 分段控件那只壳自己 overflow:hidden(:40),48 的扩区会被裁回 28 —— 壳跟着长到 48
       才装得下。壳是透明的,里面两枚钮仍由 align-items:center 居中,看不出变化。 */
    .feedback-panel__seg {
        height: 48px;
    }

    /* 这三枚横向本来就有 63~100 宽,不必再往两边伸:分段那两枚之间只隔 2px(:36),
       伸出去就压在邻居看得见的字上。只把高收回来、把命中补到 48。 */
    .feedback-panel__seg-btn::after,
    .feedback-panel__shot-btn::after,
    .feedback-panel__pick-btn::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 48px;
        transform: translate(-50%, -50%);
    }

    /* 删附件那枚小叉子:16×16 绝对定位在 56 缩略图的右上角。被顶成 48×48 之后
       整枚缩略图被它盖满还往外溢 —— 看图变成误删,而删附件是破坏性动作。
       命中区给 --dl-ctl-sm(28)= 缩略图右上那一格(56 的一半),既点得中,又不吃到
       图的正中与左下三格 —— 删除是破坏性动作,热区宁可小一格也不要吞掉整张图。
       不按 48 给的理由同上一节:命中区盖住邻居的视觉比小一点更糟。 */
    .feedback-panel__shot-drop {
        min-width: 16px;
        min-height: 16px;
    }

    /* 贴着格子的右上角起算,不往外伸:缩略格自己 overflow:hidden(:115),
       伸出去的部分连命中一起被裁,写了也是白写。 */
    .feedback-panel__shot-drop::after {
        content: "";
        position: absolute;
        top: -2px;
        right: -2px;
        width: var(--dl-ctl-sm);
        height: var(--dl-ctl-sm);
    }
}