From 55968e022df8bab0bbfcc451d4c5edcdb3603906 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 8 Apr 2026 10:36:52 +0100
Subject: [PATCH] fix: move chat button to left side matching existing button
 stack

Chat button and panel now anchor from left: 2rem to match the
zoom, shortcuts, and other fixed buttons. Panel opens rightward
so content is always visible.
---
 static/css/04-interactive/_chat.css | 31 ++++++++++++++++-------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/static/css/04-interactive/_chat.css b/static/css/04-interactive/_chat.css
index 2866bc5..f997480 100644
--- a/static/css/04-interactive/_chat.css
+++ b/static/css/04-interactive/_chat.css
@@ -3,14 +3,14 @@
    Floating AI chat panel for CV questions
    ============================================================================ */
 
-/* Toggle Button */
+/* Toggle Button — left side, above the other fixed buttons */
 .chat-toggle-btn {
     position: fixed;
-    bottom: 100px;
-    right: 24px;
+    bottom: 14rem;
+    left: 2rem;
     z-index: 1000;
-    width: 48px;
-    height: 48px;
+    width: 50px;
+    height: 50px;
     border-radius: 50%;
     background: var(--accent-color, #2563eb);
     color: #fff;
@@ -20,20 +20,23 @@
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
-    transition: transform 0.2s, background 0.2s;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+    opacity: 0.6;
 }
 
 .chat-toggle-btn:hover {
-    transform: scale(1.1);
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
     background: var(--accent-color-hover, #1d4ed8);
 }
 
-/* Panel */
+/* Panel — anchored from the left, above the button */
 .chat-panel {
     position: fixed;
-    bottom: 160px;
-    right: 24px;
+    bottom: 18.5rem;
+    left: 2rem;
     width: 380px;
     max-height: 500px;
     background: var(--bg-primary, #fff);
@@ -213,16 +216,16 @@
 @media (max-width: 480px) {
     .chat-panel {
         bottom: 0;
-        right: 0;
         left: 0;
+        right: 0;
         width: 100%;
         max-height: 60vh;
         border-radius: 12px 12px 0 0;
     }
 
     .chat-toggle-btn {
-        bottom: 80px;
-        right: 16px;
+        bottom: 12rem;
+        left: 1rem;
     }
 }