wezard 2.1.3 → 2.2.0

package/web/chat.css

@@ -18,6 +18,10 @@
   --mine-line: #c9d7f3;
   --accent: #2f55c9;  /* 视角色: 名字的点、选中态、自己的气泡描边 */
   --priv: #9a5b10;    /* 私聊 */
+  /* 头像底: 不透明, 且由 card/accent 推出 —— 叠在选中/高亮/关系图任何底色上都不变色, 换主题时随 token 走。 */
+  --av-bg: var(--card);
+  --av-line: var(--line);
+  --av-hot: color-mix(in srgb, var(--accent) 14%, var(--card));
 }
 
 html { height: 100% }
@@ -47,59 +51,73 @@ button { font: inherit; color: inherit }
 
 /* ── 左栏顶: 当前 role 的名片 (身份); 关系/日程入口是名片下、会话列表上的一排 ──── */
 .rolebar {
-  position: relative; flex: none; padding: 16px 16px 14px; border-bottom: 1px solid var(--line);
+  /* margin 归零: 通用 header 规则带着 8px 下边距, 会把下面的入口条顶得上宽下窄。 */
+  position: relative; flex: none; margin: 0; padding: 16px 16px 14px; border-bottom: 1px solid var(--line);
   display: flex; flex-direction: column; gap: 8px; background: var(--card);
+  /* 通用 header 规则带着 flex-wrap:wrap + align-items:baseline —— 竖轴上那会让名片按内容撑宽 (max-content),
+     长名字 / 长路径就冲出侧栏。 */
+  flex-wrap: nowrap; align-items: stretch;
 }
+.rolebar > .who { min-width: 0 }
 .rolebar .id { display: flex; gap: 10px; align-items: center; min-width: 0 }
 .rolebar .id .av { font-size: 26px; line-height: 1; flex: none }
 .rolebar .id .l { min-width: 0; display: flex; flex-direction: column; gap: 2px }
 .rolebar .id .nm { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.rolebar .id .k { font-size: 11.5px; color: var(--mute) }
-/* 名片上的状态: 只有执行中带颜色与呼吸, 空闲 / 已关闭是一个安静的词。 */
-.rolebar .st { margin-left: 8px; white-space: nowrap }
-.rolebar .st::before {
-  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 4px;
-  border-radius: 50%; background: #b1bac4; vertical-align: 1px;
-}
-.rolebar .st.run { color: #1a7f37 }
-.rolebar .st.run::before { background: #1a7f37; animation: pulse 1.4s infinite }
-.rolebar .st.off { color: var(--faint) }
-.rolebar .st.off::before { background: transparent; box-shadow: inset 0 0 0 1.5px #b1bac4 }
-.rolebar .job { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); opacity: .8 }
-.rolebar .facts { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--mute) }
-.rolebar .facts span { white-space: nowrap }
+.rolebar .id .k { font-size: 11.5px; color: var(--mute); 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;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.rolebar .facts { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--mute); min-width: 0 }
+/* 每条事实自身不折行, 一行排不下就落到下一行; 独占一行仍超宽 (长路径 / 长群名) 才省略。 */
+.rolebar .facts span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis }
 .rolebar .go { cursor: pointer; color: var(--accent) }
 .rolebar .go:hover { text-decoration: underline }
-.acts { flex: none; display: flex; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--line) }
+/* 分隔线两端收进来, 与上面搜索框的左右边距对齐, 不顶满侧栏。 */
+.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 { padding: 0; border: 0 }
-/* 文本按钮: 无底无框, 行高就是两者之间那条分割线的高度。 */
+.rolebar .acts { margin: 0; padding: 0; border: 0 }
+/* 入口: 图标 + 名字 + 淡色副标题, 无框无底; hover 才浮出一层浅底, 打开着的染视角色。 */
 .bd {
-  font-size: 12.5px; line-height: 14px; padding: 0 10px; border: 0; cursor: pointer;
-  background: none; color: var(--mute); white-space: nowrap;
-}
-.bd + .bd { border-left: 1px solid var(--line) }
-.bd:hover, .bd.on { color: var(--accent) }
-.bd b { font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums }
-/* session 切换: 按钮 + 浮层列表, 取代原生 <select>。 */
-.sp { position: relative; flex: 1 1 100%; min-width: 0 }
+  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:hover .nm { text-decoration: underline dotted var(--faint); text-underline-offset: 3px }
+.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);
+  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
+}
+.toast.on { opacity: 1; transform: translate(-50%, 0) }
+#rb-sp { flex: none; display: inline-flex }
+.sp { position: relative; display: inline-flex }
 .sp-btn {
-  width: 100%; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left;
-  font-size: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px;
-  transition: border-color .12s, box-shadow .12s;
-}
-.sp-btn:hover, .sp.open .sp-btn { border-color: var(--accent) }
-.sp.open .sp-btn { box-shadow: 0 0 0 3px #2f55c91f }
-.sp-btn .lb { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px; flex: none }
-.sp-btn .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums }
+  display: inline-flex; align-items: center; gap: 2px; cursor: pointer; white-space: nowrap;
+  font-size: 11.5px; color: var(--mute); background: none; border: 0; border-radius: 5px; padding: 1px 4px;
+  font-variant-numeric: tabular-nums; transition: background .12s, color .12s;
+}
+.sp-btn:hover, .sp.open .sp-btn { background: var(--paper); color: var(--ink) }
+/* 箭头用边框画, 不用 ▾ 字形 —— 字形贴着基线, 放大后总是偏下。 */
 .sp-btn .car {
-  flex: none; width: 6px; height: 6px; margin: -3px 2px 0 0; border: solid var(--mute); border-width: 0 1.5px 1.5px 0;
-  transform: rotate(45deg); transition: transform .15s;
+  width: 0; height: 0; margin-left: 3px; border: 5px solid transparent; border-top: 6px solid var(--faint); border-bottom: 0;
+  transition: transform .15s;
 }
-.sp.open .sp-btn .car { transform: rotate(-135deg); margin-top: 3px }
+.sp.open .sp-btn .car { transform: rotate(180deg) }
 .sp-list {
-  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
+  /* 以触发器左下角为锚向右下展开 —— 触发器贴着 name 右边, 朝左开会被侧栏左沿裁掉。 */
+  position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); width: 196px; max-width: calc(100vw - 24px);
   max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
   background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 4px;
   box-shadow: 0 8px 24px #1c24301f, 0 2px 6px #1c24300f;
@@ -107,45 +125,46 @@ button { font: inherit; color: inherit }
 }
 .sp.open .sp-list { opacity: 1; transform: none; pointer-events: auto }
 .sp-it {
-  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline;
+  width: 100%; display: flex; gap: 10px; align-items: baseline;
   background: none; border: 0; border-radius: 6px; padding: 6px 8px; cursor: pointer; text-align: left; font-size: 12px;
 }
 .sp-it:hover { background: var(--paper) }
 .sp-it.on { background: var(--mine); color: var(--accent) }
-.sp-it .id { font-family: ui-monospace, Menlo, monospace; font-weight: 600 }
-.sp-it .ago { color: var(--mute) }
-.sp-it .n { color: var(--faint); font-variant-numeric: tabular-nums; grid-column: 3 }
+.sp-it .id { flex: 1; min-width: 0; font-variant-numeric: tabular-nums }
+.sp-it .n { flex: none; color: var(--faint); font-variant-numeric: tabular-nums }
 .sp-it.all { border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 3px }
-.sp-it.all .id { font-family: inherit }
-
-/* 左栏底: session 切换 —— 轮次的事, 与顶上的身份分开, 钉在会话列表下面。 */
-.sidefoot { flex: none; border-top: 1px solid var(--line); padding: 10px 12px; background: var(--paper) }
-/* 在底部, 浮层往上开。 */
-.sidefoot .sp-list { top: auto; bottom: calc(100% + 4px); transform: translateY(4px) }
-.sidefoot .sp.open .sp-list { transform: none }
 
 /* ── 用量条: 一组轮次的总账 ─────────────────────────────────────────
    一个组件两处挂: 整页页脚 (wizard 的总账) / 聊天窗口底 (人与某个 wizard 这段往来的账)。
-   宽屏一行排完: 模型 · 指标 · I/O 条 + 图例。每一组自身不折行, 一行排不下时
-   整组落到下一行 —— 窄屏自然变成两三行, 不需要另一套结构。 */
+   永远单行: 主人 · 模型 · 指标 · 图例, I/O 分布是贴底的色带。排不下时 chat.js 的 fitUsage
+   按容器宽度一级级加 f-* 藏掉次要的 (分布文字 → 名字 → 耗时), 不按视口断点。 */
 .usage {
-  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px;
-  padding: 7px 20px; border-top: 1px solid var(--line); background: var(--paper);
-  font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--mute);
+  /* 整条只有一个字号、一个间隔: 指标、模型名、主人、图例都用它。 */
+  --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);
+  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--mute);
   font-variant-numeric: tabular-nums;
 }
-.usage b { font-weight: 700; color: var(--ink) }
-.usage .u-lb { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.usage .u-kvs { display: flex; gap: 4px 16px }
-.usage .kv { white-space: nowrap; font-size: 9.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px }
-.usage .kv b { font-size: 12.5px; margin-right: 4px; letter-spacing: 0; text-transform: none }
-.usage .u-io { display: flex; align-items: center; gap: 12px; min-width: 0 }
-.usage .bar { flex: none; width: 140px; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line) }
-.usage .bar .seg { height: 100% }
-.usage .leg { display: flex; gap: 4px 12px }
+.usage b { font-weight: 400; color: var(--ink) }
+.usage > * { flex: none }
+.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-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 的底边: 横跨整宽的细色带, 不占行; 悬停加粗一点好瞄准某一段。 */
+.usage .bar {
+  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; display: flex;
+  background: var(--line); transition: height .12s;
+}
+.usage .bar:hover { height: 6px }
+.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: 8px; height: 8px; border-radius: 2px; flex: none }
-.usage .lg b { margin-left: 1px }
+.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 }
 
 /* 群聊头像 = 参与者头像拼图: 1 格居中, 2 格左右, 3/4 格田字。 */
 .mosaic {
@@ -153,7 +172,7 @@ button { font: inherit; color: inherit }
   background: #eef1f6; border: 1px solid var(--line); gap: 1px; padding: 1px;
   font-size: 13px !important; line-height: 1 !important;
 }
-.mosaic i { font-style: normal; display: grid; place-items: center; background: #fff; min-width: 0; min-height: 0 }
+.mosaic i { font-style: normal; display: grid; place-items: center; background: var(--av-bg); min-width: 0; min-height: 0 }
 .mosaic.n1 { grid-template: 1fr / 1fr; font-size: 20px !important }
 .mosaic.n2 { grid-template: 1fr / 1fr 1fr; font-size: 14px !important }
 .mosaic.n3, .mosaic.n4 { grid-template: 1fr 1fr / 1fr 1fr }
@@ -167,50 +186,42 @@ 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 }
 
-.ci {
-  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; overflow: hidden;
+/* 群下的子项 (.si) 与私聊项 (.ci) 同一套尺寸 —— 只有一份。 */
+.ci, .si {
+  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; overflow: hidden;
   padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
 }
-.ci:hover { background: #f4f6f9 }
-.ci.on { background: #eaf0fc }
-.ci { align-items: center }
-.ci > .av { font-size: 22px; line-height: 1; flex: none; width: 34px; text-align: center }
-.ci .b { min-width: 0; flex: 1; overflow: hidden }
-.ci .pv, .ci .l1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.ci .l1 { display: flex }
-.ci .l1 { display: flex; align-items: baseline; gap: 6px }
-.ci .t { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.ci .ts { margin-left: auto; flex: none; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums }
-.ci .pv { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.ci .pv:empty { display: none }
+.ci.on, .si.on { background: #eaf0fc }
+/* 下分割线: 每一项自己的下边线 (侧栏项、群下子项、关系图卡片一律), 两端收到内容边距。 */
+.ci, .si { position: relative }
+.ci::after, .si::after {
+  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px;
+  background: var(--line); opacity: .6; pointer-events: none;
+}
+.ci > .av, .si > .av {
+  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
+  background: var(--av-bg); box-shadow: inset 0 0 0 1px var(--av-line); font-size: 20px; line-height: 1;
+}
+.ci .b, .si .b { min-width: 0; flex: 1; overflow: hidden }
+.ci .l1, .si .l1 { display: flex; align-items: baseline; gap: 6px; overflow: hidden; white-space: nowrap }
+.ci .t, .si .t { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.ci .ts, .si .ts { margin-left: auto; flex: none; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums }
+.ci .pv, .si .pv { display: block; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.ci .pv:empty, .si .pv:empty { display: none }
 .ci .tag { font-size: 10.5px; border-radius: 4px; padding: 0 4px; flex: none }
 /* 头像与名字是进入那个 role 视角的入口 —— 侧栏项、会话头、消息行同一种读法。
-   它们嵌在整行那颗按钮里, 所以悬停态必须压过行: 指到入口上时行自己的悬停底色
-   让位 (:has), 否则读起来像是要选中这一行。z-index 保证没有兄弟盖住命中区。 */
+   它们嵌在整行那颗按钮里; 行本身悬停不变底色, 只有入口自己亮起。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 }
 span.av.go { border-radius: 8px; transition: background .12s, box-shadow .12s }
-span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
-.ci:not(.on):has(.go:hover), .si:not(.on):has(.go:hover) { background: transparent }
+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 }
 
-/* 群里的其他 role —— 挂在群下, 与会话项同一种读法 (名字 · 时刻 / 最近一句), 只压一档。
+/* 群里的其他 role —— 挂在群下, 与会话项同一种读法、同一套尺寸 (名字 · 时刻 / 最近一句), 只靠缩进分层级。
    点开是「我与它在这个群里」的往来。 */
-.subs { margin: 0 0 6px 16px; border-left: 1px solid var(--line); padding-left: 2px }
-.si {
-  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; overflow: hidden;
-  padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--ink);
-}
-.si:hover { background: #f4f6f9 }
-.si.on { background: #eaf0fc }
-.si > .av { font-size: 17px; line-height: 1; flex: none; width: 24px; text-align: center }
-.si .b { min-width: 0; flex: 1; overflow: hidden }
-.si .l1 { display: flex; align-items: baseline; gap: 6px }
-.si .t { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.si.on .t { color: var(--accent) }
-.si .ts { margin-left: auto; flex: none; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums }
-.si .pv { display: block; font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.si .pv:empty { display: none }
+/* 竖线的 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) }
 .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);
@@ -226,24 +237,31 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
   font-variant-numeric: tabular-nums;
 }
 
-/* 执行中的 wizard: 名字右边一盏呼吸灯, 会话与子项同一位置, 与回复头上的 .tg-dot 同大。 */
-.ci .l1 .live, .si .l1 .live {
-  flex: none; align-self: center; width: 7px; height: 7px;
-  border-radius: 50%; background: #1a7f37; animation: pulse 1.4s infinite;
-}
 
 /* ── 右栏头: 这个群聊 / 私聊是什么 ───────────────────────────────── */
 .main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--card) }
 .chathead {
-  flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 20px; min-height: 58px;
+  flex: none; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 20px; min-height: 58px;
   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 }
 .ch-who { display: flex; gap: 11px; align-items: center; min-width: 0; flex: 1 }
-.ch-who .t { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.ch-who > .t:not(:only-child) { flex: none }
-.ch-who .sub { font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.ch-acts { display: flex; gap: 8px; align-items: center; flex: none; font-size: 12px; color: var(--mute) }
+/* 一对一的两端头像: 同单个角色头像的画法, 后一个略压住前一个。 */
+.ch-who .pair { display: flex; flex: none; align-items: center }
+.ch-who .pair .av {
+  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
+  background: #fff; border: 1px solid var(--line); font-size: 20px; line-height: 1;
+}
+.ch-who .pair .av + .av { margin-left: -8px; box-shadow: -2px 0 0 var(--card) }
+.ch-who .pair .av.go { cursor: pointer }
+.ch-who .pair .av.go:hover { border-color: var(--accent) }
+/* 标题先让位 (min-width:0), 两端头像与右侧按钮不让。 */
+.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-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;
   padding: 4px 11px; cursor: pointer; white-space: nowrap;
@@ -278,7 +296,8 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 .mrow.mine { flex-direction: row-reverse }
 .mrow.mine .mcol { align-items: flex-end }
 .mwho { font-size: 11.5px; color: var(--mute); display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
-.mwho .to { color: var(--faint) }
+.mwho .to { color: var(--faint); display: inline-flex; gap: 6px; align-items: center; min-width: 0; max-width: 100% }
+.mwho .nm { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .mwho .ch { font-size: 10.5px; border-radius: 4px; padding: 0 4px }
 .mwho .ch.priv { color: var(--priv); background: #9a5b1014 }
 /* 时刻只此一处 —— 气泡外, 跟着名字走。等宽数字让一列时间对得齐。 */
@@ -294,6 +313,10 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 .say-cap { font-size: 11.5px; color: var(--mute) }
 .mb .mq .mmeta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 14px 0; font-size: 11px; color: var(--faint) }
 .mb .mq .mmeta + .md-body { padding-top: 4px }
+/* 随这句话来的图: 详情页那份是裁成缩略的 (cover), 这里要整张看得见 —— 按原比例缩进气泡, 不裁。 */
+.mb .mq .q-imgs { padding: 10px 14px 4px }
+.mb .mq .q-imgs a { display: block; max-width: 100% }
+.mb .mq .q-imgs img { max-width: min(100%, 420px); max-height: 360px; width: auto; height: auto; object-fit: contain }
 .mchip { border-radius: 4px; padding: 0 5px; background: #f1f3f6; color: var(--mute) }
 .mchip.priv { color: var(--priv); background: #9a5b1014 }
 .mchip.graph { color: #6639ba; background: #8250df12 }
@@ -339,8 +362,40 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 .mrow.mine .flip .fi { flex-direction: row-reverse }
 .mrow.mine .flip .fc { transform: scaleX(-1) }
 .flip .fc { flex: none }
+.flip .fi { min-width: 0; max-width: 100%; box-sizing: border-box; padding: 4px 8px; gap: 6px }
+/* 要去谁那里: 名字可以折行, 不撑出门外。 */
+.flip .fn { min-width: 0; overflow-wrap: anywhere }
 .flip:hover, .flip:focus-visible { background: #2f55c90d; color: var(--accent) }
 .flip[disabled] { cursor: default; background: transparent !important; color: transparent !important }
+/* 说给谁: 贴着气泡写在门里, 与气泡首行对齐。不吃点击 —— 点到它就是点门。
+   门竖排: 描述在上、换视角箭头在下, 描述折几行箭头就跟着往下让, 两者不叠。
+   contain: size —— 门的内容不参与这一行的高度, 描述再长也不撑高一行。 */
+.flip:has(.dest) {
+  flex-direction: column; justify-content: flex-start; gap: 6px; contain: size;
+  padding: calc(var(--av) + 12px) 4px 0;
+}
+/* 只留向下的吸附: 原先的 bottom 吸附会把箭头往上拽到视窗中线, 越过上面的描述。 */
+.flip:has(.dest) .fi { bottom: auto; flex: none }
+/* 门比描述矮 (一行短气泡) 时不许把描述压扁, 宁可溢到行外。 */
+.flip:has(.dest) .dest { flex: none }
+/* 压过 .mrow.mine .flip 的 flex-end: 竖排后那条是纵轴, 会把描述推到行底。 */
+.mrow .flip:has(.dest) { justify-content: flex-start }
+.mrow.them .flip:has(.dest) { align-items: flex-start }
+.mrow.mine .flip:has(.dest) { align-items: flex-end }
+.flip .dest {
+  max-width: 100%; font-size: 11px; line-height: 1.45; color: var(--faint); pointer-events: none;
+  display: flex; align-items: center; gap: 4px; max-height: calc(3 * 1.45em); overflow: hidden;
+}
+.flip .dest .arr { font-style: normal; flex: none }
+.flip .dest .dav {
+  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--card);
+  display: grid; place-items: center; font-size: 11px; line-height: 1;
+}
+.flip .dest .dn { min-width: 0; overflow-wrap: anywhere }
+.mrow.them .flip .dest { text-align: left }
+.mrow.mine .flip .dest { text-align: right; justify-content: flex-end }
+.flip[disabled] .dest { color: var(--faint) }
+.mwho .to { display: none }
 .mwho .av.go { cursor: pointer }
 .mwho .av.go:hover { border-color: var(--accent); background: #2f55c914 }
 
@@ -379,6 +434,8 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
    保温 ping 不是对话, 但它是真花销 —— 所以留在时间轴上, 只是收成一行虚线。 */
 /* summary 的灰底 / 底线是 SHARED_CSS 里通用 details 的 —— 圆角得自己裁, 底线只在展开时才是分割线。 */
 .ping-fold { border: 1px dashed #d8dee4; border-radius: 10px; background: #fff; overflow: hidden }
+/* 暂时整条藏起来 —— 行仍折在 details 里, 折叠 / FLIP 逻辑照旧, 删掉这行即恢复。 */
+.ping-fold { display: none }
 .ping-fold:not([open]) > .ping-sum { border-bottom: 0 }
 .ping-fold > .ping-sum {
   display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fff;
@@ -401,6 +458,7 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 }
 .ping-fold .mcol { max-width: 100% }
 .ping-fold .flip { display: none }
+.ping-fold .mwho .to { display: inline-flex }
 /* 折叠里的气泡同是白底 —— 描一圈虚线跟对话气泡分开, 与外框一个语气。 */
 .ping-fold .mb :is(.bubble.mq, .say > .bubble) { border: 1px dashed var(--bub-line) }
 
@@ -415,11 +473,10 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
   .thread { padding: 12px }
   .mcol { max-width: calc(86% + var(--av)) }
   .flip { min-width: 16px; padding: 0 4px; font-size: 0 }
+  .flip .dest { display: none }
+  .mwho .to { display: inline-flex }
   .thread { padding-bottom: calc(12px + env(safe-area-inset-bottom)) }
-  .usage { padding: 8px 12px; gap: 6px 14px }
-  .usage .u-kvs, .usage .leg { flex-wrap: wrap }
-  .usage .u-io { flex: 1 1 100%; flex-wrap: wrap; gap: 6px 12px }
-  .usage .bar { flex: 1 1 100%; width: auto }
+  .usage { padding: 8px 12px }
   .usage.page { padding-bottom: calc(8px + env(safe-area-inset-bottom)) }
 }
 
@@ -435,139 +492,12 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
   padding: 8px 20px; background: #fff; border-bottom: 1px solid #d0d7de;
   font-size: 11.5px; color: #57606a;
 }
-.wlegend { display: flex; gap: 6px; flex-wrap: wrap }
-/* 图例同时是开关 —— 边一多就得能关掉几种; 把"图例"和"过滤器"做成两样东西
-   只会让人在两处之间对照颜色。 */
-.wtools .chip {
-  display: flex; align-items: center; gap: 5px; font: inherit; cursor: pointer;
-  background: #fff; border: 1px solid #d0d7de; border-radius: 13px; padding: 2px 10px;
-  color: #8c959f;
-}
-.wtools .chip i { width: 14px; height: 0; border-top: 2px solid var(--c); opacity: .35 }
-.wtools .chip b { font-variant-numeric: tabular-nums; font-weight: 700 }
-.wtools .chip.on { color: #1f2328; border-color: var(--c) }
-.wtools .chip.on i { opacity: 1 }
-.wtools .chip.clear, .wtools .chip.only { border-color: #d0d7de; color: #57606a }
-.wtools .chip.only.on { border-color: #0969da; color: #0550ae; background: #ddf4ff }
-.wtools .wstat { margin-left: auto; color: #8c959f; font-variant-numeric: tabular-nums }
-.wtools .wstat b { color: #0969da }
+.wtools .wstat { flex: 1; display: flex; gap: 6px; align-items: baseline; color: #8c959f }
+.wtools .rng { color: var(--ink) }
 .wtools .warn { color: #9a6700 }
-.wtools .hint { margin-left: 10px; color: #b1bac4 }
-
-/* position 不是装饰: 力导向的画布是 `position:absolute; inset:0`, 没有这一行它
-   就贴到更外层的定位祖先上去 —— 坐标原点跑到顶栏, 节点飘到工具条上面, 而
-   overflow:hidden 也拦不住一个容器块在自己之外的绝对定位子元素。 */
+.wtools .hint { margin-left: auto; color: #b1bac4 }
 .wscroll { position: relative; flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch }
 .wmap { position: relative; padding: 18px 20px 28px; min-width: min-content }
-/* 有关系的节点带一道左侧色条 —— 76 个会话里哪几个真的在协作, 不点开也看得见。 */
-.wnode.rel::before {
-  content: ""; position: absolute; left: 1px; top: 8px; bottom: 8px;
-  width: 2px; border-radius: 1px; background: #0969da66;
-}
-/* 连线层铺满整张图并且不吃事件 —— 节点的点击/双击必须照常穿过去。
-   z-index 把它抬到卡片之上: 卡片是不透明的, 压在下面时一条跨卡片的边会被中途
-   吃掉半截, 读出来像是断的。.wgrid 不设 z-index (保持 auto) 才不会自成一个层叠
-   上下文 —— 那样悬停/聚焦的节点就再也抬不过这条线了。 */
-.wedges { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2 }
-/* 反过来: 正在看的那个节点要压过连线, 否则文字被线划着读。只抬这两种 —— 一直
-   抬着某个节点等于把"线被卡片吃掉"这个毛病在它身上留一份。 */
-.wnode:hover, .wnode.sel { z-index: 3 }
-/* 多列流式而不是 grid: 聊天卡片的高度天差地别 (一个群 2 个 wizard, 另一个 20 个),
-   grid 的行高按本行最高的那张对齐, 于是矮卡片下面全是空白 —— 图看着比实际稀疏
-   一倍。CSS columns 是砌砖式的: 卡片顺着列往下码, 码满了换列, 没有行的概念。
-   列宽钉在 320 附近也顺带收住了"两张卡片各占半个屏"的过度拉伸。 */
-.wgrid { position: relative; columns: 320px; column-gap: 16px }
-
-.wchat {
-  background: #fff; border: 1px solid #d0d7de; border-radius: 12px; overflow: hidden;
-  /* 一张卡片不能被切成两列 —— 断在半截的家谱读不出父子关系。 */
-  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
-  margin-bottom: 16px;
-}
-/* 卡片头可点 = 进那个群 (见 chat.js 的 openNode)。 */
-.wch.go { cursor: pointer }
-.wch.go:hover .nm { color: #0969da; text-decoration: underline }
-/* 当前聊天是读图的锚点, 给它一道明确的边 —— 其余的群一律等价, 不再分轻重。 */
-.wchat.self { border-color: #0969da66; box-shadow: 0 0 0 3px #0969da10 }
-.wch {
-  display: flex; align-items: baseline; gap: 8px; padding: 9px 13px;
-  border-bottom: 1px solid #eaeef2; background: #f6f8fa;
-}
-.wchat.self .wch { background: #f0f6ff }
-.wch .nm {
-  font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden;
-  text-overflow: ellipsis; white-space: nowrap;
-}
-.wch .here {
-  font-size: 10px; color: #0969da; background: #0969da14; border-radius: 4px; padding: 1px 5px;
-}
-.wch .ct {
-  margin-left: auto; font-size: 11px; color: #8c959f; flex: none;
-  font-family: ui-monospace, Menlo, monospace;
-}
-.wch .ct em { color: #1a7f37; font-style: normal; font-weight: 700 }
-/* 左内边距是同卡片内连线的车道 —— 一条 `#a → #b` 的派活边从这里绕过去, 不必
-   拐出卡片 (拐出去就会被滚动容器裁掉)。 */
-.wrows { padding: 7px 10px 10px 22px; display: flex; flex-direction: column; gap: 3px }
-
-.wnode {
-  position: relative; display: flex; gap: 8px; align-items: flex-start;
-  padding: 6px 8px; border-radius: 8px; cursor: pointer;
-  border: 1px solid transparent; transition: opacity .15s, background .12s;
-}
-.wnode:hover { background: #f6f8fa }
-.wnode.self { background: #fffbe8 }
-.wnode.sel { background: #eef4fc; border-color: #0969da55 }
-/* 聚焦时无关节点压暗而不是移除 —— 位置不动, 连点几个节点版面也不跳。 */
-.wnode.dim { opacity: .3 }
-/* 双击能走进去的那些 —— 外聊天的节点现在也算 (整页跳过去)。 */
-.wnode.go { cursor: pointer }
-.wnode.cold .wav { filter: grayscale(1); opacity: .55 }
-/* 缩进本身就是家谱; 这道折线只是把"缩给谁看"指实。 */
-.wnode .lin {
-  position: absolute; left: -9px; top: 0; bottom: 50%; width: 9px;
-  border-left: 1.5px solid #d8cdf0; border-bottom: 1.5px solid #d8cdf0;
-  border-bottom-left-radius: 6px;
-}
-/* 子 wizard 不是 fork: 折线换成虚线、换色, 与分身一眼分开 (同关系图的 spawn 边)。 */
-.wnode .lin.sp { border-style: dashed; border-color: #f0d2bd }
-.wav {
-  position: relative; width: 26px; height: 26px; flex: none; border-radius: 8px;
-  background: #f1f3f6; border: 1px solid #eaeef2;
-  display: flex; align-items: center; justify-content: center; font-size: 14px;
-}
-.wav .live {
-  position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px;
-  border-radius: 50%; background: #1a7f37; border: 2px solid #fff;
-  animation: pulse 1.4s infinite;
-}
-.wbody { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px }
-.wl1 { display: flex; align-items: baseline; gap: 6px; min-width: 0 }
-.wname {
-  font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden;
-  text-overflow: ellipsis; white-space: nowrap;
-}
-.wnode.run .wname { color: #1a7f37 }
-.wtag {
-  flex: none; font-size: 10.5px; color: #57606a; background: #f1f3f6;
-  border-radius: 4px; padding: 0 5px; font-family: ui-monospace, Menlo, monospace;
-}
-.wtag.def { color: #8c959f }
-.wih { flex: none; font-size: 11px; color: #6639ba }
-.wts {
-  margin-left: auto; flex: none; font-size: 10.5px; color: #8c959f;
-  font-family: ui-monospace, Menlo, monospace;
-}
-.wjob { font-size: 11.5px; color: #0550ae; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.wprev {
-  font-size: 11.5px; color: #656d76; overflow: hidden; line-height: 1.4;
-  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
-}
-.wmeta {
-  font-size: 10.5px; color: #8c959f; font-family: ui-monospace, Menlo, monospace;
-  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 1px;
-}
-.wmeta .sep { opacity: .45 }
 
 /* ══ 日程 ═══════════════════════════════════════════════════════════ */
 .plan-in { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 28px }
@@ -602,32 +532,18 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
   position: relative; height: 8px; border-radius: 4px; background: #eaeef2; margin: 3px 0 7px;
 }
 .strip .pin {
-  position: absolute; top: -3px; width: 8px; height: 14px; margin-left: -4px;
-  border-radius: 3px; background: #9a6700; box-shadow: 0 0 0 2px #fff;
-}
-.strip .cap { font-size: 11px; color: #8c959f }
-
-.prow {
-  display: flex; gap: 16px; background: #fff; border: 1px solid #d0d7de;
-  border-radius: 10px; padding: 12px 16px; margin-bottom: 10px;
-}
-.prow .pl { flex: none; width: 152px; border-right: 1px dashed #eaeef2; padding-right: 14px }
-.pwhen { font-size: 11.5px; color: #9a6700; font-weight: 600 }
-.pnext {
-  display: flex; align-items: baseline; gap: 6px; margin-top: 5px;
-  font-family: ui-monospace, Menlo, monospace;
+  position: absolute; top: -4px; width: 10px; height: 16px; margin-left: -5px; padding: 0; cursor: pointer;
+  border: 0; border-radius: 3px; background: #9a6700; box-shadow: 0 0 0 2px #fff;
 }
-.pnext b { font-size: 12.5px; font-variant-numeric: tabular-nums }
-.pnext span { font-size: 10.5px; color: #8c959f }
-.prow .pr { min-width: 0; flex: 1 }
-.ph { display: flex; align-items: center; gap: 7px; flex-wrap: wrap }
-.ph .note { font-size: 11px; color: #57606a }
-.ph .pid {
-  margin-left: auto; font-size: 10px; color: #b1bac4;
-  font-family: ui-monospace, Menlo, monospace;
+.strip .pin span {
+  position: absolute; bottom: 19px; left: 50%; transform: translateX(-50%); white-space: nowrap;
+  font: 600 9.5px ui-monospace, Menlo, monospace; color: #9a6700; opacity: 0; transition: opacity .12s; pointer-events: none;
 }
-.ptext { font-size: 12px; color: #1f2328; margin-top: 6px; line-height: 1.5; word-break: break-word }
-.pfoot { font-size: 10.5px; color: #8c959f; margin-top: 6px }
+.strip .pin:hover span, .strip .pin:focus-visible span { opacity: 1 }
+.strip .pin:hover { transform: scaleY(1.15) }
+.strip .pin.bad { background: #cf222e }
+.strip .pin.bad span { color: #cf222e }
+.strip .cap { font-size: 11px; color: #8c959f }
 
 /* wizard 徽标 —— 日程/工单里凡是提到一个 wizard 都用它, 同聊天的可点进线程。 */
 .wchip {
@@ -671,69 +587,15 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 @media (max-width: 760px) {
   .chathead .vb { padding: 3px 8px }
   .wmap { padding: 12px }
-  .wgrid { columns: 1 }
   .plan-in { padding: 12px }
-  .prow { flex-direction: column; gap: 6px }
-  .prow .pl { width: auto; border-right: 0; border-bottom: 1px dashed #eaeef2; padding: 0 0 8px }
-  .pnext { margin-top: 1px }
-}
-
-/* 相关性筛掉的那些 —— 说一声它们还在, 但不占图的位置 (见 shared/world 的说明)。 */
-.wmore {
-  padding: 5px 13px 9px; font-size: 10.5px; color: #b1bac4;
-  border-top: 1px dashed #eaeef2; margin-top: 2px;
-}
-
-/* ══ 关系视图 · 力导向布局 ═════════════════════════════════════════
-   卡片布局之外的另一种读法: 节点只画 wizard, 聊天不再是容器而是节点身上的一
-   道色条 + 一行群名。见 web/chat.js 的说明。 */
-.wscroll.fx { overflow: hidden }
-.wmap.force { position: absolute; inset: 0; padding: 0; min-width: 0 }
-.fxn {
-  position: absolute; left: 0; top: 0; z-index: 2;
-  display: flex; align-items: center; gap: 7px; max-width: 210px;
-  padding: 5px 10px 5px 7px; border-radius: 10px;
-  background: #fff; border: 1px solid #d0d7de; border-left: 3px solid var(--c);
-  box-shadow: 0 1px 3px #1b1f2412; cursor: grab; touch-action: none;
-  user-select: none; -webkit-user-select: none;
-  transition: opacity .15s, box-shadow .12s;
-  will-change: transform;
-}
-.fxn .wav { width: 22px; height: 22px; border-radius: 7px; font-size: 12px }
-.fxn .wav .live { width: 8px; height: 8px; right: -2px; bottom: -2px }
-.fxb { min-width: 0; display: flex; flex-direction: column; gap: 0 }
-.fxn .wname { font-size: 12px }
-/* 群名压得比名字轻 —— 它是节点的属性, 不是节点本身。 */
-.fxc {
-  font-size: 9.5px; color: var(--c); opacity: .85; overflow: hidden;
-  text-overflow: ellipsis; white-space: nowrap;
-}
-.fxn.self { background: #fffbe8 }
-.fxn.cold { opacity: .72 }
-.fxn.cold .wav { filter: grayscale(1); opacity: .55 }
-.fxn.run .wname { color: #1a7f37 }
-.fxn.dim { opacity: .22 }
-.fxn.sel { box-shadow: 0 0 0 3px var(--c), 0 1px 3px #1b1f2412; }
-.fxn.sel .fxc { opacity: 1 }
-.fxn.drag { cursor: grabbing; box-shadow: 0 6px 16px #1b1f2426 }
-/* 钉住 = 这个位置是人摆的, 力不再动它。 */
-.fxn.pin::after {
-  content: "📌"; position: absolute; right: -5px; top: -7px; font-size: 9px;
-  opacity: .8; pointer-events: none;
-}
-/* 布局开关 —— 两种读法并列, 不是复选。 */
-.wtools .wlay { display: inline-flex; border: 1px solid #d0d7de; border-radius: 7px; overflow: hidden }
-.wtools .lb {
-  border: 0; background: #fff; cursor: pointer; padding: 3px 9px;
-  font-size: 11.5px; color: #57606a; font-family: inherit;
-}
-.wtools .lb + .lb { border-left: 1px solid #d0d7de }
-.wtools .lb.on { background: #ddf4ff; color: #0550ae; font-weight: 600 }
+  .tcard { flex-direction: column; gap: 8px }
+  .tc-time { width: auto; flex-direction: row; align-items: baseline; gap: 8px; border-right: 0; padding: 0 }
+}
 
 /* ══ 关系 / 日程 ═══════════════════════════════════════════════════ */
 /* 都是当前 role 的另一面, 侧栏 (它的会话) 留着 —— 点一个会话就回到对话。
    会话标题条与页脚总账只属于对话视图。 */
-.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fafbfc }
+.pane { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fafbfc }
 
 /* 过程框里的工具行是 nowrap 的 —— 不裁一刀会把整列撑出横向滚动。 */
 .mb > .turn-group { overflow: hidden }
@@ -746,3 +608,234 @@ span.av.go:hover { background: #2f55c924; box-shadow: 0 0 0 3px #2f55c924 }
 .rem.raw { flex-basis: 100% }
 .rem.raw .rem-raw { display: block }
 .rem.raw .rem-tag { display: none }
+
+/* ══ 忙闲: 名字右边唯一的状态位 (名片 · 关系树 · 侧栏共用 stTag) ══
+   只有执行中带颜色与呼吸; 空字 (侧栏) 就只剩那盏灯。 */
+.wst {
+  flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; line-height: 16px;
+  padding: 0 6px; border-radius: 8px; background: #eef0f3; color: var(--mute); white-space: nowrap; font-weight: 500;
+}
+.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.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 }
+
+/* 树: 每条入边是一道实线, 从父卡片底下一路落到自己卡片的头像旁, 末端一枚箭头, 颜色 = 关系种类。
+   兄弟共用的那段竖干上, 后画的 (更下方的节点) 盖住先画的; 竖线往上伸到 ul 顶为止 (clip-path 只裁上边)。 */
+.tree, .tree ul { list-style: none; margin: 0; padding: 0 }
+.tree ul { padding-left: 20px; clip-path: inset(0 -100vw -100vh -100vw) }
+.tree li { position: relative; padding-top: 14px }
+.tree > li { padding-top: 0 }
+.tree ul > li::before {
+  content: ""; position: absolute; left: -10px; top: -9999px; height: calc(9999px + 39px); width: 10px;
+  border-left: 1.5px solid var(--lc); border-bottom: 1.5px solid var(--lc); border-bottom-left-radius: 7px;
+}
+.tree ul > li::after {
+  content: ""; position: absolute; left: -6px; top: 34px; border: 4.5px solid transparent; border-right: 0;
+  border-left: 7px solid var(--lc);
+}
+.tree li.spawn { --lc: #d4700f }
+.tree li.clone { --lc: #8250df }
+.tree li.peer { --lc: #0969da }
+.tree li.job { --lc: #bf8700 }
+.tree li.graph { --lc: #0a7d6b }
+/* 卡片 = 会话项; label 骑在它左上角, 紧挨箭头。 */
+.tci { position: relative; overflow: visible }
+.tci.me .t .nm { color: var(--accent) }
+/* 连接用的祖先: 没和视角对过话, 只为把对过话的后代挂回家谱 —— 淡一档。 */
+.tci.via { opacity: .55 }
+.tci.via:hover { opacity: 1 }
+.tlab { position: absolute; left: 4px; top: -8px; display: flex; gap: 3px; z-index: 2 }
+.tlab .ek { box-shadow: 0 0 0 2px var(--card) }
+
+/* 边的 label: 辅助信息, 淡色; 一条边可能同时带几种 (既是子 wizard 又被派过活), 各一枚。 */
+.ek {
+  flex: none; font-size: 10px; line-height: 15px; padding: 0 5px; border-radius: 4px; white-space: nowrap;
+  font-weight: 500; color: var(--mute); background: #f1f3f6;
+}
+.ek.spawn { color: #a8642a; background: #d4700f12 }
+.ek.clone { color: #7a5bb8; background: #8250df12 }
+.ek.peer { color: #4a74b0; background: #0969da10 }
+.ek.job { color: #94741f; background: #bf870014 }
+.ek.graph { color: #3d8577; background: #0a7d6b12 }
+.ek.cross { font-weight: 400; background: #fff; box-shadow: inset 0 0 0 1px var(--line) }
+
+/* ══ 日程 · 总览 / 任务卡 ════════════════════════════════════════════ */
+.pstats {
+  max-width: 900px; margin: 0 auto 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
+}
+.pst {
+  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
+  display: flex; flex-direction: column; gap: 2px; min-width: 0;
+}
+.pst .k { font-size: 11px; color: var(--mute) }
+.pst b { font-size: 20px; line-height: 26px; font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, monospace }
+.pst b small { font-size: 12px; color: var(--faint); font-weight: 400 }
+.pst .s { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.pst.bad { border-color: #cf222e66; background: #fff6f6 }
+.pst.bad b, .pst.bad .k { color: #cf222e }
+
+.tcard {
+  display: flex; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
+  padding: 12px 16px; margin-bottom: 10px; transition: box-shadow .2s, border-color .2s;
+}
+.tcard:hover { border-color: #b9c3d3 }
+.tcard.bad { border-color: #cf222e55; border-left: 3px solid #cf222e }
+.tcard.flash { animation: flash 1.2s ease-out }
+@keyframes flash { 0% { box-shadow: 0 0 0 4px #9a670055 } 100% { box-shadow: 0 0 0 4px #9a670000 } }
+.tc-time {
+  flex: none; width: 92px; display: flex; flex-direction: column; gap: 1px;
+  border-right: 1px dashed #eaeef2; padding-right: 14px;
+}
+.tc-time b { font: 700 22px/28px ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--ink) }
+.tc-time span { font-size: 11px; color: var(--mute) }
+.tc-time em { font-style: normal; font-size: 11px; color: #9a6700; font-weight: 600 }
+.tc-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 7px }
+.perr {
+  font-size: 11.5px; color: #82071e; background: #ffebe9; border: 1px solid #ff818266; border-radius: 8px;
+  padding: 6px 10px; line-height: 1.5;
+}
+.perr b { font-weight: 700 }
+.perr code {
+  display: block; margin-top: 3px; font: 11px/1.5 ui-monospace, Menlo, monospace; color: #a40e26;
+  white-space: pre-wrap; word-break: break-word;
+}
+.prule { display: flex; gap: 5px; flex-wrap: wrap }
+.rl { font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 9px; white-space: nowrap }
+.rl.clock { color: #7d4e00; background: #fff8c5; border: 1px solid #d4a72c66; font-weight: 600 }
+.rl.guard { color: var(--mute); background: #f1f3f6; border: 1px solid #e4e8ee }
+.ptitle { font-size: 13px; font-weight: 600; line-height: 1.45; word-break: break-word }
+.pflow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11.5px }
+.pflow .fl { color: var(--faint) }
+.pflow .ar { color: var(--faint) }
+.pflow .fresh { color: #6639ba; background: #8250df12; border-radius: 10px; padding: 0 7px; line-height: 18px }
+.pprompt { font-size: 11.5px; border-radius: 8px; background: #f6f8fa; border: 1px solid #eaeef2 }
+.pprompt summary {
+  text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer; padding: 5px 10px; color: var(--mute); display: flex; gap: 8px; min-width: 0; list-style: none;
+}
+.pprompt summary::-webkit-details-marker { display: none }
+.pprompt summary::before { content: "▸"; color: var(--faint); transition: transform .12s }
+.pprompt[open] summary::before { transform: rotate(90deg) }
+.pprompt summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); opacity: .75 }
+.pprompt pre {
+  margin: 0; padding: 8px 12px 10px; border-top: 1px solid #eaeef2; max-height: 280px; overflow: auto;
+  font: 11.5px/1.55 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word;
+}
+.pfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 10.5px; color: var(--faint) }
+.pfoot .pid { margin-left: auto; font-family: ui-monospace, Menlo, monospace; color: #b1bac4 }
+.gt { border-radius: 4px; padding: 0 6px; line-height: 16px; font-weight: 600 }
+.gt.none { color: var(--faint); background: #f1f3f6; font-weight: 400 }
+.gt.go { color: #1a7f37; background: #dafbe1 }
+.gt.skip { color: #57606a; background: #eaeef2 }
+.gt.err { color: #fff; background: #cf222e }
+.jh .jst { border-radius: 4px; padding: 0 6px; background: #eaeef2 }
+.jrow.open .jh .jst { background: #dafbe1 }
+.jmm .wst { font-size: 9.5px }
+.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;
+}
+.sbox:hover { border-color: #c4cbd6; background: var(--card); color: var(--mute) }
+.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 }
+.sbox kbd, .sk kbd {
+  flex: none; font: 500 10.5px/1 ui-sans-serif, system-ui, -apple-system, sans-serif; color: var(--mute);
+  padding: 3px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--card);
+}
+
+.sk {
+  position: fixed; inset: 0; z-index: 900; display: flex; justify-content: center; align-items: flex-start;
+  padding: 12vh 16px 16px; background: #1c243038; animation: sk-in .12s ease-out;
+}
+.sk[hidden] { display: none }
+@keyframes sk-in { from { opacity: 0 } }
+.sk-panel {
+  width: 600px; max-width: 100%; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
+  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
+  box-shadow: 0 24px 64px #1c243033, 0 4px 14px #1c24301a;
+}
+.sk-in { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--faint) }
+.sk-in .ic svg { width: 17px; height: 17px }
+.sk-in input {
+  flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--ink);
+}
+.sk-in input::-webkit-search-cancel-button { display: none }
+.sk-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 8px }
+.sk-list h3 {
+  margin: 10px 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--mute);
+  display: flex; align-items: baseline; gap: 6px;
+}
+.sk-list h3 span { font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums }
+.sk-it {
+  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; overflow: hidden;
+  padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
+}
+.sk-it.on { background: #eaf0fc }
+.sk-it.msg { align-items: flex-start }
+.sk-it.msg > .av { margin-top: 1px }
+.sk-it > .av {
+  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
+  background: #f1f3f6; font-size: 17px; line-height: 1;
+}
+.sk-it .b { min-width: 0; flex: 1; overflow: hidden }
+.sk-it .l1 { display: flex; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap }
+.sk-it .nm { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.sk-it .k { margin-left: auto; flex: none; font-size: 11px; color: var(--faint); opacity: 0 }
+.sk-it.on .k { opacity: 1; color: var(--accent) }
+.sk-it .ts { margin-left: auto; flex: none; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums }
+.sk-it .pv { display: block; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.sk-it .l1 .nm + .nm, .sk-it .arr + .nm { font-weight: 500; color: var(--mute) }
+.sk-it .arr { flex: none; color: var(--faint); font-size: 11.5px }
+.sk-it .tag { flex: none; font-size: 10.5px; color: var(--mute); background: var(--paper); border-radius: 4px; padding: 1px 5px }
+/* 命中的那一截: 正文色, 最多两行; 命中词是这一页的视角色淡底 —— 与选中态一个色系。 */
+.sk-it .sn {
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+  margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--ink); word-break: break-word;
+}
+.sk-it mark { background: #2f55c91f; color: var(--accent); font-weight: 600; border-radius: 3px; padding: 0 1px }
+.sk-it.on mark { background: #2f55c92e }
+.sk-it .l3 { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0 }
+.sk-it .where {
+  display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 70%;
+  font-size: 11px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.sk-it .where i { font-style: normal; font-size: 12px; line-height: 1 }
+.sk-it .where.priv { color: var(--priv) }
+.sk-it .cnt { flex: none; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums }
+.sk-empty { padding: 18px 10px; text-align: center; font-size: 12.5px; color: var(--faint) }
+.sk-foot {
+  flex: none; display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line);
+  font-size: 11px; color: var(--faint); background: #fafbfc;
+}
+.sk-foot span { display: inline-flex; align-items: center; gap: 4px }
+.sk-foot kbd { padding: 2px 4px }
+@media (max-width: 760px) {
+  .sk { padding-top: 8px }
+  .sk-panel { max-height: calc(100dvh - 16px) }
+  .sk-foot { display: none }
+}
+
+/* 搜索跳到的那一句: 气泡闪一圈视角色。 */
+.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 } }