/* ============================================================
   pv-tabbar.css  ·  PV_TABBAR_V1（2026-08-16）
   顾客端底部 Tab 栏。老板拍板的格子：首页 · 分类 · 群聊 · 抽奖 · 我的，
   代理会议室按现有规则只对代理商/管理员显示、不占普通用户格子。

   🔴 四条约束（都有理由，别当审美偏好改掉）

   1. **只在白名单路径上出现（fail-closed）。**
      站内底部固定元素密密麻麻：落地页 .bar 购买条(bottom:0)、聊天页输入框、
      客服 FAB(bottom:76px)、video_flow 全屏沉浸、PWA 引导条。用黑名单排除
      一旦漏一条，就是一条 Tab 栏压在「立即解锁」上面 —— 那是直接吃掉转化。
      所以判定写在 tabbar.py 的 SHOW_PATHS 里，**精确匹配、只加不猜**。

   2. **底色跟着主题走，所以中性阶 token 直接用、不重映射。**
      判据见 pv-buttons.css 那条规律：要重映射的是「底色写死不跟主题走」的容器。
      这里 --d-surface 主题开着浅、关着深，正是我们要的。
      但选中色必须走 `var(--lp-ink, var(--accent,…))` 兜底 —— 它是「浅底上的
      强调文字」，两套主题各要各的值，单个 token 表达不了。

   3. **hover 一律锁 `@media (hover:hover) and (pointer:fine)`。**
      顾客 100% 手机。触摸屏上 :hover 抬手后会粘住，Tab 是常驻元素，
      粘住比按钮更难看（一直亮着一格假的「当前页」）。

   4. **占位高度靠 --pv-tab-gap 对外广播。** PWA 引导条(pwa.py 的 _A2HS)也是
      fixed 在底部的，它读这个变量把自己抬到 Tab 上面。
      🔴 广播的是 --pv-tab-gap（含安全区）而不是 --pv-tab-h（纯高度）——
         别人要避开的是「Tab 实际占了多高」，不是「设计稿写了多少」。
      本文件**只在白名单页面注入**，所以别的页面上这个变量根本不存在、
      var() 兜底 0px ⇒ 引导条位置一个像素不变。

   回退：删掉 app.py 里 register_tabbar 那一行即可。
   ============================================================ */

:root{
  --pv-tab-h:54px;
  --pv-tab-gap:calc(var(--pv-tab-h) + env(safe-area-inset-bottom,0px));
}

/* 占位块：由 tabbar.py 注入在 </body> 前。
   🔴 用占位块而不是给 body 加 padding-bottom —— 站内好几个页面自己写了
      padding-bottom（钱包 120px 是为了避开 PWA 引导条），覆盖它们等于
      在别的模块的布局里动手。占位块只往文档流末尾加高度，谁都不碰。 */
.pvtab-sp{height:var(--pv-tab-gap);flex:none;pointer-events:none}

.pvtab{
  position:fixed;left:0;right:0;bottom:0;z-index:96;
  /* z-index 96：压在页面内容之上，但**低于**落地页购买条(97)、客服面板(98)、
     PWA 引导条(99999)、支付弹窗。白名单页面上本来就没有那些东西，
     这里留低位是为了万一将来有页面进了白名单又带浮层，Tab 不会盖住成交路径。 */
  display:flex;align-items:stretch;
  height:var(--pv-tab-gap);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb,var(--d-surface) 92%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--d-line);
  font-family:var(--font);
}
/* 不支持 backdrop-filter 的老机器：退回不透明底，绝不能留半透明+不模糊
   （那样卡片会从 Tab 底下透出来，文字糊成一团） */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pvtab{background:var(--d-surface)}
}

.pvtab a{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:var(--d-muted);
  font-size:10.5px;line-height:1;letter-spacing:.02em;
  position:relative;-webkit-tap-highlight-color:transparent;
  transition:color .18s ease;
}
.pvtab a .pvtab__i{
  width:23px;height:23px;display:block;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.pvtab a .pvtab__i svg{width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pvtab a .pvtab__l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* 当前页。图标不换一套实心 path，只加粗描边 + 上品牌色 —— 一个 path 两种状态，
   以后加格子不用画两遍图标（少一处会漂移的地方）。 */
.pvtab a.is-on{color:var(--lp-ink,var(--accent,#38e0d8));font-weight:600}
.pvtab a.is-on .pvtab__i svg{stroke-width:2.2}

/* 按下：图标下沉一点点。这是手机上唯一真起作用的反馈（见约束 3）。 */
.pvtab a:active .pvtab__i{transform:scale(.88)}

@media (hover:hover) and (pointer:fine){
  .pvtab a:hover{color:var(--d-text)}
  .pvtab a.is-on:hover{color:var(--lp-ink,var(--accent,#38e0d8))}
}

.pvtab a:focus-visible{
  outline:2px solid var(--lp-ink,var(--accent,#38e0d8));outline-offset:-3px;border-radius:8px;
}

/* 未读红点。默认 display:none，由 tabbar.py 注入的那段 JS 打开。
   🔴 颜色写死 #fa5151：跟 features.py 顾客群入口那颗红点是同一个东西，
      两处必须长一样，走 token 会被主题染色、变成两种红。 */
.pvtab .pvtab__dot{
  display:none;position:absolute;
  top:5px;left:50%;margin-left:5px;
  min-width:15px;height:15px;padding:0 4px;
  background:#fa5151;color:#fff;
  font-size:9.5px;font-weight:700;line-height:15px;text-align:center;
  border-radius:99px;box-sizing:border-box;
  border:1.5px solid var(--d-surface);
}

@media (prefers-reduced-motion:reduce){
  .pvtab a,.pvtab a .pvtab__i{transition-duration:.01ms}
  .pvtab a:active .pvtab__i{transform:none}
}