/* ==========================================================================
   OpenMolLab · 共享响应式层（放在各页面 </head> 之前，晚于页面自带 <style>）
   断点：≥1200 桌面（不干预）｜992–1199 小桌面｜768–991 平板｜≤768 手机｜≤480 小手机｜≤390 超小
   原则：用 grid / flex / 宽度 / 换行 / 间距做真响应式；不缩放、不 zoom、
        不用 overflow 掩盖布局错误（子元素宽度问题在各自规则里解决）。
   ========================================================================== */

/* ── 0. 小屏基础防御：图片/画布类不超出容器（桌面不受影响） ── */
@media (max-width: 1199px) {
    img, svg, video, canvas { max-width: 100%; }
}

/* ==========================================================================
   手机 ≤768px
   ========================================================================== */
@media (max-width: 768px) {

    /* 保护层：宽度问题已在下面各条里按 grid/flex 解决，这里只兜底防横向滚动 */
    html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

    /* 主内容：左右对称安全边距；底部给右下角悬浮菜单留位，避免遮住核心按钮 */
    .main-content { min-width: 0; padding-bottom: 92px; }
    .main-content > *, .aidd-layout > *, .aidd-workspace > *,
    .card, .panel, .panel-body, .page-header, .table-wrap, .stack { min-width: 0; }

    /* 长文本 / 长英文路径不撑破容器 */
    p, li, td, th, label, .hint, .note, .desc { overflow-wrap: break-word; }
    code, .path, .module-path, .file-path { overflow-wrap: anywhere; }

    /* ── 1. 手机悬浮菜单：固定右下角（原左上会压住每页标题/tab） ── */
    .hamburger-btn {
        top: auto !important;
        left: auto !important;
        right: 16px !important;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        font-size: 22px !important;
        box-shadow: 0 6px 20px rgba(15, 23, 42, .3) !important;
    }
    /* 抽屉：占满高 + 盖在内容之上（fixed + transform，不挤压主体）。
       注意 sidebar.css 在 ≤1100px 把「二级列」display:none 了，手机上就只剩 104px 图标栏，
       结果只能看到"结构准备"这一个模块入口 → 这里把二级菜单在抽屉里放出来（一级+二级并排）。 */
    .sidebar { z-index: 1100 !important; height: 100dvh; width: min(88vw, 364px) !important; min-width: 0 !important; }
    .sidebar-col1 { flex: 0 0 104px; width: 104px; min-width: 104px; }
    .sidebar-col2 { display: flex !important; flex: 1 1 auto; width: auto; min-width: 0; }
    .sidebar-backdrop { z-index: 1090 !important; }

    /* ── 2. 页面头部：竖排 + 按钮不折行（消灭中文按钮竖排） ── */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .page-header > div { flex-wrap: wrap !important; }
    .page-header .btn, .page-header button { flex: 0 0 auto !important; }
    .main-content .btn, .main-content button { white-space: nowrap; }
    .main-content .btn { min-height: 40px; }

    /* ── 3. 表格：只在容器内横滑，整页不横滑 ── */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-wrap table { min-width: 520px; }

    /* ── 4. AIDD 系（对接 / 虚拟筛选）内联样式里的 10~11px 类 ── */
    .file-upload-name, .upload-card-sub, .upload-file-meta .meta-label,
    .ligand-source-btn, .receptor-structure-note, .receptor-group-meta,
    .receptor-option, .help-icon, .pocket-file-name, .residue-letter-index,
    .step-name, .preset-card-desc, .preset-card-status, .input-card-note,
    .receptor-structure-title { font-size: 12px !important; }
    .upload-card .btn, .ligand-preview-tools .btn { font-size: 12px !important; min-height: 32px; }

    /* ── 5. 通用小字号保底 ── */
    .eyebrow, .hero-pill, .hero-en, .meta-label, .file-meta, .upload-card-sub,
    .input-card-sub, .format-label, .field-hint, .section-kicker, .pd-task-ribbon,
    .workspace-header, .main-content small, .main-content .hint,
    .main-content .desc, .main-content .subtitle { font-size: 12px !important; line-height: 1.5; }

    /* ── 6. 触控目标（含非 .btn 的卡片链接/客服按钮） ── */
    .aidd-module-nav .nav-item, .main-content a.btn, .main-content .card-tool-link,
    .main-content .dashboard-contact-card__action, .main-content .btn-small {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* ── 7. 大画布 / 预览：按屏幕宽度自适应（原 500~560px 固定高在手机上留大片空白） ── */
    .viewport-container { height: auto !important; aspect-ratio: 16 / 11; min-height: 260px; }
    .protein-viewer { height: auto !important; aspect-ratio: 4 / 3; }
    .ligand-preview-card { min-height: 200px !important; }
}

/* ==========================================================================
   小手机 ≤480px
   ========================================================================== */
@media (max-width: 480px) {
    .main-content { padding-bottom: 96px; }
    .pipeline-step { min-width: 0; }
}

/* ==========================================================================
   超小屏 ≤390px
   ========================================================================== */
@media (max-width: 390px) {
    .hamburger-btn { width: 48px !important; height: 48px !important; font-size: 20px !important; }
}

/* ==========================================================================
   平板 769–1100px：放开二级菜单
   （platform 的 css/sidebar.css 在 ≤1100px 把 .sidebar-col2 设成 display:none，
     并把侧栏压到 104px 图标栏。平板宽度其实够放二级菜单，这里放开。）
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1100px) {
    .sidebar { width: calc(var(--col1-width) + clamp(196px, 21vw, 244px)); }
    .sidebar-col2 { display: flex; width: clamp(196px, 21vw, 244px); min-width: 0; }
    .main-content {
        margin-left: calc(var(--col1-width) + clamp(196px, 21vw, 244px));
        width: calc(100% - var(--col1-width) - clamp(196px, 21vw, 244px));
    }
}

/* ==========================================================================
   手机端「模块切换条」（MD 各页顶部）：≥769px 完全不显示 → 桌面端零影响
   ========================================================================== */
.md-module-switch { display: none; }

@media (max-width: 768px) {
    .md-module-switch {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0 2px;
        margin: 0;
        scrollbar-width: none;
    }
    .md-module-switch::-webkit-scrollbar { display: none; }
    .md-module-switch a {
        flex: 0 0 auto;
        padding: 8px 13px;
        border: 1px solid #dae5f2;
        border-radius: 999px;
        background: #fff;
        color: #476785;
        font-size: 12px;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
    .md-module-switch a.active {
        border-color: #1b6fed;
        background: #eef6ff;
        color: #165ecb;
        font-weight: 700;
    }
}

/* ==========================================================================
   MD 页面的 .topbar 高度修正（手机端）
   css/sidebar.css 里有一份给仪表盘用的 .topbar{height:56px; position:sticky}，
   类名和 MD 页面的 .topbar（md.css 定义、正常文档流）撞了 → 手机端按钮换行后
   内容约 130px 高，却仍被压成 56px → 溢出并盖住上面的模块切换条。这里只在小屏放开高度。
   ========================================================================== */
@media (max-width: 768px) {
    .aidd-workspace .topbar {
        height: auto !important;
        min-height: 0;
        position: static;
    }
    .aidd-workspace .topbar .top-actions { flex-wrap: wrap; gap: 8px; }
}