From 596f99ed0c290ed1e5511b9511264d1c384329b5 Mon Sep 17 00:00:00 2001
From: perf3ct <jonfuller2012@gmail.com>
Date: Sun, 1 Jun 2025 03:23:04 +0000
Subject: [PATCH] feat(llm): do a better job with the "thinking" colors

---
 apps/client/src/stylesheets/llm_chat.css | 47 ++++++++++++++++--------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/stylesheets/llm_chat.css b/apps/client/src/stylesheets/llm_chat.css
index 1b4e0c49f..9199d44c7 100644
--- a/apps/client/src/stylesheets/llm_chat.css
+++ b/apps/client/src/stylesheets/llm_chat.css
@@ -281,13 +281,18 @@
 }
 
 .thinking-bubble {
-    background: linear-gradient(135deg, #f8f9ff 0%, #e3e7ff 100%);
-    border: 1px solid #d1d9ff;
-    border-radius: 12px;
+    background-color: var(--accented-background-color, var(--main-background-color));
+    border: 1px solid var(--subtle-border-color, var(--main-border-color));
+    border-radius: 0.75rem;
     padding: 0.75rem;
-    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     position: relative;
     overflow: hidden;
+    transition: all 0.2s ease;
+}
+
+.thinking-bubble:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
 .thinking-bubble::before {
@@ -297,18 +302,19 @@
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
+    background: linear-gradient(90deg, transparent, var(--hover-item-background-color, rgba(0, 0, 0, 0.03)), transparent);
     animation: shimmer 2s infinite;
+    opacity: 0.5;
 }
 
 .thinking-header {
     cursor: pointer;
     transition: all 0.2s ease;
+    border-radius: 0.375rem;
 }
 
 .thinking-header:hover {
-    background: rgba(99, 102, 241, 0.05);
-    border-radius: 8px;
+    background-color: var(--hover-item-background-color, rgba(0, 0, 0, 0.03));
     padding: 0.25rem;
     margin: -0.25rem;
 }
@@ -322,7 +328,7 @@
 .thinking-dots span {
     width: 6px;
     height: 6px;
-    background: #6366f1;
+    background-color: var(--link-color, var(--hover-item-text-color));
     border-radius: 50%;
     animation: thinkingPulse 1.4s infinite ease-in-out;
 }
@@ -341,12 +347,18 @@
 
 .thinking-label {
     font-weight: 500;
-    color: #6366f1 !important;
+    color: var(--link-color, var(--hover-item-text-color)) !important;
 }
 
 .thinking-toggle {
-    color: #6366f1 !important;
+    color: var(--muted-text-color) !important;
     transition: transform 0.2s ease;
+    background: transparent !important;
+    border: none !important;
+}
+
+.thinking-toggle:hover {
+    color: var(--main-text-color) !important;
 }
 
 .thinking-toggle.expanded {
@@ -356,7 +368,7 @@
 .thinking-content {
     margin-top: 0.75rem;
     padding-top: 0.75rem;
-    border-top: 1px solid #e5e7eb;
+    border-top: 1px solid var(--subtle-border-color, var(--main-border-color));
     animation: expandDown 0.3s ease-out;
 }
 
@@ -364,15 +376,20 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
     font-size: 0.875rem;
     line-height: 1.5;
-    color: #4b5563;
+    color: var(--main-text-color);
     white-space: pre-wrap;
     word-wrap: break-word;
-    background: rgba(255, 255, 255, 0.7);
+    background-color: var(--input-background-color);
     padding: 0.75rem;
-    border-radius: 8px;
-    border: 1px solid rgba(99, 102, 241, 0.1);
+    border-radius: 0.5rem;
+    border: 1px solid var(--subtle-border-color, var(--main-border-color));
     max-height: 300px;
     overflow-y: auto;
+    transition: border-color 0.2s ease;
+}
+
+.thinking-text:hover {
+    border-color: var(--main-border-color);
 }
 
 /* Animations */