ui(chat): separate tool/thinking output and add toggle

- Render assistant reasoning as a distinct block (not merged into message text).\n- Detect tool-like messages reliably and style them separately.\n- Add a "🧠" toggle to hide/show tool + thinking output, persisted in UI settings.

ui/src/styles/chat/grouped.css

@@ -84,6 +84,11 @@
   color: rgba(150, 150, 150, 1);
 }
 
+.chat-avatar.tool {
+  background: rgba(134, 142, 150, 0.2);
+  color: rgba(134, 142, 150, 1);
+}
+
 /* Minimal Bubble Design - dynamic width based on content */
 .chat-bubble {
   display: inline-block;

ui/src/styles/chat/legacy.css

@@ -12,10 +12,16 @@
 }
 
 .chat-line.assistant,
-.chat-line.other {
+.chat-line.other,
+.chat-line.tool {
   justify-content: flex-start;
 }
 
+.chat-line.tool .chat-bubble {
+  border-style: dashed;
+  opacity: 0.95;
+}
+
 .chat-msg {
   display: grid;
   gap: 6px;

ui/src/styles/chat/text.css

@@ -2,6 +2,22 @@
    CHAT TEXT STYLING
    ============================================= */
 
+.chat-thinking {
+  margin-bottom: 10px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px dashed rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+:root[data-theme="light"] .chat-thinking {
+  border-color: rgba(16, 24, 40, 0.18);
+  background: rgba(16, 24, 40, 0.03);
+}
+
 .chat-text {
   font-size: 14px;
   line-height: 1.5;