/* tabs.css — bottom tab bar (#tab-bar) + tab-view containers */

#tab-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--tab-bar-bg-solid);
  border-top: 0.5px solid var(--tab-bar-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;

  height: calc(50px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  /* paint 隔离：tab 切换 / 角标更新不再外溢到主视图重绘 */
  contain: layout paint style;
  /* 强制独立合成层，避免与 view-scroll 共用图层导致滚动时一起重绘 */
  transform: translateZ(0);
}

#tab-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tab-bar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: -1;
}

.tab-btn {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  background: none; border: none;
  color: var(--tab-inactive);
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  height: 50px;
  padding: 0;
}
.tab-btn.active { color: var(--tab-active); }
.tab-icon { width: 24px; height: 24px; }
.tab-label { font-size: 10px; font-weight: 500; line-height: 1; margin-top: 1px; }

.tab-badge {
  position: absolute;
  top: 4px; right: 50%; transform: translateX(14px);
  min-width: 16px; height: 16px;
  background-color: #ff3b30; color: white; border-radius: 9999px;
  font-size: 10px; font-weight: bold;
  display: none; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* [Perf v4] Tab 视图保活 —— 解决 "切回主页/聊天室掉一帧" 长期顽疾
   ──────────────────────────────────────────────────────────────
   旧方案: .tab-view{display:none} → .active{display:block}
   - display 切换会让浏览器丢弃该 view 的 layer/paint, 切回时全量 paint, 即"切 tab 必掉帧"
   - chat 列表几百条 DOM 每次切回都要重 paint, 长期运行后尤其明显
   新方案: 全部 tab-view 常驻 layout, 用 visibility + opacity + pointer-events 控制显隐
   - 浏览器保留每个 tab 的合成层与已 paint 内容, 切换 = 一次 visibility 翻转, 近乎 0 成本
   - contain: strict 把每个 tab 的 layout/paint 严格隔离, 一个 tab 内的滚动/重排不会影响其他 tab
   - content-visibility:auto 已经把不可见的 cat-section 优化掉了, 长期内存压力可控
   ⚠ 不改变任何尺寸/定位/padding/flex 结构, 视觉与交互完全一致 */
.tab-view {
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--main-bg);
  /* 关键: contain strict 比 layout paint style 更彻底, 包括 size 隔离 */
  contain: strict;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* 切换瞬间避免 opacity 过渡造成首屏闪烁 (切 tab 应该是"瞬时"的, 不是淡入) */
  transition: none;
  /* 提升到独立合成层, 切换不触发 layout/paint, 只 swap layer */
  transform: translateZ(0);
  /* 不可见 tab 内的图片/视频解码与动画暂停, 减轻 GPU/CPU 压力 */
  content-visibility: hidden;
}
.tab-view.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  content-visibility: visible;
}
/* 聊天 tab 用 flex 布局 — 必须常驻 flex, 否则切回时 flex:1 重新计算会掉一帧 */