/* ============================================================
   xg-mobile.css  v1  —  小跟班网页端移动适配（2026-08-11）
   原则：
   1. 所有规则都包在 @media 断点里，桌面(≥1280px)零影响
   2. 断点：<768px 手机段；768~1279.98px 平板段
   3. 抽屉(左右侧栏)直接挂 body 直下，避免 transform/fixed 陷阱
   4. 覆盖现有样式一律 !important（现有选择器优先级更高）
   回滚：删除 xiaogenban.html 中的 3 处引用即可
   ============================================================ */

/* ---------- 汉堡按钮（手机段+平板段显示，桌面隐藏） ---------- */
.mobile-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--glass-3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background 0.2s ease;
}
.mobile-hamburger:active { transform: scale(0.9); background: rgba(37, 99, 235, 0.3); }

/* ---------- 抽屉遮罩（JS 动态挂到 body 直下） ---------- */
.mobile-drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mobile-drawer-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   手机段（<768px）
   ============================================================ */
@media (max-width: 767.98px) {

    /* --- 高度适配：100vh → svh → dvh 降级链，键盘弹出用 --kb 顶起 --- */
    .main-container {
        height: 100vh;
        height: calc((var(--vh, 1vh) * 100) - var(--kb, 0px));
        height: calc(100svh - var(--kb, 0px));
        height: calc(100dvh - var(--kb, 0px));
        /* 关键：解除 z-index:2 的层级容器，让侧栏(5100)/弹窗(9999)能真正盖过遮罩(5000)，
           否则抽屉里的按钮点击会被遮罩吃掉 */
        z-index: auto !important;
    }
    body { min-height: 100vh; min-height: 100svh; min-height: 100dvh; }

    /* --- 触屏基础 --- */
    html {
        touch-action: manipulation;
        -webkit-text-size-adjust: 100%;
    }

    /* --- 顶栏：两个汉堡 + 去掉放大镜 --- */
    .mobile-hamburger { display: flex; }
    .header-search-btn { display: none !important; }
    .header-left { gap: 8px; }
    .header-right { gap: 6px; }
    .header-title { display: none; }

    /* --- 左栏 → 左抽屉 --- */
    .left-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(80vw, 300px) !important;
        height: 100vh;
        height: calc((var(--vh, 1vh) * 100) - var(--kb, 0px));
        height: calc(100svh - var(--kb, 0px));
        height: calc(100dvh - var(--kb, 0px));
        z-index: 5100 !important;
        transform: translateX(-105%);
        transition: transform 0.3s var(--ease-spring);
        border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    .left-sidebar.mobile-open { transform: translateX(0); }
    .left-sidebar-collapse-btn { display: none !important; }

    /* --- 右栏 → 右抽屉 --- */
    .right-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: min(82vw, 320px) !important;
        height: 100vh;
        height: calc((var(--vh, 1vh) * 100) - var(--kb, 0px));
        height: calc(100svh - var(--kb, 0px));
        height: calc(100dvh - var(--kb, 0px));
        z-index: 5100 !important;
        transform: translateX(105%) !important;
        transition: transform 0.3s var(--ease-spring);
        border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    .right-sidebar.mobile-open { transform: translateX(0) !important; }
    .right-sidebar .collapse-btn { display: none !important; }

    /* --- 聊天区 --- */
    .chat-messages {
        padding: 12px 12px 80px;
        overscroll-behavior-y: contain;
    }
    .chat-message { max-width: 92%; }
    .chat-input-wrapper {
        padding: 10px 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .chat-input, .main-input { font-size: 16px !important; }

    /* --- 欢迎页输入框 --- */
    .main-input-wrapper { width: 92% !important; max-width: none !important; }
    .welcome-title { font-size: 22px; }
    .quick-functions { margin-top: 16px; }

    /* --- 弹窗窄屏适配 --- */
    .login-card { width: min(400px, 92vw) !important; padding: 32px 22px; }
    .sign-lib-panel { width: min(460px, 92vw) !important; }

    /* --- 触屏 hover 保护：删除按钮等常显 --- */
    .case-card-delete { opacity: 1 !important; }

    /* --- 充值弹窗（199/399 套餐）：手机上改为上下堆叠，两个二维码都可见 --- */
    .pay-modal-wide {
        width: 94vw !important;
        max-width: 94vw !important;
        padding: 20px 14px !important;
        max-height: 88vh;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    .pay-compare-body {
        flex-direction: column !important;
        gap: 14px;
    }
    .pay-pkg-divider {
        width: 100% !important;
        height: 1px;
        margin: 0;
    }
    .pay-pkg-card {
        flex: none !important;
        width: 100% !important;
    }
    .pay-pkg-qr-img, .pay-pkg-qr-placeholder {
        width: 180px !important;
        height: 180px !important;
    }
    .pay-pkg-features { padding-left: 0 !important; width: 100%; }
}

/* ============================================================
   手机横屏（<768px 且横屏）：侧栏弹出时压缩宽度，聊天区保险丝
   ============================================================ */
/* ============================================================
   手机横屏（<768px 且横屏）：两栏常驻显示（窄版），不用抽屉
   （横屏宽度足够，两侧栏+聊天区比例合适，符合"两边都出来"需求）
   ============================================================ */
@media (max-width: 767.98px) and (orientation: landscape) {
    /* 左栏：常驻窄版 */
    .left-sidebar {
        position: static !important;
        width: 160px !important;
        transform: none !important;
        z-index: auto !important;
        box-shadow: none !important;
        height: 100vh;
        height: calc((var(--vh, 1vh) * 100) - var(--kb, 0px));
        height: calc(100svh - var(--kb, 0px));
        height: calc(100dvh - var(--kb, 0px));
        flex-shrink: 0;
    }
    .left-sidebar.mobile-open { transform: none !important; }
    .left-sidebar-collapse-btn { display: flex !important; }

    /* 右栏：常驻窄版 */
    .right-sidebar {
        position: static !important;
        width: 200px !important;
        transform: none !important;
        z-index: auto !important;
        box-shadow: none !important;
        height: 100vh;
        height: calc((var(--vh, 1vh) * 100) - var(--kb, 0px));
        height: calc(100svh - var(--kb, 0px));
        height: calc(100dvh - var(--kb, 0px));
        flex-shrink: 0;
    }
    .right-sidebar.mobile-open { transform: none !important; }
    .right-sidebar .collapse-btn { display: flex !important; }

    /* 横屏不需要汉堡和遮罩 */
    .mobile-hamburger { display: none !important; }
    .mobile-drawer-overlay { display: none !important; }
    .top-header { z-index: auto !important; }

    /* 聊天区适配 */
    .chat-message { max-width: 92%; }
    .welcome-title { font-size: 16px; }
    .welcome-subtitle { font-size: 11px; margin-bottom: 10px; }
    .quick-functions { margin-top: 8px; }
    .functions-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }
    .function-card { padding: 8px 4px; }
    .main-input-wrapper { width: 92% !important; }
}

/* ============================================================
   平板段（768 ~ 1279.98px）：左右两栏都常驻显示（同网页端），
   仅手机段(<768px)才使用抽屉模式
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279.98px) {

    /* 高度降级链 */
    .main-container {
        height: 100vh;
        height: calc((var(--vh, 1vh) * 100) - var(--kb, 0px));
        height: calc(100svh - var(--kb, 0px));
        height: calc(100dvh - var(--kb, 0px));
        /* 解除 z-index:2 层级容器：平板竖屏右栏抽屉/弹窗需高于遮罩 */
        z-index: auto !important;
    }
    body { min-height: 100vh; min-height: 100svh; min-height: 100dvh; }

    html {
        touch-action: manipulation;
        -webkit-text-size-adjust: 100%;
    }

    /* 顶栏：两栏常驻，不需要汉堡；放大镜仍按约定隐藏 */
    .mobile-hamburger#mobileDashBtn { display: none !important; }
    .mobile-hamburger#mobileMenuBtn { display: none !important; }
    .header-search-btn { display: none !important; }

    /* 左栏：常驻，收窄 */
    .left-sidebar { width: 200px !important; }

    /* 右栏：常驻显示（回到文档流，同网页端），恢复折叠按钮 */
    .right-sidebar {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 240px !important;
        height: 100vh;
        height: calc((var(--vh, 1vh) * 100) - var(--kb, 0px));
        height: calc(100svh - var(--kb, 0px));
        height: calc(100dvh - var(--kb, 0px));
        transform: none !important;
        z-index: auto !important;
        box-shadow: none !important;
        border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        flex-shrink: 0;
    }
    .right-sidebar.mobile-open { transform: none !important; }
    .right-sidebar .collapse-btn { display: flex !important; }

    /* 聊天/输入 */
    .chat-messages { padding: 14px 16px 80px; overscroll-behavior-y: contain; }
    .chat-message { max-width: 88%; }
    .main-input-wrapper { width: 80% !important; max-width: none !important; }
    .chat-input, .main-input { font-size: 16px !important; }

    /* 触屏 hover 保护 */
    .case-card-delete { opacity: 1 !important; }
}

/* ============================================================
   平板竖屏 - 窄段（768~919.98px，两折叠展开/小平板）：
   左右侧栏全部收起（双抽屉，聊天全屏，像手机）
   ============================================================ */
@media (min-width: 768px) and (max-width: 919.98px) and (orientation: portrait) {

    /* 左栏 → 左抽屉（默认收起） */
    .left-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(80vw, 300px) !important;
        height: 100vh;
        height: calc((var(--vh, 1vh) * 100) - var(--kb, 0px));
        height: calc(100svh - var(--kb, 0px));
        height: calc(100dvh - var(--kb, 0px));
        z-index: 5100 !important;
        transform: translateX(-105%) !important;
        transition: transform 0.3s var(--ease-spring);
        border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    .left-sidebar.mobile-open { transform: translateX(0) !important; }
    .left-sidebar-collapse-btn { display: none !important; }

    /* 右栏 → 右抽屉（默认收起） */
    .right-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 300px !important;
        height: 100vh;
        height: calc((var(--vh, 1vh) * 100) - var(--kb, 0px));
        height: calc(100svh - var(--kb, 0px));
        height: calc(100dvh - var(--kb, 0px));
        z-index: 5100 !important;
        transform: translateX(105%) !important;
        transition: transform 0.3s var(--ease-spring);
        border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    .right-sidebar.mobile-open { transform: translateX(0) !important; }
    .right-sidebar .collapse-btn { display: none !important; }

    /* 双汉堡显示 */
    .mobile-hamburger#mobileMenuBtn { display: flex !important; }
    .mobile-hamburger#mobileDashBtn { display: flex !important; }
    .header-search-btn { display: none !important; }

    /* 聊天区全宽 */
    .main-input-wrapper { width: 86% !important; }
    .chat-message { max-width: 88%; }
}

/* ============================================================
   平板竖屏 - 宽段（920~1024px，三折叠全展等）：左栏常驻 + 右栏抽屉
   ============================================================ */
@media (min-width: 920px) and (max-width: 1024px) and (orientation: portrait) {

    /* 右栏 → 右侧抽屉（默认收起） */
    .right-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 300px !important;
        height: 100vh;
        height: calc((var(--vh, 1vh) * 100) - var(--kb, 0px));
        height: calc(100svh - var(--kb, 0px));
        height: calc(100dvh - var(--kb, 0px));
        z-index: 5100 !important;
        transform: translateX(105%) !important;
        transition: transform 0.3s var(--ease-spring);
        border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    .right-sidebar.mobile-open { transform: translateX(0) !important; }
    .right-sidebar .collapse-btn { display: none !important; }

    /* 右汉堡显示（开右栏），左汉堡隐藏（左栏常驻） */
    .mobile-hamburger#mobileDashBtn { display: flex !important; }
    .mobile-hamburger#mobileMenuBtn { display: none !important; }
    .header-search-btn { display: none !important; }

    /* 聊天区更宽，主输入框跟随 */
    .main-input-wrapper { width: 86% !important; }
    .chat-message { max-width: 88%; }
}

/* ============================================================
   键盘弹出保护（768~1024px 宽）：安卓键盘压缩视口高度导致
   orientation 翻转、平板竖屏布局失效 → 侧栏"自动弹出"。
   键盘弹出期间（html.kb-open）强制保持侧栏为收起抽屉。
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    html.kb-open .left-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(80vw, 300px) !important;
        z-index: 5100 !important;
        transform: translateX(-105%) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    html.kb-open .left-sidebar.mobile-open { transform: translateX(0) !important; }
    html.kb-open .left-sidebar-collapse-btn { display: none !important; }
    html.kb-open .right-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 300px !important;
        z-index: 5100 !important;
        transform: translateX(105%) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    html.kb-open .right-sidebar.mobile-open { transform: translateX(0) !important; }
    html.kb-open .right-sidebar .collapse-btn { display: none !important; }
    html.kb-open .mobile-hamburger#mobileMenuBtn { display: flex !important; }
    html.kb-open .mobile-hamburger#mobileDashBtn { display: flex !important; }
}

/* ============================================================
   触摸设备通用保护（含触屏笔记本，仅增强不改变布局形态）
   ============================================================ */
@media (hover: none) {
    .case-card-delete { opacity: 1 !important; }
    .user-info:hover { background: var(--glass-3); }
    .function-card:hover { transform: none; }
    .dash-card:hover { transform: none; }
}