@co0ontty/wand 1.29.3 → 1.30.0

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

@@ -531,7 +531,7 @@
     .sidebar.pinned.collapsed .sidebar-header-main,
     .sidebar.pinned.collapsed .sidebar-header-more,
     .sidebar.pinned.collapsed .sidebar-pin-toggle,
-    .sidebar.pinned.collapsed .sidebar-body {
+    .sidebar.pinned.collapsed .sidebar-footer {
       display: none;
     }
     .sidebar.pinned.collapsed .sidebar-header-actions {
@@ -539,26 +539,136 @@
       width: 100%;
       justify-content: center;
     }
-    .sidebar.pinned.collapsed .sidebar-footer {
-      padding: 10px 6px;
+    .sidebar.pinned.collapsed .sidebar-body {
+      padding: 8px 4px;
+      overflow-y: auto;
+      overflow-x: hidden;
     }
-    .sidebar.pinned.collapsed #drawer-new-session-button {
-      display: none;
+    .sidebar.pinned.collapsed .sidebar-body::-webkit-scrollbar {
+      width: 0;
     }
-    .sidebar.pinned.collapsed .sidebar-footer-actions {
+    .sidebar-collapsed-tiles {
+      display: flex;
       flex-direction: column;
-      gap: 6px;
-      align-items: stretch;
+      gap: 8px;
+      align-items: center;
     }
-    .sidebar.pinned.collapsed .sidebar-footer-actions .btn {
-      width: 100%;
-      min-width: 0;
-      padding: 8px 0;
+    .sidebar-collapsed-tile {
+      width: 36px;
+      height: 36px;
+      border-radius: 11px;
+      border: 0.5px solid rgba(255, 255, 255, 0.32);
+      background: linear-gradient(145deg, #d4785a 0%, #b8573a 50%, #a04a2e 100%);
+      color: #fff;
+      font-size: 14px;
+      font-weight: 700;
+      font-variant-numeric: tabular-nums;
+      letter-spacing: -0.01em;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
       justify-content: center;
+      padding: 0;
+      box-shadow:
+        0 1px 3px rgba(184, 92, 55, 0.28),
+        inset 0 1px 0 rgba(255, 255, 255, 0.28),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
+      transition:
+        filter var(--transition-fast),
+        box-shadow 0.22s ease,
+        transform 0.22s var(--ease-out-expo);
     }
-    .sidebar.pinned.collapsed .sidebar-footer-actions .btn span,
-    .sidebar.pinned.collapsed .sidebar-meta {
-      display: none;
+    .sidebar-collapsed-tile:hover {
+      filter: brightness(1.06);
+      transform: translateY(-1px);
+      box-shadow:
+        0 4px 12px -2px rgba(184, 92, 55, 0.42),
+        inset 0 1px 0 rgba(255, 255, 255, 0.35),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
+    }
+    /* History tile — softer cream tone to distinguish from active sessions */
+    .sidebar-collapsed-tile.history {
+      background: linear-gradient(145deg, #e8d3c0 0%, #d3b69d 50%, #b89478 100%);
+      color: rgba(89, 58, 32, 0.88);
+      box-shadow:
+        0 1px 3px rgba(120, 88, 56, 0.22),
+        inset 0 1px 0 rgba(255, 255, 255, 0.45),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.06);
+    }
+    .sidebar-collapsed-tile.history:hover {
+      box-shadow:
+        0 4px 12px -2px rgba(120, 88, 56, 0.34),
+        inset 0 1px 0 rgba(255, 255, 255, 0.5),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.06);
+    }
+    /* Active — liquid glass crown: outer ring + warm halo + crisp top sheen */
+    .sidebar-collapsed-tile.active {
+      background: linear-gradient(145deg, #d27358 0%, #b35434 50%, #934128 100%);
+      transform: translateY(-1px);
+      box-shadow:
+        /* outer glow halo */
+        0 0 0 1px rgba(255, 255, 255, 0.7),
+        0 0 0 3px rgba(197, 101, 61, 0.32),
+        0 8px 22px -4px rgba(160, 74, 46, 0.55),
+        0 3px 8px -2px rgba(160, 74, 46, 0.32),
+        /* top sheen */
+        inset 0 1px 0 rgba(255, 255, 255, 0.45),
+        inset 1px 0 0 rgba(255, 255, 255, 0.18),
+        /* bottom depth */
+        inset 0 -1px 0 rgba(0, 0, 0, 0.16);
+    }
+    .sidebar-collapsed-tile:active {
+      transform: translateY(0) scale(0.94);
+      transition-duration: 0.08s;
+    }
+    .sidebar-collapsed-empty {
+      color: var(--text-muted, rgba(89, 58, 32, 0.45));
+      text-align: center;
+      font-size: 16px;
+      padding: 12px 0;
+      user-select: none;
+    }
+    /* Hover tooltip bubble for narrow tiles — chat-bubble look */
+    .sidebar-tile-bubble {
+      position: fixed;
+      max-width: 320px;
+      min-width: 80px;
+      padding: 9px 13px;
+      background: linear-gradient(145deg, rgba(255, 251, 245, 0.99) 0%, rgba(252, 244, 233, 0.99) 100%);
+      border: 1px solid var(--border-subtle, rgba(120, 88, 56, 0.18));
+      border-radius: 14px;
+      box-shadow:
+        0 6px 24px -4px rgba(89, 58, 32, 0.22),
+        0 2px 6px rgba(89, 58, 32, 0.08),
+        inset 0 1px 0 rgba(255, 255, 255, 0.65);
+      font-size: 13px;
+      line-height: 1.46;
+      color: rgba(56, 36, 18, 0.92);
+      z-index: 200;
+      pointer-events: none;
+      opacity: 0;
+      transform: translateX(-4px);
+      transition: opacity 0.16s ease, transform 0.18s var(--ease-out-expo, ease);
+      white-space: pre-wrap;
+      word-break: break-word;
+      backdrop-filter: blur(12px) saturate(160%);
+    }
+    .sidebar-tile-bubble.visible {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    .sidebar-tile-bubble::before {
+      content: '';
+      position: absolute;
+      left: -6px;
+      top: var(--bubble-tail-y, 50%);
+      transform: translateY(-50%) rotate(45deg);
+      width: 11px;
+      height: 11px;
+      background: inherit;
+      border-left: 1px solid var(--border-subtle, rgba(120, 88, 56, 0.18));
+      border-bottom: 1px solid var(--border-subtle, rgba(120, 88, 56, 0.18));
+      box-shadow: -2px 2px 5px -2px rgba(89, 58, 32, 0.08);
     }
     .sidebar-collapse-toggle {
       flex-shrink: 0;
@@ -567,8 +677,13 @@
     .sidebar-collapse-toggle.collapsed {
       color: var(--primary);
     }
-    .sidebar:not(.pinned) .sidebar-collapse-toggle {
+    /* 完全关闭侧栏 — 仅在 pinned 展开态可见（drawer 自带 X；窄条态保持极简） */
+    .sidebar .sidebar-header-actions .btn.sidebar-close-fully {
       display: none;
+      flex-shrink: 0;
+    }
+    .sidebar.pinned:not(.collapsed) .sidebar-header-actions .btn.sidebar-close-fully {
+      display: inline-flex;
     }
 
     /* ===== 图钉按钮 ===== */
@@ -744,8 +859,19 @@
       text-overflow: ellipsis;
     }
 
-    .tree-item:hover { background: var(--bg-tertiary); }
-    .tree-item.active { background: var(--accent-muted); color: var(--accent); }
+    .tree-item:hover {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 252, 247, 0.4) 100%);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+    }
+    .tree-item.active {
+      background:
+        linear-gradient(180deg, rgba(255, 252, 247, 0.92) 0%, rgba(255, 244, 232, 0.75) 100%);
+      color: var(--accent);
+      box-shadow:
+        0 0 0 1px rgba(197, 101, 61, 0.22),
+        0 3px 10px -3px rgba(197, 101, 61, 0.25),
+        inset 0 1px 0 rgba(255, 255, 255, 0.85);
+    }
 
     .tree-toggle {
       flex-shrink: 0;
@@ -2850,11 +2976,12 @@
       --term-cursor: #d67b52;
       --term-font-family: "Geist Mono", "SF Mono", monospace;
       --term-font-size: 13px;
-      /* 行高直接给整数像素，避免 13×1.5=19.5 的亚像素行：PC 端 1× DPR 时
-       * 浏览器把 19.5 四舍五入成 19 或 20，相邻行的吸附方向不一致就会
-       * 出现错位。20px 是 wterm 既定的 cell 高度基线，移动端高 DPR 也
-       * 完全不变。 */
-      --term-line-height: 1.54;
+      /* 行高直接锁到 --term-row-height（px 值），杜绝 unitless × fontPx 的
+       * 亚像素重算。否则 fontPx 与 rowPx 不成整数比时，浏览器把行内文字算
+       * 出比 row 容器更高（如 13×1.54=20.02px 装进 20px row），相邻行视觉
+       * 互相覆盖几像素；applyTerminalScale 后的非默认字号下尤其明显。
+       * px 路径让 line-height 与 row 高保持单一真相源。 */
+      --term-line-height: var(--term-row-height);
       --term-row-height: 20px;
       --term-color-0: #1f1b17;
       --term-color-1: #d27766;
@@ -3461,6 +3588,10 @@
       color: var(--accent);
       font-weight: 600;
     }
+    .shortcut-key[data-key="shift_tab"] {
+      color: #6a6bb0;
+      font-weight: 600;
+    }
 
     /* Mobile keyboard overlap compensation */
     @media (max-width: 640px) {
@@ -3972,8 +4103,66 @@
     .chat-message-content > .inline-tool,
     .chat-message-content > .terminal-tool,
     .chat-message-content > .diff-tool,
-    .chat-message-content > .tool-use-card {
-      margin: 1px 0;
+    .chat-message-content > .tool-use-card,
+    .chat-message-content > .tool-group {
+      margin: 3px 0;
+    }
+
+    /* ===== 多角色群聊（subagent 加入对话） ===== */
+    /* 一个 assistant turn 内有 subagent 时，根容器切到 multi-agent 模式，
+       内部多个 .chat-message-segment 子段堆叠，每段自带头像与气泡。 */
+    .chat-message.multi-agent {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      max-width: 95%;
+    }
+    .chat-message.multi-agent .chat-message-segment {
+      display: flex;
+      flex-direction: column;
+    }
+    .chat-message.multi-agent .chat-message-segment.subagent {
+      padding-left: 14px;
+      margin-left: 6px;
+      border-left: 2px solid var(--agent-color, var(--border-subtle));
+      border-radius: 0 4px 4px 0;
+    }
+    .chat-message.multi-agent .chat-message-segment.subagent .chat-message-content {
+      /* 子 agent 段内的气泡稍微弱化背景，区分主线 */
+      opacity: 0.96;
+    }
+    .chat-message.multi-agent .chat-message-segment .chat-message-avatar {
+      padding-bottom: 4px;
+    }
+    /* 子 agent 头像 name 跟随 agent 主色 */
+    .chat-message-avatar.subagent .avatar-name {
+      color: var(--agent-color, var(--accent));
+    }
+
+    /* "勤劳初二 ↳ 让 侦探猫 帮忙" 分隔提示 */
+    .chat-handoff {
+      align-self: flex-start;
+      margin: 4px 0 2px 4px;
+      padding: 2px 10px;
+      font-size: 0.7rem;
+      color: var(--text-tertiary);
+      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;
+      line-height: 1.5;
+    }
+    .chat-handoff strong {
+      color: var(--agent-color, var(--accent));
+      font-weight: 600;
+    }
+    .chat-handoff-arrow {
+      color: var(--agent-color, var(--accent));
+      font-weight: 600;
+      margin-right: 2px;
+    }
+    .chat-handoff-desc {
+      color: var(--text-secondary);
+      font-style: italic;
     }
 
     /* ===== 消息使用量信息 ===== */
@@ -3982,13 +4171,98 @@
       padding-top: 6px;
       border-top: 1px solid var(--border-subtle);
       font-family: var(--font-mono);
-      font-size: 0.625rem;
+      font-size: 0.65rem;
       color: var(--text-muted);
       display: flex;
       gap: 10px;
       align-items: center;
       flex-wrap: wrap;
-      opacity: 0.5;
+      opacity: 0.75;
+    }
+
+    /* ===== 空消息占位 / 未识别 block / 截断提示 ===== */
+    .empty-message .empty-message-hint {
+      color: var(--text-tertiary);
+      font-style: italic;
+      font-size: 0.8125rem;
+      opacity: 0.7;
+    }
+
+    .unknown-block {
+      margin: 4px 0;
+      border: 1px dashed var(--border-subtle);
+      border-radius: var(--radius-md);
+      background: color-mix(in srgb, var(--text-muted) 6%, transparent);
+      font-size: 0.75rem;
+      cursor: pointer;
+      transition: background var(--transition-fast);
+    }
+    .unknown-block:hover {
+      background: color-mix(in srgb, var(--text-muted) 10%, transparent);
+    }
+    .unknown-block-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 10px;
+      color: var(--text-secondary);
+    }
+    .unknown-block-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: var(--text-muted);
+      color: var(--bg-surface);
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+    .unknown-block-label {
+      flex: 1;
+      font-weight: 500;
+    }
+    .unknown-block-toggle {
+      color: var(--text-tertiary);
+      font-size: 0.7rem;
+      transition: transform var(--transition-fast);
+    }
+    .unknown-block.collapsed .unknown-block-toggle {
+      transform: rotate(-90deg);
+    }
+    .unknown-block-body {
+      margin: 0;
+      padding: 8px 10px 10px;
+      font-family: var(--font-mono);
+      font-size: 0.7rem;
+      color: var(--text-secondary);
+      white-space: pre-wrap;
+      word-break: break-all;
+      max-height: 240px;
+      overflow-y: auto;
+      border-top: 1px dashed var(--border-subtle);
+    }
+    .unknown-block.collapsed .unknown-block-body {
+      display: none;
+    }
+
+    /* tool-use 卡片 / inline-tool / terminal 内容被截断时的提示标签 */
+    .tool-use-card[data-truncated="true"] .tool-use-name::after,
+    .inline-tool[data-truncated="true"] .inline-tool-title::after,
+    .inline-terminal[data-truncated="true"] .inline-terminal-title::after {
+      content: '已截断';
+      display: inline-block;
+      margin-left: 6px;
+      padding: 1px 6px;
+      font-size: 0.6rem;
+      font-weight: 500;
+      color: var(--text-inverse, #fff);
+      background: var(--text-tertiary);
+      border-radius: 999px;
+      letter-spacing: 0.02em;
+      vertical-align: 1px;
+      opacity: 0.85;
     }
 
     .message-usage::before {
@@ -4112,81 +4386,96 @@
       overflow-y: auto;
     }
 
-    /* Tool Use Card */
+    /* ──────────────────────────────────────────────────────────────
+       Tool Use Card — generic write/exec tool wrapper
+       Soft cream surface, brand-tinted status states, polished hover.
+       ────────────────────────────────────────────────────────────── */
     .tool-use-card {
-      margin: 3px 0;
+      margin: 4px 0;
       border: 1px solid var(--border-subtle);
-      border-radius: 8px;
+      border-radius: var(--radius-sm);
       overflow: hidden;
       width: 100%;
       box-sizing: border-box;
-      background: var(--bg-secondary);
-      transition: all 0.3s var(--ease-out-expo);
+      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);
+      transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
     }
     .tool-use-card:hover {
-      border-color: rgba(79, 122, 88, 0.25);
-      box-shadow: 0 2px 8px rgba(79, 122, 88, 0.06);
+      border-color: rgba(79, 122, 88, 0.3);
+      box-shadow: 0 3px 12px rgba(79, 122, 88, 0.08);
     }
     .tool-use-card.loading {
-      border-color: rgba(79, 122, 88, 0.4);
+      border-color: rgba(169, 106, 47, 0.3);
+      background: linear-gradient(180deg, rgba(255, 244, 226, 0.88) 0%, rgba(255, 241, 218, 0.72) 100%);
     }
     .tool-use-card.success {
-      border-color: rgba(79, 122, 88, 0.5);
+      border-color: rgba(79, 122, 88, 0.32);
     }
     .tool-use-card.error {
-      border-color: rgba(178, 79, 69, 0.5);
+      border-color: rgba(178, 79, 69, 0.32);
+      background: linear-gradient(180deg, rgba(252, 240, 238, 0.88) 0%, rgba(252, 235, 233, 0.72) 100%);
     }
     .tool-use-header {
       display: flex;
       align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      background: rgba(79, 122, 88, 0.04);
+      gap: 10px;
+      padding: 9px 14px;
+      background: transparent;
       cursor: pointer;
       font-size: 0.8125rem;
       user-select: none;
       -webkit-user-select: none;
       -webkit-tap-highlight-color: transparent;
       touch-action: manipulation;
-      transition: all 0.2s var(--ease-out-expo);
-      min-height: 36px;
+      transition: background 0.18s ease;
+      min-height: 38px;
       flex-wrap: nowrap;
     }
     .tool-use-header:hover {
-      background: rgba(79, 122, 88, 0.1);
+      background: rgba(197, 101, 61, 0.04);
     }
     .tool-use-header:active {
-      transform: scale(0.99);
+      background: rgba(197, 101, 61, 0.07);
     }
-    .tool-use-card.loading .tool-use-header {
-      background: rgba(79, 122, 88, 0.08);
+    .tool-use-card.loading .tool-use-header:hover {
+      background: rgba(169, 106, 47, 0.06);
     }
-    .tool-use-card.success .tool-use-header {
-      background: rgba(79, 122, 88, 0.12);
+    .tool-use-card.success .tool-use-header:hover {
+      background: rgba(79, 122, 88, 0.06);
     }
-    .tool-use-card.error .tool-use-header {
-      background: rgba(178, 79, 69, 0.1);
+    .tool-use-card.error .tool-use-header:hover {
+      background: rgba(178, 79, 69, 0.06);
     }
     .tool-use-icon {
       font-size: 0.6875rem;
       font-family: var(--font-mono);
-      font-weight: 600;
+      font-weight: 700;
       flex-shrink: 0;
-      display: flex;
+      display: inline-flex;
       align-items: center;
       justify-content: center;
-      min-width: 18px;
-      height: 18px;
-      border-radius: 4px;
-      background: rgba(79, 122, 88, 0.1);
+      min-width: 22px;
+      height: 22px;
+      border-radius: 6px;
+      background: var(--success-muted);
       color: var(--success);
+      letter-spacing: -0.02em;
+    }
+    .tool-use-card.loading .tool-use-icon {
+      background: var(--warning-muted);
+      color: var(--warning);
+    }
+    .tool-use-card.error .tool-use-icon {
+      background: var(--danger-muted);
+      color: var(--danger);
     }
     .tool-use-spinner {
       display: inline-block;
-      width: 16px;
-      height: 16px;
-      border: 2px solid rgba(79, 122, 88, 0.2);
-      border-top-color: var(--success);
+      width: 14px;
+      height: 14px;
+      border: 2px solid var(--warning-muted);
+      border-top-color: var(--warning);
       border-radius: 50%;
       animation: tool-spin 0.8s linear infinite;
     }
@@ -4203,12 +4492,13 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      letter-spacing: -0.005em;
     }
     .tool-use-file {
       font-size: 0.75rem;
       font-family: var(--font-mono);
-      color: var(--text-muted);
-      max-width: 300px;
+      color: var(--text-tertiary);
+      max-width: 320px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -4223,38 +4513,49 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      margin-left: 4px;
+      margin-left: 2px;
     }
     .tool-use-status {
-      font-size: 0.75rem;
-      padding: 2px 8px;
-      border-radius: 4px;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      padding: 3px 10px;
+      border-radius: var(--radius-full);
       flex-shrink: 0;
-      margin-left: 4px;
+      margin-left: 2px;
+      letter-spacing: 0.01em;
     }
     .tool-use-card.success .tool-use-status {
-      background: rgba(79, 122, 88, 0.15);
+      background: var(--success-muted);
       color: var(--success);
     }
     .tool-use-card.error .tool-use-status {
-      background: rgba(178, 79, 69, 0.15);
+      background: var(--danger-muted);
       color: var(--danger);
     }
+    .tool-use-card.loading .tool-use-status {
+      background: var(--warning-muted);
+      color: var(--warning);
+    }
     .tool-use-toggle {
       font-size: 0.75rem;
       color: var(--text-muted);
-      transition: transform 0.3s var(--ease-spring);
+      transition: transform 0.3s var(--ease-spring), color 0.18s ease;
       flex-shrink: 0;
       display: flex;
       align-items: center;
+      opacity: 0.6;
+    }
+    .tool-use-card:hover .tool-use-toggle {
+      color: var(--text-secondary);
+      opacity: 1;
     }
     .tool-use-card.collapsed .tool-use-toggle {
       transform: rotate(-90deg);
     }
     .tool-use-body {
-      padding: 10px 12px;
-      background: var(--bg-elevated);
-      border-top: 1px solid var(--border-subtle);
+      padding: 12px 14px;
+      background: rgba(255, 253, 248, 0.65);
+      border-top: 1px solid rgba(125, 91, 57, 0.08);
       max-height: 600px;
       overflow: hidden;
       transition: max-height 0.35s var(--ease-out-expo), padding 0.35s var(--ease-out-expo), opacity 0.25s ease, transform 0.35s var(--ease-out-expo);
@@ -4277,12 +4578,12 @@
       overflow-wrap: break-word;
       max-height: 400px;
       overflow-y: auto;
-      line-height: 1.5;
+      line-height: 1.55;
     }
     .tool-use-result {
-      margin-top: 8px;
-      padding-top: 8px;
-      border-top: 1px dashed var(--border-subtle);
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px dashed rgba(125, 91, 57, 0.14);
     }
     .tool-use-result-content {
       margin: 0;
@@ -4291,9 +4592,12 @@
       color: var(--text-secondary);
       white-space: pre-wrap;
       overflow-wrap: break-word;
-      max-height: 300px;
+      max-height: 320px;
       overflow-y: auto;
-      line-height: 1.5;
+      line-height: 1.55;
+      background: rgba(125, 91, 57, 0.035);
+      border-radius: var(--radius-xs);
+      padding: 8px 10px;
     }
     .tool-use-result-empty {
       font-size: 0.75rem;
@@ -4304,12 +4608,13 @@
       font-size: 0.75rem;
       color: var(--text-muted);
       font-family: var(--font-mono);
-      margin-bottom: 6px;
-      padding-bottom: 6px;
-      border-bottom: 1px dashed var(--border-subtle);
+      margin-bottom: 8px;
+      padding-bottom: 8px;
+      border-bottom: 1px dashed rgba(125, 91, 57, 0.14);
     }
     .tool-use-meta-label {
       color: var(--text-secondary);
+      font-weight: 600;
     }
     /* AskUserQuestion - simplified */
     .tool-use-card.ask-user {
@@ -4361,7 +4666,17 @@
     }
     .ask-user-option.selected {
       border-color: var(--accent);
-      background: rgba(197, 101, 61, 0.08);
+      background: rgba(197, 101, 61, 0.18);
+      box-shadow: 0 0 0 1px rgba(197, 101, 61, 0.35) inset;
+    }
+    /* 已应答状态的卡片用顶部彩色边条标识，避免只靠 opacity 让"已答"和"未答"区分模糊 */
+    .tool-use-card.ask-user.ask-user-answered {
+      border-top: 2px solid var(--success, #4caf50);
+    }
+    /* 已应答的选项中"用户选过的那个"高亮 */
+    .ask-user-option.ask-user-option-chosen {
+      background: rgba(197, 101, 61, 0.16);
+      border-color: var(--accent);
     }
     /* Radio / Checkbox indicator */
     .ask-user-indicator {
@@ -4589,100 +4904,184 @@
     }
 
     /* ── Tool Group (连续同类调用折叠) ── */
+    /* ──────────────────────────────────────────────────────────────
+       Tool Group — collapsible cluster of consecutive read-only tools
+       Cream card with brand-tinted status chip, count pill, smooth body.
+       ────────────────────────────────────────────────────────────── */
     .tool-group {
-      margin: 2px 0;
-      border-radius: 6px;
-      border: 1px solid var(--border-subtle, rgba(127,127,127,0.1));
+      margin: 4px 0;
+      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%);
+      box-shadow: 0 1px 2px rgba(89, 58, 32, 0.03);
       overflow: hidden;
+      transition: border-color 0.18s ease, box-shadow 0.22s ease, transform 0.22s ease;
+    }
+    .tool-group:hover {
+      border-color: rgba(125, 91, 57, 0.18);
+      box-shadow: 0 2px 8px rgba(89, 58, 32, 0.06);
+    }
+    .tool-group[data-status="pending"] {
+      border-color: rgba(169, 106, 47, 0.22);
+      background: linear-gradient(180deg, rgba(255, 244, 226, 0.85) 0%, rgba(255, 241, 218, 0.7) 100%);
+    }
+    .tool-group[data-status="error"] {
+      border-color: rgba(178, 79, 69, 0.28);
+      background: linear-gradient(180deg, rgba(252, 240, 238, 0.85) 0%, rgba(252, 236, 234, 0.7) 100%);
     }
     .tool-group-summary {
       display: flex;
       align-items: center;
-      gap: 6px;
-      padding: 5px 10px;
+      gap: 9px;
+      padding: 8px 12px;
       cursor: pointer;
       font-size: 0.75rem;
       color: var(--text-secondary);
       user-select: none;
-      transition: background var(--transition-fast);
+      transition: background 0.18s ease;
     }
     .tool-group-summary:hover {
-      background: var(--bg-hover, rgba(127,127,127,0.06));
+      background: rgba(197, 101, 61, 0.04);
     }
     .tool-group-status {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
       font-size: 0.6875rem;
+      font-weight: 700;
+      line-height: 1;
       flex-shrink: 0;
-      width: 14px;
-      text-align: center;
+      letter-spacing: 0;
+    }
+    .tool-group[data-status="done"] .tool-group-status {
+      background: var(--success-muted);
+      color: var(--success);
+    }
+    .tool-group[data-status="error"] .tool-group-status {
+      background: var(--danger-muted);
+      color: var(--danger);
+    }
+    .tool-group[data-status="pending"] .tool-group-status {
+      background: var(--warning-muted);
+      color: var(--warning);
+      animation: tool-group-pulse 1.6s ease-in-out infinite;
+    }
+    @keyframes tool-group-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.55; }
     }
-    .tool-group[data-status="done"] .tool-group-status { color: var(--success, #22c55e); }
-    .tool-group[data-status="error"] .tool-group-status { color: var(--error, #ef4444); }
-    .tool-group[data-status="pending"] .tool-group-status { color: var(--text-muted); }
     .tool-group-text {
       flex: 1;
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      font-weight: 500;
+      color: var(--text-primary);
+      letter-spacing: -0.005em;
     }
     .tool-group-count {
       flex-shrink: 0;
-      font-size: 0.625rem;
-      color: var(--text-muted);
+      font-size: 0.6875rem;
+      color: var(--text-tertiary);
+      padding: 2px 8px;
+      border-radius: var(--radius-full);
+      background: rgba(125, 91, 57, 0.07);
+      font-variant-numeric: tabular-nums;
     }
     .tool-group-chevron {
       flex-shrink: 0;
-      transition: transform 0.2s ease;
+      transition: transform 0.25s var(--ease-out-expo);
       color: var(--text-muted);
+      opacity: 0.6;
+    }
+    .tool-group:hover .tool-group-chevron {
+      opacity: 1;
     }
     .tool-group[data-expanded="true"] .tool-group-chevron {
       transform: rotate(180deg);
     }
     .tool-group-body {
       display: none;
-      padding: 2px 6px 4px;
-      border-top: 1px solid var(--border-subtle, rgba(127,127,127,0.08));
+      padding: 4px 8px 8px 18px;
+      border-top: 1px solid rgba(125, 91, 57, 0.06);
+      border-left: 2px solid rgba(125, 91, 57, 0.08);
+      background: rgba(255, 253, 248, 0.55);
+    }
+    /* 同一 tool-group 内多条 inline-tool 视觉收紧 + 左缩进，强化"嵌套" */
+    .tool-group-body > .inline-tool {
+      margin: 0;
+    }
+    .tool-group-body > .inline-tool + .inline-tool {
+      border-top: 1px dashed rgba(125, 91, 57, 0.06);
     }
     .tool-group[data-expanded="true"] .tool-group-body {
       display: block;
+      animation: tool-group-reveal 0.22s var(--ease-out-expo);
+    }
+    @keyframes tool-group-reveal {
+      from { opacity: 0; transform: translateY(-2px); }
+      to { opacity: 1; transform: translateY(0); }
     }
 
-    /* ── Inline Tool Display (Read, Glob, Grep, WebFetch, WebSearch, TodoRead) ── */
+    /* ──────────────────────────────────────────────────────────────
+       Inline Tool — single read-only row (Read / Glob / Grep / Web*)
+       Clean two-column layout: icon + title | meta. Hover lifts subtly.
+       ────────────────────────────────────────────────────────────── */
     .inline-tool {
       display: flex;
       flex-direction: column;
       margin: 1px 0;
-      border-radius: 6px;
+      border-radius: var(--radius-xs);
       cursor: pointer;
-      transition: background var(--transition-fast);
+      transition: background 0.16s ease;
     }
     .inline-tool-row {
       display: flex;
       align-items: center;
-      gap: 5px;
-      padding: 2px 6px;
-      font-size: 0.6875rem;
-      color: var(--text-muted);
+      gap: 8px;
+      padding: 5px 10px;
+      font-size: 0.75rem;
+      color: var(--text-secondary);
       font-family: var(--font-mono);
-      line-height: 1.4;
-      opacity: 0.7;
+      line-height: 1.45;
+      border-radius: var(--radius-xs);
+      transition: background 0.16s ease, color 0.16s ease;
     }
     .inline-tool:hover .inline-tool-row {
-      opacity: 1;
-      background: rgba(0, 0, 0, 0.02);
-      border-radius: 6px;
+      background: rgba(197, 101, 61, 0.06);
+      color: var(--text-primary);
     }
     .inline-tool-status {
-      font-size: 0.625rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      height: 14px;
       flex-shrink: 0;
+      font-size: 0.6875rem;
+      font-weight: 700;
+      color: var(--success);
+      line-height: 1;
+    }
+    .inline-tool[data-status="pending"] .inline-tool-status {
+      color: var(--warning);
+    }
+    .inline-tool[data-status="error"] .inline-tool-status,
+    .inline-tool-error-inline .inline-tool-status {
+      color: var(--danger);
     }
     .inline-tool-icon {
       flex-shrink: 0;
-      color: var(--text-muted);
-      margin: 0 1px;
-      opacity: 0.6;
-      width: 12px;
-      height: 12px;
+      color: var(--text-tertiary);
+      opacity: 0.85;
+    }
+    .inline-tool:hover .inline-tool-icon {
+      color: var(--accent);
+      opacity: 1;
     }
     .inline-tool-title {
       flex: 1;
@@ -4690,70 +5089,94 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      color: var(--text-muted);
+      color: var(--text-secondary);
+      font-size: 0.75rem;
+    }
+    .inline-tool:hover .inline-tool-title {
+      color: var(--text-primary);
     }
     .inline-tool-meta {
       flex-shrink: 0;
-      font-size: 0.625rem;
-      color: var(--text-muted);
-      opacity: 0.5;
-      max-width: 200px;
+      font-size: 0.6875rem;
+      color: var(--text-muted);
+      max-width: 220px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      font-variant-numeric: tabular-nums;
+      letter-spacing: -0.01em;
     }
     .inline-tool-expanded {
       display: none;
-      padding: 0 8px 6px 8px;
+      padding: 0 10px 8px 10px;
     }
     .inline-tool-open .inline-tool-expanded {
       display: block;
+      animation: tool-group-reveal 0.2s var(--ease-out-expo);
     }
     .inline-tool-result {
-      background: rgba(0, 0, 0, 0.03);
-      border-radius: var(--radius-sm);
-      padding: 8px;
-      margin-top: 4px;
-      max-height: 300px;
+      background: rgba(125, 91, 57, 0.04);
+      border: 1px solid rgba(125, 91, 57, 0.07);
+      border-radius: var(--radius-xs);
+      padding: 10px 12px;
+      margin-top: 6px;
+      max-height: 320px;
       overflow-y: auto;
       scrollbar-width: thin;
-      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+      scrollbar-color: rgba(125, 91, 57, 0.2) transparent;
     }
     .inline-tool-result::-webkit-scrollbar {
-      width: 4px;
+      width: 6px;
     }
     .inline-tool-result::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.15);
-      border-radius: 2px;
+      background: rgba(125, 91, 57, 0.2);
+      border-radius: 3px;
+    }
+    .inline-tool-result::-webkit-scrollbar-thumb:hover {
+      background: rgba(125, 91, 57, 0.32);
     }
     .inline-tool-result-text {
       font-family: var(--font-mono);
       font-size: 0.75rem;
-      line-height: 1.5;
+      line-height: 1.55;
       color: var(--text-secondary);
       white-space: pre-wrap;
       word-break: break-all;
       margin: 0;
-      max-height: 300px;
-      overflow-y: auto;
     }
     .inline-tool-error-inline {
-      border-left: 2px solid rgba(178, 79, 69, 0.4);
+      border-left: 2px solid var(--danger);
+      padding-left: 2px;
+      margin-left: -2px;
     }
     .inline-tool-error-inline .inline-tool-row {
-      color: rgba(178, 79, 69, 0.7);
+      color: var(--danger);
     }
     .inline-tool-result.inline-tool-error {
-      color: rgba(178, 79, 69, 0.8);
+      color: var(--danger);
       font-family: var(--font-mono);
       font-size: 0.75rem;
-      background: rgba(178, 79, 69, 0.05);
+      background: var(--danger-muted);
+      border-color: rgba(178, 79, 69, 0.18);
     }
     .inline-tool-loading {
       font-size: 0.75rem;
-      color: var(--text-muted);
+      color: var(--warning);
       font-style: italic;
-      padding: 4px 0;
+      padding: 6px 0;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .inline-tool-loading::before {
+      content: "";
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border: 1.5px solid var(--warning-muted);
+      border-top-color: var(--warning);
+      border-radius: 50%;
+      animation: tool-content-spin 0.7s linear infinite;
     }
     .inline-tool-empty {
       font-size: 0.75rem;
@@ -4793,133 +5216,207 @@
       text-decoration: underline;
     }
 
-    /* ── Inline Terminal Display (Bash) ── */
+    /* ──────────────────────────────────────────────────────────────
+       Inline Terminal — Bash card with a real terminal-window look.
+       macOS-style traffic lights, gradient titlebar, monospaced body.
+       ────────────────────────────────────────────────────────────── */
     .inline-terminal {
-      margin: 3px 0;
-      border: 1px solid rgba(255, 255, 255, 0.06);
-      border-radius: 8px;
-      background: #1a1714;
+      margin: 4px 0;
+      border: 1px solid rgba(15, 12, 9, 0.6);
+      border-radius: var(--radius-sm);
+      background: #1f1b17;
+      box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.04) inset,
+        0 2px 12px rgba(15, 12, 9, 0.18);
       overflow: hidden;
+      transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
+    }
+    .inline-terminal:hover {
+      box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.05) inset,
+        0 4px 18px rgba(15, 12, 9, 0.24);
+      border-color: rgba(255, 255, 255, 0.1);
     }
     .term-header {
       display: flex;
       align-items: center;
-      gap: 6px;
-      padding: 5px 10px;
-      background: rgba(255, 255, 255, 0.03);
+      gap: 10px;
+      padding: 8px 14px;
+      background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%),
+        rgba(0, 0, 0, 0.18);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
       font-size: 0.75rem;
       cursor: pointer;
       user-select: none;
+      position: relative;
     }
     .term-header:hover {
-      background: rgba(255, 255, 255, 0.05);
+      background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%),
+        rgba(0, 0, 0, 0.18);
     }
     .term-status-dot {
-      width: 6px;
-      height: 6px;
+      width: 9px;
+      height: 9px;
       border-radius: 50%;
       flex-shrink: 0;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
+    }
+    .term-status-dot.term-success {
+      background: radial-gradient(circle at 35% 30%, #b6f0c4 0%, #6ee09a 50%, #3aa765 100%);
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 0 6px rgba(110, 224, 154, 0.35);
+    }
+    .term-status-dot.term-error {
+      background: radial-gradient(circle at 35% 30%, #ffb5b9 0%, #f07178 50%, #b53b41 100%);
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 0 6px rgba(240, 113, 120, 0.35);
+    }
+    .term-status-dot.term-warn {
+      background: radial-gradient(circle at 35% 30%, #ffd07a 0%, #f0a500 50%, #ad7400 100%);
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 0 6px rgba(240, 165, 0, 0.35);
+    }
+    .term-status-dot.term-running {
+      background: radial-gradient(circle at 35% 30%, #d1d5db 0%, #9ca3af 50%, #4b5563 100%);
+      animation: term-pulse 1s ease-in-out infinite;
     }
-    .term-status-dot.term-success { background: #6ee09a; }
-    .term-status-dot.term-error { background: #f07178; }
-    .term-status-dot.term-warn { background: #f0a500; }
-    .term-status-dot.term-running { background: #6b7280; animation: term-pulse 1s ease-in-out infinite; }
     @keyframes term-pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.4; }
+      0%, 100% { opacity: 1; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 0 0 rgba(156, 163, 175, 0); }
+      50% { opacity: 0.55; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 0 8px rgba(156, 163, 175, 0.35); }
     }
     .term-cmd-preview {
       flex: 1;
       min-width: 0;
       font-family: var(--font-mono);
-      font-size: 0.6875rem;
-      color: rgba(255, 255, 255, 0.45);
+      font-size: 0.75rem;
+      color: rgba(232, 220, 200, 0.78);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      letter-spacing: -0.005em;
     }
     .term-cmd-preview .term-prompt {
-      color: rgba(110, 224, 154, 0.6);
-      font-weight: 500;
-      margin-right: 4px;
-      font-size: 0.6875rem;
+      color: #6ee09a;
+      font-weight: 600;
+      margin-right: 6px;
+      font-size: 0.75rem;
+      opacity: 0.9;
     }
     .term-title {
       flex: 1;
       font-family: var(--font-mono);
       font-size: 0.75rem;
-      color: rgba(255, 255, 255, 0.3);
+      color: rgba(255, 255, 255, 0.4);
     }
     .term-toggle-icon {
-      font-size: 0.5rem;
-      color: rgba(255, 255, 255, 0.25);
-      transition: transform var(--transition-fast);
+      font-size: 0.625rem;
+      color: rgba(255, 255, 255, 0.35);
+      transition: color 0.18s ease;
+      flex-shrink: 0;
+    }
+    .term-header:hover .term-toggle-icon {
+      color: rgba(255, 255, 255, 0.65);
     }
     .term-body {
-      padding: 8px 10px;
+      padding: 12px 14px 14px;
+      background:
+        linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 24px),
+        #1f1b17;
     }
     .term-command {
       font-family: var(--font-mono);
       font-size: 0.8125rem;
-      color: #e8dcc8;
-      line-height: 1.5;
-      margin-bottom: 4px;
+      color: #f4e9d4;
+      line-height: 1.55;
+      margin-bottom: 6px;
+      white-space: pre-wrap;
+      word-break: break-all;
     }
     .term-prompt {
       color: #6ee09a;
       font-weight: 600;
-      margin-right: 4px;
+      margin-right: 6px;
+      text-shadow: 0 0 6px rgba(110, 224, 154, 0.25);
     }
     .term-output {
-      margin-top: 4px;
-      padding-top: 4px;
-      border-top: 1px solid rgba(255, 255, 255, 0.05);
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px dashed rgba(255, 255, 255, 0.06);
+      max-height: 360px;
+      overflow-y: auto;
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+    }
+    .term-output::-webkit-scrollbar {
+      width: 6px;
+    }
+    .term-output::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 3px;
+    }
+    .term-output::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.25);
     }
     .term-line {
       font-family: var(--font-mono);
       font-size: 0.8125rem;
-      color: #c8b89a;
-      line-height: 1.6;
+      color: #d4c2a3;
+      line-height: 1.55;
       white-space: pre-wrap;
       word-break: break-all;
     }
     .term-exit {
-      margin-top: 6px;
-      padding-top: 4px;
-      border-top: 1px solid rgba(255, 255, 255, 0.05);
+      margin-top: 10px;
+      padding-top: 8px;
+      border-top: 1px dashed rgba(255, 255, 255, 0.06);
       font-family: var(--font-mono);
-      font-size: 0.7rem;
+      font-size: 0.6875rem;
       line-height: 1.5;
+      letter-spacing: 0.04em;
     }
-    .term-exit-success { color: rgba(110, 224, 154, 0.7); }
-    .term-exit-error { color: rgba(240, 113, 120, 0.7); }
+    .term-exit-success { color: rgba(110, 224, 154, 0.75); }
+    .term-exit-error { color: rgba(240, 113, 120, 0.78); }
 
-    /* ── Inline Diff Display (Edit, Write, MultiEdit) ── */
+    /* ──────────────────────────────────────────────────────────────
+       Inline Diff — Edit / Write / MultiEdit
+       Card with clearly-labelled "旧 | 新" columns and status pill.
+       ────────────────────────────────────────────────────────────── */
     .inline-diff {
-      margin: 3px 0;
-      border: 1px solid rgba(0, 0, 0, 0.06);
-      border-radius: 8px;
+      margin: 4px 0;
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-sm);
       overflow: hidden;
-      background: var(--bg-secondary);
+      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);
+      transition: border-color 0.22s ease, box-shadow 0.22s ease;
+    }
+    .inline-diff:hover {
+      border-color: rgba(125, 91, 57, 0.22);
+      box-shadow: 0 3px 12px rgba(89, 58, 32, 0.06);
     }
     .diff-header {
       display: flex;
       align-items: center;
-      gap: 6px;
-      padding: 6px 10px;
-      background: rgba(0, 0, 0, 0.03);
-      font-size: 0.75rem;
+      gap: 10px;
+      padding: 8px 14px;
+      background: transparent;
+      font-size: 0.8125rem;
       cursor: pointer;
+      transition: background 0.18s ease;
     }
     .diff-header:hover {
-      background: rgba(0, 0, 0, 0.05);
+      background: rgba(197, 101, 61, 0.04);
     }
     .diff-toggle {
       font-size: 0.625rem;
       color: var(--text-muted);
-      transition: transform 0.3s var(--ease-spring);
+      transition: transform 0.3s var(--ease-spring), color 0.18s ease;
       flex-shrink: 0;
       margin-left: auto;
+      opacity: 0.6;
+    }
+    .inline-diff:hover .diff-toggle {
+      color: var(--text-secondary);
+      opacity: 1;
     }
     .inline-diff.collapsed .diff-toggle {
       transform: rotate(-90deg);
@@ -4935,49 +5432,56 @@
     }
     .diff-file-name {
       font-family: var(--font-mono);
-      font-weight: 600;
+      font-weight: 700;
       color: var(--text-primary);
       flex-shrink: 0;
+      font-size: 0.8125rem;
+      letter-spacing: -0.005em;
     }
     .diff-path {
       font-family: var(--font-mono);
-      color: var(--text-muted);
+      color: var(--text-tertiary);
       flex: 1;
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-size: 0.7rem;
+      font-size: 0.6875rem;
     }
     .diff-status {
       flex-shrink: 0;
-      font-size: 0.7rem;
-      padding: 2px 8px;
-      border-radius: 3px;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      padding: 3px 10px;
+      border-radius: var(--radius-full);
+      letter-spacing: 0.01em;
     }
     .diff-status.diff-success {
-      background: rgba(79, 122, 88, 0.12);
+      background: var(--success-muted);
       color: var(--success);
     }
     .diff-status.diff-error {
-      background: rgba(178, 79, 69, 0.12);
+      background: var(--danger-muted);
       color: var(--danger);
     }
     .diff-status.diff-pending {
-      background: rgba(0, 0, 0, 0.06);
-      color: var(--text-muted);
+      background: var(--warning-muted);
+      color: var(--warning);
     }
     .diff-body {
       overflow: hidden;
+      border-top: 1px solid rgba(125, 91, 57, 0.08);
+      background: rgba(255, 253, 248, 0.65);
     }
     .diff-columns {
       display: flex;
       gap: 1px;
-      background: rgba(0, 0, 0, 0.04);
+      background: rgba(125, 91, 57, 0.08);
     }
     .diff-col {
       flex: 1;
       min-width: 0;
+      background: rgba(255, 253, 248, 0.85);
     }
     .diff-col-half {
       flex: 1;
@@ -4988,30 +5492,32 @@
     }
     .diff-col-label {
       font-family: var(--font-mono);
-      font-size: 0.65rem;
+      font-size: 0.625rem;
       font-weight: 700;
-      padding: 2px 10px;
-      color: var(--text-muted);
+      padding: 4px 12px;
+      color: var(--text-tertiary);
       text-transform: uppercase;
-      letter-spacing: 0.05em;
-      background: rgba(0, 0, 0, 0.02);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      letter-spacing: 0.08em;
+      background: rgba(125, 91, 57, 0.05);
+      border-bottom: 1px solid rgba(125, 91, 57, 0.08);
     }
     .diff-line {
-      padding: 2px 10px;
+      padding: 3px 12px;
       font-family: var(--font-mono);
       font-size: 0.75rem;
-      line-height: 1.5;
+      line-height: 1.55;
       white-space: pre-wrap;
       word-break: break-all;
     }
     .diff-add {
-      background: rgba(40, 167, 69, 0.08);
-      color: #155724;
+      background: rgba(79, 122, 88, 0.08);
+      color: #2c5535;
+      border-left: 2px solid rgba(79, 122, 88, 0.5);
     }
     .diff-remove {
       background: rgba(178, 79, 69, 0.06);
-      color: #792620;
+      color: #7c2a23;
+      border-left: 2px solid rgba(178, 79, 69, 0.45);
     }
 
     /* 旧版卡片式思考（保留作为 fallback） */
@@ -5520,17 +6026,33 @@
 
     /* Queued message in chat view */
     .chat-message.user.queued {
-      opacity: 0.6;
+      opacity: 0.7;
+    }
+    .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;
     }
     .queued-badge {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
       font-size: 0.625rem;
       color: var(--accent);
       background: var(--accent-muted);
-      padding: 1px 6px;
-      border-radius: 8px;
+      padding: 2px 8px;
+      border-radius: 999px;
       font-weight: 600;
-      margin-top: 4px;
+      margin-top: 6px;
+      letter-spacing: 0.04em;
+      animation: queuePulse 1.5s ease-in-out infinite;
+    }
+    .queued-badge::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--accent);
       animation: queuePulse 1.5s ease-in-out infinite;
     }
 
@@ -7161,11 +7683,17 @@
       box-shadow: 0 4px 12px rgba(125, 91, 57, 0.08);
     }
     .session-modal .mode-card.active {
-      background: linear-gradient(180deg, #fff7ef 0%, #ffeed8 100%);
-      border-color: var(--accent);
+      background:
+        linear-gradient(180deg, rgba(255, 252, 247, 0.95) 0%, rgba(255, 240, 224, 0.82) 100%);
+      border: 0.5px solid rgba(255, 255, 255, 0.8);
+      backdrop-filter: blur(16px) saturate(180%);
+      -webkit-backdrop-filter: blur(16px) saturate(180%);
       box-shadow:
-        0 0 0 3px var(--accent-muted),
-        0 4px 12px rgba(197, 101, 61, 0.12);
+        0 0 0 1px rgba(197, 101, 61, 0.32),
+        0 0 0 4px rgba(197, 101, 61, 0.14),
+        0 8px 22px -4px rgba(197, 101, 61, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.95),
+        inset 0 -1px 0 rgba(197, 101, 61, 0.08);
       transform: none;
     }
     .session-modal .mode-card.active .mode-card-label {
@@ -7190,11 +7718,17 @@
       box-shadow: 0 8px 20px rgba(125, 91, 57, 0.1);
     }
     .session-modal .tool-card.active {
-      background: linear-gradient(180deg, #fff8f1 0%, #fff1de 100%);
-      border-color: var(--accent);
+      background:
+        linear-gradient(180deg, rgba(255, 252, 247, 0.95) 0%, rgba(255, 240, 224, 0.82) 100%);
+      border: 0.5px solid rgba(255, 255, 255, 0.8);
+      backdrop-filter: blur(16px) saturate(180%);
+      -webkit-backdrop-filter: blur(16px) saturate(180%);
       box-shadow:
-        0 0 0 3px var(--accent-muted),
-        0 6px 16px rgba(197, 101, 61, 0.12);
+        0 0 0 1px rgba(197, 101, 61, 0.3),
+        0 0 0 4px rgba(197, 101, 61, 0.14),
+        0 10px 28px -6px rgba(197, 101, 61, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.95),
+        inset 0 -1px 0 rgba(197, 101, 61, 0.08);
       transform: none;
     }
 
@@ -7434,12 +7968,19 @@
       transform: none;
       border-color: transparent;
     }
+    /* Settings tab active — liquid glass row with warm halo */
     .settings-modal .settings-tab.active {
-      background: linear-gradient(180deg, #fff7ef 0%, #ffeed8 100%);
+      background:
+        linear-gradient(180deg, rgba(255, 252, 247, 0.95) 0%, rgba(255, 244, 232, 0.78) 100%);
       color: var(--accent);
+      backdrop-filter: blur(14px) saturate(180%);
+      -webkit-backdrop-filter: blur(14px) saturate(180%);
       box-shadow:
-        inset 0 0 0 1px rgba(197, 101, 61, 0.22),
-        0 1px 3px rgba(197, 101, 61, 0.08);
+        inset 0 0 0 1px rgba(197, 101, 61, 0.25),
+        inset 0 1px 0 rgba(255, 255, 255, 0.9),
+        inset 0 -1px 0 rgba(197, 101, 61, 0.08),
+        0 4px 14px -4px rgba(197, 101, 61, 0.22),
+        0 1px 3px rgba(125, 91, 57, 0.06);
     }
     .settings-modal .settings-tab.active .settings-tab-meta {
       color: var(--text-secondary);
@@ -7712,6 +8253,7 @@
     .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) */
@@ -7747,17 +8289,27 @@
       padding: 6px;
     }
     .sidebar-header-overflow .overflow-item {
-      border-radius: 8px;
+      border-radius: 9px;
       padding: 9px 10px;
       font-size: 0.8125rem;
       font-weight: 500;
+      transition:
+        background 0.16s ease,
+        color 0.16s ease,
+        box-shadow 0.18s ease,
+        transform 0.18s var(--ease-out-expo);
     }
     .sidebar-header-overflow .overflow-item:hover {
-      background: rgba(125, 91, 57, 0.08);
+      background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 252, 247, 0.6) 100%);
       color: var(--text-primary);
+      box-shadow:
+        0 0 0 0.5px rgba(125, 91, 57, 0.08),
+        inset 0 1px 0 rgba(255, 255, 255, 0.85);
     }
     .sidebar-header-overflow .overflow-item:active {
-      background: rgba(125, 91, 57, 0.14);
+      background: rgba(197, 101, 61, 0.12);
+      color: var(--accent);
       transform: scale(0.98);
     }
 
@@ -7864,17 +8416,20 @@
 
     /* ── Session item — clean card on glass ── */
     .session-item {
-      background: rgba(255, 255, 255, 0.55);
-      border: 1px solid rgba(125, 91, 57, 0.08);
-      border-radius: 12px;
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 252, 247, 0.42) 100%);
+      border: 0.5px solid rgba(255, 255, 255, 0.55);
+      border-radius: 13px;
       padding: 11px 14px;
       margin-bottom: 6px;
-      box-shadow: 0 1px 2px rgba(125, 91, 57, 0.03);
+      box-shadow:
+        0 0 0 0.5px rgba(125, 91, 57, 0.05),
+        0 1px 2px rgba(125, 91, 57, 0.03),
+        inset 0 1px 0 rgba(255, 255, 255, 0.6);
       transition:
-        background 0.18s ease,
-        border-color 0.18s ease,
-        box-shadow 0.18s ease,
-        transform 0.18s ease;
+        background 0.2s ease,
+        border-color 0.2s ease,
+        box-shadow 0.22s ease,
+        transform 0.22s var(--ease-out-expo);
     }
     .session-item::before {
       left: 4px;
@@ -7882,32 +8437,57 @@
       bottom: 10px;
       width: 3px;
       border-radius: 2px;
-      background: var(--accent);
+      background: linear-gradient(180deg, var(--accent), rgba(197, 101, 61, 0.5));
     }
     .session-item:hover {
-      background: rgba(255, 255, 255, 0.85);
-      border-color: rgba(125, 91, 57, 0.16);
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 253, 248, 0.62) 100%);
+      border-color: rgba(255, 255, 255, 0.7);
       transform: translateY(-1px);
-      box-shadow: 0 4px 12px rgba(125, 91, 57, 0.08);
+      box-shadow:
+        0 0 0 0.5px rgba(125, 91, 57, 0.08),
+        0 6px 16px -6px rgba(125, 91, 57, 0.18),
+        inset 0 1px 0 rgba(255, 255, 255, 0.8);
     }
     .session-item:hover::before {
-      opacity: 0.45;
+      opacity: 0.5;
       transform: scaleY(1);
     }
+    /* Selected (active) — true liquid glass pill with depth + accent glow */
     .session-item.active {
-      background: linear-gradient(180deg, #fff7ef 0%, #fff1de 100%);
-      border-color: var(--accent);
+      background:
+        linear-gradient(180deg, rgba(255, 252, 247, 0.92) 0%, rgba(255, 244, 232, 0.78) 100%);
+      border: 0.5px solid rgba(255, 255, 255, 0.85);
+      transform: translateY(-1px);
+      backdrop-filter: blur(20px) saturate(180%);
+      -webkit-backdrop-filter: blur(20px) saturate(180%);
       box-shadow:
-        0 0 0 1px var(--accent-muted),
-        0 4px 14px rgba(197, 101, 61, 0.14);
+        /* outer accent ring (soft) */
+        0 0 0 1px rgba(197, 101, 61, 0.28),
+        /* warm glow halo */
+        0 8px 28px -6px rgba(197, 101, 61, 0.32),
+        /* base elevation */
+        0 2px 6px -1px rgba(125, 91, 57, 0.1),
+        /* top inner highlight — light from above */
+        inset 0 1px 0 rgba(255, 255, 255, 0.95),
+        /* bottom inner shadow — depth at base */
+        inset 0 -1px 0 rgba(197, 101, 61, 0.08),
+        /* left inner glint */
+        inset 1px 0 0 rgba(255, 255, 255, 0.4);
     }
     .session-item.active::before {
       opacity: 1;
       transform: scaleY(1);
+      box-shadow: 0 0 8px rgba(197, 101, 61, 0.5);
     }
+    /* Multi-select state — quieter glass tint, no accent halo */
     .session-item.selected {
-      background: linear-gradient(180deg, #fff7ef 0%, #fff3e3 100%);
-      border-color: rgba(197, 101, 61, 0.4);
+      background:
+        linear-gradient(180deg, rgba(255, 250, 244, 0.85) 0%, rgba(255, 246, 236, 0.65) 100%);
+      border: 0.5px solid rgba(255, 255, 255, 0.7);
+      box-shadow:
+        0 0 0 1px rgba(197, 101, 61, 0.18),
+        0 4px 14px -4px rgba(125, 91, 57, 0.14),
+        inset 0 1px 0 rgba(255, 255, 255, 0.85);
     }
     .session-item.selected::before {
       opacity: 0.7;
@@ -8052,11 +8632,21 @@
       transform: scale(0.96);
       transition-duration: 0.06s;
     }
+    /* Footer tab active — same liquid glass language as .session-item.active */
     .sidebar-footer-actions .btn.active {
-      background: linear-gradient(180deg, #fff7ef 0%, #fff1de 100%);
-      border-color: rgba(197, 101, 61, 0.32);
+      background:
+        linear-gradient(180deg, rgba(255, 252, 247, 0.95) 0%, rgba(255, 242, 228, 0.78) 100%);
+      border: 0.5px solid rgba(255, 255, 255, 0.85);
       color: var(--accent);
-      box-shadow: 0 0 0 1px var(--accent-muted);
+      transform: translateY(-1px);
+      backdrop-filter: blur(16px) saturate(180%);
+      -webkit-backdrop-filter: blur(16px) saturate(180%);
+      box-shadow:
+        0 0 0 1px rgba(197, 101, 61, 0.28),
+        0 6px 18px -4px rgba(197, 101, 61, 0.32),
+        0 2px 4px -1px rgba(125, 91, 57, 0.08),
+        inset 0 1px 0 rgba(255, 255, 255, 0.95),
+        inset 0 -1px 0 rgba(197, 101, 61, 0.08);
     }
     .sidebar-footer-actions .btn.sidebar-logout:hover {
       background: rgba(178, 79, 69, 0.08);
@@ -10059,9 +10649,17 @@
 
     .settings-tab.active {
       color: var(--accent);
-      border-color: rgba(197, 101, 61, 0.16);
-      background: linear-gradient(135deg, rgba(197, 101, 61, 0.12), rgba(197, 101, 61, 0.05));
-      box-shadow: inset 0 0 0 1px rgba(197, 101, 61, 0.08), var(--shadow-xs);
+      border-color: rgba(255, 255, 255, 0.7);
+      background:
+        linear-gradient(180deg, rgba(255, 252, 247, 0.92) 0%, rgba(255, 244, 232, 0.72) 100%);
+      backdrop-filter: blur(14px) saturate(180%);
+      -webkit-backdrop-filter: blur(14px) saturate(180%);
+      box-shadow:
+        inset 0 0 0 1px rgba(197, 101, 61, 0.22),
+        inset 0 1px 0 rgba(255, 255, 255, 0.9),
+        inset 0 -1px 0 rgba(197, 101, 61, 0.06),
+        0 4px 14px -4px rgba(197, 101, 61, 0.22),
+        0 1px 3px rgba(125, 91, 57, 0.04);
     }
 
     .settings-tab.active::before {