/* 浅色 palette：默认层与显式 light 共用同一声明，权威唯一 */ :root, :root[data-theme="light"]{ color-scheme:light; /* Claude 风格基础 token */ --bg:#f9f8f6; /* 主背景 米白 */ --bg-deep:#f0eeea; /* 更深面（侧栏） */ --panel:#ffffff; /* 浮层/卡片 */ --panel-2:#faf9f7; --input:#ffffff; --line:#e4e0da; --line-soft:#edeae5; --line-strong:#d4cfc6; --ink:#38352f; /* 主文字 暖黑 */ --ink-soft:#6d6a63; --ink-faint:#9c978e; --ink-strong:#221f1a; --accent:#d97757; /* Claude 橙红 */ /* 浏览器 chrome 颜色：与浅色主背景同色，理由同深色 */ --theme-color:#f9f8f6; --accent-hover:#c96444; --accent-ink:#ffffff; --danger:#b3563f; /* * 警示/注意色（黄）。定义成主题令牌而不是各处写 #c98a2e 字面量： * 深色主题下同一个黄必须更亮才够对比，散落的字面量会让深色模式 * 悄悄沿用浅底的黄（看不清），而没有任何地方会报错。 * 已有引用（.msg-edit-warn / .to-wf-info.is-warn）保持字面量不动， * 新代码一律用本令牌。 */ --warn:#c98a2e; --radius:10px; /* * 内容列宽（唯一权威）。 * * 消息区、会话配置条（系统提示词 / 设置）、输入框三处必须同宽同位—— * 它们在同一条纵向轴上，宽度不一致时视觉上会显得"错位"。 * 用户明确要求过"系统提示词控件对齐消息区域宽度就好"， * 在此之前三处各写了一个魔法数字（820 / 860 / 无限制）， * 所以这里收敛成一个变量，改一处三处同时对齐。 */ --content-col:820px; /* * 编排区内容列宽上限（唯一权威）。 * * 为什么与 --content-col 分开：那两个量**语义不同**，不是同一个数的两份写法。 * --content-col 是**阅读栏宽**：聊天页的消息流是一篇文章， * 行太长会丢失阅读节奏，所以要有一个绝对上限（820px）。 * 本变量 是**工作区栏宽**：编排页的内容是表单、输入框、 * 消息块与结果表（含多列表格），它该占多少宽取决于 * **用户把版面留给了它多少**。 * * ★ 默认 100%：不设绝对上限，让"版面"成为唯一权威（2026-10-03 修复）★ * 改前这里是硬编码的 max-width:min(760px,100%)。760 是一个绝对上限， * 它对版面**无感知**：用户把左栏/设置区/右栏全收起来腾出的空间， * 内容一概不要（实测 1920 窗口下编排区可用 1553px，内容只占 760px， * 两侧共浪费约 790px）——于是"面板可以收起"这件事对主内容毫无价值， * 用户的原话正是"这样收缩就没有意义了"。 * * 结构性判断：在编排页，**栏宽的上限该由版面自己决定**。 * 版面的宽度是用户亲手调的（收面板、拖分隔条），那就是他对这份上限的 * 表达；再叠一个他看不见、也改不动的绝对数字，等于给他的操作加一个 * 不可见的否决权——这正是"第二份真相"的典型形态。 * 需要收紧时改**这一处**即可（整个编排区的内容列都听它的）， * 但默认值必须是"铺满"，否则"收起面板"这个动作就重新失去意义。 */ --orch-col-max:100%; /* * 消息区字体缩放系数（唯一权威）。 * * 由 msg-font-init.js 写在内联样式上（首帧前生效、刷新不闪）， * 这里声明的只是"没有 JS 时的兜底值"，两者不一致时以内联值为准。 * 只影响 .msg 的正文（用户 / 助手两种基数字号），不改变按钮、头像、 * 用量 chip 等界面元素的字号——那些是"控件"，不是"内容"。 */ --msg-font-scale:1; /* * 浮层层级令牌（唯一权威，别在各处写魔法数字）。 * / 菜单必须高于输入区与普通卡片、低于模态弹窗—— * 之前它的 z-index 是散落的 80，与别的浮层谁压谁只能靠猜。 */ --z-slash:80; /* * 弹窗是**两层**，两者是一组不可拆的令牌（分派逻辑见 modal-stack.js）： * * --z-modal 普通弹窗（页面级；同一时刻只显示一个） * --z-modal-child 从**已经打开的弹窗内部**再打开的弹层 * （只读查看器 / 变量弹窗 / 工作流块弹窗 …） * * 不变量：后者严格大于前者、且小于 / 菜单（80）——因为 / 菜单是能在 * 任意弹窗里召出的最上层浮层。 * * 为什么必须登记成令牌，而不是让各弹层自己写数字： * .modal 一律是 z-index:60，"谁压谁"就退化成 **DOM 顺序**。 * 两个实测故障都源于此： * · 展开在弹窗里的只读查看器沿用普通 .panel 的 31 → 落在弹窗背后， * 用户点完看不到任何东西（以为按钮坏了）； * · 临时会话块弹窗里用 / 插变量 → 变量弹窗同为 60，而块弹窗挂在 * 运行时新建的 #bkModalRoot（DOM 更靠后），于是变量弹窗被压在 * 块弹窗**底下**，只在边缘露出一条，完全无法操作。 * 两者的共同根因是"层级由 DOM 顺序决定"。所以层级在这里登记成令牌， * 并由 modal-stack.js 按**运行时事实**（打开这一刻是否已有弹窗在显示） * 自动分派——各弹窗的开与关只调用它，不自行声明层级。 */ --z-modal:60; --z-modal-child:65; /* 从已打开弹窗内部再打开的弹层：高于弹窗、低于 / 菜单 */ /* * 移动端底部抽屉。 * * 压在页面内容与左侧工作流抽屉之上，但低于模态弹窗（60）—— * 抽屉里点「＋ 快照」会打开命名弹窗，那个弹窗必须盖在抽屉上面。 * 登记成令牌的理由同上面的 modal：谁压谁必须可读、不可能各写各的。 */ --z-sheet:50; /* * 左侧工作流抽屉（窄屏 ≤760px 时的 .orch-side）。 * * ★ 为什么必须是一个**显式令牌**，而不是随手写 40 ★ * 2026-10-06 用户报"编排页顶部按钮被遮住了、根本没法新建工作流"： * 抽屉里的 `.brand` 行（工作流标题 + ＋新建 + 收起）整行不见， * 列表直接从「编排列表」这行开始。 * 根因是层级：抽屉写死 z-index:40，而顶栏为了让它自己的 ⋯ 面板 * 浮在内容之上，后来加了 z-index:45（--z-head-overlay）。 * 45 > 40 ⇒ 顶栏整块画在抽屉上面，把抽屉顶部那一行盖掉了。 * 两处各自都是"局部看起来正确"的值，拼在一起才错—— * 这正是层级必须集中在令牌里、且顺序有明确约束的原因。 * * 取值 48 的约束（三条同时成立，不得只满足其中一条）： * ① > --z-head-overlay(45)：抽屉是"盖住整页（含顶栏）"的一层， * 它连顶栏一起盖，才能保证抽屉自己的关闭按钮与标题永远可点 * （顶栏 ☰ 只负责"打开"抽屉，见 .orch-side-drawer-close 的说明）； * ② < --z-sheet(50)：底部抽屉（版本历史/快照）要能盖在它上面； * ③ < --z-modal(60)：弹窗永远在最上面。 * 与遮罩的关系见 .scrim 的 --z-side-scrim(47)：遮罩紧贴抽屉之下、 * 顶栏之上，于是抽屉打开时顶栏也被压暗、且点它不会误触。 */ --z-side-drawer:48; /* * 左侧抽屉的遮罩。紧贴抽屉之下、顶栏(45)之上： * 抽屉打开时整个页面（含顶栏）都退到底层，只剩抽屉可操作。 * 与 --z-side-drawer 是一对，"谁遮谁、谁在上面"两个数写在一起。 */ --z-side-scrim:47; /* * 顶栏浮层（⋯ 面板 + 随它展开的页面导航）。 * * 为什么必须是独立令牌而不是沿用 --z-sheet： * 它**不是**底部抽屉，跟着抽屉走会让"以后调抽屉层级"顺手改坏顶栏； * 而且它只需要压过页面内容，不需要压过侧栏抽屉(40)。 * 取值 45：高于页面内容与编排区浮层，低于**左栏抽屉(48)与其遮罩(47)**、 * 底部抽屉(50)与弹窗(60)。 * ⚠ 45 与 48 之间只差 3 —— 它们描述的是两件不同的事： * 顶栏浮层要压过"页面内容"（编排区、消息列）， * 左栏抽屉要压过"整个页面（含顶栏）"。 * 所以这个数不能大于 --z-side-drawer，否则编排页窄屏打开 * 工作流抽屉时，顶栏会把抽屉的标题行/新建按钮盖住（2026-10-06 线上事故）。 */ --z-head-overlay:45; /* 触控目标最小尺寸：Apple HIG 建议 44pt。移动端按钮统一引用它，不各写字面量。 */ --tap:44px; /* * 图标按钮的**视觉边长**（用户 2026-10-01 反馈"图标还是很大"后新增）。 * * ★ 为什么必须与 --tap 分开：可点面积 ≠ 视觉尺寸 ★ * 上一版直接把 --tap 当按钮宽度用，于是每个图标按钮都是一个 44×44 的方块： * 手机上实测一排图标（🕒 / ↕ / ⋯）各自撑满，看起来像三个大砖头， * 竖向也白吃掉一整行的高度。用户的原话就是"这些图标还是很大"。 * * 但 --tap=44 这条**不能动**：它是"手指点得中"的物理下限， * 缩到 36px 会让误触变多（而误触在这个页面上可能是删掉一条消息）。 * 两者要的本来就是两件事，所以拆成两个令牌： * · --tap 管**热区**（不可缩，决定点得中点不中）； * · --tap-visual 管**看得见的那个方块**（可紧凑，决定界面轻重）。 * 落地方式见下方：按钮本身做成 --tap-visual 大小，用伪元素把热区撑到 --tap。 * 这样视觉变小、手指体验不变 —— 这是唯一能同时满足两边的做法。 * * 取值 34px：与桌面端这排按钮的观感（.t-actions button.is-icon 为 24px 宽） * 同一档量级，又不至于小到认不出图标（图标字号 15px）。 */ --tap-visual:34px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } :root[data-theme="dark"]{ color-scheme:dark; /* Claude 深色 palette：亮度堆叠，主区偏暖深灰，侧栏更深 */ --bg:#232220; /* 主区背景（Claude #1f1e1d 附近偏暖） */ --bg-deep:#191817; /* 侧栏更深的炭黑 */ --panel:#2a2927; /* 浮层/卡片 稍亮 */ --panel-2:#1e1d1b; --input:#2e2d2a; --line:#34332f; --line-soft:#2c2b28; --line-strong:#3f3e3a; --ink:#efece6; /* 暖白文字 */ --ink-soft:#b8b4ab; --ink-faint:#87837a; --ink-strong:#faf8f4; --accent:#e0845f; /* 提亮一点保证对比 */ /* 浏览器 chrome 颜色：必须与主背景同色。 之前用 accent 陶红，移动端 PWA 会把它铺到状态栏与 overscroll 区域， 滚动到底部时整片陶红，非常刺眼。 */ --theme-color:#232220; --accent-hover:#ea916d; --accent-ink:#1b130f; --danger:#e07a60; --warn:#e6b84a; /* 深色下提亮的黄，保证在炭黑底上可读 */ } *{box-sizing:border-box} html,body{height:100%} /* html 与 body 同铺主题背景，避免画布/overscroll 露出白底 */ html{background:var(--bg)} body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 var(--font);-webkit-font-smoothing:antialiased} button{font-family:inherit;cursor:pointer} textarea{font-family:inherit} button{-webkit-tap-highlight-color:transparent} .shell{display:flex;height:100vh;height:100dvh;overflow:hidden} /* 侧栏 */ /* * 宽度由 CSS 变量 --side-w 驱动，唯一权威是设置项（settings 表 side_width）。 * * 为什么是变量而不是直接写死 / 也不在 JS 里直接改 style.width： * · 写死宽度就没有拖拽； * · JS 到处改内联宽度会散出多份宽度来源（内联 style、CSS 常量、设置值）， * 三者一旦不一致就会出现"刷新后跳一下""拖动时对不上"。 * 现在只有一条链：设置值 → 应用到 :root 的 --side-w → CSS 消费它。 * 拖拽只负责把像素写回设置，不直接改别的任何地方。 */ aside{ width:var(--side-w,280px);flex:none;background:var(--bg-deep);border-right:1px solid var(--line); display:flex;flex-direction:column;min-height:0;position:relative; } /* 桌面端侧栏右缘的拖拽手柄：只负责捕获指针，样式保持"看不见但摸得到" */ .side-resizer{ position:absolute;top:0;right:-3px;width:7px;height:100%;z-index:5; cursor:col-resize;background:transparent;border:0;padding:0; touch-action:none; } .side-resizer:hover,.side-resizer.is-dragging{ background:color-mix(in srgb,var(--accent) 55%,transparent); } /* * 拖拽期间：屏蔽文本选中、让 iframe 不抢事件。 * 类名对**全站四类边界共用**（is-layout-resizing）： * 同一时刻只可能拖一条，而"现在正在拖"对整页而言就是一件事。 * 历史类名 is-side-dragging 保留兼容——它仍可能被老缓存里的脚本加上。 */ body.is-layout-resizing,body.is-side-dragging{cursor:col-resize;user-select:none} body.is-layout-resizing iframe,body.is-side-dragging iframe{pointer-events:none} .brand{ display:flex;align-items:center;justify-content:space-between; padding:16px 14px 10px; } .brand b{font-size:15px;letter-spacing:.02em;color:var(--ink)} /* * 版本标识：紧跟标题的小圆点，悬停显示版本指纹。 * 用 而不是块级元素，避免破坏 .brand 的 space-between 布局。 * 颜色随状态变化：绿=资源指纹与页面声明一致（当前版本）， * 橙=不一致（浏览器跑着旧资源，需要刷新）。 */ .build-tag{ width:6px;height:6px;border-radius:50%;flex:none; background:var(--line-strong);margin-left:6px;margin-right:auto; transition:background .2s ease;cursor:help; } .build-tag.ok{background:#4caf7d} .build-tag.stale{background:var(--accent)} .build-tag.unknown{background:var(--line-strong)} .brand button{ width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--panel); font-size:16px;color:var(--ink);display:flex;align-items:center;justify-content:center; } .brand button:hover{border-color:var(--line-strong)} .caption{ font-size:11px;color:var(--ink-faint);letter-spacing:.12em;text-transform:uppercase; padding:6px 16px 8px; } #sessions{flex:1;overflow:auto;padding:0 10px 16px;-webkit-overflow-scrolling:touch} .session-item{display:flex;align-items:stretch;border-radius:8px;margin-bottom:2px} .session-item:hover{background:var(--panel)} .session-title{ /* * 标题行的定位基准：会话 id 靠右浮在标题末尾，且必须在标题**被截断**时 * 依然完整可见（id 是拿来核对/复制的事实，不是装饰）， * 所以标题与 id 分属两个子元素，各自处理溢出（见 .session-title-text）。 */ position:relative;flex:1;display:flex;align-items:center;gap:6px; text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:8px; font-size:13px;color:var(--ink-soft); } /* 标题本身承担截断：flex:1 + min-width:0 是让 ellipsis 在 flex 容器里生效的前提 */ .session-title-text{ flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* * 会话 id：等宽字体 + 更淡的颜色，与标题形成层级；flex:none 保证它永不被压缩， * 因此在任何标题长度下都完整可读。 */ .session-id{ flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px;color:var(--ink-faint);letter-spacing:.2px;opacity:.75; white-space:nowrap; } .session-title.active .session-id{color:var(--ink-soft);opacity:1} .session-title.active{background:var(--panel);color:var(--ink);font-weight:600} .session-del{ border:0;background:transparent;color:var(--ink-faint);font-size:14px;line-height:1;padding:0 8px;display:none; } .session-item:hover .session-del{display:block} .session-del:hover{color:var(--danger)} .side-hint{padding:18px 18px;color:var(--ink-faint);font-size:12px} /* 主区 */ /* * position:relative 是「停靠态设置面板」的定位基准（.modal.docked 用 absolute）。 * 放在 main 上而不是 body 上：面板要停在**聊天区域**的左上角， * 而不是整个窗口的左上角（后者会盖住左侧会话栏）。 */ main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;position:relative} /* * 聊天页顶栏。选择器用 .chat-head 而**不是**裸 header： * 编排页 .orch-head、日志页 .log-head 也是
，裸标签选择器会把 * 三个页面的顶栏绑在一起（基础高度/内边距/横滑行为互相污染）。 * 顶栏的身份是"哪一个顶栏"，标签名不携带这个信息。 */ .chat-head{ height:56px;flex:none;display:flex;align-items:center;gap:10px; padding:0 20px;border-bottom:1px solid var(--line);background:var(--bg); } #menu{ display:none;border:0;background:transparent;font-size:20px;color:var(--ink);padding:2px 6px; line-height:1; } /* 同一套动作图形：桌面图文并列，手机仅隐藏文字，不复制行为入口。 */ .chat-action-icon{width:18px;height:18px;flex:none;vertical-align:middle} .chat-head .new-chat-btn,.chat-head #chatSettingsBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px} .chat-navigation{display:contents} .chat-navigation>summary{display:none} .chat-head .chat-navigation>.head-nav{display:flex} .head-title small{display:block;font-size:10px;letter-spacing:.14em;color:var(--ink-faint)} .head-title h1{font-size:16px;margin:2px 0 0;font-weight:650;color:var(--ink-strong)} /* * ================= 主题切换按钮（对话 / 编排 / 日志三页同一颗） ================= * * 2026-10-17 用户要求：编排页与日志页也要能直接切深浅色， * 否则每次都要绕回对话页。「三页各有一个主题按钮」是这件事的落地， * 但**样式只能有一份**：三页各写一套 px 值，它们的静宽就不可能一样， * 而三页顶栏右簇都是「靠右」的 —— 右簇左缘由总宽反推， * 宽度差几个像素，切页时主题按钮就会左右跳一下。 * * 因此选择器按**类**而不是按 id： * .theme-toggle = 外观与尺寸的唯一权威； * #chatThemeBtn / #orchThemeBtn / #logThemeBtn = 三个页面各自的挂载点。 * * 形态是"胶囊 + 文字"（☾ 切到深色 / ☀ 切到浅色），不是一颗裸图标： * 三页顶栏上其它控件都写着字（刷新 / 版本历史 / 显示右侧栏 / 对话·编排·日志）， * 只放一个 ☾ 会让人分不清"这是深色图标"还是"点了会变深色"。 * 文案由 /theme-button.js 按唯一权威投影，这里只管尺寸与配色。 * * 高度用 --tap-visual：与全站图标按钮共用同一个高度常量， * 任何一处改高度都自动三页同步（窄屏另按 --tap 放大到可点，见各页断点段）。 */ .theme-toggle{ flex:none;display:inline-flex;align-items:center;justify-content:center; gap:4px; min-height:var(--tap-visual); font-size:12px;line-height:1;color:var(--ink-soft); white-space:nowrap; border:1px solid var(--line);border-radius:999px;background:var(--panel); cursor:pointer;padding:0 10px; transition:border-color 150ms ease,background 150ms ease,color 150ms ease; } .theme-toggle:hover{border-color:var(--line-strong);background:var(--panel-2);color:var(--ink)} .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px} #model{ font-size:12px;color:var(--ink-faint);border:1px solid var(--line); padding:4px 10px;border-radius:999px;background:var(--panel);cursor:pointer; /* * min-width 是必需的：按钮文字现在由服务端下发（见 index.html 的注释）， * 在 /api/health 返回之前它是空的。没有 min-width 时按钮会先缩成一个小点 * 再撑开，工具栏上其它按钮跟着左右横跳。留一个最小宽度让占位稳定。 */ min-width:64px; } #model:hover{border-color:var(--line-strong);background:var(--panel-2)} #model:active{transform:scale(.97)} .toolbar{ flex:none;display:flex;gap:8px;align-items:center; padding:12px 20px;border-bottom:1px solid var(--line-soft);background:var(--bg); } .toolbar select{ max-width:46%;font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:8px; background:var(--input);color:var(--ink);outline:none; } .toolbar button{ font-size:13px;padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--input); color:var(--ink);white-space:nowrap; } .toolbar button:hover{border-color:var(--line-strong);background:var(--panel-2)} /* 状态文字本身只负责排版；它现在是浮层卡片的内容，不再是工具条的一行。 max-width 让长错误不至于把卡片撑得比消息区还宽（换行由 .error 的 white-space 决定）。 */ #status{display:block;max-width:100%;font-size:12px;line-height:1.5;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 失败提示要能被看见：换行而不是被省略号截断（错误信息往往是"哪里失败了"这句话本身） */ #status[data-kind="error"]{color:var(--danger, #d9534f);white-space:normal;overflow:visible} /* 成功/进度类提示走淡出：先降低不透明度，再由 JS 清空（清空后整卡片收起） */ #status[data-fading="true"]{opacity:0;transition:opacity .45s ease} /* ---------- 聊天页顶部：会话级系统提示词（默认收起） ---------- 与编排页是同一件事的另一个宿主（.orch-chips/.orch-chip/.fsel 共用）， 差别有两点： 1) 作用范围是整个会话（不是整个工作流）； 2) **默认收起**——多数会话不选文件，不该为此长期付版面成本。 所以这里不套 .sec-body 的卡片外壳，只用一条左侧色条标明这是「会话配置」 而不是「对话内容」，避免在消息区上方又多出一层视觉噪音。 收起/展开只切 .collapsed 这一个类，body 的显隐交给它，不在 JS 里各判一次 （两处判断 = 两处可能不一致，展开动画与 aria-expanded 会打架）。 */ .sys-bar{ flex:none;display:flex;flex-direction:column;gap:8px; /* * 整条仍是通栏（下边框要横贯，否则会变成一块悬空的卡片）， * 但**内容**收进与消息区同宽的列里居中。 * 用户说的"不要那么宽、对齐消息区域宽度"指的就是内容宽度—— * 之前搜索框从屏幕最左拉到最右，而消息只占中间 820px，两者明显错位。 */ padding:10px 20px 12px;border-bottom:1px solid var(--line-soft);background:var(--bg); } .sys-bar-head,.sys-bar-body{ width:100%;max-width:var(--content-col);margin-left:auto;margin-right:auto; box-sizing:border-box; } .sys-bar.collapsed .sys-bar-head{max-width:var(--content-col)} /* 收起态：只留一行触发器，去掉下边框与纵向内边距，视觉上不构成"一条横幅"。 * 横向内边距必须保留（padding 简写会连它一起清零）——清零后触发器会顶到视口左右边缘， * 与消息列的 22px 边距对不齐，"对齐消息区宽度"这个诉求就只对了一半。 */ .sys-bar.collapsed{padding-top:0;padding-bottom:0;gap:0;border-bottom:none;background:transparent} .sys-bar.collapsed .sys-bar-body{display:none} .sys-bar-toggle{ display:flex;align-items:center;gap:8px;width:100%; /* * 左右内边距与消息列的左边距对齐（消息列在宽屏时距视口至少 22px）。 * 收起态的触发器是整行点击目标，必须撑满列宽，否则点空白处没反应。 */ padding:7px 0;border:0;background:transparent;cursor:pointer;text-align:left; color:inherit;font:inherit; } .sys-bar-toggle:hover{background:var(--panel-2)} .sys-bar-toggle:focus-visible{outline:2px solid var(--line-strong);outline-offset:-2px} /* 展开箭头：纯 CSS 三角，不引图标字体 */ .sys-bar-caret{ flex:none;width:0;height:0;border-left:4.5px solid currentColor;border-top:4px solid transparent; border-bottom:4px solid transparent;transition:transform .15s ease;opacity:.55; } .sys-bar:not(.collapsed) .sys-bar-caret{transform:rotate(90deg)} /* 收起但已有选中文件时：整条要给个"这里有东西"的提示，否则用户会忘了自己设过 */ .sys-bar.collapsed.has-files .sys-bar-title{color:var(--ink-soft)} .sys-bar.collapsed.has-files .sys-bar-caret{opacity:.9} /* 移动端：折叠触发器就是整行的点击目标，必须达到触控下限（44px）。 实测收起态只有 33px（7px 上下 padding + 内容行高），iPhone 上点不准。 */ @media (max-width:760px){ .sys-bar-toggle{padding-top:4px;padding-bottom:4px;min-height:44px} } .sys-bar-head{display:flex;align-items:center;gap:8px;min-height:20px} .sys-bar-body{display:flex;flex-direction:column;gap:8px;padding:0 0 2px} .sys-bar-title{ font-size:11.5px;font-weight:600;color:var(--ink-faint); letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:7px; } .sys-bar-title::before{content:'';width:3px;height:11px;border-radius:2px;background:var(--line-strong)} .sys-bar-hint{ font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* 聊天页的文件搜索框比编排页小一号：它是常驻控件，不是主操作区 */ .sys-bar .fsel{margin-top:0} .sys-bar .fsel-input{padding:6px 10px;font-size:12.5px} /* * 搜索框 + 最近使用文件标签：同一行，各占一半。 * * 为什么是"各占一半"而不是按字符数定宽： * 先前按 20ch 定宽是错的——ch 是数字 0 的宽度，而中文占两个字宽， * 于是 20ch 连占位文字都显示不全（实测被截成"搜索 OB 文件，回车选"）， * 下拉候选里的文件名也全被截断。字符数这个单位在中文界面里根本不可用。 * "各占一半"是布局意图的直接表达，也不依赖字体度量： * 两边都用 flex:1 1 0 + min-width:0，于是无论窗口多宽都精确对半分。 * min-width:0 是必须的：flex 项默认 min-width:auto， * 长文件路径会把标签区撑宽、把搜索框挤扁（这正是分区失效的常见原因）。 * * 整行**只允许一行**（用户要求 2026-09-17）：需要换行的标签直接不显示。 * * 为什么不是"让它换行、行高变大"： * 这一行在系统提示词条的顶部，一旦换行整个条会突然变高， * 把下面的聊天消息整体往下推——每加一个文件界面就跳一次，非常烦躁。 * 保持恒定的单行高度，界面才稳定。 * * 溢出的处理是**隐藏**（overflow:hidden）而不是省略号： * 省略号在这里会误导——它让人以为"只有这一个被截断了"， * 实际是后面还有若干个标签完全没显示。整块裁掉更符合事实。 * flex-wrap:nowrap + 每个 chip 的 flex:none 保证它们排队而不是被压缩， * 于是超出部分自然被裁掉，且被裁的是**排在后面的**（最近使用顺序， * 越靠前越相关），信息损失最小。 */ /* * 搜索框 + 最近使用标签所在的这一行。 * * 这一行是**单行布局**：输入框与标签区各占一半，放不下的标签由行尾裁掉。 * * ===== 为什么这里有 overflow:hidden，以及由此产生的硬约束 ===== * * overflow:hidden 是"整行恒为一行"的实现手段（超出即裁掉）。但它在 CSS 里 * 有一个常被忽略的副作用：**overflow:hidden 的元素是一个滚动容器**。 * 于是这一行同时成了三样东西：flex 行、裁剪框、滚动容器。 * * 【2026-09-18 线上故障】点开搜索框后输入框整个消失，只剩下列表挂在原处。 * 实测根因（逐层证据，勿再猜）： * · 下拉 .fsel-menu 绝对定位挂在 .sys-bar-pick 上，但**仍计入它的 * scrollHeight**（实测 scrollHeight=332 / clientHeight=28）； * · 输入框获得焦点时浏览器把"聚焦元素滚入可视区"，因它是滚动容器， * 于是设了 scrollTop=69； * · overflow:hidden 只是不显示滚动条，**并不阻止程序化滚动**， * 整行内容被上移 69px，输入框 top 135→66，正好被裁出可视区； * · 而绝对定位的浮层按行内几何摆放，于是正好压在原输入框位置上。 * * 所以：**浮层绝不能成为这一行滚动内容的一部分**。这就是下面 * .sys-bar-pick .fsel-menu 用 position:fixed 的原因——它是唯一能同时 * 逃出「裁剪」与「滚动」的手段（absolute 只能逃出裁剪，逃不出滚动）。 * * 验收口径（唯一权威，见 e2e）：菜单打开前后， * ① 输入框 getBoundingClientRect().top 逐像素不变； * ② 本行 scrollTop 恒为 0。 */ .sys-bar-pick{display:flex;align-items:flex-start;gap:10px;flex-wrap:nowrap;overflow:hidden} .sys-bar-pick .fsel{flex:1 1 0;min-width:0} /* * 标签区：不换行、不收缩，超出部分由外层 overflow:hidden 裁掉。 * min-width:0 仍要保留，否则长文件名会把搜索框挤扁。 */ .sys-recent{flex:1 1 0;min-width:0;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;overflow:hidden} .sys-recent-label{font-size:11px;color:var(--ink-faint);flex:none} /* * 最近使用文件的标签：一眼能看出是"可点的快捷入口"（而不是只读文字）， * 所以给描边 + hover 变强调色；文件名过长时省略号，不撑破行。 */ .sys-recent-chip{ /* * flex:none 是"整行只一行"的关键：标签保持自身宽度、不参与收缩， * 于是放不下的标签会溢出容器被裁掉（而不是被压成一条挤在一起）。 * white-space:nowrap 保证标签自身不被拆成两行。 * 单个标签仍允许内部文件名省略（max-width + 内部的 .src-name 省略号）， * 这样即使只有一个超长文件名的标签，也不会把整行撑爆。 */ display:inline-flex;flex:none;align-items:center;gap:5px;white-space:nowrap; max-width:100%;min-width:0; border:1px solid var(--line);border-radius:999px;background:var(--panel-2); color:var(--ink-soft);font-size:11.5px;padding:3px 9px;line-height:1.5; } .sys-recent-chip:hover{border-color:var(--accent);color:var(--accent)} .sys-recent-chip .src-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* * 已加入本会话的标签：虚线边框 + 变淡，表示"这条已经在系统提示词里了"， * 所以左键点击不再有动作——但**它仍然是可交互的**（右击能从最近使用移出）。 * * 因此不能用 cursor:default（那是在说"这里没东西可操作"）， * 也不能用 disabled（那会让辅助技术与自动化工具整个跳过它）。 * 悬停色仍保留，配合 title 里"右击可从最近使用移出"的提示， * 让用户能发现这条路径——一个只能靠猜才能发现的交互等于不存在。 */ .sys-recent-chip.is-added{border-style:dashed;opacity:.55} .sys-recent-empty{font-size:11px;color:var(--ink-faint)} @media (max-width:760px){ /* * 手机上"各占一半"会让两边都无法使用（搜索框只剩十几个字、标签只剩半截文件名）， * 所以窄屏改为上下两行，各自占满整行。 * 这不是破例，而是同一意图在窄屏下的正确表达：两个区域都要能用。 */ .sys-bar-pick{flex-direction:column;align-items:stretch;gap:8px} .sys-bar-pick .fsel, .sys-bar-pick .sys-recent{flex:1 1 auto;width:100%} } /* * ===== 聊天页的下拉浮层：position:fixed，彻底脱离裁剪与滚动 ===== * * 为什么必须是 fixed（而不是 absolute）： * absolute 的包含块是 .sys-bar-pick，因此它**仍属于该元素的滚动内容**， * 会把 scrollHeight 撑大（实测 28 → 332）；而 .sys-bar-pick 是 overflow:hidden * 的滚动容器，输入框一聚焦就触发"滚入可视区"，整行被 scrollTop:69 顶走 * ——输入框消失、浮层压在原位。fixed 以视口为包含块，不进任何祖先的 * 滚动内容，两个症状同时消失。 * * 代价与它的处理：fixed 元素不再自动跟随锚点，所以坐标必须**量出来**。 * 量的实现是唯一一处——block-kit.js 的 positionMenu()： * · 以锚点输入框的 getBoundingClientRect() 为唯一定位权威； * · 打开时"先定位、后显示"，显示后再校准一次（隐藏时量不到真实高度）； * · 内容高度变化、窗口 resize / 滚动时重算（否则位置会过期）。 * 这是本设计的明确取舍："浮层与锚点解耦"优先于"少写几行定位代码"—— * 前者是结构正确性（不这么写就会出现本页记录的故障），后者只是省事。 * * 这里只给外观与上限；left/top/width 一律由 JS 写入—— * 定位权威只有一个，CSS 不得再参与定位（两条规则同时定坐标时， * 胜出者取决于特异性，很难看出是谁在生效）。 */ .sys-bar-pick .fsel-menu{ position:fixed; z-index:60; max-height:min(300px,46vh); } .sys-bar .orch-chips{min-width:0} /* 模板面板 */ .panel-title{font-size:12px;color:var(--ink-soft);margin-bottom:10px} .panel textarea{ width:100%;height:150px;border:1px solid var(--line);border-radius:8px;padding:10px; font:12.5px/1.7 var(--mono);resize:vertical;outline:none;background:var(--input);color:var(--ink); } .panel textarea:focus{border-color:var(--line-strong)} .panel-actions{margin-top:10px;display:flex;gap:8px} .panel-actions button{ font-size:13px;padding:7px 14px;border:1px solid var(--line);border-radius:8px;background:var(--input); color:var(--ink); } .panel-actions #save{background:var(--ink);color:var(--bg);border-color:var(--ink)} .panel-actions #save:hover{background:var(--ink-strong)} /* 对话区 */ #chat{ flex:1;overflow:auto;min-height:0; padding:26px max(22px,calc((100% - var(--content-col))/2)) 10px; -webkit-overflow-scrolling:touch; } /* ===== 消息导航区段开始（msg-nav:begin） ===== */ /* ============================================================================ * 消息导航（聊天页右侧）—— 全站唯一实现，逻辑与几何见 public/msg-nav.js。 * * 几何权威只在 msg-nav.js 的一组常量里（行高 / 横线列宽 / 横线长度与粗细 / * 容器右内边距 / 容器宽度）。本文件只负责**颜色与材质**，不定义任何尺寸—— * 尺寸若在两处定义，三态对齐（横线不位移）这条不变量就守不住了。 * * 三态与源码端一致： * 静默态 = 只有横线（容器背景透明、无边框无阴影） * 容器展开态 = 容器向左生长、浮现背景/边框/阴影，左侧摘要列淡入 * 行悬停态 = 该行横线加长变色，并在左侧弹出更完整的详情气泡 * ========================================================================== */ /* * 导航宿主：与 #chat 同级，absolute 出流。 * * 为什么必须 absolute 且 pointer-events:none： * · absolute 出流 → 导航的存在/展开不改变 #chat 与 .composer 的任何盒子， * 因此不会反过来影响"是否可滚/是否在底部"这些由几何推导的判据 * （与 .scroll-bottom-btn 出流是同一条理由）。 * · pointer-events:none → 宿主这一整片区域不吃指针事件， * 消息区的滚动、选中、点击在导航空白处照常工作； * 只有导航自身盒子（下面 .msg-nav-shell）才重新打开指针事件。 */ .msg-nav-host{ /* * 垂直边界由 JS 依 #chat 的真实几何写入（top/height）， * 这里只声明"贴 main 右缘、零宽"。不写 top:0;bottom:0： * 那会让导航垂直居中于**整个 main**（含顶栏与输入框）， * 而用户要的是"居中于消息区"。几何来自现场量取，不靠假设。 */ position:absolute;right:0;width:0; pointer-events:none;z-index:20; } /* * 壳层：right 锚定的定位盒，宽度由 JS 按展开态写入。 * * right:12px 是**唯一**的横向锚点：展开时只改 width（向左生长）， * 所以横线列（贴容器右内边距）的屏幕 x 坐标在三态之间恒定。 * top:50% + JS 给的 translateY 让它垂直居中于消息区并上抬半个输入框高度， * 避免底部被输入框压住（与源码端同一算法）。 */ .msg-nav-shell{ /* * top:50% 是相对**宿主**（= 消息区那条带）的，不是相对整个 main。 * 因此"垂直居中于消息区"是几何上必然成立的，不需要再减输入框高度。 */ position:absolute;right:12px;top:50%; pointer-events:none; transition:width .2s ease-out; } /* * 容器：可滚动的条目列。 * 滚动条永不占位（scrollbar-width:none）——滚动条一旦占位， * 容器内容宽度就会随"是否需要滚动"变化，横线列随之左右抖动。 * 这是保持三态零位移的必要条件，不是审美选择。 */ .msg-nav-container{ pointer-events:auto; display:flex;flex-direction:column;align-items:stretch; max-height:46vh;overflow-y:auto;overflow-x:hidden; padding-top:6px;padding-bottom:6px; border:1px solid transparent;border-radius:12px; background:transparent; transition:background-color .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out; scrollbar-width:none;overscroll-behavior:contain; } .msg-nav-container::-webkit-scrollbar{width:0;height:0} .msg-nav-container.expanded{ border-color:var(--line); background:color-mix(in srgb,var(--panel) 94%,transparent); box-shadow:0 10px 30px -12px rgba(0,0,0,.55); backdrop-filter:blur(4px); } /* 行：按钮语义，整行可点；布局由 JS 写内联几何（唯一尺寸来源） */ .msg-nav-row{ display:flex;width:100%;min-width:0;flex:none;align-items:center;justify-content:flex-end; border:0;background:transparent;padding:0;cursor:pointer; -webkit-tap-highlight-color:transparent; } /* * 左侧摘要列：静默态宽度 0 且透明，展开态定宽显示。 * 宽度/透明度/右边距都由 JS 按展开态写内联样式——三态差异只在这里， * 而横线列完全不受影响（横线右侧对齐、位置固定）。 */ .msg-nav-label{ display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-align:left; font-size:11px;line-height:1;text-overflow:ellipsis; color:var(--ink-faint); transition:flex-basis .2s ease-out,opacity .2s ease-out,color .2s ease-out,margin .2s ease-out; } .msg-nav-preview{min-width:0;overflow:hidden;text-overflow:ellipsis} .msg-nav-number{ display:inline-flex;flex:none;align-items:center;justify-content:center; box-sizing:border-box;min-width:18px;height:18px;padding:0 4px; border:1px solid var(--line);border-radius:5px;background:var(--input); color:var(--ink-soft);font-size:10px;font-weight:600;font-variant-numeric:tabular-nums; } .msg-nav-row.active .msg-nav-number{ color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); background:color-mix(in srgb,var(--accent) 12%,var(--input)); } .msg-nav-row.hovered .msg-nav-label{color:var(--ink)} .msg-nav-row.active .msg-nav-label{color:var(--accent)} /* 横线列：三态同尺寸同位置，只有颜色与长度随状态变化 */ .msg-nav-dash-col{display:flex;flex:none;align-items:center;justify-content:flex-end} .msg-nav-dash{ display:block;border-radius:999px;background:var(--line-strong); transition:background-color .15s ease-out,width .15s ease-out; } .msg-nav-row.hovered .msg-nav-dash{background:var(--ink-soft)} .msg-nav-row.active .msg-nav-dash{background:var(--accent)} /* * 详情气泡：行悬停时在导航左侧弹出。 * 它挂在壳层上（不是容器内），所以不会被容器的 overflow 裁掉， * 也永远不吃指针事件（否则会和行的 mouseleave 互相打架，气泡闪烁）。 */ .msg-nav-bubble{ position:absolute;right:100%;margin-right:8px; pointer-events:none; border-radius:10px;border:1px solid var(--line); background:var(--panel);color:var(--ink-soft); padding:8px 12px;font-size:11px;line-height:1.55; box-shadow:0 8px 24px -10px rgba(0,0,0,.6); overflow:hidden; overflow-wrap:anywhere;word-break:break-word; } .msg-nav-bubble.hidden{display:none} /* * 空会话时不渲染导航：由 JS 给宿主加全局 .hidden（见 style.css 的统一隐藏规则）。 * 这里**不再**定义第二套隐藏样式——隐藏语义只允许一个权威。 */ /* ============================================================================ * 第二个宿主：编排页的**编排区**（左栏 .orch-col-edit） * * 与聊天页**共用上面同一套壳层/容器/行/横线/气泡样式**（这正是本模块只写一份 * 的理由）。这里只覆盖"宿主盒子怎么摆"这一件事，几何尺寸一个都不重复。 * * ★ 位置：导航属于编排区，不属于右侧的版本/快照面板 ★ * 它导航的对象（消息序列）在编排区里，导航就必须长在编排区上—— * 放到右栏会变成"看着一个地方、点着另一个地方"，是纯粹的位置错误。 * * 为什么是**覆盖层**（absolute）而不是编排区里的一个普通子元素： * 编排区本身可滚动（overflow:auto）。导航若当普通子元素，会跟着消息 * 一起滚走，那就不再是导航（只是一条会消失的标题）；而且它会抢占 * 消息列的横向空间与纵向空间。做成覆盖层后： * · 不随消息滚动（与聊天页那条导航同一位置关系）； * · 出流，不改变编排区任何盒子的尺寸，因此不会干扰 * "能不能滚、滚到哪"这些由几何推导的判据。 * * 为什么不会遮挡滚动条：编排区的滚动条贴在最右缘；导航的 right 偏移 * （由 JS 写入壳层宽度决定，见下）在滚动条左侧，两者不重叠。 * ========================================================================== */ .orch-nav-host{ /* * 定位基准是 .orch-cols（宿主与两栏是兄弟，见 bianpai.html）。用 absolute * 把它压在编排区（左栏）上：左栏宽 = 总宽 − 右栏宽，而右栏宽是 minmax(340px,40%) * 这类不定值，所以这里**不自己算左栏宽度**，而是用 right 把宽度"顶"出来： * 右侧预留出右栏的宽度不可行（值不确定），因此改为整块铺满再靠右内边距 * 让导航落在左栏右缘 —— 宽度计算交给下面 .orch-nav-shell 的 right。 */ position:absolute;inset:0; pointer-events:none;z-index:20; } .orch-nav-host .msg-nav-shell{ /* * 壳层 right 锚定在编排区右缘内侧 12px 处；top:50% + translateY(-50%) * 就是"垂直居中于编排区"，与聊天页同一条算法（JS 的 positionMode='center' * 分支会写这个 transform，因此这里保留 center 语义）。 * * ★ 12px 的来历（2026-10-03 更新，勿再按"留白"理解）★ * 这个数是"别贴住区域右缘"的间距常量（与聊天页 NAV_REGION_EDGE_GAP 同值）， * 曾经它恰好落在编排区右缘与消息列右缘之间的留白里 —— 因为那时消息列被 * 一个对版面无感知的 max-width:760px 居中，收面板腾出的空间一概不要。 * 那个绝对上限已删除（见 :root 的 --orch-col-max）：编排区的内容现在铺满 * 版面宽，于是**导航的静默横线列会落在内容右缘之上**。 * 这是**接受**的：导航是覆盖层，重叠本就是它的正常语义（聊天页同款， * 且编排页已经刻意不弹详情气泡来避免压正文，见下面的 .msg-nav-bubble）。 * 更重要的是：**不允许**为了给导航让位而让内容按导航尺寸收窄 —— * 那就是把覆盖层的外观当成了主内容的布局输入（本文件明令禁止， * 见 .orch-col-edit > * 那一段的历史说明）。静默态的容器背景/边框都是 * 透明的，可见的只有右端那几根细横线，视觉影响极小。 */ /* * ★ 横向锚点必须由**编排区自己的右缘**决定，不能写死百分比 ★ * * 踩过的坑：写 right:calc(40% + 12px) —— 40% 看着像"右栏宽度"， * 实际那个 grid 是 minmax(340px,40%)，右栏宽度是**有下限的不定值** * （窗口一窄就锁在 340px，百分比不再成立）。实测偏差直接变成重叠： * 导航右缘 958 vs 编排区滚动条左缘 955 → 压住滚动条 3px； * 导航左缘 910 vs 消息气泡右缘 935 → 压住正文 25px。 * 两个都是"拿一个近似值当几何权威"造成的，修法不是微调那个数字， * 而是让锚点只依赖一个**确定**的量：#msgNavHost 铺满 .orch-cols（见上）， * 再由 JS 把编排区（.orch-col-edit）的右缘写进 right —— 与聊天页 * 注入 getRegionEl 的几何同一条思路：CSS 不猜，几何来自现场量取。 * * 初值给一个安全兜底（窄屏断点会覆盖它），真实值由 layoutHost 写入。 */ position:absolute;right:12px;top:50%; pointer-events:none; } /* * 窄屏（两栏叠成一列）：编排区占满整宽，导航贴右缘即可。 * 断点与 .orch-cols 的响应式规则同源（760px），不另立一套。 */ @media (max-width:760px){ .orch-nav-host .msg-nav-shell{right:12px} } /* * 编排页容器仍用聊天页那套 max-height:46vh 与内部滚动： * 导航是覆盖层（高度不受编排区约束），条目多时必须自己滚， * 否则会顶出编排区上缘。 */ /* * 详情气泡：编排页里导航贴编排区右缘，向左弹出的气泡会**盖住消息正文** * （聊天页有空白带可让，这里左侧就是消息列）。因此编排页不弹出气泡 —— * 行本身已经在展开态显示摘要，detail 仍挂在 aria-label 上供读屏用。 * 宁可不出提示，也绝不盖住正文（与 msg-nav.js 里同一条原则）。 */ /* 全文详情覆盖层：独立于消息布局，鼠标可进入并滚动阅读。 */ .msg-nav-full-detail .msg-nav-bubble{ pointer-events:auto;overflow-y:auto;overscroll-behavior:contain; white-space:pre-wrap;font-size:12px;line-height:1.7; color:var(--ink);box-sizing:border-box; } .msg-nav-full-detail .msg-nav-shell::before{ content:"";position:absolute;right:100%;top:0;width:8px;height:100%; } /* ===== 消息导航区段结束（msg-nav:end） ===== */ .msg{max-width:var(--content-col);margin:0 auto 18px;display:flex;align-items:flex-start} .msg.user{justify-content:flex-end} .msg.user .msg-main{flex:0 1 auto;max-width:85%} .msg.assistant .msg-main{width:100%} .user-bubble{padding:10px 14px;border:1px solid var(--line-strong);border-radius:18px 4px 18px 18px;background:var(--panel-2)} .user-fold-viewport{min-width:0} .user-bubble.is-folded .user-fold-viewport{max-height:var(--user-fold-height);overflow:hidden;mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)} .user-fold-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:28px;margin:6px auto 0;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink-soft);cursor:pointer} .user-fold-toggle[hidden]{display:none} .user-fold-toggle svg{width:16px;height:16px} .user-bubble:not(.is-folded) .user-fold-toggle svg{transform:rotate(180deg)} .msg-main{flex:1;min-width:0} /* * ---------- 正文元素（.md）的基础排印：**必须自带，不能依赖聊天页祖先** ---------- * * 为什么把 white-space / overflow-wrap 从 `.msg .md` 提到 `.md` 本身： * `.md` 是「一条消息的一段正文」这个元素的唯一载体，而它已经**不属于聊天页**—— * 编排页的运行结果区、日志页的对话面板都通过 window.MessageElements 渲染出 * 同样的 `.md`（那是本项目刻意共用的一份渲染实现）。 * 只要基础排印挂在 `.msg` 上，任何**非聊天页**宿主拿到的就是一份"没有 * white-space:pre-wrap"的正文：换行全部塌掉，整段挤成一坨。 * 实测事故：日志页对话面板里 AI 回答的 markdown 标题/列表/段落全被压成 * 一行连续文字（图片证据：用户报"里面完全没有换行啊"）。 * * 因此这里确立一条不变量（由 message_element_contract.test.js 断言）： * **`.md` 的基础排印必须自足；`.msg` 只允许承载"聊天页特有"的差异** * （角色字号、颜色、头像、操作栏……），不得让别的宿主因为缺少它而渲染错误。 * * pre-wrap 而不是 normal：正文的权威是**纯文本字符串**， * 其中可能有富文本解析器不处理的换行（例如只有单个换行符的软换行， * 或富文本不可用而降级为纯文本时）。pre-wrap 保证"文本里的换行一定看得见"。 */ .md{white-space:pre-wrap;overflow-wrap:anywhere} /* 正文基数字号 × 缩放系数：两种正文各按自己的基数等比缩放， * 于是"用户 14 / 助手 15"这个层级差在任何缩放下都保持不变。 * 用 calc 而不是改写成绝对像素，是为了让系数成为唯一变量， * 将来调基数只动这一个数字。 */ .msg.user .md{font-size:calc(14px * var(--msg-font-scale));color:var(--ink)} .msg.assistant .md{font-size:calc(15px * var(--msg-font-scale));line-height:1.75} /* 思考容器：默认折叠，标题行显示字数，点击展开 */ .reasoning{ margin:0 0 10px;border:1px solid var(--line);border-radius:var(--radius); background:var(--panel-2);overflow:hidden; } .reasoning-head{ width:100%;display:flex;align-items:center;gap:8px;border:0;background:transparent; padding:7px 11px;font-size:12px;color:var(--ink-soft);text-align:left; } .reasoning-head:hover{background:var(--panel)} .reasoning-title{font-weight:600;color:var(--ink-soft)} .reasoning-meta{font-size:11px;color:var(--ink-faint);margin-left:auto} .reasoning-caret{ flex:none;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid var(--ink-faint);transition:transform .16s ease; } .reasoning.open .reasoning-caret{transform:rotate(180deg)} .reasoning-body{ display:none;padding:0 11px 10px;border-top:1px solid var(--line-soft); white-space:pre-wrap;overflow-wrap:anywhere; font-size:12.5px;line-height:1.7;color:var(--ink-soft); max-height:340px;overflow:auto; } .reasoning.open .reasoning-body{display:block;padding-top:8px} /* 底部用量：非缓存 / 缓存读 / 输出（+ 思考） */ .msg-usage{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .msg-usage.hidden{display:none} .usage-chip{ display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:1; padding:3px 8px;border-radius:999px;border:1px solid var(--line); background:var(--panel-2);color:var(--ink-soft); } .usage-chip i{font-style:normal;color:var(--ink-faint)} .usage-chip b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums} .usage-chip.live{border-style:dashed} .usage-chip.live b{color:var(--accent)} /* * 计价器：金额是 chip 内的第二个 ，与 token 数同格。 * 用等宽数字（tabular-nums）让各行金额上下对齐，方便竖着扫一眼比对； * 颜色用强调色而不是正文字色——它是"这笔钱"的提示，不是 token 统计的一部分。 */ .usage-cost{color:var(--accent);font-variant-numeric:tabular-nums} /* * 金额与 token 数之间加一个分隔点。 * 用 :not(:first-child) 而不是 `i + .usage-cost`：后者只在金额**紧挨** * 标签时才命中，而正常格子里中间还夹着 token 数（标签token金额）， * 于是分隔点只在"合计"那一格出现——同一排 chip 里两种样子，看起来像没对齐。 */ .usage-chip .usage-cost:not(:first-child)::before{content:'·';margin:0 5px;color:var(--ink-faint)} .md.typing::after{content:"▍";animation:blink 1s steps(2) infinite;color:var(--accent)} @keyframes blink{50%{opacity:0}} .md.error-text{color:var(--danger);white-space:pre-wrap} /* * ---------- 消息正文的富文本（public/rich-text.js 的样式投影） ---------- * * 职责边界：这里是富文本元素的**全部**视觉定义，rich-text.js 只产出 * 结构（.rt-* 类名 + 正确的语义标签），不产出任何内联样式。 * 于是"长什么样"只有一处权威：换主题、调排版都只动这里。 * * 为什么全部用主题 token（--ink/--line/--panel-*）而不是写死颜色： * 浅色与深色两套 palette 共用同一份规则，暗色适配不需要第二份 CSS * ——那是"两套实现慢慢走偏"的经典起点。 * * 字号刻意用 em（相对正文）而不是 px：正文支持 --msg-font-scale 缩放， * 富文本元素必须跟着一起缩放，否则用户放大字号后代码块与表格会显得错位。 */ /* 段落与标题：间距全部用 em，跟随正文缩放 */ .rt-p{margin:0} .rt-p+.rt-p{margin-top:.7em} .msg-flow .rt-p+.rt-p{margin-top:.4em} .rt-h{margin:1em 0 .45em;line-height:1.4;font-weight:650;color:var(--ink-strong)} .rt-h:first-child{margin-top:0} .rt-h1{font-size:1.5em} .rt-h2{font-size:1.32em} .rt-h3{font-size:1.16em} .rt-h4,.rt-h5,.rt-h6{font-size:1em} /* 列表：缩进用 padding 而不是 margin，避免外层 margin 折叠后层级看不出来 */ .rt-ul,.rt-ol{margin:.4em 0;padding-left:1.5em} .rt-ul{list-style:disc} .rt-ol{list-style:decimal} .rt-ul li,.rt-ol li{margin:.18em 0} .rt-ul li::marker,.rt-ol li::marker{color:var(--ink-faint)} /* 引用：左侧竖线 + 弱化文字，与气泡内已有元素（.tv-msg）同一套视觉语言 */ .rt-quote{ margin:.6em 0;padding:.1em 0 .1em .9em; border-left:3px solid var(--line-strong); color:var(--ink-soft); } /* 分隔线 */ .rt-hr{margin:1em 0;border:0;border-top:1px solid var(--line)} /* * 行内代码：底色 + 等宽 + 轻微内边距。 * 用 .rt-code 而不是裸 code：裸 code 会连代码块里的 一起命中， * 于是代码块内部又套一层底色（视觉上像两层框）。 */ .rt-code{ font:.88em/1.5 var(--mono); background:var(--panel-2);border:1px solid var(--line-soft);border-radius:5px; padding:.08em .34em;color:var(--ink); overflow-wrap:anywhere; } /* 代码块：整块可横向滚动，绝不撑破气泡宽度 */ .rt-pre{ margin:.6em 0;padding:10px 12px; background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius); overflow-x:auto;-webkit-overflow-scrolling:touch; } .rt-pre code{ font:.86em/1.6 var(--mono);color:var(--ink); white-space:pre;display:block;min-width:max-content; } /* 表格：外层 wrap 负责横向滚动，表格自身不溢出（窄屏下也不挤爆气泡） */ .rt-table-wrap{margin:.6em 0;overflow-x:auto;-webkit-overflow-scrolling:touch} .rt-table{ border-collapse:collapse;font-size:.92em;min-width:max-content; border:1px solid var(--line); } .rt-table th,.rt-table td{ border:1px solid var(--line);padding:5px 9px;text-align:left;vertical-align:top; } .rt-table th{background:var(--panel-2);font-weight:650;color:var(--ink-strong)} .rt-table tbody tr:nth-child(even){background:var(--panel-2)} /* 链接：强调色 + 下划线，悬停加深 */ .rt-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere} .rt-link:hover{color:var(--accent-hover)} /* 粗体/斜体/删除线：语义标签自带样式，这里只补删除线的弱化色 */ .rt-del{color:var(--ink-faint)} /* 输入区 */ .composer{ flex:none;margin:0 auto 18px; /* * position:relative 只为一件事：让「滚动到底」按钮能挂在输入框**上沿** * （见下方 .scroll-bottom-btn 的 bottom:100%）。 * 它是定位基准，不是布局成员——按钮因此不参与 .composer 的盒子计算。 */ position:relative; /* * 输入框比消息列略宽是刻意的：它是有边框的实体控件，同宽时会显得比内容窄。 * 但仍然从同一个 token 派生（+40px），不写第二个魔法数字—— * 否则以后改列宽就会漏掉这一处。 */ width:min(calc(var(--content-col) + 40px),calc(100% - 40px)); border:1px solid var(--line);border-radius:14px;background:var(--panel); box-shadow:0 4px 18px rgba(0,0,0,.05);padding:12px 14px 10px; } /* * 「滚动到底」按钮：挂在输入框上沿的浮层。 * * 结构要点（这是"能不能不添乱"的全部关键）： * · position:absolute + bottom:calc(100% + 8px) —— **出流**，不占 .composer 的盒子， * 所以它显示/隐藏时输入框和消息区都纹丝不动（不变量：开关前后 * 输入框 getBoundingClientRect().top 逐像素不变）； * · 定位基准是 .composer 自身（见上面 position:relative），坐标由 CSS 从 * "输入框上沿"这一个已知量推出，**不需要 JS 量坐标**—— * 因此窗口缩放、软键盘弹出、输入框长高，它都自动跟随，没有会过期的中间量。 * · 右对齐：与右侧「发送」同一竖列，是"这条栏里的操作"的直觉位置； * 居中会让人误以为它属于消息列。 * * 状态只有一个：显示 / 不显示。由 app.js 的 syncScrollBottomButton() 依 #chat * 的真实几何**现场推导**，不持久化、不叠加"新消息到达"之类的第二判据 *（两套判据必然分叉，会出现"有按钮却已到底"或"没按钮却上不去"）。 */ .scroll-bottom-btn{ position:absolute;bottom:calc(100% + 8px);right:0;z-index:30; display:inline-flex;align-items:center;justify-content:center;gap:5px; border:1px solid var(--line);border-radius:999px;background:var(--panel); color:var(--ink-soft);font-size:12px;line-height:1;padding:6px 12px; box-shadow:0 3px 12px rgba(0,0,0,.10); cursor:pointer; } .scroll-bottom-btn:hover{border-color:var(--line-strong);color:var(--ink)} .scroll-bottom-btn::before{ content:'';flex:none;width:0;height:0; border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor; } /* * 隐藏用 hidden 属性（由 JS 写入），而不是把它移出 DOM。 * 出流的浮层显示/隐藏都不影响任何盒子的几何，所以可以放心用属性切换； * 保留在 DOM 里也让"锚点位置"这件事在两种状态下完全一致，便于回归验证。 */ .scroll-bottom-btn[hidden]{display:none} @media (max-width:760px){ /* 移动端手指更粗：给足点击面积（仍不占布局） */ .scroll-bottom-btn{padding:9px 14px;font-size:12.5px} } .composer textarea{ width:100%;min-height:64px;max-height:220px;border:0;outline:0;resize:none; font:14px/1.6 var(--font);color:var(--ink);background:transparent; } .composer-actions{display:flex;align-items:center;gap:10px;margin-top:6px} #hint{font-size:11.5px;color:var(--ink-faint);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* * 输入框底部的上下文占用指示（小圆环）。 * * 颜色用 currentColor 驱动（SVG 里的描边读的就是它），所以配色只有一个 * 权威：下面的 [data-level] 换 color，圆环与文字一起变——不需要在 JS 里 * 再写一遍颜色常量。这正是"样式归 CSS、逻辑归 JS"的边界。 * * 尺寸固定 16px 且不参与 flex 伸缩：它是个状态指示，不该因为 hint 文本 * 变长而被压扁或撑大。 */ .ctx-meter{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:50%; color:var(--ink-faint); cursor:default;outline:none; /* 常态安静：它每天都在，不该喧宾夺主 */ opacity:.75; transition:opacity .15s ease,color .15s ease; } .ctx-meter:hover,.ctx-meter:focus-visible{opacity:1} .ctx-meter:focus-visible{box-shadow:0 0 0 2px var(--accent-soft,var(--line))} /* 接近预算：提醒但不刺眼 */ .ctx-meter[data-level="warn"]{color:#c9973f;opacity:.95} /* 真的会丢内容：明确示警（服务端告知发生裁剪时才会到这里） */ .ctx-meter[data-level="danger"]{color:#c0533f;opacity:1} #send{ border:0;border-radius:10px;background:var(--ink);color:var(--bg);font-size:13.5px; padding:8px 18px; /* * 图标与文字并存时用 inline-flex 对齐： * 基线对齐会让图标看起来偏下，居中才是视觉上"贴在一起"。 */ display:inline-flex;align-items:center;justify-content:center;gap:6px; } #send:hover{background:var(--ink-strong)} #send:disabled{background:var(--ink-faint);cursor:not-allowed} /* * 生成中：按钮变成「停止」。 * * 用描边危险色而不是实心：停止是"打断正在进行的事"， * 需要一眼可辨但不必像删除那样刺眼——它是个高频且无害的操作。 * 悬停才转实心，给一个明确的"按下去会发生什么"的确认感。 */ #send.is-stop{ background:transparent;color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger); cursor:pointer; } #send.is-stop:hover{background:var(--danger);color:var(--bg);box-shadow:none} /* 停止不可用（正在停止中）时保持轮廓，不要突然变成灰块 */ #send.is-stop:disabled{background:transparent;color:var(--danger);opacity:.5;cursor:progress} #send .send-ico{width:13px;height:13px;flex:none;display:block} /* 生成中图标轻微呼吸，提示"正在进行"；尊重减少动效偏好 */ @media (prefers-reduced-motion: no-preference){ #send.is-stop .send-ico{animation:sendbreathe 1.4s ease-in-out infinite} } @keyframes sendbreathe{0%,100%{opacity:1}50%{opacity:.45}} .hidden{display:none!important} /* ====================================================================== * 右栏（版本历史 / 快照）的首帧形态 —— 由 上的 data 属性决定（唯一权威） * ====================================================================== * * ★ 为什么必须是 CSS，不能等 JS（2026-09-28 实测的真实抖动）★ * * 面板的显隐曾是"HTML 写死 hidden + 等 JS 把工作流拉回来再展开"。 * 实测刷新时序（每 25ms 采样 #versionPanel 与编排区宽度）： * ① 解析前 : 无元素 * ② HTML 解析到 : hidden，编排区 40px（布局未稳） * ③ 样式就位 : hidden，编排区 602px（面板不存在 → 全宽） * ④ 布局稳定 : hidden，编排区 343px * ⑤ JS 取回工作流后 : 才展开，编排区 343px * 用户看到的就是"版本历史从无到有地弹出来"，同时编排区宽度抖一下。 * * 根因：显隐依赖了一次**网络请求**（取当前工作流）。而"这一栏该不该在、 * 现在该显示哪一块"是**版面事实**，在首帧就必须正确 —— 与主题、字号、 * 分栏宽度同类。引导脚本 public/orch-rightcol-init.js 在 里同步执行 * （先于样式表），所以用它的投影驱动 CSS，首帧就是用户上次留下的那一态。 * * 与分栏宽度的 --orch-*-w 完全同构：都是"引导脚本投影 → CSS 消费"。 * * ★ 用户 2026-10-01 的结构改动：两块各自折叠 → 一个容器 + 两个 tab ★ * 改前 #versionPanel 与 #snapShotBody 各有一个 data-orch-*-open 决定自己 * 折不折，于是两块同时占高度，两个列表各只有一百多像素。 * 现在只有一个状态：**哪个 tab 被选中**（data-orch-right-tab）， * 被选中的那个 pane 吃掉整个右栏高度。所以下面按 tab 选择器控制显隐， * 而不再按"某一块自己的折叠态"。 * * 这一整段只在**宽屏**生效（min-width:1081px）： * 窄屏（≤1080px）右栏整列由 CSS 退出布局（.orch-col-run{display:none}）， * 两块正文此刻在底部抽屉里 —— 若这些规则在那里也生效， * 它们会把抽屉的内容一起藏掉（藏的是同一份 DOM，见 syncSheetLayout）。 * 1081 这个断点与 .orch-cols 的桌面网格、layout-resize.js 的 desktopQuery 同源。 */ @media (min-width: 1081px){ /* * 整栏收起：把这一列**原地压成 0 宽**（不占位）。 * * ★ 用 width:0 + overflow:hidden，不用 display:none ★ * 与设置区折叠同一个理由（见 html[data-orch-settings-collapsed="1"] .orch-cols 段）： * 这一栏在网格里占一条轨道，display:none 会让后面的兄弟节点 * 顶上来认领轨道，列序一变就是一次静默错位。 * * ★ 0 轨道而不是"把宽度变量清零"★ * 网格模板用的是 var(--orch-snap-w)（用户可拖）。收起时把这条轨道 * 压成 0，但**变量本身不动** —— 展开时原样回来，用户拖过的宽度 * 不会因为收了一次就被打回默认值（那会让人以为"收起把我的设置弄丢了"）。 * 与左栏折叠、设置区折叠是同一套做法。 * * ★ 这里**只声明自己那两条轨道**（2026-10-03 结构性修复）★ * 本规则曾把五条轨道**整条重写一遍**（且把设置区那条写死成 * var(--orch-set-w,320px)）。于是它与 `html[data-orch-settings-collapsed="1"] .orch-cols` * 成了同一个属性的两个完整声明，靠特异性决胜负： * 本规则 (0,2,1) 胜过 (0,2,0)，设置区折叠被整条丢弃 —— * 三个面板全收起时，编排区左边仍空着一条 320px 死轨道。 * 现在每段只写自己那条：同时折叠时两个声明**互不相干**，都生效。 */ html[data-orch-right-open="0"] .orch-cols{ --orch-split-resizer-track:0px; --orch-snap-track:0px; } html[data-orch-right-open="0"] .orch-col-run{ /* 仍在网格流里，只是被压成 0 宽；不得用 display:none（会长出上面的问题） */ min-width:0;padding:0;border:0;overflow:hidden;visibility:hidden; } html[data-orch-right-open="0"] .orch-split-resizer{ /* 同设置区：留在原处，只是不可见、不可抓（不销毁，展开后立即可用） */ visibility:hidden;pointer-events:none; } /* * 两个 pane 的显隐 —— **完全由选中的 tab 决定**（一个状态，一个出口）。 * * 为什么不做成 JS 加 .hidden： * 那会成为"首帧靠 CSS、之后靠 JS"两套机制，必然在切换的那一帧出现 * 空档（JS 还没跑到，两块都按默认显示 → 闪一下双份内容）。 * 现在 CSS 是唯一下发点，JS 只改 data 属性。 */ html[data-orch-right-tab="ver"] #secSnapshots{display:none} html[data-orch-right-tab="snap"] #versionPanel{display:none} /* * ★ "当前没有打开的工作流" 不再动 pane 的显隐（2026-10-01 右栏 tab 化时纠正）★ * * 旧写法是 #versionPanel.needs-workflow{display:none}。 * 它在"版本历史只是一块可折面板、栏宽由固定网格轨道决定"的年代是安全的： * 藏掉它不改变任何几何，纠正发生在数据到位之后，用户看不见。 * * 右栏 tab 化之后这条不再成立，而且**实测有可见的抖动**： * tab 机制让 pane 默认就是可见的，"有没有工作流"成了唯一会隐藏它的东西。 * 而 current 是异步取回的，于是每次刷新都必然经历 * 第 0 帧 pane 可见、列表还是空的（一个 684px 的空盒子） * 第 1~3 帧 .needs-workflow 加上 → pane 塌成 0 * 第 4 帧 数据到位 → 又弹回 842px * 这正是用户两次反馈过的"从无到有地弹一下"（见 5f32dd5）。 * * 结构上的正确分法：把两个状态各自归位到**不会移动几何**的那个层面 —— * · "用户要不要看这一栏 / 在看哪个 tab"（持久偏好） * → data 属性，首帧由引导脚本投影，只由它决定 pane 的显隐。 * 于是 pane 的几何全程恒定（这本来也是用户要的"高度很大"）。 * · "此刻有没有工作流"（易变业务态） * → 只影响** pane 内部的正文**（列表自己的空态文案，见 renderVersionList）， * 不再让整块 pane 出现/消失。 * 两个层面各自唯一、互不越界：偏好管"在不在"，业务态管"里面是什么"。 */ } /* * 右栏整栏收起后，顶栏那个按钮必须**立刻**变成"可点开"的样子 —— * 它同时也是"右栏现在收着"的唯一指示（栏本身已经不在屏幕上了）。 * 与 .orch-pref-toggle.is-on 同一套视觉语言（实心强调 = 当前处于"已收起"这个状态）。 */ #orchRightToggle.is-off{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))} /* * 聊天页设置的「首帧打开态」。 * * 弹窗在 HTML 里是 .modal.hidden（默认关），这个类由 chat-settings-init.js 在 * 中**首帧之前**打到 上——那时 body 还没解析，改不到弹窗本身， * 所以只能用祖先选择器把初始显示态定下来。 * * 为什么必须用 !important： * .hidden 是 !important 的，而本规则要覆盖它，同等优先级下后者才生效。 * 这不是"打补丁"，而是两条规则的优先级必须明确： * "首帧静态初值"（本规则）要能压过"HTML 里的默认隐藏"。 * 一旦 app.js 启动，它会调 clearBootstrapMark() 摘掉这个类， * 之后弹窗的显示完全由 .hidden 与 setChatSettingsOpen() 决定，本规则不再参与。 */ html.chat-settings-open #chatSettingsModal{display:flex!important} /* 移动端遮罩层 */ /* * 这一条是**聊天页**的口径：那边侧栏是 z-index:30，遮罩 29 紧贴它之下。 * 编排页的抽屉是另一个层级（--z-side-drawer=48），遮罩必须跟着抬， * 见下方 @media (max-width:760px) 里的 .orch-page .scrim 覆盖 —— * 两页各自的值都写在自己那一处，不在这里做一个"两页通用"的折中值 * （折中值必然对其中一页是错的）。 */ .scrim{ position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.32); opacity:1;transition:opacity .2s ease; } .scrim.hidden{display:none} /* 登录页 */ .login-page{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--bg)} .login-card{width:min(100%,380px);padding:32px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 14px 45px rgba(0,0,0,.08)} .login-mark{width:48px;height:48px;border-radius:13px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:25px;margin-bottom:22px} .login-card h1{font-size:22px;margin:0 0 6px;color:var(--ink-strong)} .login-card p{margin:0 0 24px;color:var(--ink-soft);font-size:13px} .login-field{display:block;margin:14px 0 0;color:var(--ink-soft);font-size:12px} .login-field input{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--input);color:var(--ink);font:14px var(--font);outline:none} .login-field input:focus{border-color:var(--accent)} .login-submit{width:100%;margin-top:22px;padding:11px;border:0;border-radius:9px;background:var(--ink);color:var(--bg);font:14px var(--font);cursor:pointer} .login-submit:disabled{opacity:.6} .login-error{min-height:20px;margin-top:12px;color:var(--danger);font-size:12px} @media(prefers-color-scheme:dark){.login-card{box-shadow:0 14px 45px rgba(0,0,0,.3)}} /* 移动端 */ @media (max-width:760px){ body{ /* 防止 iOS 输入框聚焦时整体放大，并避免软键盘撑高触发布局跳动 */ -webkit-text-size-adjust:100%;text-size-adjust:100%; } aside{ position:fixed;top:0;left:-300px;width:300px;height:100%;z-index:30; transition:left .22s ease;box-shadow:6px 0 24px rgba(0,0,0,.12); } aside.open{left:0} /* * 移动端侧栏是"抽屉"：宽度固定 300px、由 ☰ 控制开合。 * 抽屉上做拖拽宽度既没有意义（它不是常驻布局），还会和左右滑动 * 手势打架（用户想关抽屉，结果把手柄拖动了）。所以手柄在窄屏直接不显示。 */ .side-resizer{display:none} #menu{display:block} /* 移动端无 hover：删除按钮常驻显示，方便直接操作 */ .session-del{display:block;padding:0 12px;min-width:40px;display:flex;align-items:center;justify-content:center} /* 单行紧凑栏。跨页入口共用 details 菜单，320px 也无需横滑找按钮。 图形仅 18px，操作按钮宽44px、高36px；浮层出流，不参与顶栏高度计算。 */ .chat-head{ position:relative;height:40px;gap:4px;overflow:visible; padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); } .chat-head>#menu,.chat-head>#newChat,.chat-head>#chatSettingsBtn, .chat-head>#chatThemeBtn,.chat-navigation>summary{ display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px; width:44px;height:36px;min-height:36px;margin:0;padding:0; border:0;border-radius:10px;background:transparent;color:var(--ink-soft); touch-action:manipulation;cursor:pointer; } .chat-head .chat-action-label,.chat-head .theme-toggle-label{display:none} .chat-head .theme-toggle-icon{display:flex;align-items:center;justify-content:center} .chat-head>#model{ flex:0 1 120px;min-width:48px;max-width:120px;height:28px;min-height:28px; margin:0 auto 0 0;padding:0 10px;font-size:12px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .chat-head>#chatThemeBtn{margin-left:auto} .chat-navigation{display:block;flex:0 0 44px} .chat-navigation>summary{list-style:none} .chat-navigation>summary::-webkit-details-marker{display:none} .chat-head .chat-navigation>.head-nav{ display:none;position:absolute;right:8px;top:calc(100% + 4px);z-index:45; min-width:160px;padding:6px;flex-direction:column;align-items:stretch;gap:2px; border:1px solid var(--line);border-radius:12px;background:var(--panel); box-shadow:0 8px 28px rgba(0,0,0,.18); } .chat-head .chat-navigation[open]>.head-nav{display:flex} .chat-head .head-nav .view-toggle{min-height:44px;justify-content:flex-start;padding:0 14px;font-size:14px} .chat-head button:active,.chat-navigation>summary:active{background:var(--panel-2)} .chat-navigation>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* 压缩顶部：目录下拉 + 两个按钮同一行，减少垂直占位，扩大聊天显示区 */ .toolbar{padding:8px 12px;flex-wrap:nowrap;gap:6px} .toolbar select{flex:1 1 96px;max-width:none;order:0;min-width:96px;font-size:12px;padding:6px 8px} .toolbar button{flex:0 0 auto;min-height:34px;font-size:12px;padding:6px 9px} .toolbar #build{order:1} .toolbar #edit{order:2} /* 状态提示在移动端仍是出流浮层，只调锚点与字号：贴 header(40px) 下沿、 左右各留 12px，避免在小屏上溢出；order/flex 随流内角色一并作废。 */ .toolbar-status{top:calc(40px + 8px);left:12px;right:12px;max-width:none;width:auto;font-size:11px} #status{font-size:11px} #chat{padding:12px 14px 6px} .msg{gap:9px;margin-bottom:20px} .reasoning-body{max-height:260px;font-size:12px} .usage-chip{font-size:10.5px;padding:2px 7px} .composer{ width:calc(100% - 16px);padding:8px 10px; margin-bottom:calc(6px + env(safe-area-inset-bottom));border-radius:16px; } html[data-chat-page] .composer .composer-input{min-height:32px;max-height:min(180px,28dvh)} .composer-actions{margin-top:2px;gap:8px} .composer #send{width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;flex:none} .composer #send>span{display:none} .composer #send .send-ico{width:18px;height:18px} .composer textarea{min-height:56px;font-size:16px} .panel{margin:12px 12px 0;max-height:60vh;overflow:auto} /* iOS 刘海/底部安全区适配 */ aside{padding-top:env(safe-area-inset-top)} #menu{margin-left:env(safe-area-inset-left)} } /* ================= 账号信息注入 ================= */ /* * 状态栏：窄屏下宁可换行也不截断成半句。 * 白名单：这一行信息重要（构建结果/压缩说明），被 ellipsis 截掉会让人看不懂； * 允许最多两行，并在极窄时收缩，避免把工具条撑破。 */ #accStatus{ font-size:12px;color:var(--ink-faint);margin-left:auto; min-width:0;flex:0 1 auto;text-align:right;line-height:1.45; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; line-clamp:2;overflow:hidden;overflow-wrap:anywhere; } /* 设置面板：文档 / 图片双列 */ .acc-panel-body{display:flex;gap:18px;align-items:flex-start} .acc-col{flex:1 1 0;min-width:0} .acc-col-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px} .acc-list{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--input);padding:6px} .acc-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;font-size:12.5px;color:var(--ink-soft);cursor:pointer} .acc-item:hover{background:var(--panel-2)} .acc-item input{accent-color:var(--accent);flex:none} .acc-item .acc-unavailable{color:var(--ink-faint);opacity:.6} .acc-item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* * 预览面板单独放宽高度。 * * 实测（1100px 视口）：通用 .panel 的 min(78vh,640px) 让内容区只有 517px， * 而文件列表需要 568px，最后一项被截断、必须滚动才能看全， * 同时面板下方还剩大量空白没利用上。 * * 高度按「视口高 - 顶部偏移(约172px) - 底部留白」计算，而不是继续用 vh 比例： * 面板上方有工具栏，偏移是固定值；纯按 vh 算会让「面板高 + 偏移」超过视口， * 把底部操作栏推出屏幕外（实测 760px 视口下越界）。保留 900px 上限防止超大屏过高。 */ #accPreview{max-height:min(calc(100vh - 240px),900px)} /* 输入框上方标记条 */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px} .chip{ display:inline-flex;align-items:center;gap:8px;max-width:100%; padding:5px 8px 5px 10px;border:1px solid var(--line-strong);border-radius:999px; background:var(--panel-2);font-size:12px;color:var(--ink); } .chip .chip-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none} .chip .chip-label{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px} .chip .chip-meta{color:var(--ink-faint);white-space:nowrap} .chip button{border:0;background:transparent;color:var(--ink-faint);font-size:12px;line-height:1;padding:2px 4px;border-radius:6px} .chip button:hover{color:var(--ink);background:var(--panel)} .chip .chip-x:hover{color:var(--danger)} /* 消息气泡上的「附带账号」标识 */ .msg-accounts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} .msg-account-tag{ font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line); color:var(--ink-soft);background:var(--panel-2); } #accRefresh{ font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:8px; background:var(--input);color:var(--ink-soft); } #accRefresh:hover{border-color:var(--line-strong);color:var(--ink)} /* * 中窄屏（761–1080px）：工具条按钮 + select 已经占满一行， * 状态栏只分到几十像素，两行 clamp 也会被截。 * 这里让它独占一整行（同移动端做法），彻底避免「半句话」。 */ @media (max-width:1080px){ #accStatus{ flex:1 1 100%;margin:6px 0 0;width:100%; text-align:left;-webkit-line-clamp:3;line-clamp:3; } #status{text-align:left} } @media (max-width:760px){ #accStatus{ flex:1 1 100%;margin:2px 0 0;width:100%;font-size:11px; text-align:left;-webkit-line-clamp:3;line-clamp:3; } /* 按钮文字不再换行，靠 select 收缩让位 */ .toolbar button{white-space:nowrap} .acc-panel-body{flex-direction:column;gap:14px} .acc-list{max-height:180px} .chip .chip-label{max-width:110px} } /* ================= v2：条数上限 / 预览导航 / 图片预览 ================= */ .acc-row-limit{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px; padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)} .acc-row-limit label{font-size:12.5px;color:var(--ink-soft)} .acc-row-limit input{width:110px;padding:6px 8px;border:1px solid var(--line);border-radius:7px; background:var(--input);color:var(--ink);font:13px var(--font);outline:none} .acc-row-limit input:focus{border-color:var(--accent)} .acc-row-hint{font-size:11.5px;color:var(--ink-faint)} /* 预览：左导航 + 右内容 * * 高度约定：整块由面板 flex 分配（flex:1 + min-height:0），左右两栏 height:100% 填满、内部滚动。 * * 改造原因：左右两栏此前各自写死 max-height:56vh，与面板自身的高度上限 * （min(78vh,640px)）独立计算、互不知情，两套高度来源容易对不上， * 栏内可用高度也无法随面板变化。改为完全由面板分配后，高度只有一处权威来源。 * 注意：两栏高度不再单独限制，其可用高度由 #accPreview 决定。 */ .acc-preview-body{display:flex;gap:14px;align-items:stretch;flex:1;min-height:0} .acc-preview-nav{ flex:0 0 210px;height:100%;overflow:auto; border:1px solid var(--line);border-radius:8px;background:var(--panel-2);padding:6px; } .acc-preview-nav-item{ display:block;width:100%;text-align:left;border:0;background:transparent; padding:6px 8px;border-radius:6px;font-size:12px;color:var(--ink-soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer; } .acc-preview-nav-item:hover{background:var(--panel);color:var(--ink)} .acc-preview-nav-item.active{background:var(--panel);color:var(--ink);font-weight:600} .acc-preview-nav-group{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-faint);padding:8px 8px 4px} .acc-preview-nav-meta{font-size:10.5px;color:var(--ink-faint);padding:0 8px 2px} .acc-preview-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column} .acc-preview-section{min-height:0;flex:1;display:flex;flex-direction:column} .acc-preview{flex:1;min-height:0;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere; font:12px/1.65 var(--mono);color:var(--ink);background:var(--input); border:1px solid var(--line);border-radius:8px;padding:12px;margin:0} /* 图片画廊 */ .acc-preview-gal{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;overflow:auto; border:1px solid var(--line);border-radius:8px;background:var(--input);padding:12px} .acc-preview-gal figure{margin:0} .acc-preview-gal figcaption{font-size:11.5px;color:var(--ink-soft);margin-bottom:6px} .acc-preview-gal img{max-width:100%;height:auto;border:1px solid var(--line-soft);border-radius:6px;display:block;background:#fff} @media (max-width:760px){ .acc-preview-body{flex-direction:column} /* 窄屏纵向堆叠：导航栏固定高度、内容区占剩余空间，同样由 flex 分配而非写死 vh */ .acc-preview-nav{flex:0 0 auto;height:150px;width:100%} .acc-preview-main{flex:1;min-height:160px} .acc-row-limit{flex-direction:column;align-items:flex-start;gap:6px} } /* ================= 跨页导航（对话 / 编排 / 日志） ================= * * 这三个入口在三个页面里都出现，语义是同一件事：切到另一个页面。 * 曾经的问题有两层，都在这里一次性收口： * * 一、它们只写了 class="view-toggle" 却**从未定义过样式**，渲染成裸文字链接， * 夹在一排描边胶囊按钮中间，同一行里出现三套视觉语汇，像没写完。 * 处理：与同排描边控件对齐尺寸与圆角体系（同高、同字号、同描边，形状取胶囊）， * 但**不复用按钮类**——按钮带「可按下/选中」语义与 aria-pressed， * 导航链接点了就跳页，两者语义不同，混用会让 * 「当前是否开启」与「当前在哪一页」两个概念纠缠不清。 * 当前页用 aria-current="page" 标记，样式为常驻浅底： * 既不抢强调色（那是 active 开关的专属），又能一眼看出自己在哪。 * * 二、位置在三个页面不统一（2026-09-19 用户指出）：编排页与日志页的导航落在 * 顶栏最右端角落，聊天页却夹在一排控件中间，切页时手要重新找位置。 * 处理：把「导航永远在顶栏最右端」定为**三页同一条约定**，并拆成两条可执行规则—— * · DOM：