/* chat-panel.css — 深色主题 AI 对话面板 v2 */

/* 默认隐藏旧侧边栏 */
.chat-panel { display: none !important; }
.canvas-container { flex: 1 !important; }

/* ⚠️ 旧气泡按钮已废弃（入口由 mascot.js 吉祥物接管），样式全部移除 */

/* 吉祥物动画（mascot.js v2：固定右下角 100×100，9帧表情轮播） */
@keyframes mascot-breathe {
  0%, 100% { transform:translateY(0) rotate(0deg); }
  25% { transform:translateY(-3px) rotate(-1deg); }
  50% { transform:translateY(-5px) rotate(0.8deg); }
  75% { transform:translateY(-2px) rotate(-0.5deg); }
}
@keyframes mascot-pop {
  0% { transform:scale(0.82); }
  60% { transform:scale(1.08); }
  100% { transform:scale(1); }
}
#mascot-box { user-select:none; -webkit-user-drag:none; }
#mascot-box .mascot-frame { opacity:0; transition:opacity 0.28s ease; }
#mascot-box .mascot-frame-on { opacity:1; }

/* 对话面板 */
.ai-chat-panel { position:fixed;top:0;right:0;width:512px;height:100vh;background:#1e1e2e;z-index:250;
  display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,0.3);
  transform:translateX(100%);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.ai-chat-panel.open { transform:translateX(0); }

/* 头部：左=固定标题，中=会话名(小字可编辑)，右=按钮组 */
.chat-panel-header { height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;
  border-bottom:1px solid rgba(255,255,255,0.1);flex-shrink:0;position:relative; }
.chat-panel-brand { font-size:15px;font-weight:600;color:#fff;flex-shrink:0;white-space:nowrap; }
/* ⚠️ 8/16：会话名称部件（名字+✏️）相对整个头部绝对居中，不受左右栏宽度影响 */
.chat-panel-title { position:absolute;left:50%;transform:translateX(-50%);top:auto;bottom:5px;height:auto;
  display:flex;align-items:center;justify-content:center;max-width:55%;min-width:0;
  font-size:13px;font-weight:500;color:rgba(255,255,255,0.85);gap:4px;overflow:hidden; }
.chat-panel-title #chat-panel-title-text { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; }
.chat-panel-actions { display:flex;gap:8px; }
.chat-panel-btn { width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:rgba(255,255,255,0.6);
  cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center; }
.chat-panel-btn:hover { background:rgba(255,255,255,0.1);color:#fff; }

/* 消息区域 */
.chat-messages-area { flex:1;overflow-y:auto;padding:16px; }
/* ⚠️ 8/21 用户要求：对话框内所有文字可 Ctrl+C 复制——显式允许选中（防拖拽残留/全局 user-select 干扰）
   提升到整个 AI 面板 + 所有弹层（chat-popup/mode-menu/model-list/chat-lib-menu 等） */
.ai-chat-panel, .ai-chat-panel *,
.chat-popup, .chat-popup *,
.mode-menu, .mode-menu *,
.model-list, .model-list *,
.chat-lib-menu, .chat-lib-menu * { user-select:text; -webkit-user-select:text; }
/* 交互控件仍不可选中（按钮/滑块/滚动条手柄等） */
.ai-chat-panel .chat-ctrl-btn, .ai-chat-panel .chat-ref-btn, .ai-chat-panel .chat-panel-btn,
.ai-chat-panel .gen-act-btn, .ai-chat-panel .msg-expand-btn, .ai-chat-panel .gen-cancel-btn,
.ai-chat-panel .msg-act-btn, .ai-chat-panel .chat-tips,
.chat-popup .chat-popup-item, .mode-menu .model-opt, .chat-lib-menu .model-opt { user-select:none; -webkit-user-select:none; }
/* ⚠️ 8/16：去掉各气泡下面的系统时间（不显示） */
.message-time { display:none; }
/* ⚠️ 8/16：上传素材菜单项 hover 白底黑字（"+"按钮弹出菜单） */
.chat-popup-item.ref-menu-item:hover { background:#fff;color:#111; }  /* ⚠️ 高特异性：覆盖 chat-popup-item:hover */
.chat-popup-item.ref-menu-item:hover img.ctrl-icon { filter:none;opacity:1; }

/* 消息气泡 */
.chat-message { margin-bottom:12px;max-width:85%; }
.chat-message.user { margin-left:auto;width:fit-content;max-width:85%; }  /* ⚠️ 8/16：用户消息右对齐（容器宽度贴合气泡+靠右，气泡贴右） */
.chat-message.assistant { margin-right:auto; }
.message-bubble { padding:6px 12px;border-radius:12px;font-size:13px;line-height:1.6;max-width:100%;word-break:break-word;width:fit-content;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; }
        .message-bubble code, .message-bubble pre { font-family:ui-monospace, SFMono-Regular, Consolas, Menlo, 'Courier New', monospace; }
        .message-bubble pre { background:rgba(0,0,0,0.3); padding:8px 10px; border-radius:8px; overflow-x:auto; margin:6px 0; }
        /* 技能卡片网格（Agent 默认模式欢迎区，扁平简洁无图标） */
        .chat-skill-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 14px; }
        .chat-skill-card { padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); cursor:pointer; text-align:left; transition:background .2s; font-family:inherit; font-size:13px; font-weight:500; color:#e8eaf6; line-height:1.4; }
        .chat-skill-card:hover { background:rgba(255,255,255,0.1); }
.chat-message.user .message-bubble { background:#fff;color:#111;border-bottom-right-radius:4px;font-weight:500; }
.chat-message.assistant .message-bubble { background:rgba(20,22,26,0.97);color:#e0e0e0;border-bottom-left-radius:4px; }
/* 生成中止按钮 */
.gen-cancel-btn { margin-left:8px; padding:2px 10px; border:1px solid rgba(255,255,255,0.25); border-radius:10px; background:rgba(255,255,255,0.08); color:#fca5a5; font-size:11px; cursor:pointer; font-family:inherit; }
.gen-cancel-btn:hover { background:rgba(248,113,113,0.15); border-color:#f87171; }
.gen-cancel-btn:disabled { opacity:0.5; cursor:default; }
.gen-info { font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px; }
.chat-message.user .message-time { text-align:right; }

/* 用户消息折叠 + 设置摘要 */
.msg-user-bubble { display:flex;flex-wrap:wrap;align-items:center;gap:4px; }
.msg-snippet { word-break:break-all; }
.msg-expand-btn { font-size:12px;color:rgba(255,255,255,0.85);cursor:pointer;background:rgba(255,255,255,0.15);
  border-radius:6px;padding:2px 8px;user-select:none;flex-shrink:0; }
.msg-expand-btn:hover { background:rgba(255,255,255,0.25); }
.msg-full { width:100%;word-break:break-all;font-size:13px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.2); }
.msg-meta { display:flex;flex-wrap:wrap;gap:6px;margin-top:6px; }
.msg-meta-item { font-size:11px;color:rgba(255,255,255,0.75);background:rgba(255,255,255,0.12);
  border-radius:6px;padding:2px 8px; }
.msg-ref-thumbs { display:flex;gap:4px;margin-top:4px;flex-wrap:wrap; }

/* ⚠️ 8/20 第3期：AI 回复 markdown 元素样式（marked 渲染后） */
.message-bubble pre { background:#161b22; border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:10px 12px; overflow-x:auto; margin:8px 0; max-width:100%; }
.message-bubble pre code { background:transparent; padding:0; font-size:12px; line-height:1.6; white-space:pre; }
.message-bubble code { background:rgba(255,255,255,0.1); padding:1px 5px; border-radius:4px; font-size:12px; }
.message-bubble p { margin:6px 0; }
.message-bubble h1, .message-bubble h2, .message-bubble h3, .message-bubble h4 { color:#fff; margin:10px 0 6px; line-height:1.4; }
.message-bubble h1 { font-size:16px; } .message-bubble h2 { font-size:15px; } .message-bubble h3 { font-size:14px; } .message-bubble h4 { font-size:13px; }
.message-bubble blockquote { border-left:3px solid rgba(139,92,246,0.6); padding:2px 12px; margin:8px 0; color:rgba(255,255,255,0.65); background:rgba(255,255,255,0.04); border-radius:0 6px 6px 0; }
.message-bubble table { border-collapse:collapse; margin:8px 0; width:100%; font-size:12px; }
.message-bubble th, .message-bubble td { border:1px solid rgba(255,255,255,0.15); padding:5px 10px; text-align:left; }
.message-bubble th { background:rgba(255,255,255,0.08); color:#fff; font-weight:600; }
.message-bubble a { color:#a5b4fc; text-decoration:underline; }
.message-bubble ul, .message-bubble ol { margin:6px 0 6px 20px; padding:0; }
.message-bubble li { margin:2px 0; }
.message-bubble hr { border:none; border-top:1px solid rgba(255,255,255,0.15); margin:10px 0; }

/* ⚠️ 8/20 第3期：AI 长回复折叠（视觉折叠 max-height + 渐变遮罩 + 展开按钮） */
.message-bubble.msg-collapsed { max-height:220px; overflow:hidden; position:relative; }
.message-bubble.msg-collapsed::after { content:''; position:absolute; left:0; right:0; bottom:0; height:64px; background:linear-gradient(transparent, rgba(20,22,26,0.97)); pointer-events:none; }
.chat-message.assistant .msg-expand-btn { display:block; margin:4px auto 0; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.75); font-size:11px; padding:3px 14px; border-radius:6px; cursor:pointer; font-family:inherit; }
.chat-message.assistant .msg-expand-btn:hover { background:rgba(255,255,255,0.15); color:#fff; }
.msg-ref-thumb { width:32px;height:32px;object-fit:cover;border-radius:4px;border:1px solid rgba(255,255,255,0.2); }

/* 参数卡片 */
.params-card { margin-top:6px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,0.06);font-size:12px; }
.params-card .param-row { display:flex;justify-content:space-between;margin-bottom:4px; }
.params-card .param-label { color:rgba(255,255,255,0.5); }
.params-card .param-value { color:#fff; }
.params-apply-btn { margin-top:8px;width:100%;padding:6px;border:none;border-radius:6px;background:#22c55e;color:#fff;
  font-size:13px;font-weight:600;cursor:pointer; }
.params-apply-btn:hover { opacity:0.9; }

/* 加载动画 */
.loading-dots { display:flex;gap:4px;padding:4px 0; }
.loading-dots span { width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.5);animation:dotBounce 1.4s infinite ease-in-out both; }
.loading-dots span:nth-child(1) { animation-delay:-0.32s; }
.loading-dots span:nth-child(2) { animation-delay:-0.16s; }
@keyframes dotBounce { 0%,80%,100% { transform:scale(0); } 40% { transform:scale(1); } }

/* ===== 底部栏 v2 ===== */
.chat-bottom-bar { border-top:1px solid rgba(255,255,255,0.1);padding:10px 12px 12px;flex-shrink:0; }
/* ⚠️ 8/16 Agent 模式轮播 tips：叠加在输入框内部（代替 placeholder），淡入淡出+滑动转场 */
.chat-tips { position:absolute;top:8px;left:12px;right:32px;z-index:2;pointer-events:none;
  display:flex;align-items:flex-start;font-size:12px;color:rgba(255,255,255,0.35);line-height:1.6;
  white-space:normal;word-break:break-all;overflow:hidden;user-select:none; }
.chat-tips.tip-in { animation:chatTipIn .35s ease forwards; }
.chat-tips.tip-out { animation:chatTipOut .35s ease forwards; }
@keyframes chatTipIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes chatTipOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-6px); } }
.chat-prompt-row { display:flex;flex-direction:column;gap:6px;margin-bottom:8px; }
.chat-ref-row { display:flex;align-items:center;gap:8px; }
.chat-ref-btn { width:34px;height:34px;border-radius:8px;border:1px dashed rgba(255,255,255,0.25);
  background:transparent;color:rgba(255,255,255,0.6);cursor:pointer;font-size:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center; }
.chat-ref-btn:hover { background:rgba(255,255,255,0.1);color:#fff; }
.chat-textarea { flex:1;min-height:108px;max-height:240px;resize:none;background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:6px 10px;font-size:13px;color:#fff;outline:none;font-family:inherit; }
.chat-textarea::placeholder { color:rgba(255,255,255,0.3); }
.chat-ref-thumbs { display: flex; gap: 4px; max-width: 120px; overflow-x: auto; flex-shrink: 0; }
.chat-ref-thumbs img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; cursor: pointer; }
.chat-controls-row { display:flex;gap:6px;align-items:center; }
.chat-controls-row #chat-skills-btn { margin-left:auto; } /* ⚠️ 设置/模型按钮靠右对齐（8/14 用户要求）：模式按钮在左，设置/模型挨着生成按钮 */
.chat-ctrl-btn { padding:5px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.6);cursor:pointer;font-size:12px;
  display:flex;align-items:center;gap:4px;white-space:nowrap;height:30px;box-sizing:border-box; }
.chat-ctrl-btn:hover { background:rgba(255,255,255,0.1);color:#fff; }
/* 底部按钮 SVG 图标：SVG 源是深色 fill，在深色按钮上反白以区分背景 */
.chat-ctrl-btn img.ctrl-icon { width:14px;height:14px;filter:brightness(0) invert(1);opacity:0.85; }
.chat-ctrl-btn:hover img.ctrl-icon { opacity:1; }
/* 弹窗选项 SVG 图标：同样限制尺寸 + 反白，与文字协调 */
.chat-popup-item img.ctrl-icon { width:14px;height:14px;filter:brightness(0) invert(1);opacity:0.85;flex-shrink:0; }
.chat-popup-item:hover img.ctrl-icon { opacity:1; }
.model-dropdown-btn img.ctrl-icon, .model-dropdown-item img.ctrl-icon, .model-dropdown-trigger img.ctrl-icon { width:14px;height:14px;filter:brightness(0) invert(1);opacity:0.85;flex-shrink:0;vertical-align:middle; }
/* ⚠️ 彩色品牌图标（MiniMax）不反色 */
.model-dropdown-btn img.ctrl-icon.no-invert, .model-dropdown-item img.ctrl-icon.no-invert, .model-dropdown-trigger img.ctrl-icon.no-invert { filter:none;opacity:1; }
.model-dropdown-btn:hover img.ctrl-icon, .model-dropdown-item:hover img.ctrl-icon { opacity:1; }
.chat-generate-btn { margin-left:auto;background:#fff;color:#111;border:none;
  font-weight:600;padding:5px 14px;box-shadow:0 1px 3px rgba(0,0,0,0.3);height:30px;box-sizing:border-box; }
.chat-generate-btn:hover { background:#f0f0f0;color:#111;box-shadow:0 2px 6px rgba(0,0,0,0.35); }

/* 生成偏好开关（Agent 模式，8/20 v2）：小号 switch，on=主题紫 */
.chat-prefs-toggle { width:34px;height:18px;border-radius:9px;background:rgba(255,255,255,0.14);
  border:none;cursor:pointer;position:relative;padding:0;flex-shrink:0;align-self:center;
  transition:background .2s; }
.chat-prefs-toggle::after { content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:rgba(255,255,255,0.85);transition:left .2s, background .2s; }
.chat-prefs-toggle.on { background:#6366f1; }
.chat-prefs-toggle.on::after { left:18px;background:#fff; }

/* 图标按钮 hover 提示（Agent 模式技能书/生成偏好，8/20 v3）：悬停显示文字，不挤动布局 */
.chat-ctrl-btn[data-tip] { position:relative; }
.chat-ctrl-btn[data-tip]:hover::after {
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:rgba(20,22,26,0.97); color:#fff; font-size:11px; padding:3px 8px;
  border-radius:5px; border:1px solid rgba(255,255,255,0.14); white-space:nowrap;
  z-index:300; pointer-events:none;
}
/* 品牌图标保持原色（DeepSeek/Qwen 等，不反白） */
.chat-ctrl-btn img.ctrl-icon.no-invert, .chat-popup-item img.ctrl-icon.no-invert { filter:none;opacity:1; }

/* 弹窗 */
.chat-popup { display:none;position:fixed;background:rgba(20,22,26,0.97);border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);padding:8px;z-index:999;min-width:200px;font-size:13px;color:#fff;
  border:1px solid rgba(255,255,255,0.06);
  /* ⚠️ 8/15 v3: 移除 backdrop-filter——它会创建 containing block，导致子元素 position:fixed 相对弹窗而非视口，模型悬浮层错位 */
  max-height:calc(100vh - 16px);overflow-y:auto; }
.chat-popup-item { padding:8px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.75); }  /* ⚠️ 8/16 单选项菜单默认项：深灰底 + 浅灰字(0.75) */
.chat-popup-item:hover { background:#fff;color:#111; }  /* ⚠️ 8/16：Agent/技能书等弹窗菜单 hover 白底黑字 */
.chat-popup-item.selected:hover { background:#fff;color:#111; }  /* ⚠️ 8/16：选中项 hover 也白底黑字（覆盖紫色 selected） */
.chat-popup-item:hover img.ctrl-icon, .chat-popup-item.selected:hover img.ctrl-icon { filter:none;opacity:1; }
.chat-popup-item:hover small, .chat-popup-item.selected:hover small { color:#111 !important; }
.chat-popup-item.selected { background:#fff;color:#111;font-weight:600; }
.chat-popup-item.selected img.ctrl-icon { filter:none;opacity:1; }
.chat-popup-item.selected small { color:#111 !important; }
.chat-popup-label { font-size: 11px; color: rgba(255,255,255,0.5); margin: 4px 12px 2px; }
.prefs-chip { padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); font-size: 12px; cursor: pointer; }
.prefs-chip:hover { background: rgba(255,255,255,0.12); }
.prefs-chip.active { background: #fff; border-color: #fff; color: #111; }
.prefs-slider { -webkit-appearance: none; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; outline: none; }
.prefs-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #6366f1; cursor: pointer; }

/* 弹窗内 OpenAI 图标反白（深色logo在深色背景下不可见） */
.chat-popup img[src*="openai"] { filter: brightness(0) invert(1); }

/* ⚠️ 8/16：Agent/技能书按钮（触发器）对齐 model-dropdown-trigger：半透明底+细边框，文字白色 */
#chat-agent-btn, #chat-skills-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.6); }
#chat-agent-btn:hover, #chat-skills-btn:hover { background:rgba(255,255,255,0.1); color:#fff; }

/* ⚠️ 8/16：单选项菜单样式（mode-menu）——Agent/技能书/参考图/模型选择菜单统一使用：
   按钮=半透明底+细边框；菜单=深色底+细边框+向上弹出；选中项=浅色底 0.12+白字；hover=白底黑字 */
/* 原说明：Agent 模式单选菜单（与画布图片生成器 model-dropdown 同款样式）——
   按钮=半透明底+细边框；菜单=深色底+细边框+向上弹出；选中项=紫色高亮+✓；hover=浅灰 */
/* ⚠️ 8/16 硬性规定：所有上浮单选项菜单选项最多只展现 5 个——容器 max-height 限制为 5 项高度（约190px），超出滚动 */
#chat-agent-btn-popup.mode-menu, #chat-skills-btn-popup.mode-menu, #chat-ref-menu.mode-menu, #chat-video-mat-menu.mode-menu, #chat-chatmodel-btn-popup.mode-menu { background:rgba(20,22,26,0.97); border:1px solid rgba(255,255,255,0.14); border-radius:8px; padding:5px; box-shadow:0 -4px 16px rgba(0,0,0,0.3); min-width:180px; scrollbar-width:auto !important; max-height:190px; overflow-y:auto; }
#chat-agent-btn-popup.mode-menu::-webkit-scrollbar, #chat-skills-btn-popup.mode-menu::-webkit-scrollbar, #chat-ref-menu.mode-menu::-webkit-scrollbar, #chat-video-mat-menu.mode-menu::-webkit-scrollbar, #chat-chatmodel-btn-popup.mode-menu::-webkit-scrollbar { width:10px !important; height:10px !important; }
#chat-agent-btn-popup.mode-menu::-webkit-scrollbar-track, #chat-skills-btn-popup.mode-menu::-webkit-scrollbar-track, #chat-ref-menu.mode-menu::-webkit-scrollbar-track, #chat-video-mat-menu.mode-menu::-webkit-scrollbar-track, #chat-chatmodel-btn-popup.mode-menu::-webkit-scrollbar-track { background:rgba(255,255,255,0.06) !important; border-radius:5px !important; }
#chat-agent-btn-popup.mode-menu::-webkit-scrollbar-thumb, #chat-skills-btn-popup.mode-menu::-webkit-scrollbar-thumb, #chat-ref-menu.mode-menu::-webkit-scrollbar-thumb, #chat-video-mat-menu.mode-menu::-webkit-scrollbar-thumb, #chat-chatmodel-btn-popup.mode-menu::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.25) !important; border-radius:5px !important; border:2px solid rgba(20,22,26,0.9) !important; }
#chat-agent-btn-popup.mode-menu::-webkit-scrollbar-thumb:hover, #chat-skills-btn-popup.mode-menu::-webkit-scrollbar-thumb:hover, #chat-ref-menu.mode-menu::-webkit-scrollbar-thumb:hover, #chat-chatmodel-btn-popup.mode-menu::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.4) !important; }
#chat-agent-btn-popup.mode-menu .chat-popup-item, #chat-skills-btn-popup.mode-menu .chat-popup-item, #chat-ref-menu.mode-menu .chat-popup-item, #chat-video-mat-menu.mode-menu .chat-popup-item, #chat-chatmodel-btn-popup.mode-menu .chat-popup-item { background:transparent; color:rgba(255,255,255,0.8); padding:8px 12px; border-radius:6px; margin-bottom:1px; }
#chat-agent-btn-popup.mode-menu .chat-popup-item:hover, #chat-skills-btn-popup.mode-menu .chat-popup-item:hover, #chat-ref-menu.mode-menu .chat-popup-item:hover, #chat-video-mat-menu.mode-menu .chat-popup-item:hover, #chat-chatmodel-btn-popup.mode-menu .chat-popup-item:hover { background:#fff; color:#111; }
#chat-agent-btn-popup.mode-menu .chat-popup-item:hover img.ctrl-icon, #chat-skills-btn-popup.mode-menu .chat-popup-item:hover img.ctrl-icon, #chat-ref-menu.mode-menu .chat-popup-item:hover img.ctrl-icon, #chat-video-mat-menu.mode-menu .chat-popup-item:hover img.ctrl-icon, #chat-chatmodel-btn-popup.mode-menu .chat-popup-item:hover img.ctrl-icon { filter:brightness(0); opacity:1; }
#chat-agent-btn-popup.mode-menu .chat-popup-item:hover small, #chat-skills-btn-popup.mode-menu .chat-popup-item:hover small, #chat-ref-menu.mode-menu .chat-popup-item:hover small, #chat-video-mat-menu.mode-menu .chat-popup-item:hover small, #chat-chatmodel-btn-popup.mode-menu .chat-popup-item:hover small { color:#666 !important; }
/* 选中项：紫色高亮（画布 model-pop-opt.selected 同款 rgba(255,255,255,0.12) 浅色底）——⚠️ 8/16 v2 对齐画布：白底黑字是 hover，选中项浅色底 */
#chat-agent-btn-popup.mode-menu .chat-popup-item.selected, #chat-skills-btn-popup.mode-menu .chat-popup-item.selected, #chat-video-mat-menu.mode-menu .chat-popup-item.selected, #chat-chatmodel-btn-popup.mode-menu .chat-popup-item.selected { background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.9); }
#chat-agent-btn-popup.mode-menu .chat-popup-item.selected:hover, #chat-skills-btn-popup.mode-menu .chat-popup-item.selected:hover, #chat-video-mat-menu.mode-menu .chat-popup-item.selected:hover, #chat-chatmodel-btn-popup.mode-menu .chat-popup-item.selected:hover { background:#fff; color:#111; }
#chat-agent-btn-popup.mode-menu .chat-popup-item.selected img.ctrl-icon, #chat-skills-btn-popup.mode-menu .chat-popup-item.selected img.ctrl-icon, #chat-chatmodel-btn-popup.mode-menu .chat-popup-item.selected img.ctrl-icon { filter:brightness(0) invert(1); opacity:1; }
#chat-agent-btn-popup.mode-menu .chat-popup-item.selected:hover img.ctrl-icon, #chat-skills-btn-popup.mode-menu .chat-popup-item.selected:hover img.ctrl-icon, #chat-chatmodel-btn-popup.mode-menu .chat-popup-item.selected:hover img.ctrl-icon { filter:brightness(0); opacity:1; }
#chat-agent-btn-popup.mode-menu .chat-popup-item small, #chat-skills-btn-popup.mode-menu .chat-popup-item small, #chat-ref-menu.mode-menu .chat-popup-item small, #chat-video-mat-menu.mode-menu .chat-popup-item small, #chat-chatmodel-btn-popup.mode-menu .chat-popup-item small { color:rgba(255,255,255,0.4); }
/* ⚠️ 8/20 v4：chatmodel 弹窗品牌图标（DeepSeek/Qwen 彩色 SVG）任何状态保持原色，不被 mode-menu 反白规则覆盖 */
#chat-chatmodel-btn-popup.mode-menu .chat-popup-item img.ctrl-icon.no-invert,
#chat-chatmodel-btn-popup.mode-menu .chat-popup-item:hover img.ctrl-icon.no-invert,
#chat-chatmodel-btn-popup.mode-menu .chat-popup-item.selected img.ctrl-icon.no-invert,
#chat-chatmodel-btn-popup.mode-menu .chat-popup-item.selected:hover img.ctrl-icon.no-invert { filter:none !important; opacity:1 !important; }

/* ⚠️ 8/16：常规滚轴样式（浏览器默认）——模型选择菜单专用，恢复默认宽度/颜色，不用全局 4px 细条
   !important 防止全局 *::-webkit-scrollbar 干扰 */
.native-scroll::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
.native-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.06) !important; border-radius: 5px !important; }
.native-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25) !important; border-radius: 5px !important; border: 2px solid rgba(20,22,26,0.9) !important; }
.native-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4) !important; }
.native-scroll { scrollbar-width: auto !important; scrollbar-color: rgba(255,255,255,0.25) rgba(255,255,255,0.06) !important; }

/* 模型下拉菜单 */
.model-dropdown { position: relative; margin-bottom: 6px; }
.model-dropdown-trigger { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); cursor: pointer; font-size: 13px; color: #fff; }
.model-dropdown-trigger:hover { background: rgba(255,255,255,0.1); }
.model-dropdown-arrow { margin-left: auto; font-size: 10px; color: rgba(255,255,255,0.4); }
.model-dropdown-menu { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 6px; background: rgba(20,22,26,0.97); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; overflow: hidden; box-shadow: 0 -4px 16px rgba(0,0,0,0.3); z-index: 1000; }
.model-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; color: rgba(255,255,255,0.8); }
.model-dropdown-item:hover { background: rgba(255,255,255,0.08); }
.model-dropdown-item.selected { background: rgba(99,102,241,0.2); color: #fff; }

.gen-act-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; color: rgba(255,255,255,0.6); cursor: pointer; padding: 3px 6px; font-size: 12px; }
.gen-act-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* 响应式 */
@media (max-width:900px) { .ai-chat-panel { width:100vw; } }

/* ═══════════════════════════════════════════════════════
   8/20 布局改造：resize 手柄 + 拖拽扩展 + 会话列表迁移
   ═══════════════════════════════════════════════════════ */

/* 对话主区 wrapper（header + history + messages + bottom 包在一起，
   展开态时与左侧会话列表并排） */
.chat-main { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }

/* 左侧会话列表侧边栏（收起态隐藏，展开态常驻） */
.chat-sidebar { display:none; flex-direction:column; width:240px; flex-shrink:0;
  border-right:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.02);
  height:100%; min-height:0; }
.chat-sidebar-header { height:48px; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0; }
.chat-sidebar-title { font-size:13px; font-weight:600; color:#fff; }
.chat-sidebar-new { width:26px; height:26px; border-radius:6px; border:none; background:rgba(255,255,255,0.08);
  color:#fff; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; }
.chat-sidebar-new:hover { background:rgba(255,255,255,0.16); }
.chat-sidebar-list { flex:1; overflow-y:auto; padding:8px; min-height:0; }
.chat-sidebar-item { display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:8px;
  cursor:pointer; font-size:13px; color:rgba(255,255,255,0.8); margin-bottom:2px; }
.chat-sidebar-item:hover { background:rgba(255,255,255,0.08); }
.chat-sidebar-item.active { background:rgba(99,102,241,0.22); color:#fff; }
.chat-sidebar-item .sb-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-sidebar-item .sb-btn { background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.6);
  font-size:12px; padding:2px; display:flex; align-items:center; opacity:0; flex-shrink:0; }
.chat-sidebar-item:hover .sb-btn { opacity:1; }
.chat-sidebar-item .sb-btn:hover { color:#fff; }
.chat-sidebar-empty { padding:10px; font-size:12px; color:rgba(255,255,255,0.4); text-align:center; }

/* 展开态：两列布局 [会话列表 | 对话主区] */
.ai-chat-panel.expanded { flex-direction:row; }
.ai-chat-panel.expanded .chat-sidebar { display:flex; }
.ai-chat-panel.expanded .chat-main { flex:1; }

/* resize 手柄：面板左边缘 6px 可拖拽竖条 */
.chat-resize-handle { position:absolute; left:0; top:0; width:8px; height:100%;
  cursor:ew-resize; z-index:260; display:flex; align-items:center; justify-content:center;
  touch-action:none; }
/* 高光竖线：与 AI 会话区背景色（#1e1e2e）一致，明暗交替呼吸（常驻，8/20 v2） */
.chat-resize-handle::before { content:''; position:absolute; left:2px; top:0; bottom:0; width:2px;
  background:#1e1e2e; animation:chatBorderBreath 3s ease-in-out infinite; }
.chat-resize-handle:hover::before, .chat-resize-handle.dragging::before { width:3px; left:1px; }
@keyframes chatBorderBreath { 0%,100% { background:#1e1e2e; box-shadow:0 0 0 rgba(0,0,0,0); } 50% { background:#45456a; box-shadow:0 0 16px rgba(99,102,241,0.45), 0 0 5px rgba(99,102,241,0.55); } }
/* 向左箭头（呼吸动画提示可拖拽）——暗色系，融入背景 */
.chat-resize-arrow { position:absolute; left:-4px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center; width:18px; height:18px;
  opacity:1; transition:opacity .2s; pointer-events:none;
  animation:resizeArrowHint 1.6s ease-in-out infinite; }   /* ⚠️ 8/20 v5：箭头常驻 + 一直呼吸（不再 hover 才显示） */
.chat-resize-arrow img { width:14px; height:14px;
  filter:brightness(0) invert(1) drop-shadow(0 0 4px rgba(255,255,255,0.35)); opacity:0.85; }
@keyframes resizeArrowHint { 0%,100% { transform:translateY(-50%) translateX(0); } 50% { transform:translateY(-50%) translateX(-5px); } }