/* =========================================================
   v1.6 界面方案（A 清雾 / B 纸暖 / C 晴青）
   ---------------------------------------------------------
   只做「覆盖」，不改结构：
     · 配色令牌 → 既有组件自动吃进去
     · 少量组件微调（侧栏密度、导航指示器、卡片描边、按钮圆角）
     · 与外观引擎共存：背景图 / 面板透明度 / 毛玻璃照旧生效
   切回旧样式 = 移除 html[data-v16]，本文件所有规则都不再生效。
   ========================================================= */

/* ---------- A · 清雾 ---------- */
html[data-v16="a"] {
  --accent: #2f6df0;
  --accent-strong: #1d4fbf;
  --primary-weak: #e9f0fe;
  --primary-faint: #f2f6fc;

  --surface: #ffffff;
  --surface-rgb: 255 255 255;
  --surface-2: #f8fbfe;
  --surface-sunken: #f4f8fd;

  --bg: #f4f8fd;
  --bg-2: #eef3fa;

  --text: #1b2430;
  --text-2: #5a6b80;
  --text-3: #8b98a8;
  --line: #e2e9f2;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(23, 43, 77, .04), 0 8px 24px -12px rgba(23, 43, 77, .10);
  --shadow-sm: 0 1px 2px rgba(23, 43, 77, .05);

  --v16-nav-active-bg: #eaf1fe;
  --v16-nav-hover: #f2f6fc;
  --v16-glider-line: var(--accent);
}

/* ---------- B · 纸暖 ---------- */
html[data-v16="b"] {
  --accent: #a87338;
  --accent-strong: #7d5426;
  --primary-weak: #f5ebdc;
  --primary-faint: #f9f4ec;

  --surface: #fffdf9;
  --surface-rgb: 255 253 249;
  --surface-2: #fbf8f2;
  --surface-sunken: #faf7f1;

  --bg: #faf7f1;
  --bg-2: #f5f0e7;

  --text: #2b251f;
  --text-2: #6d6156;
  --text-3: #9b8f82;
  --line: #ebe2d5;

  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(80, 60, 35, .04), 0 8px 24px -12px rgba(80, 60, 35, .12);
  --shadow-sm: 0 1px 2px rgba(80, 60, 35, .06);

  --v16-nav-active-bg: #f5ebdc;
  --v16-nav-hover: #f7f2e9;
  --v16-glider-line: var(--accent);
}

/* ---------- C · 晴青 ---------- */
html[data-v16="c"] {
  --accent: #14808d;
  --accent-strong: #0d5d67;
  --primary-weak: #e6f5f7;
  --primary-faint: #eff9fa;

  --surface: #ffffff;
  --surface-rgb: 255 255 255;
  --surface-2: #f6fcfd;
  --surface-sunken: #f1fafb;

  --bg: #f1fafb;
  --bg-2: #e9f4fb;

  --text: #14232b;
  --text-2: #4e6572;
  --text-3: #8298a5;
  --line: #dceef1;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 58, 66, .04), 0 10px 28px -14px rgba(16, 58, 66, .14);
  --shadow-sm: 0 1px 2px rgba(16, 58, 66, .05);

  --v16-nav-active-bg: #e6f5f7;
  --v16-nav-hover: #eff9fa;
  --v16-glider-line: var(--accent);
}

/* ---------- 页面底色：只在没有自定义背景时加一层柔和渐变 ---------- */
html[data-v16]:not([data-has-bg]) body {
  background-image: linear-gradient(165deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
}

/* ---------- 侧栏 ---------- */
html[data-v16] .shell { grid-template-columns: 232px 1fr; }
html[data-v16] .sidebar {
  padding: 16px 12px 12px;
  border-right: 1px solid var(--line);
  background-color: color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
}
html[data-v16][data-has-bg] .sidebar {
  background-color: rgb(var(--surface-rgb) / max(.62, calc(var(--panel-alpha) * .78)));
}
html[data-v16] .brand { padding: 4px 8px 14px; }
html[data-v16] .brand-name { font-size: 15px; font-weight: 680; letter-spacing: .2px; }
html[data-v16] .brand-sub { font-size: 11px; color: var(--text-3); }

/* ---------- 导航：滑动指示器 ---------- */
html[data-v16] .nav { position: relative; gap: 2px; }

.nav-glider { display: none; }

html[data-v16] .nav-glider {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--v16-nav-active-bg);
  pointer-events: none;
  z-index: 0;
  transition: transform .34s cubic-bezier(.16, 1, .3, 1), width .24s ease, height .18s ease, background-color .3s ease;
}
html[data-v16] .nav-glider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--v16-glider-line);
}
html[data-v16][data-has-bg] .nav-glider::before { box-shadow: 0 0 0 1px rgb(255 255 255 / .5); }

html[data-v16] .nav-item {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  transition: color .18s ease, background-color .18s ease;
}
html[data-v16] .nav-item:hover { background: var(--v16-nav-hover); color: var(--text); }
/* 选中态交给指示器画，避免"方块叠方块" */
html[data-v16] .nav-item.active,
html[data-v16] .nav-item.active:hover {
  background: transparent;
  color: var(--accent-strong);
  font-weight: 620;
}
html[data-v16][data-has-bg] .nav-item.active { color: var(--text); }

html[data-v16] .nav-collapse {
  margin-top: 6px;
  border-radius: 8px;
  color: var(--text-3);
}
html[data-v16] .nav-collapse:hover { color: var(--text-2); }
html[data-v16] .side-footer { border-top: 1px solid var(--line); padding-top: 8px; }

/* ---------- 底部头像行：等级/经验压进同一行 ---------- */
html[data-v16] .me-chip {
  border-radius: var(--radius-sm);
  padding: 8px;
  gap: 10px;
  transition: background-color .18s ease;
}
html[data-v16] .me-chip:hover { background: var(--v16-nav-hover); }
html[data-v16] .me-chip-name { font-size: 13px; font-weight: 620; line-height: 1.25; }
html[data-v16] .me-chip-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
html[data-v16] .level-chip {
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10.5px;
  letter-spacing: .2px;
}
html[data-v16] .level-chip-bar { height: 3px; border-radius: 2px; }

/* ---------- 卡片 / 按钮 / 输入框 ---------- */
html[data-v16] .card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease;
}
html[data-v16] .btn { border-radius: 9px; font-weight: 560; }
html[data-v16] .input,
html[data-v16] input[type="text"],
html[data-v16] input[type="password"],
html[data-v16] input[type="number"],
html[data-v16] input[type="date"],
html[data-v16] textarea,
html[data-v16] select {
  border-radius: var(--radius-sm);
  border-color: var(--line);
}
html[data-v16] .page-head h1 { font-weight: 680; letter-spacing: -.2px; }
html[data-v16] .badge { font-weight: 600; }

/* 首页问候区原本写死了一套淡蓝渐变，换方案后会留一块"蓝色补丁"，
   这里改成跟随方案令牌，保证区域之间颜色不断层。 */
html[data-v16] .hero {
  background: linear-gradient(135deg, var(--primary-faint) 0%, var(--surface-2) 100%);
  border-color: var(--line);
  border-radius: var(--radius);
}

/* ---------- 窄屏：侧栏收成图标栏，指示器仍跟着走 ---------- */
@media (max-width: 760px) {
  html[data-v16] .shell { grid-template-columns: 64px 1fr; }
  html[data-v16] .sidebar { padding: 10px 8px; }
  html[data-v16] .brand { padding: 2px 0 10px; }
}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-v16] .nav-glider { transition: none; }
}

/* ---------- 顶部横条模式：指示器改成"横着走 + 底部小条" ---------- */
html[data-v16] .shell[data-nav-mode="top"] .nav-glider::before {
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 2px;
}
html[data-v16] .shell[data-nav-mode="top"] .nav-item { height: 38px; }

/* ---------- 逐页精修：把骨架之外的常见组件也对齐到当前方案 ---------- */
html[data-v16] .chat-bubble { border-radius: 12px; }
html[data-v16] .chat-msg.mine .chat-bubble { background: var(--accent); color: var(--accent-ink); }
html[data-v16] .chat-msg:not(.mine) .chat-bubble {
  background: var(--surface-2);
  border: 1px solid var(--line);
}
html[data-v16] .room-member { border-radius: var(--radius-sm); }
html[data-v16] .room-member:hover { background: var(--v16-nav-hover); }
html[data-v16] .room-head,
html[data-v16] .chat-input,
html[data-v16] .study-card { border-radius: var(--radius); }
html[data-v16] .dialog,
html[data-v16] .dialog--task { border-radius: calc(var(--radius) + 2px); }
html[data-v16] .tab { border-radius: 999px; }
html[data-v16] .tab.active { background: var(--primary-weak); color: var(--accent-strong); }
html[data-v16] .empty-state,
html[data-v16] .look-thumb,
html[data-v16] .fr-room-row { border-radius: var(--radius-sm); }
html[data-v16] .badge-ok,
html[data-v16] .tag-ok { color: var(--ok); }

/* 顶部模式必须压过上面的两列布局（html[data-v16] .shell 的优先级更高，这里显式提权） */
html[data-v16] .shell[data-nav-mode="top"] {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}
html[data-v16] .shell[data-nav-mode="top"][data-nav-collapsed="1"] {
  grid-template-columns: 1fr !important;
}

/* 显式定位：.shell 里有 4 个子元素（侧栏/顶栏/内容/底部导航），
   只改行列数会让它们自动流向隐式网格，内容被挤成一条窄列。 */
html[data-v16] .shell[data-nav-mode="top"] .sidebar { grid-row: 1; grid-column: 1; }
html[data-v16] .shell[data-nav-mode="top"] .page { grid-row: 2; grid-column: 1; }
html[data-v16] .shell[data-nav-mode="top"] .topbar,
html[data-v16] .shell[data-nav-mode="top"] .bottom-nav { display: none; }