/* ===== Color Themes: Aurora / Milktea / Ocean / Sakura / Midnight ===== */

/* Default: Aurora Purple (极光紫微光版) */
:root,
.theme-aurora {
  --primary: #7B61FF;
  --primary-hover: #6A4FEF;
  --secondary: #EEEAFF;
  --highlight: linear-gradient(135deg, #7B61FF 0%, #9D7BFF 100%);
  --bg-page: #f2edf6;
  --accent: #7B61FF;
  --accent-hover: #9D7BFF;
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(123,97,255,0.10);
  --sidebar-bg: rgba(255, 255, 255, 0.85);
  --user-bubble: rgba(123,97,255,0.10);
  --bubble-user-bg: #e8e0ff;
  --assistant-bubble: rgba(157,123,255,0.08);
  --blob-green: rgba(123,97,255,0.03);
  --blob-blue: rgba(43,210,255,0.05);
  --blob-yellow: rgba(250,139,255,0.04);
  --blob-purple: rgba(123,97,255,0.06);
  --text-primary: #2D1F3C;
  --text-secondary: rgba(45,31,60,0.55);
  --input-border: rgba(123,97,255,0.10);
  --input-bg: rgba(255, 255, 255, 0.55);
  --input-focus-ring: var(--accent-soft);
  --pill-bg: rgba(123,97,255,0.08);
  --pill-border: rgba(123,97,255,0.18);
  --pill-text: #7B61FF;
  --shadow: 0 12px 32px rgba(123,97,255,0.06);
  --card-shadow: 0 8px 24px rgba(123,97,255,0.08), inset 0 1px 0 rgba(255,255,255,0.95);

  --text: var(--text-primary);
  --text-sec: var(--text-secondary);
  --text-dim: color-mix(in oklch, var(--text-primary) 35%, transparent);

  /* Semantic state tokens (状态色，勿在组件里写裸 hex) */
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --on-danger: #ffffff;
  --info: #3b82f6;   /* 信息蓝；暗色主题用 color-mix 提亮（对应原 .chars-blue #2e86c1/#60a5fa） */

  --bg: var(--bg-page);
  --card-bg: var(--glass-bg);
  --card-border: var(--glass-border);
  --avatar-radius: 12px;
  --card-radius: 24px;
  --btn-radius: 12px;
  --card-blur: blur(28px) saturate(200%);

  --input-bg: var(--glass-bg);
  --input-radius: 8px;

  --sidebar-w: 280px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --chat-font-size: 1rem;

  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sidebar: cubic-bezier(0.22, 0.68, 0, 1.02);

  --scrollbar-thumb: rgba(123, 97, 255, 0.2);
  --scrollbar-thumb-hover: rgba(123, 97, 255, 0.4);
  --accent-rgb: 123, 97, 255;
  --on-accent: #fff;

  --bubble-l: color-mix(in srgb, var(--card-bg) 94%, #fff);
  --bubble-l-clr: var(--text);
  --bubble-r: color-mix(in srgb, var(--accent) 28%, var(--card-bg));
  --bubble-r-clr: var(--text);
}

/* 显示字体（标题/角色名）：默认系统黑体；html.serif-display 时切系统宋体 */
:root { --font-display: var(--font); }
html.serif-display { --font-display: "Songti SC", "Noto Serif SC", "STSong", SimSun, serif; }
html.serif-display .panel-title,
html.serif-display .home-hero-title,
html.serif-display .home-section-title,
html.serif-display .home-featured-name,
html.serif-display .market-card-v2-name,
html.serif-display .home-char-card-text .home-char-name,
html.serif-display .home-recent-name,
html.serif-display .card-name,
html.serif-display .discover-empty-title,
html.serif-display .home-onboard-title-lg,
html.serif-display .mkt-head-title,
html.serif-display .market-detail-name,
html.serif-display .mine-profile-name,
html.serif-display .mine-stat-card b,
html.serif-display .profile-section-title {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

/* 所有头像容器统一形状入口，新增头像位请复用此类，勿单独写 border-radius */
/* 例外：.group-avatar-stack > * 是子选择器无法挂 className，直接使用 var(--avatar-radius) */
.avatar-shape { border-radius: var(--avatar-radius); overflow: hidden; }

/* Milktea (暖杏版) */
.theme-milktea {
  --primary: #d4ead8;
  --primary-hover: #c2dfc7;
  --secondary: #e3f0e5;
  --highlight: #fdf3e6;
  --bg-page: #fafbf9;
  --accent: #6fad74;
  --accent-hover: #8bbf8f;
  --warm-apricot: #f2dac4;
  --soft-peach: #fae3d2;
  --text-primary: #3b3b3b;
  --text-secondary: rgba(59,59,59,0.5);
  --glass-bg: rgba(255,255,255,0.65);
  --glass-border: rgba(255,255,255,0.85);
  --sidebar-bg: rgba(250,251,249,0.82);
  --user-bubble: rgba(212,234,216,0.28);
  --bubble-user-bg: #c8e6c9;
  --assistant-bubble: rgba(242,218,196,0.25);
  --blob-green: rgba(242,218,196,0.12);
  --blob-blue: rgba(250,227,210,0.10);
  --blob-yellow: rgba(253,243,230,0.15);
  --blob-purple: rgba(212,234,216,0.15);
  --input-border: rgba(0,0,0,0.05);
  --pill-bg: rgba(194,213,196,0.15);
  --pill-border: rgba(194,213,196,0.28);
  --pill-text: #6fad74;

  --text: var(--text-primary);
  --text-sec: var(--text-secondary);
  --text-dim: color-mix(in oklch, var(--text-primary) 35%, transparent);

  --bg: var(--bg-page);
  --card-bg: var(--glass-bg);
  --card-border: var(--glass-border);
  --card-radius: 20px;
  --btn-radius: 10px;
  --card-shadow: 0 8px 32px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  --card-blur: blur(28px) saturate(200%);

  --input-bg: var(--glass-bg);
  --input-radius: 14px;

  --scrollbar-thumb: rgba(111, 173, 116, 0.2);
  --scrollbar-thumb-hover: rgba(111, 173, 116, 0.4);
  --accent-rgb: 111, 173, 116;
  --on-accent: #1E3B26;

  --bubble-l: color-mix(in srgb, var(--card-bg) 94%, #fff);
  --bubble-l-clr: var(--text);
  --bubble-r: color-mix(in srgb, var(--accent) 28%, var(--card-bg));
  --bubble-r-clr: var(--text);
}

/* Blue Ocean → Seascape Glass (海景玻璃) — real-photo background + frosted glass */
.theme-ocean {
  --bg-page: #f2fafb;
  --glass-bg: rgba(230, 245, 247, 0.35);
  --glass-border: rgba(255, 255, 255, 0.45);
  --sidebar-bg: rgba(230, 245, 247, 0.30);
  --text-primary: #052F3A;
  --text-secondary: rgba(5,47,58,0.55);
  --accent: #1D6F7F;
  --accent-hover: #0D4C56;
  --primary: #1D6F7F;
  --primary-hover: #0D4C56;
  --highlight: #6ACDC6;
  --secondary: rgba(106, 205, 198, 0.15);
  --user-bubble: rgba(29, 111, 127, 0.15);
  --bubble-user-bg: #c5e3e2;
  --assistant-bubble: rgba(106, 205, 198, 0.2);
  --mint: #6ACDC6;
  --seafoam: #8FD8D0;
  --teal-mist: #A8E0D8;
  --blob-green: transparent;
  --blob-blue: transparent;
  --blob-yellow: transparent;
  --blob-purple: transparent;
  --input-border: rgba(255, 255, 255, 0.3);
  --pill-bg: rgba(106, 205, 198, 0.12);
  --pill-border: rgba(106, 205, 198, 0.25);
  --pill-text: #1D6F7F;

  --text: var(--text-primary);
  --text-sec: var(--text-secondary);
  --text-dim: color-mix(in oklch, var(--text-primary) 35%, transparent);

  --bg: transparent;
  --card-bg: var(--glass-bg);
  --card-border: var(--glass-border);
  --card-radius: 20px;
  --card-shadow: 0 8px 32px rgba(29,111,127,0.07), inset 0 0 0 1px rgba(255,255,255,0.5);
  --card-blur: blur(16px) saturate(160%);

  --input-bg: rgba(255, 255, 255, 0.42);
  --input-radius: 14px;

  --scrollbar-thumb: rgba(29, 111, 127, 0.25);
  --scrollbar-thumb-hover: rgba(29, 111, 127, 0.45);
  --accent-rgb: 29, 111, 127;
  --btn-radius: 10px;
  --on-accent: #fff;

  --bubble-l: color-mix(in srgb, var(--card-bg) 94%, #fff);
  --bubble-l-clr: var(--text);
  --bubble-r: color-mix(in srgb, var(--accent) 28%, var(--card-bg));
  --bubble-r-clr: var(--text);
}

/* Sakura Lavender (淡雅版) */
.theme-sakura {
  --primary: #f2d5d5;
  --primary-hover: #e8c5c5;
  --secondary: #DCE8DA;
  --accent: #7FA98C;
  --accent-hover: #93B89E;
  --highlight: #faf3e6;
  --bg-page: #FBF8F5;
  --text-primary: #4a3f46;
  --text-secondary: rgba(74,63,70,0.5);
  --glass-bg: rgba(255,255,255,0.6);
  --glass-border: rgba(255,255,255,0.8);
  --sidebar-bg: rgba(253,250,251,0.78);
  --user-bubble: rgba(242,213,213,0.28);
  --bubble-user-bg: #F6DAE2;
  --assistant-bubble: rgba(228,239,226,0.55);
  --blob-green: rgba(242,213,213,0.12);
  --blob-blue: rgba(242,213,213,0.12);
  --blob-yellow: rgba(226,213,235,0.10);
  --blob-purple: rgba(226,213,235,0.10);
  --input-border: rgba(0,0,0,0.05);
  --pill-bg: rgba(127,169,140,0.12);
  --pill-border: rgba(127,169,140,0.25);
  --pill-text: #4E7A5C;

  --text: var(--text-primary);
  --text-sec: var(--text-secondary);
  --text-dim: color-mix(in oklch, var(--text-primary) 35%, transparent);

  --bg: var(--bg-page);
  --card-bg: var(--glass-bg);
  --card-border: var(--glass-border);
  --card-radius: 20px;
  --card-shadow: 0 8px 32px rgba(74,63,70,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  --card-blur: blur(28px) saturate(200%);

  --input-bg: var(--glass-bg);
  --input-radius: 14px;

  --scrollbar-thumb: rgba(127,169,140,0.2);
  --scrollbar-thumb-hover: rgba(127,169,140,0.4);
  --accent-rgb: 127, 169, 140;
  --btn-radius: 10px;
  --on-accent: #1E2E26;

  --bubble-l: color-mix(in srgb, var(--card-bg) 94%, #fff);
  --bubble-l-clr: var(--text);
  --bubble-r: color-mix(in srgb, var(--accent) 28%, var(--card-bg));
  --bubble-r-clr: var(--text);
}

/* Midnight Violet (深色蓝紫版) */
/* ════════════════════════════════════════════
   🌙 MIDNIGHT — Deep Purple-Gray · Rose Ash
   ════════════════════════════════════════════ */
.theme-midnight {
  /* 底色：深紫灰，替代原 #1a1b22 死黑 */
  --bg-page: #16131a;

  /* 主色系：蓝紫灰 → 玫瑰灰 */
  --primary: #b898a8;
  --primary-hover: #c8a8b8;
  --secondary: #9a8a98;
  --highlight: #d4b0c0;
  --bg-gradient: linear-gradient(135deg, #16131a 0%, #1e1820 100%);
  --accent: #c4a0b0;
  --accent-hover: #d4b0c0;
  --accent-rgb: 196, 160, 176;
  --on-accent: #2B1F26;

  --bubble-l: color-mix(in srgb, var(--card-bg) 86%, var(--accent));
  --bubble-l-clr: var(--text);
  --bubble-r: var(--accent);
  --bubble-r-clr: var(--on-accent);

  /* 文字：银粉白 */
  --text-primary: #ece6ea;
  --text-secondary: rgba(236, 230, 234, 0.65);

  /* 卡片层：比底色亮一档，同色系 */
  --card-bg: rgba(38, 32, 42, 0.85);
  --glass-bg: rgba(30, 24, 32, 0.90);
  --glass-border: rgba(200, 170, 185, 0.12);
  --sidebar-bg: rgba(22, 19, 26, 0.95);
  --modal-bg: rgba(34, 28, 38, 0.95);
  --input-bg: rgba(44, 36, 48, 0.80);
  --input-border: rgba(200, 170, 185, 0.15);

  /* 气泡 */
  --user-bubble: rgba(196, 160, 176, 0.18);
  --bubble-user-bg: #4a4060;
  --assistant-bubble: rgba(176, 168, 180, 0.12);

  /* pill/tag */
  --pill-bg: rgba(196, 160, 176, 0.12);
  --pill-border: rgba(196, 160, 176, 0.22);
  --pill-text: #c4a0b0;

  /* blob */
  --blob-green: rgba(196, 160, 176, 0.06);
  --blob-blue: rgba(176, 168, 180, 0.08);
  --blob-yellow: rgba(196, 160, 176, 0.05);
  --blob-purple: rgba(200, 170, 185, 0.07);

  /* 阴影 */
  --card-shadow: 0 8px 32px rgba(12, 8, 18, 0.22), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow: 0 12px 32px rgba(12, 8, 18, 0.16);

  /* 滚动条 */
  --scrollbar-thumb: rgba(196, 160, 176, 0.2);
  --scrollbar-thumb-hover: rgba(196, 160, 176, 0.4);

  /* 功能变量 */
  --glow-soft: 0 0 20px rgba(196, 160, 176, 0.15);

  --text: var(--text-primary);
  --text-sec: var(--text-secondary);
  --text-dim: color-mix(in oklch, var(--text-primary) 35%, transparent);

  --bg: var(--bg-page);
  --card-border: var(--glass-border);
  --card-radius: 20px;
  --card-blur: blur(28px) saturate(200%);

  --input-radius: 14px;
  --btn-radius: 10px;
}

/* ===== Galaxy — 极夜蓝黑 × 雾极光青 ===== */
.theme-galaxy {
  --bg-page: #0A0F1C;
  --bg-gradient: linear-gradient(135deg, #0A0F1C 0%, #101A30 100%);
  --primary: #5A7FB5;
  --primary-hover: #6E92C6;
  --secondary: #3A4E73;
  --highlight: #A3E0CF;
  --accent: #8FD4C0;
  --accent-hover: #A3E0CF;
  --accent-rgb: 143, 212, 192;
  --on-accent: #03140F;

  --bubble-l: color-mix(in srgb, var(--card-bg) 86%, var(--accent));
  --bubble-l-clr: var(--text);
  --bubble-r: var(--accent);
  --bubble-r-clr: var(--on-accent);

  --text-primary: #C5CEDF;
  --text-secondary: rgba(197, 206, 223, 0.55);

  --card-bg: rgba(16, 20, 32, 0.85);
  --glass-bg: rgba(12, 16, 28, 0.90);
  --glass-border: rgba(143, 212, 192, 0.10);
  --sidebar-bg: rgba(10, 15, 28, 0.95);
  --modal-bg: rgba(14, 18, 34, 0.95);
  --input-bg: rgba(20, 26, 44, 0.80);
  --input-border: rgba(143, 212, 192, 0.12);

  --user-bubble: rgba(143, 212, 192, 0.15);
  --bubble-user-bg: #1A2740;
  --assistant-bubble: rgba(17, 26, 44, 0.85);

  --pill-bg: rgba(143, 212, 192, 0.10);
  --pill-border: rgba(143, 212, 192, 0.20);
  --pill-text: #8FD4C0;

  --blob-green: rgba(143, 212, 192, 0.05);
  --blob-blue: rgba(90, 127, 181, 0.06);
  --blob-yellow: rgba(143, 212, 192, 0.04);
  --blob-purple: rgba(90, 127, 181, 0.05);

  --card-shadow: 0 8px 32px rgba(5, 9, 20, 0.26), inset 0 1px 0 rgba(255,255,255,0.03);
  --shadow: 0 12px 32px rgba(5, 9, 20, 0.18);

  --scrollbar-thumb: rgba(143, 212, 192, 0.2);
  --scrollbar-thumb-hover: rgba(143, 212, 192, 0.4);

  --glow-soft: 0 0 20px rgba(143, 212, 192, 0.12);

  --text: var(--text-primary);
  --text-sec: var(--text-secondary);
  --text-dim: color-mix(in oklch, var(--text-primary) 35%, transparent);

  --bg: var(--bg-page);
  --card-border: var(--glass-border);
  --card-radius: 20px;
  --card-blur: blur(28px) saturate(200%);

  --input-radius: 14px;
  --btn-radius: 10px;
}

html.theme-galaxy::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    /* aurora veil */
    radial-gradient(ellipse 90% 45% at 50% -8%, rgba(143,212,192,0.05) 0%, transparent 70%),
    /* milky way fog */
    linear-gradient(115deg, transparent 38%, rgba(197,206,223,0.025) 50%, transparent 62%),
    /* stars */
    radial-gradient(1px 1px at 15% 12%, rgba(197,206,223,0.35), transparent),
    radial-gradient(1.5px 1.5px at 72% 8%, rgba(197,206,223,0.40), transparent),
    radial-gradient(1px 1px at 88% 25%, rgba(197,206,223,0.25), transparent),
    radial-gradient(1px 1px at 35% 18%, rgba(197,206,223,0.30), transparent),
    radial-gradient(1.5px 1.5px at 55% 30%, rgba(197,206,223,0.25), transparent),
    radial-gradient(1px 1px at 5% 35%, rgba(197,206,223,0.20), transparent);
  background-repeat: no-repeat;
  pointer-events: none;
}

/* ── Dark adjustments shim（.theme-midnight/.theme-galaxy 成对覆盖）──
 * 旧 [data-theme="dark"] 适配层残留：组件硬编码亮色 → 暗色主题靠覆盖块拉回。
 * 新组件请直接用语义 token（--surface/--text-primary/--border/--success…）。
 * 本区只减不增，迁完一条删一条。 */
/* Midnight — 背景星云渐变 */
.theme-midnight .bg-gradient-pastel,
.theme-galaxy .bg-gradient-pastel {
  opacity: 1;
  background:
    radial-gradient(circle at 50% -20%, rgba(var(--accent-rgb), 0.08), transparent 70%),
    var(--bg-gradient);
}

/* Midnight — 噪点纹理叠加 */
html.theme-midnight::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
}

/* Midnight — 侧边栏选中态光晕 */
.theme-midnight .sidebar-item.active,
.theme-galaxy .sidebar-item.active {
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3),
              var(--glow-soft);
  border-color: rgba(var(--accent-rgb), 0.25);
}

/* Midnight — 卡片 hover 浮升（不缩按钮） */
.theme-midnight .card,
.theme-galaxy .card,
.theme-midnight .market-card,
.theme-galaxy .market-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.theme-midnight .card:hover,
.theme-galaxy .card:hover,
.theme-midnight .market-card:hover,
.theme-galaxy .market-card:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3),
              0 0 0 1px rgba(var(--accent-rgb), 0.15);
}

/* Midnight/Galaxy — market-card-v2 tinted shadow (content card, no glow) */
.theme-midnight .market-card-v2,
.theme-galaxy .market-card-v2 {
  box-shadow: 0 4px 16px rgba(12, 8, 18, 0.22);
}

.theme-midnight .market-card-v2:hover,
.theme-galaxy .market-card-v2:hover {
  box-shadow: 0 8px 24px rgba(12, 8, 18, 0.28);
}

/* Midnight — button hover 只给 shadow 不给 scale */
.theme-midnight .btn-primary:hover,
.theme-galaxy .btn-primary:hover,
.theme-midnight .btn-secondary:hover,
.theme-galaxy .btn-secondary:hover,
.theme-midnight .btn-ghost:hover,
.theme-galaxy .btn-ghost:hover {
  box-shadow: 0 0 15px rgba(196, 160, 176, 0.12);
}

/* Midnight — theme popup */
.theme-midnight .theme-popup,
.theme-galaxy .theme-popup {
  background: var(--modal-bg);
  border-color: rgba(var(--accent-rgb), 0.15);
  box-shadow: 0 8px 32px rgba(12, 8, 18, 0.35), 0 0 20px rgba(var(--accent-rgb), 0.08);
}
.theme-midnight .theme-popup-item,
.theme-galaxy .theme-popup-item { color: var(--text-primary); }
.theme-midnight .theme-popup-item:hover,
.theme-galaxy .theme-popup-item:hover { background: rgba(var(--accent-rgb), 0.1); color: var(--accent-hover); }
.theme-midnight .theme-popup-item.active,
.theme-galaxy .theme-popup-item.active { background: rgba(var(--accent-rgb), 0.15); color: var(--accent-hover); font-weight: 600; }
.theme-midnight .theme-popup-check,
.theme-galaxy .theme-popup-check { color: var(--accent-hover); }

/* Midnight — headings */
.theme-midnight h1,
.theme-galaxy h1,
.theme-midnight h2,
.theme-galaxy h2,
.theme-midnight .panel-title,
.theme-galaxy .panel-title,
.theme-midnight .title,
.theme-galaxy .title {
  color: var(--text-primary);
}

/* Midnight — modal / card overrides */
.theme-midnight .modal-card,
.theme-galaxy .modal-card,
.theme-midnight .edit-card-modal,
.theme-galaxy .edit-card-modal,
.theme-midnight .archive-list-modal,
.theme-galaxy .archive-list-modal,
.theme-midnight .role-setup-card,
.theme-galaxy .role-setup-card {
  background: var(--modal-bg);
  color: var(--text-primary);
}

.theme-midnight .archive-slot-item,
.theme-galaxy .archive-slot-item {
  background: rgba(255, 255, 255, 0.06);
}

.theme-midnight .archive-slot-item:hover,
.theme-galaxy .archive-slot-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.theme-midnight .archive-new-btn,
.theme-galaxy .archive-new-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.theme-midnight .archive-new-btn:hover,
.theme-galaxy .archive-new-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.theme-midnight .modal-input,
.theme-galaxy .modal-input,
.theme-midnight .modal-textarea,
.theme-galaxy .modal-textarea,
.theme-midnight .glass-input,
.theme-galaxy .glass-input {
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
}

.theme-midnight .modal-label,
.theme-galaxy .modal-label,
.theme-midnight .modal-title,
.theme-galaxy .modal-title,
.theme-midnight .role-setup-hint,
.theme-galaxy .role-setup-hint,
.theme-midnight .role-confirm-text,
.theme-galaxy .role-confirm-text {
  color: var(--text-primary);
}

.theme-midnight .user-role-preset-btn,
.theme-galaxy .user-role-preset-btn {
  color: var(--text-primary);
  border-color: var(--glass-border);
}

/* Midnight — ensure text contrast on dark backgrounds */
.theme-midnight .settings-label,
.theme-galaxy .settings-label,
.theme-midnight .settings-hint,
.theme-galaxy .settings-hint,
.theme-midnight .panel-desc,
.theme-galaxy .panel-desc,
.theme-midnight .panel-title,
.theme-galaxy .panel-title {
  color: var(--text-primary);
}

.theme-midnight .settings-section-title,
.theme-galaxy .settings-section-title {
  color: var(--highlight);
}

.theme-midnight .settings-input,
.theme-galaxy .settings-input,
.theme-midnight .settings-input::placeholder,
.theme-galaxy .settings-input::placeholder {
  color: var(--text-primary);
}

.theme-midnight .settings-input::placeholder,
.theme-galaxy .settings-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.theme-midnight .card-avatar-btn,
.theme-galaxy .card-avatar-btn {
  background: var(--input-bg);
  border-color: var(--glass-border);
}

/* Error / success / warning readability */
.theme-midnight .error-box,
.theme-galaxy .error-box,
.theme-midnight .error-message,
.theme-galaxy .error-message {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.12);
  border-color: rgba(255, 107, 107, 0.25);
}

.theme-midnight .success-message,
.theme-galaxy .success-message,
.theme-midnight .voice-msg-success,
.theme-galaxy .voice-msg-success {
  color: #6ee7b7;
}

.theme-midnight .voice-msg-error,
.theme-galaxy .voice-msg-error {
  color: #ff6b6b;
}

/* Affinity panel */
.theme-midnight .affinity-panel,
.theme-galaxy .affinity-panel,
.theme-midnight .affinity-card,
.theme-galaxy .affinity-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

.theme-midnight .affinity-stat-label,
.theme-galaxy .affinity-stat-label,
.theme-midnight .affinity-mood,
.theme-galaxy .affinity-mood,
.theme-midnight .affinity-reason,
.theme-galaxy .affinity-reason {
  color: var(--text-secondary);
}

/* Char card detail */
.theme-midnight .card-detail-section,
.theme-galaxy .card-detail-section,
.theme-midnight .card-detail-field,
.theme-galaxy .card-detail-field {
  color: var(--text-primary);
}

.theme-midnight .card-detail-label,
.theme-galaxy .card-detail-label {
  color: var(--text-secondary);
}

.theme-midnight .chars-green,
.theme-galaxy .chars-green { color: color-mix(in srgb, var(--success) 82%, white); font-weight: 600; }
.theme-midnight .chars-blue ,
.theme-galaxy .chars-blue  { color: color-mix(in srgb, var(--info) 82%, white); font-weight: 600; }
.theme-midnight .chars-orange,
.theme-galaxy .chars-orange { color: color-mix(in srgb, var(--warning) 82%, white); font-weight: 600; }
.theme-midnight .chars-red  ,
.theme-galaxy .chars-red   { color: color-mix(in srgb, var(--danger) 82%, white); font-weight: 600; }

/* Usage stats, action rows */
.theme-midnight .usage-action-name,
.theme-galaxy .usage-action-name {
  color: var(--text-primary);
}

.theme-midnight .usage-action-count,
.theme-galaxy .usage-action-count,
.theme-midnight .usage-action-tokens,
.theme-galaxy .usage-action-tokens {
  color: var(--text-secondary);
}

/* Voice guide card */
.theme-midnight .voice-guide-card,
.theme-galaxy .voice-guide-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

.theme-midnight .voice-guide-desc,
.theme-galaxy .voice-guide-desc {
  color: var(--text-secondary);
}

.theme-midnight .voice-configured-card,
.theme-galaxy .voice-configured-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

/* Settings about section */
.theme-midnight .settings-about-line,
.theme-galaxy .settings-about-line,
.theme-midnight .settings-link,
.theme-galaxy .settings-link {
  color: var(--text-secondary);
}

.theme-midnight .settings-link:hover,
.theme-galaxy .settings-link:hover {
  color: var(--highlight);
}

/* Distill task list */
.theme-midnight .distill-task-item,
.theme-galaxy .distill-task-item {
  color: var(--text-primary);
}
.theme-midnight .distill-task-item.error,
.theme-galaxy .distill-task-item.error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}
.theme-midnight .distill-task-item.error .distill-task-text,
.theme-galaxy .distill-task-item.error .distill-task-text {
  color: #fca5a5;
}
.theme-midnight .distill-task-item.done,
.theme-galaxy .distill-task-item.done {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.4);
  color: #86efac;
}

/* API config alert — amber on dark bg */
.theme-midnight .api-config-alert,
.theme-galaxy .api-config-alert {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.25);
}

/* Dropdown / select */
.theme-midnight select.settings-input,
.theme-galaxy select.settings-input {
  background: var(--input-bg);
  color: var(--text-primary);
}

.theme-midnight select.settings-input option,
.theme-galaxy select.settings-input option {
  background: #16131a;
  color: var(--text-primary);
}

/* Midnight — page background applied to panels */
.theme-midnight .panel,
.theme-galaxy .panel {
  background: var(--bg-gradient);
  box-shadow: 0 8px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(var(--accent-rgb), 0.04);
}

/* Midnight — chat bubbles */
.theme-midnight .chat-bubble-char,
.theme-galaxy .chat-bubble-char {
  background: rgba(56,56,66,0.95);
  color: #e8e8ec;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.theme-midnight .chat-bubble-char::after,
.theme-galaxy .chat-bubble-char::after {
  border-right-color: rgba(56,56,66,0.95);
}
.theme-midnight .chat-bubble-user,
.theme-galaxy .chat-bubble-user {
  color: #e8e8ec;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.theme-midnight .chat-bubble-user::after,
.theme-galaxy .chat-bubble-user::after {
  border-left-color: var(--bubble-user-bg);
}

/* Midnight — market cards */
.theme-midnight .market-card-v2,
.theme-galaxy .market-card-v2 {
  background: var(--card-bg);
  border-color: rgba(var(--accent-rgb), 0.08);
}
.theme-midnight .market-card-v2:hover,
.theme-galaxy .market-card-v2:hover {
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.12);
}

/* Scrollbar */
.theme-midnight ::-webkit-scrollbar-thumb,
.theme-galaxy ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

.theme-midnight ::-webkit-scrollbar-thumb:hover,
.theme-galaxy ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ==========================================================================
   Design System Scale（全局视觉底座 · 纯新增，不覆盖现有主题变量）
   字号 / 间距 / 圆角 / 动效 / 层级 / 层次色 —— 供各页面落地复用
   ========================================================================== */
:root {
  /* --- 字号 scale（rem，跟随根字号） --- */
  --text-caption: 0.75rem;    /* 12 · 时间戳/角标 */
  --text-body-s: 0.8125rem;   /* 13 · 次级说明 */
  --text-body: 0.9375rem;     /* 15 · 聊天正文/列表 */
  --text-body-l: 1.0625rem;   /* 17 · 稍大正文 */
  --text-title: 1.25rem;      /* 20 · 卡片/小节标题 */
  --text-h3: 1.375rem;        /* 22 */
  --text-h2: 1.625rem;        /* 26 · 页面标题 */
  --text-h1: 2rem;            /* 32 · 屏幕大标题 */
  --text-display: 2.5rem;     /* 40 · 品牌/主角时刻 */
  --lh-display: 1.15;
  --lh-head: 1.25;
  --lh-body: 1.6;
  --track-display: -0.02em;
  --track-head: -0.015em;

  /* --- 间距 scale（4px 基准） --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- 圆角锁（--avatar-radius / --btn-radius 两个既有入口保持不动） --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 999px;

  /* --- 层级 --- */
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* --- 动效 --- */
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 340ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* --- PWA safe-area insets（唯一来源，从 milktea 块迁来统一全主题） --- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* --- 层次色派生（从现有主题色派生，随主题自动适配亮/暗） --- */
  --surface: var(--card-bg);
  --fg: var(--text-primary);
  --muted: var(--text-secondary);
  --surface-2: color-mix(in srgb, var(--bg-page) 92%, var(--text-primary));
  --surface-3: color-mix(in srgb, var(--bg-page) 86%, var(--text-primary));
  --fg-muted: var(--text-sec);
  --fg-subtle: color-mix(in srgb, var(--text-primary) 45%, transparent);
  --border: var(--glass-border);
  --border-strong: color-mix(in srgb, var(--text-primary) 14%, transparent);
  --bg-hover: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --glow: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--card-bg));
  --accent-strong: color-mix(in srgb, var(--accent) 86%, #000);
  --ring: color-mix(in srgb, var(--accent) 30%, transparent);
  --scrim: rgba(0, 0, 0, 0.42);
  --bg-deep: color-mix(in srgb, var(--bg-page) 93%, var(--text-primary));
  --shadow-color: color-mix(in srgb, var(--text-primary) 12%, transparent);
  --shadow-xs: 0 1px 2px var(--shadow-color);
  --shadow-sm: 0 1px 2px var(--shadow-color), 0 2px 6px var(--shadow-color);
  --shadow-md: 0 4px 12px var(--shadow-color), 0 2px 4px var(--shadow-color);
  --shadow-lg: 0 12px 32px var(--shadow-color), 0 4px 10px var(--shadow-color);
  --shadow-float: 0 24px 64px var(--shadow-color), 0 8px 20px var(--shadow-color);
}

/* ===== Reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  position: relative;
}

/* ── Global focus ring (theme-aware via --accent) ── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Ambient Light Spots ===== */
/* ── Pastel gradient background layer (aurora only) ── */
.bg-gradient-pastel {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}
.theme-aurora .bg-gradient-pastel {
  opacity: 1;
  inset: -10%;
  background: linear-gradient(
    135deg,
    #f0e8f6 0%,
    #e8edf8 30%,
    #f8e8f0 60%,
    #ede8f8 100%
  );
  animation: pastelShift 120s ease-in-out infinite alternate;
}

/* filter 动画会整屏重绘；改用 transform 漂移，inset:-10% 留出余量防露边 */
@keyframes pastelShift {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  50%  { transform: translate3d(1%, 1.5%, 0) scale(1.05); }
  100% { transform: translate3d(1.5%, -0.5%, 0) scale(1.02); }
}

/* 第二层 mint/rose 渐变 opacity 呼吸，与底层 drift 叠加出极光流动感；只动 opacity 走合成器 */
.theme-aurora .bg-gradient-pastel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    #e6f4f0 0%,
    #ece6fa 38%,
    #fbe4ee 72%,
    #e8f6ef 100%
  );
  opacity: 0;
  animation: auroraBreathe 26s ease-in-out infinite;
}
@keyframes auroraBreathe {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.45; }
}

/* ── Default blobs ── */
.bg-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.45;
  z-index: -1;
  pointer-events: none;
  animation: driftBlob 20s infinite alternate ease-in-out;
}
.bg-blob.green  { width: 600px; height: 600px; background: var(--blob-green);  top: -150px; right: -120px; }
.bg-blob.blue   { width: 500px; height: 500px; background: var(--blob-blue);     bottom: -120px; left: -100px; animation-delay: -5s; }
.bg-blob.yellow { width: 450px; height: 450px; background: var(--blob-yellow);   top: 40%; left: 30%; animation-delay: -10s; }
.bg-blob.purple { width: 400px; height: 400px; background: var(--blob-purple); bottom: 20%; right: 20%; animation-delay: -15s; }

/* ── Aurora: pastel blobs ── */
.theme-aurora .bg-blob {
  opacity: 0.18;
  z-index: -1;
}
.theme-aurora .bg-blob.green,
.theme-aurora .bg-blob.blue,
.theme-aurora .bg-blob.yellow,
.theme-aurora .bg-blob.purple {
  background: none;
  width: auto; height: auto; top: auto; right: auto; bottom: auto; left: auto;
}
.theme-aurora .bg-blob:nth-child(2) { width: 500px; height: 500px; background: #c8d4f0; top: -10%; left: -5%; }
.theme-aurora .bg-blob:nth-child(3) { width: 400px; height: 400px; background: #e0c8e8; bottom: -8%; right: -3%; animation-delay: -5s; }
.theme-aurora .bg-blob:nth-child(4) { width: 350px; height: 350px; background: #f0d8e0; top: 50%; left: 65%; animation-delay: -10s; }
.theme-aurora .bg-blob:nth-child(5) { display: none; }

/* ── Aurora: stat card hover ── */
.theme-aurora .mine-stat-card:hover,
.theme-aurora .profile-stat-item:hover {
  border-color: rgba(123, 97, 255, 0.25);
  box-shadow: 0 0 12px rgba(123, 97, 255, 0.08);
}

/* ── Aurora: sidebar group dividers ── */
.theme-aurora .sidebar-item:nth-child(5) {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(123, 97, 255, 0.08);
}
.theme-aurora .sidebar-item:nth-child(8) {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(123, 97, 255, 0.08);
}

/* ── Aurora: noise texture ── */
html.theme-aurora::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

/* ── Aurora: onboard card ── */
.theme-aurora .mine-onboard-card {
  border: 1px dashed rgba(123, 97, 255, 0.25);
  background: rgba(255, 255, 255, 0.6);
}
.theme-aurora .mine-onboard-step-num {
  background: linear-gradient(135deg, rgba(123, 97, 255, 0.15), rgba(250, 139, 255, 0.1));
  color: #7B61FF;
}

/* ── Aurora: button hover glow ── */
.theme-aurora .btn-primary:hover {
  box-shadow: 0 0 20px rgba(123, 97, 255, 0.3), 0 4px 12px rgba(123, 97, 255, 0.15);
}

/* ── Aurora: tab active underline ── */
.theme-aurora .mine-tab {
  position: relative;
}
.theme-aurora .mine-tab.active {
  border-bottom-color: transparent;
}
.theme-aurora .mine-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7B61FF, #FA8BFF);
  border-radius: 1px;
}

/* ── Ocean theme: full-screen seascape background ── */
.ocean-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.theme-ocean .ocean-bg {
  opacity: 1;
  background: url('/seascape-bg.webp') center / cover no-repeat;
  filter: blur(4px) brightness(0.85);
  transform: scale(1.03);
}
.theme-ocean .ocean-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11,43,54,0.10) 0%, transparent 30%, transparent 70%, rgba(11,43,54,0.08) 100%);
}

/* ── Champagne gold particles ── */
.ocean-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle at 30% 30%, #fff8e0, #d4a853);
  box-shadow: 0 0 6px rgba(212, 168, 83, 0.4);
  animation: particle-float 8s ease-in-out infinite;
}
.theme-ocean .ocean-particle {
  opacity: 0.7;
  animation: particle-float 8s ease-in-out infinite, particle-shimmer 3s ease-in-out infinite;
}
.ocean-particle.p1 { width: 3px; height: 3px; bottom: 12%; right: 8%;  animation-delay: 0s; }
.ocean-particle.p2 { width: 5px; height: 5px; bottom: 20%; right: 15%; animation-delay: -1.6s; animation-duration: 9.6s, 3.4s; }
.ocean-particle.p3 { width: 3px; height: 3px; bottom: 8%;  right: 22%; animation-delay: -3.2s; box-shadow: 0 0 8px rgba(212,168,83,0.3); animation-duration: 7.4s, 2.8s; }
.ocean-particle.p4 { width: 4px; height: 4px; bottom: 15%; right: 4%;  animation-delay: -4.8s; }
.ocean-particle.p5 { width: 2px; height: 2px; bottom: 25%; right: 12%; animation-delay: -6.4s; box-shadow: 0 0 4px rgba(212,168,83,0.5); animation-duration: 10.2s, 3.1s; }
.ocean-particle.p6 { width: 4px; height: 4px; bottom: 10%; right: 28%; animation-delay: -2.4s; animation-duration: 8.6s, 2.6s; }
.ocean-particle.p7 { width: 3px; height: 3px; bottom: 30%; right: 6%;  animation-delay: -0.8s; box-shadow: 0 0 6px rgba(212,168,83,0.35); animation-duration: 7.8s, 2.9s; }
.ocean-particle.p8 { width: 5px; height: 5px; bottom: 5%;  right: 18%; animation-delay: -4.2s; box-shadow: 0 0 9px rgba(212,168,83,0.4); animation-duration: 11s, 3.6s; }

@keyframes particle-float {
  0%, 100% { transform: translateY(0) scale(1); }
  25%      { transform: translateY(-18px) scale(1.2); }
  50%      { transform: translateY(-8px) scale(0.9); }
  75%      { transform: translateY(-24px) scale(1.1); }
}
/* 漂浮与闪烁解耦：float 只动 transform，shimmer 只动 opacity，两条合成器动画并行 */
@keyframes particle-shimmer {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
/* Ocean blobs = hidden, letting the seascape show through */
.theme-ocean .bg-blob { display: none; }
.theme-ocean .bg-gradient-pastel { opacity: 0; }

/* Ocean sidebar: frosted glass with dark teal text */
.theme-ocean .sidebar {
  background: rgba(230, 245, 247, 0.30);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-right: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.35);
}
.theme-ocean .sidebar-item {
  color: rgba(255, 255, 255, 0.75);
}
.theme-ocean .sidebar-item:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.theme-ocean .sidebar-item.active {
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 100%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.theme-ocean .sidebar-header,
.theme-ocean .sidebar-user-section {
  color: rgba(255, 255, 255, 0.9);
}
.theme-ocean .sidebar-user-name {
  color: #fff;
}
.theme-ocean .sidebar-logo {
  color: #fff;
}
.theme-ocean .sidebar-logo-text {
  color: #fff;
}
.theme-ocean .sidebar-sub {
  color: rgba(255, 255, 255, 0.7);
}
.theme-ocean .sidebar-action-btn {
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.2);
}
.theme-ocean .sidebar-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.theme-ocean .sidebar-collapse-btn {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}
.theme-ocean .sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.theme-ocean .theme-popup {
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 8px 24px rgba(29,111,127,0.08), inset 0 0 0 1px rgba(255,255,255,0.5);
}
.theme-ocean .theme-popup-item { color: #052F3A; }
.theme-ocean .theme-popup-item:hover { background: rgba(106,205,198,0.2); color: #0D4C56; }
.theme-ocean .theme-popup-item.active { background: linear-gradient(135deg, rgba(106,205,198,0.30), rgba(168,224,216,0.15)); color: #0D4C56; }
.theme-ocean .theme-popup-check { color: #052F3A; }
/* ── Ocean glass panel & cards ── */
.theme-ocean .panel {
  background: rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(29,111,127,0.06), inset 0 0 0 1px rgba(255,255,255,0.55);
}
.theme-ocean .panel-title { color: var(--text-primary); }
.theme-ocean .panel-desc { color: var(--text-secondary); }
.theme-ocean .glass-card,
.theme-ocean .modal-card {
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow: 0 4px 20px rgba(29,111,127,0.05), inset 0 0 0 1px rgba(255,255,255,0.50);
}
/* Ocean theme empty state */
.theme-ocean .shell-placeholder-icon {
  font-size: 56px;
  opacity: 0.5;
}
.theme-ocean .shell-placeholder-icon svg {
  display: block;
  margin: 0 auto;
  stroke: #1D6F7F;
  opacity: 0.4;
}
.theme-ocean .shell-placeholder-title {
  color: rgba(29,111,127,0.5);
  font-weight: 500;
}
.theme-ocean .shell-placeholder-sub {
  color: rgba(29,111,127,0.35);
}
/* Ocean login: preserve readability behind the glass */
.theme-ocean .login-page {
  background: transparent;
}
.theme-ocean .login-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  box-shadow: 0 8px 40px rgba(29,111,127,0.12), inset 0 0 0 1px rgba(255,255,255,0.55);
}
.theme-ocean .login-subtitle {
  color: var(--text-secondary);
}
.theme-ocean .login-field label {
  color: var(--text-primary);
}
.theme-ocean .login-field input {
  background: rgba(255,255,255,0.75);
  border-color: rgba(29,111,127,0.25);
  color: #052F3A;
}
.theme-ocean .login-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,111,127,0.12);
}
.theme-ocean .login-submit {
  background: var(--primary);
  box-shadow: 0 4px 16px rgba(29,111,127,0.30);
}
.theme-ocean .login-submit:hover:not(:disabled) {
  box-shadow: 0 6px 24px rgba(29,111,127,0.40);
}
.theme-ocean .login-link-btn {
  color: var(--text-secondary);
}
.theme-ocean .login-tab {
  color: var(--text-secondary);
}
.theme-ocean .login-tab.active {
  background: var(--primary);
  color: #fff;
}

@keyframes driftBlob {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(20px, -25px) scale(1.08); }
  100% { transform: translate(-15px, 20px) scale(1.04); }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ===== App Shell ===== */
.app-shell {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* ===== Sidebar Trigger Zone ===== */
.sidebar-trigger {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  z-index: 200;
  cursor: default;
  transition: background 0.25s;
}

.sidebar-trigger:hover {
  background: var(--primary);
  opacity: 0.3;
}

.sidebar-toggle-btn {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 48px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  color: var(--text-secondary);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  z-index: 201;
}

.sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ===== Sidebar ===== */
.sidebar {
  position: fixed;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: var(--sidebar-w);
  z-index: 150;
  background: var(--sidebar-bg);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-left: none;
  border-radius: 0 20px 20px 0;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px 0 0 rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(calc(-100% + 8px));
  transition: transform 0.42s var(--ease-sidebar), box-shadow 0.42s var(--ease-out);
  color: var(--text-primary);
}

.sidebar.open {
  transform: translateX(0);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px 0 0 rgba(255, 255, 255, 0.5);
}

.sidebar.pinned {
  transform: translateX(0);
}

/* Edge glow strip when hidden */
.sidebar:not(.open):not(.pinned)::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 15%;
  bottom: 15%;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--primary) 30%,
    var(--user-bubble) 50%,
    var(--assistant-bubble) 70%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s;
}

.sidebar:hover:not(.open):not(.pinned)::after {
  opacity: 1;
}

/* ===== Sidebar Header ===== */
.sidebar-header {
  padding: 20px 16px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  flex-shrink: 0;
}

.sidebar-logo-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sidebar-logo {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-logo span {
  font-size: 22px;
  display: inline-flex;
  align-items: center;
}

.sidebar-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  letter-spacing: -0.1px;
  opacity: 0.7;
}

.sidebar-collapse-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--btn-radius);
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s, transform 0.15s var(--ease-spring);
}

.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  color: var(--text-primary);
}

/* ===== Sidebar Breadcrumb ===== */
.sidebar-breadcrumb {
  padding: 0 16px 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.4;
  opacity: 0.75;
}

.sidebar-breadcrumb-link {
  cursor: pointer;
  transition: color 0.18s;
}

.sidebar-breadcrumb-link:hover {
  color: var(--text-primary);
}

.sidebar-breadcrumb-sep {
  color: rgba(0, 0, 0, 0.15);
  font-size: 10px;
}

.sidebar-breadcrumb-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

/* ===== Sidebar Nav ===== */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.1px;
  width: 100%;
  text-align: left;
  transition: background 0.18s, color 0.18s, transform 0.18s var(--ease-spring);
}

.sidebar-item:hover {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text-primary);
}

.sidebar-item:active {
  transform: scale(0.97);
}

.sidebar-item.active {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3);
}

.sidebar-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-item-disabled {
  opacity: 0.35;
  cursor: pointer;
}

.sidebar-chat-resume {
  margin-top: 2px;
  border: 1px dashed var(--glass-border);
  border-radius: 12px;
  opacity: 0.8;
}

.sidebar-item-disabled:hover {
  background: rgba(0, 0, 0, 0.03);
}

.sidebar-item-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.18);
  border-radius: 999px;
  flex-shrink: 0;
}

/* ===== Sidebar Character Card ===== */
.sidebar-char-card {
  margin: 8px 10px 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: calc(100% - 20px);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s var(--ease-spring);
}

.sidebar-char-card:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.sidebar-char-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-char-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Main Panel ===== */
.main-panel {
  flex: 1;
  height: 100%;
  margin: 12px 12px 12px 20px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: margin-left 0.42s var(--ease-sidebar);
}

/* 舞台感光晕：所有页面上方一层 accent 微光（聊天页已有自己的光晕，跳过） */
.main-panel:not(:has(.chat-view))::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: radial-gradient(120% 45% at 50% 0%, var(--glow), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Slide main panel right when sidebar is open */
.app-shell.has-sidebar-open .main-panel {
  margin-left: calc(var(--sidebar-w) + 8px);
}

/* ===== Mobile Sidebar Overlay ===== */
.sidebar-overlay {
  display: none;
}

@media (max-width: 768px) {
  .sidebar-trigger { display: none; }

  .sidebar {
    top: 0;
    bottom: 0;
    border-radius: 0 20px 20px 0;
    transform: translateX(-100%);
    transition: transform 0.35s var(--ease-sidebar);
  }

  .sidebar.open,
  .sidebar.pinned {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }

  .sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  .main-panel {
    margin: 0;
    border-radius: 0;
  }

  .app-shell.has-sidebar-open .main-panel {
    margin-left: 0;
  }

  .messages-layout {
    border-radius: 0;
    border: none;
  }

  .reader-bottom-bar {
    gap: 4px;
    padding: 6px 10px;
    padding-bottom: calc(6px + var(--safe-bottom));
  }
  .reader-page-btn {
    padding: 6px 8px;
    font-size: 12px;
  }
  .reader-page-info {
    min-width: 44px;
    font-size: 12px;
  }
  .reader-bottom-group {
    gap: 2px;
  }
  .reader-bottom-btn {
    width: 28px;
    height: 28px;
  }

  .home-global-search {
    display: block;
  }
  .home-page.panel {
    overflow-y: auto;
  }
}

/* ===== View Transition ===== */
.view-transition {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out);
}

.view-transition.in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Shell Placeholder ===== */
.shell-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}

.shell-placeholder-inner {
  animation: fade-up 0.35s var(--ease-out);
}

.shell-placeholder-icon {
  font-size: 48px;
  margin-bottom: 14px;
  opacity: 0.7;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.shell-placeholder-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.shell-placeholder-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* 全局可点击元素手型：补全无 .btn-* 类名的原生按钮 / antd TabBar / 可点 label 等 */
button:not(:disabled),
[role='button']:not(:disabled),
[role='tab']:not(:disabled),
summary,
label[for] {
  cursor: pointer;
}

/* ===== Buttons ===== */
.btn-primary {
  height: 44px;
  padding: 0 24px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  border: none;
  border-radius: var(--btn-radius);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-accent);
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s var(--ease-spring), opacity 0.2s, filter 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 6px 18px rgba(var(--accent-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 12px 30px rgba(var(--accent-rgb), 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.btn-primary:disabled {
  cursor: not-allowed;
  background: var(--surface-2);
  color: var(--fg-subtle);
  box-shadow: none;
  opacity: 0.7;
}

.btn-secondary {
  height: 44px;
  padding: 0 24px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--btn-radius);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s var(--ease-spring);
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-ghost {
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--btn-radius);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s var(--ease-spring);
}

.btn-ghost:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: var(--primary);
  color: var(--text);
  transform: translateY(-1px);
}

.btn-ghost:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.btn-ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ===== Button Utilities ===== */
.mt-6 { margin-top: 6px; }
.mt-12 { margin-top: 12px; }
.w-full { width: 100%; }
.fr { float: right; }
.fs-12 { font-size: 12px; }

/* ===== Error Box ===== */
.error-box {
  padding: 10px 14px;
  background: rgba(220, 60, 60, 0.06);
  border: 1px solid rgba(220, 60, 60, 0.16);
  border-radius: 10px;
  font-size: 13px;
  color: #a03030;
  line-height: 1.7;
}

/* ===== Loading Dots ===== */
.loading-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 20px;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: bounce-dot 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ===== Panel ===== */
.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 28px 32px 24px;
  gap: 20px;
}

.panel-header {
  flex-shrink: 0;
}

.panel-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── PageHeader (title + actions + back, unified secondary page header) ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.page-header-title {
  flex: 1;
  min-width: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.page-header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  font-family: inherit;
}
.page-header-back:hover {
  background: var(--accent-soft);
}
@media (max-width: 768px) {
  .page-header-back {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 768px) {
  .page-header-title {
    font-size: 18px;
  }
}

.panel-desc {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0 4px;
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.breadcrumb-item {
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}

.breadcrumb-item:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.breadcrumb-item.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
  cursor: default;
}

.breadcrumb-item.breadcrumb-current:hover {
  background: none;
}

.breadcrumb-sep {
  color: var(--text-dim);
  user-select: none;
}

/* ===== Glass Utilities ===== */
.glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.glass-input {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.glass-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
  outline: none;
}

/* ===== Glass Card ===== */
.glass-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.3s;
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ===== Animations ===== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Home Panel ===== */
.home-panel {
  overflow-y: auto;
}

.home-empty-card {
  text-align: center;
  padding: 48px 32px;
  cursor: default;
  max-width: 420px;
  align-self: center;
  width: 100%;
}

.home-empty-card:hover {
  transform: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.home-empty-icon {
  font-size: 48px;
  margin-bottom: 14px;
}

.home-empty-card h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.home-empty-card p {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 20px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  align-content: start;
}

.home-card-wrapper {
  display: flex;
  flex-direction: column;
}

/* Text card with left accent bar */
.home-text-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

.home-text-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-soft));
  border-radius: 0 4px 4px 0;
  transition: width 0.3s var(--ease-out);
}

.home-text-card:hover::before {
  width: 4px;
}

.home-text-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.8);
}

.home-text-card.active {
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12), 0 8px 32px rgba(0, 0, 0, 0.06);
}

.home-text-card.active::before {
  width: 4px;
}

.home-card-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 12px;
}

.home-card-body {
  flex: 1;
  min-width: 0;
}

.home-card-filename {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

.home-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
}

.home-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 999px;
}

.home-card-chevron {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 0.3s var(--ease-out);
}

.home-card-chevron.open {
  transform: rotate(180deg);
}

/* Expand panel */
.home-expand-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}

.home-expand-panel.open {
  max-height: 500px;
}

.home-expand-inner {
  padding: 14px 4px 6px;
}

.home-char-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
}

.home-char-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.home-char-info {
  min-width: 0;
}

.home-char-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.home-char-identity {
  font-size: 11.5px;
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
}

.home-char-tags {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.home-char-tag {
  font-size: 10.5px;
  padding: 2px 8px;
  background: var(--pill-bg);
  border-radius: 999px;
  color: var(--pill-text);
}

.home-no-chars {
  text-align: center;
  padding: 20px;
}

.home-no-chars p {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* Quick actions */
.home-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  justify-content: center;
  padding-top: 8px;
}

.home-action-btn {
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--btn-radius);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sec);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s var(--ease-spring);
}

.home-action-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--accent);
  transform: translateY(-1px);
}

/* ===== Text Panel ===== */
.text-panel .error-box {
  flex-shrink: 0;
}

.text-upload-zone {
  flex-shrink: 0;
  position: relative;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  background: transparent;
  transition: border-color 0.2s, background 0.2s;
}

.text-upload-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.text-upload-zone.uploading {
  opacity: 0.7;
  pointer-events: none;
}

.text-upload-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.text-upload-icon {
  font-size: 40px;
  margin-bottom: 10px;
  line-height: 1;
}

.text-upload-hint {
  font-size: 14px;
  color: var(--text-sec);
  margin-bottom: 14px;
}

.text-upload-meta {
  margin-top: 14px;
  font-size: 12px;
  color: var(--fg-subtle);
}

.upload-progress {
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  height: 28px;
  background: var(--surface-2);
}

.upload-progress .progress-bar {
  height: 100%;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  transition: width 0.3s ease;
  border-radius: 8px;
}

.upload-progress span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}

.identify-progress {
  position: relative;
  margin-top: 10px;
  height: 24px;
}

.identify-progress .progress-bar {
  height: 4px;
  background: var(--accent, #2a6);
  transition: width 0.1s linear;
  border-radius: 4px;
}

.identify-progress span {
  position: absolute;
  top: 8px;
  left: 0;
  font-size: 12px;
  color: var(--text-dim);
}

.text-list-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.text-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.text-list-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.text-list-count {
  font-size: 12px;
  color: var(--text-dim);
}

.text-list-empty {
  font-size: 13px;
  color: var(--text-dim);
  padding: 24px 0;
  text-align: center;
}

.text-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.text-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.text-list-item:hover {
  background: rgba(255, 255, 255, 0.72);
}

.text-list-item.selected {
  border-color: var(--pill-border);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.15);
}

.text-list-main {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.text-list-filename {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-list-chars,
.text-list-time {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.chars-green  { color: var(--success); font-weight: 600; }
.chars-blue   { color: var(--info); font-weight: 600; }
.chars-orange { color: var(--warning); font-weight: 600; }
.chars-red    { color: var(--danger); font-weight: 600; }

.text-list-cleaned {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-list-delete {
  flex-shrink: 0;
  margin-right: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #a03030;
  border: 1px solid rgba(220, 60, 60, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.text-list-delete:hover:not(:disabled) {
  background: rgba(220, 60, 60, 0.08);
}

.text-list-delete:disabled {
  opacity: 0.5;
  cursor: wait;
}

.text-list-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.text-list-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pill-text);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.text-list-expand-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-dim);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.text-list-expand-toggle:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.text-list-preview {
  padding: 0 14px 14px;
  width: 100%;
}

.text-list-preview-text {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-sec);
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow-y: auto;
}

.text-list-preview-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 8px;
  text-align: right;
}

.text-list-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-right: 4px;
}

.text-list-action-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sec);
  border: 1px solid var(--input-border);
  border-radius: var(--btn-radius);
  background: var(--input-bg);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.text-list-action-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.text-list-action-danger {
  color: #a03030;
  border-color: rgba(220, 60, 60, 0.2);
}

.text-list-action-danger:hover {
  background: rgba(220, 60, 60, 0.08);
}

.text-list-action-active {
  color: var(--primary);
  border-color: var(--primary);
}

.text-list-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
  padding: 0 14px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
}

/* ===== Creation Panel (tabs + card-based layout) ===== */
.creation-panel.panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

.creation-tab-bar {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  margin: 0 0 16px;
  flex-shrink: 0;
}

.creation-tab {
  flex: 1;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--fg-muted);
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}

.creation-tab:hover {
  color: var(--text);
}

.creation-tab.active {
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

/* ── Text cards ── */
.creation-text-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creation-text-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 16px;
  background: var(--glass-bg);
  transition: box-shadow 0.2s;
}

.creation-text-card:hover {
  box-shadow: var(--shadow-sm);
}

.creation-text-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.creation-text-info {
  flex: 1;
  min-width: 0;
}

.creation-text-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creation-text-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
}

.creation-text-filename {
  color: var(--text-secondary);
}

.creation-text-chars {
  color: var(--text-dim);
}

.creation-text-status {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.7;
}

.creation-text-status.status-done {
  background: rgba(76, 175, 80, 0.12);
  color: #2e7d32;
}

.creation-text-status.status-pending {
  background: rgba(158, 158, 158, 0.12);
  color: #616161;
}

.creation-text-status.status-running {
  background: rgba(33, 150, 243, 0.12);
  color: #1565c0;
  animation: pulse-blue 1.5s ease-in-out infinite;
}

@keyframes pulse-blue {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.creation-text-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.creation-text-actions .btn-ghost {
  font-size: 12px;
  padding: 4px 12px;
  height: 30px;
}

.creation-action-danger {
  color: #e53935 !important;
}

.creation-action-danger:hover {
  background: rgba(229, 57, 53, 0.08) !important;
}

/* ── Character management tab ── */
.creation-char-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.creation-char-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.creation-char-filter-pill {
  padding: 4px 14px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.creation-char-filter-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.creation-char-filter-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.creation-char-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
}

.creation-char-empty p {
  margin-bottom: 16px;
  font-size: 14px;
}

.creation-char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
  overflow-y: auto;
  padding-bottom: 8px;
}

.creation-char-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.creation-char-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 16px;
  background: var(--glass-bg);
  position: relative;
  transition: box-shadow 0.2s;
}

.creation-char-card:hover {
  box-shadow: var(--shadow-sm);
}

.creation-char-info {
  flex: 1;
  min-width: 0;
}

.creation-char-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.creation-char-identity {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.creation-char-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-dim);
}

.creation-char-source {
  color: var(--text-secondary);
}

.creation-char-time {
  color: var(--text-dim);
}

.creation-char-status {
  flex-shrink: 0;
  font-size: 11px;
  color: #616161;
  display: inline-flex;
  align-items: center;
}

.creation-char-status.public {
  color: #2e7d32;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  flex-shrink: 0;
}
.status-dot.private { background: var(--text-dim); }
.status-dot.public { background: var(--accent); }

.creation-char-version-badge {
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  margin-left: 8px;
  user-select: none;
}
.creation-char-version-badge:hover {
  color: var(--accent);
  text-decoration: underline;
}

.creation-char-version-list {
  display: contents;
}

.creation-char-card-version {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--glass-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-left: 24px;
  background: var(--bg-secondary);
  transition: box-shadow 0.2s;
}
.creation-char-card-version:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* ── Character action menu ── */
.creation-char-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.creation-char-menu-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s;
}

.creation-char-menu-btn:hover {
  background: rgba(0,0,0,0.05);
}

.creation-char-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  min-width: 140px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.creation-char-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text);
  transition: background 0.1s;
}

.creation-char-dropdown button:hover {
  background: rgba(0,0,0,0.04);
}

.creation-char-dropdown button.danger {
  color: #e53935;
}

.creation-char-dropdown button.danger:hover {
  background: rgba(229, 57, 53, 0.08);
}

/* ===== Character Panel ===== */
.char-panel .error-box {
  flex-shrink: 0;
}

.char-body {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 16px;
  overflow: hidden;
}

.char-sidebar-inner {
  width: 240px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 4px 0;
}

.char-sidebar-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.char-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.char-sidebar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pill-text);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  line-height: 1;
}

.char-sidebar-head .btn-ghost {
  margin-left: auto;
}

.char-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

/* ── Character Card ── */
.char-list-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
  min-width: 0;
}

.char-list-item:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.char-list-item:active {
  transform: scale(0.98);
}

.char-list-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.15), 0 2px 6px rgba(0,0,0,0.04);
}

/* Card top row: avatar + name + identity */
.char-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.char-list-info {
  min-width: 0;
  flex: 1;
}

.char-list-name {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.char-list-identity {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card metadata row (source badge, tags) */
.char-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-left: 44px;
}

.char-card-source {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-dim);
  background: rgba(0,0,0,0.025);
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.4;
}

/* ── Sidebar card extras ── */
.char-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

.char-card-source-line {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.char-card-time {
  color: var(--text-dim);
  flex-shrink: 0;
}

.char-card-status {
  flex-shrink: 0;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(158, 158, 158, 0.12);
  color: #616161;
  margin-left: auto;
  align-self: flex-start;
}

.char-card-status.shared {
  background: rgba(76, 175, 80, 0.12);
  color: #2e7d32;
}

.char-card-menu-wrap {
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: 2px;
}

.char-card-menu-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s;
}

.char-card-menu-btn:hover {
  background: rgba(0,0,0,0.05);
}

/* Card footer action row */
.char-card-actions {
  display: flex;
  align-items: center;
  gap: 1px;
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.04);
}

.char-card-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  line-height: 1;
  color: var(--text-dim);
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.char-card-action-btn:hover {
  background: rgba(0,0,0,0.04);
  color: var(--text);
}

.char-card-action-btn.is-pinned {
  color: #c4956a;
}

.char-card-action-btn.is-shared {
  color: var(--accent);
}

.char-card-action-btn.danger:hover {
  color: #d44;
  background: rgba(220,60,60,0.08);
}

.char-card-actions-spacer {
  flex: 1;
}

/* Card bounce-in animation */
@keyframes cardBounceIn {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.char-list-item.new-card {
  animation: cardBounceIn 0.35s var(--ease-out) both;
}

.char-list-item.is-new {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2), 0 0 12px rgba(var(--accent-rgb), 0.15);
  animation: cardBounceIn 0.35s var(--ease-out) both;
}

/* Identified characters (not yet distilled) */
.char-identified {
  margin-top: 16px;
  flex-shrink: 0;
}

.char-identified-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding: 0 2px;
}

.char-identified-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  padding-right: 4px;
}

.char-identified-item {
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.5), rgba(255,255,255,0.15));
  border: 1px dashed rgba(0,0,0,0.07);
}

.char-identified-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.char-identified-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.char-identified-badge {
  font-size: 10.5px;
  padding: 1px 7px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  color: var(--text-dim);
}

.char-identified-reason {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 8px;
}

.char-identified-btn {
  height: 30px;
  padding: 0 12px;
  font-size: 11.5px;
  width: 100%;
}

.char-btn-redist {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
}

.char-btn-redist:hover {
  background: rgba(var(--accent-rgb), 0.15) !important;
  border-color: var(--primary) !important;
}

/* Sidebar bottom actions */
.char-sidebar-actions {
  margin-top: auto;
  padding-top: 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.char-reidentify-btn {
  width: 100%;
  height: 36px;
  border: 1px solid var(--input-border);
  border-radius: var(--btn-radius);
  background: rgba(255, 255, 255, 0.5);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sec);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.char-reidentify-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.85);
  color: var(--accent);
}

.char-reidentify-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Detail pane */
.char-detail-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  padding-left: 16px;
}

.char-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-dim);
}

.char-detail-empty-icon {
  font-size: 44px;
  margin-bottom: 10px;
  opacity: 0.5;
}

.card-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fade-up 0.32s var(--ease-out);
}

.card-detail-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
}

/* Card hero — 剧光肖像卡 */
.card-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  margin-bottom: 20px;
  padding: 30px 24px 24px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
}

.card-avatar-btn {
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.card-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
}

.card-avatar-btn:hover .card-avatar-overlay {
  opacity: 1;
}

.card-hero-text {
  position: relative;
  min-width: 0;
  max-width: 100%;
  margin-top: 16px;
}

.card-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.02em;
}

.card-identity {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 6px;
  letter-spacing: 0.08em;
}

/* Card sections */
.card-section {
  margin-top: 16px;
}

.card-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  padding: 4px 12px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 16px;
  font-size: 12px;
  color: var(--pill-text);
  line-height: 1.4;
}

.pill-value {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}

.pill-tension {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}

/* 性格特征 → 剧光 trait 胶囊（accent 圆点） */
.card-trait-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-trait {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-sec);
  font-size: 13px;
}

.pill-trait-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Speaking style */
.card-style-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.card-style-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--glass-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
}

.card-style-chip-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}

.card-style-chip-value {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.card-catchphrases {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.catchphrase {
  font-size: 13px;
  color: var(--text-sec);
  font-style: italic;
  line-height: 1.7;
  padding-left: 10px;
  border-left: 2px solid var(--pill-border);
}

/* Key memories */
.card-memory-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-memory-item {
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.55;
  padding: 6px 10px;
  background: var(--glass-bg);
  border-radius: 8px;
  position: relative;
  padding-left: 18px;
}

.card-memory-item::before {
  content: '\2022';
  position: absolute;
  left: 7px;
  color: var(--accent);
  font-size: 14px;
}

/* Relationships */
.card-rel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-rel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--glass-bg);
  border-radius: 10px;
}

.card-rel-target {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 60px;
}

.card-rel-type {
  flex-shrink: 0;
}

.card-rel-attitude {
  font-size: 12px;
  color: var(--text-dim);
  flex: 1;
  min-width: 0;
}

/* Background text */
.card-background {
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.65;
}

/* User role input */
.card-user-role-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--input-radius);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card-user-role-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.card-user-role-input::placeholder {
  color: var(--text-dim);
}

/* Footer */
.card-footer {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.card-export-btn {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 18px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border-radius: var(--btn-radius);
}

.card-chat-btn {
  flex: 1;
  height: 48px;
  font-size: 15px;
  gap: 6px;
  border-radius: var(--btn-radius);
}

/* ===== Chat Area ===== */
.chat-area {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

/* Chat background gradient — .chat-view is the shared class across all three chat types */
.main-panel:has(.chat-view) {
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--sidebar-bg) 100%);
}

/* 舞台感光晕：仅聊天页顶部，accent 微光径向渐变（桌面/移动通用） */
.chat-area {
  background: radial-gradient(130% 55% at 50% -8%, var(--glow) 0%, transparent 62%);
}

/* ===== Chat 桌面双栏 ===== */
@media (min-width: 769px) {
  .chat-desktop {
    flex: 1;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(300px, 320px) 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
    overflow: hidden;
  }
  .conv-panel,
  .tl-panel {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .conv-panel {
    background: transparent;
    box-shadow: 0 10px 36px rgba(var(--accent-rgb), 0.08);
  }
  .tl-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.05);
  }
  .tl-head {
    flex-shrink: 0;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .tl-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tl-title {
    margin: 0;
    font-size: var(--text-title);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .tl-new {
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--text-body-s);
    font-weight: 500;
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .tl-new:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .tl-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 36px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg-subtle);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .tl-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-body-s);
    color: var(--text);
  }
  .tl-search input::placeholder { color: var(--fg-subtle); }
  .tl-search:focus-within {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
  }
  .tl-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
  }
  .tl-item:hover { background: var(--surface-2); }
  .tl-item.is-active { background: var(--surface-3); }
  .tl-item.is-active .tl-item-name { color: var(--accent); }
  .tl-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .tl-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .tl-item-name {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tl-item-time {
    font-size: var(--text-caption);
    color: var(--fg-subtle);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .tl-item-sub {
    margin: 0;
    font-size: var(--text-body-s);
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tl-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: var(--text-body-s);
    color: var(--fg-subtle);
  }
}

/* Top bar */
/* ── Compact chat topbar ── */
.chat-topbar-compact {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  gap: 6px;
}
.chat-topbar-compact-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.chat-topbar-compact-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.chat-topbar-compact-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.chat-topbar-compact-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-topbar-badge-compact {
  font-size: 11px;
  padding: 1px 6px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 8px;
  color: var(--pill-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.chat-topbar-back {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 0.15s;
  flex-shrink: 0;
}
.chat-topbar-back:hover {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--text);
}
.chat-topbar-avatar-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  overflow: hidden;
}
.chat-topbar-mood-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  opacity: 0.8;
  transition: opacity 0.15s, transform 0.15s;
}
.chat-topbar-mood-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}
.chat-topbar-more-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 0.15s;
}
.chat-topbar-more-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--text);
}
.chat-topbar-more-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}
.chat-topbar-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.15s;
  flex-shrink: 0;
}
.chat-topbar-btn:hover,
.chat-topbar-btn.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}
.chat-topbar-btn svg {
  transition: transform 0.25s ease;
}
.chat-topbar-btn:hover svg {
  transform: scale(1.12);
}

/* 在线状态点：角色名旁（对齐概念稿 ai-online） */
.ai-online {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--success);
  white-space: nowrap;
}
.ai-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
  animation: ai-online-pulse 2.4s var(--ease-out) infinite;
}
@keyframes ai-online-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 0%, transparent); }
}

/* ── Inner voice popup ── */
.inner-voice-popup {
  position: absolute;
  top: 54px;
  left: 12px;
  z-index: 50;
  width: 280px;
  background: var(--card-bg);
  border: 1px solid var(--glass-border, rgba(0,0,0,0.08));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  padding: 14px;
}
.inner-voice-popup::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 60px;
  width: 10px;
  height: 10px;
  background: var(--card-bg);
  border: 1px solid var(--glass-border, rgba(0,0,0,0.08));
  border-right: none;
  border-bottom: none;
  transform: rotate(45deg);
}
.inner-voice-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #1f2937);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.inner-voice-text {
  font-size: 13px;
  font-style: italic;
  line-height: 1.7;
  color: var(--text-secondary, #6b7280);
  padding: 8px 0;
  border-top: 1px solid var(--glass-border, rgba(0,0,0,0.06));
  border-bottom: 1px solid var(--glass-border, rgba(0,0,0,0.06));
  margin-bottom: 8px;
}
.inner-voice-text::before { content: "\201C"; }
.inner-voice-text::after { content: "\201D"; }
.inner-voice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.inner-voice-mood {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #6366f1);
  text-align: center;
  padding: 4px 0 8px;
  line-height: 1.4;
}
.inner-voice-stats {
  font-size: 11px;
  color: var(--text-dim, #9ca3af);
  letter-spacing: 1px;
}
.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(var(--accent-rgb, 99,102,241), 0.12);
  color: var(--accent, #6366f1);
  white-space: nowrap;
}

/* Stage upgrade toast */
.stage-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 10px 20px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--glass-border, rgba(0,0,0,0.08));
  border-radius: 99px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1f2937);
  white-space: nowrap;
  animation: stage-toast-in 0.3s ease-out;
}
@keyframes stage-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* (死代码已删：:root.is-midnight/.midnight 的 inner-voice/stage-toast 暗色块，JS 从不设这两类) */

/* ── More menu ── */
.chat-more-menu {
  position: absolute;
  top: 50px;
  right: 12px;
  z-index: 50;
  min-width: 160px;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.12s;
  font-family: inherit;
}
.chat-more-item:hover {
  background: rgba(var(--accent-rgb), 0.08);
}
.chat-more-item.active {
  color: var(--accent);
}
.chat-more-item:disabled {
  opacity: 0.4;
  cursor: default;
}
.chat-more-item-danger {
  color: var(--danger, #ef4444);
  border-top: 1px solid var(--glass-border);
  margin-top: 4px;
  padding-top: 10px;
  border-radius: 0 0 8px 8px;
}
.chat-more-item-danger:hover {
  background: rgba(239, 68, 68, 0.08);
}
.chat-more-item svg {
  flex-shrink: 0;
}


/* Old chat-topbar styles preserved for reference (unused) */
.chat-voice-indicator { display: none; }
.chat-web-search-ctl { display: none; }
.chat-font-size-ctl { display: none; }
.chat-font-btn { display: none; }
.chat-font-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}
.chat-area.has-text-sm { --chat-font-size: 0.88rem; }
.chat-area.has-text-lg { --chat-font-size: 1.15rem; }

/* User role bar */
.user-role-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 8px;
  border-bottom: 1px solid var(--glass-border);
}

.user-role-label {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.user-role-input {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-bottom: 1px solid var(--input-border);
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text-sec);
  outline: none;
  transition: border-color 0.2s;
}

.user-role-input:focus {
  border-bottom-color: var(--accent);
}

.user-role-input::placeholder {
  color: var(--text-dim);
  font-size: 12px;
}

.user-role-locked {
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
}

/* Context banner */
.chat-context-banner {
  flex-shrink: 0;
  padding: 6px 16px;
  background: var(--accent-soft);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
  font-size: 12px;
  color: var(--pill-text);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Messages list */
.chat-messages {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 16px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-area .chat-messages {
  gap: 10px;
}

/* Time divider */
.time-divider {
  text-align: center;
  padding: 8px 0 4px;
  font-size: 12px;
  color: var(--text-dim);
  user-select: none;
  opacity: 0.75;
}
/* 概念稿 .time-sep 风格：两侧横线 + 中央小字（仅聊天页） */
.chat-area .time-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 1;
}
.chat-area .time-divider::before,
.chat-area .time-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
  opacity: 0.55;
}

/* Message row */
.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  animation: fade-up 0.22s var(--ease-out);
  position: relative;
}

.chat-msg-char {
  flex-direction: row;
  justify-content: flex-start;
}

.chat-msg-user {
  flex-direction: row-reverse;
  margin-left: auto;
}

.chat-msg-avatar {
  flex-shrink: 0;
  padding-top: 2px;
}

/* Avatar size controlled by the <Avatar size={68}> prop (inline style) */

/* User avatar — rounded-square, matches character avatar */
.user-avatar-circle {
  width: 68px;
  height: 68px;
  background: var(--primary);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ===== Chat Bubbles — WeChat-inspired ===== */
.chat-bubble {
  padding: 9px 13px;
  font-size: var(--chat-font-size);
  line-height: 1.7;
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
  max-width: 68%;
  width: fit-content;
  min-width: 2.6em;
  text-align: left;
}

/* Character bubble — white, left-pointing arrow */
.chat-bubble-char {
  background: #fff;
  color: #1a1a1a;
  border-radius: 16px 16px 16px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.chat-bubble-char::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 13px;
  border: 5px solid transparent;
  border-right-color: #fff;
  border-left: 0;
}

/* User bubble — themed, right-pointing arrow */
.chat-bubble-user {
  background: var(--bubble-user-bg, #e8e0ff);
  color: #1a1a1a;
  border-radius: 16px 4px 16px 16px;
  margin-left: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.chat-bubble-user::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 13px;
  border: 5px solid transparent;
  border-left-color: var(--bubble-user-bg, #e8e0ff);
  border-right: 0;
}

.chat-bubble-text {
  display: inline-block;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 消息时间戳 */
.msg-time {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
  line-height: 1;
}
.msg-time-user {
  text-align: right;
}

/* Streaming cursor */
.chat-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink-cursor 0.8s steps(2) infinite;
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.typing-text {
  font-size: 0.85em;
  opacity: 0.7;
}
.typing-dots i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: typing-dot-bounce 1.4s ease-in-out infinite;
}
.typing-dots i:nth-child(1) { animation-delay: 0s; }
.typing-dots i:nth-child(2) { animation-delay: 0.2s; }
.typing-dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

@keyframes blink-cursor {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Revoke */
.chat-revoke-btn {
  position: relative;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.08);
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  align-self: center;
}

.chat-revoke-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.chat-msg-user:hover .chat-revoke-btn {
  opacity: 1;
}

.chat-revoke-btn.revoke-cooldown {
  opacity: 0.5 !important;
  cursor: not-allowed;
  background: rgba(var(--accent-rgb), 0.04);
}

/* TTS play */
.tts-play-btn {
  padding: 4px 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--btn-radius);
  background: var(--glass-bg);
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
  opacity: 0;
}

.chat-msg-char:hover .tts-play-btn {
  opacity: 1;
}

.tts-play-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--text);
}

.tts-play-btn:disabled {
  cursor: default;
}

/* Summary fold */
.chat-summary {
  align-self: center;
  width: 100%;
  max-width: 480px;
  margin: 6px 0;
}

.chat-summary-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px dashed rgba(var(--accent-rgb), 0.25);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.06);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.18s;
}

.chat-summary-toggle:hover {
  background: rgba(var(--accent-rgb), 0.12);
}

.chat-summary-icon {
  font-size: 14px;
}

.chat-summary-arrow {
  margin-left: auto;
  font-size: 10px;
}

.chat-summary-body {
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.04);
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.7;
  white-space: pre-wrap;
  animation: fade-up 0.2s var(--ease-out);
}

/* Unified composer bar — single source for all chat scenarios.
   safe-area bottom padding written once here (0 on non-notch devices). */
.composer-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px calc(14px + var(--safe-bottom));
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(var(--accent-rgb), 0.08);
  min-width: 0;
}

/* Outer wrapper for ComposerBar (holds banner + reply preview +
   the resizable bar). Must NOT grow, or the bar/textarea stretch to fill. */
.composer-bar-wrap {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 0;
}

.chat-textarea {
  --field-h: 38px;
  --field-line: 21px;
  flex: 1;
  min-height: var(--field-h);
  padding-block: calc((var(--field-h) - var(--field-line)) / 2);
  padding-inline: 14px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  resize: none;
  outline: none;
  line-height: var(--field-line);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.chat-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.chat-textarea::placeholder {
  color: var(--text-secondary);
  font-size: 13px;
}

.chat-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chat-send-btn {
  flex-shrink: 0;
  align-self: flex-end;
  height: 38px;
  width: 56px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--btn-radius);
  background: var(--primary);
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s var(--ease-spring);
}

.chat-send-btn:hover:not(:disabled) {
  background: var(--primary-hover);
}

.chat-send-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.chat-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chat-input-voice-btn {
  flex-shrink: 0;
  align-self: flex-end;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.chat-input-voice-btn:hover {
  opacity: 0.8;
}

.chat-input-voice-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ===== History Panel ===== */
.history-panel.panel {
  padding-bottom: 16px;
}

.history-tab-bar {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  margin: 0 0 12px;
}

.history-tab {
  flex: 1;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--fg-muted);
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: center;
}

.history-tab:hover {
  color: var(--text);
}

.history-tab.active {
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.history-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 8px;
}

.history-toolbar {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.history-search {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.history-search::placeholder {
  color: var(--fg-subtle);
}

.history-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.history-filter {
  min-width: 140px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.history-filter:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.history-empty {
  text-align: center;
  color: var(--fg-subtle);
  font-size: 13px;
  padding: 32px 0;
}

.history-swipe-wrapper {
  position: relative;
  overflow: hidden;
}

.history-swipe-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}

.history-swipe-wrapper:hover .history-swipe-actions {
  opacity: 1;
}

.history-swipe-delete {
  padding: 0 20px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0 12px 12px 0;
  transition: background 0.15s ease;
}

.history-swipe-delete:hover {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
}

.history-swipe-restore {
  padding: 0 20px;
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 12px 0 0 12px;
  transition: background 0.15s ease;
}

.history-swipe-restore:hover {
  background: color-mix(in srgb, var(--success) 22%, transparent);
}

.history-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
  transition: background 0.18s, border-color 0.18s, transform 0.15s var(--ease-spring);
}

.history-item:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--glass-bg));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--glass-border));
}

.history-item-body {
  flex: 1;
  min-width: 0;
}

.history-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.history-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.history-item-time {
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.history-item-preview {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-sec);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item-text-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.history-item-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.history-item-progress-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--glass-border);
  overflow: hidden;
}
.history-item-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.3s;
}
.history-item-progress-text {
  font-size: 11px;
  color: var(--text-dim);
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.history-item-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.history-grouped {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px;
}

.history-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  letter-spacing: 0.3px;
  cursor: pointer;
  user-select: none;
}

.history-group-title:hover {
  color: var(--text);
}

.history-group-arrow {
  display: inline-block;
  width: 14px;
  font-size: 10px;
  transition: transform 0.2s;
  color: var(--text-dim);
}

.history-group-arrow.collapsed {
  transform: rotate(0deg);
}

.history-item-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.history-item-text-label {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--input-bg);
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-shrink: 0;
  padding-top: 8px;
}

.history-page-btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--btn-radius);
  background: rgba(255, 255, 255, 0.5);
  font: inherit;
  font-size: 12px;
  color: var(--text-sec);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.history-page-btn:hover:not(:disabled) {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.85);
}

.history-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.history-page-info {
  font-size: 12px;
  color: var(--text-dim);
}

.history-detail-view {
  gap: 12px;
}

.history-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-action-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--btn-radius);
  cursor: pointer;
  font-family: inherit;
}

.history-action-sm.btn-primary {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.history-action-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--input-border);
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-sec);
}

.history-action-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
}
.history-action-danger:hover {
  background: rgba(220, 60, 60, 0.06);
  border-color: rgba(220, 60, 60, 0.2);
  color: #b04040;
}

.btn-danger {
  height: 38px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--btn-radius);
  border: 1px solid rgba(220, 60, 60, 0.3);
  background: rgba(231, 76, 60, 0.9);
  color: #fff;
  cursor: pointer;
  transition: all .2s;
}
.btn-danger:hover { background: rgba(200, 50, 40, 0.95); }
.btn-danger:disabled { opacity: 0.5; cursor: default; }

/* ── Ghost Danger Button (subtle, icon-friendly) ── */
.btn-ghost-danger {
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-ghost-danger:hover {
  background: rgba(220, 60, 60, 0.06);
  border-color: rgba(220, 60, 60, 0.2);
  color: #b04040;
}

.btn-ghost-danger:active {
  background: rgba(220, 60, 60, 0.1);
}

/* ── Danger sm (full red, for truly destructive actions) ── */
.btn-danger-sm {
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--btn-radius);
  border: 1px solid rgba(220, 60, 60, 0.2);
  background: rgba(220, 60, 60, 0.06);
  color: #a03030;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, transform 0.15s var(--ease-spring);
}

.btn-danger-sm:hover {
  background: rgba(220, 60, 60, 0.16);
  border-color: rgba(220, 60, 60, 0.5);
  transform: translateY(-1px);
}

.btn-danger-sm:active {
  transform: translateY(0);
}

.history-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.history-detail-meta-wrap {
  min-width: 0;
}

.history-detail-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.history-detail-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

.history-readonly-hint {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  flex-shrink: 0;
}

.history-end {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  padding: 12px 0;
  flex-shrink: 0;
}

.history-readonly-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 4px 12px;
}
.history-readonly-chat .chat-messages {
  padding-bottom: 16px;
}

.history-readonly-msg {
  /* use same layout as chat-msg — no extra width restriction */
}

.history-readonly-summary {
  max-width: 100%;
}

.history-readonly-summary .chat-summary-body {
  display: block;
}

/* ===== @Mention Dropdown ===== */
.mention-item:hover {
  background: var(--hover-bg, rgba(128,128,128,0.06)) !important;
}

/* ===== In-Chat History Panel ===== */
.chat-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--glass-border, rgba(128,128,128,0.2));
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.chat-history-toggle:hover,
.chat-history-toggle.active {
  background: var(--accent-bg, rgba(99,102,241,0.1));
  color: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
}

.chat-history-panel-body {
  width: 320px;
  max-height: 400px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, rgba(128,128,128,0.2));
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-history-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-history-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-color, #333);
}

.chat-history-search-input::placeholder {
  color: var(--text-dim, #999);
}

.chat-history-results {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.chat-history-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-dim, #999);
  font-size: 13px;
}

.chat-history-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}

.chat-history-item:hover {
  background: var(--hover-bg, rgba(128,128,128,0.06));
}

.chat-history-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #333);
  margin-bottom: 2px;
}

.chat-history-item-preview {
  font-size: 12px;
  color: var(--text-secondary, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}

.chat-history-item-time {
  font-size: 11px;
  color: var(--text-dim, #999);
}

/* History overlay (full right-side panel) */
.chat-history-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  animation: chat-overlay-in 0.25s ease-out;
}
@keyframes chat-overlay-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.chat-history-overlay-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--glass-border, rgba(128,128,128,0.12));
  gap: 8px;
  flex-shrink: 0;
}
.chat-history-overlay-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background 0.12s;
}
.chat-history-overlay-close:hover {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--text);
}
.chat-history-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

/* History / Date tabs (inside ChatHistoryPanel) */
.history-date-tabs {
  display: flex;
  gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--glass-border, rgba(128,128,128,0.08));
  flex-shrink: 0;
}
.history-date-tab {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: color 0.12s;
}
.history-date-tab:hover { color: var(--text); }
.history-date-tab.active {
  color: var(--accent);
  font-weight: 600;
}
.history-date-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* History speaker filter tabs */
.history-speaker-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--glass-border, rgba(128,128,128,0.08));
  flex-shrink: 0;
}
.history-speaker-tab {
  padding: 4px 12px;
  border: 1px solid var(--glass-border, rgba(128,128,128,0.12));
  border-radius: 14px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.history-speaker-tab:hover {
  border-color: var(--accent);
  color: var(--text);
}
.history-speaker-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ── Calendar Picker ── */
.calendar-picker {
  padding: 8px 0;
}
/* ── Calendar Nav ── */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 4px 10px;
}
.cal-nav-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.cal-nav-btn:hover { background: var(--accent-soft); color: var(--text); }

/* Year/month pill buttons */
.cal-nav-center {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-nav-pills {
  position: relative;
}
.cal-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--btn-radius, 12px);
  background: var(--glass-bg, rgba(255,255,255,0.75));
  backdrop-filter: blur(12px) saturate(180%);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.cal-pill:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cal-pill.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cal-pill svg {
  transition: transform 0.2s;
  flex-shrink: 0;
}
.cal-pill.active svg {
  transform: rotate(180deg);
}

/* Dropdown popover */
.cal-picker-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  min-width: 80px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--glass-bg, rgba(255,255,255,0.95));
  backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid var(--glass-border);
  border-radius: var(--btn-radius, 12px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  padding: 4px;
  display: flex;
  flex-direction: column;
  animation: calDropIn 0.15s ease-out;
}
@keyframes calDropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}
.cal-picker-opt {
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
}
.cal-picker-opt:hover { background: var(--accent-soft); }
.cal-picker-opt.sel {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 8px 4px;
}
.cal-weekday {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  padding: 4px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 8px;
}
.cal-day {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.cal-day-empty { cursor: default; }
.cal-day-has {
  color: var(--text);
  cursor: pointer;
}
.cal-day-has:hover {
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
}
.cal-day-sel {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600;
}
.cal-day-today:not(.cal-day-sel) {
  color: var(--accent);
  font-weight: 600;
}

.cal-clear {
  display: block;
  margin: 10px auto 0;
  padding: 5px 20px;
  border: 1px solid var(--glass-border, rgba(128,128,128,0.15));
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.cal-clear:hover { border-color: var(--accent); color: var(--accent); }

/* Export button in overlay header */
.chat-history-export-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background 0.12s;
}
.chat-history-export-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

/* ===== Settings Panel ===== */
.settings-panel {
  overflow-y: auto;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.settings-section {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.api-config-alert {
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-lg);
  color: var(--danger);
  font-size: 14px;
  margin-bottom: 16px;
}

.settings-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
  margin-bottom: 10px;
}

.settings-hint {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 12px;
}

.settings-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.settings-input {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font: inherit;
  font-size: 13.5px;
  color: var(--text-sec);
  cursor: not-allowed;
}

select.settings-input {
  cursor: pointer;
}

.settings-theme-row {
  display: flex;
  gap: 10px;
}

.settings-theme-btn {
  flex: 1;
  height: 44px;
  border: 1px solid var(--input-border);
  border-radius: var(--btn-radius);
  background: rgba(255, 255, 255, 0.45);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-sec);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s var(--ease-spring);
}

.settings-theme-btn:hover {
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
}

.settings-theme-btn.active {
  border-color: var(--pill-border);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.15);
}

/* Theme switcher (shared by Sidebar & SettingsPanel) */
.theme-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 12px;
}

.theme-switch-btn {
  flex: 1;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--input-border);
  border-radius: var(--btn-radius);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sec);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s var(--ease-spring);
}

.theme-switch-btn:hover {
  background: rgba(255, 255, 255, 0.65);
  color: var(--text);
}

.theme-switch-btn.active {
  border-color: var(--pill-border);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* ---- Sidebar theme popup ---- */

.sidebar-theme-wrap {
  position: relative;
}

.theme-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  min-width: 120px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 200;
  animation: theme-popup-in 0.18s ease-out;
}

@keyframes theme-popup-in {
  from { opacity: 0; transform: translateY(6px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.theme-popup-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--text-sec);
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
  outline: none;
}
.theme-popup-item:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

.theme-popup-item:hover { background: rgba(255,255,255,0.45); color: var(--text); }
.theme-popup-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.theme-popup-emoji { font-size: 15px; line-height: 1; }
.theme-popup-label { flex: 1; }
.theme-popup-check { font-size: 12px; color: var(--accent); margin-left: 4px; }

.theme-popup-divider { height: 1px; background: var(--glass-border); margin: 6px 2px; }
.theme-popup-fontrow { display: flex; flex-direction: column; gap: 5px; padding: 4px 10px 8px; }
.theme-popup-fontlabel { font-size: 11px; color: var(--text-dim); }
.theme-popup-fontbtns { display: flex; gap: 4px; }
.theme-popup-fontbtn {
  flex: 1;
  padding: 5px 0;
  font-size: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-sec);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}
.theme-popup-fontbtn.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  border-color: transparent;
}

/* ---- Usage stats ---- */

.usage-stats-grid {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.usage-stat-item {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
}

.usage-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
  margin-bottom: 4px;
}

.usage-stat-label {
  font-size: 12px;
  color: var(--text-sec);
}

.usage-action-list {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.usage-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
}

.usage-action-name {
  color: var(--accent);
  font-weight: 600;
  min-width: 100px;
}

.usage-action-count {
  color: var(--text-sec);
}

.usage-action-tokens {
  color: var(--text-sec);
  margin-left: auto;
}

.settings-about-line {
  font-size: 13.5px;
  color: var(--text-sec);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.settings-link:hover {
  text-decoration: underline;
}

/* ── Provider selector cards ── */
.provider-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.provider-card {
  flex: 1;
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  font: inherit;
  color: inherit;
}
.provider-card.active {
  border-color: var(--accent);
  background: var(--accent-soft, rgba(var(--accent-rgb), 0.08));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.15);
}
.provider-card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.provider-card-badge {
  font-size: 10px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.4;
}
.provider-card-desc {
  font-size: 12px;
  color: var(--text-dim);
}

/* ===== Voice Panel ===== */
.voice-upload-section {
  margin-bottom: 24px;
}

.voice-drop-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--surface);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.voice-drop-zone:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.voice-drop-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.voice-drop-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.voice-drop-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

.voice-upload-form {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.voice-upload-form .settings-input {
  flex: 1;
}

.voice-list-section {
  margin-top: 8px;
}

.voice-list-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

.voice-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
}

.voice-empty-icon {
  font-size: 40px;
  margin-bottom: 8px;
  opacity: 0.6;
}

.voice-empty-hint {
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.7;
}

.voice-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voice-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  gap: 12px;
}

.voice-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.voice-list-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-list-meta {
  font-size: 12px;
  color: var(--text-dim);
}

.voice-list-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.btn-ghost-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--btn-radius);
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.btn-ghost-sm:hover { background: rgba(128,128,128,0.06); border-color: rgba(128,128,128,0.2); }
.btn-ghost-sm:active { transform: translateY(0); }

.voice-preview-active {
  background: var(--accent-soft) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent) !important;
}

/* ===== Voice Cloning Settings ===== */
.voice-setup-link {
  margin-top: 16px;
  font-size: 13px;
  text-align: center;
  color: var(--text-dim);
}

.voice-guide-card {
  border: 2px dashed var(--accent-strong);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--accent-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.voice-guide-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-guide-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
}

.voice-guide-desc {
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.7;
  margin: 0;
}

.voice-upload-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.voice-file-input {
  display: none;
}

.voice-prompt-field {
  gap: 6px;
}

.voice-prompt-input {
  cursor: text !important;
}

.voice-msg {
  font-size: 12.5px;
  margin: 0;
}

.voice-msg-success {
  color: #5a9c5e;
}

.voice-msg-error {
  color: #e74c3c;
}

.voice-configured-card {
  border: 1px solid var(--input-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.voice-configured-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-duration-tag {
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 10px;
  border-radius: 20px;
}

/* Voice option layout: label fills, preview button right-aligned */
.voice-option-label {
  flex: 1;
}

.voice-preview-btn {
  margin-left: auto;
  font-size: 12px;
  flex-shrink: 0;
}

.voice-list-radio {
  flex-shrink: 0;
}

.voice-list-radio input[type="radio"] {
  accent-color: var(--primary);
  cursor: pointer;
}

/* Toggle switch */
.voice-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.voice-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.voice-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  cursor: pointer;
}

.voice-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.voice-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 26px;
  transition: background 0.25s;
}

.voice-toggle-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.voice-toggle input:checked + .voice-toggle-slider {
  background: var(--accent);
}

.voice-toggle input:checked + .voice-toggle-slider::before {
  transform: translateX(18px);
}

/* Speed selector */
.voice-speed-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-speed-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.voice-speed-group {
  display: flex;
  gap: 6px;
}

.voice-speed-pill {
  padding: 6px 14px;
  border: 1px solid var(--input-border);
  border-radius: 20px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text-sec);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.voice-speed-pill:hover {
  background: rgba(0,0,0,0.04);
  color: var(--text);
}

.voice-speed-pill.active {
  border-color: var(--pill-border);
  background: var(--accent-soft);
  color: var(--accent);
}

.voice-action-row {
  display: flex;
  gap: 10px;
}

.voice-delete-btn {
  color: #e74c3c !important;
  border-color: rgba(220, 60, 60, 0.2) !important;
}

.voice-delete-btn:hover:not(:disabled) {
  background: rgba(220, 60, 60, 0.06) !important;
  border-color: #e74c3c !important;
}

.voice-asr-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-sec);
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.04);
}

.voice-asr-icon {
  font-size: 16px;
}

.voice-asr-badge {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
}

.voice-asr-badge.available {
  color: #5a9c5e;
}

.voice-asr-badge.unavailable {
  color: #e74c3c;
}

/* ===== Voice service config ===== */
.voice-config-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.voice-config-row .settings-input {
  flex: 1;
}
.voice-test-ok {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: #5a9c5e;
  font-weight: 500;
}
.voice-test-fail {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: #e74c3c;
  font-weight: 500;
}

/* ===== Voice Bubble (WeChat-style) ===== */
.voice-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 18px;
  background: var(--card-bg);
  cursor: pointer;
  min-width: 80px;
  max-width: 200px;
  margin-top: 8px;
  border: 1px solid var(--input-border);
  transition: background 0.2s;
  user-select: none;
}

.voice-bubble:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.voice-waves {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}

.voice-waves i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  transition: height 0.15s;
}

.voice-waves i:nth-child(1) { height: 6px; }
.voice-waves i:nth-child(2) { height: 12px; }
.voice-waves i:nth-child(3) { height: 8px; }

.voice-bubble.playing .voice-waves i {
  animation: voice-wave 0.8s ease-in-out infinite;
}

.voice-bubble.playing .voice-waves i:nth-child(1) { animation-delay: 0s; }
.voice-bubble.playing .voice-waves i:nth-child(2) { animation-delay: 0.15s; }
.voice-bubble.playing .voice-waves i:nth-child(3) { animation-delay: 0.3s; }

@keyframes voice-wave {
  0%, 100% { height: 6px; }
  50% { height: 16px; }
}

.voice-duration {
  font-size: 12px;
  color: var(--text-sec);
  white-space: nowrap;
  min-width: 16px;
}

/* ===== Recording Button ===== */
.record-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  align-self: flex-end;
  border: 1px solid var(--input-border);
}

.record-btn:hover {
  background: rgba(106, 205, 198, 0.18);
}

.record-btn.recording {
  background: #ff4444;
  border-color: #ff4444;
  color: #fff;
}
.record-btn.recording::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255, 68, 68, 0.4);
  pointer-events: none;
  animation: mic-pulse 1s infinite;
}

/* box-shadow 动画触发重绘；改伪元素 scale+opacity 扩散环，走合成器 */
@keyframes mic-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.44); opacity: 0; }
}

.composer-bar.recording-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px calc(12px + var(--safe-bottom));
  justify-content: center;
}

.recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4444;
  animation: recording-dot-pulse 1s infinite;
}

@keyframes recording-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.recording-text {
  color: #ff4444;
  font-size: 14px;
  font-weight: 600;
}

.recording-hint {
  color: var(--text-dim);
  font-size: 12px;
  margin-left: 12px;
}

.recording-cancel-btn {
  padding: 4px 14px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  background: transparent;
  color: #ef4444;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.recording-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Voice indicator in topbar */
.chat-voice-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
}

.voice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.voice-dot.on {
  background: #22c55e;
}

.voice-dot.off {
  background: #999;
}

.voice-toggle-mini {
  width: 34px;
  height: 34px;
  border: 1px solid var(--input-border);
  border-radius: var(--btn-radius);
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
}
.voice-toggle-mini:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* ===== Modals ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 30, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modal-fade-in 0.2s var(--ease-out);
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  width: 420px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 28px 28px 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  animation: modal-slide-up 0.3s var(--ease-spring);
}

@keyframes modal-slide-up {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile bottom sheet (xiaohongshu): secondary-action modals slide up, top-only radius */
@media (max-width: 768px) {
  .modal-overlay.modal-sheet {
    align-items: flex-end;
  }
  .modal-overlay.modal-sheet .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    animation: sheet-slide-up 0.28s var(--ease-spring);
  }
  .modal-overlay.modal-sheet .modal-card::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--pill-bg);
  }
  .modal-overlay.modal-sheet .modal-title {
    padding-top: 6px;
  }
}

@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -28px;
  padding: 0 28px;
}

.modal-file-hint {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.modal-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sec);
}

.modal-required {
  color: #e74c3c;
}

.field-counter {
  float: right;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
}

.field-counter.over {
  color: #e53935;
  font-weight: 600;
}

.modal-input {
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.edit-card-modal {
  width: min(90vw, 720px);
  max-height: 90vh;
}

.edit-form-scroll {
  max-height: calc(90vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;
}

/* ── Archive List Modal ── */

.archive-list-modal {
  width: min(92vw, 480px);
  max-height: 85vh;
  padding: 24px 20px 20px;
}

.archive-new-btn {
  display: block;
  width: 100%;
  margin: 12px 0 8px;
  padding: 10px 0;
  border: 1px dashed var(--glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.archive-new-btn:hover {
  background: rgba(255, 255, 255, 0.45);
  border-color: var(--primary);
}

.archive-list-scroll {
  max-height: calc(85vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
}

.archive-slot-item {
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.archive-slot-item:hover {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.archive-stage-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.archive-stage-tag.stage-close {
  background: #ff6b9d22;
  color: #e91e63;
}

.archive-stage-tag.stage-trust {
  background: #2196f322;
  color: #1976d2;
}

.archive-stage-tag.stage-friendly {
  background: #4caf5022;
  color: #388e3c;
}

.archive-stage-tag.stage-distant {
  background: #ff980022;
  color: #f57c00;
}

.archive-stage-tag.stage-guard {
  background: #9e9e9e22;
  color: #757575;
}

.archive-affinity-nums {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--text-sec);
}

.archive-affinity-nums span {
  white-space: nowrap;
}

.edit-fieldset {
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.edit-fieldset legend {
  padding: 0 6px;
}

.edit-rel-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}

.edit-rel-input {
  flex: 1;
  min-width: 0;
}

.edit-rel-del {
  padding: 0 8px;
  height: 42px;
  flex-shrink: 0;
  color: var(--danger);
}

.role-confirm-text {
  font-size: 15px;
  color: var(--text-dim);
  margin: 12px 0 20px;
  line-height: 1.7;
}

.role-confirm-text strong {
  color: var(--text);
}

.modal-label-required {
  color: var(--danger);
  font-size: 12px;
}

.modal-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  font: 13px/1.5 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  color: var(--text);
  outline: none;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.modal-input::placeholder {
  color: var(--text-dim);
}

.modal-input-error {
  border-color: #e74c3c;
}

.modal-input-error:focus {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12);
}

.modal-field-error {
  font-size: 12px;
  color: #e74c3c;
}

.modal-textarea {
  padding: 10px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 80px;
  line-height: 1.7;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.modal-textarea::placeholder {
  color: var(--text-dim);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  flex-shrink: 0;
}

.modal-cancel-btn {
  height: 42px;
  padding: 0 20px;
  border-radius: var(--btn-radius);
}

.modal-confirm-btn {
  height: 42px;
  padding: 0 24px;
  border-radius: var(--btn-radius);
}

/* ===== Text Type Picker ===== */
.text-type-picker {
  display: flex;
  gap: 12px;
}

.text-type-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border: 2px solid var(--input-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  font: inherit;
}

.text-type-option:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.7);
}

.text-type-option.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.text-type-icon {
  font-size: 28px;
}

.text-type-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* ===== Image Crop Modal ===== */
.crop-modal-card {
  width: 420px;
}

.crop-preview-wrap {
  width: 300px;
  height: 300px;
  margin: 16px auto;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border: 2px dashed rgba(128, 128, 128, 0.3);
}

.crop-canvas {
  display: block;
}

.crop-loading {
  font-size: 14px;
  color: var(--text-dim);
}

.crop-drag-hint {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin: 8px 0 0;
}

.crop-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
}

.crop-slider-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-dim);
}

.crop-slider {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
}

.crop-scale-value {
  font-size: 12px;
  color: var(--text);
  min-width: 36px;
  text-align: right;
}

.crop-reset-btn {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}

.crop-reset-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ===== Banner Crop Modal ===== */
.banner-crop-card {
  width: 520px;
}

.banner-crop-dim-hint {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin: 2px 0 12px;
  line-height: 1.7;
}

.banner-crop-preview-wrap {
  width: 100%;
  max-height: 60vh;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

/* ===== Role Setup Modal ===== */
.role-setup-card {
  max-width: 420px;
}

.role-setup-hint {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 4px 0 12px;
}

.role-setup-hint strong {
  color: var(--text);
  font-weight: 600;
}

/* ===== Chat Avatar Edit ===== */
.chat-avatar-edit-wrap {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}

.chat-avatar-edit-wrap:hover .chat-avatar-edit-icon {
  opacity: 1;
}

.chat-avatar-edit-icon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

/* ===== Utility ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ==================== HomePage ==================== */

.home-page {
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  overflow-y: auto;
  padding: 16px 28px 32px;
}

/* ── Home segment bar ── */
.home-segment-bar {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 18px;
  gap: 2px;
}
.home-segment-btn {
  flex: 1;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.home-segment-btn:hover {
  color: var(--text-primary);
}
.home-segment-btn.active {
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.home-page .panel-title {
  font-size: 16px;
  margin-bottom: 12px;
}

.home-stats-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 16px 16px;
  margin-top: 14px;
  margin-bottom: 0;
  background: var(--glass-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
}

.home-stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.home-stats-item:hover {
  opacity: .75;
  transform: translateY(-1px);
}

.home-stats-num {
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.2;
}

.home-stats-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-subtle);
}

.home-stats-divider {
  width: 1px;
  height: 24px;
  background: var(--glass-border);
  flex-shrink: 0;
}

/* 统一区块头：accent 短竖条 + 标题 + 右侧动作 */
.home-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.home-section-tick {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--accent);
  align-self: center;
  flex-shrink: 0;
}

.home-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0;
}

.home-section-more {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.home-section-more:hover { color: var(--accent); }

.home-section-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Character card grid — 2 columns, soft shadow */
.home-card-section {
  flex: none;
  min-height: 0;
  margin-bottom: 24px;
}

.home-char-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .home-char-grid {
    grid-template-columns: 1fr;
  }
}

.home-char-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: 80px;
  position: relative;
}
.home-char-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* Home page char grid avatar */
.home-char-card > div:first-child {
  border-radius: var(--avatar-radius) !important;
  border-color: var(--glass-border) !important;
}

.home-char-arrow {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--fg-subtle);
  transition: color 0.2s, transform 0.2s;
  margin-left: auto;
  padding-left: 8px;
}
.home-char-card:hover .home-char-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.home-char-card-text {
  min-width: 0;
  flex: 1;
}

.home-char-card-text .home-char-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-char-card-text .home-char-identity {
  font-size: 11px;
  color: var(--text-dim);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* No chars empty state */
.home-no-chars {
  text-align: center;
  padding: 48px 20px;
}

/* Recent sessions */
.home-recent-section {
  margin-bottom: 16px;
  flex-shrink: 0;
}

.home-recent-container {
  background: var(--glass-bg);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--card-shadow);
}

.home-recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-recent-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  cursor: pointer;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  background: transparent;
  border-radius: 12px;
  transition: all 0.2s;
}

.home-recent-item:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.home-recent-item:disabled {
  opacity: 0.6;
  cursor: default;
}

.home-recent-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-recent-source {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 12px;
}

.home-recent-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-recent-time {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.home-recent-preview {
  font-size: 13px;
  color: var(--text-secondary, var(--text-dim));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.4;
}

.home-recent-loading {
  font-size: 11px;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.home-actions {
  margin-top: 32px;
  width: 100%;
  max-width: 400px;
}

.home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.home-empty-icon {
  font-size: 48px;
  line-height: 1;
}

.home-empty-text {
  font-size: 15px;
  color: var(--text-dim);
}

.home-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 32px 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.home-stat-count {
  font-size: 15px;
  color: var(--text-dim);
}

.home-stat-num {
  font-size: 36px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.home-action-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ==================== VoicePanel ==================== */

.voice-panel {
  overflow-y: auto;
}

.voice-section {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.voice-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.voice-toggle-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.voice-toggle-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
  cursor: pointer;
}

.voice-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.voice-options-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  margin-top: 8px;
}

.voice-options-title:first-child {
  margin-top: 0;
}

.voice-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: background 0.15s ease;
}

.voice-option:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

.voice-option input[type="radio"] {
  accent-color: var(--primary);
  cursor: pointer;
}

.voice-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  font-size: 13.5px;
  color: var(--text-dim);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.voice-status p {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-status-dot {
  font-size: 10px;
  line-height: 1;
}

/* ==================== User Role Presets ==================== */

.user-role-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.user-role-preset-btn {
  padding: 4px 12px;
  font-size: 12.5px;
  border: 1px solid var(--glass-border);
  border-radius: var(--btn-radius);
  background: var(--glass-bg);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.user-role-preset-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--text);
}

.user-role-preset-btn.active {
  background: var(--primary);
  color: var(--on-accent);
  border-color: var(--primary);
}

/* ==================== Summary Divider ==================== */

.summary-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  padding: 0 12px;
}

.summary-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--glass-border), transparent);
}

.summary-divider-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 70%;
  padding: 10px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.summary-divider-icon {
  flex-shrink: 0;
  font-size: 14px;
}

.summary-divider-text {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.7;
  word-break: break-word;
}

/* ==================== Text Meta ==================== */

.text-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 8px;
}

/* ==================== Login Page ==================== */

.login-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--bg-page);
  padding: 24px 20px 32px;
}

/* 舞台光 + 品牌（移动端顶部 hero，桌面左栏） */
.login-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  width: 100%;
  max-width: 380px;
  margin-top: auto;
  padding: 4px 16px 24px;
  overflow: hidden;
  flex-shrink: 0;
}

.stage-glow {
  position: absolute;
  inset: -60% 0 auto 0;
  height: 130%;
  background: radial-gradient(60% 70% at 50% 0%, var(--glow), transparent 72%);
  pointer-events: none;
}

.login-brand {
  position: relative;
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--text);
}

.login-brand em {
  font-style: normal;
  color: var(--accent);
}

.login-tagline {
  position: relative;
  margin: 6px 0 0;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--fg-muted);
}

.login-subtitle {
  position: relative;
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.login-features {
  position: relative;
  display: none;
  flex-direction: column;
  gap: 14px;
  margin-top: 30px;
}

.dl-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-muted);
  font-size: 14px;
}

.dl-feature svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex: 0 0 auto;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  margin-bottom: auto;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  padding: 28px;
}

/* 桌面：保持单列居中，功能点收敛为品牌下一行小字（不做双栏，宽屏不留空档） */
@media (min-width: 1024px) {
  .login-features {
    display: flex;
    flex-direction: row;
    gap: 22px;
    margin-top: 22px;
  }
  .dl-feature { font-size: 13px; }
  .login-brand { font-size: 40px; }
}

.login-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 22px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.login-tab {
  flex: 1;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.login-tab:hover {
  color: var(--text-primary);
}

.login-tab.active {
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  padding-left: 2px;
}

.login-field input {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 15px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s;
}

.login-field input::placeholder {
  color: var(--fg-subtle);
}

.login-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.login-pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-pw-wrap input {
  flex: 1;
  width: 100%;
  height: 46px;
  padding: 0 44px 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 15px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s;
}

.login-pw-wrap input::placeholder {
  color: var(--fg-subtle);
}

.login-pw-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.login-pw-toggle {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .2s;
}

.login-pw-toggle:hover {
  color: var(--accent);
}

.login-field-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  display: block;
}

.login-error {
  font-size: 13px;
  color: var(--danger);
  padding: 8px 12px;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
  border-radius: var(--radius-sm);
}

.login-pw-strength {
  height: 4px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: -8px;
}

.login-pw-strength-bar {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.login-submit {
  height: 48px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: background 0.2s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out);
  margin-top: 2px;
}

.login-submit:hover:not(:disabled) {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.login-submit:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
}

.login-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-code-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-code-wrap input {
  width: 100%;
  padding-right: 104px;
}

.login-code-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}

.login-code-btn:hover:not(:disabled) {
  color: var(--accent-strong);
}

.login-code-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-back-link {
  text-align: center;
  margin-top: 4px;
}

.login-link-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color .2s, background .2s;
}

.login-link-btn:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
}

/* ==================== Sidebar User ==================== */

.sidebar-user-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 16px 8px;
  margin-top: 8px;
  border-top: 1px solid var(--input-border);
}

.sidebar-user-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.sidebar-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.sidebar-user-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
  transition: background 0.18s;
  font-family: inherit;
  color: inherit;
}

.sidebar-user-link:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

.sidebar-action-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sidebar-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
}
.sidebar-action-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--text);
}

.sidebar-logout-btn:hover {
  background: rgba(231, 76, 60, 0.08);
  color: #e74c3c;
}

/* ==================== Admin Panel ==================== */

.admin-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--bg-page);
}

.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--sidebar-bg);
  border-right: none;
  box-shadow: 1px 0 0 var(--glass-border), 4px 0 24px rgba(0,0,0,0.04);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
}


.admin-nav-group {
  margin-bottom: 20px;
}

.admin-nav-group-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
  padding-left: 12px;
  letter-spacing: 0.08em;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  text-align: left;
}

.admin-nav-item:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.admin-nav-item.active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 8px var(--ring);
}

.admin-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 32px;
  background: var(--bg-page);
}

@media (max-width: 1100px) {
  .admin-main {
    padding: 24px 16px;
  }
}

.admin-hamburger {
  display: none;
}

.admin-theme-toggle {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}

.admin-theme-toggle:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

/* ---- Featured Tab ---- */

.admin-featured-desc {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.admin-featured-search {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.admin-input {
  padding: 9px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--input-bg);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}

.admin-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.admin-input::placeholder {
  color: var(--text-dim);
}

.admin-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-dim);
  font-size: 14px;
}

.admin-featured-search .admin-input {
  flex: 1;
}

.admin-featured-result {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.admin-featured-result-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.admin-featured-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-border);
}

.admin-featured-result-item:last-child {
  border-bottom: none;
}

.admin-featured-result-name {
  flex: 1;
  font-size: 13px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-featured-result-identity {
  font-size: 11px;
  color: var(--text-dim);
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-featured-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border);
}

.admin-featured-list-item:last-child {
  border-bottom: none;
}

.admin-featured-rank {
  font-size: 12px;
  color: var(--text-dim);
  width: 24px;
  flex-shrink: 0;
  text-align: center;
}

.admin-featured-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--glass-border);
}

.admin-featured-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-featured-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,255,255,0.2);
  background: var(--accent);
}

.admin-featured-info {
  flex: 1;
  min-width: 0;
}

.admin-featured-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.admin-featured-identity {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-featured-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.admin-featured-btn {
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
}

@media (max-width: 768px) {
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .3s;
  }
  .admin-sidebar.open {
    transform: translateX(0);
  }
  .admin-hamburger {
    display: block;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 101;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-primary);
  }
  .admin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
  }
}

/* ---- Dashboard stat cards (colored) ---- */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  padding: 20px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
}

.stat-card .stat-label {
  font-size: 13px;
  color: var(--text-dim);
}

.stat-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 4px;
}

/* ---- SVG ring progress ---- */

.dashboard-ring-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.dashboard-ring-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.dashboard-ring-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.dashboard-ring-detail {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---- Area chart ---- */

.dashboard-chart {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 16px;
  overflow: hidden;
  width: 100%;
}

/* ---- Glass card wrapper ---- */

.admin-card {
  background: var(--glass-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: 28px;
  max-width: 100%;
  overflow: clip;
}

.admin-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--input-border);
}

/* ---- Loading / Error ---- */

.admin-loading,
.admin-error {
  text-align: center;
  padding: 48px 0;
  color: var(--text-dim);
  font-size: 14px;
}

.admin-error {
  color: var(--danger);
}

.admin-error-banner {
  background: color-mix(in srgb, var(--danger) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-error-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.admin-error-close:hover { background: color-mix(in srgb, var(--danger) 30%, transparent); }

/* ---- Table ---- */

.admin-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  max-width: 100%;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 600px;
}

@media (max-width: 900px) {
  .admin-table {
    font-size: 13px;
  }
  .admin-table th,
  .admin-table td {
    padding: 10px 10px;
  }
  .admin-actions-cell {
    flex-wrap: wrap;
    gap: 4px;
  }
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 12px 16px;
}

.admin-table th {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--input-border);
  white-space: nowrap;
}

.admin-table td {
  color: var(--text-primary);
  border-bottom: 1px solid var(--input-border);
  vertical-align: middle;
  white-space: nowrap;
}

/* Zebra striping */
.admin-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.015);
}

/* Hover highlight */
.admin-table tbody tr:hover {
  background: rgba(var(--accent-rgb), 0.06);
}

/* ---- Status badges ---- */

.admin-status {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-weight: 500;
}

.admin-status.disabled {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
}

/* ---- Action buttons (compact glass) ---- */

.admin-actions-cell {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

.admin-action-btn {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--btn-radius);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.admin-action-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Usage stats grid ---- */

.admin-stats-grid {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.admin-stat-card {
  flex: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: center;
}
.admin-stat-value {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.admin-stat-label {
  font-size: 12px;
  color: var(--text-dim);
}

/* ---- Invite code section ---- */

.invite-generate-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}

.invite-count-input {
  width: 72px;
  padding: 9px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass-bg);
  font-size: 14px;
  color: var(--text-primary);
  text-align: center;
  transition: border-color .2s;
}

.invite-count-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.invite-generate-btn.btn-primary {
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
}
.invite-generate-btn.btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.35);
}

.invite-code-cell code {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 12px;
  background: rgba(128,128,128,0.08);
  padding: 4px 10px;
  border-radius: 5px;
  word-break: break-all;
}

/* ---- Batch delete row ---- */

.invite-batch-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--input-border);
}

.invite-batch-hint {
  font-size: 13px;
  color: var(--text-dim);
}

/* ==================== Distill Task Bar ==================== */

/* ── Collapsed: FAB ── */
.distill-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.distill-fab:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.distill-fab-icon {
  font-size: 20px;
  line-height: 1;
}

.distill-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent, #667eea);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.distill-fab-badge.badge-pulse {
  animation: badge-pulse 1.5s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}

/* Shake animation for new task arrival */
.distill-fab.shake {
  animation: distill-shake 0.5s ease;
}

@keyframes distill-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px) rotate(-4deg); }
  40%      { transform: translateX(4px) rotate(4deg); }
  60%      { transform: translateX(-3px) rotate(-3deg); }
  80%      { transform: translateX(3px) rotate(3deg); }
}

/* ── Expanded: Panel ── */
.distill-panel {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 1000;
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--card-blur);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
}

.distill-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.distill-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.distill-panel-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.distill-panel-close:hover {
  background: var(--pill-bg);
  color: var(--text);
}

.distill-panel-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}

@media (max-width: 768px) {
  .distill-fab {
    bottom: calc(64px + var(--safe-bottom));
  }
  .distill-panel {
    left: 12px;
    right: 12px;
    bottom: calc(80px + var(--safe-bottom));
    width: auto;
  }
}

.distill-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  pointer-events: auto;
  cursor: default;
  transition: all .2s;
}

.distill-task-item.done {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #166534;
  cursor: pointer;
}

.distill-task-item.error {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

.distill-task-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.distill-task-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.distill-task-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.distill-task-awakening {
  font-style: italic;
  opacity: 0.8;
  font-size: 0.92em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: distill-awakening-fade-in 0.4s ease forwards;
}

@keyframes distill-awakening-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 0.8; transform: translateY(0); }
}

.distill-task-pct {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 2.8em;
  text-align: right;
}

.distill-task-bar-track {
  flex-shrink: 0;
  width: 100px;
  height: 4px;
  border-radius: 2px;
  background: var(--pill-bg);
  overflow: hidden;
}

.distill-task-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width .5s;
}

.distill-task-bar-fill.indeterminate {
  width: 30% !important;
  transform-origin: left;
  background: linear-gradient(90deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 40%, var(--accent)) 50%, var(--primary) 100%);
  background-size: 200% 100%;
  animation: distill-indeterminate 1.5s ease-in-out infinite;
}

/* width 动画每帧触发布局；改 scaleX（0.5↔1.5 对应 15%↔45%），只走合成器 */
@keyframes distill-indeterminate {
  0%   { transform: scaleX(0.5); background-position: 200% 0; }
  50%  { transform: scaleX(1.5); background-position: 0% 0; }
  100% { transform: scaleX(0.5); background-position: -200% 0; }
}

.distill-task-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .15s;
}

.distill-task-close:hover {
  background: var(--pill-bg);
  color: var(--text);
}

.distill-task-retry {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .15s;
  margin-right: 2px;
}
.distill-task-retry:hover {
  background: var(--pill-bg);
  color: var(--accent);
}

.distill-task-item.error .distill-task-text {
  color: #991b1b;
}

.distill-task-item.is-queued {
  opacity: 0.7;
}
.distill-task-item.is-queued .distill-task-bar-fill {
  background: var(--text-dim);
  animation: distill-queued-pulse 1.8s ease-in-out infinite;
}

@keyframes distill-queued-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.8; }
}

/* ==================== Awakening Toast ==================== */

.awakening-toast {
  position: fixed;
  bottom: 70px;
  right: 20px;
  z-index: 1001;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  max-width: 360px;
  pointer-events: auto;
  animation: awakening-toast-in 0.5s ease-out forwards;
}

@keyframes awakening-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.awakening-toast-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--text-dim, #999);
  cursor: pointer;
  border-radius: 50%;
  transition: all .15s;
}

.awakening-toast-close:hover {
  background: var(--pill-bg, #eee);
  color: var(--text, #333);
}

.awakening-toast-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.awakening-toast-avatar {
  flex-shrink: 0;
  margin-top: 2px;
}

.awakening-toast-content {
  flex: 1;
  min-width: 0;
}

.awakening-toast-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #333);
  margin-bottom: 4px;
}

.awakening-toast-line {
  font-style: italic;
  font-size: 13px;
  color: var(--text-secondary, #666);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 10px;
}

.awakening-toast-btn {
  display: inline-block;
  padding: 5px 14px;
  border: none;
  border-radius: 6px;
  background: var(--primary, #6366f1);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
}

.awakening-toast-btn:hover {
  opacity: 0.85;
}

/* Card detail: awakening line */
/* Card detail: awakening bubble */
.card-awakening-bubble {
  position: relative;
  background: var(--assistant-bubble);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.92em;
  line-height: 1.7;
  max-width: 60%;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  flex-shrink: 1;
  align-self: center;
  backdrop-filter: blur(8px);
}

.card-awakening-bubble::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--assistant-bubble);
  border-left: 0;
}

/* 剧光肖像 hero 内：觉醒气泡全宽、尾巴朝上指向头像 */
.card-hero .card-awakening-bubble {
  width: 100%;
  max-width: 100%;
  margin-top: 14px;
}

.card-hero .card-awakening-bubble::before {
  left: 22px;
  top: -6px;
  transform: none;
  border: 6px solid transparent;
  border-bottom-color: var(--assistant-bubble);
  border-top: 0;
  border-right-color: transparent;
}

/* ---- Profile page ---- */

.profile-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ===== Profile stats bar ===== */
.profile-stats-bar {
  display: flex;
  gap: 8px;
}
.profile-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card, transparent);
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s;
  text-align: center;
  color: var(--text);
}
.profile-stat-item:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.profile-stat-item.dim {
  opacity: 0.4;
}
.profile-stat-icon {
  font-size: 20px;
  line-height: 1;
}
.profile-stat-count {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
.profile-stat-label {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.profile-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  position: relative;
  transition: background 0.18s, transform 0.18s;
}

.profile-grid-item:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.profile-grid-item:active {
  transform: scale(0.97);
}

.profile-grid-icon {
  font-size: 28px;
  line-height: 1;
}

.profile-grid-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.profile-grid-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--danger);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-grid-badge-ok {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
  color: var(--success);
}

.profile-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .profile-grid-item {
    padding: 16px 8px;
  }
  .profile-grid-icon {
    font-size: 24px;
  }
  .profile-grid-label {
    font-size: 12px;
  }
}

.profile-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.profile-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px 0;
}

.profile-avatar-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.profile-avatar-wrap {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.profile-avatar-wrap:disabled {
  cursor: wait;
  opacity: 0.7;
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  opacity: 0;
  transition: opacity 0.2s;
}

.profile-avatar-wrap:hover .profile-avatar-overlay {
  opacity: 1;
}

.profile-avatar-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-username {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.profile-avatar-hint {
  font-size: 12px;
  color: var(--text-dim);
}

.profile-inline-msg {
  font-size: 12px;
  color: var(--accent);
}

.profile-inline-msg.success {
  color: var(--success);
}

.profile-inline-msg.error {
  color: var(--error, #ef4444);
}

.profile-details {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-detail-label {
  width: 80px;
  font-size: 13px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.profile-detail-value {
  font-size: 13px;
  color: var(--text);
}

.profile-detail-value.mono {
  font-family: var(--mono, 'SF Mono', 'Cascadia Code', monospace);
  font-size: 12px;
}

.profile-password-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-field-label {
  font-size: 13px;
  color: var(--text-dim);
}

.profile-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg, #f9fafb);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.profile-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.profile-save-btn {
  align-self: flex-start;
  margin-top: 4px;
}

.profile-link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
  text-decoration: underline;
}

.profile-link-btn:hover {
  opacity: 0.8;
}

.profile-verified-badge {
  display: inline-block;
  font-size: 11px;
  color: #fff;
  background: var(--success);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.profile-bind-email-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
}

.profile-code-field {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.profile-code-field .profile-input {
  flex: 1;
  min-width: 0;
}

/* ---- Profile: privacy toggles ---- */

.profile-privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
}
.profile-privacy-row:last-child {
  border-bottom: none;
}

.profile-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.profile-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.profile-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 22px;
  transition: background 0.25s;
}
.profile-toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--on-accent);
  border-radius: 50%;
  transition: transform 0.25s;
}
.profile-toggle input:checked + .profile-toggle-slider {
  background: var(--primary, #7B61FF);
}
.profile-toggle input:checked + .profile-toggle-slider::before {
  transform: translateX(18px);
}

/* ---- Retracted message ---- */

.msg-retracted {
  color: var(--text-dim);
  font-size: 0.85em;
  cursor: pointer;
  font-style: italic;
  user-select: none;
}

.retracted-peek {
  margin-left: 8px;
  color: var(--accent);
  font-size: 0.8em;
  font-style: normal;
}

.retracted-original {
  margin-top: 6px;
  padding: 8px;
  background: var(--bg-secondary, #f3f4f6);
  border-radius: 8px;
  font-style: normal;
  color: var(--text);
}

/* ===== Market Page ===== */
.market-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.market-search-form {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}
.market-search-input {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.market-search-input::placeholder {
  color: var(--fg-subtle);
}
.market-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.market-sort-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.market-sort-btn {
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.15s var(--ease-spring);
}
.market-sort-btn:hover {
  color: var(--fg);
  background: rgba(var(--accent-rgb), 0.08);
}
.market-sort-btn:active {
  transform: scale(0.97);
}
.market-sort-btn.active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.30);
}
.market-sort-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* ── 市场布局：桌面双栏（侧栏 + 主区）/ 移动单栏 ── */
.market-layout {
  display: block;
}
.market-side {
  display: none;
}

/* 桌面侧栏分类（真实 /api/market/tags，无后端计数故不画 count） */
.mkt-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--fg-muted);
  cursor: pointer;
  text-align: left;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.mkt-cat:hover {
  color: var(--fg);
  background: var(--surface);
}
.mkt-cat:active {
  transform: scale(0.98);
}
.mkt-cat.is-active {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.25);
}
.mkt-cat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* 桌面头部：display 字体标题 + 真实总数 + 搜索 */
.mkt-head {
  display: none;
}
.mkt-head-text {
  min-width: 0;
}
.mkt-head-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.mkt-head-sub {
  color: var(--fg-subtle);
  font-size: 13px;
  margin: 4px 0 0;
}

/* 移动 chips：分类过滤（同一 tag 状态驱动） */
.market-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.market-chips::-webkit-scrollbar {
  display: none;
}
.market-chip {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.market-chip:hover {
  color: var(--fg);
  border-color: var(--border-strong);
}
.market-chip:active {
  transform: scale(0.97);
}
.market-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25);
}
.market-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

@media (min-width: 768px) {
  .market-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 28px;
    align-items: start;
  }
  .market-side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 24px;
  }
  .mkt-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
  }
  .mkt-head .market-search-form {
    max-width: 280px;
    flex: none;
  }
  .market-chips {
    display: none;
  }
  .market-toolbar .market-toolbar-search {
    display: none;
  }
}
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.market-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-card);
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}
.market-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.market-card-body {
  flex: 1;
  min-width: 0;
}
.market-card-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
}
.market-card-identity {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.market-card-source {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.market-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
}
.market-card-author {
  display: flex;
  align-items: center;
  gap: 3px;
}
.market-card-likes {
  display: flex;
  align-items: center;
  gap: 3px;
}
.market-like-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
  transition: transform 0.15s var(--ease-spring);
}
.market-like-btn:active {
  transform: scale(0.85);
}

.market-card-v2-stats span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
}
.market-like-btn.liked {
  animation: market-like-pop 0.3s ease;
}
@keyframes market-like-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.market-use-btn {
  flex-shrink: 0;
  font-size: 13px;
  padding: 6px 14px;
}
.market-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* ── Market Card V2 — xiaohongshu-style content card (图区 + 白底正文) ── */
.market-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  outline: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.market-card-v2:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── Cover: 顶部图区，独立于正文 ── */
.market-card-v2-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--surface-2);
}

.market-card-v2-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}
.card-badge-new {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f59e0b;
  color: #fff;
  line-height: 1.4;
}
.card-badge-public {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}

.market-card-v2-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s ease;
}

.market-card-v2:hover .market-card-v2-cover-img {
  transform: scale(1.04);
}

.market-card-v2-cover-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--primary), var(--accent, var(--primary-hover)));
  overflow: hidden;
}

.market-card-v2-fallback-letter {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  padding: 0.22em 0.4em;
  font-size: clamp(34px, 9vw, 64px);
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.02em;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  user-select: none;
  pointer-events: none;
  font-family: var(--font-display, inherit);
}

/* ── 正文区：图下卡片内容 ── */
.market-card-v2-glass-info {
  position: relative;
  z-index: 3;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
}

.market-card-v2-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-card-v2-identity {
  font-size: 13px;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
}

.market-card-v2-stats {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.market-card-v2-source {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0;
}

.market-card-v2-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.market-card-v2-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.market-card-v2-author {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  font-size: 11px;
  color: var(--text-dim);
}

.market-card-v2-stats .market-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
}

.market-card-v2-stats .market-like-btn:hover {
  color: var(--text);
}

.market-card-v2-stats .market-like-btn.liked {
  color: var(--accent);
}

.market-loading-more {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: var(--text-dim);
}

/* ===== Market Card Detail ===== */
.market-detail-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.market-detail-header {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--glass-bg);
  backdrop-filter: var(--card-blur);
  border-bottom: 1px solid var(--glass-border);
  padding: 12px 20px;
  flex-shrink: 0;
}
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-header-actions .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.page-header-actions .btn-icon:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text-primary);
}
.page-header-actions .btn-icon.danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.market-detail-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px;
  padding-bottom: 80px;
}

.market-detail-split {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.market-detail-sidebar {
  width: 280px;
  min-width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}

.market-detail-main {
  flex: 1;
  min-width: 0;
}

.market-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card-section--wide {
  grid-column: 1 / -1;
}

.market-detail-grid .card-section {
  margin-top: 0;
  padding: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  cursor: default;
}

.market-detail-grid .card-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sec);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.market-detail-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px 0 6px;
}

.market-detail-cover-img {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  object-fit: cover;
  border: 3px solid var(--glass-bg);
  box-shadow: var(--shadow);
}

.market-detail-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 600;
  color: var(--text);
  margin: 8px 0 2px;
}

.market-detail-identity {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.market-detail-background {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0;
}

.market-detail-background.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}

.market-detail-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-dim);
  margin: 12px 0;
}

/* Author bar */
.market-detail-author-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 12px 0;
}

.market-detail-sidebar .market-detail-author-bar {
  border: none;
  margin: 0;
  padding: 8px 0;
  gap: 8px;
}

.market-detail-author-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.market-detail-author-name:hover {
  color: var(--primary);
}

.market-detail-author-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s var(--ease-spring);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--accent-rgb), 0.06);
}

.btn-outline:active {
  transform: scale(0.97);
}

.btn-outline:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.market-detail-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
  font-size: 14px;
}

.market-detail-sidebar .market-detail-stats {
  margin: 4px 0;
  gap: 12px;
}

.market-detail-use-btn {
  width: 100%;
  padding: 10px 0;
  font-size: 14px;
  border-radius: 10px;
}

.market-detail-private-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 0;
  font-size: 13px;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.market-detail-like-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  color: var(--text-secondary);
  transition: transform 0.18s, background 0.18s;
}

.market-detail-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
  color: var(--text-secondary);
}

.market-detail-stat-num {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.market-detail-like-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

.market-detail-like-btn.liked {
  color: var(--accent);
}

.market-detail-like-btn:active {
  transform: scale(1.2);
}

.market-detail-actions {
  display: flex;
  gap: 12px;
}

/* Comments */
.market-detail-comments {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);
}

.market-detail-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
}

.market-detail-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  padding: 32px;
}

.market-detail-comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.market-detail-comment-item {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.market-detail-comment-body {
  flex: 1;
  min-width: 0;
}

.market-detail-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.market-detail-comment-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
}

.market-detail-comment-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.market-detail-comment-name:hover {
  color: var(--accent);
}

.market-detail-comment-time {
  font-size: 11px;
  color: var(--text-dim);
}

.market-detail-comment-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

.market-detail-comment-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.comment-action-btn {
  background: none;
  border: none;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}

.comment-action-btn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text-secondary);
}

.comment-action-btn.danger {
  color: #ef4444;
}

.comment-action-btn.danger:hover {
  background: rgba(239,68,68,0.08);
  color: #dc2626;
}

.market-detail-batch-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.comment-checkbox {
  margin-top: 8px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.report-reason-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
}

.report-reason-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Fixed comment input at bottom */
.market-detail-fixed-input {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.market-detail-fixed-input .market-detail-comment-field {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}

.market-detail-fixed-input .market-detail-comment-field:focus {
  border-color: var(--accent);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.12);
}
.market-detail-comment-emoji-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.market-detail-comment-emoji-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s;
  flex-shrink: 0;
}
.market-detail-comment-emoji-btn:hover {
  background: var(--secondary);
}
.market-detail-comment-emoji-wrap .emoji-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 100;
}

/* @ 角色选择器 */
.market-detail-at-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.market-detail-at-btn {
  background: none; border: none; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--text-muted);
  padding: 4px 6px; border-radius: 6px; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.market-detail-at-btn:hover, .market-detail-at-btn.active { background: var(--bg-hover); color: var(--accent); }
.market-detail-at-picker {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px; min-width: 200px; max-width: 260px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 200;
}
.market-detail-at-tip { font-size: 11px; color: var(--text-muted); padding: 4px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.market-detail-at-empty { font-size: 12px; color: var(--text-muted); padding: 6px; text-align: center; }
.market-detail-at-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 6px 8px; border: none; background: none;
  cursor: pointer; border-radius: 6px; transition: background 0.15s;
}
.market-detail-at-item:hover { background: var(--bg-hover); }
.at-item-name { font-size: 13px; color: var(--text); font-weight: 500; }
.at-item-author { font-size: 11px; color: var(--text-muted); }

/* AI 回应评论 */
.market-detail-ai-reply {
  background: var(--bg-hover); border-left: 3px solid var(--border);
  border-radius: 0 8px 8px 0; padding: 8px 12px; margin-top: 4px;
}
.ai-reply-label { font-size: 11px; color: var(--accent); display: block; margin-bottom: 4px; }
.market-detail-at-loading { text-align: center; font-size: 12px; color: var(--text-muted); padding: 8px; }

/* ===== Messages Page ===== */
/* ═══════════════════════════════════════════════════
   PRIVATE MESSAGES — WeChat-style dual-panel layout
   ═══════════════════════════════════════════════════ */
.messages-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.messages-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--shadow-sm);
}

/* ── Sidebar ── */
.messages-sidebar {
  width: 280px;
  min-width: 260px;
  max-width: 320px;
  border-right: 1px solid var(--glass-border);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
}

.messages-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  box-sizing: border-box;
}

.messages-sidebar-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.messages-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  transition: background 0.2s;
  width: 100%;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
}

.messages-conv-item:hover {
  background: var(--accent-soft);
}

.messages-conv-item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left-color: var(--accent);
}

.messages-conv-body {
  flex: 1;
  min-width: 0;
}

.messages-conv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.messages-conv-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  font-family: var(--font-display);
}

.messages-conv-time {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.messages-conv-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.messages-conv-preview {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  margin: 0;
}

.messages-conv-badge {
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 5px;
  flex-shrink: 0;
}

/* ── Chat area ── */
.messages-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card-bg, var(--bg-page));
}

.messages-empty-chat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13px;
}

.messages-load-more {
  text-align: center;
}

/* ── Message rows with time divider ── */
.messages-time-divider {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  padding: 8px 0;
  user-select: none;
}

.messages-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.messages-row.mine {
  justify-content: flex-end;
}

.messages-row.other {
  justify-content: flex-start;
}


.messages-msg-text {
  white-space: pre-wrap;
}

.messages-status {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  align-self: center;
}

.messages-status.sending {
  opacity: 0.5;
  animation: pulse-fade 1.2s ease-in-out infinite;
}

.messages-status.failed {
  color: var(--danger);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 16px;
  padding: 2px;
  border-radius: 50%;
  transition: background 0.15s;
}

.messages-status.failed:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

@keyframes pulse-fade {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.messages-offline-banner {
  text-align: center;
  font-size: 12px;
  color: #fff;
  background: #78909c;
  padding: 6px 12px;
  flex-shrink: 0;
}

.messages-status.queued {
  opacity: 0.5;
  font-size: 12px;
}

/* ── Resizable input area drag handle ── */
.resize-input-area {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 0;
}
.resize-input-area > *:last-child {
  flex: 1;
  min-height: 0;
}
.resize-handle {
  height: 6px;
  cursor: ns-resize;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resize-handle::before {
  content: '';
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--border-color);
  opacity: 0.35;
  transition: opacity 0.15s, background 0.15s;
}
.resize-handle:hover::before {
  opacity: 0.7;
  background: var(--accent);
}

.messages-input {
  flex: 1;
  min-height: 42px;
  resize: none;
  font-size: 14px;
  border: none;
  outline: none;
  background: transparent;
  padding: 12px 16px;
  font-family: inherit;
  line-height: 1.7;
  color: var(--text);
}

.messages-input::placeholder {
  color: var(--text-dim);
}

.messages-input-toolbar-top {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 0;
}

.messages-toolbar-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.messages-toolbar-btn:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

/* ── Emoji Picker ── */
.emoji-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  width: 320px;
  max-height: 300px;
  background: var(--glass-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}
.emoji-picker-cats {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.emoji-picker-cats::-webkit-scrollbar { display: none; }
.emoji-picker-cat {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.emoji-picker-cat:hover { background: rgba(128,128,128,0.08); }
.emoji-picker-cat.active { background: rgba(var(--accent-rgb), 0.12); }
.emoji-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  align-content: flex-start;
}
.emoji-picker-item {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, transform 0.1s;
}
.emoji-picker-item:hover {
  background: rgba(128,128,128,0.1);
  transform: scale(1.15);
}

.messages-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 12px 10px;
}
.messages-input-toolbar-left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.messages-send-btn {
  flex-shrink: 0;
  height: 32px;
  padding: 0 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}

.messages-send-btn:hover:not(:disabled) {
  opacity: 0.85;
}

.messages-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== PrivateMessageChat ===== */
.private-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.private-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  background: var(--glass-bg);
  box-sizing: border-box;
}

.private-chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.private-chat-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.private-chat-header-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.private-chat-header-status {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.private-chat-header-status.online {
  color: var(--success);
}
.private-chat-header-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  display: inline-block;
  flex-shrink: 0;
}
.private-chat-header-status.online .private-chat-header-status-dot {
  background: var(--success);
}

.private-chat-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
}

.private-chat-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-rename-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.chat-rename-btn:hover { opacity: 1; color: var(--accent); }

.chat-delete-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.chat-delete-btn:hover { opacity: 1; color: #e74c3c; }

.messages-conv-item-wrap {
  position: relative;
}

.messages-conv-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.messages-conv-item-wrap:hover .messages-conv-delete-btn {
  opacity: 1;
}
.messages-conv-delete-btn:hover {
  background: #e74c3c;
}

.private-chat-title-input {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 4px 8px;
  outline: none;
  flex: 1;
  min-width: 0;
}

.private-chat-body {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-chat-messages-area {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===== DM PrivateChat redesign (charsim-dm-redesign) ===== */
.dm { display:flex; flex-direction:column; height:100%; position:relative; background:var(--bg-page); }

/* 头部 */
.dm-header {
  position:relative; z-index:10; display:flex; align-items:center; gap:10px;
  padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top,0px));
  border-bottom:1px solid color-mix(in srgb,var(--text) 7%, transparent);
  background:color-mix(in srgb,var(--bg-page) 56%, transparent);
  backdrop-filter:blur(24px) saturate(190%); flex-shrink:0;
}
.dm-back {
  width:34px; height:34px; border-radius:10px; border:none; background:transparent; color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s,color .15s,transform .12s;
}
.dm-back:hover { background:color-mix(in srgb,var(--text) 7%, transparent); color:var(--text); }
.dm-back:active { transform:scale(.94); }
.dm-back svg { width:20px; height:20px; }
.dm-peer { display:flex; align-items:center; gap:10px; min-width:0; flex:1; cursor:pointer; margin:-4px -6px; padding:4px 6px; border-radius:12px; transition:background .15s; }
.dm-peer:hover { background:color-mix(in srgb,var(--text) 5%, transparent); }
.dm-peer-avatar {
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 82%,#fff),color-mix(in srgb,var(--accent) 52%,#fff));
  color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
  box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
}
.dm-peer-meta { display:flex; flex-direction:column; min-width:0; gap:1px; }
.dm-peer-name { font-size:15px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family: var(--font-display); }
.dm-peer-status { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-dim); white-space:nowrap; }
.dm-peer-status .dot { width:6px; height:6px; border-radius:50%; background:var(--text-dim); flex-shrink:0; }
.dm-peer-status.online { color:var(--success); }
.dm-peer-status.online .dot { background:var(--success); animation:pulse 2.4s var(--ease-out) infinite; }
.dm-peer-tag {
  font-size:10px; font-weight:600; padding:2px 8px; border-radius:99px; flex-shrink:0;
  background:color-mix(in srgb,var(--warning) 14%, transparent); color:color-mix(in srgb,var(--warning) 82%, var(--text));
  border:1px solid color-mix(in srgb,var(--warning) 26%, transparent);
}
.dm-header-actions { display:flex; gap:2px; flex-shrink:0; }
.dm-icon-btn {
  width:34px; height:34px; border-radius:10px; border:none; background:transparent; color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s,color .15s,transform .12s;
}
.dm-icon-btn:hover { background:color-mix(in srgb,var(--text) 7%, transparent); color:var(--text); }
.dm-icon-btn:active { transform:scale(.92); }
.dm-icon-btn.active { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent); }
.dm-icon-btn svg { width:19px; height:19px; }

/* 离线横幅 */
.dm-offline {
  position:relative; z-index:10; text-align:center; font-size:12px; font-weight:600;
  color:color-mix(in srgb,var(--warning) 88%, #000); background:color-mix(in srgb,var(--warning) 16%, var(--bg-page));
  padding:7px 14px; flex-shrink:0; border-bottom:1px solid color-mix(in srgb,var(--warning) 22%, transparent);
}

/* 消息流 */
.dm-scroll { position:relative; z-index:1; flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 14px 12px; display:flex; flex-direction:column; gap:3px; }
.dm-scroll::-webkit-scrollbar{width:5px} .dm-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 16%,transparent);border-radius:99px;border:1px solid transparent;background-clip:padding-box}
.dm-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text) 28%,transparent);background-clip:padding-box}

.dm-loading { text-align:center; padding:14px 0 6px; }
.dm-spinner { display:inline-block; width:20px; height:20px; border-radius:50%; border:2px solid color-mix(in srgb,var(--text) 12%, transparent); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 40%, transparent); } 70% { box-shadow:0 0 0 7px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes bubble-in { from { opacity:0; transform:translateY(8px) scale(.97); } }
@keyframes fade-in { from { opacity:0; } }
@keyframes pop-in { from { opacity:0; transform:translateY(4px) scale(.96); } }

.dm-date {
  text-align:center; font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--text-dim);
  margin:12px 0 8px; user-select:none;
}
.dm-date span { background:color-mix(in srgb,var(--bg-page) 78%, transparent); padding:3px 13px; border-radius:99px; border:1px solid color-mix(in srgb,var(--text) 7%, transparent); backdrop-filter:blur(10px); box-shadow:0 1px 4px color-mix(in srgb,var(--text) 3%, transparent); }

/* 消息行（合并组） */
.dm-row { display:flex; gap:9px; align-items:flex-end; }
.dm-row.mine { flex-direction:row-reverse; }
.dm-row.is-new .dm-avatar, .dm-row.is-new .dm-bubble { animation:bubble-in .3s var(--ease-out) both; }
.dm-avatar {
  width:30px; height:30px; border-radius:10px; flex-shrink:0; align-self:flex-end;
  background:var(--card-bg); border:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--text-secondary);
  box-shadow:0 1px 3px color-mix(in srgb,var(--text) 6%,transparent);
}
.dm-row.grouped .dm-avatar { visibility:hidden; }
.dm-row.mine .dm-avatar { background:color-mix(in srgb,var(--accent) 26%, var(--card-bg)); border-color:color-mix(in srgb,var(--accent) 34%, transparent); color:color-mix(in srgb,var(--accent) 45%, var(--text)); }

.dm-bubbles { display:flex; flex-direction:column; gap:5px; max-width:72%; min-width:0; }
.dm-row.mine .dm-bubbles { align-items:flex-end; }
.dm-row .dm-name { font-size:11px; font-weight:700; color:var(--text-secondary); padding:0 4px 2px; letter-spacing:.01em; }
.dm-row.grouped .dm-name { display:none; }

.dm-bubble {
  position:relative; padding:9px 14px; font-size:14px; line-height:1.65; word-break:break-word; overflow-wrap:anywhere;
  width:fit-content; max-width:100%;
}
.dm-bubble--l {
  background:var(--bubble-l);
  color:var(--bubble-l-clr); border-radius:14px 14px 14px 4px; border:1px solid color-mix(in srgb,var(--text) 8%,transparent);
  box-shadow:0 1px 2px color-mix(in srgb,var(--text) 5%,transparent), 0 4px 16px color-mix(in srgb,var(--text) 8%,transparent);
}
.dm-bubble--r {
  background:var(--bubble-r); color:var(--bubble-r-clr); border-radius:14px 14px 4px 14px;
  border:1px solid color-mix(in srgb,var(--accent) 38%, transparent);
  box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 24%,transparent), 0 6px 18px color-mix(in srgb,var(--accent) 12%,transparent);
}
.dm-bubbles .dm-bubble:not(:last-child) { margin-bottom:2px; }
.dm-bubbles .dm-bubble--l:not(:last-child) { border-radius:4px 14px 14px 4px; }
.dm-bubbles .dm-bubble--r:not(:last-child) { border-radius:14px 4px 4px 14px; }
.dm-bubbles .dm-bubble:last-child:not(:only-child).dm-bubble--l { border-radius:4px 14px 14px 4px; }
.dm-bubbles .dm-bubble:last-child:not(:only-child).dm-bubble--r { border-radius:14px 4px 4px 14px; }

/* 气泡内：文字 + 时间/状态行 */
.dm-bubble-text { white-space:pre-wrap; }
.dm-bubble-meta { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:5px; font-size:10px; line-height:1; letter-spacing:.01em; }
.dm-bubble--l .dm-bubble-meta { justify-content:flex-start; color:var(--text-dim); }
.dm-bubble--r .dm-bubble-meta { color:color-mix(in srgb,var(--bubble-r-clr) 66%, transparent); }

.dm-msg-status { display:flex; align-items:center; gap:3px; font-weight:600; }
.dm-msg-status.queued { color:var(--text-dim); }
.dm-msg-status.sending { opacity:.65; }
.dm-msg-status.sending svg { animation:blink 1.2s ease-in-out infinite; }
.dm-msg-status.sent { color:inherit; }
.dm-msg-status.read { color:color-mix(in srgb,var(--success) 85%, var(--bubble-r-clr)); }
.dm-msg-status.consent {
  color:color-mix(in srgb,var(--warning) 85%, var(--text));
  background:color-mix(in srgb,var(--warning) 13%, transparent); padding:2px 8px; border-radius:99px;
}
.dm-msg-status.failed {
  color:var(--danger); background:color-mix(in srgb,var(--danger) 13%, transparent);
  padding:2px 8px; border-radius:99px;
}
.dm-msg-status svg { width:12px; height:12px; }
.dm-bubble--r .dm-msg-status.read { color:color-mix(in srgb,var(--success) 82%, var(--text)); }
.dm-bubble--r .dm-msg-status.failed { color:var(--danger); background:color-mix(in srgb,var(--danger) 14%, transparent); }
.theme-midnight .dm-bubble--r .dm-msg-status.read,
.theme-galaxy .dm-bubble--r .dm-msg-status.read { color:color-mix(in srgb,var(--success) 40%,var(--on-accent)); }

/* 双勾（已读回执） */
.dm-check-double { position:relative; display:inline-flex; width:15px; height:12px; flex-shrink:0; }
.dm-check-double svg:first-child { position:absolute; left:0; top:0; }
.dm-check-double .dm-check-dup { position:absolute; left:3px; top:0; }

/* 撤回占位 */
.dm-retracted {
  font-size:12px; color:var(--text-dim); font-style:italic; padding:6px 12px; user-select:none;
  display:flex; align-items:center; gap:6px; animation:fade-in .25s var(--ease-out);
  background:color-mix(in srgb,var(--text) 4%, transparent); border-radius:12px;
}
.dm-retracted svg { width:13px; height:13px; opacity:.6; }

/* 跨区同步标记 */
.dm-sync-pill {
  display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600;
  color:color-mix(in srgb,var(--warning) 85%, var(--text)); padding:2px 8px; border-radius:99px;
  background:color-mix(in srgb,var(--warning) 13%, transparent); margin-bottom:4px;
  border:1px solid color-mix(in srgb,var(--warning) 22%, transparent);
}
.dm-sync-pill svg { width:11px; height:11px; animation:spin 2.2s linear infinite; }

/* hover 快捷操作（气泡） */
.dm-bubble-wrap { position:relative; }
.dm-bubble-actions {
  position:absolute; bottom:100%; right:0; margin-bottom:6px; z-index:20;
  display:none; gap:2px; padding:4px; border-radius:12px;
  background:color-mix(in srgb,var(--card-bg) 94%, transparent); border:1px solid color-mix(in srgb,var(--text) 8%, transparent);
  box-shadow:0 10px 28px color-mix(in srgb,var(--text) 14%, transparent), 0 1px 3px color-mix(in srgb,var(--text) 6%, transparent);
  backdrop-filter:blur(14px); animation:pop-in .16s var(--ease-out);
}
.dm-row.mine .dm-bubble-wrap:hover .dm-bubble-actions { display:flex; }
.dm-mini-btn {
  border:none; background:transparent; font:inherit; font-size:11.5px; font-weight:600;
  color:var(--text-secondary); padding:5px 9px; border-radius:8px; cursor:pointer; transition:all .12s;
}
.dm-mini-btn:hover { background:color-mix(in srgb,var(--text) 7%, transparent); color:var(--text); }
.dm-mini-btn:active { transform:scale(.95); }
.dm-mini-btn.danger:hover { background:color-mix(in srgb,var(--danger) 12%, transparent); color:var(--danger); }

/* 失败重发 */
.dm-resend {
  display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
  color:var(--on-danger); background:color-mix(in srgb,var(--danger) 86%, #000); border:none;
  padding:4px 11px; border-radius:99px; cursor:pointer; margin-top:4px;
  box-shadow:0 2px 8px color-mix(in srgb,var(--danger) 22%, transparent); transition:all .15s var(--ease-out);
}
.dm-resend:hover { background:var(--danger); transform:translateY(-1px); box-shadow:0 4px 14px color-mix(in srgb,var(--danger) 32%, transparent); }
.dm-resend:active { transform:translateY(0) scale(.96); }
.dm-resend svg { width:11px; height:11px; }

/* 输入区（内部表单由 ChatInputBar 提供） */
.dm-composer { position:relative; z-index:10; flex-shrink:0; padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px)); border-top:1px solid color-mix(in srgb,var(--text) 7%, transparent); background:color-mix(in srgb,var(--bg-page) 58%, transparent); backdrop-filter:blur(24px) saturate(190%); }

/* 空状态 */
.dm-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text-dim); text-align:center; padding:20px; }
.dm-empty-mark { width:56px; height:56px; border-radius:18px; background:color-mix(in srgb,var(--accent) 11%, transparent); border:1px solid color-mix(in srgb,var(--accent) 24%, transparent); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 14%, transparent), inset 0 1px 0 rgba(255,255,255,.16); }
.dm-empty-mark svg { width:26px; height:26px; color:var(--accent); }
.dm-empty-title { font-size:14px; font-weight:600; color:var(--text); }
.dm-empty-sub { font-size:12px; max-width:220px; }

/* 内心之声 popup（映射 ChatArea affinity.inner_voice） */
.dm-inner-voice {
  position:absolute; top:calc(62px + env(safe-area-inset-top,0px)); right:14px; z-index:20;
  width:min(300px, calc(100% - 28px));
  background:color-mix(in srgb,var(--card-bg) 96%, transparent);
  border:1px solid var(--glass-border); border-radius:16px;
  padding:14px 16px;
  box-shadow:0 14px 40px color-mix(in srgb,var(--text) 18%, transparent), 0 2px 8px color-mix(in srgb,var(--text) 8%, transparent);
  backdrop-filter:blur(20px) saturate(180%);
  animation:pop-in .22s var(--ease-out);
}
.dm-inner-voice[hidden] { display:none; }
.dm-inner-voice-header { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text); }
.dm-inner-voice-text { margin-top:8px; font-size:13px; line-height:1.75; color:var(--text); font-style:italic; }
.dm-inner-voice-mood { margin-top:8px; display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-secondary); }
.dm-inner-voice-mood svg { width:13px; height:13px; color:var(--accent); flex-shrink:0; }
.dm-inner-voice-footer { margin-top:10px; padding-top:9px; border-top:1px solid color-mix(in srgb,var(--text) 8%, transparent); display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.dm-inner-voice-stage { font-size:10.5px; font-weight:700; color:color-mix(in srgb,var(--accent) 82%, var(--text)); background:color-mix(in srgb,var(--accent) 12%, transparent); padding:2px 9px; border-radius:99px; }
.dm-inner-voice-stats { display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:650; color:var(--text-secondary); }
.dm-inner-voice-stats span { display:inline-flex; align-items:center; gap:3px; }
.dm-inner-voice-stats svg { width:11px; height:11px; }

/* ── Memory Panel ── */
.memory-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}

.memory-panel {
  width: 360px;
  max-width: 90vw;
  height: 100%;
  background: var(--glass-bg);
  border-left: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  animation: slide-in-right 0.2s ease;
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.memory-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.memory-panel-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.memory-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.memory-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
}

.memory-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
}

.memory-item-actions {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.memory-item:hover .memory-item-actions {
  opacity: 1;
}

.memory-action-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.memory-action-btn:hover {
  color: var(--text);
  background: var(--glass-border);
}

.memory-add-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--glass-border);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.memory-add-trigger:hover {
  background: var(--glass-border);
}

.memory-add-row,
.memory-edit-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.memory-add-input,
.memory-edit-input {
  width: 100%;
  resize: vertical;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
  box-sizing: border-box;
}

.memory-add-input:focus,
.memory-edit-input:focus {
  outline: none;
  border-color: var(--accent);
}

.memory-add-actions,
.memory-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.btn-sm {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 6px;
  min-height: 28px;
}

.memory-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  padding: 40px 0;
  margin: 0;
}

.memory-panel-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
  text-align: center;
}

/* ── Memory Toast ── */
.memory-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 1001;
  animation: toast-fade 2s ease forwards;
}

@keyframes toast-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .messages-sidebar {
    width: 100%;
    max-width: none;
    border-right: none;
  }
  .messages-layout {
    flex-direction: column;
  }
}

/* ── Empty state ── */
.messages-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.messages-empty-state--borderless {
  padding: 40px;
  border: none;
}

.messages-empty-icon {
  font-size: 48px;
  opacity: 0.4;
}
.messages-empty-icon svg { display: block; }

.messages-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
}

.messages-empty-desc {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  max-width: 280px;
  line-height: 1.7;
}

/* ===== Fork attribution ===== */
.card-forked-from {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ===== Group Chat ===== */
.group-list {
  padding: 0 16px 16px;
}

.group-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}

.group-list-item:hover {
  background: var(--hover-bg);
}

.group-list-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.group-list-chars {
  font-size: 13px;
  color: var(--text-sec);
}

.group-list-meta {
  font-size: 11px;
  color: var(--text-dim);
}

/* ── 群聊页面复用私信布局 ── */
.group-chat-page { padding: 0; overflow: hidden; }
.group-chat-page .messages-layout { height: 100%; }
.group-chat-page .messages-sidebar-header { display: flex; align-items: center; justify-content: space-between; }

@media (max-width: 768px) {
  .group-sidebar-hidden { display: none; }
  .group-chat-hidden { display: none; }
}

.group-avatar-stack { display: flex; flex-shrink: 0; }
.group-avatar-stack > * { margin-left: -8px; border: 2px solid var(--sidebar-bg); border-radius: var(--avatar-radius); }
.group-avatar-stack > *:first-child { margin-left: 0; }

.group-header-count { font-size: 12px; color: var(--text-dim); margin-left: 8px; }
.group-header-my-avatar { cursor: pointer; flex-shrink: 0; }
.group-header-my-avatar:hover { opacity: 0.8; }

/* ── Group Chat Header (refactored) ── */
.group-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.group-header-left .private-chat-title {
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ⋯ More menu */
.group-more-menu {
  position: relative;
}
.group-more-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 160px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 4px;
  z-index: 100;
}
.group-more-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  font-family: inherit;
}
.group-more-menu-item:hover {
  background: var(--secondary);
}
.group-more-menu-item svg {
  flex-shrink: 0;
  color: var(--text-dim);
}
.group-more-menu-item-danger:hover {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}
.group-more-menu-item-danger:hover svg {
  color: #e74c3c;
}

/* Header auto-dialogue button */
.group-auto-btn-header {
  width: 32px;
  height: 32px;
}
.group-auto-btn-header.active {
  color: #e74c3c;
  animation: pulse-fade 1.5s ease-in-out infinite;
}

/* ── Round dropdown (custom glass dropdown) ── */
.group-round-dropdown {
  position: relative;
  flex-shrink: 0;
}
.group-round-dropdown.hidden {
  visibility: hidden;
  pointer-events: none;
}

.group-round-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass-bg);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.group-round-trigger:hover,
.group-round-trigger.open {
  border-color: var(--accent);
  color: var(--accent);
}

.drop-chevron {
  transition: transform 0.2s;
}
.group-round-trigger.open .drop-chevron {
  transform: rotate(180deg);
}

.group-round-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  background: color-mix(in srgb, var(--glass-bg) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 4px;
  z-index: 1000;
  white-space: nowrap;
}

.group-round-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text-primary);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.group-round-item:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.group-round-item.active {
  color: var(--accent);
  font-weight: 600;
}
.group-round-check {
  font-size: 12px;
  color: var(--accent);
}

/* ── Group Input Row (refactored) ── */
.group-input-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px 10px;
}
.group-input-emoji-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
}
.group-input-emoji-btn:hover {
  background: var(--secondary);
  color: var(--text);
}
.group-input-row .messages-input {
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}
.group-input-row .messages-send-btn {
  height: 36px;
  align-self: flex-end;
  margin-bottom: 2px;
}

.messages-bubble-speaker { display: block; font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }

.group-target-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: transparent;
  font-size: 12px;
  color: var(--text-sec);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.group-target-chip.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}
.group-target-chip:hover:not(.active) {
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}

@keyframes pulse-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── Group Chat Right Panel ── */
.group-right-panel {
  width: 240px;
  flex-shrink: 0;
  border-left: 1px solid var(--glass-border);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  transition: width 0.25s ease, opacity 0.2s ease;
  position: relative;
}

.group-right-panel.collapsed {
  width: 0;
  opacity: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

.group-right-section {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.group-right-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 4px 4px;
}

.group-right-section-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 0 16px;
}

.group-member-item { display: flex; align-items: center; gap: 8px; }
.group-member-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); }
.group-member-identity { display: block; font-size: 11px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-member-affinity { display: block; font-size: 11px; color: var(--text-dim); margin-top: 1px; }

/* History panel inside right sidebar */
.group-right-panel .chat-history-panel {
  width: 100%;
  max-width: 100%;
  border: none;
  padding: 0;
}
.group-right-panel .chat-history-search {
  width: 100%;
}

@media (max-width: 768px) {
  .group-right-panel { display: none; }
}

/* ── Chat + History Split Layout ── */
.chat-with-history {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.chat-main-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-splitter {
  width: 6px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  z-index: 5;
}
.chat-splitter:hover,
.chat-splitter:active {
  background: var(--primary);
  opacity: 0.15;
}
.chat-splitter::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: 0;
  bottom: 0;
}

.history-sidebar {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 280px;
  max-width: 50vw;
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-left: 1px solid var(--glass-border);
  overflow: hidden;
}

.history-sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.history-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  box-sizing: border-box;
}

.history-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.history-sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
}
.history-sidebar-close:hover {
  background: var(--secondary);
  color: var(--text-primary);
}

/* GroupChatPage right panel → history sidebar mode */
.group-right-panel.history-sidebar-mode {
  width: auto;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  transition: none;
  min-height: 0;
}

/* All sections: fill remaining space equally, scroll independently when content overflows */
.group-right-panel.history-sidebar-mode > .group-right-section {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}

/* First section (history, when char info absent): remove top gap to align with chat header */
.group-right-panel.history-sidebar-mode > .group-right-section:first-child {
  padding-top: 0;
}

.group-right-panel.collapsed.history-sidebar-mode {
  width: auto;
  opacity: 1;
  padding: inherit;
  border-left: 1px solid var(--glass-border);
  overflow: hidden;
}

/* ── Right panel tab bar ── */
.group-right-tab-bar {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--glass-border);
  padding: 0 8px;
  height: 52px;
  box-sizing: border-box;
}
.group-right-tab {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color .15s;
}
.group-right-tab:hover { color: var(--text); }
.group-right-tab.active { color: var(--accent); }
.group-right-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 1px 6px var(--ring);
}
.group-right-tab-spacer { flex: 1; }
.group-right-tab-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text-dim); cursor: pointer;
  border-radius: 6px; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.group-right-tab-btn:hover {
  color: var(--text);
  background: rgba(128,128,128,0.08);
}

/* ── Right panel tab content (scrollable) ── */
.group-right-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Character info overlay (floats above tab content) ── */
.group-char-info-overlay {
  position: absolute;
  inset: 42px 0 0 0;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  overflow-y: auto;
}

/* ── Member list inside tab ── */
.group-right-member-list {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.group-member-filter-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
  margin-left: auto;
}
.group-member-filter-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ── Group History Tab (right panel) ── */
.group-history-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--glass-border);
  flex-wrap: wrap;
}
.group-history-filter-label {
  font-size: 11px;
  color: var(--text-dim);
}
.group-history-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.group-history-filter-chip-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.group-history-filter-clear {
  font-size: 11px;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: auto;
}
.group-history-filter-clear:hover {
  color: var(--accent);
}
.group-history-empty {
  padding: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
}
.group-history-list {
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.group-history-item {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.15s;
}
.group-history-item:hover {
  background: var(--accent-soft);
}
.group-history-item-body {
  flex: 1;
  min-width: 0;
}
.group-history-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.group-history-item-speaker {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
}
.group-history-item-time {
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.group-history-item-text {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

/* ── Group Chat Filter Bar ── */
.group-filter-bar {
  padding: 6px 20px 0;
  flex-shrink: 0;
}
.group-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
.group-filter-toggle:hover,
.group-filter-toggle.active {
  color: var(--accent);
  border-color: var(--accent);
}
.group-filter-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  position: absolute;
  top: -2px;
  right: -2px;
}
.group-filter-panel {
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.group-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  min-width: 36px;
}
.group-filter-date-input {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.group-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.group-filter-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}
.group-filter-chip.active,
.group-filter-chip:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.group-filter-reset {
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  align-self: flex-end;
  padding: 2px 6px;
}
.group-filter-reset:hover {
  text-decoration: underline;
}

/* ── Group Chat Character Info Panel ── */
.group-char-info-panel {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
  flex-shrink: 0;
}
.group-char-info-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 4px;
}
.group-char-info-close:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}
.group-char-info-name {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
}
.group-char-info-identity {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  text-align: center;
}
.group-char-info-traits {
  width: 100%;
  margin-top: 10px;
}
.group-char-info-tag-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.group-char-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.group-char-info-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* ── Group Chat Layout Overrides (enhanced UI) ── */
.private-chat.group-chat-layout {
  flex-direction: row;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.group-chat-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.group-chat-layout .private-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  gap: 0;
}
.group-chat-layout .group-chat-messages-area {
  padding: 16px 20px 48px;
  gap: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.04);
}
/* Dark adjustments shim（聊天覆盖区，同上：只减不增） */
.theme-midnight .group-chat-layout .group-chat-messages-area,
.theme-galaxy .group-chat-layout .group-chat-messages-area {
  background: rgba(0,0,0,0.08);
}

/* ── ChatBubble — shared component (cbubble) ─────────────────── */
.cbubble-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.cbubble-row--right {
  flex-direction: row-reverse;
}
/* 左气泡（有名字行）：头像下移对齐气泡顶 */
.cbubble-row--left > *:first-child {
  margin-top: 0;
  align-self: flex-start;
}
/* 右气泡（无名字行）：头像保持顶部对齐 */
.cbubble-row--right > *:first-child {
  margin-top: 0;
  align-self: flex-start;
}

.cbubble-col {
  display: flex;
  flex-direction: column;
  max-width: 70%;
  min-width: 0;
}

.cbubble-name {
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, var(--primary) 45%, var(--text));
  padding: 0 2px 3px;
  cursor: pointer;
  user-select: none;
}
.cbubble-name:hover {
  color: var(--text);
  text-decoration: underline;
}
.cbubble-row--right .cbubble-name {
  text-align: right;
}

/* ── Core bubble ── */
.cbubble {
  position: relative;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow 0.25s;
}

/* ── Left (incoming) ── */
.cbubble--left {
  --cbubble-bg: var(--glass-bg);
  --cbubble-color: var(--text);
  position: relative;
  background: var(--cbubble-bg);
  color: var(--cbubble-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
/* 圆润尖角：独立小圆点，不是尖三角 */
.cbubble--left::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 16px;
  width: 12px;
  height: 12px;
  background: var(--cbubble-bg);
  border-radius: 0 0 0 3px;
  transform: rotate(45deg);
  box-shadow: -2px 2px 4px rgba(0,0,0,0.04);
}
.cbubble--left::before { content: none; }

/* ── Right (outgoing) ── */
.cbubble--right {
  --cbubble-bg: var(--accent);
  --cbubble-color: var(--on-accent);
  position: relative;
  background: var(--cbubble-bg);
  color: var(--cbubble-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.cbubble--right::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 16px;
  width: 12px;
  height: 12px;
  background: var(--cbubble-bg);
  border-radius: 0 3px 0 0;
  transform: rotate(45deg);
  box-shadow: 2px -2px 4px rgba(0,0,0,0.04);
}

.cbubble-time {
  font-size: 11px;
  color: inherit;
  opacity: 0.55;
  padding-top: 4px;
}
.cbubble-row--right .cbubble-time {
  text-align: right;
}

/* ── ChatArea overrides ── */
.chat-area .cbubble {
  font-size: var(--chat-font-size);
}
/* Character bubble — white card, dark text */
.chat-area .cbubble--left {
  --cbubble-bg: #fff;
  --cbubble-border: rgba(0,0,0,0.08);
  --cbubble-color: #1a1a1a;
}
/* User bubble — theme-tinted bg, reading text */
.chat-area .cbubble--right {
  --cbubble-bg: var(--bubble-user-bg, #e8e0ff);
  --cbubble-border: transparent;
  --cbubble-color: #1a1a1a;
}
/* Chat surface: bubble radius aligned to --avatar-radius / --btn-radius */
.chat-area .cbubble--left,
.chat-area .cbubble--right {
  border-radius: 12px;
}

/* ── GroupChatPage overrides ── */
/* Character bubble — white card with primary-tinted border */
.group-chat-page .cbubble--left {
  --cbubble-bg: #fff;
  --cbubble-border: color-mix(in srgb, var(--primary) 35%, #e2e2e8);
  --cbubble-color: var(--text);
}
.theme-midnight .group-chat-page .cbubble--left,
.theme-galaxy .group-chat-page .cbubble--left {
  --cbubble-bg: color-mix(in srgb, var(--primary) 14%, #1f1d29);
  --cbubble-border: color-mix(in srgb, var(--primary) 28%, var(--glass-border));
  --cbubble-color: rgba(255,255,255,0.92);
}
.theme-midnight .group-chat-page .cbubble-name,
.theme-galaxy .group-chat-page .cbubble-name {
  color: color-mix(in srgb, var(--primary) 70%, #fff);
}

/* ── Midnight theme overrides ── */
.theme-midnight .cbubble--left,
.theme-galaxy .cbubble--left {
  --cbubble-bg: rgba(40,35,45,0.92);
  --cbubble-border: rgba(120,105,135,0.4);
  --cbubble-color: #ece8f0;
}
.theme-midnight .cbubble--right,
.theme-galaxy .cbubble--right {
  --cbubble-bg: color-mix(in srgb, var(--accent) 42%, #3a3240);
  --cbubble-color: #fff;
}
/* Target selector chips (also used in create modal) */
.group-chat-layout .group-target-chip {
  padding: 5px 12px;
  font-size: 13px;
}

/* Auto conversation banner */
.group-auto-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  margin: 0 12px 8px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--accent);
  animation: group-auto-pulse 1.5s ease-in-out infinite;
}
@keyframes group-auto-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.group-auto-banner-stop {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
  font-family: inherit;
}
.group-auto-banner-stop:hover {
  background: var(--danger);
  filter: brightness(0.92);
}
.group-auto-generating {
  font-size: 12px;
  color: var(--text-secondary);
  animation: group-auto-pulse 1.2s ease-in-out infinite;
}


/* Member panel refinements */
.group-chat-layout .group-members-panel {
  width: 220px;
  padding: 16px;
  gap: 10px;
  background: var(--glass-bg);
}
.group-chat-layout .group-members-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
  letter-spacing: 0.3px;
}
.group-chat-layout .group-member-item {
  padding: 8px 10px;
  border-radius: 10px;
  gap: 10px;
  transition: background 0.15s;
  cursor: default;
  border-bottom: 1px solid var(--glass-border);
}
.group-chat-layout .group-member-item:hover {
  background: rgba(var(--accent-rgb), 0.04);
}
.group-chat-layout .group-member-info {
  flex: 1;
  min-width: 0;
}
.group-chat-layout .group-member-name {
  font-size: 15px;
  font-weight: 600;
  display: block;
}
.group-chat-layout .group-member-identity {
  font-size: 13px;
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 900px) {
  .group-chat-layout .group-members-panel { width: 220px; }
}
@media (max-width: 768px) {
  .group-chat-layout .group-members-panel { display: none; }
}

/* ── Director Mode: Narration Note (world-building sticky note) ── */
.narration-note {
  max-width: 70%;
  margin: 8px auto;
  padding: 10px 18px;
  text-align: center;
  font-style: italic;
  font-family: Georgia, 'Noto Serif SC', 'Songti SC', serif;
  color: #888;
  background: rgba(120, 120, 120, 0.08);
  border: 1px solid rgba(120, 120, 120, 0.12);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
  pointer-events: none;
  user-select: none;
}
.theme-midnight .narration-note,
.theme-galaxy .narration-note {
  color: #998;
  background: rgba(200, 180, 190, 0.06);
  border-color: rgba(200, 180, 190, 0.10);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.msg-action-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-size: 12px;
  padding: 0;
}
.msg-action-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.msg-quick-reactions {
  display: flex;
  gap: 2px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 2px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.msg-quick-reaction-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
  padding: 0;
}
.msg-quick-reaction-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  transform: scale(1.2);
}

.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.msg-reaction-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(var(--accent-rgb), 0.04);
  font-size: 12px;
  color: var(--text-sec);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.msg-reaction-badge:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
}
.msg-reaction-badge.mine {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* ── Midnight: reaction bar/badge transparency ── */
.theme-midnight .msg-quick-reactions,
.theme-galaxy .msg-quick-reactions {
  background: rgba(20, 16, 24, 0.72);
  border-color: rgba(200, 170, 185, 0.10);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.theme-midnight .msg-reaction-badge,
.theme-galaxy .msg-reaction-badge {
  background: rgba(20, 16, 24, 0.55);
  border-color: rgba(200, 170, 185, 0.12);
}
.theme-midnight .msg-reaction-badge.mine,
.theme-galaxy .msg-reaction-badge.mine {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.35);
}

/* ── Group Chat: Reply ── */
.reply-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 6px 16px;
  margin: 0 12px 4px;
  background: rgba(var(--accent-rgb), 0.06);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-sec);
}
.reply-preview-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.reply-preview-label {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.reply-preview-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-dim);
}
.reply-preview-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: all 0.15s;
}
.reply-preview-close:hover {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.1);
}

.msg-reply-quote {
  padding: 6px 8px;
  margin-bottom: 6px;
  border-left: 3px solid var(--border);
  background: rgba(var(--accent-rgb), 0.04);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.msg-reply-quote:hover {
  background: rgba(var(--accent-rgb), 0.1);
}
.msg-reply-quote-speaker {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1px;
}
.msg-reply-quote-text {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes msg-highlight-flash {
  0% { background: rgba(var(--accent-rgb), 0.15); }
  100% { background: transparent; }
}
.msg-highlight-flash {
  animation: msg-highlight-flash 1.5s ease-out;
  border-radius: 6px;
}
/* Group create card selection */
.group-create-card-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.group-create-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 14px;
}

.group-create-card:hover {
  background: var(--hover-bg);
}

.group-create-card.selected {
  background: var(--accent-soft);
}

.group-create-card-check {
  margin-left: auto;
  color: var(--accent);
  font-weight: 600;
}

.group-create-card-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
  transition: all 0.15s;
}
.group-create-card-checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
}

.group-create-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.group-create-card-identity {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-create-selected-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(var(--accent-rgb), 0.06);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
  flex-wrap: wrap;
}

/* ── Group Create Modal ── */
.group-create-modal { max-width: 520px; }
.group-create-section { padding: 0 20px 16px; }
.group-create-text-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.group-create-empty { font-size: 13px; color: var(--text-dim); padding: 8px 0; margin: 0; }
.group-create-card-name { flex: 1; font-size: 14px; color: var(--text); font-family: var(--font-display); }

/* Persona identity selection in create modal */
.persona-options { display: flex; flex-direction: column; gap: 10px; }
.persona-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.persona-option:hover { border-color: var(--accent-soft); }
.persona-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.persona-radio {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
  flex-shrink: 0;
  margin-top: 1px;
  transition: border-color .15s;
  position: relative;
}
.persona-option.active .persona-radio {
  border-color: var(--accent);
}
.persona-option.active .persona-radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.persona-option-title { font-size: 14px; font-weight: 600; color: var(--text); }
.persona-option-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.persona-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 30px;
}
.persona-sub .modal-input { flex: 1; min-width: 200px; }
.persona-char-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.persona-char-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.persona-char-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }


/* ── Author Page ── */

.author-page { padding: 0 24px 24px; max-width: 680px; margin: 0 auto; }

.author-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0 16px;
}
.author-hero-text { flex: 1; min-width: 0; }
.author-name { font-size: 20px; font-weight: 600; margin: 0; }
.author-meta { font-size: 13px; color: var(--text-dim); margin-top: 4px; }

.author-stats {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.author-stats strong {
  font-weight: 600;
  color: var(--text);
  margin-right: 2px;
}

.author-section {
  margin-top: 24px;
}
.author-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
}

.author-book-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--bg-card);
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  margin-bottom: 8px;
  transition: all 0.2s;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}
.author-book-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.author-book-info { flex: 1; min-width: 0; }
.author-book-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.author-book-desc {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.author-book-meta {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ══════════════════════════════════════
   MinePage V2 — Creator Profile
   ══════════════════════════════════════ */
.mine-page-v2 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  position: relative;
  z-index: 0;
}

/* ── Banner ── */
.mine-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  max-height: 220px;
  overflow: hidden;
  flex-shrink: 0;
}

.mine-banner-blur {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(20px) saturate(150%);
  z-index: 0;
}

.mine-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 1;
}

.mine-banner-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.mine-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.mine-banner-upload {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}

.mine-banner-upload:hover {
  background: rgba(0,0,0,0.5);
}

/* ── Profile Header ── */
.mine-profile-section {
  padding: 16px 24px;
  position: relative;
  z-index: 3;
}
.mine-profile-section > .stage-glow {
  z-index: 0;
}
.mine-profile-section > .mine-profile-row,
.mine-profile-section > .mine-stat-grid {
  position: relative;
  z-index: 1;
}
.mine-profile-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mine-profile-mid {
  flex: 1;
  min-width: 0;
}
.mine-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mine-profile-name {
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mine-edit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-subtle);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.mine-edit-icon:hover {
  color: var(--accent-strong);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.mine-edit-icon:active {
  transform: scale(0.95);
}
.mine-id {
  font-size: 12px;
  color: var(--fg-subtle);
  margin-top: 2px;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}
.mine-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 400;
  margin-left: 8px;
  color: var(--success);
  white-space: nowrap;
}
.mine-online.off {
  color: var(--text-dim);
}
.mine-online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
  flex-shrink: 0;
}
.mine-online.off .mine-online-dot {
  background: var(--text-dim);
}
.mine-profile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mine-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.mine-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.mine-stat-card:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.mine-stat-card:active {
  transform: scale(0.97);
}
.mine-stat-card b {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
.mine-stat-card span {
  font-size: 11px;
  color: var(--fg-subtle);
  line-height: 1;
}

/* ── Profile entries (mobile EntryGrid inside profile card) ── */
.mine-profile-entries {
  padding: 12px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--glass-border);
}

.mine-profile-header .mine-avatar {
  border: 3px solid var(--bg-card, var(--bg-page));
  border-radius: 50%;
  flex-shrink: 0;
}

.mine-avatar-wrap {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.mine-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.mine-avatar-wrap:hover .mine-avatar-overlay {
  opacity: 1;
}

.mine-profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-bottom: 6px;
  flex: 1;
  min-width: 0;
}

.mine-bio-display {
  font-size: 13px;
  color: var(--text-sec);
  cursor: text;
  padding: 2px 0;
  line-height: 1.4;
}
.mine-bio-display:hover {
  color: var(--text);
}
.mine-bio-placeholder {
  color: var(--text-dim);
  font-style: italic;
  font-size: 12px;
}
.mine-bio-input {
  width: 100%;
  max-width: 320px;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: box-shadow 0.18s;
}
.mine-bio-input:focus {
  box-shadow: 0 0 0 3px var(--ring);
}

.mine-profile-name {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.mine-edit-btn {
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-sec);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  flex-shrink: 0;
}

.mine-edit-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Tab 栏 ── */
.mine-tab-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0;
  padding: 0 24px;
}

.mine-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
  margin-bottom: -1px;
}

.mine-tab:hover {
  color: var(--text);
}

.mine-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ── Tab 内容 ── */
.mine-tab-content {
  padding: 20px 24px;
}

.mine-tab-placeholder {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  padding: 40px 0;
}

/* ── 引导卡片 ── */
.mine-onboard-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}

.mine-onboard-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.mine-onboard-desc {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

.mine-onboard-steps {
  display: flex;
  gap: 24px;
}

.mine-onboard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-sec);
}

.mine-onboard-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── 卡片管理菜单 ── */
.mine-card-menu-wrap {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
}

.mine-card-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.market-card-v2:hover .mine-card-menu-btn {
  opacity: 1;
}

.mine-card-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
}

.mine-card-menu {
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 11;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 4px;
  min-width: 120px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.mine-card-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s;
}

.mine-card-menu button:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.mine-card-menu-danger { color: #e53935 !important; }
.mine-card-menu-danger:hover { background: rgba(229,57,53,0.08) !important; }

/* ── 书籍列表 ── */
.mine-books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.mine-book-cover-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: transform 0.15s, box-shadow 0.15s;
}

.mine-book-cover-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.mine-book-cover-bg {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.mine-book-cover-gradient {
  position: absolute;
  inset: 0;
}

.mine-book-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mine-book-cover-edit {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  opacity: 0;
  font-family: inherit;
}

.mine-book-cover-card:hover .mine-book-cover-edit {
  opacity: 1;
}

.mine-book-cover-edit:hover {
  background: rgba(0,0,0,0.5);
}

.mine-book-cover-title {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.mine-book-cover-progress {
  height: 4px;
  background: rgba(var(--accent-rgb), 0.12);
  flex-shrink: 0;
}

.mine-book-cover-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transition: width 0.3s;
}

.mine-book-cover-label {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .mine-banner { max-height: 110px; }
  .mine-profile-section { padding: 8px 16px; }
  .mine-profile-row { flex-wrap: wrap; gap: 8px; }
  .mine-profile-name { font-size: 18px; }
  .mine-bio-display { font-size: 12px; }
  .mine-stat-grid { gap: 8px; margin-top: 14px; }
  .mine-stat-card { padding: 10px 4px 8px; }
  .mine-stat-card b { font-size: 18px; }
  .mine-profile-actions { width: 100%; justify-content: flex-end; padding-top: 8px; }
  .mine-tab-bar { padding: 0 16px; }
  .mine-tab-content { padding: 16px 16px 20px; }
  .mine-onboard-steps { flex-direction: column; gap: 12px; }
  .mine-page-v2 .market-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ── 发帖框 ── */
.mine-composer {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  margin-bottom: 16px;
}

.mine-composer-input {
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  border: none;
  outline: none;
  resize: none;
  font-size: 14px;
  line-height: 1.7;
  background: transparent;
  color: var(--text);
  font-family: inherit;
}

.mine-composer-input::placeholder {
  color: var(--text-dim);
}

.mine-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 10px;
}

/* ---- Emoji Picker ---- */
.mine-composer-emoji-wrap {
  position: relative;
}
.mine-composer-emoji-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.mine-composer-emoji-btn:hover {
  background: var(--accent-soft, rgba(var(--accent-rgb), 0.1));
}
.mine-composer-loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mine-composer-loc-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.mine-composer-loc-btn.has-loc {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.mine-composer-loc-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 50%;
  font-size: 12px;
  padding: 0;
  line-height: 1;
}
.mine-composer-loc-clear:hover {
  background: var(--secondary);
  color: var(--text);
}
.mine-loc-active-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.mine-loc-selected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--secondary);
  border-radius: 20px;
  font-size: 12px;
  width: fit-content;
  max-width: 100%;
}
.mine-loc-selected-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  color: var(--text);
}
.mine-loc-search-box {
  position: relative;
}
.mine-loc-icon {
  flex-shrink: 0;
  color: var(--accent);
}
.mine-loc-input {
  width: 140px;
  padding: 4px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  outline: none;
}
.mine-loc-input:focus {
  border-color: var(--accent);
}
.mine-loc-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  z-index: 100;
  background: var(--secondary);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--shadow);
  max-height: 240px;
  overflow-y: auto;
}
.mine-loc-suggestion-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}
.mine-loc-suggestion-item:hover {
  background: var(--glass-bg);
}
.mine-loc-suggestion-item + .mine-loc-suggestion-item {
  border-top: 1px solid var(--glass-border);
}
.spin-icon {
  animation: spin 1.5s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.mine-composer-emoji-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  width: 320px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--glass-bg);
  backdrop-filter: var(--card-blur, blur(20px));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow, 0 8px 32px rgba(0,0,0,0.2));
  padding: 12px;
  z-index: 200;
}
.emoji-group {
  margin-bottom: 8px;
}
.emoji-group:last-child {
  margin-bottom: 0;
}
.emoji-group-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 6px;
  padding-left: 2px;
}
.emoji-group-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.emoji-item {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.emoji-item:hover {
  background: var(--accent-soft, rgba(var(--accent-rgb), 0.1));
}
@media (max-width: 600px) {
  .mine-composer-emoji-panel {
    width: 280px;
  }
  .emoji-group-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* ── 动态列表 ── */
.mine-posts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── 关注列表 ── */
.mine-following-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mine-following-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: background 0.15s;
}

.mine-following-card:hover {
  background: rgba(var(--accent-rgb), 0.04);
}

.mine-following-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mine-following-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.mine-following-name:hover {
  color: var(--accent);
}

.mine-following-meta {
  font-size: 12px;
  color: var(--text-dim);
}

.mine-following-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.mine-follow-search-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text, inherit);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 8px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.mine-follow-search-input:focus {
  border-color: var(--accent, #6c8cff);
  box-shadow: 0 0 0 3px var(--ring);
}
.mine-follow-search-input::placeholder {
  color: var(--fg-subtle);
}

/* ── 粉丝/关注者列表 ── */
.mine-follow-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mine-follow-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: background 0.15s;
}

.mine-follow-card:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.mine-follow-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.mine-follow-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mine-follow-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.mine-follow-bio {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mine-follow-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ===== Post Card ===== */
.author-posts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

/* ===== Author Page Character Cards ===== */
.author-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 0;
}

.author-char-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px 14px;
  background: var(--bg-card);
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  border-radius: 16px;
  transition: all 0.2s;
}

.author-char-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.author-char-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 10px 0 2px;
}

.author-char-identity {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
  line-height: 1.4;
}

.author-char-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.author-char-likes {
  font-size: 12px;
  color: var(--text-dim);
}

/* ===== AuthorPage post creator ===== */
.author-post-img-preview {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.author-post-img-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.author-post-img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-post-img-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.author-post-linked-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.author-card-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  transition: background 0.15s;
}

.author-card-picker-item:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.author-card-picker-item.selected {
  background: rgba(var(--accent-rgb), 0.12);
}

/* ===== Post composer toolbar ===== */
.author-post-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.author-post-toolbar-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.author-post-toolbar-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
}
.author-post-toolbar-btn:hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text);
}

.author-post-visibility-btn {
  font-size: 16px;
  margin-left: 4px;
}

.author-post-publish-btn {
  min-width: 72px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 10px;
}

/* ===== Expandable Text ===== */
.expandable-text-wrap {
  width: 100%;
  margin: 4px 0 8px;
}

.expandable-text {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

.expandable-text.expanded {
  display: block;
  overflow: visible;
}

.expandable-text-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--accent);
  padding: 2px 0;
  margin-top: 2px;
}

.expandable-text-toggle:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .author-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .author-char-card {
    padding: 14px 10px 10px;
  }
}

/* ===== AuthorPage Premium Layout (own profile) ===== */

.author-split-layout {
  display: grid;
  grid-template-columns: 2.33fr 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.author-feed-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.author-chars-column {
  position: sticky;
  top: 0;
  min-width: 0;
}

/* ── Profile Header Card ── */

.author-profile-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  background: var(--glass-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--glass-border);
}

.author-profile-card--vertical {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 32px 28px;
  gap: 16px;
}

.author-profile-card--vertical .author-profile-info {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.author-profile-card--vertical .author-profile-name {
  margin-bottom: 8px;
}

.author-profile-card--vertical .author-profile-stats {
  justify-content: center;
}

.author-profile-info {
  flex: 1;
  min-width: 0;
}

.author-edit-profile-btn {
  margin-top: 12px;
  padding: 6px 24px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.author-edit-profile-btn:hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.author-profile-name {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.author-profile-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.author-profile-stats strong {
  font-weight: 600;
  color: var(--text);
  margin-right: 3px;
  font-size: 20px;
}

.stat-dot {
  color: var(--text-dim);
  font-weight: 300;
}

/* ── Status Composer Card ── */

.author-status-card {
  background: transparent;
  border-radius: var(--card-radius);
  padding: 0;
  box-shadow: none;
  border: 1px solid transparent;
  transition: all 0.25s;
}

.author-status-card:focus-within {
  background: var(--glass-bg);
  padding: 20px;
  box-shadow: var(--card-shadow);
  border-color: var(--glass-border);
}

.author-status-input {
  width: 100%;
  min-height: 76px;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
}

.author-status-card:focus-within .author-status-input {
  background: var(--bg-page, #f9fafb);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.author-status-input::placeholder {
  color: var(--text-dim);
  opacity: 0.5;
  transition: opacity 0.25s;
}

.author-status-card:focus-within .author-status-input::placeholder {
  opacity: 0.7;
}

.author-status-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.25s, max-height 0.25s, margin-top 0.25s;
}

.author-status-card:focus-within .author-status-toolbar {
  opacity: 1;
  max-height: 48px;
  margin-top: 14px;
}

.author-status-toolbar-left {
  display: flex;
  align-items: center;
  gap: 2px;
}

.author-status-toolbar-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
}

.author-status-toolbar-btn:hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text);
}

.author-status-visibility-btn {
  font-size: 16px;
}

.author-status-publish-btn {
  min-width: 72px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 24px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
}

.author-status-publish-btn:hover {
  opacity: 0.92;
  box-shadow: 0 4px 16px var(--ring);
}

.author-status-publish-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Feed Section ── */

.author-feed-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.author-feed-section::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--glass-border), transparent);
  margin-bottom: 8px;
}

/* ── Empty State ── */

.author-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 64px;
  text-align: center;
}

.author-empty-illustration {
  width: 160px;
  height: 120px;
  margin-bottom: 24px;
}

.author-empty-text {
  font-size: 16px;
  color: var(--text-dim);
  font-weight: 400;
  margin: 0;
  line-height: 1.7;
}

.author-empty-sub {
  font-size: 13px;
  color: var(--text-dim);
  opacity: 0.5;
  margin: 4px 0 0;
}

/* ── Right Column: Characters Widget ── */

.author-chars-widget {
  background: var(--glass-bg);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--glass-border);
  position: relative;
}

.author-chars-widget-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--glass-border);
}

.author-chars-widget-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.author-chars-widget-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.author-chars-widget-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.author-chars-widget-empty {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  padding: 28px 0;
  margin: 0;
}

.author-widget-char-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
  transition: background 0.18s;
  box-sizing: border-box;
}

.author-widget-char-card:hover {
  background: rgba(var(--accent-rgb), 0.06);
}

.author-widget-char-info {
  flex: 1;
  min-width: 0;
}

.author-widget-char-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.author-widget-char-identity {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.author-widget-char-btn {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 12px;
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  border: none;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
  line-height: 24px;
}

.author-widget-char-btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
}

.author-chars-widget-more {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  padding: 12px 0 0;
  margin: 0;
  opacity: 0.6;
}

/* ── Responsive: collapse to single column ── */

@media (max-width: 960px) {
  .author-split-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .author-chars-column {
    position: static;
  }

  .market-detail-split {
    flex-direction: column;
    gap: 16px;
  }

  .market-detail-sidebar {
    width: 100%;
    min-width: auto;
    position: static;
    gap: 12px;
  }

  .market-detail-sidebar .market-detail-hero {
    gap: 8px;
  }

  .market-detail-scroll {
    padding: 12px 16px;
  }

  .market-detail-fixed-input {
    padding: 10px 12px;
  }
  .market-detail-fixed-input .market-detail-comment-field {
    min-width: 0;
    width: 100%;
  }

  .market-detail-use-btn {
    width: auto;
    padding: 8px 24px;
  }

  .market-detail-grid {
    grid-template-columns: 1fr;
  }

  .market-detail-grid .card-section {
    cursor: pointer;
  }

  .market-detail-grid .card-section.collapsed > *:not(h3) {
    display: none;
  }

  .market-detail-grid .card-section h3::after {
    content: '▸';
    float: right;
    transition: transform 0.2s;
  }

  .market-detail-grid .card-section:not(.collapsed) h3::after {
    transform: rotate(90deg);
  }
}

/* ===== Feed Page ===== */
.feed-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feed-list .post-card {
  border-bottom: 1px solid var(--glass-border);
}

.feed-date-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 12px 0;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.feed-date-divider::before,
.feed-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.feed-back-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: var(--z-sticky);
  transition: opacity 0.2s, transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.feed-back-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ── FeedPage scroll fix: override .panel overflow:hidden ── */
.feed-page.panel {
  overflow-y: auto;
}

.feed-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feed-refresh-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 0.18s;
}

.feed-refresh-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.feed-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feed-loading-more {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: var(--fg-subtle);
}

/* ---- GlobalSearchBox on HomePage (mobile only) ---- */
.home-global-search {
  display: none;
}

/* ===== PostCard (shared by FeedPage + AuthorPage) ===== */
.post-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--card-radius);
  padding: 20px;
  transition: all 0.2s;
}

.post-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.post-card-author-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.post-card-author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.post-card-private {
  font-size: 11px;
  color: var(--text-dim);
}

.post-card-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
}

.post-card-location {
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-card-content-wrap {
  margin-bottom: 10px;
}

.post-card-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.post-card-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--accent);
  padding: 2px 0;
}

.post-card-expand-btn:hover {
  text-decoration: underline;
}

/* ── Image grid ── */
.post-card-images {
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 10px;
}

.post-card-images-1 .post-card-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
}

.post-card-images-2 {
  display: flex;
  gap: 4px;
}

.post-card-images-2 .post-card-img {
  flex: 1;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

.post-card-images-n {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.post-card-images-n .post-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
}

/* ── Card reference ── */
.post-card-ref {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.08);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.18s;
}

.post-card-ref:hover {
  background: rgba(var(--accent-rgb), 0.15);
}

.post-card-ref-name {
  font-weight: 600;
  color: var(--accent);
}

.post-card-ref-identity {
  color: var(--text-dim);
  font-size: 11px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-card-ref-modified {
  color: var(--text-dim);
  font-size: 10px;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Action bar ── */
.post-card-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.post-card-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.18s;
}

.post-card-action-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

.post-card-action-btn.liked {
  color: #e74c3c;
}

.post-card-action-btn.animating {
  animation: post-card-like-pop 0.3s ease;
}

@keyframes post-card-like-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.post-card-delete {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.18s, color 0.18s;
}

.post-card-delete:hover {
  background: rgba(231, 76, 60, 0.08);
  color: #e74c3c;
}

/* ── Comments ── */
.post-card-comments {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.post-card-comments-status {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  padding: 12px 0;
}

.post-card-comment {
  display: flex;
  gap: 8px;
  padding: 8px 0;
}

.post-card-comment + .post-card-comment {
  border-top: 1px solid var(--glass-border);
}

.post-card-comment-body {
  flex: 1;
  min-width: 0;
}

.post-card-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-card-comment-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
}

.post-card-comment-user {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.post-card-comment-user:hover {
  color: var(--accent);
}

.post-card-comment-ip {
  font-size: 10px;
  color: var(--text-dim);
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.post-card-comment-time {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: auto;
}

.post-card-comment-text {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  word-break: break-word;
}

.post-card-comment-input-row {
  display: flex;
  gap: 8px;
  padding-top: 10px;
}

.post-card-comment-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-input, var(--bg));
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.post-card-comment-input:focus {
  border-color: var(--accent);
}

.post-card-comment-send {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.post-card-comment-send:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Image fullscreen preview ── */
.img-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.img-preview-full {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 4px;
}

.img-preview-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.img-preview-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* ── Publish form (share to market) ── */
.publish-form-body {
  padding-top: 4px;
}

.publish-field {
  margin-bottom: 14px;
}

.publish-field:last-child {
  margin-bottom: 0;
}

.publish-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.publish-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input-border, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  background: var(--bg-page);
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  line-height: 1.7;
}

.publish-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}

.publish-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--input-border, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  background: var(--bg-page);
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.publish-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}

/* ── Market detail tabs ── */
.market-detail-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--input-border, rgba(0, 0, 0, 0.06));
  margin-top: 20px;
  padding: 0 4px;
}

.market-detail-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  border-radius: 0;
}

.market-detail-tab:hover {
  color: var(--text-primary);
}

.market-detail-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Version list ── */
.market-detail-versions {
  padding: 16px 0;
}

.version-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}

.version-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--glass-bg);
  border-radius: 12px;
  border: 1px solid var(--glass-border);
}

.version-num {
  flex-shrink: 0;
  width: 44px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border-radius: 8px;
}

.version-info {
  flex: 1;
  min-width: 0;
}

.version-message {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: 4px;
}

.version-time {
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Fork list ── */
.market-detail-forks {
  padding: 16px 0;
}

.fork-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}

.fork-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--glass-bg);
  border-radius: 12px;
  border: 1px solid var(--glass-border);
}

.fork-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fork-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.fork-author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

.fork-likes {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ===== Version actions ===== */
.version-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.version-action-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 6px;
  transition: background 0.15s;
  opacity: 0.5;
}
.version-action-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  opacity: 1;
}
.version-action-btn-danger:hover {
  background: rgba(255, 50, 50, 0.1);
}

/* ===== Version preview banner ===== */
.version-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 16px 12px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-primary);
}
.version-preview-banner strong {
  color: var(--accent);
}
.version-preview-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ===== Step 2: Clickable stat buttons ===== */
.author-profile-stats .stat-btn,
.author-stats .stat-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
.author-profile-stats .stat-btn:hover,
.author-stats .stat-btn:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* ── Author page followers/following modal ── */
.stat-follow-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.stat-follow-modal {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  width: 100%;
  max-width: 400px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.stat-follow-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--glass-border);
}
.stat-follow-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.stat-follow-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.15s;
}
.stat-follow-modal-close:hover {
  background: var(--accent-soft, rgba(128,128,128,0.15));
}
.stat-follow-empty {
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
  padding: 40px 20px;
}
.stat-follow-modal-list {
  overflow-y: auto;
  padding: 8px 0;
  flex: 1;
}
.stat-follow-modal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  transition: background 0.15s;
}
.stat-follow-modal-item:hover {
  background: var(--accent-soft, rgba(128,128,128,0.08));
}
.stat-follow-modal-user {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.stat-follow-modal-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stat-follow-modal-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-follow-modal-bio {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-visibility-toggle {
  background: none;
  border: none;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 6px;
  transition: background 0.15s;
  margin-left: 4px;
}
.stat-visibility-toggle:hover {
  background: rgba(var(--accent-rgb), 0.1);
}
.author-stats-hidden {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}

/* ===== Admin Dashboard ===== */

.dashboard-section {
  margin-bottom: 24px;
}
.dashboard-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

/* ===== Online / Offline badges ===== */
.online-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.online-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ca3af;
  flex-shrink: 0;
}
.online-badge.online::before {
  background: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}
.online-badge.online {
  color: #22c55e;
}

/* ==================== Admin: Content Audit ==================== */

.admin-success-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: var(--success);
  margin-bottom: 12px;
}

.admin-subtabs {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.admin-subtab {
  flex: 1;
  height: 34px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--fg-muted);
  border: none;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.admin-subtab:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.admin-subtab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

/* ==================== Admin: System Logs ==================== */

.log-level-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.log-level-btn {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.log-level-btn:hover {
  background: rgba(128,128,128,0.06);
}

.log-level-btn.active {
  background: var(--pill-bg);
  color: var(--pill-text);
  border-color: var(--pill-border);
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  font-size: 12px;
  max-height: 480px;
  overflow-y: auto;
}

.log-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  background: transparent;
  transition: background 0.12s;
}

.log-entry:hover {
  background: rgba(128,128,128,0.04);
}

.log-time {
  flex-shrink: 0;
  color: var(--text-secondary);
  min-width: 80px;
}

.log-badge {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  min-width: 52px;
  text-align: center;
}

.log-badge-warning {
  background: rgba(251, 191, 36, 0.12);
  color: #d97706;
}

.log-badge-error {
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
}

.log-badge-critical {
  background: rgba(239, 68, 68, 0.18);
  color: #dc2626;
}

.log-name {
  flex-shrink: 0;
  color: var(--text-secondary);
  min-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-message {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

/* ==================== Admin: Announcements ==================== */

.announcement-create {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.announcement-align-group {
  display: flex;
  gap: 4px;
  align-items: center;
}

.announcement-align-group .btn-ghost.active {
  background: var(--pill-bg);
  color: var(--pill-text);
  border-color: var(--pill-border);
}

.announcement-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass-bg);
  font-size: 14px;
  color: var(--text-primary);
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.announcement-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.announcement-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 14px;
  transition: border-color 0.2s;
}

.announcement-item.active {
  border-color: var(--pill-border);
  background: var(--pill-bg);
}

.announcement-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.announcement-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(128,128,128,0.08);
  color: var(--text-secondary);
}

.announcement-badge.active {
  background: rgba(123, 97, 255, 0.12);
  color: var(--pill-text);
}

.announcement-time {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
}

.announcement-item-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==================== Admin: Data Export ==================== */

.export-grid {
  display: flex;
  gap: 16px;
}

.export-card {
  flex: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.export-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.export-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

/* ==================== Admin: User Detail ==================== */

.user-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.user-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-detail-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.user-detail-value {
  font-size: 14px;
  color: var(--text-primary);
}

.user-detail-divider {
  grid-column: 1 / -1;
  border-top: 1px solid var(--glass-border);
  margin: 4px 0;
}

.user-detail-login-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.user-detail-login-item {
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(128,128,128,0.06);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ==================== Admin: Config Center ==================== */

.config-settings-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.config-section {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 16px;
}

.config-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.config-section-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 12px;
  line-height: 1.7;
}

.config-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-current-badge {
  font-size: 12px;
  color: var(--pill-text);
  background: var(--pill-bg);
  padding: 4px 10px;
  border-radius: 6px;
  margin-left: 8px;
}

.config-fields-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.config-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.config-field input {
  width: 140px;
  padding: 8px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass-bg);
  font-size: 14px;
  color: var(--text-primary);
  transition: border-color 0.2s;
}

.config-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

/* ── 首页 hero 欢迎区（剧光语言） ── */
.home-welcome {
  margin-bottom: 16px;
}

.home-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--card-blur, blur(16px));
  -webkit-backdrop-filter: var(--card-blur, blur(16px));
}
.home-hero-kicker {
  position: relative;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.home-hero-title {
  position: relative;
  font-size: clamp(26px, 4.2vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
}
.home-hero-sub {
  position: relative;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-secondary, var(--text-dim));
  line-height: 1.7;
  max-width: 56ch;
}
.home-hero-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
@media (max-width: 600px) {
  .home-hero { padding: 22px 20px; }
}

/* ── 首页标签栏（发现角色内联） ── */
.home-tags-bar-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 16px;
}


.home-tags-toggle-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.home-tags-toggle-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.home-tags-pill {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--pill-bg);
  color: var(--pill-text);
  border: 1px solid var(--pill-border);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.4;
}

.home-tags-pill:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.home-tags-pill.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  font-weight: 600;
}

/* ── 首页推荐角色区 ── */
.home-discover-section {
  margin-bottom: 24px;
}

/* ── 引导占位卡 ── */
.home-guide-card {
  border: 2px dashed var(--glass-border);
  background: transparent;
  aspect-ratio: 4 / 5;
}
.home-guide-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: var(--text-dim);
}
.home-guide-card-plus {
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
}
.home-guide-card-text {
  font-size: 13px;
}
.home-guide-card:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.home-guide-card:hover .home-guide-card-inner {
  color: var(--primary);
}

/* ── 发现角色空状态 ── */
.discover-empty {
  text-align: center;
  padding: 48px 20px 56px;
  animation: fade-up 0.5s var(--ease-out);
}

.discover-empty-stage {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.discover-empty-svg {
  width: 180px;
  height: 150px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.04));
}

.discover-empty-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
  line-height: 1.4;
}

.discover-empty-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0 auto 24px;
  max-width: 300px;
}

.discover-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.discover-empty-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.discover-empty-cta:active {
  transform: translateY(0);
}

/* Small empty state (tag filter with no results) */
.discover-empty-sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 20px;
  text-align: center;
}

.discover-empty-sm span {
  font-size: 14px;
  color: var(--text-dim);
}

.home-discover-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 800px) {
  .home-discover-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .home-discover-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* 骨架屏占位 */
.home-discover-skeleton {
  border-radius: 14px;
  aspect-ratio: 4 / 5;
  background: var(--glass-border);
  animation: home-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes home-skeleton-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}

/* ── 新用户引导视图 ── */
.home-onboard-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
}

.home-onboard-header {
  text-align: center;
  margin-bottom: 8px;
}

.home-onboard-title-lg {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.home-onboard-subtitle {
  font-size: 14px;
  color: var(--text-dim);
}

.home-onboard-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  opacity: 0.5;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.home-onboard-card-active {
  opacity: 1;
  box-shadow: var(--card-shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.15);
}

.home-onboard-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-onboard-body {
  flex: 1;
  min-width: 0;
}

.home-onboard-step-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.home-onboard-step-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}

.home-onboard-btn {
  flex-shrink: 0;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.home-onboard-btn:hover {
  opacity: 0.85;
}

.home-onboard-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.home-onboard-divider span {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── 骨架屏 shimmer ── */
.skeleton-shimmer {
  position: relative;
  background: linear-gradient(
    90deg,
    var(--glass-border) 25%,
    rgba(255, 255, 255, 0.4) 50%,
    var(--glass-border) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: inherit;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── SkeletonCard ── */
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-card-block {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
}

.skeleton-card-line {
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
}

.skeleton-card-line-wide {
  width: 70%;
}

/* ── SkeletonRow ── */
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.skeleton-row-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.skeleton-row-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-row-line {
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
}

.skeleton-row-line-short {
  width: 40%;
}

/* ── 入场动画 ── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-item {
  animation: fadeSlideUp 0.3s ease-out both;
}

/* ── 空状态 SVG 插图 ── */
.shell-empty-svg {
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  color: var(--accent);
  opacity: 0.5;
}

/* ── 首页编辑推荐 ── */
.home-featured-section {
  margin-bottom: 24px;
}

.home-featured-bar {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}

.home-featured-bar::-webkit-scrollbar {
  display: none;
}

.home-featured-card {
  flex-shrink: 0;
  width: 200px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0;
}

.home-featured-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.home-featured-cover {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.home-featured-blur {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  object-fit: cover;
  filter: blur(16px) saturate(150%);
  z-index: 0;
}

.home-featured-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
  transition: transform 0.3s ease;
}

.home-featured-card:hover .home-featured-img {
  transform: scale(1.05);
}

.home-featured-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(115% 115% at 85% 95%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(160deg, var(--surface-2), var(--bg-hover));
  overflow: hidden;
}

.home-featured-letter {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  padding: 0.22em 0.4em;
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.02em;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  user-select: none;
  pointer-events: none;
  font-family: var(--font-display, inherit);
}

.home-featured-info {
  padding: 10px 12px 12px;
}

.home-featured-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-featured-identity {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* ---- Sidebar Search ---- */
.sidebar-search-wrap {
  position: relative;
  padding: 0 12px 8px;
}
.sidebar-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  transition: border-color 0.2s;
}
.sidebar-search-box:focus-within {
  border-color: var(--accent);
}
.sidebar-search-icon {
  color: var(--text-dim);
  flex-shrink: 0;
}
.sidebar-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.sidebar-search-input::placeholder {
  color: var(--text-dim);
}
.sidebar-search-dropdown {
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  margin-top: 4px;
  background: var(--glass-bg);
  backdrop-filter: var(--card-blur, blur(20px));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow, 0 8px 32px rgba(0,0,0,0.2));
  max-height: 360px;
  overflow-y: auto;
  z-index: 100;
  padding: 8px 0;
}
.sidebar-search-empty {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}
.sidebar-search-group {
  padding: 4px 0;
}
.sidebar-search-group-title {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 16px 6px;
  font-weight: 600;
}
.sidebar-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  color: var(--text);
}
.sidebar-search-item:hover {
  background: var(--accent-soft, rgba(var(--accent-rgb), 0.1));
}
.sidebar-search-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.sidebar-search-item-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-search-item-sub {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Announcement Banner ---- */
.announcement-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(var(--accent-rgb, 99,102,241), 0.1);
  border: 1px solid rgba(var(--accent-rgb, 99,102,241), 0.2);
  border-radius: 12px;
  margin: 12px 16px 0;
}
.announcement-banner-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
}
.announcement-banner-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.announcement-banner-close:hover {
  background: rgba(var(--accent-rgb, 99,102,241), 0.15);
}

/* ── BookReader ── */

.reader-container {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  font-family: Georgia, 'Noto Serif SC', serif;
}

.reader-container.reader-light {
  background: #faf8f5;
  color: #333;
}

.reader-container.reader-dark {
  background: #1a1a1a;
  color: #d4d4d4;
}

.reader-top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(128,128,128,0.15);
  flex-shrink: 0;
}

.reader-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reader-top-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.reader-top-btn:hover {
  background: rgba(128,128,128,0.12);
}

.reader-content {
  flex: 1;
  overflow-y: auto;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 24px 40px;
  line-height: 1.8;
  scroll-behavior: smooth;
}

.reader-content h1 { font-size: 1.6em; font-weight: 600; margin: 1.2em 0 0.6em; }
.reader-content h2 { font-size: 1.35em; font-weight: 600; margin: 1.1em 0 0.5em; }
.reader-content h3 { font-size: 1.15em; font-weight: 600; margin: 1em 0 0.4em; }
.reader-content p { margin: 0.6em 0; }
.reader-content blockquote {
  margin: 0.8em 0;
  padding: 0.5em 1em;
  border-left: 3px solid var(--accent, #667eea);
  background: rgba(128,128,128,0.06);
  border-radius: 0 6px 6px 0;
}
.reader-content blockquote p { margin: 0.2em 0; }
.reader-content code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.88em;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: rgba(128,128,128,0.1);
}
.reader-content pre {
  margin: 0.8em 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(128,128,128,0.08);
  overflow-x: auto;
}
.reader-content pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
}
.reader-content ul { margin: 0.6em 0; padding-left: 1.5em; }
.reader-content li { margin: 0.3em 0; }
.reader-content strong { font-weight: 600; }

.reader-bottom-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid rgba(128,128,128,0.15);
  flex-shrink: 0;
}

.reader-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 8px;
  background: transparent;
  color: var(--text, #333);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.reader-page-btn:hover:not(:disabled) {
  background: rgba(128,128,128,0.08);
  border-color: var(--accent, #667eea);
}
.reader-page-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.reader-page-info {
  font-size: 13px;
  color: var(--text-dim, #888);
  min-width: 60px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.reader-bottom-group {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.reader-bottom-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.reader-bottom-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.reader-bottom-btn:not(:disabled):hover {
  background: rgba(128,128,128,0.12);
}

.reader-font-size-label {
  font-size: 11px;
  min-width: 22px;
  text-align: center;
  color: var(--text-dim, #888);
}

.reader-theme-btn {
  margin-left: 4px;
}

.reader-loading,
.reader-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 15px;
  color: var(--text-dim);
}

/* ── Reader TOC Drawer ── */

.reader-toc-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.reader-toc-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.reader-toc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  z-index: 1001;
  background: #fff;
  color: #333;
  box-shadow: -4px 0 16px rgba(0,0,0,0.12);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}
.reader-dark .reader-toc-drawer {
  background: #1a1a1a;
  color: #d4d4d4;
}
.reader-toc-drawer.open {
  transform: translateX(0);
}

.reader-dark .reader-toc-drawer {
  background: #242424;
  box-shadow: -4px 0 16px rgba(0,0,0,0.35);
}

.reader-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(128,128,128,0.15);
  flex-shrink: 0;
}

.reader-toc-title {
  font-size: 15px;
  font-weight: 600;
}

.reader-toc-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.reader-toc-close:hover {
  background: rgba(128,128,128,0.12);
}

.reader-toc-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.reader-toc-item {
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s;
  color: inherit;
  line-height: 1.7;
}
.reader-dark .reader-toc-item {
  color: #d4d4d4;
}
.reader-toc-item:hover {
  background: rgba(var(--accent-rgb, 102,126,234), 0.08);
}

.reader-toc-item.active {
  background: rgba(var(--accent-rgb, 102,126,234), 0.12);
  color: var(--accent, #667eea);
  font-weight: 600;
}

.reader-toc-level-1 {
  font-size: 14px;
  font-weight: 600;
  padding-top: 12px;
  padding-bottom: 10px;
}
.reader-toc-level-2 { padding-left: 28px; }
.reader-toc-level-3 { padding-left: 40px; font-size: 12px; }

/* ── Mobile reader tweaks ── */
@media (max-width: 640px) {
  .reader-content { padding: 16px 16px 40px; }
}

/* ── Mobile books grid ── */
@media (max-width: 640px) {
  .mine-books-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
}

/* ===== Legal Page (用户协议 / 隐私政策) ===== */
.legal-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.legal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--glass-border);
  padding: 0 24px;
  flex-shrink: 0;
}

.legal-tab {
  padding: 12px 20px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-family: inherit;
}

.legal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.legal-tab:hover {
  color: var(--text-primary);
}

.legal-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  line-height: 1.7;
  font-size: 14px;
  color: var(--text-primary);
}

.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  color: var(--text-primary);
}

.legal-content h1 { font-size: 20px; }
.legal-content h2 { font-size: 17px; }
.legal-content h3 { font-size: 15px; }

.legal-content p {
  margin-bottom: 1em;
}

.legal-content ul,
.legal-content ol {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.legal-content li {
  margin-bottom: 0.3em;
}

.legal-content a {
  color: var(--accent);
  text-decoration: underline;
}

.legal-content strong {
  font-weight: 600;
}

/* ===== Legal consent checkbox (registration form) ===== */
.legal-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.legal-consent input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
}

.legal-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.legal-link-btn:hover {
  opacity: 0.8;
}

/* 来源条文件名：磨砂胶囊，与输入框/气泡同材质 */
.chat-context-link {
  background: var(--input-bg, rgba(255, 255, 255, 0.45));
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  color: var(--pill-text);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  transition: background 0.15s ease, border-color 0.15s ease;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.chat-context-link:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.40);
}

/* ===== 法律条款页 header 排版（对齐 + 间距，无蒙布）===== */
.legal-page .panel-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 24px 14px;
}

.legal-page .panel-title {
  margin: 0;
}

/* ── Message reaction bar (hover reveal via .cbubble:hover) ── */
.msg-reactions-bar {
  position: absolute;
  top: 100%;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}
.cbubble:hover .msg-reactions-bar,
.msg-reactions-bar:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.msg-reactions-bar[data-side="left"] {
  right: 0;
  left: auto;
}
.msg-reactions-bar[data-side="right"] {
  left: 0;
  right: auto;
}

/* ===== Mobile Adaptation: Step 2 ===== */
.mobile-tabbar {
  display: none;
}

@media (max-width: 768px) {
  .sidebar,
  .sidebar-trigger,
  .sidebar-overlay {
    display: none !important;
  }

  .mobile-tabbar {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 32px var(--shadow-color);
  }

  /* 概念稿 TabBar：毛玻璃 surface + active accent + 小圆点 */
  .mobile-tabbar .adm-tab-bar {
    height: 50px;
    padding: 0 10px;
  }
  .mobile-tabbar .adm-tab-bar-item {
    color: var(--fg-subtle);
    font-size: 10.5px;
    font-weight: 500;
    transition: color 0.2s var(--ease-out);
  }
  .mobile-tabbar .adm-tab-bar-item-active {
    color: var(--accent);
    font-weight: 600;
  }
  .mobile-tabbar .adm-tab-bar-icon {
    margin-bottom: 2px;
  }
  .mobile-tabbar .tab-icon-wrap {
    position: relative;
    display: inline-flex;
    justify-content: center;
  }
  .mobile-tabbar .tab-dot {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 99px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.2s var(--ease-out);
  }
  .mobile-tabbar .adm-tab-bar-item-active .tab-dot {
    opacity: 1;
  }

  .main-panel {
    margin: 0;
    border-radius: 0;
    border: none;
    padding-bottom: calc(50px + var(--safe-bottom));
  }
  .app-shell.has-sidebar-open .main-panel {
    margin-left: 0;
  }
}

/* TabBar unread badge dot */
.tab-badge-wrap {
  position: relative;
  display: inline-flex;
}
.tab-badge-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  border: 2px solid var(--card-bg);
}

/* MinePage unread number badge (antd-mobile List extra) */
.mine-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* MinePage theme drawer (mobile Popup) */
.mine-theme-drawer {
  background: var(--card-bg);
  border-radius: 16px 16px 0 0;
  padding: 16px 20px 24px;
}
.mine-theme-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.mine-theme-drawer-close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mine-theme-drawer-close:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}
.mine-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mine-theme-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-bg);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
}
.mine-theme-item:hover {
  background: var(--accent-soft);
  border-color: var(--pill-border);
}
.mine-theme-item.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.mine-theme-emoji {
  font-size: 24px;
  line-height: 1;
}
.mine-theme-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.mine-theme-check {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
}

/* ── EntryGrid (mobile mine page quick actions) ── */
.entry-grid {
  display: grid;
  gap: 8px;
  padding: 0;
}
.entry-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.15s;
  font-family: inherit;
}
.entry-grid-item:hover {
  background: var(--accent-soft);
}
.entry-grid-item:active {
  background: var(--accent-soft);
  transform: scale(0.96);
}
.entry-grid-icon-wrap {
  position: relative;
  display: inline-flex;
  color: var(--text-primary);
}
.entry-grid-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid var(--card-bg);
}
.entry-grid-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.entry-grid-compact .entry-grid-item {
  min-height: 64px;
  padding: 14px 4px;
  gap: 4px;
  border-radius: 0;
  background: transparent;
}
.entry-grid-compact .entry-grid-item:hover,
.entry-grid-compact .entry-grid-item:active {
  background: transparent;
  transform: none;
}
.entry-grid-compact .entry-grid-label {
  font-size: 12px;
}
@media (max-width: 360px) {
  .entry-grid-compact { gap: 4px; }
  .entry-grid-compact .entry-grid-item { padding: 12px 2px; }
  .entry-grid-compact .entry-grid-label { font-size: 11px; }
}

/* ── EntryList (mobile mine page grouped list) ── */
.entry-list {
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
}
.entry-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
  border-bottom: 0.5px solid var(--glass-border);
}
.entry-list-item:last-child {
  border-bottom: none;
}
.entry-list-item:hover {
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.entry-list-item:active {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.settings-logout-btn {
  color: var(--danger);
  border-radius: 0;
}
.settings-logout-btn:hover {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.settings-logout-btn:active {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.settings-logout-btn .entry-list-icon-wrap {
  color: var(--danger);
}
.entry-list-icon-wrap {
  position: relative;
  display: inline-flex;
  color: var(--text-primary);
  flex-shrink: 0;
}
.entry-list-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 99px;
  background: #ff3b30;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid var(--card-bg);
}
.entry-list-label {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
}
.entry-list-arrow {
  color: var(--text-dim);
  flex-shrink: 0;
}

.entry-group-gap {
  height: 8px;
}

@media (max-width: 768px) {
  /* ── CharCard mobile: detail view sticky PageHeader ── */
  .page-header-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--card-bg);
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .char-body {
    flex-direction: column;
  }
}

/* ===== Mobile Adaptation: Step 4 — WeChat-style compact chat ===== */
@media (max-width: 768px) {
  /* ── Input area: thin bar, sticky bottom ── */
  .composer-bar {
    position: sticky;
    bottom: 0;
    padding: 6px 10px;
    padding-bottom: calc(8px + var(--safe-bottom));
    gap: 8px;
    background: var(--glass-bg);
    border-top: 0.5px solid var(--glass-border);
  }

  /* Voice button: center-align with siblings in the flex bar */
  .chat-input-voice-btn {
    align-self: center;
  }

  /* ── Emoji button: bare icon, 36px hit area ── */
  .composer-bar [data-emoji-btn] {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 0;
    align-self: center;
  }
  .composer-bar [data-emoji-btn] svg {
    width: 28px;
    height: 28px;
  }

  /* ── Textarea: 36px, pill shape, no border/shadow ── */
  .chat-textarea {
    --field-h: 36px;
    min-height: var(--field-h);
    border-radius: 18px;
    border: none;
  }
  .chat-textarea:focus {
    border: none;
    box-shadow: none;
  }

  /* ── Send button: always visible (disabled when empty), compact accent pill ── */
  .chat-send-btn {
    width: 56px;
    min-width: 56px;
    height: 36px;
    min-height: 36px;
    border-radius: 18px;
    font-size: 13px;
    background: var(--accent);
  }
  .chat-send-btn:not(:disabled) {
    animation: chat-send-fadein 0.15s ease;
  }

  /* ── Prevent layout-level scroll on mobile; iOS still tracks vv.offsetTop ── */
  html, body {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
    /* Mobile has no legitimate horizontal scrolling use-case */
    touch-action: pan-y;
  }
  html {
    background: var(--bg);
  }
  body {
    position: fixed;
    inset: 0;
    width: 100%;
  }

  /* ── App shell: keyboard-aware via --vvh (set by useVisualViewport) ── */
  .app-shell {
    height: var(--vvh, 100dvh);
  }

  /* Chat containers fill the app-shell chain */
  .chat-area,
  .private-chat,
  .group-chat-page {
    height: 100%;
  }

  /* ── Topbar: sticky, always reachable ── */
  .chat-topbar-compact {
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .private-chat-header {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  /* Sticky headers: each handles its own safe-area so the notch/status-bar
     area is always filled with the header's background (not body bg). */
  .chat-topbar-compact,
  .group-chat-main .private-chat-header,
  .page-header-sticky {
    padding-top: env(safe-area-inset-top);
    background-clip: padding-box;
  }
  .chat-topbar-avatar-btn.avatar-shape > div {
    width: 36px !important;
    height: 36px !important;
  }
  .chat-topbar-compact-name {
    font-size: 15px;
  }

  /* ── User role bar: thin strip ── */
  .user-role-bar {
    height: 28px;
    padding: 2px 16px;
  }

  /* ── Messages area: tighter padding; extra bottom for sticky input bar ── */
  .chat-messages {
    padding: 8px 12px 80px;
  }
  .chat-area .chat-messages {
    padding: 8px 16px 80px;
  }

  /* ── Bubble max-width: relax to 78% ── */
  .cbubble-col {
    max-width: 78%;
  }

  /* ── Group chat messages: edge-to-edge ── */
  .group-chat-layout .group-chat-messages-area {
    padding: 12px 0 80px;
    gap: 12px;
  }

  /* ── Private message body: extra bottom for sticky input bar ── */
  .private-chat-body {
    padding: 12px 12px 80px;
  }

  /* ── Existing mobile chat styles kept ── */
  .chat-messages,
  .group-chat-messages-area {
    -webkit-overflow-scrolling: touch;
  }
  .app-shell.is-secondary-view .main-panel,
  .app-shell.in-conversation .main-panel {
    padding-bottom: 0;
  }
  .cbubble-time {
    white-space: nowrap;
  }
}

@keyframes chat-send-fadein {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== Mobile Adaptation: Step 5 ===== */
@media (max-width: 768px) {
  .market-grid-v2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mine-page-v2 .market-grid-v2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* 2-column character grid inside mine tab content */
  .mine-tab-content .market-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ===== Mobile Adaptation: Step 6 — perf ===== */
@media (max-width: 768px) {
  .ocean-particle.p4,
  .ocean-particle.p5,
  .ocean-particle.p6 { display: none; }

  .bg-blob { animation: none; filter: blur(70px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
  }
}

/* 用户主动要求减少透明度（系统级）：彻底移除玻璃。backdrop-filter: none 只会删不增，全局安全 */
@media (prefers-reduced-transparency: reduce) {
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ===== Mobile Adaptation: Step 7 — creation page card wrap ===== */
@media (max-width: 768px) {
  .creation-text-card {
    flex-wrap: wrap;
  }
  .creation-text-info {
    flex: 1 1 100%;
    min-width: 0;
    order: -1;
  }
  .creation-text-title,
  .creation-text-filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .creation-text-meta {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .creation-text-actions {
    margin-left: auto;
  }

  .mine-tab-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mine-tab-bar::-webkit-scrollbar { display: none; }
  .mine-tab { white-space: nowrap; flex-shrink: 0; }

  .market-toolbar { flex-wrap: wrap; row-gap: 10px; }
  .market-search-form { flex: 1 1 100%; }
  .market-sort-tabs { flex-shrink: 0; }
  .market-sort-btn { white-space: nowrap; }

  .home-char-card { padding: 12px 14px; gap: 10px; }
  .home-char-card-text .home-char-identity {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }
}

/* ── Mobile inputs: 16px to prevent iOS auto-zoom on focus ── */
@media (max-width: 768px) {
  input:not([type=checkbox]):not([type=radio]),
  textarea,
  select {
    font-size: 16px;
  }
}

/* ── Mobile: card detail layout fixes ── */
@media (max-width: 768px) {
  .card-rel-row { flex-wrap: wrap; }
  .card-rel-type { flex-shrink: 1; white-space: normal; min-width: 0; word-break: break-all; }
}

@media (max-width: 768px) {
  .card-footer { flex-wrap: wrap; }
  .card-footer > button { flex: 1 1 auto; white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════
   ── 蒸馏工作台 DistillWorkbench（概念稿 distill.html 落地）──
   双栏：左任务列表 + 右详情（stepper/进度/统计/日志/CTA）
   ══════════════════════════════════════════════════════════════ */
.dw-shell {
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* 桌面双栏 */
.dw-desktop {
  display: grid;
  grid-template-columns: minmax(280px, 300px) 1fr;
  gap: var(--space-5);
  padding: var(--space-4);
}

/* 左栏任务面板 */
.dw-task-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.dw-task-head {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.dw-task-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dw-task-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.dw-task-sub { margin: 3px 0 0; font-size: 12px; color: var(--fg-subtle); }
.dw-task-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dw-section-label {
  margin: var(--space-2) var(--space-2) var(--space-1);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-subtle);
  letter-spacing: 0.04em;
}

.dw-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.dw-task-item:hover { background: var(--surface-2); }
.dw-task-item.is-active { background: var(--accent-soft); }
.dw-task-item.is-error .dw-item-name { color: var(--danger); }
.dw-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dw-item-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dw-item-sub {
  font-size: 11.5px; color: var(--fg-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dw-item-progress { flex: 0 0 auto; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.dw-item-progress-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); }
.dw-item-badge { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.dw-item-badge.is-done { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.dw-item-badge.is-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* 空态 */
.dw-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--fg-subtle);
  text-align: center;
}
.dw-empty p { margin: 0; font-size: 13px; }
.dw-empty-btn {
  margin-top: 6px; height: 36px; padding: 0 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
}

/* 右栏详情 */
.dw-detail-panel { min-width: 0; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.dw-detail-scroll {
  height: 100%;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.dw-detail-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fg-subtle); }

/* hero */
.dw-hero {
  position: relative; overflow: hidden;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
}
.dw-stage-glow {
  position: absolute; pointer-events: none;
  left: 0; right: 0; bottom: -60px; height: 120px;
  background: radial-gradient(70% 90% at 50% 100%, var(--glow), transparent 72%);
}
.dw-hero-row { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.dw-hero-id { flex: 1; min-width: 0; }
.dw-hero-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.dw-hero-sub { margin: 4px 0 0; font-size: 12px; color: var(--fg-muted); font-family: var(--font-mono); }

.dw-badge {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 99px;
  background: var(--surface-3); color: var(--fg-muted); border: 1px solid var(--border);
}
.dw-badge.is-done { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: transparent; }
.dw-badge.is-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: transparent; }

/* stepper */
.dw-stepper { display: flex; align-items: flex-start; }
.dw-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.dw-step:not(:last-child)::after {
  content: ''; position: absolute; top: 13px; left: calc(50% + 14px);
  width: calc(100% - 28px); height: 2px; background: var(--surface-3); border-radius: 2px;
}
.dw-step.is-done:not(:last-child)::after { background: var(--accent); }
.dw-step-dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--fg-subtle);
  border: 1px solid var(--border); z-index: 1; transition: all var(--dur) var(--ease-out);
}
.dw-step.is-active .dw-step-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--ring); }
.dw-step.is-done .dw-step-dot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.dw-step.is-error .dw-step-dot { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 25%, transparent); }
.dw-step-label { font-size: 11px; color: var(--fg-subtle); text-align: center; }
.dw-step.is-active .dw-step-label { color: var(--text); font-weight: 600; }
.dw-step.is-done .dw-step-label { color: var(--fg-muted); }

/* error banner */
.dw-error-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: 13px;
}

/* progress */
.dw-progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.dw-progress-bar {
  display: block; height: 100%; border-radius: 99px;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}

/* stat grid */
.dw-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.dw-tstat { background: var(--surface-2); border-radius: var(--radius-md); padding: 10px 8px; text-align: center; min-width: 0; }
.dw-tstat b {
  display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dw-tstat span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--fg-subtle); }

/* log card */
.dw-log-card { padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border); }
.dw-log-eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; font-weight: 600; color: var(--fg-subtle); }
.dw-log-line { display: flex; gap: 10px; align-items: baseline; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.9; color: var(--fg-muted); }
.dw-log-t { color: var(--fg-subtle); flex: 0 0 auto; }
.dw-log-text { min-width: 0; overflow-wrap: break-word; }
.dw-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; align-self: center; }
.dw-dot-run { background: var(--accent); animation: dw-blink 1.2s infinite; }
.dw-dot-done { background: var(--success); }
.dw-dot-wait { background: var(--border-strong); }
.dw-dot-error { background: var(--danger); }
@keyframes dw-blink { 50% { opacity: 0.35; } }

/* 已验收卡片详情 */
.dw-card-identity { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--fg-muted); }
.dw-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dw-card-tag { padding: 3px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; color: var(--fg-muted); }
.dw-awakening { padding: 12px 14px; border-radius: var(--radius-lg); background: var(--accent-soft); border: 1px dashed var(--accent); }
.dw-awakening-label { font-size: 11px; font-weight: 600; color: var(--accent-strong); }
.dw-awakening-text { margin: 4px 0 0; font-size: 13px; line-height: 1.7; color: var(--text); }

/* CTA */
.dw-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.dw-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.dw-cta-btn:active { transform: scale(0.97); }
.dw-cta-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-xs); }
.dw-cta-primary:hover { background: var(--accent-strong); }
.dw-cta-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.dw-cta-secondary:hover { background: var(--surface-3); }
.dw-cta-ghost { background: transparent; color: var(--fg-muted); }
.dw-cta-ghost:hover { background: var(--surface-2); color: var(--text); }

/* 返回按钮 */
.dw-back-btn {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--fg-muted); font-size: 12.5px; cursor: pointer;
}
.dw-back-btn:hover { background: var(--surface-3); color: var(--text); }
.dw-back-btn-mobile { margin-bottom: 4px; }

/* FAB 面板头部动作区（工作台入口） */
.distill-panel-actions { display: flex; align-items: center; gap: 4px; }
.distill-panel-wb {
  height: 26px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--accent-strong); font-size: 12px; font-weight: 600; cursor: pointer;
}
.distill-panel-wb:hover { background: var(--accent-soft); }

/* 角色管理头部 + 工作台入口按钮 */
.creation-char-section .panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-header-main { min-width: 0; }
.dw-entry-btn {
  flex: 0 0 auto; height: 36px; padding: 0 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--accent-strong); font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.dw-entry-btn:hover { background: var(--accent-soft); }

/* 移动端单栏 */
.dw-mobile { display: flex; flex-direction: column; padding: var(--space-3); }
.dw-mobile .dw-task-panel,
.dw-mobile .dw-detail-scroll { flex: 1; min-height: 0; }
.dw-mobile .dw-detail-scroll { height: auto; }

/* ===== antd-mobile Theme Bridge =====
 * Maps project CSS color variables to antd-mobile CSS variables.
 * All themes (aurora/milktea/ocean/sakura/midnight) define the same
 * variable names, so a single :root block follows whichever theme is active.
 */
:root {
  /* Primary & status */
  --adm-color-primary: var(--accent);

  /* Background & surface */
  --adm-color-background: var(--bg-page);
  --adm-color-box: var(--card-bg);
  --adm-color-light: var(--secondary);

  /* Text */
  --adm-color-text: var(--text-primary);
  --adm-color-text-secondary: var(--text-secondary);
  --adm-color-weak: var(--text-dim);

  /* Border */
  --adm-color-border: var(--glass-border);

  /* Radius */
  --adm-radius-m: var(--input-radius);
  --adm-radius-l: var(--btn-radius);
  --adm-radius-xl: var(--card-radius);
}
:root {
  --adm-radius-s: 4px;
  --adm-radius-m: 8px;
  --adm-radius-l: 12px;
  --adm-font-size-1: 9px;
  --adm-font-size-2: 10px;
  --adm-font-size-3: 11px;
  --adm-font-size-4: 12px;
  --adm-font-size-5: 13px;
  --adm-font-size-6: 14px;
  --adm-font-size-7: 15px;
  --adm-font-size-8: 16px;
  --adm-font-size-9: 17px;
  --adm-font-size-10: 18px;
  --adm-color-primary: #1677ff;
  --adm-color-success: #00b578;
  --adm-color-warning: #ff8f1f;
  --adm-color-danger: #ff3141;
  --adm-color-yellow: #ff9f18;
  --adm-color-orange: #ff6430;
  --adm-color-wathet: #e7f1ff;
  --adm-color-text: #333333;
  --adm-color-text-secondary: #666666;
  --adm-color-weak: #999999;
  --adm-color-light: #cccccc;
  --adm-color-border: #eeeeee;
  --adm-color-background: #ffffff;
  --adm-color-highlight: var(--adm-color-danger);
  --adm-color-white: #ffffff;
  --adm-color-box: #f5f5f5;
  --adm-color-text-light-solid: var(--adm-color-white);
  --adm-color-text-dark-solid: #000000;
  --adm-color-fill-content: var(--adm-color-box);
  --adm-font-size-main: var(--adm-font-size-5);
  --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
    helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
  --adm-border-color: var(--adm-color-border);
}
html[data-prefers-color-scheme='dark'] {
  --adm-color-primary: #3086ff;
  --adm-color-success: #34b368;
  --adm-color-warning: #ffa930;
  --adm-color-danger: #ff4a58;
  --adm-color-yellow: #ffa930;
  --adm-color-orange: #e65a2b;
  --adm-color-wathet: #0d2543;
  --adm-color-text: #e6e6e6;
  --adm-color-text-secondary: #b3b3b3;
  --adm-color-weak: #808080;
  --adm-color-light: #4d4d4d;
  --adm-color-border: #2b2b2b;
  --adm-color-box: #0a0a0a;
  --adm-color-background: #1a1a1a;
  --adm-color-background-body: var(--adm-color-background);
  --adm-border-color: var(--adm-color-border);
}
:root {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  background-color: var(--adm-color-background-body);
}
body {
  color: var(--adm-color-text);
  font-size: var(--adm-font-size-main);
  font-family: var(--adm-font-family);
}
a,
button {
  cursor: pointer;
}
a {
  color: var(--adm-color-primary);
  transition: opacity ease-in-out 0.2s;
}
a:active {
  opacity: 0.8;
}
.adm-plain-anchor {
  color: unset;
  transition: none;
}
.adm-plain-anchor:active {
  opacity: unset;
}
body.adm-overflow-hidden {
  overflow: hidden !important;
}
div.adm-px-tester {
  --size: 1;
  height: calc(var(--size) / 2 * 2px);
  width: 0;
  position: fixed;
  left: -100vw;
  top: -100vh;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}
.adm-popup {
  --z-index: var(--adm-popup-z-index, 1000);
  position: fixed;
  z-index: var(--z-index);
}
.adm-popup-body {
  position: fixed;
  background-color: var(--adm-color-background);
  z-index: calc(var(--z-index) + 10);
}
.adm-popup-body .adm-popup-close-icon {
  position: absolute;
  z-index: 100;
}
.adm-popup-body-position-bottom {
  width: 100%;
  bottom: 0;
  left: 0;
}
.adm-popup-body-position-bottom .adm-popup-close-icon {
  right: 8px;
  top: 8px;
}
.adm-popup-body-position-top {
  width: 100%;
  top: 0;
  left: 0;
}
.adm-popup-body-position-top .adm-popup-close-icon {
  right: 8px;
  bottom: 8px;
}
.adm-popup-body-position-left {
  height: 100%;
  top: 0;
  left: 0;
}
.adm-popup-body-position-left .adm-popup-close-icon {
  right: 8px;
  top: 8px;
}
.adm-popup-body-position-right {
  height: 100%;
  top: 0;
  right: 0;
}
.adm-popup-body-position-right .adm-popup-close-icon {
  left: 8px;
  top: 8px;
}
.adm-popup-close-icon {
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
  line-height: 1;
  color: var(--adm-color-weak);
}
.adm-mask {
  --z-index: var(--adm-mask-z-index, 1000);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index);
  display: block;
  width: 100%;
  height: 100%;
}
.adm-mask-aria-button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.adm-mask-content {
  z-index: 1;
}
.adm-safe-area {
  --multiple: var(--adm-safe-area-multiple, 1);
  display: block;
  width: 100%;
}
.adm-safe-area-position-top {
  padding-top: calc(env(safe-area-inset-top) * var(--multiple));
}
.adm-safe-area-position-bottom {
  padding-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));
}
.adm-badge-wrapper {
  display: inline-block;
  position: relative;
}
.adm-badge {
  display: inline-flex;
  vertical-align: middle;
  box-sizing: content-box;
  border-radius: 100px;
  background-color: var(--color);
  --right: 0;
  --top: 0;
  --color: var(--adm-badge-color, var(--adm-color-highlight));
}
.adm-badge-content {
  color: var(--adm-color-text-light-solid);
  box-sizing: border-box;
  min-width: 8px;
  padding: 1px 4px;
  font-size: var(--adm-font-size-1);
  line-height: 12px;
  white-space: nowrap;
  font-weight: normal;
  text-align: center;
}
.adm-badge-fixed {
  position: absolute;
  right: var(--right);
  top: var(--top);
  transform: translate(50%, -50%);
}
.adm-badge-dot {
  min-width: 10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
.adm-badge-bordered {
  border: solid 1px var(--adm-color-text-light-solid);
}
.adm-tab-bar-wrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  min-height: 48px;
}
.adm-tab-bar-item {
  flex: 1;
  color: var(--adm-color-text-secondary);
  white-space: nowrap;
  padding: 4px 8px;
  width: -webkit-min-content;
  width: min-content;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.adm-tab-bar-item-icon {
  font-size: 24px;
  height: 24px;
  line-height: 1;
}
.adm-tab-bar-item-title {
  font-size: var(--adm-font-size-2);
  line-height: 15px;
}
.adm-tab-bar-item-title-with-icon {
  margin-top: 2px;
}
.adm-tab-bar-item-active {
  color: var(--adm-color-primary);
}
.adm-tab-bar-icon-badge {
  --top: 6px;
}
.adm-tab-bar-title-badge {
  --right: -2px;
  --top: -2px;
}