split one accent into three colours that each mean one thing

The app had a single cyan accent, so every emphasis in the chat chain
was a shade of the same hue. An approval waiting on the user, a tool
that had already run, a streaming response and an outright error all
looked equally urgent — the hue carried no information at all.

The colours are now split by meaning rather than by shade, and the rule
is documented at the top of variables.scss so it survives future edits:

  cyan   the system itself   brand, primary buttons, selection, user bubbles
  amber  needs you           approval cards, context about to fill
  lime   the machine works   tool execution, assistant output, streaming
  red    something failed    errors only — deliberately not a palette member

Red staying out is the load-bearing part: when failure reuses the accent
family the urgency signal disappears entirely.

`--warning` moves from yellow (hue 85) to amber (hue 68) and `--success`
from a muted green to fluorescent lime (hue 128). Because both are global
tokens, every page using them changes hue in the same pass; the Arco
`--green-*` / `--orange-*` bridges are updated with them so solid controls
follow instead of staying behind. Six translucent companions
(`--success-soft`, `--warning-line`, …) were added for fills and borders.

On the chat surface: the approval card goes amber with a slow pulse on
its icon — the only moving part in the chain, marking the one thing that
is genuinely waiting. Tool-change cards and assistant bubbles take a 2px
lime left edge meaning "already ran"; user bubbles get a cyan right edge
so the two sides read apart without labels. The context meter is green
under 60%, amber to 80%, red above; those thresholds already existed and
only the colours were wrong.

Rendering-layer only. No store logic, no /chat-run payload, no markup or
event wiring.

packages/client/src/components/hermes/chat/ChatInput.vue

@@ -1527,16 +1527,20 @@ function isImage(type: string): boolean {
 
 .context-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, rgba(var(--text-primary-rgb), 0.42), rgba(var(--text-primary-rgb), 0.72));
+  // 三段语义与全局一致：绿=余量充足，橙=快满了需要留意，红=真要满了。
+  background: linear-gradient(90deg, rgba(var(--success-rgb), 0.5), var(--success));
+  box-shadow: 0 0 8px rgba(var(--success-rgb), 0.5);
   border-radius: 2px;
-  transition: width 0.3s ease;
+  transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
 
   &.context-bar-warn {
     background: linear-gradient(90deg, rgba(var(--warning-rgb), 0.55), var(--warning));
+    box-shadow: 0 0 8px rgba(var(--warning-rgb), 0.55);
   }
 
   &.context-bar-danger {
     background: linear-gradient(90deg, rgba(var(--error-rgb), 0.55), var(--error));
+    box-shadow: 0 0 8px rgba(var(--error-rgb), 0.55);
   }
 }
 

packages/client/src/components/hermes/chat/MessageItem.vue

@@ -1306,6 +1306,8 @@ onBeforeUnmount(() => {
     .message-bubble {
       background-color: $msg-user-bg;
       border-radius: 10px;
+      // 青色 = 你在驱动这段会话。
+      border-right: 2px solid rgba(var(--accent-primary-rgb), 0.45);
     }
   }
 
@@ -1330,6 +1332,9 @@ onBeforeUnmount(() => {
     .message-bubble {
       background-color: $msg-assistant-bg;
       border-radius: 10px;
+      // 荧光绿 = 机器在动。助手气泡左边这道 2px 让"这段是机器产出的"一眼可辨，
+      // 与用户气泡（青色）、审批卡（橙色）互不重叠。
+      border-left: 2px solid var(--success-line);
     }
 
     .message-bubble.agent-error {
@@ -1857,7 +1862,10 @@ onBeforeUnmount(() => {
 
 .tool-change-card {
   background: $bg-secondary;
+  // 荧光绿 = 机器已执行。左侧这道 2px 是三色语义里"机器在动"的专属标记，
+  // 与审批卡的橙色底、助手气泡的绿色边互不重叠。
   border: 1px solid $border-light;
+  border-left: 2px solid var(--success-line);
   border-radius: 10px;
   color: $text-primary;
   display: grid;

packages/client/src/components/hermes/chat/MessageList.vue

@@ -921,8 +921,30 @@ defineExpose({
   backdrop-filter: blur(14px);
 }
 
+// 审批卡是橙色专属区：琥珀橙只表示「需要你介入」。
+// 这里不能用强调色——青色留给"系统本体"，混用就分不出紧急程度了。
 .approval-float-panel {
-  border-color: rgba(var(--accent-primary-rgb), 0.24);
+  border-color: var(--warning-line);
+  background: linear-gradient(var(--warning-soft), var(--warning-soft)), var(--bg-card);
+  box-shadow: inset 0 0 22px rgba(var(--warning-rgb), 0.06),
+              0 14px 40px rgba(0, 0, 0, 0.14),
+              0 0 20px rgba(var(--warning-rgb), 0.1);
+}
+
+.approval-float-panel .float-panel-header,
+.approval-float-panel .approval-float-icon {
+  color: var(--warning);
+}
+
+.approval-float-panel .approval-float-icon {
+  background: var(--warning-soft);
+  border-color: var(--warning-line);
+  animation: approval-pulse 1.8s ease-in-out infinite;
+}
+
+@keyframes approval-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--warning-rgb), 0.34); }
+  50% { box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0); }
 }
 
 .queue-float-panel {