/* ═══════ WaveLength 频遇 — Glassmorphism + Dark Mode ═══════ */
:root {
  /* 亮色模式：玻璃态 */
  --card: rgba(255, 255, 255, 0.72);
  --card-solid: #ffffff;
  --border: rgba(255, 255, 255, 0.6);
  --border-solid: rgba(200, 190, 230, 0.5);
  --ink: #1e1b4b;
  --ink2: #4c4880;
  --ink3: #9490b8;
  --accent: #7c3aed;
  --accent-rgb: 124, 58, 237;
  --accent-light: rgba(124, 58, 237, 0.1);
  --accent-dark: #5b21b6;
  --success: #16a34a;
  --success-light: rgba(22, 163, 74, 0.1);
  --error: #dc2626;
  --error-light: rgba(220, 38, 38, 0.08);
  --radius: 16px;
  --shadow: 0 8px 32px rgba(124, 58, 237, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 12px rgba(124, 58, 237, 0.08);
  --glass-blur: blur(16px);
  --transition: all 0.2s ease;
}

/* 暗色模式：深邃星空 */
body[data-theme="dark"] {
  --card: rgba(22, 22, 38, 0.85);
  --card-solid: #16162a;
  --border: rgba(96, 165, 250, 0.18);
  --border-solid: rgba(96, 165, 250, 0.15);
  --ink: #e2e8f0;
  --ink2: #94a3b8;
  --ink3: #64748b;
  --accent: #60a5fa;
  --accent-rgb: 96, 165, 250;
  --accent-light: rgba(96, 165, 250, 0.12);
  --accent-dark: #93c5fd;
  --success: #4ade80;
  --success-light: rgba(74, 222, 128, 0.1);
  --error: #f87171;
  --error-light: rgba(248, 113, 113, 0.08);
  --shadow: 0 8px 32px rgba(96, 165, 250, 0.1), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 12px rgba(96, 165, 250, 0.08);
}

/* ─── 色彩主题：深海蓝 ─── */
body[data-color-theme="ocean"] {
  --accent: #2563eb;
  --accent-rgb: 37, 99, 235;
  --accent-light: rgba(37, 99, 235, 0.1);
  --accent-dark: #1d4ed8;
  --shadow: 0 8px 32px rgba(37, 99, 235, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 12px rgba(37, 99, 235, 0.08);
}
body[data-color-theme="ocean"] {
  background: linear-gradient(145deg, #dbeafe 0%, #e0e7ff 30%, #f0f9ff 65%, #dbeafe 100%);
}
body[data-color-theme="ocean"]::before {
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(37, 99, 235, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(59, 130, 246, 0.11) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(96, 165, 250, 0.09) 0%, transparent 65%);
}
body[data-color-theme="ocean"][data-theme="dark"] {
  --accent: #3b82f6;
  --accent-rgb: 59, 130, 246;
  --accent-light: rgba(59, 130, 246, 0.12);
  --accent-dark: #60a5fa;
  --shadow: 0 8px 32px rgba(59, 130, 246, 0.1), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 12px rgba(59, 130, 246, 0.08);
}
body[data-color-theme="ocean"][data-theme="dark"]::before {
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(59, 130, 246, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(37, 99, 235, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(96, 165, 250, 0.04) 0%, transparent 65%);
}

/* ─── 色彩主题：松柏绿 ─── */
body[data-color-theme="forest"] {
  --accent: #059669;
  --accent-rgb: 5, 150, 105;
  --accent-light: rgba(5, 150, 105, 0.1);
  --accent-dark: #047857;
  --shadow: 0 8px 32px rgba(5, 150, 105, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 12px rgba(5, 150, 105, 0.08);
}
body[data-color-theme="forest"] {
  background: linear-gradient(145deg, #d1fae5 0%, #ecfdf5 30%, #f0fdf4 65%, #d1fae5 100%);
}
body[data-color-theme="forest"]::before {
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(5, 150, 105, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(16, 185, 129, 0.11) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(52, 211, 153, 0.09) 0%, transparent 65%);
}
body[data-color-theme="forest"][data-theme="dark"] {
  --accent: #34d399;
  --accent-rgb: 52, 211, 153;
  --accent-light: rgba(52, 211, 153, 0.12);
  --accent-dark: #6ee7b7;
  --shadow: 0 8px 32px rgba(52, 211, 153, 0.1), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 12px rgba(52, 211, 153, 0.08);
}
body[data-color-theme="forest"][data-theme="dark"]::before {
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(52, 211, 153, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(5, 150, 105, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(110, 231, 183, 0.04) 0%, transparent 65%);
}

/* ─── 色彩主题：海棠粉 ─── */
body[data-color-theme="rose"] {
  --accent: #ec4899;
  --accent-rgb: 236, 72, 153;
  --accent-light: rgba(236, 72, 153, 0.1);
  --accent-dark: #be185d;
  --shadow: 0 8px 32px rgba(236, 72, 153, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 12px rgba(236, 72, 153, 0.08);
}
body[data-color-theme="rose"] {
  background: linear-gradient(145deg, #fce7f3 0%, #fbcfe8 30%, #fdf2f8 65%, #fce7f3 100%);
}
body[data-color-theme="rose"]::before {
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(236, 72, 153, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(244, 114, 182, 0.11) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(249, 168, 212, 0.09) 0%, transparent 65%);
}
body[data-color-theme="rose"][data-theme="dark"] {
  --accent: #f472b6;
  --accent-rgb: 244, 114, 182;
  --accent-light: rgba(244, 114, 182, 0.12);
  --accent-dark: #fbcfe8;
  --shadow: 0 8px 32px rgba(244, 114, 182, 0.1), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 12px rgba(244, 114, 182, 0.08);
}
body[data-color-theme="rose"][data-theme="dark"]::before {
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(244, 114, 182, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(236, 72, 153, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(251, 207, 232, 0.04) 0%, transparent 65%);
}

/* ─── 色彩主题：泰山灰 ─── */
body[data-color-theme="stone"] {
  --accent: #6b7280;
  --accent-rgb: 107, 114, 128;
  --accent-light: rgba(107, 114, 128, 0.1);
  --accent-dark: #4b5563;
  --shadow: 0 8px 32px rgba(107, 114, 128, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 12px rgba(107, 114, 128, 0.08);
}
body[data-color-theme="stone"] {
  background: linear-gradient(145deg, #f3f4f6 0%, #e5e7eb 30%, #f9fafb 65%, #f3f4f6 100%);
}
body[data-color-theme="stone"]::before {
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(107, 114, 128, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(156, 163, 175, 0.11) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(209, 213, 219, 0.09) 0%, transparent 65%);
}
body[data-color-theme="stone"][data-theme="dark"] {
  --accent: #9ca3af;
  --accent-rgb: 156, 163, 175;
  --accent-light: rgba(156, 163, 175, 0.12);
  --accent-dark: #d1d5db;
  --shadow: 0 8px 32px rgba(156, 163, 175, 0.1), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 12px rgba(156, 163, 175, 0.08);
}
body[data-color-theme="stone"][data-theme="dark"]::before {
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(156, 163, 175, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(107, 114, 128, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(209, 213, 219, 0.04) 0%, transparent 65%);
}

/* ─── 色彩主题：月光白 ─── */
body[data-color-theme="moonlight"] {
  --accent: #6366f1;
  --accent-rgb: 99, 102, 241;
  --accent-light: rgba(99, 102, 241, 0.1);
  --accent-dark: #4f46e5;
  --shadow: 0 8px 32px rgba(99, 102, 241, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 12px rgba(99, 102, 241, 0.08);
}
body[data-color-theme="moonlight"] {
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 30%, #fafbfc 65%, #f8fafc 100%);
}
body[data-color-theme="moonlight"]::before {
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(99, 102, 241, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(129, 140, 248, 0.06) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(165, 180, 252, 0.04) 0%, transparent 65%);
}
body[data-color-theme="moonlight"][data-theme="dark"] {
  --accent: #818cf8;
  --accent-rgb: 129, 140, 248;
  --accent-light: rgba(129, 140, 248, 0.12);
  --accent-dark: #a5b4fc;
  --shadow: 0 8px 32px rgba(129, 140, 248, 0.1), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 12px rgba(129, 140, 248, 0.08);
}
body[data-color-theme="moonlight"][data-theme="dark"]::before {
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(129, 140, 248, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(99, 102, 241, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(165, 180, 252, 0.04) 0%, transparent 65%);
}

/* ─── 色彩主题按钮/渐变覆盖 ─── */
body[data-color-theme="ocean"] .btn-primary {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}
body[data-color-theme="ocean"][data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6) !important;
}
body[data-color-theme="forest"] .btn-primary {
  background: linear-gradient(135deg, #059669, #10b981) !important;
}
body[data-color-theme="forest"][data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #047857, #10b981) !important;
}
body[data-color-theme="ocean"] .progress-fill {
  background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
}
body[data-color-theme="forest"] .progress-fill {
  background: linear-gradient(90deg, #059669, #10b981) !important;
}
body[data-color-theme="ocean"] .chat-bubble.mine {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}
body[data-color-theme="forest"] .chat-bubble.mine {
  background: linear-gradient(135deg, #059669, #10b981) !important;
}
body[data-color-theme="ocean"] .avatar {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}
body[data-color-theme="forest"] .avatar {
  background: linear-gradient(135deg, #059669, #10b981) !important;
}
body[data-color-theme="ocean"] .chat-fab {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}
body[data-color-theme="forest"] .chat-fab {
  background: linear-gradient(135deg, #059669, #10b981) !important;
}
body[data-color-theme="rose"] .btn-primary {
  background: linear-gradient(135deg, #ec4899, #f472b6) !important;
}
body[data-color-theme="rose"][data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #be185d, #f472b6) !important;
}
body[data-color-theme="stone"] .btn-primary {
  background: linear-gradient(135deg, #6b7280, #9ca3af) !important;
}
body[data-color-theme="stone"][data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #4b5563, #9ca3af) !important;
}
body[data-color-theme="moonlight"] .btn-primary {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
}
body[data-color-theme="moonlight"][data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #4f46e5, #818cf8) !important;
}
body[data-color-theme="rose"] .progress-fill {
  background: linear-gradient(90deg, #ec4899, #f472b6) !important;
}
body[data-color-theme="stone"] .progress-fill {
  background: linear-gradient(90deg, #6b7280, #9ca3af) !important;
}
body[data-color-theme="moonlight"] .progress-fill {
  background: linear-gradient(90deg, #6366f1, #818cf8) !important;
}
body[data-color-theme="rose"] .chat-bubble.mine {
  background: linear-gradient(135deg, #ec4899, #f472b6) !important;
}
body[data-color-theme="stone"] .chat-bubble.mine {
  background: linear-gradient(135deg, #6b7280, #9ca3af) !important;
}
body[data-color-theme="moonlight"] .chat-bubble.mine {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
}
body[data-color-theme="rose"] .avatar {
  background: linear-gradient(135deg, #ec4899, #f472b6) !important;
}
body[data-color-theme="stone"] .avatar {
  background: linear-gradient(135deg, #6b7280, #9ca3af) !important;
}
body[data-color-theme="moonlight"] .avatar {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
}
body[data-color-theme="rose"] .chat-fab {
  background: linear-gradient(135deg, #ec4899, #f472b6) !important;
}
body[data-color-theme="stone"] .chat-fab {
  background: linear-gradient(135deg, #6b7280, #9ca3af) !important;
}
body[data-color-theme="moonlight"] .chat-fab {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
}

/* ─── 色彩主题选择器 ─── */
.color-theme-options { display: flex; gap: 12px; margin-top: 12px; }
.color-theme-option {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; border-radius: 12px;
  border: 2px solid var(--border-solid);
  background: var(--card); cursor: pointer;
  transition: var(--transition);
}
.color-theme-option:hover { border-color: var(--ink3); }
.color-theme-option.active {
  border-color: var(--accent);
  background: var(--accent-light);
}
.color-theme-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.color-theme-label {
  font-size: 12px; font-weight: 500; color: var(--ink2);
  text-align: center;
}
.color-theme-option.active .color-theme-label { color: var(--accent); font-weight: 600; }

/* ─── 全局重置 ─── */
*{margin:0;padding:0;box-sizing:border-box;}

/* 隐藏桌面端滚动条（保留滚动功能） */
*::-webkit-scrollbar{width:0;height:0;}
*{scrollbar-width:none;}

/* ─── 背景层：亮色渐变 ─── */
body {
  font-family: -apple-system, "Noto Sans SC", "PingFang SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  background: linear-gradient(145deg, #ede9fe 0%, #fce7f3 30%, #dbeafe 65%, #ede9fe 100%);
  background-attachment: fixed;
  transition: background 0.4s ease, color 0.3s ease;
  position: relative;
}

/* 装饰光晕：亮色 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(124, 58, 237, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(219, 39, 119, 0.11) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(79, 172, 254, 0.09) 0%, transparent 65%);
  transition: opacity 0.4s ease;
}

/* 暗色模式背景 */
body[data-theme="dark"] {
  background: linear-gradient(145deg, #0a0a14 0%, #0d0d1e 45%, #070b14 100%);
}

body[data-theme="dark"]::before {
  background:
    radial-gradient(ellipse 700px 500px at 10% 10%, rgba(96, 165, 250, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 600px 600px at 90% 85%, rgba(167, 139, 250, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 500px 700px at 60% 0%, rgba(96, 165, 250, 0.04) 0%, transparent 65%);
}

/* 确保内容层在装饰层上方 */
#root { position: relative; z-index: 1; }

/* ─── 布局 ─── */
.container{max-width:640px;margin:0 auto;padding:24px 16px 120px;}
.center-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px 16px;}

/* ─── 登录卡片 ─── */
.auth-card{
  background: var(--card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 24px;
  padding: 40px 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 420px;
}

/* ─── Logo ─── */
.logo{text-align:center;margin-bottom:32px;}
.logo-name{
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #db2777));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body[data-theme="dark"] .logo-name {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
}
.logo-sub{font-size:13px;color:var(--ink3);margin-top:2px;}

/* ─── 页面标题 ─── */
.page-header{padding-top:20px;margin-bottom:24px;}
.page-header h1{font-size:21px;font-weight:700;}
.page-header p{font-size:13px;color:var(--ink2);margin-top:4px;}

/* ─── 表单 ─── */
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--ink2);}
.field input,.field select{
  width:100%;padding:11px 14px;border-radius:12px;
  border:1.5px solid var(--border-solid);
  font-size:14px;font-family:inherit;
  background: rgba(255,255,255,0.6);
  color: var(--ink);
  transition: var(--transition);
  backdrop-filter: blur(8px);
}
body[data-theme="dark"] .field input,
body[data-theme="dark"] .field select {
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}
.field input::placeholder { color: var(--ink3); }
.field input:focus,.field select:focus{
  outline:none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
  background: rgba(255,255,255,0.85);
}
body[data-theme="dark"] .field input:focus,
body[data-theme="dark"] .field select:focus {
  background: rgba(255,255,255,0.08);
}
.field-hint{font-size:12px;color:var(--ink3);margin-top:4px;}

/* ─── 按钮 ─── */
.btn{display:block;width:100%;padding:13px;border-radius:12px;border:none;font-size:15px;font-weight:600;cursor:pointer;transition: var(--transition);text-align:center;}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #db2777 40%));
  color: #fff;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.35);
}
body[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  box-shadow: 0 4px 20px rgba(96, 165, 250, 0.3);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.45);
}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn-ghost{
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
  border: 1.5px solid rgba(var(--accent-rgb), 0.3);
}
.btn-ghost:hover{
  background: var(--accent-light);
  border-color: var(--accent);
}
.btn-sm{padding:8px 16px;font-size:13px;width:auto;display:inline-block;border-radius:9px;}

/* ─── 消息提示 ─── */
.msg{padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:12px;}
.msg-error{
  background: var(--error-light);
  color: var(--error);
  border: 1px solid rgba(var(--accent-rgb),0);
  border-color: rgba(220,38,38,0.2);
}
.msg-success{
  background: var(--success-light);
  color: var(--success);
  border: 1px solid rgba(22,163,74,0.25);
}
.msg-info{
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}
.msg-warn{
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fcd34d;
}
[data-theme="dark"] .msg-warn{
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.3);
}

/* ─── 进度条 ─── */
.progress-wrap{margin-bottom:18px;}
.progress-bar{
  background: rgba(var(--accent-rgb), 0.12);
  border-radius:100px;height:5px;
}
.progress-fill{
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #db2777));
  height:100%;border-radius:100px;transition:width .4s ease;
}
body[data-theme="dark"] .progress-fill {
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
}
.progress-text{font-size:12px;color:var(--ink3);margin-top:4px;text-align:right;}

/* ─── 问题区块 ─── */
.section{margin-bottom:28px;}
.section-title{
  font-size:15px;font-weight:700;
  color: var(--accent);
  margin-bottom:12px;padding-bottom:8px;
  border-bottom: 2px solid rgba(var(--accent-rgb), 0.15);
}

/* ─── 问题卡片 ─── */
.q-card{
  background: var(--card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius);
  padding:18px 20px;margin-bottom:12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.q-card.answered{
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.1);
}
.q-card.gender-locked .option-btn{
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}
.q-title{font-size:14px;font-weight:600;margin-bottom:3px;}
.q-desc{font-size:12px;color:var(--ink2);margin-bottom:10px;}
.q-req{color:var(--error);}

/* ─── 选项按钮 ─── */
.option-group{display:flex;flex-direction:column;gap:7px;}
.option-btn{
  display:block;width:100%;padding:9px 13px;border-radius:10px;
  border: 1.5px solid var(--border-solid);
  background: rgba(255,255,255,0.4);
  font-size:13px;color:var(--ink);cursor:pointer;text-align:left;
  transition: var(--transition);
}
body[data-theme="dark"] .option-btn {
  background: rgba(255,255,255,0.04);
}
.option-btn:hover{
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateX(2px);
}
.option-btn.selected,.option-btn.multi-selected{
  border-color: var(--accent);
  background: var(--accent-light);
  font-weight:600;color:var(--accent);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.15);
}

/* ─── 标签芯片选项（兴趣标签等短选项） ─── */
.tag-group{display:flex;flex-wrap:wrap;gap:7px;}
.tag-btn{
  display:inline-block;padding:5px 12px;border-radius:20px;
  border: 1.5px solid var(--border-solid);
  background: rgba(255,255,255,0.4);
  font-size:12px;color:var(--ink);cursor:pointer;
  transition: var(--transition);white-space:nowrap;
}
body[data-theme="dark"] .tag-btn {
  background: rgba(255,255,255,0.04);
}
.tag-btn:hover{
  border-color: var(--accent);
  background: var(--accent-light);
}
.tag-btn.multi-selected{
  border-color: var(--accent);
  background: var(--accent-light);
  font-weight:600;color:var(--accent);
  box-shadow: 0 1px 5px rgba(var(--accent-rgb), 0.15);
}

/* ─── 滑块 ─── */
.slider-wrap{padding:6px 0;}
.slider-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--ink3);margin-bottom:4px;}
.slider-input{width:100%;accent-color:var(--accent);cursor:pointer;}
.slider-value{text-align:center;font-size:22px;font-weight:700;color:var(--accent);margin-top:4px;}

/* ─── 文本输入 ─── */
.text-input{
  width:100%;padding:10px 13px;border-radius:10px;
  border:1.5px solid var(--border-solid);
  font-size:13px;font-family:inherit;resize:vertical;min-height:80px;
  background: rgba(255,255,255,0.5);
  color: var(--ink);
  transition: var(--transition);
}
body[data-theme="dark"] .text-input {
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}
.text-input::placeholder { color: var(--ink3); }
.text-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* ─── 评分 ─── */
.rating-grid{display:flex;flex-direction:column;gap:9px;}
.rating-row{display:flex;align-items:center;gap:8px;}
.rating-label{flex:1;font-size:12px;min-width:0;color:var(--ink2);}
.rating-btns{display:flex;gap:4px;flex-shrink:0;}
.rating-btn{
  width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--border-solid);
  background: rgba(255,255,255,0.4);
  font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition: var(--transition);
}
body[data-theme="dark"] .rating-btn { background: rgba(255,255,255,0.05); }
.rating-btn:hover{border-color:var(--accent);background:var(--accent-light);}
.rating-btn.selected{
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #db2777 40%));
  color:#fff;border-color:var(--accent);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}
body[data-theme="dark"] .rating-btn.selected {
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
}

/* ─── 用户卡片 ─── */
.user-card{
  background: var(--card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius);
  padding:20px;margin-bottom:20px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.user-card-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.avatar{
  width:48px;height:48px;border-radius:50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #db2777));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;flex-shrink:0;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}
body[data-theme="dark"] .avatar {
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
}
.user-name{font-size:17px;font-weight:700;}
.user-email{font-size:12px;color:var(--ink3);}
.edit-toggle{font-size:12px;color:var(--accent);cursor:pointer;text-decoration:underline;margin-left:auto;}

/* ─── 底栏 ─── */
.bottom-bar{
  position:fixed;bottom:0;left:0;right:0;
  background: rgba(255,255,255,0.75);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding:12px 16px;
  border-top:1px solid var(--border);
  z-index:100;
}
body[data-theme="dark"] .bottom-bar {
  background: rgba(10, 10, 20, 0.85);
}
.bottom-bar-inner{max-width:640px;margin:0 auto;display:flex;gap:8px;align-items:center;}

/* ─── 暗色模式切换按钮 ─── */
.theme-toggle-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:1.5px solid var(--border-solid);
  background: rgba(255,255,255,0.5);
  cursor:pointer;font-size:16px;
  transition: var(--transition);
  flex-shrink:0;
}
body[data-theme="dark"] .theme-toggle-btn {
  background: rgba(255,255,255,0.08);
}
.theme-toggle-btn:hover{
  border-color: var(--accent);
  background: var(--accent-light);
  transform: rotate(15deg) scale(1.05);
}

/* ─── 加载 ─── */
.loading{text-align:center;padding:60px;color:var(--ink3);font-size:14px;}

/* ─── 响应式 ─── */
@media(min-width:640px){
  .container{padding:40px 24px 120px;}
  .bottom-bar{padding:14px 24px;}
}

/* ═══════ 聊天组件 ═══════ */
.chat-fab{
  position:fixed;bottom:80px;right:20px;
  width:52px;height:52px;border-radius:50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #db2777));
  color:#fff;border:none;cursor:pointer;
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.4);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;z-index:200;transition: var(--transition);
}
body[data-theme="dark"] .chat-fab {
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  box-shadow: 0 4px 20px rgba(96, 165, 250, 0.35);
}
.chat-fab:hover{transform:scale(1.08) translateY(-2px);}
.chat-fab .badge{
  position:absolute;top:-2px;right:-2px;
  min-width:18px;height:18px;border-radius:9px;
  background:var(--error);color:#fff;
  font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;border:2px solid #fff;
}

.chat-panel{
  position:fixed;bottom:80px;right:20px;
  width:360px;max-width:calc(100vw - 24px);
  height:500px;max-height:calc(100vh - 120px);
  background: var(--card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius:20px;
  box-shadow: var(--shadow), 0 20px 60px rgba(0,0,0,0.15);
  z-index:201;display:flex;flex-direction:column;
  overflow:hidden;border:1px solid var(--border);
}

.chat-header{
  padding:14px 16px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #7c3aed));
  color:#fff;display:flex;align-items:center;gap:10px;flex-shrink:0;
}
body[data-theme="dark"] .chat-header {
  background: linear-gradient(135deg, #1e3a5f, #1e1b4b);
  border-bottom: 1px solid var(--border);
}
.chat-header .back-btn{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;}
.chat-header .back-btn:hover{background:rgba(255,255,255,.15);}
.chat-header .title{flex:1;min-width:0;}
.chat-header .title h4{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-header .title .subtitle{font-size:11px;opacity:.8;}
.chat-header .close-btn{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:2px 6px;border-radius:4px;}
.chat-header .close-btn:hover{background:rgba(255,255,255,.15);}
.peer-gender-tag{font-size:13px;opacity:.85;margin-left:3px;vertical-align:middle;}
.peer-note-btn{background:none;border:none;color:rgba(255,255,255,.75);cursor:pointer;font-size:12px;padding:0 3px;vertical-align:middle;line-height:1;}
.peer-note-btn:hover{color:#fff;}
.peer-tags-container{display:flex;align-items:flex-start;gap:6px;margin-top:5px;}
.tags-toggle-btn{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;padding:0 2px;font-size:11px;flex-shrink:0;line-height:1.6;transition:color 0.2s ease;}
.tags-toggle-btn:hover{color:#fff;}
.peer-tags-row{display:flex;flex-wrap:wrap;gap:4px;flex:1;transition:all 0.2s ease;}
.peer-tags-container.tags-collapsed .peer-tags-row{display:none;}
.peer-tag-chip{font-size:10px;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.2);color:#fff;white-space:nowrap;line-height:1.6;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;display:flex;align-items:center;justify-content:center;}
.modal-box{background:#fff;border-radius:14px;padding:24px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.18);}
body[data-theme="dark"] .modal-box{background:#1e293b;color:#e2e8f0;}
body[data-theme="dark"] .modal-box input{background:#0f172a;border-color:#334155;color:#e2e8f0;}

.chat-conv-list{flex:1;overflow-y:auto;padding:8px;}
.chat-conv-item{
  display:flex;align-items:center;gap:12px;padding:12px;
  border-radius:12px;cursor:pointer;transition: var(--transition);
  border:1px solid transparent;
}
.chat-conv-item:hover{background:var(--accent-light);border-color:rgba(var(--accent-rgb),0.2);}
.chat-conv-avatar{
  width:40px;height:40px;border-radius:50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #db2777));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;flex-shrink:0;
}
body[data-theme="dark"] .chat-conv-avatar {
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
}
.chat-conv-info{flex:1;min-width:0;}
.chat-conv-name{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;}
.chat-conv-name .unread-dot{width:8px;height:8px;border-radius:50%;background:var(--error);flex-shrink:0;}
.chat-conv-name .new-match-badge{font-size:10px;font-weight:600;color:#fff;background:var(--accent);padding:1px 6px;border-radius:6px;flex-shrink:0;line-height:1.4;}
.chat-conv-last{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.chat-conv-score{font-size:11px;color:var(--accent);font-weight:600;flex-shrink:0;}

.chat-messages{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:6px;}
.chat-load-more{text-align:center;padding:6px 0 2px;flex-shrink:0;}
.chat-load-more button{background:none;border:1px solid var(--border);border-radius:20px;padding:5px 16px;font-size:12px;color:var(--ink3);cursor:pointer;transition:var(--transition);}
.chat-load-more button:hover:not(:disabled){background:var(--hover);color:var(--ink);}
.chat-load-more button:disabled{opacity:0.55;cursor:default;}


.chat-bubble{max-width:75%;min-width:72px;padding:9px 14px;border-radius:16px;font-size:13px;line-height:1.5;word-break:break-word;}
.chat-bubble.mine{
  align-self:flex-end;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #7c3aed));
  color:#fff;border-bottom-right-radius:4px;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
}
body[data-theme="dark"] .chat-bubble.mine {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}
.chat-bubble.theirs{
  align-self:flex-start;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
  color:var(--ink);border-bottom-left-radius:4px;
  border:1px solid var(--border);
}
body[data-theme="dark"] .chat-bubble.theirs {
  background: rgba(255,255,255,0.07);
}
/* 气泡内时间戳：inline显示，避免短文本换行 */
.bbl-time{display:inline-block;font-size:10px;opacity:.6;white-space:nowrap;margin-left:6px;vertical-align:bottom;line-height:1.8;}
/* 图片消息的时间戳单独成行 */
.bbl-time-block{display:block;font-size:10px;opacity:.6;white-space:nowrap;text-align:right;margin-top:3px;}
/* 兼容旧的 .time 类（游戏消息等） */
.chat-bubble .time{font-size:10px;opacity:.6;margin-top:2px;white-space:nowrap;}
.chat-date-sep{text-align:center;font-size:11px;color:var(--ink3);padding:8px 0;}
.chat-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:13px;text-align:center;padding:20px;}

.chat-input-bar{
  display:flex;gap:8px;padding:10px 14px;
  border-top:1px solid var(--border);flex-shrink:0;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
}
body[data-theme="dark"] .chat-input-bar {
  background: rgba(10,10,20,0.7);
}
.chat-input-bar input{
  flex:1;padding:9px 14px;border-radius:20px;
  border:1.5px solid var(--border-solid);
  font-size:13px;font-family:inherit;outline:none;
  background: rgba(255,255,255,0.6);
  color: var(--ink);
  transition: var(--transition);
}
body[data-theme="dark"] .chat-input-bar input {
  background: rgba(255,255,255,0.07);
  color: var(--ink);
}
.chat-input-bar input::placeholder { color: var(--ink3); }
.chat-input-bar input:focus{
  border-color:var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.chat-input-bar button{
  width:36px;height:36px;border-radius:50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #7c3aed));
  color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;transition: var(--transition);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}
body[data-theme="dark"] .chat-input-bar button {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}
.chat-input-bar button:disabled{opacity:.4;cursor:not-allowed;}
.chat-input-bar button:not(:disabled):hover{transform:scale(1.08);}
.chat-input-bar.drag-over{border-top:1.5px solid rgba(var(--accent-rgb),0.35);background:rgba(var(--accent-rgb),0.05);}

/* 图片上传按钮（与骰子按钮同款） */
.img-upload-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent-light);color:var(--ink);
  border:1.5px solid var(--border-solid);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;transition: var(--transition);
}
.img-upload-btn:hover{background:rgba(var(--accent-rgb),0.18);}

/* 文件上传按钮 */
.file-upload-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent-light);color:var(--ink);
  border:1.5px solid var(--border-solid);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;transition: var(--transition);
}
.file-upload-btn:hover{background:rgba(var(--accent-rgb),0.18);}

/* ── 消息行包装器 ── */
.chat-msg-row{display:flex;flex-direction:column;gap:2px;max-width:80%;}
.chat-msg-row.mine{align-self:flex-end;align-items:flex-end;}
.chat-msg-row.theirs{align-self:flex-start;align-items:flex-start;}
.chat-msg-inner{display:flex;align-items:flex-end;gap:4px;}

/* ── 消息行右键/长按上下文菜单 ── */
.msg-context-menu{
  position:fixed;z-index:9999;
  background:var(--card);
  border:1px solid var(--border-solid);
  border-radius:12px;padding:4px;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  min-width:130px;
  backdrop-filter:blur(12px);
}
body[data-theme="dark"] .msg-context-menu{
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.msg-context-menu button{
  display:block;width:100%;
  padding:10px 16px;
  background:none;border:none;border-radius:8px;
  font-size:14px;color:var(--ink);
  cursor:pointer;text-align:left;
  font-family:inherit;transition:var(--transition);
}
.msg-context-menu button:hover{background:var(--accent-light);color:var(--accent);}

/* ── 底栏表情按钮 ── */
.emoji-bar-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent-light);color:var(--ink);
  border:1.5px solid var(--border-solid);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;transition:var(--transition);
}
.emoji-bar-btn:hover{background:rgba(var(--accent-rgb),0.18);}

/* ── 引用块（消息内部） ── */
.chat-reply-quote{
  border-left:3px solid rgba(var(--accent-rgb),0.6);
  padding:4px 8px;border-radius:4px;
  background:rgba(var(--accent-rgb),0.08);
  margin-bottom:6px;cursor:pointer;
}
.chat-bubble.mine .chat-reply-quote{
  border-left-color:rgba(255,255,255,0.5);
  background:rgba(255,255,255,0.15);
}
.quote-sender{font-size:11px;font-weight:600;opacity:.8;margin-bottom:2px;}
.quote-text{font-size:12px;opacity:.75;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:200px;}

/* ── 图片消息 ── */
.chat-img-wrap{max-width:75%;}
.chat-img-wrap.mine{align-self:flex-end;}
.chat-img-wrap.theirs{align-self:flex-start;}
.chat-img-wrap .bbl-time-block{color:var(--ink3);}
.chat-msg-image{
  max-width:220px;max-height:220px;
  border-radius:10px;display:block;
  cursor:zoom-in;object-fit:cover;
}

/* ── 表情回应 ── */
.chat-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;}
.reaction-item{
  padding:2px 7px;border-radius:12px;
  border:1px solid var(--border-solid);
  background:var(--card);
  font-size:13px;cursor:pointer;
  transition: var(--transition);
  line-height:1.6;
}
.reaction-item.active{
  background:var(--accent-light);
  border-color:rgba(var(--accent-rgb),0.45);
}
.reaction-item:hover{background:rgba(var(--accent-rgb),0.12);}

/* ── 引用预览条（输入框上方） ── */
.chat-reply-bar{
  border-top:1px solid var(--border);
  background:rgba(var(--accent-rgb),0.06);
  flex-shrink:0;
}
.reply-bar-inner{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;
}
.reply-bar-icon{font-size:14px;color:var(--accent);flex-shrink:0;}
.reply-bar-body{flex:1;min-width:0;}
.reply-bar-sender{font-size:11px;font-weight:600;color:var(--accent);}
.reply-bar-preview{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reply-bar-cancel{
  background:none;border:none;color:var(--ink3);
  font-size:16px;cursor:pointer;padding:2px 4px;
  border-radius:4px;flex-shrink:0;
}
.reply-bar-cancel:hover{color:var(--ink);}

/* ── 表情选择器 ── */
.chat-emoji-picker{
  display:flex;flex-direction:column;gap:4px;
  padding:8px 14px;
  border-top:1px solid var(--border);
  background:var(--card);
  flex-shrink:0;
}
.emoji-row{
  display:flex;align-items:center;gap:6px;
}
.emoji-pick-btn{
  background:none;border:none;font-size:22px;
  cursor:pointer;padding:2px;border-radius:8px;
  transition: var(--transition);line-height:1;
}
.emoji-pick-btn:hover{background:var(--accent-light);transform:scale(1.2);}
.emoji-pick-close{
  background:none;border:none;color:var(--ink3);
  font-size:16px;cursor:pointer;margin-left:4px;
  padding:2px 6px;border-radius:4px;
}
.emoji-pick-close:hover{color:var(--ink);}

/* ── 图片预览栏（批量上传） ── */
.img-preview-bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  border-top:1px solid var(--border);
  background:var(--card);
  flex-shrink:0;
  overflow-x:auto;
}
.img-preview-item{
  position:relative;width:60px;height:60px;flex-shrink:0;
  border-radius:8px;overflow:hidden;border:1px solid var(--border-solid);
}
.img-preview-item img{
  width:100%;height:100%;object-fit:cover;
}
.img-preview-del{
  position:absolute;top:2px;right:2px;
  width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,0.55);color:#fff;
  font-size:12px;line-height:18px;text-align:center;
  border:none;cursor:pointer;padding:0;
}
.img-preview-del:hover{background:var(--error);}
.img-preview-actions{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-left:auto;flex-shrink:0;
}
.img-preview-count{
  font-size:12px;color:var(--ink3);
}

/* ── 文件预览栏（上传文本文件） ── */
.file-preview-bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  border-top:1px solid var(--border);
  background:var(--card);
  flex-shrink:0;
  overflow-x:auto;
}
.file-preview-item{
  position:relative;
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid var(--border-solid);
  background:rgba(var(--accent-rgb),0.08);
  flex-shrink:0;
  font-size:12px;color:var(--ink2);
}
.file-preview-icon{
  font-size:14px;
}
.file-preview-name{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.file-preview-del{
  position:absolute;top:-6px;right:-6px;
  width:20px;height:20px;border-radius:50%;
  background:var(--error);color:#fff;
  font-size:12px;line-height:20px;text-align:center;
  border:none;cursor:pointer;padding:0;
}
.file-preview-del:hover{background:var(--error);opacity:0.8;}
.file-preview-actions{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-left:auto;flex-shrink:0;
}
.file-preview-count{
  font-size:12px;color:var(--ink3);
}

/* ── 文件消息样式 ── */
.chat-msg-file{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:8px;
  background:rgba(var(--accent-rgb),0.12);
  color:var(--accent);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  transition:var(--transition);
}
.chat-msg-file:hover{
  background:rgba(var(--accent-rgb),0.2);
  transform:translateY(-1px);
}

/* ── 消息高亮（点击引用跳转） ── */
@keyframes msg-flash{
  0%{background:rgba(var(--accent-rgb),0.25);}
  100%{background:transparent;}
}
.msg-highlight{animation:msg-flash 1.5s ease-out;border-radius:12px;}

/* ── 图片全屏查看 ── */
.img-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.88);
  display:flex;align-items:center;justify-content:center;
  cursor:zoom-out;
}
.img-overlay img{
  max-width:92vw;max-height:92vh;
  border-radius:8px;object-fit:contain;
  cursor:default;
}

@media(max-width:420px){.chat-panel{right:8px;width:calc(100vw - 16px);bottom:70px;height:calc(100vh - 90px);}}

/* ═══════ 全屏聊天页 ═══════ */
.chat-page{display:flex;flex-direction:column;height:100vh;height:100dvh;}
.chat-page-header{
  padding:14px 20px;display:flex;align-items:center;gap:10px;flex-shrink:0;
  border-bottom:1px solid var(--border);
  background: rgba(255,255,255,0.72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
body[data-theme="dark"] .chat-page-header {
  background: rgba(10,10,20,0.85);
}
.chat-page-header .logo-name{font-size:20px;font-weight:800;}
.chat-page-header .spacer{flex:1;}
.chat-page-header .nav-link{
  font-size:13px;color:var(--accent);cursor:pointer;
  padding:6px 14px;border-radius:10px;
  border:1.5px solid rgba(var(--accent-rgb),0.35);
  white-space:nowrap;background:var(--accent-light);
  font-family:inherit;font-weight:500;
  transition: var(--transition);
}
.chat-page-header .nav-link:hover{background:rgba(var(--accent-rgb),0.18);}
.chat-page-header .logout-link{
  font-size:13px;color:var(--ink3);cursor:pointer;
  padding:6px 12px;border-radius:10px;
  border:1px solid var(--border-solid);white-space:nowrap;
  background:none;font-family:inherit;
  transition: var(--transition);
}
.chat-page-header .logout-link:hover{background:rgba(var(--accent-rgb),0.06);color:var(--ink);}
.chat-page-list{flex:1;overflow-y:auto;max-width:640px;width:100%;margin:0 auto;padding:8px 12px;}
.chat-page-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--ink3);text-align:center;padding:40px 20px;gap:16px;}
.chat-page-empty .empty-icon{font-size:48px;}
.chat-page-empty .empty-text{font-size:14px;line-height:1.8;}
.chat-page-room{display:flex;flex-direction:column;height:100vh;height:100dvh;}
.chat-page-room .chat-header{border-radius:0;}
.chat-page-room .chat-messages{flex:1;padding:12px 16px;}
.chat-page-room .chat-input-bar{padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));}

/* ═══════ 游戏模块：骰子问答 ═══════ */
.dice-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent-light);color:var(--ink);
  border:1.5px solid var(--border-solid);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;transition: var(--transition);
}
.dice-btn:hover{background:rgba(var(--accent-rgb),0.18);}
.game-card{
  margin:12px 8px;border-radius:16px;
  border:2px dashed rgba(var(--accent-rgb),0.35);
  background:var(--accent-light);
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;
}
.game-title{font-weight:700;font-size:14px;color:var(--accent);}
.game-rolled{font-size:13px;color:var(--ink2);}
.game-won{font-size:13px;font-weight:600;color:var(--accent);}
.game-lost{font-size:13px;color:var(--ink3);}
.game-roll-btn{
  align-self:flex-start;padding:8px 20px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #7c3aed));
  color:#fff;border:none;border-radius:20px;
  font-size:13px;cursor:pointer;font-family:inherit;font-weight:600;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.3);
}
.game-roll-btn:hover{opacity:.85;transform:translateY(-1px);}
.game-q-btn{
  width:100%;padding:10px 14px;
  background: rgba(255,255,255,0.5);
  border:1.5px solid rgba(var(--accent-rgb),0.25);
  border-radius:10px;font-size:13px;color:var(--ink);
  cursor:pointer;font-family:inherit;text-align:left;line-height:1.5;
  transition: var(--transition);
}
body[data-theme="dark"] .game-q-btn { background: rgba(255,255,255,0.05); }
.game-q-btn:hover{background:var(--accent-light);}
.game-reroll-btn{
  align-self:flex-start;margin-top:6px;padding:6px 16px;
  background:transparent;border:1.5px solid rgba(var(--accent-rgb),0.35);
  border-radius:16px;font-size:12px;color:var(--accent);
  cursor:pointer;font-family:inherit;transition:var(--transition);
}
.game-reroll-btn:hover{background:var(--accent-light);}
.game-question-msg{
  max-width:80%;padding:10px 14px;border-radius:14px;
  font-size:13px;line-height:1.5;word-break:break-word;
  border:2px solid rgba(var(--accent-rgb),0.3);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
}
body[data-theme="dark"] .game-question-msg { background: rgba(255,255,255,0.07); }
.game-question-msg.mine{align-self:flex-end;border-bottom-right-radius:4px;}
.game-question-msg.theirs{align-self:flex-start;border-bottom-left-radius:4px;}
.game-question-msg .gq-label{font-size:11px;color:var(--accent);font-weight:600;margin-bottom:4px;}
.game-question-msg .gq-text{font-size:13px;color:var(--ink);}
.game-question-msg .gq-reply-btn{
  display:inline-block;margin-top:6px;padding:4px 14px;
  font-size:12px;font-weight:600;color:var(--accent);
  background:rgba(var(--accent-rgb),0.1);border:1px solid rgba(var(--accent-rgb),0.3);
  border-radius:12px;cursor:pointer;transition:var(--transition);
}
.game-question-msg .gq-reply-btn:hover{background:rgba(var(--accent-rgb),0.2);}
.game-question-msg .time{font-size:10px;opacity:.6;margin-top:4px;white-space:nowrap;}
.dice-result-msg{
  max-width:80%;padding:10px 14px;border-radius:14px;
  font-size:13px;line-height:1.5;word-break:break-word;
  border:2px solid rgba(var(--accent-rgb),0.3);
  background:var(--accent-light);align-self:center;text-align:center;
}
.dice-result-msg .gq-label{font-size:11px;color:var(--accent);font-weight:600;margin-bottom:4px;}
.dice-result-msg .gq-text{font-size:13px;color:var(--ink);font-weight:600;}
.dice-result-msg .time{font-size:10px;opacity:.6;margin-top:4px;}

/* ═══════ 复旦对话引导消息（每日话题推送，按发送方左右对齐） ═══════ */
.fudan-dialog-msg{
  max-width:80%;padding:10px 14px;border-radius:14px;
  font-size:13px;line-height:1.5;word-break:break-word;
  border:1px dashed rgba(var(--accent-rgb),0.35);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.06), rgba(var(--accent-rgb),0.02));
  backdrop-filter:blur(8px);
}
body[data-theme="dark"] .fudan-dialog-msg{background:linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.05));}
.fudan-dialog-msg.mine{align-self:flex-end;border-bottom-right-radius:4px;}
.fudan-dialog-msg.theirs{align-self:flex-start;border-bottom-left-radius:4px;}
.fudan-dialog-msg .fd-label{font-size:11px;color:var(--accent);font-weight:600;margin-bottom:4px;opacity:0.8;}
.fudan-dialog-msg .fd-text{font-size:13px;color:var(--ink);}
.fudan-dialog-msg .fd-time{font-size:10px;opacity:.5;margin-top:3px;white-space:nowrap;}
.fd-reply-btn{display:block;margin-top:8px;font-size:12px;padding:6px 14px;border-radius:8px;border:1px solid rgba(var(--accent-rgb),0.35);background:rgba(var(--accent-rgb),0.08);color:var(--accent);cursor:pointer;font-weight:500;}
.fd-reply-btn:active{opacity:0.7;}

/* ═══════ 系统/机器人消息 ═══════ */
.system-msg{
  align-self:center;text-align:center;
  max-width:90%;padding:8px 16px;margin:8px auto;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.04));
  border:1px dashed rgba(var(--accent-rgb),0.25);
  font-size:12px;color:var(--ink2);line-height:1.6;
}
.system-msg-icon{margin-right:4px;font-size:13px;}
.system-msg-text{font-size:12px;}
.system-msg-time{font-size:10px;opacity:.5;margin-top:2px;}
.chat-msg-row.system{display:flex;justify-content:center;}

/* ═══════ 匹配参与卡片 ═══════ */
.match-opt-in-card{
  margin:16px auto;padding:14px 18px;
  border-radius:12px;text-align:center;
  background:var(--card);border:1px solid var(--border-solid);
  box-shadow:var(--shadow-sm);max-width:340px;
}
.match-opt-in-card.opted-in{
  display:flex;align-items:center;justify-content:center;gap:12px;
}

/* ═══════ 新手引导 ═══════ */
.onboarding-guide{
  padding:16px 18px;border-radius:14px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.03));
  border:1px solid rgba(var(--accent-rgb),0.2);
}
.onboarding-steps{
  display:flex;flex-direction:column;gap:10px;margin-top:12px;
}
.onboarding-step{
  display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;
}
.onboarding-step-num{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}

/* ═══════ 功能介绍页 ═══════ */
.guide-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:20px;margin-bottom:14px;
  box-shadow:var(--shadow-sm);
}
.guide-card-icon{font-size:28px;margin-bottom:8px;}
.guide-card-title{font-size:15px;font-weight:700;margin-bottom:10px;color:var(--ink);}
.guide-card-body{font-size:13px;color:var(--ink2);line-height:1.8;}
.guide-card-body p{margin:0 0 8px;}
.guide-card-body p:last-child{margin-bottom:0;}
.guide-card-body ul{margin:4px 0 8px;padding-left:18px;}
.guide-card-body ul li{margin-bottom:2px;}
.guide-card-body a{color:var(--accent);text-decoration:none;font-weight:500;}
.guide-card-body a:hover{text-decoration:underline;}
.guide-highlight{
  margin-top:10px;padding:10px 14px;border-radius:10px;
  background:var(--accent-light);
  display:flex;flex-direction:column;gap:6px;
}
.guide-highlight-row{font-size:12px;color:var(--ink2);display:flex;align-items:baseline;gap:8px;}
.guide-label{
  flex-shrink:0;font-weight:600;color:var(--accent);font-size:12px;
  min-width:60px;
}

/* ═══════ 功能提示卡片 ═══════ */
.feature-tips-card{
  max-width:640px;width:calc(100% - 24px);margin:8px auto 0;
  padding:14px 16px;border-radius:14px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.03));
  border:1px solid rgba(var(--accent-rgb),0.18);
}
.feature-tips-header{
  display:flex;align-items:center;justify-content:space-between;
}
.feature-tips-close{
  background:none;border:none;font-size:20px;color:var(--ink3);
  cursor:pointer;padding:0 2px;line-height:1;
}
.feature-tips-close:hover{color:var(--ink);}
.feature-tips-list{
  display:flex;flex-direction:column;gap:10px;margin-top:10px;
}
.feature-tip-item{
  display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;
  cursor:pointer;border-radius:8px;padding:6px 8px;transition:background .15s;
}
.feature-tip-item:hover{background:rgba(var(--accent-rgb),0.06);}
.feature-tip-icon{
  flex-shrink:0;font-size:18px;margin-top:1px;
}

/* ═══════ 记忆档案页 ═══════ */
.memory-page{display:flex;flex-direction:column;height:100vh;height:100dvh;}
.memory-body{flex:1;overflow-y:auto;max-width:640px;width:100%;margin:0 auto;padding:16px 12px 40px;}

.memory-summary-card{
  background: var(--card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius:16px;padding:20px;margin-bottom:16px;
  border:1px solid var(--border);box-shadow:var(--shadow);
}
.memory-empty-summary{background:rgba(255,255,255,0.4);}
body[data-theme="dark"] .memory-empty-summary { background: rgba(255,255,255,0.03); }
.memory-summary-title{font-size:15px;font-weight:700;margin-bottom:12px;color:var(--ink);}
.memory-summary-topics{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.topic-chip{
  padding:4px 10px;border-radius:20px;
  background:var(--accent-light);color:var(--accent);
  font-size:12px;font-weight:500;
  border:1px solid rgba(var(--accent-rgb),0.2);
}
.topic-chip-sm{
  padding:2px 8px;border-radius:12px;
  background:rgba(var(--accent-rgb),0.06);
  color:var(--ink3);font-size:11px;
}
.memory-summary-insights{margin-bottom:12px;display:flex;flex-direction:column;gap:8px;}
.memory-insight-item{
  font-size:13px;color:var(--ink2);padding:10px 12px;
  background:rgba(255,255,255,0.4);
  border-left:3px solid var(--accent);border-radius:0 8px 8px 0;line-height:1.6;
}
body[data-theme="dark"] .memory-insight-item { background: rgba(255,255,255,0.05); }
.memory-growth{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.growth-signal{
  font-size:12px;color:var(--success);padding:6px 10px;
  background:var(--success-light);border-radius:8px;
  border:1px solid rgba(22,163,74,0.2);
}
.memory-export-btn{
  display:inline-block;padding:8px 16px;border-radius:9px;
  background:rgba(255,255,255,0.5);
  border:1.5px solid var(--border-solid);
  color:var(--ink2);font-size:13px;cursor:pointer;
  font-family:inherit;transition: var(--transition);
}
body[data-theme="dark"] .memory-export-btn { background: rgba(255,255,255,0.06); }
.memory-export-btn:hover{border-color:var(--accent);color:var(--accent);}

.memory-reflect-card{
  background: var(--card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius:16px;padding:20px;margin-bottom:16px;
  border:1px solid var(--border);
}
.memory-reflect-title{font-size:15px;font-weight:700;margin-bottom:12px;}
.memory-layer-select{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;align-items:center;font-size:13px;color:var(--ink2);}
.layer-radio{display:flex;align-items:center;gap:4px;font-size:12px;cursor:pointer;color:var(--ink2);}
.layer-radio input{accent-color:var(--accent);}
.layer-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap;}
.memory-textarea{
  width:100%;padding:12px;border-radius:10px;
  border:1.5px solid var(--border-solid);
  font-size:14px;font-family:inherit;resize:vertical;min-height:100px;
  margin-bottom:10px;
  background: rgba(255,255,255,0.5);
  color: var(--ink);
  transition: var(--transition);
}
body[data-theme="dark"] .memory-textarea {
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}
.memory-textarea::placeholder { color: var(--ink3); }
.memory-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.memory-btn-primary{
  padding:10px 20px;border-radius:9px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #7c3aed));
  color:#fff;border:none;font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;transition: var(--transition);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.3);
}
body[data-theme="dark"] .memory-btn-primary {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}
.memory-btn-primary:hover{opacity:.88;transform:translateY(-1px);}

.memory-timeline-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:12px;}
.memory-timeline{display:flex;flex-direction:column;gap:0;position:relative;}
.timeline-month-sep{font-size:12px;font-weight:700;color:var(--ink3);margin:16px 0 8px 28px;text-transform:uppercase;letter-spacing:.5px;}
.timeline-node{display:flex;gap:12px;margin-bottom:12px;position:relative;}
.timeline-node-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:6px;border:2px solid var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.15);}
.timeline-node-card{
  flex:1;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  border-radius:12px;padding:14px 16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
body[data-theme="dark"] .timeline-node-card { background: rgba(255,255,255,0.06); }
.timeline-node-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.timeline-node-type{font-size:11px;color:var(--ink3);}
.timeline-node-date{font-size:11px;color:var(--ink3);margin-left:auto;}
.timeline-node-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.timeline-node-delete{background:none;border:none;cursor:pointer;font-size:15px;color:var(--ink3);padding:0 2px;line-height:1;opacity:.5;transition:opacity .15s;}
.timeline-node-delete:hover{opacity:1;color:#e05;}
.timeline-node-topics{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;}
.timeline-node-preview{font-size:13px;color:var(--ink2);line-height:1.6;}
.memory-empty{text-align:center;padding:60px 20px;color:var(--ink3);font-size:14px;}

/* ═══════ AI记忆助手 ═══════ */
.memory-ai-card{
  background: var(--card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius:var(--radius);margin-bottom:20px;
  border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;
}
.memory-ai-header{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);gap:10px;}
.memory-ai-title{font-size:15px;font-weight:700;flex:1;}
.memory-ai-subtitle{font-size:12px;color:var(--ink3);}
.ai-chat-messages{
  height:220px;overflow-y:auto;padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
  background:rgba(var(--accent-rgb),0.03);
  scroll-behavior:smooth;
}
.ai-msg{display:flex;gap:8px;max-width:88%;}
.ai-msg-ai{align-self:flex-start;}
.ai-msg-user{align-self:flex-end;flex-direction:row-reverse;}
.ai-msg-avatar{font-size:18px;flex-shrink:0;line-height:1.6;}
.ai-msg-bubble{padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.65;}
.ai-msg-ai .ai-msg-bubble{
  background:rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  border:1px solid var(--border);
  border-top-left-radius:4px;color:var(--ink);
}
body[data-theme="dark"] .ai-msg-ai .ai-msg-bubble {
  background: rgba(255,255,255,0.07);
}
.ai-msg-user .ai-msg-bubble{
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #7c3aed));
  color:#fff;border-top-right-radius:4px;
}
body[data-theme="dark"] .ai-msg-user .ai-msg-bubble {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}
.ai-chat-input-area{
  padding:10px 12px;border-top:1px solid var(--border);
  display:flex;gap:8px;align-items:flex-end;
  background:rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
}
body[data-theme="dark"] .ai-chat-input-area { background: rgba(10,10,20,0.6); }
.ai-chat-input{
  flex:1;padding:9px 12px;border-radius:9px;
  border:1.5px solid var(--border-solid);
  font-size:14px;font-family:inherit;resize:none;
  min-height:40px;max-height:100px;outline:none;
  background: rgba(255,255,255,0.6);
  color: var(--ink);
  transition: var(--transition);line-height:1.5;
}
body[data-theme="dark"] .ai-chat-input {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
.ai-chat-input::placeholder { color: var(--ink3); }
.ai-chat-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.ai-chat-send{
  padding:9px 16px;border-radius:9px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #7c3aed));
  color:#fff;border:none;font-size:14px;font-weight:600;
  cursor:pointer;flex-shrink:0;transition: var(--transition);
  align-self:flex-end;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.3);
}
body[data-theme="dark"] .ai-chat-send {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}
.ai-chat-send:hover{opacity:.88;transform:translateY(-1px);}
.ai-chat-send:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.ai-chat-save-row{padding:8px 14px 14px;display:flex;gap:8px;flex-wrap:wrap;}
.ai-save-btn{
  padding:8px 16px;border-radius:9px;
  background:var(--success-light);color:var(--success);
  border:1px solid rgba(22,163,74,0.25);
  font-size:13px;font-weight:600;cursor:pointer;transition: var(--transition);
}
.ai-save-btn:hover{background:rgba(22,163,74,0.18);}
.ai-clear-btn{
  padding:8px 12px;border-radius:9px;
  background:rgba(var(--accent-rgb),0.05);
  color:var(--ink3);border:1px solid var(--border-solid);
  font-size:13px;cursor:pointer;transition: var(--transition);
}
.ai-clear-btn:hover{color:var(--ink);border-color:var(--ink3);}
.ai-typing{display:flex;gap:4px;align-items:center;padding:4px 0;}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:aiTyping 1.2s infinite;}
.ai-typing span:nth-child(2){animation-delay:.2s;}
.ai-typing span:nth-child(3){animation-delay:.4s;}
@keyframes aiTyping{0%,60%,100%{opacity:.2;transform:translateY(0);}30%{opacity:1;transform:translateY(-4px);}}
.memory-section-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.memory-section-title{font-size:15px;font-weight:700;flex:1;}

/* ─── 暗色模式：输入框选项特殊处理 ─── */
body[data-theme="dark"] select option {
  background: #1a1a2e;
  color: #e2e8f0;
}

/* ─── 全局过渡动画 ─── */
body, .q-card, .auth-card, .user-card, .chat-panel,
.memory-summary-card, .memory-reflect-card, .memory-ai-card,
.timeline-node-card, .chat-page-header, .bottom-bar, #app-nav {
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ─── 匹配权重偏好 ─── */
.wl-weight-bar {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  gap: 2px;
  margin-bottom: 10px;
}
.wl-weight-seg {
  border-radius: 3px;
  transition: width 0.35s ease;
  min-width: 2px;
}
.wl-weight-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.wl-weight-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink2);
}
.wl-weight-legend-item b {
  color: var(--ink);
  font-weight: 600;
}
.wl-weight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wl-weight-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wl-weight-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wl-weight-row-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
}
.wl-weight-row-desc {
  font-size: 11px;
  color: var(--ink3);
  font-weight: 400;
}
.wl-weight-row-ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wl-slider {
  flex: 1;
  height: 4px;
  cursor: pointer;
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-solid);
}
.wl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  border: 2px solid #fff;
}
body[data-theme="dark"] .wl-slider::-webkit-slider-thumb {
  border-color: #1a1a2e;
}
.wl-weight-val {
  width: 28px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   应用导航栏 — 移动端底部 / 电脑端右上角
   ══════════════════════════════════════ */
#app-nav { display: none; }

/* 移动端：底部标签栏 */
@media (max-width: 767px) {
  #app-nav.visible {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 300;
    display: flex;
    flex-direction: row;
    background: rgba(255,255,255,0.88);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--border);
    padding: 6px 0 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  body[data-theme="dark"] #app-nav.visible {
    background: rgba(10,10,20,0.92);
  }
  .nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    padding: 4px 0;
    border: none;
    background: none;
    font-family: inherit;
    color: var(--ink3);
    transition: color 0.2s;
    position: relative;
  }
  .nav-tab.active { color: var(--accent); }
  .nav-tab-icon { font-size: 22px; line-height: 1; }
  .nav-tab-label { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
  .nav-tab .nav-badge {
    position: absolute; top: 2px; left: 50%;
    transform: translateX(4px);
    min-width: 16px; height: 16px;
    background: var(--error); color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 8px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
  }
  body[data-theme="dark"] .nav-tab .nav-badge { border-color: #0a0a14; }
  /* 底部底栏在移动端上移，避免被导航栏遮挡 */
  body.has-app-nav .bottom-bar { bottom: 60px; }
  body.has-app-nav .container { padding-bottom: 160px; }
  body.has-app-nav .chat-fab { bottom: 78px; }
  body.has-app-nav .chat-panel { bottom: 78px; }
  /* 聊天列表页：底部留出导航栏高度，避免最后一个聊天被遮挡 */
  body.has-app-nav .chat-page-list { padding-bottom: max(72px, calc(60px + env(safe-area-inset-bottom))); }
  body.has-app-nav .chat-page-empty { padding-bottom: max(72px, calc(60px + env(safe-area-inset-bottom))); }
}

/* 电脑端：给聊天页顶栏留出导航空间 */
@media (min-width: 768px) {
  body.has-app-nav .chat-page-header { padding-right: 200px; }
}

/* 电脑端：右上角胶囊 */
@media (min-width: 768px) {
  #app-nav.visible {
    position: fixed;
    top: 12px; right: 16px;
    z-index: 300;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    background: var(--card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-solid);
    border-radius: 14px;
    padding: 5px 8px;
    box-shadow: var(--shadow-sm);
  }
  .nav-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 6px 12px;
    border: none;
    background: none;
    font-family: inherit;
    color: var(--ink2);
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    transition: var(--transition);
    position: relative;
    white-space: nowrap;
  }
  .nav-tab.active { background: var(--accent-light); color: var(--accent); }
  .nav-tab:hover:not(.active) { background: rgba(var(--accent-rgb),0.06); }
  .nav-tab-icon { font-size: 15px; }
  .nav-tab-label { font-size: 13px; }
  .nav-tab .nav-badge {
    min-width: 16px; height: 16px;
    background: var(--error); color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 8px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    margin-left: 2px;
  }
}

/* ─── iOS Safari 防止输入框聚焦时自动 zoom ─── */
/* iOS Safari 在 font-size < 16px 的输入框获得焦点时会自动放大页面。
   用 @supports (-webkit-touch-callout: none) 精准定位 iOS Safari，
   把所有输入框字体统一提升到 16px，视觉上几乎无感知。 */
@supports (-webkit-touch-callout: none) {
  input, textarea, select,
  .field input, .field select,
  .text-input,
  .chat-input-bar input,
  .memory-reflect-input,
  .ai-chat-input {
    font-size: 16px !important;
  }
}

/* ─── 新增：开局问题选择器 & 聊天菜单 ─── */
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(20px); opacity: 0; }
}

.chat-more-btn {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.chat-more-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

body[data-theme="dark"] .chat-more-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ══════════ 用户数绿点脉冲 ══════════ */
.user-count-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink2);
}
.user-count-live .count-number {
  font-weight: 700;
  color: var(--ink);
}
.user-count-live .live-dot {
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50% { opacity: .7; box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* ══════════ 滚动通知栏 ══════════ */
.announcement-bar {
  width: 100%;
  background: linear-gradient(90deg, #fffbe6 0%, #fff7cc 100%);
  border-bottom: 1px solid #f0e6b8;
  overflow: hidden;
  height: 32px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
}
body[data-theme="dark"] .announcement-bar {
  background: linear-gradient(90deg, #2a2518 0%, #302a1a 100%);
  border-bottom-color: #4a4030;
}
.announcement-bar .announce-icon {
  flex-shrink: 0;
  padding: 0 10px;
  font-size: 14px;
  color: #d97706;
}
body[data-theme="dark"] .announcement-bar .announce-icon {
  color: #fbbf24;
}
.announcement-bar .announce-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.announcement-bar .announce-track {
  display: inline-block;
  white-space: nowrap;
  animation: announceScroll var(--scroll-duration, 20s) linear infinite;
  font-size: 13px;
  color: #92400e;
  line-height: 32px;
}
body[data-theme="dark"] .announcement-bar .announce-track {
  color: #fcd34d;
}
.announcement-bar .announce-track .announce-item {
  display: inline;
  padding-right: 80px;
}
@keyframes announceScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}