/* ============ 设计系统 Token ============ */
  :root {
    /* 色彩 */
    --app-bg: #0e1014;
    --win-bg: #ffffff;
    --surface-1: #f6f7f9;   /* 次级面层：对话区 / 输入框 */
    --surface-2: #eef0f3;   /* 悬停 */
    --surface-3: #e6e9ee;   /* 边框/分隔 */
    --text-1: #16191d;      /* 主文字 */
    --text-2: #565d66;      /* 次文字 */
    --text-3: #8a929c;      /* 辅助/时间戳 */
    --brand: #1888EB;       /* 主青蓝（B+ 中段，与图标 bplus-cyan 同源，2026-09-17 方案 A） */
    --brand-strong: #214EC7; /* 青蓝深端 */
    --brand-soft: #E6F4FD;  /* 青蓝浅底（活跃态） */
    --accent: #f5a623;      /* 琥珀强调（模型标签/专家） */
    --danger: #e5484d;
    --ok: #18a058;   /* 成功/工作中绿(模式激活绿点、反馈等) */
    /* 用户气泡：按 UI 指令取 #f6f8fc（近白冷灰），无边框。
       与输入框的区分交给「位置与底色」而非描边——聊天界面用户气泡右对齐 + 独立底色已足够。 */
    --bubble-user-bg: #f6f8fc;
    /* 几何 */
    --r-lg: 18px;
    --r-md: 14px;
    --r-sm: 10px;
    --gap: 12px;
    --shadow-win: 0 24px 60px rgba(0,0,0,.45);
    --shadow-card: 0 1px 2px rgba(16,24,40,.06);
    --ease: .2s cubic-bezier(.4,0,.2,1);
    --font: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Source Han Sans SC",sans-serif;
  }
  /* hidden 属性必须优先于任何 display 规则(如 .auth-view/.image-panel 的 flex),
     否则透明遮罩会残留拦截点击 */
  [hidden] { display: none !important; }
  [data-theme="dark"] {
    --app-bg: #0a0b0e;
    --win-bg: #1b1d22;
    --surface-1: #222428;
    --surface-2: #2a2d33;
    --surface-3: #33373e;
    --text-1: #e9ebef;
    --text-2: #aab1bc;
    --text-3: #939aa6;
    --brand: #45B1F0;
    --brand-strong: #7ACBF5;
    --brand-soft: #1B2C3F;
    --accent: #f5a623;
    /* 深色下同理：气泡取比输入框（--win-bg #1b1d22）更亮一档的蓝灰，
       使「已发送」在深色界面里也有明确体块感。 */
    --bubble-user-bg: #2a303c;
    --shadow-win: 0 24px 60px rgba(0,0,0,.6);
    --shadow-card: 0 1px 2px rgba(0,0,0,.3);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--app-bg);
    font-family: var(--font);
    color: var(--text-1);
    height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
  }

  /* ============ 滚动条 ============
     UI 要求：不出现滚动条轨道/滑块，但保留原生滚动能力（滚轮 / 触控板 / 键盘 / 拖拽）。
     采用「透明化 + 零占位」而非 overflow:hidden —— 后者会连滚动能力一起砍掉。
     Firefox 用 scrollbar-width:none；Chromium/Safari 用 ::-webkit-scrollbar 归零。 */
  *, *::before, *::after { scrollbar-width: none; -ms-overflow-style: none; }
  ::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { background: transparent; }

  /* ============ 窗口外壳 ============ */
  /* 窗口改为**横向两列**：左列 = .sidebar（顶到顶、顶到底），右列 = .workspace。
     这是「侧栏顶到顶」的结构前提 —— 旧实现是纵向叠 [title-bar, main]，
     title-bar 横跨整行，必然在侧栏上方压掉 48px，侧栏无从顶到顶。 */
  .window {
    position: relative;
    width: min(680px, 94vw);
    height: min(780px, 92vh);
    background: var(--win-bg);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-win);
    display: flex; flex-direction: row;
    overflow: hidden;
    border: 1px solid var(--surface-3);
    transition: width var(--ease);
  }
  /* 面板开启时窗口加宽：对话恒为 680 列，侧栏/预览为附加面板，既不挤压也不遮挡 */
  @media (min-width: 561px) {
    .window:not(.sidebar-collapsed) { width: min(880px, 95vw); }
    .window.preview-open { width: min(1240px, calc(100vw - 16px)); }
    .window.preview-open:not(.sidebar-collapsed) { width: min(1440px, calc(100vw - 16px)); }
  }
  /* 预览(右侧栏)打开时窗口贴屏幕右侧:右内边距归零 + 右对齐,
     产物画布获得最大宽度,也符合「右侧面板贴边」的桌面窗口习惯。
     body.preview-open 由 app.js 的 MutationObserver 从 .window 镜像而来。 */
  body.preview-open { justify-content: flex-end; padding-right: 0; }
  body.preview-open .window { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  /* web / fullscreen 形态本身就是 100vw 满幅(见后文 body.web .window),
     但上面 .window.preview-open 的限宽特异性(0,3,0)更高,会反过来把窗口压窄到
     min(1440px, 100vw-16px) —— 预览面板右侧因此留出 16px 到数百 px 死白。
     这里显式拉回满幅,让展开的预览紧贴窗口右缘。 */
  body.fullscreen .window.preview-open,
  body.fullscreen .window.preview-open:not(.sidebar-collapsed),
  body.web .window.preview-open,
  body.web .window.preview-open:not(.sidebar-collapsed) { width: 100vw; max-width: none; }

  /* ============ 顶栏 ============ */
  /* 顶栏去底、去分割线：只剩右侧工具按钮，左侧视觉由 .sidebar 顶到顶承担。
     与页身同色（transparent，透出 --win-bg），不再在整页顶部切出一条横带。 */
  .title-bar {
    height: 48px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 12px;
    background: transparent;
    user-select: none;
  }
  /* 折叠态按钮独占左侧，用 margin-right:auto 把右侧工具组顶到最右。
     不能用 justify-content:space-between —— .title-left 为空时它会把
     工具组拉到左侧（实测 #help 距左边缘仅 12px，与侧栏挤在一起）。 */
  .title-left { display: flex; align-items: center; }
  .title-left .only-collapsed { margin-right: auto; }
  /* .title-left 已移除：品牌区迁入 .sidebar（见 .sidebar-brand）。
     保留同名占位规则以兼容尚未更新的旧入口页面。 */
  .title-left { display: none; }
  .brand {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: var(--text-1);
  }
  .brand .logo {
    width: 22px; height: 22px; border-radius: 7px;
    object-fit: contain;
  }
  .icon-btn {
    width: 32px; height: 32px; border: none; border-radius: 8px;
    background: transparent; color: var(--text-2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--ease), color var(--ease);
  }
  .icon-btn:hover { background: var(--surface-2); color: var(--text-1); }
  .icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .title-right { display: flex; align-items: center; gap: 2px; }

  /* ============ 主体布局 ============ */
  /* .main 保留为「侧栏 + 右列」的横向容器（DOM 未变，仅层级语义调整）。 */
  .main { flex: 1; display: flex; overflow: hidden; min-height: 0; position: relative; }
  /* 右列：顶栏横跨整个右列（只覆盖右列，不横跨侧栏），下方是行向的 .work-main
     （content + divider + preview）。preview 的宽度/伸缩规则是行向语义，
     若直接放进纵向的 workspace，width:0/flex:1 会转义为高度语义，
     预览面板会全宽叠到内容区下方——「输入区/预览到处乱跑」的根因。 */
  .workspace {
    flex: 1; min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .work-main {
    flex: 1; min-width: 0; min-height: 0;
    display: flex; flex-direction: row;
    overflow: hidden;
  }

  /* 侧栏是「一整块顶到顶」的独立列：品牌行 + 导航 + 账户都在同一底色上。
     上内边距为 0，让 .sidebar-brand 顶到窗口最上沿；
     背景在三种形态（桌面窗口 / web / fullscreen）下保持 --surface-1，
     与顶栏（transparent，透出 --win-bg）形成明确的「左列 / 右区」两分，
     而不是靠一条横线去切。 */
  .sidebar {
    width: 200px; flex-shrink: 0;
    background: var(--surface-1);
    border-right: 1px solid var(--surface-3);
    display: flex; flex-direction: column;
    padding: 0 10px 12px; gap: 6px;
    /* 侧栏自身不滚动（UI 要求滚动条只出现在中/右）。
       导航项数量由「近期对话」上限约束，正常不会溢出；
       万一溢出，由 .sidebar-foot 的 margin-top:auto 吸收，账户区仍贴底。 */
    overflow: hidden;
    transition: width var(--ease), padding var(--ease);
  }
  /* 品牌行：logo 居左，折叠按钮贴最右（margin-left:auto 推开）。
     高度与右列顶栏一致（48px），使 logo、折叠按钮、右侧工具按钮三者同一水平线。
     背景透明（继承 sidebar 的 --surface-1），与下方导航同色，不再另起底色。 */
  .sidebar-brand {
    display: flex; align-items: center; gap: 8px;
    height: 48px; flex-shrink: 0;
    background: transparent;
  }
  .sidebar-brand .icon-btn { margin-left: auto; }
  /* 折叠态专属控件：默认不占位、不可见（含键盘/读屏），仅在侧栏折叠时出现。 */
  .only-collapsed { display: none; }
  .window.sidebar-collapsed .only-collapsed { display: flex; }
  /* 折叠态：整条品牌行随侧栏收起（宽度 0），折叠按钮不再可见 ——
     此时由右列顶栏左侧的「展开」按钮接管（见 .title-bar 内 #collapse-expand）。 */
  .window.sidebar-collapsed .sidebar-brand { width: 0; overflow: hidden; }
  .sidebar > .new-chat { margin-top: 4px; }
  .window.sidebar-collapsed .sidebar {
    width: 0; padding-left: 0; padding-right: 0;
    border-right-color: transparent; overflow: hidden;
  }
  /* 折叠后 sidebar 宽 0，品牌行随之收起。 */
  .window.sidebar-collapsed .sidebar-brand { width: 0; overflow: hidden; }
  /* 遮罩：仅移动端(≤560)模态时浮现；桌面端为独立列无需遮罩 */
  .sidebar-scrim {
    position: absolute; inset: 0; z-index: 19;
    background: rgba(0,0,0,.32);
    opacity: 0; pointer-events: none; transition: opacity var(--ease);
  }
  .new-chat {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: var(--r-sm);
    border: 1px solid var(--surface-3); background: var(--win-bg);
    color: var(--text-1); font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background var(--ease);
  }
  .new-chat:hover { background: var(--surface-2); }
  .nav-label {
    font-size: 11px; color: var(--text-3);
    padding: 10px 10px 4px; letter-spacing: .04em;
  }
  .nav-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; border-radius: var(--r-sm);
    font-size: 13px; color: var(--text-2); cursor: pointer;
    transition: background var(--ease), color var(--ease);
    white-space: nowrap;
    /* min-width:0 是长标题省略号生效的前提：flex 子项默认 min-width:auto
       会拒绝收缩到内容宽度以下，导致 .conv-title 的 ellipsis 永不触发、标题撑破侧栏。 */
    min-width: 0;
  }
  .nav-item:hover { background: var(--surface-2); color: var(--text-1); }
  .nav-item.active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
  /* 近期对话列表：条目多时不应把 .sidebar-foot 顶出可见区域。
     给它 flex:1 + min-height:0 + overflow:auto，让它成为侧栏的「可滚动中间段」，
     上下两段（品牌行、账户区）保持固定。滚动条已全局隐藏（见顶部规则），
     故视觉上仍是一整块侧栏，但条目多时中间可滚、账户区始终可见。 */
  #nav-recent { flex: 1 1 0; min-height: 0; overflow-y: auto; }
  /* 近期对话分组标题：弱于 .nav-label（后者是「工作模式/近期对话」这类大分区），
     用小一号字 + 更浅色，形成「大分区 > 分组 > 条目」三级层次。 */
  .nav-group-label {
    font-size: 10.5px; color: var(--text-3);
    padding: 8px 10px 3px; letter-spacing: .04em; opacity: .8;
  }
  .nav-empty { color: var(--text-3); cursor: default; }
  .nav-empty:hover { background: transparent; }
  /* 会话条目：标题占满、删除按钮固定在右侧。
     按钮默认 opacity:0 且不可点击（pointer-events:none），悬停/聚焦时才浮现 ——
     常显会让侧栏视觉噪音很大；用 opacity 而非 display，保留键盘 Tab 可达性。 */
  .conv-item { position: relative; padding-right: 34px; }
  .conv-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1;
  }
  /* 当前会话的「N 轮」徽标:表明这条对话是多轮连续的(非被拆成新对话)。
     只在 active 条目上出现,弱化处理(小号 + 品牌浅底),不抢标题的视觉权重。 */
  .conv-rounds {
    flex-shrink: 0; margin-left: 6px; padding: 1px 7px;
    border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1.7;
    color: var(--brand-strong); background: var(--brand-soft);
    white-space: nowrap;
  }
  .conv-item:hover .conv-rounds { display: none; }   /* 悬停让位给删除按钮,避免右侧拥挤 */
  .conv-del {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 6px;
    background: transparent; color: var(--text-3); cursor: pointer;
    opacity: 0; pointer-events: none;
    transition: opacity var(--ease), background var(--ease), color var(--ease);
  }
  .conv-item:hover .conv-del,
  .conv-item:focus-within .conv-del { opacity: 1; pointer-events: auto; }
  .conv-del:hover { background: var(--surface-3); color: var(--danger); }
  .conv-del:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--brand); outline-offset: 1px; }
  /* 当前打开的会话:在 .nav-item.active(品牌浅底+强调字色+加粗) 之上，
     再加左侧强调条，使其在密集列表中一眼可辨「这就是正在看的会话」。 */
  .conv-item.active::before {
    content: ''; position: absolute; left: 0; top: 7px; bottom: 7px;
    width: 3px; border-radius: 2px; background: var(--brand);
  }
  .nav-item.active .dot { background: var(--ok); opacity: 1; box-shadow: 0 0 0 3px rgba(24,160,88,.16); }   /* 工作中绿点 */
  .nav-item .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; flex-shrink: 0; }
  /* 账户区是侧栏最后一项。原实现用 border-top 与上方导航分隔，
     但在「一整块侧栏」的形态下，账户 chip 本身就是独立的圆角块（hover 有底色），
     不需要再叠一条通栏横线——那是「分区」语义，与顶到顶的单列语义冲突。 */
  .sidebar-foot { margin-top: auto; padding-top: 6px; flex-shrink: 0; }
  .user-chip { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--ease); }
  .user-chip:hover { background: var(--surface-2); }
  .user-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .uc-name { font-size: 13px; color: var(--text-1); font-weight: 500; }
  .uc-sub { font-size: 11px; color: var(--text-3); }
  .uc-caret { margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); transition: transform var(--ease); flex-shrink: 0; }
  .user-chip[aria-expanded="true"] .uc-caret { transform: rotate(-135deg); }
  .user-chip-wrap { position: relative; }
  .user-menu {
    position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 30;
    background: var(--win-bg); border: 1px solid var(--surface-3);
    border-radius: var(--r-md); box-shadow: var(--shadow-card);
    padding: 12px; display: none; flex-direction: column; gap: 12px;
  }
  .user-menu.open { display: flex; }
  /* ===== 轻量弹层(账户设置/帮助与反馈):CSS 变量配色,明暗主题自适应 ===== */
  .um-dialog-scrim {
    position: fixed; inset: 0; z-index: 220;
    background: rgba(0, 0, 0, 0.4);
    display: flex; align-items: center; justify-content: center;
  }
  .um-dialog {
    width: min(420px, 92vw); max-height: 80vh; overflow: auto;
    background: var(--win-bg); border: 1px solid var(--surface-3);
    border-radius: var(--r-md); box-shadow: var(--shadow-card);
    padding: 16px;
  }
  .um-dialog-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; font-size: 14.5px; color: var(--text-1);
  }
  .um-dialog-x {
    border: none; background: transparent; color: var(--text-3);
    cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 6px;
  }
  .um-dialog-x:hover { background: var(--surface-2); color: var(--text-1); }
  .um-dialog-body { font-size: 13px; color: var(--text-1); line-height: 1.7; }
  .um-dialog-body label { display: block; font-size: 12px; color: var(--text-3); margin: 10px 0 4px; }
  .um-dialog-body input {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--surface-3); border-radius: var(--r-sm);
    background: var(--surface-1); color: var(--text-1); font-size: 13px;
  }
  .um-dialog-body .um-dialog-actions { margin-top: 14px; display: flex; gap: 8px; }
  .um-dialog-body button {
    padding: 8px 14px; border: none; border-radius: var(--r-sm);
    background: var(--brand); color: #fff; cursor: pointer; font-size: 13px;
  }
  .um-dialog-body button:disabled { opacity: 0.6; cursor: default; }
  .um-help-item { margin: 8px 0; padding-left: 10px; border-left: 2px solid var(--surface-3); }
  .um-help-item b { font-size: 12.5px; }
  /* 确认弹层(confirmDialog):替代原生 confirm,危险操作走红色主按钮 */
  .um-dialog-confirm { width: min(380px, 92vw); }
  .um-confirm-text { font-size: 13px; color: var(--text-2); line-height: 1.75; }
  .um-dialog > .um-dialog-actions {
    margin-top: 18px; display: flex; gap: 8px; justify-content: flex-end;
  }
  .um-dialog > .um-dialog-actions button {
    padding: 8px 16px; border: 1px solid transparent; border-radius: var(--r-sm);
    font-size: 13px; cursor: pointer;
  }
  .um-btn-ghost { background: var(--surface-2); color: var(--text-2); border-color: var(--surface-3); }
  .um-btn-ghost:hover { background: var(--surface-3); color: var(--text-1); }
  .um-btn-primary { background: var(--brand); color: #fff; }
  .um-btn-danger { background: var(--danger, #dc2626); color: #fff; }
  .um-btn-danger:hover { filter: brightness(1.08); }
  .um-head { display: flex; gap: 10px; align-items: flex-start; }
  .avatar.lg { width: 40px; height: 40px; font-size: 15px; }
  .um-name { font-size: 14px; font-weight: 600; color: var(--text-1); }
  .um-org { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
  .um-tag { display: inline-block; margin-top: 5px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--brand-soft); color: var(--brand-strong); }
  .um-quotas { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; border-top: 1px solid var(--surface-3); border-bottom: 1px solid var(--surface-3); }
  .um-q-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--text-2); margin-bottom: 5px; }
  .um-q-top b { color: var(--text-1); font-weight: 600; }
  .um-bar { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
  .um-bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
  .um-q.um-q-expert .um-q-top { color: var(--accent); }
  .um-q.um-q-expert .um-bar i { background: var(--accent); }
  .um-expert-val { color: var(--accent); font-weight: 700; }
  .um-q-note { font-size: 10.5px; color: var(--text-3); margin-top: 5px; }
  .um-actions { display: flex; flex-direction: column; gap: 2px; }
  .um-item { width: 100%; padding: 8px 8px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-1); font-size: 13px; cursor: pointer; text-align: left; }
  .um-item:hover { background: var(--surface-2); }
  .um-item.danger { color: var(--danger); }
  .um-item.danger:hover { background: rgba(229,72,77,.10); }
  .um-item.soft-danger { color: var(--danger); opacity: .75; font-size: 12px; }
  .um-item.soft-danger:hover { background: rgba(229,72,77,.08); opacity: 1; }
  .um-theme { display: flex; align-items: center; gap: 10px; padding: 2px 2px; }
  .um-theme-ic { width: 18px; height: 18px; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .um-theme-label { flex: 1; font-size: 13px; color: var(--text-1); }
  .switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; border: none; border-radius: 999px; background: var(--surface-3); cursor: pointer; padding: 0; transition: background var(--ease); }
  .switch[aria-checked="true"] { background: var(--brand); }
  .switch .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform var(--ease); }
  .switch[aria-checked="true"] .knob { transform: translateX(16px); }
  .switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  /* 标题栏内的 user-chip：下拉改为向下展开、右对齐、略宽（区别于侧栏底边向上展开） */
  .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg,#34d399,#10b981);
    color: #fff; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }

  /* 内容区 */
  .content {
    flex: 1; min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    overflow-y: auto;            /* 唯一的滚动容器（中/右） */
    overscroll-behavior: contain;
  }
  /* 滚动容器上移到 .content：对话 + 输入框处于同一个原生滚动流中，
     输入框用 sticky 钉在底部，滚动时「冻结」在原位。
     这样滚动条只有右侧那一条并贯穿到底，且不存在嵌套滚动（滚动链打架）。 */
  .chat-area {
    /* 必须是 flex: 0 0 auto（不被拉伸）：
       若写成 flex: 1 0 auto，内容不足一屏时它会被拉满 .content 的 475px，
       于是 scrollHeight 里塞进了「被拉伸的空白」，溢出判定恒为真 ——
       表现为短对话也补 163px 尾部留白，底部凭空多出一大段空。
       改为按内容取高后，.content 的 scrollHeight 才真实反映内容长度。 */
    flex: 0 0 auto;
    /* 尾部留白：sticky 输入框浮在滚动流末尾之上，会盖住末尾内容，
       故在 chat-area 末尾补与输入框等高的 padding，让最后一条消息能完整滚出遮挡。
       这里用 padding-bottom 而非 .content 的 padding-bottom 或 ::after：
       ① .content 的 padding-bottom 会收缩 sticky 约束矩形（实测让输入框悬在半空）；
       ② ::after + JS 动态类切换会导致 margin-top:auto 值跳变 → 输入框抖动（振荡链）；
       ③ chat-area 自身的 padding-bottom 既不碰 sticky 约束矩形，也不参与 margin-top:auto
          的空间计算（margin-top:auto 吸收的是 .content 的剩余空间，chat-area 变高只是
          让剩余空间减少相应的量，composer 仍钉底，无跳变）。
       短对话时此 padding 被 margin-top:auto 吸收（视觉无变化）；溢出时提供滚动空间。
       --composer-h 由 JS ResizeObserver 实测写回，保证与输入框真实高度同步。 */
    flex: 0 0 auto;
    padding: 20px 22px;
    padding-bottom: var(--composer-h, 132px);
    display: flex; flex-direction: column; gap: 18px;
    background: var(--surface-1);
    scroll-behavior: smooth;
    position: relative;
  }
  /* 思考中指示（三点跳动） */
  .thinking { display: inline-flex; gap: 5px; align-items: center; height: 18px; }
  .thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: think 1.2s infinite ease-in-out; }
  .thinking i:nth-child(2) { animation-delay: .18s; }
  .thinking i:nth-child(3) { animation-delay: .36s; }
  @keyframes think { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
  /* P2：全面降级动画 —— 尊重 prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .thinking i { opacity: .5; }
  }
  /* P2：焦点环审计 —— 所有可交互元素键盘焦点可见 */
  .new-chat:focus-visible, .nav-item:focus-visible, .model-opt:focus-visible,
  .chip:focus-visible, .model:focus-visible, .send:focus-visible,
  .um-item:focus-visible, .prod-card:focus-visible, .products:focus-visible,
  .pv-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .model:focus-visible, .prod-card:focus-visible, .products:focus-visible { outline-offset: 1px; }
  .send:focus-visible { outline-offset: 3px; }
  /* P2：触摸设备长按提示（title/aria-label 在触屏不显示，用 toast 补位） */
  .touch-tip { position: fixed; z-index: 80; max-width: 220px; background: #1b1d22; color: #e9ebef; font-size: 12px; line-height: 1.4; padding: 7px 10px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.45); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
  .touch-tip.show { opacity: 1; transform: none; }
  /* 回到底部悬浮按钮：上滑看历史时出现 */
  .scroll-bottom {
    position: absolute; right: 16px; bottom: 16px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--win-bg); color: var(--text-1);
    border: 1px solid var(--surface-3); box-shadow: var(--shadow-win);
    display: none; align-items: center; justify-content: center;
    cursor: pointer; z-index: 6;
    transition: background var(--ease), opacity var(--ease), transform var(--ease);
  }
  .scroll-bottom.show { display: flex; }
  .scroll-bottom:hover { background: var(--surface-1); }
  .scroll-bottom:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

  /* 消息 */
  .msg { display: flex; gap: 10px; max-width: 92%; animation: fadeIn .25s ease; }
  .msg.user { align-self: flex-end; flex-direction: row-reverse; }
  .msg .ava {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
  }
  .msg.bot .ava { background: linear-gradient(135deg, #214EC7, #1CC6EE); }
  .msg.user .ava { background: linear-gradient(135deg,#34d399,#10b981); }
  .bubble {
    padding: 10px 14px; border-radius: 14px;
    font-size: 14px; line-height: 1.65; word-wrap: break-word;
    box-shadow: var(--shadow-card);
    max-width: 100%; min-width: 0;   /* 防止长代码/长内容撑破气泡溢出视窗 */
  }
  .msg.bot .bubble { background: transparent; box-shadow: none; color: var(--text-1); padding-left: 2px; padding-right: 2px; }
  /* 用户气泡：实底无边框（UI 指令）。阴影一并去掉——无边框 + 阴影会让边缘发糊，
     「干净色块」的观感要求三者只留其一：留色块。 */
  .msg.user .bubble {
    background: var(--bubble-user-bg); color: var(--text-1);
    border: none; border-bottom-right-radius: 4px;
    box-shadow: none; padding: 10px 14px;
  }
    /* 对话区图片消息(产物入库时展示,点击跳右侧预览) */
    .msg .bubble.img-msg { padding: 8px; cursor: pointer; width: fit-content; max-width: 280px; }
    .msg .bubble.img-msg:hover { outline: 1px solid var(--brand); }
    .msg-img { display: block; max-width: 260px; max-height: 200px; border-radius: 8px; object-fit: cover; }
    .msg-img-cap { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); padding: 6px 4px 2px; }
    .msg-img-cap span { margin-left: auto; }
    /* 意图路由提示:气泡底部小字 */
    .route-hint { margin-top: 8px; font-size: 11px; color: var(--text-3); }
    /* AI 生成内容标识(合规显式标识) */
    .ai-tag { margin-top: 7px; font-size: 10px; color: var(--text-3); opacity: .8; letter-spacing: .02em; }
    .msg.err .ai-tag { display: none; }
    .pv-ai-note { font-size: 10px; color: var(--text-3); margin-left: 4px; font-weight: 400; }
    /* 快捷回复选项:AI 让用户选择时渲染可点按钮 */
  .quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .qr-btn {
    padding: 6px 14px; border-radius: 16px; border: 1px solid var(--brand);
    background: var(--brand-soft); color: var(--brand-strong);
    font-size: 12.5px; cursor: pointer; font-family: var(--font); transition: all var(--ease);
  }
  .qr-btn:hover { background: var(--brand); color: #fff; }
  /* 输入引导:AI 要求提供信息时,提示在输入框回复 */
  .ask-hint { margin-top: 8px; font-size: 11.5px; color: var(--brand-strong); opacity: .9; }
    /* 模式子卡片:系统功能卡片,独立样式不伪装成 AI 消息 */
    .mode-card {
      align-self: flex-start; max-width: 92%; margin: 8px 0;
      background: var(--win-bg); border: 1px solid var(--surface-3);
      border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-card);
      animation: fadeIn .25s ease;
    }
    .mode-card-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
    .mode-card-desc { font-size: 12px; color: var(--text-2); margin-bottom: 10px; line-height: 1.5; }
    .mode-card-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .mode-card-chips .chip { font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--surface-3); border-radius: 16px; padding: 6px 13px; cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease); }
    .mode-card-chips .chip:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
    /* 👍👎 反馈提交后的确认态 */
    .act.fb-done { color: var(--brand); border-color: var(--brand); opacity: .85; }
  .bubble .bcontent { margin: 0; } .bubble .bcontent > :first-child { margin-top: 0; } .bubble .bcontent > :last-child { margin-bottom: 0; }
  .bubble .bcontent p { margin: 0 0 8px; } .bubble .bcontent p:last-child { margin-bottom: 0; }
  .bubble .bcontent h1, .bubble .bcontent h2, .bubble .bcontent h3, .bubble .bcontent h4 { line-height: 1.4; margin: .55em 0 .3em; font-weight: 700; }
  .bubble .bcontent h1 { font-size: 1.12em; } .bubble .bcontent h2 { font-size: 1.04em; } .bubble .bcontent h3 { font-size: .98em; }
  /* 4 级（含 Markdown 4-6 级降级）用小字号+次级色，避免在 680px 气泡里过于压迫 */
  .bubble .bcontent h4 { font-size: .92em; font-weight: 600; color: var(--text-2); }
  .bubble .bcontent ul, .bubble .bcontent ol { margin: .35em 0; padding-left: 1.35em; } .bubble .bcontent li { margin: .18em 0; }
  .bubble .bcontent a { color: var(--brand); text-decoration: underline; }
  .bubble .bcontent hr { border: none; border-top: 1px solid var(--surface-3); margin: .7em 0; }
  /* Markdown 表格:正常表格排版;宽表格横向滚动不撑破气泡 */
  .bubble .bcontent table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: .6em 0; font-size: 12.5px; }
  .bubble .bcontent th, .bubble .bcontent td { border: 1px solid var(--surface-3); padding: 6px 10px; text-align: left; }
  .bubble .bcontent th { background: var(--surface-2); font-weight: 600; white-space: nowrap; }
  /* Markdown 围栏代码块 + HTML 预览运行按钮
     代码区限高+双向滚动:长代码在块内滚动,顶部预览按钮行始终可见 */
  .bubble .bcontent .md-code-block { margin: .6em 0; border: 1px solid var(--surface-3); border-radius: 8px; overflow: hidden; max-width: 100%; }
  .bubble .bcontent .md-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; background: var(--surface-2); font-size: 11px; color: var(--text-3); }
  .bubble .bcontent .md-code-run { flex-shrink: 0; border: none; background: var(--brand); color: #fff; font-size: 11px; padding: 3px 12px; border-radius: 6px; cursor: pointer; font-family: var(--font); }
  .bubble .bcontent .md-code { margin: 0; padding: 10px 12px; background: var(--surface-1); font-size: 12px; line-height: 1.55; overflow: auto; max-height: 320px; white-space: pre; font-family: ui-monospace,Menlo,Consolas,monospace; color: var(--text-1); }
  /* 代码产物的预览运行/返回按钮 */
  .pv-run, .pv-back { margin-left: 8px; padding: 5px 14px; border-radius: 8px; border: 1px solid var(--surface-3); background: var(--win-bg); color: var(--text-1); font-size: 12.5px; cursor: pointer; font-family: var(--font); }
  .pv-run:hover, .pv-back:hover { border-color: var(--brand); color: var(--brand-strong); }
  .bubble code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-family: ui-monospace,Menlo,Consolas,monospace; font-size: 12.5px; }
  .pv-doc { font-size: 13.5px; line-height: 1.6; color: var(--text-1); }
  .pv-doc h3 { font-size: 16px; margin: 0 0 8px; } .pv-doc h4 { font-size: 13px; margin: 14px 0 6px; color: var(--text-2); }
  .pv-doc p { margin: 0 0 10px; } .pv-doc p.lead { color: var(--text-2); }
  /* 免责声明:合规必备但应弱化,不与正文争夺注意力(浅灰小字 + 左侧细线) */
  .pv-doc p.disclaimer-note { color: var(--text-3); font-size: 12px; line-height: 1.6; margin: 14px 0 4px; padding-left: 10px; border-left: 2px solid var(--surface-3); }
  .pv-doc p.disclaimer-note b { color: var(--text-3); font-weight: 500; }
  .pv-doc ul { margin: 0 0 10px; padding-left: 18px; } .pv-doc li { margin: 3px 0; }
  .pv-doc table.pv-table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12.5px; }
  .pv-doc table.pv-table th, .pv-doc table.pv-table td { border: 1px solid var(--border, #e6e8eb); padding: 5px 8px; text-align: left; }
  .pv-doc table.pv-table th { background: var(--surface-2, #f3f4f6); }
  .pv-doc .tags span { display: inline-block; background: var(--surface-2, #f3f4f6); border-radius: 10px; padding: 2px 8px; margin: 2px 4px 2px 0; font-size: 11.5px; }
  .caret { display: inline-block; width: 7px; height: 15px; background: var(--brand); margin-left: 2px; vertical-align: text-bottom; animation: blink 1s steps(2) infinite; border-radius: 1px; }
  @keyframes blink { 50% { opacity: 0; } }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* 产物卡（消息内，可点击唤起预览） */
  .prod-card {
    margin-top: 8px; padding: 8px 10px;
    border: 1px solid var(--surface-3); border-radius: 10px;
    font-size: 12.5px; color: var(--text-2);
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    transition: background var(--ease), border-color var(--ease);
  }
  .prod-card:hover { background: var(--surface-2); border-color: var(--brand); color: var(--text-1); }

  /* 内联交付物（兽药饲料结论等结构化 doc）：直接作为正文的一部分呈现，
     不再包一层卡片——结论本身就是内容，不是「附件」。 */
  .bubble .bcontent .inline-doc { margin-top: 12px; }
  .bubble .bcontent .inline-doc > :first-child { margin-top: 0; }
  .bubble .bcontent .inline-doc h4 { font-size: .92em; font-weight: 600; color: var(--text-2); margin: 14px 0 5px; }
  .bubble .bcontent .inline-doc p { margin: 0 0 7px; }
  .bubble .bcontent .inline-doc ul { margin: .3em 0; padding-left: 1.35em; }
  .bubble .bcontent .inline-doc li { margin: .18em 0; }
  /* 详情入口：极淡文字链，保证可达性但不抢视觉重心 */
  .inline-doc-link {
    display: inline-block; margin-top: 10px; padding: 0;
    border: none; background: none; cursor: pointer;
    font: inherit; font-size: 12px; color: var(--text-3);
    text-decoration: underline; text-underline-offset: 3px;
    transition: color var(--ease);
  }
  .inline-doc-link:hover { color: var(--brand); }

  /* 能力卡片（身份/能力问答后展示，可点击切换工作模式） */
  .cap-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: center; }
  .cap-card {
    padding: 10px 14px; border: 1px solid var(--surface-3); border-radius: 12px;
    background: var(--surface-1); font-size: 13px; color: var(--text-1); cursor: pointer;
    transition: background var(--ease), border-color var(--ease), transform var(--ease);
  }
  .cap-card:hover { background: var(--surface-2); border-color: var(--brand); transform: translateY(-1px); }
  .cap-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

  /* AI 回复操作条 */
  .actions {
    display: flex; flex-direction: column; gap: 8px;
    margin-left: 40px; max-width: 92%;
    animation: fadeIn .25s ease;
  }
  .products {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; color: var(--text-2); cursor: pointer;
    align-self: flex-start; transition: color var(--ease);
  }
  .products:hover { color: var(--brand-strong); }
  .action-row { display: flex; align-items: center; gap: 2px; }
  .act {
    width: 32px; height: 32px; border: none; border-radius: 8px;
    background: transparent; color: var(--text-3); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--ease), color var(--ease);
  }
  .act:hover { background: var(--surface-2); color: var(--text-1); }
  .act:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
  .act.active, .act.active:hover { color: var(--brand); background: var(--brand-soft); }
  .act.done { color: var(--brand); }
  /* 首屏欢迎 hero（logo + slogan + hint） */
  .welcome-hero { text-align: center; padding: 40px 24px 8px; animation: fadeIn .3s ease; }
  .welcome-hero .wh-mark { display: inline-flex; filter: drop-shadow(0 6px 16px rgba(47,107,255,.28)); }
  /* 品牌图形标图片(与顶栏 logo.png 同一资源) */
  .welcome-hero .wh-mark .brand-mark, .auth-brand .brand-mark {
    width: 58px; height: 58px; border-radius: 15px; object-fit: contain;
  }
  .welcome-hero .wh-brand { margin-top: 14px; font-size: 22px; font-weight: 700; color: var(--text-1); letter-spacing: .3px; }
  .welcome-hero .wh-slogan { margin-top: 8px; font-size: 15px; color: var(--text-2); }
  .welcome-hero .wh-hint { margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
  /* 空状态：首屏建议提问 */
  .suggest { margin: 18px auto 4px; max-width: 92%; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; animation: fadeIn .25s ease; }
  .suggest-label { width: 100%; font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
  .suggest .chip { font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--surface-3); border-radius: 16px; padding: 6px 13px; cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease); }
  .suggest .chip:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
  .suggest .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
  /* 专家已接通状态条 */
  .expert-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--brand-strong); font-size: 12.5px; font-weight: 600; }
  .expert-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #2faa5b; flex-shrink: 0; }
  .msg.bot.expert-connected .bubble { border-left: 3px solid var(--brand); padding-left: 10px; }
  .hy3 {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border-radius: 20px;
    color: var(--text-2); font-size: 12px; font-weight: 600;
  }
  .hy3 .ping { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(47,107,255,.18); }

  /* ============ 右侧产物预览画布 ============ */
  .preview {
    width: 0; flex-shrink: 0; overflow: hidden;
    background: var(--surface-1);
    display: flex; flex-direction: column;
    transition: width var(--ease);
  }
  /* 预览默认与对话等宽（50/50），由 flex 均分，拖拽时改为固定 px */
  .window.preview-open .content { flex: 1 1 0%; }
  .window.preview-open .preview { flex: 1 1 0%; width: auto; min-width: 0; }
  /* 可拖拽分隔条：调整对话 / 预览宽度 */
  .divider {
    display: none; width: 7px; flex-shrink: 0; cursor: col-resize;
    position: relative; align-self: stretch; background: transparent; z-index: 6;
  }
  .window.preview-open .divider { display: block; }
  .divider::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
    transform: translateX(-50%); background: var(--surface-3); transition: background var(--ease);
  }
  .divider::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 3px; height: 34px; border-radius: 3px; background: var(--surface-3);
    opacity: 0; transition: opacity var(--ease), background var(--ease);
  }
  .divider:hover::after, .divider:focus-visible::after, .divider.dragging::after { opacity: 1; }
  .divider:hover::before, .divider.dragging::before { background: var(--brand); }
  .divider:focus-visible { outline: none; }
  body.resizing { cursor: col-resize; user-select: none; }
  .preview-head {
    flex-shrink: 0; height: 46px; padding: 0 8px 0 14px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--surface-3); background: var(--win-bg);
  }
  /* 预览关闭按钮:更醒目,避免用户找不到 */
  #pv-close {
    margin-left: auto; background: var(--surface-2); color: var(--text-1);
    border: 1px solid var(--surface-3);
  }
  #pv-close:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
  .preview-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-1); min-width: 0; }
  .preview-title .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv-chip {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
    background: var(--brand-soft); color: var(--brand-strong); flex-shrink: 0;
    letter-spacing: .03em;
  }
  .preview-tabs { display: flex; gap: 4px; margin-left: 4px; overflow-x: auto; flex: 1; }
  .pv-tab {
    flex-shrink: 0; padding: 4px 10px; border-radius: 8px; font-size: 12px;
    color: var(--text-2); background: var(--surface-1); border: 1px solid transparent;
    cursor: pointer; white-space: nowrap; transition: all var(--ease);
  }
  .pv-tab:hover { background: var(--surface-2); }
  .pv-tab.active { background: var(--brand-soft); color: var(--brand-strong); border-color: var(--brand); font-weight: 600; }
    /* tab 内关闭按钮:默认隐藏,hover 时显示 */
    .pv-tab-x { margin-left: 5px; font-size: 13px; line-height: 1; opacity: 0; transition: opacity .15s, color .15s; }
    .pv-tab:hover .pv-tab-x { opacity: .5; }
    .pv-tab-x:hover { opacity: 1 !important; color: var(--danger); }
  .preview-body { flex: 1; overflow: auto; min-height: 0; }
  /* 按需交付条(结构化数据 JSON-LD 等):贴在预览面板底部,低调但不藏着 */
  .pv-deliver {
    flex: none; display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-top: 1px solid var(--surface-3);
    background: var(--surface-2); font-size: 12px; color: var(--text-3);
  }
  .pv-deliver-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv-deliver-btns { display: flex; gap: 6px; flex: none; }
  .pv-deliver-btns button {
    padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--surface-3);
    background: var(--win-bg); color: var(--text-2); font-size: 12px; cursor: pointer;
  }
  .pv-deliver-btns button:hover { color: var(--text-1); border-color: var(--text-3); }
  /* 产物列表视图:浏览/切换全部历史产物 */
  .pv-list { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
  .pv-list-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--surface-3); border-radius: 10px; background: var(--surface-1);
    cursor: pointer; transition: all var(--ease);
  }
  .pv-list-item:hover { border-color: var(--brand); background: var(--brand-soft); }
  .pv-list-ico { color: var(--text-2); display: inline-flex; }
  .pv-list-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .pv-list-name { font-size: 12.5px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv-list-type { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
  .pv-list-go { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
  /* 列表项删除按钮:单独删除某个产物 */
  .pv-list-del {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
    border: none; background: transparent; color: var(--text-3);
    cursor: pointer; font-size: 12px; line-height: 1; transition: all var(--ease);
  }
  .pv-list-del:hover { background: var(--danger); color: #fff; }
  #pv-delete:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
  /* 图片/图形产物（GEO 评分卡一类固定画布 SVG）的适配容器。
     实测问题：画布 540×359，而在 1920 视口下预览面板展开后宽约 856、高约 986，
     横向填充仅 63%、纵向仅 36% —— object-fit: contain 只保证「不溢出」，
     不负责「填充」，于是画布居中后四周留下大片网格空白，观感像坏图。
     这里用容器自身做等比放大（width:100% / max-height:100% / aspect-ratio 保持），
     让固定比例画布在可用空间内尽量铺满，空白只剩必要的上下留白。 */
  .pv-img { width: 100%; height: 100%; min-height: 320px; display: flex; align-items: center; justify-content: center;
    padding: 24px; box-sizing: border-box;
    background: repeating-conic-gradient(#e9ecef 0% 25%, #f4f6f8 0% 50%) 50% / 22px 22px; }
  .pv-img img {
    width: 100%; height: 100%; max-width: 100%; max-height: 100%;
    object-fit: contain; object-position: center;
  }
  .pv-web { width: 100%; height: 100%; min-height: 480px; border: none; background: #fff; display: block; }
  .pv-code { margin: 0; padding: 16px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; color: var(--text-1); background: var(--surface-1); min-height: 100%; overflow: auto; white-space: pre; }
  .pv-code .kw { color: #c0341d; } .pv-code .str { color: #1a7f37; } .pv-code .com { color: var(--text-3); }
  .pv-code-wrap { position: relative; height: 100%; }
    /* 代码产物「预览运行」后的网页视图:flex 布局保证「返回代码」按钮恒定可见 */
    .pv-run-wrap { display: flex; flex-direction: column; height: 100%; }
    .pv-run-wrap .pv-back { flex-shrink: 0; width: fit-content; margin: 8px 10px 0; }
    .pv-run-frame { flex: 1; min-height: 0; }
    .pv-run-frame iframe { width: 100%; height: 100%; border: none; background: #fff; display: block; }
  .pv-copy { position: absolute; top: 10px; right: 12px; z-index: 2; font-size: 12px; color: var(--text-2); background: var(--win-bg); border: 1px solid var(--surface-3); border-radius: 8px; padding: 4px 11px; cursor: pointer; transition: background var(--ease), color var(--ease); }
  .pv-copy:hover { background: var(--surface-2); color: var(--text-1); }
  .pv-copy:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
  .pv-img img { cursor: zoom-in; }
  .pv-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.78); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 24px; cursor: zoom-out; }
  .pv-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
  .pv-empty { padding: 32px 20px; color: var(--text-3); font-size: 13px; text-align: center; }
  .pv-doc { padding: 20px 22px; color: var(--text-1); font-size: 13.5px; line-height: 1.7; }
  .pv-doc h3 { font-size: 16px; margin: 0 0 10px; } .pv-doc h4 { font-size: 14px; margin: 16px 0 8px; }
  .pv-doc p { margin: 0 0 10px; color: var(--text-2); }
  .pv-doc table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12.5px; }
  .pv-doc th, .pv-doc td { border: 1px solid var(--surface-3); padding: 6px 8px; text-align: left; }
  .pv-doc th { background: var(--surface-1); color: var(--text-1); }
  .pv-doc .score { color: var(--brand-strong); font-weight: 700; }

  /* ============ 底栏 ============ */
  /* 输入框 sticky 常驻底部：它仍是滚动流中的成员（参与布局与滚动高度计算），
     但视觉上钉在视口底部，滚到任何位置都可见可输入。
     z-index 保证滚动内容经过其下方时不会透出；背景取不透明色遮住滚过的内容。 */
  .composer {
    position: sticky; bottom: 0; z-index: 5;
    flex-shrink: 0;
    /* margin-top:auto 是「短对话钉底」的关键：.chat-area 按内容取高（flex:0 0 auto），
       内容不足一屏时若无此规则，composer 会停在文档流末端（紧贴对话区），
       视觉上悬在窗口中上部——「输入框到处乱跑」的根因。
       auto 外边距把剩余空间全部吃进 composer 上方，将其压到容器底部；
       内容溢出时剩余空间为 0，auto 归零，composer 回归滚动流末尾，sticky 接管。
       不能用 justify-content:flex-end 替代：溢出时顶部内容会变得不可滚达（flexbox 已知缺陷）。 */
    margin-top: auto;
    /* 白色遮罩：本区固定在窗口底部，滚动内容从其下方穿过。
       半透明白 + 背景模糊：滚过的消息被柔化，既暗示「下面还有内容」又不干扰输入；
       无边框——与上方对话区之间不画线，遮罩自身的对比变化就是分界。
       降级：不支持 backdrop-filter 的浏览器回退实底白，仍能完全遮住文字。 */
    background: color-mix(in srgb, var(--win-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    padding: 6px 14px 6px;
  }
  @supports not (backdrop-filter: blur(1px)) {
    .composer { background: var(--win-bg); }
  }
  /* 输入框上方动态子能力条:随当前模式切换,点击即发送对应快捷提问 */
  .mode-chips-bar {
    display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; align-items: center;
    min-height: 0; transition: min-height var(--ease);
  }
  .mode-chips-bar:empty { display: none; }
  .chips-mode-label {
    font-size: 11px; color: var(--text-3); margin-right: 4px; white-space: nowrap;
  }
  .mode-chips-bar .chip {
    padding: 5px 13px; border-radius: 16px;
    border: 1px solid var(--surface-3); background: var(--win-bg);
    font-size: 12.5px; color: var(--text-2); cursor: pointer;
    transition: all var(--ease); white-space: nowrap;
  }
  .mode-chips-bar .chip:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }

  /* composer 背景在网页/全屏形态下已改为 transparent，
     输入框直接浮在近白页面上，浅色主题下 --win-bg(#fff) 与 --surface-1(#f6f7f9)
     亮度差仅约 2%，边界不可辨。故补 1px 实边框提供明确边界信号，
     聚焦时边框转品牌蓝 + 保留外发光，形成「底色分层 + 边框 + 聚焦」三级状态。 */
  .input-shell {
    border-radius: var(--r-md);
    /* 输入框自身也是遮罩：它叠在半透明的 .composer 之上，
       若这里仍是实心 --win-bg，会出现「外壳半透明、内框实心白」的双层质感断层。
       这里用近实底（+ 轻微模糊），既保证输入文字始终清晰可读（可读性优先），
       又与外壳的遮罩语言一致。 */
    background: color-mix(in srgb, var(--win-bg) 92%, transparent);
    border: 1px solid var(--surface-3);
    /* 上下内边距加大到 12px：输入行本身只有 22.4px 高（textarea 单行），
       左右 12px 而上下仅 8px 时，视觉上「文字顶在框里」、横向比纵向松。
       取 12px 让四边呼吸一致。 */
    padding: 12px 12px 8px;
    transition: box-shadow var(--ease), border-color var(--ease);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .input-shell { background: var(--win-bg); }
  }
  .input-shell:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
  }
  /* 输入框外下方的 AI 生成提示：常驻可见，弱化不干扰。
     下外边距必须为 0：它到窗口底沿的距离已由 .composer 的下内边距决定，
     两处同时给值会叠加（实测 margin-bottom:7px + padding-bottom:4px = 11px，
     再叠 line-height 的半行差，观感就是「注释下方一大段空」）。
     单点控制：只由 .composer 的 padding-bottom 决定，便于整体调。 */
  .composer-note {
    margin: 7px 0 0; text-align: center;
    font-size: 11px; line-height: 1.2;
    color: var(--text-3); opacity: .85;
  }
  .foot-right { display: flex; align-items: center; gap: 8px; }
  .model {
    position: relative;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 10px;
    background: var(--surface-1); color: var(--text-1);
    font-size: 12px; font-weight: 600; cursor: pointer; user-select: none;
  }
  .model:hover { background: var(--surface-2); }
  .model[aria-expanded="true"] { background: var(--surface-2); }
  .model-menu {
    position: absolute; bottom: calc(100% + 8px); right: 0; left: auto;
    min-width: 172px; padding: 6px;
    background: var(--win-bg); border: 1px solid var(--surface-3);
    border-radius: var(--r-md); box-shadow: var(--shadow-card);
    display: none; flex-direction: column; gap: 2px; z-index: 30;
  }
  .model.open .model-menu { display: flex; }
  .model-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 8px 10px; border: none; border-radius: var(--r-sm);
    background: transparent; color: var(--text-1); font-size: 13px; cursor: pointer; text-align: left;
  }
  .model-opt:hover { background: var(--surface-2); }
  .model-opt.active { color: var(--brand-strong); font-weight: 600; }
  .model-opt .ck { width: 14px; height: 14px; opacity: 0; display: inline-flex; }
  .model-opt.active .ck { opacity: 1; color: var(--brand-strong); }
  .call-expert-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 2px; padding: 7px 12px;
    background: transparent; border: none;
    color: var(--text-2); font-size: 13px; cursor: pointer;
    border-radius: var(--r-sm); transition: background var(--ease), color var(--ease);
  }
  .call-expert-btn:hover { background: var(--surface-2); color: var(--text-1); }
  .call-expert-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .expert-tag {
    display: inline-flex; align-items: center;
    background: var(--accent); color: #fff;
    padding: 2px 9px; border-radius: 12px; font-weight: 600; font-size: 11px;
  }
  .caret-down { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-2); }
  textarea#input {
    width: 100%; border: none; outline: none; resize: none;
    font-family: var(--font); font-size: 14px; line-height: 1.6;
    background: transparent; color: var(--text-1);
    max-height: 120px;
  }
  textarea#input::placeholder { color: var(--text-3); }
  .input-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; min-height: 36px; }
  .foot-left { display: flex; gap: 4px; }
  .send {
    width: 36px; height: 36px; border: none; border-radius: 10px;
    background: var(--brand); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--ease), transform var(--ease);
  }
  .send:hover { background: var(--brand-strong); }
  .send:active { transform: scale(.94); }
  .send:disabled { background: var(--surface-3); color: var(--text-3); cursor: default; }

  .time { font-size: 11px; color: var(--text-3); text-align: center; margin: 4px 0; }

  /* 移动端：侧边栏 / 预览均变抽屉覆盖 */
  @media (max-width: 920px) {
    .preview { position: absolute; right: 0; top: 0; bottom: 0; height: 100%; z-index: 21; box-shadow: var(--shadow-win); }
    .window.preview-open .preview { width: min(440px, 86vw); }
    .window.preview-open .divider { display: none; }
  }
  @media (max-width: 560px) {
    body { padding: 0; }
    .window { width: 100vw; height: 100vh; border-radius: 0; border: none; }
    .sidebar { position: absolute; z-index: 20; height: 100%; box-shadow: var(--shadow-win); }
    .window:not(.sidebar-collapsed) .sidebar-scrim { opacity: 1; pointer-events: auto; }
    .composer { padding: 8px 10px 10px; }
    .mode-chips-bar .chip { padding: 4px 10px; font-size: 12px; }
    .foot-right { gap: 6px; }
  }

  /* ============ 全屏业务页（full.html 用 body.fullscreen；web.html 用 body.web） ============
     两种入口共用同一套全屏规则：fullscreen 是工作台形态（隐藏关闭按钮、无知识库等），
     web 是网页部署形态（保留全部功能按钮）。共用规则避免两套布局各自漂移。 */
  /* 让 .window 占满视口，压过上方基于 min() 的宽度档位；
     特异性 body.fullscreen .window (0,2,1) > .window:not(.sidebar-collapsed) (0,2,0) */
  body.fullscreen, body.web { padding: 0; height: 100vh; display: block; background: var(--surface-1); }
  body.fullscreen .window, body.web .window {
    width: 100vw; height: 100vh; max-width: none;
    border-radius: 0; border: none; box-shadow: none; margin: 0;
  }
  /* 对话区与页面同色：去掉对话区的独立底色，避免在整页中切出一块矩形色块 */
  body.fullscreen .chat-area, body.web .chat-area { background: transparent; }
  body.fullscreen #close { display: none; }
  /* 对话模块（chat-area+composer）居中限宽，但**左边界固定**：
     content 用 align-items:stretch（不再 center），居中交给子项 margin:0 auto。
     这样预览面板展开/收起时，可用宽度变化只会压缩右侧，
     消息左边界不移动——旧实现（父级 center）会让整个对话区重新居中，
     表现为「预览一开，消息横向跳一下」。 */
  body.fullscreen .content, body.web .content { align-items: stretch; }
  body.fullscreen .chat-area, body.web .chat-area {
    align-items: center; width: 100%; max-width: 960px; margin: 0 auto;
    /* 下内边距必须为 0：.composer 是 .content 的兄弟节点（不在 .chat-area 内），
       若此处保留下内边距，会在「最后一条消息」与「输入框顶边」之间塞进死空白。
       左右内边距也归零：.chat-area 已限宽 960px 并居中，再叠 40px 左右内缩
       会与 .msg 的 max-width:92% 重复留白，消息左缘被推离 40px、观感贴不住边。
       仅保留顶部 28px 作为首条消息与顶栏的呼吸间距。 */
    padding: 28px 0 0;
    padding-bottom: var(--composer-h, 132px);
  }
  /* 全屏/web 形态：composer 与对话区同宽同中线。
     margin 简写会重置 margin-top:auto（短对话钉底的关键，见 .composer 规则），
     故只写左右与上下分离的三个分量，保住 auto。 */
  body.fullscreen .composer, body.web .composer { width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; margin-top: auto; }
  body.fullscreen .msg, body.web .msg { width: 100%; max-width: 100%; }
  body.fullscreen .actions, body.web .actions { align-self: center; width: 100%; max-width: 100%; margin-left: 0; }
  body.fullscreen .welcome-hero, body.web .welcome-hero { max-width: 640px; margin-left: auto; margin-right: auto; }
  body.fullscreen .suggest, body.web .suggest { max-width: 100%; margin-left: auto; margin-right: auto; }

  /* ============ 登录/注册视图 ============ */
  .auth-view {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(10,11,14,.66); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; transition: opacity .22s ease;
  }
  .auth-view.open { opacity: 1; }
  .auth-card {
    width: min(380px, 92vw); background: var(--win-bg);
    border: 1px solid var(--surface-3); border-radius: var(--r-lg);
    box-shadow: var(--shadow-win); padding: 28px 26px 22px;
    text-align: center; transform: translateY(10px); transition: transform .22s ease;
  }
  .auth-view.open .auth-card { transform: none; }
  .auth-brand { display: inline-flex; }
  .auth-title { margin-top: 12px; font-size: 17px; font-weight: 700; color: var(--text-1); }
  .auth-sub { margin-top: 5px; font-size: 12.5px; color: var(--text-3); }
  .auth-tabs {
    display: flex; gap: 4px; margin: 20px 0 14px;
    background: var(--surface-1); border-radius: var(--r-md); padding: 4px;
  }
  .auth-tab {
    flex: 1; padding: 8px 0; border: none; border-radius: var(--r-sm);
    background: transparent; color: var(--text-2); font-size: 13.5px; cursor: pointer;
    transition: all var(--ease); font-family: var(--font);
  }
  .auth-tab.active { background: var(--win-bg); color: var(--brand-strong); font-weight: 600; box-shadow: var(--shadow-card); }
  .auth-field { display: block; text-align: left; margin-bottom: 12px; }
  .auth-field span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
  .auth-field input {
    width: 100%; padding: 10px 12px; border-radius: var(--r-sm);
    border: 1px solid var(--surface-3); background: var(--surface-1);
    color: var(--text-1); font-size: 14px; outline: none; font-family: var(--font);
    transition: border-color var(--ease), box-shadow var(--ease);
  }
  .auth-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .auth-err { min-height: 18px; font-size: 12.5px; color: var(--danger); margin-bottom: 4px; }
  .auth-submit {
    width: 100%; padding: 11px 0; border: none; border-radius: var(--r-sm);
    background: var(--brand); color: #fff; font-size: 14.5px; font-weight: 600;
    cursor: pointer; transition: background var(--ease); font-family: var(--font);
  }
  .auth-submit:hover { background: var(--brand-strong); }
  .auth-submit:disabled { opacity: .6; cursor: default; }
  .auth-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    width: 100%;
  }
  .auth-foot { margin-top: 16px; font-size: 11px; color: var(--text-3); }
  /* 法务链接是样板文字,弱化:与正文同灰度+下划线,不再用品牌蓝抢视觉 */
  .auth-foot a { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
  .auth-foot a:hover { color: var(--text-2); }
  /* 申请试用:独立成行的次级 CTA,用品牌色与法务行区分层级 */
  .auth-trial-row { margin-top: 9px; font-size: 12px; }
  .auth-trial-row[hidden] { display: none; }
  .auth-trial-row a { color: var(--brand); font-weight: 600; text-decoration: none; }
  .auth-trial-row a:hover { text-decoration: underline; }
  /* 安装到桌面（PWA）引导：卡片外上方的一行轻提示，位于暗色遮罩上，
     配色必须按"深底浅字"设计——不能用卡内的浅灰变量，否则几乎不可见。 */
  .auth-install[hidden] { display: none; }
  .auth-install {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 8px; font-size: 11.5px; color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px; padding: 6px 8px 6px 16px;
  }
  .auth-install .ai-line { opacity: 1; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .auth-install .ai-btn {
    padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.12); color: #fff; font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: var(--font); transition: background var(--ease);
  }
  .auth-install .ai-btn:hover { background: rgba(255,255,255,.24); }
  .auth-install .ai-btn-ghost {
    padding: 4px 6px; border: none; background: transparent;
    color: rgba(255,255,255,.55); font-size: 11.5px; cursor: pointer; font-family: var(--font);
  }
  .auth-install .ai-btn-ghost:hover { color: rgba(255,255,255,.85); text-decoration: underline; }

  /* ============ 图片处理面板 ============ */
  .image-panel {
    position: fixed; right: 0; top: 0; bottom: 0; z-index: 90;
    width: min(680px, 94vw); background: var(--win-bg);
    border-left: 1px solid var(--surface-3); box-shadow: var(--shadow-win);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .25s ease;
  }
  .image-panel.open { transform: none; }
  .img-head {
    flex-shrink: 0; height: 50px; padding: 0 14px 0 18px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--surface-3);
  }
  .img-title { font-size: 14.5px; font-weight: 700; color: var(--text-1); }
  .img-head-right { display: flex; align-items: center; gap: 10px; }
  .img-upload-btn {
    display: inline-block; padding: 6px 13px; border-radius: 8px;
    background: var(--brand-soft); color: var(--brand-strong);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background var(--ease);
  }
  .img-upload-btn:hover { background: var(--surface-2); }
  .img-close {
    width: 30px; height: 30px; border: none; border-radius: 8px;
    background: transparent; color: var(--text-2); font-size: 19px; line-height: 1;
    cursor: pointer; transition: background var(--ease), color var(--ease);
  }
  .img-close:hover { background: var(--surface-2); color: var(--text-1); }
  .img-body { flex: 1; overflow: auto; min-height: 0; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
    /* 文生图入口:始终可见,不依赖先上传图片 */
    .img-gen {
      border: 1px solid var(--surface-3); border-radius: var(--r-md);
      padding: 12px 14px; background: var(--surface-1);
    }
    .img-gen-title { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
    .img-gen-row { display: flex; gap: 8px; }
    .img-gen-note { margin-top: 7px; font-size: 11px; color: var(--text-3); }
    .img-ai-note-tip { font-size: 11px; color: var(--text-3); }
    .img-drop {
    border: 1.5px dashed var(--surface-3); border-radius: var(--r-md);
    min-height: 200px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color var(--ease), background var(--ease);
  }
  .img-drop:hover { border-color: var(--brand); background: var(--brand-soft); }
  .img-drop-inner { text-align: center; color: var(--text-2); font-size: 13px; }
  .img-drop-inner.over { border-color: var(--brand); }
  .img-drop-icon {
    width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%;
    background: var(--surface-2); color: var(--text-2); font-size: 22px;
    display: flex; align-items: center; justify-content: center;
  }
  .img-drop-hint { margin-top: 8px; font-size: 11.5px; color: var(--text-3); }
  .img-workspace { display: flex; flex-direction: column; gap: 14px; }
  .img-canvas-wrap {
    background: repeating-conic-gradient(#e9ecef 0% 25%, #f4f6f8 0% 50%) 50% / 22px 22px;
    border-radius: var(--r-md); overflow: auto; max-height: 46vh;
    display: flex; align-items: center; justify-content: center; padding: 12px;
  }
  .img-canvas-wrap canvas { max-width: 100%; max-height: 44vh; object-fit: contain; background: #fff; box-shadow: var(--shadow-card); }
  .img-ops { display: flex; flex-direction: column; gap: 10px; }
  .img-op-group {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 9px 11px; border-radius: var(--r-sm); background: var(--surface-1);
  }
  .img-op-label { font-size: 12px; color: var(--text-3); margin-right: 3px; flex-shrink: 0; }
  .img-op-group select {
    padding: 5px 8px; border-radius: 8px; border: 1px solid var(--surface-3);
    background: var(--win-bg); color: var(--text-1); font-size: 12.5px; outline: none; font-family: var(--font);
  }
  .img-op-btn {
    padding: 5px 11px; border-radius: 8px; border: 1px solid var(--surface-3);
    background: var(--win-bg); color: var(--text-2); font-size: 12.5px; cursor: pointer;
    transition: all var(--ease); font-family: var(--font);
  }
  .img-op-btn:hover { background: var(--surface-2); border-color: var(--brand); color: var(--text-1); }
  .img-op-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
  .img-op-btn.primary:hover { background: var(--brand-strong); }
  .img-op-btn.ai { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); }
  .img-op-btn.ai:hover { background: var(--surface-2); }
  .img-ai-row { display: flex; align-items: center; gap: 8px; }
  .img-ai-note { font-size: 11px; color: var(--text-3); }
  #img-prompt {
    flex: 1; min-width: 0; padding: 8px 12px;
    border: 1px solid var(--surface-3); border-radius: var(--r-sm);
    background: var(--win-bg); color: var(--text-1); font-size: 12.5px; font-family: var(--font);
  }
  #img-prompt::placeholder { color: var(--text-3); }
  #img-prompt:focus { outline: none; border-color: var(--brand); }

  /* ============ 任务卡片(异步任务进度) ============ */
  .task-card {
    margin-top: 8px; padding: 12px 14px;
    border: 1px solid var(--surface-3); border-radius: var(--r-md);
    background: var(--win-bg); box-shadow: var(--shadow-card);
  }
  .task-card-head { display: flex; align-items: center; gap: 8px; }
  .task-icon {
    width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
    background: var(--brand-soft); color: var(--brand-strong);
    display: flex; align-items: center; justify-content: center; font-size: 11px;
  }
  .task-name { font-size: 13px; font-weight: 600; color: var(--text-1); flex: 1; }
  .task-status { font-size: 12px; font-weight: 600; color: var(--brand-strong); }
  .task-card.done .task-status { color: #2faa5b; }
  .task-card.failed .task-status { color: var(--danger); }
  .task-bar { margin-top: 9px; height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
  .task-bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width .4s ease; }
  .task-card.failed .task-bar i { background: var(--danger); }
  .task-msg { margin-top: 7px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
  .task-actions { margin-top: 8px; }
  .task-retry {
    padding: 5px 14px; border-radius: 8px; border: 1px solid var(--brand);
    background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 600;
    cursor: pointer; transition: background var(--ease); font-family: var(--font);
  }
  .task-retry:hover { background: var(--brand-strong); }
  .task-retry:disabled { opacity: .6; cursor: default; }

  /* ============ 错误消息 / 重试 / 额度提示 ============ */
  .msg.err .bubble { color: var(--danger); }
  .retry-btn {
    display: inline-block; margin-top: 8px; padding: 5px 14px;
    border-radius: 8px; border: 1px solid var(--surface-3);
    background: var(--win-bg); color: var(--text-1); font-size: 12.5px;
    cursor: pointer; transition: all var(--ease); font-family: var(--font);
  }
  .retry-btn:hover { border-color: var(--brand); color: var(--brand-strong); }
  .no-quota-tip {
    margin-top: 8px; padding: 8px 11px; border-radius: 8px;
    background: rgba(245,166,35,.12); color: var(--accent); font-size: 12px;
  }
  .model-na { margin-left: auto; font-size: 10.5px; color: var(--text-3); }
  .model-opt:disabled { opacity: .45; cursor: not-allowed; }
  .conv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
  .pv-video {
    width: 100%; height: 100%; min-height: 320px; display: flex;
    align-items: center; justify-content: center; background: #000;
  }
  .pv-video video { max-width: 100%; max-height: 100%; }

  /* ============ 知识库面板:布局复用 image-panel 的滑入式抽屉 ============ */
  .kb-panel {
    position: fixed; right: 0; top: 0; bottom: 0; z-index: 90;
    width: min(560px, 94vw); background: var(--win-bg);
    border-left: 1px solid var(--surface-3); box-shadow: var(--shadow-win);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .25s ease;
  }
  .kb-panel.open { transform: none; }
  .kb-head {
    flex-shrink: 0; height: 48px; padding: 0 14px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--surface-3);
  }
  .kb-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
  /* 知识库双标签:公司共享 / 我的个人 */
  .kb-tabs { display: flex; gap: 6px; padding: 10px 16px 0; flex-shrink: 0; }
  .kb-tab {
    padding: 6px 14px; border-radius: 8px; border: 1px solid var(--surface-3);
    background: var(--surface-1); color: var(--text-2); font-size: 12.5px; cursor: pointer; font-family: var(--font);
  }
  .kb-tab.active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; border-color: var(--brand); }
  .kb-body { flex: 1; overflow: auto; min-height: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
  .kb-note { font-size: 11.5px; color: var(--text-3); line-height: 1.6; background: var(--surface-1); border-radius: 8px; padding: 9px 11px; }
  .kb-upload { display: flex; align-items: center; gap: 10px; }
  .kb-file-btn {
    padding: 7px 14px; border-radius: 8px; border: 1px solid var(--brand); color: var(--brand);
    font-size: 12.5px; cursor: pointer; transition: all var(--ease);
  }
  .kb-file-btn:hover { background: var(--brand-soft); }
  .kb-or { font-size: 11.5px; color: var(--text-3); }
  #kb-title, #kb-content {
    padding: 9px 12px; border: 1px solid var(--surface-3); border-radius: 8px;
    background: var(--surface-1); color: var(--text-1); font-size: 12.5px; font-family: var(--font);
  }
  #kb-content { resize: vertical; min-height: 120px; line-height: 1.6; }
  #kb-title:focus, #kb-content:focus { outline: none; border-color: var(--brand); }
  .kb-actions { display: flex; align-items: center; gap: 10px; }
  .kb-save {
    padding: 8px 18px; border-radius: 8px; border: none;
    background: var(--brand); color: #fff; font-size: 12.5px; cursor: pointer; font-family: var(--font);
  }
  .kb-save:disabled { opacity: .6; cursor: default; }
  .kb-msg { font-size: 11.5px; }
  .kb-list-title { font-size: 12px; color: var(--text-2); font-weight: 600; margin-top: 6px; }
  .kb-list { display: flex; flex-direction: column; gap: 6px; }
  .kb-item {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px;
    border: 1px solid var(--surface-3); border-radius: 8px; background: var(--surface-1);
  }
  .kb-item-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .kb-item-name { font-size: 12.5px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kb-item-meta { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
  .kb-del {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; border: none;
    background: transparent; color: var(--text-3); cursor: pointer; font-size: 12px;
  }
  .kb-del:hover { background: var(--danger); color: #fff; }
  .kb-empty { font-size: 12px; color: var(--text-3); text-align: center; padding: 16px; }

/* ============================================================
 * 兽药饲料模式(mode-vetfeed):整片视觉随领域切换
 * 首批用户即兽药饲料企业 → 侧栏整片入绿、用户气泡淡染、激活态转绿。
 * 浅/深色各定义一套模式变量,避免写死颜色导致暗色下突兀。
 * ============================================================ */
body.mode-vetfeed {
  --vet-soft: #e8f5ee;     /* 激活态浅绿底(深青底上的高亮块) */
  --vet-strong: #0e8a4f;   /* 激活态绿字 */
  --vet-bubble: #f3faf6;   /* 用户气泡淡绿 */
  --vet-sidebar: #006a68;  /* 侧栏整片深青(品牌色) */
  --vet-border: rgba(255,255,255,0.16);   /* 深青底上的浅描边/分隔线 */
  --vet-text: rgba(255,255,255,0.92);     /* 侧栏主文字(深青底上的浅字) */
  --vet-text-dim: rgba(255,255,255,0.6);  /* 次级文字/分组标签 */
  --vet-text-faint: rgba(255,255,255,0.4);
  --vet-hover: rgba(255,255,255,0.12);    /* 条目 hover 底 */
  --vet-newchat-bg: rgba(255,255,255,0.08);
}
[data-theme="dark"] body.mode-vetfeed {
  --vet-soft: #14241d;
  --vet-strong: #4fd996;
  --vet-bubble: #18281f;
  --vet-sidebar: #006a68;  /* 暗色下同样用品牌深青(白字可读) */
  --vet-border: rgba(255,255,255,0.16);
  --vet-text: rgba(255,255,255,0.92);
  --vet-text-dim: rgba(255,255,255,0.62);
  --vet-text-faint: rgba(255,255,255,0.42);
  --vet-hover: rgba(255,255,255,0.14);
  --vet-newchat-bg: rgba(255,255,255,0.1);
}
/* 侧栏整片随模式变深青 */
body.mode-vetfeed .sidebar {
  background: var(--vet-sidebar);
  border-right-color: var(--vet-border);
}
/* 深青底上:侧栏一切文字/控件转浅,保证可读性 */
body.mode-vetfeed .sidebar-brand .brand,
body.mode-vetfeed .nav-label,
body.mode-vetfeed .nav-group-label,
body.mode-vetfeed .nav-empty { color: var(--vet-text-dim); }
body.mode-vetfeed .sidebar-brand .icon-btn { color: var(--vet-text-dim); }
body.mode-vetfeed .sidebar-brand .icon-btn:hover { background: var(--vet-hover); color: #fff; }
/* 深青底上 logo 转白色剪影:蓝色标在青绿底上撞色,白化后与侧栏浅字系统一致。
   仅模式作用域生效,离开兽药饲料模式立即恢复品牌蓝。若要保留彩标,删掉这条即可。 */
body.mode-vetfeed .sidebar-brand .logo { filter: brightness(0) invert(1); }
body.mode-vetfeed .nav-item { color: var(--vet-text); }
body.mode-vetfeed .nav-item:hover { background: var(--vet-hover); color: #fff; }
body.mode-vetfeed .new-chat {
  border-color: var(--vet-border);
  background: var(--vet-newchat-bg);
  color: var(--vet-text);
}
body.mode-vetfeed .new-chat:hover { background: var(--vet-hover); }
body.mode-vetfeed .conv-del { color: var(--vet-text-dim); }
body.mode-vetfeed .conv-del:hover { background: rgba(255,255,255,0.16); color: var(--danger); }
body.mode-vetfeed .user-chip { color: var(--vet-text); }
body.mode-vetfeed .user-chip:hover { background: var(--vet-hover); }
body.mode-vetfeed .uc-name { color: #fff; }
body.mode-vetfeed .uc-sub { color: var(--vet-text-dim); }
body.mode-vetfeed .uc-caret { border-color: var(--vet-text-dim); }
body.mode-vetfeed .nav-item .dot { opacity: .7; }
/* 当前会话左侧强调条改用模式绿,与深青底协调 */
body.mode-vetfeed .conv-item.active::before { background: var(--vet-strong); }
/* 深青底上的「N 轮」徽标:浅字 + 半透明浅底 */
body.mode-vetfeed .conv-rounds { color: #eafff7; background: rgba(255,255,255,0.16); }
/* 用户输入气泡淡染绿 */
body.mode-vetfeed .msg.user .bubble { background: var(--vet-bubble); }
/* 激活的工作模式标签转绿(深青底上的浅绿高亮块) */
body.mode-vetfeed .nav-item.active {
  background: var(--vet-soft);
  color: var(--vet-strong);
  font-weight: 600;
}

/* ============================================================
 * 模式切换飘窗(#modeToast):透明路由自动切换工作模式时 ~1.2s 轻提示。
 * 顶部居中悬浮胶囊,不拦截点击(pointer-events:none),连续切换复用同一节点。
 * ============================================================ */
#modeToast {
  position: fixed; top: 58px; left: 50%;
  transform: translate(-50%, -8px);
  z-index: 200; pointer-events: none;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(20, 20, 20, 0.85); color: #fff;
  font-size: 12.5px; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
#modeToast.show { opacity: 1; transform: translate(-50%, 0); }
[data-theme="dark"] #modeToast { background: rgba(240, 240, 240, 0.92); color: #111; }