/* ============================================================
   mobile.css —— 移动端适配层（手机 / 平板竖屏）
   ------------------------------------------------------------
   控制台原本按桌面优先写的：两行吸顶外壳、多列表格、双栏编辑器、
   贴着按钮弹出的下拉。手机端要用的东西一样不少，只是尺寸与排布
   需要换一套。

   加载顺序（必须最后）：
     tokens.css → shell.css → panels.css（门户页为 portal.css）→ mobile.css
   本文件只做「覆盖」，不改动上面几个样式表的主体规则；断点：
     ≤ 900px  平板竖屏 / 小笔记本：触控目标放大到 40px，页边距收窄
     ≤ 720px  手机：顶栏改两行（品牌 + 账号 / 域标签横滑），浮层底部弹出
     ≤ 560px  手机竖屏：卡片头竖排、多列网格单栏、表格横滚、下拉改底部弹层
   ============================================================ */

/* ---------- 1. 触控目标与页面留白（≤ 900px） ---------- */
@media (max-width: 900px) {
    :root {
        /* 34px 是鼠标的尺寸，手指要 40px 左右；外壳、按钮、输入框共用这一个值 */
        --cc-ctl-h: 40px;
        --cc-page-x: 14px;
    }

    /* 控件变高后，下拉箭头要跟着下移，否则不在垂直中线上 */
    .cc-select {
        background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px;
    }

    .cc-main {
        padding: var(--cc-sp-3) var(--cc-page-x) var(--cc-sp-5);
    }

    .cc-table-wrap,
    .cc-listbox {
        max-height: 66vh;
    }
}

/* ---------- 2. 顶栏两行 + 浮层改底部弹出（≤ 720px） ---------- */
@media (max-width: 720px) {
    :root {
        --cc-header-h: 100px;
        --cc-toolbar-h: 44px;
    }

    /* 顶栏：第一行「品牌 + 账号」，第二行域标签（横向滑动） */
    .cc-header-in {
        flex-wrap: wrap;
        align-content: center;
        column-gap: var(--cc-sp-2);
        padding: 6px var(--cc-page-x);
    }

    .cc-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cc-account {
        order: 2;
        gap: 2px;
    }

    .cc-nav.mz-chips {
        order: 3;
        flex: 1 0 100%;
        padding-top: 6px;
        gap: 4px;
    }

    .cc-nav.mz-chips .mz-chip {
        min-height: 38px;
        padding: 0 11px;
    }

    /* 账号区只留图标，「未填密钥 / 已填密钥」的字样让位给域标签 */
    .cc-key-label {
        display: none;
    }

    /* 工具行不再吸顶：手机竖屏高度宝贵，位置随内容滚走 */
    .cc-toolbar {
        position: static;
        height: auto;
        min-height: var(--cc-toolbar-h);
    }

    .cc-toolbar-in {
        height: auto;
        min-height: var(--cc-toolbar-h);
        flex-wrap: wrap;
        row-gap: 6px;
        padding: 6px var(--cc-page-x);
    }

    .cc-actions {
        flex-wrap: wrap;
    }

    .cc-tabs.mz-chips {
        gap: 6px;
        padding: 0 0 var(--cc-sp-2);
        -webkit-overflow-scrolling: touch;
    }

    .cc-tabs.mz-chips .mz-chip {
        min-height: 38px;
        padding: 0 14px;
    }

    .cc-seg {
        padding: 4px;
    }

    .cc-seg-btn {
        height: 32px;
    }

    .cc-check {
        padding: 5px 0;
    }

    /* 输入框字号必须 ≥ 16px：否则 iOS 聚焦时会自动把整页放大 */
    .cc-input,
    .cc-select,
    .cc-textarea,
    .cc-editor-area {
        font-size: 16px;
    }

    /* 浮层统一改成底部弹出、左右满宽 */
    .cc-mask {
        align-items: flex-end;
        padding: 0;
    }

    .cc-sheet,
    .cc-sheet--wide {
        max-width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: var(--cc-r-lg) var(--cc-r-lg) 0 0;
    }

    .cc-sheet-head {
        padding: var(--cc-sp-3) var(--cc-sp-4);
    }

    .cc-sheet-body {
        padding: var(--cc-sp-4);
    }

    .cc-sheet-foot {
        flex-wrap: wrap;
        padding: var(--cc-sp-3) var(--cc-sp-4);
        padding-bottom: calc(var(--cc-sp-3) + env(safe-area-inset-bottom, 0px));
    }

    .cc-sheet-foot .cc-btn {
        flex: 1 1 auto;
    }

    .cc-toasts {
        bottom: calc(var(--cc-sp-4) + env(safe-area-inset-bottom, 0px));
    }

    .cc-gate {
        padding: var(--cc-sp-4);
    }

    .cc-gate-card {
        padding: var(--cc-sp-5) var(--cc-sp-4);
    }

    /* 富文本：工具条按钮放大到手指尺寸，正文不顶着边框 */
    .cc-editor-rail {
        gap: 4px;
        padding: 6px;
    }

    .cc-editor-btn {
        min-width: 36px;
        height: 34px;
    }

    .cc-editor-area {
        min-height: 220px;
        max-height: 60vh;
        padding: var(--cc-sp-3) var(--cc-sp-4);
    }

    .cc-wx textarea {
        min-height: 260px;
    }

    /* 吸顶外壳会盖住锚点目标，跳转时给它留出高度 */
    html {
        scroll-padding-top: calc(var(--cc-header-h) + 10px);
    }
}

/* ---------- 3. 手机竖屏：单栏化 + 表格横滚（≤ 560px） ---------- */
@media (max-width: 560px) {
    /* 卡片头竖排：标题一行、操作按钮一行（并排时标题会被挤成三四个字一行） */
    .cc-card-head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--cc-sp-3);
        padding: var(--cc-sp-3) var(--cc-sp-4);
    }

    .cc-card-head-ops {
        justify-content: flex-start;
    }

    .cc-card-body {
        padding: var(--cc-sp-4);
    }

    .cc-card-foot,
    .cc-toolrow {
        padding-left: var(--cc-sp-4);
        padding-right: var(--cc-sp-4);
    }

    .cc-toolrow .cc-input,
    .cc-toolrow .cc-select {
        min-width: 0;
        flex: 1 1 140px;
    }

    .cc-item {
        padding: var(--cc-sp-3) var(--cc-sp-4);
    }

    .cc-item-ops {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .cc-detail {
        padding: 0 var(--cc-sp-4) var(--cc-sp-3);
    }

    /* 一边 260px 起步的多列网格在手机上会顶破容器，一律收成单栏 */
    .cc-fieldset,
    .cc-detail-grid,
    .cc-grid-2 {
        grid-template-columns: 1fr;
    }

    /* 字段编辑：标签在上、控件在下，控件不再被 92px 标签挤窄 */
    .cc-field-item-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .cc-kv {
        grid-template-columns: 78px 1fr;
    }

    /* 表格：单元格收紧，整表横向滚动，而不是把每列压成一两个字 */
    .cc-table {
        min-width: 620px;
    }

    /* anywhere 会让列的最小宽度缩到 1 个字，短词也被拆行（发布文/章）；
       break-word 不影响列的最小宽度，长链接照样能就地折行 */
    .cc-table td {
        overflow-wrap: break-word;
    }

    .cc-table th,
    .cc-table td {
        padding: 9px 10px;
    }

    /* 下拉菜单改底部弹层：小屏上贴着按钮弹会被视口切掉半截 */
    .cc-menu,
    .cc-menu--right {
        position: fixed;
        top: auto;
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        min-width: 0;
        max-height: 62vh;
        border-radius: var(--cc-r-lg);
    }

    .cc-menu-item {
        padding: 11px 12px;
        font-size: var(--cc-fs-md);
    }

    /* 待选人员、开关这类密集控件，行高放大到可点 */
    .cc-person {
        padding: 9px 10px;
    }

    .cc-switch {
        padding: 5px 0;
    }

    .cc-stats {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    }

    .cc-photo {
        width: 104px;
        height: 104px;
    }

    /* 面板内部不再自带滚动条（浏览器地址栏会收，视口本来就矮） */
    .cc-listbox,
    .cc-preview,
    .cc-wx-preview {
        max-height: none;
    }

    .pt-domains {
        grid-template-columns: 1fr;
    }
}