From 4f61c415cfd19e834cfef4d2139070cf8b950938 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Wed, 15 Apr 2026 11:14:01 -0300
Subject: [PATCH] fix: Improve suggestion button hover z-index and styling

---
 ui/suite/chat/chat.css | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/ui/suite/chat/chat.css b/ui/suite/chat/chat.css
index 1129eba..5672d7a 100644
--- a/ui/suite/chat/chat.css
+++ b/ui/suite/chat/chat.css
@@ -607,6 +607,8 @@ footer {
     padding-bottom: 4px;
     max-height: 100px;
     overflow-y: auto;
+    position: relative;
+    z-index: 0;
 }
 
 .suggestion-chip,
@@ -615,7 +617,7 @@ footer {
   align-items: center;
   gap: 4px;
   padding: 5px 10px;
-  background: transparent;
+  background: var(--surface, #fff);
   border: 1px solid var(--border, var(--border-color, #d0d0d0));
   border-radius: 16px;
   color: #333;
@@ -631,9 +633,13 @@ footer {
 
 .suggestion-chip:hover,
 .suggestion-button:hover {
-  border: 1px solid var(--accent, #3b82f6);
+  border-color: var(--accent, #3b82f6);
+  border-width: 1px;
+  border-style: solid;
   transform: translateY(-1px);
-  z-index: 2;
+  z-index: 100;
+  background: var(--surface, #fff);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
 }
 
 /* Dark theme suggestion buttons */
@@ -641,11 +647,16 @@ footer {
 [data-theme="dark"] .suggestion-button,
 [data-theme="sentient"] .suggestion-chip,
 [data-theme="sentient"] .suggestion-button {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--surface, #1a1a24);
     border-color: var(--border, #2a2a2a);
     color: var(--text, #e5e5e5);
 }
 
+[data-theme="dark"] .suggestion-chip:hover,
+[data-theme="sentient"] .suggestion-chip:hover {
+    background: var(--surface, #252530);
+}
+
 .suggestion-chip::before,
 .suggestion-button::before {
     content: "";
@@ -659,12 +670,6 @@ footer {
     transition: opacity 0.2s ease;
 }
 
-.suggestion-chip:hover,
-.suggestion-button:hover {
-    border: 1px solid var(--accent, #3b82f6);
-    transform: translateY(-1px);
-}
-
 .suggestion-chip:hover::before,
 .suggestion-button:hover::before {
     opacity: 0.1;