feat: in-nav sales agent chat like odoo site - input with icon/send in nav, panel drops down below

index.html

@@ -971,65 +971,130 @@
         }
     }
 
-            /* ── Chat Panel (fixed overlay, toggled from nav) ──────── */
+            /* ── Nav Chat ──────────────────────────────────────────── */
-            .chat-panel {
+            .nav-chat {
-                display: none;
+                position: relative;
-                flex-direction: column;
+                display: flex;
-                position: fixed;
+                align-items: flex-end;
-                bottom: 20px;
+                width: 340px;
-                right: 20px;
+                height: 36px;
-                width: 360px;
+                min-height: 36px;
-                max-height: 520px;
+                --chat-panel-height: 300px;
+                overflow: visible;
+            }
+            .nav-chat-main {
+                position: relative;
+                z-index: 2;
+                display: flex;
+                align-items: center;
+                width: 100%;
+                height: 36px;
+                background: var(--bg-inner);
+                border: 1px solid var(--border);
+                border-radius: 999px;
+                overflow: hidden;
+                transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
+            }
+            .nav-chat:focus-within .nav-chat-main {
+                border-color: var(--accent);
+                box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
+            }
+            .nav-chat.open .nav-chat-main {
+                border-color: var(--accent);
+                transform: translateY(var(--chat-panel-height));
+            }
+            .nav-chat-panel {
+                position: absolute;
+                right: 0;
+                top: 0;
+                z-index: 1;
+                width: 100%;
+                height: var(--chat-panel-height);
                 background: var(--bg-card);
                 border: 1px solid var(--border);
-                border-radius: var(--radius-card);
+                border-radius: 18px;
-                box-shadow: var(--shadow);
+                box-shadow: 0 24px 80px rgba(0,0,0,0.5);
                 overflow: hidden;
-                z-index: 9999;
+                visibility: hidden;
-                animation: chatSlideUp 0.28s ease;
+                opacity: 0;
+                transform: translateY(-12px);
+                pointer-events: none;
+                display: flex;
+                flex-direction: column;
+                transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
             }
-            .chat-panel.open { display: flex; }
+            .nav-chat.open .nav-chat-panel {
-            @keyframes chatSlideUp {
+                visibility: visible;
-                from { opacity: 0; transform: translateY(16px); }
+                opacity: 1;
-                to   { opacity: 1; transform: translateY(0); }
+                transform: translateY(0);
+                pointer-events: auto;
             }
-            .chat-header {
+            .chat-panel-header {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
-                padding: 16px 20px;
+                padding: 12px 16px;
-                background: var(--accent-dim);
                 border-bottom: 1px solid var(--border);
                 font-weight: 600;
+                font-size: 13px;
                 color: var(--text);
             }
-            .chat-header button {
+            .chat-panel-close {
                 background: none;
                 border: none;
                 color: var(--text-muted);
                 cursor: pointer;
-                font-size: 16px;
+                font-size: 14px;
-                padding: 0 4px;
+                padding: 2px 6px;
                 line-height: 1;
             }
-            .chat-header button:hover { color: var(--text); }
+            .chat-panel-close:hover { color: var(--text); }
-            .chat-msgs {
+            .chat-history {
                 flex: 1;
                 overflow-y: auto;
-                padding: 16px 20px;
+                padding: 12px 16px;
                 display: flex;
                 flex-direction: column;
-                gap: 10px;
+                gap: 8px;
-                min-height: 200px;
-                max-height: 340px;
             }
+            .nav-chat-toggle,
+            .nav-chat-send {
+                background: none;
+                border: none;
+                cursor: pointer;
+                height: 100%;
+                color: var(--accent);
+                padding: 0 10px;
+                font-size: 0.85rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            .nav-chat-toggle {
+                border-right: 1px solid var(--border);
+            }
+            .nav-chat-send {
+                border-left: 1px solid var(--border);
+            }
+            .nav-chat-input {
+                flex: 1;
+                min-width: 0;
+                padding: 0 10px;
+                border: none;
+                outline: none;
+                background: transparent;
+                font: inherit;
+                color: var(--text);
+                font-size: 0.78rem;
+            }
+            .nav-chat-input::placeholder { color: var(--text-muted); }
             .chat-msg {
                 max-width: 85%;
-                padding: 10px 14px;
+                padding: 8px 12px;
-                border-radius: 14px;
+                border-radius: 12px;
-                line-height: 1.45;
+                line-height: 1.4;
                 word-wrap: break-word;
-                font-size: 13px;
+                font-size: 12.5px;
             }
             .chat-msg-bot {
                 align-self: flex-start;
@@ -1047,49 +1112,8 @@
                 border-bottom-left-radius: 4px;
                 opacity: 0.6;
             }
-            .chat-input-row {
+            @media (max-width: 700px) {
-                display: flex;
+                .nav-chat { display: none; }
-                gap: 8px;
-                padding: 12px 16px;
-                border-top: 1px solid var(--border);
-                background: var(--bg-inner);
-            }
-            .chat-input-row input {
-                flex: 1;
-                padding: 9px 14px;
-                border: 1px solid var(--border);
-                border-radius: var(--radius);
-                background: var(--bg-input);
-                color: var(--text);
-                font-size: 13px;
-                outline: none;
-            }
-            .chat-input-row input:focus {
-                border-color: var(--accent);
-                box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
-            }
-            .chat-input-row button {
-                padding: 9px 18px;
-                background: var(--accent);
-                color: #fff;
-                border: none;
-                border-radius: var(--radius);
-                font-weight: 600;
-                font-size: 13px;
-                cursor: pointer;
-                transition: opacity 0.2s;
-                white-space: nowrap;
-            }
-            .chat-input-row button:hover { opacity: 0.9; }
-            .chat-input-row button:disabled { opacity: 0.5; cursor: default; }
-            @media (max-width: 480px) {
-                .chat-panel {
-                    right: 10px;
-                    left: 10px;
-                    width: auto;
-                    bottom: 10px;
-                    max-height: 60vh;
-                }
             }
         </style>
 </head>
@@ -1116,8 +1140,21 @@
             <ul class="nav-links" id="nav-links">
                 <li><a href="#pricing">Pricing</a></li>
                 <li><a href="#faq">FAQ</a></li>
-                <li><a href="#" onclick="chatToggle(); return false;">Chat with Sales Agent</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">
@@ -1832,7 +1869,8 @@
 
         function chatToggle() {
             chatOpen = !chatOpen;
-            document.getElementById("chat-panel").classList.toggle("open", chatOpen);
+            document.getElementById("nav-chat").classList.toggle("open", chatOpen);
+            document.getElementById("chat-panel").setAttribute("aria-hidden", !chatOpen);
             if (chatOpen) {
                 if (!chatId) {
                     chatId = String(Math.floor(100000 + Math.random() * 900000));
@@ -1846,6 +1884,14 @@
             if (chatOpen) chatToggle();
         }
 
+        function chatOpenSilent() {
+            if (!chatOpen) {
+                chatOpen = true;
+                document.getElementById("nav-chat").classList.add("open");
+                document.getElementById("chat-panel").setAttribute("aria-hidden", "false");
+            }
+        }
+
         function chatAppendMsg(role, text) {
             const msgs = document.getElementById("chat-msgs");
             const div = document.createElement("div");
@@ -1866,6 +1912,7 @@
             const msg = input.value.trim();
             if (!msg || chatBusy) return;
             chatBusy = true;
+            chatOpenSilent();
             chatAppendMsg("user", msg);
             input.value = "";
             btn.disabled = true;
@@ -1970,38 +2017,14 @@
                             if (!chatId) chatId = cid;
                             chatAppendMsg("bot", reply);
                             greeted = true;
-                            if (!chatOpen) chatToggle();
+                            chatOpenSilent();
                         }
                     })
                     .catch(function () {});
             }
         })();
 
-        /* ── Scroll-close ────────────────────────────────────────── */
+        </script>
-        (function () {
-            let scrolled = false;
-            window.addEventListener("scroll", function () {
-                if (chatOpen && !scrolled) {
-                    scrolled = true;
-                    setTimeout(function () { scrolled = false; }, 500);
-                    chatClose();
-                }
-            }, { passive: true });
-        })();
-    </script>
-
-<!-- ── Chat Panel (fixed overlay, toggled from nav) ────────── -->
-    <div class="chat-panel" id="chat-panel">
-        <div class="chat-header">
-            <span>Sales Agent</span>
-            <button onclick="chatClose()">✕</button>
-        </div>
-        <div class="chat-msgs" id="chat-msgs"></div>
-        <div class="chat-input-row">
-            <input id="chat-input" type="text" placeholder="Ask about plans, setup, pricing…" onkeydown="chatKey(event)" />
-            <button id="chat-send-btn" onclick="chatSend()">Send</button>
-        </div>
-    </div>
 
 </body>
 </html>