/* ============================================================
   mobile-v3.css — 移动端/软键盘模式重构层（v3·扁平化设计基调）
   ============================================================
   定位：独立覆盖层，须在 style.css 之后引入方可同特异性胜出。
   基调：极简+美观——按键扁平化、按压即时背景反馈、去拟物装饰、
        触控目标≥44px、4px 间距网格；色彩/圆角消费 style.css
        既有 DS token（--key-bg/--key-active/--accent-color 等），
        本层自有变量以 --phoi- 前缀隔离。
   来源：t51 审计清单 UI-M1..M10 + 扁平化补遗。
   集成前提（由集成者执行，本文件不改动其他文件）：
   - ⚠️t74 裁决：viewport 不得加 viewport-fit=cover / interactive-widget=resizes-content——
     页内自绘键盘(200px fixed)+ICB 收缩属双重补偿冲突（键盘出屏+中部空白，用户实测），
     已于 index.html 回退为默认 resizes-visual；env 安全区随之归零由本文件 @supports
     链自动回退，键盘恰回原 200px。若未来重做 OS 键盘适配需整体重设计而非加参数。
   ============================================================ */

:root {
    /* 键盘基准高度（不含安全区）——补全框/横屏联动共用；t75追加：200→220 扁平化后恢复按键厚度 */
    --phoi-kb-height: 220px;
    /* B1 修复（t59 审查β）：默认字面量回退值——env() 装进自定义属性再进 calc
       在 Chromium<69 会 invalid at computed-value time 导致键盘容器高度塌陷；
       仅在 @supports 探测通过的支持引擎才换装真 env 值，旧引擎恒为 0px 字面量，
       calc 展开恒有效 → 回退固定高度不塌陷 */
    --phoi-safe-b: 0px;
    --phoi-safe-t: 0px;
    /* 触控目标准则尺寸 */
    --phoi-touch-min: 44px;
}
@supports (top: env(safe-area-inset-top, 0px)) {
    :root {
        --phoi-safe-b: env(safe-area-inset-bottom, 0px);
        --phoi-safe-t: env(safe-area-inset-top, 0px);
    }
}

/* ------------------------------------------------------------
   M1 键盘容器：安全区适配 + 高度变量化（原 :689-703 固定200px）
   [t9#①] 包 @media(pointer:coarse)：桌面端不再吃本层键盘样式，
   回退 style.css 基础规则，不依赖 js display 兜底
   ------------------------------------------------------------ */
@media (pointer: coarse) {
    #keyboard-container {
        height: calc(var(--phoi-kb-height) + var(--phoi-safe-b));
        /* 扁平化：去容器重装饰，保留一条分隔线即可 */
        padding: 4px 4px calc(4px + var(--phoi-safe-b));
        background-color: var(--bg-color);
        border-top: 1px solid var(--panel-border);
        box-shadow: none;
    }
}

/* ------------------------------------------------------------
   M2 补全框：bottom 与键盘高度联动（原硬编码 bottom:200px :955）
   t69 回归修复：手机端键盘弹出时补全项字体巨大不可用——
   根因非任何 font-size 规则（style.css/mobile-v3/theme-v3 均未设
   大字号），而是 Android Chromium 文字自动放大(font boosting)：
   本条带是全宽单行 fixed 元素，v3 viewport 新增 viewport-fit=cover
   + interactive-widget=resizes-content(index.html:5) 后视口行为变化，
   键盘弹出引发 ICB 重算触发 boost。以 text-size-adjust:100% 定点
   关停本条带自动放大（保守，不影响其余页面文字）。
   ------------------------------------------------------------ */
@media (pointer: coarse) {
    #mobile-autocomplete-container {
        bottom: calc(var(--phoi-kb-height) + var(--phoi-safe-b));
        height: var(--phoi-touch-min); /* 40px → 44px 达标 */
        padding: 0 8px;                /* 4px 网格 */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* ------------------------------------------------------------
   P0-C 预览态死区消灭：3 行预览贴键盘上方，不再悬半空
   原状：style.css #lines-container 仅 height:80px 随文档流悬在页面中部，
   而软键盘 fixed 于底部 → 预览与键盘之间留出大片不可交互死区。
   现改为 fixed 锚定于键盘上缘（bottom 沿用 --phoi-kb-height/--phoi-safe-b
   变量链，横屏 170px 收敛自动联动）；left:48px 承接侧栏轨道，
   故须清掉 style.css 的 margin-left:48px 避免双重偏移。
   补全框（M2）bottom 同链——弹出时覆盖预览区顶部属预期层级。
   [t9#①] 包 @media(pointer:coarse)：fixed 锚定仅触屏生效，桌面端保持文档流。
   [t22#⑨·P1] 锚定改 body.kb-open 类联动：JS 键盘显隐时同步切换 body.kb-open
   （script.js 初始化/toggle 三处），键盘不可见（外接键盘/JS 收起）时预览回文档流，
   不再被钉在距底 224px 处形成死区。
   ------------------------------------------------------------ */
@media (pointer: coarse) {
    body.kb-open #lines-container {
        position: fixed;
        left: 48px;
        right: 0;
        bottom: calc(var(--phoi-kb-height) + var(--phoi-safe-b));
        margin-left: 0;
    }
}

/* ------------------------------------------------------------
   E1 修复（审查δ）：触控目标规则仅对粗指针（触屏）设备生效——
   原裸写泄漏桌面端（鼠标用户不需要 44px 大按钮）。
   分工仲裁（队长裁定）：close-btn 桌面 28px 由 theme-v3 管，
   触屏 44px 由本文件管。
   M3 侧栏按钮 ≥44px（原 32×32 style.css:331-345）
   ------------------------------------------------------------ */
@media (pointer: coarse) {
    .sidebar-button {
        width: var(--phoi-touch-min);
        height: var(--phoi-touch-min);
        border-radius: var(--r-s, 4px); /* t69：6px 越档归 DS 三档（t61 C1） */
    }

    /* M5 关闭按钮 ≥44px（原 30×30 style.css:857-867）——luogu 模态唯一关闭途径 */
    .close-btn {
        width: var(--phoi-touch-min);
        height: var(--phoi-touch-min);
        font-size: 28px;
        border-radius: 50%;
    }

    /* M7 移动滚动按钮 ≥44px + 安全区（原 40×40/top60 style.css:977-997） */
    .up-btn-mobile,
    .down-btn-mobile {
        width: var(--phoi-touch-min);
        height: var(--phoi-touch-min);
    }
    .up-btn-mobile {
        top: calc(56px + var(--phoi-safe-t)); /* 56=52工具条+4网格 */
    }
    .down-btn-mobile {
        bottom: calc(var(--phoi-kb-height) + var(--phoi-safe-b) + 16px);
    }
}

/* ------------------------------------------------------------
   按键扁平化 + 按压反馈（UI 施工规则①②）：
   - 背景色瞬变维持零延迟（即时性）
   - 键面 scale(0.97) 用 transition(可中断) 120ms ease-out，非 keyframes
   原 :704-706 / 浅色 :1919-1930 的 box-shadow 全部去除
   ------------------------------------------------------------ */
#keyboard-container .row {
    height: auto;
    flex: 1 1 0;
    margin-bottom: 4px; /* 4px 网格（原 2px） */
}
#keyboard-container .row:last-child {
    margin-bottom: 0;
}
#keyboard-container .key {
    margin: 0 2px;               /* 4px 网格半步（原 0 1px），键间总间隙4px */
    border-radius: var(--r-s, 4px); /* t69：6px 越档归 DS 三档（t61 C1） */
    box-shadow: none;            /* 去拟物影 */
    /* 仅 transform 走短过渡（可中断）；background 不设 transition 保持瞬变 */
    transition: transform 120ms ease-out;
}
#keyboard-container .key:active,
#keyboard-container .key.active {
    background-color: var(--key-active); /* 瞬变，无过渡 */
    box-shadow: none;
    transform: scale(0.97);      /* 规则①：键面按压微缩 */
}
/* 浅色主题下同样去影（覆盖 style.css :1923/:1929 的 #bbb 影） */
[data-theme="light"] #keyboard-container .key { box-shadow: none; }
[data-theme="light"] #keyboard-container .key:active,
[data-theme="light"] #keyboard-container .key.active { box-shadow: none; }

/* ------------------------------------------------------------
   M6 补全项：:active 即时反馈 + 触控面加宽（原 :965-974 仅 hover）
   ------------------------------------------------------------ */
.mobile-autocomplete-item {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;             /* 4px 网格 */
    min-width: var(--phoi-touch-min);
    justify-content: center;
    transition: none;
}
.mobile-autocomplete-item:active {
    opacity: 0.55;               /* 即时按压反馈（触屏可用，无过渡） */
}
/* 规则③：hover 类效果仅在精确指针设备生效（触屏不产生悬停粘滞） */
@media (hover: hover) and (pointer: fine) {
    .mobile-autocomplete-item:hover {
        text-decoration: none;   /* 扁平化：去下划线装饰，仅以透明度变化 */
        opacity: 0.75;
    }
}

/* ------------------------------------------------------------
   M8 横屏矮视口：压缩键盘占比，联动补全框。
   断点对齐（t64）：与 style.css 批5(:2554)统一为 max-height:500px
   单一断点（原本文件 520px 与之打架，500-520 区间两套规则不同步）；
   高度取 150px——本文件加载序在 style.css 之后，同特异性下此值生效，
   style.css:2555 的 160px 实际被覆盖（后续可由 style.css 归一删除）。
   ------------------------------------------------------------ */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    :root {
        --phoi-kb-height: 170px; /* t75追加：与竖屏 220 等比收敛（原 150）；[t21#F2] 加 pointer:coarse 限定——
                                    桌面矮横屏不再吃到 170px（行面回退走 style.css M8 的 fallback 值） */
    }
}

/* ------------------------------------------------------------
   规则④ prefers-reduced-motion：动画/过渡全降级（背景瞬变保留——非运动）
   规则⑤ 功能性规则（安全区/44px/变量联动）不受本块影响，优先级最高
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    #keyboard-container .key {
        transition: none;
    }
    #keyboard-container .key:active,
    #keyboard-container .key.active {
        transform: none;         /* 去缩放运动，仅剩背景瞬变反馈 */
    }
}

/* ------------------------------------------------------------
   M9 豁免记录：按键有效高度 ~37px 低于 44px 准则，维持现状——
   软键盘惯例（系统键盘同量级），扁平化下加高需牺牲可视行数，不值。
   ------------------------------------------------------------ */

/* M10 luogu 移动态贴底 sheet 为产品决策项，本层不做（见 t51 output）。 */