/* ============================================================
 *  超级图表 · 移动端自适应整合层（2026-05-30）
 *  Single source of truth for the phone layout (≤900px).
 *
 *  历史上手机端有三套互相打架的规则：
 *    (a) vip-chart-terminal.css ≤1120px 旧 fallback（隐藏栏）
 *    (b) tokens.css ≤1000px 抽屉 + 汉堡（is-rightbar-open / translateX）
 *    (c) vip-chart-terminal.css ≤900px 竖直堆叠
 *  关键 bug：≤900px 堆叠布局里没有重置 (b) 的 transform:translateX(100%)，
 *  导致右栏面板被推到屏幕外，手机上点面板按钮“看不到内容”。
 *
 *  本文件在所有样式之后加载（依赖 tv-topbar-style），用于：
 *   1) ≤900px 收敛为一套干净的竖直堆叠；
 *   2) 复位抽屉残留的 position/transform；
 *   3) ≤900px 隐藏汉堡按钮（堆叠模式不需要抽屉）；
 *   4) 901–1000px 仍保留抽屉 + 汉堡（平板/窄窗口）。
 * ============================================================ */

/* 修复（2026-05-31）：「⋯ 更多」托盘切换按钮由 chart-events.js 无条件注入到顶栏，
 * 但只有 ≤900px 媒体查询里设了 display:inline-flex，桌面端缺少隐藏规则 →
 * 按钮在桌面右上角漏出，点击只切 body class 但桌面顶栏未折叠，表现为「点了没反应」。
 * 这里加桌面默认隐藏；≤900px 的媒体查询会用 !important 重新显示。 */
body.td-vip-body .td-vip-topbar-more-toggle {
    display: none;
}

/* ---- 901–1000px：保持抽屉模式，仅补充顶栏横向滚动手感 ---- */
@media (min-width: 901px) and (max-width: 1000px) {
    body.td-vip-body .td-vip-topbar-left,
    body.td-vip-body .td-vip-topbar-right {
        flex-wrap: nowrap;
    }
}

/* ============================================================
 *  ≤900px：手机竖直堆叠（权威布局）
 * ============================================================ */
@media (max-width: 900px) {
    /* --- 1) 复位抽屉：右栏回到正常文档流，不再 translateX 到屏幕外 --- */
    body.td-vip-body .td-vip-rightbar,
    body.td-vip-body.is-rightbar-open .td-vip-rightbar {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        box-shadow: none !important;
        transition: none !important;
        z-index: auto !important;
    }

    /* --- 2) 汉堡按钮在堆叠模式下多余，隐藏 --- */
    body.td-vip-body .td-vip-rightbar-toggle {
        display: none !important;
    }

    /* --- 3) 顶栏：精简为「品牌 · 品种 · 周期 · 刷新 · 更多」一屏放下 ---
     * 模板里 .td-vip-topbar 带内联 overflow:hidden + 固定 40px 高度。
     * 手机端控件太多无法平铺，改为：核心控件常驻，次要控件折进 "⋯ 更多" 托盘。
     * 用 flex-wrap + 子项显隐控制；不移动 DOM，保留所有事件绑定。 */
    body.td-vip-body .td-vip-topbar {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        overflow: visible !important;
        position: sticky;
        top: 0;
        z-index: 130;
    }
    body.td-vip-body .td-vip-topbar-left {
        display: flex !important;
        align-items: center;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        flex-basis: 0% !important;
        min-width: 0;
        gap: 6px;
        flex-wrap: nowrap;
        overflow: visible;
    }
    body.td-vip-body .td-vip-topbar-right {
        display: flex !important;
        align-items: center;
        flex: 0 0 auto;
        gap: 6px;
        flex-wrap: nowrap;
    }

    /* 关键：顶栏左右组所有直接子项默认不拉伸（避免 brand dock /
     * ext-more-wrap 占满整行把内容推出视口），只有周期滚动区 grow。 */
    body.td-vip-body .td-vip-topbar-left > *,
    body.td-vip-body .td-vip-topbar-right > * {
        flex: 0 0 auto !important;
    }

    /* 默认隐藏次要控件（左右组各自的子项），核心项下面再放行 */
    body.td-vip-body .td-vip-topbar-left > .td-vip-top-tool--indicators,
    body.td-vip-body .td-vip-topbar-left > .td-vip-top-tool--ai-summary,
    body.td-vip-body .td-vip-topbar-left > .td-vip-bar-count,
    body.td-vip-body .td-vip-topbar-left > .td-vip-price-scale-mode,
    body.td-vip-body .td-vip-topbar-left > .td-vip-split-toggle,
    body.td-vip-body .td-vip-topbar-left > .td-vip-ext-more-wrap,
    body.td-vip-body .td-vip-topbar-right > .td-vip-top-tool--moving-average,
    body.td-vip-body .td-vip-topbar-right > .td-vip-top-screenshot-btn,
    body.td-vip-body .td-vip-topbar-right > #tdVipVolumeToggle,
    body.td-vip-body .td-vip-topbar-right > .td-vip-top-meta,
    body.td-vip-body .td-vip-topbar .td-vip-tv-btn--replay,
    body.td-vip-body .td-vip-topbar .td-vip-tv-btn--alerts,
    body.td-vip-body .td-vip-topbar .td-vip-tv-btn--settings {
        display: none;
    }

    /* TV 注入的装饰性分隔线在手机端一律隐藏 */
    body.td-vip-body .td-vip-topbar .td-vip-tv-sep {
        display: none !important;
    }

    /* refresh-cluster：默认只显示主刷新按钮，自刷/频率/连接点收起 */
    body.td-vip-body .td-vip-topbar-refresh-cluster {
        display: inline-flex !important;
        flex: 0 0 auto;
        gap: 4px;
    }
    body.td-vip-body .td-vip-topbar-refresh-cluster #tdVipAutoRefresh,
    body.td-vip-body .td-vip-topbar-refresh-cluster .td-vip-refresh-frequency,
    body.td-vip-body .td-vip-topbar-refresh-cluster .td-vip-connection-badge {
        display: none;
    }
    body.td-vip-body .td-vip-topbar-refresh-cluster #tdVipRefreshBtn {
        display: inline-flex !important;
        min-height: 30px;
        padding: 0 12px;
    }

    /* 核心常驻：品牌头像、品种、周期滚动区 */
    body.td-vip-body .td-vip-topbar .td-vip-top-tool--brand,
    body.td-vip-body .td-vip-topbar .td-vip-brand-toggle,
    body.td-vip-body .td-vip-topbar .td-vip-symbol-switcher {
        display: inline-flex !important;
    }
    /* 品牌 dock 在某些级联下被弹层撑成 ~320px，强制收到头像按钮本身的宽度 */
    body.td-vip-body .td-vip-topbar .td-vip-top-tool--brand {
        width: auto !important;
        max-width: 44px !important;
        flex: 0 0 auto !important;
    }
    body.td-vip-body .td-vip-topbar .td-vip-back-link-text {
        display: none;
    }
    /* 周期滚动区用 block-level flex 才能在弹性父级里正确收缩/伸展，
     * inline-flex 在某些浏览器里不随 flex:1 拉伸（会塌成 0 宽并溢出）。 */
    body.td-vip-body .td-vip-topbar .td-vip-timeframes-scroll {
        display: flex !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        min-width: 0 !important;
        /* 显式上限兜底：即便 flex 收缩在某些上下文失效，也不会把
         * 顶栏撑爆（视口减去 品牌+品种+刷新+更多 的大致占用）。 */
        max-width: calc(100vw - 220px) !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    body.td-vip-body .td-vip-topbar .td-vip-timeframes-scroll::-webkit-scrollbar {
        display: none;
    }
    /* 内层 tablist 不收缩，保持一排可横滑 */
    body.td-vip-body .td-vip-topbar .td-vip-timeframes-scroll .td-vip-timeframes {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    /* "⋯ 更多" 切换按钮：常驻右端 */
    body.td-vip-body .td-vip-topbar-more-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 34px;
        height: 30px;
        margin-left: 2px;
        border: 1px solid rgba(15, 23, 42, 0.12);
        border-radius: 9px;
        background: #ffffff;
        color: #475569;
        cursor: pointer;
    }
    body.td-vip-body .td-vip-topbar-more-toggle:active {
        background: #f1f5f9;
    }
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-more-toggle {
        border-color: rgba(16, 185, 129, 0.4);
        background: rgba(16, 185, 129, 0.1);
        color: #047857;
    }

    /* --- 更多托盘：展开时把次要控件整齐铺在顶栏下方 ---
     * 让左右两组各自成为整行的换行 flex 容器，组内控件左对齐顺排。
     * 不用 display:contents / order / ::after（在本项目复杂顶栏里会
     * 导致逐项换行+居中），改用最朴素可预测的两行块。 */
    body.td-vip-body.is-topbar-more-open .td-vip-topbar {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        align-content: flex-start !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 40px !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        padding: 8px 10px 12px !important;
        column-gap: 8px !important;
        row-gap: 10px !important;
        background: rgba(255, 255, 255, 0.99);
        box-shadow: 0 18px 36px -24px rgba(15, 23, 42, 0.42);
    }
    /* 左组：换行容器。核心项(品牌/品种/周期 order0)占第一行，
     * 次要工具(指标/AI/回看/警报 order2)换到托盘行；周期 grow 吃满第一行
     * 余量，把 order2 的项挤到下一行，实现「核心行 + 托盘行」。 */
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-left {
        display: flex !important;
        flex: 0 0 100% !important;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 8px;
        min-width: 0;
        overflow: visible;
    }
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-left > .td-vip-top-tool--brand,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-left > .td-vip-symbol-switcher,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-left > .td-vip-timeframes-scroll {
        order: 0;
    }
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-left > .td-vip-top-tool--indicators,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-left > .td-vip-top-tool--ai-summary,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-left > .td-vip-tv-btn--replay,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-left > .td-vip-tv-btn--alerts {
        order: 2;
    }
    /* 右组：次要工具托盘整行铺开、左对齐换行 */
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-right {
        display: flex !important;
        flex: 0 0 100% !important;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: flex-start !important;
        margin: 0 !important;
        gap: 8px;
    }
    /* refresh-cluster 在右组里也左对齐 */
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-refresh-cluster {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        gap: 6px;
    }
    /* 更多按钮在核心行末尾 */
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-more-toggle {
        order: 0;
    }
    body.td-vip-body.is-topbar-more-open .td-vip-timeframes-scroll {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* 托盘里要显示的次要工具 */
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-left > .td-vip-top-tool--indicators,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-left > .td-vip-top-tool--ai-summary,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar-right > .td-vip-top-screenshot-btn,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar .td-vip-tv-btn--replay,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar .td-vip-tv-btn--alerts,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar .td-vip-tv-btn--settings {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 44px !important;
        max-width: none !important;
        margin: 0 !important;
        height: 38px !important;
    }

    /* 指标/AI 收窄成药丸，避免在托盘行里独占整行宽度 */
    body.td-vip-body.is-topbar-more-open .td-vip-topbar .td-vip-top-tool--indicators,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar .td-vip-top-tool--ai-summary {
        width: auto !important;
        max-width: 120px !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        flex: 0 0 auto !important;
    }
    body.td-vip-body.is-topbar-more-open .td-vip-topbar .td-vip-top-tool--indicators::before {
        display: none !important;
    }
    body.td-vip-body.is-topbar-more-open .td-vip-topbar .td-vip-top-tool--indicators > .td-vip-menu-btn,
    body.td-vip-body.is-topbar-more-open .td-vip-topbar .td-vip-top-tool--ai-summary > .td-vip-ai-toolbar-btn {
        width: auto !important;
        min-width: 0 !important;
        height: 38px !important;
        padding: 0 14px !important;
    }

    /* 托盘控件统一为药丸：浅底 + 发丝线，视觉整齐 */
    body.td-vip-body.is-topbar-more-open .td-vip-topbar .td-vip-tv-btn {
        align-items: center;
        justify-content: center;
        min-width: 44px;
        padding: 0 14px;
        border: 1px solid rgba(15, 23, 42, 0.1) !important;
        border-radius: 9px !important;
        background: #f8fafc !important;
        color: #475569 !important;
    }

    /* --- 4) 右侧工具按钮：手机端弱化为贴底轻浮条，不再用大网格抢图表 --- */
    body.td-vip-body .td-vip-right-tools {
        display: flex !important;
        position: fixed !important;
        left: 10px;
        right: 10px;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        order: 2;
        z-index: 138;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px;
        margin: 0;
        padding: 6px 8px !important;
        height: auto !important;
        min-height: 46px;
        max-height: 46px;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(18px);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    body.td-vip-body .td-vip-right-tools::-webkit-scrollbar {
        display: none;
    }
    body.td-vip-body .td-vip-right-tool-btn {
        display: flex !important;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 42px !important;
        min-width: 42px !important;
        min-height: 34px;
        padding: 0 !important;
        border-radius: 12px;
        border: 1px solid transparent;
        background: rgba(248, 250, 252, 0.86);
        color: #475569;
    }
    body.td-vip-body .td-vip-right-tool-btn .td-vip-right-tool-label {
        display: none;
        font-size: 11px;
        line-height: 1.1;
    }
    body.td-vip-body .td-vip-right-tool-btn.is-active {
        border-color: rgba(16, 185, 129, 0.32);
        background: rgba(16, 185, 129, 0.1);
        color: #047857;
    }

    /* --- 5) 右栏面板卡片：留白与圆角，单个面板可读 --- */
    body.td-vip-body .td-vip-rightbar .td-vip-side-panel,
    body.td-vip-body .td-vip-rightbar .td-vip-right-panel {
        width: 100% !important;
        margin: 0;
        padding: 12px 14px 14px;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 20px 46px -38px rgba(15, 23, 42, 0.42);
    }

    /* --- 6) 图表卡片高度：手机端优先看图，首屏尽量留给 K 线 --- */
    body.td-vip-body .td-vip-chart-host {
        min-height: 540px !important;
        height: clamp(540px, calc(100dvh - 182px), 760px) !important;
    }

    /* --- 6.1) 绘图栏：保留核心入口，但缩成低干扰底部图标条 --- */
    body.td-vip-body .td-vip-left-rail {
        left: 10px !important;
        right: 10px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        justify-content: flex-start !important;
        padding: 6px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 18px 42px -32px rgba(15, 23, 42, 0.5) !important;
        backdrop-filter: blur(18px);
    }
    body.td-vip-body .td-vip-left-rail-main {
        gap: 6px !important;
    }
    body.td-vip-body .td-vip-rail-btn {
        width: 42px !important;
        min-height: 40px !important;
        padding: 6px 0 !important;
        border-radius: 12px !important;
    }
    body.td-vip-body .td-vip-rail-btn-name {
        display: none !important;
    }
    body.td-vip-body .td-vip-rail-btn-glyph {
        width: 20px;
        height: 20px;
    }
    body.td-vip-body .td-vip-rail-divider {
        height: 18px !important;
        margin: auto 2px !important;
    }
    body.td-vip-body .td-vip-left-rail-flyout {
        bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- 7) 底部状态条：横向铺开、可滚动，不挤压 --- */
    body.td-vip-body .td-vip-bottom-bar {
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    /* --- 8) 模态：贴底部弹出（手机更顺手），最大高度受限可滚动 --- */
    body.td-vip-body .td-vip-tool-modal {
        align-items: flex-end;
        padding: 0;
    }
    body.td-vip-body .td-vip-tool-dialog,
    body.td-vip-body .td-vip-tool-dialog--plan,
    body.td-vip-body .td-vip-tool-dialog--onboarding,
    body.td-vip-body .td-vip-tool-dialog--compact,
    body.td-vip-body .td-vip-tool-dialog--widget {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 88vh;
        overflow: auto;
        border-radius: 22px 22px 0 0;
    }
}

/* ============================================================
 *  ≤600px：小屏进一步收紧
 * ============================================================ */
@media (max-width: 600px) {
    body.td-vip-body .td-vip-right-tools {
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        height: auto !important;
        min-height: 42px;
        max-height: 42px;
        padding: 5px 7px !important;
    }
    body.td-vip-body .td-vip-chart-host {
        min-height: 520px !important;
        height: clamp(520px, calc(100dvh - 170px), 700px) !important;
    }
    body.td-vip-body .td-vip-right-tool-btn {
        width: 38px !important;
        min-width: 38px !important;
        min-height: 32px;
        border-radius: 11px;
    }
    body.td-vip-body .td-vip-rail-btn {
        width: 38px !important;
        min-height: 36px !important;
    }
    /* 计划/日记面板的两列网格在小屏回落单列，避免拥挤 */
    body.td-vip-body #tdVipRightPanel_plan .td-vip-plan-grid2,
    body.td-vip-body .td-vip-side-panel--journal .td-vip-journal-form-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 *  夜间模式适配（≤900px）
 * ============================================================ */
@media (max-width: 900px) {
    body.td-vip-body.is-night-mode .td-vip-right-tools {
        border-color: rgba(51, 65, 85, 0.7);
        background: rgba(11, 22, 37, 0.92);
        box-shadow: none;
    }
    body.td-vip-body.is-night-mode .td-vip-right-tool-btn {
        background: rgba(15, 23, 42, 0.7);
        color: #94a3b8;
    }
    body.td-vip-body.is-night-mode .td-vip-right-tool-btn.is-active {
        border-color: rgba(16, 185, 129, 0.4);
        background: rgba(6, 95, 70, 0.32);
        color: #6ee7b7;
    }
    body.td-vip-body.is-night-mode .td-vip-rightbar .td-vip-side-panel,
    body.td-vip-body.is-night-mode .td-vip-rightbar .td-vip-right-panel {
        border-color: rgba(51, 65, 85, 0.7);
        background: rgba(11, 22, 37, 0.92);
        box-shadow: none;
    }
}