/* ============================================================
   微步智企 · H5「APP 化」交互增强（v1.0.0 · 2026-10-03 · 设计文档 §29）
   ------------------------------------------------------------
   三项能力（**纯渐进增强，不改变整页跳转架构、不引入 SPA 路由**）：
     ① 页面入场转场（淡入 + 轻微上移）
     ② 边缘侧滑返回（JS 识别手势后调 history.back()，本文件只提供提示条样式）
     ③ 下拉刷新（JS 负责手势与刷新，本文件提供指示器样式）

   ⛔ 作用域：仅 ≤768px。桌面端零影响（含 :hover 与所有布局）。
   ⛔ 大屏锁定：`#adminScreen` 所在容器**不参与**页面转场 ——
      大屏是驾驶舱、其动效另有硬约束（见 MEMORY 大屏锁定铁律），
      给整页加动画会与其内部动效打架。故下方用 :has() 明确排除。
   ⛔ 注释内禁止出现块注释起止符号（§26 踩过：会提前闭合导致整段规则失效）。

   回退：删除本文件 + 各页 2 行引用 ⇒ 完全还原（纯附加层）。
   ============================================================ */

@media (max-width: 768px) {

    /* ---------- ① 页面入场转场 ----------
       规范做法：默认尊重系统「减弱动效」设置；需要强制开启时给 <html> 加
       data-page-motion="on" 覆盖即可（不用改本文件）。 */
    @media (prefers-reduced-motion: no-preference) {
        .main-content {
            animation: appPageIn .22s cubic-bezier(.2, .7, .3, 1) backwards;
        }
    }
    html[data-page-motion="on"] .main-content {
        animation: appPageIn .22s cubic-bezier(.2, .7, .3, 1) backwards;
    }
    @keyframes appPageIn {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
    }
    /* 大屏所在容器不参与转场（铁律：大屏动效独立，禁止外部动画干扰） */
    .main-content:has(#adminScreen) { animation: none !important; }

    /* ---------- ③ 下拉刷新指示器 ----------
       由 JS 注入并控制 transform（按下拉进度露出）。
       z-index 低于 TabBar(999) 与抽屉，避免遮挡导航。 */
    .app-ptr {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        transform: translateY(-56px);
        font-size: 13px;
        color: var(--text-3, #8a8f9c);
        background: var(--bg-page, #f6f7fb);
        pointer-events: none;
        z-index: 890;
    }
    .app-ptr-spin {
        width: 15px; height: 15px;
        border: 2px solid var(--divider, #e5e6eb);
        border-top-color: var(--brand, #5B6CF9);
        border-radius: 50%;
        transform: rotate(0deg);
    }
    /* 达到阈值（松手即刷新）时旋转箭头提示 */
    .app-ptr.ready .app-ptr-spin { transform: rotate(180deg); }
    /* 刷新中：持续旋转（装饰性循环动画，豁免 400ms 上限） */
    .app-ptr.loading .app-ptr-spin {
        animation: appPtrSpin .7s linear infinite;
    }
    @keyframes appPtrSpin {
        to { transform: rotate(360deg); }
    }

    /* ---------- ② 边缘侧滑返回的轻提示 ----------
       只在手势识别通过时淡入；**不做页面跟手位移**（避免与 TabBar、抽屉等
       fixed 元素产生布局叠加风险，零副作用优先）。 */
    .app-edge-hint {
        position: fixed;
        left: 0; top: 50%;
        transform: translateY(-50%) scale(.85);
        width: 30px; height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 26px 26px 0;
        background: rgba(17, 20, 45, .32);
        color: #fff;
        opacity: 0;
        pointer-events: none;
        transition: opacity .14s ease, transform .14s ease;
        z-index: 895;
    }
    .app-edge-hint.on { opacity: 1; transform: translateY(-50%) scale(1); }
    .app-edge-hint svg { width: 16px; height: 16px; display: block; }
}