(function() {
    const userId = 0;

    const style = document.createElement("style");
    style.textContent = `
        /* Hier alle deine CSS-Regeln */
        #chat-toggle {
            background-color: transparent;
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 24px;
            cursor: pointer;
            position: fixed;
            bottom: 30px;
            right: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        #chat-toggle:hover {
            background-color: #0099ff;
        }

	#chat-icon {
    	    width: 50px;  /* Breite des Icons */
            height: 50px; /* Höhe des Icons */
            border-radius: 50%; /* Falls das Bild rund sein soll */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s ease;
	}

	#chat-icon:hover {
    	transform: scale(1.1); /* Leichte Vergrößerung beim Hover */
	}


    /* Chat Popup */
    #chat-popup {
      background: linear-gradient(180deg, #d9fdd3, #ffffff);
      position: fixed;
      bottom: 90px;
      right: 16px;
      width: 350px;
      height: 70vh;
      border-radius: 16px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transform: translateY(20px);
      transition: all 0.3s ease;
      z-index: 999;
    }

    #chat-popup.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      animation: slideUp 0.4s ease;
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    #chat-popup iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    #chat-close {
      position: absolute;
      top: 8px;
      right: 8px;
      background: white;
      border: none;
      font-size: 20px;
      cursor: pointer;
      z-index: 1001;
    }

    /* Responsive Fullscreen on Mobile */
    @media (max-width: 600px) {
      #chat-popup {
        width: 100vw;
        height: 100vh;
        bottom: 0;
        right: 0;
        border-radius: 0;
      }
    }

#recaptcha-hinweis {
    position: fixed !important;  /* Fixiert das Element unabhängig von anderen Containern */
    bottom: 0px;  /* Abstand zum unteren Rand */
    right: 10px;   /* Abstand zum rechten Rand */
    font-size: 8.6px;
    color: gray;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    border-radius: 5px 5px 0px 0px; /* Oben links & rechts abgerundet, unten nicht */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 99999 !important; /* Bringt es über alle anderen Elemente */
    pointer-events: none; /* Verhindert, dass es Klicks blockiert */
    text-align: right;
}

#recaptcha-hinweis a {
    color: gray;
    text-decoration: none;
    pointer-events: auto; /* Links bleiben klickbar */
}

#recaptcha-hinweis a:hover {
    text-decoration: underline;
}

/* Falls Google’s reCAPTCHA-Badge noch sichtbar ist, verstecke es */
.grecaptcha-badge { visibility: hidden !important; }

    `;
    document.head.appendChild(style);

    const container = document.createElement("div");
    container.innerHTML = `
        <button id="chat-toggle"><img src="https://virtual-assistant.x9x.de/images/chat-icon.png" id="chat-icon" alt="Chat öffnen"></button>
        <div id="chat-popup"></div>
        <div id="recaptcha-hinweis">
            Dieser Service wird durch reCAPTCHA geschützt.
            <a href="https://policies.google.com/privacy" target="_blank">Datenschutz</a>
            <a href="https://policies.google.com/terms" target="_blank">Nutzungsbedingungen</a>
        </div>
    `;
    document.body.appendChild(container);

    const chatToggle = document.getElementById("chat-toggle");
    const chatPopup = document.getElementById("chat-popup");
    const CHAT_STATE_KEY = "chatPopupOpen";
    const CHAT_VISITED_KEY = "chatPopupVisited";
    let iframeCreated = false;

    window.onload = () => {
        const hasVisited = localStorage.getItem(CHAT_VISITED_KEY);
        const isOpen = localStorage.getItem(CHAT_STATE_KEY) === "true";

        if (isOpen) {
            openChatPopup();
        } else if (!hasVisited) {
            setTimeout(() => {
                openChatPopup();
                localStorage.setItem(CHAT_STATE_KEY, "true");
                localStorage.setItem(CHAT_VISITED_KEY, "true");
            }, 3000);
        }
    };

    chatToggle.addEventListener("click", () => {
        const isNowOpen = chatPopup.classList.toggle("open");
        if (isNowOpen) createIframeIfNeeded();
        localStorage.setItem(CHAT_STATE_KEY, isNowOpen.toString());
    });

    function openChatPopup() {
        chatPopup.classList.add("open");
        createIframeIfNeeded();
    }

    function createIframeIfNeeded() {
        if (!iframeCreated) {
            const iframe = document.createElement("iframe");
            iframe.src = `https://virtual-assistant.x9x.de/user/user_${userId}.php`;
            iframe.allow = "camera; microphone";
            iframe.style.width = "100%";
            iframe.style.height = "100%";
            iframe.style.border = "none";
            chatPopup.appendChild(iframe);
            iframeCreated = true;
        }
    }

    // reCAPTCHA
    const recaptchaScript = document.createElement("script");
    recaptchaScript.src = "https://www.google.com/recaptcha/api.js?render=6LccWK0qAAAAALpgA7ZzmpM4mxNPS6TAFx1f-WjY";
    recaptchaScript.onload = function() {
        grecaptcha.ready(function() {
            grecaptcha.execute('6LccWK0qAAAAALpgA7ZzmpM4mxNPS6TAFx1f-WjY', { action: 'chat' });
        });
    };
    document.head.appendChild(recaptchaScript);
})();