Implement multi-tasking (you can chat with a horny catgirl and chad thundercock at the same time)

public/index.html

@@ -11,7 +11,7 @@
         <div class="brand">
             <div class="logo">DF</div>
             <div>
-                <p class="eyebrow">Secure AI Access</p>
+                <p class="eyebrow">Best AI chat in the big 2026</p>
                 <h1>Welcome to DeepFake</h1>
                 <p class="subtitle">Log in to continue your conversation or create an account to get started.</p>
             </div>
@@ -30,7 +30,8 @@
                 </label>
                 <label class="field">
                     <span>Password</span>
-                    <input id="loginPassword" type="password" placeholder="Enter your password" autocomplete="current-password"/>
+                    <input id="loginPassword" type="password" placeholder="Enter your password"
+                           autocomplete="current-password"/>
                 </label>
                 <button id="loginSubmit" type="submit" class="primary-action">Sign in</button>
             </form>
@@ -44,10 +45,11 @@
                 </label>
                 <label class="field">
                     <span>Create password</span>
-                    <input id="registerPassword" type="password" placeholder="Create a password" autocomplete="new-password"/>
+                    <input id="registerPassword" type="password" placeholder="Create a password"
+                           autocomplete="new-password"/>
                 </label>
                 <div class="consent-container">
-                    <input type="checkbox" id="consentCheckbox" required />
+                    <input type="checkbox" id="consentCheckbox" required/>
                     <label for="consentCheckbox">
                         I agree to the
                         <a href="/tos.html" target="_blank">Terms of Service</a> and
@@ -63,22 +65,40 @@
     </div>
 
     <div id="chat" class="card" style="display:none;">
-        <div class="chat-header">
-            <div class="model-select">
-                <label for="model">Model:</label>
-                <select id="model">
-                    <option disabled selected>Loading models...</option>
-                </select>
-            </div>
-        </div>
-        <div id="messages"></div>
-        <div class="input-container">
-            <textarea id="msgInput" placeholder="Type your message..."></textarea>
-            <button id="send"></button>
-        </div>
-        <div class="logout-container">
-            <button id="clearChat">Clear Chat</button>
-            <button id="logout">Logout</button>
+        <div class="chat-layout">
+            <aside class="chat-sidebar">
+                <div class="sidebar-header">
+                    <div>
+                        <p class="eyebrow">Conversations</p>
+                        <h2>Chats</h2>
+                    </div>
+                    <button id="newChat" class="secondary-action">New</button>
+                </div>
+                <div id="chatList" class="chat-list"></div>
+            </aside>
+            <section class="chat-main">
+                <div class="chat-header">
+                    <div class="chat-title">
+                        <h2 id="activeChatTitle">New chat</h2>
+                        <button id="renameChat" class="icon-button" type="button">Rename</button>
+                    </div>
+                    <div class="model-select">
+                        <label for="model">Model:</label>
+                        <select id="model">
+                            <option disabled selected>Loading models...</option>
+                        </select>
+                    </div>
+                </div>
+                <div id="messages"></div>
+                <div class="input-container">
+                    <textarea id="msgInput" placeholder="Type your message..."></textarea>
+                    <button id="send"></button>
+                </div>
+                <div class="logout-container">
+                    <button id="deleteChat" class="danger">Delete Chat</button>
+                    <button id="logout">Logout</button>
+                </div>
+            </section>
         </div>
     </div>
 </div>
@@ -86,4 +106,4 @@
 <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js" defer></script>
 <script src="script.js" defer></script>
 </body>
-</html>
+</html>

public/script.js

@@ -15,9 +15,15 @@ const msgInput = document.getElementById("msgInput");
 const sendBtn = document.getElementById("send");
 const authScreens = document.querySelectorAll(".auth-screen");
 const toggleButtons = document.querySelectorAll(".auth-toggle .toggle");
+const chatList = document.getElementById("chatList");
+const newChatBtn = document.getElementById("newChat");
+const renameChatBtn = document.getElementById("renameChat");
+const deleteChatBtn = document.getElementById("deleteChat");
+const activeChatTitle = document.getElementById("activeChatTitle");
 
 let isProcessing = false;
-let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [];
+let chatSessions = [];
+let activeChatId = null;
 
 const displayModels = async () => {
     const select = document.getElementById("model");
@@ -40,12 +46,12 @@ const displayModels = async () => {
         });
 }
 
-async function post(url, data) {
+async function request(url, data, method = "POST") {
     try {
         const res = await fetch(url, {
-            method: "POST",
+            method,
             headers: {"Content-Type": "application/json"},
-            body: JSON.stringify(data)
+            body: data ? JSON.stringify(data) : undefined
         });
         return await res.json();
     } catch (err) {
@@ -53,6 +59,10 @@ async function post(url, data) {
     }
 }
 
+async function post(url, data) {
+    return request(url, data, "POST");
+}
+
 async function get(url) {
     try {
         const res = await fetch(url);
@@ -69,50 +79,35 @@ function setAuthMessage(msg, state = "") {
 
 function setMessageContent(element, content) {
     if (window.marked && window.DOMPurify) {
-        const rendered = marked.parse(content, { breaks: true });
+        const rendered = marked.parse(content, {breaks: true});
         element.innerHTML = DOMPurify.sanitize(rendered);
         return;
     }
-
     element.textContent = content;
 }
 
 function addMessage(content, isUser = false, isLoading = false, saveToHistory = true) {
     const msgDiv = document.createElement('div');
     msgDiv.className = `msg ${isUser ? 'user' : 'bot'}${isLoading ? ' loading' : ''}`;
-
     if (isLoading) {
         msgDiv.innerHTML = `
-            <div class="typing-indicator">
-                <div class="typing-dot"></div>
-                <div class="typing-dot"></div>
-                <div class="typing-dot"></div>
-            </div>
-        `;
+             <div class="typing-indicator">
+                 <div class="typing-dot"></div>
+                 <div class="typing-dot"></div>
+                 <div class="typing-dot"></div>
+             </div>
+         `;
     } else {
         const header = document.createElement('div');
         header.className = 'msg-header';
         header.textContent = isUser ? 'You' : 'DeepFake';
-
         const body = document.createElement('div');
         body.className = 'msg-content';
         setMessageContent(body, content);
-
         msgDiv.appendChild(header);
         msgDiv.appendChild(body);
-
-        if (saveToHistory) {
-            chatHistory.push({
-                content: content,
-                isUser: isUser,
-                timestamp: Date.now()
-            });
-            localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
-        }
     }
-
     messagesDiv.appendChild(msgDiv);
-
     setTimeout(() => {
         messagesDiv.scrollTop = messagesDiv.scrollHeight;
     }, 100);
@@ -120,17 +115,57 @@ function addMessage(content, isUser = false, isLoading = false, saveToHistory =
     return msgDiv;
 }
 
-function loadChatHistory() {
+function clearMessages() {
     messagesDiv.innerHTML = '';
-    chatHistory.forEach(msg => {
-        addMessage(msg.content, msg.isUser, false, false);
-    });
 }
 
-function clearChatHistory() {
-    chatHistory = [];
-    localStorage.removeItem('chatHistory');
-    messagesDiv.innerHTML = '';
+
+function getChatById(chatId) {
+    return chatSessions.find(chat => chat.id === chatId);
+}
+
+function bumpChat(chatId) {
+    const index = chatSessions.findIndex(chat => chat.id === chatId);
+    if (index <= 0) return;
+    const [chat] = chatSessions.splice(index, 1);
+    chatSessions.unshift(chat);
+    renderChatList();
+}
+
+function updateChatActionState() {
+    const hasChat = Boolean(activeChatId);
+    renameChatBtn.disabled = !hasChat;
+    deleteChatBtn.disabled = !hasChat;
+}
+
+
+function renderChatList() {
+    chatList.innerHTML = '';
+    if (!chatSessions.length) {
+        const empty = document.createElement('p');
+        empty.className = 'status';
+        empty.textContent = 'No chats yet. Start a new one!';
+        chatList.appendChild(empty);
+        return;
+    }
+    chatSessions.forEach(chat => {
+        const item = document.createElement('div');
+        item.className = `chat-item${chat.id === activeChatId ? ' active' : ''}`;
+        const title = document.createElement('span');
+        title.textContent = chat.title;
+        const actions = document.createElement('button');
+        actions.type = 'button';
+        actions.textContent = '✕';
+        actions.title = 'Delete chat';
+        actions.addEventListener('click', (event) => {
+            event.stopPropagation();
+            deleteChat(chat.id);
+        });
+        item.appendChild(title);
+        item.appendChild(actions);
+        item.addEventListener('click', () => setActiveChat(chat.id));
+        chatList.appendChild(item);
+    });
 }
 
 function setLoadingState(loading) {
@@ -157,12 +192,96 @@ function showAuthScreen(target) {
     setAuthMessage('', '');
 }
 
+function setActiveChat(chatId) {
+    activeChatId = chatId;
+    const chat = getChatById(chatId);
+    activeChatTitle.textContent = chat ? chat.title : 'New chat';
+    updateChatActionState();
+    renderChatList();
+    if (chatId) {
+        loadChatMessages(chatId);
+    } else {
+        clearMessages();
+    }
+}
+
+
+async function loadChatSessions() {
+    const res = await get('/chats');
+    if (res.error) return;
+    chatSessions = res.chats || [];
+    renderChatList();
+    const activeExists = chatSessions.find(chat => chat.id === activeChatId);
+    if (activeExists) {
+        setActiveChat(activeChatId);
+        return;
+    }
+    if (!chatSessions.length) {
+        await createNewChat();
+        return;
+    }
+    setActiveChat(chatSessions[0].id);
+}
+
+async function loadChatMessages(chatId) {
+    const res = await get(`/chats/${chatId}/messages`);
+    if (res.error) return;
+    clearMessages();
+    (res.messages || []).forEach(msg => {
+        addMessage(msg.content, msg.role === 'user', false, false);
+
+    });
+    messagesDiv.scrollTop = messagesDiv.scrollHeight;
+}
+
+async function createNewChat() {
+    const res = await post('/chats', {title: 'New chat'});
+    if (res.error || !res.chat) return;
+    chatSessions.unshift(res.chat);
+    setActiveChat(res.chat.id);
+    renderChatList();
+}
+
+async function renameChat(chatId) {
+    const chat = getChatById(chatId);
+    if (!chat) return;
+    const nextTitle = prompt('Rename chat', chat.title);
+    if (!nextTitle) return;
+    const trimmedTitle = nextTitle.trim();
+    if (!trimmedTitle) return;
+    const res = await request(`/chats/${chatId}`, {title: trimmedTitle}, "PUT");
+    if (res.error) return;
+    chat.title = trimmedTitle;
+    activeChatTitle.textContent = trimmedTitle;
+    renderChatList();
+}
+
+
+async function deleteChat(chatId) {
+    const chat = getChatById(chatId);
+    if (!chat) return;
+    const confirmDelete = confirm(`Delete "${chat.title}"? This cannot be undone.`);
+    if (!confirmDelete) return;
+    const res = await request(`/chats/${chatId}`, null, "DELETE");
+    if (res.error) return;
+    chatSessions = chatSessions.filter(item => item.id !== chatId);
+    if (activeChatId === chatId) {
+        if (chatSessions.length) {
+            setActiveChat(chatSessions[0].id);
+        } else {
+            activeChatId = null;
+            await createNewChat();
+        }
+    }
+    renderChatList();
+}
+
 async function checkSession() {
     const res = await get('/session');
     if (res.user) {
         authDiv.style.display = "none";
-        chatDiv.style.display = "grid";
-        loadChatHistory();
+        chatDiv.style.display = "block";
+        await loadChatSessions();
         msgInput.focus();
         return true;
     }
@@ -170,23 +289,11 @@ async function checkSession() {
 }
 
 async function loadServerChat() {
-    const res = await get("/chat/history");
-    if (res.history && res.history.length) {
-        messagesDiv.innerHTML = '';
-        res.history.forEach(msg => {
-            addMessage(
-                msg.content,
-                msg.role === "user",
-                false,
-                false
-            );
-        });
-        messagesDiv.scrollTop = messagesDiv.scrollHeight;
-    }
+    await loadChatSessions();
 }
 
 async function handleAuth(endpoint, credentials) {
-    const { username, password } = credentials;
+    const {username, password} = credentials;
     const submitBtn = endpoint === "login" ? loginSubmit : registerSubmit;
 
     if (!username || !password) {
@@ -207,7 +314,7 @@ async function handleAuth(endpoint, credentials) {
         if (endpoint === "login") {
             setAuthMessage("Login successful! Redirecting to chat...", 'success');
             authDiv.style.display = "none";
-            chatDiv.style.display = "grid";
+            chatDiv.style.display = "block";
             await loadServerChat();
             msgInput.focus();
         } else {
@@ -223,6 +330,17 @@ async function sendMessage() {
     if (isProcessing) return;
     const msg = msgInput.value.trim();
     if (!msg) return;
+    if (!activeChatId) {
+        await createNewChat();
+    }
+    const currentChat = getChatById(activeChatId);
+    if (currentChat && currentChat.title === 'New chat') {
+        const autoTitle = msg.length > 40 ? `${msg.slice(0, 40)}…` : msg;
+        currentChat.title = autoTitle;
+        activeChatTitle.textContent = autoTitle;
+        renderChatList();
+        await request(`/chats/${activeChatId}`, {title: autoTitle}, "PUT");
+    }
     addMessage(msg, true);
     msgInput.value = "";
     msgInput.style.height = 'auto';
@@ -230,12 +348,13 @@ async function sendMessage() {
     const loadingMsg = addMessage('', false, true, false);
     try {
         const model = document.getElementById("model").value;
-        const res = await post("/chat", {message: msg, model});
+        const res = await post("/chat", {message: msg, model, chatId: activeChatId});
         if (messagesDiv.contains(loadingMsg)) {
             messagesDiv.removeChild(loadingMsg);
         }
         if (res.reply) {
             addMessage(res.reply, false);
+            bumpChat(activeChatId);
         } else {
             addMessage(`[Error: ${res.error}]`, false);
         }
@@ -274,7 +393,9 @@ document.getElementById("logout").onclick = async () => {
     await post("/logout", {});
     chatDiv.style.display = "none";
     authDiv.style.display = "grid";
-    clearChatHistory();
+    clearMessages();
+    chatSessions = [];
+    activeChatId = null;
     setAuthMessage("Logged out.", 'success');
     showAuthScreen('login');
     loginUsernameInput.value = "";
@@ -290,16 +411,25 @@ msgInput.addEventListener("keydown", (e) => {
     }
 });
 
-document.getElementById("clearChat").onclick = async () => {
-    await post("/chat/clear", {});
-    clearChatHistory();
-};
+newChatBtn.addEventListener('click', () => createNewChat());
 
-msgInput.addEventListener('input', function () {
-    this.style.height = 'auto';
-    this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+renameChatBtn.addEventListener('click', () => {
+    if (activeChatId) {
+        renameChat(activeChatId);
+    }
 });
 
+deleteChatBtn.addEventListener('click', () => {
+    if (activeChatId) {
+        deleteChat(activeChatId);
+    }
+});
++
+    msgInput.addEventListener('input', function () {
+        this.style.height = 'auto';
+        this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+    });
+
 window.addEventListener('load', () => {
     checkSession();
     displayModels();

public/style.css

@@ -26,8 +26,8 @@ html, body {
 
 body {
     font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    background: radial-gradient(circle at 20% 20%, rgba(99,102,241,0.12), transparent 25%),
-    radial-gradient(circle at 80% 0%, rgba(139,92,246,0.12), transparent 25%),
+    background: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.12), transparent 25%),
+    radial-gradient(circle at 80% 0%, rgba(139, 92, 246, 0.12), transparent 25%),
     linear-gradient(135deg, #0b0b1d 0%, #0f1124 40%, #0b1020 100%);
     color: var(--text-primary);
     display: flex;
@@ -64,7 +64,7 @@ body {
     content: '';
     position: absolute;
     inset: 0;
-    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05));
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
     opacity: 0.5;
     pointer-events: none;
 }
@@ -125,8 +125,8 @@ h1 {
 }
 
 .auth-toggle {
-    background: rgba(255,255,255,0.02);
-    border: 1px solid rgba(255,255,255,0.07);
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.07);
     border-radius: 14px;
     padding: 6px;
     display: grid;
@@ -148,7 +148,7 @@ h1 {
 .toggle.active {
     background: var(--gradient);
     color: white;
-    box-shadow: 0 10px 20px rgba(99,102,241,0.25);
+    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.25);
 }
 
 .auth-screen {
@@ -234,7 +234,9 @@ button:hover:not(:disabled) {
     box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3);
 }
 
-button:hover::before { left: 100%; }
+button:hover::before {
+    left: 100%;
+}
 
 button:disabled {
     opacity: 0.5;
@@ -255,8 +257,8 @@ button:disabled {
     padding: 10px;
     border-radius: 10px;
     transition: all 0.3s ease;
-    background: rgba(255,255,255,0.02);
-    border: 1px dashed rgba(255,255,255,0.05);
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px dashed rgba(255, 255, 255, 0.05);
     color: var(--text-secondary);
 }
 
@@ -273,29 +275,135 @@ button:disabled {
 }
 
 #chat {
-    display: grid;
-    grid-template-rows: 1fr auto auto;
-    row-gap: 15px;
     height: 90vh;
-    width: 90%;
-    max-width: 1100px;
+    width: 95%;
+    max-width: 1200px;
     padding: 24px;
-    background: rgba(19,19,42,0.92);
+    background: rgba(19, 19, 42, 0.92);
     border-radius: 24px;
     box-shadow: 0 25px 50px -12px var(--shadow);
     min-height: 0;
 }
 
+.chat-layout {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 20px;
+    height: 100%;
+    min-height: 0;
+}
+
+.chat-sidebar {
+    background: rgba(10, 10, 20, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 20px;
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-height: 0;
+}
+
+.sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+}
+
+.sidebar-header h2 {
+    margin: 2px 0 0;
+    font-size: 1.2rem;
+}
+
+.secondary-action {
+    background: rgba(99, 102, 241, 0.15);
+    color: var(--text-primary);
+    border: 1px solid rgba(99, 102, 241, 0.35);
+    padding: 10px 14px;
+    border-radius: 12px;
+}
+
+.chat-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    overflow-y: auto;
+    padding-right: 4px;
+}
+
+.chat-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-list::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+}
+
+.chat-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 12px 12px;
+    border-radius: 14px;
+    border: 1px solid transparent;
+    background: rgba(15, 15, 35, 0.6);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.chat-item:hover {
+    border-color: rgba(99, 102, 241, 0.4);
+    background: rgba(19, 19, 42, 0.9);
+}
+
+.chat-item.active {
+    border-color: rgba(99, 102, 241, 0.7);
+    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
+}
+
+.chat-item span {
+    font-size: 0.95rem;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+}
+
+.chat-item button {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    padding: 6px;
+    border-radius: 8px;
+    font-size: 14px;
+}
+
+.chat-item button:hover {
+    color: var(--text-primary);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.chat-main {
+    display: grid;
+    grid-template-rows: auto 1fr auto auto;
+    row-gap: 15px;
+    min-height: 0;
+}
+
 #messages {
-    grid-row: 1;
+    grid-row: 2;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 16px;
     padding: 20px;
     margin: 0;
-    background: rgba(10,10,20,0.6);
-    border: 1px solid rgba(255,255,255,0.05);
+    background: rgba(10, 10, 20, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 20px;
     backdrop-filter: blur(10px);
     scroll-behavior: smooth;
@@ -303,7 +411,7 @@ button:disabled {
 }
 
 .input-container {
-    grid-row: 2;
+    grid-row: 3;
     display: flex;
     align-items: flex-end;
     gap: 12px;
@@ -312,14 +420,23 @@ button:disabled {
 }
 
 .logout-container {
-    grid-row: 3;
+    grid-row: 4;
     text-align: center;
     margin-top: 10px;
 }
 
-#messages::-webkit-scrollbar { width: 8px; }
-#messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-#messages::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+#messages::-webkit-scrollbar {
+    width: 8px;
+}
+
+#messages::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+}
+
+#messages::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
 
 #chat h1 {
     flex-shrink: 0;
@@ -347,8 +464,14 @@ button:disabled {
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .msg.user {
@@ -447,13 +570,38 @@ button:disabled {
     color: #bfdbfe;
 }
 
-.typing-indicator { display: flex; align-items: center; gap: 6px; height: 16px; }
-.typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); animation: typingAnimation 1.2s infinite ease-in-out; }
-.typing-dot:nth-child(1) { animation-delay: -0.32s; }
-.typing-dot:nth-child(2) { animation-delay: -0.16s; }
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 16px;
+}
+
+.typing-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--text-secondary);
+    animation: typingAnimation 1.2s infinite ease-in-out;
+}
+
+.typing-dot:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.typing-dot:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
 @keyframes typingAnimation {
-    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
-    40% { transform: scale(1); opacity: 1; }
+    0%, 80%, 100% {
+        transform: scale(0.8);
+        opacity: 0.5;
+    }
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
 }
 
 #msgInput {
@@ -479,36 +627,160 @@ button:disabled {
     flex-shrink: 0;
 }
 
-#send::after { content: "➤"; font-weight: bold; }
-#send.loading::after { content: ''; }
-#send.loading { animation: spin 1s linear infinite; }
-@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+#send::after {
+    content: "➤";
+    font-weight: bold;
+}
 
-#logout { background: linear-gradient(135deg, #6b7280, #4b5563); border-radius: 12px; }
+#send.loading::after {
+    content: '';
+}
 
-.auth-buttons, .logout-container { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
-.chat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
-.model-select { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); }
-.model-select select { background: rgba(15, 15, 35, 0.8); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 14px; outline: none; transition: all 0.2s ease; }
-.model-select select:hover, .model-select select:focus { border-color: var(--accent); background: rgba(15, 15, 35, 1); }
+#send.loading {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+#logout {
+    background: linear-gradient(135deg, #6b7280, #4b5563);
+    border-radius: 12px;
+}
+
+.auth-buttons, .logout-container {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.chat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+}
+
+.chat-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.chat-title h2 {
+    margin: 0;
+    font-size: 1.3rem;
+}
+
+.icon-button {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 8px 12px;
+    border-radius: 10px;
+    font-size: 13px;
+}
+
+.icon-button:hover {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.danger {
+    background: linear-gradient(135deg, #ef4444, #dc2626);
+}
+
+.model-select {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+.model-select select {
+    background: rgba(15, 15, 35, 0.8);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 6px 10px;
+    font-size: 14px;
+    outline: none;
+    transition: all 0.2s ease;
+}
+
+.model-select select:hover, .model-select select:focus {
+    border-color: var(--accent);
+    background: rgba(15, 15, 35, 1);
+}
 
 @media (max-width: 1100px) {
-    .app-shell { flex-direction: column; align-items: center; }
-    #chat { width: 95vw; height: 80vh; }
+    .app-shell {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #chat {
+        width: 95vw;
+        height: 85vh;
+    }
+
+    .chat-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .chat-sidebar {
+        order: 2;
+    }
+
+    .chat-main {
+        order: 1;
+    }
 }
 
 @media (max-width: 768px) {
-    body { padding: 16px; }
-    #chat { width: 95vw; height: 85vh; padding: 16px; }
-    #auth { width: 95vw; padding: 28px; }
-    h1 { font-size: 1.6rem; }
+    body {
+        padding: 16px;
+    }
+
+    #chat {
+        width: 95vw;
+        height: 85vh;
+        padding: 16px;
+    }
+
+    #auth {
+        width: 95vw;
+        padding: 28px;
+    }
+
+    h1 {
+        font-size: 1.6rem;
+    }
 }
 
 @media (max-width: 480px) {
-    .brand { grid-template-columns: 1fr; }
-    .logo { width: 48px; height: 48px; }
-    #chat { padding: 12px; }
-    #messages { padding: 14px; }
+    .brand {
+        grid-template-columns: 1fr;
+    }
+
+    .logo {
+        width: 48px;
+        height: 48px;
+    }
+
+    #chat {
+        padding: 12px;
+    }
+
+    #messages {
+        padding: 14px;
+    }
 }
 
 .consent-container {