@co0ontty/wand 1.31.3 → 1.32.1

package/dist/web-ui/content/styles.css

@@ -515,33 +515,15 @@
       transition: width 0.3s var(--ease-out-expo), transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease, opacity 0.25s ease;
     }
 
-    /* 多塞一层 .sidebar-header-actions 把 specificity 抬到 0,4,0，
+    /* 窄条（collapsed）状态：不显示 X 关闭按钮。
+       窄条只保留「展开」按钮，关闭操作必须先回到全尺寸。
+       多塞一层 .sidebar-header-actions 把 specificity 抬到 0,4,0，
        压过文件后段 .sidebar-header-actions .btn-ghost.btn-sm
        与 .drawer-close-btn 的 display: inline-flex 重置规则。 */
-    .sidebar.pinned .sidebar-header-actions .sidebar-close {
-      display: none;
-    }
-
-    /* 窄条（collapsed）状态：明确不显示 X 关闭按钮。
-       虽然 collapsed 当前必然蕴含 pinned（见 isSidebarNarrow），
-       上一条 .sidebar.pinned 规则已经能把它藏住，但单独写一条更直观，
-       也防止以后允许 drawer 模式下 collapse 时漏掉。
-       展开（drawer 模式）下才显示关闭按钮供用户收起侧栏。 */
     .sidebar.collapsed .sidebar-header-actions .sidebar-close {
       display: none;
     }
 
-    /* 与上方对称：drawer 模式（未 pin）下，X 关闭按钮已能把侧栏关掉，
-       再放一个「收起为窄条」按钮会和 X 视觉上重复，且它的行为
-       （自动 pin + collapse）也容易让人误以为是关闭。
-       只在 pinned 模式保留这颗，drawer 模式下隐藏。
-       注意：必须用 .sidebar-header-actions 多嵌一层把 specificity 提到 0,4,0，
-       否则会和文件后段 .sidebar-header-actions .btn-ghost.btn-sm (0,3,0) 打平
-       而因后定义胜出，导致 drawer 模式下窄条按钮和 X 同时显示。 */
-    .sidebar:not(.pinned) .sidebar-header-actions .sidebar-collapse-toggle {
-      display: none;
-    }
-
     /* ===== 侧栏窄条模式（仅 desktop pin 模式生效）===== */
     .sidebar.pinned.collapsed {
       width: var(--sidebar-collapsed-width);
@@ -553,7 +535,6 @@
     }
     .sidebar.pinned.collapsed .sidebar-header-main,
     .sidebar.pinned.collapsed .sidebar-header-more,
-    .sidebar.pinned.collapsed .sidebar-pin-toggle,
     .sidebar.pinned.collapsed .sidebar-footer {
       display: none;
     }
@@ -700,15 +681,6 @@
     .sidebar-collapse-toggle.collapsed {
       color: var(--primary);
     }
-    /* ===== 图钉按钮 ===== */
-    .sidebar-pin-toggle {
-      flex-shrink: 0;
-      transition: transform 0.3s var(--ease-out-expo), color var(--transition-fast);
-    }
-    .sidebar-pin-toggle.pinned {
-      color: var(--primary);
-      transform: rotate(45deg);
-    }
 
     /* ===== 侧边栏头部 ===== */
     .sidebar-header {
@@ -2617,6 +2589,11 @@
       flex: 1;
       display: flex;
       flex-direction: column;
+      /* min-width: 0 是关键：作为 .main-layout（flex row）的子项，默认
+         min-width:auto 会让 main-content 跟着内部最宽的不可断节点一起撑大，
+         窄屏上结果就是 chat 卡片把布局推宽 → 内容被 overflow:hidden 截掉
+         却又拖不动。这里强制可收缩，配合下游 .chat-* 的 break-word 才有效。 */
+      min-width: 0;
       min-height: 0;
       overflow: hidden;
       background: transparent;
@@ -3846,6 +3823,7 @@
        横向溢出都不应该冒到聊天容器，由它们各自的内部滚动负责。 */
     .chat-messages {
       flex: 1;
+      min-width: 0;
       overflow-y: auto;
       overflow-x: hidden;
       display: flex;
@@ -4061,14 +4039,21 @@
       color: var(--text-tertiary);
     }
 
-    /* ===== 消息气泡 ===== */
+    /* ===== 消息气泡 =====
+       兜底约束：气泡不应超出聊天容器宽度。即便子节点（长 URL、不可断字符串、
+       嵌入元素）想撑宽，也由 max-width / overflow-x 截断或换行。 */
     .chat-message-bubble {
       padding: 12px 16px;
       border-radius: var(--radius-md);
       font-size: 0.875rem;
       line-height: var(--line-height-relaxed);
       word-wrap: break-word;
+      overflow-wrap: anywhere;
+      word-break: break-word;
       white-space: pre-wrap;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       box-shadow: var(--shadow-sm);
       transition: box-shadow var(--transition-fast);
     }
@@ -4122,13 +4107,20 @@
       display: flex;
       flex-direction: column;
       gap: 2px;
+      width: 100%;
       max-width: 100%;
       min-width: 0;
+      /* overflow-x: hidden 兜底——内部 tool-use-card / inline-terminal /
+         markdown 如果还有不可断超长 token，绝不让它把整张消息推宽。
+         结合 word-break + overflow-wrap，用户看到的永远是换行不是横滚条。 */
+      overflow-x: hidden;
       font-size: 0.875rem;
       line-height: var(--line-height-relaxed);
       word-wrap: break-word;
+      word-break: break-word;
       overflow-wrap: anywhere;
       color: var(--text-primary);
+      box-sizing: border-box;
     }
 
     .chat-message-content > .thinking-inline,
@@ -4147,7 +4139,10 @@
       display: flex;
       flex-direction: column;
       gap: 6px;
+      width: 100%;
       max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
     }
     /* user turn 默认 align-self: flex-end（右对齐）；多段渲染时强制
        容器内左对齐，否则 subagent 段会被推到右边，border-left 色条断裂。 */
@@ -4159,12 +4154,22 @@
       display: flex;
       flex-direction: column;
       align-self: flex-start;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
     }
     .chat-message.multi-agent .chat-message-segment.subagent {
       padding-left: 10px;
       margin-left: 6px;
       border-left: 2px solid var(--agent-color, var(--border-subtle));
       border-radius: 0 4px 4px 0;
+      /* 父 .chat-message-segment 是 width:100%; box-sizing:border-box，padding
+         和 border 已被 border-box 吃掉，但 margin-left:6px 是外间距，会把
+         整段推出父容器 6px 撞屏幕右边。这里把宽度从父宽减掉同等 margin，
+         视觉上左缘内缩 6px、右缘对齐父容器，刚好不溢出。 */
+      width: calc(100% - 6px);
+      max-width: calc(100% - 6px);
     }
     .chat-message.multi-agent .chat-message-segment.subagent .chat-message-content {
       /* 子 agent 段内的气泡稍微弱化背景，区分主线 */
@@ -4178,13 +4183,19 @@
       color: var(--agent-color, var(--accent));
     }
 
-    /* "勤劳初二 ↳ 让 侦探猫 帮忙" 分隔提示 */
+    /* "勤劳初二 ↳ 让 侦探猫 帮忙" 分隔提示
+       注：color-mix() 需要 Chrome/WebView 111+（2023.04）。Android APK 上常有更老
+       的 WebView，会把 color-mix(...) 当作 invalid 整条扔掉，导致背景/边框消失。
+       下面凡是 color-mix 的属性都先写一条 rgba()/纯色 fallback，再被 color-mix
+       覆盖；旧浏览器看到 fallback、新浏览器自动用 color-mix。同一文件里下方
+       .chat-handoff-tag / .subagent-reply / .subagent-reply-cycle 等也是同思路。 */
     .chat-handoff {
       align-self: flex-start;
       margin: 4px 0 2px 4px;
       padding: 2px 10px;
       font-size: 0.7rem;
       color: var(--text-tertiary);
+      background: rgba(197, 101, 61, 0.08);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 8%, transparent);
       border-left: 2px solid var(--agent-color, var(--accent));
       border-radius: 0 8px 8px 0;
@@ -4215,7 +4226,9 @@
       letter-spacing: 0.04em;
       text-transform: uppercase;
       color: var(--agent-color, var(--accent));
+      background: rgba(197, 101, 61, 0.14);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 14%, transparent);
+      border: 1px solid rgba(197, 101, 61, 0.32);
       border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 32%, transparent);
       border-radius: 4px;
       vertical-align: 1px;
@@ -4225,7 +4238,9 @@
 
     /* subagent 回复气泡（群聊角色完成任务后的发言） */
     .subagent-reply {
+      background: rgba(197, 101, 61, 0.06);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 6%, var(--bg-surface));
+      border: 1px solid rgba(197, 101, 61, 0.20);
       border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 20%, transparent);
       border-radius: 10px;
       padding: 10px 14px;
@@ -4235,6 +4250,10 @@
       color: var(--text-primary);
       word-break: break-word;
       overflow-wrap: anywhere;
+      /* box-sizing: border-box 让 padding(14px*2)+border(1px*2) 算进 width:100%，
+         不再外鼓 30px 撑出 subagent 段右边缘。 */
+      box-sizing: border-box;
+      width: 100%;
       max-width: 100%;
       min-width: 0;
       overflow-x: hidden;
@@ -4244,7 +4263,9 @@
     .subagent-reply > :last-child { margin-bottom: 0; }
 
     .subagent-reply.error {
+      background: rgba(226, 87, 76, 0.08);
       background: color-mix(in srgb, var(--danger, #e2574c) 8%, var(--bg-surface));
+      border-color: rgba(226, 87, 76, 0.35);
       border-color: color-mix(in srgb, var(--danger, #e2574c) 35%, transparent);
     }
 
@@ -4335,8 +4356,11 @@
       font-size: 0.7rem;
       font-weight: 500;
       line-height: 1.4;
+      color: var(--accent);
       color: var(--agent-color, var(--accent));
+      background: rgba(255, 248, 240, 0.95);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 8%, var(--bg-surface, #fff));
+      border: 1px solid rgba(197, 101, 61, 0.28);
       border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 28%, transparent);
       border-radius: 999px;
       cursor: pointer;
@@ -4344,7 +4368,9 @@
       transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
     }
     .subagent-reply-cycle:hover {
+      background: rgba(248, 226, 210, 1);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 16%, var(--bg-surface, #fff));
+      border-color: rgba(197, 101, 61, 0.45);
       border-color: color-mix(in srgb, var(--agent-color, var(--accent)) 45%, transparent);
     }
     .subagent-reply-cycle:active {
@@ -4361,6 +4387,7 @@
       height: 6px;
     }
     .subagent-reply-scroll::-webkit-scrollbar-thumb {
+      background: rgba(197, 101, 61, 0.35);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 35%, transparent);
       border-radius: 3px;
     }
@@ -4441,10 +4468,15 @@
       font-size: 0.7rem;
       color: var(--text-secondary);
       white-space: pre-wrap;
+      overflow-wrap: anywhere;
       word-break: break-all;
       max-height: 240px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
       border-top: 1px dashed var(--border-subtle);
+      box-sizing: border-box;
     }
     .unknown-block.collapsed .unknown-block-body {
       display: none;
@@ -4600,6 +4632,9 @@
       overflow: hidden;
       width: 100%;
       max-width: var(--chat-card-max-width, 720px);
+      /* min-width: 0 让卡片不被内部 <pre>/长路径撑出父容器；缺这一行时
+         手机 APK 上长命令 / 长 JSON 会把整张卡片推宽到屏幕外被截掉。 */
+      min-width: 0;
       box-sizing: border-box;
       background: linear-gradient(180deg, rgba(255, 251, 245, 0.88) 0%, rgba(255, 246, 234, 0.72) 100%);
       box-shadow: 0 1px 2px rgba(89, 58, 32, 0.04);
@@ -4779,8 +4814,12 @@
       font-family: var(--font-mono);
       color: var(--text-secondary);
       white-space: pre-wrap;
-      overflow-wrap: break-word;
+      overflow-wrap: anywhere;
+      word-break: break-word;
       max-height: 400px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
       line-height: 1.55;
     }
@@ -4795,13 +4834,20 @@
       font-family: var(--font-mono);
       color: var(--text-secondary);
       white-space: pre-wrap;
-      overflow-wrap: break-word;
+      /* anywhere + break-all 兜底长 token / 长路径 / 长 URL：手机 APK 上
+         遇到不可断字符串时换行，绝不横向溢出。 */
+      overflow-wrap: anywhere;
+      word-break: break-all;
       max-height: 320px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
       line-height: 1.55;
       background: rgba(125, 91, 57, 0.035);
       border-radius: var(--radius-xs);
       padding: 8px 10px;
+      box-sizing: border-box;
     }
     .tool-use-result-empty {
       font-size: 0.75rem;
@@ -5045,7 +5091,8 @@
     }
     .thinking-inline.expanded .thinking-inline-preview {
       white-space: pre-wrap;
-      overflow-wrap: break-word;
+      overflow-wrap: anywhere;
+      word-break: break-word;
     }
     .thinking-inline-action {
       flex-shrink: 0;
@@ -5119,6 +5166,8 @@
       margin: 4px 0;
       width: 100%;
       max-width: var(--chat-card-max-width, 720px);
+      /* 同 .tool-use-card：内部嵌套 inline-tool 长路径不能撑爆窄屏父容器。 */
+      min-width: 0;
       box-sizing: border-box;
       border-radius: var(--radius-sm);
       border: 1px solid var(--border-subtle);
@@ -5247,6 +5296,8 @@
       margin: 1px 0;
       width: 100%;
       max-width: var(--chat-card-max-width, 720px);
+      /* 同 .tool-use-card：长路径 / 长查询不能撑爆窄屏父容器。 */
+      min-width: 0;
       box-sizing: border-box;
       border-radius: var(--radius-xs);
       cursor: pointer;
@@ -5266,6 +5317,8 @@
       font-family: var(--font-mono);
       line-height: 1.45;
       border-radius: var(--radius-xs);
+      max-width: 100%;
+      min-width: 0;
       transition: background 0.16s ease, color 0.16s ease;
     }
     .inline-tool:hover .inline-tool-row {
@@ -5338,6 +5391,9 @@
       padding: 10px 12px;
       margin-top: 6px;
       max-height: 320px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
       scrollbar-width: thin;
       scrollbar-color: rgba(125, 91, 57, 0.2) transparent;
@@ -5358,7 +5414,10 @@
       line-height: 1.55;
       color: var(--text-secondary);
       white-space: pre-wrap;
+      overflow-wrap: anywhere;
       word-break: break-all;
+      max-width: 100%;
+      min-width: 0;
       margin: 0;
     }
     .inline-tool-error-inline {
@@ -5441,6 +5500,8 @@
       margin: 4px 0;
       width: 100%;
       max-width: var(--chat-card-max-width, 720px);
+      /* 同 .tool-use-card：长命令 / 长输出不能撑爆窄屏父容器。 */
+      min-width: 0;
       box-sizing: border-box;
       border: 1px solid rgba(15, 12, 9, 0.6);
       border-radius: var(--radius-sm);
@@ -5470,6 +5531,8 @@
       cursor: pointer;
       user-select: none;
       position: relative;
+      max-width: 100%;
+      min-width: 0;
     }
     .term-header:hover {
       background:
@@ -5549,7 +5612,10 @@
       line-height: 1.55;
       margin-bottom: 6px;
       white-space: pre-wrap;
+      overflow-wrap: anywhere;
       word-break: break-all;
+      max-width: 100%;
+      min-width: 0;
     }
     .term-prompt {
       color: #6ee09a;
@@ -5562,6 +5628,9 @@
       padding-top: 8px;
       border-top: 1px dashed rgba(255, 255, 255, 0.06);
       max-height: 360px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
       scrollbar-width: thin;
       scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
@@ -5582,7 +5651,10 @@
       color: #d4c2a3;
       line-height: 1.55;
       white-space: pre-wrap;
+      overflow-wrap: anywhere;
       word-break: break-all;
+      max-width: 100%;
+      min-width: 0;
     }
     .term-exit {
       margin-top: 10px;
@@ -5604,6 +5676,8 @@
       margin: 4px 0;
       width: 100%;
       max-width: var(--chat-card-max-width, 720px);
+      /* 同 .tool-use-card：长路径 / 长 diff 不能撑爆窄屏父容器。 */
+      min-width: 0;
       box-sizing: border-box;
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-sm);
@@ -5625,6 +5699,8 @@
       font-size: 0.8125rem;
       cursor: pointer;
       transition: background 0.18s ease;
+      max-width: 100%;
+      min-width: 0;
     }
     .diff-header:hover {
       background: rgba(197, 101, 61, 0.04);
@@ -5700,11 +5776,15 @@
       display: flex;
       gap: 1px;
       background: rgba(125, 91, 57, 0.08);
+      max-width: 100%;
+      min-width: 0;
     }
     .diff-col {
-      flex: 1;
+      flex: 1 1 0;
       min-width: 0;
+      max-width: 100%;
       background: rgba(255, 253, 248, 0.85);
+      overflow: hidden;
     }
     .diff-col-half {
       flex: 1;
@@ -5730,7 +5810,12 @@
       font-size: 0.75rem;
       line-height: 1.55;
       white-space: pre-wrap;
+      /* 长 token / 长 URL 必须按字符断，否则不可断字符串会撑爆 .diff-col。 */
+      overflow-wrap: anywhere;
       word-break: break-all;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
     }
     .diff-add {
       background: rgba(79, 122, 88, 0.08);
@@ -5820,12 +5905,20 @@
       margin: 0;
       font-size: 0.7rem;
       max-height: 600px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+      word-break: break-all;
     }
     .tool-result-content code {
       font-family: var(--font-mono);
       white-space: pre-wrap;
+      overflow-wrap: anywhere;
       word-break: break-all;
+      max-width: 100%;
     }
 
     /* Markdown Content */
@@ -5901,8 +5994,14 @@
       overflow-wrap: anywhere;
       word-break: break-all;
     }
+    /* 表格容器：先让 table-layout:fixed 强制按 100% 收缩，单元格内
+       overflow-wrap:anywhere 会负责换行；只有在内容真的塞不下（比如
+       超长不可断字符串撑爆 fixed 布局）才退回横向滚动，这样大多数情况
+       下用户看到的是换行而不是横滚条。 */
     .markdown-content .md-table-wrap {
       margin: 12px 0;
+      max-width: 100%;
+      min-width: 0;
       overflow-x: auto;
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
@@ -6358,19 +6457,18 @@
     }
 
     /* ─────────────────────────────────────────────────────────────────────
-       排队消息条（.queue-bar）—— 浮在 .input-composer 上方，靠 .queue-bar-host
-       右对齐到对话框右下角。结构：
-         .queue-bar (折叠条 row)
-           ├ .queue-bar-toggle  (● 排队 N · 预览 ⌃)
-           ├ .queue-bar-divider
-           ├ .queue-bar-promote (⚡ 立即)
-           └ .queue-bar-panel   (展开后下拉的消息列表，默认隐)
-       展开时给 .queue-bar 加 .expanded class，CSS 控制 panel 显形 + chevron 翻转。
+       排队消息条（.queue-bar）—— 浮在 "回复中" 状态条上方，垂直堆叠。
+       交互参考 iOS 通讯录右侧字母选择条：
+         · 默认只展开队首 chip（橙色完整气泡，显示编号 + 文本 + × 删除）
+         · 其他 chip 收成一根小横杠（橙色细线，宽 32px 高 4px）
+         · 鼠标悬到任一横杠 → 该条展开、原本展开的收回横杠
+         · 悬停期间可按住任意位置上下拖拽换序，整条 chip 都是拖拽起手区
+       末尾是独立的 ⚡ 立即按钮：中断当前回复，把队首作为新输入插队发出去。
        ───────────────────────────────────────────────────────────────────── */
     .queue-bar-host {
       display: flex;
       justify-content: flex-end;
-      padding: 0 6px 6px;
+      padding: 4px 8px 0;
       position: relative;
       z-index: 2;
       pointer-events: none; /* host 自身不挡点击，bar 内子节点 auto */
@@ -6380,358 +6478,199 @@
     .queue-bar {
       pointer-events: auto;
       position: relative;
-      display: inline-flex;
-      align-items: stretch;
-      gap: 0;
-      width: 340px;
-      max-width: calc(100% - 4px);
-      height: 38px;
-      padding: 0;
-      border-radius: 999px;
-      background: linear-gradient(180deg, #fffaf2 0%, #f6ead8 100%);
-      box-shadow:
-        0 0 0 1.2px rgba(197, 101, 61, 0.42),
-        inset 0 1px 0 rgba(255, 255, 255, 0.85),
-        var(--shadow-sm);
-      transition: box-shadow var(--transition-fast), transform var(--transition-fast);
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 4px;
+      max-width: min(360px, calc(100vw - 24px));
       animation: queueBarEnter 220ms ease-out both;
     }
-    .queue-bar:hover {
-      transform: translateY(-1px);
-      box-shadow:
-        0 0 0 1.2px rgba(197, 101, 61, 0.55),
-        inset 0 1px 0 rgba(255, 255, 255, 0.9),
-        var(--shadow-md);
-    }
-    .queue-bar.queue-bar-capacity {
-      box-shadow:
-        0 0 0 1.4px rgba(169, 106, 47, 0.6),
-        inset 0 1px 0 rgba(255, 255, 255, 0.85),
-        var(--shadow-sm);
-    }
-    .queue-bar.queue-bar-inflight {
-      animation: queueBarEnter 220ms ease-out both, queuePulse 1.6s ease-in-out 220ms infinite;
-    }
     @keyframes queueBarEnter {
-      from { opacity: 0; transform: translateY(4px) scale(0.98); }
+      from { opacity: 0; transform: translateY(4px) scale(0.96); }
       to   { opacity: 1; transform: translateY(0)   scale(1); }
     }
 
-    .queue-bar-toggle {
-      flex: 1 1 auto;
-      min-width: 0;
-      display: inline-flex;
-      align-items: center;
-      gap: 7px;
-      padding: 0 10px 0 14px;
-      border: none;
-      background: transparent;
-      cursor: pointer;
-      font: inherit;
-      color: var(--text-primary);
-      border-radius: 999px 0 0 999px;
-      text-align: left;
-    }
-    .queue-bar-toggle:focus-visible {
-      outline: 2px solid var(--border-focus);
-      outline-offset: -2px;
-    }
-    .queue-bar-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--accent);
-      flex-shrink: 0;
-      box-shadow: 0 0 0 2px rgba(197, 101, 61, 0.18);
-    }
-    .queue-bar-dot.queue-bar-dot-pulse {
-      animation: queueDotPulse 1.0s ease-in-out infinite;
-    }
-    .queue-bar-count {
-      font-size: 0.75rem;
-      font-weight: 600;
-      color: var(--accent);
-      letter-spacing: 0.02em;
-      flex-shrink: 0;
-      line-height: 1;
-    }
-    .queue-bar-sep {
-      color: var(--text-muted);
-      opacity: 0.55;
-      font-size: 0.7rem;
-      flex-shrink: 0;
-    }
-    .queue-bar-preview {
-      font-size: 0.75rem;
-      color: var(--text-secondary);
-      flex: 1 1 auto;
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      line-height: 1;
-    }
-    .queue-bar-chevron {
-      color: var(--text-tertiary);
-      flex-shrink: 0;
-      transition: transform 180ms ease-out;
-    }
-    .queue-bar.expanded .queue-bar-chevron {
-      transform: rotate(180deg);
-      color: var(--accent);
-    }
-
-    .queue-bar-divider {
-      width: 1px;
-      background: rgba(197, 101, 61, 0.28);
-      margin: 7px 0;
-      flex-shrink: 0;
-    }
-
-    .queue-bar-promote {
-      flex-shrink: 0;
-      display: inline-flex;
-      align-items: center;
-      gap: 5px;
-      padding: 0 14px 0 12px;
-      border: none;
-      cursor: pointer;
-      font: inherit;
-      font-size: 0.75rem;
-      font-weight: 600;
-      color: #fff;
-      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-active) 100%);
-      border-radius: 0 999px 999px 0;
-      letter-spacing: 0.04em;
-      transition: filter var(--transition-fast), transform var(--transition-fast);
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
-    }
-    .queue-bar-promote:hover { filter: brightness(1.06); }
-    .queue-bar-promote:active { transform: scale(0.97); }
-    .queue-bar-promote:focus-visible {
-      outline: 2px solid var(--border-focus);
-      outline-offset: 2px;
-    }
-    .queue-bar-promote svg { flex-shrink: 0; }
-    .queue-bar-promote-label { line-height: 1; }
-
-    /* 展开面板：默认折叠（不可见 + 不占空间），加 .expanded 时滑出 */
-    .queue-bar-panel {
-      position: absolute;
-      right: 0;
-      bottom: calc(100% + 8px);
-      width: min(380px, calc(100vw - 24px));
-      max-height: 280px;
-      display: flex;
-      flex-direction: column;
-      background: var(--bg-elevated);
-      border-radius: 14px;
-      box-shadow:
-        0 0 0 1px var(--border-default),
-        var(--shadow-lg);
-      overflow: hidden;
-      opacity: 0;
-      transform: scale(0.96) translateY(4px);
-      transform-origin: bottom right;
-      pointer-events: none;
-      transition: opacity 180ms ease-out, transform 180ms ease-out;
-    }
-    .queue-bar.expanded .queue-bar-panel {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-      pointer-events: auto;
-    }
-
-    .queue-bar-panel-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 9px 12px;
-      border-bottom: 1px solid var(--border-subtle);
-      background: linear-gradient(180deg, rgba(246, 234, 216, 0.55) 0%, transparent 100%);
-    }
-    .queue-bar-panel-title {
-      font-size: 0.78rem;
-      font-weight: 600;
-      color: var(--text-primary);
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-    .queue-bar-clear,
-    .queue-bar-collapse {
-      display: inline-flex;
-      align-items: center;
-      gap: 3px;
-      padding: 3px 9px;
-      border: 1px solid transparent;
-      background: transparent;
-      cursor: pointer;
-      font: inherit;
-      font-size: 0.7rem;
-      color: var(--text-tertiary);
-      border-radius: 8px;
-      transition: all var(--transition-fast);
-      line-height: 1;
-    }
-    .queue-bar-clear:hover:not([disabled]) {
-      color: var(--danger);
-      background: var(--danger-muted);
-      border-color: rgba(178, 79, 69, 0.25);
-    }
-    .queue-bar-clear[disabled] {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-    .queue-bar-collapse:hover {
-      color: var(--accent);
-      background: var(--accent-muted);
-    }
-    .queue-bar-collapse svg { flex-shrink: 0; }
-
     .queue-bar-list {
       list-style: none;
       margin: 0;
-      padding: 6px;
+      padding: 0;
       display: flex;
       flex-direction: column;
-      gap: 6px;
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      flex: 1 1 auto;
-      min-height: 0;
+      align-items: flex-end;
+      gap: 3px;
+      width: 100%;
     }
 
+    /* 折叠态 chip：一根小横杠（橙色细线，cursor 提示"可指"） */
     .queue-bar-item {
       display: flex;
-      align-items: flex-start;
-      gap: 6px;
-      padding: 8px 8px 8px 4px;
-      background: var(--bg-surface);
-      border: 1px solid var(--border-subtle);
-      border-radius: 10px;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 0;
+      height: 5px;
+      width: 32px;
+      padding: 0;
+      border: none;
+      border-radius: 999px;
+      background: linear-gradient(180deg, var(--accent) 0%, #a8522f 100%);
+      box-shadow: 0 1px 2px rgba(197, 101, 61, 0.25);
+      color: #fff;
+      cursor: pointer;
+      overflow: hidden;
       position: relative;
-      transition: transform 140ms ease-out, box-shadow var(--transition-fast),
-                  background var(--transition-fast), border-color var(--transition-fast);
+      transition: width 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
+                  height 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
+                  padding 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
+                  gap 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
+                  box-shadow var(--transition-fast),
+                  transform 140ms ease-out;
       will-change: transform;
+      touch-action: none; /* 防止触屏滚动抢拖拽手势 */
     }
     .queue-bar-item:hover {
-      background: rgba(255, 251, 245, 0.92);
-      border-color: var(--border-default);
+      box-shadow: 0 2px 6px rgba(197, 101, 61, 0.42);
+    }
+
+    /* 展开态：完整气泡（橙色填充 + 编号 + 文本 + × 删除） */
+    .queue-bar-item.expanded,
+    .queue-bar-item.dragging {
+      width: auto;
+      max-width: 100%;
+      height: 24px;
+      padding: 0 4px 0 5px;
+      gap: 5px;
+      box-shadow: 0 2px 6px rgba(197, 101, 61, 0.34);
+      cursor: grab;
     }
     .queue-bar-item.dragging {
       z-index: 5;
-      box-shadow: var(--shadow-lg), 0 0 0 1.5px var(--accent);
-      background: var(--bg-elevated);
+      box-shadow: 0 6px 16px rgba(197, 101, 61, 0.45), 0 0 0 1.5px rgba(255, 255, 255, 0.4);
       transition: box-shadow var(--transition-fast); /* dragging 期间禁用 transform 过渡 */
       cursor: grabbing;
     }
-    .queue-bar-item-sliding {
-      transition: transform 140ms ease-out;
-    }
+    .queue-bar-item.expanded:active { cursor: grabbing; }
 
-    .queue-bar-item-drag {
-      flex-shrink: 0;
-      width: 18px;
-      height: 28px;
-      border: none;
-      background: transparent;
-      cursor: grab;
-      color: var(--text-muted);
-      padding: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 4px;
-      touch-action: none; /* 不让浏览器抢走拖拽手势用作滚动 */
-      transition: color var(--transition-fast), background var(--transition-fast);
-    }
-    .queue-bar-item-drag:hover { color: var(--accent); background: var(--accent-muted); }
-    .queue-bar-item-drag:active { cursor: grabbing; }
-    .queue-bar-item-drag[disabled] {
-      opacity: 0.35;
-      cursor: default;
-    }
-    .queue-bar-item-drag[disabled]:hover {
-      color: var(--text-muted);
-      background: transparent;
-    }
+    /* 单条排队时不能拖排序，但仍可点击 → 立即发送 */
+    .queue-bar-item-single { cursor: pointer; }
+    .queue-bar-item-single.expanded { cursor: pointer; }
+    .queue-bar-item-single.expanded:active { cursor: pointer; }
 
+    /* sibling 在被拖期间平滑回位 */
+    .queue-bar-item-sliding { transition: transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1); }
+
+    /* chip 内部三件：编号 + 文本 + 删除按钮。默认折叠态全部隐起来。 */
     .queue-bar-item-index {
       flex-shrink: 0;
-      font-family: var(--font-mono);
-      font-size: 0.65rem;
-      font-weight: 600;
-      color: var(--accent);
-      background: var(--accent-muted);
-      padding: 3px 6px;
-      border-radius: 6px;
-      line-height: 1;
-      margin-top: 1px;
-      min-width: 26px;
+      font-size: 0.6rem;
+      font-weight: 700;
+      color: rgba(255, 255, 255, 0.95);
+      background: rgba(255, 255, 255, 0.22);
+      padding: 0 5px;
+      height: 15px;
+      min-width: 15px;
+      border-radius: 999px;
+      line-height: 15px;
       text-align: center;
+      letter-spacing: 0.02em;
+      opacity: 0;
+      transform: scale(0.4);
+      transition: opacity 150ms ease, transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
+      pointer-events: none;
+    }
+    .queue-bar-item.expanded .queue-bar-item-index,
+    .queue-bar-item.dragging .queue-bar-item-index {
+      opacity: 1;
+      transform: scale(1);
     }
 
     .queue-bar-item-text {
       flex: 1 1 auto;
       min-width: 0;
-      border: none;
-      background: transparent;
-      cursor: pointer;
-      font: inherit;
-      font-size: 0.78rem;
-      color: var(--text-primary);
-      text-align: left;
-      padding: 1px 0;
-      line-height: 1.4;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
+      font-size: 0.7rem;
+      color: #fff;
+      line-height: 1;
+      white-space: nowrap;
       overflow: hidden;
-      white-space: pre-wrap;
-      word-break: break-word;
-      transition: color var(--transition-fast);
+      text-overflow: ellipsis;
+      letter-spacing: 0.02em;
+      opacity: 0;
+      transition: opacity 120ms ease 50ms;
+      pointer-events: none;
     }
-    .queue-bar-item.expanded .queue-bar-item-text {
-      display: block;
-      -webkit-line-clamp: unset;
-      max-height: 200px;
-      overflow-y: auto;
+    .queue-bar-item.expanded .queue-bar-item-text,
+    .queue-bar-item.dragging .queue-bar-item-text {
+      opacity: 1;
     }
-    .queue-bar-item-text:hover { color: var(--accent); }
 
     .queue-bar-item-delete {
       flex-shrink: 0;
-      width: 22px;
-      height: 22px;
+      width: 16px;
+      height: 16px;
       border: none;
-      background: transparent;
+      background: rgba(255, 255, 255, 0.16);
+      color: #fff;
       cursor: pointer;
-      color: var(--text-muted);
-      border-radius: 6px;
+      border-radius: 999px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      padding: 0;
       opacity: 0;
-      transition: opacity var(--transition-fast), color var(--transition-fast),
-                  background var(--transition-fast);
+      pointer-events: none;
+      transition: opacity 120ms ease 70ms, background var(--transition-fast);
     }
-    .queue-bar-item:hover .queue-bar-item-delete,
-    .queue-bar-item:focus-within .queue-bar-item-delete {
+    .queue-bar-item.expanded .queue-bar-item-delete,
+    .queue-bar-item.dragging .queue-bar-item-delete {
       opacity: 1;
+      pointer-events: auto;
     }
     .queue-bar-item-delete:hover {
-      color: var(--danger);
-      background: var(--danger-muted);
+      background: rgba(255, 255, 255, 0.34);
+    }
+    .queue-bar-item-delete svg { flex-shrink: 0; }
+
+    /* ⚡ 立即按钮 —— 独立小圆按钮，跟在列表末尾 */
+    .queue-bar-promote {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: none;
+      cursor: pointer;
+      color: #fff;
+      background: linear-gradient(180deg, var(--accent) 0%, #a8522f 100%);
+      border-radius: 999px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 2px 6px rgba(197, 101, 61, 0.30);
+      transition: transform var(--transition-fast), box-shadow var(--transition-fast),
+                  background var(--transition-fast);
+      animation: queuePulse 1.5s ease-in-out infinite;
+    }
+    .queue-bar-promote:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 3px 10px rgba(197, 101, 61, 0.45);
+    }
+    .queue-bar-promote:active { transform: scale(0.94); }
+    .queue-bar-promote:focus-visible {
+      outline: 2px solid var(--border-focus);
+      outline-offset: 2px;
+    }
+    .queue-bar-promote svg { flex-shrink: 0; }
+    .queue-bar-promote-label { display: none; } /* label 留作 aria，视觉不展示 */
+
+    /* 容量满了的视觉提示 —— 整组颜色稍暗 */
+    .queue-bar.queue-bar-capacity .queue-bar-item,
+    .queue-bar.queue-bar-capacity .queue-bar-promote {
+      background: linear-gradient(180deg, #a8522f 0%, #8e4426 100%);
     }
 
-    /* 窄屏：bar 撑满，preview 隐藏，操作按钮始终显形 */
+    /* 窄屏：max-width 适配视口；横杠加宽方便指 */
     @media (max-width: 560px) {
-      .queue-bar-host { padding: 0 4px 6px; }
-      .queue-bar { width: 100%; }
-      .queue-bar-preview { display: none; }
-      .queue-bar-sep { display: none; }
-      .queue-bar-item-delete { opacity: 1; }
-      .queue-bar-panel { width: calc(100vw - 16px); right: -2px; }
+      .queue-bar-host { padding: 4px 6px 0; }
+      .queue-bar { max-width: calc(100vw - 20px); }
+      .queue-bar-item { width: 40px; height: 6px; }
     }
 
     /* Queued message in chat view：用户最容易"觉得排队没生效"是因为旧版徽章太小。
@@ -6774,11 +6713,15 @@
     }
 
     .input-hint {
-      font-size: 0.5625rem;
+      font-size: 0.5rem;          /* 8px — 让位给同一行的按钮，桌面端仍清晰可读 */
+      line-height: 1.2;
       color: var(--text-muted);
       white-space: nowrap;
       user-select: none;
       opacity: 0.7;
+      max-width: 38ch;             /* 防止突然变长的状态文案撑爆右侧区域 */
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     /* Session info bar at bottom of input composer */
@@ -7678,40 +7621,8 @@
     .btn-pill-label {
       display: inline;
     }
-    .btn-pill-interrupt {
-      background: linear-gradient(180deg, rgba(197, 101, 61, 0.18) 0%, rgba(197, 101, 61, 0.10) 100%);
-      color: var(--accent);
-      margin-right: 4px;
-      box-shadow: 0 0 0 1px rgba(197, 101, 61, 0.30) inset;
-      animation: interruptPulse 1.8s ease-in-out infinite;
-    }
-    .btn-pill-interrupt:hover {
-      background: linear-gradient(180deg, var(--accent) 0%, #a8522f 100%);
-      color: #fff;
-      box-shadow: 0 3px 10px rgba(197, 101, 61, 0.35);
-      transform: translateY(-1px);
-      animation: none;
-    }
-    .btn-pill-interrupt:active {
-      transform: translateY(0) scale(0.97);
-    }
-    .btn-pill-interrupt.hidden {
-      display: none;
-    }
-    @keyframes interruptPulse {
-      0%, 100% { box-shadow: 0 0 0 1px rgba(197, 101, 61, 0.30) inset, 0 0 0 0 rgba(197, 101, 61, 0.0); }
-      50%      { box-shadow: 0 0 0 1px rgba(197, 101, 61, 0.45) inset, 0 0 0 4px rgba(197, 101, 61, 0.12); }
-    }
-    /* 屏宽 < 480 时把"立即"文字藏掉，只剩 » 图标，避免和 send 一起把行挤爆。
-       hover/focus 期间临时回显，让长按移动端用户也能确认按钮含义。 */
-    @media (max-width: 480px) {
-      .btn-pill-interrupt {
-        padding: 0 8px;
-      }
-      .btn-pill-interrupt .btn-pill-label {
-        display: none;
-      }
-    }
+    /* .btn-pill-interrupt 与 @keyframes interruptPulse 已下线：
+       默认行为永远是"排队（气泡）"，想插队请点输入框上方那条气泡。 */
 
     /* send 按钮在「排队模式」下退到次要色，让相邻的"立即发送"成为视觉重点。
        不动尺寸 / 圆形，避免 layout shift。 */
@@ -9103,9 +9014,8 @@
       line-height: 1.5;
     }
 
-    /* Sidebar header icon buttons — pin / more / close — uniform 32×32 ghost */
+    /* Sidebar header icon buttons — collapse / more / close — uniform 32×32 ghost */
     .sidebar-header-actions .btn-ghost.btn-sm,
-    .sidebar-pin-toggle,
     .drawer-close-btn {
       width: 32px;
       height: 32px;
@@ -9124,16 +9034,10 @@
         color 0.16s ease,
         transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
     }
-    .sidebar-header-actions .btn-ghost.btn-sm:hover,
-    .sidebar-pin-toggle:hover {
+    .sidebar-header-actions .btn-ghost.btn-sm:hover {
       background: rgba(125, 91, 57, 0.08);
       color: var(--text-primary);
     }
-    .sidebar-pin-toggle.pinned {
-      background: rgba(197, 101, 61, 0.12);
-      color: var(--accent);
-      transform: rotate(45deg);
-    }
 
     /* Drawer close — same pattern as modal-close (rotate + danger tint) */
     .drawer-close-btn {
@@ -9864,9 +9768,6 @@
 
     /* 平板适配 */
     @media (max-width: 768px) {
-      /* 手机隐藏「固定侧栏」按钮：手机上完整 300px 常驻太占地，
-         只保留「收起为窄条」按钮，让用户能切到 56px 窄条形态。 */
-      .sidebar-pin-toggle { display: none; }
       /* drawer 模式（pinned 但非窄条）下若未打开，则隐藏到屏幕左侧。
          窄条模式（pinned + collapsed）由 .sidebar.pinned.collapsed 的 width:56px
          规则常驻显示，不进入这条隐藏分支。 */
@@ -10224,8 +10125,12 @@
         padding: 0 14px 0 4px;
         border-radius: 5px;
       }
+      /* 窄屏（手机）保留提示，但用更小字号 + 更紧的宽度上限，避免把发送按钮挤出行外。
+         状态切换（"思考中…" / "已加入排队…"）能截断成省略号也比整条消失友好。 */
       .input-hint {
-        display: none;
+        font-size: 0.45rem;
+        max-width: 18ch;
+        opacity: 0.6;
       }
 
       /* 移动端内联快捷键 - 折叠为展开按钮，展开到独立第二行 */
@@ -10353,7 +10258,11 @@
       .chat-container {
         min-height: 0;
         flex: 1 1 auto;
-        overflow: auto;
+        /* 注意：这里必须 hidden，不能 auto——内部的 .inline-terminal /
+           .tool-use-card 默认 max-width: 720px，如果 chat-container 允许
+           横向滚动，这些卡片会把整个容器推宽，结果窄屏看到右边内容被屏幕
+           边缘截掉。垂直滚动由内层 .chat-messages (overflow-y: auto) 负责。 */
+        overflow: hidden;
         display: none;
         flex-direction: column;
       }
@@ -10656,6 +10565,43 @@
       .markdown-content pre,
       .markdown-content .code-block pre,
       .subagent-reply pre { padding: 10px; }
+      /* diff 卡片：窄屏下两列 side-by-side 每列只剩 ~160px，旧/新被挤成
+         单字一行的"窄条"几乎不可读。改成垂直堆叠（旧在上，新在下），
+         单列占满屏宽，长行靠 word-break 自然换行，杜绝横向溢出。 */
+      .diff-columns {
+        flex-direction: column;
+      }
+      .diff-col,
+      .diff-col-half,
+      .diff-col-full {
+        flex: 1 1 auto;
+        width: 100%;
+        max-width: 100%;
+      }
+      /* 终端命令头部也放开 wrap，长命令在 preview 里仍 ellipsis，但 dot/toggle
+         之类不会把卡片撑宽。 */
+      .term-header {
+        flex-wrap: wrap;
+        row-gap: 4px;
+      }
+      .diff-header {
+        flex-wrap: wrap;
+        row-gap: 4px;
+      }
+      .diff-path {
+        flex-basis: 100%;
+        order: 99;
+      }
+      /* inline-tool meta（搜索路径等）窄屏给整行，不再贴右挤标题。 */
+      .inline-tool-row {
+        flex-wrap: wrap;
+        row-gap: 2px;
+      }
+      .inline-tool-meta {
+        max-width: 100%;
+        flex-basis: 100%;
+        padding-left: 22px;
+      }
     }
 
     /* Blank chat mobile optimization */
@@ -15753,14 +15699,6 @@
     /* 附件 pill 缩略图 svg */
     .attachment-pill .att-icon > svg { display: block; }
 
-    /* 排队面板标题 (排队中) —— 现在 icon + text 用 inline-flex 排 */
-    .queue-bar-panel-title {
-      display: inline-flex;
-      align-items: center;
-      gap: 5px;
-    }
-    .queue-bar-panel-title-icon { flex-shrink: 0; }
-
     /* 紧凑目录选择器（新建会话时显示的小条）的图标 + 折叠箭头 */
     .folder-picker-compact-icon {
       display: inline-flex;