/* ============================================
   移动端优化样式
   所有样式仅在移动设备生效 (max-width: 768px)
   ============================================ */

/* === z-index Management (Mobile) === */
:root {
    --z-mobile-sidebar: 200;
    --z-keyboard-input: 50;
}

@media (max-width: 768px) {
    /* === 1. 安全区域适配 (iPhone X+ 刘海屏) === */
    body {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* === 2. 触摸目标优化 (最小 44x44px) === */
    button,
    .sidebar-toggle,
    .menu-btn,
    .settings-btn,
    .send-btn,
    .stop-btn,
    .session-delete,
    .msg-action-btn,
    .preview-fullscreen-btn,
    .agent-panel-btn,
    .agent-modal-close,
    .child-session-load-btn,
    .qm-config-edit,
    .qm-config-delete,
    .qm-config-save,
    .qm-config-cancel,
    .remove-btn,
    .close-btn {
        min-width: var(--send-btn-size);
        min-height: var(--send-btn-size);
    }

    .select-selected,
    .select-items div,
    .menu-item,
    .command-item,
    .session-item,
    .quick-message-btn {
        min-height: var(--input-height);
        display: flex;
        align-items: center;
    }

    .toggle-switch {
        width: 52px;
        height: 32px;
    }
    .toggle-slider:before {
        height: 26px;
        width: 26px;
        left: 3px;
        bottom: 3px;
    }
    .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }

    /* === 3. 禁止下拉刷新 (overscroll-behavior) === */
    html,
    body,
    .message-flow,
    .message-content,
    .session-list,
    .sidebar {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* === 4. 侧边栏改为底部弹出层 (Bottom Sheet) === */
    .sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        height: var(--mobile-panel-height);
        max-height: 500px;
        border-radius: 20px 20px 0 0;
        border-right: none;
        border-top: 1px solid #e1e8f0;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: var(--z-mobile-sidebar);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }

    .sidebar.show {
        transform: translateY(0);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }

    .sidebar.collapsed {
        transform: translateY(100%);
    }

    .sidebar::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        z-index: var(--z-nav);
    }

    .sidebar .user-header {
        padding-top: 20px;
    }

    /* === 5. 主区域边距 === */
    .main-area {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .input-area {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* === 6. 输入框键盘适配 === */
    .input-area.keyboard-open {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-keyboard-input);
        background: rgba(255, 255, 255, 0.98);
    }

    /* === 8. 模态框移动端优化 === */
    .modal-overlay {
        align-items: flex-end;
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 90vh;
        animation: slideUp 0.3s ease;
    }

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(100px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .modal-header {
        padding-top: 20px;
    }

    /* === 9. 快捷消息栏横向滚动 === */
    .quick-messages-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .quick-messages-bar::-webkit-scrollbar {
        display: none;
    }

    /* === 10. 文件预览卡片优化 === */
    .file-preview-area {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .file-preview-area::-webkit-scrollbar {
        display: none;
    }

    /* === 11. 消息操作按钮始终显示 === */
    .msg-user-actions {
        display: flex;
        gap: 8px;
    }

    .msg-action-btn {
        padding: 8px;
        font-size: 14px;
    }

    /* === 13. 浮动面板触控优化 === */
    .agent-panel-header {
        touch-action: none;
        cursor: grab;
    }

    .agent-panel-resize-handle {
        min-width: var(--send-btn-size);
        min-height: var(--send-btn-size);
        touch-action: none;
    }

    .agent-panel-btn {
        min-width: var(--send-btn-size);
        min-height: var(--send-btn-size);
    }

    .panel-message-item {
        padding: 10px 8px;
    }

    .panel-message-header {
        gap: 8px;
    }

    .child-session-content {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
}

/* === 更小屏幕适配 (480px以下) === */
@media (max-width: 480px) {
    .sidebar {
        height: 75vh;
        max-height: 450px;
    }

    .modal-content {
        border-radius: 16px 16px 0 0;
    }
}