Chat toggle button for tw.2s4.me

// ==================================
// Floating Chat HUD
// ==================================

let chatHudElement = null;

function createChatHUD() {
    if (chatHudElement) return chatHudElement;

    // Create HUD container
    const hud = document.createElement('div');
    hud.id = 'chat-hud';
    Object.assign(hud.style, {
        position: 'fixed',
        bottom: '20px',
        right: '20px',
        width: '300px',
        backgroundColor: '#222',
        color: '#fff',
        border: '1px solid #444',
        borderRadius: '8px',
        boxShadow: '2px 2px 5px rgba(0,0,0,0.3)',
        fontFamily: 'monospace',
        zIndex: '9999',
        userSelect: 'none'
    });

    // Header
    const header = document.createElement('div');
    header.id = 'chat-hud-header';
    header.textContent = 'Chat HUD';
    Object.assign(header.style, {
        padding: '5px 10px',
        backgroundColor: '#111',
        cursor: 'grab',
        borderRadius: '8px 8px 0 0',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
    });

    // Close button
    const closeBtn = document.createElement('span');
    closeBtn.textContent = 'X';
    Object.assign(closeBtn.style, { cursor: 'pointer', fontWeight: 'bold' });
    closeBtn.addEventListener('click', () => {
        hud.remove();
        chatHudElement = null;
    });
    header.appendChild(closeBtn);
    hud.appendChild(header);

    // Content
    const content = document.createElement('div');
    content.style.padding = '10px';
    content.style.display = 'flex';
    content.style.flexDirection = 'column';
    content.style.gap = '5px';

    // Toggle button
    const toggleBtn = document.createElement('button');
    toggleBtn.textContent = 'Toggle Chat';
    toggleBtn.style.padding = '4px 6px';
    toggleBtn.style.cursor = 'pointer';

    toggleBtn.addEventListener('click', () => {
        const msgContainer = document.querySelector('.msgcontainer');
        if (msgContainer) {
            msgContainer.classList.toggle('hidden');
        }
    });

    content.appendChild(toggleBtn);
    hud.appendChild(content);

    document.body.appendChild(hud);
    chatHudElement = hud;

    // Dragging logic
    let isDragging = false;
    let offsetX, offsetY;

    header.addEventListener('mousedown', (e) => {
        if (e.target === closeBtn) return;
        isDragging = true;
        offsetX = e.clientX - hud.getBoundingClientRect().left;
        offsetY = e.clientY - hud.getBoundingClientRect().top;
        header.style.cursor = 'grabbing';
    });

    document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        hud.style.left = e.clientX - offsetX + 'px';
        hud.style.top = e.clientY - offsetY + 'px';
        hud.style.bottom = 'auto';
        hud.style.right = 'auto';
        hud.style.position = 'fixed';
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        header.style.cursor = 'grab';
    });

    return hud;
}

// Initialize the chat HUD
createChatHUD();