/* ═══════════════════════════════════════════════════════════════
   主页悬浮按钮（2026-10-04 新建）
   ────────────────────────────────────────────────────────────────
   用户要求：
   · 仅 **5 个主页面** 显示（子页 / 聊天窗口 / 浮层一律隐藏）
   · 位置：右下角、**底部导航栏之上**（不含底导区域），按钮只可点、不可拖动
   · 初始 = 半透明可点；**页面上下滑动中 → 近乎全透明且不可点击**；停手后复原
   · 「回到顶部」仅在「页面可滚动 且 已离开顶部」时出现
     （整页内容一屏装得下、无法下滑时**不出现**）
   · 「App 下载」= 读后端配置（阶段5）：弹「安卓 / 苹果」二选一，苹果按当前语言代理地区
   逻辑见 assets/js/shared/fab.js + assets/js/shared/app-download.js
   ═══════════════════════════════════════════════════════════════ */

.fab-stack{
  /* ⚠️ 2026-10-04 改（用户反馈：两个按钮跑到竖屏显示区**右侧空白**里）。
     原 `fixed` 相对**浏览器视口**定位 → 桌面上 `.app-container`（max-width:430px，
     body 居中）两侧有留白，按钮被钉进留白里。
     `#fabStack` 是 `.app-container` 的**直接子级**（index.html，在 `</main>` 之后、
     `<nav>` 之前），而 `.app-container` 已是 `position:relative`（base.css:3）
     → 改 `absolute` 即以它为基准，天然被约束在竖屏显示区内。
     垂直位置**完全不变**：`.app-container` 高 = 视口高（body 100vh）→
     `bottom` 计算式无需改动。 */
  position: absolute;
  z-index: 60;                                   /* 高于页面内容，低于灯箱/查看器等浮层 */
  right: 14px;
  /* ⚠️ 2026-10-04 改（用户要求：网页两个按钮**整体上移**，使「回到顶部」与 App 的
     「回到顶部」**垂直位置一致**；App 下载按钮在其上方，两按钮间距 10px 不变）。
     与 App 的落点公式**逐项对齐**（App 侧为**实测值**，非推算：临时 widget test 用真实的
     `Scaffold + Column/Expanded + WebBottomNav + MainFab` 复现定位链路量得）：
       App：fab 距屏幕底 = (navHeight + 安全区) + (navHeight + 安全区 + gapAboveNav)
                         = (64 + inset) + (64 + inset + 16) = 144 + 2×inset
       （实测 inset=0 → 144；inset=24 → 192 ✓）
     改前网页 = 64 + inset + 16 = 80 + inset → **比 App 低 64 + inset**（即用户说的"偏下"）。
     ⚠️ 为什么 64 与 inset 各出现两次：App 侧 `Positioned(bottom:)` 的参照底边是
        底导**上沿**（底导已改为"占布局空间、不悬浮"），故它相对屏幕底边要把底导高度
        再加一次；而网页端 `.fab-stack` 的参照就是**屏幕底边**（`.app-container` 高 = 视口高）
        → 必须补上第二组才能双端视觉对齐。 */
  bottom: calc(144px + 2 * env(safe-area-inset-bottom, 0px));
  display: none;
  flex-direction: column;
  gap: 10px;
}
.fab-stack.show{ display: flex; }

.fab-btn{
  width: 42px; height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* ⚠️ 2026-10-04 改（用户要求：白底 → **本页主色**，即导航栏标签色）。
     `--fab-bg` 由 `fab.js` 从 `#bottomNav` 的 `--tab-on` 读出后写到 `.fab-stack` 上
     → **与底导选中色同源**（`navigation.js:60` 的 `syncBottomNav` 按当前页写
     `data-theme`，是全站唯一注入点），不另建颜色表。
     ⚠️ 2026-10-05 改（用户要求：**完全不透明**，颜色与底导标签色完全相同）：
     alpha = `1` 时 `--fab-bg` 即 `--tab-on` 原色 → 与标签色逐值相同。
     ⚠️ 必须与 App 的 `MainFab.bgOpacity`、`fab.js` 的 `FAB_ALPHA` **三处同值**。
     兜底值 = 设备页橙红 + 同款 alpha，防 JS 未就绪时按钮底色透空。 */
  background: var(--fab-bg, rgba(255,92,57,1));
  color: #fff;                                /* 图标白色（用户要求；保持不透明更清晰） */
  /* ⚠️ 2026-10-04 七次调整（用户从 6 个对比方案里**选定 A2**，并明确「双端同步改」）。
     思路转变：**不再做环绕周边的阴影**，改为**只向下投影** + **内部明暗做出体积感**。
     A2 = «只向下投影» × 2 层 + «内部高光/内部暗影» × 2 层（inset）：
       · `inset 0 2px 2px rgba(255,255,255,.40)` —— 顶部内高光（光从上方来）
       · `inset 0 -3px 4px rgba(0,0,0,.26)`      —— 底部内暗影（球体下沿背光）
       · `0 2px 3px rgba(0,0,0,.32)`             —— 贴边接触影（把按钮"压"在表面上）
       · `0 4px 10px 1px rgba(0,0,0,.16)`        —— 向下弥散投射影
     —— 实测对照（2 倍放大渲染，同环境）：
        立体感（按钮内上−内下）= **11**（原 A0 = 0，完全平的色块）；
        厚度感（贴边外压暗）  = **106**（原 A0 = 25）；
        且**阴影只出现在下方**（上方不再漏影），无硬环。
     ⚠️ 与本文件此前所有环绕方案（十六进制 alpha 的 `0 0 …` 系列）**已全部作废**，勿回退。
     ⚠️ **不得再加 `0 0 0 Npx` 硬环**（守卫会拦）。 */
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.40),
    inset 0 -3px 4px rgba(0,0,0,.26),
    0 2px 3px rgba(0,0,0,.32),
    0 4px 10px 1px rgba(0,0,0,.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 1;
  transition: opacity 160ms ease-out, transform 100ms ease-out;
}
.fab-btn:active{ transform: scale(.92); }

/* 滚动态：近乎全透明 **且不吃点击**（用户要求） */
.fab-stack.scrolling .fab-btn{
  opacity: .12;
  pointer-events: none;
}

/* 「回到顶部」在不可滚 / 已在顶部时不存在 */
.fab-btn.hidden{ display: none; }

/* ═══════════════════════════════════════════════════════════════
   「下载 App」浮层（2026-10-07 新建，阶段5）
   ────────────────────────────────────────────────────────────────
   用户要求：客户端「下载 App」按钮从**死按钮**变成真入口；
           安卓 / 苹果二选一；苹果按当前语言代理地区；没上架的明确说明。
   · 属**浮层**（非页面跳转）→ 保留自身淡入动画，不受"零过渡"规范约束
   · 浮层内**无输入框** → 允许点空白关闭（ui-interaction-spec 规范二）
   ═══════════════════════════════════════════════════════════════ */
.app-dl-overlay{
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.34);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: appDlFade 160ms ease-out;
}
@keyframes appDlFade{ from{ opacity: 0; } to{ opacity: 1; } }

.app-dl-card{
  width: min(300px, calc(100vw - 48px));
  background: #fff;
  border-radius: 14px;
  padding: 20px 18px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  text-align: center;
}
.app-dl-title{ font-size: 16px; font-weight: 700; color: #1A1C1E; }
.app-dl-note{ margin-top: 6px; font-size: 12.5px; color: #8A8F99; }

.app-dl-btns{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app-dl-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 10px;
  background: var(--theme, #C13515);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  /* 一行显示：外语译文较长时截断而不是换行破版 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 14px;
}
.app-dl-btn.is-off{
  background: #F0F1F3;
  color: #8A8F99;
  cursor: not-allowed;
}
.app-dl-close{
  margin-top: 12px;
  width: 100%;
  height: 38px;
  border: none;
  background: transparent;
  color: #6B7078;
  font-size: 14px;
  cursor: pointer;
}