/* ============================================================================
   mobile.css —— 手机适配层（最后一个加载）

   分三部分：平台层（对桌面也生效，但收益几乎只在手机上）、触控尺寸、
   文档页与横屏。桌面规则一条都不动 ——
   admin.css / styles.css / chat.css 里已经有大量移动端适配
   （底部胶囊 Tab、底部抽屉、表格转卡片、安全区、100dvh、hover 能力查询），
   那些是踩过坑调好的，这里不重复、不覆盖。

   这里只有三类东西：
     1) 平台层：让浏览器按 App 的方式对待这个页面（原生控件、缩放、点击延迟…）
     2) 触控尺寸：手指不是鼠标
     3) 文档页 / 横屏：前面几个表没覆盖到的角落

   ⚠️ 改这里之前先问一句：这条规则在桌面上会发生什么？
      如果答案是「也会生效」，那它不该写在这个文件里。
   ============================================================================ */

/* ==========================================================================
   1) 平台层
   ========================================================================== */

/* 原生控件跟随应用主题。
   下拉列表、滚动条、日期选择器、搜索框那个清除小叉，全部由浏览器绘制，
   CSS 管不到它们。color-scheme 是唯一的开关。
   缺了这条，深色界面里点开一个 <select> 会弹出亮白色的列表 ——
   这是整页最响的「我其实是个网页」信号，比字体和圆角都响。 */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* 横屏时浏览器会自作主张放大正文字号（它以为你在做无障碍缩放），
   结果是版式整个错位。关掉。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 去掉双击缩放的 300ms 等待 —— iOS Safari 上点按钮总像慢半拍。
   manipulation 仍然允许单指滚动和双指缩放，只禁掉「双击放大」，
   所以不会伤到可访问性（真正不能做的是 user-scalable=no）。 */
a, button, [role="button"], label, summary,
.adm-tab, .cx-tab, .adm-btn, .adm-iconbtn {
  touch-action: manipulation;
}

/* 控件上的文字不该被长按选中，也不该弹出「拷贝 / 分享」气泡。
   ⚠️ 只加在控件上。正文必须保持可选中 —— 用户要复制账号、地址、报错信息。
      往 body 上加这条是缺陷，不是优化。 */
button, [role="button"], .adm-tab, .adm-btn, .adm-iconbtn,
.cx-tab, .cx-nav-btn, .rk-chip, .rk-prof, .up-tab, .dx-top-btn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 触摸设备上输入框必须 ≥16px，否则 iOS 聚焦时会把整页放大，而且失焦后
   不会缩回来 —— 用户就卡在一个被裁掉的版式里。
   admin.css 已经对 body.adm-mode 做过；这里补上对话页、文档页、会员页，
   它们的输入框不在 adm-mode 下。 */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: max(16px, 1rem);
  }
}

/* ==========================================================================
   2) 触控尺寸：手指不是鼠标
   ========================================================================== */

/* 风险中心的筛选 chip（权重 6px 14px / 0.82rem ≈ 32px 高）。
   桌面鼠标点 32px 很轻松，手指上就是「点不准」，而用户读到的结论是
   「这个按钮坏了」。触摸设备上撑到 40px；不动桌面。 */
@media (pointer: coarse) {
  .rk-chip {
    min-height: 40px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  /* 档位格子同理：手机上一行放不下三个时它会换行，换行后每格更矮，
     点错的风险更高。给一个下限，不改变列数语义。 */
  .rk-prof { min-height: 88px; }
}

/* ==========================================================================
   3) 文档页 / 横屏
   ========================================================================== */

/* docs.css 用的是 100vh —— 那是「地址栏收起后」的高度，加载时地址栏还在，
   于是侧边目录比可视区高一截，底部永远被地址栏压住。 */
body.dx {
  min-height: 100dvh;
}

/* 桌面那一栏 sticky 目录也算了一次 100vh；同一条理由。 */
@media (min-width: 901px) {
  .dx-side { max-height: calc(100dvh - var(--adm-nav-h)); }
}

/* 手机上的文档目录是一个从左边推出来的抽屉（docs.css 的 max-width:900px 里
   把它变成 fixed + translateX(-102%)）。那个抽屉也是 height:100vh，
   同样会顶到地址栏底下；而且它贴着屏幕左边和底部，正好是刘海和 Home 横条的位置。 */
@media (max-width: 900px) {
  .dx-side {
    height: 100dvh;
    max-height: 100dvh;
    padding-top: calc(20px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }
  /* 正文最后一段不要压在 Home 横条下面 */
  .dx-main { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}

/* 横屏手机：高度只有 320~420px，而底部胶囊 Tab 60px + 顶部导航 56px
   就去掉了三分之一。把导航压缩，把 Tab 的图标与文字间距收紧。 */
@media (orientation: landscape) and (max-height: 480px) {
  .adm-tabbar { height: 48px; }
  .adm-tab { height: 40px; }
  .adm-tab-label { font-size: 0.625rem; }
  .cx-tabbar { height: 52px; }
  .cx-tab { gap: 1px; }
  .cx-tab-label { font-size: 0.625rem; }
  /* 横屏时左右安全区变宽（刘海跑到侧面），别让内容被切掉 */
  .adm-col, .cx-scroll {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}