/* styles.css 完整优化方案 */
:root {
  --transition-duration: 0.3s;
  --transition-function: cubic-bezier(0.4, 0, 0.2, 1);
  --progress: 0%;
  /* 缩放系统：JS 同步写入这两个变量 */
  --app-zoom: 1;   /* 全局界面缩放 */
  --code-zoom: 1;  /* 代码块独立缩放 */
}

/* =========================================
   亮色主题：极简云石白 (Alabaster & Silk) - 高级现代、克制护眼
   ========================================= */
[data-theme="light"] {
  /* 基础颜色 - 依然是“白”主题，但去除了最高值的刺眼反光，呈现高级哑光纸质感 */
  --bg-color: #fdfdfc; /* 卡片底色：99%的暖白，保证界面的干净清透 */
  --text-color: #2c2c2a; /* 字体：深炭黑（带极弱的暖调），对比度清晰但不刺眼 */
  --border-color: #e6e5e0;
  
  /* Element Plus 核心变量 - 沉静的高级青石蓝 */
  --el-color-primary: #2a7a8c; 
  --el-color-primary-light-3: #599ca9;
  --el-color-primary-light-5: #8bbdc7;
  --el-color-primary-light-7: #bcdbe1;
  --el-color-primary-light-9: #e6f0f2;
  --el-color-primary-rgb: 42, 122, 140 !important;
  
  --el-bg-color: var(--bg-color) !important;
  --el-text-color-primary: var(--text-color) !important;
  --el-border-color: var(--border-color) !important;
  --el-border-color-light: #ecece7 !important; /* 极浅的分割线 */

  /* 组件颜色 */
  --el-button-bg-color: var(--el-color-primary) !important;
  --el-input-bg-color: #f2f2ef !important; /* 输入框微陷，采用比卡片深一点的低饱和浅灰 */
  
  /* 🌟 核心修改：大面积页面底色 - 采用类似 Notion 的高定哑光浅灰（微暖） */
  /* 这能完美衬托出上方纯白卡片的悬浮感，而且大面积看一点都不刺眼，也绝对不黄 */
  --el-bg-color-page: #f5f4f0 !important; 
  --el-tabs-bg-color: #f5f4f0 !important;
  
  /* 侧边栏和菜单融入页面底色，制造现代UI的无界感 */
  --el-menu-bg-color: var(--el-bg-color-page) !important; 
  --el-table-bg-color: var(--bg-color) !important;
  --el-tag-bg-color: #f0f0eb !important;
  
  /* 状态颜色 - 保持莫兰迪高级感 */
  --el-color-success: #639c71 !important;
  --el-color-warning: #d4a35c !important;
  --el-color-danger: #c76565 !important;
  --el-color-info: #8f8f8b !important;
  
  /* 文字颜色 */
  --el-text-color-regular: #5f5e5a !important;
  --el-text-color-secondary: #8c8b87 !important;
  
  /* 阴影 - 极度柔和的空气感弥散阴影，这是高级感的关键 */
  --el-box-shadow-light: 0 8px 24px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.02) !important;

  /* Input 调整 */
  --el-input-text-color: var(--text-color);
  --el-input-placeholder-color: #b5b4ae;
  --el-input-hover-border-color: var(--el-color-primary-light-3);
  --el-input-focus-border-color: var(--el-color-primary);

  /* 代码块 - 区别于纯白，采用淡淡的背景底色 */
  --code-bg: #f4f4f1;
  --code-border: #e6e5e0;
  
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

/* =========================================
   暗色主题：深空石墨风格 (Space Slate) - 通透无压抑感
   ========================================= */
[data-theme="dark"] {
  /* 基础颜色 - 告别死黑，采用稍微提亮的石墨灰 */
  --bg-color: #2c2c2e; 
  /* 字体 - 采用浅银灰，避免黑暗环境下的刺眼白光 */
  --text-color: #d1d1d6; 
  --border-color: #3a3a3c;
  
  /* 主色调：琥珀橙 */
  --el-color-primary: #d97706; 
  --el-color-primary-light-3: #f59e0b;
  --el-color-primary-light-5: #fbbf24;
  --el-color-primary-light-7: #fcd34d;
  --el-color-primary-light-9: #fef3c7;
  --el-color-primary-rgb: 217, 119, 6 !important;

  --el-bg-color: var(--bg-color) !important;
  --el-text-color-primary: var(--text-color) !important;
  --el-border-color: var(--border-color) !important;
  --el-border-color-light: #48484a !important;

  /* 组件颜色 */
  --el-button-bg-color: #3a3a3c !important;
  --el-input-bg-color: #242426 !important; /* 输入框略微下陷 */
  
  /* 🌟 核心修改：大面积页面底色 - 采用 macOS 风格的深空灰，有透气感，不压抑 */
  --el-bg-color-page: #1c1c1e !important; 
  --el-tabs-bg-color: #1c1c1e !important;
  
  /* 侧边栏融入背景 */
  --el-menu-bg-color: var(--el-bg-color-page) !important;
  --el-table-bg-color: #2c2c2e !important;
  --el-tag-bg-color: rgba(217, 119, 6, 0.15) !important;

  /* 状态颜色 */
  --el-color-success: #7ea381 !important;
  --el-color-warning: #ccac70 !important;
  --el-color-danger: #cf7676 !important;
  --el-color-info: #858580 !important;

  /* 文字颜色 */
  --el-text-color-regular: #a1a1aa !important;
  --el-text-color-secondary: #71717a !important;

  /* 阴影 - 柔和的深色投影，让卡片在石墨底色上凸显层次 */
  --el-box-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.3) !important;

  --el-input-text-color: #d1d1d6;
  --el-input-placeholder-color: #71717a;
  --el-input-hover-border-color: var(--el-color-primary-light-5);
  --el-input-focus-border-color: var(--el-color-primary-light-7);
  
  --el-input-disabled-bg-color: #1c1c1e;
  --el-input-disabled-border-color: #2c2c2e;

  --code-bg: #242426;
  --code-border: #3a3a3c;
  
  --card-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.4);
}

/* 新增 Ocean Midnight 主题 */
[data-theme="midnight"] {
  /* 基础三色 */
  --bg-color: #0f172a;         /* 深海军蓝背景 */
  --text-color: #e2e8f0;       /* 柔和灰白色文字 */
  --border-color: #334155;     /* 中灰蓝色边框 */

  /* 主色调 - 青蓝色 */
  --el-color-primary: #ee7e00;
  --el-color-primary-light-3: #ec8e23;
  --el-color-primary-light-5: #eba351;
  --el-color-primary-light-7: #deb88b;
  --el-color-primary-light-9: #e7dacb;
  --el-color-primary-rgb: 14, 165, 233 !important;
  
  /* 背景系统 */
  --el-bg-color: var(--bg-color) !important;
  --el-bg-color-page: #1e293b !important;      /* 稍浅页面背景 */
  --el-tabs-bg-color: #1e293b !important;      /* 稍浅标签页背景 */
  --el-bg-color-overlay: #1e293b !important;   /* 浮层背景 */

  /* 文字系统 */
  --el-text-color-primary: var(--text-color) !important;
  --el-text-color-regular: #cbd5e1 !important; /* 次级文字 */
  --el-text-color-secondary: #94a3b8 !important; /* 三级文字 */
  
  /* 边框系统 */
  --el-border-color: var(--border-color) !important;
  --el-border-color-light: #475569 !important; /* 更浅边框 */
  --el-border-color-lighter: #64748b !important;

  /* 组件特定 */
  --el-button-bg-color: #1e40af !important;     /* 深蓝色按钮 */
  --el-input-bg-color: #1e293b !important;      /* 输入框背景 */
  --el-menu-bg-color: #0f172a !important;       /* 菜单背景 */
  --el-table-bg-color: #0f172a !important;      /* 表格背景 */
  --el-tag-bg-color: rgba(14, 165, 233, 0.15) !important; /* 半透明标签 */
  
  /* 状态颜色 */
  --el-color-success: #22c55e !important;       /* 鲜绿色 */
  --el-color-warning: #ebd263 !important;
  --el-color-danger: #ef4444 !important;        /* 亮红色 */
  --el-color-info: #8b5cf6 !important;          /* 紫罗兰色 */
  
  /* 阴影效果 */
  --el-box-shadow-light: 0 4px 16px rgba(2, 132, 199, 0.2) !important; /* 蓝色调阴影 */
  --card-shadow: 0 4px 12px rgba(14, 165, 233, 0.15); /* 卡片发光效果 */

  /* 输入框系统 */
  --el-input-text-color: var(--text-color);
  --el-input-placeholder-color: #94a3b8;
  --el-input-hover-border-color: var(--el-color-primary-light-5);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-disabled-bg-color: #1e293b;

  /* 代码块 */
  --code-bg: #1e293b;
  --code-border: #334155;
}

/* 配套代码高亮主题 */
[data-theme="midnight"] {
  --hljs-text: #e2e8f0;
  --hljs-bg: #1e293b;
  --hljs-border: rgba(99, 102, 241, 0.2);
  --hljs-keyword: #818cf8;        /* 薰衣草紫 */
  --hljs-string: #0ea5e9;         /* 主色青蓝 */
  --hljs-number: #22d3ee;         /* 青色 */
  --hljs-comment: #94a3b8;        /* 灰蓝色 */
  --hljs-title: #67e8f9;          /* 亮青色 */
  --hljs-built_in: #c084fc;       /* 浅紫色 */
  --hljs-literal: #f472b6;        /* 粉红色 */
  --hljs-class: #38bdf8;          /* 浅青蓝 */
  --hljs-function: #60a5fa;       /* 钴蓝色 */
  --hljs-params: #a5f3fc;         /* 水青色 */
  --hljs-attr: #34d399;           /* 翡翠绿 */
}

/* 多巴胺主题 - 高饱和度愉悦配色 */
[data-theme="neon"] {
  /* 基础三色 */
  --bg-color: #1a0933;          /* 深紫罗兰背景（增强鲜艳色对比） */
  --text-color: #f0f0ff;        /* 柔光白文字 */
  --border-color: #6a45d1;      /* 霓虹紫边框 */

  /* 主色调 - 荧光粉 */
  --el-color-primary: #ff2d95;  /* 高饱和品红 */
  --el-color-primary-light-3: #ff5eaa;
  --el-color-primary-light-5: #ff8fc0;
  --el-color-primary-light-7: #ffc0d6;
  --el-color-primary-rgb: 255, 45, 149 !important;
  
  /* 背景系统 */
  --el-bg-color: var(--bg-color) !important;
  --el-bg-color-page: #27104e !important;      /* 渐变紫色 */
  --el-tabs-bg-color: #27104e !important;      /* 渐变紫色 */
  --el-bg-color-overlay: #351f63 !important;   /* 霓虹灯牌效果 */

  /* 文字系统 */
  --el-text-color-primary: var(--text-color) !important;
  --el-text-color-regular: #d6c2ff !important; /* 薰衣草紫 */
  --el-text-color-secondary: #a98fff !important; 

  /* 边框系统 */
  --el-border-color: var(--border-color) !important;
  --el-border-color-light: #8d6de9 !important; /* 亮紫色 */
  --el-border-color-lighter: #b9a0ff !important;

  /* 组件特定 */
  --el-button-bg-color: #ff2d95 !important;    /* 荧光粉按钮 */
  --el-input-bg-color: #2d1b5b !important;     /* 深紫晶背景 */
  --el-menu-bg-color: rgba(26, 9, 51, 0.85) !important;
  --el-table-bg-color: #1a0933 !important;
  --el-tag-bg-color: rgba(255, 45, 149, 0.2) !important;
  
  /* 多巴胺特色状态色 */
  --el-color-success: #39ff14 !important;     /* 荧光绿 */
  --el-color-warning: #ffde59 !important;      /* 柠檬黄 */
  --el-color-danger: #ff2a6d !important;       /* 电光粉 */
  --el-color-info: #05d9e8 !important;         /* 青蓝色 */
  
  /* 发光效果阴影 */
  --el-box-shadow-light: 0 0 15px rgba(255, 45, 149, 0.4), 
                         0 0 30px rgba(101, 0, 255, 0.3) !important;
  --card-shadow: 0 0 20px rgba(255, 45, 149, 0.3), 
                 0 0 40px rgba(101, 0, 255, 0.2);

  /* 输入框系统 */
  --el-input-text-color: #f0f0ff;
  --el-input-placeholder-color: #b9a0ff;
  --el-input-hover-border-color: #ff5eaa;
  --el-input-focus-border-color: #ff2d95;
  --el-input-disabled-bg-color: #2a1150;

  /* 代码块 */
  --code-bg: #2d1b5b;
  --code-border: #6a45d1;
}

/* 配套代码高亮主题 */
[data-theme="neon"] {
  --hljs-text: #f0f0ff;
  --hljs-bg: #2d1b5b;
  --hljs-border: rgba(106, 69, 209, 0.4);
  --hljs-keyword: #ff2d95;       /* 荧光粉 */
  --hljs-string: #39ff14;        /* 荧光绿 */
  --hljs-number: #ffde59;        /* 柠檬黄 */
  --hljs-comment: #b9a0ff;       /* 薰衣草紫 */
  --hljs-title: #05d9e8;         /* 青蓝 */
  --hljs-built_in: #ff2a6d;      /* 电光粉 */
  --hljs-literal: #ff8fc0;       /* 浅品红 */
  --hljs-class: #ff5eaa;         /* 主色渐变 */
  --hljs-function: #8d6de9;      /* 亮紫色 */
  --hljs-params: #ffde59;        /* 柠檬黄 */
  --hljs-attr: #05d9e8;          /* 青蓝 */
}

/* 棉花糖主题 */
[data-theme="marshmallow"] {
  /* 基础三要素 */
  --bg-color: #e6f7ff;         /* 极浅水蓝背景 */
  --text-color: #2e2a36;       /* 深紫灰色文字 */
  --border-color: #c2d6e3;     /* 浅灰蓝色边框 */

  /* 主色调 - 樱花粉 */
  --el-color-primary: #f5a5c3 !important;
  --el-color-primary-light-3: #f8bbd3;
  --el-color-primary-light-5: #fad1e1;
  --el-color-primary-light-7: #fde8f0;
  --el-color-primary-rgb: 245, 165, 195 !important;
  
  /* 辅助色 - 浅水蓝 */
  --el-color-info: #99d8e0 !important;
  --el-color-info-light-3: #b3e3e8;
  --el-color-info-light-5: #cceef0;
  
  /* 背景系统 */
  --el-bg-color: var(--bg-color) !important;
  --el-bg-color-page: #d4f1f5 !important;      /* 更亮的水蓝 */
  --el-tabs-bg-color: #d4f1f5 !important;      /* 更亮的水蓝 */
  --el-bg-color-overlay: #ffffff !important;   /* 纯白浮层 */

  /* 文字系统 */
  --el-text-color-primary: #3a2e4a !important;  /* 深紫罗兰 */
  --el-text-color-regular: #5a4e6a !important;
  --el-text-color-secondary: #8c7b99 !important;
  
  /* 边框系统 */
  --el-border-color: #e0c4d3 !important;       /* 浅粉灰 */
  --el-border-color-light: #f0dde6 !important;
  --el-border-color-lighter: #f8eef3 !important;

  /* 组件设计 */
  --el-button-bg-color: var(--el-color-primary) !important;
  --el-input-bg-color: #ffffff !important;      /* 纯白输入框 */
  --el-menu-bg-color: #f9f2f5 !important;       /* 极浅粉背景 */
  --el-table-bg-color: #ffffff !important;
  --el-tag-bg-color: rgba(245, 165, 195, 0.15) !important;
  
  /* 状态颜色（增强对比） */
  --el-color-success: #8bd48d !important;       /* 薄荷绿 */
  --el-color-warning: #ffd166 !important;       /* 奶油黄 */
  --el-color-danger: #ff6b6b !important;        /* 珊瑚红 */
  
  /* 阴影效果 */
  --el-box-shadow-light: 0 4px 16px rgba(245, 165, 195, 0.2) !important;
  --card-shadow: 0 4px 12px rgba(153, 216, 224, 0.15); /* 水蓝阴影 */

  /* 输入框系统 */
  --el-input-text-color: #4a3b5a;
  --el-input-placeholder-color: #c0a4b8;
  --el-input-hover-border-color: var(--el-color-primary-light-3);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-disabled-bg-color: #f8f5fa;

  /* 代码块 */
  --code-bg: #ffffff;
  --code-border: #f0dde6;
}

/* 配套糖果色代码高亮 */
[data-theme="marshmallow"] {
  --hljs-text: #4a3b5a;
  --hljs-bg: #fff5f9;
  --hljs-border: #f8d7e6;
  --hljs-keyword: #f5a5c3;        /* 主色粉 */
  --hljs-string: #99d8e0;         /* 水蓝色 */
  --hljs-number: #ff9aa2;         /* 珊瑚粉 */
  --hljs-comment: #c0a4b8;        /* 灰紫色 */
  --hljs-title: #8bd48d;          /* 薄荷绿 */
  --hljs-built_in: #ffd166;       /* 奶油黄 */
  --hljs-literal: #ff6b6b;        /* 珊瑚红 */
  --hljs-class: #c9a2e0;          /* 淡紫色 */
  --hljs-function: #a5d8f5;       /* 浅天蓝 */
  --hljs-params: #7b8c9d;         /* 灰蓝色 */
  --hljs-attr: #76c893;           /* 翡翠绿 */
}

/* =========================================
   NEW THEME: RAINBOW (Holographic Prism)
   ========================================= */

[data-theme="rainbow"] {
  /* --- 核心背景：珍珠母贝质感的微光渐变 --- */
  --bg-color: #f8f9fe;
  --bg-gradient: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
  
  /* --- 文字系统：深邃的靛青色，而非纯黑 --- */
  --text-color: #43436a; 
  --text-secondary: #7e7e9e;
  
  /* --- 边框：半透明的炫彩 --- */
  --border-color: rgba(255, 255, 255, 0.6);
  --border-gradient: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);

  /* --- 核心主色：梦幻紫 (作为锚点颜色) --- */
  --el-color-primary: #845ec2; 
  --el-color-primary-light-3: #9b7ad6;
  --el-color-primary-light-5: #b397e0;
  --el-color-primary-light-7: #ccb5eb;
  --el-color-primary-light-9: #e6d6f5;
  --el-color-primary-rgb: 132, 94, 194 !important;

  /* --- 全局组件覆盖 --- */
  --el-bg-color: rgba(255, 255, 255, 0.85) !important; /* 卡片背景半透明 */
  --el-bg-color-page: #f4f6f9 !important;
  --el-bg-color-overlay: #ffffff !important;
  
  --el-text-color-primary: var(--text-color) !important;
  --el-text-color-regular: #5e5e80 !important;
  --el-text-color-secondary: var(--text-secondary) !important;
  
  --el-border-color: #e6e8f0 !important;
  --el-border-color-light: #f0f2f7 !important;

  /* --- 特殊组件颜色 --- */
  --el-button-bg-color: var(--el-color-primary) !important;
  --el-input-bg-color: rgba(255, 255, 255, 0.9) !important;
  --el-menu-bg-color: transparent !important; /* 菜单透明以显示背景 */
  --el-tag-bg-color: rgba(132, 94, 194, 0.1) !important;

  /* --- 状态颜色 (采用马卡龙色系) --- */
  --el-color-success: #00b894 !important; /* 薄荷绿 */
  --el-color-warning: #fdcb6e !important; /* 芥末黄 */
  --el-color-danger: #ff7675 !important;  /* 柔和红 */
  --el-color-info: #74b9ff !important;    /* 天空蓝 */

  /* --- 核心特征：彩色弥散阴影 --- */
  --el-box-shadow-light: 0 8px 32px 0 rgba(132, 94, 194, 0.15);
  --card-shadow: 0 10px 40px -10px rgba(161, 140, 209, 0.3);
  
  /* --- 代码块 --- */
  --code-bg: #ffffff;
  --code-border: #e6e8f0;
  
  /* 定义彩虹渐变变量供后续使用 */
  --rainbow-gradient: linear-gradient(120deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871);
}

/* -----------------------------------
   Rainbow 主题专属样式覆盖
   ----------------------------------- */

/* 1. 全局背景动画效果 */
[data-theme="rainbow"] body {
  background: 
    radial-gradient(at 0% 0%, hsla(253,16%,7%,0) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(225,39%,30%,0) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(339,49%,30%,0) 0, transparent 50%);
  background-color: #f3f4f6;
  background-image: 
    radial-gradient(at 80% 0%, hsla(189,100%,56%,0.1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355,100%,93%,0.1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340,100%,76%,0.1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22,100%,77%,0.1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(240,100%,70%,0.1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343,100%,76%,0.1) 0px, transparent 50%);
  background-attachment: fixed; /* 固定背景，营造高级感 */
}

/* 2. 侧边栏：磨砂玻璃 */
[data-theme="rainbow"] .sidebar {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 3. 卡片系统：浮光效果 */
[data-theme="rainbow"] .provider-card, 
[data-theme="rainbow"] .vendor-card,
[data-theme="rainbow"] .settings-form,
[data-theme="rainbow"] .highlight-block,
[data-theme="rainbow"] .highlight-block-reasoning {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 
              0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
}

/* 卡片悬停：彩虹光晕 */
[data-theme="rainbow"] .provider-card:hover,
[data-theme="rainbow"] .vendor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(132, 94, 194, 0.15), 
              0 5px 15px rgba(255, 150, 113, 0.1) !important;
  border-color: #d65db1 !important;
}

/* 4. 按钮：流光渐变 */
[data-theme="rainbow"] .el-button--primary {
  background-image: linear-gradient(to right, #845ec2 0%, #b39cd0 51%, #845ec2 100%) !important;
  background-size: 200% auto !important;
  border: none !important;
  transition: 0.5s !important;
  box-shadow: 0 4px 15px 0 rgba(132, 94, 194, 0.35);
}

[data-theme="rainbow"] .el-button--primary:hover {
  background-position: right center !important;
  box-shadow: 0 4px 15px 0 rgba(132, 94, 194, 0.5);
  transform: scale(1.02);
}

/* 5. 用户消息气泡：全息色彩 */
[data-theme="rainbow"] .message.user .message-content {
  background: var(--rainbow-gradient) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(255, 111, 145, 0.3) !important;
  border: none !important;
}

/* 6. AI 消息气泡：纯净白 + 炫彩边框 */
[data-theme="rainbow"] .message.assistant .message-content {
  background: #ffffff !important;
  border: 1px solid transparent !important;
  background-image: linear-gradient(#fff, #fff), var(--rainbow-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

/* 7. 选中状态优化 */
[data-theme="rainbow"] .el-menu-item.is-active {
  background: linear-gradient(90deg, rgba(132, 94, 194, 0.1), transparent) !important;
  color: #845ec2 !important;
  border-left: 3px solid #845ec2;
}

/* 8. 滚动条：细长的彩虹 */
[data-theme="rainbow"] ::-webkit-scrollbar-thumb {
  background-image: linear-gradient(to bottom, #845ec2, #ff9671);
  border-radius: 10px;
}

/* =========================================
   Rainbow 主题代码高亮 (Light Elegant)
   ========================================= */
[data-theme="rainbow"] {
  --hljs-text: #43436a;
  --hljs-bg: #fdfdff;
  --hljs-border: rgba(132, 94, 194, 0.2);
  
  /* 采用高明度的光谱色 */
  --hljs-keyword: #845ec2;        /* 皇家紫 */
  --hljs-string: #00b894;         /* 宝石绿 */
  --hljs-number: #ff9671;         /* 珊瑚橘 */
  --hljs-comment: #b0b0d0;        /* 雾霾蓝灰 */
  --hljs-title: #d65db1;          /* 兰花紫 */
  --hljs-built_in: #2c98f0;       /* 海洋蓝 */
  --hljs-literal: #ff6f91;        /* 亮粉红 */
  --hljs-class: #f9f871;          /* 柠檬黄(需深色背景) -> 调整为深金黄 */
  --hljs-class: #f9c440;          /* 金黄色 */
  --hljs-function: #845ec2;
  --hljs-params: #4b4b4b;
  --hljs-attr: #0097e6;
}


/* 沙漠主题 */
[data-theme="desert"] {
    /* 基础三色 */
    --bg-color: #f9f2e7;         /* 浅沙色背景 */
    --text-color: #5c3d2e;       /* 深棕色文字 */
    --border-color: #d7b98e;     /* 浅褐色边框 */
    
    /* 主色调 - 沙丘金/陶土橙 */
    --el-color-primary: #d98236; /* 陶土橙 */
    --el-color-primary-light-3: #e39e5d;
    --el-color-primary-light-5: #edba84;
    --el-color-primary-light-7: #f7d6ac;
    --el-color-primary-rgb: 217, 130, 54 !important;
    
    /* 背景系统 */
    --el-bg-color: var(--bg-color) !important;
    --el-bg-color-page: #f5e8c9 !important;      /* 浅沙色 */
    --el-tabs-bg-color: #f5e8c9 !important;      /* 浅沙色 */
    --el-bg-color-overlay: #f0e0b5 !important;   /* 稍深沙色 */
    
    /* 文字系统 */
    --el-text-color-primary: var(--text-color) !important;
    --el-text-color-regular: #7d5c3f !important; /* 次级文字 */
    --el-text-color-secondary: #9e7e5f !important; /* 三级文字 */
    
    /* 边框系统 */
    --el-border-color: var(--border-color) !important;
    --el-border-color-light: #c9a87c !important; /* 更浅边框 */
    --el-border-color-lighter: #bb9662 !important;
    
    /* 组件特定 */
    --el-button-bg-color: #d98236 !important;     /* 陶土橙按钮 */
    --el-input-bg-color: #f5e8c9 !important;      /* 输入框背景 */
    --el-menu-bg-color: #f0e0b5 !important;       /* 菜单背景 */
    --el-table-bg-color: #f9f2e7 !important;      /* 表格背景 */
    --el-tag-bg-color: rgba(217, 130, 54, 0.15) !important; /* 半透明标签 */
    
    /* 状态颜色 */
    --el-color-success: #8a9b52 !important;       /* 沙漠绿 */
    --el-color-warning: #e6a23c !important;       /* 琥珀色 */
    --el-color-danger: #c4564a !important;        /* 砖红色 */
    --el-color-info: #a87c52 !important;          /* 胡桃木色 */
    
    /* 阴影效果 */
    --el-box-shadow-light: 0 2px 10px rgba(217, 130, 54, 0.2) !important;
    --card-shadow: 0 4px 12px rgba(187, 150, 98, 0.15);
    
    /* 输入框系统 */
    --el-input-text-color: var(--text-color);
    --el-input-placeholder-color: #9e7e5f;
    --el-input-hover-border-color: var(--el-color-primary-light-3);
    --el-input-focus-border-color: var(--el-color-primary);
    --el-input-disabled-bg-color: #f0e0b5;
    
    /* 代码块 */
    --code-bg: #f5e8c9;
    --code-border: #d7b98e;
    
    /* 特殊装饰色 */
    --sunset-red: #c4564a;
    --sunset-orange: #e39e5d;
    --cactus-green: #8a9b52;
}

/* 派对主题 */
[data-theme="party"] {
  /* 基础三色 */
  --bg-color: #fffbf0;           /* 暖白/奶油色背景 */
  --text-color: #374151;         /* 深灰蓝色文字 */
  --border-color: #e5e7eb;       /* 浅灰色边框 */

  /* 主色调 - 活力橙 */
  --el-color-primary: #ed7d00 !important;
  --el-color-primary-light-3: #f59e0b;
  --el-color-primary-light-5: #fbbf24;
  --el-color-primary-light-7: #fde68a;
  --el-color-primary-rgb: 237, 125, 0 !important;
  
  /* 次要色调 - 深海蓝 */
  --el-color-info: #21859b !important;
  --el-color-info-light-3: #0ea5e9;
  --el-color-info-light-5: #38bdf8;
  --el-color-info-light-7: #7dd3fc;
  --el-color-info-rgb: 33, 133, 155 !important;

  /* 辅助色调 - 暖棕色 */
  --el-color-warning: #d97706 !important;
  --el-color-warning-light-3: #f59e0b;
  --el-color-warning-light-5: #fbbf24;

  /* 背景系统 */
  --el-bg-color: var(--bg-color) !important;
  --el-bg-color-page: #fef7e6 !important;      /* 更暖的米黄色页面背景 */
  --el-tabs-bg-color: #fef7e6 !important;      /* 米黄色标签页背景 */
  --el-bg-color-overlay: #ffffff !important;   /* 纯白浮层背景 */

  /* 文字系统 */
  --el-text-color-primary: #1f2937 !important;  /* 深炭灰色 */
  --el-text-color-regular: #4b5563 !important; /* 中灰色 */
  --el-text-color-secondary: #6b7280 !important; /* 浅灰色 */
  
  /* 边框系统 */
  --el-border-color: var(--border-color) !important;
  --el-border-color-light: #d1d5db !important; /* 中等灰色边框 */
  --el-border-color-lighter: #e5e7eb !important;

  /* 组件特定 */
  --el-button-bg-color: var(--el-color-primary) !important;
  --el-input-bg-color: #ffffff !important;      /* 纯白输入框背景 */
  --el-menu-bg-color: #fef7e6 !important;       /* 米黄色菜单背景 */
  --el-table-bg-color: #ffffff !important;      /* 纯白表格背景 */
  --el-tag-bg-color: rgba(237, 125, 0, 0.12) !important; /* 半透明橙色标签 */
  
  /* 状态颜色 */
  --el-color-success: #059669 !important;       /* 深绿色 */
  --el-color-warning: #d97706 !important;       /* 暖棕色 */
  --el-color-danger: #dc2626 !important;        /* 深红色 */
  
  /* 阴影效果 */
  --el-box-shadow-light: 0 4px 16px rgba(237, 125, 0, 0.18) !important;
  --card-shadow: 0 4px 12px rgba(33, 133, 155, 0.12); /* 青蓝色调阴影 */

  /* 输入框系统 */
  --el-input-text-color: var(--el-text-color-primary);
  --el-input-placeholder-color: #9ca3af;
  --el-input-hover-border-color: var(--el-color-primary-light-5);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-disabled-bg-color: #f9fafb;

  /* 导航和菜单 */
  --el-menu-text-color: #4b5563;
  --el-menu-hover-bg-color: rgba(237, 125, 0, 0.08);
  --el-menu-active-bg-color: rgba(237, 125, 0, 0.15);

  /* 代码块 */
  --code-bg: #fef7e6;
  --code-border: #e5e7eb;
}

/* 配套代码高亮主题 */
[data-theme="party"] {
  --hljs-text: #374151;
  --hljs-bg: #fef7e6;
  --hljs-border: rgba(237, 125, 0, 0.2);
  --hljs-keyword: #ed7d00;        /* 活力橙 */
  --hljs-string: #21859b;         /* 深海蓝 */
  --hljs-number: #d97706;         /* 暖棕色 */
  --hljs-comment: #9ca3af;        /* 中灰色 */
  --hljs-title: #059669;          /* 深绿色 */
  --hljs-built_in: #dc2626;       /* 深红色 */
  --hljs-literal: #f59e0b;        /* 琥珀色 */
  --hljs-class: #0ea5e9;          /* 青蓝色 */
  --hljs-function: #4b5563;       /* 中灰色 */
  --hljs-params: #6b7280;         /* 浅灰色 */
  --hljs-attr: #10b981;           /* 翡翠绿 */
}


/* 沙漠主题代码高亮 */
[data-theme="desert"] {
    --hljs-text: #5c3d2e;
    --hljs-bg: #f5e8c9;
    --hljs-border: rgba(187, 150, 98, 0.3);
    --hljs-keyword: #c4564a;        /* 日落红 */
    --hljs-string: #8a9b52;         /* 仙人掌绿 */
    --hljs-number: #d98236;         /* 主色陶土橙 */
    --hljs-comment: #9e7e5f;        /* 胡桃木色 */
    --hljs-title: #a87c52;          /* 胡桃木深色 */
    --hljs-built_in: #bb9662;      /* 沙丘金 */
    --hljs-literal: #e39e5d;        /* 日落橙 */
    --hljs-class: #d98236;          /* 主色 */
    --hljs-function: #bb9662;       /* 沙丘金 */
    --hljs-params: #7d5c3f;         /* 深棕色 */
    --hljs-attr: #8a9b52;           /* 沙漠绿 */
}

:root {
    /* 水墨风基础变量 */
    --ink-primary: #2c3e50;        /* 墨黑 */
    --ink-secondary: #5d6d7e;      /* 灰墨 */
    --ink-accent: #7f8c8d;          /* 淡墨 */
    --ink-light: #ecf0f1;           /* 宣纸白 */
    --ink-highlight: #3498db;       /* 青花点缀 */
    --ink-danger: #e74c3c;         /* 朱砂红 */
    --ink-success: #27ae60;        /* 竹青 */
    --ink-warning: #f39c12;        /* 琥珀黄 */
    
    /* 背景纹理 */
    --ink-bg-texture: linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
}

[data-theme="ink"] {
    /* 基础三色 */
    --bg-color: #f5f7fa;             /* 宣纸白背景 */
    --text-color: #2c3e50;           /* 墨黑色文字 */
    --border-color: #d5dbdb;         /* 淡墨灰边框 */
    
    /* 主色调 - 墨黑渐变 */
    --el-color-primary: var(--ink-primary);
    --el-color-primary-light-3: #3d566e;
    --el-color-primary-light-5: #4f6a85;
    --el-color-primary-light-7: #6b839d;
    --el-color-primary-rgb: 44, 62, 80 !important;
    
    /* 背景系统 */
    --el-bg-color: var(--bg-color) !important;
    --el-bg-color-page: #eef2f6 !important;       /* 宣纸纹理背景 */
    --el-tabs-bg-color: #eef2f6 !important;       /* 宣纸纹理背景 */
    --el-bg-color-overlay: #ffffff !important;    /* 浮层背景 */
    background-image: var(--ink-bg-texture);
    background-size: 20px 20px;
    
    /* 文字系统 */
    --el-text-color-primary: var(--text-color) !important;
    --el-text-color-regular: #5d6d7e !important;   /* 灰墨色 */
    --el-text-color-secondary: #7f8c8d !important; /* 淡墨色 */
    
    /* 边框系统 */
    --el-border-color: var(--border-color) !important;
    --el-border-color-light: #c5cdd3 !important;   /* 更淡墨色 */
    --el-border-color-lighter: #e1e4e8 !important;
    
    /* 组件特定 */
    --el-button-bg-color: #ffffff !important;      /* 宣纸白按钮 */
    --el-input-bg-color: #ffffff !important;       /* 输入框背景 */
    --el-menu-bg-color: #f5f7fa !important;       /* 菜单背景 */
    --el-table-bg-color: #ffffff !important;       /* 表格背景 */
    --el-tag-bg-color: rgba(44, 62, 80, 0.1) !important; /* 半透明标签 */
    
    /* 状态颜色 */
    --el-color-success: var(--ink-success) !important;     /* 竹青色 */
    --el-color-warning: var(--ink-warning) !important;     /* 琥珀色 */
    --el-color-danger: var(--ink-danger) !important;       /* 朱砂红 */
    --el-color-info: var(--ink-highlight) !important;      /* 青花色 */
    
    /* 阴影效果 */
    --el-box-shadow-light: 0 2px 8px rgba(44, 62, 80, 0.1) !important; 
    --card-shadow: 0 4px 12px rgba(44, 62, 80, 0.08); 
    
    /* 输入框系统 */
    --el-input-text-color: var(--text-color);
    --el-input-placeholder-color: #a6b1be;
    --el-input-hover-border-color: var(--el-color-primary-light-5);
    --el-input-focus-border-color: var(--el-color-primary);
    --el-input-disabled-bg-color: #f0f3f7;
    
    /* 代码块 */
    --code-bg: #ffffff;
    --code-border: #e1e4e8;
    
    /* 水墨特色元素 */
    --ink-brush-stroke: linear-gradient(to right, 
        transparent 0%, 
        rgba(44, 62, 80, 0.2) 30%, 
        rgba(44, 62, 80, 0.5) 50%, 
        rgba(44, 62, 80, 0.2) 70%, 
        transparent 100%);
}

/* 配套代码高亮主题 */
[data-theme="ink-wash"] {
    --hljs-text: var(--text-color);
    --hljs-bg: #ffffff;
    --hljs-border: rgba(52, 152, 219, 0.1);
    --hljs-keyword: #8e44ad;        /* 紫藤色 */
    --hljs-string: var(--ink-danger); /* 朱砂红 */
    --hljs-number: var(--ink-success); /* 竹青色 */
    --hljs-comment: #95a5a6;        /* 烟灰色 */
    --hljs-title: var(--ink-highlight); /* 青花色 */
    --hljs-built_in: var(--ink-primary); /* 墨黑色 */
    --hljs-literal: var(--ink-warning); /* 琥珀色 */
    --hljs-class: #16a085;          /* 碧玉色 */
    --hljs-function: #2980b9;       /* 靛青色 */
    --hljs-params: #d35400;         /* 赭石色 */
    --hljs-attr: #27ae60;           /* 竹青色 */
}


/* 修改默认按钮基础样式 */
.el-button--default {
  /* 通用样式 */
  background-color: var(--bg-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;

  /* 悬停状态 */
  &:hover {
    background-color: var(--hover-bg) !important;
    border-color: var(--hover-border) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }

  /* 激活状态 */
  &:active {
    transform: translateY(0);
    box-shadow: none;
  }

  /* 禁用状态 */
  &.is-disabled {
    opacity: 0.6;
    filter: grayscale(0.3);
  }

  /* 图标样式 */
  .el-icon {
    transition: transform 0.2s;
    font-size: 18px;
  }

  &:hover .el-icon {
    transform: scale(1.1);
  }
}

.el-input-group__append, .el-input-group__prepend {
  border: none;
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}
body {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
  transition: 
    background-color var(--transition-duration) var(--transition-function),
    color var(--transition-duration) var(--transition-function);
  margin: 0;
  font-family: var(--el-font-family);
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow: hidden;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 按钮 */
.el-button {
  transition: all var(--transition-duration) !important;
}

.sidebar {
  background: var(--bg-color) !important;
  border-right-color: var(--border-color) !important;
}

.el-menu {
--el-menu-bg-color: var(--bg-color);
--el-menu-text-color: var(--text-color);
--el-menu-hover-bg-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
--el-menu-active-color: var(--primary-color);
}

.el-menu-item {
  background-color: var(--el-bg-color-page)!important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.el-menu-item:hover {
  background: var(--el-menu-hover-bg-color) !important;
  transform: translateX(4px);
}

/* 输入系统全局适配 */
.el-input {
--el-input-bg-color: var(--bg-color)!important;
--el-input-text-color: var(--text-color)!important;
}

.el-input__inner {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
  
  &::placeholder {
    color: color-mix(in srgb, var(--text-color) 50%, transparent) !important;
  }
}

.el-textarea {
--el-input-bg-color: var(--bg-color)!important;
--el-input-text-color: var(--text-color)!important;
}
.el-textarea__inner {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;

  &::placeholder {
    color: color-mix(in srgb, var(--text-color) 50%, transparent) !important;
  }
}

/* 下拉菜单适配 */
.el-select {
  --el-select-input-focus-border-color: var(--primary-color)!important;

.el-select__wrapper {
  background: var(--bg-color) !important;
  box-shadow: 0 0 0 1px var(--border-color) !important;
  
  &:hover {
  box-shadow: 0 0 0 1px var(--primary-color) !important;
  }
  
  .el-select__placeholder {
  color: color-mix(in srgb, var(--text-color) 50%, transparent) !important;
  }
}
}
/* 下拉菜单内部适配 */
.el-select-dropdown {
  --el-select-dropdown-border-color: var(--border-color)!important;
  --el-select-dropdown-bg-color: var(--bg-color)!important;
  --el-select-dropdown-text-color: var(--text-color)!important;
  --el-select-dropdown-hover-bg-color: color-mix(in srgb, var(--primary-color) 15%, transparent)!important;
  --el-select-dropdown-active-bg-color: var(--primary-color)!important;
}

.el-option {
  &__content {
  background: var(--el-bg-color) !important;
  color: var(--el-text-color) !important;
  }

  &__is-active {
  background: var(--el-primary-color) !important;
  color: var(--bg-color) !important;
  }
}

.el-option-group__title {
  color: var(--text-color) !important;
}

.el-option-group__label {
  color: var(--text-color) !important;
}

.el-option-group__options {
  .el-option {
  &__content {
    color: var(--text-color) !important;
  }

  &__is-active {
    color: var(--el-bg-color) !important;
  }
  }
}

.el-alert {
  --el-alert-bg-color: var(--bg-color) !important;
  --el-alert-text-color: var(--text-color) !important;
}

/* 开关控件适配 */
.el-switch {
--el-switch-on-color: var(--primary-color);
--el-switch-off-color: var(--border-color);
}

/* 弹窗适配 */
.el-dialog {


  background: var(--bg-color) !important;
  border: 1px solid var(--border-color) !important;

  .el-dialog__header {
    border-bottom: 1px solid var(--border-color) !important;
  }

  .el-dialog__title {
    color: var(--text-color) !important;
  }
}

.knowledge-dialog-content {
    /* 隐藏横向滚动条 */
  overflow-x: hidden;
  
}

/* 滑动条深度适配 */
.el-slider {
--el-slider-main-bg-color: var(--primary-color);
--el-slider-runway-bg-color: color-mix(in srgb, var(--border-color) 30%, transparent);

.el-slider__button {
  border-color: var(--primary-color) !important;
  background: var(--bg-color) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
}
/* 表格 */
.el-table {
  --el-table-header-bg-color: var(--el-bg-color-page);
  --el-table-tr-bg-color: var(--el-bg-color);
  --el-table-border-color: var(--el-border-color);
}
/* 代码块 */
.code-block {
  background-color: var(--code-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
}
[data-theme="light"] {
  /* 基础三要素 */
  --hljs-text: #24292e; 
  --hljs-bg: #f6f8fa;
  --hljs-border: rgba(27,31,36,0.15);
  /* 核心语法 */
  --hljs-keyword: #d73a49;      
  --hljs-string: #032f62;      
  --hljs-number: #005cc5;      
  --hljs-comment: #6a737d;   
  /* 结构类元素 */
  --hljs-title: #2f6f9d;        
  --hljs-built_in: #6f42c1;    
  --hljs-literal: #cf222e;       
  --hljs-class: #8250df;         
  --hljs-function: #6639ba;    
  /* 辅助元素 */
  --hljs-params: #24292e;       
  --hljs-attr: #116329;        
}
/* 深色模式覆盖 */
[data-theme="dark"] {
  --hljs-text: #e1e4e8;
  --hljs-bg: #2d333b;
  --hljs-border: rgba(205,217,229,0.1);
  --hljs-keyword: #ff7b72;
  --hljs-string: #79c0ff;
  --hljs-number: #79c0ff;
  --hljs-comment: #8b949e;
  --hljs-title: #a5d6ff;
  --hljs-built_in: #d2a8ff;
  --hljs-literal: #ffa198;
  --hljs-class: #d2a8ff;
  --hljs-function: #d2a8ff;
  --hljs-params: #e1e4e8;
  --hljs-attr: #7ee787;
}
.hljs {
  color: var(--hljs-text) !important;
  background: var(--code-bg-color) !important; /* 与主题色一致 */
  padding: 1em !important;
  border-radius: 8px; /* 添加圆角 */
  transition: color 0.3s;
}

.hljs .hljs-comment,
.hljs .hljs-quote {
  color: var(--hljs-comment);
}

.hljs .hljs-keyword,
.hljs .hljs-selector-tag,
.hljs .hljs-subst {
  color: var(--hljs-keyword);
}

.hljs .hljs-number,
.hljs .hljs-literal,
.hljs .hljs-variable,
.hljs .hljs-template-variable,
.hljs .hljs-tag .hljs-attr {
  color: var(--hljs-number);
}

.hljs .hljs-string,
.hljs .hljs-doctag {
  color: var(--hljs-string);
}

.hljs .hljs-title,
.hljs .hljs-section {
  color: var(--hljs-title);
}

.hljs .hljs-subst {
  font-weight: normal;
}

.hljs .hljs-type,
.hljs .hljs-class .hljs-title {
  color: var(--hljs-built_in);
}

.hljs .hljs-attribute,
.hljs .hljs-name,
.hljs .hljs-tag {
  color: var(--hljs-attr);
}

.hljs .hljs-symbol,
.hljs .hljs-bullet,
.hljs .hljs-link {
  color: var(--hljs-literal);
}

.hljs .hljs-regexp,
.hljs .hljs-meta .hljs-keyword,
.hljs .hljs-selector-attr, .hljs .hljs-selector-pseudo {
  color: var(--hljs-function);
}

.hljs .hljs-addition {
  color: #55a532;
  background-color: #eaffea;
}

.hljs .hljs-deletion {
  color: #bd2c00;
  background-color: #ffecec;
}

.hljs .hljs-link {
  text-decoration: underline;
}

.hljs .hljs-emphasis {
  font-style: italic;
}

/* 文件列表 */
.compact-file-item {
  background-color: var(--file-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
}
/* 卡片系统 */
.provider-card {
  background-color: var(--card-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  box-shadow: var(--el-box-shadow-light) !important;
}
/* 切换按钮 */
.el-switch__core {
  background-color: var(--el-border-color) !important;
  border-color: var(--el-border-color) !important;
}
.el-switch.is-checked .el-switch__core {
  background-color: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
}
/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  background-color: var(--el-bg-color-page);
}
::-webkit-scrollbar-thumb {
  background-color: var(--el-border-color);
  border-radius: 3px;
}
/* Markdown内容 */
.markdown-body {
  color: var(--el-text-color-primary) !important;
}
.markdown-body table {
  background-color: transparent !important;
  border-color: var(--el-border-color) !important;
  color: var(--text-color);
  border-radius: 12px 12px 0 0 !important;
}

.markdown-body table::-webkit-scrollbar {
  width: 5px; /* 横向滚动条宽度（如果有横向滚动的话） */
  height: 5px; /* 纵向滚动条高度（虽然你这里主要是垂直滚动，但设置一下也可以统一样式） */
}

.markdown-body table th {
  background-color: var(--el-color-primary) !important;
  color: var(--el-bg-color-page) !important;
}
.markdown-body table td {
  background-color: var(--el-table-bg-color) !important;
  color: var(--el-text-color-primary) !important;
}
.markdown-body blockquote {
  border-left-color: var(--el-border-color) !important;
}
.markdown-body hr {
  border-color: var(--el-border-color) !important;
}
.markdown-body code {
  background-color: var(--code-bg-color) !important;
  color: var(--code-text-color) !important;
}
.markdown-body .code-block {
  padding: 0!important;
  margin: 0!important;
  border-radius: 8px!important;
}

.markdown-body code::-webkit-scrollbar {
  width: 5px; /* 横向滚动条宽度（如果有横向滚动的话） */
  height: 5px; /* 纵向滚动条高度（虽然你这里主要是垂直滚动，但设置一下也可以统一样式） */
}
.markdown-body th {
  background-color: var(--el-color-primary-light-9) !important;
}
/* 状态标签 */
.el-tag {
  background-color: var(--el-tag-bg-color) !important;
  border-color: var(--el-color-primary-light-7) !important;
}
/* 加载动画 */
.loading-spinner {
  color: var(--el-color-primary) !important;
}
/* 工具提示 */
.el-tooltip__popper {
  background-color: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  color: var(--el-text-color-primary) !important;
  box-shadow: var(--el-box-shadow-light) !important;
}



/* 顶部栏样式 */
.top-bar {
  background-color: var(--el-bg-color-page);
  padding: 0 16px !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  -webkit-app-region: drag;
}

.window-controls {
  display: flex;
  gap: 4px;
  -webkit-app-region: no-drag;
}

.top-bar-btn {
  height: 16px;
  width: 16px;
  padding: 0;
  color: var(--el-text-color) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0!important;
}

.top-bar-btn .el-icon {
  font-size: 12px;
  width: 12px;
  height: 12px;
}

.top-bar-btn:hover {
  background-color: var(--el-color-primary-light-3) !important;
}

/* 主容器样式 */
.main-container {
  flex: 1;
  overflow: hidden;
}

.el-aside {
  background-color: var(--el-bg-color-page)!important;
}


/* 侧边栏样式 */
.sidebar {
  background-color: var(--el-bg-color-page) !important;
  border-right: 1px solid var(--el-border-color-light);
  transition: width 0.3s;
  height: 100%;
  overflow: hidden;
  width: 200px;
}

.el-menu-vertical {
  border-right: none !important;
  overflow: hidden;
  width: 100% !important;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

/* 内容区样式 */
.content {
  padding: 20px;
  overflow-y: scroll; /* 强制显示滚动条，以便我们可以隐藏它 */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
  background-color: var(--el-bg-color-page);
}

.content::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* 聊天容器样式 */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
}

.chat-area {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  margin: 0;
  padding: 0;
  min-height: 0 !important; 
}

.messages-container {
  flex: 1;
  min-height: 0 !important; 
  overflow-y: auto;
  padding-bottom: 30px !important;
  padding: 20px;
  background-color: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 12px var(--el-box-shadow-light);
  scrollbar-width: 2px;
  overflow-anchor: none; 
}
/* Chrome, Edge, Safari 等 */
.messages-container::-webkit-scrollbar {
  width: 5px; /* 横向滚动条宽度（如果有横向滚动的话） */
  height: 5px; /* 纵向滚动条高度（虽然你这里主要是垂直滚动，但设置一下也可以统一样式） */
}

.messages-container::-webkit-scrollbar-thumb {
  border-radius: 2px; /* 滚动条 thumb 圆角 */
}
/* 修复消息容器布局 */
.message {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

/* 修复用户消息换行问题 */
.message.user {
  align-items: flex-end; /* 原设置正确，但需要配合子元素宽度 */
}

.message.assistant {
  align-items: flex-start;
}

/* 消息内容基础样式 */
.system-content {
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
}

.scroll-on-hover {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}

.scroll-on-hover:hover {
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* Webkit 浏览器平滑动画 */
.scroll-on-hover::-webkit-scrollbar {
  width: 8px;
  transition: all 0.3s ease;
}

.scroll-on-hover::-webkit-scrollbar-track {
  background: transparent;
  transition: all 0.3s ease;
}

.scroll-on-hover::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.scroll-on-hover:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}

.scroll-on-hover:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}


.user-content {
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: var(--el-box-shadow)!important;
  max-width: 100%;
}


.user .message-content {
  background-color: var(--el-color-primary)!important;
  color: #ffffff;
  border-radius: 12px 12px 0 12px;
  box-shadow: var(--el-box-shadow)!important;
  max-width: 100%;
}

.system .message-content {
  background-color: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color-lighter) !important;
  color: var(--el-text-color-primary) !important; /* 增加文字颜色定义 */
  border-radius: 12px;
  padding: 5px;
  box-shadow: var(--el-box-shadow)!important;
  max-width: 100%;
}

.assistant .message-content {
  background-color: var(--el-bg-color-page);
  border: 1px solid var(--el-border-color-light);
  color: var(--el-text-color-primary) !important; /* 增加文字颜色定义 */
  border-radius: 12px 12px 12px 0;
  box-shadow: var(--el-box-shadow)!important;
  max-width: 100%;
}

/* 增强AI消息样式 */
.assistant-message-content {
  max-width: 85%;
  width: fit-content; /* 确保动态宽度 */
  white-space: pre-line;
}

.assistant .message-content > :first-child {
  margin-top: 0;
}

.assistant .message-content > :last-child {
  margin-bottom: 0;
}

/* 光扫动效：挂在气泡本身，而不是 markdown 文字层 */
.assistant .message-content.typing {
  position: relative;
  overflow: hidden;                /* 裁掉光带多余部分 */
  border-radius: 12px 12px 12px 0; /* 与气泡圆角一致 */
}

/* ===== 现代光带 ===== */
.assistant .message-content.typing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;

  /* 两段渐变拼成“亮-暗-亮”波带 */
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--el-color-primary-light-7) 18%,
    var(--el-color-primary) 50%,
    var(--el-color-primary-light-7) 82%,
    transparent 100%
  );
  background-size: 60px 100%;   /* 光带固定 60 px 宽 */
  background-repeat: no-repeat;
  animation: modern-shine 1.6s linear infinite;
}

@keyframes modern-shine {
  0%   { background-position: -60px 0; } /* 起点：藏在左边外 */
  100% { background-position: calc(100% + 60px) 0; } /* 终点：完全跑出右边 */
}


/* 添加Markdown正文样式 */
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--el-text-color-primary) !important;
  padding: 16px;
}

.markdown-body p {
  margin: 0.8em 0;
}

.markdown-body pre {
  margin: 1em 0;
  overflow: auto;
}

.button-group {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: flex-start;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .button-group {
    row-gap: 8px; /* 行间距 */
    column-gap: 6px; /* 列间距 */
  }
  
  .button-group .el-button {
    flex-shrink: 0; /* 防止按钮缩小 */
    margin: 2px !important; /* 覆盖可能存在的边距 */
  }

  .el-main {
    padding: 0!important;
    margin: 0!important;
  }
}

@media (max-width: 680px) {
  .message {
    padding: 0!important;
    margin: 4px!important;
  }
  .messages-container {
    padding: 0!important;
    margin: 0px!important;
  }
}
/* 打字指示器样式 */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: var(--el-bg-color);
  border-radius: 50%;
  animation: typing 1s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

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

/* 设置表单样式 */
.settings-form {
  max-width: 100%;
  margin: 40px auto;
  padding: 32px;
  background-color: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: 0 4px 16px var(--el-box-shadow-light);
}

.behavior-block {
  margin: 40px auto;
  padding: 32px;
  background-color: var(--el-bg-color-page);
  border-radius: 12px;
  box-shadow: 0 4px 16px var(--el-box-shadow-light);
}
.el-form-item {
  margin-bottom: 32px;
}

.full-width-input {
  box-shadow: 0 4px 16px rgba(var(--el-color-primary-rgb), 0.2);
  width: 100%;
}

.full-width-input .el-input__wrapper {
  padding: 8px 16px;
  height: 48px;
  box-shadow: 0 2px 8px var(--el-box-shadow-light);
  transition: all 0.3s ease;
}

.full-width-input .el-input__wrapper:hover {
  box-shadow: 0 4px 12px var(--el-box-shadow-light);
}

.full-width-input .el-input__wrapper.is-focus {
  box-shadow: 0 4px 16px rgba(var(--el-color-primary-rgb), 0.3);
}

.full-width-input .el-input__inner {
  font-size: 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .settings-form {
    max-width: 100%;
    margin: 20px;
    padding: 24px;
  }
  
  .full-width-input .el-input__wrapper {
    height: 44px;
  }
}

.settings-form {
  display: flex;
  flex-direction: column;
}

.form-item-align {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 左右两端对齐 */
}

.el-form-item__label, .el-form-item__content {
  text-align: center; /* 标签文字左对齐 */
}

/* 确保输入控件宽度合适 */
.full-width-input {
  width: 100%;
}

/* 可选：为了让所有标签的横向中心点对齐，可以给标签设定固定的宽度 */
.el-form-item__label {
  width: auto;
  display: inline-block;
  text-align: center;
}


.api-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.api-endpoint {
  margin-bottom: 30px;
}

/* 添加表格样式 */
.model-table {
  margin-top: 20px;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  
  .el-table__header th {
    background-color: var(--el-fill-color-light);
  }
}

.loading-models, .error-models {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  color: var(--el-color-warning);
}

.error-models {
  color: var(--el-color-danger);
}

.copyable {
  cursor: pointer;
  color: #409eff;
  transition: color 0.3s;
}
.copyable:hover {
  color: #79bbff;
}

.notification {
  position: fixed;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--el-box-shadow-light);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
  font-family: system-ui;
  font-size: 14px;
}
.notification.show {
  top: 24px;
  opacity: 1;
}
.notification.hide {
  top: 10px;
  opacity: 0;
}

.notification.error {
  background: #ff5252;
}

/* 工具界面样式 */
.tool-item {
  border: 1px solid var(--bg-color);
  border-radius: 4px;
  margin-bottom: 16px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.tool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tool-content {
  margin-top: 16px;
  padding-left: 24px;
  border-left: 2px solid var(--el-color-primary)
}

.tool-item:hover {
  box-shadow: 0 2px 12px var(--el-box-shadow-light);
}

/* 拖拽/点击区域样式 */
.drop-zone {
  border: 2px dashed rgba(var(--el-color-primary-rgb), 0.2);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  margin: 5% auto;
  width: 80%;
  background-color: var(--el-bg-color-page)
}

.drop-zone:hover {
  border-color: var(--border-color);
  background-color: var(--el-bg-color);
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(64,158,255,.1);
}

.drop-zone p {
  margin-top: 15px;
  color: #606266;
  font-size: 14px;
}

.el-popper__arrow {
  border-color: var(--border-color) !important;
}
.el-popper__arrow::before{
  background-color: var(--el-bg-color)!important;
}
.el-popper{
  background-color: var(--el-bg-color)!important;
  color: var(--el-text-color)!important;
}

.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

/* 更新css/styles.css */
/* 紧凑型文件列表 */
.compact-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  max-height: 72px;
  overflow-y: scroll;
  padding: 8px 0;
}
/* 不显示滚动条 */
.compact-file-list::-webkit-scrollbar {
  display: none;
}

.compact-file-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #f0f4ff;
  border-radius: 12px;
  padding: 4px 36px 4px 12px; /* 增加右侧padding */
  max-width: 240px;
  transition: all 0.2s;
  overflow-y: scroll;
}
/* 不显示滚动条 */
.compact-file-item::-webkit-scrollbar {
  display: none;
}

.file-name {
  color: #409eff;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-icon {
  background-color: transparent !important;/* 透明 */
  border: none !important; /* 去掉边框 */
  position: absolute;
  right: 0px; /* 增加右侧间距 */
  top: 50%;
  transform: translateY(-50%);
  padding: 3px !important;
  width: 10px; /* 缩小尺寸 */
  height: 10px;
}
.delete-icon .el-icon {
  font-size: 12px; /* 缩小图标 */
}
/* 调整hover状态 */
.delete-icon:hover {
  color: var(--el-color-danger) !important;
  transform: translateY(-50%) scale(1.1);
}

.compact-file-item:hover {
  background: #e6f1ff;
  box-shadow: 0 2px 6px rgba(64,158,255,0.1);
}

/* 文件链接样式 */
.file-links {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* 单个文件链接 */
.file-link {
  display: inline-flex;
  align-items: center;
  background: #f0f4ff;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 13px;
  color: #409eff;
  text-decoration: none;
  transition: all 0.2s;
  max-width: 240px;
  white-space: nowrap; /* 禁止链接文字换行 */
  overflow: hidden;
}

.file-link:hover {
  background: #e1e9ff;
  color: #337ecc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Markdown表格样式 */
.markdown-body table {
  width: 100% !important; /* 强制继承父级宽度 */
  min-width: 100%; /* 防止内容不足时收缩 */
  display: table; /* 恢复表格特性 */
  box-shadow: none; /* 移除阴影避免视觉干扰 */
  overflow-x: auto;
  max-width: 100%;
}


.markdown-body th, 
.markdown-body td {
  padding: 12px 15px;
  border: 1px solid var(--el-border-color-light);
}

.markdown-body th {
  background-color: var(--el-color-primary-light-9);
  font-weight: 600;
}

.markdown-body tr:nth-child(even) {
  background-color: var(--el-fill-color-lighter);
}

/* 代码块样式 */
.code-block {
  position: relative;
  margin: 1em 0;
  border-radius: 8px;
  overflow-x: auto;
  max-width: 100%;
}
.code-block::-webkit-scrollbar {
  width: 5px; /* 横向滚动条宽度（如果有横向滚动的话） */
  height: 5px; /* 纵向滚动条高度（虽然你这里主要是垂直滚动，但设置一下也可以统一样式） */
}
.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--el-color-primary);
  color: var(--el-bg-color-page)!important;
  border-radius: 8px 8px 0 0;
}

.code-lang {
  color: #ffffff !important;
  font-size: 0.9em;
  font-family: var(--el-font-family);
  margin-right: auto;
}

/* 设置按钮组的样式 */
.code-actions {
  display: flex;
  gap: 5px; /* 按钮之间的间距 */
}

.copy-button, .preview-button{
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.copy-button, .download-button{
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

/* 在样式表中添加覆盖规则 */
.code-block pre {
  background-color: transparent !important;
  padding: 0;
}


/* 钥匙箱主容器 */
.keybox-container {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  background: var(--bg-color);
  min-height: calc(100vh - 64px); /* 根据导航栏高度调整 */
  box-shadow: var(--el-box-shadow-light);
  border-radius: 8px;
}
/* 网格布局系统 */
.provider-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding: 0;
  margin: 0 -0.75rem; /* 抵消卡片边距 */
}
/* 磁贴卡片系统 */
.provider-card {
  --card-border: 1px solid #e2e8f0;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.05);
  
  position: relative;
  background: #ffffff;
  border: var(--card-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 270px!important;
  display: flex;
  flex-direction: column;
  margin: 0.75rem;
  box-shadow: var(--card-shadow);
}
.provider-card:hover {
  --card-border: 1px solid #cbd5e1;
  --card-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}
/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  position: relative;
}
/* 卡片操作按钮组 */
/* 调整卡片操作按钮组样式 */
.card-actions {
  display: flex;
  gap: 0.5rem;
  position: relative; /* 改为相对定位 */
  top: 0;
  right: 0;
  background: transparent; /* 去掉背景色 */
  padding: 0;
  box-shadow: none; /* 去掉阴影 */
}

/* 调整输入框容器布局 */
.input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem; /* 增加上边距 */
}

/* 确保输入框可见 */
.el-input {
  width: 100%;
  min-width: 100%; /* 防止收缩 */
}

/* 调整模型选择容器 */
.model-container {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* 确保选择框宽度 */
.model-select {
  flex: 1;
  min-width: 120px;
}

/* 添加新卡片 */
.add-tile {
  --dash-color: #cbd5e1;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px dashed var(--dash-color);
  background-color: rgba(248,250,252,0.5);
  transition: all 0.2s ease;
}
.add-tile:hover {
  --dash-color: #94a3b8;
  background-color: rgba(241,245,249,0.8);
  transform: scale(0.98);
}
.add-tile .el-icon {
  transition: transform 0.2s ease;
}
.add-tile:hover .el-icon {
  transform: scale(1.1);
}
/* 对话框增强样式 */
.el-dialog__header {
  border-bottom: 1px solid var(--el-button-bg-color);
  margin-bottom: 1rem;
}
.el-form-item {
  margin-bottom: 1.25rem;
}
.el-form-item__label {
  font-weight: 500;
  color: #475569;
  padding-bottom: 0.375rem !important;
}

.el-select__popper {
  background-color: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  box-shadow: var(--el-box-shadow-light) !important;
}

/* 选项文字颜色和hover背景 */
.el-select-dropdown__item {
  color: var(--el-text-color-primary) !important;
  &:hover {
    background-color: var(--el-color-primary-light-3) !important;
  }
  &:is-selected{
    background-color: var(--el-color-primary-light-3) !important;
  }
}

/* 禁用状态的选项 */
.el-select-dropdown__item.is-disabled {
  color: var(--el-text-color-placeholder) !important;
}


/* 供应商选项样式 */
.provider-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.model-id {
  color: var(--el-text-color-secondary);
  font-size: 12px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generate-btn {
  margin-top: 20px;
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid var(--card-bg-color);
}


/* 添加这些样式 */
.alert-content {
  line-height: 1.8;
  color: var(--el-color-info); /* 保持与警告组件颜色一致 */
}
.font-medium {
  font-weight: 500;
}
.el-link {
  vertical-align: baseline; /* 保持文字对齐 */
}
.el-link:hover {
  text-decoration: underline !important; /* 悬停时显示下划线 */
}

/* 知识库磁贴样式 */
.knowledge-card {
  min-height: 160px;
}

.knowledge-card h3 {
  margin-top: 10px;
  font-size: 1.2em;
}

/* 在 css/styles.css 中添加 */
.loading-spinner {
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.processing-message {
  text-align: center;
  padding: 20px;
  color: var(--el-color-info);
}

/* 添加样式 */
.kb-content {
  padding: 12px;
  height: calc(100% - 40px); /* 留出头部空间 */
}

.kb-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.kb-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-description {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  line-height: 1.5;
  margin: 8px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-meta {
  border-top: 1px solid var(--el-border-color);
  padding-top: 8px;
  margin-top: 12px;
}

.kb-meta-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin: 4px 0;
}

.kb-icon {
  font-size: 14px;
  margin-right: 6px;
  color: var(--el-text-color-secondary);
}


.el-collapse {
  border: none;
  color: var(--el-text-color-primary)!important;
  background-color: var(--el-bg-color)!important;
}

/* 添加样式 */
.advanced-settings {
  --el-collapse-header-height: 48px;
  .el-collapse-item {
    color: var(--el-text-color-primary)!important;
    background-color: var(--el-bg-color)!important;
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
    
    &.is-active {
      box-shadow: 0 2px 12px var(--el-box-shadow);
    }
  }
  .el-collapse-item__content{
    color: var(--el-text-color-primary)!important;
    background-color: var(--el-bg-color)!important;
 }
  .el-collapse-item__header {
    color: var(--el-text-color-primary)!important;
    background-color: var(--el-bg-color)!important;
    padding: 0 16px;
    font-size: 14px;
  }
  
  .el-slider__button {
    color: var(--el-text-color-primary)!important;
    background-color: var(--el-bg-color)!important;
    border-color: var(--el-color-primary)!important;
  }

  .el-form-item {
    color: var(--el-text-color-primary)!important;
    background-color: var(--el-bg-color)!important;
    margin-bottom: 8px;
  }
}


.collapse-title {
  display: flex;
  align-items: center;
  color: var(--el-color-primary);
  
  .el-icon {
    transition: transform 0.2s;
  }
}

/* 激活状态旋转图标 */
.el-collapse-item.is-active .collapse-title .el-icon {
  transform: rotate(90deg);
}

.knowledge-dialog-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
}

.knowledge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg-color);
  border-radius: 8px;
  transition: all 0.2s;
}

.knowledge-item:hover {
  background: var(--el-border-color-light);
}

.knowledge-info {
  flex: 1;
}

.knowledge-name {
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.knowledge-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.empty-tip {
  text-align: center;
  color: var(--el-text-color-secondary);
  padding: 20px;
}
.empty-tip a {
  color: var(--el-text-color-primary);
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  transition: color 0.2s;
}
.empty-tip a:hover {
  color: var(--el-color-primary);
  text-decoration: underline;
}
.browser-mode-btn-container {
  text-align: center;
  margin-top: 20px;
}

.browser-mode-btn {
  width: 90%;
  max-width: 300px;
  text-align: center;
  transition: all 0.3s ease;
  background: linear-gradient(45deg, var(--el-color-primary), var(--el-color-primary-light-3));
  box-shadow: 0 4px 12px var(--el-color-primary-light-9);
  border: none;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--el-color-primary-light-9);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.browser-mode-btn span {
  color: #fff;
}

.tip-text {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-top: 8px;
}


.user-message-content div {
  white-space: pre-wrap;
}

.form-item-align .el-switch {
  margin-left: auto;
}

/* MCP服务器磁贴样式 */

.mcp-container .kb-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px;
}

.mcp-container .kb-switch {
  position: absolute;
  left: 12px;
  top: 12px;
}

.mcp-container .card-actions {
  position: absolute;
  right: 12px;
  top: 12px;
}

.mcp-container .kb-meta {
  border-top: 1px solid var(--el-border-color-light);
  padding-top: 12px;
  margin-top: 12px;
}

.mcp-container .kb-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.mcp-container .kb-meta-item .el-switch {
  margin-left: auto;
}

.mcp-container .el-tag--info {
  background-color: rgba(var(--el-color-primary-rgb), 0.1);
  border-color: rgba(var(--el-color-primary-rgb), 0.2);
  color: var(--el-color-primary);
}

/* 侧边栏Logo样式 */
.sidebar-logo {
  /* 侧边栏最底部 */
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: left;
  background-color: var(--el-bg-color);
}


.logo-icon img {
  width: 24px;
  height: 24px;
  border: none;
  vertical-align: middle;
  bottom: 0;
}

/* 开源声明页面 */
.logo-container {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.license-notice {
  background: var(--el-bg-color-page);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 16px var(--el-box-shadow-light);
}

.notice-section {
  border-left: 4px solid var(--el-color-warning);
  padding-left: 1rem;
  margin: 2rem 0;
}

.warning-text {
  color: var(--el-color-warning);
  font-size: 16px;
  line-height: 1.8;
}

.warning-text-en {
  color: var(--el-color-warning-light-3);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 0.5rem;
}

.contact-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);
}

.contact-section h3 {
  color: var(--el-color-primary);
  margin-bottom: 1rem;
}

.contact-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.contact-link {
  color: var(--el-color-primary);
  text-decoration: none;
  transition: color 0.3s;
}

.contact-link:hover {
  color: var(--el-color-primary-light-3);
  text-decoration: underline;
}

.social-links {
  margin-top: 2rem;
}

.link-item {
  display: flex;
  align-items: center;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--el-bg-color);
  border-radius: 8px;
  transition: transform 0.3s;
}

.link-item:hover {
  transform: translateX(10px);
  box-shadow: 0 2px 8px var(--el-box-shadow-light);
}

.link-item .el-icon {
  font-size: 24px;
  margin-right: 1rem;
  color: var(--el-color-primary-light-3);
}

.social-link {
  color: var(--el-color-primary-light-3);
  margin-left: 0.5rem;
  text-decoration: none;
}

.qq-group {
  color: var(--el-color-primary-light-3);
  font-weight: 500;
  margin-left: 0.5rem;
}

.agreement-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--el-border-color-light);
  text-align: center;
}

.agreement-link {
  color: var(--el-color-info);
  text-decoration: none;
  font-weight: 500;
}

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

.agent-prompt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  color: var(--el-color-info);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2em;
  max-height: 4.8em; /* 4 lines */
}

.agent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: large;
  color: var(--text-color);
  margin: 8px;
}
.agent-id {
  font-family: monospace;
  user-select: all;
}

.agent-config-tabs {
  margin: 25px;
}

.agent-config-tabs .el-tabs__content {
  max-height: 400px;
  overflow-y: auto;
}

.preview-container {
  position: relative;
  width: 100%;
  min-height: 200px;
  max-height: 80vh;
  overflow: auto;
  background: var(--preview-bg-color);
  border-radius: 4px;
  margin: 10px 0;
  transition: all 0.3s ease;
}
.preview-container.loading {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--preview-bg-color);
}
.mermaid-diagram {
  padding: 20px;
  text-align: center;
}
/* 隐藏原始代码内容 */
.code-content[style*="display: none"] {
  display: none !important;
}

/* 更新按钮容器样式 */
.top-bar-btn.update-btn {
  /* 保持原有基本样式 */
  width: auto;
  padding: 4px 12px !important; /* 增加水平内边距 */
  display: inline-flex; /* 确保按钮依据内容调整大小 */
  white-space: nowrap; /* 防止文字换行 */
  transition: all 0.2s ease;
}
/* 更新按钮图标样式 */
.update-btn .el-icon {
  margin-right: 8px !important; /* 增加图标右边距 */
  flex-shrink: 0; /* 防止图标被压缩 */
}
/* 成功状态按钮 */
.update-btn.success {
  background-color: var(--el-color-success) !important;
  padding: 4px 12px !important;
}

.extra-params {
  .param-row {
    display: flex;
    align-items: center; /* Vertically center content */
    gap: 10px;        /* Space between elements */
    margin-bottom: 10px; /* Space between rows */

    .param-input,
    .type-select,
    .value-input,
    .remove-btn {
      flex: 1; /* Equal distribution of space */
      min-width: 0;  /* Important for flexbox to shrink items */
    }

    .value-input {
      align-items: center; /* 保持垂直居中 */
      justify-content: center; /* 水平居中 */

      > * { 
        flex: 1; 
        min-width: 0; 
      }

      .el-input-number {
        width: auto;
      }

      .el-switch {
        /* 水平居中 */
        display: flex;
        align-items: center;
        justify-content: center;
      }

    }

    .remove-btn {
      flex: 0 0 auto; /* Don't grow, don't shrink, automatic width */
      width: auto;     /* Let the button's content determine its width */
    }
  }
}

.memo-extra-params {
  .param-row {
    margin-bottom: 16px;
    
    .param-name-input {
      margin-bottom: 8px;
    }

    .param-value-input {
      margin-bottom: 8px;
      
      textarea {
        min-height: 80px;
        resize: vertical;
      }
    }

    .action-row {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      
      .el-button {
        margin-left: 0;
      }
    }
  }
}

.remove-btn {
  margin-left: auto;
}
.param-header {
    display: flex; /* 使用 flexbox */
    justify-content: space-between; /* 左右对齐 */
    align-items: center; /* 垂直居中对齐 */
    background-color: var(--el-bg-color-page); /* 背景颜色 */
    padding: 10px; /* 内边距 */
    margin-bottom: 20px; /* 底部外边距 */
    border: 2px solid var(--card-border);
    box-shadow: 2px 2px 5px var(--card-shadow); /* 阴影效果 */
    border-radius: 8px; /* 圆角 */
}

.action-row {
    display: flex;
    justify-content: flex-end; /* 按钮靠右对齐 */
    gap: 8px; /* 按钮之间的间距 */
}

.param-header span {
    font-size: 18px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    color: var(--el-text-color);
}
.message-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.message:hover .message-actions {
  opacity: 1;
}
.copy-btn {
  padding: 4px !important;
  font-size: 12px !important;
}
.copy-btn i {
  font-size: 12px;
}

.tool-card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

.el-input.mini-input {
  width: auto;
  height: auto;
}

/* 新版侧边导航样式 */
.agent-suite-container {
  height: calc(100vh - 60px);
}

.deploy-container {
  height: calc(100vh - 60px);
}

.storage-container {
  height: calc(100vh - 60px);
}

.suite-layout {
  display: flex;
  height: 100%;
}

.suite-sidebar {
  width: 220px;
  background: var(--el-bg-color-page);
  border-right: 2px solid var(--el-border-color-light);
  overflow-y: auto;
}

.suite-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: var(--el-bg-color-page);
}

.tile-nav {
  padding: 12px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  margin: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--el-text-color-regular);
  
  &:hover {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    
    .nav-icon {
      color: var(--el-color-primary);
    }
  }
  
  &.active {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    font-weight: 500;
    
    .nav-icon {
      color: var(--el-color-primary);
    }
  }
}

.nav-icon {
  font-size: 16px;
  margin-right: 12px;
  width: 24px;
  transition: color 0.2s;
}

.nav-text {
  font-size: 14px;
  white-space: nowrap;
}

.suite-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: var(--el-bg-color-page);
}

.input-box {
  border-radius: 12px !important;
}

/* 或者更具体地针对textarea元素 */
.input-box .el-textarea__inner {
  border-radius: 12px !important;
}

.image-links {
  /* 垂直排列 */
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.image-link {
  max-width: 100%; /* 🌟 同时限制相对和绝对大小 */
  height: auto; /* 🌟 保持比例 */
  border-radius: 12px;
  object-fit: contain; /* 🌟 智能适应容器 */
}

.update-btn {
  transition: all 0.3s ease;
  background: linear-gradient(90deg, #409eff var(--progress), transparent var(--progress));
}
.update-btn.installed {
  background: #67c23a !important;
}
.update-btn:hover {
  transform: scale(1.05);
}
.progress-text {
  margin-left: 5px;
  font-size: 0.8em;
}
.fa-spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.update-btn {
  --progress: calc(var(--download-progress) * 1%);
}

/* 让菜单容器使用 flex 纵向布局，并占满高度 */
.el-menu-vertical {
  background-color: var(--el-bg-color-page)!important;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 选择倒数第3个菜单项（system）*/
.el-menu-item:nth-last-child(3) {
  margin-top: auto; /* 这个属性会让它和后面的元素自动推到容器底部 */
}

.text-container {
  padding: 20px;
}

.file-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.text-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.file-item {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.file-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--el-box-shadow-light);
}

.file-icon {
  margin-right: 12px;
  font-size: 24px;
  color: var(--el-color-primary);
}

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

.file-name {
  font-size: 14px;
  color: var(--el-text-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-actions {
  display: flex;
  gap: 8px;
  margin-left: 12px;
  .file-actions-btn {
    margin: 2px!important;
  }
  .a {
    margin: 0px!important;
  }
}

.image-container {
  padding: 20px;
}

.image-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.image-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  aspect-ratio: 1;
}

.image-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--el-box-shadow-light);
}

.video-container {
  padding: 20px;
}

.thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image-name {
  color: var(--el-text-color);
  font-size: 12px;
  text-shadow: 0 1px 2px var(--el-box-shadow-light);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-actions {
  display: flex;
  gap: 1px;
  .image-actions-btn {
    margin: 3px!important;
  }
  .a {
    margin: 3px!important;
  }
}

/* 添加预览样式 */
.image-preview-dialog {
  .el-dialog__body {
    padding: 0;
    height: auto;
  }
  
  .preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: var(--bg-color);
  }
  
  .preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    justify-content: center;
    align-items: center;
  }
}

.vendor-name {
  font-size: 14px;
  color: var(--el-text-color);
  letter-spacing: -0.2px;
}

.vendor-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.vendor-section-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--el-text-color-secondary);
  padding: 8px 16px 4px;
  text-transform: none;
  letter-spacing: 0.3px;
  user-select: none;
  opacity: 0.7;
}

/* Premium 供应商选择列表 */
.vendor-select-list {
  border-radius: 12px;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  overflow: hidden;
  max-height: 400px;
  overflow-y: auto;
}

.vendor-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.vendor-select-row:last-child {
  border-bottom: none;
}

.vendor-select-row:hover {
  background: var(--el-fill-color-light);
}

.vendor-select-row.selected {
  background: var(--el-color-primary-light-9);
}

.vendor-select-row.selected .vendor-select-name {
  color: var(--el-color-primary);
}

.vendor-select-row-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.vendor-select-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  transition: color 0.15s ease;
}

.vendor-select-category {
  font-size: 11px;
  font-weight: 500;
  color: var(--el-text-color-secondary);
  background: var(--el-fill-color);
  padding: 2px 10px;
  border-radius: 10px;
  flex-shrink: 0;
}

.vendor-select-indicator {
  color: var(--el-color-primary);
  font-size: 14px;
  flex-shrink: 0;
  margin-left: 12px;
}

.mini-vendor-logo {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 搜索引擎纯文字名称 */
.engine-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

/* =========================================
   添加供应商对话框 —— 双栏布局
   ========================================= */

.add-provider-body {
  display: flex;
  gap: 24px;
  min-height: 420px;
  max-height: 60vh;
}

.add-provider-left {
  width: 280px;
  min-width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.add-provider-left::-webkit-scrollbar {
  width: 5px;
}

.add-provider-left::-webkit-scrollbar-track {
  background: transparent;
}

.add-provider-left::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
  transition: background 0.3s;
}

.add-provider-left:hover::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.3);
}

.add-provider-left::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.5);
}

.add-provider-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding-left: 4px;
}

.add-provider-right-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--el-text-color-placeholder);
  font-size: 14px;
}

/* 配置区域 */
.config-section {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 10px;
  padding: 16px;
}

.config-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.config-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--el-text-color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.config-link-icon {
  font-size: 13px;
  color: var(--el-text-color-secondary);
  transition: color 0.15s;
}

.config-link-icon:hover {
  color: var(--el-color-primary);
}

/* API Key 行 */
.api-key-row {
  display: flex;
  gap: 10px;
}

.api-key-input {
  flex: 1;
}

.test-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 连接状态 */
.connection-status {
  margin-top: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.connection-status.success {
  color: #34C759;
}

.connection-status.error {
  color: #FF3B30;
}

.connection-status i {
  font-size: 14px;
}

/* 模型列表 */
.model-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
}

.model-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  transition: background 0.1s;
}

.model-item:last-child {
  border-bottom: none;
}

.model-item:hover {
  background: var(--el-fill-color-light);
}

.model-name {
  font-size: 13px;
  color: var(--el-text-color-primary);
  font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
}

/* 移动端适配 */
@media (max-width: 680px) {
  .add-provider-body {
    flex-direction: column;
    max-height: none;
  }
  
  .add-provider-left {
    width: 100%;
    min-width: 0;
    max-height: 240px;
  }
  
  .add-provider-right {
    padding-left: 0;
  }
}

  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 50%;
  margin-left: 2px;
}

.spinner-rotate {
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.input-container.expanded-input {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--el-bg-color);
    padding: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.input-container.expanded-input .input-box textarea {
    height: calc(100vh - 100px) !important;
    min-height: auto !important;
}

/* 添加移动端样式 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    left: 0;
    top: 30px;
    height: calc(100vh - 30px) !important;
    z-index: 2000;
    transition: transform 0.3s ease;
  }
  
  .mobile-sidebar:not(.el-menu--collapse) {
    width: 200px !important;
  }
  
  .sidebar-mask {
    position: fixed;
    top: 30px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 30px);
    background: rgba(0,0,0,0.5);
    z-index: 1999;
  }
  
  .mobile-menu {
    padding: 0 12px;
    cursor: pointer;
    color: var(--el-text-color-regular);
  }
  
  .main-container {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .suite-content {
    padding: 10px;
    /* 隐藏横向滚动条 */
    overflow-x: hidden;
  }
  .suite-sidebar {
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    width: 50px !important; /* 缩小侧边栏宽度 */
  }
  .tile-nav {
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    width: 45px !important; /* 缩小导航栏宽度 */
  }
  .nav-text {
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    width: 0 !important;
    padding: auto;
    margin: auto;
    font-size: 0 !important;
    display: none !important; /* 隐藏文字 */
  }
  .nav-icon {
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    width: 40px !important;
    font-size: 20px !important; /* 调整图标大小 */
  }
  .nav-item {
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    width: 40px !important;
  }
  .settings-form{
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
  }
  .file-list {
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
  }
  .page .text-container {
    min-width: 0px!important;
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    min-width: 0px!important;
  }
  .file-item {
    width: auto !important;
    padding: 3px!important;
    max-width: 230px!important;
    min-width: 0px!important;
    .file-info {
      width: auto!important;
      padding-left: 1px!important;
      padding-right: 1px!important;
      margin-left: 1px!important;
      margin-right: 1px!important;
      min-width: 0px!important;
      max-width: 40%!important;
    }
    .file-actions {
      gap: 1px!important;
      margin-left: 1px!important;
      padding-left: 1px!important;
      padding-right: 1px!important;
      margin-left: 1px!important;
      margin-right: 1px!important;
      min-width: 0px!important;
    }
  }
  .page .image-container {
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    min-width: 0px!important;
  }
  .image-item {
    min-width: 0px!important;
  }
  .page .video-container {
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    min-width: 0px!important;
  }
  .video-item {
    min-width: 0px!important;
  }
  .page .logo-container{
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    min-width: 0px!important;
  }
  .license-notice {
    width: 100% !important;
    padding-left: 1px!important;
    padding-right: 1px!important;
    margin-left: 1px!important;
    margin-right: 1px!important;
    min-width: 0px!important;
  }
}

/* ComfyUI容器样式 */
.comfyui-iframe-container {
  position: relative;
  height: calc(100vh - 120px);
  background: var(--el-bg-color-page);
}

.comfyui-iframe {
  width: 100%;
  height: 100%;
  background: var(--el-bg-color-page);
}

.server-item {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 8px; /* 元素间距 */
  width: 100%; /* 占满父容器宽度 */
  margin-bottom: 8px; /* 项间距 */
  .el-input {
    flex: 1; /* 输入框占据剩余空间 */
    min-width: 0; /* 防止内容溢出 */
  }

  .el-button {
    flex-shrink: 0; /* 按钮不收缩 */
  }
}

.add-server-btn {
  width: 100%;
  margin-top: 10px;
}

.add-server-btn {
  width: 100%;
  margin-top: 10px;
}

.no-server-tip {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-box {
  width: 100%;
  margin-bottom: 10px;
}

.video-wrapper {
  position: relative;
  display: inline-block; /* 防止超出容器 */
}

.delete-overlay-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}
.knowledge-card {
  .cover-image {
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: var(--el-bg-color-page);
    border-radius: 8px;
  }
}

.tag-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;

  .tag-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: auto;
    padding: 12px;
    background: var(--el-bg-color-page);
    border-radius: 8px;
    
    .sticker-thumb {
      width: 50px;
      height: 50px;
      flex-shrink: 0;
      object-fit: contain;
      border: 1px solid var(--el-border-color);
      border-radius: 4px;
      background: var(--el-bg-color-page);
    }

    .el-input {
      flex: 1;
      min-width: 0;
      
      &__wrapper {
        height: 40px;
      }
    }
  }
}

.el-upload-list--picture-card {
  --el-upload-list-picture-card-size: 30px;
  margin: 0;
  
  .el-upload-list__item {
    margin: 0 8px 8px 0;
  }

  .el-upload-list__item .el-icon-close-tip{
    display: none !important;
  }
}

.sticker-upload {
  margin-left: 24px;
  .el-upload {
    background-color: var(--el-bg-color-page);
  }
}

.fastapi-iframe {
  min-height: 85vh!important;
}

.tts-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center; /* 确保垂直居中 */
  margin-bottom: 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.message:hover .tts-controls {
  opacity: 1;
}

.tts-status {
  color: var(--el-color-info);
  font-size: 14px;
  margin-left: 8px; /* 文字左侧也保持相同间距 */
}
.msg-status {
  margin-top: 2px;
  font-size: 14px;
  margin-left: 8px; /* 文字左侧也保持相同间距 */
}

.message.assistant .tts-controls {
  background: var(--el-bg-color-page);
}

.message.assistant .tts-controls .tts-status {
  color: var(--el-primary-color)
}

/* 保持按钮之间的间距不变 */
.tts-controls .el-button {
  margin: 0; /* 移除默认边距 */
}

/* 修改搜索操作行样式 */
.search-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  width: 100%; /* 新增 */
}

/* 确保搜索框可以收缩 */
.search-input {
  flex: 1 1 auto; /* 允许缩小 */
  min-width: 200px; /* 保留最小宽度 */
}

/* 调整按钮容器 */
.action-buttons {
  flex-shrink: 0; /* 禁止按钮收缩 */
  display: flex; /* 水平排列按钮 */
  margin: 0px;
}

.checkbox-no-label .el-checkbox__label {
  display: none;
}

/* 工具栏整体 */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
  gap: 12px;        /* flex 子项间距 */
}

/* 全选复选框文字样式 */
.select-all-checkbox .el-checkbox__label {
  font-weight: 500;
  color: #303133;
  margin-left: 6px;
}

/* 批量删除按钮 */
.batch-del-btn {
  border-radius: 20px;        /* 胶囊形状 */
  padding: 6px 14px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(245, 108, 108, 0.2);
  transition: transform 0.15s;
}
.batch-del-btn:not(:disabled):hover {
  transform: scale(1.05);
}
.batch-del-btn:disabled {
  box-shadow: none;
  transform: none;
}

.highlight-block {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  background: var(--el-color-info);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
  margin-bottom: 12px;
  color: var(--el-bg-color-page);
  max-height: 200px;
  overflow-y: auto;
}
.highlight-block.expanded {
    max-height: none !important;  /* 展开 */
}
/* 滚动条样式 */
.highlight-block table::-webkit-scrollbar {
  width: 5px; /* 横向滚动条宽度（如果有横向滚动的话） */
  height: 5px; /* 纵向滚动条高度（虽然你这里主要是垂直滚动，但设置一下也可以统一样式） */
}

.highlight-block-error {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  background: var(--el-color-danger);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
  margin-bottom: 12px;
  color: var(--el-bg-color-page);
  overflow-y: auto;
}

.highlight-block-reasoning {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  background: var(--el-color-warning);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
  margin-bottom: 12px;
  color: var(--el-bg-color-page);
}
/* 滚动条样式 */
.highlight-block-reasoning table::-webkit-scrollbar {
  width: 5px; /* 横向滚动条宽度（如果有横向滚动的话） */
  height: 5px; /* 纵向滚动条高度（虽然你这里主要是垂直滚动，但设置一下也可以统一样式） */
}
/* 进度条容器样式 */
.progress-container {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
  border-radius: 8px;
  padding: 12px 15px;
  border: 1px solid var(--el-border-color);
  transition: all 0.3s ease;
  margin-bottom: 12px;
}

/* 进度条信息样式 */
.progress-info {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
}

/* 进度条统计信息样式 */
.progress-stats {
  text-align: center;
}

.model-info {
  border-radius: 16px!important;
  margin: 1px!important;
  background-color: var(--el-bg-color-page);
  color: var(--el-text-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.model-info:hover {
  transform: scale(1.01);
}

.model-info .el-alert{
  background-color: var(--el-bg-color-page)!important;
  color: var(--el-primary-color)!important;
}

.event-button-group {
  display: flex;
  justify-content: flex-end; /* 靠右对齐 */
  margin-bottom: 10px;
}

.knowledge-item.active {
  background: var(--el-color-primary-light-9);
  border: 1px solid #1890ff; /* 边框高亮 */
  border-color: var(--el-color-primary);
  color: var(--el-text-color-primary);
}


/* 头部 */
.tool-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.header-buttons{
  display:flex;
  gap:8px;
}

/* 经典并排 */
.classic-box{
  display:flex;
  gap:16px;
}
.classic-panel{
  flex:1;
  display:flex;
  flex-direction:column;
}
.panel-label{
  font-size:14px;
  color:#606266;
  margin-bottom:6px;
}
/* 让 textarea 撑满 */
.classic-panel .el-textarea{
  flex:1;
}


.segment-list {
  scroll-behavior: smooth;
}

.chat-wrapper {
  display: flex;
  height: 100%;
  position: relative;
  gap: 0;
}

/* 拖拽遮罩层 */
.resize-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  cursor: col-resize;
  background: transparent;
}

/* 对话区域 */
.chat-area {
  width: 50%;
  transition: width 0.2s ease-out;
  flex-shrink: 0;
  min-width: 0;
}

.chat-area-layout {
  display: flex;
  gap: 0;
  min-height: 0;
  height: 100%;
}

.chat-main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-left: 12px;
}

.chat-history-panel {
  flex-shrink: 0;
  min-width: 0;
  background: transparent;
  border-right: 1px solid var(--el-border-color);
  overflow: hidden;
  transition: width 0.2s ease-out, opacity 0.2s ease-out;
}

.chat-history-panel.collapsed {
  width: 0;
  opacity: 0;
  border-right-width: 0;
}

.chat-history-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.chat-history-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.chat-history-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.chat-history-header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.chat-history-heading {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.chat-history-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  white-space: nowrap;
}

.chat-history-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.chat-history-search {
  padding: 10px 14px 6px;
}

.chat-history-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  overflow: hidden;
}

.chat-history-header.stacked .chat-history-header-actions {
  justify-content: center;
}

.chat-history-header-actions .el-button {
  margin: 0 !important;
}

.chat-history-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 16px;
}

.chat-history-group {
  margin-bottom: 12px;
}

.chat-history-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-history-group-header:hover {
  background: var(--el-fill-color-light);
}

.chat-history-group-header.active {
  background: color-mix(in srgb, var(--el-color-primary-light-9) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--el-color-primary-light-5);
}

.chat-history-group-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chat-history-group-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.chat-history-group-icon {
  color: var(--el-text-color-secondary);
  font-size: 12px;
}

.chat-history-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--el-text-color-primary);
}

.chat-history-group-count {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.chat-history-group-conversations {
  overflow: hidden;
  transform-origin: top;
}

.chat-history-group-collapse-enter-active,
.chat-history-group-collapse-leave-active {
  transition: max-height 0.24s ease, opacity 0.2s ease, transform 0.24s ease;
}

.chat-history-group-collapse-enter-from,
.chat-history-group-collapse-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
}

.chat-history-group-collapse-enter-to,
.chat-history-group-collapse-leave-from {
  max-height: 480px;
  opacity: 1;
  transform: translateY(0);
}

.chat-history-item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.chat-history-item:hover {
  background: var(--el-fill-color-light);
  transform: translateX(2px);
}

.chat-history-item.active {
  background: var(--el-color-primary-light-9);
  box-shadow: inset 0 0 0 1px var(--el-color-primary-light-5);
}

.chat-history-item-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

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

.chat-history-item-title,
.chat-history-item-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-history-item-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.chat-history-item-time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.chat-history-item-preview {
  margin-top: 6px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.chat-history-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.chat-history-more {
  opacity: 0.7;
  color: var(--el-text-color-secondary) !important;
}

.chat-history-toggle-btn {
  opacity: 0.7;
  color: var(--el-text-color-secondary) !important;
}

.chat-history-more:hover,
.chat-history-item:hover .chat-history-more,
.chat-history-group-header:hover .chat-history-more,
.chat-history-group-header:hover .chat-history-toggle-btn {
  opacity: 1;
}

.chat-history-new-btn {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  min-height: 46px;
  background: linear-gradient(135deg, #5B8DEE 0%, #6FA7F6 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 20px rgba(91, 141, 238, 0.18);
  flex-shrink: 0;
}

.chat-history-new-btn:hover {
  background: linear-gradient(135deg, #4C7FDF 0%, #5D97EE 100%) !important;
  color: #fff !important;
}

.chat-history-new-group-btn {
  border: 1px solid #CBD5E1 !important;
  border-radius: 999px !important;
  padding: 12px 16px !important;
  min-height: 46px;
  background: #FFFFFF !important;
  color: #475569 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
}

.chat-history-header-more-btn {
  border-radius: 999px !important;
  min-height: 46px;
  width: 46px;
  padding: 0 !important;
  border: 1px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  color: #475569 !important;
}

.chat-history-header-icon-btn {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #D7DEE8 !important;
  background: #FFFFFF !important;
  color: #64748B !important;
}

.chat-history-header-icon-btn.danger:hover {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border-color: #FECACA !important;
}

.chat-history-submenu-item {
  padding: 0 !important;
}

.chat-history-submenu-trigger {
  min-width: 150px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--el-text-color-primary);
}

.group-memory-switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.group-memory-switch-hint {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  line-height: 1.5;
}

.chat-history-confirm-copy {
  font-size: 14px;
  color: var(--el-text-color-primary);
}

.chat-history-confirm-title {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  word-break: break-word;
}

.chat-history-confirm-note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--el-text-color-secondary);
}

.chat-history-delete-memory-option {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--el-text-color-secondary);
}

.chat-history-divider {
  width: 10px;
  flex-shrink: 0;
  cursor: col-resize;
  position: relative;
}

.chat-history-divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--el-border-color);
}

.chat-history-divider:hover::before {
  background: var(--el-text-color-secondary);
}

.chat-history-empty {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--el-text-color-secondary);
  font-size: 13px;
}

/* 拖拽时禁用动画 */
.chat-wrapper.resizing .chat-area {
  transition: none;
}

.chat-wrapper.collapsed-left .chat-area {
  display: none;
}

.chat-wrapper.collapsed-right .chat-area {
  width: 100%;
}

/* 侧边栏 */
.side-panel {
  width: 50%;
  flex-shrink: 0;
  background: var(--el-bg-color-page);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
  overflow-x: hidden;
  transition: width 0.2s ease-out;
  min-width: 0;
}

/* 拖拽时禁用动画 */
.chat-wrapper.resizing .side-panel {
  transition: none;
}

.chat-wrapper.collapsed-right .side-panel {
  display: none;
}

.chat-wrapper.collapsed-left .side-panel {
  width: 100%;
}

.side-panel-scroll {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* 可拖拽分割条 */
.resizer {
  width: 10px;
  background: var(--el-border-color-light);
  cursor: col-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
  flex-shrink: 0;
  z-index: 5;
}

.resizer:hover {
  background: var(--el-color-primary);
}

.resizer-collapsed-right,
.resizer-collapsed-left {
  position: absolute;
  width: 24px;
  height: 60px;
  border-radius: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--el-tag-bg-color);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  cursor: pointer;
  z-index: 10;
  transition: all .2s ease;
}

/* 收起按钮的 hover 效果 - 只轻微移动 */
.resizer-collapsed-right:hover {
  background: var(--el-color-primary-light-3);
  transform: translateY(-50%) translateX(-2px); /* 只向左移动 2px */
}

.resizer-collapsed-left:hover {
  background: var(--el-color-primary-light-3);
  transform: translateY(-50%) translateX(2px); /* 只向右移动 2px */
}

.resizer-collapsed-right {
  right: 0;
}

.resizer-collapsed-left {
  left: 0;
}

.resizer-handle {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}

.resizer-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.resizer-dots .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--el-text-color-regular);
  transition: all .2s ease;
}

.resizer:hover .resizer-dots .dot {
  background: white;
  transform: scale(1.1); /* 减小缩放幅度 */
}

/* 展开按钮 - 保持绝对居中 */
.expand-chat-btn,
.expand-side-btn {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 60px;
  border-radius: 12px;
  background: var(--el-color-primary);
  color: var(--el-bg-color-page);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all .2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

/* 展开按钮的定位 - 确保居中且不移动 */
.expand-chat-btn {
  left: 50%;
  transform: translate(-50%, -50%);
}

.expand-side-btn {
  left: 50%; /* 改为 left 而不是 right，确保一致性 */
  transform: translate(-50%, -50%);
}

/* 展开按钮的 hover 效果 - 只轻微缩放 */
.expand-chat-btn:hover,
.expand-side-btn:hover {
  transform: translate(-50%, -50%) scale(1.05); /* 保持居中，只轻微缩放 */
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  background: var(--el-color-primary-dark-2);
}

/* 拖拽时的样式 */
.chat-wrapper.resizing {
  cursor: col-resize;
}

.chat-wrapper.resizing .side-panel-iframe {
  pointer-events: none;
}

.chat-wrapper.resizing * {
  user-select: none;
}

.chat-wrapper.resizing .resizer {
  background: var(--el-color-primary);
}

/* 添加更温和的视觉反馈区域 */
.resizer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px;
  bottom: 0;
  background: transparent;
  transition: background-color .2s ease;
}

.resizer:hover::before {
  background: var(--el-color-primary-light-9);
}

/* 为收起状态的按钮添加更温和的视觉效果 */
.resizer-collapsed-right::before,
.resizer-collapsed-left::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--el-color-primary-light-8), var(--el-color-primary-light-6));
  opacity: 0;
  transition: opacity .2s ease;
}

.resizer-collapsed-right:hover::before,
.resizer-collapsed-left:hover::before {
  opacity: 0.3; /* 降低透明度，更温和 */
}

/* 响应式处理 */
@media (max-width: 768px) {
  .resizer {
    display: none;
  }

  .chat-area-layout {
    display: block;
  }

  .chat-history-panel,
  .chat-history-divider {
    display: none;
  }
  
  .chat-area,
  .side-panel {
    width: 100% !important;
  }
}
/* 扩展相关样式 */
.side-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.extension-switch-btn {
  margin-left: 10px;
}

.extensions-list {
  overflow-y: auto;
}

.extension-card {
  margin: 10px 0;
  cursor: pointer;
  transition: all 0.3s;
  background-color: var(--el-bg-color-page)!important;
  color: var(--el-text-color-primary)!important;
}

.extension-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.extension-card.active {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 1px var(--el-color-primary);
}

.extension-info h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.extension-info p {
  color: var(--el-text-color-secondary);
  margin-bottom: 8px;
}

.extension-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.extensions-divider {
  margin: 12px 0;
}

.side-panel-content {
  padding: auto;
  margin: 6px;
}

.side-panel-iframe {
  padding: 0;
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.extension-card {
  position: relative;   /* 关键：让内部绝对定位相对于卡片 */
}

.btn-top-right {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;           /* 保证在卡片内容之上 */
}

.plugin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.plugin-header h3 {
  margin: 0;
  font-weight: 500;
  color: var(--text-color);
}

.plugin-button-group {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
}

.plugins-container {
  margin-top: 16px;
  min-height: 200px;
}

.empty-plugins {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.plugins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.plugin-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--el-bg-color);
  border-radius: 12px;
  padding: 16px;
  transition: all var(--transition-duration) var(--transition-function);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  height: 100%;
  min-height: 140px;
}

.plugin-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.plugin-content {
  flex: 1;
}

.plugin-name {
  margin: 12px 0 12px 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  font-weight: bold;
}

.plugin-description {
  margin: 0 0 0 8px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.plugin-action {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.sherpa-card {
  margin-top: 12px;
  border-radius: 24px;          /* 整体圆角 */
  overflow: hidden;             /* 确保 header 圆角不被内容顶破 */
  cursor: pointer;
  transition: all 0.3s;
  background-color: var(--el-bg-color-page)!important;
  color: var(--el-text-color-primary)!important;
}

.sherpa-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.left-actions {
  display: flex;
  gap: 8px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 全屏居中，你也可以改成具体高度 */
}

.loading-content {
  text-align: center;
}

.loading-icon {
  font-size: 48px; /* 图标更大 */
}

.loading-text {
  margin-top: 16px;
  font-size: 16px;
  color: var(--el-text-color);
}

.line-box {
  display: flex;
  gap: 8px;          /* 间距自己调 */
  align-items: center;
}

.fill-input {
  flex: 1;           /* 动态占满剩余宽度 */
  min-width: 0;      /* 防止 flex 子项溢出 */
}

.log-dialog .el-dialog__body {
  padding: 10px 20px;
  z-index: 9999;
}

.log-container {
  background-color: #1e1e1e;
  color: #d4d4d4;
  padding: 15px;
  border-radius: 4px;
  height: 500px;
  overflow-y: auto;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap; /* 允许自动换行 */
  word-break: break-all;
}

/* 滚动条整体宽高 */
.log-container::-webkit-scrollbar {
  width: 10px;  /* 垂直滚动条宽度 */
  height: 10px; /* 水平滚动条高度 */
}

/* 滚动条轨道 (背景) */
.log-container::-webkit-scrollbar-track {
  background: #2b2b2b; /* 比容器背景稍亮一点或保持一致 */
  border-radius: 4px;
}

/* 滚动条滑块 (Handle) */
.log-container::-webkit-scrollbar-thumb {
  background: #4c4c4c; /* 深灰色滑块 */
  border-radius: 4px;
  border: 2px solid #2b2b2b; /* 给滑块加个边框，产生间隙感 */
}

/* 鼠标悬停在滑块上 */
.log-container::-webkit-scrollbar-thumb:hover {
  background: #6e6e6e; /* 悬停时变亮 */
}

/* 滚动条角落 (横竖滚动条交汇处) */
.log-container::-webkit-scrollbar-corner {
  background: #1e1e1e;
}

:root {
  /* 优化默认字体栈，使其在 Win/Mac 上都看起来原生 */
  --el-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  
  /* 定义更柔和的通用阴影变量 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-glow: 0 0 15px rgba(var(--el-color-primary-rgb), 0.3);
}

body {
  /* 优化抗锯齿渲染 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 滚动条美化 - 更加纤细现代 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 10px;
  transition: background-color 0.3s;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.5);
}

/* 覆盖侧边栏背景，与顶部栏保持一致 */
.sidebar {
  background-color: var(--el-bg-color-page) !important;
  backdrop-filter: none !important;        /* 移除毛玻璃，与顶部栏统一 */
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid var(--el-border-color-light) !important; /* 保留分割线 */
}

/* 菜单项优化 - 胶囊式选中态 */
.el-menu {
  border-right: none !important;
  background: transparent !important;
  padding: 8px;
}

.el-menu-item {
  border-radius: 8px;
  margin-bottom: 4px;
  height: 44px;
  line-height: 44px;
  background: transparent !important; /* 默认透明 */
}

.el-menu-item:hover {
  background-color: rgba(128, 128, 128, 0.08) !important;
  transform: translateX(2px);
}

.el-menu-item.is-active {
  background: linear-gradient(90deg, var(--el-color-primary-light-9), var(--el-bg-color)) !important;
  color: var(--el-color-primary) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--el-color-primary); /* 左侧指示条 */
}

/* 暗黑模式适配 */
[data-theme="dark"] .el-menu-item.is-active,
[data-theme="midnight"] .el-menu-item.is-active {
  background: rgba(var(--el-color-primary-rgb), 0.15) !important;
}

/* 聊天容器背景微纹理 (可选，增加质感) */
.messages-container {
  border: none !important;
  box-shadow: none !important;
  background-size: 30px 30px; /* 点阵背景 */
}

/* 消息气泡基础 */
.message-content {
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
  line-height: 1.7;
  letter-spacing: 0.3px;
}

/* 用户气泡 - 更鲜艳、去边框 */
.user .message-content {
  border-radius: 18px 18px 4px 18px !important; /* 右下角尖角 */
  background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3)) !important;
  box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.25) !important;
}

/* AI 气泡 - 纯净感 */
.assistant .message-content {
  border-radius: 18px 18px 18px 4px !important; /* 左下角尖角 */
  background-color: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color-lighter) !important;
}

/* 输入框区域 - 悬浮胶囊风格 */
.input-container.expanded-input, 
.chat-area .el-textarea__inner {
  border-radius: 16px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 聚焦时的输入框 - 发光效果 */
.el-textarea__inner:focus {
  box-shadow: 0 0 0 2px var(--el-color-primary-light-5) inset, 0 4px 12px rgba(0,0,0,0.05) !important;
  background-color: var(--el-bg-color) !important;
}

/* 通用卡片升级 */
.provider-card, 
.vendor-card, 
.tool-item, 
.file-item, 
.knowledge-item,
.extension-card {
  border: 1px solid transparent !important; /* 默认隐藏边框 */
  background: var(--el-bg-color) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* 弹性动画 */
  position: relative;
  overflow: hidden;
}

/* 悬停时的“上浮”效果 */
.provider-card:hover, 
.vendor-card:hover, 
.tool-item:hover, 
.file-item:hover,
.knowledge-item:hover,
.extension-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--el-color-primary-light-8) !important;
  z-index: 2;
}

/* 给卡片顶部增加一个装饰性的彩色条 (可选) */
.provider-card::before,
.extension-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--el-color-primary), var(--el-color-primary-light-5));
  opacity: 0;
  transition: opacity 0.3s;
}

.provider-card:hover::before,
.extension-card:hover::before {
  opacity: 1;
}

/* 按钮圆角化 */
.el-button {
  border-radius: 8px !important;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 主要按钮渐变增强 */
.el-button--primary {
  background: linear-gradient(145deg, var(--el-color-primary), var(--el-color-primary-light-3)) !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(var(--el-color-primary-rgb), 0.3);
}

.el-button--primary:hover {
  background: linear-gradient(145deg, var(--el-color-primary-light-3), var(--el-color-primary)) !important;
  box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.4);
  transform: translateY(-1px);
}

.el-button--primary:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* 标签 (Tag) 样式优化 */
.el-tag {
  border-radius: 6px;
  border: none !important;
  font-weight: 500;
}

/* 开关 (Switch) 样式优化 */
.el-switch__core {
  border-radius: 16px !important;
}
.el-switch.is-checked .el-switch__core {
  box-shadow: 0 0 8px rgba(var(--el-color-primary-rgb), 0.5);
}

.code-block {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(128, 128, 128, 0.15) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  margin: 1.5em 0 !important;
}

.code-header {
  background: #282c34 !important; /* 固定深色头，对比更强 */
  padding: 10px 16px !important;
}

.code-lang {
  color: #abb2bf !important;
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
}

.copy-button, .preview-button {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-radius: 4px;
}
.copy-button:hover {
  background: rgba(255,255,255,0.2) !important;
}

[data-theme="dark"] .el-bg-color,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .el-menu {
  /* 避免纯黑，使用深灰蓝，护眼且高级 */
  --bg-color: #121212; 
}

[data-theme="dark"] .provider-card,
[data-theme="dark"] .message-content.assistant {
  background-color: #1e1e1e !important;
  border: 1px solid #333 !important;
}

[data-theme="dark"] .el-input__wrapper,
[data-theme="dark"] .el-textarea__inner {
  background-color: #181818 !important;
  box-shadow: 0 0 0 1px #333 inset !important;
}

/* 1. 基础状态：强制使用主题定义的背景色 */
.el-input__wrapper,
.el-textarea__inner {
  /* 关键修改：使用 var(--el-input-bg-color) 读取你在 :root 或 data-theme 中定义的颜色 */
  background-color: var(--el-input-bg-color) !important;
  
  /* 边框：使用柔和的内阴影代替实线边框，颜色跟随主题 */
  box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
  
  /* 质感优化 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--el-input-text-color) !important;
}

/* 2. 悬停状态 (Hover) */
.el-input__wrapper:hover,
.el-textarea__inner:hover {
  background-color: var(--el-input-bg-color) !important; /* 保持背景不变 */
  box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset !important; /* 边框变色 */
}

/* 3. 聚焦状态 (Focus) */
.el-input__wrapper.is-focus,
.el-textarea__inner:focus {
  /* 聚焦时背景色：稍微调亮一点，或者保持一致 */
  background-color: var(--el-input-bg-color) !important;
  
  /* 聚焦光晕：主色调边框 + 轻微阴影 */
  box-shadow: 0 0 0 1px var(--el-color-primary) inset, 
              0 0 0 1px var(--el-color-primary) inset,
              0 4px 12px rgba(0,0,0,0.08) !important;
}

/* 4. 输入框圆角统一优化 (保持之前的胶囊风格) */
.input-container.expanded-input, 
.chat-area .el-textarea__inner,
.el-input__wrapper {
  border-radius: 12px !important; /* 稍微减小一点圆角，更适合桌面端 */
}

/* 5. 修复输入文字颜色 */
.el-input__inner {
  color: var(--el-input-text-color) !important;
  /* 确保内部 input 标签本身背景透明，透出 wrapper 的颜色 */
  background-color: transparent !important; 
}

/* 修复供应商卡片选中状态被覆盖的问题 */
.vendor-card.selected {
  border-color: var(--el-color-primary) !important;
  background-color: var(--el-color-primary-light-9) !important; /* 建议使用 light-9 或 light-7，视主题深浅调整 */
  box-shadow: 0 0 0 1px var(--el-color-primary) inset !important; /* 可选：增加内描边增强选中感 */
}

/* 暗色模式下的选中状态适配 */
[data-theme="dark"] .vendor-card.selected {
  background-color: rgba(var(--el-color-primary-rgb), 0.2) !important;
}

/* =========================================
   AI 推理与工具展示 - 现代卡片 (右下角水印版)
   ========================================= */

/* 1. 通用基础容器 */
.highlight-block,
.highlight-block-reasoning {
  position: relative;
  margin: 12px 0;
  /* 顶部恢复紧凑，底部留出空间给水印 */
  padding: 12px 16px 24px 16px; 
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
  width: auto;
  max-width: 100%;
  overflow-x: hidden; /* 防止内容撑开 */
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------
   2. 推理块 (Thinking) - 暖色调
   ----------------------------------------- */
.highlight-block-reasoning {
  /* 背景：极淡的暖色混合 */
  background-color: rgba(255, 165, 0, 0.03); 
  /* 左侧装饰线：保留方案一的设计感 */
  border: none;
  border-left: 3px solid var(--el-color-warning); 
  
  /* 文字样式 */
  color: var(--el-text-color-regular);
  font-family: var(--el-font-family);
}

/* 右下角不起眼的水印 */
.highlight-block-reasoning::after {
  content: "THINKING PROCESS";
  position: absolute;
  bottom: 5px;
  right: 12px;
  font-size: 9px;           /* 极小字号 */
  font-weight: 700;
  color: var(--el-text-color-placeholder); /* 使用占位符颜色，非常淡 */
  text-transform: uppercase;
  letter-spacing: 1px;      /* 增加字间距，提升精致感 */
  opacity: 0.5;             /* 进一步降低不透明度 */
  pointer-events: none;     /* 不影响鼠标点击 */
}

/* 推理内容字体微调 */
.highlight-block-reasoning p,
.highlight-block-reasoning div {
  margin: 0.5em 0;
  opacity: 0.95;
}

/* -----------------------------------------
   3. 工具块 (Tools) - 冷色调/科技感
   ----------------------------------------- */
.highlight-block {
  /* 背景：极淡的冷色混合 */
  background-color: color-mix(in srgb, var(--el-color-info) 6%, transparent);
  /* 左侧装饰线：区分于推理块 */
  border: none;
  border-left: 3px solid var(--el-color-info);
  
  /* 文字：等宽字体 */
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  color: var(--el-text-color-secondary);
  font-size: 12px;
}

/* 右下角水印 */
.highlight-block::after {
  content: "TOOL OUTPUT";
  position: absolute;
  bottom: 5px;
  right: 12px;
  font-size: 9px;
  font-weight: 700;
  color: var(--el-text-color-placeholder);
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.5;
  pointer-events: none;
}

/* -----------------------------------------
   4. 交互与细节
   ----------------------------------------- */

/* 悬停效果：轻微上浮，背景加深 */
.highlight-block:hover,
.highlight-block-reasoning:hover {
  background-color: rgba(0, 0, 0, 0.05); /* 通用加深 */
  transform: translateY(-1px);
}

/* 内部滚动条美化 (当内容过长出现滚动时) */
.highlight-block::-webkit-scrollbar,
.highlight-block-reasoning::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
.highlight-block::-webkit-scrollbar-track,
.highlight-block-reasoning::-webkit-scrollbar-track {
  background: transparent;
}
.highlight-block::-webkit-scrollbar-thumb,
.highlight-block-reasoning::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.2);
  border-radius: 4px;
}
/* =========================================
   2. Markdown 表格高级样式 & 下载按钮
   ========================================= */

/* 表格外部容器 (由JS生成) */
.markdown-table-wrapper {
  position: relative;
  margin: 1.5em 0;
  border-radius: 12px;
  
  /* --- 核心修改开始 --- */
  display: block;                /* 保持块级特性（换行） */
  width: fit-content;            /* 关键：宽度适配内容 */
  min-width: 50px;              /* 关键：设置最小宽度，防止表格太窄时下载按钮遮挡表头 */
  max-width: 100%;               /* 防止超出父容器宽度 */
  overflow-x: auto;              /* 如果表格比屏幕宽，允许横向滚动 */
  /* --- 核心修改结束 --- */

  /* 边框和背景跟随主题 */
  border: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color); 
  
  /* 阴影 */
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.04));
  
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.markdown-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 !important; /* 去掉 table 自身的 margin */
  border: none !important; /* 边框交给 wrapper */
}
/* 优化滚动条样式（防止在Windows下滚动条太丑破坏圆角） */
.markdown-table-wrapper::-webkit-scrollbar {
  height: 6px; /* 横向滚动条高度 */
}
.markdown-table-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--el-border-color);
  border-radius: 4px;
}

/* 重置 Markdown 内部表格样式 */
.markdown-body table {
  width: 100%;
  border-collapse: separate; /* 关键：分离边框以支持圆角 */
  border-spacing: 0;
  border: none !important;
  margin: 0 !important;
}

/* 表头样式 */
.markdown-body table th {
  /* 背景色：使用主题定义的 Page 背景或浅色主色 */
  background-color: var(--el-color-primary) !important;
  color: white !important;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--el-border-color-light);
  border-right: 1px solid transparent; /* 占位 */
}

/* 单元格样式 */
.markdown-body table td {
  padding: 12px 16px;
  color: var(--el-text-color-regular);
  background-color: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-lighter);
  transition: background-color 0.2s;
}

/* 斑马纹 (偶数行) */
.markdown-body table tr:nth-child(even) td {
  background-color: var(--el-fill-color-lighter, rgba(128,128,128, 0.03));
}

/* 鼠标悬停行高亮 */
.markdown-body table tr:hover td {
  /* 混合主色调来实现高亮，适应所有主题颜色 */
  background-color: color-mix(in srgb, var(--el-color-primary) 8%, var(--el-bg-color)) !important;
}

/* 移除最后一行底部的边框，完美贴合圆角容器 */
.markdown-body table tr:last-child td {
  border-bottom: none;
}

/* --- 表格下载按钮 --- */
.table-download-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  padding: 4px 12px;
  /* 按钮颜色跟随主题 */
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  color: var(--el-text-color-secondary);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}

/* 只有鼠标进入表格区域时才显示按钮 */
.markdown-table-wrapper:hover .table-download-btn {
  opacity: 1;
  transform: translateY(0);
}

.table-download-btn:hover {
  color: var(--el-color-primary);
  border-color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
}

/* =========================================
   3. Markdown 链接美化：高级灰色胶囊按钮
   ========================================= */

/* 1. 基础样式：重置默认的蓝色链接，改为灰色胶囊 */
.markdown-body a {
  display: inline-flex;          /* 让链接像个小盒子，支持 padding */
  align-items: center;           /* 内容垂直居中 */
  vertical-align: middle;        /* 与周围文字对齐 */
  
  /* 尺寸与间距 */
  padding: 2px 10px 2px 8px;     /* 上下紧凑，左右宽敞 */
  margin: 0 4px;                 /* 链接之间留点空隙 */
  border-radius: 14px;           /* 完整的圆角 (胶囊形) */
  
  /* 字体设置 */
  font-size: 0.9em;              /* 比正文稍小，更精致 */
  line-height: 1.5;
  text-decoration: none !important; /* 去掉下划线 */
  
  /* --- 颜色系统 (高级灰) --- */
  /* 背景：使用极浅的填充色 */
  background-color: var(--el-fill-color, #f0f2f5);
  /* 边框：浅灰色描边 */
  border: 1px solid var(--el-border-color, #dcdfe6);
  /* 文字：次级文字颜色 (深灰) */
  color: var(--el-text-color-regular, #606266) !important;
  
  /* 动画 */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* 强制不换行 (可选，防止长链接标题被打断，如果标题很长建议去掉这行) */
  /* white-space: nowrap; */
  /* max-width: 100%; */
}

/* 2. 添加链接图标前缀 (增加识别度) */
.markdown-body a::before {
  /* 使用 FontAwesome 的链接图标 */
  content: "\f0c1"; 
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  
  margin-right: 6px;             /* 图标和文字的间距 */
  font-size: 0.85em;             /* 图标稍小 */
  opacity: 0.6;                  /* 图标半透明，不要太抢眼 */
  transition: transform 0.2s;
}

/* 3. 悬停状态 (Hover)：变色、上浮、投影 */
.markdown-body a:hover {
  /* 背景：变成极浅的主色调 */
  background-color: var(--el-color-primary-light-9) !important;
  /* 边框：变成主色调 */
  border-color: var(--el-color-primary) !important;
  /* 文字：变成主色调 */
  color: var(--el-color-primary) !important;
  
  /* 交互反馈 */
  transform: translateY(-1px);   /* 微微上浮 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* 增加投影 */
}

/* 悬停时图标的小动画 */
.markdown-body a:hover::before {
  opacity: 1;
  transform: rotate(-45deg); /* 图标旋转一下，增加灵动感 */
}

/* 4. 点击状态 (Active) */
.markdown-body a:active {
  transform: translateY(0);
  box-shadow: none;
  background-color: var(--el-color-primary-light-8) !important;
}

/* ========================================= */
/* A2UI 自动适配主题样式 (全主题兼容版) */
/* ========================================= */

/* 1. 根容器通用样式 */
.a2ui-root {
  margin: 10px 0;
  border-radius: 12px;
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  /* 确保文字颜色跟随主题 */
  color: var(--text-color); 
}

/* 2. 表单/组合模式的容器 */
.a2ui-root-boxed {
  /* ★ 关键修改：使用 --bg-color (你的主题基础色) 而不是 overlay */
  /* 这样无论你是深蓝还是深紫，背景都会一致 */
  background-color: var(--bg-color, var(--el-bg-color)); 
  
  /* 边框使用半透明色，适配所有深浅背景 */
  border: 1px solid rgba(128, 128, 128, 0.2);     
  
  /* 阴影更柔和 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);       
  padding: 20px;
}

/* 3. 卡片/纯净模式的容器 (透明) */
.a2ui-root-clean {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* 4. 标题栏 */
.a2ui-title {
  color: var(--el-text-color-primary);          
  /* 分割线改为半透明，适配所有色调 */
  border-bottom: 1px solid rgba(128, 128, 128, 0.2); 
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

/* 5. 纯文本内容 */
.a2ui-text-content {
  color: var(--el-text-color-regular);          
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* 6. 内部卡片样式 */
.a2ui-inner-card {
  /* ★ 关键修改：强制使用主题背景色 */
  background-color: var(--bg-color, var(--el-bg-color)) !important;
  border: 1px solid rgba(128, 128, 128, 0.2) !important;
  color: var(--el-text-color-primary) !important;
  border-radius: 12px !important;
  margin-bottom: 12px;
  /* 移除 Element Plus 默认阴影，避免在深色主题显得脏 */
  box-shadow: none !important; 
}

.a2ui-inner-card .el-card__header {
  border-bottom: 1px solid rgba(128, 128, 128, 0.15) !important;
  color: var(--el-text-color-primary);
}

/* 7. 卡片描述文字 */
.a2ui-card-desc {
  font-size: 14px;
  color: var(--el-text-color-secondary); 
  line-height: 1.6;
}

/* 8. 卡片底部操作栏 */
.a2ui-card-actions {
  margin-top: 15px;
  text-align: right;
  border-top: 1px solid rgba(128, 128, 128, 0.15); /* 半透明分割线 */
  padding-top: 12px;
}

/* 9. 布局容器 */
.a2ui-group-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.a2ui-form-container {
  display: block;
}

/* ========================================= */
/* A2UI List & News 样式 (半透明适配版) */
/* ========================================= */

.a2ui-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.a2ui-list-item {
  padding: 12px;
  border-radius: 8px;
  
  /* ★ 关键修改：使用 rgba 半透明背景 ★ */
  /* 在亮色主题是 5% 黑色 (浅灰)，在深色主题是 5% 白色 (微亮) */
  /* 为了兼容，我们使用 CSS 变量 fallback 或者简单的白色半透明叠加 */
  background-color: rgba(125, 125, 125, 0.08); 
  
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.a2ui-list-item:hover {
  /* 悬停时加深背景浓度 */
  background-color: rgba(125, 125, 125, 0.15);
  transform: translateX(4px); 
}

/* 针对暗色主题的特调 (可选，如果上面的 rgba 效果不够好) */
[data-theme="dark"] .a2ui-list-item,
[data-theme="midnight"] .a2ui-list-item, 
[data-theme="neon"] .a2ui-list-item {
   background-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .a2ui-list-item:hover,
[data-theme="midnight"] .a2ui-list-item:hover,
[data-theme="neon"] .a2ui-list-item:hover {
   background-color: rgba(255, 255, 255, 0.1);
}

.a2ui-list-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}

.a2ui-list-desc {
  font-size: 13px;
  color: var(--el-text-color-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.a2ui-list-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--el-text-color-placeholder);
}

.a2ui-list-meta .tag {
  /* 使用透明度混合的主色，适配任何背景 */
  background-color: var(--el-color-primary-light-9); 
  color: var(--el-color-primary);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  font-weight: 500;
  /* 确保在深色模式下 Tag 不会太刺眼 */
  filter: brightness(0.95);
}

/* 修复 A2UI 内 Markdown 内容的间距 */
.a2ui-text-content p, 
.a2ui-card-desc p {
  margin-bottom: 8px; /* 减小段落间距 */
  margin-top: 0;
}
.a2ui-text-content p:last-child, 
.a2ui-card-desc p:last-child {
  margin-bottom: 0;
}
.a2ui-text-content ul, 
.a2ui-card-desc ul {
  padding-left: 20px; /* 确保列表符号显示 */
  margin: 5px 0;
}

/* ========================================= */
/* A2UI 新增交互组件样式 (Form Controls) */
/* ========================================= */

/* 1. 单选框 & 多选框组 (Radio & Checkbox) */
/* 让选项组自动换行，避免手机端溢出 */
.a2ui-root .el-radio-group,
.a2ui-root .el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

/* 增强带边框的选项样式 (使其看起来像小卡片) */
.a2ui-root .el-radio.is-bordered,
.a2ui-root .el-checkbox.is-bordered {
  margin-right: 0 !important; /* 移除 Element 默认右边距，改用 gap 控制 */
  background-color: rgba(125, 125, 125, 0.04); /* 微弱的背景填充 */
  border-color: rgba(128, 128, 128, 0.2);     /* 半透明边框 */
  transition: all 0.2s;
}

/* 选中状态：使用主题主色，并增加不透明度 */
.a2ui-root .el-radio.is-bordered.is-checked,
.a2ui-root .el-checkbox.is-bordered.is-checked {
  background-color: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary);
}

/* 2. 评分组件 (Rate) */
.a2ui-root .el-rate {
  height: auto;
  padding: 5px 0;
  display: flex;
  align-items: center;
}
.a2ui-root .el-rate__text {
  /* 确保评分后的文字 (如"满意") 颜色跟随主题 */
  color: var(--el-text-color-regular) !important;
  margin-left: 10px;
}

/* 3. 滑块组件 (Slider) */
.a2ui-root .el-slider__runway {
  /* 滑块轨道背景适配 */
  background-color: var(--el-border-color-lighter);
}
/* 修复滑块输入框在某些主题下的背景 */
.a2ui-root .el-slider__input .el-input__wrapper {
  background-color: transparent; 
  box-shadow: 0 0 0 1px var(--el-border-color) inset;
}

/* 4. 警告/提示条 (Alert) */
.a2ui-root .el-alert {
  margin: 0;
  border: 1px solid transparent;
  /* 稍微圆润一点，符合聊天气泡风格 */
  border-radius: 8px;
}

/* 针对不同类型的 Alert 微调背景透明度 (可选，Element Plus 默认其实不错) */
/* 这里主要是为了修复 Markdown 在 Alert 里的边距问题 */
.a2ui-root .el-alert .el-alert__content {
  width: 100%; /* 确保内容占满 */
}

/* 修复：Alert 内部 Markdown <p> 标签会导致垂直间距过大 */
.a2ui-root .el-alert .el-alert__description p {
  margin: 4px 0;
  line-height: 1.5;
}
.a2ui-root .el-alert .el-alert__description p:first-child {
  margin-top: 0;
}
.a2ui-root .el-alert .el-alert__description p:last-child {
  margin-bottom: 0;
}

/* 5. 日期选择器 (DatePicker) */
.a2ui-root .el-date-editor.el-input,
.a2ui-root .el-date-editor.el-input__wrapper {
  width: 100%; /* 强制占满容器 */
  box-sizing: border-box;
}

/* ========================================= */
/* 移动端适配微调 */
/* ========================================= */
@media (max-width: 768px) {
  /* 手机上 Radio/Checkbox 占满一行，便于点击 */
  .a2ui-root .el-radio.is-bordered,
  .a2ui-root .el-checkbox.is-bordered {
    width: 100%; 
    justify-content: center; /* 文字居中 */
  }
  
  /* 手机上 Slider 的输入框可能太挤，可以隐藏或缩小 */
  .a2ui-root .el-slider__input {
    width: 60px;
  }
  .a2ui-root .el-slider__runway.show-input {
    margin-right: 75px; /* 给输入框留位置 */
  }
}

/* ========================================= */
/* A2UI Code 组件样式 (Mac 风格终端) */
/* ========================================= */

.a2ui-code-block {
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden; /* 确保圆角不被内部溢出破坏 */
  font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
  border: 1px solid rgba(128, 128, 128, 0.2);
  
  /* 自动适配背景色：
     亮色模式：非常浅的灰色
     深色模式：深黑灰色 (接近 VSCode)
  */
  background-color: var(--code-bg-color, #282c34);
}


/* 顶部栏 (语言标签 + 复制按钮) */
.a2ui-code-block .code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  /* 顶部栏背景：稍微比代码区深一点或浅一点，形成层次感 */
  background-color: rgba(128, 128, 128, 0.1);
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
  user-select: none;
}

.a2ui-code-block .lang-tag {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 复制按钮 */
.a2ui-code-block .copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  cursor: pointer;
  transition: all 0.2s;
  padding: 4px 8px;
  border-radius: 4px;
}

.a2ui-code-block .copy-btn:hover {
  background-color: rgba(128, 128, 128, 0.15);
  color: var(--el-color-primary);
}

/* 代码内容区 */
.a2ui-code-block .code-body {
  padding: 12px;
  overflow-x: auto; /* 超出宽度横向滚动 */
}

/* 核心 Pre/Code 样式 */
.a2ui-code-block .code-body pre {
  margin: 0;
  padding: 0;
  background-color: var(--code-bg-color, #282c34);
  border: none;
  line-height: 1.5;
  color: var(--el-text-color-secondary);
}

.a2ui-code-block .code-body pre code {
  font-size: 13px;
  /* 确保代码颜色在深浅模式下可见 */
  color: var(--el-text-color-secondary);
  white-space: pre; /* 保持格式 */
  word-wrap: normal;
}

/* 移除 markdown 内容中最后一个元素的底部边距 */
.markdown-body > *:last-child,
.markdown-body > div > *:last-child {
    margin-bottom: 0 !important;
}

/* 针对你代码中的特定结构，可能还需要深入一层 */
.markdown-body p:last-child {
    margin-bottom: 0 !important;
}

/* A2UI TTS Block 样式 */
.a2ui-tts-block {
  display: flex;
  align-items: flex-start;
  background-color: var(--el-bg-color-page); /* 适配亮/暗模式 */
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.a2ui-tts-block:hover {
  background-color: var(--el-bg-color-page);
  border-color: var(--el-color-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.a2ui-tts-block:active {
  transform: translateY(0);
}

.a2ui-tts-block .tts-icon {
  margin-right: 12px;
  font-size: 18px;
  color: var(--el-color-primary);
  margin-top: 2px; /* 图标微调 */
  flex-shrink: 0;
}

.a2ui-tts-block .tts-body {
  flex: 1;
  min-width: 0; /* 防止 flex 子项溢出 */
}

.a2ui-tts-block .tts-label {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-bottom: 4px;
}

.a2ui-tts-block .tts-content {
  font-size: 14px;
  color: var(--el-text-color-primary);
  line-height: 1.5;
}

/* 去除 Markdown 默认的 margin */
.a2ui-tts-block .tts-content p {
  margin: 0;
}

.a2ui-tts-block .tts-action-hint {
  margin-left: 12px;
  font-size: 12px;
  color: var(--el-text-color-placeholder);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  height: 100%;
}

.a2ui-tts-block:hover .tts-action-hint {
  opacity: 1;
}

/* --- 脚注样式修正 --- */

/* 1. 针对正文右上角的引用链接 */
.footnote-ref a {
    /* 强制重置样式，清除可能的背景图或边框 */
    text-decoration: none !important;
    background: #eee !important; /* 浅灰背景 */
    border: none !important;
    outline: none !important;
    
    /* 核心：固定宽高 + Flex 居中 = 完美圆形 */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 16px !important;    /* 强制宽度 */
    height: 16px !important;   /* 强制高度 */
    border-radius: 50% !important;
    
    /* 文字样式 */
    color: #555 !important;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 1 !important; /* 防止行高撑开 */
    padding: 0 !important;     /* 清除内边距 */
    margin: 0 2px;             /* 左右留点缝隙 */
    
    /* 动画 */
    transition: all 0.2s ease;
}

/* 2. 核心修复：屏蔽伪元素产生的“链接图标” */
/* 大多数全局链接图标是通过 ::after 或 ::before 添加的 */
.footnote-ref a::after,
.footnote-ref a::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 3. 如果图标是作为子元素 <i> 存在的，也隐藏它 */
.footnote-ref a i,
.footnote-ref a svg {
    display: none !important;
}

/* 4. 悬停高亮 */
.footnote-ref a:hover {
    background-color: var(--el-color-primary) !important;
    color: #fff !important;
    transform: scale(1.1);
}

/* 调整 sup 标签位置，让圆圈跟文字对齐稍微舒服点 */
sup.footnote-ref {
    top: -0.6em;
    font-size: 100%; /* 防止sup再次缩小字体 */
}

/* 隐藏插件默认生成的分割线 */
hr.footnotes-sep {
    display: none !important;
}

/* 确保底部脚注区域只有一个上边框 */
.footnotes {
    margin-top: 0px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0; /* 这里保留你自己想要的分割线 */
    color: #666;
    font-size: 0.9em;
}

.footnote-backref {
    text-decoration: none !important; /* 去掉下划线 */
    border: none !important;          /* 去掉可能的边框 */
    margin-left: 4px;                 /* 与文字隔开一点距离 */
    color: #409eff;                   /* 设置为你想要的主题色 */
    font-family: sans-serif;          /* 确保符号显示正常 */
}

/* 核心：隐藏该链接自动附加的图标 (伪元素) */
.footnote-backref::after,
.footnote-backref::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
}

/* 防御性代码：如果图标是通过内部 i/svg 标签实现的，也隐藏掉 */
.footnote-backref i,
.footnote-backref svg {
    display: none !important;
}

/* 鼠标悬停效果 */
.footnote-backref:hover {
    color: var(--el-color-primary) !important;
    cursor: pointer;
}
/* --- START OF STREAMDOWN OPTIMIZATIONS --- */

/* 1. 解决表格/布局抖动核心修复 */
/* 强制表格容器块级化，防止内容撑开导致父级跳动 */
.markdown-body table {
  display: block !important;       /* 覆盖原本的 display: table */
  width: 100% !important;
  overflow-x: auto !important;     /* 允许横向滚动 */
  table-layout: auto !important;   /* 让浏览器自动布局 */
  margin-bottom: 1em !important;
  border-collapse: collapse !important;
  /* 防止空表头导致高度塌陷 */
  min-height: 40px; 
}

/* 固定单元格行为，减少文字输入时的微小跳动 */
.markdown-body th, 
.markdown-body td {
  min-width: 60px;               /* 最小宽度 */
  word-break: break-word;        /* 允许换行 */
  white-space: normal;
  transition: background-color 0.2s; /* 仅颜色过渡，不过渡宽高 */
}

/* 2. 丝滑扫描进场动画 (Stream Effect) */
@keyframes stream-slide-in {
  0% {
    opacity: 0;
    transform: translateY(4px) translateX(-3px);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
    filter: blur(0);
  }
}

/* 应用动画到 Markdown 的块级元素 */
.markdown-body > p,
.markdown-body > ul,
.markdown-body > ol,
.markdown-body > table,
.markdown-body > blockquote,
.markdown-body > pre {
  animation: stream-slide-in 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  transform-origin: left center;
  will-change: transform, opacity, filter;
}

/* 列表项逐个出现 */
.markdown-body li {
  animation: stream-slide-in 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  will-change: transform, opacity, filter;
}

/* 3. 光标特效 (仅在正在生成的最后一段显示) */
/* 我们通过 JS 给正在生成的容器加 .streaming 类 */
.streaming > *:last-child::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 1.2em;
  background-color: var(--el-color-primary);
  margin-left: 4px;
  vertical-align: sub;
  animation: stream-blink 1s step-end infinite;
  box-shadow: 0 0 8px var(--el-color-primary);
}

/* 代码块里不显示光标 */
.streaming > pre:last-child::after {
  display: none;
}

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

/* Respect OS-level motion reduction preferences */
@media (prefers-reduced-motion: reduce) {
  .markdown-body > p,
  .markdown-body > ul,
  .markdown-body > ol,
  .markdown-body > table,
  .markdown-body > blockquote,
  .markdown-body > pre,
  .markdown-body li {
    animation: none !important;
    will-change: auto !important;
  }
  .streaming > *:last-child::after {
    animation: none !important;
    opacity: 1;
  }
}

/* 4. 代码块防抖优化 */
.markdown-body pre code {
  /* 强制换行，防止代码过长导致布局瞬间撑开 */
  white-space: pre-wrap !important; 
  word-break: break-all !important; 
}

/* --- 修复表格底部空隙 --- */

/* 1. 强制去除 Wrapper 内部 Table 的所有外边距 */
/* markdown-body 通常给 table 设了 margin-bottom: 1rem，这会导致 Wrapper 底部有大片空白 */
.markdown-table-wrapper table {
  margin: 0 !important;
  border-bottom: none !important; /* 避免双重边框 */
}

/* 2. 确保 Wrapper 紧贴内容 */
.markdown-table-wrapper {
  /* 确保 wrapper 自身没有多余的 padding */
  padding: 0 !important; 
  /* 确保溢出处理正确 */
  overflow: hidden; 
  /* 重新把圆角加回来，防止直角表格刺破圆角容器 */
  border-radius: 8px;
}

/* 3. 去掉最后一行单元格的底部边框 (可选，为了完美视觉) */
/* 因为 Wrapper 已经有边框了，如果最后一行也有 border-bottom，看起来会变粗 */
.markdown-table-wrapper table tr:last-child td {
  border-bottom: none !important;
}

/* 4. 修复水平滚动条导致的高度 (可选) */
/* 如果你需要横向滚动，确保滚动条不占据非滚动状态的高度 */
.markdown-table-wrapper::-webkit-scrollbar {
  height: 6px; 
  background: transparent;
}

/* --- END OF STREAMDOWN OPTIMIZATIONS --- */


/* =========================================
   IOS Minimalist Browser Theme (Theme Adapted)
   ========================================= */

/* 容器 */
.ai-browser-container {
    display: flex;
    flex-direction: column;
    height: 100% !important; /* 强制占满父容器高度 */
    /* 使用页面背景变量 */
    background-color: var(--el-bg-color-page); 
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: background-color 0.3s;
}

/* --- 顶部 Header --- */
.browser-header {
    /* 使用混合色实现半透明：取85%的主题背景色，混入透明色 */
    background: color-mix(in srgb, var(--el-bg-color) 85%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--el-border-color-light);
    z-index: 100;
    padding-bottom: 8px;
}

/* --- 标签栏 --- */
.browser-tabs {
    display: flex;
    align-items: center;
    padding: 8px 12px 0 12px;
    gap: 6px;
    overflow-x: auto;
}

/* 标签样式 */
.browser-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 180px;
    height: 34px;
    background: transparent;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 12px;
    color: var(--el-text-color-regular); /* 适配文字颜色 */
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.browser-tab.active {
    background: var(--el-bg-color); /* 激活时使用卡片背景 */
    color: var(--el-text-color-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05); /* 阴影保持微弱 */
    border: 1px solid var(--el-border-color-lighter);
}

.tab-content {
    display: flex;
    align-items: center;
    width: 85%;
    overflow: hidden;
}

.tab-icon img, .tab-icon i {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
}

.browser-tab.active .tab-icon i {
    color: var(--el-color-primary); /* 激活图标使用主色 */
}

.tab-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.tab-close {
    opacity: 0;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s;
    color: var(--el-text-color-secondary);
}

.browser-tab:hover .tab-close {
    opacity: 1;
}
.tab-close:hover {
    background: var(--el-bg-color-page);
    color: var(--el-color-danger);
}

.new-tab-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--el-text-color-regular);
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.new-tab-btn:hover {
    background: var(--el-bg-color-page);
}

/* --- 工具栏 & 地址栏 --- */
.browser-toolbar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 16px;
}

.nav-buttons {
    display: flex;
    gap: 4px;
    width: 140px;
}

.nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--el-text-color-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover:not(:disabled) {
    background: var(--el-bg-color-page);
}
.nav-btn:disabled {
    color: var(--el-text-color-placeholder);
    cursor: default;
}

.address-bar-wrapper {
    flex: 1;
    max-width: 800px;
    margin: 0 auto;
}

/* 地址栏 Input */
.ios-address-input .el-input__wrapper {
    /* 使用稍深的填充色 */
    background: var(--el-bg-color-page) !important; 
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 4px 12px !important;
    height: 36px;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ios-address-input .el-input__wrapper.is-focus {
    background-color: var(--el-bg-color) !important;
    /* 聚焦光环使用主色 */
    box-shadow: 0 0 0 2px var(--el-color-primary) !important; 
}

.ios-address-input .el-input__inner {
    font-size: 14px;
    color: var(--el-text-color-primary) !important;
    text-align: left;
}
.address-lock-icon {
    color: var(--el-text-color-secondary);
    margin-right: 6px;
    font-size: 12px;
}


/* --- 浏览器主体 --- */
.browser-body {
    flex: 1;              /* 占据剩余垂直空间 */
    position: relative;   /* 关键：为内部绝对定位做基准 */
    width: 100%;
    height: 0;            /* 关键技巧：配合 flex:1 使用，防止被内部内容撑大导致滚动条 */
    background: var(--el-bg-color);
    overflow: hidden;
}

/* --- 极简欢迎页 (适配版) --- */
.browser-welcome-page {
    width: 100%;
    height: 100%;
    background: var(--el-bg-color-page);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 3. Webview 包装器：使用绝对定位强制铺满 */
.webview-wrapper {
    position: absolute;   /* 脱离文档流，强制拉伸 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;        /* 确保内部 webview 能利用 flex 属性 */
    flex-direction: column;
}

/* 4. Webview 标签本身 */
.webview-element {
    flex: 1;
    width: 100% !important;
    height: 100% !important;
    border: none;
    display: inline-flex; /* Electron webview 推荐的 display 属性 */
}

/* 5. 欢迎页也需要绝对定位铺满，否则可能会被挤压 */
.browser-welcome-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;           /* 确保在 webview 上层（如果有重叠的话，虽然 v-if 控制了） */
    background: var(--el-bg-color-page);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;     /* 允许欢迎页内容过多时滚动 */
}

.ios-welcome-container {
    width: 100%;
    max-width: 680px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-10%);
}

.ios-title {
    font-size: 48px;
    font-weight: 700;
    /* 标题渐变：从主文本色到次文本色 */
    background: linear-gradient(135deg, var(--el-text-color-primary) 0%, var(--el-text-color-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 40px;
    letter-spacing: -1px;
}

/* 搜索框容器 */
.ios-search-wrapper {
    width: 100%;
    height: 60px;
    /* 搜索框背景：使用覆盖层背景(通常是纯色) + 透明度 */
    background: var(--bg-color)!important;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 20px;
    /* 阴影适配 */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05), 0 2px 10px rgba(0,0,0,0.01);
    display: flex;
    align-items: center;
    padding: 0 16px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 500; /* 确保下拉菜单不被遮挡 */
}

/* 悬停和聚焦效果 */
.ios-search-wrapper:hover {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0,0,0,0.03);
    transform: translateY(-1px);
    border-color: var(--el-border-color);
}

.ios-search-wrapper.focused {
    border-color: var(--el-color-primary);
    /* 光晕使用主色，降低透明度 */
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--el-color-primary) 15%, transparent), 
                0 15px 50px rgba(0, 0, 0, 0.1);
}

/* 引擎选择器 */
.engine-selector {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    /* 增加 padding 让热区变大一点 */
    padding-right: 12px;
    padding-left: 4px; 
    border-right: 1px solid var(--el-border-color-lighter);
    background: var(--bg-color)!important;
    cursor: pointer;
}


.current-engine {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--el-text-color-primary);
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s;
}
.current-engine i {
    font-size: 18px;
}
.current-engine .fa-caret-down {
    font-size: 12px;
    color: var(--el-text-color-secondary);
}

/* 下拉菜单 */
.engine-dropdown {
    position: absolute;
    /* 1. 改为 calc 方式定位，不使用 margin-top */
    top: calc(100% + 10px); 
    left: 0;
    width: 140px;
    background: var(--bg-color)!important;
    backdrop-filter: blur(20px);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid var(--el-border-color-light);
    padding: 6px;
    z-index: 1000;
    /* margin-top: 10px;  <-- 2. 删掉这一行，因为我们用 top: calc() 代替了 */
    animation: dropdownFade 0.2s ease-out;
}
.engine-dropdown::before {
    content: '';
    position: absolute;
    /* 向上延伸 10px，填补与按钮之间的空隙 */
    top: -10px; 
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent; /* 透明，不可见但可交互 */
}

@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.engine-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--el-text-color);
    transition: all 0.2s;
    cursor: pointer;
}

.engine-item.active {
    color: var(--el-color-primary);
    background: var(--el-color-primary-light-9);
}

/* 输入框 */
.ios-search-input {
    flex: 1;
    border: none;
    background: transparent;
    height: 100%;
    padding: 0 16px;
    font-size: 18px;
    color: var(--el-text-color)!important;
    background: var(--bg-color)!important;
    outline: none;
}
.ios-search-input::placeholder {
    color: var(--el-text-color-placeholder);
    font-weight: 300;
}

/* 搜索按钮 */
.ios-search-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--el-color-primary);
    border: none;
    color: #fff; /* 按钮文字固定白色 */
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
    transform: scale(0.8);
}

.ios-search-wrapper.focused .ios-search-btn,
.ios-search-wrapper:hover .ios-search-btn {
    opacity: 1;
    transform: scale(1);
}

.ios-search-btn:hover {
    /* 悬停加深颜色：混合黑色 */
    background: color-mix(in srgb, var(--el-color-primary) 90%, black);
    transform: scale(1.1);
}


/* ================= 集成浏览器条样式 ================= */

.integrated-browser-bar {
  display: flex;
  align-items: center;
  flex: 1; 
  min-width: 0;
  margin-top: 2px;
  height: 100%;
  gap: 8px;
  -webkit-app-region: no-drag; /* 只有这部分不可拖拽 */
  /* margin-left 已在 HTML 中内联设置，利用父级 top-bar 的 drag 属性实现左侧拖拽区域 */
}

/* 1. 地址栏 */
.integrated-address-bar {
  height: 26px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  width: 160px; /* 稍微调窄一点，给右边留空间 */
  flex-shrink: 0;
  transition: width 0.3s;
}
.integrated-address-bar:focus-within {
  width: 220px; 
}
/* 输入框样式 */
.ib-input .el-input__wrapper {
  background-color: var(--el-fill-color-light);
  border-radius: 15px;
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  box-shadow: none; 
}
.ib-input .el-input__inner {
  font-size: 12px;
  height: 24px;
}

/* 2. 标签栏容器 (位于中间) */
.integrated-tabs-container {
  flex: 1;
  min-width: 0; /* 允许容器被压缩 */
  height: 100%;
  display: flex;
  align-items: center;
  overflow-x: auto; /* 关键：开启横向滚动 */
  overflow-y: hidden;
  /* 隐藏滚动条 (Chrome/Electron) */
  scrollbar-width: none; 
  /* 两侧渐变遮罩 */
  mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
}
.integrated-tabs-container::-webkit-scrollbar {
  display: none;
}
.tabs-scroll-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  /* 关键：宽度根据内容自适应，但至少要填满容器 */
  width: max-content; 
  min-width: 100%; 
}

/* 单个标签 */
.ib-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  /* 1. 宽度策略：实现自动伸缩 */
  width: 150px;       /* 默认理想宽度 */
  min-width: 80px;    /* 关键：压到 80px 就不再压了，开始触发父容器滚动 */
  max-width: 180px;
  
  /* 2. 弹性策略 */
  flex-shrink: 0;     /* 这里有个权衡：*/
  /* 如果设为 1：标签会一直挤压直到 min-width，然后才滚动（符合你的要求）*/
  /* 如果设为 0：标签完全不挤压，直接滚动 */
  /* 建议设为 0，因为配合边缘滚动，固定宽度的标签更容易点击 */
  /* 但如果你一定要“先挤压后滚动”，请改为 flex-shrink: 1; */
  
  height: 26px;
  margin-top: 4px;
  /* 其他样式不变... */
  background-color: transparent;
  border-radius: 6px;
  padding: 0 6px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  color: var(--el-text-color-regular);
  transition: background-color 0.2s, width 0.2s; /* 加个过渡动画更顺滑 */
}

.ib-tab.active {
  background-color: var(--el-bg-color);
  color: var(--el-color-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ib-tab-content {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  flex: 1;
}
.ib-icon {
  display: flex;
  align-items: center;
  width: 14px;
  height: 14px;
}
.ib-icon img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
.ib-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ib-close {
  opacity: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
}
.ib-tab:hover .ib-close {
  opacity: 1;
}
.ib-close:hover {
  background-color: var(--el-fill-color-dark);
  color: var(--el-color-danger);
}

/* 3. 右侧控制组 (新建标签 + 导航) */
.browser-controls-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0; /* 防止被挤压 */
    background: var(--bg-color);
    border-radius: 12px;
    padding: 0 4px;
    height: 26px;
    margin-right: 10px;
}

/* 垂直分割线 */
.ib-divider {
    width: 1px;
    height: 14px;
    background-color: var(--el-border-color);
    margin: 0 4px;
}

.ib-btn {
  background: transparent;
  border: none;
  color: var(--el-text-color-primary);
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  font-size: 13px; /* 稍微大一点点 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: background 0.2s;
}
.ib-btn:hover:not(:disabled) {
  background-color: var(--el-fill-color-dark);
}
.ib-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 新建标签按钮特殊样式 (可选) */
.new-tab-plus {
    /* 如果想让它突出一点，可以加这个 */
    color: var(--el-color-primary); 
}

/* 包装器，用于相对定位 */
.download-manager-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

/* 按钮上的小红点 */
.download-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background-color: var(--el-color-danger);
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

/* --- iOS 风格下拉面板 --- */
.ios-dropdown-panel {
    position: absolute;
    top: 34px; /* 按钮高度下方 */
    right: -10px; /* 稍微靠右对齐 */
    width: 320px;
    max-height: 400px;
    background: var(--bg-color);
    backdrop-filter: blur(20px); /* 核心：毛玻璃效果 */
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0,0,0,0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    overflow: hidden;
    animation: dropdownSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ios-dropdown-panel::before {
    content: '';
    position: absolute;
    /* 向上延伸，填补按钮和面板之间的空隙 */
    top: -20px; 
    /* 占满整个宽度 */
    left: 0;
    width: 100%;
    /* 高度要足够覆盖空隙，比如 gap 是 10px，这里设 20px 确保重叠 */
    height: 20px; 
    /* 透明背景 */
    background: transparent; 
    
    /* 调试时可以把下面这行解开，看看桥在哪 */
    /* background: rgba(255, 0, 0, 0.3); */
}

@keyframes dropdownSlideIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 头部 */
.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 13px;
    font-weight: 600;
    color: var(--el-text-color-primary);
}
.clear-btn {
    font-weight: normal;
    color: var(--el-color-primary);
    cursor: pointer;
}
.clear-btn:hover {
    opacity: 0.8;
}

/* 列表区 */
.download-list {
    overflow-y: auto;
    max-height: 350px;
    padding: 8px;
}
.download-list::-webkit-scrollbar {
    width: 4px;
}
.download-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
}

/* 空状态 */
.empty-state {
    padding: 40px 0;
    text-align: center;
    color: var(--el-text-color-placeholder);
    background: var(--bg-color);
}
.empty-state i {
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* 单个下载项 */
.download-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    background: transparent;
    transition: background 0.2s;
    gap: 10px;
    margin-bottom: 4px;
    background: var(--bg-color);
}
.download-item:hover {
    background: rgba(0,0,0,0.05);
}
.dark .download-item:hover {
    background: rgba(255,255,255,0.05);
}

/* 文件图标 */
.file-icon {
    width: 32px;
    height: 32px;
    background: var(--el-fill-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    flex-shrink: 0;
}

/* 信息区 */
.file-info {
    flex: 1;
    min-width: 0; /* 允许文本截断 */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.file-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--el-text-color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-meta {
    font-size: 10px;
    color: var(--el-text-color-secondary);
}

/* 进度条 */
.progress-bar-bg {
    height: 3px;
    width: 100%;
    background: rgba(0,0,0,0.05);
    border-radius: 2px;
    overflow: hidden;
}
.dark .progress-bar-bg { background: rgba(255,255,255,0.1); }

.progress-bar-fill {
    height: 100%;
    background: var(--el-color-primary);
    border-radius: 2px;
    transition: width 0.2s;
}

/* 操作按钮 */
.item-actions {
    display: flex;
    gap: 4px;
}

.action-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--el-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s;
}
.action-btn:hover {
    background: rgba(0,0,0,0.1);
    color: var(--el-color-primary);
}
.action-btn.delete:hover {
    background: rgba(245, 108, 108, 0.1); /* 浅红色 */
    color: var(--el-color-danger);
}
.success-text { color: var(--el-color-success); }
.error-text { color: var(--el-color-danger); }

/* Vue 动画 transition */
.dropdown-fade-enter-active,
.dropdown-fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dropdown-fade-enter-from,
.dropdown-fade-leave-to {
  opacity: 0;
  transform: translateY(-5px);
}

/* --- AI Browser 侧边栏切换手柄 --- */
.browser-toggle-handle {
    position: absolute;
    top: 50%;
    right: 0; /* 紧贴右侧边缘 */
    transform: translateY(-50%);
    width: 24px;
    height: 60px;
    background: var(--el-color-primary); /* 使用主题色 */
    color: #ffffff; /* 确保图标是白色 */
    border-radius: 12px 0 0 12px; /* 左侧圆角，右侧直角贴合边缘 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100; /* 确保层级高于 WebView */
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.6; /* 默认半透明，减少对浏览内容的干扰 */
    font-size: 12px;
}

/* 鼠标悬停效果 */
.browser-toggle-handle:hover {
    opacity: 1;
    width: 32px; /* 变宽 */
    padding-right: 4px;
    background: var(--el-color-primary-light-3);
}

/* 适配不同主题的图标颜色 */
[data-theme="dark"] .browser-toggle-handle,
[data-theme="midnight"] .browser-toggle-handle {
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
}

/* --- AI Browser 侧边栏切换手柄（反向，紧贴左侧）--- */
.browser-toggle-handle--left {
    position: absolute;
    top: 50%;
    left: 0;               /* 紧贴左侧边缘 */
    transform: translateY(-50%);
    width: 24px;
    height: 60px;
    background: var(--el-color-primary);
    color: #ffffff;
    border-radius: 0 12px 12px 0; /* 右侧圆角，左侧直角贴合边缘 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); /* 阴影方向相反 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.6;
    font-size: 12px;
}

/* 鼠标悬停效果 */
.browser-toggle-handle--left:hover {
    opacity: 1;
    width: 32px;
    padding-left: 4px;     /* 左侧内边距，保持图标居中 */
    background: var(--el-color-primary-light-3);
}

/* 适配不同主题的图标颜色 */
[data-theme="dark"] .browser-toggle-handle--left,
[data-theme="midnight"] .browser-toggle-handle--left {
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
}

/* --- 收藏夹功能样式 --- */

/* 1. 允许标题被点击 */
.ios-title {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s;
    position: relative;
}

.ios-title:hover {
    opacity: 0.8;
}

.ios-title:active {
    transform: scale(0.98);
}

/* 提示用户可以点击的小标识 (可选) */
.ios-title::after {
    content: 'Click to toggle favorites';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--el-text-color-secondary);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    font-weight: normal;
    white-space: nowrap;
}

.ios-title:hover::after {
    opacity: 0.6;
}

/* 2. 收藏夹容器 */
.ios-favorites-wrapper {
    width: 100%;
    max-width: 680px;
    margin-top: 40px;
    /* 动画过渡容器高度和透明度 */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
    opacity: 1;
    max-height: 500px; /* 足够展示两行图标的高度 */
}

.ios-favorites-wrapper.hidden {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
}

/* 3. 图标网格 */
.ios-favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 16px 12px;
    padding: 10px;
}

/* 4. 单个收藏项 */
.fav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
}

.fav-item:hover .fav-icon-box {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    background: var(--el-bg-color);
}

.ios-favorites-wrapper {
    width: 100%;
    max-width: 720px;
    margin-top: 30px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateY(0);
}
.ios-favorites-wrapper.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    max-height: 0;
    margin-top: 0;
}

/* 3. 网格布局：固定宽度，防止变形 */
.ios-favorites-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px; /* 间距拉开，防止视觉拥挤 */
    padding: 20px;
}

/* 4. 单个图标项：去掉背景框，只留纯净图标 */
.fav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px; /* 固定宽度 */
    text-decoration: none;
    position: relative;
}

/* 图标容器 */
.fav-icon-box {
    width: 54px;
    height: 54px;
    background: var(--el-primary-color) !important; /* 强制纯白，因为99%的网页图标是为白色背景设计的 */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 极细阴影 */
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
}

/* 图片：铺满盒子但留一点内边距 */
.fav-icon-box img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast; /* 锐化渲染 */
}

.fav-item:hover .fav-icon-box {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    border-color: var(--el-color-primary);
}

/* 标题文字 */
.fav-title {
    font-size: 12px;
    color: var(--el-text-color-regular);
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    transition: color 0.2s;
}

.fav-item:hover .fav-title {
    color: var(--el-text-color-primary);
}

/* 删除按钮 (悬停显示) */
.fav-remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: var(--el-text-color-secondary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0;
    transition: all 0.2s;
    z-index: 10;
}
.fav-remove-btn:hover {
    background: var(--el-color-danger);
    transform: scale(1.1);
}

.fav-item:hover .fav-remove-btn {
    opacity: 1;
}

/* 地址栏收藏按钮激活状态 */
.ib-btn.is-favorite {
    color: #f5a623; /* 星星黄色 */
}

/* 容器微调 */
.current-engine {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}
.current-engine .fa-caret-down {
    font-size: 10px;
    color: var(--el-text-color-placeholder);
}

/* AI Browser 侧边栏基础样式 */
.browser-copilot-sidebar {
  width: 450px; /* 默认展开宽度 */
  border-left: 1px solid var(--el-border-color);
  background: var(--el-bg-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* 关键：隐藏收起时的内部内容 */
  
  /* 关键动画属性 */
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.2s ease,
              border-left-width 0.1s; /* 边框也需要过渡，否则最后会留一条线 */
  
  opacity: 1;
  flex-shrink: 0; /* 防止被左侧挤压 */
}

/* 收起状态的样式 */
.browser-copilot-sidebar.sidebar-collapsed {
  width: 0 !important;
  border-left-width: 0 !important; /* 收起时去掉边框 */
  opacity: 0;
  pointer-events: none; /* 收起后禁止点击交互 */
}

/* --- 新建标签页按钮 (Chrome 风格) --- */
.new-tab-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 尺寸与位置适配 */
  width: 28px;
  height: 26px;      /* 与 .ib-tab 高度保持一致 */
  margin-top: 4px;   /* 与 .ib-tab 的 margin-top 保持一致 */
  margin-left: 2px;  /* 与最后一个标签保持微小间距 */
  
  /* 基础样式 */
  background: transparent;
  border: none;
  border-radius: 6px; /* 与标签圆角一致 */
  color: var(--el-text-color-regular);
  cursor: pointer;
  flex-shrink: 0;    /* 关键：防止标签过多时按钮被挤压 */
  transition: background-color 0.2s, color 0.2s;
  font-size: 12px;
}

/* 悬停效果 */
.new-tab-inline:hover {
  background-color: var(--el-fill-color-dark); /* 也就是 hover 时的浅灰色背景 */
  color: var(--el-color-primary); /* 可选：悬停时图标变色 */
}

/* 适配移动端或触摸 */
.new-tab-inline:active {
  background-color: var(--el-fill-color-darker);
}

/* 进度条外层容器 */
.omni-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;       /* 占据剩余空间 */
  min-width: 120px; /* 强制给一个最小宽度 */
  margin: 0 10px;
}

/* 强制显示进度条轨道 */
.omni-progress-wrapper :deep(.el-slider) {
  height: 20px;
  display: flex;
  align-items: center;
}

.omni-progress-wrapper :deep(.el-slider__runway) {
  flex: 1;
  height: 4px !important;
  background-color: rgba(0, 0, 0, 0.1) !important; /* 轨道背景色 */
  border-radius: 2px;
}

.omni-progress-wrapper :deep(.el-slider__bar) {
  height: 4px !important;
  background-color: var(--el-color-primary) !important; /* 进度填充色 */
  border-radius: 2px;
}

.omni-progress-wrapper :deep(.el-slider__button-wrapper) {
  top: -14px; /* 调整滑块圆圈的位置 */
}

.tts-status-time {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  color: #666;
  white-space: nowrap;
}

.omni-slider {
  width: 150px !important;
  min-width: 150px !important;
}

/* =========================================
   Advanced Pro Notification (Top-Right Toast)
   ========================================= */

.notification {
  /* 定位：右上角悬浮 */
  position: fixed;
  top: 24px;
  right: 24px;
  left: auto; /* 重置之前的居中设置 */
  
  /* 初始状态：完全位移到屏幕右侧外，透明 */
  transform: translateX(120%);
  opacity: 0;
  
  /* 布局 */
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  
  /* 尺寸限制 */
  min-width: 320px;
  max-width: 400px;
  
  /* 视觉风格：保持不变 (磨砂 + 高级阴影) */
  background: var(--el-bg-color-overlay, rgba(255, 255, 255, 0.95));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  
  /* 边框与圆角 */
  border: 1px solid var(--el-border-color-light, rgba(0,0,0,0.1));
  border-radius: 12px;
  
  /* 阴影：侧边弹出更适合稍重的左侧阴影 */
  box-shadow: 
    -5px 5px 20px -5px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* 字体 */
  color: var(--el-text-color-primary);
  font-family: var(--el-font-family, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  
  /* 动画过渡：使用这种贝塞尔曲线会有“快速进入，缓慢刹车”的高级感 */
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 10000;
  pointer-events: auto; /* 右上角通常允许点击关闭，保持可交互 */
  overflow: hidden;
}

/* 激活状态：滑入屏幕 */
.notification.show {
  opacity: 1;
  transform: translateX(0);
}

/* 离开状态：滑出屏幕 */
.notification.hide {
  opacity: 0;
  transform: translateX(120%);
}

/* --- 下面的样式保持不变 (图标、内容、进度条、主题适配) --- */

.notif-icon-box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.notif-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 24px;
}

.notif-title {
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 15px;
}

.notif-desc {
  color: var(--el-text-color-secondary, #666);
  font-size: 13px;
  word-break: break-word; /* 防止长单词撑破布局 */
}

/* 进度条 */
.notif-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  width: 100%;
  opacity: 0.2;
  transform-origin: left;
  transform: scaleX(0);
}

.notification.show .notif-progress {
  transition-property: transform;
  transition-timing-function: linear;
  transform: scaleX(1);
}

/* ================= 主题颜色适配 (保持不变) ================= */
.notification.success { border-left: 4px solid var(--el-color-success); background: var(--el-bg-color-page) !important; color: var(--el-text-color-primary) !important;}
.notification.success .notif-icon-box { color: var(--el-color-success); }
.notification.success .notif-progress { background: var(--el-color-success); }

.notification.error { border-left: 4px solid var(--el-color-danger); }
.notification.error .notif-icon-box { color: var(--el-color-danger); }
.notification.error .notif-progress { background: var(--el-color-danger); }

.notification.warning { border-left: 4px solid var(--el-color-warning); }
.notification.warning .notif-icon-box { color: var(--el-color-warning); }
.notification.warning .notif-progress { background: var(--el-color-warning); }

.notification.info { border-left: 4px solid var(--el-color-primary);  background: var(--el-bg-color-page) !important; color: var(--el-text-color-primary) !important;}
.notification.info .notif-icon-box { color: var(--el-color-primary); }
.notification.info .notif-progress { background: var(--el-color-primary); }

/* ================= 移动端适配 ================= */
/* 手机屏幕很窄，右上角弹出显示不全，强制改回顶部居中 */
@media (max-width: 768px) {
  .notification {
    top: 16px;
    left: 50%;
    right: auto;
    width: 90%;
    min-width: auto;
    /* 手机端改成向下弹出 */
    transform: translateX(-50%) translateY(-150%);
    border-radius: 12px;
  }
  
  .notification.show {
    transform: translateX(-50%) translateY(0);
  }
  
  .notification.hide {
    transform: translateX(-50%) translateY(-150%);
  }
}


/* =========================================================
   特殊覆盖：Warning 和 Error 使用实色背景 + 白色文字
   ========================================================= */

/* --- 1. Error (Danger) 红色实底模式 --- */
.notification.error {
  /* 强制背景为红色 (使用变量或默认色) */
  background: var(--el-color-danger) !important;
  /* 去掉磨砂玻璃的半透明边框 */
  border: 1px solid transparent !important;
  /* 强制主标题文字为白色 */
  color: #ffffff !important;
  /* 稍微增加一点深色投影，增加立体感 */
  box-shadow: 0 8px 16px rgba(245, 108, 108, 0.3) !important;
}

/* --- 2. Warning 橙色实底模式 --- */
.notification.warning {
  /* 强制背景为橙色 */
  background: var(--el-color-warning) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(230, 162, 60, 0.3) !important;
}

/* --- 3. 统一修正这两个模式下的内部元素颜色 --- */

/* 修正描述文字 (notif-desc) */
.notification.error .notif-desc,
.notification.warning .notif-desc {
  /* 使用 90% 透明度的白色，既保持清晰又有层次感 */
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 修正图标颜色 */
.notification.error .notif-icon-box,
.notification.warning .notif-icon-box {
  /* 图标改为纯白 */
  color: #ffffff !important;
}

/* 修正左侧装饰线 (因为背景已经是彩色了，左侧线可以去掉或者改成白色) */
.notification.error,
.notification.warning {
  border-left: none !important; /* 建议去掉左侧条，因为整体已经是彩色了 */
  /* 或者如果你想保留左侧条，可以改成深色一点的：
     border-left: 4px solid rgba(0,0,0,0.2) !important; 
  */
}

/* 修正底部进度条颜色 */
.notification.error .notif-progress,
.notification.warning .notif-progress {
  /* 进度条改为半透明白色 */
  background: rgba(255, 255, 255, 0.4) !important;
}


/* ====================================================
   修复版 IM 风格与 单/群聊 模式兼容样式
   (只改布局，不改气泡形状)
   ==================================================== */

/* 1. 全局消息容器重置 */
/* 引入 im-content-wrapper 后，我们需要确保它是透明的布局容器 */
.im-content-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  position: relative;
}

/* 2. 单聊/群聊 User 样式 */
.message.user .im-content-wrapper {
  align-items: flex-end; /* 强制靠右，且宽度收缩 */
}

/* 3. 单聊/群聊 Assistant 样式 */
.message.assistant .im-content-wrapper {
  align-items: flex-start; /* 强制靠左，宽度收缩 */
}

/* 4. 单聊/群聊 System 样式 */
.message.system .im-content-wrapper {
  align-items: stretch; /* 拉伸占满宽度 */
  width: 100%;
}

/* 5. 修复助手按钮对齐 (关键：让按钮跟随气泡左对齐) */
.message.assistant .message-actions,
.message.assistant .tts-controls {
  justify-content: flex-start !important;
  width: 100%;
}

/* 用户操作栏保持靠右 */
.message.user .message-actions {
  justify-content: flex-end !important;
}

/* 6. 修复气泡宽度逻辑 */
.im-content-wrapper .message-content {
  width: fit-content; 
  max-width: 100%; 
  box-sizing: border-box;
  /* 这里不再修改 border-radius，沿用全局样式，保持只有一个直角 */
}

/* 系统消息内容占满 */
.message.system .im-content-wrapper .message-content {
  width: 100%;
}

/* ====================================================
   群聊模式专属布局 (.is-group-mode)
   ==================================================== */

/* 1. 布局改为横向，以便放入头像 */
.message.is-group-mode {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px; /* 头像与气泡的间距 */
}

/* 2. 用户消息整体靠右 */
.message.is-group-mode.user {
  justify-content: flex-end;
}

/* 3. 系统消息在群聊下依然保持纵向占满 */
.message.is-group-mode.system {
  flex-direction: column !important;
}

/* 4. 限制群聊模式下气泡的最大宽度，留出头像空间，防止挤压 */
.message.is-group-mode .im-content-wrapper {
  max-width: calc(100% - 48px); /* 减去头像宽度+间距 */
}

/* 系统消息不受限 */
.message.is-group-mode.system .im-content-wrapper {
  max-width: 100%;
}

/* 5. 头像样式 */
.im-avatar {
  flex-shrink: 0;
  margin-top: 0; /* 对齐气泡顶部 */
}

.im-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%; 
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  background-color: #fff;
}

/* 6. 名字标签 */
.im-name-tag {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-bottom: 4px;
  margin-left: 1px;
  line-height: 1;
}

/* ====================================================
   移动端适配
   ==================================================== */
@media (max-width: 768px) {
  .message.is-group-mode {
    gap: 8px;
  }
  .im-avatar img {
    width: 30px;
    height: 30px;
  }
  .message.is-group-mode .im-content-wrapper {
    max-width: calc(100% - 40px);
  }
}

/* =========================================
   Unified Input & Attachment (Seamless & Thumbnail Files)
   ========================================= */

/* 1. 外层包裹器：伪装成一个完整的输入框 */
.unified-input-wrapper {
  display: flex;
  flex-direction: column;
  background-color: var(--el-input-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 0 1px transparent inset;
  overflow: hidden;
}

/* 聚焦高亮 */
.unified-input-wrapper:focus-within {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
  background-color: var(--el-bg-color);
}

/* 2. 附件列表：透明、无边框、横向滚动 */
.attachment-preview-list {
  display: flex;
  gap: 8px;
  padding: 12px 12px 0 12px;
  background-color: transparent !important;
  border: none !important;
  height: auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.attachment-preview-list::-webkit-scrollbar {
  display: none;
}

/* 3. 附件项通用容器 */
.attachment-item {
  flex-shrink: 0;
  height: 80px; /* 统一高度 */
  position: relative;
  margin-bottom: 4px;
}

/* 4. 图片预览盒子 (自适应宽度，保持比例) */
.preview-image-box {
  height: 100%;
  width: auto;       /* 宽度自适应 */
  min-width: 40px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--el-border-color-lighter);
  background-color: rgba(128, 128, 128, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image-box img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* 5. 文件卡片盒子 (样式重制：改为缩略图风格) */
.file-card-box {
  height: 100%;
  width: 80px;        /* 固定宽度，做成正方形或竖长方形 */
  
  /* 布局改为纵向：图标在上，文字在下 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  
  background-color: rgba(128, 128, 128, 0.05); /* 统一底色 */
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 6px;
  box-sizing: border-box;
  position: relative; /* 为遮罩层定位 */
  transition: all 0.2s;
}

/* 文件图标调整 */
.file-card-box .file-icon {
  font-size: 28px;
  color: var(--el-color-primary);
  margin-right: 0; /* 去掉之前的右边距 */
  margin-bottom: 2px;
  height: auto;
  width: auto;
}

/* 文件名调整 */
.file-card-box .file-info {
  width: 100%;
  text-align: center;
  display: block; /* 覆盖之前的 flex */
}

.file-card-box .file-name {
  font-size: 10px; /* 字体缩小 */
  color: var(--el-text-color-regular);
  line-height: 1.2;
  
  /* 限制显示两行，超出省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal; /* 允许换行 */
  text-overflow: ellipsis;
  width: 100%;
}

/* 6. 统一的遮罩层 (Overlay) 样式 */
/* 图片的遮罩层 */
.preview-image-box .overlay,
/* 文件的遮罩层 (复用之前的 .remove-btn div) */
.file-card-box .remove-btn {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  backdrop-filter: blur(2px);     /* 可选：轻微模糊背景 */
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.2s ease;
  z-index: 10;
  border-radius: 8px; /* 跟随父级圆角 */
  
  /* 覆盖之前 remove-btn 可能存在的文字样式 */
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/* 悬停显示遮罩 */
.preview-image-box:hover .overlay,
.file-card-box:hover .remove-btn {
  opacity: 1;
}

/* 7. 删除按钮图标样式优化 */
/* 让文件卡片里的 xmark 图标看起来像一个红色按钮 */
.file-card-box .remove-btn i {
  background-color: var(--el-color-danger);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.file-card-box .remove-btn:hover i {
  transform: scale(1.1);
}

/* 8. 输入框本身：彻底透明化 */
.input-box-transparent {
  width: 100%;
}
.input-box-transparent .el-textarea__inner {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--el-text-color-primary) !important;
  padding: 8px 12px 12px 12px !important;
}

/* 如果有附件，调整输入框上边距 */
.attachment-preview-list + .input-box-transparent .el-textarea__inner {
  padding-top: 4px !important;
}
/* =========================================
   Ultimate Tool Approval Card (iOS/Mac 质感版)
   ========================================= */

.approval-card {
    /* 卡片底色使用干净的背景，脱离原本廉价的黄色背景 */
    background-color: var(--el-bg-color);
    border: 1px solid var(--el-border-color-light);
    border-radius: 16px;
    margin: 16px 0;
    overflow: hidden;
    
    /* 采用你全局设定的现代悬浮阴影 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    font-family: var(--el-font-family);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

/* 顶部警戒色发光条 (代替原本笨重的左侧粗边框) */
.approval-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--el-color-warning), var(--el-color-warning-light-5));
    opacity: 0.9;
}

/* 悬停物理反馈 */
.approval-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    border-color: var(--el-color-warning-light-5);
}

/* --- Header 区域 --- */
.approval-header {
    display: flex;
    align-items: center;
    padding: 16px 20px 12px;
    color: var(--el-text-color-primary);
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
}

.security-icon {
    color: var(--el-color-warning);
    font-size: 18px;
}

.permission-mode-tag {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--el-color-warning) 12%, transparent);
    color: var(--el-color-warning);
    font-weight: 600;
    margin-left: 6px;
    border: 1px solid color-mix(in srgb, var(--el-color-warning) 25%, transparent);
}

/* --- Body 区域 --- */
.approval-body {
    padding: 0 20px 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.body-label {
    color: var(--el-text-color-regular);
}

/* 工具名称像代码高亮标签一样 */
.tool-name-badge {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    background-color: var(--el-fill-color-light);
    color: var(--el-color-primary);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--el-border-color-lighter);
}

/* --- 参数展示区域 (终端风格) --- */
.approval-params-wrapper {
    margin: 0 20px 16px;
    /* 继承你在主题中写好的代码块背景色 */
    background-color: var(--code-bg);
    border-radius: 10px;
    border: 1px solid var(--code-border);
    overflow: hidden;
}

.params-header {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--el-text-color-secondary);
    background-color: rgba(128, 128, 128, 0.08);
    letter-spacing: 1px;
    border-bottom: 1px solid var(--code-border);
}

.approval-params-code {
    margin: 0;
    padding: 12px;
    max-height: 180px;
    overflow-y: auto;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    /* 继承高亮字体颜色 */
    color: var(--hljs-text, var(--el-text-color-regular));
    line-height: 1.5;
}

.approval-params-code::-webkit-scrollbar {
    width: 6px; height: 6px;
}
.approval-params-code::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.3);
    border-radius: 3px;
}

/* --- 底部操作栏 (Actions) --- */
.approval-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background-color: var(--el-fill-color-lighter, rgba(0,0,0,0.02));
    border-top: 1px solid var(--el-border-color-lighter);
}

.action-right-group {
    display: flex;
    gap: 10px;
}

.approval-actions button {
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--el-font-family);
}

.approval-actions button:active {
    transform: scale(0.95);
}

/* 1. 拒绝 (低视噪的幽灵按钮) */
.btn-deny {
    background-color: transparent !important;
    color: var(--el-color-danger) !important;
    border: 1px solid transparent !important;
}
.btn-deny:hover {
    background-color: color-mix(in srgb, var(--el-color-danger) 10%, transparent) !important;
}

/* 2. 始终允许 (次级线框按钮) */
.btn-allow-always {
    background-color: var(--el-bg-color) !important;
    color: var(--el-text-color-regular) !important;
    border: 1px solid var(--el-border-color) !important;
}
.btn-allow-always:hover {
    color: var(--el-color-primary) !important;
    border-color: var(--el-color-primary-light-5) !important;
    background-color: var(--el-color-primary-light-9) !important;
}

/* 3. 仅允许一次 (绝对视觉焦点的 Primary 按钮) */
.btn-allow-once {
    background: linear-gradient(145deg, var(--el-color-primary), var(--el-color-primary-light-3)) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.3) !important;
}
.btn-allow-once:hover {
    background: linear-gradient(145deg, var(--el-color-primary-light-3), var(--el-color-primary)) !important;
    box-shadow: 0 6px 16px rgba(var(--el-color-primary-rgb), 0.4) !important;
    transform: translateY(-1px);
}

/* --- 深色模式暗部微调 --- */
[data-theme="dark"] .approval-card,[data-theme="midnight"] .approval-card,
[data-theme="neon"] .approval-card {
    background-color: rgba(255, 255, 255, 0.02);
}

/* =========================================
   MCP 工具列表样式适配
   ========================================= */

/* 1. 区域容器 */
.tools-section {
  margin-top: 20px;
  /* 使用变量作为分割线颜色 */
  border-top: 1px solid var(--el-border-color-lighter);
  padding-top: 15px;
}

.tools-section h3 {
  /* 跟随主题文字颜色 */
  color: var(--el-text-color-primary);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* 2. 列表滚动容器 */
.tools-list-container {
  max-height: 300px;
  overflow-y: auto;
  /* 背景色：使用页面背景色（通常比卡片背景稍深或有区分度） */
  background-color: var(--el-bg-color-page);
  padding: 10px;
  border-radius: 8px;
  /* 边框跟随主题 */
  border: 1px solid var(--el-border-color-lighter);
}

/* 自定义滚动条适配 */
.tools-list-container::-webkit-scrollbar {
  width: 4px;
}
.tools-list-container::-webkit-scrollbar-thumb {
  background: var(--el-border-color);
  border-radius: 2px;
}

/* 3. 单个工具卡片 */
.tool-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 卡片背景：使用组件背景色（亮色模式是白，暗色模式是深灰） */
  background-color: var(--el-bg-color);
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  /* 边框颜色 */
  border: 1px solid var(--el-border-color);
  transition: all 0.2s ease;
}

.tool-item-card:last-child {
  margin-bottom: 0;
}

/* 悬停效果：轻微上浮 + 边框高亮 */
.tool-item-card:hover {
  transform: translateY(-1px);
  border-color: var(--el-color-primary-light-5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 4. 左侧信息区 */
.tool-info-left {
  flex: 1;
  overflow: hidden;
  margin-right: 12px;
}

.tool-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.tool-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--el-text-color-primary);
  /* 名字很长时截断 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-info-icon {
  font-size: 13px;
  color: var(--el-text-color-secondary);
  cursor: help;
  transition: color 0.2s;
}

.tool-info-icon:hover {
  color: var(--el-color-primary);
}

.tool-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  /* 描述文字单行截断 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* 5. 空状态 */
.tools-empty-state {
  text-align: center;
  color: var(--el-text-color-placeholder);
  padding: 30px 0;
  background-color: var(--el-bg-color-page);
  border-radius: 8px;
  border: 1px dashed var(--el-border-color);
  font-size: 13px;
}


/* =========================================
   v-loading 遮罩层主题适配
   ========================================= */

/* 1. 遮罩背景适配 */
.el-loading-mask {
  /* 使用主题背景色，并设置 70% 的透明度 */
  background-color: color-mix(in srgb, var(--el-bg-color) 70%, transparent) !important;
  
  /* 添加毛玻璃效果，符合你整体的 iOS/现代风格 */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  
  transition: background-color 0.3s var(--transition-function);
  z-index: 2000;
}

/* 2. 加载图标（旋转圆圈）颜色 */
.el-loading-spinner .path {
  stroke: var(--el-color-primary) !important;
  stroke-width: 3;
}

/* 3. 加载文字颜色 */
.el-loading-spinner .el-loading-text {
  color: var(--el-color-primary) !important;
  font-weight: 500;
  margin-top: 10px;
  letter-spacing: 0.5px;
  /* 也可以使用主题字体 */
  font-family: var(--el-font-family);
}

/* 4. 特殊主题下的微调 (可选) */

/* Rainbow 主题下让加载圈带点霓虹感 */
[data-theme="rainbow"] .el-loading-spinner .path {
  filter: drop-shadow(0 0 5px var(--el-color-primary));
}

/* Neon 主题下文字发光 */
[data-theme="neon"] .el-loading-spinner .el-loading-text {
  text-shadow: 0 0 8px var(--el-color-primary);
}

/* 5. 针对 Dialog 内部 loading 的圆角修正 */
/* 确保遮罩层不会超出 Dialog 的圆角边缘 */
.el-dialog .el-loading-mask {
  border-radius: 12px;
}


/* =========================================
   Unified Premium Market Banner (New Style)
   ========================================= */

.market-link-banner {
  /* 1. 基础布局：改为更轻盈的容器 */
  display: flex;
  flex-direction: column;
  width: auto;
  box-sizing: border-box;
  min-height: 100px; 
  margin: 10px !important;
  
  /* 确保 z-index 逻辑 */
  z-index: 1;
  
  /* 2. 核心风格：磨砂玻璃 + 大圆角 (对齐你的 side-panel 和 el-dialog) */
  background-color: var(--el-bg-color) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--el-border-color-lighter) !important;
  border-radius: 20px !important;
  
  /* 3. 柔和物理投影 (使用你定义的 --shadow-md 逻辑) */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  
  cursor: pointer;
  position: relative;
  overflow: hidden;
  
  /* 4. 接入你的 Premium Motion 曲线 */
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 顶部点缀条：改为精致的窄条 */
.banner-accent-bar {
  background: linear-gradient(90deg, var(--el-color-primary), var(--el-color-primary-light-5));
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 15px;
  text-align: right;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.9;
}

/* 主体区域 */
.banner-main {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  flex: 1;
  gap: 18px;
}

/* 图标盒子：改为呼吸感圆角矩形，并使用渐变背景 */
.banner-icon-box {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--el-color-primary-light-7), var(--el-color-primary-light-9));
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--el-color-primary) 20%, transparent);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.15);
}

/* 文字区：更现代的字重分层 */
.banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner-text h3 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--el-text-color-primary) !important;
  letter-spacing: -0.3px;
}

.banner-text p {
  margin: 4px 0 0 0 !important;
  font-size: 13px !important;
  color: var(--el-text-color-secondary) !important;
  line-height: 1.4;
  opacity: 0.8;
}

/* 右侧动作区：去掉虚线，改为更现代的箭头效果 */
.banner-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  padding-left: 15px;
  color: var(--el-color-primary);
  transition: all 0.3s ease;
}

/* ----------------------------------------------------
   ✨ 交互动效升级 (Premium Micro-interactions)
------------------------------------------------------- */

.market-link-banner:hover {
  /* 模拟物理浮起 */
  z-index: 10 !important;
  transform: translateY(-5px) scale(1.01) !important;
  border-color: var(--el-color-primary-light-5) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(var(--el-color-primary-rgb), 0.1) !important;
}

.market-link-banner:hover .banner-icon-box {
  /* 图标在悬停时变亮并轻微旋转 */
  background: var(--el-color-primary);
  color: white;
  transform: rotate(-5deg) scale(1.1);
}

.market-link-banner:hover .banner-action {
  transform: translateX(5px); /* 箭头向右指引 */
}

/* 点击回弹感 */
.market-link-banner:active {
  transform: translateY(-2px) scale(0.98) !important;
  transition-duration: 0.1s !important;
}

/* ----------------------------------------------------
   各主题色适配微调
------------------------------------------------------- */

/* Dark/Midnight 主题 */
[data-theme="dark"] .market-link-banner,
[data-theme="midnight"] .market-link-banner {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .banner-icon-box,
[data-theme="midnight"] .banner-icon-box {
  background: rgba(var(--el-color-primary-rgb), 0.2);
}

/* Rainbow / Neon 主题：增加边框光晕 */
[data-theme="rainbow"] .market-link-banner,
[data-theme="neon"] .market-link-banner {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}


/* 容器：给整个列表加点背景区分 */
.events-management-list {
  background: var(--el-bg-color-page);
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 12px;
  margin-top: 10px;
}

/* 每一行的布局 */
.event-row-item {
  display: flex;         /* 启用弹性布局 */
  align-items: center;   /* 垂直居中 */
  margin-bottom: 16px;   /* 重要：每个输入框之间的间隔 */
  gap: 12px;             /* 输入框和删除按钮之间的间隔 */
}

/* 输入框占据左侧所有空间 */
.input-col {
  flex: 1;
}

/* 按钮固定在右侧，不缩放 */
.action-col {
  flex-shrink: 0;
}

/* 弹窗内的次级标签 */
.sub-label {
  display: block;
  font-size: 13px;
  margin-bottom: 10px;
  font-weight: bold;
}

/* 调整输入框和按钮的对齐（如果用了 textarea） */
.event-row-item .el-textarea {
  display: block;
}

/* 任务中心容器 */
.task-center-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--el-bg-color);
}

/* 头部导航条 */
.task-center-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color);
  flex-shrink: 0;
}

.header-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

/* 内容滚动区 */
.task-content-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

/* 空状态 */
.task-empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.empty-tip {
  color: var(--el-text-color-secondary);
  margin-bottom: 15px;
  font-size: 13px;
}

/* 任务列表工具栏 */
.task-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

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

/* 任务卡片 */
.task-card-item {
  margin-bottom: 12px;
}

.task-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.task-title-row {
  flex: 1;
  overflow: hidden;
  margin-right: 8px;
}

.task-title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.task-card-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task-progress-bar {
  margin-bottom: 10px;
}

.task-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.task-meta-info {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--el-text-color-placeholder);
}

.task-actions .el-button {
  padding: 0 4px;
}

/* 特殊样式：任务中心入口卡片 */
.task-center-card {
    border-left: 4px solid var(--el-color-primary) !important;
    background-color: var(--el-bg-color-page) !important;
}

.el-card {
    border: 1px solid var(--el-border-color) !important;
    border-radius: 6px !important;
    background-color: var(--el-bg-color-page) !important;
}

/* 强制将该按钮下的图标设为白色 */
.white-icon-btn i {
    color: white !important;
    /* 可选：增加一点悬停时的透明度变化，让它看起来有交互感 */
    transition: opacity 0.2s;
}

.white-icon-btn:hover i {
    opacity: 0.8;
}

.task-detail-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.task-detail-content {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
}

.task-info-summary {
    background: var(--el-fill-color-light);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.timeline-wrapper {
    padding: 10px 5px;
}

.history-log-item {
    font-size: 13px;
    line-height: 1.6;
    color: var(--el-text-color-primary);
    background: var(--el-bg-color);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--el-border-color-lighter);
}

.history-log-item.status-text {
    color: var(--el-color-primary);
    font-style: italic;
    border: none;
    background: transparent;
}

.detail-result-box {
    margin-top: 20px;
    padding-bottom: 30px;
}

/* 确保详情页的 markdown 格式正确 */
.markdown-body {
    font-family: inherit;
    font-size: 13px;
}

/* 1. 取消消息列表外层框 */
.messages-container {
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2. 浮动输入区域整体 */
.input-container {
  position: relative;
  padding: 0 8px 8px 8px;
}

/* 3. unified-input-wrapper 增强成卡片感 */
.unified-input-wrapper {
  background-color: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* 4. 工具栏按钮组（现在移入输入框内）*/
.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 12px 4px 12px;
  gap: 2px;
  /* border-bottom: 1px solid var(--el-border-color-lighter);  <-- 删除或注释掉这一行 */
  border-bottom: none !important; /* 确保彻底移除线 */
}

/* 5. 图标按钮缩小，更紧凑 */
.button-group .el-button.is-circle {
  width: 32px !important;
  height: 32px !important;
}

/* 针对浏览器侧边栏的特殊适配 */
.browser-copilot-sidebar .messages-container {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 侧边栏容器背景 */
.browser-copilot-sidebar {
    background-color: var(--el-bg-color-page) !important;
}

/* 确保侧边栏内的输入框卡片感依然存在 */
.browser-copilot-sidebar .unified-input-wrapper {
    background-color: var(--el-bg-color) !important; /* 卡片本身是白色/深灰 */
    margin: 0 4px; /* 侧边栏较窄，给边缘留一点点呼吸空间 */
}

/* 移除侧边栏输入框容器可能存在的额外边框 */
.browser-copilot-sidebar .chat-area > div:last-child {
    border-top: none !important;
}

/* --- 输入框容器优化 --- */
.input-container {
  /* 顶部完全不留空，左右留极窄间距，底部留出呼吸空间 */
  padding: 0 4px 6px 4px !important; 
  position: relative;
  background: transparent !important;
  z-index: 10;
}

/* --- 移动端适配：间距压缩到极致 --- */
@media (max-width: 768px) {
  .input-container {
    padding: 0 2px 4px 2px !important; /* 手机端几乎贴边 */
  }
  
  .unified-input-wrapper {
    border-radius: 12px !important; /* 手机端圆角稍微减小，增加内部空间 */
  }
}

/* --- 输入框卡片：增加顶部悬浮感 --- */
.unified-input-wrapper {
  background-color: var(--el-bg-color) !important;
  /* 增加一个向上的淡淡阴影，使其看起来像是盖在消息列表上面的 */
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03), 
              0 4px 24px rgba(0, 0, 0, 0.1) !important;
  border-bottom: none !important; /* 底部不需要边框，贴近屏幕边缘 */
}

/* --- 消息列表：底部留白调整 --- */
.messages-container {
  /* 确保消息列表底部有足够的填充，防止最后一条消息被输入框完全挡死 */
  padding-bottom: 20px !important; 
}

/* 1. 消除消息区域与输入区域之间的物理间距 */
.chat-area {
    gap: 0 !important; /* 关键：彻底去掉中间的空隙 */
}

/* 2. 消息容器处理 */
.messages-container {
    flex: 1;
    /* 增加底部填充，确保最后一条消息在滚动到底时，文字不会被浮动的输入框挡住 */
    padding-bottom: 30px !important; 
}

/* 3. 输入框容器：彻底去掉顶部间距，压缩左右间距 */
.input-container {
    margin: 0 !important;
    padding: 0 4px 8px 4px !important; /* 顶部0，左右4px贴边，底部8px呼吸 */
    position: relative;
    z-index: 10;
}

/* --- 输入框包裹器圆角升级 --- */
.unified-input-wrapper {
  background-color: var(--el-bg-color) !important;
  /* 将圆角从 12px/16px 提升到 24px */
  border-radius: 24px !important; 
  
  border: 1px solid var(--el-border-color) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.05), 
              0 10px 30px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden; /* 必须加上这个，确保内部的输入框不会超出圆角边缘 */
}

/* --- 内部输入框适配 --- */
.input-box-transparent .el-textarea__inner {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  /* 底部圆角要和外层保持一致，防止点击时的 focus 状态出现直角 */
  border-radius: 0 0 24px 24px !important; 
  padding: 8px 16px 16px 16px !important; /* 增加左右内边距，配合大圆角 */
}

/* --- 移动端适配 --- */
@media (max-width: 768px) {
  .unified-input-wrapper {
    border-radius: 20px !important; /* 手机端稍微小一点点，更协调 */
  }
  .input-box-transparent .el-textarea__inner {
    border-radius: 0 0 20px 20px !important;
    padding: 8px 12px 12px 12px !important;
  }
}

/* 5. 移动端极致贴边 */
@media (max-width: 768px) {
    .input-container {
        padding: 0 2px 4px 2px !important; /* 手机端左右仅留 2px，最大化宽度 */
    }
    .unified-input-wrapper {
        border-radius: 12px !important; /* 稍微减小圆角，让视野更方正 */
    }
}

/* --- 修复按钮组对齐问题 --- */
.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 默认左对齐 */
  align-items: center;
  gap: 8px; /* 使用 gap 统一控制横向和纵向间距 */
  padding: 8px 12px;
  border-bottom: none !important; /* 移除下边框 */
}

.send-btn {
  margin-left: auto !important;
}

/* 关键修复：强制重置 Element UI 默认的按钮间距 */
.button-group .el-button {
  margin: 0 !important; /* 彻底移除默认的 margin-left: 12px */
}

/* 移动端间距微调 */
@media (max-width: 768px) {
  .button-group {
    gap: 8px!important; 
    padding: 6px 8px!important; 
  }
}

/* =========================================
   Unified Input Wrapper - Icon-Only Buttons
   ========================================= */

/* 1. 基础重置：移除所有按钮的背景、边框和阴影 */
.unified-input-wrapper .el-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  height: 32px !important; /* 统一按钮高度 */
  width: 32px !important;  /* 统一按钮宽度 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 2. 核心逻辑：类型（Type）只影响图标颜色 */

/* Default 类型：使用次级文字颜色（深灰） */
.unified-input-wrapper .el-button--default {
  color: var(--el-text-color-regular) !important;
}

/* Primary 类型：使用主题主色 */
.unified-input-wrapper .el-button--primary {
  color: var(--el-color-primary) !important;
}

/* Danger 类型：使用危险色（红色） */
.unified-input-wrapper .el-button--danger {
  color: var(--el-color-danger) !important;
}

/* 3. 悬停反馈（Hover）：轻微背景底色和缩放 */
.unified-input-wrapper .el-button:hover {
  background-color: rgba(128, 128, 128, 0.1) !important; /* 极淡的灰色圆圈 */
  transform: scale(1.1); /* 图标略微放大 */
}

/* 特定类型的悬停颜色加强 */
.unified-input-wrapper .el-button--primary:hover {
  background-color: color-mix(in srgb, var(--el-color-primary) 15%, transparent) !important;
}

.unified-input-wrapper .el-button--danger:hover {
  background-color: color-mix(in srgb, var(--el-color-danger) 15%, transparent) !important;
}

/* 4. 激活状态（Active/Click） */
.unified-input-wrapper .el-button:active {
  transform: scale(0.95);
  background-color: rgba(128, 128, 128, 0.2) !important;
}

/* 6. 禁用状态 */
.unified-input-wrapper .el-button.is-disabled {
  opacity: 0.3 !important;
  background: transparent !important;
  cursor: not-allowed;
}

/* 7. 布局微调：确保按钮组里的图标对齐 */
.unified-input-wrapper .button-group {
  gap: 4px !important; /* 按钮之间的间距 */
  padding: 8px 12px 2px 12px !important; /* 调整底部间距，让它离输入框更近 */
}

/* 特殊修正：发送按钮不需要 margin-left: auto 时的对齐 */
.unified-input-wrapper .send-btn {
  /* 如果你想让发送按钮依然保持在最右边 */
  margin-left: auto !important;
}

/* 折叠态：放在发送按钮左侧的 compact pill */
.unified-input-wrapper .button-group .compact-status-pill {
  height: 32px !important;
  max-width: 200px;
  padding: 0 12px !important;
  font-size: 12px !important;
  flex-shrink: 1;
  min-width: 0;
}
.unified-input-wrapper .button-group .compact-status-pill .pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 当 button-group 里出现 compact pill 时，由首个 pill 顶替 send-btn 的 auto 占位，
 * 让 [pill][pill][send-btn] 整组贴在按钮组右侧。 */
.unified-input-wrapper .button-group:has(.compact-status-pill) .compact-status-pill:first-of-type {
  margin-left: auto !important;
}
.unified-input-wrapper .button-group:has(.compact-status-pill) .send-btn {
  margin-left: 0 !important;
}

/* textarea 高度（1↔多行）切换的平滑过渡 */
.unified-input-wrapper .input-box-transparent .el-textarea__inner {
  transition:
    min-height 0.25s var(--ease-out-smooth),
    height 0.25s var(--ease-out-smooth);
}

/* 容器基本样式 */
.input-container-wrapper {
  position: relative;
  border: 1px solid transparent;
  transition: all 0.3s;
  border-radius: 8px;
}

/* 拖拽时的视觉效果 */
.input-container-wrapper.is-dragging {
  border: 2px dashed var(--el-color-primary);
  background-color: rgba(var(--el-color-primary-rgb), 0.05);
}

/* 拖拽遮罩（可选） */
.drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(128, 128, 128, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none; /* 确保不干扰拖拽事件 */
  color: var(--el-text-color-primary);
  font-size: 14px;
}

/* =========================================
   Message Bubble Buttons Optimization (紧凑修复版)
   ========================================= */

/* 1. 基础样式：去掉背景、边框，清零默认外边距 */
.message-actions .el-button,
.tts-controls .el-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--el-text-color-secondary) !important;
  
  /* 🌟 核心修复 1：彻底干掉 Element 默认的相邻按钮 margin-left */
  margin: 0 !important; 
  padding: 0 !important;
  
  /* 🌟 核心修复 2：将尺寸从 30px 缩小到 26px，更加紧凑精致 */
  width: 26px !important; 
  height: 26px !important;
  font-size: 13px !important; /* 稍微缩小图标字体适配容器 */
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. 悬停反馈：淡淡的圆形背景 */
.message-actions .el-button:hover,
.tts-controls .el-button:hover {
  background-color: rgba(128, 128, 128, 0.1) !important;
  color: var(--el-color-primary) !important; 
  transform: scale(1.1);
}

/* 3. 播放状态按钮 (TTS) */
.tts-controls .el-button--primary,
.tts-controls .el-button.is-active {
  color: var(--el-color-primary) !important;
}

/* 4. 调整间距：确保 Flex 布局生效 */
.message-actions, .tts-controls {
  /* 🌟 核心修复 3：强制使用 flex 布局，确保 gap 规则完美接管间距 */
  display: flex !important; 
  align-items: center;
  flex-wrap: wrap;
  gap: 6px !important; /* 纯净的 4px 间距，配合 26px 的按钮最完美 */
  
  margin-top: 6px !important;
  opacity: 0.4; 
  transition: opacity 0.3s ease;
}

.message:hover .message-actions,
.message:hover .tts-controls {
  opacity: 1; 
}

/* =========================================
   Sidebar Cards & Task Items
   ========================================= */

.extension-card, .task-center-card, .default-view-card {
  border: 1px solid var(--el-border-color-lighter) !important;
  border-radius: 16px !important; /* 更大的圆角 */
  background-color: var(--el-bg-color) !important;
  transition: all 0.3s ease !important;
  margin-bottom: 12px !important;
}

.extension-card:hover {
  border-color: var(--el-color-primary-light-5) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

/* 任务中心里面的列表项 */
.task-card-item .el-card {
  border-radius: 12px !important;
  background-color: var(--el-bg-color) !important;
}


/* =========================================
   Ultra-Elegant Resizer (Capsule Style)
   ========================================= */

/* 1. 拖拽条物理热区 - 保持宽度，确保鼠标好抓取，不卡顿 */
.resizer {
  width: 16px !important; /* 稍微给宽一点点热区，提升手感 */
  background: transparent !important; 
  border: none !important;
  position: relative;
}

/* 隐藏原有复古点阵和发光层 */
.resizer-dots, .resizer::before {
  display: none !important;
}

/* 2. 绘制高级“胶囊”拖拽手柄 
   注意：使用 :not 排除收起状态的按钮，防止样式冲突 */
.resizer:not(.resizer-collapsed-right):not(.resizer-collapsed-left)::after {
  content: '';
  position: absolute;
  /* 垂直和水平绝对居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* --- 核心调整：短一点，粗一丁点 --- */
  height: 60px;  /* 长度限制在中间区域 */
  width: 4px;    /* 稍微粗一点，不再是1px的一条线 */
  
  /* --- 核心调整：高级圆角 --- */
  border-radius: 4px; /* 上下全圆角，形成完美的胶囊状 */
  
  /* 默认颜色：低调的高级灰，不抢戏 */
  background-color: var(--el-border-color-darker, rgba(144, 147, 153, 0.4)); 
  
  /* 弹性动画过渡 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. 悬停和正在拖拽时的交互反馈 */
.resizer:not(.resizer-collapsed-right):not(.resizer-collapsed-left):hover::after,
.chat-wrapper.resizing .resizer::after {
  width: 6px;    /* 微微变粗，增强握持感 */
  height: 72px;  /* 微微拉长，增加动态张力 */
  background-color: var(--el-color-primary); /* 亮起主题色 */
  box-shadow: 0 0 10px rgba(var(--el-color-primary-rgb), 0.5); /* 柔和的发光 */
}


/* -----------------------------------------
   2. 右侧面板 (Side Panel) - 悬浮大卡片化
   ----------------------------------------- */
.side-panel {
  /* 背景从页面底色改为“组件纯色”，更具实体感 */
  background-color: var(--el-bg-color) !important; 
  
  /* 现代化的圆角 */
  border-radius: 16px !important; 
  border: 1px solid var(--el-border-color-lighter) !important;
  
  /* 高级悬浮阴影 */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  
  /* 制造卡片悬浮感：上下右留出间距，左侧贴近拖拽条 */
  margin: 12px 12px 12px 0 !important;
  height: calc(100% - 24px) !important; /* 配合 margin 扣除高度 */
  
  overflow: hidden; /* 关键：防止内部的网页/列表把圆角刺破 */
}

/* 确保右侧面板里的内部容器（如iframe）完美贴合新的大圆角 */
.side-panel-iframe, 
.side-panel-scroll {
  border-radius: 16px !important;
  background: transparent !important;
}

/* =========================================
   Auto-Hiding Scrollbars (Mac-style Immersive)
   ========================================= */

/* 1. 目标滚动容器：左侧消息列表、右侧面板及内层各类列表 */
.messages-container,
.side-panel-scroll,
.task-content-wrapper,
.task-detail-content,
.extensions-list {
  /* Firefox 方案：默认滑块和轨道都透明 */
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
  /* 增加平滑过渡 */
  transition: scrollbar-color 0.4s ease;
  overflow-anchor: none;
}

/* Chrome/Edge/Safari 方案：默认滑块透明 */
.messages-container::-webkit-scrollbar-thumb,
.side-panel-scroll::-webkit-scrollbar-thumb,
.task-content-wrapper::-webkit-scrollbar-thumb,
.task-detail-content::-webkit-scrollbar-thumb,
.extensions-list::-webkit-scrollbar-thumb {
  background-color: transparent !important;
  border-radius: 6px; /* 更加圆润 */
}

/* 2. 交互状态：当鼠标悬停 (hover) 或 容器内正在输入/点击 (focus-within) 时，浮现滚动条 */
.messages-container:hover,
.messages-container:focus-within,
.side-panel-scroll:hover,
.side-panel-scroll:focus-within,
.task-content-wrapper:hover,
.task-content-wrapper:focus-within,
.task-detail-content:hover,
.task-detail-content:focus-within,
.extensions-list:hover,
.extensions-list:focus-within {
  /* Firefox 唤醒颜色 */
  scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
}

/* Chrome/Edge/Safari 唤醒颜色 */
.messages-container:hover::-webkit-scrollbar-thumb,
.messages-container:focus-within::-webkit-scrollbar-thumb,
.side-panel-scroll:hover::-webkit-scrollbar-thumb,
.side-panel-scroll:focus-within::-webkit-scrollbar-thumb,
.task-content-wrapper:hover::-webkit-scrollbar-thumb,
.task-content-wrapper:focus-within::-webkit-scrollbar-thumb,
.task-detail-content:hover::-webkit-scrollbar-thumb,
.task-detail-content:focus-within::-webkit-scrollbar-thumb,
.extensions-list:hover::-webkit-scrollbar-thumb,
.extensions-list:focus-within::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3) !important;
}

/* 3. 握持状态：当鼠标精准放在滚动条滑块上时，颜色进一步加深，提示可拖拽 */
.messages-container::-webkit-scrollbar-thumb:hover,
.side-panel-scroll::-webkit-scrollbar-thumb:hover,
.task-content-wrapper::-webkit-scrollbar-thumb:hover,
.task-detail-content::-webkit-scrollbar-thumb:hover,
.extensions-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.6) !important;
}

/* --- (可选) 针对右侧 iframe 的隐藏滚动条穿透 --- */
/* 注意：iframe 内的网页滚动条需要网页自身支持，但在侧边栏套壳时，尽量保证外部干净 */
.side-panel-iframe {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.side-panel-iframe:hover {
  scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
}


/* =========================================
   深色主题适配：右侧大卡片的高级发光与边框
   ========================================= */
[data-theme="dark"] .side-panel {
  /* 稍微提亮边框，增强物理边缘感 */
  border-color: rgba(255, 255, 255, 0.08) !important;
  /* 核心修改：使用半透明白色产生边缘泛光 (Outer Glow) */
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.04), 
              0 2px 10px rgba(255, 255, 255, 0.03) !important;
}


[data-theme="midnight"] .side-panel {
  border-color: rgba(14, 165, 233, 0.3) !important; 
  /* 核心修改：底层深海蓝 + 表层白光泛晕 */
  box-shadow: 0 8px 32px rgba(2, 132, 199, 0.15), 
              0 0 15px rgba(255, 255, 255, 0.06) !important;
}

[data-theme="neon"] .side-panel {
  border-color: rgba(106, 69, 209, 0.6) !important; 
  /* 核心修改：霓虹底色 + 亮白光晕，彻底拉开与背景的层次 */
  box-shadow: 0 8px 32px rgba(101, 0, 255, 0.25), 
              0 0 20px rgba(255, 255, 255, 0.08),
              0 0 10px rgba(255, 45, 149, 0.2) !important;
}


/* =========================================
   输入框底部状态栏 (模型与扩展指示器)
   ========================================= */

/* 微调输入框自身的底边距，让出空间给状态栏 */
.input-box-transparent .el-textarea__inner {
  padding: 8px 16px 6px 16px !important; /* 将底部的 padding 缩小 */
}

/* 底部状态栏容器 */
.input-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 12px 16px; /* 补足底部呼吸空间，与左右对齐 */
  background: transparent;
  user-select: none;
}

/* 基础胶囊样式优化 */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px; /* 增加左右内边距，更有胶囊感 */
  background-color: #f0f4f9; /* 浅灰色背景，类似 Gemini */
  border: 1px solid transparent; /* 默认无边框 */
  border-radius: 20px; /* 完美的圆角 */
  color: #444746; /* 柔和的深灰色文字 */
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  height: 32px; /* 固定高度使其对齐 */
  box-sizing: border-box;
}

/* 悬停效果：背景加深或出现细微边框 */
.status-pill:hover {
  background-color: #e3e7ed;
  color: #1f1f1f;
}

/* 图标样式微调 */
.status-pill i {
  font-size: 14px;
  color: #5f6368; /* 图标颜色比文字稍浅 */
  transition: color 0.2s;
}

.status-pill:hover i {
  color: #1a73e8; /* 悬停时图标变蓝，增加交互感 */
}

/* 文字部分 */
.pill-text {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="dark"] .pill-text,
[data-theme="midnight"] .pill-text,
[data-theme="neon"] .pill-text {
  color: #fff;
}

/* --- 特殊状态适配 --- */

/* Dashboard 主页上的大胶囊可以稍微大一点 */
.hero-model-pill {
  background-color: white; /* 首页大输入框背景通常是白色的，胶囊可以用白色配淡淡的边框 */
  border: 1px solid #dfe1e5;
  padding: 8px 16px;
  height: 36px;
}

.hero-model-pill:hover {
  background-color: #f8f9fa;
  border-color: #d2d2d2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 下拉菜单触发器样式 (针对权限模式等) */
.status-pill-dropdown {
  display: inline-flex;
}

/* 当胶囊处于激活/打开状态时 */
.el-dropdown-selfdefine.status-pill,
.status-pill[aria-expanded="true"] {
  background-color: #e8f0fe;
  color: #1967d2;
}

/* 在多胶囊条同时出现时，允许状态栏内的内容横向滚动而不换行（防过长溢出） */
.input-status-bar {
  flex-wrap: nowrap;
  overflow-x: auto;
  /* 隐藏滚动条让视觉更清爽 */
  scrollbar-width: none; 
}
.input-status-bar::-webkit-scrollbar {
  display: none;
}

/* =========================================
   全局 El-Dropdown 下拉菜单主题适配 (终极卡片化版)
   ========================================= */

/* 1. 最外层弹出层容器 (Popper) - 核心物理外壳 */
.el-popper.el-dropdown__popper {
  /* 卡片底色，使用毛玻璃效果，增加现代感 */
  background: var(--el-bg-color-overlay, var(--el-bg-color)) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  
  /* 🌟 核心：更大的圆角 (16px) 和更强的悬浮阴影 */
  border: 1px solid var(--el-border-color-lighter) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  
  padding: 0 !important; 
  overflow: visible !important;
}

/* 2. 内部菜单列表 (Menu) */
.el-dropdown-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  /* 给内部选项留出充裕的呼吸空间，形成 "大圆角包小圆角" 的美感 */
  padding: 8px !important;
  border-radius: 16px !important;
}

/* 3. 单个选项 (Menu Item) */
.el-dropdown-menu__item {
  color: var(--el-text-color-primary) !important;
  /* 内部选项采用 10px 圆角胶囊 */
  border-radius: 10px !important;
  margin: 2px 0 !important;
  padding: 10px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 选项悬停/聚焦 (Hover) */
.el-dropdown-menu__item:hover,
.el-dropdown-menu__item:focus {
  background-color: color-mix(in srgb, var(--el-color-primary) 12%, transparent) !important;
  color: var(--el-color-primary) !important;
  /* 保持原地不动，确保左右留白绝对对称 */
  transform: none !important; 
}

/* 被禁用的选项 */
.el-dropdown-menu__item.is-disabled {
  color: var(--el-text-color-placeholder) !important;
  background-color: transparent !important;
  cursor: not-allowed;
  transform: none;
}

/* 4. 修复指示箭头 (Arrow) - 让箭头颜色跟上卡片的外壳 */
.el-popper.is-light .el-popper__arrow::before {
  background: var(--el-bg-color-overlay, var(--el-bg-color)) !important;
  border-color: var(--el-border-color-lighter) !important;
}

/* =========================================
   三个深色主题的深度优化 (纯净物理阴影，无发光)
   ========================================= */

/* [Dark] 石墨黑主题 */
[data-theme="dark"] .el-popper.el-dropdown__popper {
  background: #1e1e1e !important; 
  border-color: #383835 !important; /* 柔和的深灰边框 */
  /* 纯黑深邃阴影，无多余光晕 */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .el-popper.is-light .el-popper__arrow::before {
  background: #1e1e1e !important;
  border-color: #383835 !important;
}

/* [Midnight] 午夜海洋主题 */
[data-theme="midnight"] .el-popper.el-dropdown__popper {
  background: #1e293b !important; 
  border-color: #334155 !important; /* 匹配午夜主题的灰蓝边框 */
  /* 纯黑深邃阴影 */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="midnight"] .el-popper.is-light .el-popper__arrow::before {
  background: #1e293b !important;
  border-color: #334155 !important;
}

/* [Neon] 多巴胺/霓虹主题 (仅保留色彩边框，去除外围光晕) */
[data-theme="neon"] .el-popper.el-dropdown__popper {
  background: #2d1b5b !important; 
  border-color: #6a45d1 !important; /* 保留其标志性的紫色物理边框 */
  /* 纯黑深邃阴影，去除紫粉色发光 */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="neon"] .el-popper.is-light .el-popper__arrow::before {
  background: #2d1b5b !important;
  border-color: #6a45d1 !important;
}

/* =========================================
   移动端输入框悬浮优化 & 按住说话 (PTT) 模式
   ========================================= */

/* 1. 移动端输入框悬浮效果 (覆盖之前的极致贴边) */
@media (max-width: 768px) {
  .input-container {
    /* 左右留出 12px，底部留出 15px，形成呼吸悬浮感 */
    padding: 0 12px 15px 12px !important; 
  }
  .unified-input-wrapper {
    /* 恢复较大圆角，增强实体感 */
    border-radius: 20px !important; 
    /* 强化悬浮投影，将其与聊天背景彻底剥离 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 
                0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid var(--el-border-color-lighter) !important;
  }
  
  /* 确保底部的状态栏边距适配悬浮卡片 */
  .input-status-bar {
    padding: 0 12px 10px 12px !important;
  }
}

.input-container {
    margin: 0 !important;
    /* 将底部的 8px 改为 24px 或 30px，给阴影留足空间 */
    padding: 0 4px 24px 4px !important; 
    position: relative;
    z-index: 10;
}

/* 2. 左下角：语音 / 键盘 切换按钮 */
.voice-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--el-text-color-regular);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-right: 4px; /* 与右侧的模型胶囊稍微隔开 */
}

.voice-toggle-btn:hover {
  background-color: rgba(128, 128, 128, 0.1);
  color: var(--el-color-primary);
}

.voice-toggle-btn:active {
  transform: scale(0.9);
}

.voice-toggle-btn i {
  font-size: 16px;
}

/* =========================================
   无缝按住说话模式 (Seamless PTT)
   ========================================= */

/* 1. 外层容器：占满输入框原本的位置 */
.ptt-seamless-wrapper {
  width: 100%;
  height: 100%;
  min-height: 48px; /* 保持和输入框差不多的高度 */
  display: flex;
  flex-direction: column;
}

/* 2. 点击区域：完全透明，无边框，融为一体 */
.ptt-seamless-area {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  
  /* 字体样式 */
  font-size: 15px;
  font-weight: 500;
  color: var(--el-text-color-secondary); /* 默认灰色，像 placeholder */
  letter-spacing: 1px;
  
  /* 关键：去背景、去边框 */
  background: transparent;
  border: none;
  border-radius: inherit; /* 跟随父级圆角 */
  
  /* 防止触摸时选中文本 */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  
  transition: all 0.2s ease;
}

/* 3. 按下状态：背景微变，文字变色 */
.ptt-seamless-area.is-recording {
  /* 背景变成淡淡的主色调，而不是深色按钮 */
  background-color: var(--el-color-primary-light-9); 
  color: var(--el-color-primary);
  font-weight: 600;
}

/* 4. (可选) 简单的声波动画条，增加录音时的动感 */
.recording-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  margin-bottom: 4px;
}

.recording-wave span {
  width: 3px;
  height: 100%;
  background-color: var(--el-color-primary);
  border-radius: 2px;
  animation: wave-stretch 0.8s ease-in-out infinite;
}

.recording-wave span:nth-child(1) { animation-delay: 0.0s; height: 40%; }
.recording-wave span:nth-child(2) { animation-delay: 0.1s; height: 70%; }
.recording-wave span:nth-child(3) { animation-delay: 0.2s; height: 100%; }
.recording-wave span:nth-child(4) { animation-delay: 0.1s; height: 70%; }
.recording-wave span:nth-child(5) { animation-delay: 0.0s; height: 40%; }

@keyframes wave-stretch {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50% { transform: scaleY(1.0); opacity: 1; }
}

/* 适配暗黑模式 */
[data-theme="dark"] .ptt-seamless-area.is-recording {
  background-color: rgba(var(--el-color-primary-rgb), 0.15);
}

/* 桌面端全局录音悬浮层 */
.desktop-recording-overlay {
  position: fixed;
  top: 40%; /* 浮动在屏幕中间偏上一点 */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none; /* 防止遮挡鼠标点击 */
  animation: fadeIn 0.2s ease-out;
}

.desktop-recording-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  backdrop-filter: blur(8px);
  padding: 30px 40px;
  border-radius: 20px;
  color: var(--el-text-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.desktop-recording-content .mic-icon {
  font-size: 40px;
  margin-bottom: 15px;
  color: var(--el-primary-color); /* 主题色 */
}

.desktop-recording-content .ptt-text {
  margin-top: 15px;
  font-size: 16px;
  letter-spacing: 1px;
}

/* 确保波纹动画在桌面提示框里正常显示 (如果你已经全局定义了，这段可以省略) */
.desktop-recording-content .recording-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
}

.desktop-recording-content .recording-wave span {
  display: inline-block;
  width: 4px;
  height: 100%;
  background-color: #409eff;
  border-radius: 2px;
  animation: wave 1s infinite ease-in-out;
}

.desktop-recording-content .recording-wave span:nth-child(1) { animation-delay: 0.0s; }
.desktop-recording-content .recording-wave span:nth-child(2) { animation-delay: 0.1s; }
.desktop-recording-content .recording-wave span:nth-child(3) { animation-delay: 0.2s; }
.desktop-recording-content .recording-wave span:nth-child(4) { animation-delay: 0.3s; }
.desktop-recording-content .recording-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -40%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* =========================================
   Skill Cards: Location Management Footer
   ========================================= */

/* 消除原 provider-card 底部 padding 带来的影响，使底部状态栏贴边 */
.skill-card {
  padding-bottom: 0 !important; 
  overflow: hidden; /* 确保底部圆角不会被状态栏破坏 */
  display: flex;
  flex-direction: column;
}

.skill-content-wrapper {
  flex: 1;
  padding: 0 0 16px 0;
}

.skill-desc {
  font-size: 13px; 
  color: var(--el-text-color-regular); 
  margin-bottom: 8px;
  line-height: 1.5;
  height: 38px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 底部状态管理栏外层 */
.skill-locations-bar {
  display: flex;
  align-items: stretch;
  margin: auto -1.25rem 0 -1.25rem; /* 抵消父级 padding，紧贴卡片底部和左右边缘 */
  border-top: 1px solid var(--el-border-color-lighter);
}

/* 左右两侧的独立面板 */
.location-pane {
  flex: 1;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 当该区域存在内容时，给出极其微弱的成功色混合背景 (完美适配多巴胺/暗色) */
.location-pane.is-active {
  background-color: color-mix(in srgb, var(--el-color-success) 4%, transparent);
}

/* 禁用状态变灰 */
.location-pane.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 分割线 */
.pane-divider {
  width: 1px;
  background-color: var(--el-border-color-lighter);
}

/* 区域标题 (如 Global / Project) */
.pane-title {
  font-size: 11px;
  color: var(--el-text-color-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 状态和操作按钮同行 */
.pane-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px; /* 固定高度防止按钮导致跳动 */
}

/* 状态文字指示器 */
.status-indicator {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-indicator.success { color: var(--el-color-success); }
.status-indicator.pending { color: var(--el-text-color-placeholder); font-weight: 400; }
.status-indicator.disabled { color: var(--el-color-danger); font-size: 11px; }

/* 专门优化底部操作图标按钮，继承你的无边框风格 */
.action-icon-btn {
  margin: 0 !important;
  padding: 4px !important;
  height: 24px !important;
  width: 24px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
}
.action-icon-btn:hover {
  background-color: var(--el-fill-color) !important;
  transform: scale(1.1);
}

/* 1. 整体容器间距调整 */
.workspace-tree-wrapper {
    padding: 15px !important; /* 增加外边距 */
}

/* 2. 调整树节点的高度和文字大小 */
.large-workspace-tree .el-tree-node__content {
    height: 40px !important;   /* 增加每一行的高度 (默认通常是 26px) */
    margin-bottom: 2px;        /* 节点之间留一点缝隙 */
    border-radius: 6px;        /* 圆角看起来更现代 */
}

/* 3. 调整自定义节点内部布局 */
.workspace-tree-node {
    font-size: 15px !important; /* 放大文字大小 (从 13px -> 15px) */
    display: flex;
    align-items: center;
    width: 100%;
}

/* 4. 放大图标尺寸 */
.workspace-tree-node i {
    font-size: 18px !important; /* 图标放大 (从 14px -> 18px) */
    margin-right: 10px !important; /* 图标与文字的间距 */
    width: 20px;
    text-align: center;
}

/* 5. 调整节点标签 */
.workspace-tree-node .node-label {
    gap: 8px !important; 
    font-weight: 500; /* 稍微加粗文字 */
    color: var(--el-text-color-primary);
}

/* 6. 调整右侧操作按钮的大小 */
.workspace-tree-node .node-actions .el-button {
    font-size: 16px !important; /* 放大操作图标 */
    padding: 4px 8px;
}

/* 7. 悬浮状态背景加深（可选） */
.large-workspace-tree .el-tree-node__content:hover {
    background-color: var(--el-fill-color-light) !important;
}

/* 8. 选中状态样式 */
.large-workspace-tree .el-tree-node.is-current > .el-tree-node__content {
    background-color: var(--el-color-primary-light-9) !important;
    color: var(--el-color-primary) !important;
}

.unified-input-wrapper .icon-btn.el-button {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: all 0.2s ease;

  &.el-button--primary {
    background-color: rgba(var(--el-color-primary-rgb), 0.1) !important;
    color: var(--el-color-primary) !important; /* 图标呈颜色，背景浅 */

    &:hover {
      background-color: rgba(var(--el-color-primary-rgb), 0.2) !important;
    }
  }

  &.el-button--default {
    color: var(--el-text-color-regular);
    &:hover {
      background-color: rgba(128, 128, 128, 0.1) !important;
    }
  }
}

.unified-input-wrapper {
  background-color: var(--el-bg-color) !important;
  border-radius: 24px !important; 
  border: 1px solid var(--el-border-color) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* 修复尖角：减小向下的偏移和模糊度(例如改为 0 4px 10px)，使其在 8px 的缝隙内能平滑消散 */
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.05), 
              0 4px 10px rgba(0, 0, 0, 0.08) !important;
              
  overflow: hidden; 
}

/* 胶囊模式专用（或者全局标准 primary 按钮） */
.status-btn.el-button--primary {
    /* 使用你主题定义的渐变或纯色 */
    background: linear-gradient(145deg, var(--el-color-primary), var(--el-color-primary-light-3)) !important;
    color: #ffffff !important; /* 强制图标反色为白色 */
    box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.4) !important;
    border: none !important;
}

/* 胶囊按钮内部图标颜色强制白色 */
.status-btn.el-button--primary i {
    color: #ffffff !important;
}

/* =========================================
   Enhanced Media Attachments (Adaptive Ratio)
   ========================================= */

/* 1. 容器：允许内容根据大小自动换行 */
.user-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  justify-content: flex-end; /* 用户消息靠右 */
}

/* 助手消息里的附件靠左 */
.message.assistant .user-msg-attachments {
  justify-content: flex-start;
}

/* 2. 基础项重置：取消 54px 固定尺寸 */
.user-msg-attachments .attachment-item-display {
  width: auto !important; 
  height: auto !important;
  flex: 0 1 auto !important; /* 允许根据内容收缩 */
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(128, 128, 128, 0.2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.2s ease;
}

/* 3. 图片尺寸：适中 */
.image-item-wrapper {
  max-width: 90px; /* 图片最大宽度 */
  max-height: 90px;
}

/* 4. 视频尺寸：明显比图片大一些，突出视觉重心 */
.video-item-wrapper {
  max-width: 160px; /* 视频最大宽度 */
  max-height: 90px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 5. 媒体渲染核心：保持原比例 */
.preview-media-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.preview-media-box img,
.preview-media-box video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 300px; /* 强制最高上限 */
  display: block;
  object-fit: contain; /* 确保不被裁切 */
}

/* 针对视频的黑色底色，防止比例不匹配时露白 */
.video-item-wrapper .preview-media-box {
  background-color: #000;
}

/* 6. 视频特有修饰：播放标识 */
.video-indicator {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.3);
}

/* 3. 清除图标可能存在的默认边距 */
.user-msg-attachments .file-icon {
  color: #ffffff !important;
}

/* 4. 文字区域：确保宽度 100% 且居中 */
.user-msg-attachments .file-info .file-name {
  color: #ffffff !important; /* 文字颜色 */
}

/* 7. 文件附件 (保持 54px 方块) */
.user-msg-attachments .attachment-item-display .file-item {
  width: 90px !important;
  height: 90px !important;
  padding: 0 !important;
}

.user-msg-attachments .attachment-item-display .file-item .file-card-box{
  width: 90px !important;
  height: 90px !important;
  padding: 0 !important;
}

/* 8. 悬停交互 */
.attachment-item-display:hover {
  transform: scale(1.02);
  border-color: var(--el-color-primary) !important;
}

.wechat-guide {
  padding: 10px 5px;
}
.guide-step {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  position: relative;
}
/* 连接线 */
.guide-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: -10px;
  width: 2px;
  background: var(--el-border-color-lighter);
}
.step-num {
  width: 30px;
  height: 30px;
  background: var(--el-color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
  z-index: 1;
}
.step-title {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 15px;
}
.step-desc {
  font-size: 13px;
  color: var(--el-text-color-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.code-wrapper {
  background: #1a1b1e;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--el-border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
code {
  color: #00c2a8;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
}
.mt-4 {
  margin-top: 16px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 视频建议稍微宽一点 */
  gap: 20px;
  padding-top: 15px;
}

.video-item {
  border-radius: 8px;
  border: 1px solid #ebeef5;
  background: #fdfdfd;
  overflow: hidden;
}

.video-wrapper {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
}

.video-player {
  width: 100%;
  height: 100%;
  display: block;
}

/* 顶部操作遮罩 */
.video-top-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px; /* 只占顶部一小部分 */
  padding: 8px 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* 重要：不干扰视频点击 */
}

/* 鼠标悬浮在视频项时显示顶部按钮 */
.video-item:hover .video-top-overlay {
  opacity: 1;
  pointer-events: auto; /* 悬浮时允许点击按钮 */
}

.video-quick-actions {
  display: flex;
  gap: 6px;
}

.video-mini-btn {
  padding: 4px !important;
  height: 28px !important;
  width: 28px !important;
  border: none !important;
}

.video-mini-btn:hover {
  background: #fff !important;
}

.video-info-footer {
  padding: 8px 12px;
  font-size: 13px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* 隐藏 Checkbox 文字 */
:deep(.checkbox-no-label .el-checkbox__label) {
  display: none;
}


/* 1. 主容器：全局居中排版 */
.dashboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 垂直居中 */
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  animation: dashboardFadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

/* 2. 核心区域宽度限制 */
.dashboard-hero {
  width: 100%;
  max-width: 760px; /* 类似搜索引擎的标准宽度 */
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}

/* 3. 问候语：极致克制，去掉浮夸渐变，改用纯净文字 */
.dashboard-title {
  font-size: 32px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 24px;
  text-align: left; /* 靠左对齐，和图例一致 */
  letter-spacing: 1px;
}

/* 4. 融合式胶囊输入框 (强化立体感版) */
.hero-input-wrapper {
  /* 1. 拉开色差：强制使用纯净组件底色(亮色下通常是纯白) */
  background-color: var(--el-bg-color) !important; 
  /* 2. 边框稍微加深一档，勾勒明确的物理边界 */
  border: 1px solid var(--el-border-color-light);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* 3. 强化阴影：双层阴影设计，增强纸面悬浮感 */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 
              0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 输入框聚焦状态：发光+上浮反馈 */
.hero-input-wrapper.is-focus {
  background-color: var(--el-bg-color) !important;
  border-color: var(--el-color-primary);
  /* 聚焦时强化主色调晕染和立体上浮感 */
  box-shadow: 0 12px 40px rgba(var(--el-color-primary-rgb), 0.12),
              0 0 0 1px var(--el-color-primary) inset,
              0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* 输入框本身重置：彻底透明 */
.hero-textarea .el-textarea__inner {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 16px;
  padding: 20px 24px 10px 24px !important; /* 调整内边距 */
  color: var(--el-text-color-primary);
  line-height: 1.6;
}

.hero-textarea .el-textarea__inner::placeholder {
  color: var(--el-text-color-placeholder);
  font-weight: 400;
}

/* 5. 融于一体的工具栏 (无边界感) */
.hero-input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 12px 16px;
  background: transparent;
  /* 移除原有的上边框，让工具栏和输入框融为一体 */
  border-top: none; 
}

/* 工具栏图标按钮扁平化 */
.hero-input-footer .el-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--el-text-color-secondary);
  font-size: 16px;
  width: 36px;
  height: 36px;
  transition: all 0.2s;
}

.hero-input-footer .el-button:hover {
  background-color: rgba(128, 128, 128, 0.1) !important;
  color: var(--el-color-primary);
  transform: scale(1.1);
}

/* 发送按钮特殊高亮 */
.hero-send-btn {
  color: var(--el-color-primary) !important;
}

.hero-send-btn:hover {
  background-color: color-mix(in srgb, var(--el-color-primary) 15%, transparent) !important;
}

/* 6. 建议标签组 (Chips) - 替代原本臃肿的方块卡片 */
.guide-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 靠左排列 */
  gap: 12px;
  width: 100%;
  max-width: 760px; /* 与输入框等宽 */
}

/* 芯片式卡片 */
.guide-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background-color: var(--el-bg-color-page); /* 使用稍深的底色 */
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 30px; /* 完全的胶囊形 */
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.guide-card:hover {
  background-color: var(--el-bg-color);
  border-color: var(--el-color-primary-light-5);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

/* 隐藏冗长的描述文字，只保留标题和图标 */
.card-info p {
  display: none;
}

/* 芯片内标题 */
.card-info h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-regular);
  transition: color 0.2s;
}

.guide-card:hover .card-info h3 {
  color: var(--el-text-color-primary);
}

/* 芯片内小图标 */
.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* 图标颜色方案微调 (适应小尺寸) */
.card-icon.blue { color: #409eff; }
.card-icon.pink { color: #ff69b4; }
.card-icon.gold { color: #e6a23c; }
.card-icon.green { color: #67c23a; }
.card-icon.purple { color: #9b59b6; }
.card-icon.cyan {
  color: #00bcd4;
}

.card-icon.indigo {
  color: #3f51b5;
}

.card-icon.orange {
  color: #ff9800;
}

.card-icon.red {
  color: #ff4136; /* 明亮红色 */
}

.card-icon.teal {
  color: #009688;
}

/* =========================================
   Dashboard 建议标签（Chips）中收藏星星显色
   ========================================= */

/* 1. 确保星星容器在胶囊右侧对齐 */
.guide-card .fav-star {
  display: flex;
  align-items: center;
  margin-left: 6px; /* 与标题保持一点间距 */
  cursor: pointer;
}

/* 2. 强制激活状态的星星显示为金黄色 */
.guide-card .fav-star.active i,
.guide-card .fav-star.active .fa-star {
  color: #f1c40f !important; /* 经典的收藏金黄色 */
  filter: drop-shadow(0 0 3px rgba(241, 196, 15, 0.4)); /* 增加微弱光晕，让它在深浅色背景下都好看 */
  transition: all 0.3s ease;
}

/* 3. 悬停交互：星星稍微变大 */
.guide-card .fav-star:hover i {
  transform: scale(1.2);
  color: #f39c12 !important; /* 悬停时深一度的橙黄 */
}

/* 4. 针对 guide-card 内部布局的微调 */
.guide-card.extension {
  justify-content: space-between; /* 让内容和星星分别靠在两头 */
  min-width: 100px;
}

/* 7. 移动端适配 */
@media (max-width: 768px) {
  .dashboard-hero {
    margin-bottom: 20px;
  }
  .dashboard-title {
    font-size: 26px;
    text-align: center; /* 手机端居中好看些 */
  }
  .guide-grid {
    justify-content: center; /* 手机端标签居中 */
  }
  .guide-card {
    padding: 8px 14px;
  }
}



/* 扩展卡片右上角按钮组 */
.btn-top-right {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;         /* 横向排列 */
  align-items: center;   /* 居中对齐 */
}

/* 激活状态的星星颜色（明亮的金色） */
.star-active {
  color: #e6a23c !important; /* Element Plus 的警告色(金色)，在深浅色下都很醒目 */
  /* 可以加一点微微的发光感 */
  filter: drop-shadow(0 0 2px rgba(230, 162, 60, 0.4));
  animation: star-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 可选：点亮星星时的 Q 弹小动画 */
@keyframes star-pop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}


/* =========================================
   Unified & Hero Input Buttons Fix (不冲突版)
   ========================================= */

/* 1. 基础样式：针对独立的图标按钮 (TTS, ASR, 附件) */
/* 我们使用更具体的类名，避免影响到 status-pill */
.hero-input-footer .el-button:not(.status-pill):not(.el-button--primary):not(.el-button--danger) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--el-text-color-regular) !important;
  opacity: 0.6;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  transition: all 0.2s ease !important;
}

/* 2. 激活状态：当 type="primary" 时（TTS开启、ASR开启） */
.hero-input-footer .el-button--primary:not(.hero-send-btn) {
  /* 强制显色 */
  color: var(--el-color-primary) !important;
  /* 浅色背景提示 */
  background-color: color-mix(in srgb, var(--el-color-primary) 15%, transparent) !important;
  opacity: 1 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

/* 3. 悬停反馈 */
.hero-input-footer .el-button:hover:not(.status-pill) {
  opacity: 1 !important;
  background-color: rgba(128, 128, 128, 0.1) !important;
  transform: scale(1.1);
}

/* 4. 专项保护：status-pill (模型选择胶囊) */
/* 确保它拥有实色背景，不被上面的透明规则覆盖 */
.hero-model-pill.status-pill, 
.status-pill {
  background-color: var(--el-fill-color-light, #f0f4f9) !important; /* 浅灰/主题填充色 */
  border: 1px solid var(--el-border-color-lighter) !important;
  color: var(--el-text-color-primary) !important;
  opacity: 1 !important;
  display: inline-flex !important;
  padding: 6px 12px !important;
  height: 32px !important;
  border-radius: 16px !important; /* 保持胶囊形状 */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 暗色主题下的胶囊背景微调 */
[data-theme="dark"] .status-pill,
[data-theme="midnight"] .status-pill,
[data-theme="neon"] .status-pill {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 5. 发送按钮：保持原有逻辑 */
.hero-send-btn {
  background: transparent !important;
  color: var(--el-color-primary) !important;
  opacity: 1 !important;
  font-size: 18px !important;
}

/* 6. 移动端模型选择按钮适配 */
/* 如果移动端使用的是 el-button 形式的模型选择器，强制其表现得像个胶囊 */
.hero-input-footer .icon-btn i.fa-microchip {
  color: var(--el-color-primary) !important; /* 图标给个颜色，显眼一点 */
}

/* ====================================================
   ✨ SAP Premium Motion System (全局高级动效系统) ✨
   主打：丝滑页面切换、网格瀑布流进场、物理回弹交互
   ==================================================== */

/* 1. 核心动效变量 (物理曲线) */
:root {
  /* Apple 风格的丝滑减速曲线 (适合进场、移动) */
  --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  /* 带有物理弹性的曲线 (适合卡片弹出、对话气泡) */
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 舒适的过渡时间 */
  --motion-duration: 0.5s;
}

/* ----------------------------------------------------
   2. 页面级平滑切换 (Page Transitions)
   当点击左侧菜单切换页面时，整体页面柔和淡入上浮
---------------------------------------------------- */
.page {
  animation: pageSlideFadeIn var(--motion-duration) var(--ease-out-smooth) both;
  transform-origin: top center;
}

@keyframes pageSlideFadeIn {
  0% { 
    opacity: 0; 
    transform: translateY(15px) scale(0.995); 
    filter: blur(2px); /* 极轻微的模糊增加景深感 */
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
    filter: blur(0);
  }
}

/* ----------------------------------------------------
   3. 高级网格瀑布流进场 (Staggered Waterfall)
   自动应用于知识库、模型配置、插件等所有的网格布局
---------------------------------------------------- */
/* 为网格内的子元素绑定弹跳进场动画 */
.provider-grid > div, 
.guide-grid > div, 
.plugins-grid > div {
  animation: cardPopIn 0.6s var(--ease-out-back) both;
}

/* 动态交错延迟 (利用 nth-child 实现纯 CSS 瀑布流) */
.provider-grid > div:nth-child(1), .guide-grid > div:nth-child(1), .plugins-grid > div:nth-child(1)(1) { animation-delay: 0.05s; }
.provider-grid > div:nth-child(2), .guide-grid > div:nth-child(2), .plugins-grid > div:nth-child(2)(2) { animation-delay: 0.10s; }
.provider-grid > div:nth-child(3), .guide-grid > div:nth-child(3), .plugins-grid > div:nth-child(3)(3) { animation-delay: 0.15s; }
.provider-grid > div:nth-child(4), .guide-grid > div:nth-child(4), .plugins-grid > div:nth-child(4)(4) { animation-delay: 0.20s; }
.provider-grid > div:nth-child(5), .guide-grid > div:nth-child(5), .plugins-grid > div:nth-child(5)(5) { animation-delay: 0.25s; }
.provider-grid > div:nth-child(6), .guide-grid > div:nth-child(6), .plugins-grid > div:nth-child(6)(6) { animation-delay: 0.30s; }
.provider-grid > div:nth-child(7), .guide-grid > div:nth-child(7), .plugins-grid > div:nth-child(7)(7) { animation-delay: 0.35s; }
.provider-grid > div:nth-child(8), .guide-grid > div:nth-child(8), .plugins-grid > div:nth-child(8)(8) { animation-delay: 0.40s; }
.provider-grid > div:nth-child(9), .guide-grid > div:nth-child(9), .plugins-grid > div:nth-child(9)(9) { animation-delay: 0.45s; }
.provider-grid > div:nth-child(10),.guide-grid > div:nth-child(10),.plugins-grid > div:nth-child(10)(10){ animation-delay: 0.50s; }
.provider-grid > div:nth-child(11),.guide-grid > div:nth-child(11),.plugins-grid > div:nth-child(11)(11){ animation-delay: 0.55s; }
.provider-grid > div:nth-child(12),.guide-grid > div:nth-child(12),.plugins-grid > div:nth-child(12)(12){ animation-delay: 0.60s; }
/* 超过12个的元素统一延迟，防止等待过久 */
.provider-grid > div:nth-child(n+13), .guide-grid > div:nth-child(n+13), .plugins-grid > div:nth-child(n+13) { animation-delay: 0.65s; }

@keyframes cardPopIn {
  0% { 
    opacity: 0; 
    transform: translateY(25px) scale(0.92); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

/* ----------------------------------------------------
   4. 物理反馈交互 (Tactile Micro-interactions)
   针对卡片、按钮的悬停与点击物理反馈
---------------------------------------------------- */
/* 确保这些元素使用物理曲线进行形变 */
.provider-card, .guide-card, .extension-card, .vendor-card, .tool-item, .el-button, .market-link-banner {
  transition: transform 0.3s var(--ease-out-back), box-shadow 0.4s var(--ease-out-smooth), border-color 0.3s ease !important;
}

/* 悬停时：上浮放大，产生“吸附”感 */
.provider-card:hover, .guide-card:hover, .extension-card:hover, .vendor-card:hover, .tool-item:hover {
  transform: translateY(-4px) scale(1.01) !important;
  z-index: 10; /* 悬停时提层，防止阴影被遮挡 */
}

/* 点击时：模拟物理按压，微缩小 */
.provider-card:active, .guide-card:active, .extension-card:active, .vendor-card:active, .el-button:active, .market-link-banner:active {
  transform: scale(0.96) !important;
  transition-duration: 0.1s !important; /* 按下瞬间响应变快 */
}

/* ----------------------------------------------------
   5. 输入系统与菜单 (Input & Navigation Flow)
---------------------------------------------------- */
/* 输入框聚焦时的平滑光晕扩散 */
.el-input__wrapper, .el-textarea__inner {
  transition: transform 0.3s var(--ease-out-smooth), box-shadow 0.3s var(--ease-out-smooth), background-color 0.3s ease !important;
}
.el-input__wrapper.is-focus, .el-textarea__inner:focus {
  transform: translateY(-1px) !important;
  /* 光晕扩散效果已在前面主体样式中定义，此处增强平滑度 */
}

/* 左侧菜单点击水波纹/平滑滑块 */
.el-menu-item {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out-back) !important;
}
.el-menu-item:active {
  transform: scale(0.95) !important;
}

/* ----------------------------------------------------
   6. 对话列表进场动效 (Chat Messages Entry)
   让新生成的消息气泡从下向上 Q弹入场
---------------------------------------------------- */
.message {
  animation: messagePop 0.5s var(--ease-out-back) both;
  transform-origin: bottom left; /* AI 消息从左下角生长 */
}
.message.user {
  transform-origin: bottom right; /* User 消息从右下角生长 */
}

@keyframes messagePop {
  0% { 
    opacity: 0; 
    transform: translateY(15px) scale(0.95); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}


/* ----------------------------------------------------
   7. 弹窗高级感 (Dialog / Overlays) - 最终兼容版
---------------------------------------------------- */

/* 1. 遮罩层：增加毛玻璃感 */
.el-overlay {
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  background-color: rgba(0, 0, 0, 0.4) !important;
}

/* 2. 对话框本体：弹性进入 */
.dialog-fade-enter-active .el-dialog {
  animation: sapDialogPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes sapDialogPopIn {
  0% { opacity: 0; transform: scale(0.9) translateY(30px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 3. 重要：移除之前建议的 .el-popup-parent--hidden .main-container { filter: ... } */
/* 因为 filter 会导致 fixed 定位失效，弹窗无法全屏 */
.el-popup-parent--hidden .main-container {
  filter: none !important; 
}

/* 4. 修改之前的页面进入动画，防止干扰弹窗 */
/* 将之前的 .page 动画改为只针对 page 内部的直接子元素（不含弹窗） */
.page > *:not(.el-dialog):not(.el-overlay) {
  animation: pageSlideFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* =========================================
   Modernized El-Dialog (高级大圆角弹窗)
   ========================================= */

/* 1. 弹窗主体容器 */
.el-dialog {
  /* 🌟 核心：20px 大圆角 */
  border-radius: 20px !important; 
  /* 确保内部背景不刺破圆角 */
  overflow: hidden; 
  
  /* 背景与边框适配 */
  background: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color-lighter) !important;
  
  /* 深度感：多层物理阴影 */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 
              0 4px 12px rgba(0, 0, 0, 0.08) !important;
  
  /* 针对不同主题微调 */
  transition: background 0.3s, box-shadow 0.3s;
}

/* 2. 标题栏区域 (Header) */
.el-dialog__header {
  padding: 24px 28px 12px !important; /* 增加边距，更有呼吸感 */
  margin-right: 0 !important;
  /* 移除底部线条，采用纯净风格 */
  border-bottom: none !important;
}

.el-dialog__title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--el-text-color-primary);
  letter-spacing: -0.5px;
}

/* 3. 关闭按钮重制 (Close Button) */
.el-dialog__headerbtn {
  top: 20px !important;
  right: 20px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important; /* 圆形背景 */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.el-dialog__headerbtn:hover {
  background-color: rgba(128, 128, 128, 0.1) !important;
  transform: rotate(90deg); /* 悬停时轻轻旋转，增加交互感 */
}

.el-dialog__headerbtn .el-dialog__close {
  color: var(--el-text-color-secondary) !important;
  font-size: 16px !important;
}

/* 4. 内容区域 (Body) */
.el-dialog__body {
  padding: 12px 28px 24px !important;
  color: var(--el-text-color-regular);
  font-size: 14px;
  line-height: 1.6;
}

/* 5. 底部操作栏 (Footer) */
.el-dialog__footer {
  padding: 16px 28px 24px !important;
  /* 顶部的极细分割线，适配深浅色 */
  border-top: 1px solid color-mix(in srgb, var(--el-border-color-lighter) 50%, transparent) !important;
  background-color: transparent !important;
}

/* 6. 弹窗内的按钮间距优化 */
.el-dialog__footer .el-button {
  padding: 10px 20px !important;
  border-radius: 10px !important; /* 按钮也跟进大圆角逻辑 */
  font-weight: 600;
}

/* =========================================
   针对特定主题的微调 (Optional Extras)
   ========================================= */

/* Dark / Midnight / Neon 主题下的内发光，增加实体感 */
[data-theme="dark"] .el-dialog,
[data-theme="midnight"] .el-dialog,
[data-theme="neon"] .el-dialog {
  border-color: rgba(255, 255, 255, 0.1) !important;
  /* 添加一条极细的顶边光，像玻璃边缘 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

/* 移除 Element Plus 默认的进入动画，使用我们的 sapDialogPopIn */
.dialog-fade-enter-active, .dialog-fade-leave-active {
  animation: none !important;
}

/* =========================================
   Mobile El-Dialog Vertical Centering
   ========================================= */
@media (max-width: 768px) {
  /* 1. 让弹窗容器（遮罩层）变为 Flex 布局 */
  .el-overlay-dialog {
    display: flex !important;
    align-items: center !important;   /* 垂直居中 */
    justify-content: center !important; /* 水平居中 */
    padding: 12px !important;         /* 视口四周留一点间距，防止贴边 */
  }

  /* 2. 重置弹窗自身的 Margin */
  .el-dialog {
    margin: 0 !important;      /* 彻底移除默认的 margin-top，由父级 flex 居中控制 */
    width: 92% !important;     /* 宽度占满 92% */
    max-height: 85vh !important; /* 限制最大高度，防止内容撑破屏幕 */
    display: flex;
    flex-direction: column;
    border-radius: 20px !important; /* 保持高级大圆角 */
  }

  /* 3. 确保弹窗内容过多时可以内部滚动 */
  .el-dialog__body {
    flex: 1;
    overflow-y: auto;          /* 开启内部滚动 */
    -webkit-overflow-scrolling: touch; 
    padding: 15px 20px !important;
  }

  /* 4. 优化页脚按钮布局：让两个按钮并排平分宽度 */
  .el-dialog__footer {
    padding: 12px 20px 20px !important;
  }
  
  .el-dialog__footer .dialog-footer {
    display: flex;
    gap: 10px;
  }
  
  .el-dialog__footer .el-button {
    flex: 1; /* 平分宽度 */
    margin: 0 !important;
  }
}


/* =========================================
   Extension Card Anti-Shake Optimization
   ========================================= */

/* 1. 稳定卡片：悬停时取消物理位移和缩放，改用纯颜色/阴影反馈 */
.extension-card:hover {
  transform: none !important; /* 彻底禁用物理上浮 */
  border-color: var(--el-color-primary) !important;
  /* 用更深更广的阴影来模拟“浮起感”，而不移动像素位置 */
  box-shadow: 0 0 0 1px var(--el-color-primary), 
              0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* 2. 移除点击时的“按压”缩放 (关键修复) */
/* 点击时如果发生 scale(0.96)，按钮会瞬间变小，导致鼠标滑出 */
.extension-card:active, 
.extension-card .el-button:active {
  transform: none !important; 
}

/* 3. 稳定按钮：取消悬停时的位移，仅保留缩放或背景变化 */
.extension-card .btn-top-right .el-button {
  transform: none !important; /* 禁止移动 */
  transition: background-color 0.2s, color 0.2s !important; /* 只保留颜色过渡 */
  
  /* 增大点击热区：使用透明边框扩大感应区，但不改变视觉大小 */
  border: 4px solid transparent !important; 
  background-clip: padding-box !important;
}

.extension-card .btn-top-right .el-button:hover {
  transform: scale(1.1) !important; /* 只允许轻微缩放，不准位移 */
  background-color: var(--el-fill-color-dark) !important;
}

/* 4. 隔离层：当鼠标进入按钮区域时，通过伪类确保卡片背景不会干扰 */
.extension-card .btn-top-right {
  padding: 10px;
  margin: -10px; /* 负边距抵消 padding，扩大拦截区域 */
  z-index: 100;
}

/* =========================================
   Dashboard Chips (Guide Cards) Anti-Shake
   ========================================= */

/* 1. 降低进场动画的幅度：从 25px 减小到 8px，去掉回弹效果 */
@keyframes dashboardPopIn {
  0% { 
    opacity: 0; 
    transform: translateY(8px); /* 极小位移 */
    filter: blur(4px);
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
    filter: blur(0);
  }
}

/* 覆盖之前的动画 */
.guide-grid > .guide-card {
  animation: dashboardPopIn 0.4s var(--ease-out-smooth) both !important;
  /* 移除弹性过渡，改用线性减速过渡 */
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s ease-out !important;
}

/* 2. 移除点击时的物理按压感 (避免点击星星时卡片缩小) */
.guide-card:active {
  transform: none !important; 
}

/* 3. 悬停效果：仅保留极其轻微的上浮，不使用 scale */
.guide-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 4. 重点优化：星星按钮 (收藏图标) */
.guide-card .fav-star {
  position: relative;
  z-index: 10;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s !important;
}

/* 悬停在星星上时，只改变星星背景，不让卡片整体产生视觉干扰 */
.guide-card .fav-star:hover {
  background-color: rgba(128, 128, 128, 0.1);
}

/* 移除星星点击时的物理抖动 */
.guide-card .fav-star:active {
  transform: scale(0.9); /* 只有星星缩放，卡片不动 */
}

/* 5. 布局稳定性：防止取消收藏时，列表重排导致的瞬间位移跳动 */
.guide-grid {
  /* 启用平滑过渡，如果 Vue 使用了 transition-group 效果更好 */
  transition: all 0.5s var(--ease-out-smooth);
}


/* =========================================
   Storage Section Waterfall Entry
   ========================================= */

/* 1. 统一绑定进场动画：文本列表、图片网格、视频网格 */
.text-list > .file-item,
.image-grid > .image-item,
.video-grid > .video-item {
  /* 使用平滑曲线，避免存储列表在大面积重排时产生眩晕感 */
  animation: cardPopIn 0.6s var(--ease-out-smooth) both;
}

/* 2. 动态交错延迟 (Staggered Delays) */
/* 我们为前 12 个元素设置阶梯式延迟 */
.text-list > .file-item:nth-child(1), .image-grid > .image-item:nth-child(1), .video-grid > .video-item:nth-child(1) { animation-delay: 0.05s; }
.text-list > .file-item:nth-child(2), .image-grid > .image-item:nth-child(2), .video-grid > .video-item:nth-child(2) { animation-delay: 0.10s; }
.text-list > .file-item:nth-child(3), .image-grid > .image-item:nth-child(3), .video-grid > .video-item:nth-child(3) { animation-delay: 0.15s; }
.text-list > .file-item:nth-child(4), .image-grid > .image-item:nth-child(4), .video-grid > .video-item:nth-child(4) { animation-delay: 0.20s; }
.text-list > .file-item:nth-child(5), .image-grid > .image-item:nth-child(5), .video-grid > .video-item:nth-child(5) { animation-delay: 0.25s; }
.text-list > .file-item:nth-child(6), .image-grid > .image-item:nth-child(6), .video-grid > .video-item:nth-child(6) { animation-delay: 0.30s; }
.text-list > .file-item:nth-child(7), .image-grid > .image-item:nth-child(7), .video-grid > .video-item:nth-child(7) { animation-delay: 0.35s; }
.text-list > .file-item:nth-child(8), .image-grid > .image-item:nth-child(8), .video-grid > .video-item:nth-child(8) { animation-delay: 0.40s; }
.text-list > .file-item:nth-child(9), .image-grid > .image-item:nth-child(9), .video-grid > .video-item:nth-child(9) { animation-delay: 0.45s; }
.text-list > .file-item:nth-child(10),.image-grid > .image-item:nth-child(10),.video-grid > .video-item:nth-child(10){ animation-delay: 0.50s; }
.text-list > .file-item:nth-child(11),.image-grid > .image-item:nth-child(11),.video-grid > .video-item:nth-child(11){ animation-delay: 0.55s; }
.text-list > .file-item:nth-child(12),.image-grid > .image-item:nth-child(12),.video-grid > .video-item:nth-child(12){ animation-delay: 0.60s; }

/* 超过12个的元素不再延迟，防止超长列表渲染过慢 */
.text-list > .file-item:nth-child(n+13), 
.image-grid > .image-item:nth-child(n+13), 
.video-grid > .video-item:nth-child(n+13) { 
  animation-delay: 0.65s; 
}

/* 3. 物理交互反馈加固 */
/* 确保文件列表行在鼠标悬停时也有平滑的提升感 */
.file-item {
  transition: all 0.3s var(--ease-out-smooth) !important;
  border: 1px solid transparent;
}

.file-item:hover {
  background-color: var(--el-bg-color) !important;
  transform: translateX(4px) !important; /* 文本列表适合向右微移，而不是向上浮 */
  box-shadow: var(--shadow-sm);
  border-color: var(--el-color-primary-light-8) !important;
}

/* 图片和视频卡片悬停上浮 */
.image-item:hover, .video-item:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: var(--shadow-lg) !important;
  z-index: 5;
}

/* 点击反馈：轻微按压 */
.file-item:active, .image-item:active, .video-item:active {
  transform: scale(0.98) !important;
  transition-duration: 0.1s !important;
}


/* =========================================
   Logo & License Page Waterfall Entry
   ========================================= */

/* 1. 主卡片整体进场 */
.license-notice {
  animation: pageSlideFadeIn 0.6s var(--ease-out-smooth) both;
}

/* 2. 内部区块序列进场 (标题、警告区、联系区、链接区、协议区) */
.license-notice > h1,
.license-notice > h3,
.license-notice > .notice-section,
.license-notice > .contact-section,
.license-notice > .social-links,
.license-notice > .agreement-section {
  animation: cardPopIn 0.6s var(--ease-out-smooth) both;
}

/* 区块间的微小延迟，让页面自上而下“流”出来 */
.license-notice > h1 { animation-delay: 0.05s; }
.license-notice > h3 { animation-delay: 0.10s; }
.license-notice > .notice-section { animation-delay: 0.15s; }
.license-notice > .contact-section { animation-delay: 0.20s; }
.license-notice > .social-links { animation-delay: 0.25s; }
.license-notice > .agreement-section { animation-delay: 0.30s; }

/* 3. 核心：社交链接列表的瀑布流 (Staggered Links) */
.social-links > .link-item {
  animation: cardPopIn 0.5s var(--ease-out-smooth) both;
}

/* 为 9 条社交链接设置阶梯延迟 */
.social-links > .link-item:nth-child(1) { animation-delay: 0.30s; }
.social-links > .link-item:nth-child(2) { animation-delay: 0.35s; }
.social-links > .link-item:nth-child(3) { animation-delay: 0.40s; }
.social-links > .link-item:nth-child(4) { animation-delay: 0.45s; }
.social-links > .link-item:nth-child(5) { animation-delay: 0.50s; }
.social-links > .link-item:nth-child(6) { animation-delay: 0.55s; }
.social-links > .link-item:nth-child(7) { animation-delay: 0.60s; }
.social-links > .link-item:nth-child(8) { animation-delay: 0.65s; }
.social-links > .link-item:nth-child(9) { animation-delay: 0.70s; }

/* 4. 交互加固：链接项悬停动效 */
.link-item {
  transition: all 0.3s var(--ease-out-smooth) !important;
  cursor: default;
}

.link-item:hover {
  transform: translateX(10px) !important; /* 保持你原本的向右位移设计，但使用平滑曲线 */
  background-color: var(--el-color-primary-light-9) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* 链接文字点击时的反馈 */
.social-link:active {
  opacity: 0.7;
  transform: scale(0.98);
}


/* =========================================
   Settings Form & Items Advanced Motion
   ========================================= */

/* 1. 表单容器整体：柔和滑入 */
.settings-form {
  animation: pageSlideFadeIn 0.6s var(--ease-out-smooth) both;
}

/* 2. 工具项卡片：Q弹进场 */
.settings-form .tool-item {
  animation: cardPopIn 0.6s var(--ease-out-back) both;
  transition: all 0.3s var(--ease-out-smooth) !important;
}

/* 3. 内容区 (tool-content)：呼吸感进场 */
.tool-content {
  animation: formContentSlideIn 0.5s var(--ease-out-smooth) both;
  animation-delay: 0.1s; /* 稍微晚于表头出现 */
}

@keyframes formContentSlideIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* 4. 核心：表单项 (el-form-item) 的序列化瀑布流 */
/* 我们让每一个输入框行都有一个细微的阶梯式延迟 */
.settings-form .el-form-item {
  animation: cardPopIn 0.5s var(--ease-out-smooth) both;
}

.settings-form .el-form-item:nth-child(1) { animation-delay: 0.15s; }
.settings-form .el-form-item:nth-child(2) { animation-delay: 0.20s; }
.settings-form .el-form-item:nth-child(3) { animation-delay: 0.25s; }
.settings-form .el-form-item:nth-child(4) { animation-delay: 0.30s; }
.settings-form .el-form-item:nth-child(n+5) { animation-delay: 0.35s; }

/* 5. 提示框 (el-alert) 进场优化 */
.settings-form .el-alert {
  animation: cardPopIn 0.5s var(--ease-out-smooth) both;
  animation-delay: 0.4s; /* 最后出现提示，作为收尾 */
}

/* 6. 物理交互增强：输入框聚焦时的微位移 */
.full-width-input .el-input__wrapper {
  transition: all 0.3s var(--ease-out-smooth) !important;
}

.full-width-input .el-input__wrapper.is-focus {
  transform: translateX(4px); /* 聚焦时向右微移，产生“被选中”的指向感 */
  box-shadow: -4px 0 0 var(--el-color-primary), /* 左侧侧边条线 */
              var(--el-box-shadow-light) !important;
}

/* 7. 物理反馈：点击整个工具项时的反馈 */
.tool-item:hover {
  border-color: var(--el-color-primary-light-7) !important;
  background-color: color-mix(in srgb, var(--el-color-primary) 2%, var(--el-bg-color)) !important;
}


/* =========================================
   Dashboard Adaptive Centering (The "Perfect" Fix)
   ========================================= */

/* 1. 主容器：负责滚动和基础对齐 */
.dashboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* 🌟 核心：不要使用 justify-content: center，否则会导致溢出裁剪 */
  justify-content: flex-start; 
  
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  
  /* 给予一个顶部和底部的最小安全间距，防止顶到头 */
  padding: 40px 20px 60px 20px !important;
  box-sizing: border-box;
  
  /* 平滑滚动 */
  scroll-behavior: smooth;
}

/* 2. Hero 区域：通过 margin-top: auto 实现自适应垂直居中 */
.dashboard-hero {
  width: 100%;
  max-width: 760px;
  flex-shrink: 0;
  
  /* 🌟 核心魔法：
     1. margin-top: auto 会自动吃掉顶部的所有剩余空间
     2. 配合下方的 margin-bottom: auto，会让整个内容组在有空间时完美居中
     3. 设定一个最小间距，确保扩展极多时，对话框离顶部还有一段距离 */
  margin-top: auto; 
  margin-bottom: 24px;
  
  /* 动画保持 */
  animation: cardPopIn 0.7s var(--ease-out-smooth) both;
  animation-delay: 0.1s;
}

/* 3. 建议卡片网格：通过 margin-bottom: auto 配合 Hero 实现上下平分空间 */
.guide-grid {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  
  /* 🌟 核心：吃掉底部剩余空间 */
  margin-bottom: auto; 
  
  height: auto;
}

/* 4. 优化：如果屏幕太矮（比如手机横屏或调小窗口），手动设置一个更小的顶部边距 */
@media (max-height: 500px) {
  .dashboard-hero {
    margin-top: 10px !important;
  }
}

/* 5. 滚动条美化 (Mac 风格隐身滚动条) */
.dashboard-container::-webkit-scrollbar {
  width: 5px;
}
.dashboard-container::-webkit-scrollbar-track {
  background: transparent;
}
.dashboard-container::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.2);
  border-radius: 10px;
}

/* =========================================
   🚨 修复：卡片防抖与交互稳定性优化
   ========================================= */

/* 1. 悬停 (Hover) 优化：取消缩放，仅保留极其轻微的上浮，防止误触 */
.provider-card:hover, 
.guide-card:hover, 
.extension-card:hover, 
.vendor-card:hover, 
.tool-item:hover,
.market-link-banner:hover {
  transform: translateY(-2px) !important; /* 取消 scale(1.01)，减少上浮幅度到 2px */
}

/* 2. 点击 (Active) 优化：彻底取消容器卡片的物理缩放 */
/* 仅保留纯粹的按钮或允许整体缩放的非复合组件 */
.provider-card:active, 
.guide-card:active, 
.extension-card:active, 
.vendor-card:active, 
.tool-item:active,
.market-link-banner:active {
  transform: none !important; /* 彻底禁止卡片在点击时形变 */
}

/* 3. 针对普通按钮的点击反馈：减小缩放幅度，确保焦点不偏移 */
.el-button:active {
  transform: scale(0.98) !important; /* 从 0.96 改为 0.98，保证微小点击感的同时不移位 */
}

/* 4. 卡片内右上角/操作区按钮的防抖隔离 */
.card-actions .el-button:hover,
.btn-top-right .el-button:hover {
  transform: none !important; /* 悬停卡片内按钮时不放大 */
  background-color: var(--el-fill-color-dark) !important; /* 用颜色代替物理形变 */
}

.card-actions .el-button:active,
.btn-top-right .el-button:active {
  transform: scale(0.95) !important; /* 按钮自身的点击反馈独立，不影响父级卡片 */
}


/* =========================================
   🚨 修复：移除动态列表的长延迟，解决添加卡片时的卡顿感
   ========================================= */

/* 彻底取消所有网格/列表元素的 CSS 排队等待时间 */
/* 让元素在 Vue 渲染出 DOM 的瞬间立刻播放弹出动画，实现 0 延迟响应 */
.provider-grid > div, 
.guide-grid > div, 
.plugins-grid > div,
.text-list > .file-item, 
.image-grid > .image-item, 
.video-grid > .video-item,
.social-links > .link-item,
.settings-form .el-form-item {
  animation-delay: 0s !important; 
}

/* 稍微缩短一下卡片的入场动画时间，让它感觉更干脆、响应更迅速 */
@keyframes cardPopIn {
  0% { 
    opacity: 0; 
    transform: translateY(15px) scale(0.95); /* 缩小了起始位移，减少浮夸感 */
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}


/* =========================================
   Task Center Premium Styles
   ========================================= */

/* 布局基础 */
.task-center-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.premium-header {
    background: color-mix(in srgb, var(--el-bg-color) 80%, transparent);
    backdrop-filter: blur(10px);
    padding: 12px 16px;
    border-bottom: 1px solid var(--el-border-color-lighter);
}

.immersive-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* 详情摘要卡片 */
.summary-card-premium {
    background: var(--el-bg-color);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
}

.summary-card-premium .card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.summary-card-premium h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
}

.mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--el-color-primary);
    background: color-mix(in srgb, var(--el-color-primary) 10%, transparent);
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* 列表卡片 (对齐 extension-card) */
.task-card-premium {
    background: var(--el-bg-color) !important;
    border: 1px solid var(--el-border-color-lighter) !important;
    border-radius: 14px !important;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-back);
    position: relative;
    overflow: hidden;
}

.task-card-premium::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: var(--el-color-primary);
    opacity: 0.7;
}

.task-card-premium:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--el-color-primary-light-5) !important;
}

.task-card-premium .task-title {
    margin: 8px 0;
    font-size: 14px;
    color: var(--el-text-color-primary);
}

.task-card-premium .task-desc {
    font-size: 12px;
    color: var(--el-text-color-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* 日志气泡 (仿微信/iMessage 对话) */
.log-bubble {
    background: var(--el-bg-color-page);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 12px;
    padding: 4px 12px !important; /* 压缩 markdown padding */
    font-size: 13px !important;
}

/* 结果浏览器布局 */
.result-browser-layout {
    display: flex;
    height: 70vh;
    margin: -24px -28px; /* 抵消 el-dialog 默认内边距 */
}

.result-nav-sidebar {
    width: 200px;
    background: var(--el-bg-color-page);
    border-right: 1px solid var(--el-border-color-lighter);
    padding: 15px 10px;
}

.nav-version-item {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.nav-version-item.active {
    background: var(--el-color-primary);
    color: #fff !important;
}

.nav-version-item.active .v-time { color: rgba(255,255,255,0.8); }

.result-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content-toolbar {
    padding: 10px 20px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 绝对居中的空状态 */
.empty-state-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
}

.empty-icon-glow {
    font-size: 50px;
    color: var(--el-color-primary);
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(var(--el-color-primary-rgb), 0.3));
}

.empty-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.empty-desc { color: var(--el-text-color-secondary); font-size: 13px; margin-bottom: 24px; max-width: 200px; }

/* ============================================================
   🚀 对话历史侧边栏 - 完整功能修复版
   ============================================================ */

/* 1. 侧边栏主容器 */
.chat-history-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    height: 100% !important;
    background-color: var(--el-bg-color-page) !important;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
    transition: background-color 0.3s;
}

/* 2. 顶部新建按钮 */
.chat-history-sidebar .history-header { padding: 16px 16px 8px 16px; }
.chat-history-sidebar .new-chat-btn {
    width: 100%; height: 44px !important; border-radius: 22px !important;
    display: flex !important; justify-content: center !important; align-items: center !important;
    gap: 8px; font-weight: 600 !important;
    background-color: var(--el-bg-color) !important;
    border: 1px solid var(--el-border-color) !important;
    color: var(--el-text-color-primary) !important;
}
.chat-history-sidebar .new-chat-btn:hover {
    background-color: color-mix(in srgb, var(--el-color-primary) 10%, var(--el-bg-color)) !important;
    border-color: var(--el-color-primary) !important;
    color: var(--el-color-primary) !important;
}

/* 3. 搜索行：保持按钮紧凑 */
.chat-history-sidebar .history-search-row {
    display: flex; align-items: center; gap: 8px;
    padding: 0 16px 12px 16px;
}
.chat-history-sidebar .history-search-input { 
  flex: 1; 
  min-width: 0;
  color: var(--el-bg-color)!important;
 }
.chat-history-sidebar .history-search-input .el-input__wrapper {
    background-color: var(--el-bg-color) !important;
    box-shadow: none !important; border-radius: 10px !important;
}

.chat-history-sidebar .history-quick-tools {
    display: flex; align-items: center; gap: 4px !important; flex-shrink: 0;
}
.chat-history-sidebar .quick-tool-btn.el-button {
    background: transparent !important; border: none !important;
    color: var(--el-text-color-secondary) !important;
    margin: 0 !important; width: 30px !important; height: 30px !important;
    padding: 0 !important;
}
.chat-history-sidebar .quick-tool-btn:hover {
    background-color: var(--el-fill-color) !important;
    color: var(--el-color-primary) !important;
}

/* 4. 列表项与单条删除按钮 */
.chat-history-sidebar .history-list-container { flex: 1; overflow-y: auto; padding: 0 8px 20px 8px; }

.chat-history-sidebar .history-item-row {
    display: flex; align-items: center; 
    padding: 10px 12px; margin: 2px 4px; border-radius: 10px;
    cursor: pointer; color: var(--el-text-color-regular);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; /* 方便删除按钮定位 */
}

.chat-history-sidebar .history-item-row:hover {
    background-color: var(--el-fill-color-light) !important;
}

.chat-history-sidebar .history-item-row.active {
    background-color: color-mix(in srgb, var(--el-color-primary) 12%, var(--el-bg-color)) !important;
    color: var(--el-color-primary);
    font-weight: 600;
}

.chat-history-sidebar .item-icon { font-size: 14px; margin-right: 12px; opacity: 0.6; }
.chat-history-sidebar .item-title { flex: 1; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px; }

/* ✨ 单条记录删除按钮样式 */
.chat-history-sidebar .item-delete-btn {
    position: absolute; right: 10px;
    width: 26px !important; height: 26px !important;
    padding: 0 !important; border: none !important;
    background: transparent !important;
    color: var(--el-text-color-placeholder) !important;
    opacity: 0; /* 默认隐藏 */
    transition: all 0.2s ease;
}

.chat-history-sidebar .history-item-row:hover .item-delete-btn {
    opacity: 1; /* 悬停显示 */
}

.chat-history-sidebar .item-delete-btn:hover {
    color: var(--el-color-danger) !important;
    background-color: color-mix(in srgb, var(--el-color-danger) 10%, transparent) !important;
}

/* 5. 全主题深色适配补丁 */
[data-theme="dark"] .chat-history-sidebar .el-input__inner,
[data-theme="midnight"] .chat-history-sidebar .el-input__inner,
[data-theme="neon"] .chat-history-sidebar .el-input__inner { background: transparent !important; color: var(--el-text-color-primary) !important; }

[data-theme="dark"] .chat-history-sidebar .el-input__wrapper.is-focus,
[data-theme="midnight"] .chat-history-sidebar .el-input__wrapper.is-focus,
[data-theme="neon"] .chat-history-sidebar .el-input__wrapper.is-focus { background-color: var(--el-bg-color) !important; }

/* 底部按钮切换修正 */
.history-btn:hover { background-color: var(--el-fill-color-light) !important; color: var(--el-color-primary) !important; }

/* 6. 书签手柄保护结构 */
.chat-main-body {
    flex: 1; display: flex; min-width: 0; height: 100%;
    position: relative; overflow: visible !important; 
}
.browser-toggle-handle, .browser-toggle-handle--left { z-index: 1000 !important; }

/* ============================================================
   🌟 完美终极修复：丝滑双向展开/收起动画
   ============================================================ */

/* 1. 恢复正常的从左到右流式布局 */
.chat-main-body {
    flex: 1; display: flex; min-width: 0; height: 100%;
    position: relative; overflow: visible !important; 
    justify-content: flex-start !important; 
}

/* 2. 强制覆盖 v-show，支持 CSS 动画 */
.chat-area, .side-panel {
    display: flex !important; 
    overflow: hidden;
    /* 仅对 width, margin, opacity 进行过渡，千万不要去过渡 flex 属性 */
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                margin 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.2s ease !important;
}

/* 拖拽时必须禁用动画，保证跟手不卡顿 */
.chat-wrapper.resizing .chat-area,
.chat-wrapper.resizing .side-panel {
    transition: none !important;
}

/* 3. 定义收起状态：仅用 width: 0 触发动画 */
.chat-area.collapsed,
.side-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    /* 🚨 核心修复：我已经删掉了 flex: 0 0 0，防止瞬间坍塌导致瞬移！ */
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    white-space: nowrap; 
}

/* 4. 修复展开时的宽度挤压与完美向左吸附 */
.chat-wrapper.collapsed-left .side-panel {
    margin-left: 12px !important;
    /* 扣除左右各 12px 的 margin = 24px，保证变宽时刚好填满。
       左侧平滑缩小，右侧平滑变宽，总宽度恒定 100%，视觉上完美向左生长！ */
    width: calc(100% - 24px) !important;
}

/* 👇 彻底移除多余的 12px 留白，使其完美贴合右侧边缘 */
.chat-wrapper.collapsed-right .chat-area {
    margin-right: 0 !important;
    width: 100% !important;
}

/* ============================================================
   🚀 历史对话侧边栏：丝滑展开/收起过渡动画
   ============================================================ */

/* 1. 侧边栏主容器 - 添加动画基础属性 */
.chat-history-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    height: 100% !important;
    background-color: var(--el-bg-color-page) !important;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
    
    /* ✨ 核心修复 1：强制 display 始终为 flex，覆盖 v-show 的 display: none */
    display: flex !important;
    overflow: hidden !important; /* 关键：尺寸缩小时裁剪内部内容 */
    
    /* ✨ 核心修复 2：加入宽度和透明度的弹性过渡动画 (曲线与右侧面板保持一致) */
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                border-right-width 0.35s ease,
                opacity 0.25s ease,
                background-color 0.3s !important;
}

/* 2. 定义收起状态 - 拦截 Vue 的 v-show="false" */
/* 当点击隐藏时，我们用 CSS 截获 display:none，并将其转化为尺寸和透明度的动画 */
body.has-custom-bg .chat-history-sidebar[style*="display: none"],
.chat-history-sidebar[style*="display: none"] {
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    border-right-width: 0 !important; /* 去掉边框，防止完全收起时残留一条线 */
    margin: 0 !important;             /* 强力清除折叠/隐藏状态下的外边距，彻底解决偏右问题 */
    padding: 0 !important;            /* 清除内边距 */
    pointer-events: none;             /* 收起后禁止点击穿透 */
}

/* 3. 防挤压保护：防止收起过程中，内部文字和按钮被挤压换行导致鬼畜闪烁 */
.chat-history-sidebar .history-header,
.chat-history-sidebar .history-search-row,
.chat-history-sidebar .history-list-container {
    /* 强制内部容器保持 280px 原宽，这样在父容器变窄时，它们只会像“拉窗帘”一样被裁剪，而不会变形 */
    width: 280px !important; 
    box-sizing: border-box;
}


/* ============================================================
   🚀 扩展内页：悬浮返回/关闭按钮 (移动唤醒，静止消失)
   ============================================================ */

/* 外层容器 */
.ext-iframe-wrapper {
    position: relative; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    border-radius: 16px;
}

/* 边缘感应区：不挡住中间网页的点击，只感应左侧和顶部 20px */
.ext-edge-trigger {
    position: absolute;
    z-index: 998;
}
.ext-edge-trigger.top {
    top: 0; left: 0; width: 100%; height: 20px; 
}
.ext-edge-trigger.left {
    top: 0; left: 0; width: 20px; height: 100%; 
}

/* 悬浮按钮基础样式 */
.ext-floating-close-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1000;
    width: 36px;
    height: 36px;
    border-radius: 50%; 
    
    /* 磨砂玻璃质感 */
    background-color: color-mix(in srgb, var(--el-bg-color) 70%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--el-border-color-light);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--el-text-color-primary);
    font-size: 16px;
    
    /* 默认隐藏状态 (向左侧微微缩回) */
    opacity: 0;
    transform: translateX(-15px) scale(0.9);
    pointer-events: none; /* 隐藏时不可点击，防止误触 */
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 激活状态 (鼠标移动时 JS 加上 is-active 类) */
.ext-floating-close-btn.is-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto; 
}

/* 悬停与点击反馈 */
.ext-floating-close-btn:hover {
    background-color: var(--el-color-primary);
    color: #ffffff;
    border-color: var(--el-color-primary);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(var(--el-color-primary-rgb), 0.35);
}

.ext-floating-close-btn:active {
    transform: scale(0.92);
    transition-duration: 0.1s;
}

/* iframe 圆角适配 */
.side-panel-iframe {
    width: 100%; 
    height: 100%;
    border-radius: 16px;
}


/* =========================================
   供应商过滤与搜索区域 (无外框、占满整行版)
   ========================================= */

/* 1. 工具栏外层容器：全宽水平行 */
.vendor-filter-tools {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  padding: 0;
}

/* 2. 搜索框深度美化：胶囊悬浮风格 */
.search-input {
  flex: 1;
  max-width: 320px;
}

.search-input .el-input__wrapper {
  border-radius: 20px !important; 
  background-color: var(--el-bg-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), 0 0 0 1px transparent inset !important;
  border: 1px solid var(--el-border-color-light) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  padding: 4px 16px !important;
}

.search-input .el-input__wrapper:hover {
  border-color: var(--el-color-primary-light-5) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px);
}

.search-input .el-input__wrapper.is-focus {
  border-color: var(--el-color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--el-color-primary) 15%, transparent),
              0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

/* 3. 分类标签组：Mac/iOS 风格的分段控制器 */
.category-tabs {
  flex-shrink: 0;
  /* 只保留标签组自身的底槽背景 */
  background-color: color-mix(in srgb, var(--el-text-color-primary) 6%, transparent);
  padding: 4px;
  border-radius: 14px;
  display: inline-flex;
}

.category-tabs .el-radio-button__inner {
  border: none !important;
  background: transparent !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--el-text-color-regular);
  font-weight: 500;
  padding: 6px 18px;
  font-size: 13px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-tabs .el-radio-button:hover .el-radio-button__inner {
  color: var(--el-color-primary);
}

.category-tabs .el-radio-button.is-active .el-radio-button__inner {
  background-color: var(--el-bg-color) !important; 
  color: var(--el-color-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important; 
  transform: scale(1);
}

/* 4. 无结果时的空状态插画对齐优化 */
.vendor-select-list .el-empty {
  padding: 40px 0;
  --el-empty-text-color: var(--el-text-color-secondary);
}

/* 5. 移动端自适应布局压缩 */
@media (max-width: 680px) {
  .vendor-filter-tools {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .search-input {
    max-width: 100%;
  }
  
  .category-tabs {
    width: 100%;
    display: flex;
  }
  
  .category-tabs .el-radio-button {
    flex: 1;
  }
  
  .category-tabs .el-radio-button__inner {
    width: 100%;
    padding: 8px 0;
  }
}


/* =========================================
   Minimalist Process Blocks (Linear / Vercel Style)
   极致克制：0阴影，0嵌套背景，极紧凑间距
   ========================================= */

/* 1. 修改流程块的基础间距 */
.sap-process-block {
    background-color: var(--el-fill-color-light); 
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    
    /* 🌟 修改这里：原来是 8px 0，现在改为 14px 0 (稍微增加一点点上下呼吸感) */
    margin: 14px 0; 
    
    overflow: hidden;
    font-family: var(--el-font-family);
    box-shadow: none; 
}

/* 2. 新增：相邻流程块防散落 */
/* 当两个流程块紧挨着时（例如“调用工具”下面紧接着“工具结果”），保持它们之间的紧凑感，避免被 14px 撑得太开 */
.sap-process-block + .sap-process-block {
    margin-top: 6px;
}

/* 3. 新增：给纯文本层一点保护间距 */
/* 防止内部的 Markdown 文本 `<p>` 标签的外边距被吞掉导致贴边 */
.a2ui-text-wrapper {
    margin: 4px 0;
}

/* ----------------------------------------------------
   修复首尾元素的间距叠加问题
---------------------------------------------------- */
/* 1. 如果流程块是气泡里的第一个元素，去除顶部外边距，完美贴合气泡边缘 */
.message-blocks-container > .sap-process-block:first-child,
.markdown-body > .sap-process-block:first-child {
    margin-top: 0 !important;
}

/* 2. 如果流程块是气泡里的最后一个元素，去除底部外边距 */
.message-blocks-container > .sap-process-block:last-child,
.markdown-body > .sap-process-block:last-child {
    margin-bottom: 0 !important;
}

/* (顺便补充) 如果纯文本是第一个或最后一个元素，也确保它们不产生多余缝隙 */
.message-blocks-container > .a2ui-text-wrapper:first-child {
    margin-top: 0 !important;
}
.message-blocks-container > .a2ui-text-wrapper:last-child {
    margin-bottom: 0 !important;
}

/* --- 极简头部 --- */
.sp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 极小 padding */
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--el-text-color-secondary);
    user-select: none;
}

/* 头部小图标：降低不透明度，不抢戏 */
.sp-header i {
    font-size: 12px;
    opacity: 0.8;
}

/* 头部特殊强调文字 (如工具名) */
.sp-header span {
    color: var(--el-text-color-primary);
    font-family: 'Menlo', 'Monaco', monospace;
}

/* --- 取消套娃：内容区不再有自己的底色和边框 --- */
.sp-content {
    /* 顶部 0 padding，让它和 header 贴紧 */
    padding: 0 12px 10px 12px;
    font-size: 13px;
    color: var(--el-text-color-regular);
    line-height: 1.5;
}

/* 移除推理文本中无用的段落边距 */
.sp-content p { margin: 0 0 6px 0; }
.sp-content p:last-child { margin: 0; }

/* 代码/日志文本：彻底融于背景 */
pre.sp-code, .sp-code {
    margin: 0;
    padding: 0; /* 0 Padding，由外层父级提供边距 */
    background: transparent !important;
    border: none !important;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    color: var(--el-text-color-secondary);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 250px;
    overflow-y: auto;
}

/* 如果 pre 本身就是子级，补齐它应有的底边距 */
pre.sp-content.sp-code {
    padding: 0 12px 10px 12px;
}

/* 内滚动条极简化 */
.sp-code::-webkit-scrollbar { width: 4px; height: 4px; }
.sp-code::-webkit-scrollbar-thumb { background: var(--el-border-color); border-radius: 2px; }

/* --- 5 种状态的高级单色点缀 (莫兰迪色系) --- */
.type-reasoning .sp-header i { color: #8b5cf6; } /* 柔紫 */
.type-call .sp-header i      { color: #3b82f6; } /* 柔蓝 */
.type-result .sp-header i    { color: #10b981; } /* 柔绿 */
.type-error .sp-header i     { color: #ef4444; } /* 柔红 */
.type-approval .sp-header i  { color: #f59e0b; } /* 柔橙 */

/* --- 权限审批卡片特殊适配 --- */
.type-approval .sp-text {
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--el-text-color-regular);
}

.type-approval .sp-text span {
    font-family: 'Menlo', 'Monaco', monospace;
    color: var(--el-text-color-primary);
    font-weight: 600;
}

/* 只有审批参数为了区分文本，给了一层微弱的内嵌框 */
.type-approval .sp-code-box {
    margin: 0 0 12px 0;
    background-color: var(--el-bg-color); /* 凹陷感 */
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--el-border-color-lighter);
    font-family: 'Menlo', 'Monaco', monospace;
    font-size: 12px;
    color: var(--el-text-color-secondary);
    white-space: pre-wrap;
    max-height: 150px;
    overflow-y: auto;
}

/* --- 极简交互按钮 --- */
.sp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.sp-btn {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--el-font-family);
}

/* 幽灵按钮 (拒绝) */
.sp-btn.ghost { color: var(--el-text-color-secondary); }
.sp-btn.ghost:hover { color: var(--el-color-danger); background: var(--el-fill-color-darker); }

/* 边框按钮 (一直允许) */
.sp-btn.outline { border-color: var(--el-border-color); color: var(--el-text-color-regular); background: var(--el-bg-color); }
.sp-btn.outline:hover { border-color: var(--el-color-primary); color: var(--el-color-primary); }

/* 实心按钮 (允许一次) */
.sp-btn.primary { background: var(--el-color-primary); color: #fff; border-color: var(--el-color-primary); }
.sp-btn.primary:hover { opacity: 0.85; }

.sp-btn:active { transform: scale(0.96); }

/* 暗色模式防色差 */
[data-theme="dark"] .sap-process-block, 
[data-theme="midnight"] .sap-process-block,[data-theme="neon"] .sap-process-block {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

/* 1. 在原来的 .sap-process-block 中，确保有 transition 属性 */
.sap-process-block {
    background-color: var(--el-fill-color-light); 
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    margin: 14px 0; 
    overflow: hidden;
    font-family: var(--el-font-family);
    box-shadow: none; /* 默认状态保持干净扁平 */
    
    /* 🌟 新增：添加平滑的物理弹性过渡 */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* 2. 🌟 新增：极其克制的悬浮与阴影效果 */
.sap-process-block:hover {
    transform: translateY(-1px); /* 只向上浮动 1 像素，避免眼花 */
    /* 双层柔和阴影：底层提供边缘轮廓，外层提供环境光柔和弥散，透明度极低 (0.04) */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02); 
    border-color: var(--el-border-color); /* 边框稍微加深一个色阶，让边缘更锐利 */
}

/* 3. 🌟 新增：暗色主题防脏补丁 */
/* 暗色背景下阴影需要深一点才能看出来，边框给一点泛白感 */[data-theme="dark"] .sap-process-block:hover, 
[data-theme="midnight"] .sap-process-block:hover,
[data-theme="neon"] .sap-process-block:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
}


/* =========================================
   极致版：书签多标签系统 (上下对齐 + 极小精致)
   ========================================= */

/* 1. 侧边栏整体：向上提拉对齐，并向下补偿高度 */
.side-panel {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  
  /* 🌟 对齐魔法：向上拉 14px 保持顶边平行 */
  margin: -14px 12px 12px 0 !important; 
  
  /* 🌟 补偿魔法：增加 14px 高度，把提上去的底边“拽”回来，实现底部平行 */
  height: calc(100% + 14px) !important; 
  
  overflow: visible !important; 
  align-items: stretch !important;
  justify-content: flex-start !important;
  display: flex !important;
  flex-direction: column;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. 极简书签栏外层：不再需要很高的生长空间 */
.vscode-tabs-header {
  display: flex;
  align-items: flex-end; 
  gap: 3px;              /* 间距更精密 */
  padding-left: 14px;    
  margin-bottom: -1px;   
  z-index: 10;
  position: relative;
  background: transparent !important;
  min-height: 24px;      /* 🌟 极低的高度，减少干扰 */
  overflow-x: auto;
  scrollbar-width: none;
}
.vscode-tabs-header::-webkit-scrollbar { display: none; }

/* 3. 极小精致书签本体 */
.vscode-tab {
  display: flex;
  align-items: center;
  /* 🌟 极致尺寸：非激活状态仅 20px 高 */
  height: 20px; 
  padding: 0 8px;
  
  background: var(--el-bg-color);
  color: var(--el-text-color-regular);
  border: 1px solid var(--el-border-color-lighter);
  border-bottom: none;
  border-radius: 6px 6px 0 0; /* 圆角更细腻 */
  
  /* 文字更小，更像专业工具 */
  font-size: 11px; 
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 60px;
  max-width: 120px;
}

/* 4. 激活态书签：仅微微拔高，与面板无缝融合 */
.vscode-tab.active {
  background-color: var(--el-bg-color); 
  color: var(--el-color-primary);
  font-weight: 600;
  /* 🌟 激活态高度控制在 26px，既有区分度又不突兀 */
  height: 26px; 
  border-color: var(--el-border-color-lighter);
  
  /* 极细的顶部装饰线 */
  box-shadow: inset 0 2px 0 var(--el-color-primary); 
  z-index: 2;
  padding-bottom: 1px;
}

/* 5. 内部元素尺寸压缩 */
.vscode-tab .tab-icon { 
  font-size: 11px; 
  opacity: 0.7; 
}
.vscode-tab .ext-img-icon { 
  width: 12px; 
  height: 12px; 
  border-radius: 2px; 
}
.vscode-tab .tab-title {
  margin-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* 6. 极致微小的关闭按钮 */
.vscode-tab .tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px; 
  height: 14px;
  border-radius: 3px;
  font-size: 9px;
  margin-left: 4px;
  opacity: 0;
}
.vscode-tab:hover .tab-close,
.vscode-tab.active .tab-close { opacity: 1; }

.vscode-tab .tab-close:hover {
  background-color: var(--el-fill-color-darker);
  color: var(--el-color-danger);
}

/* 7. 白色主体面板容器：恢复 100% 宽度，并在提拉后依然稳健 */
.side-panel-body-container {
  background-color: var(--el-bg-color); 
  border-radius: 12px !important; 
  border: 1px solid var(--el-border-color-lighter);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); /* 阴影更轻柔，符合精致感 */
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
  position: relative;
  z-index: 1;
  width: 100% !important;
}

/* 修复扩展列表里的卡片标题，防止因为精致化导致按钮覆盖文字 */
.extension-info h3.ext-title {
  padding-right: 90px !important;
  font-size: 14px !important; /* 字体稍微调小一点 */
}

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

  .chat-area-layout {
    display: block;
  }

  .chat-history-panel,
  .chat-history-divider {
    display: none;
  }
  
  /* 完全清除左右缩进带来的偏左问题 */
  .chat-wrapper.collapsed-right .chat-area,
  .chat-wrapper.collapsed-left .side-panel,
  .chat-area,
  .side-panel {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  .chat-main-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ============================================================
   桌面端侧边栏截断 & 展开按钮靠右问题
   ============================================================ */

/* 1. 撤销上一个补丁对桌面端的误伤 (解除全局锁定) */
@media (min-width: 769px) {
  html, body {
    position: static !important;
    height: 100vh !important;
  }
  .el-main, .chat-wrapper {
    overflow: visible !important;
  }
}

/* 2. 修复侧边栏顶部的书签被截断：放弃负边距，采用安全内部排版 */
.side-panel {
  margin: 12px 12px 12px 0 !important; /* 去掉之前的负边距，回归正常 */
  height: calc(100% - 24px) !important; /* 恢复正常高度 */
  overflow: visible !important; 
}

.vscode-tabs-header {
  margin-top: 0 !important; 
  margin-bottom: -1px !important; /* 紧紧贴合下方主体面板 */
}

/* 保证收起时严格隐藏，解决视觉残留 */
.side-panel.collapsed {
  overflow: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  margin: 0 !important;
}

/* 3. 修复侧边栏收起时的“书签按钮”（展开把手）过于靠边的问题 */
.resizer-collapsed-right {
  right: 0px !important; /* 离开屏幕绝对右边缘，预留呼吸空间 */
}
.resizer-collapsed-left {
  left: 0px !important;  /* 左侧也同理 */
}

/* 既然离开了边缘，干脆把展开按钮升级为更圆润的“悬浮胶囊” */
.browser-toggle-handle, 
.browser-toggle-handle--left {
  border-radius: 12px !important; /* 变成全圆角 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important; /* 增加悬浮阴影 */
}

/* ============================================================
   📱 移动端防滚动 (限制仅在手机端生效，绝对安全)
   ============================================================ */
@media (max-width: 768px) {
  html, body {
    height: 100% !important;
    height: 100dvh !important;
    width: 100vw !important;
    position: fixed !important; /* 仅在手机端锁死屏幕，消灭橡皮筋拖拽 */
    overflow: hidden !important;
  }
  .el-main, .chat-wrapper {
    overflow: hidden !important; 
  }
  .messages-container, .side-panel-scroll, .history-list-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch; /* 保持 iOS 丝滑滚动体验 */
  }
}


.page {
  height: 100%;
  overflow-y: auto;            /* 保持可滚动 */
  scrollbar-width: none;       /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;    /* IE/Edge 隐藏滚动条 */
}
.page::-webkit-scrollbar {
  display: none;               /* Chrome/Safari 隐藏滚动条 */
}

.chat-area,
.side-panel {
  /* 将原本写死的 flex-shrink: 0 改为 1，允许 Flexbox 自动消化超出的那 28px */
  flex-shrink: 1 !important; 
}


/* 折叠的工具块：去掉内容，标题可点击，保持原块样式 */
.sap-process-block.collapsed-tool-block {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0; /* 去除内边距，只靠 sp-header 撑起 */
}
.sap-process-block.collapsed-tool-block > .sp-header {
    padding: 8px 12px;
    user-select: none;
}
.sap-process-block.collapsed-tool-block:hover {
    border-color: var(--el-color-primary-light-5);
}

/* 确保侧边栏内的卡片有良好的显示 */
.tool-detail-view .extension-card {
    background-color: var(--el-bg-color) !important;
    border: 1px solid var(--el-border-color-lighter) !important;
    border-radius: 12px !important;
}


/* 侧边栏工具详情容器 */
.tool-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tool-detail-view .sap-process-block {
    box-shadow: none !important; /* 去掉可能的多余阴影 */
    background: var(--el-bg-color) !important;
}

.tool-detail-view .sp-content {
    font-size: 13px;
    line-height: 1.6;
}


/* 强制思考块内容字号，避免 Markdown 嵌套导致字体缩小 */
.type-reasoning .sp-content {
    font-size: 13px !important;          /* 固定字号 */
    line-height: 1.6;
}

.type-reasoning .sp-content * {
    font-size: inherit !important;       /* 所有子元素继承父级字号 */
}

.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0;
    max-width: 100%;
}

/* =========================================
   固定在侧边栏面板的导航按钮（不随内容滚动）
   ========================================= */

/* 1. 浮动返回按钮 - 左上角 */
.floating-back-btn {
  position: absolute;        /* 相对于 .side-panel-scroll 定位 */
  top: 12px;
  left: 12px;
  z-index: 1000;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  
  /* 磨砂玻璃质感 */
  background-color: color-mix(in srgb, var(--el-bg-color) 75%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--el-border-color-light);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--el-text-color-primary);
  font-size: 14px;
  
  opacity: 0.85;
  pointer-events: auto;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-back-btn:hover {
  opacity: 1;
  background-color: var(--el-color-primary);
  color: #ffffff;
  border-color: var(--el-color-primary);
  transform: translateX(-2px) scale(1.05);
  box-shadow: 0 4px 16px rgba(var(--el-color-primary-rgb), 0.35);
}

.floating-back-btn:active {
  transform: translateX(-2px) scale(0.92);
  transition-duration: 0.1s;
}

/* 2. 浮动操作按钮组 - 右上角 */
.floating-actions-group {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  display: flex;
  gap: 6px;
}

/* 单个浮动操作按钮 */
.floating-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  
  background-color: color-mix(in srgb, var(--el-bg-color) 75%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--el-border-color-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--el-text-color-secondary);
  font-size: 13px;
  
  opacity: 0.8;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-action-btn:hover {
  opacity: 1;
  background-color: var(--el-bg-color);
  color: var(--el-color-primary);
  border-color: var(--el-color-primary-light-5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.floating-action-btn:active {
  transform: translateY(0) scale(0.92);
  transition-duration: 0.1s;
}

/* 3. 暗色主题适配 */
[data-theme="dark"] .floating-back-btn,
[data-theme="midnight"] .floating-back-btn,
[data-theme="neon"] .floating-back-btn {
  background-color: color-mix(in srgb, var(--el-bg-color) 70%, transparent);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .floating-action-btn,
[data-theme="midnight"] .floating-action-btn,
[data-theme="neon"] .floating-action-btn {
  background-color: color-mix(in srgb, var(--el-bg-color) 70%, transparent);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 4. 确保侧边栏滚动容器支持固定定位 */
.side-panel-scroll {
  position: relative;   /* 作为浮动按钮的定位锚点 */
}

/* 5. 移动端适配 */
@media (max-width: 768px) {
  .floating-back-btn {
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  
  .floating-actions-group {
    top: 8px;
    right: 8px;
    gap: 4px;
  }
  
  .floating-action-btn {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
}

/* 代码块独立缩放：用 code-zoom 抵消父级的 app-zoom，
 * 使 pre.code-block 的最终缩放只跟随 --code-zoom。 */
pre.code-block {
  zoom: calc(var(--code-zoom, 1) / var(--app-zoom, 1));
}

/* 外观设置页：字体大小下拉框 + 重置按钮 */
.font-size-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}
.font-size-row .font-size-select {
  flex: 1;
  min-width: 0;
}
.font-size-row .font-size-reset {
  flex: 0 0 auto;
}

/* 外观设置页：代码块预览 */
.appearance-preview-label {
  margin-top: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--el-text-color-secondary, #909399);
  letter-spacing: 0.5px;
}
.appearance-preview-code {
  background: transparent;
  cursor: default;
}
.appearance-preview-code pre.code-block {
  margin: 0;
}

/* 抑制"包含代码预览的 tool-item"在悬停/点击时的卡片抬起与缩放，
 * 否则鼠标进入预览区会让整张卡片移动，影响阅读。 */
.tool-item:has(.appearance-preview-code) {
  cursor: default;
}
.tool-item:has(.appearance-preview-code):hover,
.tool-item:has(.appearance-preview-code):active {
  transform: none !important;
  box-shadow: none !important;
  background-color: var(--el-bg-color) !important;
  border-color: var(--bg-color) !important;
}


.docker-registry-switch {
  display: inline-flex;
  background-color: color-mix(in srgb, var(--el-text-color-primary) 6%, transparent);
  border-radius: 40px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 12px;
  transition: background-color 0.2s ease;

  .switch-option {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 20px;
    border-radius: 32px;
    cursor: pointer;
    color: var(--el-text-color-regular);
    background: transparent;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    white-space: nowrap;

    &:hover {
      color: var(--el-color-primary);
      background-color: color-mix(in srgb, var(--el-color-primary) 12%, transparent);
    }

    &.active {
      background: var(--el-bg-color);
      color: var(--el-color-primary);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
      font-weight: 600;

      [data-theme="dark"] &,
      [data-theme="midnight"] &,
      [data-theme="neon"] & {
        background: var(--el-bg-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      }
    }
  }

  @media (max-width: 480px) {
    .switch-option {
      padding: 5px 16px;
      font-size: 12px;
    }
  }
}

/* =========================================
   UI 模式重写：办公模式(DeepSeek) & 娱乐模式(QQ)
   ========================================= */

/* --- 1. 彻底清除外围包裹 ---
   当处于工作或娱乐模式时，强行脱掉外层的“大气泡”伪装 */
.assistant .message-content.mode-work,
.assistant .message-content.mode-entertainment {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* -----------------------------------------
   2. 办公模式 (Work Mode) - 专业无包裹
   ----------------------------------------- */
.mode-work .markdown-body {
    padding: 0 4px !important;
    font-size: 15px; 
    line-height: 1.7;
}

/* 过程块(思考、工具调用)极简化，变成左侧粗线指示 */
.mode-work .sap-process-block {
    background-color: transparent !important;
    border: none !important;
    border-left: 3px solid var(--el-border-color-darker) !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: none !important;
    padding-left: 12px !important;
    margin: 8px 0 !important;
}

.mode-work .sap-process-block:hover {
    transform: none !important; 
    border-left-color: var(--el-color-primary) !important;
}

/* -----------------------------------------
   3. 娱乐模式 (Entertainment Mode) - QQ独立多气泡
   ----------------------------------------- */

/* 让父容器使用 flex 列布局，确保拆分的气泡纵向排列且靠左 */
.mode-entertainment .stream-content,
.mode-entertainment .markdown-body > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
}

/* 🌟 核心魔法：只选择 Markdown 的第一层结构生成气泡 */
.mode-entertainment .stream-content > p,
.mode-entertainment .stream-content > pre,
.mode-entertainment .stream-content > ul,
.mode-entertainment .stream-content > ol,
.mode-entertainment .stream-content > blockquote,
.mode-entertainment .stream-content > table,
.mode-entertainment .markdown-body > div:first-child > p,
.mode-entertainment .markdown-body > div:first-child > pre,
.mode-entertainment .markdown-body > div:first-child > ul,
.mode-entertainment .markdown-body > div:first-child > ol,
.mode-entertainment .markdown-body > div:first-child > blockquote,
.mode-entertainment .markdown-body > div:first-child > table,
.mode-entertainment .sap-process-block.type-approval {
    
    /* 气泡背景和边框 */
    background-color: var(--el-bg-color) !important;
    border: 1px solid var(--el-border-color-lighter) !important;
    
    /* 🌟 修复3：统一气泡圆角，和标准模式完全一致 (左下角小尖角) */
    border-radius: 18px 18px 18px 4px !important; 
    
    padding: 12px 16px !important;
    margin: 0 0 12px 0 !important; /* 每个气泡的间隔 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    
    /* 更好的自适应宽度，完美包裹文字，不撑满屏幕 */
    width: fit-content;
    display: block;
    max-width: 100%;
    color: var(--el-text-color-primary);
    box-sizing: border-box;
}

/* 🌟 修复2：单独为列表留出左侧符号空间，避免点溢出 */
.mode-entertainment .stream-content > ul,
.mode-entertainment .stream-content > ol,
.mode-entertainment .markdown-body > div:first-child > ul,
.mode-entertainment .markdown-body > div:first-child > ol {
    padding-left: 36px !important; 
}

/* 🌟 修复1：严格过滤空行段落，解决生成空心气泡的问题 */
.mode-entertainment .stream-content > p:empty,
.mode-entertainment .markdown-body > div:first-child > p:empty,
.mode-entertainment .stream-content > p:has(> br:only-child),
.mode-entertainment .markdown-body > div:first-child > p:has(> br:only-child) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 审批块(被放行的工具)自适应对齐 */
.mode-entertainment .type-approval {
    align-self: flex-start;
}

/* 代码块内部防溢出处理 */
.mode-entertainment pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}

/* 如果是连续的最后一个气泡，取消底部间距 */
.mode-entertainment .stream-content > *:last-child,
.mode-entertainment .markdown-body > div:first-child > *:last-child {
    margin-bottom: 0 !important;
}

/* 🚨 嵌套清零：确保气泡内部深层的标签绝对不会再生成背景（终结气泡套气泡） */
.mode-entertainment .stream-content > blockquote > p,
.mode-entertainment .stream-content > ul > li > p,
.mode-entertainment .markdown-body > div:first-child > blockquote > p,
.mode-entertainment .markdown-body > div:first-child > ul > li > p {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 0 8px 0 !important;
}

/* 🌟 修复4：彻底消除 Markdown 分割线 (---) 在娱乐模式下导致的空行/断层 */
.mode-entertainment .stream-content > hr,
.mode-entertainment .markdown-body > div:first-child > hr,
.mode-entertainment .a2ui-text-wrapper > div > hr {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 🌟 修复5：让 Markdown 标题 (h1~h6) 也被气泡完美包裹 */
.mode-entertainment .stream-content > h1,
.mode-entertainment .stream-content > h2,
.mode-entertainment .stream-content > h3,
.mode-entertainment .stream-content > h4,
.mode-entertainment .stream-content > h5,
.mode-entertainment .stream-content > h6,
.mode-entertainment .markdown-body > div:first-child > h1,
.mode-entertainment .markdown-body > div:first-child > h2,
.mode-entertainment .markdown-body > div:first-child > h3,
.mode-entertainment .markdown-body > div:first-child > h4,
.mode-entertainment .markdown-body > div:first-child > h5,
.mode-entertainment .markdown-body > div:first-child > h6 {
    /* 气泡背景和边框 */
    background-color: var(--el-bg-color) !important;
    border: 1px solid var(--el-border-color-lighter) !important;
    
    /* 统一气泡圆角 (左下角小尖角) */
    border-radius: 18px 18px 18px 4px !important; 
    
    padding: 12px 16px !important;
    margin: 0 0 12px 0 !important; /* 每个气泡的间隔 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    
    /* 自适应宽度 */
    width: fit-content;
    display: block;
    max-width: 100%;
    color: var(--el-text-color-primary);
    box-sizing: border-box;
}

/* 消除如果是最后一条消息时的底部间距 */
.mode-entertainment .stream-content > h1:last-child,
.mode-entertainment .stream-content > h2:last-child,
.mode-entertainment .stream-content > h3:last-child,
.mode-entertainment .stream-content > h4:last-child,
.mode-entertainment .stream-content > h5:last-child,
.mode-entertainment .stream-content > h6:last-child,
.mode-entertainment .markdown-body > div:first-child > h1:last-child,
.mode-entertainment .markdown-body > div:first-child > h2:last-child,
.mode-entertainment .markdown-body > div:first-child > h3:last-child,
.mode-entertainment .markdown-body > div:first-child > h4:last-child,
.mode-entertainment .markdown-body > div:first-child > h5:last-child,
.mode-entertainment .markdown-body > div:first-child > h6:last-child {
    margin-bottom: 0 !important;
}

/* =========================================
   🌟 UI 模式提示器重写 (Typing & Loading Indicators)
   解决办公与娱乐模式下的扫光错位与转圈违和问题
   ========================================= */

/* --- 1. 彻底关闭顶部扫光特效 --- */
/* 在办公和娱乐模式下，干掉原本附着在卡片边缘的跑马灯 */
.assistant .message-content.mode-work.typing::before,
.assistant .message-content.mode-entertainment.typing::before {
    display: none !important;
    animation: none !important;
    background: transparent !important;
}

/* -----------------------------------------
   2. 娱乐模式 (Entertainment Mode) - QQ 正在输入气泡
   ----------------------------------------- */

/* 锁定包含转圈图标的那个隐藏 div，将其强制变身为一个独立的气泡 */
.mode-entertainment div:has(> .fa-spinner.fa-spin) {
    background-color: var(--el-bg-color) !important;
    border: 1px solid var(--el-border-color-lighter) !important;
    border-radius: 18px 18px 18px 4px !important; 
    padding: 18px 24px !important; /* 预留给跳动圆点的空间 */
    margin: 0 0 12px 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
}

/* 隐藏原本死板的转圈图标 */
.mode-entertainment div:has(> .fa-spinner.fa-spin) .fa-spinner {
    display: none !important;
}

/* 🌟 核心魔法：用伪元素 CSS 绘制三个丝滑跳动的小圆点 */
.mode-entertainment div:has(> .fa-spinner.fa-spin)::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    /* 左右留出 margin 支撑 box-shadow 产生的小点 */
    margin: 0 12px; 
    animation: qq-typing-dots 1.4s infinite ease-in-out both;
}

/* 三圆点波浪跳动动画 */
@keyframes qq-typing-dots {
    0%, 80%, 100% {
        box-shadow: -12px 0 0 -1px rgba(128,128,128,0.4), 
                     0 0 0 -1px rgba(128,128,128,0.4), 
                     12px 0 0 -1px rgba(128,128,128,0.4);
    }
    20% {
        box-shadow: -12px 0 0 1px var(--el-color-primary), 
                     0 0 0 -1px rgba(128,128,128,0.4), 
                     12px 0 0 -1px rgba(128,128,128,0.4);
    }
    40% {
        box-shadow: -12px 0 0 -1px rgba(128,128,128,0.4), 
                     0 0 0 1px var(--el-color-primary), 
                     12px 0 0 -1px rgba(128,128,128,0.4);
    }
    60% {
        box-shadow: -12px 0 0 -1px rgba(128,128,128,0.4), 
                     0 0 0 -1px rgba(128,128,128,0.4), 
                     12px 0 0 1px var(--el-color-primary);
    }
}

/* -----------------------------------------
   3. 办公模式 (Work Mode) - 极简光标指示器
   ----------------------------------------- */

/* 对齐容器，预留位置 */
.mode-work div:has(> .fa-spinner.fa-spin) {
    display: inline-flex;
    align-items: center;
    padding-left: 4px;
    margin-top: 4px;
}

/* 隐藏原本死板的转圈图标 */
.mode-work div:has(> .fa-spinner.fa-spin) .fa-spinner {
    display: none !important;
}

/* 🌟 核心魔法：将其替换为一个极客风的专业闪烁光标块 */
.mode-work div:has(> .fa-spinner.fa-spin)::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 18px;
    background-color: var(--el-color-primary); /* 使用主题色 */
    vertical-align: middle;
    animation: work-mode-blink 1s step-end infinite;
    /* 给光标一点微弱的光晕，更有科幻/终端感 */
    box-shadow: 0 0 6px rgba(var(--el-color-primary-rgb), 0.5); 
}

/* 光标闪烁动画 */
@keyframes work-mode-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* =========================================
   初始状态中央模式切换器 (Premium Segmented Control)
   ========================================= */

/* 确保消息容器作为绝对定位锚点 */
.messages-container {
    position: relative; 
}

/* 中央绝对居中容器 */
.initial-mode-switcher-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    animation: switcherFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes switcherFadeIn {
    from { opacity: 0; transform: translate(-50%, -40%) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 胶囊控制条底槽 */
.mode-segmented-control {
    display: inline-flex;
    background-color: rgba(128, 128, 128, 0.06); /* 极低饱和度底色 */
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 40px; /* 完整的胶囊圆角 */
    padding: 4px;
    gap: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 深色/暗色主题适配 */
[data-theme="dark"] .mode-segmented-control,
[data-theme="midnight"] .mode-segmented-control,
[data-theme="neon"] .mode-segmented-control {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* 单个选项 */
.mode-segmented-control .segment-option {
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 32px;
    cursor: pointer;
    color: var(--el-text-color-regular);
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent; /* 预留高亮描边 */
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mode-segmented-control .segment-option i {
    font-size: 14px;
    transition: transform 0.2s;
}

/* 悬停微调：图标轻轻上浮 */
.mode-segmented-control .segment-option:hover {
    color: var(--el-color-primary);
}
.mode-segmented-control .segment-option:hover i {
    transform: translateY(-1px);
}

/* 🌟 激活状态 (Active) - 完美复刻参考图的高亮外边框与轻微发光 */
.mode-segmented-control .segment-option.active {
    background-color: color-mix(in srgb, var(--el-color-primary) 12%, var(--el-bg-color)) !important;
    border-color: var(--el-color-primary) !important;
    color: var(--el-color-primary) !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--el-color-primary-rgb), 0.15);
}

/* 激活状态在暗黑主题下的显色增强 */
[data-theme="dark"] .mode-segmented-control .segment-option.active,
[data-theme="midnight"] .mode-segmented-control .segment-option.active,
[data-theme="neon"] .mode-segmented-control .segment-option.active {
    background-color: rgba(var(--el-color-primary-rgb), 0.12) !important;
    box-shadow: 0 2px 12px rgba(var(--el-color-primary-rgb), 0.25);
}

/* 物理按压反馈 */
.mode-segmented-control .segment-option:active {
    transform: scale(0.96);
    transition-duration: 0.1s;
}


/* =========================================
   初始状态中央模式切换器 (Premium Segmented Control)
   ========================================= */

.messages-container {
    position: relative; /* 确保绝对定位基准正确 */
}

/* 主容器：改为列布局，容纳标题和控制条 */
.initial-mode-switcher-container {
    position: absolute;
    top: 45%; /* 稍微偏上，符合视觉黄金分割点 */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px; /* 标题与控制条的物理间距 */
    pointer-events: auto;
    animation: switcherFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes switcherFadeIn {
    from { opacity: 0; transform: translate(-50%, -40%) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 动态标题部分样式 (对齐参考图) */
.switcher-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    user-select: none;
    -webkit-user-select: none;
}

.switcher-header i {
    font-size: 22px;
    color: var(--el-color-primary);
    animation: iconPulse 2s infinite ease-in-out;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(var(--el-color-primary-rgb), 0)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(var(--el-color-primary-rgb), 0.4)); }
}

/* 胶囊控制条底槽 */
.mode-segmented-control {
    display: inline-flex;
    background-color: rgba(128, 128, 128, 0.06);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 40px; 
    padding: 4px;
    gap: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 暗色主题适配 */
[data-theme="dark"] .mode-segmented-control,
[data-theme="midnight"] .mode-segmented-control,
[data-theme="neon"] .mode-segmented-control {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* 单个选项 */
.mode-segmented-control .segment-option {
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 32px;
    cursor: pointer;
    color: var(--el-text-color-regular);
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent; 
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap; /* 🌟 关键修复：强制文字绝对不准折行，杜绝竖向排版 */
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mode-segmented-control .segment-option i {
    font-size: 14px;
    transition: transform 0.2s;
}

.mode-segmented-control .segment-option:hover {
    color: var(--el-color-primary);
}
.mode-segmented-control .segment-option:hover i {
    transform: translateY(-1px);
}

/* 激活状态 (Active) */
.mode-segmented-control .segment-option.active {
    background-color: color-mix(in srgb, var(--el-color-primary) 12%, var(--el-bg-color)) !important;
    border-color: var(--el-color-primary) !important;
    color: var(--el-color-primary) !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--el-color-primary-rgb), 0.15);
}

[data-theme="dark"] .mode-segmented-control .segment-option.active,
[data-theme="midnight"] .mode-segmented-control .segment-option.active,
[data-theme="neon"] .mode-segmented-control .segment-option.active {
    background-color: rgba(var(--el-color-primary-rgb), 0.12) !important;
    box-shadow: 0 2px 12px rgba(var(--el-color-primary-rgb), 0.25);
}

.mode-segmented-control .segment-option:active {
    transform: scale(0.96);
    transition-duration: 0.1s;
}

/* -----------------------------------------
   📱 移动端自适应优化补丁 (max-width: 768px)
   通过压缩边距、等宽平分、缩放字号，完美平铺
   ----------------------------------------- */
@media (max-width: 768px) {
    .initial-mode-switcher-container {
        width: 92%; /* 限制最大宽度 */
        gap: 16px; /* 缩小上下间距 */
        top: 40%; /* 手机端弹起键盘时稍偏上，防止被输入框遮挡 */
    }

    .switcher-header {
        font-size: 16px; /* 缩小提示文字 */
        gap: 8px;
    }

    .switcher-header i {
        font-size: 18px;
    }

    .mode-segmented-control {
        border-radius: 30px;
        padding: 3px;
        gap: 2px;
        width: 100%; /* 强制占满自适应宽度 */
        box-sizing: border-box;
        display: flex;
    }

    .mode-segmented-control .segment-option {
        font-size: 11.5px; /* 压缩文字大小 */
        padding: 8px 6px; /* 压缩内边距 */
        border-radius: 24px;
        gap: 4px; /* 缩短图标和文字距离 */
        flex: 1; /* 🌟 关键：平分空间，确保横向充满不折行 */
        justify-content: center; /* 居中对齐 */
    }

    .mode-segmented-control .segment-option i {
        font-size: 12px; /* 稍微缩小图标 */
    }
}


/* =========================================
   系统提示词 (System Prompt) 专属重写
   ========================================= */

/* --- 1. 彻底清除外围包裹 (扩展支持系统消息) --- */
.assistant .message-content.mode-work,
.assistant .message-content.mode-entertainment,
.system .message-content.mode-work,
.system .message-content.mode-entertainment {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* --- 2. 办公模式下的系统提示词微调 (无背景，虚线修饰，辅助色) --- */
.system .message-content.mode-work .system-content {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    
    /* 降低视觉优先级：使用更淡的次级文字颜色，让用户视觉重心留在 AI 的正文上 */
    color: var(--el-text-color-secondary) !important; 
    font-size: 13.5px;
    line-height: 1.6;
    
    /* 用优雅的虚线侧边栏代替气泡包围，极富学术与配置质感 */
    border-left: 2px dashed var(--el-border-color-darker) !important;
    padding: 8px 0 8px 14px !important;
    margin: 8px 0 !important;
}

/* 办公模式下微调系统内容中的滚动容器，确保内距一致 */
.system .message-content.mode-work .system-content .scroll-on-hover {
    padding: 0 !important;
}

/* =========================================
   🌟 娱乐模式顶部防挤压留白补丁
   自动感应娱乐模式并为消息列表顶部补偿安全间距
   ========================================= */

/* 当消息容器内部包含娱乐模式的消息时，自动开启顶部优雅间距 */
.messages-container:has(.message-content.mode-entertainment) {
    padding-top: 48px !important; /* 桌面端预留 48px 的呼吸感留白 */
    transition: padding-top 0.3s var(--ease-out-smooth);
}


/* =========================================
   娱乐模式下图片气泡无缝填充 & 圆角剪裁终极修复
   ========================================= */

/* 1. 强力匹配任何包含图片的段落气泡，彻底清除内边距与空白背景 */
.mode-entertainment .stream-content p:has(img),
.mode-entertainment .markdown-body p:has(img),
.mode-entertainment .markdown-body div:first-child p:has(img) {
    padding: 0 !important;
    overflow: hidden !important;      /* 核心：确保超出异形圆角部分被裁剪掉 */
    background-color: var(--el-bg-color) !important;
    border: 1px solid var(--el-border-color-lighter) !important;
    
    /* 强制应用与普通文本气泡完全一致的 QQ 异形圆角 */
    border-radius: 18px 18px 18px 4px !important; 
    
    display: inline-block !important; /* 使气泡宽度完美包裹图片，不产生右侧多余空白 */
    max-width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* 2. 防御性处理：如果图片外层套了 <a> 标签（用于点击放大预览），重置其布局与圆角 */
.mode-entertainment .stream-content p:has(img) a,
.mode-entertainment .markdown-body p:has(img) a,
.mode-entertainment .markdown-body div:first-child p:has(img) a {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: inherit !important; /* 继承父级的异形圆角 */
    overflow: hidden !important;
}

/* 3. 让图片自然平铺到气泡边缘，不留任何缝隙，并继承异形圆角 */
.mode-entertainment .stream-content p:has(img) img,
.mode-entertainment .markdown-body p:has(img) img,
.mode-entertainment .markdown-body div:first-child p:has(img) img {
    display: block !important;
    width: 100% !important;            /* 宽度占满气泡 */
    height: auto !important;           /* 高度等比例缩放，保证二游立绘、卡牌不被拉伸变形 */
    
    /* 尺寸限制：既保证精美，又防止长图撑爆聊天区域 */
    max-width: 320px !important;       /* 限制横向宽度，与普通气泡视觉体量一致 */
    max-height: 480px !important;      /* 限制纵向高度上限 */
    
    object-fit: contain !important;    /* 保证整张卡面（包括顶部文字和底部菜单）完整显示，不被裁剪 */
    border-radius: inherit !important; /* 关键：强制图片各角完美贴合父级 18px 18px 18px 4px 的圆角 */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* =========================================
   标准模式与办公模式图片自适应缩放优化
   ========================================= */

/* 1. 经典/标准模式：自适应优雅缩放 */
.message-content:not(.mode-entertainment):not(.mode-work) .markdown-body img,
.message-content:not(.mode-entertainment):not(.mode-work) .stream-content img {
    display: block;
    max-width: 100% !important;        /* 宽度上限不超过消息气泡 */
    height: auto !important;           /* 保持原有宽高比 */
    max-height: 360px !important;      /* 限制最大高度，防止长图霸屏，保持阅读流畅 */
    width: auto !important;            /* 允许根据比例自动收缩，防止小图/图标被强行拉大 */
    object-fit: contain !important;
    border-radius: 8px !important;     /* 精致的现代圆角 */
    margin: 10px 0 !important;         /* 上下段落保留呼吸间距 */
    box-shadow: var(--shadow-sm);      /* 轻微的环境光投影，提升质感 */
    border: 1px solid var(--el-border-color-light) !important; /* 微弱的极细边框 */
    transition: transform 0.2s ease;
}

/* 2. 办公模式 (Work Mode)：更严谨、更紧凑的学术/文档排版 */
.message-content.mode-work .markdown-body img,
.message-content.mode-work .stream-content img {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    max-height: 300px !important;      /* 办公模式限制到 300px，排版更紧凑 */
    width: auto !important;
    object-fit: contain !important;
    border-radius: 6px !important;     /* 更加克制的微圆角 */
    margin: 8px 0 !important;
    border: 1px solid var(--el-border-color-light) !important;
}

/* 3. 悬停微动反馈（双模式通用） */
.message-content:not(.mode-entertainment) .markdown-body img:hover,
.message-content:not(.mode-entertainment) .stream-content img:hover {
    transform: translateY(-1px);       /* 悬停时轻微上浮 */
    box-shadow: var(--shadow-md);      /* 投影微微加深 */
}



/* =========================================
   娱乐模式：极简消息时间戳
   ========================================= */
.im-time-stamp {
    font-size: 11px;
    color: var(--el-text-color-secondary);
    opacity: 0.55;
    margin-top: 4px;
    user-select: none;
    -webkit-user-select: none;
}

/* 助手时间戳靠左对齐 */
.im-time-stamp.assistant {
    margin-left: 4px;
    align-self: flex-start;
}

/* 用户时间戳靠右对齐 */
.im-time-stamp.user {
    margin-right: 4px;
    align-self: flex-end;
}

/* =========================================
   娱乐模式：消除左右内边距，保留上下 8px 间距
   ========================================= */
.mode-entertainment .markdown-body {
    padding: 8px 0 !important; /* 上下保留 8px 呼吸感，左右彻底归零防偏移 */
    background: transparent !important; /* 确保容器背景彻底透明 */
}

/* 兼容处理：消除块容器可能残留的额外上下边距 */
.mode-entertainment .message-blocks-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================================
   娱乐模式：代码块独立气泡 & 无边距无缝填充
   ========================================= */

/* 1. 让代码块容器独立成为一个无填充的气泡，并使用 overflow:hidden 裁剪圆角 */
.mode-entertainment .stream-content > .code-block,
.mode-entertainment .markdown-body > div:first-child > .code-block,
.mode-entertainment .stream-content > pre,
.mode-entertainment .markdown-body > div:first-child > pre {
    background-color: var(--el-bg-color) !important;
    border: 1px solid var(--el-border-color-lighter) !important;
    border-radius: 18px 18px 18px 4px !important; /* 统一的 QQ 异形圆角 */
    padding: 0 !important; /* 彻底清除边缘填充，让内部代码完全贴合边缘 */
    margin: 0 0 12px 0 !important; /* 每个气泡的上下间隔 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    
    /* 尺寸自适应与边界防撑破 */
    width: fit-content;
    min-width: 280px; /* 设定最小宽度，避免极短代码块显得过于局促 */
    max-width: 100%;
    display: block;
    box-sizing: border-box;
    overflow: hidden !important; /* 关键：强行裁剪内部 header 和 hljs 容器的直角，使其无缝贴合外层圆角 */
}

/* 2. 彻底清除内部 pre/code/hljs 的圆角和 margin，实现纯粹的无缝贴合 */
.mode-entertainment .code-block pre,
.mode-entertainment .code-block .hljs,
.mode-entertainment pre > code {
    border-radius: 0 !important; /* 清除内层容器的圆角，防止出现双重边框或背景露空 */
    margin: 0 !important;
}

/* 3. 兼容 has-custom-bg (全局背景图玻璃化) 情况下的代码块气泡 */
body.has-custom-bg .mode-entertainment .stream-content > .code-block,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > .code-block,
body.has-custom-bg .mode-entertainment .stream-content > pre,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > pre {
    background-color: color-mix(in srgb, var(--el-bg-color) 70%, transparent) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(128, 128, 128, 0.15) !important;
}
/* =========================================
   🚨 修复：办公模式 + 背景图下代码块透明问题
   ========================================= */

/* 1. 为 `body.has-custom-bg` 模式下的办公模式代码块，恢复毛玻璃背景 */
/* 这个选择器确保了只有在两个条件同时满足时才生效 */
body.has-custom-bg .message-content.mode-work .code-block {
    /* 复制标准的毛玻璃样式，使其与其它组件风格统一 */
    background-color: color-mix(in srgb, var(--el-bg-color-page) 50%, transparent) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(128, 128, 128, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加轻微阴影，增强可读性 */
    overflow: hidden; /* 确保内部元素不破坏圆角 */
}

/* 2. 确保内部的 <pre> 和 <code> 标签背景透明，以透出父级的毛玻璃效果 */
body.has-custom-bg .message-content.mode-work .code-block pre,
body.has-custom-bg .message-content.mode-work .code-block .hljs {
    background: transparent !important;
    background-color: transparent !important;
}

/* =========================================
   全局背景图毛玻璃透视终极修复 (Body-level Glassmorphism)
   ========================================= */

/* 1. 强力清除所有阻挡视线的纯色大背景 (包含设置页、工具页等次级路由) */
body.has-custom-bg #app,
body.has-custom-bg .el-container,
body.has-custom-bg .el-main,
body.has-custom-bg .content,
body.has-custom-bg .page,
body.has-custom-bg .chat-container,
body.has-custom-bg .chat-wrapper,
body.has-custom-bg .chat-area,
body.has-custom-bg .chat-main-column,
body.has-custom-bg .messages-container,
body.has-custom-bg .system-container,
body.has-custom-bg .suite-layout,
body.has-custom-bg .suite-content,
body.has-custom-bg .keybox-container,
body.has-custom-bg .api-container,
body.has-custom-bg .license-notice,
body.has-custom-bg .ai-browser-container,   
body.has-custom-bg .browser-welcome-page,   
body.has-custom-bg .ext-iframe-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2. 最左侧主菜单 (一级导航) */
body.has-custom-bg .sidebar {
  background-color: color-mix(in srgb, var(--el-bg-color-page) 50%, transparent) !important;
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
  border-right: 1px solid rgba(128, 128, 128, 0.15) !important;
}

/* 扒掉菜单项自带底色 */
body.has-custom-bg .el-menu-vertical,
body.has-custom-bg .el-menu-item {
  background: transparent !important;
  background-color: transparent !important;
}
body.has-custom-bg .el-menu-item:hover,
body.has-custom-bg .el-menu-item.is-active {
  background-color: rgba(128, 128, 128, 0.15) !important;
}

/* 3. 二级导航与侧边栏 (历史对话栏、设置页侧栏) - 悬浮大圆角 */
body.has-custom-bg .chat-history-sidebar,
body.has-custom-bg .suite-sidebar {
  background-color: color-mix(in srgb, var(--el-bg-color-page) 60%, transparent) !important;
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
  border: 1px solid rgba(128, 128, 128, 0.15) !important;
  
  /* 悬浮圆角处理 */
  border-radius: 16px !important;
  margin: 12px 0 12px 12px !important;
  height: calc(100% - 24px) !important;
  overflow: hidden !important; 
}

/* 🌟 3.5 核心修复：浏览器左侧主体卡片化，并强制将网页裁切为 16px 圆角 🌟 */
body.has-custom-bg .browser-body {
  background-color: color-mix(in srgb, var(--el-bg-color-page) 50%, transparent) !important;
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
  border: 1px solid rgba(128, 128, 128, 0.15) !important;
  
  /* 悬浮圆角处理：使其像一个卡片浮在背景上 */
  border-radius: 16px !important;
  margin: 12px 12px 12px 12px !important; /* 四周预留安全间距 */
  height: calc(100% - 24px) !important;
  overflow: hidden !important; /* 关键：强行裁切内部的任何网页为圆角 */
}

/* 确保 webview 及其包装层也同步继承圆角，消除任何闪烁直角 */
body.has-custom-bg .webview-wrapper,
body.has-custom-bg .webview-element {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* 4. 右侧扩展面板与内页实体卡片 */
body.has-custom-bg .side-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.has-custom-bg .side-panel-body-container,
body.has-custom-bg .settings-form,
body.has-custom-bg .behavior-block,
body.has-custom-bg .provider-card,
body.has-custom-bg .tool-item,
body.has-custom-bg .extension-card,
body.has-custom-bg .vendor-card,
body.has-custom-bg .task-card-item .el-card,
body.has-custom-bg .guide-card,
body.has-custom-bg .fav-icon-box { 
  background-color: color-mix(in srgb, var(--el-bg-color-page) 60%, transparent) !important;
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
  border: 1px solid rgba(128, 128, 128, 0.15) !important;
  border-radius: 16px !important;
}

/* 4.5 浏览器 Copilot 侧边栏对齐悬浮大圆角 */
body.has-custom-bg .browser-copilot-sidebar {
  background-color: color-mix(in srgb, var(--el-bg-color-page) 60%, transparent) !important;
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
  border: 1px solid rgba(128, 128, 128, 0.15) !important;
  
  /* 悬浮圆角处理 */
  border-radius: 16px !important;
  margin: 12px 12px 12px 0 !important; 
  height: calc(100% - 24px) !important;
  overflow: hidden !important;
  
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
              margin 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.25s ease !important;
}

body.has-custom-bg .browser-copilot-sidebar.sidebar-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: none !important;
  opacity: 0 !important;
}

/* 5. 顶部栏与大输入框、大搜索框 */
body.has-custom-bg .top-bar {
  background-color: color-mix(in srgb, var(--el-bg-color-page) 40%, transparent) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important;
}

body.has-custom-bg .unified-input-wrapper,
body.has-custom-bg .hero-input-wrapper,
body.has-custom-bg .ios-search-wrapper { 
  background-color: color-mix(in srgb, var(--el-bg-color) 65%, transparent) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(128, 128, 128, 0.15) !important;
}

body.has-custom-bg .ios-search-input {
  background: transparent !important;
  background-color: transparent !important;
}

/* 🌟 核心修复：清除切换引擎按钮的白底，使其与搜索框完全融为一体 🌟 */
body.has-custom-bg .engine-selector,
body.has-custom-bg .current-engine {
  background: transparent !important;
  background-color: transparent !important;
  border-right: 1px solid rgba(128, 128, 128, 0.15) !important; /* 半透明精细分割线 */
}

/* 5.5 模型指示器与状态胶囊玻璃化 */
body.has-custom-bg .status-pill {
  background-color: color-mix(in srgb, var(--el-fill-color-light) 50%, transparent) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(128, 128, 128, 0.15) !important;
}

body.has-custom-bg .engine-dropdown {
  background-color: color-mix(in srgb, var(--el-bg-color) 75%, transparent) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(128, 128, 128, 0.2) !important;
}

body.has-custom-bg .browser-toggle-handle {
  border-radius: 12px 0 0 12px !important;
}

/* 6. 消息操作区透明 */
body.has-custom-bg .message.assistant .tts-controls,
body.has-custom-bg .message-actions,
body.has-custom-bg .tts-controls .el-button,
body.has-custom-bg .message-actions .el-button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.has-custom-bg .tts-controls .el-button:hover,
body.has-custom-bg .message-actions .el-button:hover {
  background-color: rgba(128, 128, 128, 0.15) !important;
}

/* 7. 聊天气泡处理 */
body.has-custom-bg .user .message-content {
  background-color: color-mix(in srgb, var(--el-color-primary) 70%, transparent) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(128, 128, 128, 0.15) !important;
}

body.has-custom-bg .assistant .message-content:not(.mode-entertainment):not(.mode-work),
body.has-custom-bg .system .message-content:not(.mode-entertainment):not(.mode-work) {
  background-color: color-mix(in srgb, var(--el-bg-color) 70%, transparent) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(128, 128, 128, 0.15) !important;
}

/* 7.3 娱乐模式气泡打碎透射 */
body.has-custom-bg .assistant .message-content.mode-entertainment,
body.has-custom-bg .system .message-content.mode-entertainment,
body.has-custom-bg .mode-entertainment .markdown-body,
body.has-custom-bg .mode-entertainment .message-blocks-container,
body.has-custom-bg .mode-entertainment .a2ui-text-wrapper,
body.has-custom-bg .mode-entertainment .stream-content {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.has-custom-bg .mode-entertainment .stream-content > p,
body.has-custom-bg .mode-entertainment .stream-content > pre,
body.has-custom-bg .mode-entertainment .stream-content > ul,
body.has-custom-bg .mode-entertainment .stream-content > ol,
body.has-custom-bg .mode-entertainment .stream-content > blockquote,
body.has-custom-bg .mode-entertainment .stream-content > table,
body.has-custom-bg .mode-entertainment .stream-content > h1,
body.has-custom-bg .mode-entertainment .stream-content > h2,
body.has-custom-bg .mode-entertainment .stream-content > h3,
body.has-custom-bg .mode-entertainment .stream-content > h4,
body.has-custom-bg .mode-entertainment .stream-content > h5,
body.has-custom-bg .mode-entertainment .stream-content > h6,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > p,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > pre,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > ul,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > ol,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > blockquote,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > table,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > h1,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > h2,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > h3,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > h4,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > h5,
body.has-custom-bg .mode-entertainment .markdown-body > div:first-child > h6,
body.has-custom-bg .mode-entertainment .sap-process-block.type-approval {
  background-color: color-mix(in srgb, var(--el-bg-color) 70%, transparent) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(128, 128, 128, 0.15) !important;
}

/* 8. 全局护眼叠加层 */
body.has-custom-bg::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 0;
}
body.has-custom-bg #app {
  position: relative;
  z-index: 1;
}