wezard 1.4.2 → 2.0.1

package/web/chat.css

@@ -1,140 +1,310 @@
-/* Chat 详情视图外壳。turn 正文的样式来自 detail-render 的 SHARED_CSS/TURN_CSS,
-   由 /chat/app.css 拼在本文件之前 —— 这里只管三栏骨架、会话列表与页脚总账。 */
+/* Rolepage 外壳。消息正文 (turn 卡片) 的样式来自 detail-render 的 SHARED_CSS/TURN_CSS,
+   由 /chat/app.css 拼在本文件之前 —— 这里管骨架、会话列表、左右气泡与页脚总账。
+   视觉只押一处: 「视角」。我说的靠右、染成视角色; 别人说的靠左、带头像; 气泡对面
+   那片空白是一道门 —— 点下去就换成对方的视角。其余一律安静。 */
+
+:root {
+  --paper: #eef1f5;   /* 对话底 —— 冷灰, 让白色与视角色的两种气泡都站得住 */
+  --card: #fff;
+  --ink: #1c2430;
+  --mute: #6a7483;
+  --faint: #9aa3af;
+  --line: #d9dee6;
+  --mine: #eef3fd;    /* 当前视角说的话 */
+  --mine-soft: #e2eafa;  /* 它内部还要再沉一档的块 (代码/结果/折叠头) */
+  --mine-line: #c9d7f3;
+  --accent: #2f55c9;  /* 视角色: 名字的点、选中态、自己的气泡描边 */
+  --priv: #9a5b10;    /* 私聊 */
+  --pub: #237a55;     /* 公开 */
+}
 
 html, body { height: 100% }
 /* overscroll-behavior:none 阻止整页橡皮筋回弹 —— webview 里它会和内层
    .thread 抢滚动手势, 表现为"滚一下卡住/整页在弹"。 */
-body { overflow: hidden; overscroll-behavior: none }
+body { overflow: hidden; overscroll-behavior: none; color: var(--ink) }
+button { font: inherit; color: inherit }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
 
 .app { display: flex; height: 100vh; height: 100dvh }
+@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
 
-/* ── 侧栏: 会话列表 ─────────────────────────────────────────────── */
+/* 名字 = 地址。点是地址的一部分, 也是这一页唯一的颜色记号。 */
+.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 }
+
+/* ── 侧栏: 我 + 会话 ─────────────────────────────────────────────── */
 .side {
-  width: 288px; flex: none; background: #fff; border-right: 1px solid #d0d7de;
+  width: 312px; flex: none; background: var(--card); border-right: 1px solid var(--line);
   display: flex; flex-direction: column; min-height: 0;
 }
-.side-head { padding: 13px 16px 11px; border-bottom: 1px solid #eaeef2 }
-.side-head .l1 { display: flex; align-items: baseline; gap: 8px }
-.side-head .t { font-size: 14px; font-weight: 600 }
-.side-head .n {
-  margin-left: auto; font-size: 11px; color: #8c959f;
-  font-variant-numeric: tabular-nums;
-}
-.side-head .s {
-  font-size: 11px; color: #8c959f; font-family: ui-monospace, Menlo, monospace;
-  word-break: break-all; margin-top: 3px;
-}
 
-.tags { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 6px 12px }
+/* ── 左栏顶: 当前 role 的名片 (身份 + 关系/日程入口) ──── */
+.rolebar {
+  position: relative; flex: none; padding: 16px 16px 14px; border-bottom: 1px solid var(--line);
+  display: flex; flex-direction: column; gap: 8px; background: var(--card);
+}
+.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 .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 .go { cursor: pointer; color: var(--accent) }
+.rolebar .go:hover { text-decoration: underline }
+.rolebar .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
+.rolebar .acts:empty { display: none }
+.bd {
+  font-size: 11px; line-height: 18px; padding: 0 8px; border: 0; border-radius: 9px; cursor: pointer;
+  background: #f1f3f6; color: var(--mute); white-space: nowrap;
+}
+.bd:hover { color: var(--accent) }
+.bd.on { background: var(--mine-soft); 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 }
+.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 }
+.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;
+}
+.sp.open .sp-btn .car { transform: rotate(-135deg); margin-top: 3px }
+.sp-list {
+  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
+  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;
+  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .12s, transform .12s;
+}
+.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;
+  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.all { border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 3px }
+.sp-it.all .id { font-family: inherit }
 
-.tag-row {
-  position: relative; display: flex; gap: 10px; align-items: flex-start;
-  padding: 8px 10px 8px 11px; border-radius: 8px; cursor: pointer;
-  border: 1px solid transparent; transition: background .12s;
-}
-.tag-row:hover { background: #f6f8fa }
-/* 选中态用左侧色条而不是整块蓝底 —— 底色会和内部的 badge/预览抢注意力。 */
-.tag-row.on { background: #f0f4f9 }
-.tag-row.on::before {
-  content: ""; position: absolute; left: 2px; top: 9px; bottom: 9px;
-  width: 3px; border-radius: 2px; background: #0969da;
-}
+/* 左栏底: session 切换 + 用量, 都是轮次的事 —— 与顶上的身份分开, 钉在会话列表下面。 */
+.sidefoot {
+  flex: none; border-top: 1px solid var(--line); padding: 10px 12px 12px;
+  display: flex; flex-direction: column; gap: 8px; background: var(--paper);
+}
+.sidefoot[hidden] { display: none }
+#rb-sess:empty, #rb-prof:empty { display: none }
+/* 在底部, 浮层往上开。 */
+.sidefoot .sp-list { top: auto; bottom: calc(100% + 4px); transform: translateY(4px) }
+.sidefoot .sp.open .sp-list { transform: none }
 
-.tag-av {
-  width: 32px; height: 32px; flex: none; border-radius: 10px; background: #f1f3f6;
-  display: flex; align-items: center; justify-content: center; font-size: 17px;
-  position: relative; border: 1px solid #eaeef2;
-}
-.tag-av .live {
-  position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px;
-  border-radius: 50%; background: #1a7f37; border: 2px solid #fff;
-  animation: pulse 1.4s infinite;
-}
-@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
+/* profile: 这个 role 自己跑过的轮次的总账 —— 平铺在左栏底, 不套卡片。 */
+.prof { font-family: ui-monospace, Menlo, monospace }
+.prof .hd { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-bottom: 6px }
+.prof .hd .lb { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px; font-family: system-ui, sans-serif }
+.prof .model {
+  margin-left: auto; color: var(--mute);
+  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.prof .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px }
+.prof .kv { display: flex; flex-direction: column; align-items: flex-start; min-width: 0 }
+.prof .kv .v { font-size: 13px; font-weight: 700; color: #1f2328; font-variant-numeric: tabular-nums; white-space: nowrap }
+.prof .kv .k { font-size: 9.5px; color: #8c959f; text-transform: uppercase; letter-spacing: .4px }
+.prof .io { margin-top: 8px; display: flex; flex-direction: column; gap: 6px }
+.prof .bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #eaeef2 }
+.prof .bar .seg { height: 100% }
+.prof .leg { display: flex; gap: 4px 9px; flex-wrap: wrap }
+.prof .lg { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: #8c959f }
+.prof .lg i { width: 8px; height: 8px; border-radius: 2px; flex: none }
+.prof .lg b { color: #1f2328; font-weight: 700; font-variant-numeric: tabular-nums }
 
-.tag-main { min-width: 0; flex: 1 }
-.tag-l1 { display: flex; align-items: baseline; gap: 6px }
-.tag-name {
-  font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
-  text-overflow: ellipsis; font-family: ui-monospace, Menlo, monospace;
-}
-.tag-row.running .tag-name { color: #1a7f37 }
-.tag-ts {
-  margin-left: auto; flex: none; font-size: 11px; color: #8c959f;
-  font-family: ui-monospace, Menlo, monospace;
-}
-.tag-prev {
-  font-size: 12px; color: #656d76; margin-top: 2px; overflow: hidden;
-  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
-  line-height: 1.45;
-}
-/* 每行第三层: 轮数 / 工具数 / token —— 不点进去也能判断哪个会话在真干活。 */
-.tag-meta {
-  display: flex; gap: 4px; align-items: center; margin-top: 4px;
-  font-size: 10.5px; color: #8c959f; font-family: ui-monospace, Menlo, monospace;
-  font-variant-numeric: tabular-nums;
-}
-.tag-meta .sep { opacity: .45 }
-.tag-meta .hot { color: #9a6700 }
-.tags .empty-side { padding: 28px 12px; text-align: center; color: #8c959f; font-size: 12px }
-
-/* ── 主区 ───────────────────────────────────────────────────────── */
-/* min-height:0 给纵向 flex (mobile) 用: 缺了它 .main 的 min-height:auto 会被
-   内容撑破 100dvh, .thread 不产生内部滚动, 底部被 body overflow:hidden 裁掉。
-   横向 (桌面) 下无副作用 —— 高度本来就由 stretch 定死。 */
-.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column }
-.topbar {
-  flex: none; display: flex; align-items: center; gap: 10px; padding: 11px 20px;
-  background: #fff; border-bottom: 1px solid #d0d7de;
-}
-.topbar .em { font-size: 18px }
-.topbar .h { font-size: 15px; font-weight: 600; font-family: ui-monospace, Menlo, monospace }
-.topbar .cwd {
-  flex: none; font-size: 11px; color: #57606a; font-family: ui-monospace, Menlo, monospace;
-  background: #f6f8fa; border: 1px solid #eaeef2; border-radius: 5px; padding: 1px 6px;
-  max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.topbar .sub {
-  font-size: 11px; color: #8c959f; font-family: ui-monospace, Menlo, monospace;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+/* 群聊头像 = 参与者头像拼图: 1 格居中, 2 格左右, 3/4 格田字。 */
+.mosaic {
+  display: grid !important; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; flex: none;
+  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.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 }
+.mosaic.n3 i:first-child { grid-row: span 2 }
+
+.convs { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 16px }
+.convs h2 {
+  margin: 14px 8px 4px; font-size: 12px; font-weight: 600; color: var(--mute);
+  display: flex; align-items: baseline; gap: 6px;
 }
-.topbar .back { display: none; font-size: 18px; color: #656d76; cursor: pointer; padding: 0 4px }
-
-/* ── graph 运行条 ───────────────────────────────────────────────────
-   一条线的流水线不值得画成节点图 —— steps 结构上不可能分叉, 画出来的永远是
-   一条直线。这里只把它压成一行: 步骤序列 + 当前停在哪一步 + 轮次进度。 */
-.gbar {
-  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
-  padding: 7px 20px; background: #fbf9ff; border-bottom: 1px solid #8250df33;
-  font-size: 11.5px; color: #6639ba; font-family: ui-monospace, Menlo, monospace;
-}
-.gbar .gid { background: #8250df14; border-radius: 5px; padding: 1px 6px }
-.gbar .pipe { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0 }
-.gbar .nd {
-  display: flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 10px;
-  background: #fff; border: 1px solid #d8cdf0; color: #57606a; cursor: pointer;
-}
-.gbar .nd:hover { border-color: #8250df }
-.gbar .nd.on { background: #8250df; border-color: #8250df; color: #fff; font-weight: 700 }
-.gbar .nd.on.live { animation: pulse 1.4s infinite }
-.gbar .arw { color: #b3a3d6 }
-.gbar .prog { margin-left: auto; font-variant-numeric: tabular-nums }
-.gbar .done { color: #8c959f }
-/* 侧栏里标出"这个会话是 graph 在驱动的" —— 否则它看着就是某个 tag 在自说自话。 */
-.tag-meta .gtag { color: #6639ba }
+.convs h2 span { font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums }
+.convs .none { padding: 6px 10px; font-size: 12px; color: var(--faint) }
+
+.ci {
+  display: flex; gap: 10px; align-items: flex-start; 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 .tag { font-size: 10.5px; border-radius: 4px; padding: 0 4px; flex: none }
+/* 选中的 role 项上的换视角开关。 */
+.sw {
+  flex: none; align-self: center; display: inline-grid; place-items: center;
+  width: 20px; height: 20px; border-radius: 5px; color: var(--accent); cursor: pointer;
+}
+.sw:hover { background: #2f55c91a }
+.ci .tag.priv { color: var(--priv); background: #9a5b1014 }
+
+/* 群里的其他 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 }
+.si.quiet .t, .si.quiet > .av { opacity: .55 }
+
+/* ── 右栏头: 这个群聊 / 私聊是什么 ───────────────────────────────── */
+.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;
+  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 > .av:not(.mosaic) { font-size: 26px; line-height: 1; flex: none }
+.ch-who .l { min-width: 0; display: flex; flex-direction: column; gap: 1px }
+.ch-who .t { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.ch-who > .t { 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) }
+.vb {
+  font-size: 12.5px; background: var(--card); border: 1px solid var(--line); border-radius: 7px;
+  padding: 4px 11px; cursor: pointer; white-space: nowrap;
+}
+.vb:hover { border-color: var(--accent); color: var(--accent) }
+.vb.on { background: var(--accent); border-color: var(--accent); color: #fff }
+.vb b { font-weight: 600; margin-left: 3px; font-variant-numeric: tabular-nums }
 
+/* ── 消息 ─────────────────────────────────────────────────────────── */
 .thread {
   flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none;
-  padding: 16px 20px 24px; -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
+  padding: 16px 20px 28px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
 }
-.thread-in { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px }
-.empty { color: #8c959f; text-align: center; padding: 60px 0; font-size: 13px }
+.thread-in { display: flex; flex-direction: column; gap: 14px }
+.empty { color: var(--faint); text-align: center; padding: 60px 0; font-size: 13px }
 .more-btn {
-  align-self: center; background: #fff; border: 1px solid #d0d7de; border-radius: 16px;
-  padding: 5px 16px; font-size: 12px; color: #57606a; cursor: pointer; font-family: inherit;
+  align-self: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
+  padding: 5px 16px; font-size: 12px; color: var(--mute); cursor: pointer;
+}
+.more-btn:hover { color: var(--accent); border-color: var(--accent) }
+
+/* 头像已并进名字那一行, 不再占气泡旁的一列 —— 省下的那一格宽度 (--av) 还给气泡。 */
+.mrow { --av: 24px; display: flex; align-items: flex-start; gap: 10px }
+.mwho .av {
+  flex: none; align-self: center; width: var(--av); height: var(--av); border-radius: 50%; border: 1px solid var(--line);
+  background: var(--card); font-size: 14px; line-height: 22px; text-align: center; cursor: default; padding: 0;
+}
+.mcol { min-width: 0; max-width: min(78% + var(--av), 760px + var(--av)); display: flex; flex-direction: column; gap: 4px }
+.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 .ch { font-size: 10.5px; border-radius: 4px; padding: 0 4px }
+.mwho .ch.priv { color: var(--priv); background: #9a5b1014 }
+/* 时刻只此一处 —— 气泡外, 跟着名字走。等宽数字让一列时间对得齐。 */
+.mwho .mt { color: var(--faint); font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums }
+.mb { min-width: 0; max-width: 100% }
+/* 卡片里那份时刻是详情页要的, 这里已经写在 .mwho 上了 —— 同一条消息不报两次时间。 */
+.mb .tg-time { display: none }
+
+/* 入消息 (问句) 是一颗气泡; 出消息 (回复) 是一张带工具细节的卡片 —— 两者都按视角着色。 */
+.mb > .bubble.mq { border-radius: 14px; border-color: var(--line) }
+.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 .md-body { padding: 10px 14px }
+.mb .mq .mmeta + .md-body { padding-top: 4px }
+.mchip { border-radius: 4px; padding: 0 5px; background: #f1f3f6; color: var(--mute) }
+.mchip.priv { color: var(--priv); background: #9a5b1014 }
+.mchip.pub { color: var(--pub); background: #237a5514 }
+.mchip.graph { color: #6639ba; background: #8250df12 }
+.mchip.sys { color: #0a7d6b; background: #0a7d6b12 }
+
+/* 自己发出的那条: 整块就是视角色。TURN_CSS 里写死的白卡 / 灰底 (嵌套气泡、
+   代码块、折叠头) 会在蓝底上显成一张张贴纸 —— 这里把它们收回到气泡自己的
+   底色上, 一条消息读起来是一块颜色, 需要再沉一档的才用 --mine-soft。 */
+.mrow.mine .mb > .bubble.mq, .mrow.mine .mb > .turn-group { background: var(--mine); border-color: var(--mine-line) }
+.mrow.mine .mb .bubble, .mrow.mine .mb .typing, .mrow.mine .mb .stats { background: transparent; border-color: var(--mine-line) }
+.mrow.mine .mb .bubble.user, .mrow.mine .mb .bubble.approval,
+.mrow.mine .mb .md-body code, .mrow.mine .mb .md-body pre,
+.mrow.mine .mb .tile, .mrow.mine .mb details > summary,
+.mrow.mine .mb .tool-call > summary:hover { background: var(--mine-soft); border-color: var(--mine-line) }
+.mrow.mine .mb .md-body pre code { background: transparent }
+.mrow.mine .mb .bubble details, .mrow.mine .mb .tg-head { border-color: var(--mine-line) }
+.mrow.mine .mb .tool-body { border-left-color: var(--mine-line) }
+.mrow.mine .mb .io-bar { background: var(--mine-soft) }
+
+/* 气泡对面那片空白 = 换视角的门。平时不可见, 悬停才露出要去谁那里。 */
+.flip {
+  flex: 1; align-self: stretch; min-width: 40px; border: 0; background: transparent; cursor: pointer;
+  display: flex; align-items: center; padding: 0 12px; border-radius: 10px; color: transparent;
+  font-size: 12px; transition: background .15s, color .15s;
+}
+.mrow.them .flip { justify-content: flex-start }
+.mrow.mine .flip { justify-content: flex-end }
+/* 气泡可以比视窗还高, 居中的箭头就跑出屏幕了 —— 让它在按钮内 sticky, 上下各留半屏,
+   于是只要这一行还在视窗里, 箭头就钉在视窗中线附近。 */
+.flip .fi {
+  position: sticky; top: calc(50% - 10px); bottom: calc(50% - 10px);
+  display: inline-flex; align-items: center; gap: 4px;
+}
+.mrow.mine .flip .fi { flex-direction: row-reverse }
+.mrow.mine .flip .fc { transform: scaleX(-1) }
+.flip .fc { flex: none }
+.flip:hover, .flip:focus-visible { background: #2f55c90d; color: var(--accent) }
+.flip[disabled] { cursor: default; background: transparent !important; color: transparent !important }
+.mwho .av.go { cursor: pointer }
+.mwho .av.go:hover { border-color: var(--accent) }
+
+.mrow.mark { justify-content: center }
+.mrow.mark > * { flex: 1; max-width: 520px }
+
+/* 视角切换的那一下: 整列消息淡出再按新视角排回来 —— 这一页唯一的编排动效。 */
+.thread-in.flipping { animation: flip .26s ease }
+@keyframes flip { 0% { opacity: 1 } 45% { opacity: 0; transform: scaleX(.985) } 100% { opacity: 1 } }
+@media (prefers-reduced-motion: reduce) {
+  .thread-in.flipping { animation: none }
+  .flip { transition: none }
 }
-.more-btn:hover { background: #f6f8fa; color: #0969da; border-color: #0969da55 }
 
 /* ── turn 分组 ──────────────────────────────────────────────────── */
 /* section 的默认样式给了白底+边框, 但没有内边距 —— 气泡/工具行会直接贴着卡片
@@ -167,51 +337,45 @@ body { overflow: hidden; overscroll-behavior: none }
 /* graph 派的一轮: 卡片本身也着色, 滚动时不必读归因条就知道这不是人发的。 */
 .turn-group.graph { border-color: #8250df44 }
 
-/* ── 页脚总账 ───────────────────────────────────────────────────── */
-.statusbar {
-  flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
-  /* viewport-fit=cover 已开, 底部给 home indicator 让位 (桌面 env=0, 无感)。 */
-  padding: 7px 20px calc(7px + env(safe-area-inset-bottom));
-  background: #fff; border-top: 1px solid #d0d7de;
-  font-size: 11.5px; color: #57606a; font-family: ui-monospace, Menlo, monospace;
-}
-.statusbar .st { display: flex; align-items: baseline; gap: 5px }
-.statusbar .st .k {
-  color: #8c959f; text-transform: uppercase; letter-spacing: .4px; font-size: 10px;
-}
-.statusbar .st .v { color: #1f2328; font-weight: 700; font-variant-numeric: tabular-nums }
-/* 缺数据的指标压暗, 不再显示成有意义的 "0" —— 0 与「没采到」是两回事。 */
-.statusbar .st.void .v { color: #b1bac4; font-weight: 400 }
-.statusbar .pill { display: flex; align-items: center; gap: 5px; font-weight: 700 }
-.statusbar .pill .d { width: 7px; height: 7px; border-radius: 50%; background: #8c959f }
-.statusbar .pill.run { color: #1a7f37 }
-.statusbar .pill.run .d { background: #1a7f37; animation: pulse 1.4s infinite }
-.statusbar .model {
-  color: #57606a; background: #f1f3f6; border-radius: 9px; padding: 1px 7px;
-  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-/* token I/O 堆叠条 + 图例: 色块必须有名字, 否则底部那条彩带谁也读不懂。 */
-.sb-io { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0 }
-.sb-io > .k { color: #8c959f; text-transform: uppercase; letter-spacing: .4px; font-size: 10px }
-.sb-bar { display: flex; height: 6px; width: 120px; border-radius: 3px; overflow: hidden; background: #eaeef2 }
-.sb-bar .seg { height: 100% }
-.sb-leg { display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
-.sb-leg .lg { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: #8c959f }
-.sb-leg .lg i { width: 8px; height: 8px; border-radius: 2px; flex: none }
-.sb-leg .lg b { color: #1f2328; font-weight: 700; font-variant-numeric: tabular-nums }
-.conn { margin-left: auto; display: flex; align-items: center; gap: 5px }
-.conn .d { width: 7px; height: 7px; border-radius: 50%; background: #1a7f37 }
-.conn.off .d { background: #cf222e }
+/* ── 🏓 keepalive 折叠 ──────────────────────────────────────────────
+   保温 ping 不是对话, 但它是真花销 —— 所以留在时间轴上, 只是收成一行虚线。 */
+.ping-fold { border: 1px dashed #d8dee4; border-radius: 10px; background: #fbfcfd }
+.ping-fold > .ping-sum {
+  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
+  cursor: pointer; list-style: none; font-size: 11.5px; color: #8c959f;
+  font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
+}
+.ping-fold > .ping-sum::-webkit-details-marker { display: none }
+.ping-fold > .ping-sum::after {
+  content: "›"; margin-left: auto; font-size: 14px; color: #b1bac4;
+  transition: transform .12s;
+}
+.ping-fold[open] > .ping-sum::after { transform: rotate(90deg) }
+.ping-fold > .ping-sum:hover { color: #57606a }
+.ping-fold .pb { color: #57606a; font-weight: 700; flex: none }
+.ping-fold .ps { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.ping-fold .pt { flex: none; opacity: .8 }
+.ping-fold .ping-body {
+  display: flex; flex-direction: column; gap: 10px; padding: 2px 10px 10px;
+}
+/* 展开后的 ping 轮次压一档: 它们是背景噪声, 不该和真对话卡片一样醒目。 */
+.ping-fold .turn-group { box-shadow: none }
+.ping-fold .mcol { max-width: 100% }
+.ping-fold .flip { display: none }
 
 @media (max-width: 760px) {
   .app { flex-direction: column }
-  .side { width: auto; border-right: 0; border-bottom: 1px solid #d0d7de; max-height: 44vh; max-height: 44dvh }
+  .side { width: auto; flex: 1; border-right: 0 }
+  .main { display: none }
   .app.reading .side { display: none }
-  .app.reading .topbar .back { display: block }
+  .app.reading .main { display: flex }
+  .chathead { padding: 8px 12px; gap: 8px }
+  .chathead .back { display: block }
   .thread { padding: 12px }
+  .mcol { max-width: calc(86% + var(--av)) }
+  .flip { min-width: 16px; padding: 0 4px; font-size: 0 }
   .turn-group { padding: 12px }
-  .statusbar { gap: 10px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)) }
-  .sb-io, .statusbar .model { display: none }
+  .thread { padding-bottom: calc(12px + env(safe-area-inset-bottom)) }
 }
 
 /* UA 的 [hidden] 规则和 `.gbar{display:flex}` 这类类选择器同权重, 而作者样式
@@ -219,36 +383,6 @@ body { overflow: hidden; overscroll-behavior: none }
    一条 !important 把 hidden 的语义钉死, 三块视图容器的显隐都靠它。 */
 [hidden] { display: none !important }
 
-/* ══ 视图切换 ═══════════════════════════════════════════════════════ */
-/* 三栏并列在顶栏右端。会话 key (.sub) 在窄屏下先让位 —— 它是调试信息, 而切换
-   视图是主操作。 */
-.topbar .views { margin-left: auto; display: flex; gap: 2px; flex: none }
-.topbar .vb {
-  font: inherit; font-size: 12px; color: #57606a; background: transparent;
-  border: 1px solid transparent; border-radius: 7px; padding: 3px 11px; cursor: pointer;
-}
-.topbar .vb:hover { background: #f6f8fa; color: #1f2328 }
-.topbar .vb.on { background: #0969da; border-color: #0969da; color: #fff; font-weight: 600 }
-.topbar .sub { min-width: 0 }
-
-/* 关系/日程栏不需要那条 288px 的会话列表占着半张桌子 —— 图要横向铺开。 */
-.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fafbfc }
-.app.wide .side { width: 216px }
-
-/* ── 侧栏: wizard 身份 ─────────────────────────────────────────────── */
-/* 名字之外还要有职责与出身, 否则一列 `#tag` 说不出谁是谁。两行都单行省略,
-   会话行的高度必须可预期 —— 侧栏是要能一眼扫完的。 */
-.tag-job {
-  font-size: 11.5px; color: #0550ae; margin-top: 2px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.tag-kin { margin-top: 2px }
-.tag-kin .kin {
-  font-size: 10.5px; color: #6639ba; background: #8250df12; border-radius: 4px;
-  padding: 0 5px; font-family: ui-monospace, Menlo, monospace;
-  display: inline-block; max-width: 100%; overflow: hidden;
-  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
-}
 
 /* ══ 关系图 ═════════════════════════════════════════════════════════ */
 .wtools {
@@ -275,22 +409,39 @@ body { overflow: hidden; overscroll-behavior: none }
 .wtools .warn { color: #9a6700 }
 .wtools .hint { margin-left: 10px; color: #b1bac4 }
 
-.wscroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch }
+/* position 不是装饰: 力导向的画布是 `position:absolute; inset:0`, 没有这一行它
+   就贴到更外层的定位祖先上去 —— 坐标原点跑到顶栏, 节点飘到工具条上面, 而
+   overflow:hidden 也拦不住一个容器块在自己之外的绝对定位子元素。 */
+.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;
 }
-/* 连线层铺满整张图并且不吃事件 —— 节点的点击/双击必须照常穿过去。 */
-.wedges { position: absolute; inset: 0; pointer-events: none; overflow: visible }
-.wgrid {
-  position: relative; display: grid; gap: 16px;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  align-items: start;
-}
+/* 连线层铺满整张图并且不吃事件 —— 节点的点击/双击必须照常穿过去。
+   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 }
+.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 {
@@ -324,6 +475,8 @@ body { overflow: hidden; overscroll-behavior: none }
 .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 {
@@ -331,6 +484,8 @@ body { overflow: hidden; overscroll-behavior: none }
   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;
@@ -371,10 +526,15 @@ body { overflow: hidden; overscroll-behavior: none }
 
 /* ══ 日程 ═══════════════════════════════════════════════════════════ */
 .plan-in { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 28px }
-.psec { max-width: 900px; margin: 0 auto 22px }
+.psec {
+  max-width: 900px; margin: 0 auto 30px;
+  /* 通用 section 规则给了白底+边框却没有内边距 —— 不补这一层, 刻度条/日程行/工单
+     行就直接贴着卡片的边。底边留小一点: 末行自己还带 10px 的 margin。 */
+  padding: 14px 18px 8px;
+}
 .psec h3 {
-  display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin: 0 0 10px;
-  padding-bottom: 7px; border-bottom: 1px solid #d0d7de;
+  display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin: 0 0 14px;
+  padding-bottom: 8px; border-bottom: 1px solid #d0d7de;
 }
 .psec h3 span {
   font-size: 11px; color: #8c959f; font-weight: 400;
@@ -385,7 +545,7 @@ body { overflow: hidden; overscroll-behavior: none }
 /* 未来 12 小时的刻度条 —— 「今晚还有几枪要响」比一张日期列表更该先看见。 */
 .strip {
   background: #fff; border: 1px solid #d0d7de; border-radius: 10px;
-  padding: 10px 14px 9px; margin-bottom: 12px;
+  padding: 12px 16px 11px; margin-bottom: 16px;
 }
 .strip .axis {
   position: relative; height: 13px; font-size: 10px; color: #8c959f;
@@ -403,13 +563,13 @@ body { overflow: hidden; overscroll-behavior: none }
 .strip .cap { font-size: 11px; color: #8c959f }
 
 .prow {
-  display: flex; gap: 14px; background: #fff; border: 1px solid #d0d7de;
-  border-radius: 10px; padding: 10px 14px; margin-bottom: 7px;
+  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: 12px }
+.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: 3px;
+  display: flex; align-items: baseline; gap: 6px; margin-top: 5px;
   font-family: ui-monospace, Menlo, monospace;
 }
 .pnext b { font-size: 12.5px; font-variant-numeric: tabular-nums }
@@ -421,8 +581,8 @@ body { overflow: hidden; overscroll-behavior: none }
   margin-left: auto; font-size: 10px; color: #b1bac4;
   font-family: ui-monospace, Menlo, monospace;
 }
-.ptext { font-size: 12px; color: #1f2328; margin-top: 4px; line-height: 1.5; word-break: break-word }
-.pfoot { font-size: 10.5px; color: #8c959f; margin-top: 4px }
+.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 }
 
 /* wizard 徽标 —— 日程/工单里凡是提到一个 wizard 都用它, 同聊天的可点进线程。 */
 .wchip {
@@ -433,7 +593,7 @@ body { overflow: hidden; overscroll-behavior: none }
 .wchip.go { cursor: pointer; border-color: #0969da33; color: #0550ae }
 .wchip.go:hover { background: #ddf4ff; border-color: #0969da }
 
-.jrow { background: #fff; border: 1px solid #d0d7de; border-radius: 10px; padding: 10px 14px; margin-bottom: 7px }
+.jrow { background: #fff; border: 1px solid #d0d7de; border-radius: 10px; padding: 12px 16px; margin-bottom: 10px }
 .jrow.open { border-color: #1a7f3755; box-shadow: 0 0 0 3px #1a7f370d }
 .jh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
 .jid {
@@ -447,7 +607,7 @@ body { overflow: hidden; overscroll-behavior: none }
   margin-left: auto; font-size: 10.5px; color: #8c959f;
   font-family: ui-monospace, Menlo, monospace;
 }
-.jm { display: flex; flex-direction: column; gap: 3px; margin-top: 7px }
+.jm { display: flex; flex-direction: column; gap: 5px; margin-top: 9px }
 .jmm { display: flex; align-items: center; gap: 6px; min-width: 0 }
 .jmm em {
   font-style: normal; font-size: 11.5px; color: #656d76; min-width: 0;
@@ -459,19 +619,17 @@ body { overflow: hidden; overscroll-behavior: none }
 }
 .jmm.none { font-size: 11.5px; color: #b1bac4 }
 .jsum {
-  font-size: 12px; color: #1f2328; margin-top: 8px; padding-top: 8px;
+  font-size: 12px; color: #1f2328; margin-top: 10px; padding-top: 10px;
   border-top: 1px dashed #eaeef2; line-height: 1.5; white-space: pre-wrap;
 }
 
 @media (max-width: 760px) {
-  .app.wide .side { display: none }
-  .topbar .sub { display: none }
-  .topbar .vb { padding: 3px 8px }
+  .chathead .vb { padding: 3px 8px }
   .wmap { padding: 12px }
-  .wgrid { grid-template-columns: 1fr }
+  .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 6px }
+  .prow .pl { width: auto; border-right: 0; border-bottom: 1px dashed #eaeef2; padding: 0 0 8px }
   .pnext { margin-top: 1px }
 }
 
@@ -480,3 +638,57 @@ body { overflow: hidden; overscroll-behavior: none }
   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 }
+
+/* ══ 关系 / 日程 ═══════════════════════════════════════════════════ */
+/* 都是当前 role 的另一面, 侧栏 (它的会话) 留着 —— 点一个会话就回到对话。
+   会话标题条与页脚总账只属于对话视图。 */
+.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fafbfc }
+
+/* 回复卡片里的工具行是 nowrap 的 —— 不裁一刀会把整列撑出横向滚动。 */
+.mb > .turn-group { overflow: hidden }