/* ============================================================================
   导航布局 · 固定「左侧竖栏（唯一）」   2026-10-11 老板需求
   ----------------------------------------------------------------------------
   老板四改原话：「保留左侧导航栏，下架底部导航栏，去掉我的工具里的桌面风格功能，
                  以后只有一个左侧导航栏」＋「电脑端那排顶部胶囊导航也一起去掉」

   🔴 当前状态（2026-10-11 四改后）：**布局固定 rail，没有第二套可切**。
      · <html data-nav="rail"> 由 index.html 里那段内联脚本**首屏前**写入，
        public/nav-style.js 幂等再写一次（两道保险；旧键 cm_nav_mode 已废弃、没人再读）；
      · 下面所有规则继续只认 `html[data-nav="rail"]` 这一个选择器 —— 属性固定为 rail 后
        它们**恒成立**（等价于无条件生效）；保留选择器是为了「脚本万一没跑」时基础态仍干净。

   沿革：一改引入 top|rail 两套 + 「桌面风格」面板；二改把竖栏下放到手机（下方「窄栏档」）；
         三改删光面板里的说明文字；四改**面板与切换机制整体下架**（入口卡、面板 DOM、
         nav-style.js 的切换逻辑全删）。下一段的二改记录保留 —— 窄栏档的数据全出自那里。

   🔴 手机 / 平板 / 电脑**三端都用** —— 见文件下半部的「窄栏档」。

   🔴🔴 2026-10-11 二改（老板原话）：
        「移动端咋不能切换，只能 PC 端切换，我要的是移动端也能切换，手机端也可以在左侧。」
      初版把竖栏锁在 ≥1024px（理由：96px 的栏在 390px 手机上吃掉 1/4 宽）；
      老板要手机也能用 ⇒ **闸门拆掉**，改成**两档宽度**（电脑宽栏 96 / 手机窄栏 50）。
      窄栏的代价是**真实存在**的，没藏起来：390px 手机上正文内容盒 358 → 308px
      （见下方「窄栏档」那段的逐像素实测值）。
      ⚠️ 四改前「默认仍是底部 TabBar、嫌挤可切回顶部」的退路**已不存在** ——
         老板拍板只留左侧竖栏（他要的就是这块左侧空间），窄栏是手机端的唯一形态。

   🔴 2026-10-11 三改/四改：三改删光了那个面板里的所有说明文字，四改把**面板整个删除** ——
      历史包袱不再复述。只留一条教训：**「图标风格」面板的 .isw-* 外观类归 icon-style.css**，
      本功能的样式一律不借用（免得又是"改别人样式"）。
      （四改前面板里那两张「布局示意图」的 .nsw-fig* 样式**已随面板一起删除** ——
       删前 grep 过全站无引用；别为"以后可能再加个选择面板"把它留着，
       按老板的定调这套布局没有第二套，它回来了才是被回退。）

   🔴 必须**同时关掉底部 TabBar**（style.css:543 是 position:fixed + left/right:0，
      吃不到 body 的 padding-left）—— 不关就是「左边一根竖栏 + 底下一条横栏」两条导航。
      四改后全端都关（老板「下架底部导航栏」），见下面的 html[data-nav="rail"] .tabbar。

   🔴 为什么独立文件：项目铁律「改别人的样式别动 style.css，新建独立 css、排其后加载」。
      style.css / icons3d.css / icon-style.css / tabbar-size.css **一个字都不改**
      （tabbar-size.css 的 --cm-tabbar-h 只在**本文件里**被重新赋值，见中段）。

   🔴 类名约定
      · nsw- = nav style widget（本功能专有，全局唯一）
      · .nsw-rail 内部的项**直接用 .tab-item / .tab-ico / .tab-label** ——
        刻意复用：① style.css 的 .tab-item 是**裸类名**（不带 .tabbar 作用域），
        复用即免费拿到基础排版；② app.js 的导航是**委托在 .tab-item[data-view] 上的**
        （app.js:742 绑点击、app.js:669 同步 .active）⇒ 左栏的点击与选中态**零 JS**；
        ③ icon-style.js 的 ICON_SEL 含 .tab-ico.i3d ⇒ 左栏图标**自动跟随**用户的
        图标风格（果冻/毛绒/水晶…），不用另写一行逻辑。
   ========================================================================== */

/* ========================= 左栏基础态（先藏起来） =========================
   选择器不含 html[data-nav]。"藏"只对应**脚本还没跑的那一瞬**：data-nav 由 head 里的
   内联脚本在首屏绘制前就写死为 rail ⇒ 实际渲染时总会被下面那条打开。
   （窄栏档不在这里 —— 它只是**尺寸**不同，显示/隐藏由同一个 data-nav 闸门管。） */
.nsw-rail { display: none; }

/* 栏宽写成变量：body 的让位量必须和栏宽**永远是同一个数**，
   否则改栏宽时改一处漏一处，正文会被压住或留一条缝。
   96px 是电脑档 —— 手机档在文件末尾的 @media 里覆盖成 56px。 */
html[data-nav="rail"] { --nsw-w: 96px; }

/* ------------------------- 显示与让位（两档共用） -------------------------
   下面这一整块用的是**电脑档的数值**，也就是 2026-10-11 已上线验收的样子，
   一个数字都没动。手机/平板只在文件末尾覆盖**和电脑档不一样的那些尺寸**，
   「电脑 → 手机」的对应关系在末尾那张对照表里逐行列出。 */

/* 导航开关：一条属性切整套布局 —— html[data-nav="rail"] 是唯一的闸门。
   选择器都带 html[data-nav="rail"]，特异性 (0,2,1) 高于 style.css 的 (0,1,0)，稳赢。 */
html[data-nav="rail"] .nsw-rail {
  display: flex;
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--nsw-w);
  z-index: 70;                     /* > .topbar 的 50 / .tabbar 的 60；< 所有弹层（最低 80） */
  flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 7px 12px;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(255, 251, 247, .97);
  backdrop-filter: blur(10px);
  border-right: 1px solid #ffe4d3;
}

/* 正文整体让出左栏。
   🔴 挂在 **body 的 padding** 上而不是 .main 的 margin 上：
      .main 是 `margin: 0 auto`，body 让位后它会在**剩余空间里继续自动居中**，
      与老板认可的效果图几何一致（1280 宽时内容 1100 封顶不变，卡片 196px 不变）；
      若改成 margin-left，内容会向左偏、和效果图对不上。
   🔴 padding-bottom 也必须一起收口：手机端 tabbar-size.css 给了
      `padding-bottom: calc(var(--cm-tabbar-h) + 6px)`（=88px，给底部 TabBar 留的），
      而竖栏模式下没有底部 TabBar ⇒ 按电脑档的 20px 统一。
      特异性 (0,1,2) > 那边的 (0,0,1)，不看加载顺序也稳赢。 */
html[data-nav="rail"] body { padding-left: var(--nsw-w); padding-bottom: 20px; }

/* 顶部胶囊**全端隐藏**（四改：老板「电脑端那排顶部胶囊导航也一起去掉」）。
   手机端 .topnav 本来就是 display:none，所以本次变更实质只影响电脑档。
   ⚠️ DOM 仍保留（三处导航同改的守卫按 3 处数；历史兼容也还认它）—— 删 DOM 是另一件事，
      别顺手做。 */
html[data-nav="rail"] .topnav { display: none; }

/* 🔴🔴 手机 / 平板：竖栏**取代**底部 TabBar。
   .tabbar 是 position:fixed + left:0/right:0 ⇒ **吃不到** body 的 padding-left，
   不关掉就会出现「左边一根竖栏 + 底下一条横栏」两条导航同时挂在那儿。
   特异性 (0,2,1)：高于 style.css 的 .tabbar (0,1,0)，也高于电脑档的 display:none，
   所以这条在两档上都成立（电脑档本来就是 none，等于没变）。 */
html[data-nav="rail"] .tabbar { display: none; }

/* 电脑档：顶部只剩「品牌 / 额度 / 刷新」三个可见元素，space-between 会把额度
   挤到正中间。给额度一个 margin-left:auto ⇒ 品牌靠左、额度+刷新靠右，与效果图一致。
   ⚠️ 只限电脑档：手机端顶栏只剩「额度 / 刷新」两项，本来就一个靠左一个靠右，
      再加 margin-left:auto 会把额度也推到右边、顶栏左边空一片。 */
@media (min-width: 1024px) {
  html[data-nav="rail"] .quota-chip { margin-left: auto; }
}

/* ------------------------- 左栏内部：品牌区 -------------------------
   尺寸沿用电脑档；手机档在末尾把 logo 22px、文字 10px。 */
.nsw-rail .nsw-brand {
  width: 100%; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 2px 0 11px; margin-bottom: 5px;
  border-bottom: 1px solid #ffe9dc;
}
.nsw-rail .nsw-brand img { width: 30px; height: 30px; display: block; }
.nsw-rail .nsw-brand b {
  font-size: 11px; font-weight: 800; color: var(--text);
  letter-spacing: .4px; white-space: nowrap;
}

/* ------------------------- 左栏内部：9 个导航项 -------------------------
   （四改新增 音乐 / 声音 / 工具 三项，老板指定顺序见 index.html 的 #navRail 注释）
   .tab-item / .tab-ico / .tab-label 的基础样式来自 style.css（裸类名），
   这里只做「竖栏版」的尺寸与选中态覆盖。 */
.nsw-rail .tab-item {
  width: 100%; flex: 0 0 auto;
  padding: 9px 2px; gap: 5px; border-radius: 15px;
  transition: background .14s;
}
.nsw-rail .tab-item:hover { background: var(--chip-bg); }
/* 尺寸刻意比底部 TabBar 小一号（44→34）：96px 宽的栏里图标不至于顶满、留出呼吸 */
.nsw-rail .tab-ico { width: 34px; height: 34px; border-radius: 11px; }
.nsw-rail .tab-label { font-size: 11.5px; }
/* 选中态 = 橙色渐变胶囊 + 白字（底部 TabBar 是「只变字色」，竖栏面积大、需要整块高亮） */
.nsw-rail .tab-item.active {
  background: var(--grad);
  box-shadow: 0 6px 16px rgba(249, 89, 1, .30);
}
.nsw-rail .tab-item.active .tab-label { color: #fff; }

/* ==========================================================================
   🔴🔴 窄栏档：手机 / 平板（<1024px）
   --------------------------------------------------------------------------
   只覆盖「和电脑档不一样」的尺寸，其余全部继承上面。
   对应关系（左＝电脑 96px 栏 ｜ 右＝手机 50px 栏）：
     栏宽      96 → 50      导航项内边距 9px2px → 7px2px   项圆角 15 → 13
     栏内间距   3 → 2       图标↔文字    5 → 4            栏左右内边距 7 → 2
     上下内边距 14/12 → 10/10                              图标方块 34 → 30
     品牌 logo 30 → 22      品牌字 11 → 10                品牌区下边距 11 → 8

   🔴 为什么是 50px（不是拍脑袋，是量出来的）：
      竖栏每多占 1px，正文就少 1px，而「我的工具」是 2 列 `.func-card.row`
      （左右各 14 padding ＋ 46 图标 ＋ 12 间距 = 86px 固定开销），
      4 个汉字 @15px 需要 **61.5px** 的名字区 —— 这是**硬门槛**：
        名字区 61.0px（栏宽 51）→ 9 张卡全部折行（「全部功 / 能」）
        名字区 61.5px（栏宽 50）→ 只剩「登录 / 注册」1 张折行
      （2026-10-11 逐像素实测，门槛卡在 61.0 / 61.5 之间，不是渐变）
      ⇒ 栏宽必须 ≤50px。而侧内边距从 5px 收到 **2px**，是为了让
      导航项仍有 50 − 2×2 − 1(border) = **45px** 宽，**44pt 触控底线一分不丢**。

   🔴 窄栏档是**真的会挤窄正文**（这是老板要的取舍，不是 bug），实测值如下：
      390px 手机上 .main 内容盒 358 → 308px；三列功能卡 110.66 → **92.3 / 97.3**
      ⚠️ 三列**不是等宽**的：等分基准应是 (308−2×13)/3 = 94.0，实测第一列宽 5px。
         根因在 `.func-grid` 的 `repeat(3, 1fr)` —— `1fr` 的默认最小值是 `auto`，
         哪一列先碰到 min-content 就先占位，余量再给其余两列。
      ⚠️ 这是 **`.func-grid` 在 ~300px 内容宽下的既存表现，不是竖栏引入的**：
         默认模式把视口调到 334px（内容区 302px），列宽与 56px 档**一模一样**。
      ⚠️ 本文件**没有**顺手把它压平：`minmax(0,1fr)` 实测能压成等宽且
         卡高与文字行数**零变化**，但那是改 `style.css` 的列定义、
         影响面超出「桌面风格」这个功能 ⇒ 留给老板决定，不擅自做。
   ========================================================================== */
@media (max-width: 1023px) {
  html[data-nav="rail"] {
    --nsw-w: 50px;

    /* 🔴 竖栏取代了底部 TabBar ⇒ TabBar 的高度按 0 计。
       tabbar-size.css 里有一整块「按栏高让位」的元素，全都写成
       calc(var(--cm-tabbar-h) + Npx)，具体是：
         · body 的 padding-bottom（那条已被上面 body 规则盖掉，这里只是让它归位）
         · .coach-composer / .fa-composer / .lg-composer 的 bottom: var(--cm-tabbar-h)
         · #sub-legal / #sub-wanneng 的底部留白
         · .ad-toast 的 bottom
       在这里把变量归零，它们**自动**回落到贴底 —— 不用逐个去盖，
       将来新加的让位元素也会一起跟随。
       ⚠️ tabbar-size.css 的该块本身就包在 @media (max-width:1023px) 里
          （电脑档 TabBar 一直 display:none），所以这条只在手机档有消费者。 */
    --cm-tabbar-h: 0px;
  }
  /* 🔴 这条**必须带 `html[data-nav="rail"]` 前缀**：上面的容器规则是
     `html[data-nav="rail"] .nsw-rail`（特异性 0,2,1），只写 `.nsw-rail`（0,1,0）
     会被它压住 —— 第一版就踩了这个坑，实测内边距仍是电脑档的 7px、
     竖栏项只有 41px 宽（低于 44pt 触控底线）。
     同特异性下后写者胜，所以这里稳赢。
     🔴 侧内边距 2px 不是随便收的：栏宽 50 − 2×2 − 1(border) = 45px 的导航项，
     **正好把 44pt 触控底线保住**（见上方「为什么是 50px」）。 */
  html[data-nav="rail"] .nsw-rail { padding: 10px 2px; gap: 2px; }
  .nsw-rail .nsw-brand { padding: 2px 0 8px; }
  .nsw-rail .nsw-brand img { width: 22px; height: 22px; }
  .nsw-rail .nsw-brand b { font-size: 10px; letter-spacing: .2px; }
  .nsw-rail .tab-item { padding: 7px 2px; gap: 4px; border-radius: 13px; }
  /* font-size 只管「图标回落成 emoji」那条备用路径（icons3d.css 文件头写明的回退法）：
     正常五档图标风格都渲染 <img>，用不到它；留一个和 34px 档同比例的值以免回退时溢出。 */
  .nsw-rail .tab-ico { width: 30px; height: 30px; border-radius: 10px; font-size: 19px; }
  .nsw-rail .tab-label { font-size: 11px; }
}

/* ============================================================================
   四改删除记录：原「面板里的布局示意图」整块（.isw-item .nsw-fig / .nsw-side /
   .nsw-top / .nsw-hero / .nsw-row）已随「桌面风格」面板一起删除（2026-10-11）。
   删前已 grep 全站：除本文件外无任何引用。别为"以后可能再加个选择面板"把它加回来。
   ========================================================================== */

/* ==========================================================================
   🔴🔴 2026-10-11 四改新增：短屏补偿 —— 9 项必须一屏内（栏自身不滚）
   --------------------------------------------------------------------------
   导航项从 6 个变 9 个 ⇒ 固定内容变高。本机逐像素实测（2026-10-11）：
     · 窄栏档（50px 栏）：9 项内容总高 = **669px**（项高 64 ×9 ＋ gap 2×8 ＋ 品牌区 50 ＋ 上下内边距 20）
     · 宽栏档（96px 栏）：9 项内容总高 = **778px**（项高 73 ×9 ＋ gap 3×8 ＋ 品牌区 63 ＋ 上下内边距 26）
     ⇒ 视口高度低于这些值时，从**纯装饰尺寸**里按档省：间隙、上下内边距、品牌区留白、项的上下 padding。
   一律**不动**：图标尺寸、字号、项的左右内边距（44pt 触控底线在左右内边距上）。
   触控高度复核（省完仍 > 44pt）：窄栏档 64 → 62 ；宽栏档 73 → 67（极短屏 61）。
   ⚠️ 与 50px 栏宽的关系：栏宽管的是"名字不折行"，这里管的是"竖向放得下"，
      两件事互不影响；也别把这里的数字搬去改栏宽。
   🔴 2026-10-12 八改（新增「数字人」第 11 项）：下面三段已逐像素重测重调 ——
      11 项裸高：宽栏 ~922 / 窄栏 ~794 ⇒ 三段阈值上调为 921 / 763 / 793，力度同步加强。
      触控高度复核（省完仍 > 44pt）：宽栏 73→63（极短屏 59）｜ 窄栏 64→52。
   ========================================================================== */

/* 宽栏档（≥1024）· 视口矮于 922：省 ~176px ⇒ 内容 ~746
   🔴 2026-10-12 八改（第 11 项）逐像素重测：11 项裸高 ~922px（旧参数下 1280×800 溢 20 /
      1024×768 溢 52）⇒ 阈值 861→921 ＋ 力度加强（项上下 padding 6→4、项间 gap 1→0、
      品牌区下留白 6→4）。1280×800 / 1024×768 这类窗口靠这条。 */
@media (min-width: 1024px) and (max-height: 921px) {
  html[data-nav="rail"] .nsw-rail { gap: 0; padding-top: 8px; padding-bottom: 8px; }
  .nsw-rail .nsw-brand { padding: 2px 0 4px; margin-bottom: 2px; }
  .nsw-rail .nsw-brand img { width: 26px; height: 26px; }
  .nsw-rail .tab-item { padding-top: 4px; padding-bottom: 4px; }
}
/* 宽栏档 · 极短屏（<764）：再省 ~60px ⇒ 内容 ~686（1280×720 这类笔记本窗口靠这条；
   600px 级视口以下就让它自己滚，不硬压）
   🔴 八改：阈值 755→763（对齐①档收口后的内容高）、力度加强（项上下 padding 4→2、
      品牌区再压一档：img 26→22、上下留白归零）。 */
@media (min-width: 1024px) and (max-height: 763px) {
  html[data-nav="rail"] .nsw-rail { padding-top: 6px; padding-bottom: 6px; }
  .nsw-rail .nsw-brand { padding: 0 0 2px; margin-bottom: 0; }
  .nsw-rail .nsw-brand img { width: 22px; height: 22px; }
  .nsw-rail .tab-item { padding-top: 2px; padding-bottom: 2px; }
}

/* 窄栏档（<1024，手机/平板）· 视口矮于 794：省 ~160px ⇒ 内容 ~603
   🔴 2026-10-12 八改（第 11 项）逐像素重测：窄栏裸高 ~794px（旧参数下 375×667 溢 26 /
      360×640 溢 53）⇒ 阈值 733→793 ＋ 力度加强（项上下 padding 3→1、项间 gap 1→0、
      上下内边距 4→2、品牌区再压一档；**左右内边距不动**）。 */
@media (max-width: 1023px) and (max-height: 793px) {
  html[data-nav="rail"] .nsw-rail { gap: 0; padding-top: 2px; padding-bottom: 2px; }
  .nsw-rail .nsw-brand { padding: 0 0 2px; margin-bottom: 0; }
  .nsw-rail .nsw-brand img { width: 22px; height: 22px; }
  .nsw-rail .tab-item { padding-top: 1px; padding-bottom: 1px; }
}

/* ============================================================================
   🔴 2026-10-12 七改（新增「AI 对话」第 1 项 ⇒ 导航 12 项）—— 逐像素重测后的两档新增
   ----------------------------------------------------------------------------
   12 项实测（本地 canon，含同事的「数字人」）：375×667 溢 3px ｜ 360×640 溢 30px ｜
     1280×720 溢 44 ｜ 1280×800 溢 26 ｜ 1024×768 溢 58。
   ⚠️ 上面那三段（921/763/793）**压的是内边距与品牌区**，都已经压到 1~2px 见底了 ⇒
      再压只能动**图标与字号**这条最后的余量，所以单开两档、按更矮的视口触发。
   省量：宽栏图标 34→26（每项 -8px）｜窄栏 30→25（每项 -5px）⇒ 12 项分别省 ~96 / ~60px。
   触控底线复核（省完仍 > 44pt）：宽栏 63→55 ｜ 窄栏 52→47 ✅
   ========================================================================== */
@media (min-width: 1024px) and (max-height: 810px) {
  .nsw-rail .tab-ico { width: 26px; height: 26px; border-radius: 9px; font-size: 16px; }
  .nsw-rail .tab-label { font-size: 10.5px; }
}
@media (max-width: 1023px) and (max-height: 710px) {
  .nsw-rail .tab-ico { width: 25px; height: 25px; border-radius: 9px; font-size: 15px; }
  .nsw-rail .tab-label { font-size: 10.5px; }
}