@co0ontty/wand 1.30.3 → 1.31.1

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

@@ -3842,14 +3842,18 @@
     }
 
     /* ===== 聊天消息列表 ===== */
+    /* overflow-x: hidden 是兜底——任何子级（pre、table、tool-card）的
+       横向溢出都不应该冒到聊天容器，由它们各自的内部滚动负责。 */
     .chat-messages {
       flex: 1;
       overflow-y: auto;
+      overflow-x: hidden;
       display: flex;
       flex-direction: column-reverse;
       gap: 16px;
       padding: 20px 4px 12px;
       min-height: 0;
+      min-width: 0;
       scrollbar-gutter: stable;
     }
 
@@ -3906,12 +3910,17 @@
     }
 
     /* ===== 聊天消息基础样式 ===== */
+    /* 消息整体宽度跟随屏幕（容器）宽度——长文本自然换行；
+       内部卡片（tool-use-card / inline-tool / terminal-tool / diff-tool / tool-group）
+       通过 --chat-card-max-width 单独约束，避免在宽屏下被拉成横向大条。 */
     .chat-message {
       display: flex;
       flex-direction: column;
-      max-width: 85%;
+      max-width: 100%;
+      min-width: 0;
       margin: 4px 0;
       transition: opacity 0.2s ease, transform 0.2s var(--ease-out-expo);
+      --chat-card-max-width: 720px;
     }
 
     .chat-message:hover {
@@ -3936,12 +3945,13 @@
 
     .chat-message.assistant {
       align-self: flex-start;
-      max-width: 95%;
+      max-width: 100%;
+      width: 100%;
     }
 
     .chat-message.system-info {
       align-self: center;
-      max-width: 95%;
+      max-width: 100%;
       width: 100%;
       margin: 10px 0;
       animation: messageFloat 3s ease-in-out infinite;
@@ -4075,13 +4085,16 @@
       font-family: var(--font-mono);
       font-size: 0.8125rem;
       max-width: 100%;
-      overflow-wrap: break-word;
+      min-width: 0;
+      overflow-wrap: anywhere;
       word-break: break-word;
       box-shadow: 0 4px 16px rgba(197, 101, 61, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
     }
 
+    /* 用户消息默认更紧凑（贴右气泡），上限放宽到 100% 让长 prompt 不再水平
+       挤压；实际宽度由气泡内容 + word-break 决定。 */
     .chat-message.user {
-      max-width: 85%;
+      max-width: 100%;
     }
 
     /* 助手消息气泡 */
@@ -4090,8 +4103,11 @@
       color: var(--text-primary);
       padding: 14px 18px;
       max-width: 100%;
+      min-width: 0;
       white-space: pre-wrap;
       word-wrap: break-word;
+      overflow-wrap: anywhere;
+      word-break: break-word;
       border: 1px solid var(--border-subtle);
       box-shadow: var(--shadow-sm);
     }
@@ -4107,9 +4123,11 @@
       flex-direction: column;
       gap: 2px;
       max-width: 100%;
+      min-width: 0;
       font-size: 0.875rem;
       line-height: var(--line-height-relaxed);
       word-wrap: break-word;
+      overflow-wrap: anywhere;
       color: var(--text-primary);
     }
 
@@ -4129,7 +4147,7 @@
       display: flex;
       flex-direction: column;
       gap: 6px;
-      max-width: 95%;
+      max-width: 100%;
     }
     /* user turn 默认 align-self: flex-end（右对齐）；多段渲染时强制
        容器内左对齐，否则 subagent 段会被推到右边，border-left 色条断裂。 */
@@ -4186,6 +4204,25 @@
       font-style: italic;
     }
 
+    /* subagent 身份小 tag（"勤劳初二 让 侦探猫 [subagent] 帮忙"），让用户一眼知道
+       这是子代理在说话，不是同一个 AI 突然换了个名字。色调跟 --agent-color 走。 */
+    .chat-handoff-tag {
+      display: inline-block;
+      margin: 0 6px;
+      padding: 1px 6px;
+      font-size: 0.62rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--agent-color, var(--accent));
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 14%, transparent);
+      border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 32%, transparent);
+      border-radius: 4px;
+      vertical-align: 1px;
+      line-height: 1.4;
+      white-space: nowrap;
+    }
+
     /* subagent 回复气泡（群聊角色完成任务后的发言） */
     .subagent-reply {
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 6%, var(--bg-surface));
@@ -4197,6 +4234,10 @@
       font-size: 0.875rem;
       color: var(--text-primary);
       word-break: break-word;
+      overflow-wrap: anywhere;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
     }
 
     .subagent-reply > :first-child { margin-top: 0; }
@@ -4232,8 +4273,99 @@
       background: rgba(0, 0, 0, 0.04);
       padding: 10px 12px;
       border-radius: 6px;
-      overflow-x: auto;
+      overflow-x: hidden;
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-wrap: anywhere;
       margin: 8px 0;
+      max-width: 100%;
+      min-width: 0;
+    }
+
+    /* ===== subagent 回复三态折叠 =====
+       preview（默认）→ 限高 ~5 行 + 渐隐 mask + 内部可滚
+       expanded       → 拉到一个比较大的上限，内部可滚
+       collapsed      → 完全收起，只剩底部一条工具栏，按钮还能再点回来 */
+    .subagent-reply.collapsible {
+      position: relative;
+      padding-right: 14px;
+      padding-bottom: 28px;
+    }
+
+    .subagent-reply-scroll {
+      overflow: hidden;
+      transition: max-height 0.32s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+      min-width: 0;
+      max-width: 100%;
+    }
+    .subagent-reply-scroll > :first-child { margin-top: 0; }
+    .subagent-reply-scroll > :last-child { margin-bottom: 0; }
+
+    .subagent-reply.collapsible[data-collapse-mode="preview"] .subagent-reply-scroll {
+      max-height: 7.5em; /* ~5 行 */
+      overflow-y: auto;
+      -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
+              mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
+    }
+
+    .subagent-reply.collapsible[data-collapse-mode="expanded"] .subagent-reply-scroll {
+      max-height: 360px;
+      overflow-y: auto;
+    }
+
+    .subagent-reply.collapsible[data-collapse-mode="collapsed"] {
+      padding-top: 6px;
+      padding-bottom: 26px;
+    }
+    .subagent-reply.collapsible[data-collapse-mode="collapsed"] .subagent-reply-scroll {
+      max-height: 0;
+      overflow: hidden;
+      margin: 0;
+    }
+
+    /* 三态循环按钮：固定在气泡右下角，三种模式下都可见 */
+    .subagent-reply-cycle {
+      position: absolute;
+      right: 8px;
+      bottom: 6px;
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      padding: 2px 8px;
+      font-size: 0.7rem;
+      font-weight: 500;
+      line-height: 1.4;
+      color: var(--agent-color, var(--accent));
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 8%, var(--bg-surface, #fff));
+      border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 28%, transparent);
+      border-radius: 999px;
+      cursor: pointer;
+      user-select: none;
+      transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
+    }
+    .subagent-reply-cycle:hover {
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 16%, var(--bg-surface, #fff));
+      border-color: color-mix(in srgb, var(--agent-color, var(--accent)) 45%, transparent);
+    }
+    .subagent-reply-cycle:active {
+      transform: translateY(1px);
+    }
+    .subagent-reply-cycle-icon {
+      font-size: 0.7rem;
+      line-height: 1;
+    }
+
+    /* 内部滚动条做小一点，别抢戏 */
+    .subagent-reply-scroll::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    .subagent-reply-scroll::-webkit-scrollbar-thumb {
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 35%, transparent);
+      border-radius: 3px;
+    }
+    .subagent-reply-scroll::-webkit-scrollbar-track {
+      background: transparent;
     }
 
     /* ===== 消息使用量信息 ===== */
@@ -4345,7 +4477,7 @@
     /* Thinking Card (Deep Thought) */
     .chat-message.thinking {
       align-self: flex-start;
-      max-width: 85%;
+      max-width: 100%;
       margin: 4px 0;
     }
 
@@ -4384,7 +4516,7 @@
     /* Prompt Suggestion Card (Pulsing) */
     .chat-message.prompt {
       align-self: center;
-      max-width: 85%;
+      max-width: 100%;
       margin: 4px 0;
     }
 
@@ -4467,6 +4599,7 @@
       border-radius: var(--radius-sm);
       overflow: hidden;
       width: 100%;
+      max-width: var(--chat-card-max-width, 720px);
       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);
@@ -4874,6 +5007,9 @@
       align-items: baseline;
       gap: 5px;
       margin: 2px 0;
+      width: 100%;
+      max-width: var(--chat-card-max-width, 720px);
+      box-sizing: border-box;
       padding: 3px 8px;
       border-radius: 6px;
       background: rgba(138, 108, 178, 0.04);
@@ -4981,6 +5117,9 @@
        ────────────────────────────────────────────────────────────── */
     .tool-group {
       margin: 4px 0;
+      width: 100%;
+      max-width: var(--chat-card-max-width, 720px);
+      box-sizing: border-box;
       border-radius: var(--radius-sm);
       border: 1px solid var(--border-subtle);
       background: linear-gradient(180deg, rgba(255, 251, 245, 0.85) 0%, rgba(255, 248, 238, 0.7) 100%);
@@ -5106,10 +5245,17 @@
       display: flex;
       flex-direction: column;
       margin: 1px 0;
+      width: 100%;
+      max-width: var(--chat-card-max-width, 720px);
+      box-sizing: border-box;
       border-radius: var(--radius-xs);
       cursor: pointer;
       transition: background 0.16s ease;
     }
+    /* 嵌套在 tool-group-body 里的 inline-tool 撑满父容器即可（父已经限宽） */
+    .tool-group-body > .inline-tool {
+      max-width: 100%;
+    }
     .inline-tool-row {
       display: flex;
       align-items: center;
@@ -5293,6 +5439,9 @@
        ────────────────────────────────────────────────────────────── */
     .inline-terminal {
       margin: 4px 0;
+      width: 100%;
+      max-width: var(--chat-card-max-width, 720px);
+      box-sizing: border-box;
       border: 1px solid rgba(15, 12, 9, 0.6);
       border-radius: var(--radius-sm);
       background: #1f1b17;
@@ -5453,6 +5602,9 @@
        ────────────────────────────────────────────────────────────── */
     .inline-diff {
       margin: 4px 0;
+      width: 100%;
+      max-width: var(--chat-card-max-width, 720px);
+      box-sizing: border-box;
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-sm);
       overflow: hidden;
@@ -5677,15 +5829,39 @@
     }
 
     /* Markdown Content */
-    .markdown-content { color: inherit; white-space: normal; overflow-x: hidden; }
-    .markdown-content .code-block pre { overflow-x: auto; }
-    .markdown-content p { margin: 0 0 8px 0; }
+    /* min-width:0 让该 flex 子项可以在窄屏下收缩到比内容更窄；
+       overflow-wrap: anywhere + word-break: break-word 兜底超长不可断词（长 URL / 长 ID / 长 token）。 */
+    .markdown-content {
+      color: inherit;
+      white-space: normal;
+      overflow-x: hidden;
+      max-width: 100%;
+      min-width: 0;
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
+    /* 代码块：长行强制 wrap，不出现横向滚动条。代码块在窄屏下也保持在
+       可视范围内，用户不需要拖横滚条才能看到右侧内容。 */
+    .markdown-content .code-block pre {
+      overflow-x: hidden;
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-wrap: anywhere;
+      max-width: 100%;
+      min-width: 0;
+    }
+    .markdown-content p { margin: 0 0 8px 0; overflow-wrap: anywhere; word-break: break-word; }
     .markdown-content p:last-child { margin-bottom: 0; }
     .markdown-content strong { font-weight: 600; }
     .markdown-content em { font-style: italic; }
     .markdown-content ul, .markdown-content ol { margin: 8px 0; padding-left: 20px; }
-    .markdown-content li { margin: 4px 0; }
-    .markdown-content h1, .markdown-content h2, .markdown-content h3 { margin: 16px 0 8px 0; font-weight: 600; }
+    .markdown-content li { margin: 4px 0; overflow-wrap: anywhere; word-break: break-word; }
+    .markdown-content h1, .markdown-content h2, .markdown-content h3 {
+      margin: 16px 0 8px 0;
+      font-weight: 600;
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
     .markdown-content h1 { font-size: 1.25rem; }
     .markdown-content h2 { font-size: 1.1rem; }
     .markdown-content h3 { font-size: 1rem; }
@@ -5695,6 +5871,16 @@
       border-left: 3px solid var(--accent);
       background: rgba(197, 101, 61, 0.06);
       border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
+    .markdown-content a {
+      overflow-wrap: anywhere;
+      word-break: break-all;
+    }
+    .markdown-content img {
+      max-width: 100%;
+      height: auto;
     }
     .markdown-content code:not(.code-block):not(.code-inline) {
       font-family: var(--font-mono);
@@ -5702,6 +5888,8 @@
       background: rgba(150, 118, 85, 0.12);
       padding: 2px 5px;
       border-radius: 4px;
+      overflow-wrap: anywhere;
+      word-break: break-all;
     }
 
     .markdown-content code.code-inline {
@@ -5710,6 +5898,8 @@
       background: rgba(150, 118, 85, 0.12);
       padding: 2px 5px;
       border-radius: 4px;
+      overflow-wrap: anywhere;
+      word-break: break-all;
     }
     .markdown-content .md-table-wrap {
       margin: 12px 0;
@@ -5721,6 +5911,7 @@
     .markdown-content .md-table {
       border-collapse: collapse;
       width: 100%;
+      table-layout: fixed;
       font-size: 0.8125rem;
       white-space: normal;
     }
@@ -5730,6 +5921,8 @@
       padding: 6px 10px;
       text-align: left;
       vertical-align: top;
+      overflow-wrap: anywhere;
+      word-break: break-word;
     }
     .markdown-content .md-table th {
       background: rgba(150, 118, 85, 0.1);
@@ -5790,7 +5983,12 @@
     .markdown-content pre {
       margin: 0;
       padding: 12px;
-      overflow-x: auto;
+      overflow-x: hidden;
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-wrap: anywhere;
+      max-width: 100%;
+      min-width: 0;
     }
     .markdown-content pre code {
       font-family: var(--font-mono);
@@ -5799,6 +5997,8 @@
       color: #f5eadc;
       background: transparent;
       padding: 0;
+      max-width: 100%;
+      display: block;
     }
 
     /* Syntax Highlighting */
@@ -5842,15 +6042,110 @@
       align-items: center;
       justify-content: space-between;
       padding: 2px 4px 3px 6px;
-      gap: 4px;
+      gap: 3px;
     }
     .input-composer-left {
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: 3px;
       flex-wrap: nowrap;
       flex-shrink: 0;
+      min-width: 0;
+    }
+    /* 会话设置三件套 (mode / model / thinking) 的容器 —— 用极轻的内描边视觉地
+       把三颗"新会话/会话级配置 pill"框成一个 segmented control，与右侧
+       开关型 chip (自动批准 / 终端交互) 在认知上分层。 */
+    .composer-pill-group {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      padding: 1px;
+      border-radius: 11px;
+      background: rgba(197, 101, 61, 0.05);
+      box-shadow: inset 0 0 0 1px rgba(197, 101, 61, 0.08);
+      min-width: 0;
+    }
+    .composer-pill-group .composer-pill {
+      border-color: transparent;
+      background: transparent;
+    }
+    .composer-pill-group .composer-pill:hover {
+      border-color: var(--accent);
+      background-color: rgba(255, 255, 255, 0.75);
+    }
+    .composer-pill-group .composer-pill:focus,
+    .composer-pill-group .composer-pill:focus-visible,
+    .composer-pill-group .composer-pill:focus-within {
+      border-color: var(--accent);
+      background-color: rgba(255, 255, 255, 0.9);
+    }
+
+    /* 三件套（Mode / Model / Thinking）扁平文字版：
+       去掉边框 / 背景 / chevron，只留纯文字 + · 分隔。点击文字区域弹出原生
+       <select>（桌面端下拉、移动端滚轮选择），由透明的 .composer-text-hidden-select
+       叠层承载交互。显示文本统一用 raw id（default / claude-sonnet-4-5 / standard…）。 */
+    .composer-text-group {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      min-width: 0;
+      flex-wrap: nowrap;
+    }
+    .composer-text-pill {
+      position: relative;
+      font-family: var(--font-sans);
+      font-size: 0.7rem;
+      font-weight: 500;
+      line-height: 1;
+      padding: 2px 2px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      transition: color var(--transition-fast);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+      box-sizing: border-box;
+      user-select: none;
+      max-width: 110px;
+      letter-spacing: 0.01em;
+    }
+    .composer-text-pill:hover,
+    .composer-text-pill:focus-within {
+      color: var(--accent);
+    }
+    .composer-text-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
     }
+    .composer-text-hidden-select {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: transparent;
+      font: inherit;
+      opacity: 0;
+      cursor: pointer;
+      appearance: none;
+      -webkit-appearance: none;
+    }
+    .composer-text-hidden-select:focus { outline: none; }
+    .composer-text-sep {
+      color: var(--text-tertiary, #b5a89a);
+      font-size: 0.7rem;
+      line-height: 1;
+      user-select: none;
+      pointer-events: none;
+      opacity: 0.65;
+    }
+    .chat-model-text-pill { max-width: 110px; }
+    .chat-thinking-text-pill { max-width: 90px; }
 
     /* Permission actions inline in composer bar */
     .permission-actions {
@@ -5913,28 +6208,16 @@
       to { opacity: 1; transform: translateX(0); }
     }
 
-    /* Auto-approve indicator */
-    .auto-approve-indicator {
-      display: inline-flex;
-      align-items: center;
-      gap: 2px;
-      font-size: 0.65rem;
-      color: var(--muted);
-      cursor: pointer;
-      padding: 1px 4px;
-      border-radius: 4px;
-      transition: color 0.15s, background 0.15s;
-      user-select: none;
-      white-space: nowrap;
-    }
-    .auto-approve-indicator:hover {
-      background: rgba(255, 255, 255, 0.06);
-    }
+    /* 自动批准 chip —— 套用 .composer-pill .composer-pill-chip 的基础外观，
+       这里只覆盖 active 态的绿色（语义色）。 */
     .auto-approve-indicator.active {
       color: #22c55e;
+      border-color: rgba(34, 197, 94, 0.5);
+      background: rgba(34, 197, 94, 0.12);
     }
     .auto-approve-indicator.active:hover {
-      background: rgba(34, 197, 94, 0.1);
+      background: rgba(34, 197, 94, 0.2);
+      border-color: #22c55e;
     }
 
     /* Approval stats badge */
@@ -5947,24 +6230,27 @@
       display: none;
     }
     .approval-stats-divider {
-      width: 1px;
+      /* 同行已经全部用 .composer-pill 的统一 gap (3px) 分隔，再加一条 1px 实线分隔
+         反而显得拥挤。仅保留极细的 spacer 让 stats badge 与左侧 chip 不黏连。 */
+      width: 0;
       height: 16px;
-      background: var(--border);
-      margin: 0 4px 0 2px;
+      margin: 0 1px;
     }
     .approval-stats-badge {
       display: inline-flex;
       align-items: center;
       gap: 3px;
-      padding: 1px 7px 1px 5px;
+      min-height: 22px;
+      padding: 1px 8px;
       border-radius: 10px;
       background: rgba(34, 197, 94, 0.1);
       color: #22c55e;
-      font-size: 0.68rem;
+      font-size: 0.625rem;
       font-weight: 600;
       cursor: default;
       transition: background 0.15s;
-      line-height: 1.5;
+      line-height: 1;
+      box-sizing: border-box;
     }
     .approval-stats-badge:hover {
       background: rgba(34, 197, 94, 0.18);
@@ -6028,103 +6314,463 @@
     .approval-stats-row-label {
       flex: 1;
     }
-    .approval-stats-row-count {
-      font-weight: 600;
-      color: var(--text-primary, #eee);
-      font-variant-numeric: tabular-nums;
-      min-width: 20px;
-      text-align: right;
+    .approval-stats-row-count {
+      font-weight: 600;
+      color: var(--text-primary, #eee);
+      font-variant-numeric: tabular-nums;
+      min-width: 20px;
+      text-align: right;
+    }
+    .approval-stats-row-total {
+      border-top: 1px solid var(--border);
+      padding-top: 4px;
+      margin-top: 2px;
+      color: #22c55e;
+    }
+    .approval-stats-row-total .approval-stats-row-count {
+      color: #22c55e;
+    }
+
+    /* 终端交互切换按钮 —— 现在套用 .composer-pill .composer-pill-chip 的统一外观，
+       这里仅保留图标专属的微调（字体大小 / 收紧 padding 让 ⌨ 居中）。 */
+    .composer-interactive-toggle {
+      font-size: 0.75rem;
+      padding: 1px 8px;
+    }
+    .input-composer-right {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      position: relative;
+      flex: 1;
+      justify-content: flex-end;
+    }
+    /* 旧 #queue-counter pill（v1.30.3 那颗藏在 input-hint 旁的小角标）已下线，
+       由 .queue-bar（输入框上方独立浮条）接管。queuePulse / queueDotPulse 关键帧
+       新组件继续复用，保留在下方。 */
+    @keyframes queuePulse {
+      0%, 100% { opacity: 1; }
+      50%      { opacity: 0.78; }
+    }
+    @keyframes queueDotPulse {
+      0%, 100% { transform: scale(1); opacity: 1; }
+      50%      { transform: scale(0.7); opacity: 0.55; }
+    }
+
+    /* ─────────────────────────────────────────────────────────────────────
+       排队消息条（.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-host {
+      display: flex;
+      justify-content: flex-end;
+      padding: 0 6px 6px;
+      position: relative;
+      z-index: 2;
+      pointer-events: none; /* host 自身不挡点击，bar 内子节点 auto */
+    }
+    .queue-bar-host[hidden] { display: none; }
+
+    .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);
+      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); }
+      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;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+
+    .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;
+      position: relative;
+      transition: transform 140ms ease-out, box-shadow var(--transition-fast),
+                  background var(--transition-fast), border-color var(--transition-fast);
+      will-change: transform;
+    }
+    .queue-bar-item:hover {
+      background: rgba(255, 251, 245, 0.92);
+      border-color: var(--border-default);
     }
-    .approval-stats-row-total {
-      border-top: 1px solid var(--border);
-      padding-top: 4px;
-      margin-top: 2px;
-      color: #22c55e;
+    .queue-bar-item.dragging {
+      z-index: 5;
+      box-shadow: var(--shadow-lg), 0 0 0 1.5px var(--accent);
+      background: var(--bg-elevated);
+      transition: box-shadow var(--transition-fast); /* dragging 期间禁用 transform 过渡 */
+      cursor: grabbing;
     }
-    .approval-stats-row-total .approval-stats-row-count {
-      color: #22c55e;
+    .queue-bar-item-sliding {
+      transition: transform 140ms ease-out;
     }
 
-    .composer-interactive-toggle {
+    .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;
-      width: 22px;
-      height: 22px;
-      border: 1px solid var(--border-subtle);
       border-radius: 4px;
-      background: transparent;
+      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);
-      font-size: 0.75rem;
-      cursor: pointer;
-      transition: all var(--transition-fast);
+      background: transparent;
+    }
+
+    .queue-bar-item-index {
       flex-shrink: 0;
-      padding: 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;
+      text-align: center;
     }
-    .composer-interactive-toggle:hover {
-      background: rgba(197, 101, 61, 0.08);
-      color: var(--text-secondary);
-      border-color: var(--accent);
+
+    .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;
+      overflow: hidden;
+      white-space: pre-wrap;
+      word-break: break-word;
+      transition: color var(--transition-fast);
     }
-    .composer-interactive-toggle.active {
-      background: rgba(197, 101, 61, 0.12);
-      color: var(--accent);
-      border-color: var(--accent);
+    .queue-bar-item.expanded .queue-bar-item-text {
+      display: block;
+      -webkit-line-clamp: unset;
+      max-height: 200px;
+      overflow-y: auto;
     }
-    .input-composer-right {
-      display: flex;
+    .queue-bar-item-text:hover { color: var(--accent); }
+
+    .queue-bar-item-delete {
+      flex-shrink: 0;
+      width: 22px;
+      height: 22px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      color: var(--text-muted);
+      border-radius: 6px;
+      display: inline-flex;
       align-items: center;
-      gap: 4px;
-      position: relative;
-      flex: 1;
-      justify-content: flex-end;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity var(--transition-fast), color var(--transition-fast),
+                  background var(--transition-fast);
     }
-    .queue-counter {
-      font-size: 0.625rem;
-      color: var(--accent);
-      background: var(--accent-muted);
-      padding: 1px 6px;
-      border-radius: 8px;
-      white-space: nowrap;
-      font-weight: 600;
-      animation: queuePulse 1.5s ease-in-out infinite;
+    .queue-bar-item:hover .queue-bar-item-delete,
+    .queue-bar-item:focus-within .queue-bar-item-delete {
+      opacity: 1;
     }
-    .queue-counter.hidden { display: none; }
-    @keyframes queuePulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.7; }
+    .queue-bar-item-delete:hover {
+      color: var(--danger);
+      background: var(--danger-muted);
+    }
+
+    /* 窄屏：bar 撑满，preview 隐藏，操作按钮始终显形 */
+    @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; }
     }
 
-    /* Queued message in chat view */
+    /* Queued message in chat view：用户最容易"觉得排队没生效"是因为旧版徽章太小。
+       把气泡本身做出明显的"半成稿"质感（虚线边框 + 错位阴影），徽章放大到正常字号，
+       让排队这件事在视觉上和"已发出"清楚拉开。 */
     .chat-message.user.queued {
-      opacity: 0.7;
+      opacity: 0.92;
     }
     .chat-message.user.queued .chat-message-bubble,
     .chat-message.user.queued .chat-message-content {
-      /* 排队气泡用虚线边框 + 浅浅的阴影，让"未发送"状态有触感 */
-      box-shadow: 0 0 0 1px rgba(197, 101, 61, 0.25) inset;
+      box-shadow: 0 0 0 1.5px rgba(197, 101, 61, 0.55) inset,
+                  0 1px 0 rgba(197, 101, 61, 0.10);
+      background: linear-gradient(180deg, rgba(255, 245, 235, 0.85) 0%, rgba(255, 235, 220, 0.65) 100%);
+      border-radius: 14px;
+      position: relative;
     }
     .queued-badge {
       display: inline-flex;
       align-items: center;
-      gap: 4px;
-      font-size: 0.625rem;
-      color: var(--accent);
-      background: var(--accent-muted);
-      padding: 2px 8px;
+      gap: 5px;
+      font-size: 0.75rem;
+      color: #fff;
+      background: linear-gradient(180deg, var(--accent) 0%, #a8522f 100%);
+      padding: 3px 10px 3px 9px;
       border-radius: 999px;
       font-weight: 600;
       margin-top: 6px;
       letter-spacing: 0.04em;
+      box-shadow: 0 2px 6px rgba(197, 101, 61, 0.30);
       animation: queuePulse 1.5s ease-in-out infinite;
     }
     .queued-badge::before {
       content: '';
-      width: 6px;
-      height: 6px;
+      width: 7px;
+      height: 7px;
       border-radius: 50%;
-      background: var(--accent);
-      animation: queuePulse 1.5s ease-in-out infinite;
+      background: #fff;
+      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
+      animation: queueDotPulse 1.0s ease-in-out infinite;
     }
 
     .input-hint {
@@ -6831,36 +7477,125 @@
     .input-inline-controls {
     }
 
-    /* Chat mode select pill */
-    .chat-mode-select {
+    /* ========================================================================
+       输入框统一 pill 系统 —— 模式 / 模型 / 思考 / 自动批准 / 终端交互
+       全部用同一套尺寸 / 字号 / 边框 / hover / focus 表现，避免视觉混乱。
+       变体：
+         .composer-pill-select  → 原生 <select> 形态（右侧 chevron）
+         .composer-pill-chip    → 按钮 / 切换状态的 chip（支持 .active 亮态）
+       现有 .chat-mode-select / .auto-approve-indicator / .composer-interactive-toggle
+       仍保留作为特定色彩或最大宽度等微调入口。
+       ====================================================================== */
+    .composer-pill {
       font-family: var(--font-sans);
       font-size: 0.625rem;
       font-weight: 500;
-      padding: 1px 16px 1px 6px;
+      line-height: 1;
+      min-height: 22px;
+      padding: 1px 8px;
       border-radius: 10px;
       border: 1px solid var(--border-subtle);
       background: rgba(246, 241, 232, 0.7);
       color: var(--text-secondary);
       cursor: pointer;
       transition: all var(--transition-fast);
-      min-height: 22px;
-      max-width: 90px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      white-space: nowrap;
+      box-sizing: border-box;
+      user-select: none;
+    }
+    .composer-pill:hover {
+      border-color: var(--accent);
+      background-color: rgba(246, 241, 232, 1);
+    }
+    .composer-pill:focus,
+    .composer-pill:focus-visible {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 2px var(--accent-muted);
+      outline: none;
+    }
+    .composer-pill.disabled,
+    .composer-pill[disabled] {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+
+    /* select 变体：保留 chevron 背景图与文本截断 */
+    .composer-pill-select {
+      padding: 1px 16px 1px 6px;
+      max-width: 110px;
       overflow: hidden;
       text-overflow: ellipsis;
-      white-space: nowrap;
       appearance: none;
       -webkit-appearance: none;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%239a8e82' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 4px center;
+      /* 让 native <select> 在 inline-flex 下表现稳定 */
+      display: inline-block;
+      text-align: left;
     }
-    .chat-mode-select:hover {
-      border-color: var(--accent);
-      background-color: rgba(246, 241, 232, 1);
+
+    /* chip 变体：开关型按钮 / span，无 chevron，可亮态。
+       字号与 select pill 对齐 (0.625rem)，避免同行字号微差。 */
+    .composer-pill-chip {
+      padding: 1px 8px;
+      font-size: 0.625rem;
     }
-    .chat-mode-select:focus {
+    .composer-pill-chip.active {
+      background: var(--accent-muted, rgba(197, 101, 61, 0.12));
+      color: var(--accent);
       border-color: var(--accent);
-      box-shadow: 0 0 0 2px var(--accent-muted);
+    }
+    .composer-pill-chip.active:hover {
+      background: rgba(197, 101, 61, 0.18);
+    }
+
+    /* 兼容旧类：保留为 alias，仅用于细节微调（如最大宽度） */
+    .chat-mode-select {
+      /* 旧标识，沿用 .composer-pill / .composer-pill-select 的基础风格 */
+      max-width: 78px;
+    }
+    .chat-model-select {
+      max-width: 96px;
+    }
+    .chat-thinking-select {
+      max-width: 86px;
+    }
+
+    /* 思考深度 trigger —— 与 mode / model 同形 pill：相同 border / chevron / 字号。
+       内部 .chat-thinking-label 显示当前档位，原生 <select> 透明叠层负责交互，
+       移动端能调起系统滚轮选择，桌面端点击则展开原生菜单。 */
+    .chat-thinking-trigger {
+      position: relative;
+      max-width: 86px;
+      padding-left: 6px;
+    }
+    .chat-thinking-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      letter-spacing: 0.01em;
+    }
+    .chat-thinking-hidden-select {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: transparent;
+      font: inherit;
+      opacity: 0;
+      cursor: pointer;
+      appearance: none;
+      -webkit-appearance: none;
+    }
+    .chat-thinking-hidden-select:focus {
       outline: none;
     }
 
@@ -6917,25 +7652,66 @@
     }
 
     /* "立即发送"：结构化会话流式输出时显示，按下会中断当前回复立即处理新输入。
-       视觉上比 send 弱、比 stop 弱，避免被误点；和 send 之间留一点空气。 */
-    .btn-circle-interrupt {
-      background: rgba(160, 110, 60, 0.10);
+       v1.30.3 把它做成 28px 圆形 + dashed 边框，结果用户根本注意不到这颗按钮、
+       误以为"立即发送没效果"。现在升级成 pill（图标 + "立即"文字 + 实色高对比 + 脉动），
+       和 send 按钮形成"加急/默认"的视觉对位。 */
+    .btn-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      height: 28px;
+      padding: 0 10px 0 8px;
+      border-radius: 999px;
+      border: none;
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      flex-shrink: 0;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      white-space: nowrap;
+    }
+    .btn-pill-icon {
+      display: block;
+      flex-shrink: 0;
+    }
+    .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: 2px;
-      border: 1px dashed rgba(197, 101, 61, 0.35);
+      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-circle-interrupt:hover {
-      background: var(--accent);
-      color: white;
-      border-style: solid;
-      transform: scale(1.08);
+    .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-circle-interrupt:active {
-      transform: scale(0.95);
+    .btn-pill-interrupt:active {
+      transform: translateY(0) scale(0.97);
     }
-    .btn-circle-interrupt.hidden {
+    .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;
+      }
+    }
 
     /* send 按钮在「排队模式」下退到次要色，让相邻的"立即发送"成为视觉重点。
        不动尺寸 / 圆形，避免 layout shift。 */
@@ -9088,19 +9864,26 @@
 
     /* 平板适配 */
     @media (max-width: 768px) {
+      /* 手机隐藏「固定侧栏」按钮：手机上完整 300px 常驻太占地，
+         只保留「收起为窄条」按钮，让用户能切到 56px 窄条形态。 */
       .sidebar-pin-toggle { display: none; }
-      .sidebar-collapse-toggle { display: none; }
-      .sidebar.pinned:not(.open) {
+      /* drawer 模式（pinned 但非窄条）下若未打开，则隐藏到屏幕左侧。
+         窄条模式（pinned + collapsed）由 .sidebar.pinned.collapsed 的 width:56px
+         规则常驻显示，不进入这条隐藏分支。 */
+      .sidebar.pinned:not(.collapsed):not(.open) {
         transform: translateX(-100%);
         pointer-events: none;
         opacity: 0;
       }
-      .main-layout.sidebar-pinned {
+      /* 与上方对称：drawer 模式下取消 anchored padding；
+         窄条模式（.sidebar-pinned.sidebar-collapsed）继承全局 56px padding。 */
+      .main-layout.sidebar-pinned:not(.sidebar-collapsed) {
         padding-left: 0;
       }
-      .main-layout.sidebar-pinned .floating-sidebar-toggle {
-        display: inline-flex;
-      }
+      /* drawer 模式（未 anchored）默认就显示 hamburger（继承全局 inline-flex）。
+         窄条模式（.sidebar-pinned.sidebar-collapsed）由全局
+         `.main-layout.sidebar-pinned .floating-sidebar-toggle{display:none}`
+         隐藏 hamburger，窄条自身就是入口。 */
       .app-container {
         --layout-main-file-panel-width: 0px;
       }
@@ -9116,7 +9899,7 @@
       .view-toggle { height: 36px; }
       .view-toggle-btn { padding: 0 12px; font-size: 0.75rem; height: 30px; min-height: 30px; }
       .chat-container { padding: 0 12px 12px; }
-      .chat-message { max-width: 90%; }
+      .chat-message { max-width: 100%; }
       .thinking-card { padding: 10px 14px; }
       .thinking-content { font-size: 0.8125rem; }
       .tool-picker { grid-template-columns: 1fr; }
@@ -9176,9 +9959,34 @@
       .floating-sidebar-toggle .hamburger-icon { width: 13px; height: 9px; }
 
       .sidebar { top: 0; }
-      .sidebar-header { padding: 10px 12px; min-height: 48px; }
-      .sidebar-footer-actions { grid-template-columns: repeat(2, 1fr); }
-      .sidebar-footer-actions .btn { min-height: 40px; }
+      .sidebar-header { padding: 10px 12px; min-height: 48px; gap: 8px; }
+      /* 收紧 actions 内按钮间距，给主区（logo/标题/计数）腾空间 */
+      .sidebar-header-actions { gap: 4px; }
+      /* 5 个底栏按钮在 2 列布局下最后一颗会单独占满第三行，看着很挤。
+         手机端统一切到 4 列、隐藏文字、保留图标，更紧凑也对齐统一。 */
+      .sidebar-footer-actions {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 4px;
+      }
+      .sidebar-footer-actions .btn {
+        min-height: 40px;
+        padding: 6px 4px;
+      }
+      .sidebar-footer-actions .btn span { display: none; }
+      .sidebar-footer-actions .btn svg { width: 18px; height: 18px; }
+
+      /* "更多操作"下拉：默认锚在更多按钮右沿向左展开 150px。手机端：
+         · 加大 min-width 让中文项不会两行；
+         · max-width 限制在可见区，防止极窄手机被裁；
+         · 按钮在侧栏靠右，下拉自然贴侧栏右沿；用 right: 0 原值即可。 */
+      .sidebar-header-overflow {
+        min-width: 180px;
+        max-width: calc(100vw - 24px);
+      }
+      .sidebar-header-overflow .overflow-item {
+        padding: 11px 14px;
+        font-size: 0.875rem;
+      }
 
       /* 移动端终端顶栏 - 紧凑 */
       .terminal-header { padding: 5px 8px; min-height: 32px; }
@@ -9328,11 +10136,27 @@
 
       .input-composer-bar {
         padding: 1px 3px 2px 5px;
-        gap: 3px;
+        gap: 2px;
       }
 
-      .input-composer-left { gap: 3px; }
+      .input-composer-left { gap: 2px; }
       .input-composer-right { gap: 3px; }
+      /* 移动端窄屏：进一步收紧 group 内边距，让 mode/model/thinking 三件套不占额外 padding */
+      .input-composer-left .composer-pill-group {
+        padding: 0;
+        gap: 1px;
+        background: transparent;
+        box-shadow: none;
+      }
+      /* 移动端 chip 字号微缩，与新 desktop chip 0.625rem 对齐基础上再小一点 */
+      .input-composer-left .composer-pill-chip {
+        font-size: 0.6rem;
+        padding: 1px 6px;
+      }
+      /* 移动端三件套 select 最大宽度同步收紧 */
+      .input-composer-left .chat-mode-select { max-width: 64px; }
+      .input-composer-left .chat-model-select { max-width: 78px; }
+      .input-composer-left .chat-thinking-trigger { max-width: 72px; }
 
       /* 移动端会话信息栏 */
       .input-session-info-bar {
@@ -9814,6 +10638,26 @@
       }
     }
 
+    /* ===== 手机竖屏（≤480px）—— 进一步收紧 chat 视图 padding，
+       并允许 tool-use 卡片头部 wrap，避免在极窄宽度下被裁切。 ===== */
+    @media (max-width: 480px) {
+      .chat-container { padding: 0 6px 8px; }
+      .chat-messages { padding-left: 2px; padding-right: 2px; gap: 12px; }
+      .chat-message { --chat-card-max-width: 100%; }
+      .tool-use-header {
+        flex-wrap: wrap;
+        row-gap: 4px;
+        padding: 8px 12px;
+      }
+      .tool-use-file { max-width: 100%; }
+      .tool-use-body { padding: 10px 12px; }
+      .subagent-reply { padding: 9px 12px; }
+      .markdown-content .code-block { margin: 8px 0; }
+      .markdown-content pre,
+      .markdown-content .code-block pre,
+      .subagent-reply pre { padding: 10px; }
+    }
+
     /* Blank chat mobile optimization */
     .session-kind-badge {
       display: inline-flex;
@@ -10116,12 +10960,13 @@
       align-items: center;
       gap: 6px;
     }
+    /* 此处历史遗留的 .chat-mode-select 全局规则会覆盖上面 .composer-pill 的统一字号 / 边框，
+       已上移到 .composer-pill / .composer-pill-select 体系；这里只保留 outline / cursor 的兜底，
+       不再设置 font-size / max-width，避免和 6938 行的统一样式打架。 */
     .chat-mode-select {
-      font-size: 0.6875rem;
       font-family: inherit;
       cursor: pointer;
       outline: none;
-      max-width: 96px;
     }
     .chat-mode-select:focus {
       border-color: var(--accent);