/* ============================================================
   权亚工作台 · 移动端设计系统 MOBILE_V21（2026-09-15）
   ------------------------------------------------------------
   原则：
   1) 拇指可达 —— 高频导航沉底（底部 TabBar），主操作吸底
   2) 一屏一事 —— 首屏 = 紧凑指标 + 主操作 + 列表入口
   3) 触摸目标 ≥ 44px，正文 ≥ 12px
   4) 桌面零回归 —— 全部规则包在 @media (max-width:768px)
   5) 不改业务逻辑 —— 纯表现层，JS 仅做导航壳（js/mobile-nav.js）
   Tokens：主色 #3a7afe · 成功 #10b981 · 危险 #ef4444 · 灰 #6b7280
   ============================================================ */

/* ===== A. 通用（≤768px 平板竖屏 + 手机） ===== */
@media (max-width: 768px) {

    /* --- 安全区：iOS 底部手势条 --- */
    :root { --mnav-h: 58px; --mnav-safe: env(safe-area-inset-bottom, 0px); }

    /* --- A1 统计卡：2 列紧凑网格（修复 ≤480px 单列巨卡问题） --- */
    .stats-grid,
    .contract-stats,
    .price-stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }
    .stat-card, .price-stat-card {
        flex-direction: row !important;
        text-align: left !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        align-items: center !important;
    }
    .stat-icon, .price-stat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        border-radius: 9px !important;
    }
    .stat-info h3, .price-stat-info h4 { font-size: 18px !important; line-height: 1.1 !important; }
    .stat-info p, .price-stat-info p {
        font-size: 11px !important;
        margin-top: 2px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 110px;
    }

    /* --- A2 弹窗 → 底部抽屉（Bottom Sheet） --- */
    .modal-overlay { align-items: flex-end !important; justify-content: center !important; padding: 0 !important; }
    .modal, .agree-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
        transform: translateY(24px) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .modal-overlay.open .modal, .modal-overlay.open .agree-modal { transform: translateY(0) !important; }
    .modal-header {
        position: sticky; top: 0; z-index: 2;
        background: var(--white, #fff);
        padding: 14px 16px !important;
        min-height: 52px;
    }
    .modal-header h3 { font-size: 16px !important; }
    .modal-body { padding: 16px !important; }
    .modal-footer {
        position: sticky; bottom: 0;
        background: var(--white, #fff);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
    }
    .modal-footer .btn { flex: 1; min-height: 44px; }
    /* 抽屉拖拽指示条 */
    .modal { position: relative; }
    .modal::before {
        content: '';
        position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
        width: 36px; height: 4px; border-radius: 2px;
        background: #E2E8F0; pointer-events: none; z-index: 3;
    }

    /* --- A3 顶部栏：铃铛徽标不爆版、触摸目标 --- */
    .topbar-icon-btn { width: 40px !important; height: 40px !important; font-size: 16px !important; }
    .topbar-icon-btn .badge,
    #notifyBell .badge, #msgBell .badge {
        max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: 10px; padding: 1px 5px;
    }

    /* --- A4 手机端隐藏桌面式「多标签页」条（由底部导航替代） --- */
    #tabBar { display: none !important; }

    /* --- A5 数据表卡片化行：触摸目标与行距 --- */
    .data-table td, .hr-table td { line-height: 1.5; }
    .data-table .btn-icon, .btn-icon {
        min-width: 36px; min-height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }

    /* --- A6 聊天 / 微信客户：桌面双栏 → 手机两级（列表 ↔ 会话） --- */
    .chat-page .chat-container { position: relative !important; }
    .chat-page .chat-sidebar {
        width: 100% !important;
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 10;
        height: 100%;
    }
    .chat-page .chat-sidebar.hidden { display: none !important; }
    .chat-page .chat-main { width: 100% !important; flex: 1 1 100% !important; }
    .chat-sidebar-header { flex-wrap: nowrap !important; }
    .chat-sidebar-header h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* --- A7 发财悬浮球：抬到底部导航之上，避免遮挡吸底按钮 --- */
    .qy-robot-ball {
        bottom: calc(var(--mnav-h) + var(--mnav-safe) + 14px) !important;
        right: 12px !important;
        width: 50px !important;
        height: 50px !important;
        opacity: .92;
    }

    /* --- A11 冉发财机器人：手机端全屏面板（ROBOT_FULL_V1，修复「打不开满屏」） --- */
    .qy-robot-panel {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        z-index: 1500 !important;
    }

    /* --- A8 表单控件 --- */
    .form-group label { font-size: 13px; }
    input, select, textarea { font-size: 16px !important; } /* ≥16px 防 iOS 聚焦自动放大 */

    /* --- A9 底部导航（结构由 js/mobile-nav.js 注入；手机全移动段生效） --- */
    .mnav {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        height: calc(var(--mnav-h) + var(--mnav-safe));
        padding: 4px 6px var(--mnav-safe);
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid #EDF0F4;
        display: flex;
        z-index: 900;
        box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
    }
    .mnav-item {
        position: relative;
        flex: 1;
        border: none; background: none;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px;
        color: #94A3B8;
        font-size: 10.5px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s;
        min-height: 44px;
        padding: 0;
    }
    .mnav-item i { font-size: 19px; line-height: 1; }
    .mnav-item span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mnav-item.active { color: #3a7afe; }
    .mnav-item.active i { transform: translateY(-1px); }
    .mnav-item:active { transform: scale(.94); }
    /* 导航项上的未读小红点 */
    .mnav-dot {
        position: absolute; top: 5px; right: calc(50% - 17px);
        min-width: 15px; height: 15px; padding: 0 4px;
        border-radius: 8px; background: #ef4444; color: #fff;
        font-size: 9.5px; line-height: 15px; text-align: center;
        display: none;
    }
    .mnav-item.has-dot .mnav-dot { display: block; }
    /* 沉浸页（聊天/微信客户）隐藏底部导航，避免与输入条叠放 */
    body.mnav-immersive .mnav { display: none; }

    /* --- A10 主内容底部避让底部导航 --- */
    .page-container { padding-bottom: calc(var(--mnav-h) + var(--mnav-safe) + 12px) !important; }
    /* 沉浸页由自身输入条贴底 */
    .page-container:has(.chat-page),
    .page-container:has(.wechat-client-page) { padding-bottom: 0 !important; }
}

/* ===== B. 手机竖屏（≤480px）细调 ===== */
@media (max-width: 480px) {

    /* --- B1 统计卡：保持 2 列（覆盖旧版 1fr 巨卡规则） --- */
    .stats-grid, .contract-stats, .price-stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .stat-card, .price-stat-card {
        flex-direction: row !important;
        text-align: left !important;
        padding: 9px 11px !important;
        gap: 9px !important;
        border-radius: 12px !important;
    }
    .stat-icon, .price-stat-icon { width: 34px !important; height: 34px !important; font-size: 14px !important; }
    .stat-info h3 { font-size: 17px !important; }
    .stat-info p { font-size: 10.5px !important; max-width: 96px; }

    /* --- B2 数据表卡片化：行更紧凑，长内容省略 --- */
    .data-table { min-width: 0 !important; }
    .data-table th, .data-table td { padding: 6px 8px !important; font-size: 12px !important; }
    .data-table td[data-label] { gap: 8px; }

    /* --- B3 主内容底部避让：沿用 A10，仅收紧左右留白 --- */
    .page-container { padding-left: 10px !important; padding-right: 10px !important; }

    /* --- B4 底部导航：沿用 A9，仅收紧间距 --- */
    .mnav-item { font-size: 10px; }

    /* --- B5 页面标题区留白收紧 --- */

    /* --- B6 侧边栏抽屉：全高 + 安全区 --- */
    .sidebar { padding-bottom: var(--mnav-safe); }

    /* --- B7 规章签署弹窗：阅读区固定高、按钮吸底 --- */
    #agreeModal .agree-modal { display: flex; flex-direction: column; }
    #agreeModal .agree-doc { max-height: 40vh; overflow-y: auto; }
    #agreeModal .sign-box { height: 120px; }
}