From 16dd150758ca115e0aa216c577545974615545f4 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 8 Apr 2026 13:37:32 +0100
Subject: [PATCH] fix: restore tooltip, accent-blue colors, fix chip click
 mechanism
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Restore has-tooltip tooltip-left on toggle button
- Use --accent-blue (#0066cc) as secondary color: header, user bubbles,
  send button, chip hover, input focus — breaks the all-black monotony
- Dark theme uses deeper blue (#003d7a header, #004d99 interactions)
- Fix chip click: replace Hyperscript htmx.trigger() call with direct
  onclick using JS htmx.trigger() — Hyperscript couldn't resolve the
  HTMX global properly
- Remove _chat.css @import from main.css (loaded separately already)
---
 static/css/04-interactive/_chat.css         | 24 ++++++++--------
 templates/partials/widgets/chat-widget.html | 32 +++++++--------------
 2 files changed, 23 insertions(+), 33 deletions(-)

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>