/* ============================================================
   佰视佳AI营销工作台 - 移动端响应式（优化版）
   ============================================================ */

/* ========== 平板断点 (769px~768px) ========== */
@media (max-width: 768px) {
    /* --- Sidebar 侧边栏 --- */
    .sidebar {
        position: fixed;
        transform: translateX(-100%);
        width: 260px;
        z-index: 100;
        transition: transform 0.3s ease;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: block; }
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }
    .sidebar-overlay.show { display: block; }

    /* --- 主内容区 --- */
    .main-content { margin-left: 0; }
    .topbar { padding: 10px 16px; }
    .topbar-menu-btn {
        display: block;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 60;
        position: relative;
    }
    .topbar-menu-btn .menu-icon {
        width: 22px;
        height: 2px;
        background: #333;
        position: relative;
        display: block;
    }
    .topbar-menu-btn .menu-icon::before,
    .topbar-menu-btn .menu-icon::after {
        content: '';
        display: block;
        width: 22px;
        height: 2px;
        background: #333;
        position: absolute;
        left: 0;
    }
    .topbar-menu-btn .menu-icon::before { top: -7px; }
    .topbar-menu-btn .menu-icon::after  { top: 7px; }
    .topbar-title { font-size: 15px; }
    .topbar-user { display: none; }

    .page-content { padding: 16px; }

    /* --- Grid 布局统一降级 --- */
    .quick-actions     { grid-template-columns: repeat(2, 1fr); }
    .tool-grid         { grid-template-columns: repeat(2, 1fr); }
    .tool-layout       { grid-template-columns: 1fr; }
    .tool-workspace   { grid-template-columns: 1fr; }
    .form-row          { grid-template-columns: 1fr; }
    .form-row-3       { grid-template-columns: 1fr; }
    .stats-row         { grid-template-columns: repeat(2, 1fr); }
    .detail-grid       { grid-template-columns: 1fr; }
    .info-grid        { grid-template-columns: 1fr; }

    /* --- 表格横向滚动 --- */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { font-size: 12px; min-width: 600px; }
    .data-table th, .data-table td { padding: 8px 8px; white-space: nowrap; }

    /* --- 卡片 --- */
    .card { padding: 14px; border-radius: 10px; }
    .welcome-card { padding: 20px; flex-direction: column; text-align: center; gap: 12px; }
    .welcome-date { font-size: 20px; }

    /* --- 工具页 --- */
    .tool-output-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .tool-output { min-height: 300px; }
    .tool-output-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }

    /* --- Modal --- */
    .modal { width: 95%; max-height: 85vh; }
    .modal-card { padding: 16px; }

    /* --- 按钮 --- */
    .btn { padding: 8px 14px; font-size: 13px; min-height: 36px; }
    .btn-sm { padding: 6px 10px; font-size: 12px; }

    /* --- 隐藏列 --- */
    .hide-mobile { display: none; }

    /* --- Toast --- */
    .toast-container { left: 16px; right: 16px; }
    .toast { max-width: 100%; font-size: 13px; padding: 10px 16px; }

    /* --- 欢迎卡片统计数字 --- */
    .stat-value { font-size: 22px; }
    .stat-label { font-size: 11px; }

    /* --- Tabs 横向滚动 --- */
    .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .tab { flex-shrink: 0; padding: 8px 12px; font-size: 12px; }

    /* --- 分页 --- */
    .pagination { gap: 2px; }
    .page-btn { padding: 5px 9px; font-size: 12px; }
}

/* ========== 手机断点 (480px及以下) ========== */
@media (max-width: 480px) {
    /* --- 顶部栏 --- */
    .topbar { padding: 8px 12px; }
    .topbar-title { font-size: 14px; }

    /* --- 页面内容 --- */
    .page-content { padding: 12px; }

    /* --- 快捷操作 2列 → 仍保持2列但间距缩小 --- */
    .quick-actions { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .quick-action-card { padding: 14px 10px; }
    .qa-icon { font-size: 26px; }
    .qa-title { font-size: 13px; }
    .qa-desc { font-size: 11px; }

    /* --- 工具卡片 --- */
    .tool-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .tool-card { padding: 14px 10px; }
    .tool-card-icon { font-size: 24px; }
    .tool-card-name { font-size: 12px; }

    /* --- 统计卡片 --- */
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-card { padding: 14px 10px; }
    .stat-value { font-size: 22px; }

    /* --- 卡片内边距 --- */
    .card { padding: 12px; border-radius: 8px; }
    .welcome-card { padding: 16px 14px; }
    .welcome-text h2 { font-size: 18px; }
    .welcome-date { font-size: 16px; }

    /* --- 表单 --- */
    .form-input { padding: 10px 12px; font-size: 14px; }
    select.form-input { padding-right: 28px; background-position: right 8px center; background-size: 14px; }
    textarea.form-input { min-height: 80px; }

    /* --- 按钮全宽（工具页 primary） --- */
    .btn-block-mobile { width: 100%; justify-content: center; }

    /* --- 工具输出区内边距 --- */
    .output-content { padding: 12px; font-size: 13px; line-height: 1.7; }
    .output-placeholder { padding: 40px 16px; }
    .output-placeholder .placeholder-icon { font-size: 36px; }

    /* --- Modal 几乎全屏 --- */
    .modal { width: 98%; margin: 0 auto; max-height: 90vh; }
    .modal-card { padding: 14px 12px; }

    /* --- 历史面板 --- */
    .history-panel .history-item { padding: 10px 12px; }
    .history-title { font-size: 13px; }
    .history-meta { font-size: 11px; }

    /* --- 侧边栏变宽 --- */
    .sidebar { width: 280px; }
    .sidebar-header { padding: 14px 16px; }
    .sidebar-user { padding: 14px 16px; }
    .nav-item { padding: 10px 16px; font-size: 13px; }
    .nav-title { padding: 8px 16px 4px; }
}

/* ========== 触摸优化（全部移动端） ========== */
@media (max-width: 768px) {
    /* 增大点击区域 */
    .nav-item { min-height: 44px; align-items: center; }
    .tab { min-height: 40px; }
    .btn { min-height: 40px; align-items: center; justify-content: center; }
    .page-btn { min-height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; }

    /* 表单元素触摸友好 */
    .form-input, select.form-input, textarea.form-input {
        min-height: 42px;
        font-size: 16px; /* 防止 iOS 自动缩放 */
    }

    /* 滚动条隐藏（移动端用原生滚动） */
    ::-webkit-scrollbar { width: 0; height: 0; }

    /* 防止文字选中等误操作 */
    .btn, .nav-item, .tab, .page-btn { -webkit-tap-highlight-color: transparent; }

    /* 输出区最大高度 + 滚动 */
    .tool-output {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 平台复选框自动换行 */
    .platform-checkboxes {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .platform-checkboxes label {
        font-size: 13px;
        padding: 4px 10px;
    }

    /* 视频脚本平台卡片 2列 */
    .platform-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* SEO工厂关键词标签换行 */
    .keyword-suggestions, .kw-angle-chips, .kw-chip {
        flex-wrap: wrap;
    }
    .kw-chip { font-size: 11px; padding: 3px 10px; }

    /* 输出操作按钮组换行 */
    .tool-output-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .tool-output-actions .btn { flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 6px 10px; }
}

/* ========== 横屏适配 ========== */
@media (max-width: 768px) and (orientation: landscape) {
    .sidebar { width: 240px; }
    .welcome-card { flex-direction: row; text-align: left; }
    .stats-row { grid-template-columns: repeat(4, 1fr); }
    .tool-layout { grid-template-columns: 280px 1fr; }
}

/* ========== 安全区适配 (刘海屏 iPhone X+) ========== */
@supports (padding: env(safe-area-inset-left)) {
    @media (max-width: 768px) {
        .sidebar {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }
        .topbar {
            padding-top: calc(10px + env(safe-area-inset-top));
        }
        .toast-container {
            top: calc(20px + env(safe-area-inset-top));
            left: calc(16px + env(safe-area-inset-left));
            right: calc(16px + env(safe-area-inset-right));
        }
        .page-content {
            padding-bottom: calc(16px + env(safe-area-inset-bottom));
        }
    }
}

/* ========== 打印样式（顺带修复） ========== */
@media print {
    .sidebar, .topbar, .sidebar-overlay, .toast-container { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .tool-layout { grid-template-columns: 1fr !important; }
    .tool-input { display: none; }
    .tool-output { max-height: none !important; overflow: visible !important; }
}