diff --git a/static/css/04-interactive/_chat.css b/static/css/04-interactive/_chat.css
index 640fd9a..e8d6892 100644
--- a/static/css/04-interactive/_chat.css
+++ b/static/css/04-interactive/_chat.css
@@ -81,7 +81,7 @@
 }
 
 /* ==========================================================================
-   Header — uses black-bar like action bar
+   Header — accent-blue for visual distinction
    ========================================================================== */
 
 .chat-header {
@@ -89,8 +89,8 @@
     align-items: center;
     gap: 8px;
     padding: 10px 14px;
-    background: var(--black-bar, #2b2b2b);
-    color: var(--action-bar-text, #ffffff);
+    background: var(--accent-blue, #0066cc);
+    color: #ffffff;
     font-family: 'Quicksand', sans-serif;
     font-size: 0.85rem;
     font-weight: 600;
@@ -167,7 +167,7 @@
 }
 
 .chat-user {
-    background: var(--black-bar, #2b2b2b);
+    background: var(--accent-blue, #0066cc);
     color: #fff;
     align-self: flex-end;
     border-bottom-right-radius: 2px;
@@ -243,9 +243,9 @@
 }
 
 .chat-chip:hover {
-    background: var(--black-bar, #2b2b2b);
+    background: var(--accent-blue, #0066cc);
     color: #fff;
-    border-color: var(--black-bar, #2b2b2b);
+    border-color: var(--accent-blue, #0066cc);
 }
 
 /* ==========================================================================
@@ -279,7 +279,7 @@
 }
 
 .chat-send-btn {
-    background: var(--black-bar, #2b2b2b);
+    background: var(--accent-blue, #0066cc);
     color: #fff;
     border: none;
     border-radius: 50%;
@@ -295,7 +295,7 @@
 }
 
 .chat-send-btn:hover {
-    background: var(--accent-blue, #0066cc);
+    background: #004d99;
 }
 
 /* ==========================================================================
@@ -332,7 +332,7 @@
 }
 
 .theme-clean .chat-header {
-    background: #111111;
+    background: #003d7a;
 }
 
 .theme-clean .chat-agent {
@@ -341,7 +341,7 @@
 }
 
 .theme-clean .chat-user {
-    background: #333333;
+    background: #004d99;
 }
 
 .theme-clean .chat-error {
@@ -372,9 +372,9 @@
 }
 
 .theme-clean .chat-chip:hover {
-    background: #333333;
+    background: #004d99;
     color: #fff;
-    border-color: #333333;
+    border-color: #004d99;
 }
 
 .theme-clean .chat-typing-dot {
diff --git a/templates/partials/widgets/chat-widget.html b/templates/partials/widgets/chat-widget.html
index 852b4b1..03bf240 100644
--- a/templates/partials/widgets/chat-widget.html
+++ b/templates/partials/widgets/chat-widget.html
@@ -3,7 +3,7 @@
 <!-- AI Chat Widget — CV Assistant Mascot -->
 <button
     id="chat-toggle-btn"
-    class="chat-toggle-btn no-print"
+    class="chat-toggle-btn no-print has-tooltip tooltip-left"
     aria-label="{{if eq .Lang "es"}}Asistente del CV{{else}}CV Assistant{{end}}"
     data-tooltip="{{if eq .Lang "es"}}Asistente del CV{{else}}CV Assistant{{end}}"
     _="on click toggle .chat-open on #chat-panel
@@ -47,36 +47,26 @@
     <div class="chat-suggestions">
         {{if eq .Lang "es"}}
         <button type="button" class="chat-chip"
-            _="on click set #chat-input.value to '¿Qué proyectos en Go ha hecho?'
-               then call htmx.trigger(#chat-form, 'submit')">¿Proyectos en Go?</button>
+            onclick="document.getElementById('chat-input').value='¿Qué proyectos en Go ha hecho?'; htmx.trigger('#chat-form', 'submit');">¿Proyectos en Go?</button>
         <button type="button" class="chat-chip"
-            _="on click set #chat-input.value to '¿Cuántos años de experiencia tiene?'
-               then call htmx.trigger(#chat-form, 'submit')">¿Años de experiencia?</button>
+            onclick="document.getElementById('chat-input').value='¿Cuántos años de experiencia tiene?'; htmx.trigger('#chat-form', 'submit');">¿Años de experiencia?</button>
         <button type="button" class="chat-chip"
-            _="on click set #chat-input.value to '¿En qué empresas ha trabajado?'
-               then call htmx.trigger(#chat-form, 'submit')">¿Empresas?</button>
+            onclick="document.getElementById('chat-input').value='¿En qué empresas ha trabajado?'; htmx.trigger('#chat-form', 'submit');">¿Empresas?</button>
         <button type="button" class="chat-chip"
-            _="on click set #chat-input.value to '¿Conoce React?'
-               then call htmx.trigger(#chat-form, 'submit')">¿Conoce React?</button>
+            onclick="document.getElementById('chat-input').value='¿Conoce React?'; htmx.trigger('#chat-form', 'submit');">¿Conoce React?</button>
         <button type="button" class="chat-chip"
-            _="on click set #chat-input.value to '¿Qué certificaciones tiene?'
-               then call htmx.trigger(#chat-form, 'submit')">¿Certificaciones?</button>
+            onclick="document.getElementById('chat-input').value='¿Qué certificaciones tiene?'; htmx.trigger('#chat-form', 'submit');">¿Certificaciones?</button>
         {{else}}
         <button type="button" class="chat-chip"
-            _="on click set #chat-input.value to 'What Go projects has he built?'
-               then call htmx.trigger(#chat-form, 'submit')">Go projects?</button>
+            onclick="document.getElementById('chat-input').value='What Go projects has he built?'; htmx.trigger('#chat-form', 'submit');">Go projects?</button>
         <button type="button" class="chat-chip"
-            _="on click set #chat-input.value to 'How many years of experience?'
-               then call htmx.trigger(#chat-form, 'submit')">Years of experience?</button>
+            onclick="document.getElementById('chat-input').value='How many years of experience?'; htmx.trigger('#chat-form', 'submit');">Years of experience?</button>
         <button type="button" class="chat-chip"
-            _="on click set #chat-input.value to 'What companies has he worked at?'
-               then call htmx.trigger(#chat-form, 'submit')">Companies?</button>
+            onclick="document.getElementById('chat-input').value='What companies has he worked at?'; htmx.trigger('#chat-form', 'submit');">Companies?</button>
         <button type="button" class="chat-chip"
-            _="on click set #chat-input.value to 'Does he know React?'
-               then call htmx.trigger(#chat-form, 'submit')">Knows React?</button>
+            onclick="document.getElementById('chat-input').value='Does he know React?'; htmx.trigger('#chat-form', 'submit');">Knows React?</button>
         <button type="button" class="chat-chip"
-            _="on click set #chat-input.value to 'What certifications?'
-               then call htmx.trigger(#chat-form, 'submit')">Certifications?</button>
+            onclick="document.getElementById('chat-input').value='What certifications?'; htmx.trigger('#chat-form', 'submit');">Certifications?</button>
         {{end}}
     </div>