wordpress code/addon_backup.html

<style>
    /* Premium Design for Martechsol Assistant */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

    #martech-chat-wrapper {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* Floating Action Button (FAB) */
    #martech-chat-fab {
        position: fixed;
        right: 10px;
        bottom: 25px;
        width: auto;
        height: auto;
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 999999;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
        -webkit-tap-highlight-color: transparent;
    }

    #martech-chat-fab:hover {
        transform: scale(1.1);
    }

    #martech-chat-fab.is-active {
        background: #1e293b;
        box-shadow: 0 10px 25px rgba(30, 41, 59, 0.4);
        transform: scale(0.8);
    }

    /* Chat Window Styling */
    #martech-chat-box {
        position: fixed;
        right: 25px;
        bottom: 100px;
        width: 400px;
        height: 550px;
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        display: none;
        flex-direction: column;
        box-shadow: 0 12px 50px rgba(0, 0, 0, 0.2);
        z-index: 999998;
        border: 1px solid #e2e8f0;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #martech-chat-box.is-visible {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    #martech-chat-header {
        background: #ffffff;
        padding: 16px 20px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    @keyframes pulse-dot {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        }

        70% {
            transform: scale(1.1);
            box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        }
    }

    #martech-chat-header .dot {
        width: 10px;
        height: 10px;
        background: #10b981;
        border-radius: 50%;
        animation: pulse-dot 2s infinite;
    }

    #martech-chat-header span {
        font-weight: 600;
        color: #1e293b;
        font-size: 15px;
    }

    #martech-chat-box iframe {
        width: 100%;
        flex: 1;
        border: 0;
    }

    @media (max-width: 480px) {
        #martech-chat-box {
            right: 15px;
            bottom: 100px;
            width: calc(100vw - 30px);
            height: 70vh;
        }
    }
</style>

<!-- Lottie Player Script -->
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

<div id="martech-chat-wrapper">
    <div id="martech-chat-fab">
        <!-- Animated Chatbot Icon -->
        <div id="chat-icon"
            style="width: 233px; height: 238px; display: flex; align-items: center; justify-content: center; pointer-events: none;">
            <dotlottie-player
                src="https://seashell-cattle-543014.hostingersite.com/wp-content/uploads/2026/04/KhloeSAC.lottie"
                background="transparent" speed="1" style="width: 100%; height: 100%; will-change: transform;" loop
                autoplay>
            </dotlottie-player>
        </div>
        <!-- Close Icon -->
        <svg id="close-icon" viewBox="0 0 24 24" style="display:none; width: 60px; height: 60px;">
            <path
                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                fill="white" />
        </svg>
    </div>

    <div id="martech-chat-box">
        <div id="martech-chat-header">
            <div class="dot"></div>
            <span>Martechsol Assistant</span>
        </div>
        <iframe src="https://joedown11-chatrag.hf.space" allow="clipboard-write; microphone" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
</div>

<script>
    (function () {
        const fab = document.getElementById('martech-chat-fab');
        const box = document.getElementById('martech-chat-box');
        const chatIcon = document.getElementById('chat-icon');
        const closeIcon = document.getElementById('close-icon');

        fab.addEventListener('click', function () {
            const isVisible = box.classList.contains('is-visible');
            if (isVisible) {
                box.classList.remove('is-visible');
                setTimeout(() => { box.style.display = 'none'; }, 300);
                chatIcon.style.display = 'block';
                closeIcon.style.display = 'none';
                fab.classList.remove('is-active');
            } else {
                box.style.display = 'flex';
                setTimeout(() => { box.classList.add('is-visible'); }, 10);
                chatIcon.style.display = 'none';
                closeIcon.style.display = 'block';
                fab.classList.add('is-active');
            }
        });
    })();
</script>