fix: panel in document-flow slot so it pushes hero down when open
This commit is contained in:
+15
-10
@@ -971,6 +971,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ── Chat ──────────────────────────────────────────────── */
|
/* ── 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 {
|
.nav-chat-panel {
|
||||||
width: 340px;
|
width: 340px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@@ -980,14 +989,8 @@
|
|||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
|
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
z-index: 9999;
|
|
||||||
margin-top: 66px;
|
|
||||||
margin-left: 24px;
|
|
||||||
}
|
|
||||||
.nav-chat-panel.open {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.nav-chat-main {
|
.nav-chat-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1140,8 +1143,9 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- ═══════════════════════════════════════════════════════════════
|
<!-- ═══════════════════════════════════════════════════════════════
|
||||||
CHAT PANEL (standalone below fixed header)
|
CHAT PANEL SLOT (in document flow — pushes hero down when open)
|
||||||
═══════════════════════════════════════════════════════════════ -->
|
═══════════════════════════════════════════════════════════════ -->
|
||||||
|
<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="nav-chat-panel" id="chat-panel" aria-hidden="true">
|
||||||
<div class="chat-panel-header">
|
<div class="chat-panel-header">
|
||||||
<span class="chat-panel-title">💬 Sales Agent</span>
|
<span class="chat-panel-title">💬 Sales Agent</span>
|
||||||
@@ -1149,6 +1153,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="chat-history" id="chat-msgs"></div>
|
<div class="chat-history" id="chat-msgs"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- ═══════════════════════════════════════════════════════════════
|
<!-- ═══════════════════════════════════════════════════════════════
|
||||||
HERO
|
HERO
|
||||||
@@ -1847,7 +1852,7 @@
|
|||||||
|
|
||||||
function chatToggle() {
|
function chatToggle() {
|
||||||
chatOpen = !chatOpen;
|
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);
|
document.getElementById("chat-panel").setAttribute("aria-hidden", !chatOpen);
|
||||||
if (chatOpen) {
|
if (chatOpen) {
|
||||||
if (!chatId) {
|
if (!chatId) {
|
||||||
@@ -1865,7 +1870,7 @@
|
|||||||
function chatOpenSilent() {
|
function chatOpenSilent() {
|
||||||
if (!chatOpen) {
|
if (!chatOpen) {
|
||||||
chatOpen = true;
|
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");
|
document.getElementById("chat-panel").setAttribute("aria-hidden", "false");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user