diff --git a/frontend/public/pages/chats.html b/frontend/public/pages/chats.html
index e54befb..4264ca1 100644
--- a/frontend/public/pages/chats.html
+++ b/frontend/public/pages/chats.html
@@ -155,24 +155,24 @@
               <div
                 x-show="message.thinking"
                 x-data="{ expanded: false }"
+                role="button"
+                tabindex="0"
                 @click="expanded = !expanded"
+                @keydown.enter.prevent="expanded = !expanded"
+                @keydown.space.prevent="expanded = !expanded"
+                class="mb-3 rounded-md border-l-2 border-primary-500/60 bg-primary-100/35 px-3 py-2 ring-1 ring-primary-400/20 cursor-pointer"
               >
-                <div class="cursor-pointer rounded-lg overflow-hidden bg-primary-100 hover:bg-primary-50">
-                  <div class="flex justify-center w-full px-3 py-2 text-xs text-primary-700 flex items-center gap-2 transition-colors">
-                    <span x-text="expanded ? '▼' : '◀'"></span>
-                    <span class="font-medium">Reasoning</span>
-                    <span x-text="expanded ? '▼' : '▶'"></span>
-                  </div>
-                  <div
-                    x-show="expanded"
-                    class="prose p-4 max-w-none text-sm prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
-                    x-html="renderMarkdown(message.thinking)"
-                  ></div>
+                <div class="flex items-center gap-2 text-xs font-medium text-primary-700 transition-colors">
+                  <span x-text="expanded ? '▾' : '▸'"></span>
+                  <span>Reasoning</span>
                 </div>
+                <div
+                  x-show="expanded"
+                  class="prose mt-2 max-w-none text-xs text-primary-700 opacity-90 prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
+                  x-html="renderMarkdown(message.thinking)"
+                ></div>
               </div>
 
-              <hr x-show="message.thinking" class="my-2 border-primary-400/50" />
-
               <div
                 x-show="message.role === 'assistant' && message.status === 'streaming' && !message.thinking && !message.content"
                 class="flex items-center gap-2 py-1"
diff --git a/frontend/styles.css b/frontend/styles.css
index 96b3847..09ae16c 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -77,36 +77,36 @@ body {
 
 @layer base {
   .dark {
-    /* Dark mode - dark backgrounds (50-300), light text (700-900) */
-    --color-primary-50: oklch(15% 0.08 290);
-    --color-primary-100: oklch(18% 0.1 290);
-    --color-primary-200: oklch(22% 0.12 290);
-    --color-primary-300: oklch(28% 0.15 290);
-    --color-primary-400: oklch(36% 0.18 290);
-    --color-primary-500: oklch(45% 0.2 290);
-    --color-primary-600: oklch(55% 0.18 290);
+    /* Dark mode - background and surface steps are intentionally lifted for a softer dark theme. */
+    --color-primary-50: oklch(25% 0.08 290);
+    --color-primary-100: oklch(31% 0.1 290);
+    --color-primary-200: oklch(36% 0.12 290);
+    --color-primary-300: oklch(48% 0.15 290);
+    --color-primary-400: oklch(52% 0.18 290);
+    --color-primary-500: oklch(58% 0.2 290);
+    --color-primary-600: oklch(62% 0.18 290);
     --color-primary-700: oklch(65% 0.15 290);
     --color-primary-800: oklch(75% 0.12 290);
     --color-primary-900: oklch(85% 0.08 290);
 
-    --color-secondary-50: oklch(15% 0.05 180);
-    --color-secondary-100: oklch(18% 0.07 180);
-    --color-secondary-200: oklch(22% 0.09 180);
-    --color-secondary-300: oklch(28% 0.11 180);
-    --color-secondary-400: oklch(36% 0.13 180);
-    --color-secondary-500: oklch(45% 0.15 180);
-    --color-secondary-600: oklch(55% 0.14 180);
+    --color-secondary-50: oklch(25% 0.05 180);
+    --color-secondary-100: oklch(31% 0.07 180);
+    --color-secondary-200: oklch(36% 0.09 180);
+    --color-secondary-300: oklch(48% 0.11 180);
+    --color-secondary-400: oklch(52% 0.13 180);
+    --color-secondary-500: oklch(58% 0.15 180);
+    --color-secondary-600: oklch(62% 0.14 180);
     --color-secondary-700: oklch(65% 0.12 180);
     --color-secondary-800: oklch(75% 0.09 180);
     --color-secondary-900: oklch(85% 0.06 180);
 
-    --color-tertiary-50: oklch(15% 0.008 60);
-    --color-tertiary-100: oklch(18% 0.01 60);
-    --color-tertiary-200: oklch(22% 0.015 60);
-    --color-tertiary-300: oklch(28% 0.02 60);
-    --color-tertiary-400: oklch(36% 0.025 60);
-    --color-tertiary-500: oklch(45% 0.03 60);
-    --color-tertiary-600: oklch(55% 0.025 60);
+    --color-tertiary-50: oklch(25% 0.008 60);
+    --color-tertiary-100: oklch(31% 0.01 60);
+    --color-tertiary-200: oklch(36% 0.015 60);
+    --color-tertiary-300: oklch(48% 0.02 60);
+    --color-tertiary-400: oklch(52% 0.025 60);
+    --color-tertiary-500: oklch(58% 0.03 60);
+    --color-tertiary-600: oklch(62% 0.025 60);
     --color-tertiary-700: oklch(65% 0.02 60);
     --color-tertiary-800: oklch(75% 0.015 60);
     --color-tertiary-900: oklch(85% 0.01 60);