/**
 * Author: SparkBayes
 * Email: dizflyme@qq.com
 * Date: 2026-10-25 18:55:53
 * LastEditors: SparkBayes
 * LastEditTime: 2026-10-25 18:55:53
 * Description: 移动端（≤767px）适配层 - 左抽屉改 off-canvas、内容区收窄内边距、分栏页转纵向、
 * 表格/对话框/侧栏/下拉不溢出视口。断点与 login_ad.css 一致。
 * 桌面客户端窗口最小宽度 1400px，不会命中本断点，无需额外排除。
 */

/* 仅移动端渲染的控件（桌面端不占位） */
.mobile-nav-btn,
.mobile-nav-mask {
    display: none;
}

@media (max-width: 767px) {
    :root {
        /* 移动端全屏卡片高度：height 为 border-box，padding(上 104 + 下 84) 已含在内，
           故直接取 100dvh 即让内容区从两行 header 下方延伸到工具条上方 */
        --content-height: 100dvh;
        --mobile-gutter: 10px;
        --mobile-header-h: 56px;   /* header 第一行 */
        --mobile-tabs-h: 40px;     /* header 第二行（洞察 tab） */
        --mobile-bottom-h: 76px;
    }

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

    body {
        overflow-x: hidden;
    }

    /* ========== 左抽屉：off-canvas（默认移出视口，汉堡按钮切换 is-open） ========== */
    aside.q-drawer--left.app-drawer {
        transform: translateX(-100%) !important;
        transition: transform 0.22s ease;
        z-index: 55 !important;
    }

    aside.q-drawer--left.app-drawer.is-open {
        transform: none !important;
    }

    .app-drawer .q-drawer__content {
        overflow-y: auto;
    }

    /* ========== 汉堡按钮 / 遮罩 ========== */
    .mobile-nav-btn {
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 56;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        color: var(--primary);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    }

    .mobile-nav-mask {
        position: fixed;
        inset: 0;
        display: block;
        background: rgba(0, 0, 0, 0.4);
        z-index: 54;
    }

    /* ========== 顶部 Header：两行布局 ==========
       第一行：汉堡 + 页面图标/标题 + 返回；第二行：洞察 tab 整宽可横滑
       （实测单行时 tab 可视区只剩 76px / 7 个 tab 共 602px，基本无法切换） =
       ⚠️ Quasar 的 .flex 自带 flex-wrap:wrap，必须显式控制换行以实现两行。 */
    .app-header {
        left: 0 !important;
        top: 0 !important;
        height: auto !important;
        min-height: var(--mobile-header-h) !important;
        padding-left: 52px !important;
        padding-right: 8px !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .app-header > * {
        flex-shrink: 0;
    }

    /* 标题区：占第一行剩余宽度，过长省略 */
    .app-header > :first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .app-header > :first-child .text-xl {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 中间区（任务名 + 洞察 tab）：整宽换到第二行 */
    .app-header > .flex-1 {
        flex: 0 0 100% !important;
        order: 3;
        min-width: 0 !important;
        height: var(--mobile-tabs-h);
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap !important;
        border-top: 1px solid var(--border);
    }

    .app-header .q-tabs {
        min-width: 0 !important;
        overflow-x: auto;
    }

    .app-header .q-tabs__content {
        overflow-x: auto;
    }

    .app-header .q-tab {
        flex: 0 0 auto;
        padding: 0 10px;
    }

    .app-header .text-xl {
        font-size: 16px;
        white-space: nowrap;
    }

    /* 任务名在窄屏不占位（第二行空间留给 tab） */
    .app-header .max-w-xs {
        display: none;
    }

    /* 返回按钮：只留图标，省出横向空间 */
    .app-header .q-btn--outline .block {
        display: none;
    }

    /* 非洞察页（无 tab）：中间区不占行高 */
    body:not(.has-insight-nav) .app-header > .flex-1 {
        display: none !important;
    }

    /* ========== 主内容区：左右内边距由 96px 收窄到 10px ========== */
    .app-main {
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
        padding-top: calc(var(--mobile-header-h) + 12px) !important;
        padding-bottom: calc(var(--mobile-bottom-h) + env(safe-area-inset-bottom)) !important;
    }

    /* 洞察页 header 多一行 tab，内容区让位 */
    body.has-insight-nav .app-main {
        padding-top: calc(var(--mobile-header-h) + var(--mobile-tabs-h) + 8px) !important;
    }

    /* home 无 header：只让位顶部公告 + 汉堡按钮（home 模板给 main 加了 pt-0） */
    .app-main.pt-0 {
        padding-top: 52px !important;
    }

    /* 高度体系：padding 已含在 height 内（border-box），故 min-height 同为 100dvh */
    .page-min-h {
        min-height: 100dvh !important;
    }

    .app-main.min-h-screen {
        min-height: 100dvh !important;
    }

    /* ========== 右侧悬浮胶囊：改底部横向工具条 ========== */
    .side-pill {
        top: auto !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        left: 50% !important;
        right: auto !important;
        margin: 0 !important;
        transform: translateX(-50%);
    }

    .side-pill > div > .q-card {
        padding: 2px 8px !important;
    }

    .side-pill .nicegui-column {
        flex-direction: row !important;
        align-items: center !important;
    }

    .side-pill .mb-2 {
        margin-bottom: 0 !important;
        margin-right: 8px !important;
    }

    /* ========== 分栏页（洞察/概览）：左右分栏转上下 ==========
       ⚠️ Quasar 的 .flex 自带 flex-wrap:wrap，纵向排列时子项超高度会“换列”跑到右侧，
       必须显式 nowrap。
       ⚠️ 窄屏不再强制占满一屏：内部多层 flex-1/min-h-0 相互挤压会把列表/表格压成 0 高
       （实测 raw 页表格容器高度 = 0），改为自然高度 + 页面整体滚动。 */
    .page-split {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* 左栏（概览/代表区域）：限高 + 内部滚动，避免占满首屏 */
    .page-split > .page-split-aside {
        width: 100% !important;
        height: auto !important;
        max-height: 40vh;
        flex: 0 0 auto !important;
    }

    /* 右栏（主列表）：自然高度，内部不再嵌套滚动 */
    .page-split > :not(.page-split-aside) {
        width: 100% !important;
        height: auto !important;
        flex: 0 0 auto !important;
        min-height: 0 !important;
    }

    .page-split > :not(.page-split-aside) .h-full {
        height: auto !important;
    }

    .page-split > :not(.page-split-aside) .flex-1 {
        flex: 0 0 auto !important;
        min-height: 0 !important;
    }

    /* 内层滚动区：只放开纵向（由页面级滚动接管），横向保留滚动以免宽表格溢出页面 */
    .page-split > :not(.page-split-aside) .overflow-y-auto {
        overflow-y: visible !important;
    }

    .page-split > :not(.page-split-aside) .overflow-auto {
        overflow-y: visible !important;
        overflow-x: auto !important;
    }

    /* 卡片自然高度，避免 overlay 与 footer 错位 */
    .page-split > :not(.page-split-aside) .q-card {
        height: auto !important;
        min-height: 0 !important;
    }

    /* AI 洞察场景菜单：纵向菜单改横向滑动条（避免占满首屏高度） */
    .page-scenes > .page-split-aside {
        max-height: none;
    }

    .page-scenes-strip {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        overflow-x: auto;
    }

    .page-scenes-strip > button {
        flex: 0 0 auto;
        width: auto !important;
        padding: 6px 10px !important;
    }

    /* ========== 关联评论侧栏：改底部全宽抽屉 ========== */
    .page-sidebar {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 70vh !important;
        border-radius: 12px 12px 0 0;
    }

    /* ========== home 任务表：隐藏两个时间列，操作列不再撑 300px ========== */
    .tasks-table th:nth-child(5),
    .tasks-table td:nth-child(5),
    .tasks-table th:nth-child(6),
    .tasks-table td:nth-child(6) {
        display: none !important;
    }

    .tasks-table th:last-child,
    .tasks-table td:last-child {
        min-width: auto !important;
        white-space: nowrap;
    }

    /* 操作列按钮不换行：窄屏下按钮被压到 44px 时中文逐字竖排（增量获取 → 44×90px） */
    .tasks-table th,
    .tasks-table td {
        white-space: nowrap;
    }

    .tasks-table td button,
    .tasks-table td button span {
        white-space: nowrap;
    }

    /* 操作列粘在右侧：表格 730px / 容器 340px，否则必须横滑到底才能点到按钮 */
    .tasks-table th:last-child,
    .tasks-table td:last-child {
        position: sticky;
        right: 0;
        z-index: 1;
        background: #fff;
        box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.15);
    }

    .tasks-table th:last-child {
        background: #FAFAFA;
    }

    /* 悬停行底色不能盖住粘滞列的白底 */
    .tasks-table tbody tr:hover td:last-child {
        background: #E6F7FF;
    }

    .tasks-table.add-custom-table-styles.q-table tbody td {
        padding: 4px 8px !important;
    }

    /* ========== 其他列表页表格（账户/订单/邀请/API Key/Webhook/原始评论） ==========
       窄屏下单元格被压到 ~40px、中文逐字竖排（表头高 97px），必须先禁止换行，
       让表格保持可读宽度并在容器内横向滑动（各页已有 overflow-x-auto）。 */
    .list-table th,
    .list-table td {
        white-space: nowrap;
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    /* 长文本列（原始评论标题/内容）仍允许两行截断 */
    .raw-table td .ellipsis-2-lines {
        white-space: normal;
    }

    /* 原始评论表 8 列共 798px，窄屏只保留 日期/评分/标题/内容 四列，
       Asin、验证购买、类型、用户为次要信息（详情页可见），隐藏后无需大幅横滑 */
    .raw-table th:nth-child(n + 5),
    .raw-table td:nth-child(n + 5) {
        display: none !important;
    }

    .raw-table td.max-w-\[180px\],
    .raw-table td.max-w-\[250px\] {
        max-width: 160px !important;
    }

    /* ========== 触控目标：按钮/分页不低于 28~36px 高 ==========
       实测分页按钮 30×28、表格操作按钮 31px 高，移动端易误点 */
    .app-main button.q-btn {
        min-height: 36px;
    }

    /* 行内按钮移动端降一档：操作列实测仅 200px，桌面尺寸会加剧表格横滑 */
    .hm-btn-inline {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    .hm-btn-inline + .hm-btn-inline {
        margin-left: 0 !important;
    }

    .app-main .q-pagination button {
        min-width: 34px;
        min-height: 36px;
        padding: 4px 6px;
    }

    /* 任务创建区：textarea 的 prepend/append（站点选择 + 自动分析 + 创建按钮）
       在窄屏横向叠加会溢出，改纵向堆叠：站点选择 → textarea → 控件行。
       ⚠️ 选择器必须限定到 label 的直接控制层，否则内层站点下拉（嵌套 q-field）也跟着变列。 */
    .task-create > .q-field__inner > .q-field__control {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
    }

    .task-create > .q-field__inner > .q-field__control > * {
        width: 100% !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    .task-create > .q-field__inner > .q-field__control > .q-field__prepend,
    .task-create > .q-field__inner > .q-field__control > .q-field__append {
        padding: 6px 0 !important;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .task-create > .q-field__inner > .q-field__control > .q-field__prepend {
        justify-content: flex-start;
    }

    .task-create > .q-field__inner > .q-field__control > .q-field__prepend > * {
        width: 100%;
    }

    .task-create > .q-field__inner > .q-field__control > .q-field__control-container,
    .task-create .q-field__native {
        width: 100% !important;
    }

    /* 底部统计 + 分页：窄屏换行堆叠，分页可横向滑动 */
    .tasks-footer {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    .tasks-footer .q-pagination {
        max-width: 100%;
        overflow-x: auto;
    }

    /* ========== 系统公告横幅：左抽屉不再占位；右侧留出汉堡按钮宽度 ========== */
    .system-notice {
        left: 48px !important;
        right: 0 !important;
    }

    /* ========== 认证页（登录/注册/重置）：收窄内边距、隐藏宣传区、卡片自适应 ========== */
    .auth-shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 移动端隐藏登录页宣传区（三段大图在窄屏无法阅读，且挤压表单） */
    .auth-shell .login-page-ad {
        display: none !important;
    }

    .login-page-form {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
    }

    .login-page-form .q-card {
        height: auto !important;
        max-height: none !important;
    }

    /* ========== 输入框字号 16px：避免 iOS 聚焦时自动放大页面 ========== */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}