/* ===== 基础变量 - 日间模式 ===== */
:root {
/* 系统 UI 字体栈：按平台自动选用系统默认字体，跟随用户在系统设置中的字体样式/粗细偏好
iOS/macOS → -apple-system（SF / 苹方）；Android → Roboto + 思源黑体；
鸿蒙 → HarmonyOS Sans；Windows → Segoe UI + 微软雅黑；按字符逐字回退，中英文均用系统原生字体 */
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Droid Sans Fallback", "HarmonyOS Sans SC", sans-serif;
/* 系统等宽字体栈：iOS SF Mono / macOS Menlo / Windows Consolas / Android Roboto Mono / 鸿蒙等宽 */
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Noto Sans Mono CJK SC", "Droid Sans Mono", monospace;
--primary: #4F7CFF;
--primary-light: #7B5CFF;
--primary-dark: #3D5FE0;
--bg: #f8f9fb;
--bg-sidebar: #ffffff;
--bg-card: #ffffff;
--bg-hover: #f1f3f5;
--bg-message-user: linear-gradient(135deg, #4F7CFF, #7B5CFF);
--text: #1a1a2e;
--text-secondary: #5a5a7a;
--text-muted: #9999b0;
--border: #e8eaf0;
--border-light: #f0f2f8;
--success: #22c55e;
--warning: #f59e0b;
--danger: #ef4444;
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 16px;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.06);
}
/* ===== 夜间模式（优化版 2026-08-23：统一色阶、补齐所有组件覆盖、低饱和蓝紫阴影、提高对比度） ===== */
[data-theme="dark"] {
/* 色阶（从深到浅：背景→卡片→悬浮→边框） */
--bg: #0b0b12; /* 最底层背景（最沉、最暗） */
--bg-sidebar: #15151f; /* 侧边栏：深于顶栏/卡片，保持层次感 */
--bg-card: #1c1c28; /* 卡片：对话框气泡背景、设置面板、下拉框 */
--bg-hover: #262634; /* hover/分段控件底 */
--bg-input: #22222f; /* 输入框专用底（>card 一点，聚焦时更明显） */
--modal-bg: #1a1a26; /* 模态框卡片背景 */
/* 主色（夜间蓝紫偏饱和，压得住深色背景） */
--ring: rgba(123, 140, 248, 0.25); /* 激活/focus 光环 */
--bg-message-user: linear-gradient(135deg, #5a7dff 0%, #9a7fff 100%); /* 用户气泡渐变略提亮 */
/* 文字（W3C AA 对比度：#e4e4f0 对 #0b0b12 = 14.7:1；#b4b4c8 对 #0b0b12 = 9.0:1；#7d7d95 对 #0b0b12 = 5.1:1） */
--text: #eaeaf6;
--text-secondary: #b4b4c8;
--text-muted: #7d7d95;
/* 边框（#323242 on #1c1c28 对比度 2.2:1，边界清晰不刺眼） */
--border: #323242;
--border-light: #262634;
--border-medium: #3a3a4c;
/* 阴影：全部统一低饱和蓝紫系，替代纯黑阴影，高级不发灰 */
--shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 12px rgba(99, 102, 241, 0.12);
--shadow-lg: 0 4px 16px rgba(0,0,0,0.45), 0 12px 32px rgba(99, 102, 241, 0.15);
}
/* ===== 新增背景主题 × 8 套（与 12 套配色方案正交叠加） =====
* 每张主题只覆盖：背景层 / 文字色 / 边框 / 阴影 / 模态框底；
* 12 套 color scheme（主色/主辅渐变）仍由 data-scheme 决定，互不干扰。
* 旧的 body.dark-theme 选择器与 data-theme=dark 保持一致。 */
/* 1. 纸白 Paper：米白柔和纸张，护眼不刺眼 */
[data-theme="paper"] {
--bg: #faf7f0; --bg-sidebar: #f4eee0; --bg-card: #fcf8ee; --bg-hover: #efe7d4;
--bg-input: #f6eed9; --modal-bg: #fbf6e9;
--text: #2b2518; --text-secondary: #5e5744; --text-muted: #9b9378;
--border: #e6dbc1; --border-light: #f0e7cf; --border-medium: #d9ccab;
--ring: rgba(120,95,60,0.18);
--shadow: 0 1px 3px rgba(120,95,60,0.05), 0 4px 12px rgba(120,95,60,0.06);
--shadow-lg: 0 4px 16px rgba(120,95,60,0.09), 0 12px 32px rgba(120,95,60,0.10);
}
/* 2. 护眼绿 Eye Green：淡绿豆沙底 */
[data-theme="eyegreen"] {
--bg: #f1f7ef; --bg-sidebar: #e4efdf; --bg-card: #f4f9f1; --bg-hover: #d8e7d0;
--bg-input: #e0ecd8; --modal-bg: #f3f8f0;
--text: #1d2a18; --text-secondary: #45583f; --text-muted: #7d8e74;
--border: #cfe0c6; --border-light: #dcebd3; --border-medium: #bccfaf;
--ring: rgba(64,120,70,0.20);
--shadow: 0 1px 3px rgba(60,120,70,0.05), 0 4px 12px rgba(60,120,70,0.06);
--shadow-lg: 0 4px 16px rgba(60,120,70,0.08), 0 12px 32px rgba(60,120,70,0.10);
}
/* 3. 护眼黄 Eye Yellow：浅米黄油纸色调 */
[data-theme="eyeyellow"] {
--bg: #fff8e5; --bg-sidebar: #fbf0c6; --bg-card: #fffaf0; --bg-hover: #f8e8b4;
--bg-input: #faecc4; --modal-bg: #fff8e1;
--text: #30250d; --text-secondary: #61502c; --text-muted: #a08e5e;
--border: #ecd99c; --border-light: #f3e5b1; --border-medium: #dfc77e;
--ring: rgba(180,145,40,0.22);
--shadow: 0 1px 3px rgba(170,140,45,0.05), 0 4px 12px rgba(170,140,45,0.06);
--shadow-lg: 0 4px 16px rgba(170,140,45,0.09), 0 12px 32px rgba(170,140,45,0.10);
}
/* 4. AMOLED：纯黑底色，对比度拉满（三星 OLED 省电） */
[data-theme="amoled"] {
--bg: #000000; --bg-sidebar: #0a0a0a; --bg-card: #101010; --bg-hover: #1a1a1a;
--bg-input: #161616; --modal-bg: #0d0d0d;
--text: #ffffff; --text-secondary: #c6c6d0; --text-muted: #828294;
--border: #23232a; --border-light: #18181f; --border-medium: #2b2b33;
--ring: rgba(123,140,248,0.32);
--shadow: 0 1px 3px rgba(0,0,0,0.55), 0 4px 12px rgba(100,110,255,0.14);
--shadow-lg: 0 4px 16px rgba(0,0,0,0.65), 0 12px 32px rgba(100,110,255,0.18);
}
/* 5. 深空灰 Deep Space：中性深灰，低冷蓝调，夜间版更高级不发黄 */
[data-theme="deepspace"] {
--bg: #10131a; --bg-sidebar: #181d28; --bg-card: #1f2533; --bg-hover: #2a3142;
--bg-input: #262c3d; --modal-bg: #1b202c;
--text: #e6ebf5; --text-secondary: #a7afc4; --text-muted: #727a90;
--border: #323a4f; --border-light: #252c40; --border-medium: #3d455c;
--ring: rgba(120,150,255,0.26);
--shadow: 0 1px 3px rgba(0,0,0,0.45), 0 4px 12px rgba(75,110,220,0.14);
--shadow-lg: 0 4px 16px rgba(0,0,0,0.55), 0 12px 32px rgba(75,110,220,0.18);
}
/* 6. 冰川青 Glacier：冷白 + 淡冰蓝，夏日清风感 */
[data-theme="glacier"] {
--bg: #f2f8fb; --bg-sidebar: #e1eff6; --bg-card: #f4fafc; --bg-hover: #d0e5ef;
--bg-input: #e4f0f6; --modal-bg: #f1f8fc;
--text: #122636; --text-secondary: #455f72; --text-muted: #7c94a5;
--border: #c6dde9; --border-light: #d7e9f1; --border-medium: #b0d0de;
--ring: rgba(50,125,160,0.20);
--shadow: 0 1px 3px rgba(50,130,160,0.05), 0 4px 12px rgba(50,130,160,0.06);
--shadow-lg: 0 4px 16px rgba(50,130,160,0.09), 0 12px 32px rgba(50,130,160,0.10);
}
/* 7. 赤霞红 Red Sunset：深红暮夜，暗主题 + 暖色点缀，不与任何 scheme 主色冲突 */
[data-theme="redsunset"] {
--bg: #160c10; --bg-sidebar: #221218; --bg-card: #2a171e; --bg-hover: #3a222b;
--bg-input: #331d25; --modal-bg: #23131a;
--text: #f3e5e8; --text-secondary: #c0a3ad; --text-muted: #8a737c;
--border: #4a2a35; --border-light: #361d27; --border-medium: #583440;
--ring: rgba(232,90,110,0.30);
--shadow: 0 1px 3px rgba(0,0,0,0.50), 0 4px 12px rgba(220,65,90,0.14);
--shadow-lg: 0 4px 16px rgba(0,0,0,0.60), 0 12px 32px rgba(220,65,90,0.18);
}
/* 8. 薰衣草 Lavender：雾白 + 淡紫，少女温柔，日间柔不刺眼 */
[data-theme="lavender"] {
--bg: #f6f3fb; --bg-sidebar: #e9e1f5; --bg-card: #f7f3fd; --bg-hover: #ddd1ef;
--bg-input: #ede4f7; --modal-bg: #f5f0fc;
--text: #231840; --text-secondary: #554877; --text-muted: #897ea6;
--border: #d6c7ea; --border-light: #e4d6f2; --border-medium: #c4b1de;
--ring: rgba(140,110,220,0.22);
--shadow: 0 1px 3px rgba(130,100,210,0.05), 0 4px 12px rgba(130,100,210,0.06);
--shadow-lg: 0 4px 16px rgba(130,100,210,0.09), 0 12px 32px rgba(130,100,210,0.10);
}
/* ===== 配色方案：CSS 兜底（高饱和版）
* 与 app.js COLOR_SCHEMES（高饱和）严格保持一致；首屏闪白兜底 ===== */
html[data-scheme="default"] { --primary:#4A6CF0; --primary-light:#7A5CFF; --primary-dark:#314EB4; --ring:rgba(74,108,240,0.22); --bg-message-user:linear-gradient(135deg,#4A6CF0 0%,#7A5CFF 100%); }
html[data-scheme="aurora"] { --primary:#28A984; --primary-light:#22BFA0; --primary-dark:#187C61; --ring:rgba(40,169,132,0.22); --bg-message-user:linear-gradient(135deg,#28A984 0%,#22BFA0 100%); }
html[data-scheme="ocean"] { --primary:#2E95D6; --primary-light:#2FB5CF; --primary-dark:#206D9E; --ring:rgba(46,149,214,0.22); --bg-message-user:linear-gradient(135deg,#2E95D6 0%,#2FB5CF 100%); }
html[data-scheme="sakura"] { --primary:#ED7AB0; --primary-light:#A980F0; --primary-dark:#B55089; --ring:rgba(237,122,176,0.22); --bg-message-user:linear-gradient(135deg,#ED7AB0 0%,#A980F0 100%); }
html[data-scheme="mint"] { --primary:#31B786; --primary-light:#61CE9A; --primary-dark:#218662; --ring:rgba(49,183,134,0.22); --bg-message-user:linear-gradient(135deg,#31B786 0%,#61CE9A 100%); }
html[data-scheme="sunset"] { --primary:#ED753F; --primary-light:#E75A5A; --primary-dark:#B85027; --ring:rgba(237,117,63,0.22); --bg-message-user:linear-gradient(135deg,#ED753F 0%,#E75A5A 100%); }
html[data-scheme="amber"] { --primary:#E89C1F; --primary-light:#EEB540; --primary-dark:#AD720E; --ring:rgba(232,156,31,0.22); --bg-message-user:linear-gradient(135deg,#E89C1F 0%,#EEB540 100%); }
html[data-scheme="nebula"] { --primary:#8765ED; --primary-light:#B164F0; --primary-dark:#6242B8; --ring:rgba(135,101,237,0.22); --bg-message-user:linear-gradient(135deg,#8765ED 0%,#B164F0 100%); }
html[data-scheme="forest"] { --primary:#59923D; --primary-light:#85B449; --primary-dark:#3F6A2B; --ring:rgba(89,146,61,0.22); --bg-message-user:linear-gradient(135deg,#59923D 0%,#85B449 100%); }
html[data-scheme="rose"] { --primary:#E55870; --primary-light:#ED7979; --primary-dark:#B2384F; --ring:rgba(229,88,112,0.22); --bg-message-user:linear-gradient(135deg,#E55870 0%,#ED7979 100%); }
html[data-scheme="mono"] { --primary:#4E5766; --primary-light:#6C778A; --primary-dark:#333A45; --ring:rgba(78,87,102,0.22); --bg-message-user:linear-gradient(135deg,#4E5766 0%,#6C778A 100%); }
html[data-scheme="candy"] { --primary:#34A5C6; --primary-light:#8A71EE; --primary-dark:#247B94; --ring:rgba(52,165,198,0.22); --bg-message-user:linear-gradient(135deg,#34A5C6 0%,#8A71EE 100%); }
/* 夜间模式下：整体提亮主色 + 光环 alpha 从 0.22 → 0.30 */
[data-theme="dark"] html[data-scheme="default"], html[data-theme="dark"][data-scheme="default"] { --primary:#6A86FF; --primary-light:#9D82FF; --primary-dark:#4C66C9; --ring:rgba(106,134,255,0.30); }
[data-theme="dark"] html[data-scheme="aurora"], html[data-theme="dark"][data-scheme="aurora"] { --primary:#38BE94; --primary-light:#52D3B3; --primary-dark:#269172; --ring:rgba(56,190,148,0.30); }
[data-theme="dark"] html[data-scheme="ocean"], html[data-theme="dark"][data-scheme="ocean"] { --primary:#4EAFE6; --primary-light:#59CCE0; --primary-dark:#3582B0; --ring:rgba(78,175,230,0.30); }
[data-theme="dark"] html[data-scheme="sakura"], html[data-theme="dark"][data-scheme="sakura"] { --primary:#F495BE; --primary-light:#C298F5; --primary-dark:#C26695; --ring:rgba(244,149,190,0.30); }
[data-theme="dark"] html[data-scheme="mint"], html[data-theme="dark"][data-scheme="mint"] { --primary:#4ECA99; --primary-light:#88E0B4; --primary-dark:#379E74; --ring:rgba(78,202,153,0.30); }
[data-theme="dark"] html[data-scheme="sunset"], html[data-theme="dark"][data-scheme="sunset"] { --primary:#F28D5E; --primary-light:#ED7676; --primary-dark:#C0643C; --ring:rgba(242,141,94,0.30); }
[data-theme="dark"] html[data-scheme="amber"], html[data-theme="dark"][data-scheme="amber"] { --primary:#F0B242; --primary-light:#F5CB66; --primary-dark:#C0861F; --ring:rgba(240,178,66,0.30); }
[data-theme="dark"] html[data-scheme="nebula"], html[data-theme="dark"][data-scheme="nebula"] { --primary:#9F82F2; --primary-light:#C98AF4; --primary-dark:#7858C8; --ring:rgba(159,130,242,0.30); }
[data-theme="dark"] html[data-scheme="forest"], html[data-theme="dark"][data-scheme="forest"] { --primary:#72AE54; --primary-light:#9ECC6D; --primary-dark:#508638; --ring:rgba(114,174,84,0.30); }
[data-theme="dark"] html[data-scheme="rose"], html[data-theme="dark"][data-scheme="rose"] { --primary:#EC7689; --primary-light:#F29898; --primary-dark:#B84E61; --ring:rgba(236,118,137,0.30); }
[data-theme="dark"] html[data-scheme="mono"], html[data-theme="dark"][data-scheme="mono"] { --primary:#7B8496; --primary-light:#9DA6B8; --primary-dark:#586070; --ring:rgba(123,132,150,0.30); }
[data-theme="dark"] html[data-scheme="candy"], html[data-theme="dark"][data-scheme="candy"] { --primary:#59B8D4; --primary-light:#A990F2; --primary-dark:#3E8FA9; --ring:rgba(89,184,212,0.30); }
/* ===== 配色方案选择器 ===== */
/* scheme-picker：2 行 × 6 栅格（12 个配色刚好两行塞下），整体宽度跟随 modal（560px）更舒展 */
.scheme-picker {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px 8px;
padding: 4px 0 2px;
width: 100%;
}
@media (max-width: 560px) {
.scheme-picker { grid-template-columns: repeat(4, 1fr); }
}
.scheme-chip {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
padding: 9px 4px 8px;
border-radius: 12px;
background: var(--bg-card);
border: 1.5px solid color-mix(in srgb, var(--text-muted) 14%, transparent);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
min-width: 0;
overflow: hidden;
}
/* chip 内部顶部放一层淡淡的主色柔光（纯背景，不占位置） */
.scheme-chip::before {
content: '';
position: absolute;
inset: -1px;
background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
border-radius: inherit;
}
.scheme-chip:hover {
transform: translateY(-1.5px);
border-color: color-mix(in srgb, var(--primary) 55%, transparent);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.scheme-chip:hover::before { opacity: 1; }
.scheme-chip.active {
border-color: var(--primary);
background: color-mix(in srgb, var(--primary) 9%, var(--bg-card));
box-shadow:
0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent),
0 6px 16px color-mix(in srgb, var(--primary) 18%, transparent);
transform: translateY(-1px);
}
.scheme-chip.active::before { opacity: 1; }
.scheme-swatch {
position: relative;
width: 44px;
height: 30px;
border-radius: 999px; /* 胶囊 pill 形，突出"双色渐变"观感 */
background: #ccc; /* 具体渐变由内联 style 覆盖 */
box-shadow:
0 1px 0 rgba(255,255,255,0.45) inset,
0 -1px 0 rgba(0,0,0,0.10) inset,
0 2px 7px rgba(0, 0, 0, 0.12);
flex-shrink: 0;
overflow: hidden;
}
/* ① 内环描边：1px 半透明白 → 让胶囊像一颗有层次的实体色块 */
.scheme-swatch::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 0 0 1.5px rgba(0, 0, 0, 0.10);
pointer-events: none;
}
/* ② 高光条：左上斜向一条光带，强调"渐变 pill"的立体感（和原双层圆小高光同源但更好看） */
.scheme-swatch::after {
content: '';
position: absolute;
width: 130%;
height: 42%;
left: -15%;
top: -18%;
background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0));
transform: rotate(-8deg);
pointer-events: none;
}
/* ③ 激活态：胶囊右下一颗小对勾白圆（白底 + 主色描边 + 内嵌主色对勾） */
.scheme-chip.active .scheme-swatch::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
right: -3px;
bottom: -3px;
top: auto;
left: auto;
border-radius: 50%;
transform: none;
background-color: #ffffff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center center;
background-size: 12px 12px;
box-shadow:
0 0 0 1.5px var(--primary),
0 1px 4px rgba(0,0,0,0.20);
/* 在白圆上叠一层主色（因为白 bg+√ 看不清），用 mask 切出对勾：做法 → 背景底层=primary，mask-image 放对勾 */
-webkit-mask-image: none;
mask-image: none;
}
/* 再把激活态小√ 从白改成用 currentColor=primary：直接叠一个 radial 外底 + 对勾 SVG 透通 */
.scheme-chip.active .scheme-swatch::after {
background-color: var(--primary);
background-image:
radial-gradient(circle at center, #ffffff 0%, #ffffff 52%, transparent 53%),
url("data:image/svg+xml;utf8,");
background-position: center center, center center;
background-size: 100% 100%, 12px 12px;
background-repeat: no-repeat, no-repeat;
}
.scheme-name {
font-size: 0.6875rem;
color: var(--text-secondary, #5a5a7a);
line-height: 1.2;
text-align: center;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
letter-spacing: 0.1px;
}
.scheme-chip.active .scheme-name {
color: var(--primary);
font-weight: 700;
}
/* 根字号 = 浏览器/系统默认字号（100% = 16px）。
全站文字使用 rem 单位：用户在 Android「设置→显示→字体大小」、
系统级字体缩放、Chrome「设置→辅助功能→文字缩放」或桌面浏览器字体设置中调整字号时，
rem 基准随之改变，网页文字自动跟随放大/缩小。默认设置下与原有 px 视觉完全一致（16px 基准）。 */
html {
font-size: 100%;
/* 禁止浏览器对未做移动端适配的页面自动放大文字（本站 viewport 已适配）；
不影响用户主动设置的系统字号缩放，也不影响手动双指缩放 */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* iOS / iPadOS 动态字体（Dynamic Type）：
iOS 普通网页默认不响应「设置→显示与亮度→文字大小」，使用 -apple-system-body 后
rem 基准会跟随系统 Body 字号（默认 17px，即 iOS 原生标准正文字号；用户调大/调小则整体等比变化）。
仅苹果系浏览器识别该关键字，Android/Windows 不受影响，仍走上面的 100%（16px）基准。
本站布局均为弹性盒 + 无单位行高，17px 基准下已验证不溢出、不产生横向滚动条 */
@supports (font: -apple-system-body) {
html {
font: -apple-system-body;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
/* 系统字体抗锯齿渲染，文字边缘更细腻（Android 上为无害空操作） */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--bg);
color: var(--text);
line-height: 1.6;
overflow: hidden;
height: 100dvh;
}
/* 表单控件默认不继承字体，显式继承确保按钮/输入框/下拉框也使用系统字体栈，
避免出现系统默认字体与页面字体混用 */
button,
input,
select,
textarea {
font-family: inherit;
}
.app {
display: flex;
height: 100dvh;
}
/* ===== 侧边栏 ===== */
.sidebar {
width: var(--sidebar-width, 280px);
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
flex-shrink: 0;
transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.18s cubic-bezier(0.4, 0, 0.2, 1), padding 0.18s cubic-bezier(0.4, 0, 0.2, 1);
min-width: var(--sidebar-width, 280px);
overflow: hidden;
}
/* 拖拽时禁用宽度过渡，避免抖动 */
.sidebar.dragging {
transition: none !important;
}
.sidebar * {
/* 避免子元素因宽度压缩触发自动换行造成跳帧 */
box-sizing: border-box;
}
/* ===== 侧边栏折叠态（只隐藏文字等内容，logo + 设置图标保留，几何位置始终不变） ===== */
.sidebar.collapsed {
width: 64px;
min-width: 64px;
}
/* ===== 侧边栏分隔条（拖拽调整宽度，双击恢复默认） ===== */
.sidebar-splitter {
flex-shrink: 0;
width: 6px;
background: transparent;
cursor: col-resize;
position: relative;
z-index: 5;
transition: background 0.15s ease;
}
.sidebar-splitter::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
background: var(--border);
transition: background 0.15s ease, width 0.15s ease;
}
.sidebar-splitter:hover,
.sidebar-splitter.dragging {
background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.sidebar-splitter:hover::before,
.sidebar-splitter.dragging::before {
background: var(--primary);
width: 2px;
}
/* 折叠态隐藏分隔条 */
.sidebar.collapsed ~ .sidebar-splitter {
display: none;
}
/* 拖拽时全局禁止文本选中 */
body.sidebar-splitter-dragging,
body.sidebar-splitter-dragging * {
cursor: col-resize !important;
user-select: none !important;
}
/*
* 不变式原则（经验 652825/747815）：
* .sidebar-header / .logo-row / .logo / .sidebar-footer 两态盒模型完全相同。
* .new-chat-btn / .sidebar-search / .settings-btn 容器两态都保留（仅隐藏内部 input/span 文字）。
* 所有图标 svg 的两态像素坐标严格一致（先锁计算值，再写样式）。
*
* 各图标展开态中心（相对 sidebar 0,0）：
* 新对话 +svg： X = 37, Y = 85
* 搜索 🔍 svg： X = 19, Y = 138 （= header 底 121 + search padding-top 10 + 7）
* 设置 ⚙ svg： X = 33, 距底 31
*/
.brand-name,
.sidebar-toggle,
.sidebar-section,
.settings-btn span,
.new-chat-btn span,
/* 搜索容器保留，只隐藏里面的 input */
.sidebar-search input {
transition: opacity 0.14s ease, max-width 0.18s cubic-bezier(0.4, 0, 0.2, 1),
max-height 0.18s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.18s cubic-bezier(0.4, 0, 0.2, 1), margin 0.18s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.18s ease, visibility 0s linear 0s;
}
/* 收起时：仅隐藏文字/收起按钮/搜索 input / 历史，按钮 + svg 全部保留 */
.sidebar.collapsed .brand-name,
.sidebar.collapsed .sidebar-toggle,
.sidebar.collapsed .sidebar-section,
.sidebar.collapsed .settings-btn span,
.sidebar.collapsed .account-btn span,
.sidebar.collapsed .new-chat-btn span,
.sidebar.collapsed .sidebar-search input {
opacity: 0;
max-width: 0;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
border-width: 0;
overflow: hidden;
visibility: hidden;
transition: opacity 0.08s ease, max-width 0.18s cubic-bezier(0.4, 0, 0.2, 1),
max-height 0.18s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.18s cubic-bezier(0.4, 0, 0.2, 1), margin 0.18s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear 0.1s;
}
.sidebar:not(.collapsed) .brand-name,
.sidebar:not(.collapsed) .sidebar-toggle,
.sidebar:not(.collapsed) .sidebar-section,
.sidebar:not(.collapsed) .settings-btn span,
.sidebar:not(.collapsed) .account-btn span,
.sidebar:not(.collapsed) .new-chat-btn span,
.sidebar:not(.collapsed) .sidebar-search input {
/* 顺序：opacity, max-width, max-height, padding, margin, border-color, visibility */
transition-delay: 0.05s, 0s, 0s, 0s, 0s, 0s, 0s;
opacity: 1;
max-width: 9999px;
max-height: 9999px;
visibility: visible;
}
/* 折叠态：新对话按钮保留图标 → 圆角方形按钮（仅折叠态，展开态仍是宽条渐变）。 */
.sidebar.collapsed .new-chat-btn {
width: 36px;
height: 36px;
padding: 0;
margin: 1px 0 0 0;
border-radius: 10px;
flex-shrink: 0;
justify-content: center;
align-items: center;
gap: 0;
box-shadow: none;
}
.sidebar.collapsed .new-chat-btn:hover {
transform: none;
box-shadow: 0 2px 8px rgba(79, 124, 255, 0.35);
filter: brightness(1.05);
}
.sidebar.collapsed .new-chat-btn svg {
flex-shrink: 0;
width: 18px;
height: 18px;
}
/* 折叠态：搜索框保留放大镜图标 → 圆角方形按钮（仅折叠态）。
*
* 用户最新要求：透明底（与设置一致）、svg 18×18（与其他图标一致）、
* 与 logo 水平中心线对齐（logo 中心 X=30）。
* 方形 36×36：margin-left = 30 - 18 = 12。
*/
.sidebar.collapsed .sidebar-search {
width: 36px;
height: 36px;
padding: 0;
margin: 2px auto 0 12px; /* 水平中心 = 12 + 18 = 30 ✓ 与 logo 中心线重合 */
border-radius: 10px;
border-bottom: none;
flex-shrink: 0;
justify-content: center;
align-items: center;
gap: 0;
background: transparent; /* 透明底，与设置按钮折叠态一致 */
color: var(--text-muted);
}
.sidebar.collapsed .sidebar-search:hover {
background: var(--bg-hover);
color: var(--text);
}
.sidebar.collapsed .sidebar-search svg {
flex-shrink: 0;
width: 18px;
height: 18px;
}
/* 折叠态：设置图标保留（图标大小不变、像素位置完全一致），透明底（无底）。 */
.sidebar.collapsed .sidebar-footer {
/* 1) margin-top: auto 确保 footer 永远沉到 sidebar flex column 的最底端。
* 2) 展开态设置按钮中心 Y = H - 31，折叠态理论上也是 H - 31。
* 用户观察到"还差一点点往上"，可能是展开态 header(121) + search(39) + section(flex:1)
* 与折叠态 margin-top:auto 贴底之间，在窗口存在极小滚动条或 1px 布局舍入时出现
* 1~2px 的视觉偏差。此处 margin-bottom: 2px 让 footer 整体上移 2px
* （margin-top:auto 会把这 2px 差额吃掉，底部留 2px 透明）。
*/
margin-top: auto;
margin-bottom: 2px;
}
.sidebar.collapsed .settings-btn {
background: transparent;
justify-content: flex-start;
flex-shrink: 0;
width: max-content;
/* 保持 padding-top/bottom/left = (10, 10, 12) → svg 中心 (33,31) 与展开态完全一致。
仅 padding-right 变 0，释放右边空间，避免 btn 在窄内容区溢出。 */
padding-right: 0;
}
.sidebar.collapsed .settings-btn svg {
flex-shrink: 0;
width: 18px;
height: 18px;
}
.sidebar.collapsed .settings-btn:hover {
background: var(--bg-hover);
color: var(--text);
}
/* 折叠态下：logo 仍可点击重新展开；其它位置保持与展开态完全一致 */
.sidebar.collapsed .logo {
cursor: pointer;
}
.sidebar.collapsed .logo:hover {
filter: brightness(1.08);
}
.sidebar-header {
padding: 16px 12px;
border-bottom: 1px solid var(--border-light);
}
/* 关键：logo-row 永远使用 flex-start，sidebar-toggle 用 margin-left:auto 靠右。
* 这样即使 sidebar-toggle 的宽度变为 0（折叠态），.logo 的水平起点、
* .logo-row / .logo 的 padding/gap 也与展开态完全一致，logo 位置纹丝不动。
*/
.logo-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
margin-bottom: 10px;
}
.logo-row .sidebar-toggle {
margin-left: auto;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 2px;
min-width: 0;
/* logo 作为整体固定尺寸，不在过渡属性里参与宽高动画，
* 内部图片 32×32 永远位于左上角 padding(16,12) + logo padding(4,2) 的同一坐标。
*/
flex: 0 0 auto;
}
.brand-name {
font-size: 1rem;
font-weight: 700;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.new-chat-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
border: none;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.new-chat-btn:hover {
box-shadow: 0 4px 12px rgba(79, 124, 255, 0.3);
transform: translateY(-1px);
}
/* 搜索框 */
.sidebar-search {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--border-light);
position: relative;
}
.sidebar-search svg {
color: var(--text-muted);
flex-shrink: 0;
}
.sidebar-search input {
flex: 1;
border: none;
background: var(--bg-hover);
border-radius: var(--radius-sm);
padding: 6px 28px 6px 10px;
font-size: 0.8125rem;
color: var(--text);
outline: none;
transition: background 0.15s, box-shadow 0.15s;
min-width: 0;
}
.sidebar-search input:focus {
background: var(--bg-card);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #4F7CFF) 70%, transparent);
}
.sidebar-search input::placeholder {
color: var(--text-muted);
}
/* 搜索框内的✕清除按钮（紧贴 input 右端，绝对定位） */
.sidebar-search-clear {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50%;
background: transparent;
border: none;
color: var(--text-muted, #9ca3af);
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
z-index: 2;
}
.sidebar-search-clear:hover {
background: color-mix(in srgb, #ef4444 14%, transparent);
color: #ef4444;
}
/* 搜索提示小行（按 Enter / Esc），仅展开态显示 */
.sidebar-search-hint {
display: block;
padding: 0 14px 6px;
font-size: 0.625rem;
color: var(--text-muted, #9ca3af);
line-height: 1;
opacity: 0.85;
}
.sidebar.collapsed .sidebar-search-hint {
display: none;
}
.sidebar-section {
flex: 1;
overflow-y: auto;
padding: 12px;
display: flex;
flex-direction: column;
min-height: 0;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px 10px;
gap: 8px;
}
.section-header .section-title {
padding: 0;
}
/* 多选模式切换按钮（仅图标） */
.select-mode-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border-radius: 8px;
background: transparent;
border: 1px solid var(--border, #e5e7eb);
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
}
.select-mode-toggle:hover {
color: var(--primary);
border-color: color-mix(in srgb, var(--primary, #4F7CFF) 50%, var(--border, #e5e7eb));
background: color-mix(in srgb, var(--primary, #4F7CFF) 10%, transparent);
}
.select-mode-toggle.is-active {
color: #fff;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
border-color: transparent;
box-shadow: 0 2px 12px var(--ring);
}
.select-mode-toggle svg {
display: block;
flex-shrink: 0;
}
.sidebar.collapsed .section-header,
.sidebar.collapsed .section-title,
.sidebar.collapsed .select-mode-toggle {
display: none;
}
/* 多选操作条 —— 两行布局：顶行「计数胶囊左 + 退出按钮右」；底行「6 操作图标」 */
.multi-select-bar {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
gap: 7px;
padding: 8px 6px 10px;
margin: 0 4px 8px;
border-bottom: 1px dashed var(--border, #e5e7eb);
animation: fadeInBar 0.22s ease;
}
@keyframes fadeInBar {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* 上排：胶囊左对齐、退出按钮右对齐；整行等高 */
.ms-bar-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
width: 100%;
min-height: 28px;
}
/* 下排：所有操作按钮统一均匀摊开（space-between 或 left-wrap 都行，这里保持左对齐 1 行塞满） */
.ms-bar-actions {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 4px;
}
.ms-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 28px;
padding: 0;
border-radius: 7px;
background: var(--bg-hover, #f3f4f6);
color: var(--text, #111827);
border: 1px solid transparent;
cursor: pointer;
transition: all 0.15s;
flex: 0 0 auto;
}
.ms-btn svg { display: block; flex-shrink: 0; }
.ms-btn:hover {
border-color: color-mix(in srgb, var(--primary) 35%, transparent);
color: var(--primary);
background: color-mix(in srgb, var(--primary) 10%, transparent);
}
/* 退出按钮（×）语义是取消 → hover 按中性或主色均可，这里用主色表示"动作" */
.ms-btn.ms-exit:hover {
color: #ef4444;
border-color: color-mix(in srgb, #ef4444 45%, transparent);
background: color-mix(in srgb, #ef4444 10%, transparent);
}
/* 置顶/置底/删除：语义派生，跟随当前主题色，不再死绑蓝紫 */
.ms-btn.ms-pin:hover {
color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 45%, transparent);
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.ms-btn.ms-bottom:hover {
color: var(--primary-light);
border-color: color-mix(in srgb, var(--primary-light) 45%, transparent);
background: color-mix(in srgb, var(--primary-light) 14%, transparent);
}
.ms-btn.ms-delete:hover {
color: #fff;
background: #ef4444;
border-color: #ef4444;
box-shadow: 0 2px 10px rgba(239, 68, 68, 0.34);
}
.ms-divider {
width: 1px;
height: 18px;
background: var(--border, #e5e7eb);
margin: 0 2px;
align-self: center;
flex-shrink: 0;
}
/* 计数胶囊（上排主体）：加宽加大，保证「已选 9999 / 共 99999」不被截断 */
.ms-count {
flex: 1 1 auto;
min-width: 0; /* 允许 shrink，但内部 nowrap + fit-content 会自动扩宽 */
font-size: 0.75rem;
font-weight: 600;
line-height: 1.15;
color: var(--primary);
background: color-mix(in srgb, var(--primary) 11%, transparent);
padding: 5px 11px;
border-radius: 999px;
white-space: nowrap;
width: fit-content;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
0 1px 2px rgba(0, 0, 0, 0.04);
display: inline-flex;
align-items: center;
justify-content: center;
max-width: calc(100% - 38px); /* 留 32 + gap 给退出按钮 */
}
.section-title {
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0 8px 10px;
}
.chat-history {
display: flex;
flex-direction: column;
gap: 4px;
}
.chat-history-empty {
text-align: center;
padding: 28px 16px 20px;
color: var(--text-muted);
font-size: 0.8125rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.chat-history-empty::before {
content: '';
width: 34px; height: 34px;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
background: color-mix(in srgb, var(--text-muted, #9ca3af) 70%, transparent);
opacity: 0.7;
margin-bottom: 6px;
}
.chat-history-empty .empty-title {
font-weight: 500;
font-size: 0.8125rem;
color: var(--text, #111827);
}
.chat-history-empty .empty-tip {
font-size: 0.6875rem;
color: var(--text-muted, #9ca3af);
}
.chat-history-empty .empty-tip kbd {
display: inline-block;
padding: 1px 5px;
border-radius: 3px;
border: 1px solid var(--border, #e5e7eb);
background: var(--bg-card, #fff);
font-family: inherit;
font-size: 0.625rem;
line-height: 1;
color: inherit;
}
.chat-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s;
font-size: 0.875rem;
color: var(--text);
position: relative;
}
.chat-item:hover {
background: var(--bg-hover);
}
.chat-item.active {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--primary-light) 10%, transparent));
color: var(--primary);
font-weight: 500;
}
/* 搜索 ↑↓/Enter 聚焦高亮（优先级略低于 active，以当前对话色为主） */
.chat-item.is-search-focused:not(.active) {
background: color-mix(in srgb, var(--primary, #4F7CFF) 14%, transparent);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary, #4F7CFF) 65%, transparent);
}
/* 搜索结果命中关键字的高亮 */
.chat-item-title mark {
background: linear-gradient(180deg, rgba(255, 210, 80, 0.55) 0%, rgba(255, 175, 60, 0.5) 100%);
color: #8a4b00;
padding: 0 2px;
border-radius: 2px;
font-weight: 600;
}
[data-theme="dark"] .chat-item-title mark {
background: linear-gradient(180deg, rgba(99, 102, 241, 0.75) 0%, rgba(79, 124, 255, 0.65) 100%);
color: #fff;
}
.chat-item-icon {
flex-shrink: 0;
opacity: 0.6;
}
.chat-item-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.chat-item-title {
font-size: 0.8125rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-item-preview {
font-size: 0.6875rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.chat-item-meta {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.chat-item-model-badge {
font-size: 0.625rem;
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-hover);
color: var(--text-muted);
font-weight: 500;
}
.chat-item-time {
font-size: 0.625rem;
color: var(--text-muted);
}
.chat-item-delete {
opacity: 0;
padding: 4px;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
border-radius: 4px;
transition: all 0.15s;
}
.chat-item:hover .chat-item-delete {
opacity: 1;
}
.chat-item-delete:hover {
background: var(--danger);
color: white;
}
.chat-item-rename {
opacity: 0;
padding: 4px;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
border-radius: 4px;
transition: all 0.15s;
}
.chat-item:hover .chat-item-rename {
opacity: 1;
}
.chat-item-rename:hover {
background: var(--bg-hover);
color: var(--primary);
}
/* ===== 置顶按钮 ===== */
.chat-item-pin {
opacity: 0;
padding: 4px;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
border-radius: 4px;
transition: all 0.15s;
flex-shrink: 0;
}
.chat-item:hover .chat-item-pin {
opacity: 1;
}
.chat-item-pin:hover {
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
}
.chat-item-pin.is-active {
opacity: 1; /* 已置顶状态：始终显示，不依赖 hover */
color: var(--primary);
background: color-mix(in srgb, var(--primary) 14%, transparent);
}
/* ===== 置底按钮 ===== */
.chat-item-bottom {
opacity: 0;
padding: 4px;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
border-radius: 4px;
transition: all 0.15s;
flex-shrink: 0;
}
.chat-item:hover .chat-item-bottom {
opacity: 1;
}
.chat-item-bottom:hover {
background: color-mix(in srgb, var(--primary-light) 12%, transparent);
color: var(--primary-light);
}
.chat-item-bottom.is-active {
opacity: 1; /* 已置底状态：始终显示 */
color: var(--primary-light);
background: color-mix(in srgb, var(--primary-light) 14%, transparent);
}
/* ===== 已置顶 / 已置底 整行视觉区分（左侧竖条 + 轻微底色加深） =====
* 竖条色来自主题主色：置顶=--primary、置底=--primary-light
* 任意主题切换都会同步联动（莫兰迪、极光、海洋……全跟随） */
.chat-item.is-pinned {
position: relative;
padding-left: 9px;
background: color-mix(in srgb, var(--primary) 4%, var(--bg-sidebar));
}
.chat-item.is-pinned::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg, var(--primary), var(--primary-dark));
box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 45%, transparent);
}
.chat-item.is-pinned-bottom {
position: relative;
padding-left: 9px;
background: color-mix(in srgb, var(--primary-light) 4%, var(--bg-sidebar));
}
.chat-item.is-pinned-bottom::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg, var(--primary-light), var(--primary));
box-shadow: 0 0 10px color-mix(in srgb, var(--primary-light) 45%, transparent);
}
/* 与 active 选中渐变背景融合（已置顶/置底的选中态不丢失左侧色条） */
.chat-item.active.is-pinned::before,
.chat-item.active.is-pinned-bottom::before {
top: 4px;
bottom: 4px;
opacity: 0.95;
}
/* ===== 多选模式：行选中高亮 + 左侧勾选框 ===== */
.chat-item.is-selected {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--primary-light) 8%, transparent));
border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
padding: 7px 9px; /* 补偿 1px border 对原 padding:8px 10px 的尺寸影响 */
}
.chat-item.is-selected::after {
/* 选中行额外的背景柔光，不影响置顶/置底左侧条 ::before */
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: var(--radius-sm);
background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 6%, transparent), transparent 60%);
}
/* 多选模式下，所有行都略抬高 checkbox 预留位；整行更易点击 */
.chat-item-checkbox {
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 5px;
border: 1.5px solid var(--border, #d1d5db);
background: var(--bg-card, #fff);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
color: transparent;
margin-right: 2px;
transition: all 0.15s;
}
.chat-item-checkbox:hover {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--ring);
}
.chat-item-checkbox.is-checked {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-color: transparent;
color: #fff;
box-shadow: 0 2px 8px var(--ring);
}
/* ===== 置顶/置底小徽章（替代原"按钮常驻"方案） ===== */
.chat-item-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 4px;
font-size: 0.625rem;
line-height: 1;
flex-shrink: 0;
}
.chat-item-badge-pin {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.chat-item-badge-bottom {
color: var(--primary-light);
background: color-mix(in srgb, var(--primary-light) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--primary-light) 22%, transparent);
}
/* ===== 右侧 ⋮ 更多按钮 + 弹出菜单 ===== */
.chat-item-more-wrap {
position: relative;
flex-shrink: 0;
/* 保证 hover 到菜单（从按钮 → 菜单项移动鼠标）时 chat-item hover 背景不会闪 */
pointer-events: auto;
}
.chat-item-more-btn {
opacity: 0;
padding: 4px 5px;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
border-radius: 5px;
transition: all 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.chat-item:hover .chat-item-more-btn,
.chat-item-more-btn.is-open,
.chat-item-more-wrap.has-open-menu .chat-item-more-btn,
/* 已置顶/置底行：更常显，避免用户找不到入口 */
.chat-item.is-pinned .chat-item-more-btn,
.chat-item.is-pinned-bottom .chat-item-more-btn {
opacity: 1;
}
.chat-item-more-btn:hover {
background: var(--bg-hover);
color: var(--primary);
}
.chat-item-more-btn.is-open {
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
border-radius: 6px;
}
/* 气泡菜单：相对 wrap 定位，对齐右侧，超出项上方显示（防底部被裁） */
.chat-item-more-menu {
position: absolute;
right: 0;
top: calc(100% + 4px);
min-width: 148px;
background: var(--bg-card, #fff);
border: 1px solid var(--border);
border-radius: 10px;
padding: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
z-index: 9999;
display: flex;
flex-direction: column;
gap: 1px;
animation: moreMenuIn 0.16s ease;
}
@keyframes moreMenuIn {
from { opacity: 0; transform: translateY(-4px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.more-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border: none;
background: transparent;
color: var(--text, #1a1a2e);
font-size: 0.78125rem;
border-radius: 6px;
cursor: pointer;
width: 100%;
text-align: left;
line-height: 1.2;
font-weight: 400;
transition: background 0.12s, color 0.12s;
}
.more-menu-item:hover {
background: var(--bg-hover, #f1f3f5);
color: var(--primary);
}
.more-menu-item svg { flex-shrink: 0; }
.more-menu-item span { flex: 1; }
.more-item-pin:hover { color: #4f7cff; background: rgba(79, 124, 255, 0.1); }
.more-item-bottom:hover { color: #7b5cff; background: rgba(123, 92, 255, 0.1); }
.more-item-delete:hover {
color: #fff;
background: #ef4444;
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.28);
}
.more-menu-divider {
height: 1px;
margin: 4px 6px;
background: var(--border);
opacity: 0.9;
}
/* 夜间模式下菜单更亮一点的边框 + 稍深背景 */
[data-theme="dark"] .chat-item-more-menu {
background: #262634;
border-color: #3a3a4a;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .more-menu-item:hover { background: #343447; }
[data-theme="dark"] .more-item-pin:hover { background: rgba(79, 124, 255, 0.18); }
[data-theme="dark"] .more-item-bottom:hover { background: rgba(123, 92, 255, 0.18); }
[data-theme="dark"] .chat-item-more-btn.is-open { background: rgba(255,255,255,0.05); }
.chat-item-title-input {
width: 100%;
font-size: 0.8125rem;
padding: 2px 6px;
border: 1px solid var(--primary);
border-radius: 4px;
background: var(--bg-card);
color: var(--text);
outline: none;
font-family: inherit;
}
.chat-item-title.editable {
cursor: text;
}
.chat-item-title.dragging {
opacity: 0.5;
}
/* 滚动条 */
.sidebar-section::-webkit-scrollbar {
width: 4px;
}
.sidebar-section::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 2px;
}
.sidebar-footer {
padding: 12px;
border-top: 1px solid var(--border-light);
position: relative;
z-index: 10;
pointer-events: auto;
}
/* 同步状态指示器已移除（同步全自动） */
.settings-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.875rem;
color: var(--text-secondary);
transition: all 0.15s;
position: relative;
z-index: 20;
pointer-events: auto;
}
.settings-btn:hover {
background: var(--bg-hover);
color: var(--text);
}
/* ===== 主区域 ===== */
.main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
}
.top-bar {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.sidebar-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
flex-shrink: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
color: var(--text-secondary);
transition: all 0.2s;
}
.sidebar-toggle:hover {
background: var(--bg-hover);
border-color: var(--primary);
color: var(--primary);
}
.sidebar-toggle .toggle-icon { display: none; }
.sidebar-toggle:not(.collapsed) .collapse-icon { display: block; }
.sidebar-toggle.collapsed .expand-icon { display: block; }
.model-selector {
position: relative;
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
min-width: 0;
}
/* 隐藏原生 select，改用自定义下拉框 */
#modelSelect {
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
opacity: 0;
width: 0;
height: 0;
}
/* 自定义下拉框容器 */
.model-select-wrap {
position: relative;
flex: 1;
min-width: 0;
}
.custom-select {
position: relative;
width: 100%;
}
.custom-select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 14px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.875rem;
color: var(--text);
font-weight: 500;
transition: all 0.15s;
min-height: 36px;
}
.custom-select-trigger:hover {
border-color: var(--primary);
}
.custom-select.open .custom-select-trigger {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.1);
}
.custom-select-current {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.custom-select-arrow {
flex-shrink: 0;
transition: transform 0.2s;
color: var(--text-muted);
}
.custom-select.open .custom-select-arrow {
transform: rotate(180deg);
}
.custom-select-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
max-height: min(68vh, 720px);
min-height: 280px;
overflow-y: auto;
z-index: 1001;
min-width: 320px;
}
.custom-select.open .custom-select-dropdown {
display: block;
}
.custom-optgroup-label {
padding: 8px 12px 4px;
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.3px;
position: sticky;
top: 0;
background: var(--bg-card);
border-bottom: 1px solid var(--border-light);
z-index: 1;
}
.custom-optgroup-label:first-child {
border-bottom: none;
}
.custom-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
cursor: pointer;
transition: background 0.1s;
font-size: 0.8125rem;
gap: 16px;
}
.custom-option:hover {
background: var(--bg-hover);
}
.custom-option.selected {
background: rgba(79, 124, 255, 0.06);
color: var(--primary);
}
.custom-option.disabled {
opacity: 0.4;
pointer-events: none;
}
.custom-option-name {
flex-shrink: 0;
font-weight: 500;
}
.custom-option-desc {
flex: 1;
text-align: right;
color: var(--text-secondary);
font-size: 0.75rem;
opacity: 0.7;
direction: ltr;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.custom-select-dropdown::-webkit-scrollbar {
width: 6px;
}
.custom-select-dropdown::-webkit-scrollbar-track {
background: transparent;
}
.custom-select-dropdown::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
.model-info {
margin-left: 12px;
font-size: 0.8125rem;
color: var(--text-muted);
}
.top-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}
.badge-tags {
display: flex;
gap: 6px;
margin-right: 4px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 0.75rem;
font-weight: 500;
border-radius: 20px;
background: rgba(79, 124, 255, 0.1);
color: var(--primary);
border: 1px solid rgba(79, 124, 255, 0.2);
white-space: nowrap;
}
.badge-thinking {
background: rgba(79, 124, 255, 0.1);
color: var(--primary);
border-color: rgba(79, 124, 255, 0.2);
}
.badge-research {
background: linear-gradient(135deg, rgba(79, 124, 255, 0.08), rgba(123, 92, 255, 0.08));
color: var(--primary-light);
border-color: rgba(123, 92, 255, 0.2);
}
.badge-vision {
background: rgba(16, 185, 129, 0.10);
color: #10b981;
border-color: rgba(16, 185, 129, 0.22);
}
.badge-image {
background: rgba(245, 158, 11, 0.10);
color: #d97706;
border-color: rgba(245, 158, 11, 0.22);
}
.badge-video {
background: rgba(236, 72, 153, 0.10);
color: #db2777;
border-color: rgba(236, 72, 153, 0.22);
}
.badge-3d {
background: rgba(99, 102, 241, 0.10);
color: #6366f1;
border-color: rgba(99, 102, 241, 0.22);
}
/* ===== 媒体（图片/视频/3D）预览 ===== */
.file-outputs { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.media-preview {
position: relative;
border-radius: 12px;
overflow: hidden;
background: var(--bg-card);
border: 1px solid var(--border);
max-width: 100%;
}
.media-preview img,
.media-preview video {
display: block;
width: 100%;
max-height: 520px;
object-fit: contain;
background: #000;
}
.media-preview a { display: block; }
/* 3D 模型卡片 */
.model3d-preview .model3d-card {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 22px;
background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(236,72,153,0.08));
min-height: 110px;
}
.model3d-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: rgba(99,102,241,0.14);
color: #6366f1;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.model3d-info { flex: 1; min-width: 0; }
.model3d-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.model3d-type {
font-size: 0.75rem;
color: var(--text-tertiary);
margin-top: 6px;
}
/* 3D 模型在对话中直接渲染的 canvas 容器 */
.model3d-canvas-box {
position: relative;
width: 100%;
min-height: 320px;
background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--bg-input) 88%, transparent));
overflow: hidden;
}
.model3d-canvas-box canvas {
display: block;
border-radius: 12px 12px 0 0;
}
.model3d-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: var(--text-tertiary);
font-size: 0.8125rem;
z-index: 2;
background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--bg-input) 88%, transparent));
}
.model3d-spinner {
width: 36px;
height: 36px;
border: 3px solid color-mix(in srgb, var(--primary) 25%, transparent);
border-top-color: var(--primary);
border-radius: 50%;
animation: model3d-spin 0.9s linear infinite;
}
@keyframes model3d-spin {
to { transform: rotate(360deg); }
}
.model3d-info-overlay {
position: absolute;
left: 12px;
bottom: 10px;
z-index: 1;
display: flex;
flex-direction: column;
gap: 2px;
pointer-events: none;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.model3d-info-overlay .model3d-name {
color: #fff;
font-size: 0.8125rem;
font-weight: 600;
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.model3d-info-overlay .model3d-type {
color: rgba(255,255,255,0.7);
font-size: 0.6875rem;
margin-top: 0;
}
.media-actions {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 6px;
background: rgba(0,0,0,0.45);
border-radius: 999px;
padding: 4px;
backdrop-filter: blur(6px);
}
.media-actions .action-btn {
width: 30px;
height: 30px;
border-radius: 999px;
background: rgba(255,255,255,0.95);
color: #222;
border: none;
opacity: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.media-actions .action-btn:hover { background: #fff; }
.video-preview video { min-height: 240px; }
/* ===== 聊天区域 ===== */
/* —— 注意：.chat-area 的 padding/布局在下方"当前对话搜索栏"小节末尾统一声明。
避免两处声明导致折叠态搜索条不占位时仍保留过高顶部留白 —— */
/* ====== 对话框内部正上方：当前对话搜索栏 ======
折叠态（默认）：sticky 置顶 + 负 margin 回填高度 —— 滚动时图标一直可见不消失，
但容器"看起来不占高度"，也没有背景/边框/毛玻璃 —— 视觉上只有一个图标悬浮在中间。
展开态：sticky 置顶，整行透明，仅搜索框本身有交互反馈（不显示毛玻璃横条）。*/
.in-chat-search {
/* 容器默认透明，不加任何背景渐变/毛玻璃 —— 避免出现"一条横条挡对话" */
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
pointer-events: none; /* 容器本身不抢点击 —— 内部按钮/输入框再开启 pointer-events */
z-index: 30;
}
/* 新对话 / 没有任何消息时：彻底隐藏整个搜索图标+搜索框（用户要求无内容时不显示） */
.in-chat-search.in-chat-search-hidden {
display: none !important;
}
.in-chat-search > * {
pointer-events: auto; /* 保证圆形图标 / 搜索框内部所有控件都能点/输入 */
}
/* —— 折叠态（默认）：sticky 置顶 —— 滚动时图标一直可见，不会跟着内容滚没。
用负 margin 把容器高度回填到 0 视觉占位：chat-area 顶部内容会"钻上来"，
于是画面上只剩那个单独的圆形放大镜图标悬在正上方中间，没有横条占位。*/
.in-chat-search.is-collapsed {
position: sticky;
top: 0;
min-height: 40px; /* 让 flex 行能容下 32px 圆形图标（含 4px 呼吸空间） */
height: 40px;
padding: 0;
margin-bottom: -40px; /* 关键：用负 margin 回填 —— 文档流视觉占位 0，不挡下面消息 */
width: 100%;
left: 0;
right: 0;
}
.in-chat-search.is-collapsed .in-chat-search-inner {
display: none;
}
/* —— 展开态：sticky 置顶，滚动时一直保持在顶部可见（但容器本身透明，不显示"条"） —— */
.in-chat-search:not(.is-collapsed) {
position: sticky;
top: 0;
min-height: 48px;
padding: 6px 28px 6px;
justify-content: center;
}
.in-chat-search:not(.is-collapsed) .in-chat-search-trigger {
display: none;
}
/* 对话框消息容器：顶部 padding 微调（折叠态不占视觉高度，但欢迎/首条消息太贴顶仍不好看） */
.chat-area {
flex: 1;
overflow-y: auto;
padding: 6px 0 24px;
scroll-behavior: smooth;
position: relative;
}
/* 折叠态：圆形搜索图标按钮（50%透明度白底 + 同色细边；放大镜 SVG 统一黑色；hover叠主色高亮） */
.in-chat-search-trigger {
width: 32px;
height: 32px;
border-radius: 50%;
/* 50% 透明度的白底（用户明确要求） */
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #000; /* 圆形放大镜图标改成纯黑 */
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: all 0.18s ease;
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.in-chat-search-trigger:hover {
background: color-mix(in srgb, var(--primary, #4F7CFF) 16%, rgba(255,255,255,0.5));
color: #000; /* hover 时放大镜仍保持黑色；只改变背景/边框/阴影 */
border-color: color-mix(in srgb, var(--primary, #4F7CFF) 45%, rgba(255,255,255,0.5));
transform: translateY(-0.5px);
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary, #4F7CFF) 28%, transparent);
}
.in-chat-search-trigger svg { display: block; color: inherit; }
[data-theme="dark"] .in-chat-search-trigger {
/* 夜间主题：不要50%纯白底+黑字（会被全局dark主题白字覆盖→白底白字糊），
改用10%白透明的深色底 + 纯白字/图标，与暗色主题整体风格统一，对比极强。*/
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.14);
color: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .in-chat-search-trigger:hover {
/* hover：叠一层蓝紫主色透明底，图标仍保持白色，黑白对比不丢 */
background: color-mix(in srgb, var(--primary, #7c8bff) 30%, rgba(255,255,255,0.10));
border-color: color-mix(in srgb, var(--primary, #a5b4fc) 55%, rgba(255,255,255,0.14));
color: #ffffff;
box-shadow: 0 2px 10px color-mix(in srgb, var(--primary, #7c8bff) 45%, transparent);
}
/* 展开态：完整搜索条（50%透明度白底；focus时叠主色光环） */
.in-chat-search-inner {
/* 不再 width:100%；给一个合理宽度：桌面端约 560px，窄屏幕自动缩到 92% */
width: clamp(260px, 92%, 560px);
display: flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 6px 0 8px;
border-radius: 10px;
/* 50% 透明度的白底（用户明确要求） */
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
transition: box-shadow 0.15s, border-color 0.15s, background 0.15s,
opacity 0.18s ease, transform 0.18s ease;
transform-origin: center center; /* 从中央展开（因为现在是居中布局） */
animation: inChatSearchExpand 0.22s ease;
}
/* hover 时给一点点更强的白底透明度（提示"可交互"） */
.in-chat-search-inner:hover {
background: rgba(255, 255, 255, 0.62);
}
@keyframes inChatSearchExpand {
from { opacity: 0; transform: translateY(-4px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* focus 时在 50% 白底基础上叠一层主色光环 + 淡主色底（输入激活反馈） */
.in-chat-search-inner:focus-within {
border-color: color-mix(in srgb, var(--primary, #4F7CFF) 55%, rgba(255,255,255,0.5));
background: color-mix(in srgb, var(--primary, #4F7CFF) 10%, rgba(255,255,255,0.5));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #4F7CFF) 16%, transparent),
0 2px 6px rgba(16, 24, 40, 0.08);
}
/* 暗色主题下：展开搜索框不要 50% 白底+黑字（会被全局 dark 输入框白字覆盖成白字叠白→糊），
改为与夜间主题整体一致的"12%白透明深色底 + 全白字"，清爽高对比。 */
[data-theme="dark"] .in-chat-search-inner {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.16);
box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
[data-theme="dark"] .in-chat-search-inner:hover {
background: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .in-chat-search-inner:focus-within {
/* focus：叠一层靛蓝主色，字仍保持白色 */
background: color-mix(in srgb, var(--primary, #7c8bff) 28%, rgba(255,255,255,0.12));
border-color: color-mix(in srgb, var(--primary, #a5b4fc) 60%, rgba(255,255,255,0.16));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #7c8bff) 30%, transparent),
0 2px 6px rgba(0,0,0,0.4);
}
/* —— 展开态搜索框内部所有文字/图标统一黑色（用户明确要求） —— */
.in-chat-search-icon {
color: #000; /* 搜索框内部左侧放大镜 → 黑色 */
flex-shrink: 0;
}
.in-chat-search input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
outline: none;
padding: 6px 2px;
font-size: 0.8125rem;
color: #000; /* 输入的文字 → 黑色 */
}
.in-chat-search input::placeholder { color: #000; opacity: 0.62; } /* 占位文字黑（略淡） */
.in-chat-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border-radius: 6px;
border: none;
background: transparent;
color: #000; /* 上一条 / 下一条 / ✕ 清除按钮图标 → 黑色 */
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
}
.in-chat-search-btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--primary, #4F7CFF) 14%, transparent);
color: #000; /* hover 时图标仍保持黑色，仅背景变色高亮 */
}
.in-chat-search-btn:disabled {
opacity: 0.32;
cursor: not-allowed;
}
/* hover 时仅背景换对应配色，图标一律黑色，保持黑白对比清晰 */
.in-chat-search-prev:hover:not(:disabled) { background: rgba(123, 92, 255, 0.16); color: #000; }
.in-chat-search-next:hover:not(:disabled) { background: rgba(79, 124, 255, 0.16); color: #000; }
.in-chat-search-clear:hover:not(:disabled) { background: rgba(239, 68, 68, 0.18); color: #000; }
/* 计数：当前 / 总数 —— 全黑，白底上的强对比 */
.in-chat-search-count {
display: inline-flex;
align-items: center;
min-width: 48px;
justify-content: center;
gap: 2px;
padding: 2px 8px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.08); /* 黑胶囊淡底（白底 50% 上不突兀） */
font-size: 0.6875rem;
color: #000; /* 计数文字黑色 */
line-height: 1.2;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.in-chat-search-count .count-cur { font-weight: 700; color: #000; min-width: 1ch; text-align: right; }
.in-chat-search-count.no-match {
background: rgba(239, 68, 68, 0.12);
color: #991b1b; /* 无匹配红色深一点，但保留可读 */
font-weight: 500;
padding: 2px 6px;
}
.in-chat-search-count.no-match .count-cur { color: inherit; font-weight: 500; }
/* 暗色主题下展开态内部元素：统一白色（12%白透明深色底+白字，对比极强+和整站night一致） */
[data-theme="dark"] .in-chat-search-icon { color: #ffffff; }
[data-theme="dark"] .in-chat-search input { color: #ffffff; }
[data-theme="dark"] .in-chat-search input::placeholder { color: #ffffff; opacity: 0.62; }
[data-theme="dark"] .in-chat-search-btn { color: #ffffff; }
[data-theme="dark"] .in-chat-search-btn:hover:not(:disabled) { color: #ffffff; }
[data-theme="dark"] .in-chat-search-prev:hover:not(:disabled) { color: #ffffff; background: rgba(123,92,255,0.28); }
[data-theme="dark"] .in-chat-search-next:hover:not(:disabled) { color: #ffffff; background: rgba(79,124,255,0.28); }
[data-theme="dark"] .in-chat-search-clear:hover:not(:disabled) { color: #ffffff; background: rgba(239,68,68,0.30); }
/* 计数胶囊：暗色主题用 18% 白透明底 + 白字，一体化 */
[data-theme="dark"] .in-chat-search-count { color: #ffffff; background: rgba(255,255,255,0.18); }
[data-theme="dark"] .in-chat-search-count .count-cur { color: #ffffff; }
/* 无匹配：深红底 + 白字，警告醒目且可读 */
[data-theme="dark"] .in-chat-search-count.no-match { color: #ffffff; background: rgba(239,68,68,0.35); }
/* 对话命中关键字高亮（弱高亮：黄色底）+ 当前命中强高亮（红橙描边 + 放大背景） */
.in-chat-mark {
background: linear-gradient(180deg, rgba(255, 221, 100, 0.55) 0%, rgba(255, 180, 50, 0.45) 100%);
color: #7a4200;
padding: 0 2px;
border-radius: 2px;
font-weight: 500;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
mark.in-chat-mark.is-current-mark {
background: linear-gradient(180deg, #ff9e4f 0%, #f55656 100%);
color: #fff;
box-shadow: 0 0 0 2px rgba(255, 116, 80, 0.5), 0 1px 5px rgba(245, 86, 86, 0.35);
border-radius: 3px;
padding: 0 3px;
font-weight: 600;
animation: inChatMatchPulse 1.1s ease-in-out 1;
}
[data-theme="dark"] .in-chat-mark {
background: linear-gradient(180deg, rgba(99, 102, 241, 0.75) 0%, rgba(79, 124, 255, 0.6) 100%);
color: #fff;
}
[data-theme="dark"] mark.in-chat-mark.is-current-mark {
background: linear-gradient(180deg, #ff8a5a 0%, #ef4444 100%);
color: #fff;
box-shadow: 0 0 0 2px rgba(255, 138, 90, 0.65), 0 1px 6px rgba(239, 68, 68, 0.5);
}
@keyframes inChatMatchPulse {
0% { transform: scale(1); }
45% { transform: scale(1.16); }
100% { transform: scale(1); }
}
.chat-area::-webkit-scrollbar {
width: 6px;
}
.chat-area::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
/* ===== 对话内容浏览（右侧 minimap，类 Trae） ===== */
.chat-minimap {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 240px;
max-height: 60%;
z-index: 50;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.chat-minimap.visible {
opacity: 1;
pointer-events: auto;
}
.chat-minimap-track {
width: 100%;
height: 100%;
background: color-mix(in srgb, var(--bg-card) 80%, transparent);
border: 1px solid var(--border);
border-radius: 14px;
position: relative;
overflow: hidden;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: border-color 0.25s, box-shadow 0.25s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
/* 关键：禁止浏览器抢占触摸手势 + 禁止拖拽时选中文本，否则 pointer 事件会被打断 */
touch-action: none;
-webkit-user-select: none;
user-select: none;
cursor: grab;
}
.chat-minimap.dragging .chat-minimap-track,
.chat-minimap-track:active {
cursor: grabbing;
}
/* 拖拽中禁止 body 文本选择（防止鼠标快速移动选中其他文本打断 pointer 事件） */
body.minimap-dragging {
-webkit-user-select: none !important;
user-select: none !important;
cursor: grabbing !important;
}
.chat-minimap:hover .chat-minimap-track {
border-color: var(--border-medium);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
/* 每条消息在 minimap 上的小标记 */
.chat-minimap-mark {
position: absolute;
left: 6px;
right: 6px;
min-height: 3px;
border-radius: 3px;
transition: opacity 0.2s ease;
opacity: 0.35;
}
.chat-minimap-mark.user {
background: var(--primary);
border-radius: 3px 3px 3px 3px;
}
.chat-minimap-mark.assistant {
background: var(--primary-light);
border-radius: 3px 3px 3px 3px;
}
.chat-minimap:hover .chat-minimap-mark {
opacity: 0.6;
}
/* 视口指示器：当前可见区域（即"滑块"本体）—可被抓取拖拽 */
.chat-minimap-viewport {
position: absolute;
left: 2px;
right: 2px;
background: var(--primary);
border-radius: 10px;
opacity: 0.22;
pointer-events: auto;
cursor: grab;
/* 不对 top/height 做过渡：滚动/拖拽时需即时跟随，否则会有"滞后/不跟手"的视觉延迟 */
transition: opacity 0.18s ease, box-shadow 0.18s ease;
will-change: top, height;
border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
box-sizing: border-box;
}
.chat-minimap-viewport:active,
.chat-minimap.dragging .chat-minimap-viewport {
cursor: grabbing;
}
.chat-minimap:hover .chat-minimap-viewport {
opacity: 0.32;
box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 30%, transparent);
}
/* 拖拽中视口指示器加亮 + 加粗边框 + 阴影，便于看清当前位置，提示"被抓住" */
.chat-minimap.dragging .chat-minimap-viewport {
opacity: 0.5;
border-color: var(--primary);
box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 45%, transparent);
transition: none;
}
.chat-minimap.dragging .chat-minimap-track {
border-color: var(--primary);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}
/* 夜间主题适配 */
[data-theme="dark"] .chat-minimap-track,
body.dark-theme .chat-minimap-track {
background: color-mix(in srgb, var(--bg-card) 70%, transparent);
border-color: var(--border-light);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .chat-minimap:hover .chat-minimap-track,
body.dark-theme .chat-minimap:hover .chat-minimap-track {
border-color: var(--border-medium);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .chat-minimap-mark,
body.dark-theme .chat-minimap-mark {
opacity: 0.3;
}
[data-theme="dark"] .chat-minimap:hover .chat-minimap-mark,
body.dark-theme .chat-minimap:hover .chat-minimap-mark {
opacity: 0.55;
}
/* 置顶/置底浮动按钮 */
.scroll-btn {
position: absolute;
z-index: 100;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
background: #ffffff;
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.scroll-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.scroll-btn.visible {
opacity: 1;
pointer-events: auto;
}
/* 置顶按钮：固定在主区域右上角（top-bar 下方） */
.scroll-top-btn {
top: 90px;
right: 24px;
}
/* 置底按钮：固定在主区域右下角（输入区上方） */
.scroll-bottom-btn {
bottom: 140px;
right: 24px;
}
/* 欢迎页 */
.welcome-screen {
/* 折叠态 sticky + 负 margin 回填无高度占用；展开态 48px，这里取大值保底不溢出 */
min-height: calc(100% - 50px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px 20px 40px;
}
.welcome-content {
text-align: center;
max-width: 720px;
}
.welcome-logo {
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.welcome-content h1 {
font-size: 2.125rem;
font-weight: 400; /* 行书不宜加粗 */
font-family: 'STXingkai', '华文行楷', 'FZXingKai-S04S', '方正行楷简体',
'STKaiti', '华文楷体', 'KaiTi', '楷体',
'LiSu', '隶书',
'Noto Serif SC', 'Source Han Serif CN', serif;
letter-spacing: 0.15em;
margin-bottom: 12px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.welcome-subtitle {
color: var(--text-muted);
font-size: 0.9375rem;
margin-bottom: 32px;
}
/* ===== 消息 ===== */
.message {
padding: 20px 24px;
display: flex;
gap: 16px;
animation: fadeIn 0.3s ease;
}
.message.assistant-message {
flex-direction: column;
gap: 0;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.message.user-message {
background: transparent;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.message-content-wrapper {
display: flex;
align-items: flex-start;
gap: 8px;
max-width: 75%;
}
.message.user-message .message-content {
background: var(--bg-message-user);
color: white;
padding: 14px 18px;
border-radius: 18px 18px 4px 18px;
font-size: 0.9375rem;
line-height: 1.7;
white-space: pre-wrap;
word-wrap: break-word;
max-width: 100%;
}
.user-actions {
opacity: 0;
transition: opacity 0.15s;
flex-shrink: 0;
}
.message.user-message:hover .user-actions {
opacity: 1;
}
.message.assistant-message {
background: transparent;
}
.message-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
flex-shrink: 0;
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.message-role {
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
}
.message-actions {
margin-left: auto;
display: flex;
gap: 4px;
}
/* 助手消息底部操作栏（重新思考、复制） */
.message-footer-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
}
.msg-usage {
font-size: 0.75rem;
color: var(--text-muted);
opacity: 1;
font-variant-numeric: tabular-nums;
white-space: nowrap;
user-select: text;
display: inline-flex;
align-items: center;
}
.msg-usage .msg-usage-coin {
width: 12px;
height: 12px;
margin: 0 2px 0 4px;
}
.message-footer-actions .action-btn {
opacity: 1;
display: flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 0.75rem;
border: 1px solid var(--border);
border-radius: 6px;
}
.message-footer-actions .action-btn:hover {
background: var(--bg-secondary);
color: var(--primary);
}
/* 删除按钮：悬停变红色（与复制/重思考区分） */
.message-footer-actions .action-btn.delete-btn-footer:hover {
background: rgba(239, 68, 68, 0.10);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.35);
}
/* 继续生成按钮：突出显示，带主题色 */
.message-footer-actions .action-btn.continue-btn {
background: rgba(79, 124, 255, 0.10);
color: #4f7cff;
border-color: rgba(79, 124, 255, 0.35);
animation: pulse-continue 2s ease-in-out infinite;
}
.message-footer-actions .action-btn.continue-btn:hover {
background: rgba(79, 124, 255, 0.20);
border-color: rgba(79, 124, 255, 0.55);
}
@keyframes pulse-continue {
0%, 100% { box-shadow: 0 0 0 0 rgba(79, 124, 255, 0.3); }
50% { box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.08); }
}
@media (prefers-color-scheme: dark) {
.message-footer-actions .action-btn.delete-btn-footer:hover {
background: rgba(239, 68, 68, 0.16);
color: #f87171;
border-color: rgba(239, 68, 68, 0.45);
}
}
body[data-theme="dark"] .message-footer-actions .action-btn.delete-btn-footer:hover {
background: rgba(239, 68, 68, 0.16);
color: #f87171;
border-color: rgba(239, 68, 68, 0.45);
}
/* 版本导航器 */
.version-nav {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 4px 10px;
background: var(--bg-hover);
border-radius: 8px;
width: fit-content;
}
.version-btn {
width: 24px;
height: 24px;
border: none;
background: var(--bg-card);
border-radius: 6px;
cursor: pointer;
color: var(--text-secondary);
font-size: 1rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.version-btn:hover {
background: var(--primary);
color: #fff;
}
.version-info {
font-size: 0.75rem;
color: var(--text-muted);
min-width: 40px;
text-align: center;
}
.action-btn {
padding: 6px;
background: none;
border: none;
border-radius: 6px;
cursor: pointer;
color: var(--text-muted);
opacity: 0;
transition: all 0.15s;
}
.message:hover .action-btn {
opacity: 1;
}
.action-btn:hover {
background: var(--bg-hover);
color: var(--text);
}
/* ===== 思考过程 ===== */
.reasoning-block {
background: var(--bg-hover);
border-radius: var(--radius);
margin-bottom: 14px;
overflow: hidden;
border: 1px solid var(--border-light);
}
.reasoning-header {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
cursor: pointer;
font-size: 0.8125rem;
color: var(--text-secondary);
user-select: none;
}
.reasoning-header:hover {
background: rgba(0, 0, 0, 0.02);
}
[data-theme="dark"] .reasoning-header:hover {
background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .reasoning-block {
background: var(--bg-hover);
border-color: var(--border);
}
[data-theme="dark"] .thinking-indicator {
background: var(--bg-hover);
}
[data-theme="dark"] .reasoning-block .collapse-icon {
color: var(--text-muted);
}
.reasoning-header svg {
color: var(--primary);
}
.reasoning-header svg.collapse-icon {
margin-left: auto;
transition: transform 0.2s;
}
.reasoning-expand-hint {
font-size: 0.6875rem;
color: var(--text-muted);
margin-left: 4px;
}
.reasoning-block.collapsed .collapse-icon {
transform: rotate(-90deg);
}
.reasoning-block.collapsed .reasoning-content {
display: none;
}
.reasoning-block.collapsed .reasoning-expand-hint {
display: inline;
}
.reasoning-block:not(.collapsed) .reasoning-expand-hint {
display: none;
}
.reasoning-content {
padding: 0 14px 14px;
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.7;
white-space: pre-wrap;
word-wrap: break-word;
max-height: 600px;
overflow-y: auto;
}
/* ===== 消息正文 ===== */
.message-body {
width: 100%;
max-width: 100%;
font-size: 0.9375rem;
line-height: 1.8;
color: var(--text);
}
.message-body p { margin-bottom: 12px; }
.message-body p:last-child { margin-bottom: 0; }
.message-body h1, .message-body h2, .message-body h3, .message-body h4 {
margin: 20px 0 12px;
font-weight: 600;
line-height: 1.3;
}
.message-body h1 { font-size: 1.5rem; }
.message-body h2 { font-size: 1.25rem; }
.message-body h3 { font-size: 1.0625rem; }
.message-body h4 { font-size: 0.9375rem; }
.message-body ul, .message-body ol {
padding-left: 24px;
margin-bottom: 12px;
}
.message-body li { margin-bottom: 6px; }
.message-body code {
background: var(--bg-hover);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
font-family: var(--font-mono);
color: var(--primary-dark);
border: 1px solid var(--border-light);
}
.message-body pre {
background: #f6f8fa;
color: #24292f;
padding: 16px 18px;
border-radius: var(--radius);
overflow-x: auto;
margin: 16px 0;
font-size: 0.875rem;
line-height: 1.6;
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .message-body pre {
background: #0d1117;
color: #c9d1d9;
border: 1px solid var(--border-medium);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
[data-theme="dark"] .message-body code {
background: var(--bg-hover);
color: var(--primary-light);
border: 1px solid var(--border-light);
}
[data-theme="dark"] .message-body blockquote {
background: rgba(79, 124, 255, 0.08);
color: var(--text-secondary);
border-left-color: var(--primary-light);
}
[data-theme="dark"] .message-body th {
background: var(--bg-hover);
}
[data-theme="dark"] .sidebar-search input {
background: var(--bg-hover);
color: var(--text);
}
[data-theme="dark"] .sidebar-search input::placeholder {
color: var(--text-muted);
}
[data-theme="dark"] .input-box {
background: var(--bg-card);
border-color: var(--border);
}
[data-theme="dark"] #userInput {
color: var(--text);
}
[data-theme="dark"] #userInput::placeholder {
color: var(--text-muted);
}
[data-theme="dark"] .attachment-item {
background: var(--bg-card);
border-color: var(--border);
}
[data-theme="dark"] .file-output {
background: var(--bg-hover);
border-color: var(--border);
}
[data-theme="dark"] .modal {
background: var(--bg-card);
}
[data-theme="dark"] .context-item {
background: var(--bg-hover);
}
[data-theme="dark"] .settings-row label {
color: var(--text-secondary);
}
[data-theme="dark"] .seg-btn {
color: var(--text-secondary);
}
[data-theme="dark"] .seg-btn.active {
background: var(--bg-card);
color: var(--primary);
}
[data-theme="dark"] .timezone-select {
background: var(--bg-hover);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .badge {
background: rgba(79, 124, 255, 0.15);
border-color: rgba(79, 124, 255, 0.3);
}
[data-theme="dark"] .toast {
background: var(--bg-card);
color: var(--text);
border: 1px solid var(--border);
box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 2px 6px rgba(99, 102, 241, 0.18);
}
/* ===== 夜间主题：补齐所有缺失组件（2026-08-23 整体优化） ===== */
/* 1) 侧边栏本体 */
[data-theme="dark"] .sidebar {
background: var(--bg-sidebar);
border-right: 1px solid var(--border-light);
}
[data-theme="dark"] .sidebar-header {
border-bottom: 1px solid var(--border-light);
}
[data-theme="dark"] .sidebar-footer {
border-top: 1px solid var(--border-light);
background: var(--bg-sidebar);
}
[data-theme="dark"] .logo-row .logo-title { color: var(--text); }
[data-theme="dark"] .logo-row .logo-sub { color: var(--text-muted); }
/* 侧边栏按钮：新建对话 / 设置 */
[data-theme="dark"] .sidebar-new-btn,
[data-theme="dark"] .settings-btn {
background: transparent;
border-color: var(--border);
color: var(--text-secondary);
}
[data-theme="dark"] .sidebar-new-btn:hover,
[data-theme="dark"] .settings-btn:hover {
background: rgba(123, 140, 248, 0.14);
border-color: rgba(123, 140, 248, 0.4);
color: var(--text);
}
/* 收起态圆角矩形按钮（保持白底0.5透明图标？不，和深色一致改成深色底白字） */
[data-theme="dark"] .sidebar.collapsed .settings-btn,
[data-theme="dark"] .sidebar.collapsed .sidebar-new-btn,
[data-theme="dark"] .sidebar.collapsed .sidebar-search .sidebar-search-icon {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.12);
color: #fff;
}
[data-theme="dark"] .sidebar.collapsed .settings-btn:hover,
[data-theme="dark"] .sidebar.collapsed .sidebar-new-btn:hover,
[data-theme="dark"] .sidebar.collapsed .sidebar-search .sidebar-search-icon:hover {
background: rgba(123, 140, 248, 0.28);
border-color: rgba(123, 140, 248, 0.55);
color: #fff;
}
/* 侧边栏对话列表 */
[data-theme="dark"] .chat-item {
border: 1px solid transparent;
color: var(--text-secondary);
}
[data-theme="dark"] .chat-item:hover {
background: var(--bg-hover);
border-color: var(--border-light);
color: var(--text);
}
[data-theme="dark"] .chat-item.active {
background: color-mix(in srgb, var(--primary) 18%, transparent);
border-color: color-mix(in srgb, var(--primary) 40%, transparent);
color: var(--text);
}
[data-theme="dark"] .chat-item-title { color: var(--text); }
[data-theme="dark"] .chat-item-meta { color: var(--text-muted); }
[data-theme="dark"] .chat-item-preview { color: var(--text-secondary); }
/* 夜间：置顶=主色渐变、置底=辅色渐变（原来固定的金黄/纯蓝不再偏离主题） */
[data-theme="dark"] .chat-item.is-pinned::before {
background: linear-gradient(180deg, var(--primary), var(--primary-dark));
box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 55%, transparent);
}
[data-theme="dark"] .chat-item.is-pinned-bottom::before {
background: linear-gradient(180deg, var(--primary-light), var(--primary));
box-shadow: 0 0 14px color-mix(in srgb, var(--primary-light) 55%, transparent);
}
[data-theme="dark"] .chat-item.is-pinned {
background: color-mix(in srgb, var(--primary) 7%, var(--bg-sidebar));
}
[data-theme="dark"] .chat-item.is-pinned-bottom {
background: color-mix(in srgb, var(--primary-light) 7%, var(--bg-sidebar));
}
[data-theme="dark"] .chat-item-pin-icon { color: var(--primary); opacity: 0.95; }
[data-theme="dark"] .chat-item-bottom-icon { color: var(--primary-light); }
[data-theme="dark"] .chat-item-badge-pin {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 18%, transparent);
border-color: color-mix(in srgb, var(--primary) 28%, transparent);
}
[data-theme="dark"] .chat-item-badge-bottom {
color: var(--primary-light);
background: color-mix(in srgb, var(--primary-light) 18%, transparent);
border-color: color-mix(in srgb, var(--primary-light) 28%, transparent);
}
[data-theme="dark"] .chat-item-more-btn {
color: var(--text-muted);
background: transparent;
}
[data-theme="dark"] .chat-item-more-btn:hover {
color: var(--text);
background: rgba(255,255,255,0.06);
}
/* 多选 checkbox 与多选条 */
[data-theme="dark"] .chat-item-checkbox {
border-color: var(--border-medium);
background: transparent;
}
[data-theme="dark"] .chat-item-checkbox:checked {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-color: transparent;
color: #fff;
}
[data-theme="dark"] .section-title { color: var(--text-muted); }
[data-theme="dark"] .chat-history-empty .empty-tip { color: var(--text-secondary); }
[data-theme="dark"] .chat-history-empty .empty-tip kbd {
background: var(--bg-hover);
border-color: var(--border);
color: var(--text-secondary);
}
/* 多选模式切换按钮 + 多选操作条 */
[data-theme="dark"] .select-mode-toggle {
background: transparent;
border-color: var(--border);
color: var(--text-secondary);
}
[data-theme="dark"] .select-mode-toggle:hover {
background: color-mix(in srgb, var(--primary) 18%, transparent);
border-color: color-mix(in srgb, var(--primary) 48%, transparent);
color: var(--text);
}
[data-theme="dark"] .select-mode-toggle.is-active {
color: #fff;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
border-color: transparent;
box-shadow: 0 2px 14px var(--ring);
}
[data-theme="dark"] .multi-select-bar {
border-bottom-color: var(--border-light);
background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent);
}
[data-theme="dark"] .ms-btn {
background: var(--bg-card);
border-color: var(--border);
color: var(--text-secondary);
}
[data-theme="dark"] .ms-btn:hover {
background: color-mix(in srgb, var(--primary) 18%, transparent);
border-color: color-mix(in srgb, var(--primary) 48%, transparent);
color: #fff;
}
/* 夜间多选：置顶按主色、置底按辅色、删除保留语义红 */
[data-theme="dark"] .ms-btn.ms-pin:hover {
background: color-mix(in srgb, var(--primary) 22%, transparent);
border-color: color-mix(in srgb, var(--primary) 55%, transparent);
color: #fff;
}
[data-theme="dark"] .ms-btn.ms-bottom:hover {
background: color-mix(in srgb, var(--primary-light) 22%, transparent);
border-color: color-mix(in srgb, var(--primary-light) 55%, transparent);
color: #fff;
}
[data-theme="dark"] .ms-btn.ms-exit:hover {
background: color-mix(in srgb, #ef4444 22%, transparent);
border-color: color-mix(in srgb, #ef4444 55%, transparent);
color: #fff;
}
[data-theme="dark"] .ms-count {
color: #fff;
background: linear-gradient(135deg,
color-mix(in srgb, var(--primary) 48%, transparent) 0%,
color-mix(in srgb, var(--primary-light) 52%, transparent) 100%);
box-shadow:
inset 0 0 0 1.2px color-mix(in srgb, #ffffff 28%, transparent),
0 2px 10px color-mix(in srgb, var(--primary) 35%, transparent);
}
[data-theme="dark"] .ms-divider {
background: var(--border-light);
}
/* 2) 顶栏 + 模型选择器（整个下拉框 + 搜索框内部） */
[data-theme="dark"] .top-bar {
background: var(--bg);
border-bottom: 1px solid var(--border-light);
}
[data-theme="dark"] .custom-select-trigger {
background: var(--bg-card);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .custom-select-trigger:hover {
border-color: var(--primary);
background: var(--bg-hover);
}
[data-theme="dark"] .custom-select.open .custom-select-trigger {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--ring);
background: var(--bg-hover);
}
[data-theme="dark"] .custom-select-arrow { color: var(--text-muted); }
[data-theme="dark"] .custom-select-dropdown {
background: var(--bg-card);
border-color: var(--border);
box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 14px 40px rgba(99,102,241,0.14);
}
[data-theme="dark"] .custom-optgroup-label {
background: var(--bg-card);
color: var(--text-muted);
border-bottom-color: var(--border-light);
}
[data-theme="dark"] .custom-option:hover { background: var(--bg-hover); color: var(--text); }
[data-theme="dark"] .custom-option.selected {
background: rgba(123,140,248,0.14);
color: #c7d2fe;
}
[data-theme="dark"] .custom-option.is-focused {
background: rgba(123,140,248,0.22);
outline-color: rgba(123,140,248,0.55);
}
[data-theme="dark"] .custom-option-name { color: var(--text); }
[data-theme="dark"] .custom-option.selected .custom-option-name { color: #e0e7ff; }
[data-theme="dark"] .custom-option-desc { color: var(--text-secondary); opacity: 0.9; }
[data-theme="dark"] .model-info { color: var(--text-secondary); }
/* 顶栏模型下拉框内搜索框（model-search-wrap/model-search-box） */
[data-theme="dark"] .model-search-box {
background: var(--bg-input);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .model-search-box svg { color: var(--text-secondary); }
[data-theme="dark"] .model-search-box input {
color: #fff;
}
[data-theme="dark"] .model-search-box input::placeholder { color: var(--text-muted); }
[data-theme="dark"] .model-search-clear {
background: transparent;
color: var(--text-muted);
}
[data-theme="dark"] .model-search-clear:hover {
color: #fff;
background: rgba(239,68,68,0.18);
}
[data-theme="dark"] .model-search-hint { color: var(--text-muted); }
[data-theme="dark"] .model-search-hint kbd {
background: var(--bg-hover);
border-color: var(--border);
color: var(--text-secondary);
}
[data-theme="dark"] .cs-empty {
background: transparent;
}
[data-theme="dark"] .cs-empty-icon { color: var(--text-muted); }
[data-theme="dark"] .cs-empty-text { color: var(--text-secondary); }
[data-theme="dark"] .cs-empty-sub { color: var(--text-muted); }
[data-theme="dark"] .cs-empty-sub kbd {
background: var(--bg-hover);
border-color: var(--border);
color: var(--text-secondary);
}
/* 3) 对话气泡 / 头像 / 思考块 */
[data-theme="dark"] .message.user .message-bubble {
background: var(--bg-message-user);
color: #fff;
}
[data-theme="dark"] .message.assistant .message-bubble {
background: var(--bg-card);
color: var(--text);
border: 1px solid var(--border);
}
[data-theme="dark"] .avatar {
background: var(--bg-card);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .message-footer-meta { color: var(--text-muted); }
[data-theme="dark"] .message-footer-actions .action-btn {
background: transparent;
border-color: var(--border-light);
color: var(--text-muted);
}
[data-theme="dark"] .message-footer-actions .action-btn:hover {
background: var(--bg-hover);
border-color: var(--border);
color: var(--text-secondary);
}
[data-theme="dark"] .message-footer-actions .action-btn.delete-btn-footer:hover {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.45);
color: #fecaca;
}
[data-theme="dark"] .message-footer-actions .action-btn.continue-btn {
background: rgba(79, 124, 255, 0.18);
color: #7ba0ff;
border-color: rgba(79, 124, 255, 0.45);
}
[data-theme="dark"] .message-footer-actions .action-btn.continue-btn:hover {
background: rgba(79, 124, 255, 0.30);
border-color: rgba(79, 124, 255, 0.65);
color: #a3bcff;
}
/* AI 思考块：深蓝紫毛玻璃底 */
[data-theme="dark"] .reasoning-block {
background: rgba(99, 102, 241, 0.08);
border-color: rgba(123, 140, 248, 0.22);
color: var(--text-secondary);
}
[data-theme="dark"] .reasoning-header { color: var(--text-secondary); }
[data-theme="dark"] .reasoning-header:hover {
background: rgba(123, 140, 248, 0.10);
color: var(--text);
}
[data-theme="dark"] .thinking-indicator {
background: linear-gradient(90deg, var(--primary-light), var(--primary));
}
[data-theme="dark"] .reasoning-content::-webkit-scrollbar-thumb {
background: var(--border-medium);
}
/* Markdown/代码块/引用 夜间专用 */
[data-theme="dark"] .message-body pre {
background: #0d1117;
color: #c9d1d9;
border: 1px solid var(--border-medium);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
[data-theme="dark"] .message-body code {
color: #e9d5ff;
border: 1px solid var(--border-light);
}
[data-theme="dark"] .message-body blockquote {
background: rgba(123, 140, 248, 0.10);
border-left-color: var(--primary-light);
color: var(--text-secondary);
}
[data-theme="dark"] .message-body th {
background: var(--bg-hover);
border-color: var(--border-light);
color: var(--text);
}
[data-theme="dark"] .message-body table,
[data-theme="dark"] .message-body td {
border-color: var(--border-light);
color: var(--text-secondary);
}
[data-theme="dark"] .message-body hr {
border-color: var(--border-light);
}
/* 4) 欢迎屏 */
[data-theme="dark"] .welcome-logo-subtitle {
color: var(--text-muted);
}
[data-theme="dark"] .welcome-title {
color: var(--text);
text-shadow: none; /* 夜间不加粗阴影，避免发黑糊 */
}
[data-theme="dark"] .welcome-suggestion {
background: var(--bg-card);
border-color: var(--border-light);
color: var(--text-secondary);
}
[data-theme="dark"] .welcome-suggestion:hover {
border-color: rgba(123,140,248,0.45);
background: rgba(123,140,248,0.12);
color: var(--text);
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2);
}
[data-theme="dark"] .welcome-suggestion-icon { color: var(--primary-light); }
[data-theme="dark"] .chat-disclaimer { color: var(--text-muted); }
/* 5) 输入区 + 附件展示 + 发送按钮 */
[data-theme="dark"] .input-box {
background: var(--bg-input);
border-color: var(--border);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
[data-theme="dark"] .input-box:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--ring), inset 0 1px 0 rgba(255,255,255,0.02);
background: var(--bg-card);
}
[data-theme="dark"] #userInput { color: #fff; }
[data-theme="dark"] #userInput::placeholder { color: var(--text-muted); }
[data-theme="dark"] .attachment-item {
background: var(--bg-hover);
border-color: var(--border-light);
color: var(--text-secondary);
}
[data-theme="dark"] .attachment-name { color: var(--text); }
[data-theme="dark"] .attachment-meta { color: var(--text-muted); }
[data-theme="dark"] .attachment-remove {
background: rgba(0,0,0,0.35);
color: #fecaca;
}
[data-theme="dark"] .attachment-remove:hover { background: rgba(239,68,68,0.3); color: #fff; }
[data-theme="dark"] .send-btn {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
box-shadow: 0 2px 6px rgba(99,102,241,0.32);
}
[data-theme="dark"] .send-btn:hover:not(:disabled) {
box-shadow: 0 4px 14px rgba(99,102,241,0.45);
filter: brightness(1.06);
}
[data-theme="dark"] .send-btn:disabled {
background: #2a2a3a;
color: var(--text-muted);
box-shadow: none;
}
/* 6) 按钮通用（主按钮/次按钮/文字按钮）夜间专用 */
[data-theme="dark"] .btn-primary {
color: #fff;
box-shadow: 0 2px 8px rgba(99,102,241,0.32);
}
[data-theme="dark"] .btn-primary:hover {
box-shadow: 0 5px 16px rgba(99,102,241,0.48);
filter: brightness(1.05);
}
[data-theme="dark"] .btn-secondary {
background: var(--bg-card);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .btn-secondary:hover {
background: var(--bg-hover);
border-color: var(--primary);
color: var(--text);
}
[data-theme="dark"] .btn-text { color: var(--primary-light); }
[data-theme="dark"] .btn-text:hover { background: rgba(123,140,248,0.14); }
/* 7) 滚动条：夜间蓝紫深色主题专用（全页面 + 侧边栏 + 下拉框） */
[data-theme="dark"] ::-webkit-scrollbar,
[data-theme="dark"] *::-webkit-scrollbar { width: 9px; height: 9px; }
[data-theme="dark"] ::-webkit-scrollbar-track,
[data-theme="dark"] *::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb,
[data-theme="dark"] *::-webkit-scrollbar-thumb {
background: #363648;
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
background: #484860;
background-clip: padding-box;
border: 2px solid transparent;
}
[data-theme="dark"] ::-webkit-scrollbar-corner { background: transparent; }
/* 8) 设置/关于/上下文选择 等模态框 */
[data-theme="dark"] .modal-overlay {
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
[data-theme="dark"] .modal {
background: var(--modal-bg, var(--bg-card));
border: 1px solid var(--border-light);
color: var(--text);
box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 2px 8px rgba(99,102,241,0.15);
}
[data-theme="dark"] .modal-header {
border-bottom-color: var(--border-light);
color: var(--text);
}
[data-theme="dark"] .modal-close {
background: transparent;
color: var(--text-secondary);
}
[data-theme="dark"] .modal-close:hover {
background: var(--bg-hover);
color: var(--text);
}
[data-theme="dark"] .modal-footer {
border-top-color: var(--border-light);
}
[data-theme="dark"] .settings-section-title { color: var(--text); }
[data-theme="dark"] .settings-row label { color: var(--text-secondary); }
[data-theme="dark"] .segmented-control {
background: var(--bg-input);
border: 1px solid var(--border-light);
}
[data-theme="dark"] .seg-btn { color: var(--text-secondary); }
[data-theme="dark"] .seg-btn.active {
background: var(--bg-card);
color: var(--primary-light);
box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
[data-theme="dark"] .timezone-select {
background: var(--bg-input);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .about-text { color: var(--text-secondary); }
[data-theme="dark"] .context-item {
background: var(--bg-card);
border-color: var(--border-light);
color: var(--text-secondary);
}
[data-theme="dark"] .context-item:hover {
background: var(--bg-hover);
border-color: var(--primary);
}
[data-theme="dark"] .context-item.selected {
background: rgba(123,140,248,0.16);
border-color: rgba(123,140,248,0.45);
color: var(--text);
}
[data-theme="dark"] .context-empty { color: var(--text-muted); }
/* 9) Logo 预览模态框 + 工具栏 */
[data-theme="dark"] .logo-preview-stage {
background: var(--modal-bg);
border: 1px solid var(--border-light);
box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 2px 8px rgba(99,102,241,0.2);
}
[data-theme="dark"] .logo-preview-toolbar {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
color: #fff;
}
/* 10) 侧边栏搜索框（搜索对话名称的那个） */
[data-theme="dark"] .sidebar-search {
background: var(--bg-input);
border-color: var(--border-light);
color: var(--text-secondary);
}
[data-theme="dark"] .sidebar-search:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--ring);
}
[data-theme="dark"] .sidebar-search svg { color: var(--text-muted); }
[data-theme="dark"] .sidebar-search input { color: #fff; }
[data-theme="dark"] .sidebar-search input::placeholder { color: var(--text-muted); }
[data-theme="dark"] .sidebar-search-clear {
color: var(--text-muted);
background: transparent;
}
[data-theme="dark"] .sidebar-search-clear:hover {
color: #fff;
background: rgba(239,68,68,0.2);
}
[data-theme="dark"] .sidebar-search-hint { color: var(--text-muted); }
[data-theme="dark"] .sidebar-search-hint kbd {
background: var(--bg-hover);
border-color: var(--border);
color: var(--text-secondary);
}
[data-theme="dark"] .sidebar-search-empty { color: var(--text-secondary); }
[data-theme="dark"] .sidebar-search-empty-icon { color: var(--text-muted); }
[data-theme="dark"] .sidebar-search-empty kbd {
background: var(--bg-hover);
border-color: var(--border);
color: var(--text-secondary);
}
[data-theme="dark"] .chat-item-result {
border-left-color: var(--primary-light);
}
/* 11) 置顶/置底 快捷悬浮按钮 */
[data-theme="dark"] .scroll-btn {
background: rgba(28, 28, 40, 0.85);
border-color: var(--border);
color: var(--text-secondary);
box-shadow: 0 4px 16px rgba(0,0,0,0.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
[data-theme="dark"] .scroll-btn:hover {
background: var(--bg-card);
border-color: var(--primary);
color: var(--primary-light);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}
/* 12) 拖放遮罩（夜间更明显的蓝紫描边提示） */
[data-theme="dark"] .drop-overlay {
background: rgba(15, 15, 26, 0.6);
border-color: rgba(123, 140, 248, 0.7);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
[data-theme="dark"] .drop-overlay-inner {
background: rgba(28, 28, 40, 0.92);
border-color: var(--border-light);
color: var(--text);
box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 2px 6px rgba(99,102,241,0.2);
}
[data-theme="dark"] .drop-overlay-icon { color: var(--primary-light); }
[data-theme="dark"] .drop-overlay-sub { color: var(--text-secondary); }
.message-body pre code {
background: none;
color: inherit;
padding: 0;
font-size: inherit;
}
.message-body blockquote {
border-left: 3px solid var(--primary);
padding-left: 16px;
margin: 16px 0;
color: var(--text-secondary);
background: color-mix(in srgb, var(--primary) 5%, transparent);
padding: 12px 16px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.message-body a {
color: var(--primary);
text-decoration: none;
transition: color 0.15s;
}
.message-body a:hover {
text-decoration: underline;
}
.message-body table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
font-size: 0.875rem;
}
.message-body th, .message-body td {
border: 1px solid var(--border);
padding: 10px 14px;
text-align: left;
}
.message-body th {
background: var(--bg-hover);
font-weight: 600;
}
.message-body img {
max-width: 100%;
border-radius: var(--radius);
margin: 12px 0;
}
/* ===== 文件输出 ===== */
.file-outputs {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.file-output {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-hover);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.15s;
max-width: 320px;
}
.file-output:hover {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(79, 124, 255, 0.15);
}
.file-output-icon {
font-size: 1.125rem;
flex-shrink: 0;
}
.file-output-info {
flex: 1;
min-width: 0;
}
.file-output-name {
font-size: 0.8125rem;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-output-size {
font-size: 0.6875rem;
color: var(--text-muted);
}
.file-output-download {
color: var(--primary);
flex-shrink: 0;
}
.file-output-copy {
color: var(--text-muted);
flex-shrink: 0;
transition: color 0.15s, transform 0.1s;
}
.file-output-copy:hover {
color: var(--primary);
}
.file-output-copy:active {
transform: scale(0.9);
}
/* ===== 附件 ===== */
.attachment-list {
display: flex;
flex-direction: column;
gap: 8px;
margin: 10px 0;
}
.attachment-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.875rem;
color: var(--text);
}
.attachment-icon { font-size: 1.125rem; flex-shrink: 0; }
.file-type-icon {
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
vertical-align: middle;
display: inline-block;
}
.file-output-icon .file-type-icon { width: 1.25rem; height: 1.25rem; }
.edit-msg-attachment-chip .file-type-icon { width: 0.9375rem; height: 0.9375rem; }
.attachment-info { flex: 1; min-width: 0; }
.attachment-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-meta { font-size: 0.75rem; color: var(--text-muted); }
.attachment-remove {
padding: 4px;
background: none;
border: none;
border-radius: 4px;
cursor: pointer;
color: var(--text-muted);
flex-shrink: 0;
transition: all 0.15s;
}
.attachment-remove:hover {
background: var(--danger);
color: white;
}
.attachment-image { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.attachment-image-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.attachment-image-item img { max-width: 150px; max-height: 150px; display: block; }
/* ===== 输入区 ===== */
.input-area {
padding: 16px 24px 20px;
background: var(--bg);
flex-shrink: 0;
}
.input-container {
max-width: 800px;
margin: 0 auto;
}
.attachments-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.attachments-preview:empty { display: none; }
.input-box {
display: flex;
align-items: flex-end;
gap: 8px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 10px;
box-shadow: var(--shadow);
transition: border-color 0.15s, box-shadow 0.15s;
}
.input-box:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.1), var(--shadow);
}
.attach-btn {
padding: 10px;
background: none;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.15s;
}
.attach-btn:hover {
background: var(--bg-hover);
color: var(--primary);
}
#userInput {
flex: 1;
border: none;
background: transparent;
padding: 8px 4px;
font-size: 0.9375rem;
font-family: inherit;
color: var(--text);
resize: none;
line-height: 1.5;
max-height: 200px;
min-height: 24px;
transition: height 0.2s;
}
#userInput:focus { outline: none; }
#userInput::placeholder { color: var(--text-muted); }
.send-btn {
padding: 10px 14px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.15s;
}
.send-btn:hover:not(:disabled) {
box-shadow: 0 4px 12px rgba(79, 124, 255, 0.3);
transform: translateY(-1px);
}
.send-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* 发送按钮加载动画 */
.send-btn.loading {
position: relative;
color: transparent;
pointer-events: none;
}
/* 终止按钮 */
.stop-btn {
padding: 10px 14px;
background: #ef4444;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.15s;
}
.stop-btn:hover {
background: #dc2626;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
transform: translateY(-1px);
}
.send-btn.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
.input-hint {
text-align: center;
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 10px;
}
.ai-disclaimer {
text-align: center;
font-size: 0.65625rem;
line-height: 1.4;
color: var(--text-muted);
opacity: 0.75;
margin: 6px 0 0;
padding: 0;
}
/* ===== 拖拽遮罩 ===== */
.drop-overlay {
position: fixed;
inset: 0;
background: rgba(79, 124, 255, 0.95);
backdrop-filter: blur(4px);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
color: white;
flex-direction: column;
gap: 16px;
}
.drop-overlay.active { display: flex; }
.drop-content { text-align: center; }
.drop-content svg { margin-bottom: 12px; animation: bounce 0.8s infinite; }
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.drop-content p { font-size: 1.125rem; font-weight: 600; }
/* ===== 思考指示器 ===== */
.thinking-indicator {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: linear-gradient(135deg, rgba(79, 124, 255, 0.08), rgba(123, 92, 255, 0.08));
border: 1px solid rgba(79, 124, 255, 0.2);
border-radius: var(--radius);
font-size: 0.8125rem;
font-weight: 500;
color: var(--primary);
animation: thinking-pulse 1.8s ease-in-out infinite;
}
@keyframes thinking-pulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.06); }
}
.thinking-dots { display: inline-flex; gap: 4px; }
.thinking-dots span {
width: 6px; height: 6px; background: var(--primary);
border-radius: 50%; animation: thinking 1.4s infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinking {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-6px); opacity: 1; }
}
/* ===== 设置弹窗 ===== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.modal {
background: var(--bg-card);
border-radius: var(--radius-lg);
width: 100%;
max-width: 680px; /* 设置框整体加宽，容纳更多底部链接 */
max-height: calc(100dvh - 32px);
overflow: hidden; /* 设置面板：整屏塞下、无滚轮（仅内部特殊模态可单独重写 overflow） */
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg);
}
/* 仅设置弹窗再锁一层最大高度（避免 >720p 时留白太大） */
#settingsModal .modal {
max-height: min(780px, calc(100dvh - 32px));
}
/* 其他需要滚动的弹窗（上下文、更新日志、logo 预览等）保留原 scroll 行为（单独覆盖） */
.modal-context, .modal-changelog {
overflow-y: auto;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px 12px;
border-bottom: 1px solid var(--border-light);
flex: 0 0 auto;
}
.modal-header h2 { font-size: 1rem; font-weight: 600; line-height: 1.2; }
.modal-close {
padding: 5px;
background: none;
border: none;
border-radius: 6px;
cursor: pointer;
color: var(--text-secondary);
}
.modal-close:hover { background: var(--bg-hover); }
.modal-body {
padding: 16px 18px;
overflow-y: auto; /* 仅当真的真的溢出才滚动；一屏情况下不会出现滚动条 */
flex: 1 1 auto;
min-height: 0;
}
.modal-footer {
padding: 10px 18px;
border-top: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex: 0 0 auto;
}
.btn-primary {
padding: 10px 20px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
border: none;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.btn-primary:hover {
box-shadow: 0 4px 12px rgba(79, 124, 255, 0.3);
transform: translateY(-1px);
}
.btn-secondary {
padding: 10px 20px;
background: var(--bg-hover);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.btn-secondary:hover { background: var(--bg-card); }
.btn-text {
background: none;
border: none;
color: var(--primary);
font-size: 0.8125rem;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.15s;
}
.btn-text:hover { background: rgba(79, 124, 255, 0.1); }
/* 设置面板区块 */
.settings-section {
margin-bottom: 14px;
}
.settings-section:last-child { margin-bottom: 0; }
.settings-section-title {
font-size: 0.8125rem;
font-weight: 600;
margin-bottom: 8px;
color: var(--text);
line-height: 1.2;
}
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.settings-row + .settings-row {
margin-top: 8px;
}
/* 整行块：label 在上，内容（配色选择器）占满下面 */
.settings-row-block {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 6px;
}
.settings-row-block > label {
align-self: flex-start;
}
.settings-row label {
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.2;
}
/* Segmented control */
.segmented-control {
display: flex;
flex-wrap: nowrap;
gap: 2px;
background: var(--bg-hover);
border-radius: var(--radius-sm);
padding: 2px;
max-width: 100%;
overflow-x: auto; /* 按钮多时横向滚动，不会挤压变形 */
scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
.segmented-control::-webkit-scrollbar { display: none; }
/* 可换行分段：主题选择器专用 —— 宽度占满一整行、按钮按内容自适应并自然折为 2 行 */
.segmented-control.segmented-wrap {
width: 100%;
max-width: 100%;
flex-wrap: wrap;
overflow-x: visible;
gap: 5px 4px; /* 行距稍大，列距紧凑 */
padding: 4px;
}
.seg-btn {
padding: 6px 12px;
background: none;
border: none;
border-radius: 6px;
font-size: 0.78125rem;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s;
font-weight: 500;
flex: 1 1 72px; /* 最小基础宽 72px，剩余空间均分；一行刚好放 6~7 个 → 2 行塞下 11 个 */
white-space: nowrap;
line-height: 1.2;
min-width: 0;
text-align: center;
}
.seg-divider {
width: 1px;
align-self: stretch;
margin: 3px 2px;
background: color-mix(in srgb, var(--text-muted) 25%, transparent);
border-radius: 2px;
}
.segmented-control.segmented-wrap .seg-divider {
/* 主题选择器内：分隔线变成小圆点（占 6px 列宽），避免破坏按钮对齐 */
width: 4px;
height: 4px;
border-radius: 50%;
margin: auto 3px;
background: color-mix(in srgb, var(--text-muted) 55%, transparent);
align-self: center;
flex: 0 0 auto;
}
.seg-btn.active {
background: var(--bg-card);
color: var(--primary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
.timezone-select {
padding: 5.5px 10px;
background: var(--bg-hover);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.78125rem;
color: var(--text);
cursor: pointer;
line-height: 1.2;
max-width: 58%;
}
.timezone-select:focus { outline: none; border-color: var(--primary); }
.about-row {
display: block;
}
.about-text {
font-size: 0.78125rem;
color: var(--text-muted);
line-height: 1.5;
margin: 0;
white-space: pre-line;
}
/* 账号按钮（导航栏底部，设置按钮上方） */
.account-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.875rem;
color: var(--text-secondary);
transition: all 0.15s;
position: relative;
z-index: 20;
pointer-events: auto;
opacity: 1;
}
.account-btn:hover {
background: var(--bg-hover);
color: var(--text);
}
.account-btn:active {
transform: scale(0.98);
}
/* 折叠态：与设置按钮保持一致的透明底图标样式，位置与展开态完全一致 */
.sidebar.collapsed .account-btn {
background: transparent;
justify-content: flex-start;
flex-shrink: 0;
width: max-content;
padding: 10px 12px;
padding-right: 0;
margin-bottom: 2px;
}
.sidebar.collapsed .account-btn svg {
flex-shrink: 0;
width: 18px;
height: 18px;
}
.sidebar.collapsed .account-btn:hover {
background: var(--bg-hover);
color: var(--text);
}
[data-theme="dark"] .account-btn {
background: transparent;
color: var(--text-secondary);
}
[data-theme="dark"] .account-btn:hover {
background: rgba(123, 140, 248, 0.14);
color: var(--text);
}
[data-theme="dark"] .sidebar.collapsed .account-btn {
background: transparent;
color: #fff;
}
[data-theme="dark"] .sidebar.collapsed .account-btn:hover {
background: rgba(123, 140, 248, 0.14);
color: var(--text);
}
/* ===== 登录/注册弹窗 ===== */
.modal-auth {
max-width: 380px;
}
.auth-body {
padding: 20px 28px 24px;
display: flex;
flex-direction: column;
align-items: center;
}
.auth-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 14px;
}
.auth-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.auth-field label {
font-size: 0.78125rem;
color: var(--text-secondary);
font-weight: 500;
}
/* label 行内附加提示（如"暂不支持手机号注册"） */
.auth-label-row {
display: flex;
align-items: baseline;
gap: 4px;
}
.auth-field-hint {
font-size: 0.78125rem;
color: var(--text-secondary);
font-weight: 500;
}
.auth-field input {
padding: 9px 12px;
border: 1px solid var(--border, #ddd);
border-radius: 8px;
font-size: 0.875rem;
background: var(--bg-input, #fff);
color: var(--text-primary, #333);
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
opacity: 1;
}
.auth-field input:focus {
border-color: var(--primary, #4f7cff);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #4f7cff) 15%, transparent);
}
.auth-error {
font-size: 0.78125rem;
color: #e53e3e;
padding: 6px 10px;
border-radius: 6px;
background: rgba(229, 62, 62, 0.08);
text-align: center;
display: none;
}
.auth-error.show {
display: block;
animation: auth-shake 0.3s ease;
}
/* 验证码发送按钮 */
.code-send-wrap {
display: flex;
gap: 8px;
align-items: stretch;
}
.code-send-wrap input {
flex: 1;
min-width: 0;
}
.code-send-btn {
flex-shrink: 0;
padding: 0 14px;
min-width: 110px;
font-size: 0.8125rem;
font-weight: 500;
border: 1px solid var(--primary, #4f7cff);
border-radius: 8px;
background: transparent;
color: var(--primary, #4f7cff);
cursor: pointer;
white-space: nowrap;
transition: all 0.15s;
opacity: 1;
}
.code-send-btn:hover:not(.disabled) {
background: var(--primary, #4f7cff);
color: #fff;
}
.code-send-btn.disabled {
border-color: var(--border, #ddd);
color: var(--text-muted, #999);
background: transparent;
cursor: not-allowed;
}
/* 验证码输入框 */
#authCodeInput,
#bindCodeInput {
letter-spacing: 4px;
font-size: 1rem;
text-align: left;
font-family: var(--font-mono);
}
[data-theme="dark"] .code-send-btn {
border-color: var(--primary, #4f7cff);
color: var(--primary, #6a86ff);
}
[data-theme="dark"] .code-send-btn:hover:not(.disabled) {
background: var(--primary, #4f7cff);
color: #fff;
}
[data-theme="dark"] .code-send-btn.disabled {
border-color: var(--border, #3a3a4c);
color: var(--text-muted, #7d7d95);
}
@keyframes auth-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.auth-submit {
width: 100%;
padding: 10px;
font-size: 0.875rem;
border: none;
border-radius: 8px;
background: var(--primary, #4f7cff);
color: #fff;
cursor: pointer;
transition: all 0.15s;
margin-top: 4px;
opacity: 1;
}
.auth-submit:hover {
filter: brightness(1.08);
box-shadow: 0 2px 10px color-mix(in srgb, var(--primary, #4f7cff) 40%, transparent);
}
.auth-submit:active {
transform: scale(0.98);
}
.auth-toggle {
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
font-size: 0.8125rem;
color: var(--text-muted);
margin-top: 6px;
}
.auth-toggle-btn {
background: none;
border: none;
color: var(--primary, #4f7cff);
font-size: 0.8125rem;
cursor: pointer;
padding: 0;
opacity: 1;
}
.auth-toggle-btn:hover {
text-decoration: underline;
}
.auth-forgot-btn {
background: none;
border: none;
color: var(--primary, #4f7cff);
font-size: 0.8125rem;
cursor: pointer;
padding: 0;
margin-left: auto;
}
.auth-forgot-btn:hover {
text-decoration: underline;
}
.auth-back-row {
display: flex;
justify-content: flex-start;
margin-bottom: 4px;
}
.auth-back-btn {
background: none;
border: none;
color: var(--text-muted);
font-size: 0.8125rem;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
}
.auth-back-btn:hover {
color: var(--primary, #4f7cff);
}
.modal-change-pwd .contact-hint {
color: var(--text-muted);
font-size: 0.8125rem;
margin-bottom: 8px;
}
/* 暗色主题适配 */
[data-theme="dark"] .auth-field input {
background: var(--bg-input, rgba(255,255,255,0.06));
border-color: rgba(255,255,255,0.12);
color: #fff;
}
[data-theme="dark"] .auth-field input:focus {
border-color: var(--primary, #7b8cf8);
}
/* 密码输入框包装：input + 眼睛切换按钮 */
.auth-input-wrap {
position: relative;
}
.auth-input-wrap input {
width: 100%;
padding-right: 36px !important;
}
.auth-pwd-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--text-muted, #999);
padding: 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
}
.auth-pwd-toggle:hover {
color: var(--text-primary, #333);
background: var(--bg-hover, rgba(0,0,0,0.05));
}
/* 记住我 */
.auth-remember {
display: flex;
align-items: center;
gap: 20px;
font-size: 0.8125rem;
color: var(--text-muted);
margin-top: -4px;
}
/* 隐藏 Edge/IE 自带密码 reveal 按钮（避免与自定义眼睛图标重复） */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none;
}
.auth-checkbox {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
}
.auth-checkbox input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: var(--primary, #4f7cff);
cursor: pointer;
}
/* 注册模式隐藏记住我 */
.auth-form.register-mode .auth-remember {
display: none;
}
/* 用户头像（首字母彩色圆） */
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 600;
color: #fff;
flex-shrink: 0;
text-transform: uppercase;
overflow: hidden;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
/* 用户下拉菜单 */
.user-dropdown {
position: fixed;
bottom: 48px;
left: 12px;
width: 240px;
background: var(--bg-card, #fff);
border: 1px solid var(--border, #ddd);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.14);
z-index: 1000;
overflow: hidden;
animation: user-dropdown-in 0.15s ease;
}
@keyframes user-dropdown-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.user-dropdown-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: color-mix(in srgb, var(--primary, #4f7cff) 6%, var(--bg-card, #fff));
}
.user-dropdown-info {
flex: 1;
min-width: 0;
}
.user-dropdown-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary, #333);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-dropdown-email {
font-size: 0.75rem;
color: var(--text-muted, #999);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-dropdown-badges {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.user-dropdown-badge {
display: inline-block;
font-size: 0.6875rem;
line-height: 1;
padding: 3px 6px;
border-radius: 4px;
border: 1px solid transparent;
white-space: nowrap;
}
.user-dropdown-badge.admin {
background: rgba(79, 124, 255, 0.12);
color: #4f7cff;
border-color: rgba(79, 124, 255, 0.25);
}
.user-dropdown-badge.partner {
background: rgba(155, 89, 182, 0.12);
color: #9b59b6;
border-color: rgba(155, 89, 182, 0.25);
}
.user-dropdown-badge.moderation {
background: rgba(46, 139, 87, 0.12);
color: #2e8b57;
border-color: rgba(46, 139, 87, 0.25);
}
.user-dropdown-balance {
font-size: 0.875rem;
font-weight: 700;
color: var(--primary, #4f7cff);
white-space: nowrap;
padding: 8px 16px;
border-bottom: 1px solid var(--border, #e0e0e8);
background: color-mix(in srgb, var(--primary, #4f7cff) 6%, var(--bg-card, #fff));
}
.user-dropdown-menu {
padding: 4px;
}
.user-dropdown-item {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: none;
background: none;
color: var(--text-primary, #333);
font-size: 0.84375rem;
cursor: pointer;
border-radius: 8px;
transition: background 0.12s;
opacity: 1;
}
.user-dropdown-item:hover {
background: var(--bg-hover, rgba(0,0,0,0.05));
}
.user-dropdown-item svg {
flex-shrink: 0;
color: var(--text-muted, #999);
}
.user-dropdown-logout {
color: #e53e3e;
}
.user-dropdown-logout svg {
color: #e53e3e;
}
.user-dropdown-divider {
height: 1px;
background: var(--border, #eee);
margin: 4px 8px;
}
/* 暗色主题 */
[data-theme="dark"] .user-dropdown {
background: var(--bg-card, #1e1e1e);
border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .user-dropdown-header {
background: rgba(123, 140, 248, 0.10);
}
[data-theme="dark"] .user-dropdown-item {
color: #e0e0e0;
}
[data-theme="dark"] .user-dropdown-item:hover {
background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .user-dropdown-divider {
background: rgba(255,255,255,0.08);
}
/* 折叠态：头像替代人物图标 */
.sidebar.collapsed .account-btn.logged-in .user-avatar {
width: 18px;
height: 18px;
font-size: 0.625rem;
}
/* ===== 充值弹窗 ===== */
.modal-recharge {
max-width: 440px;
width: 94vw;
}
.recharge-body {
padding: 20px 24px 24px;
}
/* YAN 币图标（使用实际图片，按主题切换颜色） */
.yan-coin-icon,
.yan-coin-mini {
display: inline-block;
vertical-align: middle;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
/* 浅色主题用灰色币 */
background-image: url('../图片/YAN币(灰).png');
}
body.dark-theme .yan-coin-icon,
body.dark-theme .yan-coin-mini,
body.amoled-theme .yan-coin-icon,
body.amoled-theme .yan-coin-mini,
body.deepspace-theme .yan-coin-icon,
body.deepspace-theme .yan-coin-mini,
body.redsunset-theme .yan-coin-icon,
body.redsunset-theme .yan-coin-mini {
/* 暗色主题用浅灰色币 */
background-image: url('../图片/YAN币(浅灰).png');
}
/* 渐变背景上用白币 */
.recharge-balance-card .yan-coin-icon {
background-image: url('../图片/YAN币(白).png');
}
.yan-coin-icon {
width: 22px;
height: 22px;
margin-right: 6px;
flex-shrink: 0;
}
.yan-coin-mini {
width: 16px;
height: 16px;
margin-left: 3px;
}
/* 余额卡片 */
.recharge-balance-card {
background:
radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%),
linear-gradient(135deg, var(--primary, #4f7cff), color-mix(in srgb, var(--primary, #4f7cff) 62%, #9333ea));
border-radius: 14px;
padding: 18px 20px;
color: #fff;
margin-bottom: 20px;
box-shadow: 0 8px 20px color-mix(in srgb, var(--primary, #4f7cff) 30%, transparent);
position: relative;
overflow: hidden;
}
.recharge-balance-card::after {
content: "";
position: absolute;
width: 220px; height: 220px;
right: -60px; bottom: -110px;
background: radial-gradient(closest-side, rgba(255,255,255,0.18), rgba(255,255,255,0));
pointer-events: none;
}
.recharge-balance-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.recharge-balance-label {
font-size: 0.8125rem;
opacity: 0.9;
letter-spacing: 0.2px;
}
.recharge-balance-badge {
font-size: 0.6875rem;
padding: 3px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.22);
backdrop-filter: blur(4px);
}
.recharge-balance-amount {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
letter-spacing: 0.5px;
}
.recharge-balance-hint {
font-size: 0.71875rem;
opacity: 0.8;
margin-top: 6px;
}
/* 区块 */
.recharge-section {
margin-bottom: 18px;
}
.recharge-section-title {
font-size: 0.8125rem;
font-weight: 700;
color: var(--text-secondary);
margin-bottom: 10px;
letter-spacing: 0.2px;
}
/* 套餐网格 */
.recharge-packages {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.recharge-pkg {
position: relative;
border: 2px solid var(--border, #e0e0e0);
border-radius: 12px;
padding: 16px 8px 14px;
background: var(--bg-card, #fff);
cursor: pointer;
transition: all 0.18s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
opacity: 1;
}
.recharge-pkg:hover {
border-color: var(--primary, #4f7cff);
transform: translateY(-2px);
background: color-mix(in srgb, var(--primary, #4f7cff) 5%, var(--bg-card, #fff));
box-shadow: 0 6px 14px color-mix(in srgb, var(--primary, #4f7cff) 18%, transparent);
}
.recharge-pkg.selected {
border-color: var(--primary, #4f7cff);
background: color-mix(in srgb, var(--primary, #4f7cff) 10%, var(--bg-card, #fff));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #4f7cff) 20%, transparent),
0 6px 14px color-mix(in srgb, var(--primary, #4f7cff) 18%, transparent);
transform: translateY(-1px);
}
.pkg-coin {
font-size: 1.1875rem;
font-weight: 800;
color: var(--text-primary, #333);
display: flex;
align-items: center;
}
.pkg-price {
font-size: 0.78125rem;
color: var(--text-muted, #999);
font-weight: 600;
}
.pkg-badge {
position: absolute;
top: -10px;
right: -6px;
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: #fff;
font-size: 0.625rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 10px;
line-height: 1;
box-shadow: 0 2px 6px rgba(238,90,36,0.45);
}
.pkg-badge-hot {
background: linear-gradient(135deg, #fa8c16, #f5222d);
box-shadow: 0 2px 6px rgba(245,34,45,0.45);
}
.pkg-badge-pro {
background: linear-gradient(135deg, #722ed1, #1677ff);
box-shadow: 0 2px 6px rgba(22,119,255,0.45);
}
/* 自定义金额 */
.recharge-custom {
display: flex;
align-items: center;
border: 1.5px solid var(--border, #ddd);
border-radius: 10px;
padding: 0 12px;
background: var(--bg-input, #fff);
transition: all 0.15s;
}
.recharge-custom:focus-within {
border-color: var(--primary, #4f7cff);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #4f7cff) 18%, transparent);
}
.recharge-custom input {
flex: 1;
border: none;
outline: none;
padding: 10px 0;
font-size: 0.875rem;
background: transparent;
color: var(--text-primary, #333);
}
.recharge-custom input::-webkit-inner-spin-button {
opacity: 1;
}
/* 支付方式 */
.recharge-payments {
display: flex;
gap: 12px;
}
.recharge-pay-item {
flex: 1;
cursor: pointer;
}
.recharge-pay-item input[type="radio"] {
display: none;
}
.recharge-pay-content {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
border: 2px solid var(--border, #e0e0e0);
border-radius: 12px;
transition: all 0.18s ease;
font-size: 0.875rem;
color: var(--text-primary, #333);
background: var(--bg-card, #fff);
position: relative;
overflow: hidden;
}
.recharge-pay-content::after {
content: "";
position: absolute;
top: 10px; right: 10px;
width: 18px; height: 18px;
border-radius: 50%;
border: 1.5px solid var(--border, #d0d0d0);
background: transparent;
transition: all 0.18s ease;
}
.recharge-pay-item input:checked + .recharge-pay-content {
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
transform: translateY(-1px);
}
.recharge-pay-item input:checked + .recharge-pay-content::after {
background-image: url("data:image/svg+xml;utf8,");
background-color: #fff;
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: center;
}
.recharge-pay-wechat input:checked + .recharge-pay-content {
border-color: #07c160;
background: linear-gradient(135deg, #e8fbef, #ffffff 60%);
}
.recharge-pay-wechat input:checked + .recharge-pay-content::after {
border-color: #07c160;
background-color: #07c160;
}
.recharge-pay-alipay input:checked + .recharge-pay-content {
border-color: #1677ff;
background: linear-gradient(135deg, #e6f0ff, #ffffff 60%);
}
.recharge-pay-alipay input:checked + .recharge-pay-content::after {
border-color: #1677ff;
background-color: #1677ff;
}
.recharge-pay-icon {
width: 28px;
height: 28px;
object-fit: contain;
flex-shrink: 0;
border-radius: 6px;
}
.recharge-pay-text {
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-start;
line-height: 1.1;
}
.recharge-pay-text > span {
font-weight: 700;
font-size: 0.875rem;
}
.recharge-pay-text small {
font-size: 0.6875rem;
color: var(--text-muted, #999);
font-weight: 500;
}
/* 确认按钮 */
.recharge-confirm {
width: 100%;
padding: 13px;
font-size: 0.9375rem;
font-weight: 700;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, var(--primary, #4f7cff), color-mix(in srgb, var(--primary, #4f7cff) 75%, #9333ea));
color: #fff;
cursor: pointer;
transition: all 0.18s ease;
margin-top: 6px;
letter-spacing: 1px;
box-shadow: 0 6px 16px color-mix(in srgb, var(--primary, #4f7cff) 30%, transparent);
}
.recharge-confirm:hover {
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow: 0 10px 22px color-mix(in srgb, var(--primary, #4f7cff) 38%, transparent);
}
.recharge-confirm:active {
transform: scale(0.99);
}
.recharge-tips {
text-align: center;
font-size: 0.71875rem;
color: var(--text-muted, #999);
margin-top: 12px;
line-height: 1.6;
}
/* 二维码支付步骤 */
.recharge-qr {
padding: 24px 28px;
text-align: center;
}
.recharge-qr-info {
display: flex;
align-items: baseline;
justify-content: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.recharge-qr-amount-label {
font-size: 0.875rem;
color: var(--text-muted, #999);
}
.recharge-qr-amount {
font-size: 2rem;
font-weight: 800;
letter-spacing: 0.5px;
background: linear-gradient(135deg, var(--primary, #4f7cff), color-mix(in srgb, var(--primary, #4f7cff) 65%, #9333ea));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.recharge-qr-method {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.9375rem;
font-weight: 700;
color: var(--text-secondary, #555);
margin-bottom: 16px;
padding: 6px 14px;
border-radius: 999px;
background: var(--bg-hover);
}
.recharge-qr-pay-icon {
width: 22px;
height: 22px;
object-fit: contain;
border-radius: 4px;
}
.recharge-qr-img-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 20px;
padding: 18px;
border-radius: 16px;
background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #4f7cff) 5%, transparent), rgba(0,0,0,0.02));
border: 1px dashed color-mix(in srgb, var(--primary, #4f7cff) 35%, transparent);
}
.recharge-qr-img {
width: 220px;
height: 220px;
object-fit: contain;
border-radius: 12px;
border: 1px solid var(--border, rgba(0,0,0,0.08));
background: #fff;
padding: 8px;
box-sizing: border-box;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.recharge-qr-scan-tip {
font-size: 0.8125rem;
color: var(--text-muted, #999);
}
.recharge-qr-actions {
display: flex;
gap: 12px;
justify-content: center;
}
.recharge-qr-submit {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--border);
}
.recharge-qr-tip {
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 10px;
text-align: center;
}
.recharge-qr-field {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
}
.recharge-qr-field label {
font-size: 0.75rem;
color: var(--text-secondary);
font-weight: 600;
}
.recharge-qr-field input {
padding: 10px 12px;
border: 1.5px solid var(--border);
border-radius: 10px;
background: var(--bg-card, #fff);
color: var(--text);
font-size: 0.875rem;
outline: none;
transition: all 0.15s;
}
.recharge-qr-field input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #4f7cff) 18%, transparent);
}
.recharge-qr-field input[readonly] {
background: var(--bg-hover);
color: var(--text-secondary);
cursor: not-allowed;
}
.recharge-qr-actions .btn {
padding: 11px 24px;
border-radius: 12px;
border: 1.5px solid var(--border, rgba(0,0,0,0.10));
background: var(--bg-card, #fff);
color: var(--text, #333);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
opacity: 1;
transition: all 0.15s;
}
.recharge-qr-actions .btn:hover {
border-color: var(--primary, #4f7cff);
color: var(--primary, #4f7cff);
}
.recharge-qr-actions .btn-primary {
flex: 1;
max-width: 240px;
padding: 11px 24px;
border-radius: 12px;
border: none;
background: linear-gradient(135deg, var(--primary, #4f7cff), color-mix(in srgb, var(--primary, #4f7cff) 75%, #9333ea));
color: #fff;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
transition: all 0.15s;
}
.recharge-qr-actions .btn-primary:hover {
filter: brightness(1.06);
box-shadow: 0 6px 16px rgba(79,124,255,0.35);
}
/* 暗色主题 */
[data-theme="dark"] .recharge-pkg,
[data-theme="amoled"] .recharge-pkg,
[data-theme="deepspace"] .recharge-pkg,
[data-theme="redsunset"] .recharge-pkg {
background: var(--bg-card, #1e1e1e);
border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .recharge-pkg:hover,
[data-theme="amoled"] .recharge-pkg:hover,
[data-theme="deepspace"] .recharge-pkg:hover,
[data-theme="redsunset"] .recharge-pkg:hover {
background: rgba(123, 140, 248, 0.10);
}
[data-theme="dark"] .recharge-custom,
[data-theme="amoled"] .recharge-custom,
[data-theme="deepspace"] .recharge-custom,
[data-theme="redsunset"] .recharge-custom {
background: var(--bg-input, rgba(255,255,255,0.06));
border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .recharge-pay-content,
[data-theme="amoled"] .recharge-pay-content,
[data-theme="deepspace"] .recharge-pay-content,
[data-theme="redsunset"] .recharge-pay-content {
background: var(--bg-card, #1e1e1e);
border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .recharge-pay-wechat input:checked + .recharge-pay-content,
[data-theme="amoled"] .recharge-pay-wechat input:checked + .recharge-pay-content,
[data-theme="deepspace"] .recharge-pay-wechat input:checked + .recharge-pay-content,
[data-theme="redsunset"] .recharge-pay-wechat input:checked + .recharge-pay-content {
background: linear-gradient(135deg, rgba(7,193,96,0.18), rgba(255,255,255,0.02) 60%);
}
[data-theme="dark"] .recharge-pay-alipay input:checked + .recharge-pay-content,
[data-theme="amoled"] .recharge-pay-alipay input:checked + .recharge-pay-content,
[data-theme="deepspace"] .recharge-pay-alipay input:checked + .recharge-pay-content,
[data-theme="redsunset"] .recharge-pay-alipay input:checked + .recharge-pay-content {
background: linear-gradient(135deg, rgba(22,119,255,0.22), rgba(255,255,255,0.02) 60%);
}
[data-theme="dark"] .recharge-qr-img-wrap,
[data-theme="amoled"] .recharge-qr-img-wrap,
[data-theme="deepspace"] .recharge-qr-img-wrap,
[data-theme="redsunset"] .recharge-qr-img-wrap {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #4f7cff) 10%, rgba(255,255,255,0.04)), rgba(255,255,255,0.02));
}
/* 设置弹窗 footer：一行三栏布局 —— 左：制作：阎玉鹏；中：更新日志（绝对居中）；右：保存按钮 */
/* 还原全局 modal-footer 默认单行布局，仅设置弹窗的 footer-top 内部做三栏定位 */
.modal-footer {
flex-direction: row;
justify-content: flex-end;
gap: 10px;
}
.modal-footer .settings-footer-top {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
gap: 10px;
min-height: 28px;
}
/* 作者签名（左对齐，灰色、不加粗，超链接样式） */
.modal-footer .settings-author-footer {
flex: 1 1 auto;
padding: 0;
text-align: left;
margin-right: auto;
}
.modal-footer .about-author-link {
display: inline-block;
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 400;
text-decoration: none;
letter-spacing: 0.2px;
transition: color 0.2s, border-color 0.2s;
border-bottom: 1px dashed transparent;
padding-bottom: 1px;
line-height: 1.15;
}
.modal-footer .about-author-link:hover {
color: var(--text-secondary);
border-bottom-color: var(--text-muted);
}
.settings-footer-icp {
text-align: center;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--border-color);
}
.icp-link {
display: inline-block;
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 400;
text-decoration: none;
letter-spacing: 0.2px;
border-bottom: 1px dashed transparent;
line-height: 1.15;
padding-bottom: 1px;
font-family: inherit;
white-space: nowrap;
transition: color 0.2s, border-color 0.2s;
}
.icp-link:hover {
color: var(--text-secondary);
border-bottom-color: var(--text-muted);
}
/* "更新日志"居中链接按钮 —— 绝对定位在 settings-footer-top 水平+垂直正中，与作者行高完全一致 */
.settings-footer-changelog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 0;
width: auto;
pointer-events: auto;
}
.changelog-link-btn {
display: inline-block;
background: none;
border: none;
padding: 0;
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 400;
cursor: pointer;
letter-spacing: 0.2px;
transition: color 0.2s, border-color 0.2s, background 0.2s;
border-bottom: 1px dashed transparent;
border-radius: 4px;
line-height: 1.15;
padding-bottom: 1px;
font-family: inherit;
}
.changelog-link-btn:hover {
color: var(--text-secondary);
border-bottom-color: var(--text-muted);
background: var(--bg-hover);
}
/* footer 内"公告 · 更新日志"中间的分隔点 */
.footer-sep {
color: var(--text-muted);
font-size: 0.75rem;
opacity: 0.6;
margin: 0 1px;
user-select: none;
}
/* —— 保存按钮也压一下高度（与 12px 按钮更协调）—— */
#saveSettings.btn-primary {
padding: 8px 18px;
font-size: 0.8125rem;
}
/* ===== 更新日志展示板：时间轴卡片风格（取代原先的纯 pre-wrap 文本） ===== */
.modal-changelog { max-width: 720px; }
.modal-pricing { max-width: 820px; }
/* 模型能力矩阵（CSS Grid 版，收费细则内） */
.cap-matrix-wrap {
border: 1px solid var(--border-light, #e6e8ee);
border-radius: 8px;
margin-bottom: 12px;
overflow: hidden;
}
.cap-matrix {
display: grid;
grid-template-columns: minmax(120px, 38%) repeat(8, 1fr);
width: 100%;
}
.cap-row { display: contents; }
.cap-cell {
padding: 6px 4px;
font-size: 0.75rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid var(--border-light, #e6e8ee);
border-top: 1px solid var(--border-light, #e6e8ee);
min-width: 0;
}
.cap-cell.model {
justify-content: flex-start;
text-align: left;
line-height: 1.45;
word-break: break-all;
}
.cap-head {
background: var(--bg-hover, rgba(0,0,0,0.04));
color: var(--text-secondary, #555);
font-weight: 600;
}
.cap-group { font-weight: 700; letter-spacing: 2px; }
.cap-m-headmodel { grid-column: 1; grid-row: 1 / span 2; border-left: none; border-top: none; }
.cap-m-gin { grid-column: 2 / span 4; grid-row: 1; border-top: none; }
.cap-m-gout { grid-column: 6 / span 4; grid-row: 1; border-top: none; }
.cap-m-sub { grid-row: 2; border-top: none; }
.cap-row .cap-cell:first-child { border-left: none; } /* 数据行第 1 列贴边框，去重复线 */
.cap-yes { font-size: 0.8125rem; }
.cap-no { opacity: 0.55; font-size: 0.8125rem; }
.cap-note { cursor: help; font-size: 0.8125rem; }
/* 收费细则展示板 */
.pricing-display {
padding: 22px 26px 26px;
}
.pricing-intro {
font-size: 0.875rem;
color: var(--text, #1a1a2e);
line-height: 1.75;
margin-bottom: 18px;
}
.pricing-intro p { margin: 0 0 8px; }
.pricing-intro .accent { color: var(--primary, #4f7cff); font-weight: 600; }
.pricing-intro .formula {
display: inline-block;
padding: 4px 10px;
background: var(--bg-hover, rgba(0,0,0,0.04));
border-radius: 6px;
font-family: var(--font-mono);
font-size: 0.8125rem;
margin: 2px 0;
}
.pricing-section-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--text, #1a1a2e);
margin: 20px 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border, #e0e0e8);
}
.pricing-table {
width: 100%;
border-collapse: collapse;
font-size: 0.78125rem;
margin-bottom: 16px;
}
.pricing-table th,
.pricing-table td {
padding: 7px 10px;
text-align: left;
border-bottom: 1px solid var(--border-light, #e6e8ee);
white-space: normal;
word-break: break-word;
}
.pricing-table th {
background: var(--bg-hover, rgba(0,0,0,0.04));
color: var(--text-secondary, #555);
font-weight: 600;
font-size: 0.75rem;
}
.pricing-table td.num {
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.pricing-table tr.provider-row td {
background: var(--bg-hover, rgba(0,0,0,0.04));
font-weight: 700;
color: var(--primary, #4f7cff);
}
[data-theme="dark"] .pricing-table th { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .pricing-table tr.provider-row td { background: rgba(255,255,255,0.06); }
.changelog-display {
width: 100%;
min-height: 320px;
max-height: 62vh;
padding: 18px 22px 22px;
background: var(--bg-card, #fff);
border: 1px solid var(--border-light, #e6e8ee);
border-radius: 12px;
box-sizing: border-box;
position: relative;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-gutter: stable;
}
.changelog-display::-webkit-scrollbar { width: 7px; }
.changelog-display::-webkit-scrollbar-thumb { background: var(--border-medium, #c8cbd1); border-radius: 4px; }
.changelog-display::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #8a8f99); }
/* 内容容器（JS 把 DOM append 进 #changelogContent） */
.changelog-content { display: none; width: 100%; font-size: 0.875rem; color: var(--text, #1a1a2e); }
.changelog-display.has-content .changelog-content { display: block; }
.changelog-display:not(.has-content) .changelog-empty { display: flex; }
.changelog-display:not(.has-content) .changelog-content { display: none; }
/* 分组（一个日期一块） */
.changelog-group { margin-bottom: 22px; }
.changelog-group:last-child { margin-bottom: 8px; }
/* 日期分组头（取消毛玻璃：backdrop-filter 已移除，改为纯色卡片） */
.changelog-group-header {
display: flex;
align-items: center;
gap: 10px;
margin: 4px 0 12px;
padding: 10px 12px;
border-radius: 10px;
background: color-mix(in srgb, var(--primary, #4F7CFF) 8%, var(--bg-card, #ffffff));
position: sticky;
top: -18px; /* 粘在滚动区顶部 */
z-index: 5;
border: 1px solid color-mix(in srgb, var(--primary, #4F7CFF) 22%, var(--border, #e0e0ea));
}
.changelog-date-label {
font-weight: 700;
font-size: 0.90625rem;
color: var(--text, #1a1a2e);
letter-spacing: 0.2px;
white-space: nowrap;
flex-shrink: 0;
}
.changelog-day-summary {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 1;
flex-wrap: wrap;
}
.clg-pill {
font-size: 0.6875rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
color: #fff;
letter-spacing: 0.2px;
line-height: 1.5;
white-space: nowrap;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.clg-pill.cat-fix { background: #EF4444; }
.clg-pill.cat-improve { background: #3B82F6; }
.clg-pill.cat-new { background: #10B981; }
.changelog-day-total {
font-size: 0.71875rem;
color: var(--text-muted, #8a8f99);
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
padding: 2px 8px;
border: 1px dashed var(--border);
border-radius: 999px;
}
/* 时间轴列 */
.changelog-timeline {
position: relative;
margin-left: 11px;
padding-left: 21px;
border-left: 2px solid color-mix(in srgb, var(--primary, #4F7CFF) 22%, transparent);
display: flex;
flex-direction: column;
gap: 10px;
}
/* 每个条目 */
.changelog-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 10px;
animation: clgFadeIn 0.35s ease both;
}
@keyframes clgFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* 时间轴节点（圆点 + 光晕） */
.changelog-timeline-dot {
position: absolute;
left: -31px;
top: 14px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 3px solid #fff;
box-sizing: border-box;
box-shadow: 0 0 0 2px var(--primary, #4F7CFF),
0 0 10px color-mix(in srgb, var(--primary, #4F7CFF) 35%, transparent);
}
.changelog-item[data-cat="修复"] .changelog-timeline-dot { box-shadow: 0 0 0 2px #EF4444, 0 0 10px rgba(239,68,68,0.32); }
.changelog-item[data-cat="改进"] .changelog-timeline-dot { box-shadow: 0 0 0 2px #3B82F6, 0 0 10px rgba(59,130,246,0.30); }
.changelog-item[data-cat="新增"] .changelog-timeline-dot { box-shadow: 0 0 0 2px #10B981, 0 0 10px rgba(16,185,129,0.30); }
/* 条目卡片 */
.changelog-item-card {
flex: 1;
background: #fff;
border: 1px solid var(--border-light, #e6e8ee);
border-radius: 12px;
padding: 10px 13px 11px;
box-shadow: 0 1px 2px rgba(0,0,0,0.025), 0 4px 14px rgba(15,15,20,0.03);
transition: all 0.18s;
position: relative;
overflow: hidden;
}
.changelog-item-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--primary, #4F7CFF);
opacity: 0.85;
}
.changelog-item[data-cat="修复"] .changelog-item-card::before { background: #EF4444; }
.changelog-item[data-cat="改进"] .changelog-item-card::before { background: #3B82F6; }
.changelog-item[data-cat="新增"] .changelog-item-card::before { background: #10B981; }
.changelog-item-card:hover {
border-color: color-mix(in srgb, var(--primary, #4F7CFF) 30%, #ccc);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 10px 24px rgba(15,15,20,0.055);
}
/* 卡片顶部：分类 pill + 序号 */
.changelog-item-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.changelog-cat-pill {
font-size: 0.6875rem;
font-weight: 700;
padding: 2px 10px;
border-radius: 999px;
color: #fff;
letter-spacing: 0.3px;
line-height: 1.6;
}
.changelog-cat-pill.cat-fix { background: linear-gradient(135deg, #EF4444, #F87171); }
.changelog-cat-pill.cat-improve { background: linear-gradient(135deg, #3B82F6, #60A5FA); }
.changelog-cat-pill.cat-new { background: linear-gradient(135deg, #10B981, #34D399); }
.changelog-item-idx {
font-family: var(--font-mono);
font-size: 0.65625rem;
color: var(--text-muted, #8a8f99);
font-weight: 500;
padding: 1px 6px;
background: rgba(128,128,148,0.08);
border-radius: 4px;
letter-spacing: 0.2px;
}
/* 条目正文 */
.changelog-item-body {
font-size: 0.84375rem;
line-height: 1.75;
color: var(--text, #1a1a2e);
word-break: break-word;
letter-spacing: 0.1px;
}
/* ===== 夜间模式适配 ===== */
[data-theme="dark"] .changelog-display {
background: #22222e;
border-color: #3a3a4c;
}
[data-theme="dark"] .changelog-group-header {
background: #2c2c3a;
border-color: #3e3e50;
}
[data-theme="dark"] .changelog-date-label { color: #e8e8f2; }
[data-theme="dark"] .changelog-day-total {
color: #9a9ab0;
border-color: #4a4a5e;
}
[data-theme="dark"] .changelog-timeline {
border-left-color: rgba(154,127,255,0.35);
}
[data-theme="dark"] .changelog-timeline-dot {
background: #1e1e2a;
border-color: #1e1e2a;
}
[data-theme="dark"] .changelog-item-card {
background: #2a2a38;
border-color: #3a3a4c;
box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 14px rgba(0,0,0,0.22);
}
[data-theme="dark"] .changelog-item-body { color: #dfe6ee; }
[data-theme="dark"] .changelog-item-idx {
color: #9a9ab0;
background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .changelog-item-card:hover {
border-color: rgba(154,127,255,0.45);
box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 10px 24px rgba(0,0,0,0.32);
}
/* 移动端更窄的 padding */
@media (max-width: 560px) {
.changelog-display { padding: 14px 14px 18px; max-height: 68vh; }
.changelog-group-header { padding: 8px 10px; flex-wrap: wrap; }
.changelog-day-total { order: 3; width: 100%; border: none; padding: 0; }
.modal-changelog { max-width: calc(100vw - 36px); }
}
/* 兼容：其他非设置弹窗的 footer 继续保持单行右对齐 */
#contextModal .modal-footer,
#changelogModal .modal-footer {
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 12px;
}
/* =========================================================================
* Logo 大图预览弹窗（展开态点击导航栏 logo → 弹出）
* ========================================================================= */
.logo-preview-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(15, 15, 20, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
animation: logoPreviewFadeIn 0.18s ease;
user-select: none;
}
@keyframes logoPreviewFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.logo-preview-close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.08);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, transform 0.15s;
}
.logo-preview-close:hover {
background: rgba(255,255,255,0.2);
transform: scale(1.04);
}
.logo-preview-stage {
max-width: min(80vw, 960px);
max-height: 72vh;
padding: 28px 32px;
background: var(--modal-bg, #fff);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 2px 10px rgba(0,0,0,0.15);
display: flex;
align-items: center;
justify-content: center;
animation: logoPreviewPop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes logoPreviewPop {
from { transform: scale(0.94); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.logo-preview-img {
max-width: 100%;
max-height: calc(72vh - 56px);
display: block;
object-fit: contain;
border-radius: 12px;
background:
linear-gradient(45deg, #eee 25%, transparent 25%) 0 0 / 16px 16px,
linear-gradient(-45deg, #eee 25%, transparent 25%) 0 8px / 16px 16px,
linear-gradient(45deg, transparent 75%, #eee 75%) 8px -8px / 16px 16px,
linear-gradient(-45deg, transparent 75%, #eee 75%) -8px 0 / 16px 16px,
#fafafa;
}
.logo-preview-toolbar {
width: min(80vw, 960px);
min-height: 52px;
padding: 0 20px;
border-radius: 12px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: #fff;
font-size: 0.8125rem;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: logoPreviewFadeIn 0.22s ease 0.04s both;
}
.logo-preview-filename {
font-family: var(--font-mono);
color: rgba(255,255,255,0.82);
letter-spacing: 0.2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 60%;
}
.logo-preview-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.logo-preview-actions .btn-primary,
.logo-preview-actions .btn-secondary {
height: 34px;
padding: 0 14px;
font-size: 0.8125rem;
line-height: 1;
}
/* ===== 修改消息弹窗 ===== */
.modal-edit-message {
max-width: 620px;
max-height: calc(100dvh - 64px);
}
.modal-edit-message .modal-body {
display: flex;
flex-direction: column;
gap: 12px;
}
.edit-msg-tip {
font-size: 0.78125rem;
color: var(--text-secondary);
line-height: 1.55;
padding: 8px 12px;
background: color-mix(in srgb, var(--primary) 6%, transparent);
border-left: 3px solid var(--primary);
border-radius: 6px;
}
.edit-msg-textarea {
width: 100%;
min-height: 160px;
max-height: 320px;
padding: 12px 14px;
font-family: inherit;
font-size: 0.875rem;
line-height: 1.55;
color: var(--text-primary);
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
resize: vertical;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-sizing: border-box;
}
.edit-msg-textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--ring);
}
.edit-msg-attachments {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-height: 0;
}
.edit-msg-attachments:empty { display: none; }
.edit-msg-attachment-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px 5px 10px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 16px;
font-size: 0.78125rem;
color: var(--text-primary);
max-width: 240px;
}
.edit-msg-attachment-chip .chip-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.edit-msg-attachment-chip .chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
color: var(--text-secondary);
flex-shrink: 0;
padding: 0;
}
.edit-msg-attachment-chip .chip-remove:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.edit-msg-actions-row {
display: flex;
align-items: center;
gap: 8px;
}
.edit-msg-upload-btn {
height: 34px;
padding: 0 14px;
font-size: 0.8125rem;
line-height: 1;
}
/* 夜间适配 */
[data-theme="dark"] .edit-msg-tip {
background: color-mix(in srgb, var(--primary) 14%, transparent);
}
/* 上下文选择弹窗 */
.modal-context {
max-width: 600px;
}
.context-hint {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 12px;
line-height: 1.6;
}
.context-controls {
display: flex;
gap: 4px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-light);
}
.context-list {
max-height: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.context-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
background: var(--bg-hover);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.15s;
border: 1px solid transparent;
}
.context-item:hover {
border-color: var(--primary);
}
.context-item input[type="checkbox"] {
margin-top: 4px;
cursor: pointer;
accent-color: var(--primary);
}
.context-item-content {
flex: 1;
font-size: 0.8125rem;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.context-item-role {
font-size: 0.6875rem;
color: var(--primary);
font-weight: 600;
margin-bottom: 2px;
}
.context-item.user .context-item-role { color: var(--primary-light); }
.context-item.assistant .context-item-role { color: var(--primary); }
/* ===== Toast ===== */
.toast {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
padding: 12px 24px;
background: var(--text);
color: white;
border-radius: var(--radius-sm);
font-size: 0.875rem;
z-index: 2000;
animation: toastIn 0.3s ease;
box-shadow: var(--shadow-lg);
}
@keyframes toastIn {
from { opacity: 0; transform: translate(-50%, 10px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ===== 研究模式 ===== */
.message.assistant-message.research-mode .message-body::before {
content: "🔍 深度研究模式";
display: inline-block;
padding: 2px 8px;
margin-bottom: 8px;
font-size: 0.6875rem;
font-weight: 600;
color: var(--primary-light);
background: linear-gradient(135deg, rgba(79, 124, 255, 0.1), rgba(123, 92, 255, 0.1));
border-radius: 4px;
}
/* ===== 响应式 ===== */
@media (max-width: 768px) {
.sidebar { width: 280px; min-width: 280px; margin-left: -280px; position: fixed; left: 0; top: 0; height: 100dvh; z-index: 90; }
.sidebar.open { margin-left: 0; }
.sidebar.collapsed { width: 64px; min-width: 64px; margin-left: -64px; }
.sidebar.collapsed.open { margin-left: 0; }
.sidebar-toggle { display: flex; }
.message { padding: 16px 16px; }
.message-content-wrapper { max-width: 85%; }
.badge-tags { display: none; }
.top-bar { padding: 10px 12px; gap: 8px; }
.custom-select-trigger { font-size: 0.8125rem; padding: 6px 10px; }
.custom-select-dropdown { min-width: 280px; }
.settings-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* ===== 自定义模型下拉框 ===== */
.model-select-wrap {
position: relative;
width: 320px;
max-width: 100%;
flex-shrink: 0;
}
#modelSelect {
position: absolute !important;
clip: rect(0,0,0,0) !important;
pointer-events: none !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.custom-select {
position: relative;
width: 100%;
}
.custom-select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 10px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.8125rem;
color: var(--text);
transition: all 0.15s;
min-height: 30px;
line-height: 1.4;
}
.custom-select-trigger:hover {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.1);
}
.custom-select.open .custom-select-trigger {
border-color: var(--primary);
}
.custom-select-current {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
font-weight: 500;
}
.custom-select:hover .custom-select-current {
color: var(--primary);
}
.custom-select-arrow {
flex-shrink: 0;
transition: transform 0.2s;
color: var(--text-muted);
}
.custom-select.open .custom-select-arrow {
transform: rotate(180deg);
}
.custom-select-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
max-height: min(70vh, 760px);
min-height: 300px;
overflow-y: auto;
z-index: 1001;
}
.custom-select.open .custom-select-dropdown {
display: block;
}
.custom-select-dropdown::-webkit-scrollbar {
width: 6px;
}
.custom-select-dropdown::-webkit-scrollbar-track {
background: transparent;
}
.custom-select-dropdown::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* 分组容器 */
.custom-optgroup-wrap {
display: flex;
flex-direction: column;
}
.custom-optgroup-options {
overflow: hidden;
transition: max-height 0.25s ease;
max-height: 9999px;
}
.custom-optgroup-wrap.collapsed .custom-optgroup-options {
max-height: 0;
}
/* 分组标题：横向布局（左侧标题 + 右侧数量 + 折叠箭头） */
.custom-optgroup-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 12px;
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.3px;
background: var(--bg-card);
border-bottom: 1px solid var(--border-light);
cursor: pointer;
user-select: none;
position: sticky;
top: 0;
z-index: 1;
transition: background 0.15s;
}
.custom-optgroup-label:hover {
background: var(--bg-hover);
color: var(--text-secondary);
}
.custom-optgroup-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-optgroup-count {
flex-shrink: 0;
padding: 1px 6px;
border-radius: 10px;
background: var(--bg-secondary);
color: var(--text-secondary);
font-size: 0.625rem;
font-weight: 600;
line-height: 1.4;
}
.custom-optgroup-toggle {
flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.2s ease;
}
.custom-optgroup-wrap.collapsed .custom-optgroup-toggle {
transform: rotate(-90deg);
}
.custom-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 12px;
cursor: pointer;
transition: background 0.1s;
font-size: 0.8125rem;
gap: 16px;
}
.custom-option:hover {
background: var(--bg-hover);
}
.custom-option.disabled {
opacity: 0.4;
pointer-events: none;
}
.custom-option.selected {
background: var(--bg-hover);
}
.custom-option.selected .custom-option-name {
color: var(--primary);
font-weight: 600;
}
.custom-option-name {
flex-shrink: 0;
font-weight: 500;
color: var(--text);
}
.custom-option-desc {
flex: 1;
text-align: right;
color: var(--text-secondary);
font-size: 0.75rem;
opacity: 0.8;
}
.custom-option:hover .custom-option-name {
color: var(--primary);
}
/* 模型搜索框（下拉框顶部 sticky） */
.model-search-wrap {
position: sticky;
top: 0;
z-index: 3;
padding: 10px 12px 10px;
background: var(--bg-card);
border-bottom: 1px solid var(--border-light);
display: flex;
flex-direction: column;
gap: 6px;
}
.model-search-box {
display: flex;
align-items: center;
gap: 7px;
padding: 5px 9px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
transition: all 0.15s;
}
.model-search-box:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #4F7CFF) 15%, transparent);
background: #fff;
}
[data-theme="dark"] .model-search-box:focus-within { background: #1b1b26; }
.model-search-box svg {
flex-shrink: 0;
color: var(--text-muted);
}
.model-search-icon { opacity: 0.85; }
.model-search-box input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 0.8125rem;
color: var(--text);
min-width: 0;
padding: 3px 0;
line-height: 1.4;
}
.model-search-box input::placeholder { color: var(--text-muted); }
/* 清除按钮：输入有值时才显示（JS 控制 display） */
.model-search-clear {
display: none;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
padding: 0;
transition: all 0.14s;
flex-shrink: 0;
}
.model-search-clear:hover {
background: color-mix(in srgb, #ef4444 12%, transparent);
color: #ef4444;
}
.model-search-clear:active { transform: scale(0.9); }
/* 搜索提示：灰色小字两行描述 */
.model-search-hint {
font-size: 0.65625rem;
color: var(--text-muted);
opacity: 0.9;
line-height: 1.2;
padding: 0 2px;
letter-spacing: 0.1px;
}
.model-search-hint kbd {
display: inline-block;
padding: 0 4px;
font-size: 0.625rem;
font-family: var(--font-mono);
background: var(--bg-hover);
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 4px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0 1px;
}
/* 搜索命中高亮：更粗的黄蓝双色主色高亮（白天/暗色适配） */
.custom-option-name mark,
.custom-option-desc mark,
.custom-optgroup-label mark {
background: color-mix(in srgb, var(--primary, #4F7CFF) 20%, #FFF4A8);
color: var(--primary, #1F3FD9);
padding: 0 2.5px;
border-radius: 3px;
font-weight: 700;
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary, #4F7CFF) 25%, transparent);
}
[data-theme="dark"] .custom-option-name mark,
[data-theme="dark"] .custom-option-desc mark,
[data-theme="dark"] .custom-optgroup-label mark {
background: color-mix(in srgb, var(--primary-light, #9A7FFF) 30%, #3a3a4c);
color: #dfe6ee;
}
/* 键盘 focused 选项（↑↓ 导航高亮） */
.custom-option.focused {
background: color-mix(in srgb, var(--primary, #4F7CFF) 10%, var(--bg-hover));
outline: 1px solid color-mix(in srgb, var(--primary, #4F7CFF) 40%, transparent);
outline-offset: -2px;
}
.custom-option.focused .custom-option-name { color: var(--primary); }
[data-theme="dark"] .custom-option.focused {
background: linear-gradient(90deg,
color-mix(in srgb, var(--primary, #6B8BFF) 16%, #2a2a38),
color-mix(in srgb, var(--primary-light, #9A7FFF) 10%, #2a2a38));
outline-color: rgba(154,127,255,0.45);
}
/* 空搜索结果：更好看的空状态（图标 + 大标题 + 小提示） */
.model-search-empty {
padding: 28px 16px 26px;
text-align: center;
font-size: 0.8125rem;
color: var(--text-muted);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.model-search-empty::before {
content: '';
width: 40px;
height: 40px;
border-radius: 999px;
background: color-mix(in srgb, var(--text-muted, #8a8f99) 12%, transparent);
margin-bottom: 4px;
display: block;
position: relative;
}
.model-search-empty::after {
content: '';
position: absolute;
width: 20px; height: 20px;
margin-top: 10px;
background: currentColor;
opacity: 0.4;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.model-search-empty .empty-title {
position: relative;
z-index: 1;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary);
}
.model-search-empty .empty-tip {
position: relative;
z-index: 1;
font-size: 0.71875rem;
color: var(--text-muted);
opacity: 0.9;
}
.model-search-empty kbd {
display: inline-block;
padding: 0 4px;
font-size: 0.65625rem;
font-family: var(--font-mono);
background: var(--bg-hover);
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 4px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0 1px;
}
/* =========================================================================
* 夜间主题：补漏 & 二次精修（2026-08-23 整体优化第 2 波）
* 覆盖：scheme-picker / 顶栏 badge-tags / stop-btn / changelog 胶囊与空态
* context 控制条 / research-mode / settings-footer 作者链接 /
* body 过渡 / 选中色 / logo 预览棋盘格 / 更多小模块
* ========================================================================= */
/* 全局切换：主题过渡（避免变量跳变突兀，仅限颜色/背景/阴影/边框，不能过渡 layout） */
[data-theme="dark"] body,
body[data-theme="dark"] {
transition: background-color 0.25s ease, color 0.25s ease;
}
[data-theme="dark"] .sidebar,
[data-theme="dark"] .top-bar,
[data-theme="dark"] .modal,
[data-theme="dark"] .input-box,
[data-theme="dark"] .custom-select-trigger,
[data-theme="dark"] .custom-select-dropdown,
[data-theme="dark"] .chat-item,
[data-theme="dark"] .message-bubble,
[data-theme="dark"] .reasoning-block,
[data-theme="dark"] .welcome-suggestion,
[data-theme="dark"] .badge,
[data-theme="dark"] .scheme-chip,
[data-theme="dark"] .changelog-display,
[data-theme="dark"] .changelog-item-card,
[data-theme="dark"] .changelog-group-header,
[data-theme="dark"] .segmented-control {
transition: background-color 0.2s ease, border-color 0.2s ease,
color 0.2s ease, box-shadow 0.2s ease;
}
/* 全局文字选中（夜间蓝紫更鲜明） */
[data-theme="dark"] ::selection {
background: rgba(123, 92, 255, 0.42);
color: #ffffff;
}
[data-theme="dark"] *::selection {
background: rgba(123, 92, 255, 0.42);
color: #ffffff;
}
/* ① 配色方案选择器（scheme-picker / scheme-chip / scheme-name / scheme-swatch） */
[data-theme="dark"] .scheme-chip:hover {
background: var(--bg-hover);
border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .scheme-chip.active {
border-color: var(--primary-light);
background: rgba(123, 92, 255, 0.12);
box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.22);
}
[data-theme="dark"] .scheme-name {
color: var(--text-secondary);
}
[data-theme="dark"] .scheme-chip.active .scheme-name {
color: #e0e7ff;
}
[data-theme="dark"] .scheme-swatch {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .scheme-swatch::after {
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
/* ② 顶栏能力徽章（badge-thinking / research / vision / image / video / 3d）：
* 夜间下增强背景+描边不透明度，提亮文字避免"粉紫叠深蓝糊" */
[data-theme="dark"] .badge {
background: rgba(123, 140, 248, 0.16);
color: #c7d2fe;
border-color: rgba(123, 140, 248, 0.30);
}
[data-theme="dark"] .badge-thinking {
background: rgba(123, 140, 248, 0.18);
color: #c7d2fe;
border-color: rgba(123, 140, 248, 0.35);
}
[data-theme="dark"] .badge-research {
background: linear-gradient(135deg, rgba(123, 140, 248, 0.16), rgba(154, 127, 255, 0.18));
color: #ddd6fe;
border-color: rgba(154, 127, 255, 0.35);
}
[data-theme="dark"] .badge-vision {
background: rgba(52, 211, 153, 0.16);
color: #6ee7b7;
border-color: rgba(52, 211, 153, 0.35);
}
[data-theme="dark"] .badge-image {
background: rgba(251, 191, 36, 0.16);
color: #fcd34d;
border-color: rgba(251, 191, 36, 0.35);
}
[data-theme="dark"] .badge-video {
background: rgba(244, 114, 182, 0.16);
color: #f9a8d4;
border-color: rgba(244, 114, 182, 0.35);
}
[data-theme="dark"] .badge-3d {
background: rgba(129, 140, 248, 0.16);
color: #c4b5fd;
border-color: rgba(129, 140, 248, 0.35);
}
/* ③ 终止按钮 / 加载发送按钮 夜间显式加强（取消对原色纯依赖，夜间更压得住） */
[data-theme="dark"] .stop-btn {
background: linear-gradient(135deg, #ef4444, #f87171);
color: #fff;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.32);
}
[data-theme="dark"] .stop-btn:hover {
background: linear-gradient(135deg, #dc2626, #ef4444);
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.42);
filter: brightness(1.05);
}
[data-theme="dark"] .attach-btn {
color: var(--text-secondary);
}
[data-theme="dark"] .attach-btn:hover {
background: rgba(123, 92, 255, 0.14);
color: var(--primary-light);
}
/* ④ 更新日志：clg-pill（分组头内三色胶囊） / changelog-cat-pill（卡片右上标签）
* 夜间：提亮亮度、压暗底色描边，保证黑底上不"发光过度"也不糊 */
[data-theme="dark"] .clg-pill.cat-fix { background: #f87171; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
[data-theme="dark"] .clg-pill.cat-improve { background: #60a5fa; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
[data-theme="dark"] .clg-pill.cat-new { background: #34d399; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
[data-theme="dark"] .changelog-cat-pill {
color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.32);
filter: brightness(1.04);
}
[data-theme="dark"] .changelog-item-card::before { opacity: 0.95; }
[data-theme="dark"] .changelog-timeline-dot {
box-shadow: 0 0 0 3px #1e1e2a;
}
/* 日志里的时间小点发光夜间更强（分类色独立） */
[data-theme="dark"] .changelog-item[data-cat="修复"] .changelog-timeline-dot { box-shadow: 0 0 0 2px #f87171, 0 0 14px rgba(248,113,113,0.45); }
[data-theme="dark"] .changelog-item[data-cat="改进"] .changelog-timeline-dot { box-shadow: 0 0 0 2px #60a5fa, 0 0 14px rgba(96,165,250,0.45); }
[data-theme="dark"] .changelog-item[data-cat="新增"] .changelog-timeline-dot { box-shadow: 0 0 0 2px #34d399, 0 0 14px rgba(52,211,153,0.45); }
/* 日志空态 */
[data-theme="dark"] .changelog-empty {
color: var(--text-secondary);
}
[data-theme="dark"] .changelog-empty-icon {
color: var(--text-muted);
}
/* 日志滚动条（夜间更细更暗） */
[data-theme="dark"] .changelog-display::-webkit-scrollbar-thumb {
background: #404054;
}
[data-theme="dark"] .changelog-display::-webkit-scrollbar-thumb:hover {
background: #52526a;
}
/* ⑤ 上下文切换弹窗：控制条按钮 + 角色色 + item-content 夜间版 */
[data-theme="dark"] .context-controls {
border-bottom-color: var(--border-light);
}
[data-theme="dark"] .context-controls button {
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text-secondary);
}
[data-theme="dark"] .context-controls button:hover {
background: rgba(123, 92, 255, 0.14);
border-color: rgba(123, 92, 255, 0.42);
color: #e0e7ff;
}
[data-theme="dark"] .context-item-content {
color: var(--text);
}
[data-theme="dark"] .context-item.user .context-item-role { color: #a5b4fc; }
[data-theme="dark"] .context-item.assistant .context-item-role { color: #c4b5fd; }
[data-theme="dark"] .context-item input[type="checkbox"] {
accent-color: var(--primary-light);
}
/* ⑥ 深度研究模式标签夜间高亮 */
[data-theme="dark"] .message.assistant-message.research-mode .message-body::before {
background: linear-gradient(135deg, rgba(123, 140, 248, 0.22), rgba(154, 127, 255, 0.22));
color: #ddd6fe;
border: 1px solid rgba(154, 127, 255, 0.35);
}
/* ⑦ 媒体预览（图片/视频卡片）夜间加强描边与背景 */
[data-theme="dark"] .media-preview {
background: #0f0f18;
border-color: var(--border-light);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
/* Logo 预览棋盘格：夜间使用深灰棋盘（代替日间浅灰） */
[data-theme="dark"] .logo-preview-img {
background:
linear-gradient(45deg, #2a2a38 25%, transparent 25%) 0 0 / 16px 16px,
linear-gradient(-45deg, #2a2a38 25%, transparent 25%) 0 8px / 16px 16px,
linear-gradient(45deg, transparent 75%, #2a2a38 75%) 8px -8px / 16px 16px,
linear-gradient(-45deg, transparent 75%, #2a2a38 75%) -8px 0 / 16px 16px,
#1c1c28;
}
/* ⑧ 设置弹窗底部：作者链接 / 更新日志链接按钮 夜间色 */
[data-theme="dark"] .about-author-link {
color: var(--text-muted);
border-bottom-color: transparent;
}
[data-theme="dark"] .about-author-link:hover {
color: var(--text-secondary);
border-bottom-color: var(--text-muted);
}
[data-theme="dark"] .changelog-link-btn {
color: var(--text-muted);
}
[data-theme="dark"] .changelog-link-btn:hover {
color: var(--text-secondary);
background: var(--bg-hover);
border-bottom-color: var(--text-muted);
}
/* ⑨ kbd 通用（日志提示 / 搜索提示）夜间统一深灰底白描边 */
[data-theme="dark"] kbd {
background: var(--bg-hover) !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
}
/* ⑩ 模型下拉框滚动条 / 侧边栏列表滚动条细化 */
[data-theme="dark"] .custom-select-dropdown::-webkit-scrollbar-thumb {
background: #3c3c50;
background-clip: padding-box;
border: 2px solid transparent;
}
[data-theme="dark"] .custom-select-dropdown::-webkit-scrollbar-thumb:hover {
background: #4e4e66;
background-clip: padding-box;
border: 2px solid transparent;
}
/* ⑪ 聊天主区域：确保背景为 body 最深色，保持与顶栏/输入区层次 */
[data-theme="dark"] .chat-area {
background: var(--bg);
}
[data-theme="dark"] .welcome-subtitle {
color: var(--text-secondary);
}
/* ⑫ Toast 夜间（原规则保留，此处只精修主次文本） */
[data-theme="dark"] .toast {
color: var(--text);
}
/* ⑬ 文件输出卡片（AI 生成的文件下载）夜间 */
[data-theme="dark"] .file-output {
color: var(--text-secondary);
}
[data-theme="dark"] .file-output-name {
color: var(--text);
}
[data-theme="dark"] .file-output-meta {
color: var(--text-muted);
}
/* ⑭ 多模态：上传图片缩略图（attachment-item）夜间描边加强 */
[data-theme="dark"] .attachment-remove {
background: rgba(239, 68, 68, 0.25);
color: #fecaca;
}
/* ⑮ 更多菜单（rename 气泡）夜间：已定义 .chat-item-more-menu 背景，再补文字/分割线 */
[data-theme="dark"] .more-menu-item {
color: var(--text-secondary);
}
[data-theme="dark"] .more-menu-divider {
background: var(--border-light);
}
[data-theme="dark"] .more-item-delete {
color: #fca5a5;
}
[data-theme="dark"] .more-item-delete:hover {
background: rgba(239, 68, 68, 0.18) !important;
color: #fecaca;
}
/* ⑯ 分组折叠按钮（模型下拉框里 optgroup 的折叠箭头）夜间 */
[data-theme="dark"] .custom-optgroup-toggle {
color: var(--text-muted);
}
[data-theme="dark"] .custom-optgroup-toggle:hover {
background: var(--bg-hover);
color: var(--text);
}
/* ⑰ 拖放遮罩内部小文字颜色一致性 */
[data-theme="dark"] .drop-overlay-title {
color: var(--text);
}
/* ⑱ 搜索记录下拉面板（导航栏 / 对话框 / 模型选择 共用） */
.search-history-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
margin-top: 2px;
background: var(--bg-card);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
overflow: hidden;
max-height: 320px;
overflow-y: auto;
}
.search-history-list {
padding: 4px;
}
.search-history-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.12s;
}
.search-history-item:hover {
background: var(--bg-hover);
}
.search-history-text {
flex: 1;
font-size: 0.8125rem;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-history-delete {
flex-shrink: 0;
width: 20px;
height: 20px;
border: none;
background: transparent;
color: var(--text-muted);
font-size: 1rem;
line-height: 1;
cursor: pointer;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s;
}
.search-history-delete:hover {
background: rgba(239, 68, 68, 0.12);
color: #ef4444;
}
.search-history-footer {
padding: 4px 8px 6px;
border-top: 1px solid var(--border-light);
text-align: center;
}
.search-history-clear-all {
border: none;
background: transparent;
color: var(--text-muted);
font-size: 0.75rem;
cursor: pointer;
padding: 4px 8px;
border-radius: var(--radius-sm);
transition: background 0.12s, color 0.12s;
}
.search-history-clear-all:hover {
background: rgba(239, 68, 68, 0.10);
color: #ef4444;
}
/* 模型搜索框的记录面板：宽度跟随搜索框 */
.model-search-wrap .search-history-panel {
left: 12px;
right: 12px;
min-width: 200px;
}
/* 夜间主题适配 */
[data-theme="dark"] .search-history-panel,
body.dark-theme .search-history-panel {
background: var(--bg-card);
border-color: var(--border-medium);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .search-history-item:hover,
body.dark-theme .search-history-item:hover {
background: var(--bg-hover);
}
[data-theme="dark"] .search-history-delete:hover,
body.dark-theme .search-history-delete:hover {
background: rgba(239, 68, 68, 0.18);
}
/* ===== 赏赞弹窗 ===== */
.modal-tip {
max-width: 480px;
width: 90%;
max-height: 90vh;
}
.tip-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 8px 0;
}
.tip-subtitle {
font-size: 0.875rem;
color: var(--text-secondary);
text-align: center;
line-height: 1.6;
}
.tip-cards {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
}
.tip-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.tip-qr-wrap {
width: 180px;
height: 180px;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--border-medium);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: box-shadow 0.2s, transform 0.2s;
}
.tip-qr-wrap:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
transform: translateY(-2px);
}
.tip-qr-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tip-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary);
}
.tip-thanks {
font-size: 0.8125rem;
color: var(--text-muted);
text-align: center;
}
/* 夜间主题适配 */
[data-theme="dark"] .tip-qr-wrap,
body.dark-theme .tip-qr-wrap {
background: #fff;
border-color: var(--border-medium);
}
[data-theme="dark"] .tip-qr-wrap:hover,
body.dark-theme .tip-qr-wrap:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
/* 意见箱弹窗 */
.modal-feedback {
max-width: 600px;
width: 90%;
max-height: 90vh;
}
.feedback-body {
padding: 20px 22px;
max-height: calc(90vh - 120px);
overflow-y: auto;
}
.feedback-hint {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.8125rem;
color: var(--text-muted);
margin-bottom: 18px;
line-height: 1.6;
padding: 12px 14px;
background: var(--bg-secondary, #f7f8fa);
border-radius: var(--radius-sm, 10px);
border: 1px solid var(--border-light);
}
.feedback-hint svg {
flex-shrink: 0;
margin-top: 1px;
color: var(--primary, #4f7cff);
}
.feedback-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.feedback-field {
display: flex;
flex-direction: column;
gap: 7px;
}
.feedback-field label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--text);
}
/* 反馈类型 Pill 按钮组 */
.feedback-type-pills {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.feedback-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1.5px solid var(--border-medium);
border-radius: 20px;
background: var(--bg-input, #fff);
color: var(--text-secondary);
font-size: 0.8125rem;
font-family: inherit;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.feedback-pill:hover {
border-color: var(--primary, #4f7cff);
color: var(--primary, #4f7cff);
background: rgba(79, 124, 255, 0.04);
}
.feedback-pill.active {
border-color: var(--primary, #4f7cff);
background: var(--primary, #4f7cff);
color: #fff;
}
.feedback-pill svg {
flex-shrink: 0;
}
/* 输入框统一样式 */
.feedback-input,
.feedback-textarea {
width: 100%;
padding: 11px 14px;
border-radius: var(--radius-sm, 10px);
border: 1.5px solid var(--border-medium);
background: var(--bg-input, #fff);
color: var(--text);
font-size: 0.875rem;
font-family: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.feedback-input:focus,
.feedback-textarea:focus {
outline: none;
border-color: var(--primary, #4f7cff);
box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
}
.feedback-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
.feedback-count {
font-size: 0.6875rem;
color: var(--text-muted);
text-align: right;
margin-top: 2px;
}
.feedback-error {
background: rgba(229, 62, 62, 0.08);
color: #e53e3e;
padding: 8px 12px;
border-radius: var(--radius-sm, 8px);
font-size: 0.8125rem;
margin-top: 4px;
}
.feedback-submit {
width: 100%;
padding: 12px;
margin-top: 4px;
font-size: 0.9375rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* 历史反馈列表 */
.feedback-list-section {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--border-light);
}
.feedback-list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.feedback-list-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
margin: 0;
}
.feedback-clear-btn {
background: none;
border: none;
color: var(--text-muted);
font-size: 0.75rem;
cursor: pointer;
padding: 0;
font-family: inherit;
transition: color 0.2s;
}
.feedback-clear-btn:hover {
color: #e53e3e;
}
.feedback-list {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 280px;
overflow-y: auto;
}
.feedback-item {
background: var(--bg-secondary, #f7f8fa);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm, 10px);
padding: 12px 14px;
transition: box-shadow 0.2s;
}
.feedback-item:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.feedback-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.feedback-item-type {
font-size: 0.6875rem;
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
}
.feedback-item-type.suggestion { background: rgba(79, 124, 255, 0.12); color: #4f7cff; }
.feedback-item-type.bug { background: rgba(229, 62, 62, 0.12); color: #e53e3e; }
.feedback-item-type.experience { background: rgba(56, 161, 105, 0.12); color: #38a169; }
.feedback-item-type.other { background: rgba(128, 128, 128, 0.12); color: #808080; }
.feedback-item-type-handled {
font-size: 0.625rem;
padding: 1px 6px;
border-radius: 8px;
background: rgba(56, 161, 105, 0.15);
color: #38a169;
margin-left: 6px;
}
.feedback-item-time {
font-size: 0.6875rem;
color: var(--text-muted);
}
.feedback-item-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.feedback-item-content {
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.feedback-item-contact {
font-size: 0.6875rem;
color: var(--text-muted);
margin-top: 6px;
}
.feedback-item-actions {
margin-top: 8px;
display: flex;
justify-content: flex-end;
}
.feedback-item-delete {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 0.75rem;
padding: 0;
font-family: inherit;
transition: color 0.2s;
}
.feedback-item-delete:hover {
color: #e53e3e;
}
/* 管理员回复区域 */
.feedback-admin-reply {
margin-top: 10px;
padding: 10px 12px;
background: rgba(79, 124, 255, 0.06);
border: 1px solid rgba(79, 124, 255, 0.2);
border-radius: 10px;
}
.feedback-admin-reply-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.feedback-admin-reply-label {
font-size: 0.75rem;
font-weight: 600;
color: #4f7cff;
}
.feedback-admin-reply-content {
font-size: 0.875rem;
line-height: 1.6;
color: var(--text, #1e293b);
white-space: pre-wrap;
word-break: break-word;
}
.feedback-empty {
text-align: center;
color: var(--text-muted);
font-size: 0.8125rem;
padding: 20px 0;
}
/* 暗色主题适配 - 意见箱 */
[data-theme="dark"] .feedback-input,
[data-theme="dark"] .feedback-textarea {
background: var(--bg-input, rgba(255,255,255,0.06));
border-color: rgba(255,255,255,0.12);
color: #fff;
}
[data-theme="dark"] .feedback-item {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .feedback-pill {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.7);
}
[data-theme="dark"] .feedback-pill:hover {
background: rgba(79, 124, 255, 0.15);
color: #7b8cf8;
border-color: #7b8cf8;
}
[data-theme="dark"] .feedback-pill.active {
background: var(--primary, #7b8cf8);
border-color: var(--primary, #7b8cf8);
color: #fff;
}
[data-theme="dark"] .feedback-hint {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.08);
}
/* 移动端汉堡菜单按钮（默认隐藏，≤768px 时显示） */
.mobile-menu-btn {
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
background: none;
border: none;
border-radius: 8px;
cursor: pointer;
color: var(--text-secondary);
flex-shrink: 0;
transition: background 0.15s;
}
.mobile-menu-btn:hover {
background: var(--bg-hover);
}
/* =========================================================================
* 移动端适配：登录弹窗 & 设置弹窗（≤768px）
* 最保险方案：纯 CSS 媒体查询，不改 JS / HTML 结构，确保关键信息在手机屏幕内
* ========================================================================= */
@media (max-width: 768px) {
/* —— 汉堡菜单按钮显示 —— */
.mobile-menu-btn {
display: flex;
}
/* —— 模型选择框：自适应剩余宽度，右边留白由 top-bar padding 统一控制 —— */
.model-selector {
flex: 1 1 auto;
min-width: 0;
padding-right: 0;
gap: 0;
}
/* 移动端移除选择框右侧的模型说明文字（如“智谱 · 深度思考 · 多模态”），
把横向空间全部留给选择框；桌面端显示不受影响 */
.model-info {
display: none;
}
/* 顶栏右侧徽章组在移动端已整体隐藏，空容器若保留仍会产生 8px flex 间隙；
隐藏空容器后，选择框与屏幕右缘的间距精确等于 top-bar 的 12px 右内边距 */
.top-actions {
display: none;
}
.model-select-wrap {
flex: 1 1 auto;
width: auto;
max-width: 100%;
min-width: 0;
}
.custom-select-trigger {
min-width: 0;
}
.custom-select-trigger > span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.custom-select-dropdown {
min-width: unset;
width: 100%;
}
/* 侧边栏打开时的背景遮罩（点击关闭） */
body.sidebar-open::after {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 89;
}
/* 确保 sidebar 打开时层级在遮罩之上 */
.sidebar.open {
z-index: 91;
}
/* 底部元素避开浏览器工具栏/手势条 */
.input-area {
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
/* 软键盘弹起时（app.js 通过 visualViewport 写入 --app-h）：整页高度收缩到可视区，
底部输入框随之抬到键盘上方；无键盘时回退 100dvh */
body, .app {
height: var(--app-h, 100dvh);
}
.sidebar-footer {
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
/* —— 通用弹窗：缩小外边距，弹窗接近全屏 —— */
.modal-overlay {
padding: 10px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.modal {
max-width: 100%;
max-height: calc(100dvh - 20px);
}
/* ===== 登录 / 注册弹窗 ===== */
#authModal .modal-auth {
max-width: 100%;
}
#authModal .auth-body {
padding: 16px 16px 20px;
}
#authModal .auth-form {
gap: 12px;
}
/* 记住我 / 自动登录 / 忘记密码：允许换行，避免横向溢出 */
#authModal .auth-remember {
gap: 12px;
flex-wrap: wrap;
}
#authModal .auth-forgot-btn {
margin-left: 0;
}
/* 获取验证码按钮：缩小最小宽度，避免挤压输入框 */
#authModal .code-send-wrap {
gap: 6px;
}
#authModal .code-send-btn {
min-width: 96px;
padding: 0 10px;
font-size: 0.78125rem;
}
/* 登录/注册主按钮：加大点击区域，适配触屏 */
#authModal .auth-submit {
padding: 12px;
font-size: 0.9375rem;
}
/* ===== 设置弹窗 ===== */
#settingsModal .modal {
max-width: 100%;
max-height: calc(100dvh - 20px);
}
#settingsModal .modal-header {
padding: 12px 14px 10px;
}
#settingsModal .modal-body {
padding: 14px;
}
/* footer：作者 + 中间链接 + 保存按钮 由一行改为垂直堆叠，
避免绝对定位的中间链接与左右元素在窄屏重叠 */
#settingsModal .modal-footer {
padding: 10px 14px;
}
#settingsModal .settings-footer-top {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 10px;
}
#settingsModal .settings-author-footer {
text-align: center;
margin-right: 0;
flex: none;
}
#settingsModal .settings-footer-changelog {
position: static;
transform: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2px 0;
width: 100%;
}
#settingsModal #saveSettings {
align-self: stretch;
width: 100%;
}
/* 时区选择器占满整行 */
#settingsModal .timezone-select {
max-width: 100%;
width: 100%;
}
/* 主题选择器分段按钮缩小内边距 */
#settingsModal .seg-btn {
padding: 6px 8px;
flex-basis: 64px;
}
/* —— 用户下拉菜单：宽度自适应、底部避开浏览器工具栏 —— */
.user-dropdown {
width: calc(100% - 24px);
max-width: 320px;
left: 12px;
right: 12px;
bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}
/* —— 对话项更多菜单：避免在侧边栏内溢出 —— */
.chat-item-more-menu {
min-width: 130px;
right: 4px;
}
/* —— 消息气泡：移动端最大宽度收紧，避免被挤压 —— */
.message-content-wrapper {
max-width: 88%;
}
/* —— 输入框区域：附件按钮和发送按钮尺寸适配触屏 —— */
.input-area {
padding: 10px 12px;
gap: 8px;
}
.attach-btn, .send-btn {
width: 40px;
height: 40px;
flex-shrink: 0;
}
/* —— 对话列表项：触摸友好的点击区域 —— */
.chat-item {
padding: 10px 12px;
min-height: 48px;
}
/* —— 赏赞/意见箱弹窗：90vh 改为 100dvh，避免被浏览器工具栏遮挡 —— */
.modal-tip, .modal-feedback {
max-height: calc(100dvh - 20px);
}
/* —— 消息内容：表格允许横向滚动，避免溢出 —— */
.message-body {
overflow-x: auto;
}
.message-body table {
font-size: 0.75rem;
}
.message-body pre {
font-size: 0.75rem;
padding: 12px;
}
/* —— 输入框字体≥16px，避免 iOS 聚焦时自动缩放页面 —— */
#userInput, .feedback-textarea, .edit-msg-textarea, .auth-form input, .auth-form textarea {
font-size: 1rem;
}
/* —— Toast 提示：底部避开浏览器工具栏 —— */
.toast {
bottom: calc(80px + env(safe-area-inset-bottom, 0px));
max-width: calc(100% - 32px);
}
/* —— 侧边栏打开时禁止背景滚动 —— */
body.sidebar-open {
overflow: hidden;
}
}
/* 超小屏（≤380px，如 iPhone SE / 小屏安卓）进一步收紧 */
@media (max-width: 380px) {
#authModal .auth-body {
padding: 14px 12px 16px;
}
#authModal .code-send-btn {
min-width: 84px;
padding: 0 8px;
font-size: 0.75rem;
}
/* 配色选择器由 4 列降为 3 列，避免色块文字被截断 */
#settingsModal .scheme-picker {
grid-template-columns: repeat(3, 1fr);
}
}
/* ===== 提问来源设备徽章：用户消息底部操作行首位，标识提问由电脑端/手机端发起（随消息跨设备同步） ===== */
.origin-badge {
display: inline-flex;
align-items: center;
align-self: center;
margin-right: 6px;
padding: 0.125rem 0.5rem;
border-radius: 999px;
font-size: 0.6875rem;
line-height: 1.4;
color: #6b7280;
background: rgba(107, 114, 128, 0.14);
user-select: none;
pointer-events: none;
flex-shrink: 0;
}
.origin-badge.origin-mobile {
color: #0e7490;
background: rgba(14, 116, 144, 0.14);
}