/* foundation.css — :root vars, dark-mode tokens, html/body, scrollbar/utility */

:root {
  --primary: #007aff;
  --bg-dark: #000000;
  --bg-light: #f2f2f7;
  --text-dark: #1c1c1e;
  --text-light: #ffffff;
  --border: #e5e5ea;
  --card-bg: #ffffff;

  --glass-bg: rgba(255, 255, 255, 0.96);
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-blur: 20px;
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --item-selected-bg: rgba(0, 122, 255, 0.12);
  --chat-bg-self: #007aff;
  --chat-bg-other: #e9e9eb;
  --chat-bar-bg: #f9f9f9;
  --input-pill-bg: #eeeeef;
  --input-pill-border: transparent;
  --input-text: #000000;
  --input-placeholder: #8e8e93;
  --chat-nick-color: #007aff;
  --action-btn-color: #007aff;
  --action-btn-bg: #eeeeef;
  --chat-wallpaper: transparent;
  --main-bg: #f2f2f7;
  --pinned-bg: rgba(0,0,0,0.03);
  --pinned-text: #1c1c1e;
  --tab-bar-bg: rgba(249,249,249,0.94);
  --tab-bar-border: #d1d1d6;
  --tab-bar-bg-solid: #f9f9f9;
  --tab-active: #007aff;
  --tab-inactive: #8e8e93;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ★ 统一的页面横向边距 —— 所有 Tab 内容与弹窗的内容区到屏幕边缘的距离都用它
     与"点击电台分组弹出"的 .category-detail-list 边距对齐, 视觉风格全局一致.
     如需整体调宽/调窄, 只改这一个值即可. */
  --edge-pad: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-dark: rgba(255, 255, 255, 0.95);
    --card-bg: #1c1c1e;
    --border: #38383a;

    --glass-bg: rgba(28, 28, 30, 0.96);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --item-selected-bg: rgba(10, 132, 255, 0.25);
    --chat-bg-other: #2c2c2e;
    --chat-bg-self: #0a84ff;
    --chat-bar-bg: #1c1c1e;
    --input-pill-bg: #2c2c2e;
    --input-pill-border: transparent;
    --input-text: #ffffff;
    --input-placeholder: rgba(255, 255, 255, 0.5);
    --chat-nick-color: #60a5fa;
    --action-btn-color: #ffffff;
    --action-btn-bg: #2c2c2e;
    --main-bg: #000000;
    --pinned-bg: rgba(255,255,255,0.06);
    --pinned-text: rgba(255,255,255,0.95);
    --tab-bar-bg: rgba(28,28,30,0.94);
    --tab-bar-border: #38383a;
    --tab-bar-bg-solid: #1c1c1e;
    --tab-active: #0a84ff;
    --tab-inactive: #636366;
  }
}

input, textarea, select { box-sizing: border-box !important; }
.tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.custom-scrollbar::-webkit-scrollbar { width: 0px; background: transparent; }

html {
  min-height: calc(100% + env(safe-area-inset-top));
  background: var(--main-bg);
  background-attachment: fixed;
  overscroll-behavior: none;
  overflow: hidden;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-dark);
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--main-bg);
  background-attachment: fixed;
  background-size: cover;
  overscroll-behavior: none;
  padding-bottom: 0;
}

/* [Perf v4] tab-bar — 之前 #tab-bar 与 #tab-bar::before 都挂了 backdrop-filter，
   而 #tab-bar 又被 background-color: var(--tab-bar-bg-solid) 覆盖成不透明背景，
   导致 #tab-bar 自身的 blur 永远看不见，却白白多创建了一个 GPU 合成层。
   现在只保留 ::before 这一层 blur，省一层合成、长期运行内存与 paint 都更稳。 */