/* ============================================================
   学序 2.0 · 悬浮玻璃 TabBar（手机端）
   ------------------------------------------------------------
   - 桌面（>900px）完全隐藏，导航仍由左侧玻璃侧栏承担；
   - 手机端是一枚悬浮胶囊：左右 14px、底部 safe-area + 8px、
     高 62、圆角 32，暗边 + 顶部高光 + backdrop blur；
   - 选中态是内部滑动胶囊，位移由 GlassTabBar.tsx 测量后写入
     inline transform，这里只负责 spring 曲线与材质；
   - 向下滚动：data-collapsed="true" → 高 52、隐藏文字、更实一点；
   - 材质令牌复用 v2.css 的 --v2-*（含 data-glass 三档与暗色），
     并补上 prefers-reduced-transparency / prefers-contrast 降级。
   ============================================================ */

:root {
  /* 尺寸 */
  --tb-inset: 14px; /* 胶囊与屏幕左右的距离 */
  --tb-bottom-gap: 8px; /* 胶囊与安全区之间 */
  --tb-height: 62px;
  --tb-height-collapsed: 52px;
  --tb-radius: 32px;
  --tb-radius-pill: 26px;
  --tb-pad: 5px; /* 胶囊内边距，也是选中胶囊的上下留白 */

  /* 材质：主体直接用 v2 的玻璃令牌，自动跟随 data-theme / data-glass */
  --tb-bg: var(--v2-tabbar-bg, rgba(252, 252, 254, 0.78));
  --tb-border: var(--v2-glass-border, rgba(15, 23, 42, 0.12));
  --tb-highlight: var(--v2-glass-highlight, rgba(255, 255, 255, 0.72));
  --tb-shadow:
    0 16px 42px rgba(15, 23, 42, 0.14),
    0 3px 10px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.04);

  /* 选中胶囊 */
  --tb-pill-bg: rgba(10, 108, 255, 0.18);
  --tb-pill-border: rgba(10, 108, 255, 0.3);
  --tb-pill-glow: rgba(10, 108, 255, 0.22);
  --tb-pill-highlight: rgba(255, 255, 255, 0.92);
  --tb-bg-collapsed: rgba(250, 251, 253, 0.92);

  /* 文字 / 图标 */
  --tb-label-size: 10.5px;
  --tb-icon-size: 22px;
  --tb-fg: var(--muted, #616a78);
  --tb-fg-active: var(--v2-tint, #0a6cff);
  --tb-badge-bg: var(--v2-tint, #0a6cff);
  --tb-badge-fg: #fff;
}

:root[data-theme="dark"] {
  --tb-shadow:
    0 18px 48px rgba(0, 0, 0, 0.52),
    0 3px 12px rgba(0, 0, 0, 0.34),
    0 1px 2px rgba(0, 0, 0, 0.28);
  --tb-pill-bg: rgba(84, 151, 255, 0.26);
  --tb-pill-border: rgba(122, 170, 255, 0.36);
  --tb-pill-glow: rgba(84, 151, 255, 0.3);
  --tb-pill-highlight: rgba(255, 255, 255, 0.14);
  --tb-fg-active: #9fc1ff;
  --tb-badge-bg: #3d7bff;
  --tb-bg-collapsed: rgba(24, 26, 32, 0.94);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tb-shadow:
      0 18px 48px rgba(0, 0, 0, 0.52),
      0 3px 12px rgba(0, 0, 0, 0.34),
      0 1px 2px rgba(0, 0, 0, 0.28);
    --tb-pill-bg: rgba(84, 151, 255, 0.26);
    --tb-pill-border: rgba(122, 170, 255, 0.36);
    --tb-pill-glow: rgba(84, 151, 255, 0.3);
    --tb-pill-highlight: rgba(255, 255, 255, 0.14);
    --tb-fg-active: #9fc1ff;
    --tb-badge-bg: #3d7bff;
    --tb-bg-collapsed: rgba(24, 26, 32, 0.94);
  }
}

/* 桌面：底栏不存在（导航在侧栏） */
@media (min-width: 901px) {
  .tabbar {
    display: none !important;
  }
}

/* ---------------- 手机：悬浮胶囊 ---------------- */
@media (max-width: 900px) {
  .tabbar {
    display: flex;
    position: fixed;
    left: var(--tb-inset);
    right: var(--tb-inset);
    bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + var(--tb-bottom-gap));
    z-index: 60;
    height: var(--tb-height);
    padding: 0;
    border: 0.5px solid var(--tb-border);
    border-radius: var(--tb-radius);
    background: var(--tb-bg);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
      inset 0 1px 0 var(--tb-highlight),
      inset 1px 0 0 rgba(255, 255, 255, 0.14),
      var(--tb-shadow);
    transition:
      height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      bottom 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      border-radius 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.2s ease;
    will-change: height;
  }

  /* 向下滚动：收成 52 高，且更实一点（内容在后面滚过时不至于太花） */
  .tabbar[data-collapsed="true"] {
    height: var(--tb-height-collapsed);
    bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + calc(var(--tb-bottom-gap) - 2px));
    border-radius: 27px;
    background: var(--tb-bg-collapsed);
    -webkit-backdrop-filter: blur(34px) saturate(190%);
    backdrop-filter: blur(34px) saturate(190%);
  }

  .tabbar-inner {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    width: 100%;
    height: 100%;
    padding: var(--tb-pad);
    gap: 0;
    border-radius: inherit;
  }

  /* ---------------- 选中滑动胶囊 ---------------- */
  .tab-active-pill {
    position: absolute;
    top: var(--tb-pad);
    bottom: var(--tb-pad);
    left: 0;
    width: 0;
    z-index: 0;
    border-radius: var(--tb-radius-pill);
    border: 0.5px solid var(--tb-pill-border);
    background:
      linear-gradient(180deg, var(--tb-pill-highlight), rgba(255, 255, 255, 0) 62%),
      var(--tb-pill-bg);
    box-shadow:
      0 6px 16px var(--tb-pill-glow),
      inset 0 1px 0 var(--tb-pill-highlight);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition:
      transform 0.46s cubic-bezier(0.3, 1.32, 0.52, 1),
      width 0.46s cubic-bezier(0.3, 1.32, 0.52, 1),
      opacity 0.18s ease,
      background-color 0.2s ease;
    will-change: transform, width;
  }

  /* ---------------- 单个 Tab ---------------- */
  .tab {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 44px; /* iOS HIG 命中高度 */
    padding: 0 2px;
    border-radius: var(--tb-radius-pill);
    color: var(--tb-fg);
    font-size: var(--tb-label-size);
    font-weight: 540;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, transform 0.16s ease, opacity 0.16s ease;
  }
  .tab:hover {
    text-decoration: none;
  }
  .tab:active {
    transform: scale(0.94);
    opacity: 0.86;
  }
  .tab svg {
    width: var(--tb-icon-size);
    height: var(--tb-icon-size);
    flex: none;
    transition: transform 0.24s cubic-bezier(0.3, 1.3, 0.5, 1);
  }
  .tab[aria-current="page"] {
    color: var(--tb-fg-active);
    font-weight: 640;
  }
  .tab[aria-current="page"] svg {
    transform: translateY(-0.5px) scale(1.03);
  }

  .tab-label {
    display: block;
    max-height: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 1;
    transition: max-height 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease,
      margin-top 0.24s ease;
  }

  /* ---------------- 收起态：隐藏文字、图标保持可读 ---------------- */
  .tabbar[data-collapsed="true"] .tab-label {
    max-height: 0;
    opacity: 0;
    margin-top: -2px;
  }
  .tabbar[data-collapsed="true"] .tab svg {
    width: 23px;
    height: 23px;
  }

  /* ---------------- 徽标：贴在图标右上角 ---------------- */
  .tab {
    position: relative;
  }
  .tab-badge {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(9px);
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--tb-badge-bg);
    color: var(--tb-badge-fg);
    font-size: 9.5px;
    font-weight: 650;
    line-height: 15px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    box-shadow:
      0 2px 6px rgba(10, 108, 255, 0.3),
      0 0 0 1.5px var(--tb-bg),
      inset 0 0.5px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
  }
  .tabbar[data-collapsed="true"] .tab-badge {
    top: 2px;
  }

  /* ---------------- 内容为悬浮栏让位 ---------------- */
  .page {
    padding-bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 98px);
  }
  html:has(.tabbar[data-collapsed="true"]) .page {
    padding-bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 88px);
  }
  /* 左右滑跟手时页面只做轻微位移，别让内滚容器冒出横向滚动条 */
  .page-scroll {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  /*
   * 全屏横滑切页（R3）：跟手/回弹由 GlassTabBar + gestures.ts 写 inline transform，
   * 这里只负责松手后的 spring 回弹曲线。
   */
  .page {
    transition: transform 0.34s cubic-bezier(0.22, 1.28, 0.36, 1);
    will-change: transform;
  }
  /* 悬浮胶囊本身是可横滑区域：纵向滚动照常，横向手势不要被浏览器吞掉 */
  .tabbar,
  .tabbar-inner,
  .tab {
    touch-action: pan-y;
  }
  /* 弹层 / Toast 在悬浮栏之上，Toast 抬到胶囊上方 */
  .toast-wrap {
    bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 86px);
  }
}

/* ---------------- 无障碍降级 ---------------- */
@media (prefers-reduced-transparency: reduce) {
  .tabbar {
    background: var(--bg-elevated) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .tab-active-pill {
    background: color-mix(in srgb, var(--v2-tint, #0a6cff) 16%, var(--bg-elevated));
  }
}

@media (prefers-contrast: more) {
  .tabbar {
    background: var(--bg-elevated) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: color-mix(in srgb, var(--text) 34%, transparent);
  }
  .tab {
    color: var(--text-2);
  }
  .tab[aria-current="page"] {
    color: var(--accent-text);
  }
  .tab-active-pill {
    background: color-mix(in srgb, var(--v2-tint, #0a6cff) 18%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--v2-tint, #0a6cff) 45%, transparent);
  }
}

/* 使用系统「减弱动态效果」时不做弹簧位移（base.css 已有兜底，这里再保险一层） */
@media (prefers-reduced-motion: reduce) {
  .tab-active-pill,
  .tabbar,
  .tab,
  .tab svg,
  .tab-label,
  .page {
    transition: none !important;
  }
}