From 570c9d0951d0e867ec1b3579006fdc9acaf8e1c9 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@derez.ai>
Date: Sat, 6 Jun 2026 17:17:54 -0300
Subject: [PATCH] chat: move widget to standalone bar below header, panel above
 input, 340px fixed width, blue border, left-aligned

---
 index.html | 78 ++++++++++++++++++++++++++----------------------------
 1 file changed, 37 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index e638a9b..335949a 100644
--- a/index.html
+++ b/index.html
@@ -336,7 +336,7 @@
            HERO
            ══════════════════════════════════════════════════════════ */
         .hero {
-            padding: 140px 0 80px;
+            padding: 104px 0 80px;
             text-align: center;
             position: relative;
             overflow: hidden;
@@ -960,7 +960,7 @@
 
             .features-grid { grid-template-columns: 1fr; }
             .hero-stats { gap: 24px; }
-            .hero { padding: 110px 0 60px; }
+            .hero { padding: 90px 0 60px; }
             section { padding: 60px 0; }
             .pricing-card { padding: 32px 24px; }
 
@@ -971,47 +971,37 @@
         }
     }
 
-            /* ── Nav Chat ──────────────────────────────────────────── */
-            .nav-chat {
-                position: relative;
+            /* ── Chat Bar (standalone below header) ───────────────── */
+            .nav-chat-wrap {
                 display: flex;
-                align-items: center;
+                flex-direction: column;
+                align-items: flex-start;
                 width: 340px;
-                height: 36px;
-                --chat-panel-height: 300px;
+                max-width: 100%;
+                position: relative;
             }
             .nav-chat-panel {
-                position: absolute;
-                top: calc(100% + 6px);
-                left: 0;
                 width: 340px;
-                min-width: 340px;
-                max-width: 340px;
-                height: var(--chat-panel-height);
+                max-width: 100%;
+                height: 300px;
                 background: var(--bg-card);
                 border: 1px solid var(--accent);
                 border-radius: 18px;
                 box-shadow: 0 24px 80px rgba(0,0,0,0.5);
                 overflow: hidden;
-                visibility: hidden;
-                opacity: 0;
-                pointer-events: none;
-                display: flex;
+                display: none;
                 flex-direction: column;
-                transition: opacity 0.22s ease, visibility 0.22s ease;
+                margin-bottom: 8px;
                 z-index: 9999;
             }
             .nav-chat.open .nav-chat-panel {
-                visibility: visible;
-                opacity: 1;
-                pointer-events: auto;
+                display: flex;
             }
             .nav-chat-main {
-                position: relative;
-                z-index: 2;
                 display: flex;
                 align-items: center;
-                width: 100%;
+                width: 340px;
+                max-width: 100%;
                 height: 36px;
                 background: var(--bg-inner);
                 border: 1px solid var(--border);
@@ -1020,7 +1010,7 @@
                 flex-shrink: 0;
                 transition: border-color 0.25s, box-shadow 0.25s;
             }
-            .nav-chat:focus-within .nav-chat-main {
+            .nav-chat-main:focus-within {
                 border-color: var(--accent);
                 box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
             }
@@ -1108,7 +1098,7 @@
                 opacity: 0.6;
             }
             @media (max-width: 700px) {
-                .nav-chat { display: none; }
+                .nav-chat-wrap { display: none; }
             }
         </style>
 </head>
@@ -1136,20 +1126,6 @@
                 <li><a href="#pricing">Pricing</a></li>
                 <li><a href="#faq">FAQ</a></li>
             </ul>
-            <div class="nav-chat" id="nav-chat">
-                <div class="nav-chat-panel" id="chat-panel" aria-hidden="true">
-                    <div class="chat-panel-header">
-                        <span class="chat-panel-title">💬 Sales Agent</span>
-                        <button class="chat-panel-close" id="chat-panel-close" onclick="chatClose()">✕</button>
-                    </div>
-                    <div class="chat-history" id="chat-msgs"></div>
-                </div>
-                <div class="nav-chat-main">
-                    <button class="nav-chat-toggle" id="nav-chat-toggle" onclick="chatToggle()" aria-label="Toggle chat history">💬</button>
-                    <input type="text" class="nav-chat-input" id="chat-input" placeholder="Ask your sales agent" onkeydown="chatKey(event)" />
-                    <button class="nav-chat-send" id="chat-send-btn" onclick="chatSend()">➤</button>
-                </div>
-            </div>
 
             <div class="header-actions">
                 <a href="https://app.derez.ai" class="btn-login">
@@ -1167,6 +1143,26 @@
         </div>
     </header>
 
+    <!-- ═══════════════════════════════════════════════════════════════
+         CHAT BAR (standalone below fixed header)
+         ═══════════════════════════════════════════════════════════════ -->
+    <div class="container" style="padding-top: 66px; padding-bottom: 6px;">
+        <div class="nav-chat-wrap" id="nav-chat">
+            <div class="nav-chat-panel" id="chat-panel" aria-hidden="true">
+                <div class="chat-panel-header">
+                    <span class="chat-panel-title">💬 Sales Agent</span>
+                    <button class="chat-panel-close" id="chat-panel-close" onclick="chatClose()">✕</button>
+                </div>
+                <div class="chat-history" id="chat-msgs"></div>
+            </div>
+            <div class="nav-chat-main">
+                <button class="nav-chat-toggle" id="nav-chat-toggle" onclick="chatToggle()" aria-label="Toggle chat history">💬</button>
+                <input type="text" class="nav-chat-input" id="chat-input" placeholder="Ask your sales agent" onkeydown="chatKey(event)" />
+                <button class="nav-chat-send" id="chat-send-btn" onclick="chatSend()">➤</button>
+            </div>
+        </div>
+    </div>
+
     <!-- ═══════════════════════════════════════════════════════════════
          HERO
          ═══════════════════════════════════════════════════════════════ -->