/* ═══════════════════════════════════════════════════════════════════════════
   base.css — 设计令牌 + 毛玻璃基座 + 应用外壳布局
   毛玻璃配方：半透背景 + backdrop-filter(blur + saturate) + 1px 细描边 + 弱阴影
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 令牌：白天模式 ──────────────────────────────────────────────────── */
:root {
  /* ── 底色与柔光色团 ──
     色团存在的唯一理由：给 backdrop-filter 提供「可被模糊的细节」。
     之前把色团压到几乎看不见，毛玻璃就退化成一块平白板（用户反馈「看不到毛玻璃」）。
     现在色团是明确的色块，但色相克制（靛 / 玫瑰 / 青），不是霓虹。 */
  --bg-base:      #e7ebf3;
  --bg-blob-a:    rgb(118 150 255 / 0.62);
  --bg-blob-b:    rgb(255 172 194 / 0.50);
  --bg-blob-c:    rgb(126 214 206 / 0.52);

  /* 毛玻璃三件套 */
  --glass-bg:      rgb(255 255 255 / 0.42);   /* 半透（主面板：索引栏 / 顶栏 / 工具条 / 卡片） */
  --glass-bg-2:    rgb(255 255 255 / 0.72);   /* 更强的半透（弹层，要保证正文可读，故留高） */
  --glass-bg-3:    rgb(255 255 255 / 0.30);   /* 更弱的半透（内嵌块 / 按钮 / 输入框） */
  --glass-blur:    28px;                      /* 模糊 */
  --glass-sat:     140%;                      /* 饱和度增强，苹果味的关键 */
  --glass-edge:    rgb(255 255 255 / 0.70);   /* 细描边（亮边） */
  --glass-edge-2:  rgb(15 23 42 / 0.06);      /* 细描边（暗边，双层描边更立体） */
  --glass-glow:    0 1px 0 rgb(255 255 255 / 0.60) inset;
  --glass-shadow:  0 1px 2px rgb(15 23 42 / 0.04),
                   0 8px 24px rgb(15 23 42 / 0.07),
                   0 24px 60px rgb(15 23 42 / 0.06);  /* 弱阴影 */

  /* 文本层级 */
  --ink:        #10131a;
  --ink-2:      rgb(16 19 26 / 0.64);
  --ink-3:      rgb(16 19 26 / 0.42);
  --ink-4:      rgb(16 19 26 / 0.22);
  --hairline:   rgb(15 23 42 / 0.09);

  /* 品牌与状态（色值取自《酸性霓虹配色》参考图，映射见 palette.css 文件头） */
  --accent:     #9732f9;   /* 霓虹紫 · 参考图 panel1 主色 */
  --accent-ink: #ffffff;   /* 压在 --accent 上对比 5.07，达标 */
  --ok:         #06c163;   /* 霓虹绿 */
  --warn:       #f9ab21;   /* 霓虹橙 */
  --danger:     #ff3131;   /* 霓虹红 */

  /* 大海场景（漂流瓶视图用）：天空底板 + 两层水色。
     天空必须有独立底板 —— 否则页面背景的色团会透上来把天空染成粉紫。 */
  --ocean-sky:  #dff0f9;
  --water-1:    #a6dcf2;
  --water-2:    #6cc4e8;

  /* 形状与节奏 */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 36px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px;
  --rail-w: 84px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Segoe UI",
          system-ui, sans-serif;
  --font-num: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ── 2. 令牌：夜间模式 ──────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-base:      #0a0c12;
  --bg-blob-a:    rgb(52 92 214 / 0.58);
  --bg-blob-b:    rgb(148 52 128 / 0.46);
  --bg-blob-c:    rgb(26 118 130 / 0.50);

  --glass-bg:      rgb(255 255 255 / 0.09);
  --glass-bg-2:    rgb(28 32 42 / 0.76);
  --glass-bg-3:    rgb(255 255 255 / 0.06);
  --glass-edge:    rgb(255 255 255 / 0.13);
  --glass-edge-2:  rgb(0 0 0 / 0.35);
  --glass-glow:    0 1px 0 rgb(255 255 255 / 0.07) inset;
  --glass-shadow:  0 1px 2px rgb(0 0 0 / 0.40),
                   0 10px 28px rgb(0 0 0 / 0.42),
                   0 30px 70px rgb(0 0 0 / 0.40);

  --ink:        #f3f6fb;
  --ink-2:      rgb(243 246 251 / 0.66);
  --ink-3:      rgb(243 246 251 / 0.44);
  --ink-4:      rgb(243 246 251 / 0.20);
  --hairline:   rgb(255 255 255 / 0.11);

  --accent:     #b98bff;   /* 浅紫：作为正文链接色压夜底 7.73 */
  --accent-ink: #0f0a77;   /* 深藏青字压 --accent 上对比 6.16 */
  --ok:         #06c163;
  --warn:       #f9ab21;
  --danger:     #ff5b52;

  --ocean-sky:  #0c2436;
  --water-1:    #16496b;
  --water-2:    #0a2540;
}

/* ── 3. 复位 ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  transition: background-color 0.5s var(--ease), color 0.4s var(--ease);
}
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }

/* 滚动条：细、低调 */
* { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-4); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

/* ── 4. 背景层 ──────────────────────────────────────────────────────────── */
.bg-root { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-base {
  position: absolute; inset: 0;
  /* 纯色底。之前这里叠了两道径向渐变，实际视觉上等于没有贡献，
     还让"去渐变"这条要求落不干净 —— 明暗层次全部交给色团。 */
  background: var(--bg-base);
  transition: background 0.5s var(--ease);
}
.bg-blobs { position: absolute; inset: -18%; filter: blur(58px); opacity: 1; }
.blob { position: absolute; border-radius: 50%; will-change: transform; }
.blob-a { width: 46vw; height: 46vw; left: -6vw; top: -8vw; background: var(--bg-blob-a); animation: drift-a 26s var(--ease) infinite; }
.blob-b { width: 40vw; height: 40vw; right: -6vw; top: 4vw; background: var(--bg-blob-b); animation: drift-b 32s var(--ease) infinite; }
.blob-c { width: 44vw; height: 44vw; left: 28vw; bottom: -18vw; background: var(--bg-blob-c); animation: drift-c 29s var(--ease) infinite; }
@keyframes drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6vw,4vw,0) scale(1.12); } }
@keyframes drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-5vw,6vw,0) scale(0.95); } }
@keyframes drift-c { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-7vw,-4vw,0) scale(1.1); } }

/* 视图场景层：瓶子（大海）等视图把内容注入这里 */
.bg-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s var(--ease); }
.bg-scene.is-on { opacity: 1; }
.bg-grain {
  position: absolute; inset: 0; opacity: 0.28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
[data-theme="dark"] .bg-grain { opacity: 0.18; }

@media (prefers-reduced-motion: reduce) {
  .blob, .bg-scene * { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ── 5. 毛玻璃基元 ──────────────────────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-glow), var(--glass-shadow);
}
/* 双层描边：外亮内暗，边缘更"实"，是苹果玻璃感的关键细节 */
.glass--crisp { position: relative; }
.glass--crisp::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid var(--glass-edge-2); pointer-events: none;
}
.glass--solid {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  backdrop-filter: blur(34px) saturate(190%);
}

/* ── 6. 应用外壳 ────────────────────────────────────────────────────────── */
.app {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: var(--sp-4);
  height: 100vh;
  padding: var(--sp-4);
}
.app[hidden] { display: none; }

/* 左侧长条索引栏 */
.rail {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-radius: var(--r-xl);
  min-height: 0;
}
.rail-brand { flex: none; margin-bottom: var(--sp-3); }
.brand-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 13px;
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--accent-ink);
  background: var(--accent);          /* 纯色，不用渐变 */
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.rail-nav { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.rail-foot { flex: none; display: flex; flex-direction: column; gap: 6px; align-items: center; padding-top: var(--sp-2); }

.rail-btn, .rail-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  width: 60px; padding: 9px 0 7px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  transition: background 0.22s var(--ease), color 0.22s var(--ease), transform 0.22s var(--ease);
}
.rail-item .ico { width: 22px; height: 22px; }
.rail-item .lbl { font-size: 10.5px; letter-spacing: 0.01em; line-height: 1.2; }
.rail-btn { width: 44px; height: 44px; }
.rail-btn .ico { width: 20px; height: 20px; }
.rail-btn:hover, .rail-item:hover { background: var(--glass-bg-3); color: var(--ink); }
.rail-item.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.rail-item.is-active::before {
  content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 99px; background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* 图标默认尺寸兜底。
   内联 <svg> 不给宽高时会退化成 300×150 的替换元素，一个漏网的 pin 图标
   就能把整张便签撑变形 —— 所以这里必须有默认值，各处可再单独覆盖。 */
.ico { display: block; flex: none; width: 16px; height: 16px; }
.ico use, .ico path, .ico circle, .ico rect { vector-effect: non-scaling-stroke; }

/* 主题按钮：太阳 / 月亮互斥显隐 */
.ico-sun, .ico-moon { position: absolute; transition: opacity 0.3s var(--ease), transform 0.42s var(--ease-out); }
:root .ico-moon, [data-theme="light"] .ico-moon { opacity: 0; transform: rotate(-70deg) scale(0.6); }
:root .ico-sun,  [data-theme="light"] .ico-sun  { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .ico-sun  { opacity: 0; transform: rotate(70deg) scale(0.6); }
[data-theme="dark"] .ico-moon { opacity: 1; transform: rotate(0) scale(1); }

/* 头像：纯色圆形 + 首字。颜色由 JS 的 U.tint(name) 按名字确定性派生（同一人永远同色），
   不再用随机渐变 —— 渐变在 34px 的圆里只会显脏，也让整页颜色数量失控。 */
.avatar {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 13px; font-weight: 600; color: #fff;
  background: var(--av, var(--accent));
  border: 1px solid rgb(255 255 255 / 0.30);
  text-transform: uppercase;
}
.rail-user { padding: 3px; border-radius: 50%; transition: transform 0.2s var(--ease); }
.rail-user:hover { transform: scale(1.06); }

/* 右侧主区 */
.stage { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-4); min-width: 0; min-height: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 14px var(--sp-5);
  border-radius: var(--r-lg);
}
.view-title { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; }
.view-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
.viewport { min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; border-radius: var(--r-lg); }
.view { animation: view-in 0.42s var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── 7. 嵌入模式（作为飞书工作台插件接入时 ?embed=1） ───────────────────── */
[data-embed="1"] body { font-size: 13.5px; }
[data-embed="1"] .app { grid-template-columns: 64px minmax(0, 1fr); padding: 10px; gap: 10px; }
[data-embed="1"] { --rail-w: 64px; }
[data-embed="1"] .rail-item { width: 48px; }
[data-embed="1"] .rail-item .lbl { font-size: 9.5px; }
[data-embed="1"] .topbar { padding: 10px var(--sp-4); }
[data-embed="1"] .view-title { font-size: 16.5px; }

/* ── 8. 响应式 ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --rail-w: 66px; }
  .rail-item { width: 52px; }
  .rail-item .lbl { font-size: 9.5px; }
  .app { padding: 10px; gap: 10px; }
  .view-sub { display: none; }
}