/**
 * 手机端适配（v1.200 §7.112）—— **覆盖层**，不改 `style.css` 里的既有规则。
 *
 * ── 为什么单独一份、且必须最后加载 ────────────────────────────────────────
 * `style.css` 里有 15 处 `@media`，但**全部是组件级**的（`.bv-grid` / `.bc-grid2` /
 * `.bv-url-row` 这类单个组件的重排）。本文件补的是**主框架级**的那一层：
 * 通栏顶栏、内容区留白、触控目标 —— 这些一旦写进 style.css，就会和既有断点互相覆盖、
 * 难以判断"到底哪条生效"。放在最后加载 ⇒ 覆盖关系单一、可整文件回退。
 *
 * ── 本轮范围：「核心可用」（用户 2026-10-04 裁定）──────────────────────────
 * 目标 = **手机上能正常完成主要操作**，不是像素级还原桌面版。具体只做四件事：
 *   ① 顶栏不挤爆  ② 内容留白收窄  ③ 触控目标够大  ④ 页面标题字号
 * ⛔ **刻意不做**（避免误伤，留给后续单独立项）：表格强制最小宽、弹窗强制全屏、
 *    逐页重排。理由：`.table-wrap` 本来就能横滑、菜单网格本来就是 `auto-fill` 自适应，
 *    再插一手反而可能把已经好用的版式改坏。
 *
 * ── 断点 ──────────────────────────────────────────────────────────────────
 * 720px（与 `style.css` / `cockpit.css` / `publish.css` 的既有主断点对齐，不新造断点）
 * 420px（小屏手机）
 */

@media (max-width: 720px) {
  /* ── ① 通栏顶栏：这是**唯一真正会挤爆**的地方 ──────────────────────────
     `.topbar-inner` 是 `display:flex; justify-content:space-between` 且**不换行**，
     左边是标题、右边是「用户胶囊 + 大模型状态 + 发布 + 登出」等最多 7 个块。
     窄屏（iPhone 390px）下它们的固有宽度之和远超视口 ⇒ **整页被撑宽、出现左右滚动**
     （这是手机端最难受的一种坏法：页面看着正常，但怎么滑都差一截）。
     处理：标题允许收缩并省略；右侧按钮组改成**可横滑的一行**（不换行、不撑高）。 */
  .topbar-inner { padding: 10px 12px; gap: 10px; }
  .topbar .title {
    flex: 1 1 auto;
    min-width: 0;                    /* ← 关键：没有它，flex 子项不肯收缩，省略号不生效 */
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-right {
    flex: 0 1 auto;
    min-width: 0;
    gap: 6px;
    flex-wrap: nowrap;               /* 不换行：换行会把顶栏撑成两三倍高 */
    overflow-x: auto;                /* 按钮多时横滑（拇指横划，符合手机习惯） */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar-right::-webkit-scrollbar { display: none; }
  .topbar-right > * { flex: 0 0 auto; }

  /* ── ② 触控目标 ≥ 36px ────────────────────────────────────────────────
     桌面端那批 `.ghost` 按钮高约 28~30px，鼠标没问题，手指点不准。
     36px 是"拇指可点"的实用下限（44px 是 Apple HIG 理想值，但在本项目的顶栏里
     7 个块各占 44px 会立刻挤爆，故取 36px 折中 —— 这是**刻意的取舍**，不是漏写）。 */
  .topbar-right > button,
  .topbar-right > .user-pill {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
  }

  /* ── ③ 内容留白收窄 ──────────────────────────────────────────────────
     手机屏宽 390px，左右各 16px 就吃掉 8% 的可用宽度，而这套界面里全是表格与表单。 */
  .page { padding: 14px 12px 32px; }

  /* ── ④ 页面级大标题字号 ────────────────────────────────────────────── */
  h1, .auth-title { font-size: 18px; }
}

/* ── 小屏手机（iPhone SE / 老机型 375~414）────────────────────────────── */
@media (max-width: 420px) {
  .topbar .title { font-size: 13px; }
  .page { padding: 12px 10px 28px; }
}