document.addEventListener('DOMContentLoaded', function() {
    const conversationItems = document.querySelectorAll('.ch-item');
    const chatHeaderName = document.getElementById('chat-header-name');
    const chatHeaderImg = document.getElementById('chat-header-img');

    conversationItems.forEach(item => {
        item.addEventListener('click', function() {
            // Remove active class from all items
            conversationItems.forEach(i => i.classList.remove('active'));
            
            // Add active class to the clicked item
            this.classList.add('active');

            // Update chat header
            const name = this.dataset.name;
            const imgSrc = this.dataset.img;
            
            if (chatHeaderName) {
                chatHeaderName.textContent = name;
            }
            if (chatHeaderImg) {
                chatHeaderImg.src = imgSrc;
            }

            // On mobile, this would also trigger showing the chat pane
            document.querySelector('.chat-container').classList.add('show-chat');
        });
    });

    // Example of how to go back on mobile (you'd need a back button in the chat header)
    // const backButton = document.getElementById('back-to-conversations');
    // if(backButton) {
    //     backButton.addEventListener('click', () => {
    //         document.querySelector('.chat-container').classList.remove('show-chat');
    //     });
    // }
});