Update static/script.js

static/script.js

@@ -1,6 +1,10 @@
+// static/script.js
 (function() {
     'use strict';
 
+    // =============================================
+    // State
+    // =============================================
     const State = {
         token: localStorage.getItem('token'),
         user: null,
@@ -23,135 +27,200 @@
         }
     };
 
+    // =============================================
+    // DOM Cache
+    // =============================================
     const DOM = {
+        // Screens
         authScreen: document.getElementById('auth-screen'),
         chatScreen: document.getElementById('chat-screen'),
+
+        // Auth
         loginForm: document.getElementById('login-form'),
         signupForm: document.getElementById('signup-form'),
         authTabs: document.querySelectorAll('.auth-tab'),
         authError: document.getElementById('auth-error'),
         authErrorText: document.getElementById('auth-error-text'),
         authLoading: document.getElementById('auth-loading'),
+
+        // Header
         headerDisplayName: document.getElementById('header-display-name'),
         headerAvatar: document.getElementById('header-avatar'),
         headerAvatarPlaceholder: document.getElementById('header-avatar-placeholder'),
         headerStatus: document.getElementById('header-status'),
         onlineBadge: document.getElementById('online-badge'),
+
+        // Connection
         connectionStatus: document.getElementById('connection-status'),
         connectionText: document.getElementById('connection-text'),
+
+        // Messages
         messagesList: document.getElementById('messages-list'),
         messagesScroll: document.getElementById('messages-scroll'),
         emptyState: document.getElementById('empty-state'),
         loadOlderBtn: document.getElementById('load-older-btn'),
         scrollBottomBtn: document.getElementById('scroll-bottom-btn'),
+
+        // Typing
         typingIndicator: document.getElementById('typing-indicator'),
         typingText: document.getElementById('typing-text'),
+
+        // Reply
         replyPreview: document.getElementById('reply-preview'),
         replyUser: document.getElementById('reply-user'),
         replyText: document.getElementById('reply-text'),
+
+        // Compose
         composeForm: document.getElementById('compose-form'),
         messageInput: document.getElementById('message-input'),
         sendBtn: document.getElementById('send-btn'),
         attachBtn: document.getElementById('attach-btn'),
         emojiBtn: document.getElementById('emoji-btn'),
         fileInput: document.getElementById('file-input'),
+
+        // Upload
         uploadPreview: document.getElementById('upload-preview'),
         uploadFilename: document.getElementById('upload-filename'),
         cancelUpload: document.getElementById('cancel-upload'),
         uploadProgress: document.getElementById('upload-progress'),
         progressFill: document.getElementById('progress-fill'),
         progressText: document.getElementById('progress-text'),
+
+        // Modals
         settingsModal: document.getElementById('settings-modal'),
         onlineModal: document.getElementById('online-modal'),
         emojiPicker: document.getElementById('emoji-picker'),
         emojiGrid: document.getElementById('emoji-grid'),
+
+        // Settings
         settingsDisplayName: document.getElementById('settings-display-name'),
         settingsUsername: document.getElementById('settings-username'),
         settingsAvatarPreview: document.getElementById('settings-avatar-preview'),
         settingsAvatarImg: document.getElementById('settings-avatar-img'),
         avatarInput: document.getElementById('avatar-input'),
+        avatarUploadBtn: document.getElementById('avatar-upload-btn'),
         themeOptions: document.querySelectorAll('.theme-option'),
         customThemeSettings: document.getElementById('custom-theme-settings'),
+        customSelfColor: document.getElementById('custom-self-color'),
+        customOtherColor: document.getElementById('custom-other-color'),
+        customTextColor: document.getElementById('custom-text-color'),
+        selfColorHex: document.getElementById('self-color-hex'),
+        otherColorHex: document.getElementById('other-color-hex'),
+        textColorHex: document.getElementById('text-color-hex'),
+
+        // Online users modal
         onlineBtn: document.getElementById('online-btn'),
         onlineUsersList: document.getElementById('online-users-list'),
         onlineTotal: document.getElementById('online-total'),
+
+        // Toast
         toastContainer: document.getElementById('toast-container')
     };
 
     const API = window.location.origin;
 
+    // =============================================
+    // Theme
+    // =============================================
     function applyTheme(theme) {
         document.documentElement.setAttribute('data-theme', theme);
         State.theme = theme;
         localStorage.setItem('theme', theme);
         if (theme === 'custom') {
-            document.documentElement.style.setProperty('--bubble-self', State.customColors.self);
-            document.documentElement.style.setProperty('--bubble-other', State.customColors.other);
-            document.documentElement.style.setProperty('--bubble-other-text', State.customColors.text);
-            document.documentElement.style.setProperty('--bubble-self-text', isLightColor(State.customColors.self) ? '#111827' : '#FFFFFF');
+            const selfColor = State.customColors.self;
+            const otherColor = State.customColors.other;
+            const textColor = State.customColors.text;
+            document.documentElement.style.setProperty('--bubble-self', selfColor);
+            document.documentElement.style.setProperty('--bubble-other', otherColor);
+            document.documentElement.style.setProperty('--bubble-other-text', textColor);
+            const isLight = (c) => {
+                const r = parseInt(c.slice(1,3),16), g = parseInt(c.slice(3,5),16), b = parseInt(c.slice(5,7),16);
+                return (0.299 * r + 0.587 * g + 0.114 * b) > 150;
+            };
+            document.documentElement.style.setProperty('--bubble-self-text', isLight(selfColor) ? '#111827' : '#FFFFFF');
+        } else {
+            // Remove inline custom properties to let CSS variables take over
+            document.documentElement.style.removeProperty('--bubble-self');
+            document.documentElement.style.removeProperty('--bubble-other');
+            document.documentElement.style.removeProperty('--bubble-other-text');
+            document.documentElement.style.removeProperty('--bubble-self-text');
         }
     }
 
-    function isLightColor(hex) {
-        const r = parseInt(hex.slice(1,3), 16), g = parseInt(hex.slice(3,5), 16), b = parseInt(hex.slice(5,7), 16);
-        return (0.299 * r + 0.587 * g + 0.114 * b) > 150;
-    }
-
     applyTheme(State.theme);
 
-    function showToast(msg, type = 'info') {
+    // =============================================
+    // Toast Notifications
+    // =============================================
+    function showToast(message, type = 'info') {
         const toast = document.createElement('div');
         toast.className = `toast toast-${type}`;
-        toast.innerHTML = `<i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i><span>${msg}</span>`;
+        let icon = 'info-circle';
+        if (type === 'success') icon = 'check-circle';
+        else if (type === 'error') icon = 'exclamation-circle';
+        else if (type === 'warning') icon = 'exclamation-triangle';
+        toast.innerHTML = `<i class="fas fa-${icon}"></i><span>${message}</span>`;
         DOM.toastContainer.appendChild(toast);
         setTimeout(() => toast.remove(), 4000);
     }
 
-    // Auth
-    DOM.authTabs.forEach(tab => tab.addEventListener('click', () => {
-        const target = tab.dataset.tab;
-        DOM.authTabs.forEach(t => t.classList.remove('active'));
-        tab.classList.add('active');
-        DOM.loginForm.classList.toggle('active', target === 'login');
-        DOM.signupForm.classList.toggle('active', target === 'signup');
-        DOM.authError.style.display = 'none';
-    }));
+    // =============================================
+    // Authentication
+    // =============================================
+    DOM.authTabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            const target = tab.dataset.tab;
+            DOM.authTabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            DOM.loginForm.classList.toggle('active', target === 'login');
+            DOM.signupForm.classList.toggle('active', target === 'signup');
+            DOM.authError.style.display = 'none';
+        });
+    });
 
-    DOM.loginForm.addEventListener('submit', async e => {
+    DOM.loginForm.addEventListener('submit', async (e) => {
         e.preventDefault();
-        const u = document.getElementById('login-username').value.trim();
-        const p = document.getElementById('login-password').value;
-        await login(u, p);
+        const username = document.getElementById('login-username').value.trim();
+        const password = document.getElementById('login-password').value;
+        await login(username, password);
     });
 
-    DOM.signupForm.addEventListener('submit', async e => {
+    DOM.signupForm.addEventListener('submit', async (e) => {
         e.preventDefault();
-        const u = document.getElementById('signup-username').value.trim();
-        const d = document.getElementById('signup-display').value.trim() || u;
-        const p = document.getElementById('signup-password').value;
-        await signup(u, p, d);
+        const username = document.getElementById('signup-username').value.trim();
+        const display = document.getElementById('signup-display').value.trim() || username;
+        const password = document.getElementById('signup-password').value;
+        await signup(username, password, display);
     });
 
     async function login(username, password) {
         DOM.authLoading.classList.remove('hidden');
+        hideAuthError();
         try {
             const res = await fetch(`${API}/api/auth/login?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`, { method: 'POST' });
             const data = await res.json();
             if (!res.ok) throw new Error(data.detail || 'Login failed');
             handleAuthSuccess(data);
-        } catch (err) { showAuthError(err.message); }
-        finally { DOM.authLoading.classList.add('hidden'); }
+        } catch (err) {
+            showAuthError(err.message);
+        } finally {
+            DOM.authLoading.classList.add('hidden');
+        }
     }
 
     async function signup(username, password, display) {
         DOM.authLoading.classList.remove('hidden');
+        hideAuthError();
         try {
             const res = await fetch(`${API}/api/auth/signup?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&display_name=${encodeURIComponent(display)}`, { method: 'POST' });
             const data = await res.json();
             if (!res.ok) throw new Error(data.detail || 'Signup failed');
             handleAuthSuccess(data);
-        } catch (err) { showAuthError(err.message); }
-        finally { DOM.authLoading.classList.add('hidden'); }
+        } catch (err) {
+            showAuthError(err.message);
+        } finally {
+            DOM.authLoading.classList.add('hidden');
+        }
     }
 
     function handleAuthSuccess(data) {
@@ -167,135 +236,218 @@
         DOM.authError.style.display = 'flex';
     }
 
-    // WS
+    function hideAuthError() {
+        DOM.authError.style.display = 'none';
+    }
+
+    // =============================================
+    // WebSocket
+    // =============================================
     function connectWebSocket() {
-        if (!State.token || (State.ws && State.ws.readyState === WebSocket.OPEN)) return;
+        if (!State.token) return;
+        if (State.ws && State.ws.readyState === WebSocket.OPEN) return;
+
         State.wsState = 'connecting';
         updateConnectionUI();
+
         const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-        State.ws = new WebSocket(`${proto}//${location.host}/ws?token=${encodeURIComponent(State.token)}`);
+        const url = `${proto}//${location.host}/ws?token=${encodeURIComponent(State.token)}`;
+        State.ws = new WebSocket(url);
+
         State.ws.onopen = () => {
             State.wsState = 'connected';
             updateConnectionUI();
+            loadMessages();
+            requestOnlineUsers();
         };
-        State.ws.onmessage = e => handleWSMessage(JSON.parse(e.data));
+
+        State.ws.onmessage = (event) => {
+            try {
+                const msg = JSON.parse(event.data);
+                handleWSMessage(msg);
+            } catch (e) {
+                console.error('WS parse error', e);
+            }
+        };
+
         State.ws.onclose = () => {
-            if (State.wsState === 'connected') { State.wsState = 'reconnecting'; setTimeout(connectWebSocket, 3000); }
-            else State.wsState = 'disconnected';
+            if (State.wsState === 'connected') {
+                State.wsState = 'reconnecting';
+                updateConnectionUI();
+                setTimeout(connectWebSocket, 3000);
+            } else {
+                State.wsState = 'disconnected';
+                updateConnectionUI();
+            }
+        };
+
+        State.ws.onerror = () => {
+            State.wsState = 'disconnected';
             updateConnectionUI();
         };
-        State.ws.onerror = () => { State.wsState = 'disconnected'; updateConnectionUI(); };
     }
 
     function updateConnectionUI() {
-        const s = DOM.connectionStatus;
-        s.className = 'connection-status';
-        if (State.wsState === 'connected') { s.classList.add('connected'); DOM.connectionText.textContent = 'Connected'; }
-        else if (State.wsState === 'reconnecting') { s.classList.add('reconnecting'); DOM.connectionText.textContent = 'Reconnecting...'; }
-        else { s.classList.add('disconnected'); DOM.connectionText.textContent = 'Disconnected'; }
+        const status = DOM.connectionStatus;
+        status.className = 'connection-status';
+        switch (State.wsState) {
+            case 'connected':
+                status.classList.add('connected');
+                DOM.connectionText.textContent = 'Connected';
+                break;
+            case 'reconnecting':
+                status.classList.add('reconnecting');
+                DOM.connectionText.textContent = 'Reconnecting...';
+                break;
+            default:
+                status.classList.add('disconnected');
+                DOM.connectionText.textContent = 'Disconnected';
+        }
     }
 
     function handleWSMessage(msg) {
         switch (msg.type) {
             case 'connection_established':
-                State.user = { id: msg.user_id, username: msg.username, display_name: msg.display_name, avatar_path: msg.avatar_path };
+                State.user = {
+                    id: msg.user_id,
+                    username: msg.username,
+                    display_name: msg.display_name,
+                    avatar_path: msg.avatar_path
+                };
                 msg.online_users.forEach(u => State.onlineUsers.set(u.id, u));
-                updateOnlineBadge();
                 updateHeader();
-                loadMessages();
+                updateOnlineBadge();
                 break;
+
             case 'new_message':
-                handleNewMessage(msg.message);
+                if (State.messages.has(msg.message.id)) return;
+                State.messages.set(msg.message.id, msg.message);
+                State.messageOrder.push(msg.message.id);
+                renderMessage(msg.message);
+                if (State.isAtBottom) scrollToBottom();
+                if (document.visibilityState === 'visible') sendMarkRead(msg.message.id);
+                if (document.visibilityState !== 'visible' && Notification.permission === 'granted') {
+                    new Notification(`${msg.message.sender_display_name}`, {
+                        body: msg.message.content || 'Sent a file',
+                        icon: '/static/icon.png'
+                    });
+                }
                 break;
+
             case 'messages_loaded':
-                msg.messages.forEach(m => { if (!State.messages.has(m.id)) { State.messages.set(m.id, m); State.messageOrder.unshift(m.id); } });
+                msg.messages.forEach(m => {
+                    if (!State.messages.has(m.id)) {
+                        State.messages.set(m.id, m);
+                        State.messageOrder.unshift(m.id);
+                    }
+                });
                 State.hasMore = msg.has_more;
-                State.cursor = msg.next_cursor;
+                if (msg.next_cursor) State.cursor = msg.next_cursor;
                 renderAllMessages();
                 DOM.loadOlderBtn.classList.toggle('hidden', !msg.has_more);
                 break;
+
             case 'user_status':
-                if (msg.status === 'online') State.onlineUsers.set(msg.user_id, msg);
-                else State.onlineUsers.delete(msg.user_id);
+                if (msg.status === 'online') {
+                    State.onlineUsers.set(msg.user_id, {
+                        id: msg.user_id,
+                        username: msg.username,
+                        display_name: msg.display_name,
+                        avatar_path: msg.avatar_path
+                    });
+                } else {
+                    State.onlineUsers.delete(msg.user_id);
+                }
                 updateOnlineBadge();
                 break;
+
             case 'typing_indicator':
-                if (msg.is_typing) State.typingUsers.set(msg.user_id, msg);
-                else State.typingUsers.delete(msg.user_id);
+                if (msg.is_typing) {
+                    State.typingUsers.set(msg.user_id, msg);
+                } else {
+                    State.typingUsers.delete(msg.user_id);
+                }
                 updateTypingIndicator();
                 break;
+
             case 'message_edited':
                 if (State.messages.has(msg.message_id)) {
-                    State.messages.get(msg.message_id).content = msg.content;
-                    State.messages.get(msg.message_id).is_edited = true;
+                    const msgObj = State.messages.get(msg.message_id);
+                    msgObj.content = msg.content;
+                    msgObj.is_edited = true;
                     updateMessageBubble(msg.message_id);
                 }
                 break;
+
             case 'message_deleted':
                 if (State.messages.has(msg.message_id)) {
-                    State.messages.get(msg.message_id).is_deleted = true;
+                    const msgObj = State.messages.get(msg.message_id);
+                    msgObj.is_deleted = true;
                     updateMessageBubble(msg.message_id);
                 }
                 break;
+
             case 'message_read':
                 if (State.messages.has(msg.message_id) && State.messages.get(msg.message_id).sender_id === State.user.id) {
                     State.messages.get(msg.message_id).status = 'read';
                     updateMessageBubble(msg.message_id);
                 }
                 break;
+
             case 'online_users':
                 State.onlineUsers.clear();
                 msg.users.forEach(u => State.onlineUsers.set(u.id, u));
                 updateOnlineBadge();
+                if (!DOM.onlineModal.classList.contains('hidden')) renderOnlineUsers();
                 break;
+
             case 'error':
                 showToast(msg.message, 'error');
         }
     }
 
-    function handleNewMessage(msg) {
-        if (State.messages.has(msg.id)) return;
-        State.messages.set(msg.id, msg);
-        State.messageOrder.push(msg.id);
-        renderMessage(msg);
-        if (State.isAtBottom) scrollToBottom();
-        if (document.visibilityState === 'visible') sendMarkRead(msg.id);
-        if (document.visibilityState !== 'visible' && Notification.permission === 'granted') {
-            new Notification(`${msg.sender_display_name}`, { body: msg.content || 'Sent a file' });
-        }
-    }
-
+    // =============================================
+    // Message Actions
+    // =============================================
     function loadMessages() {
-        if (State.ws?.readyState === WebSocket.OPEN) State.ws.send(JSON.stringify({ type: 'load_messages', limit: 50 }));
+        if (State.ws?.readyState === WebSocket.OPEN) {
+            State.ws.send(JSON.stringify({ type: 'load_messages', limit: 50 }));
+        }
     }
 
     function sendMarkRead(messageId) {
-        if (State.ws?.readyState === WebSocket.OPEN) State.ws.send(JSON.stringify({ type: 'mark_read', up_to_message_id: messageId }));
+        if (State.ws?.readyState === WebSocket.OPEN) {
+            State.ws.send(JSON.stringify({ type: 'mark_read', up_to_message_id: messageId }));
+        }
     }
 
-    // Render
+    // =============================================
+    // Rendering
+    // =============================================
     function renderMessage(msg) {
         if (DOM.messagesList.querySelector(`[data-id="${msg.id}"]`)) return;
-        const wrap = document.createElement('div');
-        wrap.className = `message-wrapper ${msg.sender_id === State.user.id ? 'self' : 'other'}`;
-        wrap.dataset.id = msg.id;
-        wrap.innerHTML = buildMessageHTML(msg);
-        DOM.messagesList.appendChild(wrap);
+        const wrapper = document.createElement('div');
+        wrapper.className = `message-wrapper ${msg.sender_id === State.user.id ? 'self' : 'other'}`;
+        wrapper.dataset.id = msg.id;
+        wrapper.innerHTML = buildMessageHTML(msg);
+        DOM.messagesList.appendChild(wrapper);
     }
 
     function buildMessageHTML(msg) {
         if (msg.is_deleted) return '<div class="message-bubble deleted">This message was deleted</div>';
         const isSelf = msg.sender_id === State.user?.id;
         let html = '';
+        // reply indicator
         if (msg.reply_to_id && State.messages.has(msg.reply_to_id)) {
-            const r = State.messages.get(msg.reply_to_id);
-            html += `<div class="reply-indicator"><i class="fas fa-reply"></i><span>${r.sender_username}: ${truncate(r.content, 50)}</span></div>`;
+            const reply = State.messages.get(msg.reply_to_id);
+            html += `<div class="reply-indicator"><i class="fas fa-reply"></i><span>${reply.sender_username}: ${truncate(reply.content, 50)}</span></div>`;
         }
         html += `<div class="message-bubble">`;
         html += `<div class="message-text">${escapeHtml(msg.content)}</div>`;
-        if (msg.file_path) html += buildAttachment(msg);
-        html += `<div class="message-meta"><span class="message-time">${formatTime(msg.timestamp_ms)}</span>`;
-        if (msg.is_edited) html += '<span class="edited-label">edited</span>';
+        if (msg.file_path) html += buildAttachmentHTML(msg);
+        html += `<div class="message-meta">`;
+        html += `<span class="message-time">${formatTime(msg.timestamp_ms)}</span>`;
+        if (msg.is_edited) html += ' <span class="edited-label">edited</span>';
         if (isSelf) {
             const icon = msg.status === 'read' ? '<i class="fas fa-check-double"></i>' : '<i class="fas fa-check"></i>';
             html += `<span class="message-status ${msg.status==='read'?'read':''}">${icon}</span>`;
@@ -310,12 +462,23 @@
         return html;
     }
 
-    function buildAttachment(msg) {
+    function buildAttachmentHTML(msg) {
         const url = `${API}/api/download/${encodeURIComponent(msg.file_path)}?token=${encodeURIComponent(State.token)}`;
-        if (msg.file_type?.startsWith('image/')) return `<div class="attachment"><img src="${url}" alt="${msg.file_name}" loading="lazy"></div>`;
-        if (msg.file_type?.startsWith('video/')) return `<div class="attachment"><video controls preload="metadata"><source src="${url}" type="${msg.file_type}"></video></div>`;
-        if (msg.file_type?.startsWith('audio/')) return `<div class="attachment"><audio controls src="${url}"></audio></div>`;
-        return `<div class="attachment-file" onclick="window.open('${url}')"><i class="fas fa-file"></i><div class="file-info"><div class="file-name">${msg.file_name||'File'}</div><div class="file-size">${formatFileSize(msg.file_size)}</div></div></div>`;
+        if (msg.file_type && msg.file_type.startsWith('image/')) {
+            return `<div class="attachment"><img src="${url}" alt="${msg.file_name}" loading="lazy" onclick="window.open(this.src)"></div>`;
+        } else if (msg.file_type && msg.file_type.startsWith('video/')) {
+            return `<div class="attachment"><video controls preload="metadata"><source src="${url}" type="${msg.file_type}"></video></div>`;
+        } else if (msg.file_type && msg.file_type.startsWith('audio/')) {
+            return `<div class="attachment"><audio controls src="${url}"></audio></div>`;
+        } else {
+            return `<div class="attachment-file" onclick="window.open('${url}')">
+                        <i class="fas fa-file"></i>
+                        <div class="file-info">
+                            <div class="file-name">${msg.file_name || 'File'}</div>
+                            <div class="file-size">${formatFileSize(msg.file_size)}</div>
+                        </div>
+                    </div>`;
+        }
     }
 
     function updateMessageBubble(id) {
@@ -327,17 +490,25 @@
 
     function renderAllMessages() {
         DOM.messagesList.innerHTML = '';
-        if (State.messageOrder.length === 0) DOM.emptyState.style.display = 'flex';
-        else {
+        if (State.messageOrder.length === 0) {
+            DOM.emptyState.style.display = 'flex';
+        } else {
             DOM.emptyState.style.display = 'none';
-            State.messageOrder.forEach(id => { if (State.messages.has(id)) renderMessage(State.messages.get(id)); });
+            State.messageOrder.forEach(id => {
+                const msg = State.messages.get(id);
+                if (msg) renderMessage(msg);
+            });
         }
+        if (State.isAtBottom) scrollToBottom();
     }
 
     function scrollToBottom() {
         DOM.messagesScroll.scrollTop = DOM.messagesScroll.scrollHeight;
     }
 
+    // =============================================
+    // Scroll detection
+    // =============================================
     DOM.messagesScroll.addEventListener('scroll', () => {
         const { scrollTop, scrollHeight, clientHeight } = DOM.messagesScroll;
         State.isAtBottom = (scrollHeight - scrollTop - clientHeight) < 60;
@@ -345,29 +516,44 @@
     });
     DOM.scrollBottomBtn.addEventListener('click', scrollToBottom);
 
+    // =============================================
     // Compose
-    DOM.composeForm.addEventListener('submit', e => { e.preventDefault(); sendMessage(); });
+    // =============================================
+    DOM.composeForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        sendMessage();
+    });
+
     DOM.messageInput.addEventListener('input', () => {
-        const has = DOM.messageInput.value.trim().length > 0 || State.pendingFile;
-        DOM.sendBtn.disabled = !has;
-        if (has) sendTyping(true);
+        const hasContent = DOM.messageInput.value.trim().length > 0 || !!State.pendingFile;
+        DOM.sendBtn.disabled = !hasContent;
+        if (hasContent) sendTyping(true);
         autoResize();
     });
 
     function sendMessage() {
         const content = DOM.messageInput.value.trim();
         if (!content && !State.pendingFile) return;
-        if (State.ws?.readyState !== WebSocket.OPEN) return;
-        State.ws.send(JSON.stringify({
+        if (!State.ws || State.ws.readyState !== WebSocket.OPEN) {
+            showToast('Not connected', 'warning');
+            return;
+        }
+
+        const payload = {
             type: 'send_message',
-            content,
-            reply_to_id: State.replyTo?.id || null,
-            client_id: generateId(),
-            file_path: State.pendingFile?.file_path,
-            file_type: State.pendingFile?.file_type,
-            file_name: State.pendingFile?.file_name,
-            file_size: State.pendingFile?.file_size
-        }));
+            content: content,
+            reply_to_id: State.replyTo ? State.replyTo.id : null,
+            client_id: generateId()
+        };
+
+        if (State.pendingFile) {
+            payload.file_path = State.pendingFile.file_path;
+            payload.file_type = State.pendingFile.file_type;
+            payload.file_name = State.pendingFile.file_name;
+            payload.file_size = State.pendingFile.file_size;
+        }
+
+        State.ws.send(JSON.stringify(payload));
         DOM.messageInput.value = '';
         clearReply();
         clearPendingFile();
@@ -376,11 +562,11 @@
     }
 
     function sendTyping(isTyping) {
-        if (State.ws?.readyState !== WebSocket.OPEN) return;
-        clearTimeout(window._typingTimer);
+        if (!State.ws || State.ws.readyState !== WebSocket.OPEN) return;
+        clearTimeout(window.__typingTimer);
         if (isTyping) {
             State.ws.send(JSON.stringify({ type: 'typing', is_typing: true }));
-            window._typingTimer = setTimeout(() => sendTyping(false), 2000);
+            window.__typingTimer = setTimeout(() => sendTyping(false), 2000);
         } else {
             State.ws.send(JSON.stringify({ type: 'typing', is_typing: false }));
         }
@@ -389,40 +575,62 @@
     function updateTypingIndicator() {
         const users = Array.from(State.typingUsers.values()).filter(u => u.user_id !== State.user.id);
         DOM.typingIndicator.classList.toggle('hidden', users.length === 0);
-        DOM.typingText.textContent = users.length ? users.map(u => u.display_name).join(', ') + ' typing...' : '';
+        if (users.length > 0) {
+            DOM.typingText.textContent = users.map(u => u.display_name).join(', ') + ' typing...';
+        }
     }
 
-    function clearReply() { State.replyTo = null; DOM.replyPreview.classList.add('hidden'); }
-    function clearPendingFile() { State.pendingFile = null; DOM.uploadPreview.classList.add('hidden'); }
+    // =============================================
+    // Reply
+    // =============================================
+    function replyTo(messageId) {
+        const msg = State.messages.get(messageId);
+        if (!msg) return;
+        State.replyTo = msg;
+        DOM.replyUser.textContent = msg.sender_username;
+        DOM.replyText.textContent = truncate(msg.content, 50);
+        DOM.replyPreview.classList.remove('hidden');
+        DOM.messageInput.focus();
+    }
 
-    window.InfinityChat = {
-        replyTo: (id) => {
-            const msg = State.messages.get(id);
-            if (!msg) return;
-            State.replyTo = msg;
-            DOM.replyUser.textContent = msg.sender_username;
-            DOM.replyText.textContent = truncate(msg.content, 50);
-            DOM.replyPreview.classList.remove('hidden');
-            DOM.messageInput.focus();
-        },
-        editMessage: (id) => {
-            const msg = State.messages.get(id);
-            if (!msg) return;
-            const newContent = prompt('Edit:', msg.content);
-            if (newContent !== null && newContent.trim() !== '') {
-                State.ws.send(JSON.stringify({ type: 'edit_message', message_id: id, content: newContent }));
+    function clearReply() {
+        State.replyTo = null;
+        DOM.replyPreview.classList.add('hidden');
+    }
+
+    document.addEventListener('click', (e) => {
+        if (e.target.id === 'cancel-reply' || e.target.closest('#cancel-reply')) {
+            clearReply();
+        }
+    });
+
+    // =============================================
+    // Edit / Delete
+    // =============================================
+    function editMessage(messageId) {
+        const msg = State.messages.get(messageId);
+        if (!msg) return;
+        const newContent = prompt('Edit message:', msg.content);
+        if (newContent !== null && newContent.trim() !== '') {
+            if (State.ws?.readyState === WebSocket.OPEN) {
+                State.ws.send(JSON.stringify({ type: 'edit_message', message_id: messageId, content: newContent.trim() }));
             }
-        },
-        deleteMessage: (id) => {
-            if (confirm('Delete permanently?')) {
-                State.ws.send(JSON.stringify({ type: 'delete_message', message_id: id }));
+        }
+    }
+
+    function deleteMessage(messageId) {
+        if (confirm('Permanently delete this message?')) {
+            if (State.ws?.readyState === WebSocket.OPEN) {
+                State.ws.send(JSON.stringify({ type: 'delete_message', message_id: messageId }));
             }
         }
-    };
+    }
 
-    // File upload
+    // =============================================
+    // File Upload (Chunked)
+    // =============================================
     DOM.attachBtn.addEventListener('click', () => DOM.fileInput.click());
-    DOM.fileInput.addEventListener('change', async e => {
+    DOM.fileInput.addEventListener('change', async (e) => {
         const file = e.target.files[0];
         if (!file) return;
         await uploadChunked(file);
@@ -430,41 +638,141 @@
     });
 
     async function uploadChunked(file) {
-        const CHUNK = 5*1024*1024, total = Math.ceil(file.size/CHUNK), uploadId = generateId();
+        const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
+        const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+        const uploadId = generateId();
+
         DOM.uploadProgress.classList.remove('hidden');
-        for (let i=0; i<total; i++) {
-            const start = i*CHUNK, end = Math.min(start+CHUNK, file.size);
-            const blob = file.slice(start,end);
-            const fd = new FormData(); fd.append('file', blob);
-            const res = await fetch(`${API}/api/upload/chunk?chunk_index=${i}&total_chunks=${total}&file_name=${encodeURIComponent(file.name)}&file_type=${encodeURIComponent(file.type||'application/octet-stream')}&file_size=${file.size}&upload_id=${uploadId}`, { method:'POST', body:fd, headers:{'X-Auth-Token':State.token} });
-            if (!res.ok) { alert('Upload failed'); break; }
-            const data = await res.json();
-            updateProgress(((i+1)/total)*100);
-            if (data.status === 'complete') {
-                State.pendingFile = { file_path: data.file_path, file_type: data.file_type, file_name: data.file_name, file_size: file_size };
-                DOM.uploadPreview.classList.remove('hidden');
-                DOM.uploadFilename.textContent = data.file_name;
-                DOM.sendBtn.disabled = false;
+        updateProgress(0, file.name);
+
+        for (let i = 0; i < totalChunks; i++) {
+            const start = i * CHUNK_SIZE;
+            const end = Math.min(start + CHUNK_SIZE, file.size);
+            const blob = file.slice(start, end);
+            const formData = new FormData();
+            formData.append('file', blob);
+
+            const url = `${API}/api/upload/chunk?chunk_index=${i}&total_chunks=${totalChunks}&file_name=${encodeURIComponent(file.name)}&file_type=${encodeURIComponent(file.type || 'application/octet-stream')}&file_size=${file.size}&upload_id=${uploadId}`;
+
+            try {
+                const res = await fetch(url, {
+                    method: 'POST',
+                    body: formData,
+                    headers: { 'X-Auth-Token': State.token }
+                });
+                if (!res.ok) throw new Error('Upload failed');
+                const data = await res.json();
+                updateProgress(((i + 1) / totalChunks) * 100, file.name);
+
+                if (data.status === 'complete') {
+                    State.pendingFile = {
+                        file_path: data.file_path,
+                        file_type: data.file_type,
+                        file_name: data.file_name,
+                        file_size: data.file_size
+                    };
+                    showUploadPreview(data.file_name);
+                    DOM.uploadProgress.classList.add('hidden');
+                    return;
+                }
+            } catch (err) {
+                showToast('Upload failed', 'error');
                 DOM.uploadProgress.classList.add('hidden');
-                return;
+                break;
             }
         }
         DOM.uploadProgress.classList.add('hidden');
     }
 
-    function updateProgress(pct) {
-        DOM.progressFill.style.width = `${pct}%`;
-        DOM.progressText.textContent = `${Math.round(pct)}%`;
+    function updateProgress(percent, filename) {
+        DOM.progressFill.style.width = `${percent}%`;
+        DOM.progressText.textContent = `${Math.round(percent)}%`;
+        if (filename) DOM.uploadFilename.textContent = filename;
+    }
+
+    function showUploadPreview(filename) {
+        DOM.uploadPreview.classList.remove('hidden');
+        DOM.uploadFilename.textContent = filename;
+        DOM.sendBtn.disabled = false;
+    }
+
+    function clearPendingFile() {
+        State.pendingFile = null;
+        DOM.uploadPreview.classList.add('hidden');
     }
 
     DOM.cancelUpload.addEventListener('click', clearPendingFile);
 
-    // Online modal
+    // =============================================
+    // Emoji Picker (basic)
+    // =============================================
+    DOM.emojiBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        DOM.emojiPicker.classList.toggle('hidden');
+        if (!DOM.emojiPicker.classList.contains('hidden')) {
+            renderEmojis('smileys');
+        }
+    });
+
+    document.addEventListener('click', (e) => {
+        if (!DOM.emojiPicker.contains(e.target) && e.target !== DOM.emojiBtn) {
+            DOM.emojiPicker.classList.add('hidden');
+        }
+    });
+
+    const emojiSets = {
+        smileys: ['😀','😃','😄','😁','😅','😂','🤣','😊','😇','🙂','😉','😌','😍','🥰','😘','😗','😋','😛','😜','🤪','😝','🤑','🤗','🤭','🤫','🤔','🤐','🤨','😐','😑','😶','😏','😒','🙄','😬','😮','🤥','😌','😔','😪','🤤','😴','😷','🤒','🤕','🤢','🤮','🤧','😵','🤯','🥵','🥶','😎','🤓','🧐','😕','😟','🙁','😮','😯','😲','😳','🥺','😦','😧','😨','😰','😥','😢','😭','😱','😖','😣','😞','😓','😩','😫','🥱','😤','😡','😠','🤬','😈','👿','💀','☠️','💩','🤡','👹','👺','👻','👽','👾','🤖'],
+        people: ['👶','🧒','👦','👧','🧑','👱','👨','🧔','👩','🧓','👴','👵','👲','👳','🧕','👮','👷','💂','🕵️','🧑‍⚕️','👨‍⚕️','👩‍⚕️','🧑‍🎓','👨‍🎓','👩‍🎓','🧑‍🏫','👨‍🏫','👩‍🏫','🧑‍⚖️','👨‍⚖️','👩‍⚖️','🧑‍🌾','👨‍🌾','👩‍🌾','🧑‍🍳','👨‍🍳','👩‍🍳','🧑‍🔧','👨‍🔧','👩‍🔧','🧑‍🏭','👨‍🏭','👩‍🏭','🧑‍💼','👨‍💼','👩‍💼','🧑‍🔬','👨‍🔬','👩‍🔬','🧑‍💻','👨‍💻','👩‍💻','🧑‍🎤','👨‍🎤','👩‍🎤','🧑‍🎨','👨‍🎨','👩‍🎨','🧑‍✈️','👨‍✈️','👩‍✈️','🧑‍🚀','👨‍🚀','👩‍🚀','🧑‍🚒','👨‍🚒','👩‍🚒','👮‍♀️','👮‍♂️','🕵️‍♀️','🕵️‍♂️','💂‍♀️','💂‍♂️','👷‍♀️','👷‍♂️'],
+        animals: ['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐻‍❄️','🐨','🐯','🦁','🐮','🐷','🐸','🐵','🙈','🙉','🙊','🐒','🐔','🐧','🐦','🐤','🐣','🐥','🦆','🦅','🦉','🦇','🐺','🐗','🐴','🦄','🐝','🪱','🐛','🦋','🐌','🐞','🐜','🪰','🪲','🪳','🦟','🦗','🕷️','🦂','🐢','🐍','🦎','🦖','🦕','🐙','🦑','🦐','🦞','🦀','🐡','🐠','🐟','🐬','🐳','🐋','🦈','🐊','🐅','🐆','🦓','🦍','🦧','🐘','🦛','🦏','🐪','����','🦒','🦘','🐃','🐂','🐄','🐎','🐖','🐏','🐑','🦙','🐐','🦌','🐕','🐩','🦮','🐕‍🦺','🐈','🐈‍⬛','🐓','🦃','🦤','🦚','🦜','🦢','🦩','🕊️','🐇','🦝','🦨','🦡','🦦','🦥','🐁','🐀','🐿️','🦔','🐾','🐉','🐲'],
+        food: ['🍏','🍎','🍐','🍊','🍋','🍌','🍉','🍇','🍓','🫐','🍈','🍒','🍑','🥭','🍍','🥥','🥝','🍅','🍆','🥑','🥦','🥬','🥒','🌶️','🌽','🥕','🫒','🧄','🧅','🥔','🍠','🥐','🍞','🥖','🥨','🧀','🥚','🍳','🧈','🥞','🧇','🥓','🥩','🍗','🍖','🦴','🌭','🍔','🍟','🍕','🫓','🥪','🥙','🧆','🌮','🌯','🫔','🥗','🥘','🫕','🥫','🍝','🍜','🍲','🍛','🍣','🍱','🥟','🦪','🍤','🍙','🍚','🍘','🍥','🥠','🥮','🍢','🍡','🍧','🍨','🍦','🥧','🧁','🍰','🎂','🍮','🍭','🍬','🍫','🍿','🍩','🍪','🌰','🥜','🍯','🥛','🍼','🫖','☕','🍵','🧃','🥤','🧋','🍶','🍺','🍻','🥂','🍷','🥃','🍸','🍹','🧉','🍾','🧊','🥄','🍴','🍽️','🥣','🥡','🥢','🧂'],
+        activities: ['⚽','🏀','🏈','⚾','🥎','🎾','🏐','🏉','🥏','🎱','🪀','🏓','🏸','🏒','🏑','🥍','🏏','🪃','🥅','⛳','🪁','🏹','🎣','🤿','🥊','🥋','🎽','🛹','🛼','🛷','⛸️','🥌','🎿','⛷️','🏂','🪂','🏋️','🤼','🤸','🤺','⛹️','🤾','🏌️','🏇','🧘','🏄','🏊','🤽','🚣','🧗','🚵','🚴','🏆','🥇','🥈','🥉','🏅','🎖️','🏵️','🎗️','🎫','🎟️','🎪','🤹','🎭','🩰','🎨','🎬','🎤','🎧','🎼','🎹','🥁','🪘','🎷','🎺','🪗','🎸','🪕','🎻','🎲','♟️','🎯','🎳','🎮','🎰','🧩'],
+        objects: ['⌚','📱','💻','⌨️','🖥️','🖨️','🖱️','🖲️','🕹️','🗜️','💽','💾','💿','📀','📼','📷','📸','📹','🎥','📽️','🎞️','📞','☎️','📟','📠','📺','📻','🎙️','🎚️','🎛️','🧭','⏱️','⏲️','⏰','🕰️','⌛','📡','🔋','🔌','💡','🔦','🕯️','🪔','🧯','🛢️','💸','💵','💴','💶','💷','🪙','💰','💳','💎','⚖️','🪜','🧰','🪛','🔧','🔨','⚒️','🛠️','⛏️','🪚','🔩','⚙️','🪤','🧱','⛓️','🧲','🔫','💣','🧨','🪓','🔪','🗡️','⚔️','🛡️','🚬','⚰️','🪦','⚱️','🏺','🔮','📿','🧿','💈','⚗️','🔭','🔬','🕳️','🩻','🩹','🩺','💊','💉','🩸','🧬','🦠','🧫','🧪','🌡️','🧹','🪠','🧺','🧻','🚽','🚰','🚿','🛁','🛀','🧼','🪥','🪒','🧽','🪣','🧴','🪢','🧷','🧹','🧺','🧻','🧼','🪥','🪒','🧽','🪣','🧴','🪢','🧷'],
+        symbols: ['❤️','🧡','💛','💚','💙','💜','🖤','🤍','🤎','💔','❣️','💕','💞','💓','💗','💖','💘','💝','💟','☮️','✝️','☪️','🕉️','☸️','✡️','🔯','🕎','☯️','☦️','🛐','⛎','♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓','🆔','⚛️','🉑','☢️','☣️','📴','📳','🈶','🈚','🈸','🈺','🈷️','✴️','🆚','💮','🉐','㊙️','㊗️','🈴','🈵','🈹','🈲','🅰️','🅱️','🆎','🆑','🅾️','🆘','❌','⭕','🛑','⛔','📛','🚫','💯','💢','♨️','🚷','🚯','🚳','🚱','🔞','📵','🚭','❗','❕','❓','❔','‼️','⁉️','🔅','🔆','〽️','⚠️','🚸','🔱','⚜️','🔰','♻️','✅','🈯','💹','❇️','✳️','❎','🌐','💠','Ⓜ️','🌀','💤','🏧','🚾','♿','🅿️','🛗','🈳','🈂️','🛂','🛃','🛄','🛅','🚰','🚹','🚺','🚼','⚧','🚻','🚮','🎦','📶','🈁','🔣','ℹ️','🔤','🔡','🔠','🆖','🆗','🆙','🆒','🆕','🆓','0️⃣','1️⃣','2️⃣','3️⃣','4️⃣','5️⃣','6️⃣','7️⃣','8️⃣','9️⃣','🔟','🔢','#️⃣','*️⃣','⏏️','▶️','⏸️','⏯️','⏹️','⏺️','⏭️','⏮️','⏩','⏪','⏫','⏬','◀️','🔼','🔽','➡️','⬅️','⬆️','⬇️','↗️','↘️','↙️','↖️','↕️','↔️','↪️','↩️','⤴️','⤵️','🔀','🔁','🔂','🔄','🔃','🎵','🎶','➕','➖','➗','✖️','♾️','💲','💱','™️','©️','®️','〰️','➰','➿','🔚','🔙','🔛','🔝','🔜','✔️','☑️','🔘','🔴','🟠','🟡','🟢','🔵','🟣','⚫','⚪','🟤','🔺','🔻','🔸','🔹','🔶','🔷','🔳','🔲','▪️','▫️','◾','◽','◼️','◻️','🟥','🟧','🟨','🟩','🟦','🟪','⬛','⬜','🟫'],
+        flags: ['🏁','🚩','🎌','🏴','🏳️','🏳️‍🌈','🏳️‍⚧️','🏴‍☠️','🇿🇦','🇸🇽','🇸🇰','🇸🇮','🇸🇬','🇸🇪','🇸🇩','🇸🇷','🇸🇸','🇸🇹','🇸🇻','🇸🇾','🇸🇿','🇹🇨','🇹🇩','🇹🇫','🇹🇬','🇹🇭','🇹🇯','🇹🇰','🇹🇱','🇹🇲','🇹🇳','🇹🇴','🇹🇷','🇹���','🇹🇻','🇹🇼','🇹🇿','🇺🇦','🇺🇬','🇺🇳','🇺🇸','🇺🇾','🇺🇿','🇻🇦','🇻🇨','🇻🇪','🇻🇬','🇻🇮','🇻🇳','🇻🇺','🇼🇫','🇼🇸','🇽🇰','🇾🇪','🇾🇹','🇿🇦','🇿🇲','🇿🇼']
+    };
+
+    document.querySelectorAll('.emoji-cat').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            document.querySelectorAll('.emoji-cat').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            renderEmojis(btn.dataset.cat);
+        });
+    });
+
+    function renderEmojis(category) {
+        const emojis = emojiSets[category] || [];
+        DOM.emojiGrid.innerHTML = emojis.map(e => `<button class="emoji-item">${e}</button>`).join('');
+        DOM.emojiGrid.querySelectorAll('.emoji-item').forEach(btn => {
+            btn.addEventListener('click', () => {
+                DOM.messageInput.value += btn.textContent;
+                DOM.messageInput.focus();
+                DOM.messageInput.dispatchEvent(new Event('input'));
+                DOM.emojiPicker.classList.add('hidden');
+            });
+        });
+    }
+
+    // =============================================
+    // Load More Messages
+    // =============================================
+    DOM.loadOlderBtn.addEventListener('click', () => {
+        if (State.ws?.readyState === WebSocket.OPEN && State.hasMore && State.cursor) {
+            State.ws.send(JSON.stringify({ type: 'load_messages', cursor: State.cursor, limit: 50 }));
+        }
+    });
+
+    // =============================================
+    // Online Users Modal
+    // =============================================
     DOM.onlineBtn.addEventListener('click', () => {
         renderOnlineUsers();
         DOM.onlineModal.classList.remove('hidden');
     });
-    document.querySelectorAll('[data-close="online-modal"]').forEach(b => b.addEventListener('click', () => DOM.onlineModal.classList.add('hidden')));
+
+    document.querySelectorAll('[data-close="online-modal"]').forEach(btn => {
+        btn.addEventListener('click', () => DOM.onlineModal.classList.add('hidden'));
+    });
 
     function updateOnlineBadge() {
         DOM.onlineBadge.textContent = State.onlineUsers.size;
@@ -480,14 +788,26 @@
         State.onlineUsers.forEach(u => {
             const div = document.createElement('div');
             div.className = 'user-item';
-            div.innerHTML = `<div class="user-avatar"><i class="fas fa-user-circle"></i></div><div class="user-info"><div class="user-name">${u.display_name || u.username}</div><div class="user-status-text">online</div></div>`;
+            div.innerHTML = `<div class="user-avatar"><i class="fas fa-user-circle"></i></div>
+                             <div class="user-info">
+                                 <div class="user-name">${u.display_name || u.username}</div>
+                                 <div class="user-status-text">${u.status || 'online'}</div>
+                             </div>`;
             DOM.onlineUsersList.appendChild(div);
         });
         DOM.onlineTotal.textContent = `${State.onlineUsers.size} users online`;
     }
 
-    // Settings
-    document.getElementById('settings-btn').addEventListener('click', () => {
+    // =============================================
+    // Settings Modal
+    // =============================================
+    document.getElementById('settings-btn').addEventListener('click', openSettings);
+    document.querySelectorAll('[data-close="settings-modal"]').forEach(btn => {
+        btn.addEventListener('click', () => DOM.settingsModal.classList.add('hidden'));
+    });
+    document.getElementById('save-settings').addEventListener('click', saveSettings);
+
+    function openSettings() {
         DOM.settingsDisplayName.value = State.user?.display_name || '';
         DOM.settingsUsername.value = State.user?.username || '';
         if (State.user?.avatar_path) {
@@ -498,70 +818,237 @@
             DOM.settingsAvatarImg.classList.add('hidden');
             DOM.settingsAvatarPreview.classList.remove('hidden');
         }
-        DOM.themeOptions.forEach(o => o.classList.toggle('active', o.dataset.theme === State.theme));
+
+        // Theme selection
+        DOM.themeOptions.forEach(opt => {
+            opt.classList.toggle('active', opt.dataset.theme === State.theme);
+        });
         DOM.customThemeSettings.classList.toggle('hidden', State.theme !== 'custom');
+        if (State.theme === 'custom') {
+            DOM.customSelfColor.value = State.customColors.self;
+            DOM.customOtherColor.value = State.customColors.other;
+            DOM.customTextColor.value = State.customColors.text;
+            DOM.selfColorHex.textContent = State.customColors.self;
+            DOM.otherColorHex.textContent = State.customColors.other;
+            DOM.textColorHex.textContent = State.customColors.text;
+        }
+
         DOM.settingsModal.classList.remove('hidden');
-    });
-    document.querySelectorAll('[data-close="settings-modal"]').forEach(b => b.addEventListener('click', () => DOM.settingsModal.classList.add('hidden')));
-    document.getElementById('save-settings').addEventListener('click', async () => {
+    }
+
+    async function saveSettings() {
         const newName = DOM.settingsDisplayName.value.trim();
         if (newName && newName !== State.user?.display_name) {
-            await fetch(`${API}/api/profile?display_name=${encodeURIComponent(newName)}`, { method:'PATCH', headers:{'X-Auth-Token':State.token} });
+            await fetch(`${API}/api/profile?display_name=${encodeURIComponent(newName)}`, {
+                method: 'PATCH',
+                headers: { 'X-Auth-Token': State.token }
+            });
             State.user.display_name = newName;
             updateHeader();
             showToast('Profile updated', 'success');
         }
+
+        // Avatar
+        const avatarFile = DOM.avatarInput.files[0];
+        if (avatarFile) {
+            const formData = new FormData();
+            formData.append('file', avatarFile);
+            const res = await fetch(`${API}/api/profile/avatar`, {
+                method: 'POST',
+                body: formData,
+                headers: { 'X-Auth-Token': State.token }
+            });
+            if (res.ok) {
+                const data = await res.json();
+                State.user.avatar_path = data.avatar_path;
+                DOM.settingsAvatarImg.src = `${API}/api/download/${encodeURIComponent(data.avatar_path)}?token=${encodeURIComponent(State.token)}`;
+                DOM.settingsAvatarImg.classList.remove('hidden');
+                DOM.settingsAvatarPreview.classList.add('hidden');
+                showToast('Avatar updated', 'success');
+            }
+        }
+
+        // Theme
+        const selectedTheme = document.querySelector('.theme-option.active')?.dataset.theme || 'light';
+        if (selectedTheme !== State.theme || selectedTheme === 'custom') {
+            if (selectedTheme === 'custom') {
+                State.customColors.self = DOM.customSelfColor.value;
+                State.customColors.other = DOM.customOtherColor.value;
+                State.customColors.text = DOM.customTextColor.value;
+                localStorage.setItem('custom-self', State.customColors.self);
+                localStorage.setItem('custom-other', State.customColors.other);
+                localStorage.setItem('custom-text', State.customColors.text);
+            }
+            applyTheme(selectedTheme);
+        }
+
         DOM.settingsModal.classList.add('hidden');
+    }
+
+    // Custom color picker listeners
+    DOM.customSelfColor.addEventListener('input', () => DOM.selfColorHex.textContent = DOM.customSelfColor.value);
+    DOM.customOtherColor.addEventListener('input', () => DOM.otherColorHex.textContent = DOM.customOtherColor.value);
+    DOM.customTextColor.addEventListener('input', () => DOM.textColorHex.textContent = DOM.customTextColor.value);
+
+    // Theme selection clicks
+    DOM.themeOptions.forEach(opt => {
+        opt.addEventListener('click', () => {
+            DOM.themeOptions.forEach(o => o.classList.remove('active'));
+            opt.classList.add('active');
+            DOM.customThemeSettings.classList.toggle('hidden', opt.dataset.theme !== 'custom');
+            if (opt.dataset.theme === 'custom') {
+                DOM.customSelfColor.value = State.customColors.self;
+                DOM.customOtherColor.value = State.customColors.other;
+                DOM.customTextColor.value = State.customColors.text;
+                DOM.selfColorHex.textContent = State.customColors.self;
+                DOM.otherColorHex.textContent = State.customColors.other;
+                DOM.textColorHex.textContent = State.customColors.text;
+            }
+        });
     });
 
-    DOM.themeOptions.forEach(opt => opt.addEventListener('click', () => {
-        applyTheme(opt.dataset.theme);
-        DOM.themeOptions.forEach(o => o.classList.remove('active'));
-        opt.classList.add('active');
-        DOM.customThemeSettings.classList.toggle('hidden', opt.dataset.theme !== 'custom');
-    }));
+    // Avatar upload button
+    DOM.avatarUploadBtn.addEventListener('click', () => DOM.avatarInput.click());
+    DOM.avatarInput.addEventListener('change', () => {
+        const file = DOM.avatarInput.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                DOM.settingsAvatarImg.src = e.target.result;
+                DOM.settingsAvatarImg.classList.remove('hidden');
+                DOM.settingsAvatarPreview.classList.add('hidden');
+            };
+            reader.readAsDataURL(file);
+        }
+    });
 
-    function updateHeader() {
-        if (State.user) DOM.headerDisplayName.textContent = State.user.display_name;
+    // =============================================
+    // Utility
+    // =============================================
+    function generateId() {
+        return Date.now().toString(36) + Math.random().toString(36).substr(2, 9);
+    }
+
+    function truncate(str, n) {
+        if (!str) return '';
+        return str.length > n ? str.substr(0, n - 1) + '…' : str;
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
     }
 
-    // Utility
-    function generateId() { return Date.now().toString(36) + Math.random().toString(36).substr(2,9); }
-    function truncate(s,n) { return s && s.length > n ? s.substr(0,n-1)+'…' : s || ''; }
-    function escapeHtml(t) { const d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
     function formatTime(ms) {
-        const d = new Date(ms), n = new Date();
-        if (d.toDateString() === n.toDateString()) return d.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'});
-        return d.toLocaleDateString([], {month:'short',day:'numeric'}) + ' ' + d.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'});
+        const date = new Date(ms);
+        const now = new Date();
+        const diff = now - date;
+        if (diff < 60000) return 'now';
+        if (date.toDateString() === now.toDateString()) {
+            return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        }
+        return date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' +
+               date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
     }
-    function formatFileSize(b) {
-        if (!b) return '0 B';
-        const k=1024, sizes=['B','KB','MB','GB'], i=Math.floor(Math.log(b)/Math.log(k));
-        return parseFloat((b/Math.pow(k,i)).toFixed(1))+' '+sizes[i];
+
+    function formatFileSize(bytes) {
+        if (!bytes) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
     }
+
     function autoResize() {
         DOM.messageInput.style.height = 'auto';
         DOM.messageInput.style.height = Math.min(DOM.messageInput.scrollHeight, 120) + 'px';
     }
 
-    // Init
+    // =============================================
+    // Initialization
+    // =============================================
     async function init() {
         if (State.token) {
-            const res = await fetch(`${API}/api/auth/verify`, { headers: {'X-Auth-Token': State.token} });
-            if (res.ok) {
-                const data = await res.json();
-                State.user = data.user;
-                showChat();
-                connectWebSocket();
-                return;
+            try {
+                const res = await fetch(`${API}/api/auth/verify`, {
+                    headers: { 'X-Auth-Token': State.token }
+                });
+                if (res.ok) {
+                    const data = await res.json();
+                    State.user = data.user;
+                    showChat();
+                    connectWebSocket();
+                    return;
+                }
+            } catch (e) {}
+        }
+        showAuth();
+    }
+
+    function showAuth() {
+        DOM.authScreen.classList.add('active');
+        DOM.chatScreen.classList.remove('active');
+    }
+
+    function showChat() {
+        DOM.authScreen.classList.remove('active');
+        DOM.chatScreen.classList.add('active');
+        updateHeader();
+    }
+
+    function updateHeader() {
+        if (State.user) {
+            DOM.headerDisplayName.textContent = State.user.display_name;
+        }
+    }
+
+    // Password visibility toggle
+    document.querySelectorAll('.input-toggle').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const targetId = btn.dataset.toggle;
+            const input = document.getElementById(targetId);
+            if (input) {
+                input.type = input.type === 'password' ? 'text' : 'password';
+                const icon = btn.querySelector('i');
+                if (icon) icon.className = input.type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
             }
+        });
+    });
+
+    // Logout button
+    document.getElementById('logout-btn').addEventListener('click', async () => {
+        if (State.token) {
+            await fetch(`${API}/api/auth/logout`, {
+                method: 'POST',
+                headers: { 'X-Auth-Token': State.token }
+            });
         }
+        if (State.ws) State.ws.close();
+        State.ws = null;
+        localStorage.removeItem('token');
+        State.token = null;
+        State.user = null;
+        State.messages.clear();
+        State.messageOrder = [];
+        State.onlineUsers.clear();
+        DOM.messagesList.innerHTML = '';
+        DOM.emptyState.style.display = 'flex';
         showAuth();
+        updateOnlineBadge();
+    });
+
+    // Request notification permission
+    if (window.Notification && Notification.permission === 'default') {
+        Notification.requestPermission();
     }
 
-    function showAuth() { DOM.authScreen.classList.add('active'); DOM.chatScreen.classList.remove('active'); }
-    function showChat() { DOM.authScreen.classList.remove('active'); DOM.chatScreen.classList.add('active'); updateHeader(); }
+    // Expose public methods
+    window.InfinityChat = {
+        replyTo,
+        editMessage,
+        deleteMessage
+    };
 
-    if (window.Notification && Notification.permission === 'default') Notification.requestPermission();
     init();
 })();