(function initChat() {
    if (document.getElementById('horeca-chat-btn')) return;

    const chatHTML = `
        <div id="horeca-chat-btn" style="position:fixed; bottom:20px; right:20px; background:#0F172A; color:white; width:60px; height:60px; border-radius:50%; display:flex; justify-content:center; align-items:center; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.2); font-size:30px; z-index:10000; transition:0.2s;">
            💬
        </div>
        <div id="horeca-chat-window" style="display:none; position:fixed; bottom:90px; right:20px; width:300px; height:400px; background:white; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.3); z-index:10000; flex-direction:column; overflow:hidden; font-family:sans-serif;">
            <div style="background:#0F172A; color:white; padding:15px; font-weight:bold; text-align:center;">Служба поддержки</div>
            <div id="horeca-chat-messages" style="flex:1; padding:15px; overflow-y:auto; background:#f9f9f9; display:flex; flex-direction:column; gap:10px;"></div>
            <div style="display:flex; border-top:1px solid #ddd; padding:10px; background:white;">
                <input type="text" id="horeca-chat-input" placeholder="Введите сообщение..." style="flex:1; padding:8px; border:1px solid #ddd; border-radius:20px; outline:none;">
                <button id="horeca-chat-send" style="background:#0F172A; color:white; border:none; padding:8px 15px; margin-left:10px; border-radius:20px; cursor:pointer;">➤</button>
            </div>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', chatHTML);

    const btn = document.getElementById('horeca-chat-btn');
    const win = document.getElementById('horeca-chat-window');
    const input = document.getElementById('horeca-chat-input');
    const sendBtn = document.getElementById('horeca-chat-send');
    const msgs = document.getElementById('horeca-chat-messages');

    btn.onclick = () => {
        win.style.display = win.style.display === 'none' ? 'flex' : 'none';
    };

    const addMsg = (text, isClient) => {
        const align = isClient ? 'align-self:flex-end; background:#F1F5F9; color:#0288d1;' : 'align-self:flex-start; background:#fff; border:1px solid #ddd; color:#333;';
        msgs.innerHTML += `<div style="padding:10px 15px; border-radius:15px; max-width:80%; font-size:14px; ${align}">${text}</div>`;
        msgs.scrollTop = msgs.scrollHeight;
    };

    const script = document.createElement('script');
    script.src = "https://cdn.socket.io/4.7.2/socket.io.min.js";
    document.head.appendChild(script);

    script.onload = () => {
        // Достаем токен из хранилища браузера
        const savedToken = localStorage.getItem('token');
        
        // Подключаемся с предъявлением токена
        const socket = io({ 
            path: '/api/socket.io',
            auth: { token: savedToken } 
        });

        const sendMessage = () => {
            if (!input.value.trim()) return;
            addMsg(input.value, true);
            socket.emit('client_message', input.value);
            input.value = '';
        };

        sendBtn.onclick = sendMessage;
        input.onkeypress = (e) => { if(e.key === 'Enter') sendMessage(); };

        socket.on('server_message', (text) => addMsg(text, false));
    };
})();