From fd22a5ed9d8d5f5c9575ba082ec150361a3d239d Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 3 Feb 2026 22:15:03 +0000
Subject: [PATCH] fix(ui): restore stop button styling

Avoid color-mix for the stop button danger palette so it renders consistently across runtimes; add safe rgba fallbacks for the background colors.
---
 packages/ui/src/styles/messaging/prompt-input.css | 8 ++++----
 packages/ui/src/styles/tokens.css                 | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index 82f051e3..bd0f542d 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -166,17 +166,17 @@
 
 .stop-button {
   @apply w-10 h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
-  background-color: var(--button-danger-bg);
-  color: var(--button-danger-text);
+  background-color: var(--button-danger-bg, rgba(239, 68, 68, 0.85));
+  color: var(--button-danger-text, #ffffff);
 }
 
 .stop-button:hover:not(:disabled) {
-  background-color: var(--button-danger-hover-bg);
+  background-color: var(--button-danger-hover-bg, rgba(239, 68, 68, 0.9));
   @apply opacity-95 scale-105;
 }
 
 .stop-button:active:not(:disabled) {
-  background-color: var(--button-danger-active-bg);
+  background-color: var(--button-danger-active-bg, rgba(239, 68, 68, 1));
   @apply scale-95;
 }
 
diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css
index c19e388b..db1df788 100644
--- a/packages/ui/src/styles/tokens.css
+++ b/packages/ui/src/styles/tokens.css
@@ -103,9 +103,9 @@
   --timeline-segment-active-text: #032f23;
   --timeline-segment-active-ring: inset 0 0 0 1px rgba(3, 47, 35, 0.28);
 
-  --button-danger-bg: color-mix(in oklab, var(--status-error) 85%, var(--surface-base));
-  --button-danger-hover-bg: color-mix(in oklab, var(--status-error) 90%, var(--surface-base));
-  --button-danger-active-bg: color-mix(in oklab, var(--status-error) 95%, var(--surface-base));
+  --button-danger-bg: rgba(239, 68, 68, 0.85);
+  --button-danger-hover-bg: rgba(239, 68, 68, 0.9);
+  --button-danger-active-bg: rgba(239, 68, 68, 1);
   --button-danger-text: #ffffff;
   --kbd-bg: var(--surface-secondary);
   --kbd-border: var(--border-base);