From c110689b6a5abea38754b0af41927432e34494f1 Mon Sep 17 00:00:00 2001
From: Simone Cavalli <simone.cavalli.gestione@gmail.com>
Date: Sat, 11 Jul 2026 08:34:25 +0200
Subject: [PATCH] fix: chat drawer above header + vertical "Chiudi" tab on left
 edge

Panel z-index raised to z-[60] so it sits above the sticky page header
(z-50) that was covering the close control. Replaced the header X with a
notebook-divider-style vertical "Chiudi" tab protruding from the left edge.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/client/ChatPanel.tsx | 33 +++++++++++++++++------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/client/ChatPanel.tsx b/src/components/client/ChatPanel.tsx
index 24a83cd..d66a582 100644
--- a/src/components/client/ChatPanel.tsx
+++ b/src/components/client/ChatPanel.tsx
@@ -128,34 +128,39 @@ export function ChatPanel({ token, comments }: ChatPanelProps) {
       {/* Overlay — subtle backdrop on mobile */}
       {isOpen && (
         <div
-          className="fixed inset-0 z-30 bg-black/10 lg:hidden"
+          className="fixed inset-0 z-50 bg-black/10 lg:hidden"
           onClick={closeChat}
           aria-hidden="true"
         />
       )}
 
-      {/* Slide-in panel */}
+      {/* Slide-in panel — z-[60] so it sits above the sticky page header (z-50) */}
       <div
-        className={`fixed top-0 right-0 h-full z-40 w-full sm:w-[420px] bg-white shadow-2xl flex flex-col transition-transform duration-300 ease-in-out ${
+        className={`fixed top-0 right-0 h-full z-[60] w-full sm:w-[420px] bg-white shadow-2xl flex flex-col transition-transform duration-300 ease-in-out ${
           isOpen ? "translate-x-0" : "translate-x-full"
         }`}
         aria-label="Messaggi & Revisioni"
         role="dialog"
         aria-modal="true"
       >
+        {/* Vertical "Chiudi" tab — notebook-divider style, protrudes from the left edge */}
+        <button
+          type="button"
+          onClick={closeChat}
+          aria-label="Chiudi"
+          className="absolute left-0 top-1/2 flex -translate-x-full -translate-y-1/2 flex-col items-center gap-2 rounded-l-xl bg-[#1A463C] px-2 py-4 text-white shadow-lg transition-colors hover:bg-[#163a31]"
+        >
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth={2.2} viewBox="0 0 24 24" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+          </svg>
+          <span className="text-[11px] font-semibold uppercase tracking-[0.2em] [writing-mode:vertical-rl]">
+            Chiudi
+          </span>
+        </button>
+
         {/* Panel header */}
-        <div className="flex items-center justify-between px-5 py-4 border-b border-[#e5e7eb] shrink-0">
+        <div className="flex items-center px-5 py-4 border-b border-[#e5e7eb] shrink-0">
           <h2 className="text-base font-bold text-[#1a1a1a]">Messaggi & Revisioni</h2>
-          <button
-            type="button"
-            onClick={closeChat}
-            aria-label="Chiudi"
-            className="p-1.5 rounded-md text-[#71717a] hover:text-[#1a1a1a] hover:bg-[#f4f4f5] transition-colors"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24" aria-hidden="true">
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
         </div>
 
         {/* Chat feed */}