Add rainbow colors to tool buttons (red → purple)

SEND: Red (#ef4444)
TEND: Orange-red (#f97316)
SOMA: Orange (#f59e0b)
FEEL: Yellow (#eab308)
NEED: Green (#22c55e)
PRACTICE NVC: Teal (#14b8a6)
REPAIR: Blue (#3b82f6)
WISDOM: Indigo (#6366f1)
LOVE: Purple (#a855f7)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

static/index.html

@@ -130,16 +130,6 @@
             background: rgba(245, 158, 11, 0.1);
         }
 
-        .tool-btn.wisdom {
-            border-color: #f59e0b;
-            color: #f59e0b;
-        }
-
-        .tool-btn.wisdom:hover, .tool-btn.wisdom.active {
-            background: #f59e0b;
-            color: white;
-        }
-
         /* Settings */
         .settings-section {
             padding: 16px;
@@ -444,45 +434,85 @@
             gap: 4px;
         }
 
-        .tool-btn:hover {
-            border-color: var(--accent);
-            color: var(--accent-light);
-            background: rgba(99, 102, 241, 0.1);
+        /* Rainbow button colors: Red → Purple */
+        .tool-btn.send {
+            border-color: #ef4444;
+            color: #ef4444;
         }
-
-        .tool-btn.active {
-            border-color: var(--accent);
-            background: var(--accent);
+        .tool-btn.send:hover, .tool-btn.send.active {
+            background: #ef4444;
             color: white;
         }
 
         .tool-btn.tend {
-            border-color: var(--tend-color);
-            color: var(--tend-color);
+            border-color: #f97316;
+            color: #f97316;
         }
-
         .tool-btn.tend:hover, .tool-btn.tend.active {
-            background: var(--tend-color);
+            background: #f97316;
             color: white;
         }
 
-        .tool-btn.send {
-            background: var(--accent);
-            border-color: var(--accent);
+        .tool-btn.soma {
+            border-color: #f59e0b;
+            color: #f59e0b;
+        }
+        .tool-btn.soma:hover, .tool-btn.soma.active {
+            background: #f59e0b;
             color: white;
         }
 
-        .tool-btn.send:hover {
-            background: var(--accent-light);
+        .tool-btn.feel {
+            border-color: #eab308;
+            color: #eab308;
+        }
+        .tool-btn.feel:hover, .tool-btn.feel.active {
+            background: #eab308;
+            color: white;
         }
 
-        .tool-btn.love {
-            border-color: var(--love-color);
-            color: var(--love-color);
+        .tool-btn.need {
+            border-color: #22c55e;
+            color: #22c55e;
+        }
+        .tool-btn.need:hover, .tool-btn.need.active {
+            background: #22c55e;
+            color: white;
+        }
+
+        .tool-btn.nvc {
+            border-color: #14b8a6;
+            color: #14b8a6;
+        }
+        .tool-btn.nvc:hover, .tool-btn.nvc.active {
+            background: #14b8a6;
+            color: white;
         }
 
+        .tool-btn.repair {
+            border-color: #3b82f6;
+            color: #3b82f6;
+        }
+        .tool-btn.repair:hover, .tool-btn.repair.active {
+            background: #3b82f6;
+            color: white;
+        }
+
+        .tool-btn.wisdom {
+            border-color: #6366f1;
+            color: #6366f1;
+        }
+        .tool-btn.wisdom:hover, .tool-btn.wisdom.active {
+            background: #6366f1;
+            color: white;
+        }
+
+        .tool-btn.love {
+            border-color: #a855f7;
+            color: #a855f7;
+        }
         .tool-btn.love:hover, .tool-btn.love.active {
-            background: var(--love-color);
+            background: #a855f7;
             color: white;
         }
 
@@ -916,11 +946,11 @@
             <div class="tool-buttons">
                 <button class="tool-btn send" onclick="sendMessage()">SEND</button>
                 <button class="tool-btn tend" onclick="useTool('tend')">TEND</button>
-                <button class="tool-btn" onclick="useTool('soma')">SOMA</button>
-                <button class="tool-btn" onclick="useTool('feel')">FEEL</button>
-                <button class="tool-btn" onclick="useTool('need')">NEED</button>
-                <button class="tool-btn" onclick="useTool('nvc')">PRACTICE NVC</button>
-                <button class="tool-btn" onclick="useTool('repair')">REPAIR</button>
+                <button class="tool-btn soma" onclick="useTool('soma')">SOMA</button>
+                <button class="tool-btn feel" onclick="useTool('feel')">FEEL</button>
+                <button class="tool-btn need" onclick="useTool('need')">NEED</button>
+                <button class="tool-btn nvc" onclick="useTool('nvc')">PRACTICE NVC</button>
+                <button class="tool-btn repair" onclick="useTool('repair')">REPAIR</button>
                 <button class="tool-btn wisdom" onclick="useTool('wisdom')">WISDOM</button>
                 <button class="tool-btn love" onclick="useTool('love')">LOVE</button>
             </div>