/* ============================================================
   慵懒半径 · 响应式适配
   职责：三端断点（PC/平板/移动）间隔与布局适配
   ============================================================ */

/* ================= 全局限制 ================= */
/* 禁止下拉刷新 / 过度滚动（所有端） */
html, body { overscroll-behavior: none; -webkit-overflow-scrolling: auto; }
/* 禁止点击黑色遮罩（移动端 tap-highlight） */
* { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
/* 禁止双击放大 / 手势缩放（移动端） */
html { touch-action: manipulation; -webkit-touch-callout: none; }
/* 固定栏整链显式声明：命中链中任何元素都不得触发双击缩放（fixed 区域兜底） */
.topbar, .topbar *, .bottomnav, .bottomnav * { touch-action: manipulation; }
@media (max-width: 767px) {
  html, body { touch-action: pan-y manipulation; }
}
/* 弹窗打开时锁死滚动（scrollbar-gutter: stable 已预留滚动条占位，overflow:hidden 不改变宽度）。
   锁定由 JS 控制 body.mask-open 驱动（core.js 用 MutationObserver 同步 dialog[open]），
   替代动态 :has(dialog.pub-mask[open])——iOS 上 :has() 重算可能滞后，关闭后 overflow:hidden 残留在 .main
   会导致「页面拖不动、刷新才恢复」，改为 body 类可确定开关、关闭即解锁。 */
/* 输入框 font-size ≥16px 防止 iOS 聚焦时页面自动放大 */
@media (max-width: 767px) {
  input, select, textarea, .lg-input, .pin-digit, .s-input {
    font-size: 16px !important;
  }
}

/* PC/平板：内容区内嵌于 .main 圆角面板，留白由 .content/.topbar 自身 padding 控制；
   侧栏与面板间距在 core.css 的 .main 外边距中给出。 */

/* ================= 移动端（<768px） ================= */
@media (max-width: 767px) {
  /* 分页指示点占额外空间，底部菜单增高 10px（仅移动端覆盖 variables.css 的 66px） */
  :root { --nav-h: 76px; }
  /* 移动端锁住浏览器根页面，滚动只发生在 .main 内，避免浏览器底栏收放带动固定底部菜单下移。 */
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: auto; }
  body { position: fixed; inset: 0; width: 100%; }
  .app-shell { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; }
  .shell { height: 100%; min-height: 100%; overflow: hidden; }
  .sidebar { display: none; }
  /* 移动端恢复通栏：去掉桌面端内嵌圆角面板的外边距/底色/描边 */
  .main { margin: 0 !important; height: 100%; min-height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-top: 0; background: var(--bg); border: 0; border-radius: 0; --pane-h: calc(100dvh - var(--nav-h)); }
  /* 顶栏回到页面流内（随内容滚动）且**通栏贴顶扁平**：无圆角/卡片底/悬浮间距，
     只保留右侧工具按钮（主题/色卡/账号）；顶部吃 safe-area。
     页头（标题+操作按钮）留在页面 .phead 中随内容滚动。 */
  .topbar {
    position: static; height: auto; min-height: 50px;
    margin: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 4px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .topbar-inner { justify-content: flex-end; }
  /* 顶栏页头区移动端隐藏（页面有自己的 .phead 标题，避免重复） */
  .topbar #tbPage, .topbar #tbActs { display: none !important; }
  .content { padding: 0 14px calc(var(--nav-h) + 24px); }
  /* 2026 分组内嵌卡：更大圆角 + 统一间隙 */
  .content .set-surface, .content .u-surface, .content .pb-panel, .content .pb-band,
  .content .dm-surface, .content .ds-surface, .content .gm-page .set-surface { border-radius: 18px; }
  /* 2026 大标题式页头：页面身份上移到顶栏正下方 */
  .content .phead { padding: 2px 0 14px; }
  .content .phead h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
  /* 页面内页头（不再搬进顶栏）：标题+副信息一行，操作区（搜索/按钮）可换行 */
  .content .phead {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 6px 14px 12px; margin: 0 -14px 10px;
  }
  .content .phead > div { flex: none; width: 100%; min-width: 0; }
  /* 各页 *-phead-tx 是桌面「标题+说明」横排 flex——移动端一律纵向堆叠
     （!important 压过后注入的页面 CSS 同权重规则） */
  .content .phead > div { display: block !important; }
  .content .phead > div > p { margin-top: 3px; }
  .content .phead h1 {
    font-size: 17px; font-weight: 750;
    color: var(--ink); margin: 0; line-height: 1.3;
  }
  .content .phead .phead-btns {
    flex: 1 1 100%; flex-wrap: wrap; gap: 8px;
  }
  .content .phead .phead-btns > * { min-width: 0; }
  .content .phead .phead-btns .tb-search { flex: 1 1 100%; }
  /* 页面级 loading 仅覆盖内容区：侧栏为抽屉不占位，左缘归零；顶栏浮于其上。
     bottom 抬高到悬浮底栏上方：底栏虽设 z-index:70，但它在 #app(fixed, 自成层叠上下文)
     内部，无法越过 body 兄弟层 z-index:40 的遮罩——必须从布局上把遮罩底边让开，底栏才不会
     在切页 loading 期间被盖住消失。 */
  .lg-page-overlay { left: 0; top: 0; bottom: calc(var(--nav-h) + max(10px, env(safe-area-inset-bottom))); }
  /* 顶栏：移动端隐藏分隔线/铃铛（通知入口在底部菜单栏），页头只留标题 */
  .tb-page h1 { font-size: 17px; }
  .tb-page p { display: none; }
  .tb-div { display: none; }
  #noticeBtn { display: none; }
  .tb-right { gap: 10px; }
  .topbar-inner { gap: 10px; }
  /* 页头与页面操作区的收缩语法已在 core.css 全局定义，移动端不再重复 */
  .btn-primary { height: 40px; padding: 0 15px; font-size: 13.5px; }
  .toolbar { gap: 10px; margin-bottom: 14px; }
  .toolbar .seg { width: 100%; }
  .toolbar .seg button { flex: 1; padding: 0; }
  .res-pill { height: 32px; font-size: 12px; padding: 0 10px; }
  /* 移动端弹窗：全宽贴底上滑固定底部，无左右间隔，顶部圆角，内容过长卡内滚动 */
  .sheet-card { width: 100vw; margin: 0; padding: 0; max-height: 85dvh; border-radius: 22px 22px 0 0; animation: sheetUp 380ms var(--ease) both; }
  .sheet-card .sheet-head { padding: 16px 16px 0 16px; }
  .sheet-card .sheet-scroll { padding: 0 16px 16px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .sheet-card.leaving { animation: sheetDown 360ms var(--ease) both; }
  /* 内容超过最大高度（85dvh）时弹窗进入全屏，避免长内容需上下滑动才能看完或提交 */
  .sheet-card.is-full { max-height: 100dvh; height: 100dvh; border-radius: 0; }
  @keyframes sheetUp { from { transform: translateY(100%); opacity: 0.4; } }
  @keyframes sheetDown { to { transform: translateY(100%); opacity: 0.4; } }
  /* 贴底仅作用于 sheet-card；强提醒 alert-card 保持屏幕居中（:has 限定） */
  dialog.pub-mask[open]:has(.sheet-card) { display: flex; flex-direction: column; justify-content: flex-end; height: 100dvh; overscroll-behavior: contain; touch-action: manipulation; }
  dialog.pub-mask[open]:has(.sheet-card) .sheet-card { touch-action: pan-y; }
  /* ---- 移动端底部菜单 · 悬浮岛（小程序 bottom-menu 同款） ----
     岛体 = 玻璃底胶囊（图标+文字，选中 = 品牌渐变实底）；
     溢出项收进「更多」抽屉：点「更多」升起全宽面板（chips 网格）+ 遮罩。
     内容与顺序由「菜单管理」配置（mobileMenuForUser 过滤角色/权限）。 */
  .bottomnav {
    display: block;   /* core.css 桌面默认 display:none，移动端恢复显示（岛体自管布局） */
    position: absolute; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom));
    height: auto; z-index: 70; pointer-events: none;
    backface-visibility: hidden;
  }
  .bottomnav, .bottomnav * { touch-action: manipulation; }
  /* 玻璃岛体 */
  .bmw-isle {
    position: relative; z-index: 2; pointer-events: auto;
    display: flex; align-items: stretch;
    background: color-mix(in srgb, var(--card) 86%, transparent);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--line); border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 6px;
  }
  .bmw-item {
    position: relative; flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: 56px; border-radius: 18px;
    font-size: 10.5px; font-weight: 800; color: var(--ink-3);
    transition: background 220ms ease, color 220ms ease, transform 220ms var(--spring);
  }
  .bmw-icbox { position: relative; display: grid; place-items: center; }
  .bmw-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 260ms var(--spring); }
  .bmw-item.on {
    background: var(--grad); color: #fff;
    box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--brand) 62%, transparent);
  }
  .bmw-item.on svg { transform: scale(1.1); }
  /* 移动端通知未读角标：贴在通知项图标的右上角 */
  .bmw-badge {
    position: absolute; top: -5px; right: -9px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 999px; background: var(--pink); color: #fff;
    font-size: 10px; font-weight: 900; font-variant-numeric: tabular-nums;
    display: flex; align-items: center; justify-content: center;
  }
  /* 「更多」按钮：升起抽屉（开舱 = 软染底 + chevron 转向） */
  .bmw-more { flex: 0 0 62px; }
  .bmw-more svg { transition: transform 280ms var(--spring); }
  .bottomnav.open .bmw-more { background: var(--tint); color: var(--brand); }
  .bottomnav.open .bmw-more svg { transform: rotate(180deg); }
  /* 「更多」抽屉：从岛体后方升起的全宽面板（chips 网格） */
  .bmw-drawer {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    max-height: min(52dvh, 420px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: 24px;
    box-shadow: var(--shadow); padding: 10px;
    opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
    transition: opacity 220ms ease, transform 280ms var(--spring);
  }
  .bottomnav.open .bmw-drawer { opacity: 1; transform: translateY(calc(-100% - 10px)); pointer-events: auto; }
  /* 竖排格子（图标上 / 文字下，对齐小程序抽屉）：4 字菜单名可完整显示 */
  .bmw-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 58px; padding: 0 2px; border-radius: 14px;
    font-size: 10.5px; font-weight: 800; color: var(--ink-2); text-align: center;
    transition: background 180ms ease, color 180ms ease;
  }
  .bmw-cell svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .bmw-cell span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bmw-cell.on { color: var(--brand); background: var(--tint); }
  /* 遮罩：点空白收舱（盖住全屏，层级在岛体之下） */
  .bmw-mask {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: rgba(20, 26, 60, 0); transition: background 240ms ease;
  }
  .bottomnav.open .bmw-mask { pointer-events: auto; background: rgba(20, 26, 60, .32); }
  html[data-theme="dark"] .bottomnav.open .bmw-mask { background: rgba(0, 0, 0, .45); }
  /* 通知移动端：顶部通栏 */
  #ntStack { left: 14px; right: 14px; top: 14px; width: auto; }
}

/* ================= 移动端 fixed 底栏前提 =================
   .content(pageIn) 与 .phead(.rise) 的永久填充 transform 动画会使它们成为
   fixed 后代的包含块（bottom 定位相对容器而非视口）。移动端关掉这两个
   结构容器的入场动画——顺带符合移动端少动画的性能惯例。 */
@media (max-width: 767px) {
  .content, .content .phead.rise { animation: none; }
}

/* ================= 触屏兜底（hover:none 环境） =================
   桌面端「悬停才出现」的行内操作（块卡拖拽柄/操作钮、设置行删除钮）
   在触屏上永远不可见 = 功能性缺失。hover:none 环境下一律常显；
   !important 用于压过路由 CSS 后注入的同名基态（层叠顺序所致）。 */
@media (hover: none) {
  .ed-b-acts, .ed-b-drag { opacity: 1 !important; transform: none !important; }
  .set-row .tc-del, .tc-del { opacity: 1 !important; }
  .ed-b-acts .ed-act { width: 30px; height: 30px; }  /* 触屏点击目标 ≥30px */
}

/* ================= 2026 移动端原语（超管页统一尺寸/布局档） =================
   尺寸档：主控 40 高（拇指区）/ 行内小钮 ≥30 / 卡片圆角 16 / 分区 padding 14-16；
   页头操作栅格化：搜索占满首行，其余按钮两列等宽，不再 chaotic 折行；
   配合全局：hover:none 兜底、safe-area、16px 输入防缩放（上方已有）。 */
@media (max-width: 767px) {
  /* —— 页头操作区：栅格化（搜索通栏 → 按钮 2 列等宽 40 高） —— */
  .content .phead .phead-btns {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  }
  .content .phead .phead-btns .tb-search,
  .content .phead .phead-btns .search-pill { flex: 1 1 100%; height: 38px; }
  .content .phead .phead-btns .btn-primary,
  .content .phead .phead-btns .btn-soft { height: 38px; padding: 0 16px; }

  /* —— 面板/分区密度档 —— */
  .set-body { padding: 14px 14px 18px; gap: 14px; }
  .set-tabs { padding: 11px 14px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .set-tabs::-webkit-scrollbar { display: none; }
  .set-tabs .tab { flex: none; }
  .set-card { border-radius: 16px; }
  .set-hd { padding: 13px 14px; }
  .set-row { padding: 11px 14px; gap: 12px; }

  /* —— 列表/工具行：胶囊筛选组横向滑动（不挤压、不换行堆叠） —— */
  .content .toolbar { gap: 8px; }
  .content .toolbar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .content .toolbar .seg::-webkit-scrollbar { display: none; }
}

/* —— 平板（768-1180）：页头操作不折行、控件保持桌面尺寸 —— */
@media (min-width: 768px) and (max-width: 1180px) {
  .content .phead .phead-btns { display: flex; flex-wrap: wrap; gap: 8px; }
}

/* ================= 无障碍 ================= */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }