diff --git a/index.html b/index.html
index 81d2f56..7901bd0 100644
--- a/index.html
+++ b/index.html
@@ -971,6 +971,15 @@
         }
 
                     /* ── Chat ──────────────────────────────────────────────── */
+            /* Slot sits in document flow — zero height when closed */
+            #chat-panel-slot {
+                display: none;
+                padding-top: 8px;
+                padding-bottom: 6px;
+            }
+            #chat-panel-slot.open {
+                display: block;
+            }
             .nav-chat-panel {
                 width: 340px;
                 max-width: 100%;
@@ -980,14 +989,8 @@
                 border-radius: 18px;
                 box-shadow: 0 24px 80px rgba(0,0,0,0.5);
                 overflow: hidden;
-                display: none;
-                flex-direction: column;
-                z-index: 9999;
-                margin-top: 66px;
-                margin-left: 24px;
-            }
-            .nav-chat-panel.open {
                 display: flex;
+                flex-direction: column;
             }
             .nav-chat-main {
                 display: flex;
@@ -1140,14 +1143,16 @@
     </header>
 
     <!-- ═══════════════════════════════════════════════════════════════
-         CHAT PANEL (standalone below fixed header)
+         CHAT PANEL SLOT (in document flow — pushes hero down when open)
          ═══════════════════════════════════════════════════════════════ -->
-    <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 id="chat-panel-slot" style="padding-left:24px; padding-right:24px; padding-top:66px;">
+        <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="chat-history" id="chat-msgs"></div>
     </div>
 
     <!-- ═══════════════════════════════════════════════════════════════
@@ -1847,7 +1852,7 @@
 
         function chatToggle() {
             chatOpen = !chatOpen;
-            document.getElementById("chat-panel").classList.toggle("open", chatOpen);
+            document.getElementById("chat-panel-slot").classList.toggle("open", chatOpen);
             document.getElementById("chat-panel").setAttribute("aria-hidden", !chatOpen);
             if (chatOpen) {
                 if (!chatId) {
@@ -1865,7 +1870,7 @@
         function chatOpenSilent() {
             if (!chatOpen) {
                 chatOpen = true;
-                document.getElementById("chat-panel").classList.add("open");
+                document.getElementById("chat-panel-slot").classList.add("open");
                 document.getElementById("chat-panel").setAttribute("aria-hidden", "false");
             }
         }