/* ============================================================
   css/panels/panels-help.css — 百科全书（我的 → 百科全书）
   结构：入口页（三个入口空间）/ 全屏面板 / 实时帮助 / 玩法开拓 / 检测流程 / 消息条 / 浮动窗 / 总结卡
   信息架构依据：docs/design/KSTAR-ENCYCLOPEDIA-UI3-DRAFT-2026-10-01.md §2 / §4
     （入口页 + 三个独立空间；面板内部不再有「三个 Tab」这一层）
   规范：韩系法式暖米纸 + 干燥玫瑰；衬线中文为主；零 emoji；圆角 4/8/12；
        字级分明（大标题衬线加粗 / 正文 / 辅助 / 极淡四档）；触碰都有过渡；
        窄屏 ≤370px 收一档；iOS 顶部安全区由 #app 让一次，本层不再让（安卓恒 0 零影响）
   ============================================================ */

/* 本页私有变量（本文件在 core.css 之后加载，只定义 --help-* 自己的名字，不动任何全局变量） */
:root {
    --help-paper: var(--bg-primary);
    --help-line: rgba(196, 168, 106, 0.2);
    --help-rose: #B89292;                        /* 实色：浅色底上白字够清楚（比 var(--rose) 压深一档） */
    --help-rose-bg: rgba(201, 168, 168, 0.14);
}
@media (prefers-color-scheme: dark) {
    :root { --help-line: rgba(196, 168, 106, 0.22); --help-rose: #C79E9E; --help-rose-bg: rgba(201, 168, 168, 0.16); }
}
[data-theme="dark"] { --help-line: rgba(196, 168, 106, 0.22); --help-rose: #C79E9E; --help-rose-bg: rgba(201, 168, 168, 0.16); }

/* ---------- 一、入口页（我的 → 百科全书）：三个入口空间 ---------- */
.help-entry-hero { padding: 18px 20px 4px; }
.heh-en {
    font-family: var(--font-display); font-style: italic; font-size: 12px;
    letter-spacing: 0.16em; color: var(--gold); opacity: 0.9;
}
.heh-lead { font-size: 13px; line-height: 1.75; color: var(--text-secondary); margin: 0; max-width: 94%; }

/* ★ PA2A：入口页从「三张一样大的入口卡」改成「三个入口空间」（草案 §2.2 / §4.2）。
   三个入口的视觉权重必须不同：
     A 实时帮助 = 唯一的主入口（主纸面里的房间入口）
     B 玩法开拓 = 次级内容路径（一条）
     C 检测流程 = 安静的管理路径（一行，绝不给它同等权重） */
.help-rooms { padding: 12px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.help-room-live { display: block; }

/* —— A. 主入口：实时帮助 —— */
.hlr {
    position: relative; padding: 16px 17px 16px; border-radius: var(--radius-xl, 24px);
    background:
        linear-gradient(150deg, rgba(201, 168, 168, 0.14), rgba(196, 168, 106, 0.08)),
        var(--surface-solid);
    border: 1px solid var(--help-line);
    box-shadow: var(--shadow-sm), var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.hlr-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hlr-ico {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--help-rose); background: var(--rose-light);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.hlr-name {
    font-family: var(--font-body); font-size: 18px; font-weight: 600;
    color: var(--text-primary); letter-spacing: 0.06em;
}
.hlr-en {
    margin-left: auto; font-family: var(--font-display); font-style: italic; font-size: 11px;
    color: var(--gold); opacity: 0.75; letter-spacing: 0.08em;
}
.hlr-sub { font-size: 13px; line-height: 1.75; color: var(--text-secondary); margin: 10px 0 14px; }
.hlr-btn {
    width: 100%; padding: 12px; border: none; border-radius: 12px;
    background: var(--help-rose); color: #fff; font-family: var(--font-body);
    font-size: 14px; font-weight: 600; letter-spacing: 0.1em; cursor: pointer;
    box-shadow: var(--shadow-xs), var(--shadow-sm);
    -webkit-appearance: none; appearance: none;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}
.hlr-btn:active { transform: scale(0.975); opacity: 0.92; }
/* 进行中：主入口自己换状态（草案 §3）。状态点只做「陪伴状态」——不闪烁、不跳、不大面积呼吸 */
.hlr.is-live {
    background:
        linear-gradient(150deg, rgba(201, 168, 168, 0.20), rgba(196, 168, 106, 0.10)),
        var(--surface-solid);
}
.hlr-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--rose); opacity: 0.9; }
.hlr-tag { font-size: 11px; letter-spacing: 0.16em; color: var(--help-rose); font-weight: 600; }
.hlr-time { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.hlr.is-live .hlr-name { margin-top: 10px; }

/* —— B / C. 次级内容路径 + 安静管理路径 —— */
.help-path {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 14px 16px; border: 1px solid var(--border-faint); border-radius: 12px;
    background: var(--surface); cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s ease;
}
.help-path:active { transform: scale(0.985); }
.help-path .hp-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.help-path .hp-txt b { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.04em; }
.help-path .hp-txt i { font-style: normal; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.help-path .hp-arrow {
    width: 7px; height: 7px; flex: 0 0 7px; opacity: 0.55;
    border-top: 1.5px solid var(--rose); border-right: 1.5px solid var(--rose);
    transform: rotate(45deg);
}
/* 安静路径：更淡、更矮、字更小，且「检测流程 · 只在需要的时候查一遍」读成一行（§2.2-C） */
.help-path.is-quiet { padding: 12px 15px; background: none; }
.help-path.is-quiet .hp-txt { flex-direction: row; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.help-path.is-quiet .hp-txt b { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); }
.help-path.is-quiet .hp-txt i { font-size: 11.5px; color: var(--text-muted); }
.help-path.is-quiet .hp-txt b::after { content: '·'; margin-left: 7px; color: var(--text-muted); }
.help-path.is-quiet .hp-arrow { opacity: 0.35; }

/* 「今日推荐」这一行现在跟在「玩法开拓」这条路径下面（草案 §11.1：它属于玩法开拓空间），
   它自己那套外边距是为「单独占一整块」写的，进了 .help-rooms 就由容器的间隙统一管 */
.help-rooms .help-daily { margin: 0; }

.help-daily-banner { padding: 0; }

/* ★ PA2A：原来入口页底部那条独立的「进行中」横幅（#help-active-strip + .help-entry-active + .hea-*）
   已按草案 §3 收进主入口本身（.hlr.is-live）——状态属于「实时帮助」这个入口，不该另起一块跟主入口抢位置。
   删掉的类：.help-entry-active / .hea-head / .hea-dot / .hea-tag / .hea-time / .hea-title / .hea-sub
   .hea-btn（及其 :active）。@keyframes helpPulse 保留（锁提示条与浮动窗的状态点还在用）。 */
@keyframes helpPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }

/* ---------- 二、全屏百科面板（挂 #app 内，absolute inset:0 · Example 10 Secondary Sheet） ----------
   ★ W3 · UI 3.0：这一层以前挂在 #sub-help 里面，跟着二级层的生命周期被隐藏——
   「看不见但还在 DOM 里」，既残留 pointer blocker，又会被底下的层抢走命中。
   现在它是 #app 上的独立层，进场 / 退场都由 JS 成对收干净（panels-help.js · closeEncyclopedia）。 */
/* 这一页里横向滑动的条（两道分类）绝不把整页撑出横向滚动条——真量过 360/390/430/480 四档 */
.help-overlay, .help-body { overflow-x: hidden; }
.help-overlay {
    position: absolute; inset: 0; z-index: 1600;
    background: var(--help-paper);            /* 不透明纸面：它一出现，底下的二级层就彻底让位 */
    opacity: 0; visibility: hidden;
    transform: translateY(104%);              /* Example 10：从底边滑入，不是凭空出现 */
    transition:
        transform 0.54s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.34s ease,
        visibility 0.54s ease;
}
.help-overlay.show { opacity: 1; visibility: visible; transform: translateY(0); }
.help-panel { position: absolute; inset: 0; display: flex; flex-direction: column; }
.help-topbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px; flex-shrink: 0; }
.help-back {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-primary); background: transparent;
    transition: background 0.2s ease, transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.help-back:active { transform: scale(0.9); background: var(--rose-light); }
.help-tb-center { display: flex; flex-direction: column; min-width: 0; }
.help-title { font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.08em; line-height: 1.25; }
.help-title-en { font-family: var(--font-display); font-style: italic; font-size: 11px; color: var(--gold); opacity: 0.85; letter-spacing: 0.14em; }
/* ★ PA2A：面板里那排「实时帮助 / 玩法开拓 / 检测流程」三 Tab 与它的滑动指示条整块删除
   （草案 §4.2「进入后不再出现三个 Tab」/ §4.5「三 Tab 导航壳必须被入口页 + 独立页面替换」）。
   顶栏改成写当前空间的名字（.help-title / .help-title-en，由 helpRenderPage 按空间写）。
   删掉的类：.help-tabs / .help-tab / .help-tab.active / .help-tab:active / .help-tab-ind / .help-tab-ind.on
   以及 JS 里的 _helpSlideTabInd()。 */
.help-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.help-body.scroll-page {
    display: block; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(26px + var(--safe-bottom, 0px));
}
/* ---------- 二·B 空间内容落地（柔和淡入；不再有横向位移） ----------
   ★ PA2A：以前这里叫「同级 View 生命周期（Example 12）」——三个 Tab 之间左右横移。
   草案 §4.6 明确：不再用 Example 12 做「实时帮助 / 玩法开拓 / 检测流程」的横向切换，
   它们现在是三个不同空间（进入 = Example 10 的整层进入，就是上面 .help-overlay 那条）。
   所以面板内部只剩「换空间时柔和淡入淡出」这一件事，时长与规范一致（320ms）。 */
.help-page {
    position: relative;
    padding: 16px 20px 4px;
    /* 实时帮助这一页要撑满（对话区内部滚动 + 输入区钉在底部），教程 / 检测是长列表 */
    min-height: 0;
}
.help-body:not(.scroll-page) > .help-page {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
    padding: 16px 20px calc(14px + var(--safe-bottom, 0px));
    transition: opacity 0.32s ease;
}
.help-body.scroll-page > .help-page {
    padding: 16px 20px calc(26px + var(--safe-bottom, 0px));
    transition: opacity 0.32s ease;
}
.help-page-in {
    opacity: 0;
}
.help-page-out {
    position: absolute; left: 0; right: 0; top: 0;
    opacity: 0; pointer-events: none;
    transition:
        opacity 0.32s ease;
}
/* 实时帮助这一页本来就是竖排撑满（flex 列），进场前只留「隐藏态」＝透明度，不再有位移口径差异 */
.help-body:not(.scroll-page) > .help-page-in { opacity: 0; }

/* ---------- 三、通用块（页头 / 说明 / 主按钮 / 分区标题 / 空态） ---------- */
.help-hero { margin-bottom: 14px; }
.help-hero-en {
    font-family: var(--font-display); font-style: italic; font-size: 12px;
    letter-spacing: 0.2em; color: var(--gold); opacity: 0.9;
}
.help-hero-zh {
    font-family: var(--font-body); font-size: 21px; font-weight: 600; line-height: 1.4;
    color: var(--text-primary); letter-spacing: 0.04em; margin: 3px 0 9px;
}
.help-hero-lead { font-size: 13px; line-height: 1.8; color: var(--text-secondary); margin: 0; }
.help-hero-note { font-size: 11.5px; line-height: 1.7; color: var(--text-muted); margin: 8px 0 0; }

.help-note {
    display: flex; gap: 11px; align-items: stretch;
    margin: 14px 0 16px; padding: 13px 14px; border-radius: 12px;
    background: var(--help-rose-bg); border: 1px solid rgba(214, 178, 178, 0.34);
}
/* 左侧玫瑰色细条是「装饰条」不是 flex 兄弟项——标题必须整行显示，
   否则「开始之前，先说一声」会被挤成三行（2028 实测） */
.help-note::before {
    content: ''; flex: 0 0 3px; width: 3px; border-radius: 3px;
    background: var(--help-rose); opacity: 0.75;
}
.help-note > .hn-title,
.help-note > p { width: 100%; }
.help-note .hn-title { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.04em; margin-bottom: 6px; }
.help-note p { font-size: 12.5px; line-height: 1.8; color: var(--text-secondary); margin: 0; }

.help-primary {
    display: block; width: 100%; padding: 14px 16px; border: none; border-radius: 12px;
    background: var(--help-rose); color: #fff;
    font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0.14em;
    box-shadow: var(--shadow-sm), var(--shadow-md), 0 0 0 0 var(--rose-glow);
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease, opacity 0.2s ease;
}
.help-primary:active { transform: scale(0.975); box-shadow: var(--shadow-md), 0 0 20px rgba(200, 160, 160, 0.28); }
.help-primary.ghost {
    background: transparent; color: #9C7474; border: 1px solid rgba(214, 178, 178, 0.6); box-shadow: none;
}
.help-primary[disabled] { opacity: 0.6; }
.help-page > .help-primary { margin: 4px 0 18px; }

.help-sec-head { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; }
.help-sec-t { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.06em; }
.help-sec-t::before {
    content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px;
    background: var(--rose); border-radius: 1px; transform: rotate(45deg) translateY(-1px);
}
.help-sec-note { font-size: 11px; color: var(--text-muted); }

.help-loading { padding: 44px 20px; text-align: center; font-size: 12.5px; color: var(--text-muted); }
.help-empty { padding: 34px 22px; text-align: center; font-size: 13px; color: var(--text-secondary); line-height: 1.8; }

.help-mini-btn {
    padding: 8px 14px; border-radius: 18px; font-size: 12.5px; font-family: var(--font-body);
    border: 1px solid rgba(214, 178, 178, 0.6); background: transparent; color: #9C7474;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease, border-color 0.2s ease;
}
.help-mini-btn:active { transform: scale(0.95); background: var(--help-rose-bg); border-color: var(--help-rose); }

/* ---------- 四、实时帮助 · 未开始 ---------- */
.help-quick-list { display: flex; flex-direction: column; gap: 8px; }
.help-quick-btn {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 12px 14px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--help-line); background: var(--surface-solid);
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.help-quick-btn:active { transform: scale(0.985); border-color: var(--help-rose); box-shadow: var(--shadow-sm); }
.help-quick-btn .hqb-txt { flex: 1; font-size: 13.5px; color: var(--text-primary); letter-spacing: 0.03em; }
.help-quick-btn .hqb-ico { color: var(--rose); opacity: 0.7; display: flex; }

/* ---------- 五、实时帮助 · 对话区 ---------- */
.help-thread {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px 16px 6px; display: flex; flex-direction: column; gap: 12px;
}
.help-welcome { align-self: center; text-align: center; padding: 26px 10px 8px; }
.hw-en { font-family: var(--font-script, var(--font-display)); font-size: 22px; color: var(--rose); opacity: 0.75; }
.hw-zh { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 4px 0 6px; letter-spacing: 0.05em; }
.hw-tip { font-size: 12px; color: var(--text-muted); margin: 0; }

/* ★ 入场动画只挂在「这一帧新出现的那条」上（.help-row-in 由 JS 一次性挂）：
   常驻在 .help-row 上的话，每次整块重画对话区，老气泡都会跟着重播一遍＝整页闪一下。 */
.help-row { display: flex; align-items: flex-start; gap: 8px; }
.help-row-in { animation: helpRowIn 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }
.help-row-me { flex-direction: row-reverse; }
.help-row-him { padding-left: 2px; }
/* Example 05 / 07 的内容抵达：轻微上浮 + 模糊转清晰（不是弹跳，不是缩放） */
@keyframes helpRowIn {
    from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}
.help-av {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; letter-spacing: 0;
    font-family: var(--font-body);
}
.help-av.is-him { background: linear-gradient(140deg, rgba(201, 168, 168, 0.28), rgba(196, 168, 106, 0.22)); color: #8E6B6B; }
.help-av.is-me { background: var(--rose-light); color: #A88383; border: 1px solid rgba(214, 178, 178, 0.32); }
.help-bubble-wrap { max-width: 82%; min-width: 0; display: flex; flex-direction: column; }
.help-row-me .help-bubble-wrap { align-items: flex-end; }
.help-bubble {
    padding: 10px 13px; border-radius: 12px;
    background: var(--surface-solid); box-shadow: var(--shadow-xs), var(--shadow-sm);
    border: 1px solid var(--help-line);
}
.help-row-me .help-bubble { background: var(--help-rose-bg); border-color: rgba(214, 178, 178, 0.42); border-bottom-right-radius: 4px; }
.help-row-him .help-bubble { border-bottom-left-radius: 4px; }
.help-bubble-txt { font-size: 13.5px; line-height: 1.8; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; font-weight: 400; }
.help-bubble.is-fail { background: var(--surface-solid); border-style: dashed; }
.help-bubble.is-fail .help-bubble-txt { color: var(--text-muted); }
.help-bubble-nav {
    margin-top: 8px; padding-top: 7px; font-size: 11.5px; color: var(--rose);
    border-top: 1px dashed rgba(196, 168, 106, 0.4);
}
.help-bubble-fails { display: flex; gap: 8px; margin-top: 8px; }
.help-dots { display: inline-flex; gap: 4px; align-items: center; padding: 13px 16px; border-radius: 12px; background: var(--surface-solid); box-shadow: var(--shadow-xs); border: 1px solid var(--help-line); border-bottom-left-radius: 4px; }
.help-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); animation: helpDot 1.1s ease-in-out infinite; }
.help-dots i:nth-child(2) { animation-delay: 0.16s; }
.help-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes helpDot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes helpIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.help-compose {
    flex-shrink: 0; padding: 10px 16px calc(12px + var(--safe-bottom, 0px));
    border-top: 1px solid var(--help-line);
    background: var(--bg-chat);
    transition: box-shadow 0.3s ease;
}
.help-compose.flash { animation: helpComposeFlash 0.9s ease-out; }
@keyframes helpComposeFlash {
    0% { box-shadow: inset 0 0 0 2px rgba(201, 168, 168, 0.55); }
    100% { box-shadow: inset 0 0 0 2px rgba(201, 168, 168, 0); }
}
.help-sugs { display: none; flex-wrap: wrap; gap: 7px; padding-bottom: 9px; }
.help-sugs.has { display: flex; }
.help-sug {
    padding: 7px 12px; border-radius: 16px; font-size: 12px; font-family: var(--font-body);
    border: 1px solid rgba(214, 178, 178, 0.5); background: var(--surface-solid); color: #9C7474;
    animation: helpIn 0.2s ease;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease;
}
.help-sug:active { transform: scale(0.95); background: var(--help-rose-bg); }
.help-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.help-input {
    flex: 1; min-width: 0; resize: none; max-height: 110px;
    padding: 11px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.6;
    font-family: var(--font-body); color: var(--text-primary);
    background: var(--surface-solid); border: 1px solid var(--help-line);
    box-shadow: inset 0 1px 2px rgba(30, 28, 26, 0.03);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
    -webkit-appearance: none;
}
.help-input:focus { outline: none; border-color: var(--help-rose); box-shadow: 0 0 0 3px var(--rose-glow); }
.help-input::placeholder { color: var(--text-muted); }
.help-send {
    flex: 0 0 auto; padding: 11px 18px; border: none; border-radius: 12px;
    background: var(--help-rose); color: #fff; font-family: var(--font-body);
    font-size: 13.5px; font-weight: 600; letter-spacing: 0.1em;
    box-shadow: var(--shadow-xs), var(--shadow-sm);
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}
.help-send:active { transform: scale(0.95); opacity: 0.9; }
.help-compose-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.help-end-btn {
    padding: 8px 15px; border-radius: 18px; font-size: 12.5px; font-family: var(--font-body);
    border: 1px solid rgba(214, 178, 178, 0.6); background: transparent; color: #9C7474;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease;
}
.help-end-btn:active { transform: scale(0.96); background: var(--help-rose-bg); }
.help-end-btn[disabled] { opacity: 0.55; }
.help-compose-hint { font-size: 11px; color: var(--text-muted); line-height: 1.5; }

/* ---------- 六、玩法开拓 ---------- */
.help-daily {
    margin: 16px 18px 0; padding: 15px 16px; border-radius: 12px; cursor: pointer;
    background: linear-gradient(140deg, rgba(201, 168, 168, 0.14), rgba(196, 168, 106, 0.10));
    border: 1px solid var(--help-line);
    box-shadow: var(--shadow-xs), var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease;
}
.help-daily:active { transform: scale(0.985); box-shadow: var(--shadow-md); }
.help-daily.big { margin-bottom: 2px; }
.hd-head { display: flex; align-items: center; gap: 8px; }
.hd-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--gold-dark); }
.hd-date { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.hd-title { font-size: 15.5px; font-weight: 600; color: var(--text-primary); margin: 8px 0 6px; letter-spacing: 0.03em; line-height: 1.5; }
.hd-sum { font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; }
.hd-go { margin-top: 9px; font-size: 11.5px; color: #9C7474; }

/* 搜索框（自绘放大镜，不用系统默认框）
   注意：整页是「可滚动区 + 内部若干定高条」，凡定高条都必须 flex-shrink:0 ——
   否则会被 flex 布局压扁（实测 400 宽下分类条被从 34px 压到 18px，文字被裁一半）。 */
.help-tut-bar { padding: 14px 18px 0; flex-shrink: 0; }
.help-search {
    display: flex; align-items: center; gap: 9px;
    padding: 0 12px; height: 42px; flex: 0 0 42px; border-radius: 12px;
    background: var(--surface-solid); border: 1px solid var(--help-line);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.help-search:focus-within { border-color: var(--help-rose); box-shadow: 0 0 0 3px var(--rose-glow); }
.hs-ico {
    flex: 0 0 15px; width: 15px; height: 15px; border-radius: 50%;
    border: 1.5px solid var(--text-muted); position: relative; opacity: 0.85;
}
.hs-ico::after {
    content: ''; position: absolute; right: -4px; bottom: -3px; width: 6px; height: 1.5px;
    background: var(--text-muted); border-radius: 1px; transform: rotate(45deg);
}
.help-search-input {
    flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent;
    font-family: var(--font-body); font-size: 13.5px; color: var(--text-primary);
    -webkit-appearance: none;
}
.help-search-input::placeholder { color: var(--text-muted); }
.hs-clear {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent;
    color: var(--text-muted); display: none; align-items: center; justify-content: center;
    transition: transform 0.2s ease;
}
.help-search.has .hs-clear { display: flex; }
.hs-clear:active { transform: scale(0.88); }

/* 分类（横向滑动，不换行；flex-shrink:0 见上） */
.help-cats {
    display: flex; align-items: center; gap: 7px; overflow-x: auto; overflow-y: hidden;
    padding: 12px 18px 6px; flex-shrink: 0; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 右侧渐隐：最后那个标签是「滑出来的」，硬切边看着像被裁断 */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.help-cats::-webkit-scrollbar { display: none; }
.help-cat {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 16px; font-family: var(--font-body);
    font-size: 12.5px; color: var(--text-secondary);
    border: 1px solid var(--help-line); background: transparent;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.help-cat .hc-n {
    font-size: 10.5px; color: var(--text-muted);
    background: rgba(196, 168, 106, 0.14); border-radius: 9px; padding: 1px 5px;
}
.help-cat.active {
    background: var(--help-rose-bg); color: #8E6B6B; border-color: rgba(214, 178, 178, 0.55); font-weight: 600;
}
.help-cat.active .hc-n { background: rgba(201, 168, 168, 0.28); color: #8E6B6B; }
.help-cat.hc-unread { border-style: dashed; }
.help-cat.active { z-index: 2; }
/* 按下去要立刻有反应：轻微下沉 + 颜色变深（松手自己弹回来） */
.help-cat:active { transform: scale(0.95); background: rgba(201, 168, 168, 0.22); }

/* ---------- 点起来的手感（2028-09 甲方：整体触控不舒服） ----------
   a) 全站这套：去掉安卓/苹果那一下灰蓝色的点击高光、去掉双指缩放的 300ms 延迟；
   b) 按下去要有反馈：各元素原有的 :active 规则更具体、按 CSS 优先级生效，这里只补
      那些原本没有反馈的（检测项、教程详情里的按钮等），不覆盖已经做好的。 */
.help-overlay, .help-tut-overlay, .help-float, .help-path, .hlr-btn {
    -webkit-tap-highlight-color: transparent;
}
.help-path, .hlr-btn, .help-back, .help-primary, .help-mini-btn, .help-end-btn, .help-send,
.help-quick-btn, .help-sug, .help-tut-check, .hs-clear, .hts-btn, .hts-x,
.help-tut-card, .help-daily, .help-cat, .hdp-x,
.help-detect-item, .help-search, .help-input, .hf-mini, .hf-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition-property: transform, background, color, box-shadow, opacity, border-color;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.help-detect-item:active { transform: scale(0.99); background: var(--help-rose-bg); }
.help-search:active { border-color: rgba(214, 178, 178, 0.5); }

/* ---------- 分类/难度两排（2028-09 甲方：问题库从新手到进阶 + 点下去要有手感） ----------
   1) 两排各自横向滑动、不换行；第一排＝难度（全部/基础/中等/高级/还没看），第二排＝模块。
   2) 选中标记那个小圆点（.help-cat-ind）跟着选中的那颗平滑滑过去——它绝对定位在
      .help-tut-rows 里（不是某一条 bar 里），所以两排之间切换也会平滑地上下移动。
   3) 切筛选只换下面的列表（_helpRefreshTutList），这两排一个字都不重建 → 不闪、位置不跳。 */
.help-tut-rows { position: relative; flex-shrink: 0; }
.help-cat-ind {
    position: absolute; left: 0; top: 0; height: 0; border-radius: 16px;
    background: var(--help-rose-bg); border: 1px solid rgba(214, 178, 178, 0.55);
    opacity: 0; pointer-events: none;
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}
.help-cat-ind.on { opacity: 1; }
.help-cats { position: relative; }
.help-cat { position: relative; z-index: 1; background: transparent; }
.help-cat.active { background: transparent; }
.help-lvls .help-cat[data-hf="lv1"] .hc-n { background: rgba(140, 168, 140, 0.16); }
.help-lvls .help-cat[data-hf="lv2"] .hc-n { background: rgba(196, 168, 106, 0.18); }
.help-lvls .help-cat[data-hf="lv3"] .hc-n { background: rgba(201, 168, 168, 0.20); }

/* 卡片上的难度小标签：跟分类标签并排，靠颜色区分深浅（浅色底上够对比） */
.htc-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.htc-tags .htc-cat { margin-bottom: 0; }
.htc-lv {
    display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
    padding: 2px 7px; border-radius: 6px; border: 1px solid transparent;
}
.htc-lv.lv-1 { color: #58755C; background: rgba(140, 168, 140, 0.14); border-color: rgba(140, 168, 140, 0.32); }
.htc-lv.lv-2 { color: #8A6E33; background: rgba(196, 168, 106, 0.15); border-color: rgba(196, 168, 106, 0.34); }
.htc-lv.lv-3 { color: #8E6B6B; background: rgba(201, 168, 168, 0.16); border-color: rgba(214, 178, 178, 0.42); }

/* 教程列表外壳（搜索框 + 两排分类 + 列表）：切筛选只换里面那份列表，外壳一个字都不重建 */
.help-tut-shell { display: block; }

/* 教程详情头部那个档位小标签（跟分类并排，颜色区分深浅） */
.hts-lv {
    display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.1em; padding: 2px 7px; border-radius: 6px; vertical-align: 1px;
    border: 1px solid transparent;
}
.hts-lv.lv-1 { color: #58755C; background: rgba(140, 168, 140, 0.14); border-color: rgba(140, 168, 140, 0.32); }
.hts-lv.lv-2 { color: #8A6E33; background: rgba(196, 168, 106, 0.15); border-color: rgba(196, 168, 106, 0.34); }
.hts-lv.lv-3 { color: #8E6B6B; background: rgba(201, 168, 168, 0.16); border-color: rgba(214, 178, 178, 0.42); }

/* 切筛选：列表这一层极短地淡一下再换（一眨眼的时间，不是「啪」地闪过去） */
#help-tut-list-wrap { transition: opacity 0.12s ease; }
#help-tut-list-wrap.is-swapping { opacity: 0; }

.help-list-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 18px 8px; }
.hlh-t { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.05em; }
.hlh-n { font-size: 11px; color: var(--text-muted); }

.help-tut-list { padding: 0 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.help-tut-card {
    position: relative; display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 46px 14px 15px; border-radius: 12px; cursor: pointer;
    background: var(--surface-solid); border: 1px solid var(--help-line);
    box-shadow: var(--shadow-xs), var(--shadow-sm);
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.22s ease, box-shadow 0.22s ease;
}
.help-tut-card::before {
    content: ''; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 2.5px;
    border-radius: 0 3px 3px 0; background: var(--help-rose); opacity: 0;
    transition: opacity 0.22s ease;
}
.help-tut-card:active { transform: scale(0.985); box-shadow: var(--shadow-md); }
.help-tut-card.read { opacity: 0.66; }
.help-tut-card.read::before { opacity: 0.28; }
.htc-main { min-width: 0; flex: 1; }
.htc-cat {
    display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
    color: var(--gold-dark); background: rgba(196, 168, 106, 0.13);
    padding: 2px 7px; border-radius: 6px; margin-bottom: 7px;
}
.htc-title { font-size: 14.5px; font-weight: 600; color: var(--text-primary); line-height: 1.5; letter-spacing: 0.02em; }
.htc-sum { font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; margin-top: 5px; }
.htc-where {
    display: flex; align-items: center; gap: 4px; margin-top: 8px;
    font-size: 11px; color: var(--text-muted);
}
.htc-where .htw-ico { display: flex; color: var(--rose); opacity: 0.6; }
.help-tut-check {
    position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding: 0;
    border: 1px solid var(--help-line); background: transparent; color: transparent;
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.help-tut-check.on {
    background: var(--sage); border-color: var(--sage); color: #fff;
    box-shadow: var(--shadow-xs), 0 0 0 3px var(--sage-light);
}
.help-tut-check:active { transform: scale(0.88); }

/* 教程详情（挂在 #app 上的独立层 · Example 10：遮罩淡入 + 卡片从底边滑上来） */
.help-tut-overlay {
    position: absolute; inset: 0; z-index: 1660; display: flex; align-items: center; justify-content: center;
    padding: calc(22px + var(--safe-top, 0px)) 16px calc(22px + var(--safe-bottom, 0px));
    background: rgba(30, 28, 26, 0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s ease;
}
.help-tut-overlay.show { opacity: 1; visibility: visible; }
/* 退场：只摘 .show 不够——遮罩要真的淡下去、卡片要真的滑回底边（两拍由 JS 定格起点） */
.help-tut-overlay.is-closing { opacity: 0; visibility: hidden; pointer-events: none; }
.help-tut-sheet {
    position: relative; width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px 20px 18px; border-radius: 14px; background: var(--surface-solid);
    box-shadow: var(--shadow-md), var(--shadow-lg);
    transform: translateY(26px) scale(0.99);
    transition:
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.32s ease;
}
.help-tut-overlay.show .help-tut-sheet { transform: none; }
.help-tut-overlay.is-closing .help-tut-sheet { transform: translateY(26px) scale(0.99); opacity: 0; }
.hts-x {
    position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
    border: none; background: transparent; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}
.hts-x:active { transform: scale(0.9); background: var(--rose-light); }
.hts-cat {
    display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
    color: var(--gold-dark); background: rgba(196, 168, 106, 0.13);
    padding: 3px 8px; border-radius: 6px;
}
.hts-title {
    font-family: var(--font-body); font-size: 19px; font-weight: 600; line-height: 1.45;
    color: var(--text-primary); letter-spacing: 0.02em; margin: 11px 0 10px; padding-right: 28px;
}
.hts-rule {
    width: 46px; height: 1px; background: var(--gold); opacity: 0.45; margin-bottom: 12px;
}
.hts-sum { font-size: 13.5px; line-height: 1.85; color: var(--text-secondary); margin: 0; }
.hts-sec { position: relative; margin: 22px 0 13px; padding-top: 15px; font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.08em; }
.hts-sec::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--help-line); }
.hts-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hts-steps li { display: flex; gap: 10px; align-items: flex-start; }
.hts-n {
    flex: 0 0 21px; width: 21px; height: 21px; border-radius: 50%; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: #9C7474;
    background: var(--help-rose-bg); border: 1px solid rgba(214, 178, 178, 0.42);
}
.hts-st { flex: 1; font-size: 13.5px; line-height: 1.7; color: var(--text-primary); }
.hts-tip {
    margin-top: 18px; padding: 12px 14px; border-radius: 10px;
    background: var(--sage-light); border: 1px solid rgba(168, 184, 160, 0.32);
}
.hts-tip b { display: block; font-weight: 600; font-size: 12px; color: #5C6B54; letter-spacing: 0.1em; margin-bottom: 6px; }
.hts-tip span { font-size: 12.5px; line-height: 1.75; color: var(--text-secondary); }
.hts-where {
    display: flex; align-items: center; gap: 5px; margin-top: 14px;
    font-size: 11.5px; color: var(--text-muted);
}
.hts-where .htw-ico { display: flex; color: var(--rose); opacity: 0.6; }
.hts-foot { display: flex; gap: 10px; margin-top: 20px; }
.hts-btn {
    flex: 1; padding: 12px; border: none; border-radius: 12px; font-family: var(--font-body);
    font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em;
    background: var(--help-rose); color: #fff;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}
.hts-btn.ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--help-line); font-weight: 500; }
.hts-btn:active { transform: scale(0.96); opacity: 0.92; }

/* 每天上线的小浮窗（跟日程提醒同一种感觉） */
.help-daily-pop {
    position: absolute; top: calc(8px + var(--safe-top, 0px)); left: 12px; right: 12px; z-index: 1590;
    padding: 14px 16px; border-radius: 12px; cursor: pointer;
    background: var(--surface-solid); border: 1px solid var(--help-line);
    box-shadow: var(--shadow-md), var(--shadow-lg);
    opacity: 0; transform: translateY(-12px);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.help-daily-pop.show { opacity: 1; transform: none; }
.hdp-top { display: flex; align-items: center; }
.hdp-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; color: var(--gold-dark); }
.hdp-x { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.hdp-x:active { transform: scale(0.9); }
.hdp-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 7px 0 5px; line-height: 1.5; }
.hdp-sum { font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; }
.hdp-foot { margin-top: 9px; font-size: 11.5px; color: #9C7474; }

/* ---------- 七、检测流程 ---------- */
.hd-summary {
    display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
    padding: 15px 16px; border-radius: 12px;
    background: var(--sage-light); border: 1px solid rgba(168, 184, 160, 0.3);
}
.hd-summary.has-warn { background: rgba(196, 168, 106, 0.12); border-color: rgba(196, 168, 106, 0.34); }
.hd-summary.has-bad { background: var(--help-rose-bg); border-color: rgba(214, 178, 178, 0.42); }
.hds-num {
    flex: 0 0 auto; font-family: var(--font-display); font-size: 30px; font-weight: 600;
    line-height: 1; color: var(--sage); font-style: normal;
}
.hd-summary.has-warn .hds-num { color: var(--gold-dark); }
.hd-summary.has-bad .hds-num { color: #B58383; }
.hds-txt { min-width: 0; }
.hds-title { font-size: 14.5px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.03em; }
.hds-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; }

.help-detect-list { display: flex; flex-direction: column; gap: 9px; }
.help-detect-item {
    display: flex; gap: 11px; padding: 13px 14px; border-radius: 10px;
    background: var(--surface-solid); box-shadow: var(--shadow-xs), var(--shadow-sm);
    border: 1px solid var(--help-line); border-left: 3px solid var(--sage);
}
.help-detect-item.warn { border-left-color: var(--gold); }
.help-detect-item.bad {
    border-left-color: #C08A8A; background: linear-gradient(90deg, rgba(201, 168, 168, 0.10), var(--surface-solid) 60%);
}
.hdi-mark {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
    background: var(--sage-light); color: var(--sage);
}
.help-detect-item.warn .hdi-mark { background: var(--gold-light); color: var(--gold-dark); }
.help-detect-item.bad .hdi-mark { background: var(--rose-light); color: #B58383; }
.hdi-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.65; }
.hdi-txt b { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.04em; }
.hdi-txt i { font-style: normal; font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.7; }
.help-detect-foot { display: flex; gap: 10px; margin-top: 16px; }
/* 「帮我接上」那一块（2028-09：检测发现系统里已有可用钥匙、只是没接上时给一个出口） */
.help-detect-fix {
    margin-top: 14px; padding: 13px 14px; border-radius: 12px;
    background: var(--help-rose-bg); border: 1px solid rgba(214, 178, 178, 0.4);
}
.hdf-t { font-size: 13px; line-height: 1.7; color: var(--text-primary); margin-bottom: 10px; }
.hdf-note { margin-top: 8px; font-size: 11.5px; line-height: 1.65; color: var(--text-muted); }
.help-detect-note { margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); }
.help-detect-note:empty { display: none; }
.help-detect-note.ok { color: #6E7D66; }
.help-detect-note.bad { color: #B58383; }
.help-detect-tip { margin-top: 16px; font-size: 12px; line-height: 1.8; color: var(--text-muted); }

/* ---------- 八、解答中锁住聊天：输入区灰掉 + 提示条 ---------- */
#input-area.help-locked {
    position: relative;
    opacity: 0.55; filter: grayscale(0.35);
    pointer-events: none;
}
/* 底距 = 聊天输入区高度（约 140px，含安全区）——浮层定高是定位问题的高发区，
   这里用固定底距而不是靠内容撑：手机竖屏任何高度都不会压到输入栏 */
.help-lock-banner {
    position: absolute; left: 12px; right: 12px; bottom: calc(140px + var(--safe-bottom, 0px)); z-index: 1580;
    display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 12px;
    background: var(--surface-solid); border: 1px solid rgba(214, 178, 178, 0.5);
    box-shadow: var(--shadow-md), 0 0 20px rgba(200, 160, 160, 0.18);
    cursor: pointer;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.help-lock-banner.show { opacity: 1; transform: none; }
.help-lock-banner:active { transform: scale(0.99); }
.help-lock-banner .hlb-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--rose); animation: helpPulse 1.8s ease-in-out infinite; }
.help-lock-banner .hlb-txt { flex: 1; font-size: 12.5px; color: var(--text-primary); }
.help-lock-banner .hlb-go { font-size: 12.5px; color: #9C7474; font-weight: 600; }

/* ---------- 九、底部浮动窗（离开百科页继续聊） ---------- */
.help-float {
    position: absolute; left: 12px; top: 200px; width: 320px; height: 300px;
    z-index: 1620; display: flex; flex-direction: column;
    border-radius: 14px; overflow: hidden;
    background: var(--surface-solid); border: 1px solid var(--help-line);
    box-shadow: var(--shadow-md), var(--shadow-lg);
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.24s ease;
}
.help-float.show { opacity: 1; transform: none; }
.help-float.dragging, .help-float.resizing {
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--rose-glow);
    transition: opacity 0.2s ease;
}
.hf-head {
    position: relative; display: flex; align-items: center; gap: 9px; padding: 10px 12px;
    background: linear-gradient(140deg, rgba(201, 168, 168, 0.16), rgba(196, 168, 106, 0.12));
    cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
    flex-shrink: 0;
}
.hf-head:active { cursor: grabbing; }
.hf-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--rose); animation: helpPulse 1.8s ease-in-out infinite; }
.hf-titles { flex: 1; display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.hf-title { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.06em; }
.hf-en { font-family: var(--font-display); font-style: italic; font-size: 11px; color: var(--gold); opacity: 0.8; }
.hf-min {
    width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent;
    color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease;
}
.hf-min:active { transform: scale(0.88); background: rgba(255, 255, 255, 0.5); }
.hf-body {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 11px 12px; display: flex; flex-direction: column; gap: 9px;
    background: var(--bg-chat);
}
.hf-body .help-row { gap: 6px; }
.hf-body .help-av { flex: 0 0 22px; width: 22px; height: 22px; font-size: 10px; }
.hf-body .help-bubble-wrap { max-width: 88%; }
.hf-body .help-bubble { padding: 8px 11px; border-radius: 10px; }
.hf-body .help-bubble-txt { font-size: 12.5px; line-height: 1.7; }
.hf-foot {
    display: flex; gap: 8px; padding: 9px 12px; flex-shrink: 0;
    border-top: 1px solid var(--help-line); background: var(--surface-solid);
}
.hf-btn {
    flex: 1; padding: 9px; border-radius: 12px; font-family: var(--font-body);
    font-size: 12.5px; border: 1px solid var(--help-line); background: transparent; color: var(--text-secondary);
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease, color 0.2s ease;
}
.hf-btn.primary { background: var(--help-rose-bg); color: #8E6B6B; border-color: rgba(214, 178, 178, 0.55); font-weight: 600; }
.hf-btn:active { transform: scale(0.96); }
/* 右下角改大小的把手（按住拖动）：做成带浅底的小圆角块，一眼看得出「这里能拉」 */
.hf-resize {
    position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px;
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 0 6px 6px 0; border-radius: 10px 0 14px 0;
    cursor: nwse-resize; touch-action: none;
    color: var(--text-muted); background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}
.hf-resize span {
    width: 10px; height: 10px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    border-radius: 0 0 3px 0; opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.hf-resize:active, .help-float.resizing .hf-resize { background: var(--help-rose-bg); color: var(--help-rose); }
.hf-resize:active span, .help-float.resizing .hf-resize span { opacity: 1; transform: scale(1.08); }

/* 收成细条：只留标题那一行 */
.help-float.mini { height: 40px !important; }
.help-float.mini .hf-body,
.help-float.mini .hf-foot,
.help-float.mini .hf-resize { display: none; }
.help-float.mini .hf-head { cursor: pointer; }
.help-float.mini .hf-min svg { transform: rotate(180deg); }

/* 他在带路时：目标区域轻轻描一下边（不改布局） */
.help-hl { animation: helpHl 1.3s ease-in-out 2; }
@keyframes helpHl {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(201, 168, 168, 0); }
    50% { box-shadow: inset 0 0 0 2px rgba(201, 168, 168, 0.55); }
}

/* ---------- 十、结束后的总结卡（聊天界面里，居中、不带任何人头像） ---------- */
.help-summary-card {
    width: 100%; padding: 14px 16px; border-radius: 12px;
    background: linear-gradient(140deg, rgba(201, 168, 168, 0.14), rgba(196, 168, 106, 0.10));
    border: 1px solid var(--help-line);
    box-shadow: var(--shadow-xs), var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.hsc-head { display: flex; align-items: baseline; gap: 8px; }
.hsc-en { font-family: var(--font-display); font-style: italic; font-size: 11px; letter-spacing: 0.1em; color: var(--gold); opacity: 0.9; }
.hsc-zh { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.05em; }
.hsc-asks { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.hsc-q {
    font-size: 11px; color: var(--text-secondary); padding: 4px 9px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.6); border: 1px solid var(--help-line);
}
.hsc-body {
    margin-top: 10px; padding-top: 10px; font-size: 12.5px; line-height: 1.8;
    color: var(--text-primary); white-space: pre-wrap; word-break: break-word;
    border-top: 1px dashed rgba(196, 168, 106, 0.35);
}

/* ---------- 十一、窄屏 ≤370px 收一档 ---------- */
@media (max-width: 370px) {
    .help-entry-hero { padding: 14px 14px 4px; }
    .help-rooms { padding: 10px 14px 16px; }
    .hlr { padding: 14px 14px 14px; }
    .hlr-name { font-size: 17px; }
    .hlr-sub { font-size: 12.5px; }
    .help-path { padding: 13px 14px; }
    .help-path.is-quiet { padding: 12px 14px; }
    .help-page { padding: 14px 14px 4px; }
    .help-hero-zh { font-size: 19px; }
    .help-hero-lead { font-size: 12.5px; }
    .help-thread { padding: 12px 12px 6px; }
    .help-bubble-wrap { max-width: 86%; }
    .help-bubble-txt { font-size: 13px; }
    .help-compose { padding: 9px 12px calc(10px + var(--safe-bottom, 0px)); }
    .help-daily { margin: 12px 14px 0; padding: 13px 14px; }
    .hd-title { font-size: 14.5px; }
    .help-tut-bar { padding: 12px 14px 0; }
    .help-cats { padding: 10px 14px 6px; }
    .help-list-head { padding: 8px 14px 8px; }
    .help-tut-list { padding: 0 14px 20px; }
    .help-tut-card { padding: 13px 42px 13px 13px; }
    .help-tut-sheet { padding: 20px 16px 16px; }
    .hts-title { font-size: 17.5px; }
    .help-float { left: 8px; }
    .help-lock-banner { left: 8px; right: 8px; }
    .help-title { font-size: 16px; }
    .help-sec-head { flex-wrap: wrap; }
}

/* ---------- 十二、暗色 ---------- */
@media (prefers-color-scheme: dark) {
    .help-path, .help-tut-card, .help-detect-item, .help-tut-sheet,
    .help-daily-pop, .help-float, .help-sug, .help-quick-btn, .help-search, .help-input,
    .help-av.is-me, .help-compose {
        background: var(--surface-solid); border-color: rgba(196, 168, 106, 0.2);
    }
    .help-float { background: var(--surface-solid); }
    .help-float .hf-head { background: linear-gradient(140deg, rgba(201, 168, 168, 0.12), rgba(196, 168, 106, 0.08)); }
    .hf-body { background: var(--bg-chat); }
    .help-primary.ghost, .help-mini-btn, .help-end-btn { color: #D6B2B2; border-color: rgba(214, 178, 178, 0.35); }
    .help-av.is-him { color: #E2C6C6; }
    .help-av.is-me { color: #E6C9C9; }
    .hts-n { color: #E6C9C9; }
    .hts-tip { background: rgba(168, 184, 160, 0.10); }
    .hts-tip b { color: #B8C8B0; }
    .hds-num { color: var(--sage); }
    .hd-summary.has-bad .hds-num, .help-detect-note.bad { color: #D6AFAF; }
    .help-detect-note.ok { color: #B8C8B0; }
    .help-tut-check.on { box-shadow: var(--shadow-xs), 0 0 0 3px rgba(168, 184, 160, 0.18); }
}
[data-theme="dark"] .help-path,
[data-theme="dark"] .help-tut-card,
[data-theme="dark"] .help-detect-item,
[data-theme="dark"] .help-tut-sheet,
[data-theme="dark"] .help-daily-pop,
[data-theme="dark"] .help-float,
[data-theme="dark"] .help-lock-banner { background: var(--surface-solid); border-color: rgba(196, 168, 106, 0.2); }
[data-theme="dark"] .hsc-q { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .help-primary.ghost,
[data-theme="dark"] .help-mini-btn,
[data-theme="dark"] .help-end-btn { color: #D6B2B2; border-color: rgba(214, 178, 178, 0.35); }

/* ---------- 十三、iOS standalone（加到主屏）铺满层高度兜底（长期规则 #35） ---------- */
@media (display-mode: standalone) and (max-width: 767px) {
    .help-overlay { bottom: auto; height: 100vh; }
}

/* ============================================================
   十四、入口页与统一二级页外壳的接缝（W3）
   ------------------------------------------------------------
   外壳本体（.mysec-head / .mysec-body / .mysec-page）的定义**只有一份**，在 css/panels/panels-my-home.css，
   本文件绝不复制第二份。这里只写「百科入口页自己那点差异」：正文的左右留白自己给（外壳只管滚动），
   以及两侧按钮与正文的受力关系。类名与外壳保持一致，就是为了别处一眼能看出它属于哪一套。
   ============================================================ */
#sub-help.mysec-page .mysec-body { padding-left: 0; padding-right: 0; }
#sub-help .mysec-body .help-entry-hero { padding-left: 20px; padding-right: 20px; }
#sub-help .mysec-body .help-rooms { padding-left: 20px; padding-right: 20px; }
#sub-help .mysec-body .help-back { color: var(--text-secondary); }
#sub-help .mysec-body .mysec-back { color: var(--text-secondary); }

/* ---------- 十五、「今日推荐」这一行是**后到的**：走到位时轻轻浮上来（Example 07 内容抵达） ---------- */
.help-daily-banner.is-revealing { animation: helpReveal 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes helpReveal {
    from { opacity: 0; transform: translateY(7px); filter: blur(1.5px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- 十六、reduced-motion：只留透明度，位移与模糊一律去掉（Motion 规范硬要求） ---------- */
@media (prefers-reduced-motion: reduce) {
    .help-overlay,
    .help-tut-overlay,
    .help-tut-sheet,
    .help-page,
    .help-page-in,
    .help-page-out,
    .help-daily-pop,
    .help-float,
    .help-cat-ind,
    .hlr-btn,
    .help-path { transition-duration: 0.01ms !important; }
    .help-overlay { transform: none; }
    .help-row-in,
    .help-daily-banner.is-revealing,
    .help-daily-pop.show,
    .help-float.show { animation: none; }
}