/* ══════════════════════════════════════════════════════════════════════════════
 * Ferry 摆渡 · 全局底部导航（THE single source for the bottom bar）
 * ------------------------------------------------------------------------------
 * 2026-10-20 整条重做。用户口径：
 *   「人家的那个好像就是一个透明的玻璃底」「创建按钮也很好看，我们那个就一个大
 *     原色的这个太丑了」「我需要你重写整个这个」+ 「滑动浏览器的时候它会随着
 *     浏览器去动，这个用户体验感感觉就很差」。
 * 参照的是同行那张：黑色玻璃底 · 线性灰图标 · 选中纯白 · 中间一颗白色大圆角方块
 * （黑色加号）凸出底栏，底下压一行「创建角色」。
 *
 * ── 三条被这轮推翻的旧决策，别改回去 ──────────────────────────────────────
 * 1. **旧版是刻意的暖棕不透明底**（理由：跨页面必须一模一样，而 backdrop-filter
 *    会吸背景色）。现在改回玻璃：用户明确要玻璃，而且玻璃永远是「深色雾化」——
 *    在奶油页上是深灰玻璃、在暗夜页上是纯黑玻璃，都读作"一条黑底栏"，不再分裂。
 * 2. **旧版金色圆盘 + 呼吸光晕** → 换成白色圆角方块，光晕整个删掉（那是"丑"的主因）。
 * 3. **旧版不裁剪、靠 fixed 贴底** → 见下面 §7：把滚动收进容器，底栏才不会再被
 *    手机浏览器的地址栏收放推着上下动。
 *
 * ── 契约（不要改名）──────────────────────────────────────────────────────
 * .mobile-nav · .mobile-nav__inner · .mobile-nav__tab · .mobile-nav__fab
 * data-tab · data-on · aria-label  —— docs/frontend-unification/f1/tests 断言这些。
 * 唯一新增的是 .mobile-nav__label（每格文字，含中间那格）。
 *
 * ── 缓存 ────────────────────────────────────────────────────────────────
 * /assets/* 是 `expires 30d immutable` ⇒ 改这份文件必须同时改 index.html 里的
 * ?v=（现在是 bn2.0）。名字不变而不改版本号 = 用户永远看旧底栏。
 * ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* 底栏比 tokens 里的 60px 高 2px：白色方块要溢出顶边、下面还要压一行字。
     这两个 token 决定所有 tabbed 页面底部避让多少，改这里就够，不用动 tokens
     （本表在 ferry-tokens.css 之后加载，同特异性后者胜）。 */
  --bottom-nav-height: 62px;
  --bottom-nav-offset: calc(var(--bottom-nav-height) + var(--safe-bottom));

  /* 层叠：默认压在故事页自己的浮层之下；React 那套（index.html 写死
     data-theme="companion"）沿用它原来的 2147482000，一个数都不动 ——
     这层关系是发布事故后核过的，别在这里"顺手统一"。 */
  --nav-z: 25;

  /* 玻璃地面。用户第二轮口径：「透明玻璃质感再强一点」。
   *
   * 想透就得降底色 alpha，可一降就发灰 —— 让它仍然读作"黑玻璃"的关键不在 alpha，
   * 而在 backdrop-filter 里的 **brightness**：把背后的内容压暗（而不是遮住）。
   * 四组参数实测（390×844，背后压一块橙红渐变）：
   *   0.86              → 背后完全被挡，等于一块实心黑，没有玻璃感
   *   0.42 + b0.62      → 透出来一点，但整体偏灰
   *   0.32 + b0.55      → 最透，可是灰到不像深色底栏
   *   0.52 + b0.70      → 能看出背后的明暗与色相，同时还是深色 ⇒ 取这一档
   * saturate 190% 是为了让透上来的颜色更有"玻璃后的色"而不是脏灰。 */
  --nav-glass: rgba(16, 16, 20, 0.52);
  --nav-glass-solid: rgba(11, 11, 13, 0.96);   /* 不支持 backdrop-filter 时的兜底 */
  --nav-blur: blur(26px) saturate(190%) brightness(0.70);
  --nav-hairline: rgba(255, 255, 255, 0.09);
  --nav-shadow: 0 -12px 30px rgba(0, 0, 0, 0.26);

  /* 墨色：未选中是"隔着玻璃的灰"，选中是干净的纯白，中间不留过渡色。
     0.56 而不是 0.50 —— 玻璃变透之后背后会亮上来，未选中的字得往上抬一点才不糊。 */
  --nav-ink: rgba(255, 255, 255, 0.56);
  --nav-ink-active: #FFFFFF;
  --nav-label-size: 10.5px;

  /* 中间那颗白色方块 */
  --nav-fab-bg: #FFFFFF;
  --nav-fab-ink: #0B0B0D;
  --nav-fab-shadow:
    0 6px 18px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* React 陪伴端（index.html 的 data-theme="companion"）：沿用原来的最大层叠值。 */
[data-theme="companion"] {
  --nav-z: 2147482000;
}

/* ── 1 · 容器：黑玻璃 ─────────────────────────────────────────────────────── */
.mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--nav-z);
  padding-bottom: var(--safe-bottom);
  background: var(--nav-glass);
  -webkit-backdrop-filter: var(--nav-blur);
  backdrop-filter: var(--nav-blur);
  border-top: 1px solid var(--nav-hairline);
  box-shadow: var(--nav-shadow);
  font-family: var(--font-ui, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif);
  /* 提到独立合成层：滚动时由合成器搬这一层，不再跟着内容重绘抖。 */
  transform: translateZ(0);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-nav { background: var(--nav-glass-solid); }
}

/* 顶沿一道极细的高光 —— 这是底栏"有玻璃厚度"而不是"一块黑色方块"的分界。
   画在 border 上，不改变盒子高度。 */
.mobile-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.30) 22%,
      rgba(255, 255, 255, 0.30) 78%,
      rgba(255, 255, 255, 0) 100%);
}

/* 玻璃内部的一层微反光：从顶沿往下 42% 渐隐的白。
   没有它，降了 alpha 的底栏只是一块"半透明灰片"；有了它才有玻璃的厚度感。
   pointer-events:none 且压在 .mobile-nav__tab（z-index:1）之下，不挡点击。 */
.mobile-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.03) 22%,
      rgba(255, 255, 255, 0) 46%);
}

.mobile-nav__inner {
  position: relative;
  max-width: var(--shell-max-width);
  margin: 0 auto;
  height: var(--bottom-nav-height);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}

/* ── 2 · 四格目标 ─────────────────────────────────────────────────────────── */
.mobile-nav__tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 6px;
  min-height: var(--hit-target-min);
  font-size: var(--nav-label-size);
  font-weight: var(--weight-medium, 500);
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--nav-ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease-standard);
}

.mobile-nav__tab svg {
  width: 23px;
  height: 23px;
  display: block;
  transition:
    transform var(--dur-base) var(--ease-emphasized),
    filter var(--dur-fast) var(--ease-standard);
}

.mobile-nav__label {
  display: block;
  white-space: nowrap;
}

/* 选中：只有两件事发生 —— 变纯白、图标抬 1px。
   参照图就是靠这个亮度差把"我在哪"说清楚的，不加胶囊也不加下划线。 */
.mobile-nav__tab[data-on='1'],
.mobile-nav__tab[aria-current='page'] {
  color: var(--nav-ink-active);
}

.mobile-nav__tab[data-on='1'] svg,
.mobile-nav__tab[aria-current='page'] svg {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.28));
}

.mobile-nav__tab:active {
  transform: scale(0.92);
}

.mobile-nav__tab:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -4px;
  border-radius: var(--corner-md);
}

/* ── 3 · 中间那颗白色方块 ───────────────────────────────────────────────────
 * 54×54 / radius 17 ≈ 参照图的 squircle 感；向上顶出底栏 18px。
 * 它的文字（「创建角色」）和其它四格落在同一条基线上，所以整格高度是
 * 54 + 5 + 12 ≈ 71 > 62（底栏高）—— 靠负 margin 让它从 -18 开始，
 * 收在 53，正好不溢出底栏下沿。底栏与 inner 都**没有** overflow:hidden。 */
.mobile-nav__tab--mid {
  align-self: start;
  margin-top: -18px;
  gap: 5px;
  padding-top: 0;
  color: #FFFFFF;
}

.mobile-nav__fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: var(--nav-fab-bg);
  color: var(--nav-fab-ink);
  box-shadow: var(--nav-fab-shadow);
  transition: transform var(--dur-micro) var(--ease-standard);
}

.mobile-nav__fab svg {
  width: 22px;
  height: 22px;
}

.mobile-nav__tab--mid:active .mobile-nav__fab {
  transform: scale(0.94);
}

/* ── 4 · 页面避让 ─────────────────────────────────────────────────────────── */
.app-tabbed-body {
  padding-bottom: calc(var(--bottom-nav-offset) + var(--gap-8));
  box-sizing: border-box;
}

/* ── 5 · 减少动态效果 ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav__tab,
  .mobile-nav__tab svg,
  .mobile-nav__fab { transition: none; }
  .mobile-nav__tab:active,
  .mobile-nav__tab--mid:active .mobile-nav__fab { transform: none; }
}

/* ── 6 · APP SHELL：把滚动收进容器 ─────────────────────────────────────────
 * 为什么必须有这一段：`position: fixed; bottom: 0` 在手机浏览器上并不是"钉死"的
 * —— 地址栏随滚动收起/展开时，**视觉视口**高度在变，fixed 元素会跟着重排，
 * 用户看到的就是"底栏跟着浏览器上下动"（这就是用户反馈的那一条）。
 *
 * 唯一真正的解法是让视口本身不滚：html/body 定高、overflow:hidden，滚动发生在我们
 * 自己的容器 `.app-tabbed-body` 里。视口不再变 ⇒ 底栏绝对不动。
 *
 * ⚠️ 只在"有底栏的页面"上启用：class `fy-nav-shell` 由 AppLayout 按路由白名单加在
 *    documentElement 上（见 AppLayout.jsx）。其它页面一个字节都不受影响。
 * ⚠️ 只作用于 ≤820px；桌面端保持普通文档流（那里没有地址栏问题）。
 * ⚠️ 代价：这些页面里 window 上的 scroll 监听会失效 ⇒ 要用捕获阶段接容器的事件，
 *    已改的地方见 pages/Discover.jsx（无限滚动的"用户滚过了"闸门）。 */
@media (max-width: 820px) {
  html.fy-nav-shell,
  html.fy-nav-shell body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  html.fy-nav-shell #root {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  html.fy-nav-shell .app-tabbed-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}