Sindbad~EG File Manager

(function () {
  function initChatbot() {
    // Prevent multiple injections
    if (document.getElementById("cgtmse-chatbot-widget")) return;

    // Inject HTML container
    const widget = document.createElement("div");
    widget.id = "cgtmse-chatbot-widget";
    widget.innerHTML = `
      <button id="cgtmse-chatbot-toggle" aria-label="Open Chatbot">
        <img src="https://cgtmse.in/Images/new-logo-crop1.png" alt="Chatbot" />
      </button>

      <button id="cgtmse-chatbot-close" aria-label="Close Chatbot">×</button>

      <div id="cgtmse-chatbot-container">
        <iframe id="cgtmse-chatbot-iframe"
          src="http://192.168.1.31/"
          title="CGTMSE Chatbot"></iframe>
      </div>
    `;
    document.body.appendChild(widget);

    // Inject styles
    const style = document.createElement("style");
    style.textContent = `
      #cgtmse-chatbot-toggle {
        position: fixed; bottom: 40px; right: 20px; z-index: 10001;
        background: white; border: 2px solid #ddd; border-radius: 50%;
        width: 60px; height: 60px; display: flex; align-items: center;
        justify-content: center; cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
        animation: pulse 3s infinite;
      }
      #cgtmse-chatbot-toggle img { width: 40px; height: 40px; object-fit: contain; }

      #cgtmse-chatbot-close {
        position: fixed; bottom: 645px; right: 30px; z-index: 10002;
        background: #ef4444; color: white; border: none; border-radius: 50%;
        width: 36px; height: 36px; font-size: 20px; font-weight: bold;
        display: none; align-items: center; justify-content: center;
        cursor: pointer; transition: all 0.3s ease;
      }

      #cgtmse-chatbot-container {
        display: none; position: fixed; bottom: 30px; right: 30px; z-index: 10000;
        border-radius: 24px; overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
      }
      #cgtmse-chatbot-iframe {
        width: 384px; height: 600px; border: none; border-radius: 24px;
      }

      /* Responsive */
      @media (max-width: 450px) {
        #cgtmse-chatbot-container {
          left: 10px; right: 10px; bottom: 10px;
          width: calc(100vw - 20px);
        }
        #cgtmse-chatbot-iframe { width: 100%; height: 550px; }
      }

      @keyframes pulse {
        0%, 100% { box-shadow: 0 8px 32px rgba(37,99,235,0.3); }
        50% { box-shadow: 0 8px 32px rgba(37,99,235,0.5); }
      }
    `;
    document.head.appendChild(style);

    // Logic
    const toggle = document.getElementById("cgtmse-chatbot-toggle");
    const close = document.getElementById("cgtmse-chatbot-close");
    const container = document.getElementById("cgtmse-chatbot-container");

    window.cgtmseOpenChatbot = function () {
      container.style.display = "block";
      toggle.style.display = "none";
      close.style.display = "flex";
      window.cgtmseChatbotOpen = true;
    };

    window.cgtmseCloseChatbot = function () {
      container.style.display = "none";
      toggle.style.display = "flex";
      close.style.display = "none";
      window.cgtmseChatbotOpen = false;
    };

    toggle.addEventListener("click", window.cgtmseOpenChatbot);
    close.addEventListener("click", window.cgtmseCloseChatbot);

    // Escape key
    document.addEventListener("keydown", e => {
      if (e.key === "Escape" && window.cgtmseChatbotOpen) {
        window.cgtmseCloseChatbot();
      }
    });
  }

  // Run when DOM is ready
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initChatbot);
  } else {
    initChatbot();
  }
})();