document.addEventListener('DOMContentLoaded', () => {
    const chatMessages = document.getElementById('chat-messages');
    const chatForm = document.getElementById('chat-form');
    const chatInput = document.getElementById('chat-input');

    const addMessage = (sender, text) => {
        const messageElement = document.createElement('div');
        messageElement.classList.add('message', sender);

        const senderName = sender === 'user' ? 'You' : 'KittyAI';
        const senderElement = document.createElement('div');
        senderElement.classList.add('message-sender');
        senderElement.textContent = senderName;
        
        messageElement.appendChild(senderElement);
        messageElement.append(text);

        chatMessages.appendChild(messageElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    };

    chatForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const messageText = chatInput.value.trim();

        if (messageText) {
            addMessage('user', messageText);
            chatInput.value = '';

            setTimeout(() => {
                addMessage('bot', 'Meow! This is a placeholder response from KittyAI. The real AI is still napping!');
            }, 1200);
        }
    });

    // Initial bot message
    setTimeout(() => {
        addMessage('bot', 'Welcome to KittyAI! Ask me anything.');
    }, 1000);
});