<!– Floating Chat Bubble + Container –>
<div id=”chat-bubble”>💬</div>
<div id=”chat-container”></div>

<style>
/* Floating Bubble */
#chat-bubble {
position: fixed;
bottom: 20px;
right: 20px;
background: #00275e;
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Chat Container */
#chat-container {
position: fixed;
bottom: 90px;
right: 20px;
width: 350px;
height: 500px;
display: none;
background: #fff;
border-radius: 12px;
overflow: hidden;
z-index: 9999999 !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* Mobile Fullscreen */
@media (max-width: 768px) {
#chat-container {
width: 100%;
height: 100%;
right: 0;
bottom: 0;
border-radius: 0;
}
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const bubble = document.getElementById(“chat-bubble”);
const container = document.getElementById(“chat-container”);

let loaded = false;

bubble.onclick = function () {
// Load iframe only once (better performance)
if (!loaded) {
container.innerHTML = `
<iframe src=”https://copilotstudio.microsoft.com/environments/87548667-4905-e338-9e68-78b40777518d/bots/cr802_swingCityGolfWebsiteBot/webchat?__version__=2″
frameborder=”0″
style=”width: 100%; height: 500px;”>
</iframe>
`;
loaded = true;
}

// Toggle visibility
if (container.style.display === “block”) {
container.style.display = “none”;
bubble.innerHTML = “💬”;
} else {
container.style.display = “block”;
bubble.innerHTML = “✕”;
}
};
});
</script>