Rainbow colors for sidebar in same order as buttons

Order: SEND, TEND, SOMA, FEEL, NEED, PRACTICE NVC, REPAIR, WISDOM, LOVE
Each tool description has matching rainbow color from red to purple

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

static/index.html

@@ -115,20 +115,43 @@
             line-height: 1.4;
         }
 
-        .tool-desc.tend-desc {
-            border-left-color: var(--tend-color);
-            background: rgba(16, 185, 129, 0.1);
+        /* Rainbow sidebar colors */
+        .tool-desc.send-desc {
+            border-left-color: #ef4444;
+            background: rgba(239, 68, 68, 0.1);
         }
-
-        .tool-desc.love-desc {
-            border-left-color: var(--love-color);
-            background: rgba(236, 72, 153, 0.1);
+        .tool-desc.tend-desc {
+            border-left-color: #f97316;
+            background: rgba(249, 115, 22, 0.1);
         }
-
-        .tool-desc.wisdom-desc {
+        .tool-desc.soma-desc {
             border-left-color: #f59e0b;
             background: rgba(245, 158, 11, 0.1);
         }
+        .tool-desc.feel-desc {
+            border-left-color: #eab308;
+            background: rgba(234, 179, 8, 0.1);
+        }
+        .tool-desc.need-desc {
+            border-left-color: #22c55e;
+            background: rgba(34, 197, 94, 0.1);
+        }
+        .tool-desc.nvc-desc {
+            border-left-color: #14b8a6;
+            background: rgba(20, 184, 166, 0.1);
+        }
+        .tool-desc.repair-desc {
+            border-left-color: #3b82f6;
+            background: rgba(59, 130, 246, 0.1);
+        }
+        .tool-desc.wisdom-desc {
+            border-left-color: #6366f1;
+            background: rgba(99, 102, 241, 0.1);
+        }
+        .tool-desc.love-desc {
+            border-left-color: #a855f7;
+            background: rgba(168, 85, 247, 0.1);
+        }
 
         /* Settings */
         .settings-section {
@@ -822,45 +845,50 @@
             <div class="tool-list">
                 <h3>ARI Tools</h3>
 
+                <div class="tool-desc send-desc">
+                    <h4>SEND</h4>
+                    <p>Send your message to your partner.</p>
+                </div>
+
                 <div class="tool-desc tend-desc" onclick="showToolInfo('tend')">
                     <h4>TEND</h4>
                     <p>Transform your message with clarity and warmth. Preserves your authentic voice.</p>
                 </div>
 
-                <div class="tool-desc" onclick="showToolInfo('nvc')">
-                    <h4>NVC</h4>
-                    <p>Guided I-statement builder. Step-by-step help crafting what you want to say.</p>
+                <div class="tool-desc soma-desc" onclick="showToolInfo('soma')">
+                    <h4>SOMA</h4>
+                    <p>Body check-in. What does your body know?</p>
                 </div>
 
-                <div class="tool-desc" onclick="showToolInfo('feel')">
+                <div class="tool-desc feel-desc" onclick="showToolInfo('feel')">
                     <h4>FEEL</h4>
                     <p>Identify feelings in the conversation. What emotions are present?</p>
                 </div>
 
-                <div class="tool-desc" onclick="showToolInfo('need')">
+                <div class="tool-desc need-desc" onclick="showToolInfo('need')">
                     <h4>NEED</h4>
                     <p>Extract underlying needs. What's really being asked for?</p>
                 </div>
 
-                <div class="tool-desc" onclick="showToolInfo('repair')">
+                <div class="tool-desc nvc-desc" onclick="showToolInfo('nvc')">
+                    <h4>PRACTICE NVC</h4>
+                    <p>Guided I-statement builder. Step-by-step help crafting what you want to say.</p>
+                </div>
+
+                <div class="tool-desc repair-desc" onclick="showToolInfo('repair')">
                     <h4>REPAIR</h4>
                     <p>After ruptures. Help craft genuine reconnection.</p>
                 </div>
 
-                <div class="tool-desc" onclick="showToolInfo('soma')">
-                    <h4>SOMA</h4>
-                    <p>Body check-in. What does your body know?</p>
+                <div class="tool-desc wisdom-desc" onclick="showToolInfo('wisdom')">
+                    <h4>WISDOM</h4>
+                    <p>Draw from sacred texts. Choose your tradition for grounded wisdom.</p>
                 </div>
 
                 <div class="tool-desc love-desc" onclick="showToolInfo('love')">
                     <h4>LOVE</h4>
                     <p>Slow down. Take a breath. Return to presence.</p>
                 </div>
-
-                <div class="tool-desc wisdom-desc" onclick="showToolInfo('wisdom')">
-                    <h4>WISDOM</h4>
-                    <p>Draw from sacred texts. Choose your tradition for grounded wisdom.</p>
-                </div>
             </div>
 
             <div class="settings-section">