{{-- Modern Floating Chat Button --}}
<div class="floating-chat-button" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
    <button 
        onclick="window.launchChatbot()" 
        class="btn btn-primary shadow-lg border-0 rounded-circle p-3"
        style="
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
        "
        onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 6px 25px rgba(59, 130, 246, 0.6)'"
        onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 4px 20px rgba(59, 130, 246, 0.4)'"
        title="Chat with MAYA"
    >
        <svg width="24" height="24" fill="white" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12c0 1.54.36 2.98.97 4.29L1 23l6.71-1.97C9.02 21.64 10.46 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm-1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
        </svg>
    </button>
    
    {{-- Optional: Add a notification badge --}}
    <div class="position-absolute top-0 start-100 translate-middle">
        <span class="badge bg-danger rounded-pill" style="font-size: 10px; display: none;" id="chat-notification-badge">
            !
        </span>
    </div>
</div>

<style>
.floating-chat-button {
    animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse animation for attention */
.floating-chat-button button {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.8);
    }
    100% {
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    }
}
</style>