wezard 2.2.1 → 2.3.0

package/web/chat.css

@@ -18,6 +18,8 @@
   --mine-line: #c9d7f3;
   --accent: #2f55c9;  /* 视角色: 名字的点、选中态、自己的气泡描边 */
   --priv: #9a5b10;    /* 私聊 */
+  --human: #12715a;  /* 人名 —— 青绿, 与 wizard (墨色) 和群名 (暗金) 三分 */
+  --chat: #7d6410;    /* 群名 —— 暗金, 与 role 名 (墨色 + 视角色的点) 分开: 群是频道不是 role */
   /* 头像底: 不透明, 且由 card/accent 推出 —— 叠在选中/高亮/关系图任何底色上都不变色, 换主题时随 token 走。 */
   --av-bg: var(--card);
   --av-line: var(--line);
@@ -42,6 +44,8 @@ button { font: inherit; color: inherit }
 .nm { font-weight: 600 }
 .nm::before { content: "."; color: var(--accent); font-weight: 700 }
 .nm.human::before, .nm.task::before, .nm.system::before, .nm.chat::before { content: none }
+.nm.chat, .ch-who .sub .up { color: var(--chat) }
+.nm.human { color: var(--human) }
 
 /* ── 侧栏: 我 + 会话 ─────────────────────────────────────────────── */
 .side {
@@ -59,14 +63,14 @@ button { font: inherit; color: inherit }
   flex-wrap: nowrap; align-items: stretch;
 }
 .rolebar > .who { min-width: 0 }
-.rolebar .id { display: flex; gap: 12px; align-items: center; min-width: 0 }
+.rolebar .id { display: flex; gap: 10px; align-items: center; min-width: 0 }
 /* 与会话项头像同一套不透明底, 放大到名片尺寸。 */
 .rolebar .id .av {
-  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
-  background: var(--av-bg); box-shadow: inset 0 0 0 1px var(--av-line); font-size: 28px; line-height: 1;
+  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
+  background: var(--av-bg); box-shadow: inset 0 0 0 1px var(--av-line); font-size: 23px; line-height: 1;
 }
-.rolebar .id .l { min-width: 0; display: flex; flex-direction: column; gap: 3px }
-.rolebar .id .nm { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.rolebar .id .l { min-width: 0; display: flex; flex-direction: column; gap: 2px }
+.rolebar .id .nm { font-size: 15.5px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 /* 职责是一句话, 至多两行; 截掉的悬停看全文 (chat.js 的截断提示)。 */
 .rolebar .job {
   margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); opacity: .8; word-break: break-word;
@@ -76,29 +80,21 @@ button { font: inherit; color: inherit }
 .rolebar .facts { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 11.5px; line-height: 1.45; color: var(--faint); min-width: 0 }
 /* 每条自身不折行; 独占一行仍超宽 (长路径 / 长群名) 才省略。 */
 .rolebar .facts span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis }
+.rolebar .facts .fx { cursor: pointer }
+.rolebar .facts .fx:hover, .rolebar .facts .fx.on { color: var(--accent) }
+.rolebar .facts .fx.bad { color: #cf222e }
 .rolebar .go { cursor: pointer; color: var(--accent) }
 .rolebar .go:hover { text-decoration: underline }
-/* 分隔线两端收进来, 与上面搜索框的左右边距对齐, 不顶满侧栏。 */
-.acts { flex: none; display: flex; justify-content: center; align-items: center; gap: 2px; margin: 0 10px; padding: 4px 0 8px; border-bottom: 1px solid var(--line) }
-.acts:empty { display: none }
-/* 旧外壳 (daemon 未重启) 里它还在名片内 —— 那里不需要自己的内边距与分隔线。 */
-.rolebar .acts { margin: 0; padding: 0; border: 0 }
-/* 入口: 图标 + 名字 + 淡色副标题, 无框无底; hover 才浮出一层浅底, 打开着的染视角色。 */
-.bd {
-  flex: none; padding: 1px 4px; border: 0; border-radius: 4px; background: none; cursor: pointer; white-space: nowrap;
-  font-size: 12px; color: var(--mute); transition: color .12s;
-}
-.bd:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px }
-.bd.on { color: var(--accent); font-weight: 600 }
-.bd.bad { color: #cf222e }
-.acts .sep { color: var(--line); font-size: 12px; user-select: none }
 /* session 切换: name 右边一个小号文字触发器 + 浮层列表。name 先省略, 触发器不让位。 */
 .rolebar .id .l { flex: 1 }
 .rolebar .nl { display: flex; align-items: center; gap: 8px; min-width: 0 }
 #rb-st { flex: none; display: inline-flex }
 .rolebar .nl .nm { min-width: 0; flex: 0 1 auto }
-.rolebar .nl .cp { min-width: 0; flex: 0 1 auto; display: inline-flex; cursor: copy }
+.rolebar .nl .cp { min-width: 0; flex: 0 1 auto; display: inline-flex; align-items: center; gap: 4px; cursor: pointer }
 .rolebar .nl .cp:hover .nm { text-decoration: underline dotted var(--faint); text-underline-offset: 3px }
+/* 复制提示用 ⧉ 小图标, 不用 cursor:copy —— 那颗绿色的加号读起来像「添加」。 */
+.rolebar .nl .cp::after { content: "⧉"; flex: none; font-size: 12px; color: var(--faint); display: none }
+.rolebar .nl .cp:hover::after { display: inline }
 .toast {
   position: fixed; left: 50%; bottom: 28px; z-index: 1000; transform: translate(-50%, 8px);
   padding: 6px 12px; border-radius: 8px; font-size: 12.5px; color: #fff; background: rgba(28, 36, 48, .88);
@@ -114,7 +110,7 @@ button { font: inherit; color: inherit }
 }
 .sp-btn:hover, .sp.open .sp-btn { background: var(--paper); color: var(--ink) }
 /* 箭头用边框画, 不用 ▾ 字形 —— 字形贴着基线, 放大后总是偏下。 */
-.sp-btn .car { flex: none; display: grid; place-items: center; width: 18px; height: 18px; transition: transform .15s }
+.sp-btn .car { flex: none; display: grid; place-items: center; width: 16px; height: 16px; transition: transform .15s }
 .sp-btn .car::before { content: ""; border: 5px solid transparent; border-top: 6px solid var(--faint); border-bottom: 0 }
 .sp.open .sp-btn .car { transform: rotate(180deg) }
 .sp-list {
@@ -138,13 +134,14 @@ button { font: inherit; color: inherit }
 
 /* ── 用量条: 一组轮次的总账 ─────────────────────────────────────────
    一个组件两处挂: 整页页脚 (wizard 的总账) / 聊天窗口底 (人与某个 wizard 这段往来的账)。
-   永远单行: 主人 · 模型 · 指标 · 图例, I/O 分布是贴底的色带。排不下时 chat.js 的 fitUsage
+   永远单行: 主人 · 模型 · 指标 · 图例, I/O 分布是贴顶的色带 (兼作上边线)。排不下时 chat.js 的 fitUsage
    按容器宽度一级级加 f-* 藏掉次要的 (分布文字 → 名字 → 耗时), 不按视口断点。 */
 .usage {
   /* 整条只有一个字号、一个间隔: 指标、模型名、主人、图例都用它。 */
   --u-gap: 14px;
   flex: none; display: flex; align-items: center; flex-wrap: nowrap; gap: var(--u-gap); overflow: hidden; white-space: nowrap;
-  position: relative; padding: 7px 20px 9px; border-top: 1px solid var(--line); background: var(--paper);
+  position: relative; padding: 8px 20px; background: var(--paper);
+  box-shadow: inset 0 1px var(--line); /* 没有分布 (total=0) 时的上边线; 有分布时被色带盖住 */
   font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--mute);
   font-variant-numeric: tabular-nums;
 }
@@ -153,20 +150,21 @@ button { font: inherit; color: inherit }
 .usage .u-who { display: flex; align-items: center; gap: 4px; max-width: 200px }
 .usage .u-nm { overflow: hidden; text-overflow: ellipsis; color: var(--faint) }
 .usage .u-lb { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--accent) }
+.usage .u-ef { margin-left: -4px; white-space: nowrap; color: var(--mute) }
 .usage .u-ic { font-style: normal; margin-right: 4px }
 .usage .u-kvs, .usage .leg { display: flex; gap: var(--u-gap) }
 .usage .kv { white-space: nowrap }
-/* I/O 分布 = bar 的底边: 横跨整宽的细色带, 不占行; 悬停加粗一点好瞄准某一段。 */
+/* I/O 分布 = bar 的上边线: 横跨整宽的细色带, 不占行, 替掉 border-top; 悬停加粗一点好瞄准某一段。 */
 .usage .bar {
-  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; display: flex;
+  position: absolute; left: 0; right: 0; top: 0; height: 1px; display: flex;
   background: var(--line); transition: height .12s;
 }
-.usage .bar:hover { height: 6px }
+.usage .bar:hover { height: 3px }
 .usage .bar .seg { flex: 1 1 0; min-width: 2px; height: 100% }
 .usage .leg { margin-left: auto }
 .usage .lg { display: flex; align-items: center; gap: 4px; white-space: nowrap }
 .usage .lg i { width: 7px; height: 7px; border-radius: 50%; flex: none }
-.usage.f-leg .leg, .usage.f-nm .u-nm, .usage.f-time .kv-time { display: none }
+.usage.f-cnt .kv-turns, .usage.f-cnt .kv-tools, .usage.f-cnt .kv-api, .usage.f-leg .leg, .usage.f-nm .u-nm { display: none }
 
 /* 群聊头像 = 参与者头像拼图: 1 格居中, 2 格左右, 3/4 格田字。 */
 .mosaic {
@@ -187,6 +185,20 @@ button { font: inherit; color: inherit }
 }
 .convs h2:first-child { margin-top: 6px }
 .convs h2 span { font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums }
+/* 会话列表 ↔ 关系图的小开关: 两个视图的第一行标题右端, 同一个位置。 */
+.convs h2 .vt {
+  margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 4px;
+  border: 0; background: none; padding: 2px 6px; border-radius: 5px; cursor: pointer;
+  font-size: 11px; font-weight: 400; color: var(--mute);
+}
+.convs h2 .vt:hover { background: #eef1f4; color: var(--accent) }
+/* 范围按钮 (侧栏「往来 / 全部」、关系图「相关 / 全部」): 与视图开关同一个 .vt, 字是当前范围, 点一下换另一种。 */
+.convs h2 [data-scope], .convs h2 [data-tall] { margin-left: auto }
+.convs h2 [data-scope] + .vt, .convs h2 [data-tall] + .vt { margin-left: 0 }
+/* 关系图那一行字多 (范围 · 计数 · 名册缺席 · 看全部 · 开关): 一律不折行, 让范围那段先省略。 */
+.convs h2 { white-space: nowrap; min-width: 0 }
+.convs h2 > * { flex: none }
+.convs h2 > span:first-of-type { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis }
 
 /* 群下的子项 (.si) 与私聊项 (.ci) 同一套尺寸 —— 只有一份。 */
 .ci, .si {
@@ -215,6 +227,10 @@ button { font: inherit; color: inherit }
    它们嵌在整行那颗按钮里; 行本身悬停不变底色, 只有入口自己亮起。z-index 保证没有兄弟盖住命中区。 */
 .nm.go, .av.go { position: relative; z-index: 1; cursor: pointer }
 .nm.go:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px }
+/* 名字旁「+N」: 视角外它还在和几个 role 说话 —— inline-block 不吃名字 hover 的下划线 */
+.nm .oc { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; line-height: 15px; font-size: 10.5px; font-weight: 600;
+  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); vertical-align: 1px }
+.nm.go:hover .oc { background: color-mix(in srgb, var(--accent) 20%, transparent) }
 span.av.go { border-radius: 8px; transition: background .12s, box-shadow .12s }
 span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot) }
 .ci .tag.priv { color: var(--priv); background: #9a5b1014 }
@@ -224,6 +240,10 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
 /* 竖线的 x 与关系图里的竖向连线对齐: 都在项左缘 +10px (关系树 ul 缩进 20 - 线距 li 10)。 */
 .subs { margin: 0 0 6px 10px; border-left: 1px solid var(--line); padding-left: 2px }
 .si { color: var(--ink) }
+/* 「chat 内全部」下与我无往来的子项: 整行淡下去、名字不加粗, 一眼分得出不是我的往来; 选中 / 悬停时恢复。 */
+.si.far { opacity: .58 }
+.si.far .t { font-weight: 400 }
+.si.far:hover, .si.far.on { opacity: 1 }
 .si-more {
   display: block; width: 100%; text-align: center; padding: 4px 8px; border: 0;
   background: transparent; cursor: pointer; font-size: 11.5px; color: var(--mute);
@@ -247,6 +267,11 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
   background: var(--card); border-bottom: 1px solid var(--line);
 }
 .chathead .back { display: none; border: 0; background: none; font-size: 22px; color: var(--mute); cursor: pointer; padding: 0 4px }
+/* 跳过来之后的返回 (工单页 / 移交行): 同一副无框箭头, 宽屏也露出。 */
+.chathead .back.jb { display: block; flex: none; margin-right: -4px }
+.chathead .back.jb:hover { color: var(--accent) }
+/* 有跳转返回时窄屏只留它一个箭头: 先回跳转前; 没有它时 #tb-back 才是回会话列表。 */
+.chathead:has(.back.jb) #tb-back { display: none }
 .ch-who { display: flex; gap: 11px; align-items: center; min-width: 0; flex: 1 }
 /* 一对一的两端头像: 同单个角色头像的画法, 后一个略压住前一个。 */
 .ch-who .pair { display: flex; flex: none; align-items: center }
@@ -261,8 +286,10 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
 .ch-who .t { min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .ch-who > .t:not(:only-child) { flex: 0 1 auto }
 .ch-who .sub { min-width: 0; font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+/* 副标题里的群名: 回到整个群的入口, 平时只是一行灰字, 悬停才像链接。 */
+.ch-who .sub .up { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer }
+.ch-who .sub .up:hover { text-decoration: underline }
 .ch-acts { display: flex; gap: 8px; align-items: center; flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--mute) }
-.ch-acts .with { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .ch-acts .vb { flex: none }
 .vb {
   font-size: 12.5px; background: var(--card); border: 1px solid var(--line); border-radius: 7px;
@@ -323,6 +350,28 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
 .mchip.priv { color: var(--priv); background: #9a5b1014 }
 .mchip.graph { color: #6639ba; background: #8250df12 }
 .mchip.sys { color: #0a7d6b; background: #0a7d6b12 }
+/* 回执: 定论着色 —— 已交是常态不抢眼, 反问 / 报错要人看一眼, 没答案的几种灰红。 */
+.mchip.rcpt { border: 0; font: inherit; font-size: 11px; line-height: 16px; color: #1a7f37; background: #1a7f3712 }
+button.mchip.rcpt { cursor: pointer }
+button.mchip.rcpt:hover { text-decoration: underline }
+.mchip.rcpt:is(.st-need, .st-error) { color: #9a6700; background: #9a670014 }
+.mchip.rcpt:is(.st-timeout, .st-silent, .st-dead, .st-canceled) { color: #cf222e; background: #cf222e10 }
+/* 移交行里的对方: 小头像 + 名字。整行是入口 (开双方的往来), 悬停时整行提亮。 */
+.handoff .ho-who { display: inline-flex; align-items: center; gap: 3px; color: var(--ink) }
+.handoff .ho-line[data-hto]:hover { background: var(--av-hot); border-radius: 6px }
+.handoff .ho-who .av { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 10px; line-height: 14px; text-align: center }
+.handoff .ho-who .nm { font-weight: 500 }
+/* 过程框收起后移交行仍露在框头下 —— 活交给了谁, 不该和普通工具输出一起藏起来。 */
+.steps.folded > .bubbles:has(> .bubble.tool .handoff) { display: flex; flex-direction: column }
+.steps.folded > .bubbles > :not(:has(.handoff)) { display: none }
+.steps.folded > .bubbles > .bubble.tool > :not(.handoff) { display: none }
+.steps.folded .handoff .ho-line { padding-left: 6px }
+.steps.folded .handoff .ho-text { margin-left: 6px }
+.steps.folded .handoff.pub > .say { margin-left: 6px }
+/* 公开移交那句是这一行的发话人在群里说的话: 气泡取这一行自己的底色 (过程框里 --bub 被重置成白卡,
+   所以在 .mb 上先把行色存一份), 与普通消息同一颗。 */
+.mrow .mb { --row-bub: var(--bub); --row-bub-line: var(--bub-line) }
+.mrow .mb .steps .handoff.pub > .say > .bubble { background: var(--row-bub); border-color: var(--row-bub-line) }
 
 /* 气泡与过程框同一种底色: 都是这个人发出来的 —— 自己的是视角色, 别人的是浅灰。
    TURN_CSS 里写死的白卡 / 灰底 (嵌套气泡、代码块、折叠头) 在有色底上会显成一张张
@@ -331,7 +380,7 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
 .mrow .mb .steps :is(.bubble, .typing) { background: transparent }
 .mrow .mb .bubble.user,
 .mrow .mb .md-body code, .mrow .mb .md-body pre,
-.mrow .mb details:not(.tool-call) > summary,
+.mrow .mb details:not(.tool-call, .handoff) > summary,
 .mrow .mb .tool-body section > h2, .mrow .mb .diff-meta,
 .mrow .mb .tool-call > summary:hover { background: var(--bub-soft); border-color: var(--bub-line) }
 .mrow .mb .md-body pre code { background: transparent }
@@ -425,7 +474,10 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
 }
 .tg-head { order: 9; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 0 2px }
 .mstat { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap }
-:is(.tg-head, .mstat, .say-cap) :is(.chip.model, .chip.tier), .tg-tok {
+/* 两方对话里只藏模型 / ctx —— 时刻与耗时每条 wizard 消息都留着。 */
+.mrow.two :is(.mstat, .say-cap, .ho-acct) :is(.chip, .tg-tok) { display: none }
+.ho-acct { display: inline-flex; align-items: center; gap: 4px 8px }
+:is(.tg-head, .mstat, .say-cap, .ho-acct) :is(.chip.model, .chip.tier), .tg-tok, .tg-dur {
   padding: 0; border: 0; border-radius: 0; background: none; font-weight: 400;
   font-size: 10.5px; color: var(--faint); font-family: ui-monospace, Menlo, monospace;
 }
@@ -620,20 +672,16 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
 .wst::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b1bac4 }
 .wst.run { background: #dafbe1; color: #1a7f37 }
 .wst.run::before { background: #1a7f37; animation: pulse 1.4s infinite }
+.wst.wait { background: #fbefff; color: #8250df }
+.wst.wait::before { background: #8250df; animation: pulse 1.4s infinite }
 .wst.off { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line) }
 .wst.off::before { background: transparent; box-shadow: inset 0 0 0 1.5px #b1bac4 }
 .wst:empty { padding: 0; background: none; box-shadow: none }
 .wst:empty::before { width: 7px; height: 7px }
 /* ══ 关系图 · 关系树 (家谱与派活合成一棵, 以当前 role 为中心) ══════════
    它替换的是侧栏的会话列表: 标题、图例与会话列表的分组标题同一种读法, 卡片就是会话项 (.ci)。 */
-.tview .tall {
-  margin-left: auto; border: 0; background: none; padding: 0 2px; cursor: pointer; font-size: 11px; color: var(--faint);
-  text-decoration: underline dotted; text-underline-offset: 3px;
-}
-.tview .tall:hover { color: var(--accent) }
 .tview h2 .warn { color: #9a6700; font-weight: 400 }
 .tree.all > li + li { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eaeef2 }
-.tfold { flex: none; font-size: 10px; font-weight: 400; color: var(--faint); border: 1px dashed var(--line); border-radius: 8px; padding: 0 5px; line-height: 14px }
 .tsolo { font-size: 11.5px; color: var(--faint); margin: 0 8px 10px }
 .tview .pempty { padding: 18px 8px }
 
@@ -677,6 +725,45 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
 .ek.graph { color: #3d8577; background: #0a7d6b12 }
 .ek.cross { font-weight: 400; background: #fff; box-shadow: inset 0 0 0 1px var(--line) }
 
+/* ══ 宪章 · 按节 ═══════════════════════════════════════════════════ */
+/* 通用 details summary (SHARED_CSS) 带灰底、大写和 ::before 箭头 —— 这里全部重置, 箭头自己画。 */
+.cmix { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; margin: 2px 0 6px }
+.cmix i { display: block; min-width: 3px; background: #c4cbd3 }
+.cmix i.top { background: #57606a }
+.csec { border-top: 1px solid #eaeef2 }
+.csec:first-of-type { border-top: 0 }
+.csec > summary {
+  display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(60px, 160px) 92px; align-items: center; gap: 10px;
+  padding: 9px 4px; margin: 0 -4px; border-radius: 6px; border: 0; background: none;
+  cursor: pointer; list-style: none; user-select: none;
+  font-size: 13px; font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: 0;
+}
+.csec > summary::-webkit-details-marker { display: none }
+.csec > summary::before { content: "▸"; font-size: 11px; color: var(--faint); transition: transform .12s; justify-self: center }
+.csec[open] > summary::before { content: "▸"; transform: rotate(90deg) }
+.csec > summary:hover { background: #f6f8fa }
+.csec .ct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.csec[open] .ct { font-weight: 600 }
+.csec .cbar { height: 6px; border-radius: 3px; background: #eaeef2; overflow: hidden }
+.csec .cbar i { display: block; height: 100%; border-radius: 3px; background: #afb8c1 }
+.csec.top .cbar i { background: #57606a }
+.csec .cn { text-align: right; font-size: 11.5px; color: var(--mute); font-family: ui-monospace, Menlo, monospace; white-space: nowrap }
+.csec .cn small { color: var(--faint); margin-left: 6px }
+.csec .md-body { font-size: 13px; line-height: 1.6; margin: 0 0 12px 24px; padding: 2px 0 2px 12px; border-left: 2px solid #eaeef2; overflow-wrap: anywhere }
+.csec .md-body > :first-child { margin-top: 0 }
+.csec .md-body > :last-child { margin-bottom: 0 }
+.csec .md-body ul { padding-left: 18px }
+.csec .md-body pre { white-space: pre-wrap }
+/* 关系 / 日程 / 宪章这类视图名很短, 窄屏上该让位的是副标题, 不是标题。 */
+.outer .ch-who .t { flex-shrink: 0 }
+.psec h3 .cx { white-space: nowrap; margin-left: auto; border: 0; background: none; padding: 0; cursor: pointer; font: 11px/1 inherit; color: var(--mute) }
+.psec h3 .cx:hover { color: var(--ink) }
+@media (max-width: 640px) {
+  .csec > summary { grid-template-columns: 14px minmax(0, 1fr) 84px }
+  .csec .cbar { display: none }
+  .csec .md-body { margin-left: 8px }
+}
+
 /* ══ 日程 · 总览 / 任务卡 ════════════════════════════════════════════ */
 .pstats {
   max-width: 900px; margin: 0 auto 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
@@ -751,13 +838,14 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
 .jmm .tmp, .jmm .wchip { flex: none; white-space: nowrap }
 
 /* ── 搜索 (⌘K): 名片下、关系/日程入口上的搜索框 + 居中浮层 ──────────────
-   入口与会话项同圆角, 安静的浅灰底; 浮层的结果行沿用会话项的两行读法。 */
+   入口与会话项同圆角, 无边框, 只靠浅灰底与侧栏白底区分; 悬停 / 键盘聚焦都只是底色再沉一档, 不描边。
+   浮层的结果行沿用会话项的两行读法。 */
 .sbox {
-  flex: none; display: flex; align-items: center; gap: 8px; margin: 10px 10px 4px; padding: 7px 10px;
-  border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--faint);
-  cursor: pointer; text-align: left; transition: border-color .12s, background .12s, color .12s;
+  flex: none; display: flex; align-items: center; gap: 8px; margin: 10px 10px 4px; padding: 8px 11px;
+  border: 0; border-radius: 9px; background: var(--paper); color: var(--faint);
+  cursor: pointer; text-align: left; transition: background .12s, color .12s;
 }
-.sbox:hover { border-color: #c4cbd6; background: var(--card); color: var(--mute) }
+.sbox:hover, .sbox:focus-visible { background: var(--them-soft); color: var(--mute); outline: none }
 .sbox .ic, .sk-in .ic { flex: none; display: inline-flex }
 .sbox .ic svg, .sk-in .ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round }
 .sbox .lb { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@@ -841,3 +929,47 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
 /* 搜索跳到的那一句: 气泡闪一圈视角色。 */
 .mrow.hit .mb > * { animation: hit 1.6s ease-out }
 @keyframes hit { 0%, 30% { box-shadow: 0 0 0 3px #2f55c955 } 100% { box-shadow: 0 0 0 3px #2f55c900 } }
+
+
+/* ══ 工单 (j:<id>) —— 工单页与工单列表都在主区; 侧栏 / 关系图只挂 📋 标记 ══════════════
+   进度徽标: 开着 = 已落定 / 一共 (琥珀), 收了 = 收工 (灰); 有人卡住另挂一枚紫色「N 卡住」。 */
+.jtag { flex: none; margin-left: 6px; font-size: 10.5px; line-height: 15px; padding: 0 5px; border-radius: 4px; color: var(--faint); background: #f1f3f6; font-weight: 500 }
+.jtag.open { color: #94741f; background: #bf870014 }
+.jstuck { flex: none; margin-left: 4px; font-size: 10.5px; line-height: 15px; padding: 0 5px; border-radius: 4px; color: #8250df; background: #fbefff; font-weight: 500 }
+.jmk { flex: none; margin-left: 4px; padding: 0 3px; border-radius: 4px; font-size: 10.5px; opacity: .8; cursor: pointer }
+.jmk:hover { opacity: 1; background: #bf870022 }
+.jmk i { font-style: normal; margin-left: 1px; color: #94741f; font-size: 10px }
+.ek.jmk { margin-left: 0; opacity: 1; color: #94741f; background: #bf870014 }
+.ek.jmk:hover { background: #bf870033 }
+/* 消息上的工单 badge: 📋 标题 + 进度, 点了进工单页。 */
+.mchip.job { display: inline-flex; align-items: center; gap: 3px; max-width: 260px; border: 0; font: inherit; font-size: 11px; line-height: 16px; color: #94741f; background: #bf870014; cursor: pointer }
+.mchip.job:hover { background: #bf870030 }
+.mchip.job .jt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
+.mchip.job .jtag { margin-left: 2px }
+/* 工单列表 (主区): 与侧栏会话项同一种行; 已收工的淡一档, 悬停回满。 */
+.jlist h2 { margin: 14px 4px 6px; font-size: 12px; font-weight: 500; color: var(--mute) }
+.jlist h2 span { margin-left: 6px; font-weight: 400; color: var(--faint) }
+.jlist .ci { width: 100% }
+.jclosed .ci { opacity: .55 }
+.jclosed .ci:hover { opacity: 1 }
+/* 工单页的开工 / 收工两行。 */
+.tg-job { margin: 6px auto; max-width: 560px; padding: 8px 12px; border-radius: 8px; border: 1px dashed #bf870066; background: #bf870008; font-size: 12px; color: var(--mute) }
+.tg-job .jh { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap }
+.tg-job .jh .jt { color: var(--ink); font-weight: 500 }
+.tg-job .jh .s { margin-left: auto; color: var(--faint); font-size: 11px }
+.tg-job .jmem { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px }
+.tg-job .jmem li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap }
+/* 派给成员的那段活原样分行, 太长收在 4 行 (悬停看全文)。 */
+.tg-job .jmem em { flex-basis: 100%; padding-left: 40px; font-style: normal; color: var(--faint); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden }
+.tg-job .jmem .go { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer }
+.tg-job .ja { flex-basis: 100%; padding-left: 40px; color: var(--faint); font-family: ui-monospace, monospace; font-size: 11px }
+.tg-job .jo { flex: none; font-size: 10.5px; padding: 0 5px; border-radius: 4px; color: #1a7f37; background: #1a7f3712 }
+.tg-job .jo.st-run { color: #94741f; background: #bf870014 }
+.tg-job .jo.st-none { color: var(--faint); background: #f1f3f6 }
+.tg-job .jo:is(.st-timeout, .st-silent, .st-dead, .st-canceled) { color: #cf222e; background: #cf222e10 }
+.tg-job .md-body { margin-top: 6px; color: var(--ink); overflow-wrap: anywhere }
+.tg-job .md-body.jplan { color: var(--mute) }
+/* 关系图: 正在看一张工单时只亮它的当事人与两端都是当事人的线。 */
+.tree.jsel .tci.jout { opacity: .3 }
+.tree.jsel .tci.jout:hover { opacity: 1 }
+.tree.jsel li.jdim { --lc: #d0d7de }