/* ============================================================================
   移动端样式（≤768px）—— 独立文件，按屏幕尺寸由浏览器条件加载
   ----------------------------------------------------------------------------
   为什么单独成文件：老板要求「不同屏幕加载不同样式、互不干扰」。这里集中了
   所有 ≤768px 的覆盖规则，桌面端的 scoped 样式完全不掺和，改移动端不会动到 PC。
   用 !important 是因为组件内 scoped 样式带了 [data-v-xxx] 属性选择器（特异性更高），
   全局文件要稳稳压过它必须提权；下面每条都是「移动端应当长这样」的权威声明。
   主题色全部走 main.css 的 CSS 变量（--panel/--text/--primary…），深/浅色自动适配。
   ============================================================================ */

/* ---------- 全局：禁止任何元素横向溢出视口（根因：之前某些固定宽度被挤出屏幕） ---------- */
* { max-width: 100% !important; }
html, body { overflow-x: hidden !important; }

/* ---------- 顶栏 ---------- */
.app-header {
  height: 52px !important; padding: 0 12px !important; gap: 8px !important;
}
.app-header h1 { font-size: 15px !important; gap: 6px !important; }
.app-header .badge,
.app-header .header-right .tag { display: none !important; }
.hamburger { display: inline-flex !important; }

/* ---------- 侧边栏：抽屉 ---------- */
.sidebar {
  position: fixed !important; top: 52px !important; bottom: 0 !important; left: 0 !important;
  width: 264px !important; max-width: 84vw !important; z-index: 40 !important;
  transform: translateX(-100%) !important; transition: transform .22s ease !important;
  box-shadow: 2px 0 16px rgba(0,0,0,.18) !important;
}
.sidebar.open { transform: translateX(0) !important; }
.sidebar-mask {
  display: block !important; position: fixed !important; top: 52px !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: rgba(0,0,0,.42) !important; z-index: 39 !important;
}
.main { padding: 8px 10px !important; overflow-x: hidden !important; }

/* ---------- 状态栏：手机上藏掉光标行列，文本省略 ---------- */
.status-bar { padding: 5px 12px !important; gap: 8px !important; min-height: 26px !important; font-size: 11.5px !important; }
.status-bar .cursor-pos { display: none !important; }

/* ---------- PWA 提示条：窄屏可换行、不溢出 ---------- */
.pwa-toast {
  white-space: normal !important; flex-wrap: wrap !important; max-width: calc(100vw - 20px) !important;
  bottom: 38px !important; font-size: 12px !important; padding: 8px 12px !important;
}

/* ============================================================================
   首页
   ============================================================================ */
.home { padding: 6px 2px 18px !important; }
.hero { margin-bottom: 16px !important; }
.hero h1 { font-size: 21px !important; margin-bottom: 6px !important; }
.lead { font-size: 13px !important; line-height: 1.55 !important; }
.group-section { margin-top: 16px !important; }
.group-title { font-size: 13.5px !important; margin: 0 0 8px !important; }
.card-grid {
  grid-template-columns: repeat(auto-fill, minmax(46%, 1fr)) !important;
  gap: 9px !important;
}
.tool-card { padding: 11px 12px !important; gap: 10px !important; border-radius: 10px !important; }
.tool-tile { width: 30px !important; height: 30px !important; border-radius: 8px !important; }
.tool-name { font-size: 13.5px !important; }
.tool-desc {
  font-size: 11px !important; white-space: normal !important; -webkit-line-clamp: 2 !important;
  display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}

/* ============================================================================
   工具页
   ============================================================================ */
.tool-page { gap: 8px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }

/* 组件结果区（CsvTable 这类）在移动端要能"按钮栏吸顶"：
   整页滚动发生在 .tool-page 上，但这条祖先链上的 overflow:auto/hidden 都会成为"滚动容器"，
   sticky 只认最近的那一个，链断在哪就粘不住 —— 所以整条链都要放开：
     .ct-box(clip) → .output.component(visible) → .card-body(hidden→clip) → .editor-card(hidden→clip)
   用 clip 而不是 visible：裁剪效果不变（卡片圆角、防溢出），但 clip 不建立滚动容器。
   选择器一律用 :has(.ct-box) 精确限定，不影响 CropBox / 树视图（StructView）的既有滚动行为；
   老浏览器不支持 :has 时这些规则自动失效，退化成现状，不会更糟。 */
.output.component:has(> .ct-box) { overflow: visible !important; }
/* StructView 切到「表格」视图时 .ct-box 藏在 .sv-box 里，不再是直接子元素 —— 也要放开这一层，
   否则内层表格的按钮栏吸不住顶（同一条祖先链的问题） */
.output.component:has(> .sv-box):has(.ct-box) { overflow: visible !important; }
.editor-card:has(.ct-box),
.card-body:has(.ct-box) { overflow: clip !important; }

/* 标题行：紧凑，描述隐藏；动作按钮（收藏/置顶/历史/批量/参数/自动）整行换行到第二行，
   不跟标题挤一行，也不被裁。这样标题行只占很小一块，输入区吃到大部分高度。 */
.tool-header { flex-wrap: wrap !important; gap: 6px 10px !important; align-items: center !important; }
.header-text { min-width: 0 !important; flex: 1 1 auto !important; }
.tool-title { font-size: 16px !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.tool-desc { display: none !important; }
.header-actions {
  flex: 1 1 100% !important; justify-content: flex-start !important; flex-wrap: wrap !important;
  gap: 6px !important; padding-top: 0 !important;
}

/* 工具栏：字段区整行独占（label 一行、控件一行，不再挤成十几像素宽还自动换行）；
   动作按钮整行、内部换行、触控高度够大、绝不溢出视口被裁。 */
.toolbar { gap: 6px !important; min-height: 0 !important; padding-bottom: 2px !important; }
.fields-wrap { flex: 1 1 100% !important; min-width: 100% !important; gap: 8px !important; }
.toolbar-actions {
  flex: 1 1 100% !important; margin-left: 0 !important; justify-content: flex-start !important;
  flex-wrap: wrap !important; gap: 6px !important;
}

/* 触控目标：动作按钮 38px 高、字号 13px；头部的小图标按钮更紧凑 */
.btn { min-height: 38px !important; padding: 9px 14px !important; font-size: 13px !important; border-radius: 9px !important; }
.btn.ghost { padding: 7px 11px !important; }
.icon-btn { min-height: 34px !important; padding: 5px 9px !important; font-size: 15px !important; }
.auto-toggle { font-size: 12.5px !important; }
.field-toggle { font-size: 12.5px !important; }

/* 字段：全宽独占 */
.field-label { width: 100% !important; font-size: 12.5px !important; }
.inline-field-label { width: 100% !important; }
.inline-field { width: 100% !important; flex: 1 1 100% !important; }
.combo-wrap { flex: 1 1 100% !important; min-width: 0 !important; }
.field { flex: 1 1 100% !important; min-width: 0 !important; }
.field.select { flex: 0 0 auto !important; width: auto !important; }
.field.grow { max-width: none !important; }
.range-val { min-width: 26px !important; }

/* ---------- 编辑区：纵向堆叠，输入/输出各占近半屏，整页可滚动 ---------- */
.editor-split { flex: none !important; flex-direction: column !important; overflow: visible !important; gap: 10px !important; }
.editor-pane { flex: none !important; min-height: 0 !important; gap: 10px !important; }
.editor-pane.left, .editor-pane.right { flex: none !important; min-width: 0 !important; }
.editor-card { flex: none !important; border-radius: 10px !important; }
.editor-pane > .editor-card:not(.file-card) { min-height: 42vh !important; }
.editor-pane > .editor-card.file-card { min-height: 72px !important; }

/* 卡片头更紧凑，少占纵向空间（这是「标题行吃半屏」的另一处来源） */
.card-header { padding: 5px 10px !important; font-size: 12px !important; }
.card-header .hint { font-size: 11px !important; }

/* 样例按钮：移动端只留 🎲 图标。375px 的标题栏里「粘贴/清空/⤢」已经占满，
   再多「生成样例」4 个字必然触发换行 —— 标题栏一高，输入区就矮一截。
   只省宽度、不动高度：38px 触控高度（见 .btn）保持不变。 */
.sample-btn .sb-txt { display: none !important; }

/* HTTP 请求头这类「放在上方」的第二输入：固定高度但缩短，把空间留给请求体 */
.editor-pane > .second-card.above:not(.collapsed) { flex: 0 0 116px !important; }
/* 收起后必须把 min-height 也清零：上面 `.editor-pane > .editor-card:not(.file-card)`
   给了所有卡 min-height:42vh，收起态若不清就一直顶着一大块空白（手机上尤其明显）。 */
.editor-pane > .second-card.collapsed { flex: 0 0 auto !important; min-height: 0 !important; }
/* 展开态也不用 42vh 那么高，让主输入区吃到更多高度 */
.editor-pane > .second-card:not(.collapsed) { min-height: 150px !important; }

/* 最大化：只留一张卡，给足高度 */
.editor-split.input-max .editor-pane.left,
.editor-split.output-max .editor-pane.right { min-height: 84vh !important; }
.editor-split.input-max .editor-pane.right,
.editor-split.output-max .editor-pane.left { display: none !important; }

/* ---------- 下拉菜单：绝不超出视口（之前会溢出右侧被裁/看不到） ---------- */
.split-menu {
  left: 0 !important; right: auto !important; min-width: 0 !important;
  width: max-content !important; max-width: calc(100vw - 20px) !important; z-index: 60 !important;
}
.send-menu, .combo-menu { max-width: calc(100vw - 20px) !important; }

/* ---------- 弹窗：近乎满宽，KV 表格去最小宽、列压缩、可横向滚动 ---------- */
.modal { width: auto !important; max-width: calc(100vw - 16px) !important; border-radius: 14px !important; }
.modal-title { padding: 14px 16px !important; font-size: 15px !important; }
.modal-body { padding: 16px !important; overflow-x: auto !important; }
.modal-field { margin-bottom: 12px !important; }
.modal-input { font-size: 14px !important; padding: 10px 12px !important; }
.modal-input.area { min-height: 96px !important; }
.kv-table { min-width: 0 !important; }
.kv-row {
  grid-template-columns: 22px minmax(72px, 1fr) minmax(82px, 1.3fr) 22px !important;
  gap: 5px !important;
}
.kv-in { padding: 7px 8px !important; font-size: 13px !important; }
.kv-foot { flex-wrap: wrap !important; gap: 8px !important; }

/* ---------- 历史抽屉：几乎满宽 ---------- */
.drawer { width: auto !important; max-width: 92vw !important; }

/* ---------- 图片放大角标：触屏没有 hover，必须常显（桌面规则是 hover 才显） ---------- */
.zoom-badge { display: flex !important; }

/* ---------- 批量模式：分隔下拉/输入框全宽 ---------- */
.batch-split, .batch-delim { font-size: 13px !important; }
.batch-delim { width: 100% !important; max-width: 160px !important; }