/* ==========================================================================
   迪粉社区 DiFansClub · mobile-app.css —— 移动端「手机 APP 体验」增强层
   --------------------------------------------------------------------------
   定位：archive.css v3「工业档案室」的移动端叠加层，只改布局与交互密度，
         不改设计语言（IBM Plex / 方角卡 / 墨蓝中性色 / 档案网格纸底纹全保留）。
   生效范围：≤768px 触屏布局；桌面端除 #tabbar 基础隐藏外零影响。
   内容：
     M1. 底部 TAB 栏（APP 式主导航）
     M2. 全局基底（横向溢出 / 点击高亮 / iOS 聚焦缩放 / 底部安全区）
     M3. 公告条（吸附在 TAB 栏上方的浮层卡）
     M4. 首页（Hero 数据 2×2、入口矩阵 2 列紧凑）
     M5. 固件（目录树折叠，配合 disk.js 注入的 .disk-tree-toggle）
     M6. 列表页密度（更新流 / 社区 / 版本 / 搜索 / OTA）
     M7. 个人中心（侧栏导航横向 chip 化）
   回滚：删除 index.html 中本文件的 <link> 即完全还原。
   ========================================================================== */

/* ==========================================================================
   M1. 底部 TAB 栏 —— 方案 A「悬浮白卡」
   --------------------------------------------------------------------------
   结构：#tabbar（透明托盘，不可见） > .tab-inner（悬浮白卡） > .tab-track（灰轨道） > .tab-item × 6
   选中态：.tab-thumb（白色药丸，由 app.js 计算 translateX） + 图标文字转品牌蓝。
   相比旧版（整条白底 + 顶部红线）的改动：
     · 白卡浮起、有圆角和投影，与顶栏「实心白卡」语言统一
     · 选中态从「顶部红线」改为「白色药丸」，指示更明确、也更像 APP
     · 白卡与屏幕底部留 10px 间距 + 安全区，不再是贴着屏幕边的一条硬边
   ========================================================================== */
#tabbar { display: none; }

/* 断点 900px：与 app.js 的 BREAKPOINT / theme-xiaoyi.css 的 X29 段一致。
   原为 768px，导致 769~900px 区间没有底部 TAB（见 X29 注释）。 */
@media (max-width: 900px) {
  body:not(.admin-mode) #tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: block;                 /* 内部由 .tab-inner 居中 */
    padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
    /* 托盘 = 完全透明的承托层。
       ⚠️ 曾经在这里加过全宽渐变 + backdrop-filter，结果是**底部整条 66px 被糊成一片**，
       白卡「陷进」雾里，反而失去悬浮感（用户反馈：「TAB 是悬浮的，
       怎么把效果设置到背景去了」）。
       悬浮感来自**白卡自身的毛玻璃 + 投影**，托盘必须透明 —— 不要在这里加任何 blur。
       防「内容从白卡与屏幕底边的 10px 空隙透出」由 M1c 段的底部安全区遮罩负责。 */
    background: transparent;
    pointer-events: none;            /* 只有白卡区域可点，两侧空隙穿透 */
  }
  /* 悬浮白卡：毛玻璃质感升级（2026-10-04，方案 B + C）
     ------------------------------------------------------------
     诊断：参数本身没错（blur 20px + .62 白），但底部背景大多是纯色区块，
     没有内容可模糊 → 模糊退化成"糊一层均匀白雾"，显得朦胧廉价。

     方案 C：白度与模糊的调整
       · 白度   .62 → **.45**  透出更多背景色，不再是一层白膜
       · 模糊   20px → **24px** 更彻底的柔化
       · 饱和   180% → **220%** 透出的颜色更鲜明（有色彩才有"玻璃"感）
       · 亮度   加 **brightness(1.04)** 补偿降白度带来的整体变暗

     方案 B：玻璃边缘折射高光（iOS 标志性细节）
       inset 上亮线 + 下亮线，模拟玻璃边缘的光折射，让卡片有"厚度"。

     注意：这两个效果都必须作用在**元素自身**上 ——
     内层 .tab-track / .tab-thumb 若不透明会盖住它们（见下方注释）。 */
  .tab-inner {
    position: relative;
    pointer-events: auto;
    background: rgba(255, 255, 255, .45);
    -webkit-backdrop-filter: saturate(220%) blur(24px) brightness(1.04);
    backdrop-filter: saturate(220%) blur(24px) brightness(1.04);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 999px;   /* 与 PC 顶栏菜单项一致：胶囊形 */
    /* 外投影（浮起）+ 内高光（玻璃厚度），inset 在前不影响外投影 */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .95),
      inset 0 -1px 0 rgba(255, 255, 255, .45),
      0 8px 26px rgba(16, 24, 40, .12),
      0 1px 3px rgba(16, 24, 40, .06);
  }
  /* 卡内浅灰轨道
     ⚠️ 关键修复（用户反馈「悬浮 TAB 没有透明效果」）：
     原来是 `background: var(--paper-2)` = rgb(247,248,250) **完全不透明**，
     它盖在白卡上把毛玻璃完全遮住 —— 白卡虽有 .62 透明 + blur，
     但卡面主体是这块不透明灰轨，所以整体看起来「没有透明效果」。
     改成半透明白，透出白卡背后的模糊内容，毛玻璃才真正可见。
     与药丸的半透明层叠后仍有足够的灰度区分（见下方.tab-thumb）。

     2026-10-04 再调整：.30 的白度在白卡上仍显出一层"灰白底槽"，
     看着像不透明底板。降到 .16 并补上 blur，让轨道自身也透光，
     毛玻璃从整张卡透出来，而不是只透在轨道四周的窄边。 */
  .tab-track {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 4px;                /* 上下左右统一 4px，给滑块留出圆角展开的空间 */
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-radius: 999px;  /* 胶囊形，与白卡同心 */
  }
  /* 白色滑块：宽高由 JS 按选中项实测值写入 --tab-thumb-w / --tab-thumb-h，
     位置由 JS 写 translateX。
     圆角用 999px 胶囊形 —— 与 PC 顶栏菜单项（.nav-panel > a，border-radius:999px）
     视觉语言一致；此前这里写固定 18px 与轨道的 22px 做同心计算，
     在胶囊形轨道下已无必要。 */
  .tab-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: var(--tab-thumb-w, 16.66%);
    height: var(--tab-thumb-h, 46px);
    /* 半透明白 .62：不透明 #fff 会盖住下方轨道、进而盖住白卡的毛玻璃，
       导致整个 TAB「看起来没有透明效果」（用户反馈）。
       .62 叠在 .34 的轨道上仍有足够亮度区分，能读出选中态。 */
    background: rgba(255, 255, 255, .58);
    border-radius: 999px;         /* 胶囊形，与 PC 顶栏菜单项一致 */
    /* 阴影对齐 PC 顶栏：`0 1px 3px rgba(16,24,40,.1)` + 一点环境影。
       原先的 `0 3px 8px` 外扩阴影会糊住相邻项文字。 */
    box-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 0 0 .5px rgba(16, 24, 40, .04);
    transform: translateX(var(--tab-thumb-x, 0));
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                width .3s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
    z-index: 0;
  }
  /* 6 项布局：项数变多 → 收紧字号、图标与内边距，避免中文标签换行或挤压。
     min-height 保证点击热区≥44px（可访问性），也避免 6 项挤成一条矮带。 */
  .tab-item {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    z-index: 1;                     /* 压在滑块之上 */
    color: var(--ink-3);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
    transition: color .2s ease;
    -webkit-user-select: none;
    user-select: none;
  }
  .tab-item svg { width: 22px; height: 22px; }
  .tab-item:active { opacity: .6; }
  .tab-item.active { color: var(--blue); font-weight: 600; }
  /* 旧版顶部红线已由白色药丸取代，此处显式移除避免残留 */
  .tab-item.active::before { content: none; }
  .tab-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--r-panel); }
  /* 超窄屏（iPhone SE 等）进一步收紧，保证 6 项单行不换行 */
  @media (max-width: 380px) {
    .tab-item { font-size: 9px; }
    .tab-item svg { width: 19px; height: 19px; }
  }
}

/* ==========================================================================
   M2. 全局基底
   ========================================================================== */
@media (max-width: 768px) {
  html, body { overflow-x: clip; }
  body { -webkit-tap-highlight-color: rgba(11, 37, 110, .08); }
  /* 主区底部给 TAB 栏让位（56px 栏 + 安全区 + 呼吸） */
  #app { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  footer {
    padding-bottom: calc(24px + 68px + env(safe-area-inset-bottom, 0px));
  }
  /* iOS 聚焦不缩放：输入类字号一律 ≥16px */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], input[type="url"], input[type="number"],
  input[type="tel"], select, textarea {
    font-size: 16px !important;
  }
  /* 弹窗贴底呼出（APP action-sheet 手感），键盘弹出不遮挡 */
  .modal {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    max-width: none;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: var(--r-panel) 18px 0 0;
    border-bottom: 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    animation: m-sheet-up .28s cubic-bezier(.16, 1, .3, 1) both;
  }
  @keyframes m-sheet-up {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}

/* ==========================================================================
   M3. 公告条：吸附在 TAB 栏上方的浮层卡（可点「知道了」关闭）
   ========================================================================== */
@media (max-width: 768px) {
  body:not(.admin-mode) #noticeBar {
    position: fixed;
    top: auto;                /* app.css 768 断点留有 top:0，必须显式复位，否则与 bottom 叠加把条拉满全屏 */
    left: 10px; right: 10px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 89;
    border: 1px solid var(--rule-3);
    border-radius: var(--r-card);
    box-shadow: 0 12px 36px rgba(16, 24, 40, .18);
    overflow: hidden;
  }
  #noticeBar .notice-inner { padding: 10px 12px; align-items: center; gap: 8px; }
  #noticeBar .notice-title { max-width: 34%; }
}

/* ==========================================================================
   M4. 首页：Hero 数据 2×2 / 入口矩阵 2 列紧凑
   ========================================================================== */
@media (max-width: 768px) {
  /* Hero 数据：单列 4 行 → 2×2 网格（刻度线分隔，档案表质感） */
  .landing-hero-side {
    grid-template-columns: 1fr 1fr;
    padding: 0;
    gap: 0;
    border-top: 1px solid var(--rule-2);
  }
  .landing-hero-side .hero-stat {
    padding: 14px 16px;
    border-bottom: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    min-height: 0;
  }
  .landing-hero-side .hero-stat:nth-child(2n) { border-right: 0; }
  .landing-hero-side .hero-stat:nth-child(n+3) { border-bottom: 0; }

  /* 入口矩阵：单列长卡 → 2 列紧凑卡（说明截两行，编号隐藏） */
  .entry-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .entry { min-height: 0; padding: 14px 14px 12px; }
  .entry-idx { display: none; }
  .entry-icon { width: 36px; height: 36px; }
  .entry-icon .icon { width: 17px; height: 17px; }
  .entry-name { font-size: 14.5px; }
  .entry-note {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.55;
  }
  .entry-meta { display: none; }
  .home-split-main { padding: 0; border: 0; background: transparent; }
}

/* ==========================================================================
   M5. 固件：目录树（折叠交互由 disk.js 自带：≤1024px 显示「展开/收起」，
        状态存 localStorage；此处只做移动端美化，不接管显隐）
   ========================================================================== */
@media (max-width: 768px) {
  .disk-tree { border-right: 0; border-bottom: 1px solid var(--rule-2); }
  .disk-tree-head { position: sticky; top: 0; z-index: 2; background: var(--paper-2); }
  /* 与全站「工业档案室」按钮语言一致：直角 + 1px 细线框（archive.css .btn），
     此前单独给了 8px 圆角浮在树头上，与其它按钮风格割裂 */
  .disk-tree-toggle { border-radius: 0; min-height: 32px; padding: 5px 12px; box-shadow: none; }
  .disk-tree-body { max-height: 46vh; }
  /* 文件行：两行结构里主按钮更易点 */
  .upd-item { padding: 12px 12px; }
  .upd-item .btn.sm { min-height: 36px; padding: 6px 14px; }
}

/* ==========================================================================
   M6. 列表页密度：社区 / 版本 / 搜索 / OTA
   ========================================================================== */
@media (max-width: 768px) {
  /* 分节头统一收紧 */
  .page-head { padding: 4px 0 0; }
  .sect-head { margin-bottom: 10px; }
  /* 卡片间距统一为 APP 列表节奏 */
  .comm-card, .ota-card, .cl-item, .rec-item { border-radius: 0; }
  /* 搜索过滤条横向滚动（chip 不换行，左右滑） */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar > * { flex: none; }
  /* 表格容器通通可横滑 */
  .data-table, .admin-table { min-width: 560px; }
}

/* ==========================================================================
   M7. 个人中心：侧栏导航横向 chip 化（置顶当「分段控制器」）
   ========================================================================== */
@media (max-width: 768px) {
  .profile-aside { border: 0; background: transparent; padding: 0; }
  /* 7 个分区 chip 自动换行全部铺开 —— 不做横向滑动藏入口（用户反馈「显示不全」） */
  .profile-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 2px 0 10px;
  }
  .profile-nav button {
    flex: none;
    width: auto;
    min-height: 34px;
    padding: 6px 13px;
    border: 1px solid var(--rule-2);
    border-left: 1px solid var(--rule-2);
    border-radius: 999px;
    background: var(--paper);
    font-size: 12.5px;
  }
  .profile-nav button .icon { width: 13px; height: 13px; flex: 0 0 13px; }
  .profile-nav button.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }
  .profile-nav button.active .icon { color: #fff; }
}

/* ==========================================================================
   M1b.底部 TAB 深色模式
   --------------------------------------------------------------------------
   白卡在深色页面里会变成一块刺眼的亮斑，白色滑块更看不清位置，
   所以深色下把「白卡 + 白滑块」对调成「深卡 + 深色滑块」，
   选中项文字/图标仍用品牌蓝，保证对比度。
   ========================================================================== */
/* 断点 900px：与 M1 主段、app.js 的 BREAKPOINT 一致（原 768px 会漏掉 769~900px 区间）。 */
@media (max-width: 900px) {
  /* 深色模式同步应用方案 B + C：白度 .58 → .42、blur 20 → 24px、
     saturate 140% → 200%、加 brightness 补偿；
     内高光改用低透明度白（深色下 .95 会过亮，用 .16 / .07）。 */
  [data-theme="dark"] .tab-inner {
    background: rgba(13, 16, 20, .42);
    -webkit-backdrop-filter: saturate(200%) blur(24px) brightness(1.06);
    backdrop-filter: saturate(200%) blur(24px) brightness(1.06);
    border-color: rgba(255, 255, 255, .08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .16),
      inset 0 -1px 0 rgba(255, 255, 255, .07),
      0 8px 26px rgba(0, 0, 0, .5),
      0 1px 3px rgba(0, 0, 0, .4);
  }
  [data-theme="dark"] .tab-track {
    background: rgba(255, 255, 255, .06);
  }
  [data-theme="dark"] .tab-thumb {
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  }
  [data-theme="dark"] .tab-item { color: rgba(237, 240, 244, .6); }
  [data-theme="dark"] .tab-item.active { color: #7fb0f0; }
}

/* ---------- M1c. 底部安全区（遮罩已删除） ----------
   ⚠️ 用户反馈「悬浮 TAB 没有透明效果，效果跑到下面去了」。
   真正原因不是遮罩，而是**内层元素不透明**（见上方 .tab-track / .tab-thumb 注释）：
   轨道 rgb(247,248,250) 与药丸 #fff 都是 100% 不透明，把白卡的毛玻璃盖死了。

   这里原本还有一个 ::after 渐变遮罩盖在「白卡与屏幕底边的 10px 空隙」上，
   但它本身就是一条**不透明的白色带** —— 正是「效果跑到下面去了」的直接观感来源：
   上方 56px 是模糊的、这 10px 是清晰发白的，两段质感断裂。
   现已删除：让白卡与屏幕底边之间完全透明，与上方毛玻璃连成一体。
   安全区（iPhone Home Indicator）由 #app 的 padding-bottom 让位，不需要额外遮罩。 */