From 9542a224db59c830fd4573522e572d1d46051e73 Mon Sep 17 00:00:00 2001
From: Metona Desktop <metona@desktop>
Date: Sun, 5 Apr 2026 23:16:29 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=87=8D=E6=9E=84=20UI=20=E4=B8=BA=20?=
 =?UTF-8?q?Windows=2011=20Fluent=20Design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 配色: Mica 材质暗色 (#202020)，替代赛博朋克霓虹风
- 字体: Segoe UI Variable，WinUI 3 标准
- 圆角: 4px 控件 / 8px 卡片 / 12px 弹窗
- 按钮: WinUI Button 风格，移除渐变发光
- 开关: WinUI ToggleSwitch 风格
- 输入框: 聚焦时 border-focus 蓝色边框
- 弹窗: ContentDialog 风格，scale 入场动画
- 移除: 霓虹渐变、毛玻璃光效、脉冲动画
- 保持: 所有功能不变，纯样式重构
---
 css/style.css | 2134 +++++++++++++++++++++++--------------------------
 1 file changed, 1005 insertions(+), 1129 deletions(-)

diff --git a/css/style.css b/css/style.css
index 9790192..efe5bde 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,37 +1,60 @@
 /* ═══════════════════════════════════════════════════════════════
-   Metona Ollama Client - 未来感深色主题
-   玻璃拟态 + 霓虹色点缀 + Mobile First 响应式
+   Metona Ollama — Windows 11 Fluent Design 暗色主题
+   Mica 材质 · Segoe UI Variable · WinUI 3 控件风格
    ═══════════════════════════════════════════════════════════════ */
 
 /* ── CSS 变量 ── */
 :root {
-    --bg-primary: #0a0a1a;
-    --bg-secondary: #0f0f2a;
-    --bg-glass: rgba(15, 15, 42, 0.7);
-    --bg-glass-light: rgba(25, 25, 60, 0.5);
-    --bg-glass-hover: rgba(35, 35, 80, 0.5);
-    --border-glass: rgba(100, 100, 255, 0.15);
-    --border-glow: rgba(0, 245, 212, 0.3);
-    --text-primary: #e8e8f0;
-    --text-secondary: #8888aa;
-    --text-muted: #555570;
-    --accent-cyan: #00f5d4;
-    --accent-purple: #7b2ff7;
-    --accent-blue: #3b82f6;
-    --accent-pink: #f472b6;
-    --accent-red: #ef4444;
-    --accent-green: #22c55e;
-    --accent-yellow: #eab308;
-    --gradient-main: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
-    --shadow-glow: 0 0 20px rgba(0, 245, 212, 0.15);
-    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4);
+    /* Windows 11 暗色调色板 */
+    --bg-solid: #202020;
+    --bg-card: #2d2d2d;
+    --bg-card-hover: #323232;
+    --bg-layer: #383838;
+    --bg-layer-alt: #2a2a2a;
+    --bg-smoke: rgba(0, 0, 0, 0.3);
+    --bg-mica: rgba(32, 32, 32, 0.72);
+    --bg-acrylic: rgba(32, 32, 32, 0.8);
+
+    --border-subtle: rgba(255, 255, 255, 0.06);
+    --border-default: rgba(255, 255, 255, 0.08);
+    --border-strong: rgba(255, 255, 255, 0.12);
+    --border-focus: #60CDFF;
+
+    --text-primary: #FFFFFF;
+    --text-secondary: #999999;
+    --text-tertiary: #666666;
+    --text-disabled: #505050;
+
+    --accent: #60CDFF;
+    --accent-hover: #7AD8FF;
+    --accent-subtle: rgba(96, 205, 255, 0.06);
+    --accent-subtle-hover: rgba(96, 205, 255, 0.1);
+
+    --critical: #F1707B;
+    --critical-bg: rgba(241, 112, 123, 0.06);
+    --success: #6CCB5F;
+    --success-bg: rgba(108, 203, 95, 0.06);
+    --caution: #FCE100;
+    --caution-bg: rgba(252, 225, 0, 0.06);
+
+    /* 圆角 — Windows 11 标准 */
+    --radius-control: 4px;
     --radius-sm: 8px;
-    --radius-md: 12px;
-    --radius-lg: 16px;
-    --radius-xl: 20px;
-    --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-    --transition: all 0.2s ease;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+
+    /* 阴影 — Fluent Design 深度 */
+    --shadow-flyout: 0 8px 16px rgba(0, 0, 0, 0.14);
+    --shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.18);
+    --shadow-tooltip: 0 4px 8px rgba(0, 0, 0, 0.14);
+
+    /* 字体 */
+    --font: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
+    --font-mono: 'Cascadia Mono', 'Cascadia Code', 'Consolas', monospace;
+
+    --transition: 167ms cubic-bezier(0, 0, 0, 1);
+    --transition-fast: 83ms cubic-bezier(0, 0, 0, 1);
 }
 
 /* ── 全局重置 ── */
@@ -44,33 +67,19 @@
 html, body {
     height: 100%;
     overflow: hidden;
-    background: var(--bg-primary);
+    background: var(--bg-solid);
     color: var(--text-primary);
-    font-family: var(--font-sans);
-    font-size: 15px;
-    line-height: 1.6;
+    font-family: var(--font);
+    font-size: 14px;
+    line-height: 1.5;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
-/* 背景动态网格 */
-body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background:
-        radial-gradient(circle at 20% 30%, rgba(0, 245, 212, 0.05) 0%, transparent 50%),
-        radial-gradient(circle at 80% 70%, rgba(123, 47, 247, 0.05) 0%, transparent 50%);
-    pointer-events: none;
-    z-index: 0;
-}
-
 #app {
     display: flex;
     flex-direction: column;
     height: 100vh;
-    position: relative;
-    z-index: 1;
 }
 
 /* ═══ 顶部导航 ═══ */
@@ -78,11 +87,11 @@ body::before {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 16px;
-    background: var(--bg-glass);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border-glass);
+    padding: 8px 16px;
+    background: var(--bg-mica);
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    border-bottom: 1px solid var(--border-subtle);
     flex-shrink: 0;
     z-index: 10;
 }
@@ -90,74 +99,56 @@ body::before {
 .header-left {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
     min-width: 0;
     flex: 1;
 }
 
 .logo {
-    font-size: 24px;
-    filter: drop-shadow(0 0 8px rgba(0, 245, 212, 0.4));
+    font-size: 20px;
     flex-shrink: 0;
 }
 
 .app-title {
-    font-size: 16px;
-    font-weight: 700;
-    background: var(--gradient-main);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    letter-spacing: 0.5px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
     white-space: nowrap;
 }
 
 .app-version {
     font-size: 10px;
     font-weight: 600;
-    color: #fff;
-    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
-    border: none;
-    border-radius: 10px;
-    padding: 2px 8px;
-    margin-left: 4px;
-    letter-spacing: 0.8px;
+    color: var(--text-secondary);
+    background: var(--bg-layer);
+    border: 1px solid var(--border-default);
+    border-radius: 12px;
+    padding: 1px 8px;
+    white-space: nowrap;
     user-select: none;
-    flex-shrink: 0;
-    box-shadow: 0 0 8px rgba(0, 245, 212, 0.3);
-    animation: version-pulse 3s ease-in-out infinite;
-}
-
-@keyframes version-pulse {
-    0%, 100% { box-shadow: 0 0 8px rgba(0, 245, 212, 0.25); }
-    50% { box-shadow: 0 0 14px rgba(0, 245, 212, 0.45); }
 }
 
 .header-right {
     display: flex;
     align-items: center;
-    gap: 6px;
-    flex-shrink: 0;
+    gap: 4px;
 }
 
-/* ── 连接状态指示器 ── */
+/* ── 连接状态 ── */
 .conn-status {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 4px 10px;
-    border-radius: 20px;
-    cursor: default;
-    transition: var(--transition);
+    border-radius: var(--radius-control);
     font-size: 12px;
-    font-weight: 500;
+    color: var(--text-secondary);
 }
 
 .status-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    flex-shrink: 0;
     transition: var(--transition);
 }
 
@@ -165,128 +156,130 @@ body::before {
     white-space: nowrap;
 }
 
-/* 已连接 - 绿色脉冲 */
-.conn-status.connected {
-    background: rgba(34, 197, 94, 0.12);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-    color: var(--accent-green);
-}
 .conn-status.connected .status-dot {
-    background: var(--accent-green);
-    box-shadow: 0 0 6px var(--accent-green);
-    animation: pulse 2s ease-in-out infinite;
+    background: var(--success);
+    box-shadow: 0 0 4px var(--success);
 }
 
-/* 未连接 - 红色 */
-.conn-status.disconnected {
-    background: rgba(239, 68, 68, 0.12);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-    color: var(--accent-red);
-}
 .conn-status.disconnected .status-dot {
-    background: var(--accent-red);
-    box-shadow: 0 0 6px var(--accent-red);
+    background: var(--critical);
 }
 
-/* 连接中 - 黄色闪烁 */
-.conn-status.pending {
-    background: rgba(234, 179, 8, 0.12);
-    border: 1px solid rgba(234, 179, 8, 0.3);
-    color: var(--accent-yellow);
-}
 .conn-status.pending .status-dot {
-    background: var(--accent-yellow);
-    box-shadow: 0 0 6px var(--accent-yellow);
-    animation: pulse 1s ease-in-out infinite;
+    background: var(--caution);
+    animation: blink 1s ease-in-out infinite;
 }
 
-@keyframes pulse {
-    0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; }
-    50% { opacity: 0.5; box-shadow: 0 0 12px currentColor; }
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
 }
 
-/* ── 图标按钮（渐变风格，与发送按钮统一）── */
+/* ── 图标按钮 (WinUI 3 风格) ── */
 .icon-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     border: none;
-    background: var(--gradient-main);
-    color: white;
-    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--text-secondary);
+    border-radius: var(--radius-control);
     cursor: pointer;
     transition: var(--transition);
-    box-shadow: 0 2px 10px rgba(0, 245, 212, 0.25);
+    position: relative;
+}
+
+.icon-btn::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius-control);
+    background: currentColor;
+    opacity: 0;
+    transition: var(--transition);
+}
+
+.icon-btn:hover::before {
+    opacity: 0.06;
+}
+
+.icon-btn:active::before {
+    opacity: 0.04;
 }
 
 .icon-btn:hover {
-    transform: scale(1.05);
-    box-shadow: 0 4px 18px rgba(0, 245, 212, 0.4);
+    color: var(--text-primary);
+}
+
+.icon-btn:active {
+    transform: scale(0.97);
+}
+
+.icon-btn svg {
+    width: 18px;
+    height: 18px;
+    position: relative;
+    z-index: 1;
 }
 
 .icon-btn.disabled,
 .icon-btn:disabled {
-    opacity: 0.4;
+    opacity: 0.36;
     cursor: not-allowed;
-    transform: none;
-    box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
-    border: 1px dashed rgba(239, 68, 68, 0.4);
-    background: rgba(239, 68, 68, 0.08);
-    color: rgba(255, 255, 255, 0.5);
-}
-
-.icon-btn:active {
-    transform: scale(0.95);
-}
-
-.icon-btn svg {
-    width: 20px;
-    height: 20px;
+    pointer-events: none;
 }
 
 .icon-btn.sm {
     width: 28px;
     height: 28px;
-    font-size: 14px;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    opacity: 0.6;
-    transition: var(--transition);
 }
 
-.icon-btn.sm:hover { opacity: 1; }
-.icon-btn.danger:hover { color: var(--accent-red); }
+.icon-btn.sm svg {
+    width: 14px;
+    height: 14px;
+}
+
+.icon-btn.danger:hover {
+    color: var(--critical);
+}
+
+.help-btn {
+    margin-left: 2px;
+    opacity: 0.5;
+}
+
+.help-btn:hover {
+    opacity: 1;
+}
 
 /* ═══ 模型选择栏 ═══ */
 .model-bar {
     display: flex;
     align-items: center;
     gap: 10px;
-    padding: 10px 16px;
-    background: var(--bg-secondary);
-    border-bottom: 1px solid var(--border-glass);
+    padding: 8px 16px;
+    background: var(--bg-layer-alt);
+    border-bottom: 1px solid var(--border-subtle);
     flex-shrink: 0;
 }
 
 .model-bar-icon {
-    width: 32px;
-    height: 32px;
-    border-radius: var(--radius-sm);
-    background: var(--gradient-main);
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius-control);
+    background: var(--accent-subtle);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    box-shadow: 0 2px 8px rgba(0, 245, 212, 0.2);
 }
 
 .model-bar-icon svg {
-    width: 16px;
-    height: 16px;
-    color: white;
+    width: 14px;
+    height: 14px;
+    color: var(--accent);
 }
 
 .model-select-wrap {
@@ -299,14 +292,13 @@ body::before {
 
 .model-select {
     width: 100%;
-    padding: 8px 36px 8px 14px;
-    background: var(--bg-glass-light);
-    border: 1.5px solid var(--border-glass);
-    border-radius: var(--radius-md);
+    padding: 6px 32px 6px 12px;
+    background: var(--bg-layer);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-control);
     color: var(--text-primary);
     font-size: 13px;
-    font-weight: 500;
-    font-family: var(--font-sans);
+    font-family: var(--font);
     outline: none;
     cursor: pointer;
     transition: var(--transition);
@@ -315,34 +307,31 @@ body::before {
 }
 
 .model-select:focus {
-    border-color: var(--accent-cyan);
-    box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.12), 0 0 12px rgba(0, 245, 212, 0.1);
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 1px var(--border-focus);
 }
 
 .model-select:hover {
-    border-color: rgba(0, 245, 212, 0.4);
+    border-color: var(--border-strong);
 }
 
 .model-select option {
-    background: var(--bg-secondary);
+    background: var(--bg-card);
     color: var(--text-primary);
-    padding: 8px;
 }
 
 .model-select-arrow {
     position: absolute;
-    right: 10px;
+    right: 8px;
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
-    color: var(--accent-cyan);
-    display: flex;
-    opacity: 0.6;
+    color: var(--text-tertiary);
 }
 
 .model-select-arrow svg {
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
 }
 
 .model-badges {
@@ -353,23 +342,29 @@ body::before {
 
 .model-badge {
     font-size: 11px;
-    font-weight: 600;
+    font-weight: 500;
     white-space: nowrap;
-    padding: 4px 10px;
-    border-radius: 20px;
-    letter-spacing: 0.3px;
+    padding: 3px 8px;
+    border-radius: var(--radius-control);
+    border: 1px solid;
 }
 
 .think-badge {
-    color: var(--accent-purple);
-    background: rgba(123, 47, 247, 0.12);
-    border: 1px solid rgba(123, 47, 247, 0.25);
+    color: var(--accent);
+    background: var(--accent-subtle);
+    border-color: rgba(96, 205, 255, 0.15);
 }
 
 .vision-badge {
-    color: var(--accent-cyan);
-    background: rgba(0, 245, 212, 0.08);
-    border: 1px solid rgba(0, 245, 212, 0.2);
+    color: var(--success);
+    background: var(--success-bg);
+    border-color: rgba(108, 203, 95, 0.15);
+}
+
+.rag-badge {
+    color: #B388FF;
+    background: rgba(179, 136, 255, 0.06);
+    border-color: rgba(179, 136, 255, 0.15);
 }
 
 /* ── 预设栏 ── */
@@ -378,10 +373,9 @@ body::before {
     align-items: center;
     gap: 8px;
     padding: 6px 16px;
-    background: var(--bg-secondary);
-    border-bottom: 1px solid var(--border-glass);
+    background: var(--bg-layer-alt);
+    border-bottom: 1px solid var(--border-subtle);
     flex-shrink: 0;
-    overflow: hidden;
 }
 
 .preset-list {
@@ -401,14 +395,13 @@ body::before {
     display: flex;
     align-items: center;
     gap: 5px;
-    padding: 5px 12px;
-    border-radius: 20px;
-    border: 1px solid var(--border-glass);
-    background: var(--bg-glass-light);
+    padding: 4px 12px;
+    border-radius: var(--radius-control);
+    border: 1px solid var(--border-default);
+    background: var(--bg-layer);
     color: var(--text-secondary);
     font-size: 12px;
-    font-weight: 500;
-    font-family: var(--font-sans);
+    font-family: var(--font);
     white-space: nowrap;
     cursor: pointer;
     transition: var(--transition);
@@ -417,27 +410,24 @@ body::before {
 }
 
 .preset-chip:hover {
-    background: var(--bg-glass-hover);
-    border-color: rgba(0, 245, 212, 0.3);
+    background: var(--bg-card-hover);
+    border-color: var(--border-strong);
     color: var(--text-primary);
-    transform: translateY(-1px);
 }
 
 .preset-chip.active {
-    background: var(--gradient-main);
-    border-color: transparent;
-    color: #fff;
+    background: var(--accent-subtle);
+    border-color: var(--accent);
+    color: var(--accent);
     font-weight: 600;
-    box-shadow: 0 2px 10px rgba(0, 245, 212, 0.25);
 }
 
 .preset-chip.active:hover {
-    box-shadow: 0 4px 16px rgba(0, 245, 212, 0.35);
-    transform: translateY(-1px);
+    background: var(--accent-subtle-hover);
 }
 
 .preset-chip-icon {
-    font-size: 14px;
+    font-size: 13px;
     line-height: 1;
 }
 
@@ -446,12 +436,12 @@ body::before {
 }
 
 .preset-add-btn {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    border: 1px dashed var(--border-glass);
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius-control);
+    border: 1px dashed var(--border-default);
     background: transparent;
-    color: var(--text-muted);
+    color: var(--text-tertiary);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -461,15 +451,14 @@ body::before {
 }
 
 .preset-add-btn:hover {
-    border-color: var(--accent-cyan);
-    color: var(--accent-cyan);
-    background: rgba(0, 245, 212, 0.06);
-    transform: scale(1.1);
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-subtle);
 }
 
 .preset-add-btn svg {
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
 }
 
 /* ── 预设模态框 ── */
@@ -480,47 +469,46 @@ body::before {
 }
 
 .preset-icon-input {
-    width: 56px !important;
+    width: 52px !important;
     text-align: center;
-    font-size: 18px;
+    font-size: 16px;
     flex-shrink: 0;
-    padding: 8px 4px !important;
+    padding: 6px 4px !important;
 }
 
 .preset-temp-slider {
     width: 100%;
     -webkit-appearance: none;
     appearance: none;
-    height: 6px;
-    border-radius: 3px;
-    background: var(--bg-glass-light);
+    height: 4px;
+    border-radius: 2px;
+    background: var(--bg-layer);
     outline: none;
     margin: 8px 0;
 }
 
 .preset-temp-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
-    background: var(--gradient-main);
+    background: var(--accent);
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 245, 212, 0.3);
-    transition: transform 0.15s ease;
+    box-shadow: 0 0 0 4px transparent;
+    transition: box-shadow var(--transition);
 }
 
 .preset-temp-slider::-webkit-slider-thumb:hover {
-    transform: scale(1.2);
+    box-shadow: 0 0 0 3px var(--accent-subtle);
 }
 
 .preset-temp-slider::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
-    background: var(--gradient-main);
+    background: var(--accent);
     cursor: pointer;
     border: none;
-    box-shadow: 0 2px 8px rgba(0, 245, 212, 0.3);
 }
 
 .preset-modal-actions {
@@ -529,10 +517,10 @@ body::before {
     align-items: center;
     margin-top: 16px;
     padding-top: 12px;
-    border-top: 1px solid var(--border-glass);
+    border-top: 1px solid var(--border-subtle);
 }
 
-/* ── Think 按钮（输入栏内） ── */
+/* ── Think 按钮 ── */
 .think-toggle {
     display: flex;
     align-items: center;
@@ -544,56 +532,48 @@ body::before {
 .think-toggle input { display: none; }
 
 .think-btn {
-    width: 42px;
-    height: 42px;
-    border-radius: var(--radius-md);
-    background: var(--bg-glass-light);
-    border: 1px solid var(--border-glass);
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-control);
+    background: var(--bg-layer);
+    border: 1px solid var(--border-default);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
-    color: var(--text-secondary);
+    color: var(--text-tertiary);
 }
 
 .think-btn svg {
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
 }
 
 .think-toggle:not(.unavailable):hover .think-btn {
-    transform: scale(1.05);
-    box-shadow: 0 4px 18px rgba(123, 47, 247, 0.35);
-    border-color: var(--accent-purple);
-    color: var(--accent-purple);
+    border-color: var(--border-strong);
+    color: var(--text-secondary);
 }
 
 .think-toggle input:checked + .think-btn {
-    background: var(--gradient-main);
-    border: none;
-    color: white;
-    box-shadow: 0 2px 10px rgba(0, 245, 212, 0.25);
+    background: var(--accent-subtle);
+    border-color: var(--accent);
+    color: var(--accent);
 }
 
 .think-toggle input:checked + .think-btn:hover {
-    transform: scale(1.05);
-    box-shadow: 0 4px 18px rgba(0, 245, 212, 0.4);
+    background: var(--accent-subtle-hover);
 }
 
 .think-toggle.unavailable .think-btn {
-    opacity: 0.5;
+    opacity: 0.36;
     cursor: not-allowed;
 }
 
-.think-toggle.unavailable .think-btn svg {
-    stroke: var(--text-secondary);
-}
-
-/* ── 开关控件 ── */
+/* ── 开关控件 (WinUI ToggleSwitch) ── */
 .toggle-label {
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
     font-size: 12px;
     color: var(--text-secondary);
     cursor: pointer;
@@ -605,11 +585,11 @@ body::before {
 
 .toggle-slider {
     position: relative;
-    width: 32px;
-    height: 18px;
-    background: var(--bg-glass-light);
-    border: 1px solid var(--border-glass);
-    border-radius: 9px;
+    width: 40px;
+    height: 20px;
+    background: var(--bg-layer);
+    border: 1px solid var(--border-default);
+    border-radius: 10px;
     transition: var(--transition);
 }
 
@@ -618,22 +598,21 @@ body::before {
     position: absolute;
     top: 2px;
     left: 2px;
-    width: 12px;
-    height: 12px;
+    width: 14px;
+    height: 14px;
     background: var(--text-secondary);
     border-radius: 50%;
     transition: var(--transition);
 }
 
 .toggle-label input:checked + .toggle-slider {
-    background: rgba(0, 245, 212, 0.2);
-    border-color: var(--accent-cyan);
+    background: var(--accent);
+    border-color: var(--accent);
 }
 
 .toggle-label input:checked + .toggle-slider::after {
-    transform: translateX(14px);
-    background: var(--accent-cyan);
-    box-shadow: 0 0 6px var(--accent-cyan);
+    transform: translateX(20px);
+    background: var(--bg-solid);
 }
 
 /* ═══ 聊天区域 ═══ */
@@ -646,7 +625,7 @@ body::before {
 }
 
 .chat-area::-webkit-scrollbar {
-    width: 6px;
+    width: 8px;
 }
 
 .chat-area::-webkit-scrollbar-track {
@@ -654,11 +633,15 @@ body::before {
 }
 
 .chat-area::-webkit-scrollbar-thumb {
-    background: var(--border-glass);
-    border-radius: 3px;
+    background: var(--border-default);
+    border-radius: 4px;
 }
 
-/* ── 回到底部浮动按钮 ── */
+.chat-area::-webkit-scrollbar-thumb:hover {
+    background: var(--border-strong);
+}
+
+/* ── 回到底部按钮 ── */
 .scroll-to-bottom {
     position: sticky;
     bottom: 16px;
@@ -667,49 +650,41 @@ body::before {
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 8px 16px;
-    border: 1px solid rgba(0, 245, 212, 0.3);
-    background: rgba(10, 10, 26, 0.85);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border-radius: 24px;
-    color: var(--accent-cyan);
+    padding: 6px 14px;
+    border: 1px solid var(--border-default);
+    background: var(--bg-card);
+    backdrop-filter: blur(20px);
+    border-radius: var(--radius-control);
+    color: var(--text-secondary);
     font-size: 12px;
-    font-weight: 600;
+    font-family: var(--font);
     cursor: pointer;
     z-index: 5;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 245, 212, 0.15);
-    transition: all 0.25s ease;
-    animation: scrollBtnIn 0.25s ease;
+    box-shadow: var(--shadow-flyout);
+    transition: var(--transition);
+    animation: fadeSlideUp 167ms ease;
 }
 
 .scroll-to-bottom:hover {
-    background: rgba(0, 245, 212, 0.12);
-    border-color: var(--accent-cyan);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 245, 212, 0.25);
-    transform: translateY(-2px);
+    background: var(--bg-card-hover);
+    border-color: var(--border-strong);
+    color: var(--text-primary);
 }
 
 .scroll-to-bottom:active {
-    transform: translateY(0);
+    transform: scale(0.98);
 }
 
 .scroll-to-bottom svg {
-    width: 16px;
-    height: 16px;
-    animation: bounceDown 1.5s ease-in-out infinite;
+    width: 14px;
+    height: 14px;
 }
 
-@keyframes scrollBtnIn {
-    from { opacity: 0; transform: translateY(10px); }
+@keyframes fadeSlideUp {
+    from { opacity: 0; transform: translateY(8px); }
     to { opacity: 1; transform: translateY(0); }
 }
 
-@keyframes bounceDown {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(3px); }
-}
-
 /* ── 空状态 ── */
 .empty-state {
     display: flex;
@@ -717,61 +692,54 @@ body::before {
     align-items: center;
     justify-content: center;
     height: 100%;
-    gap: 16px;
-    opacity: 0.6;
+    gap: 12px;
+    color: var(--text-tertiary);
 }
 
 .empty-icon svg {
-    width: 100px;
-    height: 100px;
-    opacity: 0.5;
+    width: 80px;
+    height: 80px;
+    opacity: 0.3;
+    color: var(--text-tertiary);
 }
 
 .empty-state h2 {
     font-size: 20px;
     font-weight: 600;
-    background: var(--gradient-main);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    color: var(--text-primary);
 }
 
 .empty-state p {
-    color: var(--text-muted);
     font-size: 14px;
+    color: var(--text-tertiary);
 }
 
 /* ── 消息气泡 ── */
 .messages {
     display: flex;
     flex-direction: column;
-    gap: 16px;
-    max-width: 800px;
+    gap: 12px;
+    max-width: 780px;
     margin: 0 auto;
 }
 
 .message {
     display: flex;
     gap: 12px;
-    animation: fadeInUp 0.3s ease;
-}
-
-@keyframes fadeInUp {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
+    animation: fadeSlideUp 167ms ease;
 }
 
 .msg-avatar {
     flex-shrink: 0;
-    width: 36px;
-    height: 36px;
+    width: 32px;
+    height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 20px;
-    border-radius: var(--radius-sm);
-    background: var(--bg-glass-light);
-    border: 1px solid var(--border-glass);
+    font-size: 16px;
+    border-radius: var(--radius-control);
+    background: var(--bg-layer);
+    border: 1px solid var(--border-subtle);
 }
 
 .msg-body {
@@ -782,10 +750,8 @@ body::before {
 .msg-role {
     font-size: 12px;
     font-weight: 600;
-    color: var(--text-muted);
+    color: var(--text-tertiary);
     margin-bottom: 4px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
     display: flex;
     align-items: center;
     gap: 8px;
@@ -794,43 +760,41 @@ body::before {
 .model-tag {
     display: inline-block;
     font-size: 11px;
-    font-weight: 700;
-    text-transform: none;
-    letter-spacing: 0.3px;
-    color: #fff;
-    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
-    border-radius: 6px;
-    padding: 2px 10px;
+    font-weight: 600;
+    color: var(--accent);
+    background: var(--accent-subtle);
+    border: 1px solid rgba(96, 205, 255, 0.15);
+    border-radius: var(--radius-control);
+    padding: 1px 8px;
     line-height: 1.5;
     white-space: nowrap;
-    box-shadow: 0 0 8px rgba(0, 245, 212, 0.2);
 }
 
 .message.user .msg-body {
-    background: var(--bg-glass-light);
-    border: 1px solid var(--border-glass);
+    background: var(--bg-layer);
+    border: 1px solid var(--border-subtle);
     border-radius: var(--radius-md);
     padding: 10px 14px;
 }
 
 .message.assistant .msg-body {
-    background: rgba(0, 245, 212, 0.03);
-    border: 1px solid rgba(0, 245, 212, 0.08);
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
     border-radius: var(--radius-md);
     padding: 10px 14px;
 }
 
 .msg-content {
     font-size: 14px;
-    line-height: 1.7;
+    line-height: 1.65;
     word-break: break-word;
 }
 
 .msg-content pre {
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid var(--border-glass);
-    border-radius: var(--radius-sm);
-    padding: 12px;
+    background: var(--bg-solid);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-control);
+    padding: 12px 14px;
     overflow-x: auto;
     font-family: var(--font-mono);
     font-size: 13px;
@@ -838,11 +802,11 @@ body::before {
 }
 
 .msg-content code {
-    background: rgba(0, 0, 0, 0.2);
-    padding: 2px 6px;
-    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.06);
+    padding: 1px 5px;
+    border-radius: 3px;
     font-family: var(--font-mono);
-    font-size: 13px;
+    font-size: 0.9em;
 }
 
 .msg-content pre code {
@@ -856,8 +820,8 @@ body::before {
 /* 思考块 */
 .think-block {
     margin-bottom: 8px;
-    border: 1px solid rgba(234, 179, 8, 0.2);
-    border-radius: var(--radius-sm);
+    border: 1px solid rgba(252, 225, 0, 0.12);
+    border-radius: var(--radius-control);
     overflow: hidden;
 }
 
@@ -866,8 +830,8 @@ body::before {
     align-items: center;
     gap: 6px;
     padding: 6px 10px;
-    background: rgba(234, 179, 8, 0.05);
-    color: var(--accent-yellow);
+    background: var(--caution-bg);
+    color: var(--caution);
     font-size: 12px;
     cursor: pointer;
     user-select: none;
@@ -875,7 +839,7 @@ body::before {
 
 .think-header .chevron {
     margin-left: auto;
-    transition: transform 0.2s;
+    transition: transform var(--transition);
 }
 
 .think-header .chevron.expanded {
@@ -884,7 +848,7 @@ body::before {
 
 .think-content {
     padding: 8px 12px;
-    background: rgba(234, 179, 8, 0.03);
+    background: rgba(252, 225, 0, 0.02);
 }
 
 .think-content pre {
@@ -901,30 +865,33 @@ body::before {
 /* 打字光标 */
 .typing-cursor {
     display: inline-block;
-    animation: blink 0.8s infinite;
-    color: var(--accent-cyan);
+    width: 2px;
+    height: 1em;
+    background: var(--accent);
+    animation: caretBlink 1s step-end infinite;
+    vertical-align: text-bottom;
+    margin-left: 1px;
 }
 
-@keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
+@keyframes caretBlink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
 }
 
-/* ═══ Loading 等待动画 ═══ */
+/* ═══ Loading 动画 ═══ */
 .loading-dots {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
+    gap: 5px;
     padding: 8px 0;
 }
 
 .loading-dots span {
-    width: 10px;
-    height: 10px;
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
-    background: var(--accent-cyan);
+    background: var(--text-tertiary);
     animation: dotPulse 1.4s ease-in-out infinite;
-    box-shadow: 0 0 8px rgba(0, 245, 212, 0.5);
 }
 
 .loading-dots span:nth-child(1) { animation-delay: 0s; }
@@ -932,26 +899,19 @@ body::before {
 .loading-dots span:nth-child(3) { animation-delay: 0.4s; }
 
 @keyframes dotPulse {
-    0%, 80%, 100% {
-        transform: scale(0.4);
-        opacity: 0.3;
-    }
-    40% {
-        transform: scale(1);
-        opacity: 1;
-    }
+    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
+    40% { transform: scale(1); opacity: 1; }
 }
 
 .loading-text {
-    display: inline-block;
-    font-size: 13px;
-    color: var(--text-muted);
+    font-size: 12px;
+    color: var(--text-tertiary);
     animation: loadingFade 1.5s ease-in-out infinite;
 }
 
 @keyframes loadingFade {
     0%, 100% { opacity: 0.4; }
-    50% { opacity: 1; }
+    50% { opacity: 0.8; }
 }
 
 /* 消息图片 */
@@ -962,7 +922,24 @@ body::before {
     margin-top: 8px;
 }
 
-/* 消息内的文件 chip 展示 */
+.msg-img {
+    max-width: 200px;
+    max-height: 200px;
+    border-radius: var(--radius-control);
+    border: 1px solid var(--border-subtle);
+    object-fit: cover;
+}
+
+.msg-img[data-lightbox] {
+    cursor: zoom-in;
+    transition: var(--transition);
+}
+
+.msg-img[data-lightbox]:hover {
+    opacity: 0.85;
+}
+
+/* 文件 chip */
 .msg-files {
     display: flex;
     flex-wrap: wrap;
@@ -971,21 +948,8 @@ body::before {
 }
 
 .msg-files .file-chip {
-    background: rgba(123, 47, 247, 0.08);
-    border-color: rgba(123, 47, 247, 0.2);
-}
-
-.msg-files .file-chip:hover {
-    border-color: rgba(123, 47, 247, 0.35);
-    background: rgba(123, 47, 247, 0.12);
-}
-
-.msg-img {
-    max-width: 200px;
-    max-height: 200px;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--border-glass);
-    object-fit: cover;
+    background: var(--accent-subtle);
+    border-color: rgba(96, 205, 255, 0.12);
 }
 
 /* 统计信息 */
@@ -994,17 +958,60 @@ body::before {
     gap: 12px;
     margin-top: 6px;
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--text-tertiary);
+}
+
+/* RAG 知识库来源 */
+.rag-sources {
+    margin-top: 8px;
+    padding: 8px 12px;
+    background: var(--accent-subtle);
+    border: 1px solid rgba(96, 205, 255, 0.1);
+    border-radius: var(--radius-control);
+    font-size: 12px;
+}
+
+.rag-sources-header {
+    color: var(--accent);
+    font-weight: 600;
+    margin-bottom: 4px;
+    font-size: 11px;
+}
+
+.rag-source-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3px 0;
+    color: var(--text-tertiary);
+}
+
+.rag-source-item + .rag-source-item {
+    border-top: 1px solid var(--border-subtle);
+}
+
+.rag-source-name {
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.rag-source-score {
+    color: var(--success);
+    font-weight: 500;
+    margin-left: 8px;
+    flex-shrink: 0;
 }
 
 /* ═══ 输入区域 ═══ */
 .input-area {
     flex-shrink: 0;
     padding: 10px 16px 14px;
-    background: var(--bg-glass);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-top: 1px solid var(--border-glass);
+    background: var(--bg-mica);
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    border-top: 1px solid var(--border-subtle);
 }
 
 .image-preview {
@@ -1016,11 +1023,11 @@ body::before {
 
 .preview-thumb {
     position: relative;
-    width: 60px;
-    height: 60px;
-    border-radius: var(--radius-sm);
+    width: 56px;
+    height: 56px;
+    border-radius: var(--radius-control);
     overflow: hidden;
-    border: 1px solid var(--border-glass);
+    border: 1px solid var(--border-default);
 }
 
 .preview-thumb img {
@@ -1033,13 +1040,13 @@ body::before {
     position: absolute;
     top: 2px;
     right: 2px;
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
     border: none;
-    background: rgba(239, 68, 68, 0.9);
+    background: var(--critical);
     color: white;
     border-radius: 50%;
-    font-size: 14px;
+    font-size: 12px;
     line-height: 1;
     cursor: pointer;
     display: flex;
@@ -1047,11 +1054,11 @@ body::before {
     justify-content: center;
 }
 
-/* ── 文件预览区域 ── */
+/* 文件预览 */
 .file-preview {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 6px;
     padding: 8px 0;
 }
 
@@ -1059,23 +1066,23 @@ body::before {
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 5px 10px;
-    border-radius: 8px;
-    background: rgba(0, 245, 212, 0.06);
-    border: 1px solid rgba(0, 245, 212, 0.18);
+    padding: 4px 10px;
+    border-radius: var(--radius-control);
+    background: var(--accent-subtle);
+    border: 1px solid rgba(96, 205, 255, 0.12);
     font-size: 12px;
     line-height: 1;
     transition: var(--transition);
-    animation: fadeInUp 0.2s ease;
+    animation: fadeSlideUp 167ms ease;
 }
 
 .file-chip:hover {
-    border-color: rgba(0, 245, 212, 0.35);
-    background: rgba(0, 245, 212, 0.1);
+    background: var(--accent-subtle-hover);
+    border-color: rgba(96, 205, 255, 0.2);
 }
 
 .file-icon {
-    font-size: 14px;
+    font-size: 13px;
     flex-shrink: 0;
 }
 
@@ -1089,26 +1096,25 @@ body::before {
 }
 
 .file-size {
-    color: var(--text-muted);
+    color: var(--text-tertiary);
     flex-shrink: 0;
 }
 
 .remove-file {
     background: none;
     border: none;
-    color: var(--text-muted);
+    color: var(--text-tertiary);
     cursor: pointer;
-    font-size: 15px;
+    font-size: 14px;
     line-height: 1;
     padding: 0 2px;
-    border-radius: 4px;
+    border-radius: 3px;
     transition: var(--transition);
-    flex-shrink: 0;
 }
 
 .remove-file:hover {
-    color: var(--accent-red);
-    background: rgba(239, 68, 68, 0.1);
+    color: var(--critical);
+    background: var(--critical-bg);
 }
 
 .input-row {
@@ -1123,87 +1129,77 @@ body::before {
 
 .chat-input {
     flex: 1;
-    padding: 10px 14px;
-    background: var(--bg-glass-light);
-    border: 1px solid var(--border-glass);
-    border-radius: var(--radius-md);
+    padding: 8px 12px;
+    background: var(--bg-layer);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-control);
     color: var(--text-primary);
-    font-family: var(--font-sans);
+    font-family: var(--font);
     font-size: 14px;
     resize: none;
     outline: none;
-    min-height: 42px;
+    min-height: 36px;
     max-height: 120px;
     line-height: 1.5;
     transition: var(--transition);
 }
 
 .chat-input:focus {
-    border-color: var(--accent-cyan);
-    box-shadow: 0 0 0 2px rgba(0, 245, 212, 0.1);
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 1px var(--border-focus);
 }
 
 .chat-input::placeholder {
-    color: var(--text-muted);
+    color: var(--text-disabled);
 }
 
 .send-btn {
     flex-shrink: 0;
-    width: 42px;
-    height: 42px;
+    width: 36px;
+    height: 36px;
     border: none;
-    border-radius: var(--radius-md);
-    background: var(--gradient-main);
-    color: white;
+    border-radius: var(--radius-control);
+    background: var(--accent);
+    color: #1a1a1a;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
-    box-shadow: 0 2px 10px rgba(0, 245, 212, 0.3);
 }
 
 .send-btn:hover {
-    transform: scale(1.05);
-    box-shadow: 0 4px 20px rgba(0, 245, 212, 0.4);
+    background: var(--accent-hover);
 }
 
 .send-btn:active {
-    transform: scale(0.95);
+    transform: scale(0.96);
 }
 
 .send-btn.disabled {
-    opacity: 0.4;
+    opacity: 0.36;
     cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
+    pointer-events: none;
 }
 
 .send-btn svg {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
 }
 
-/* 停止按钮样式 */
 .send-btn.stop-btn {
-    background: linear-gradient(135deg, #ff4757, #ff6b81);
-    box-shadow: 0 2px 10px rgba(255, 71, 87, 0.4);
-    animation: stopPulse 1.5s ease-in-out infinite;
+    background: var(--critical);
+    color: white;
 }
 
 .send-btn.stop-btn:hover {
-    box-shadow: 0 4px 20px rgba(255, 71, 87, 0.6);
-}
-
-@keyframes stopPulse {
-    0%, 100% { box-shadow: 0 2px 10px rgba(255, 71, 87, 0.4); }
-    50% { box-shadow: 0 2px 16px rgba(255, 71, 87, 0.7); }
+    opacity: 0.9;
 }
 
 .spinner {
-    width: 18px;
-    height: 18px;
-    border: 2px solid rgba(255,255,255,0.3);
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
     border-top-color: white;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
@@ -1213,75 +1209,90 @@ body::before {
     to { transform: rotate(360deg); }
 }
 
-/* ═══ 模态框 ═══ */
+/* ═══ 历史只读提示栏 ═══ */
+.history-view-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 16px;
+    background: rgba(96, 205, 255, 0.04);
+    border-top: 1px solid rgba(96, 205, 255, 0.1);
+    font-size: 13px;
+    color: var(--accent);
+    flex-shrink: 0;
+}
+
+/* ═══ 模态框 (WinUI ContentDialog 风格) ═══ */
 .modal-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.65);
-    backdrop-filter: blur(8px);
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 100;
-    animation: fadeIn 0.2s ease;
+    animation: overlayIn 167ms ease;
     padding: 20px;
 }
 
-@keyframes fadeIn {
+@keyframes overlayIn {
     from { opacity: 0; }
     to { opacity: 1; }
 }
 
 .modal {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-glass);
-    border-radius: 14px;
-    box-shadow: var(--shadow-glass), 0 0 60px rgba(0,0,0,0.3);
+    background: var(--bg-card);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-dialog);
     width: 100%;
-    max-width: 500px;
+    max-width: 480px;
     max-height: 80vh;
     display: flex;
     flex-direction: column;
-    animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    animation: dialogIn 200ms cubic-bezier(0, 0, 0, 1);
     overflow: hidden;
 }
 
-@keyframes slideUp {
-    from { opacity: 0; transform: translateY(24px) scale(0.97); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
+@keyframes dialogIn {
+    from { opacity: 0; transform: scale(0.96) translateY(8px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.modal-lg {
+    max-width: 860px;
+    width: 96vw;
+    max-height: 85vh;
 }
 
 .modal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 18px 24px;
-    border-bottom: 1px solid var(--border-glass);
-    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-subtle);
     flex-shrink: 0;
 }
 
 .modal-header h3 {
-    font-size: 17px;
+    font-size: 16px;
     font-weight: 600;
-    background: var(--gradient-main);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    letter-spacing: 0.3px;
+    color: var(--text-primary);
 }
 
 .modal-body {
-    padding: 20px 24px;
+    padding: 16px 20px;
     overflow-y: auto;
     flex: 1;
 }
 
 /* ── 设置项 ── */
 .setting-group {
-    margin-bottom: 20px;
+    margin-bottom: 16px;
     padding-bottom: 16px;
-    border-bottom: 1px solid var(--border-glass);
+    border-bottom: 1px solid var(--border-subtle);
 }
 
 .setting-group:last-child {
@@ -1295,69 +1306,98 @@ body::before {
     font-size: 13px;
     font-weight: 600;
     color: var(--text-secondary);
-    margin-bottom: 8px;
+    margin-bottom: 6px;
 }
 
 .setting-input {
     width: 100%;
-    padding: 10px 12px;
-    background: var(--bg-glass-light);
-    border: 1px solid var(--border-glass);
-    border-radius: var(--radius-sm);
+    padding: 8px 10px;
+    background: var(--bg-layer);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-control);
     color: var(--text-primary);
     font-size: 13px;
+    font-family: var(--font);
     outline: none;
-    margin-bottom: 8px;
+    margin-bottom: 6px;
     transition: var(--transition);
 }
 
 .setting-input:focus {
-    border-color: var(--accent-cyan);
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 1px var(--border-focus);
 }
 
-/* ── 按钮 ── */
+.setting-input::placeholder {
+    color: var(--text-disabled);
+}
+
+/* ── 按钮 (WinUI Button 风格) ── */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 8px 16px;
-    border: none;
-    border-radius: var(--radius-sm);
+    padding: 6px 16px;
+    border: 1px solid transparent;
+    border-radius: var(--radius-control);
     font-size: 13px;
-    font-weight: 500;
+    font-weight: 400;
+    font-family: var(--font);
     cursor: pointer;
     transition: var(--transition);
     gap: 6px;
+    position: relative;
+    outline: none;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    transition: var(--transition);
+}
+
+.btn:hover::before { opacity: 0.06; }
+.btn:active::before { opacity: 0.04; }
+
+.btn:active {
+    transform: scale(0.98);
 }
 
 .btn-primary {
-    background: var(--gradient-main);
-    color: white;
+    background: var(--accent);
+    color: #1a1a1a;
+    border-color: transparent;
 }
 
 .btn-primary:hover {
-    box-shadow: 0 4px 16px rgba(0, 245, 212, 0.3);
+    background: var(--accent-hover);
 }
 
+.btn-primary::before { display: none; }
+
 .btn-outline {
-    background: transparent;
-    border: 1px solid var(--border-glass);
+    background: var(--bg-layer);
+    border: 1px solid var(--border-default);
     color: var(--text-secondary);
 }
 
 .btn-outline:hover {
-    border-color: var(--accent-cyan);
+    border-color: var(--border-strong);
     color: var(--text-primary);
 }
 
 .btn-danger {
-    background: rgba(239, 68, 68, 0.15);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-    color: var(--accent-red);
+    background: var(--critical-bg);
+    border: 1px solid rgba(241, 112, 123, 0.15);
+    color: var(--critical);
 }
 
 .btn-danger:hover {
-    background: rgba(239, 68, 68, 0.25);
+    background: rgba(241, 112, 123, 0.1);
 }
 
 .btn-sm {
@@ -1374,58 +1414,58 @@ body::before {
 }
 
 .status-badge {
-    padding: 4px 10px;
-    border-radius: 20px;
+    padding: 3px 10px;
+    border-radius: var(--radius-control);
     font-size: 12px;
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .status-badge.success {
-    background: rgba(34, 197, 94, 0.15);
-    color: var(--accent-green);
-    border: 1px solid rgba(34, 197, 94, 0.3);
+    background: var(--success-bg);
+    color: var(--success);
+    border: 1px solid rgba(108, 203, 95, 0.15);
 }
 
 .status-badge.error {
-    background: rgba(239, 68, 68, 0.15);
-    color: var(--accent-red);
-    border: 1px solid rgba(239, 68, 68, 0.3);
+    background: var(--critical-bg);
+    color: var(--critical);
+    border: 1px solid rgba(241, 112, 123, 0.15);
 }
 
 .status-badge.warning {
-    background: rgba(234, 179, 8, 0.15);
-    color: var(--accent-yellow);
-    border: 1px solid rgba(234, 179, 8, 0.3);
+    background: var(--caution-bg);
+    color: var(--caution);
+    border: 1px solid rgba(252, 225, 0, 0.15);
 }
 
 .server-version {
     font-size: 12px;
-    color: var(--text-muted);
+    color: var(--text-tertiary);
     font-family: var(--font-mono);
 }
 
 .cors-hint {
     padding: 10px;
-    background: rgba(234, 179, 8, 0.08);
-    border: 1px solid rgba(234, 179, 8, 0.2);
-    border-radius: var(--radius-sm);
+    background: var(--caution-bg);
+    border: 1px solid rgba(252, 225, 0, 0.1);
+    border-radius: var(--radius-control);
     margin-top: 8px;
 }
 
 .cors-hint p {
     font-size: 12px;
-    color: var(--accent-yellow);
+    color: var(--caution);
     margin-bottom: 6px;
 }
 
 .cors-hint code {
     display: block;
     padding: 8px;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
+    background: var(--bg-solid);
+    border-radius: 3px;
     font-family: var(--font-mono);
     font-size: 12px;
-    color: var(--accent-cyan);
+    color: var(--accent);
     user-select: all;
 }
 
@@ -1433,7 +1473,7 @@ body::before {
 .running-models {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 6px;
     margin-bottom: 10px;
 }
 
@@ -1441,10 +1481,10 @@ body::before {
     display: flex;
     align-items: center;
     gap: 10px;
-    padding: 8px 12px;
-    background: var(--bg-glass-light);
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--border-glass);
+    padding: 8px 10px;
+    background: var(--bg-layer);
+    border-radius: var(--radius-control);
+    border: 1px solid var(--border-subtle);
 }
 
 .running-model .model-name {
@@ -1455,32 +1495,22 @@ body::before {
 
 .running-model .model-vram {
     font-size: 12px;
-    color: var(--text-muted);
+    color: var(--text-tertiary);
     font-family: var(--font-mono);
 }
 
 .text-muted {
-    color: var(--text-muted);
+    color: var(--text-tertiary);
     font-size: 13px;
 }
 
 /* ── 历史记录 ── */
-.empty-history {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    padding: 30px 0;
-    opacity: 0.5;
-}
-
 .history-list {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 2px;
 }
 
-/* 历史搜索栏 */
 .history-search-wrap {
     position: relative;
     margin-bottom: 10px;
@@ -1488,60 +1518,55 @@ body::before {
 
 .history-search-input {
     width: 100%;
-    padding: 10px 36px 10px 14px;
-    background: var(--bg-glass-light);
-    border: 1px solid var(--border-glass);
-    border-radius: var(--radius-md);
+    padding: 8px 32px 8px 12px;
+    background: var(--bg-layer);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-control);
     color: var(--text-primary);
     font-size: 13px;
+    font-family: var(--font);
     outline: none;
     transition: var(--transition);
 }
 
 .history-search-input::placeholder {
-    color: var(--text-muted);
+    color: var(--text-disabled);
 }
 
 .history-search-input:focus {
-    border-color: var(--accent-cyan);
-    box-shadow: 0 0 0 2px rgba(0, 245, 212, 0.1);
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 1px var(--border-focus);
 }
 
 .history-search-clear {
     position: absolute;
-    right: 8px;
+    right: 6px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
-    color: var(--text-muted);
+    color: var(--text-tertiary);
     cursor: pointer;
     font-size: 14px;
     padding: 4px;
     line-height: 1;
-    border-radius: 4px;
-    transition: var(--transition);
 }
 
 .history-search-clear:hover {
     color: var(--text-primary);
-    background: rgba(255,255,255,0.06);
 }
 
-/* 历史列表项 */
 .history-item {
     display: flex;
     align-items: center;
     gap: 10px;
-    padding: 10px 12px;
-    border-radius: var(--radius-sm);
-    border: 1px solid transparent;
+    padding: 10px 10px;
+    border-radius: var(--radius-control);
     transition: var(--transition);
 }
 
 .history-item:hover {
-    background: var(--bg-glass-light);
-    border-color: var(--border-glass);
+    background: var(--bg-layer);
 }
 
 .history-info {
@@ -1562,7 +1587,7 @@ body::before {
     display: flex;
     gap: 10px;
     font-size: 11px;
-    color: var(--text-muted);
+    color: var(--text-tertiary);
     margin-top: 2px;
 }
 
@@ -1572,33 +1597,19 @@ body::before {
     flex-shrink: 0;
 }
 
-/* ── 历史只读模式提示栏 ── */
-.history-view-bar {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 16px;
-    background: rgba(123, 47, 247, 0.15);
-    border-top: 1px solid rgba(123, 47, 247, 0.3);
-    font-size: 13px;
-    color: var(--accent-purple);
-    flex-shrink: 0;
-}
-
-/* ── 历史记录分页 ── */
+/* ── 历史分页 ── */
 .history-pagination {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 12px 0 4px;
-    border-top: 1px solid var(--border-glass);
+    padding: 10px 0 4px;
+    border-top: 1px solid var(--border-subtle);
     margin-top: 8px;
 }
 
 .page-info {
     font-size: 12px;
-    color: var(--text-muted);
-    white-space: nowrap;
+    color: var(--text-tertiary);
 }
 
 .page-buttons {
@@ -1608,13 +1619,13 @@ body::before {
 }
 
 .page-btn {
-    min-width: 32px;
-    height: 32px;
-    border: 1px solid var(--border-glass);
-    background: var(--bg-glass-light);
+    min-width: 30px;
+    height: 30px;
+    border: 1px solid var(--border-default);
+    background: var(--bg-layer);
     color: var(--text-secondary);
-    border-radius: var(--radius-sm);
-    font-size: 13px;
+    border-radius: var(--radius-control);
+    font-size: 12px;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -1623,14 +1634,14 @@ body::before {
 }
 
 .page-btn:hover:not(.disabled):not(.active) {
-    border-color: var(--accent-cyan);
+    border-color: var(--border-strong);
     color: var(--text-primary);
 }
 
 .page-btn.active {
-    background: rgba(0, 245, 212, 0.15);
-    border-color: var(--accent-cyan);
-    color: var(--accent-cyan);
+    background: var(--accent-subtle);
+    border-color: var(--accent);
+    color: var(--accent);
     font-weight: 600;
 }
 
@@ -1640,30 +1651,31 @@ body::before {
 }
 
 .page-ellipsis {
-    color: var(--text-muted);
-    font-size: 13px;
+    color: var(--text-disabled);
+    font-size: 12px;
     padding: 0 2px;
 }
 
-/* ═══ 图片预览 Lightbox ═══ */
+/* ═══ Lightbox ═══ */
 .lightbox-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.85);
-    backdrop-filter: blur(8px);
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 300;
     cursor: zoom-out;
-    animation: fadeIn 0.2s ease;
+    animation: overlayIn 167ms ease;
 }
 
 .lightbox-img {
     max-width: 90vw;
     max-height: 90vh;
     border-radius: var(--radius-md);
-    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
+    box-shadow: var(--shadow-dialog);
     object-fit: contain;
     cursor: default;
 }
@@ -1672,13 +1684,13 @@ body::before {
     position: fixed;
     top: 16px;
     right: 20px;
-    width: 40px;
-    height: 40px;
-    border: none;
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-    font-size: 20px;
-    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    border: 1px solid var(--border-default);
+    background: var(--bg-card);
+    color: var(--text-primary);
+    font-size: 16px;
+    border-radius: var(--radius-control);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -1688,90 +1700,412 @@ body::before {
 }
 
 .lightbox-close:hover {
-    background: rgba(255, 255, 255, 0.2);
+    background: var(--bg-card-hover);
 }
 
-/* 消息图片可点击提示 */
-.msg-img[data-lightbox] {
-    cursor: zoom-in;
+/* ═══ 帮助弹框 ═══ */
+#helpModal .modal {
+    max-width: 600px;
+    max-height: 85vh;
+}
+
+.help-section {
+    margin-bottom: 16px;
+    padding: 12px 14px;
+    background: var(--bg-layer);
+    border-radius: var(--radius-control);
+    border-left: 2px solid var(--border-strong);
+    transition: border-color var(--transition);
+}
+
+.help-section:hover {
+    border-left-color: var(--accent);
+}
+
+.help-section:last-child {
+    margin-bottom: 0;
+}
+
+.help-section h4 {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--text-primary);
+}
+
+.help-section ul,
+.help-section ol {
+    padding-left: 18px;
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 1.7;
+}
+
+.help-section li {
+    margin-bottom: 3px;
+}
+
+.help-section code {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--accent);
+    padding: 1px 6px;
+    border-radius: 3px;
+    font-size: 12px;
+}
+
+.help-section kbd {
+    background: var(--bg-layer);
+    border: 1px solid var(--border-default);
+    border-bottom-width: 2px;
+    border-radius: 3px;
+    padding: 1px 6px;
+    font-size: 12px;
+    font-family: inherit;
+    color: var(--text-primary);
+}
+
+.help-shortcuts {
+    width: 100%;
+    font-size: 13px;
+    border-collapse: collapse;
+    border-radius: var(--radius-control);
+    overflow: hidden;
+    border: 1px solid var(--border-default);
+}
+
+.help-shortcuts td {
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.help-shortcuts tr:last-child td {
+    border-bottom: none;
+}
+
+.help-shortcuts td:first-child {
+    width: 140px;
+    text-align: center;
+    background: var(--bg-layer);
+}
+
+.help-shortcuts tr:hover td {
+    background: var(--bg-layer-alt);
+}
+
+/* ═══ 知识库管理 ═══ */
+#kbModal .modal-body {
+    padding: 16px 20px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.kb-layout {
+    display: flex;
+    gap: 16px;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.kb-sidebar {
+    width: 240px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 0;
+    overflow: hidden;
+    padding-right: 16px;
+    border-right: 1px solid var(--border-subtle);
+}
+
+.kb-new-collection {
+    display: flex;
+    gap: 6px;
+}
+
+.kb-new-collection .setting-input {
+    flex: 1;
+    margin-bottom: 0;
+    font-size: 13px;
+    padding: 6px 10px;
+}
+
+.kb-collection-list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-height: 0;
+}
+
+.kb-collection-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    border-radius: var(--radius-control);
+    cursor: pointer;
     transition: var(--transition);
 }
 
-.msg-img[data-lightbox]:hover {
-    opacity: 0.85;
-    transform: scale(1.02);
+.kb-collection-item:hover {
+    background: var(--bg-layer);
 }
 
-/* ═══ 响应式 - 平板及以上 ═══ */
-@media (min-width: 768px) {
-    .app-header {
-        padding: 12px 24px;
+.kb-collection-item.active {
+    background: var(--accent-subtle);
+    border: 1px solid rgba(96, 205, 255, 0.12);
+}
+
+.kb-col-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.kb-col-name {
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.kb-col-stats {
+    font-size: 11px;
+    color: var(--text-tertiary);
+}
+
+.kb-col-delete {
+    opacity: 0;
+    transition: opacity var(--transition);
+}
+
+.kb-collection-item:hover .kb-col-delete {
+    opacity: 1;
+}
+
+.kb-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.kb-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    padding: 8px 12px;
+    background: var(--bg-layer);
+    border-radius: var(--radius-control);
+    border: 1px solid var(--border-subtle);
+}
+
+.kb-embed-select {
+    flex: 1;
+    min-width: 0;
+    max-width: 200px;
+    padding: 5px 8px;
+    font-size: 12px;
+    background: var(--bg-layer-alt);
+    color: var(--text-primary);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-control);
+    outline: none;
+    cursor: pointer;
+    font-family: var(--font);
+}
+
+.kb-embed-select:focus {
+    border-color: var(--border-focus);
+}
+
+.kb-rag-toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+    white-space: nowrap;
+    padding-left: 8px;
+    border-left: 1px solid var(--border-subtle);
+}
+
+.kb-progress {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-tertiary);
+    padding: 3px 8px;
+    background: var(--accent-subtle);
+    border-radius: var(--radius-control);
+}
+
+.kb-doc-list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-height: 0;
+}
+
+.kb-doc-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    border-radius: var(--radius-control);
+    transition: var(--transition);
+}
+
+.kb-doc-item:hover {
+    background: var(--bg-layer);
+}
+
+.kb-doc-icon {
+    font-size: 16px;
+    flex-shrink: 0;
+}
+
+.kb-doc-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+}
+
+.kb-doc-name {
+    font-size: 13px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.kb-doc-meta {
+    font-size: 11px;
+    color: var(--text-tertiary);
+}
+
+.kb-doc-delete {
+    opacity: 0;
+    transition: opacity var(--transition);
+}
+
+.kb-doc-item:hover .kb-doc-delete {
+    opacity: 1;
+}
+
+/* ── 移动端响应式 ── */
+@media (max-width: 640px) {
+    .kb-layout {
+        flex-direction: column;
     }
 
-    .app-title {
-        font-size: 18px;
+    .kb-sidebar {
+        width: 100%;
+        max-height: 160px;
+        border-right: none;
+        padding-right: 0;
+        padding-bottom: 10px;
+        border-bottom: 1px solid var(--border-subtle);
     }
 
-    .model-bar {
-        padding: 8px 24px;
-    }
-
-    .chat-area {
-        padding: 24px;
-    }
-
-    .messages {
-        max-width: 900px;
-    }
-
-    .input-area {
-        padding: 12px 24px 16px;
-    }
-
-    .modal {
-        max-width: 560px;
+    .kb-main {
+        min-height: 180px;
     }
 
     .modal-lg {
-        max-width: 920px;
-    }
-
-    #helpModal .modal {
-        max-width: 680px;
+        max-height: 92vh;
     }
 }
 
-/* ═══ 响应式 - 桌面 ═══ */
+/* ═══ Toast 通知 ═══ */
+.toast-container {
+    position: fixed;
+    top: 56px;
+    right: 16px;
+    z-index: 200;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    pointer-events: none;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    border-radius: var(--radius-control);
+    background: var(--bg-card);
+    border: 1px solid var(--border-default);
+    box-shadow: var(--shadow-flyout);
+    font-size: 13px;
+    color: var(--text-primary);
+    pointer-events: auto;
+    animation: toastIn 167ms ease;
+    max-width: 320px;
+}
+
+.toast.removing {
+    animation: toastOut 167ms ease forwards;
+}
+
+.toast-icon {
+    font-size: 14px;
+    flex-shrink: 0;
+}
+
+.toast.success { border-left: 3px solid var(--success); }
+.toast.error { border-left: 3px solid var(--critical); }
+.toast.warning { border-left: 3px solid var(--caution); }
+.toast.info { border-left: 3px solid var(--accent); }
+
+@keyframes toastIn {
+    from { opacity: 0; transform: translateX(24px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes toastOut {
+    from { opacity: 1; transform: translateX(0); }
+    to { opacity: 0; transform: translateX(24px); }
+}
+
+/* ═══ 响应式 ═══ */
+@media (min-width: 768px) {
+    .app-header { padding: 8px 24px; }
+    .model-bar { padding: 8px 24px; }
+    .chat-area { padding: 20px 24px; }
+    .messages { max-width: 820px; }
+    .input-area { padding: 10px 24px 16px; }
+    .modal { max-width: 500px; }
+}
+
 @media (min-width: 1024px) {
-    .messages {
-        max-width: 960px;
-    }
-
-    .msg-content {
-        font-size: 15px;
-    }
-
-    /* 历史记录面板加宽 */
-    #historyModal .modal {
-        max-width: 680px;
-    }
+    .messages { max-width: 900px; }
+    #historyModal .modal { max-width: 620px; }
 }
 
-@media (min-width: 1440px) {
-    #historyModal .modal {
-        max-width: 800px;
-    }
-}
-
-/* ── 选中文本样式 ── */
+/* ── 选中文本 ── */
 ::selection {
-    background: rgba(0, 245, 212, 0.3);
-    color: white;
+    background: rgba(96, 205, 255, 0.3);
 }
 
-/* ── 链接样式 ── */
+/* ── 链接 ── */
 .msg-content a {
-    color: var(--accent-cyan);
+    color: var(--accent);
     text-decoration: none;
 }
 
@@ -1779,26 +2113,22 @@ body::before {
     text-decoration: underline;
 }
 
-/* 被 sanitizer 拦截的危险链接/图片 */
 .msg-content .blocked-link {
-    color: var(--accent-red);
+    color: var(--critical);
     text-decoration: line-through;
     cursor: not-allowed;
-    font-size: 0.9em;
     opacity: 0.7;
 }
 
-/* ── 列表样式 ── */
+/* ── 列表 ── */
 .msg-content ul, .msg-content ol {
     padding-left: 20px;
     margin: 8px 0;
 }
 
-.msg-content li {
-    margin-bottom: 4px;
-}
+.msg-content li { margin-bottom: 3px; }
 
-/* ── 表格样式 ── */
+/* ── 表格 ── */
 .msg-content table {
     width: 100%;
     border-collapse: collapse;
@@ -1808,473 +2138,19 @@ body::before {
 
 .msg-content th, .msg-content td {
     padding: 6px 10px;
-    border: 1px solid var(--border-glass);
+    border: 1px solid var(--border-default);
     text-align: left;
 }
 
 .msg-content th {
-    background: var(--bg-glass-light);
+    background: var(--bg-layer);
     font-weight: 600;
 }
 
 /* ── 引用块 ── */
 .msg-content blockquote {
-    border-left: 3px solid var(--accent-cyan);
+    border-left: 2px solid var(--border-strong);
     padding-left: 12px;
     margin: 8px 0;
     color: var(--text-secondary);
 }
-
-/* ═══ Toast 通知 ═══ */
-.toast-container {
-    position: fixed;
-    top: 60px;
-    right: 16px;
-    z-index: 200;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    pointer-events: none;
-}
-
-.toast {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 16px;
-    border-radius: var(--radius-md);
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-glass);
-    box-shadow: var(--shadow-glass);
-    font-size: 13px;
-    color: var(--text-primary);
-    pointer-events: auto;
-    animation: toastIn 0.3s ease;
-    max-width: 340px;
-    backdrop-filter: blur(12px);
-}
-
-.toast.removing {
-    animation: toastOut 0.25s ease forwards;
-}
-
-.toast-icon {
-    font-size: 16px;
-    flex-shrink: 0;
-}
-
-.toast.success { border-color: rgba(34, 197, 94, 0.4); }
-.toast.success .toast-icon { color: var(--accent-green); }
-
-.toast.error { border-color: rgba(239, 68, 68, 0.4); }
-.toast.error .toast-icon { color: var(--accent-red); }
-
-.toast.warning { border-color: rgba(234, 179, 8, 0.4); }
-.toast.warning .toast-icon { color: var(--accent-yellow); }
-
-.toast.info { border-color: rgba(0, 245, 212, 0.3); }
-.toast.info .toast-icon { color: var(--accent-cyan); }
-
-@keyframes toastIn {
-    from { opacity: 0; transform: translateX(40px); }
-    to { opacity: 1; transform: translateX(0); }
-}
-
-@keyframes toastOut {
-    from { opacity: 1; transform: translateX(0); }
-    to { opacity: 0; transform: translateX(40px); }
-}
-
-/* ═══════════════ 帮助弹框 ═══════════════ */
-
-.help-btn {
-    margin-left: 4px;
-    opacity: 0.6;
-}
-.help-btn:hover {
-    opacity: 1;
-}
-
-.help-section {
-    margin-bottom: 20px;
-    padding: 14px 16px;
-    background: rgba(255,255,255,0.02);
-    border-radius: 10px;
-    border-left: 3px solid rgba(0,245,212,0.3);
-    transition: border-color 0.2s;
-}
-.help-section:hover {
-    border-left-color: var(--accent-cyan);
-}
-.help-section:last-child {
-    margin-bottom: 0;
-}
-.help-section h4 {
-    font-size: 15px;
-    font-weight: 600;
-    margin-bottom: 10px;
-    color: var(--text-primary);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-.help-section ul,
-.help-section ol {
-    padding-left: 20px;
-    font-size: 13px;
-    color: var(--text-secondary);
-    line-height: 1.9;
-}
-.help-section li {
-    margin-bottom: 4px;
-}
-.help-section code {
-    background: rgba(0,245,212,0.1);
-    color: var(--accent-cyan);
-    padding: 2px 7px;
-    border-radius: 5px;
-    font-size: 12px;
-    font-weight: 500;
-}
-.help-section kbd {
-    background: rgba(255,255,255,0.06);
-    border: 1px solid rgba(255,255,255,0.15);
-    border-bottom-width: 2px;
-    border-radius: 5px;
-    padding: 2px 8px;
-    font-size: 12px;
-    font-family: inherit;
-    color: var(--text-primary);
-}
-
-.help-shortcuts {
-    width: 100%;
-    font-size: 13px;
-    border-collapse: separate;
-    border-spacing: 0;
-    border-radius: 8px;
-    overflow: hidden;
-    border: 1px solid var(--border-glass);
-}
-.help-shortcuts td {
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--border-glass);
-}
-.help-shortcuts tr:last-child td {
-    border-bottom: none;
-}
-.help-shortcuts td:first-child {
-    width: 140px;
-    text-align: center;
-    background: rgba(255,255,255,0.02);
-}
-.help-shortcuts tr:hover td {
-    background: rgba(0,245,212,0.03);
-}
-
-/* ═══════════════ 知识库管理 ═══════════════ */
-
-.modal-lg {
-    max-width: 900px;
-    width: 96vw;
-    max-height: 88vh;
-}
-
-#helpModal .modal {
-    max-width: 640px;
-    max-height: 88vh;
-}
-
-#kbModal .modal-body {
-    padding: 20px 24px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-}
-
-.kb-layout {
-    display: flex;
-    gap: 20px;
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-}
-
-.kb-sidebar {
-    width: 260px;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    min-height: 0;
-    overflow: hidden;
-    padding-right: 20px;
-    border-right: 1px solid var(--border-glass);
-}
-
-.kb-new-collection {
-    display: flex;
-    gap: 8px;
-}
-.kb-new-collection .setting-input {
-    flex: 1;
-    margin-bottom: 0;
-    font-size: 13px;
-    padding: 8px 12px;
-}
-
-.kb-collection-list {
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-height: 0;
-    padding-right: 4px;
-}
-
-.kb-collection-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 14px;
-    border-radius: 10px;
-    cursor: pointer;
-    transition: all 0.2s;
-    border: 1px solid transparent;
-}
-.kb-collection-item:hover {
-    background: rgba(255,255,255,0.04);
-    border-color: rgba(255,255,255,0.06);
-}
-.kb-collection-item.active {
-    background: rgba(0,245,212,0.08);
-    border-color: rgba(0,245,212,0.25);
-    box-shadow: 0 0 12px rgba(0,245,212,0.06);
-}
-
-.kb-col-info {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    min-width: 0;
-}
-.kb-col-name {
-    font-size: 13px;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.kb-col-stats {
-    font-size: 11px;
-    color: var(--text-muted);
-    letter-spacing: 0.3px;
-}
-
-.kb-col-delete {
-    opacity: 0;
-    transition: opacity 0.15s;
-    flex-shrink: 0;
-}
-.kb-collection-item:hover .kb-col-delete {
-    opacity: 1;
-}
-
-.kb-main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    min-width: 0;
-    min-height: 0;
-    overflow: hidden;
-}
-
-.kb-toolbar {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    padding: 10px 14px;
-    background: rgba(255,255,255,0.02);
-    border-radius: 10px;
-    border: 1px solid var(--border-glass);
-}
-.kb-embed-select {
-    flex: 1;
-    min-width: 0;
-    max-width: 220px;
-    padding: 6px 10px;
-    font-size: 12px;
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-glass);
-    border-radius: 8px;
-    outline: none;
-    cursor: pointer;
-    transition: border-color 0.2s;
-}
-.kb-embed-select:focus {
-    border-color: var(--accent-cyan);
-}
-.kb-rag-toggle {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-left: auto;
-    white-space: nowrap;
-    padding-left: 10px;
-    border-left: 1px solid var(--border-glass);
-}
-
-.kb-progress {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 12px;
-    color: var(--text-muted);
-    padding: 4px 10px;
-    background: rgba(0,245,212,0.06);
-    border-radius: 6px;
-}
-
-.spinner {
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    border: 2px solid rgba(0,245,212,0.3);
-    border-top-color: var(--accent-cyan);
-    border-radius: 50%;
-    animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-.kb-doc-list {
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-height: 0;
-    padding: 4px;
-}
-
-.kb-doc-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 14px;
-    border-radius: 10px;
-    transition: all 0.2s;
-    border: 1px solid transparent;
-}
-.kb-doc-item:hover {
-    background: rgba(255,255,255,0.04);
-    border-color: rgba(255,255,255,0.06);
-}
-
-.kb-doc-icon {
-    font-size: 18px;
-    flex-shrink: 0;
-}
-.kb-doc-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    min-width: 0;
-}
-.kb-doc-name {
-    font-size: 13px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.kb-doc-meta {
-    font-size: 11px;
-    color: var(--text-muted);
-}
-
-.kb-doc-delete {
-    opacity: 0;
-    transition: opacity 0.15s;
-}
-.kb-doc-item:hover .kb-doc-delete {
-    opacity: 1;
-}
-
-/* RAG badge */
-.rag-badge {
-    background: rgba(123,47,247,0.15) !important;
-    color: #b388ff !important;
-    border-color: rgba(123,47,247,0.3) !important;
-}
-
-/* 移动端响应式 */
-@media (max-width: 640px) {
-    .kb-layout {
-        flex-direction: column;
-    }
-    .kb-sidebar {
-        width: 100%;
-        max-height: 180px;
-        border-right: none;
-        padding-right: 0;
-        padding-bottom: 12px;
-        border-bottom: 1px solid var(--border-glass);
-    }
-    .kb-main {
-        min-height: 200px;
-    }
-    .modal-lg {
-        max-height: 92vh;
-    }
-    .kb-toolbar {
-        padding: 8px 10px;
-    }
-}
-
-/* RAG 知识库来源 */
-.rag-sources {
-    margin-top: 8px;
-    padding: 8px 12px;
-    background: rgba(0, 245, 212, 0.05);
-    border: 1px solid rgba(0, 245, 212, 0.15);
-    border-radius: 8px;
-    font-size: 12px;
-}
-.rag-sources-header {
-    color: var(--accent-cyan);
-    font-weight: 600;
-    margin-bottom: 6px;
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-.rag-source-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 3px 0;
-    color: var(--text-muted);
-}
-.rag-source-item + .rag-source-item {
-    border-top: 1px solid rgba(255,255,255,0.05);
-}
-.rag-source-name {
-    color: var(--text-secondary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.rag-source-score {
-    color: var(--accent-green);
-    font-weight: 500;
-    margin-left: 8px;
-    flex-shrink: 0;
-}