From 169650c71bdd098e032f0dc4ebe4afe0584d4d2d Mon Sep 17 00:00:00 2001
From: fretuks <frederik@spirgi.com>
Date: Tue, 24 Mar 2026 11:16:22 +0100
Subject: [PATCH] Implement a large number of changes, including overhauled
 styling and a settings page

---
 public/index.html    |  217 ++--
 public/market.html   |   32 +-
 public/market.js     |  284 ++---
 public/script.js     |  915 +++++----------
 public/settings.html |  114 ++
 public/settings.js   |  122 ++
 public/style.css     | 2571 +++++++++++++++++++++++++++---------------
 server.js            |  170 ++-
 8 files changed, 2633 insertions(+), 1792 deletions(-)
 create mode 100644 public/settings.html
 create mode 100644 public/settings.js

diff --git a/public/index.html b/public/index.html
index e0d80c2..5720b6e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,122 +2,151 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8"/>
-    <title>DeepFake</title>
+    <title>FakeGPT</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 <div class="app-shell">
-    <div id="auth" class="card">
-        <div class="brand">
-            <div class="logo">DF</div>
-            <div>
-                <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>
+    <section id="auth" class="card auth-card auth-card-compact">
+        <div class="auth-hero auth-hero-compact">
+            <div class="brand">
+                <div class="logo" data-theme-logo>FG</div>
+                <div>
+                    <p class="eyebrow">Private chat</p>
+                    <h1 data-theme-name>FakeGPT</h1>
+                </div>
+            </div>
+            <div class="hero-grid">
+                <article class="hero-panel">
+                    <p>Log in to continue your chats. Personas, shared presets, and theme changes are available after sign-in.</p>
+                </article>
             </div>
         </div>
 
-        <div class="auth-toggle">
-            <button class="toggle active" data-target="login">Login</button>
-            <button class="toggle" data-target="register">Register</button>
-        </div>
+        <div class="auth-panel">
+            <div class="auth-toggle">
+                <button class="toggle active" data-target="login">Login</button>
+                <button class="toggle" data-target="register">Register</button>
+            </div>
 
-        <div id="loginScreen" class="auth-screen active">
-            <form id="loginForm" class="auth-form">
-                <label class="field">
-                    <span>Username</span>
-                    <input id="loginUsername" placeholder="Enter your username" autocomplete="username"/>
-                </label>
-                <label class="field">
-                    <span>Password</span>
-                    <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>
-        </div>
+            <div id="loginScreen" class="auth-screen active">
+                <form id="loginForm" class="auth-form">
+                    <label class="field">
+                        <span>Username</span>
+                        <input id="loginUsername" placeholder="Enter your username" autocomplete="username"/>
+                    </label>
+                    <label class="field">
+                        <span>Password</span>
+                        <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>
+            </div>
 
-        <div id="registerScreen" class="auth-screen">
-            <form id="registerForm" class="auth-form">
-                <label class="field">
-                    <span>Create username</span>
-                    <input id="registerUsername" placeholder="Choose a username" autocomplete="new-username"/>
-                </label>
-                <label class="field">
-                    <span>Create password</span>
-                    <input id="registerPassword" type="password" placeholder="Create a password"
-                           autocomplete="new-password"/>
-                </label>
-                <div class="consent-container">
-                    <input type="checkbox" id="consentCheckbox" required/>
-                    <label for="consentCheckbox">
-                        I agree to the
-                        <a href="/tos.html" target="_blank">Terms of Service</a> and
-                        <a href="/privacy.html" target="_blank">Privacy Policy</a>.
+            <div id="registerScreen" class="auth-screen">
+                <form id="registerForm" class="auth-form">
+                    <label class="field">
+                        <span>Create username</span>
+                        <input id="registerUsername" placeholder="Choose a username" autocomplete="new-username"/>
+                    </label>
+                    <label class="field">
+                        <span>Create password</span>
+                        <input id="registerPassword" type="password" placeholder="Create a password" autocomplete="new-password"/>
+                    </label>
+                    <div class="consent-container">
+                        <input type="checkbox" id="consentCheckbox" required/>
+                        <label for="consentCheckbox">
+                            I agree to the
+                            <a href="/tos.html" target="_blank">Terms of Service</a> and
+                            <a href="/privacy.html" target="_blank">Privacy Policy</a>.
+                        </label>
+                    </div>
+                    <button id="registerSubmit" type="submit" class="primary-action">Create account</button>
+                </form>
+            </div>
+
+            <p id="authMsg" class="status"></p>
+        </div>
+    </section>
+
+    <section id="chat" class="card chat-card chat-focus-card" style="display:none;">
+        <div class="chat-layout chat-layout-focus">
+            <aside class="chat-sidebar">
+                <div class="sidebar-top">
+                    <div class="sidebar-header">
+                        <div>
+                            <p class="eyebrow">Chats</p>
+                            <h2>Saved threads</h2>
+                        </div>
+                        <button id="newChat" class="secondary-action" type="button">New</button>
+                    </div>
+                    <label class="field compact-field">
+                        <span>Search</span>
+                        <input id="chatSearch" type="search" placeholder="Filter chat titles"/>
                     </label>
                 </div>
-
-                <button id="registerSubmit" type="submit" class="primary-action">Create account</button>
-            </form>
-        </div>
-
-        <p id="authMsg" class="status"></p>
-    </div>
-
-    <div id="chat" class="card" style="display:none;">
-        <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>
+                <div class="sidebar-footer sidebar-footer-stack">
+                    <a href="/market" class="secondary-action">Persona Market</a>
+                    <a href="/settings" class="secondary-action">Settings</a>
+                    <div class="session-chip">
+                        <span class="session-chip-label">Signed in as</span>
+                        <strong id="sessionUser">-</strong>
+                    </div>
+                    <button id="logout" type="button">Logout</button>
+                </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>
+
+            <section class="chat-main chat-main-focus">
+                <header class="chat-header chat-header-focus">
+                    <div class="chat-title-block">
+                        <div class="chat-title">
+                            <p class="eyebrow">Conversation</p>
+                            <h2 id="activeChatTitle">New chat</h2>
+                        </div>
+                        <div class="chat-toolbar">
+                            <button id="renameChat" class="icon-button" type="button">Rename</button>
+                            <button id="clearChat" class="icon-button" type="button">Clear</button>
+                            <button id="exportChat" class="icon-button" type="button">Export</button>
+                        </div>
                     </div>
                     <div class="chat-header-actions">
                         <div class="model-select">
-                            <label for="model">Model:</label>
+                            <label for="model">Model</label>
                             <select id="model">
                                 <option disabled selected>Loading models...</option>
                             </select>
                         </div>
-                        <a href="/market.html" class="secondary-action market-link">Persona Market</a>
                         <div class="persona-menu">
-                            <button id="personaMenuButton" class="secondary-action" type="button"
-                                    aria-expanded="false" aria-controls="personaPopover">
+                            <button id="personaMenuButton" class="secondary-action" type="button" aria-expanded="false" aria-controls="personaPopover">
                                 Personas
                             </button>
                             <div id="personaPopover" class="persona-popover hidden" role="dialog">
                                 <div class="persona-section">
                                     <div class="persona-section-header">
                                         <div>
-                                            <p class="eyebrow">Roleplay</p>
-                                            <h2>AI Persona</h2>
-                                            <p class="persona-guidance">Controls how the assistant sounds and behaves.</p>
+                                            <p class="eyebrow">Assistant</p>
+                                            <h2>AI persona</h2>
+                                            <p class="persona-guidance">Changes the assistant's tone and character.</p>
                                         </div>
                                         <div class="persona-section-actions">
                                             <button id="newPersona" class="secondary-action" type="button">New AI</button>
                                             <button id="clearPersona" class="secondary-action" type="button">Clear</button>
                                         </div>
                                     </div>
-                                    <p id="activePersonaStatus" class="status persona-status">No persona equipped.</p>
+                                    <p id="activePersonaStatus" class="status persona-status">No AI persona equipped.</p>
                                     <div id="personaList" class="persona-list"></div>
                                 </div>
                                 <div class="persona-section">
                                     <div class="persona-section-header">
                                         <div>
-                                            <p class="eyebrow">Roleplay</p>
-                                            <h2>Your Persona</h2>
-                                            <p class="persona-guidance">Defines how the assistant should portray you.</p>
+                                            <p class="eyebrow">User</p>
+                                            <h2>Your persona</h2>
+                                            <p class="persona-guidance">Adds context for how the assistant should read you.</p>
                                         </div>
                                         <div class="persona-section-actions">
                                             <button id="newUserPersona" class="secondary-action" type="button">New you</button>
@@ -130,20 +159,30 @@
                             </div>
                         </div>
                     </div>
+                </header>
+
+                <div id="messages" class="messages-panel messages-panel-focus"></div>
+
+                <div id="emptyState" class="empty-state">
+                    <p class="eyebrow">No messages yet</p>
+                    <h3>Write something when you're ready.</h3>
+                    <p>This can stay a plain chat. Personas and shared presets are optional.</p>
                 </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 class="input-shell input-shell-focus">
+                    <div class="input-meta">
+                        <p class="composer-hint">Enter sends. Shift+Enter adds a new line.</p>
+                    </div>
+                    <div class="input-container">
+                        <textarea id="msgInput" placeholder="Type your message..."></textarea>
+                        <button id="send" type="button" aria-label="Send message"></button>
+                    </div>
                 </div>
             </section>
         </div>
-    </div>
+    </section>
 </div>
+
 <div id="personaModal" class="modal-overlay hidden">
     <div class="modal-card">
         <div class="modal-header">
@@ -158,7 +197,7 @@
                     <option value="user">Your persona</option>
                 </select>
             </label>
-            <p class="persona-helper">AI personas shape how the assistant speaks. Your persona describes how you should be portrayed.</p>
+            <p class="persona-helper">AI personas shape the assistant. Your persona gives the model user-side context.</p>
             <label class="field">
                 <span>Name</span>
                 <input id="personaName" placeholder="Persona name" required/>
@@ -177,8 +216,7 @@
             </label>
             <label class="field">
                 <span>Details</span>
-                <textarea id="personaDetails" rows="3"
-                          placeholder="Personality traits, voice, or quirks"></textarea>
+                <textarea id="personaDetails" rows="3" placeholder="Personality traits, voice, quirks, goals"></textarea>
             </label>
             <div class="persona-actions">
                 <button id="personaSave" type="submit" class="primary-action">Save persona</button>
@@ -186,6 +224,7 @@
         </form>
     </div>
 </div>
+
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
 <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js" defer></script>
 <script src="script.js" defer></script>
diff --git a/public/market.html b/public/market.html
index c38d05c..c46b879 100644
--- a/public/market.html
+++ b/public/market.html
@@ -2,41 +2,47 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8"/>
-    <title>Persona Market</title>
+    <title>FakeGPT Market</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
-<div class="market-shell card">
-    <header class="market-header">
+<div class="market-shell card market-shell-simple">
+    <header class="market-header market-header-simple">
         <div>
-            <p class="eyebrow">Community</p>
-            <h1>Persona Market</h1>
-            <p class="subtitle">Browse shared personas and choose who should embody them.</p>
-            <div class="market-search">
-                <label for="marketSearch">Search personas</label>
-                <input id="marketSearch" type="search" placeholder="Search by name, creator, or details"/>
-            </div>
+            <p class="eyebrow">Shared personas</p>
+            <h1><span data-theme-name>FakeGPT</span> Market</h1>
+            <p class="subtitle">A plain list of personas other people decided to share.</p>
         </div>
         <div class="market-header-actions">
-            <button id="refreshMarket" class="secondary-action" type="button">Refresh listings</button>
+            <button id="refreshMarket" class="secondary-action" type="button">Refresh</button>
+            <a href="/settings" class="secondary-action">Settings</a>
             <a href="/" class="secondary-action">Back to chat</a>
         </div>
     </header>
+
+    <div class="market-search">
+        <label for="marketSearch">Search personas</label>
+        <input id="marketSearch" type="search" placeholder="Search by name, creator, or description"/>
+    </div>
+
     <p id="marketStatus" class="status persona-status">Loading market personas...</p>
+
     <div class="persona-market-columns market-page-columns">
         <div class="persona-market-column">
             <h3>AI personas</h3>
-            <p class="persona-guidance">These shape how the assistant speaks and behaves.</p>
             <div id="marketPersonaList" class="persona-list"></div>
         </div>
         <div class="persona-market-column">
             <h3>User personas</h3>
-            <p class="persona-guidance">These describe how the assistant should portray you.</p>
             <div id="marketUserPersonaList" class="persona-list"></div>
         </div>
     </div>
 </div>
+
 <div id="marketPreviewModal" class="modal-overlay hidden">
     <div class="modal-card market-preview-card">
         <div class="modal-header">
diff --git a/public/market.js b/public/market.js
index 80b4816..81b76ea 100644
--- a/public/market.js
+++ b/public/market.js
@@ -1,114 +1,117 @@
-const marketPersonaList = document.getElementById("marketPersonaList");
-const marketUserPersonaList = document.getElementById("marketUserPersonaList");
-const refreshMarketBtn = document.getElementById("refreshMarket");
-const marketStatus = document.getElementById("marketStatus");
-const marketSearchInput = document.getElementById("marketSearch");
-const marketPreviewModal = document.getElementById("marketPreviewModal");
-const marketPreviewName = document.getElementById("marketPreviewName");
-const marketPreviewMeta = document.getElementById("marketPreviewMeta");
-const marketPreviewPronouns = document.getElementById("marketPreviewPronouns");
-const marketPreviewAppearance = document.getElementById("marketPreviewAppearance");
-const marketPreviewBackground = document.getElementById("marketPreviewBackground");
-const marketPreviewDetails = document.getElementById("marketPreviewDetails");
-const marketPreviewConfirm = document.getElementById("marketPreviewConfirm");
-const marketPreviewCancel = document.getElementById("marketPreviewCancel");
-const marketPreviewClose = document.getElementById("marketPreviewClose");
-let allMarketPersonas = [];
-let pendingMarketPersona = null;
+const $ = (id) => document.getElementById(id);
+const marketPersonaList = $("marketPersonaList"), marketUserPersonaList = $("marketUserPersonaList");
+const refreshMarketBtn = $("refreshMarket"), marketStatus = $("marketStatus"), marketSearchInput = $("marketSearch");
+const marketPreviewModal = $("marketPreviewModal"), marketPreviewName = $("marketPreviewName"), marketPreviewMeta = $("marketPreviewMeta");
+const marketPreviewPronouns = $("marketPreviewPronouns"), marketPreviewAppearance = $("marketPreviewAppearance"), marketPreviewBackground = $("marketPreviewBackground"), marketPreviewDetails = $("marketPreviewDetails");
+const marketPreviewConfirm = $("marketPreviewConfirm"), marketPreviewCancel = $("marketPreviewCancel"), marketPreviewClose = $("marketPreviewClose");
+const themeNameTargets = document.querySelectorAll("[data-theme-name]");
+let allMarketPersonas = [], pendingMarketPersona = null;
+
+const themes = {
+    "fakegpt": {name: "FakeGPT"},
+    "fraud": {name: "Fraud"},
+    "germini": {name: "Germini"},
+    "slopilot": {name: "Slopilot"},
+    "beta-ai": {name: "Beta AI"},
+    "confusity": {name: "Confusity"}
+};
 
 async function request(url, data, method = "POST") {
     try {
-        const res = await fetch(url, {
-            method,
-            headers: {"Content-Type": "application/json"},
-            body: data ? JSON.stringify(data) : undefined
-        });
+        const res = await fetch(url, {method, headers: {"Content-Type": "application/json"}, body: data ? JSON.stringify(data) : undefined});
         return await res.json();
-    } catch (err) {
-        return {error: "Network error — please try again."};
+    } catch {
+        return {error: "Network error - please try again."};
     }
 }
 
-async function post(url, data) {
-    return request(url, data, "POST");
-}
+const get = (url) => request(url, null, "GET");
+const post = (url, data) => request(url, data, "POST");
 
-async function get(url) {
-    try {
-        const res = await fetch(url);
-        return await res.json();
-    } catch (err) {
-        return {error: "Network error — please try again."};
-    }
+function applyTheme(themeKey) {
+    const nextTheme = themes[themeKey] ? themeKey : "fakegpt";
+    document.body.dataset.theme = nextTheme;
+    document.title = `${themes[nextTheme].name} Market`;
+    themeNameTargets.forEach((target) => { target.textContent = themes[nextTheme].name; });
 }
 
 function setMarketStatus(message, state = "") {
-    if (!marketStatus) return;
     marketStatus.textContent = message;
     marketStatus.className = state ? `status persona-status ${state}` : "status persona-status";
 }
 
 function buildPersonaMeta(persona) {
-    const pronouns = persona.pronouns ? `Pronouns: ${persona.pronouns}` : "Pronouns: —";
-    const usageCount = Number(persona.usage_count || 0);
-    const usageLabel = `Used ${usageCount} ${usageCount === 1 ? "time" : "times"}`;
-    return `By ${persona.creator_username} • ${pronouns} • ${usageLabel}`;
-}
-
-function renderMarketList(personaItems, listElement, personaType) {
-    if (!listElement) return;
-    listElement.innerHTML = "";
-    if (!personaItems.length) {
-        const empty = document.createElement("p");
-        empty.className = "status persona-status";
-        empty.textContent = personaType === "assistant"
-            ? "No AI personas listed yet. Publish the first one!"
-            : "No user personas listed yet. Publish the first one!";
-        listElement.appendChild(empty);
-        return;
-    }
-    personaItems.forEach(persona => {
-        const item = document.createElement("div");
-        item.className = "persona-item";
-
-        const titleRow = document.createElement("div");
-        titleRow.className = "persona-title-row";
-
-        const title = document.createElement("h4");
-        title.textContent = persona.name;
-
-        const roleTag = document.createElement("span");
-        roleTag.className = `persona-role-tag ${personaType === "assistant" ? "ai" : "user"}`;
-        roleTag.textContent = personaType === "assistant" ? "AI" : "You";
-
-        titleRow.appendChild(title);
-        titleRow.appendChild(roleTag);
-
-        const meta = document.createElement("p");
-        meta.textContent = buildPersonaMeta(persona);
-
-        const actions = document.createElement("div");
-        actions.className = "persona-item-actions";
-
-        const getBtn = document.createElement("button");
-        getBtn.type = "button";
-        getBtn.textContent = "View details";
-        getBtn.addEventListener("click", () => openMarketPreview(persona));
-
-        actions.appendChild(getBtn);
-        item.appendChild(titleRow);
-        item.appendChild(meta);
-        item.appendChild(actions);
-        listElement.appendChild(item);
-    });
+    const pronouns = persona.pronouns ? `Pronouns: ${persona.pronouns}` : "Pronouns: n/a";
+    return `${persona.creator_username} | ${pronouns}`;
 }
 
 function formatPersonaField(value) {
     return value && value.trim() ? value.trim() : "Not provided.";
 }
 
+function closeMarketPreview() {
+    marketPreviewModal.classList.add("hidden");
+    pendingMarketPersona = null;
+}
+
+function renderMarketList(items, listElement, type) {
+    listElement.innerHTML = "";
+    if (!items.length) {
+        const empty = document.createElement("p");
+        empty.className = "status persona-status";
+        empty.textContent = type === "assistant" ? "No AI personas found." : "No user personas found.";
+        listElement.appendChild(empty);
+        return;
+    }
+
+    items.forEach((persona) => {
+        const item = document.createElement("div");
+        const titleRow = document.createElement("div");
+        const title = document.createElement("h4");
+        const tag = document.createElement("span");
+        const meta = document.createElement("p");
+        const actions = document.createElement("div");
+        const detailsBtn = document.createElement("button");
+
+        item.className = "persona-item";
+        titleRow.className = "persona-title-row";
+        actions.className = "persona-item-actions";
+        tag.className = `persona-role-tag ${type === "assistant" ? "ai" : "user"}`;
+        tag.textContent = type === "assistant" ? "AI" : "You";
+        title.textContent = persona.name;
+        meta.textContent = buildPersonaMeta(persona);
+        detailsBtn.type = "button";
+        detailsBtn.textContent = "View";
+        detailsBtn.addEventListener("click", () => openMarketPreview(persona));
+
+        titleRow.append(title, tag);
+        actions.appendChild(detailsBtn);
+        item.append(titleRow, meta, actions);
+        listElement.appendChild(item);
+    });
+}
+
+function filterMarketPersonas() {
+    const query = marketSearchInput.value.trim().toLowerCase();
+    if (!query) return allMarketPersonas;
+    return allMarketPersonas.filter((persona) =>
+        [persona.name, persona.creator_username, persona.pronouns, persona.appearance, persona.background, persona.details]
+            .some((field) => field && field.toLowerCase().includes(query))
+    );
+}
+
+function applyMarketFilter() {
+    const filtered = filterMarketPersonas();
+    renderMarketList(filtered.filter((persona) => persona.persona_type === "assistant"), marketPersonaList, "assistant");
+    renderMarketList(filtered.filter((persona) => persona.persona_type === "user"), marketUserPersonaList, "user");
+    if (marketSearchInput.value.trim() && !filtered.length) {
+        setMarketStatus("No personas match your search.", "error");
+        return;
+    }
+    setMarketStatus(`${filtered.length} persona${filtered.length === 1 ? "" : "s"} shown.`);
+}
+
 function openMarketPreview(persona) {
-    if (!marketPreviewModal) return;
     pendingMarketPersona = persona;
     marketPreviewName.textContent = persona.name;
     marketPreviewMeta.textContent = buildPersonaMeta(persona);
@@ -116,110 +119,39 @@ function openMarketPreview(persona) {
     marketPreviewAppearance.textContent = formatPersonaField(persona.appearance);
     marketPreviewBackground.textContent = formatPersonaField(persona.background);
     marketPreviewDetails.textContent = formatPersonaField(persona.details);
-    marketPreviewConfirm.textContent =
-        persona.persona_type === "assistant" ? "Get & equip as AI" : "Get & equip as You";
+    marketPreviewConfirm.textContent = persona.persona_type === "assistant" ? "Collect as AI persona" : "Collect as user persona";
     marketPreviewModal.classList.remove("hidden");
 }
 
-function closeMarketPreview() {
-    if (!marketPreviewModal) return;
-    marketPreviewModal.classList.add("hidden");
-    pendingMarketPersona = null;
-}
-
-function filterMarketPersonas() {
-    const query = marketSearchInput?.value.trim().toLowerCase() || "";
-    if (!query) return allMarketPersonas;
-    return allMarketPersonas.filter(persona => {
-        const fields = [
-            persona.name,
-            persona.creator_username,
-            persona.pronouns,
-            persona.appearance,
-            persona.background,
-            persona.details
-        ];
-        return fields.some(field => field && field.toLowerCase().includes(query));
-    });
-}
-
-function applyMarketFilter() {
-    const filtered = filterMarketPersonas();
-    const assistantMarket = filtered.filter(persona => persona.persona_type === "assistant");
-    const userMarket = filtered.filter(persona => persona.persona_type === "user");
-    renderMarketList(assistantMarket, marketPersonaList, "assistant");
-    renderMarketList(userMarket, marketUserPersonaList, "user");
-    if (marketSearchInput?.value.trim() && !filtered.length) {
-        setMarketStatus("No personas match your search.", "error");
-        return;
-    }
-    setMarketStatus("Choose an AI persona or a user persona to equip.");
-}
-
 async function loadMarketPersonas() {
     setMarketStatus("Loading market personas...");
     const res = await get("/personas/market");
-    if (res.error) {
-        setMarketStatus(res.error, "error");
-        return;
-    }
+    if (res.error) return setMarketStatus(res.error, "error");
     allMarketPersonas = res.personas || [];
     applyMarketFilter();
 }
 
 async function collectMarketPersona(marketId, personaType) {
-    setMarketStatus(
-        personaType === "assistant"
-            ? "Equipping the AI persona..."
-            : "Equipping the user persona..."
-    );
+    setMarketStatus(personaType === "assistant" ? "Collecting AI persona..." : "Collecting user persona...");
     const res = await post(`/personas/market/${marketId}/collect`, {equip: true});
-    if (res.error) {
-        setMarketStatus(res.error, "error");
-        return;
-    }
+    if (res.error) return setMarketStatus(res.error, "error");
     await loadMarketPersonas();
-    setMarketStatus(
-        personaType === "assistant"
-            ? "AI persona equipped. Head back to chat to use it."
-            : "User persona equipped. Head back to chat to use it.",
-        "success"
-    );
+    setMarketStatus(personaType === "assistant" ? "AI persona collected." : "User persona collected.", "success");
 }
 
-if (refreshMarketBtn) {
-    refreshMarketBtn.addEventListener("click", () => loadMarketPersonas());
-}
-
-if (marketSearchInput) {
-    marketSearchInput.addEventListener("input", () => applyMarketFilter());
-}
-
-if (marketPreviewCancel) {
-    marketPreviewCancel.addEventListener("click", closeMarketPreview);
-}
-
-if (marketPreviewClose) {
-    marketPreviewClose.addEventListener("click", closeMarketPreview);
-}
-
-if (marketPreviewModal) {
-    marketPreviewModal.addEventListener("click", (event) => {
-        if (event.target === marketPreviewModal) {
-            closeMarketPreview();
-        }
-    });
-}
-
-if (marketPreviewConfirm) {
-    marketPreviewConfirm.addEventListener("click", async () => {
-        if (!pendingMarketPersona) return;
-        const {id, persona_type} = pendingMarketPersona;
-        closeMarketPreview();
-        await collectMarketPersona(id, persona_type);
-    });
-}
+refreshMarketBtn.addEventListener("click", loadMarketPersonas);
+marketSearchInput.addEventListener("input", applyMarketFilter);
+marketPreviewCancel.addEventListener("click", closeMarketPreview);
+marketPreviewClose.addEventListener("click", closeMarketPreview);
+marketPreviewModal.addEventListener("click", (event) => { if (event.target === marketPreviewModal) closeMarketPreview(); });
+marketPreviewConfirm.addEventListener("click", async () => {
+    if (!pendingMarketPersona) return;
+    const {id, persona_type} = pendingMarketPersona;
+    closeMarketPreview();
+    await collectMarketPersona(id, persona_type);
+});
 
 window.addEventListener("load", () => {
+    applyTheme(localStorage.getItem("krishd-theme") || "fakegpt");
     loadMarketPersonas();
 });
diff --git a/public/script.js b/public/script.js
index be1f6da..e1c8dd6 100644
--- a/public/script.js
+++ b/public/script.js
@@ -1,742 +1,445 @@
-const authDiv = document.getElementById("auth");
-const chatDiv = document.getElementById("chat");
-const authMsg = document.getElementById("authMsg");
-const messagesDiv = document.getElementById("messages");
+const $ = (id) => document.getElementById(id);
+const authDiv = $("auth"), chatDiv = $("chat"), authMsg = $("authMsg");
+const messagesDiv = $("messages"), emptyState = $("emptyState"), modelSelect = $("model");
+const loginForm = $("loginForm"), registerForm = $("registerForm"), msgInput = $("msgInput"), sendBtn = $("send");
+const loginUsernameInput = $("loginUsername"), loginPasswordInput = $("loginPassword");
+const registerUsernameInput = $("registerUsername"), registerPasswordInput = $("registerPassword");
+const loginSubmit = $("loginSubmit"), registerSubmit = $("registerSubmit");
+const chatList = $("chatList"), chatSearchInput = $("chatSearch"), newChatBtn = $("newChat");
+const renameChatBtn = $("renameChat"), clearChatBtn = $("clearChat"), exportChatBtn = $("exportChat");
+const activeChatTitle = $("activeChatTitle"), workspaceSubline = $("workspaceSubline"), sessionUser = $("sessionUser");
+const personaList = $("personaList"), userPersonaList = $("userPersonaList");
+const personaForm = $("personaForm"), personaFormTitle = $("personaFormTitle"), personaTypeSelect = $("personaType");
+const personaNameInput = $("personaName"), personaPronounsInput = $("personaPronouns"), personaAppearanceInput = $("personaAppearance");
+const personaBackgroundInput = $("personaBackground"), personaDetailsInput = $("personaDetails");
+const newPersonaBtn = $("newPersona"), newUserPersonaBtn = $("newUserPersona"), clearPersonaBtn = $("clearPersona"), clearUserPersonaBtn = $("clearUserPersona");
+const activePersonaStatus = $("activePersonaStatus"), activeUserPersonaStatus = $("activeUserPersonaStatus");
+const personaModal = $("personaModal"), personaCloseBtn = $("personaClose"), personaMenuButton = $("personaMenuButton"), personaPopover = $("personaPopover");
+const authScreens = document.querySelectorAll(".auth-screen"), toggleButtons = document.querySelectorAll(".auth-toggle .toggle");
+const themeNameTargets = document.querySelectorAll("[data-theme-name]"), themeLogoTargets = document.querySelectorAll("[data-theme-logo]");
 
-const loginForm = document.getElementById("loginForm");
-const registerForm = document.getElementById("registerForm");
-const loginUsernameInput = document.getElementById("loginUsername");
-const loginPasswordInput = document.getElementById("loginPassword");
-const registerUsernameInput = document.getElementById("registerUsername");
-const registerPasswordInput = document.getElementById("registerPassword");
-const loginSubmit = document.getElementById("loginSubmit");
-const registerSubmit = document.getElementById("registerSubmit");
-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");
-const personaList = document.getElementById("personaList");
-const userPersonaList = document.getElementById("userPersonaList");
-const personaForm = document.getElementById("personaForm");
-const personaFormTitle = document.getElementById("personaFormTitle");
-const personaTypeSelect = document.getElementById("personaType");
-const personaNameInput = document.getElementById("personaName");
-const personaPronounsInput = document.getElementById("personaPronouns");
-const personaAppearanceInput = document.getElementById("personaAppearance");
-const personaBackgroundInput = document.getElementById("personaBackground");
-const personaDetailsInput = document.getElementById("personaDetails");
-const newPersonaBtn = document.getElementById("newPersona");
-const newUserPersonaBtn = document.getElementById("newUserPersona");
-const clearPersonaBtn = document.getElementById("clearPersona");
-const clearUserPersonaBtn = document.getElementById("clearUserPersona");
-const personaCancelBtn = document.getElementById("personaCancel");
-const activePersonaStatus = document.getElementById("activePersonaStatus");
-const activeUserPersonaStatus = document.getElementById("activeUserPersonaStatus");
-const personaModal = document.getElementById("personaModal");
-const personaCloseBtn = document.getElementById("personaClose");
-const personaMenuButton = document.getElementById("personaMenuButton");
-const personaPopover = document.getElementById("personaPopover");
+let isProcessing = false, activeChatId = null, editingPersonaId = null, editingPersonaType = "assistant", currentUsername = "";
+let chatSessions = [], currentMessages = [], assistantPersonas = [], userPersonas = [];
+let activePersonaId = null, activeUserPersonaId = null, currentSummary = null, publishedPersonaIds = new Set();
 
-let isProcessing = false;
-let chatSessions = [];
-let activeChatId = null;
-let assistantPersonas = [];
-let userPersonas = [];
-let activePersonaId = null;
-let activeUserPersonaId = null;
-let editingPersonaId = null;
-let editingPersonaType = "assistant";
-let publishedPersonaIds = new Set();
-
-const displayModels = async () => {
-    const select = document.getElementById("model");
-
-    fetch("/models")
-        .then(response => response.json())
-        .then(data => {
-            select.innerHTML = "";
-
-            data.models.forEach(model => {
-                const option = document.createElement("option");
-                option.value = model.model;
-                option.textContent = model.name;
-                select.appendChild(option);
-            });
-        })
-        .catch(err => {
-            console.error("Failed to load models:", err);
-            select.innerHTML = `<option>Error loading models</option>`;
-        });
-}
+const themes = {
+    "fakegpt": {name: "FakeGPT", short: "FG"},
+    "fraud": {name: "Fraud", short: "FR"},
+    "germini": {name: "Germini", short: "GE"},
+    "slopilot": {name: "Slopilot", short: "SP"},
+    "beta-ai": {name: "Beta AI", short: "BA"},
+    "confusity": {name: "Confusity", short: "CF"}
+};
 
 async function request(url, data, method = "POST") {
     try {
-        const res = await fetch(url, {
-            method,
-            headers: {"Content-Type": "application/json"},
-            body: data ? JSON.stringify(data) : undefined
-        });
+        const res = await fetch(url, {method, headers: {"Content-Type": "application/json"}, body: data ? JSON.stringify(data) : undefined});
         return await res.json();
-    } catch (err) {
-        return {error: "Network error — please try again."};
+    } catch {
+        return {error: "Network error - please try again."};
     }
 }
+const get = (url) => request(url, null, "GET");
+const post = (url, data) => request(url, data, "POST");
+const put = (url, data) => request(url, data, "PUT");
+const del = (url) => request(url, null, "DELETE");
 
-async function post(url, data) {
-    return request(url, data, "POST");
-}
-
-async function get(url) {
-    try {
-        const res = await fetch(url);
-        return await res.json();
-    } catch (err) {
-        return {error: "Network error — please try again."};
-    }
-}
-
-function setAuthMessage(msg, state = "") {
-    authMsg.textContent = msg;
-    authMsg.className = state ? `status ${state}` : 'status';
-}
-
-function setMessageContent(element, content) {
+function setAuthMessage(message, state = "") { authMsg.textContent = message; authMsg.className = state ? `status ${state}` : "status"; }
+function setNotice(message, state = "") { return {message, state}; }
+function setMessageContent(el, content) {
     if (window.marked && window.DOMPurify) {
-        const rendered = marked.parse(content, {breaks: true});
-        element.innerHTML = DOMPurify.sanitize(rendered);
-        return;
+        el.innerHTML = DOMPurify.sanitize(marked.parse(content, {breaks: true}));
+    } else {
+        el.textContent = content;
     }
-    element.textContent = content;
 }
+function updateEmptyState() { emptyState.classList.toggle("visible", currentMessages.length === 0); }
+function getChatById(id) { return chatSessions.find((chat) => chat.id === id); }
 
-function addMessage(content, isUser = false, isLoading = false, saveToHistory = true) {
-    const msgDiv = document.createElement('div');
-    msgDiv.className = `msg ${isUser ? 'user' : 'bot'}${isLoading ? ' loading' : ''}`;
+function addMessage(content, isUser = false, isLoading = false) {
+    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="loading-shell" aria-live="polite" aria-label="Assistant is responding">
+                <div class="loading-bars">
+                    <span class="loading-bar"></span>
+                    <span class="loading-bar"></span>
+                    <span class="loading-bar"></span>
+                    <span class="loading-bar"></span>
+                </div>
+                <div class="loading-copy">
+                    <strong>Thinking</strong>
+                    <span>Building a response</span>
+                </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';
+        const header = document.createElement("div"), body = document.createElement("div");
+        header.className = "msg-header"; body.className = "msg-content";
+        header.textContent = isUser ? "You" : "Assistant";
         setMessageContent(body, content);
-        msgDiv.appendChild(header);
-        msgDiv.appendChild(body);
+        msgDiv.append(header, body);
     }
     messagesDiv.appendChild(msgDiv);
-    setTimeout(() => {
-        messagesDiv.scrollTop = messagesDiv.scrollHeight;
-    }, 100);
-
+    messagesDiv.scrollTop = messagesDiv.scrollHeight;
     return msgDiv;
 }
 
-function clearMessages() {
-    messagesDiv.innerHTML = '';
+function renderMessages() {
+    messagesDiv.innerHTML = "";
+    currentMessages.forEach((msg) => addMessage(msg.content, msg.role === "user"));
+    updateEmptyState();
+    updateChatActionState();
 }
 
-
-function getChatById(chatId) {
-    return chatSessions.find(chat => chat.id === chatId);
+function updateWorkspaceCopy() {
+    const activeChat = getChatById(activeChatId);
+    if (activeChatTitle) {
+        activeChatTitle.textContent = activeChat ? activeChat.title : "New chat";
+    }
+    if (sessionUser) {
+        sessionUser.textContent = currentUsername || "-";
+    }
 }
 
-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 updateSummaryStats() {
+    return currentSummary;
+}
+
+function updateContextRail() {
+    return modelSelect?.selectedOptions[0]?.textContent || "";
+}
+
+function applyTheme(themeKey, persist = true) {
+    const nextTheme = themes[themeKey] ? themeKey : "fakegpt";
+    const theme = themes[nextTheme];
+    document.body.dataset.theme = nextTheme;
+    document.title = theme.name;
+    themeNameTargets.forEach((target) => { target.textContent = theme.name; });
+    themeLogoTargets.forEach((target) => { target.textContent = theme.short; });
+    if (persist) localStorage.setItem("krishd-theme", nextTheme);
+    updateWorkspaceCopy();
+    updateContextRail();
 }
 
 function updateChatActionState() {
     const hasChat = Boolean(activeChatId);
     renameChatBtn.disabled = !hasChat;
-    deleteChatBtn.disabled = !hasChat;
+    clearChatBtn.disabled = !hasChat;
+    exportChatBtn.disabled = !hasChat || currentMessages.length === 0;
 }
 
-
 function renderChatList() {
-    chatList.innerHTML = '';
-    if (!chatSessions.length) {
-        const empty = document.createElement('p');
-        empty.className = 'status';
-        empty.textContent = 'No chats yet. Start a new one!';
+    const query = chatSearchInput.value.trim().toLowerCase();
+    const filtered = chatSessions.filter((chat) => !query || chat.title.toLowerCase().includes(query));
+    chatList.innerHTML = "";
+    if (!filtered.length) {
+        const empty = document.createElement("p");
+        empty.className = "status";
+        empty.textContent = query ? "No chats match this search." : "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));
+    filtered.forEach((chat) => {
+        const item = document.createElement("div"), title = document.createElement("span"), remove = document.createElement("button");
+        item.className = `chat-item${chat.id === activeChatId ? " active" : ""}`;
+        title.textContent = chat.title; remove.type = "button"; remove.textContent = "Delete";
+        remove.addEventListener("click", async (event) => { event.stopPropagation(); await deleteChat(chat.id); });
+        item.append(title, remove);
+        item.addEventListener("click", () => setActiveChat(chat.id));
         chatList.appendChild(item);
     });
 }
 
-function updateActivePersonaStatus(personaItems, activeId, statusElement, emptyMessage, activePrefix) {
-    const activePersona = personaItems.find(persona => persona.id === activeId);
-    if (activePersona) {
-        statusElement.textContent = `${activePrefix}: ${activePersona.name}`;
-    } else {
-        statusElement.textContent = emptyMessage;
-    }
+function updateActivePersonaStatus(items, activeId, statusEl, emptyText, prefix) {
+    const active = items.find((persona) => persona.id === activeId);
+    statusEl.textContent = active ? `${prefix}: ${active.name}` : emptyText;
 }
 
 function setActivePersonaStatus() {
-    updateActivePersonaStatus(
-        assistantPersonas,
-        activePersonaId,
-        activePersonaStatus,
-        'No AI persona equipped.',
-        'AI persona equipped'
-    );
-    updateActivePersonaStatus(
-        userPersonas,
-        activeUserPersonaId,
-        activeUserPersonaStatus,
-        'No user persona set.',
-        'User persona active'
-    );
+    updateActivePersonaStatus(assistantPersonas, activePersonaId, activePersonaStatus, "No AI persona equipped.", "AI persona equipped");
+    updateActivePersonaStatus(userPersonas, activeUserPersonaId, activeUserPersonaStatus, "No user persona set.", "User persona active");
     clearPersonaBtn.disabled = !activePersonaId;
     clearUserPersonaBtn.disabled = !activeUserPersonaId;
+    updateContextRail();
 }
 
 function openPersonaForm(persona = null, personaType = "assistant") {
     closePersonaPopover();
     personaModal.classList.remove("hidden");
     if (persona) {
-        editingPersonaId = persona.id;
-        editingPersonaType = persona.persona_type || "assistant";
+        editingPersonaId = persona.id; editingPersonaType = persona.persona_type || "assistant";
         personaFormTitle.textContent = `Edit ${editingPersonaType === "user" ? "your persona" : "AI persona"}`;
-        personaTypeSelect.value = editingPersonaType;
-        personaTypeSelect.disabled = true;
-        personaNameInput.value = persona.name || "";
-        personaPronounsInput.value = persona.pronouns || "";
-        personaAppearanceInput.value = persona.appearance || "";
-        personaBackgroundInput.value = persona.background || "";
-        personaDetailsInput.value = persona.details || "";
+        personaTypeSelect.value = editingPersonaType; personaTypeSelect.disabled = true;
+        personaNameInput.value = persona.name || ""; personaPronounsInput.value = persona.pronouns || "";
+        personaAppearanceInput.value = persona.appearance || ""; personaBackgroundInput.value = persona.background || ""; personaDetailsInput.value = persona.details || "";
     } else {
-        editingPersonaId = null;
-        editingPersonaType = personaType;
+        editingPersonaId = null; editingPersonaType = personaType;
         personaFormTitle.textContent = `Create ${personaType === "user" ? "your persona" : "AI persona"}`;
-        personaTypeSelect.value = personaType;
-        personaTypeSelect.disabled = false;
-        personaNameInput.value = "";
-        personaPronounsInput.value = "";
-        personaAppearanceInput.value = "";
-        personaBackgroundInput.value = "";
-        personaDetailsInput.value = "";
+        personaTypeSelect.value = personaType; personaTypeSelect.disabled = false;
+        personaNameInput.value = ""; personaPronounsInput.value = ""; personaAppearanceInput.value = ""; personaBackgroundInput.value = ""; personaDetailsInput.value = "";
     }
-
     personaNameInput.focus();
 }
 
-function closePersonaForm() {
-    personaModal.classList.add("hidden");
-    editingPersonaId = null;
-    editingPersonaType = "assistant";
-    personaTypeSelect.disabled = false;
-}
+function closePersonaForm() { personaModal.classList.add("hidden"); editingPersonaId = null; editingPersonaType = "assistant"; personaTypeSelect.disabled = false; }
+function closePersonaPopover() { personaPopover.classList.add("hidden"); personaMenuButton.setAttribute("aria-expanded", "false"); }
 
-function renderPersonaList(personaItems, activeId, listElement, personaType) {
-    listElement.innerHTML = '';
-    if (!personaItems.length) {
-        const empty = document.createElement('p');
-        empty.className = 'status persona-status';
-        empty.textContent = 'No personas yet. Create one to get started.';
+function renderPersonaList(items, activeId, listElement, personaType) {
+    listElement.innerHTML = "";
+    if (!items.length) {
+        const empty = document.createElement("p");
+        empty.className = "status persona-status";
+        empty.textContent = "No personas yet. Create one to get started.";
         listElement.appendChild(empty);
         setActivePersonaStatus();
         return;
     }
-    personaItems.forEach(persona => {
-        const item = document.createElement('div');
-        item.className = `persona-item${persona.id === activeId ? ' active' : ''}`;
-        const titleRow = document.createElement('div');
-        titleRow.className = 'persona-title-row';
-        const title = document.createElement('h4');
-        title.textContent = persona.name;
-        const roleTag = document.createElement('span');
-        roleTag.className = `persona-role-tag ${personaType === "user" ? "user" : "ai"}`;
-        roleTag.textContent = personaType === "user" ? "You" : "AI";
-        titleRow.appendChild(title);
-        titleRow.appendChild(roleTag);
-        const meta = document.createElement('p');
-        meta.textContent = persona.pronouns ? `Pronouns: ${persona.pronouns}` : 'Pronouns: —';
-        const actions = document.createElement('div');
-        actions.className = 'persona-item-actions';
-
-        const equipBtn = document.createElement('button');
-        equipBtn.type = 'button';
-        const equipLabel = personaType === "user" ? "Equip as You" : "Equip as AI";
-        equipBtn.textContent = persona.id === activeId ? `${equipLabel} (Active)` : equipLabel;
-        equipBtn.disabled = persona.id === activeId;
-        equipBtn.addEventListener('click', () => equipPersona(persona.id, personaType));
-
-        const editBtn = document.createElement('button');
-        editBtn.type = 'button';
-        editBtn.textContent = 'Edit';
-        editBtn.addEventListener('click', () => openPersonaForm(persona));
-
-        const publishBtn = document.createElement('button');
-        publishBtn.type = 'button';
-        const isPublished = publishedPersonaIds.has(persona.id);
-        publishBtn.textContent = isPublished ? 'Update listing' : 'Publish';
-        publishBtn.addEventListener('click', () => publishPersona(persona.id));
-
-        if (isPublished) {
-            const unpublishBtn = document.createElement('button');
-            unpublishBtn.type = 'button';
-            unpublishBtn.textContent = 'Unpublish';
-            unpublishBtn.addEventListener('click', () => unpublishPersona(persona.id));
-            actions.appendChild(unpublishBtn);
+    items.forEach((persona) => {
+        const item = document.createElement("div"), titleRow = document.createElement("div"), title = document.createElement("h4");
+        const tag = document.createElement("span"), meta = document.createElement("p"), actions = document.createElement("div");
+        item.className = `persona-item${persona.id === activeId ? " active" : ""}`; titleRow.className = "persona-title-row"; actions.className = "persona-item-actions";
+        tag.className = `persona-role-tag ${personaType === "user" ? "user" : "ai"}`; tag.textContent = personaType === "user" ? "You" : "AI";
+        title.textContent = persona.name; meta.textContent = persona.pronouns ? `Pronouns: ${persona.pronouns}` : "Pronouns: n/a";
+        [["Equip", () => equipPersona(persona.id, personaType), persona.id === activeId],
+            ["Edit", () => openPersonaForm(persona), false],
+            [publishedPersonaIds.has(persona.id) ? "Update listing" : "Publish", () => publishPersona(persona.id), false],
+            ["Delete", () => deletePersona(persona.id), false]]
+            .forEach(([label, handler, disabled]) => {
+                const btn = document.createElement("button");
+                btn.type = "button"; btn.textContent = label; btn.disabled = disabled; btn.addEventListener("click", handler); actions.appendChild(btn);
+            });
+        if (publishedPersonaIds.has(persona.id)) {
+            const btn = document.createElement("button");
+            btn.type = "button"; btn.textContent = "Unpublish"; btn.addEventListener("click", () => unpublishPersona(persona.id)); actions.appendChild(btn);
         }
-
-        const deleteBtn = document.createElement('button');
-        deleteBtn.type = 'button';
-        deleteBtn.textContent = 'Delete';
-        deleteBtn.addEventListener('click', () => deletePersona(persona.id));
-
-        actions.appendChild(equipBtn);
-        actions.appendChild(editBtn);
-        actions.appendChild(publishBtn);
-        actions.appendChild(deleteBtn);
-
-        item.appendChild(titleRow);
-        item.appendChild(meta);
-        item.appendChild(actions);
-        listElement.appendChild(item);
+        titleRow.append(title, tag); item.append(titleRow, meta, actions); listElement.appendChild(item);
     });
     setActivePersonaStatus();
 }
 
+async function loadSummary() {
+    updateWorkspaceCopy();
+    return currentSummary;
+}
+
 async function loadPersonas() {
-    const res = await get('/personas');
-    if (res.error) return;
-    assistantPersonas = res.assistantPersonas || [];
-    userPersonas = res.userPersonas || [];
-    activePersonaId = res.activePersonaId || null;
-    activeUserPersonaId = res.activeUserPersonaId || null;
-    publishedPersonaIds = new Set(res.publishedPersonaIds || []);
+    const res = await get("/personas");
+    if (res.error) return setNotice(res.error, "error");
+    assistantPersonas = res.assistantPersonas || []; userPersonas = res.userPersonas || [];
+    activePersonaId = res.activePersonaId || null; activeUserPersonaId = res.activeUserPersonaId || null; publishedPersonaIds = new Set(res.publishedPersonaIds || []);
     renderPersonaList(assistantPersonas, activePersonaId, personaList, "assistant");
     renderPersonaList(userPersonas, activeUserPersonaId, userPersonaList, "user");
+    updateWorkspaceCopy();
 }
 
-async function equipPersona(personaId, personaType) {
-    const endpoint = personaType === "user"
-        ? `/personas/${personaId}/equip-user`
-        : `/personas/${personaId}/equip`;
-    const res = await post(endpoint, {});
-    if (res.error) return;
-    if (personaType === "user") {
-        activeUserPersonaId = personaId;
-    } else {
-        activePersonaId = personaId;
-    }
+async function equipPersona(id, type) {
+    const res = await post(type === "user" ? `/personas/${id}/equip-user` : `/personas/${id}/equip`, {});
+    if (res.error) return setNotice(res.error, "error");
+    if (type === "user") activeUserPersonaId = id; else activePersonaId = id;
     renderPersonaList(assistantPersonas, activePersonaId, personaList, "assistant");
     renderPersonaList(userPersonas, activeUserPersonaId, userPersonaList, "user");
+    setNotice(type === "user" ? "User persona updated." : "AI persona updated.", "success");
 }
 
-async function clearPersona(personaType) {
-    const endpoint = personaType === "user" ? '/personas/user/clear' : '/personas/clear';
-    const res = await post(endpoint, {});
-    if (res.error) return;
-    if (personaType === "user") {
-        activeUserPersonaId = null;
-    } else {
-        activePersonaId = null;
-    }
+async function clearPersona(type) {
+    const res = await post(type === "user" ? "/personas/user/clear" : "/personas/clear", {});
+    if (res.error) return setNotice(res.error, "error");
+    if (type === "user") activeUserPersonaId = null; else activePersonaId = null;
     renderPersonaList(assistantPersonas, activePersonaId, personaList, "assistant");
     renderPersonaList(userPersonas, activeUserPersonaId, userPersonaList, "user");
+    setNotice("Persona cleared.", "success");
 }
 
 async function savePersona() {
-    const payload = {
-        personaType: personaTypeSelect.value,
-        name: personaNameInput.value.trim(),
-        pronouns: personaPronounsInput.value.trim(),
-        appearance: personaAppearanceInput.value.trim(),
-        background: personaBackgroundInput.value.trim(),
-        details: personaDetailsInput.value.trim()
-    };
-    if (!payload.name) return;
-    let res;
-    if (editingPersonaId) {
-        res = await request(`/personas/${editingPersonaId}`, payload, "PUT");
-    } else {
-        res = await post('/personas', payload);
-    }
-    if (res.error) return;
-    await loadPersonas();
-    closePersonaForm();
+    const payload = {personaType: personaTypeSelect.value, name: personaNameInput.value.trim(), pronouns: personaPronounsInput.value.trim(), appearance: personaAppearanceInput.value.trim(), background: personaBackgroundInput.value.trim(), details: personaDetailsInput.value.trim()};
+    if (!payload.name) return setNotice("Persona name is required.", "error");
+    const res = editingPersonaId ? await put(`/personas/${editingPersonaId}`, payload) : await post("/personas", payload);
+    if (res.error) return setNotice(res.error, "error");
+    const wasEditing = Boolean(editingPersonaId);
+    await loadPersonas(); closePersonaForm(); setNotice(wasEditing ? "Persona updated." : "Persona created.", "success");
 }
 
-async function deletePersona(personaId) {
-    const persona = assistantPersonas.find(item => item.id === personaId)
-        || userPersonas.find(item => item.id === personaId);
-    if (!persona) return;
-    const confirmDelete = confirm(`Delete persona "${persona.name}"?`);
-    if (!confirmDelete) return;
-    const res = await request(`/personas/${personaId}`, null, "DELETE");
-    if (res.error) return;
-    await loadPersonas();
-}
-
-async function publishPersona(personaId) {
-    const res = await post(`/personas/${personaId}/publish`, {});
-    if (res.error) return;
-    await loadPersonas();
-}
-
-async function unpublishPersona(personaId) {
-    const res = await post(`/personas/${personaId}/unpublish`, {});
-    if (res.error) return;
-    await loadPersonas();
+async function deletePersona(id) {
+    const persona = assistantPersonas.find((item) => item.id === id) || userPersonas.find((item) => item.id === id);
+    if (!persona || !window.confirm(`Delete persona "${persona.name}"?`)) return;
+    const res = await del(`/personas/${id}`);
+    if (res.error) return setNotice(res.error, "error");
+    await loadPersonas(); setNotice("Persona deleted.", "success");
 }
+async function publishPersona(id) { const res = await post(`/personas/${id}/publish`, {}); if (res.error) return setNotice(res.error, "error"); await loadPersonas(); setNotice("Persona published.", "success"); }
+async function unpublishPersona(id) { const res = await post(`/personas/${id}/unpublish`, {}); if (res.error) return setNotice(res.error, "error"); await loadPersonas(); setNotice("Persona unpublished.", "success"); }
 
 function setLoadingState(loading) {
-    isProcessing = loading;
-    sendBtn.disabled = loading;
-    msgInput.disabled = loading;
-
-    if (loading) {
-        sendBtn.classList.add('loading');
-        msgInput.placeholder = "Processing response...";
-    } else {
-        sendBtn.classList.remove('loading');
-        msgInput.placeholder = "Type your message...";
-    }
+    isProcessing = loading; sendBtn.disabled = loading; msgInput.disabled = loading;
+    sendBtn.classList.toggle("loading", loading); msgInput.placeholder = loading ? "Processing response..." : "Type your message...";
 }
 
 function showAuthScreen(target) {
-    authScreens.forEach(screen => {
-        screen.classList.toggle('active', screen.id === `${target}Screen`);
-    });
-    toggleButtons.forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.target === target);
-    });
-    setAuthMessage('', '');
+    authScreens.forEach((screen) => screen.classList.toggle("active", screen.id === `${target}Screen`));
+    toggleButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.target === 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 setActiveChat(id) {
+    activeChatId = id;
+    updateWorkspaceCopy(); renderChatList(); updateChatActionState();
+    const res = await get(`/chats/${id}/messages`);
+    if (res.error) return setNotice(res.error, "error");
+    currentMessages = res.messages || []; renderMessages();
 }
 
-
 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;
+    const res = await get("/chats");
+    if (res.error) return setNotice(res.error, "error");
+    chatSessions = res.chats || []; renderChatList();
+    if (chatSessions.length) return setActiveChat(activeChatId && getChatById(activeChatId) ? activeChatId : chatSessions[0].id);
+    return createNewChat();
 }
 
 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();
+    const res = await post("/chats", {title: "New chat"});
+    if (res.error || !res.chat) return setNotice(res.error || "Unable to create chat.", "error");
+    chatSessions.unshift(res.chat); await loadSummary(); renderChatList(); await setActiveChat(res.chat.id); setNotice("New chat created.", "success");
 }
 
-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 renameChat(id) {
+    const chat = getChatById(id), nextTitle = chat ? window.prompt("Rename chat", chat.title) : "";
+    const title = (nextTitle || "").trim();
+    if (!chat || !title) return;
+    const res = await put(`/chats/${id}`, {title});
+    if (res.error) return setNotice(res.error, "error");
+    chat.title = title; updateWorkspaceCopy(); renderChatList(); setNotice("Chat renamed.", "success");
 }
 
+async function clearChat(id) {
+    const chat = getChatById(id);
+    if (!chat || !window.confirm(`Clear all messages in "${chat.title}"?`)) return;
+    const res = await post(`/chats/${id}/clear`, {});
+    if (res.error) return setNotice(res.error, "error");
+    currentMessages = []; renderMessages(); await loadSummary(); setNotice("Chat cleared.", "success");
+}
 
-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();
-        }
+function exportCurrentChat() {
+    const chat = getChatById(activeChatId);
+    if (!chat || !currentMessages.length) return;
+    const lines = [`Chat: ${chat.title}`, `Exported: ${new Date().toISOString()}`, ""];
+    currentMessages.forEach((msg) => { lines.push(`${msg.role === "user" ? "You" : "Assistant"}:`); lines.push(msg.content, ""); });
+    const blob = new Blob([lines.join("\n")], {type: "text/plain;charset=utf-8"}), url = URL.createObjectURL(blob), link = document.createElement("a");
+    link.href = url; link.download = `${(chat.title.replace(/[^a-z0-9-_]+/gi, "-").replace(/^-+|-+$/g, "") || "chat")}.txt`;
+    document.body.appendChild(link); link.click(); link.remove(); URL.revokeObjectURL(url); setNotice("Chat exported.", "success");
+}
+
+async function deleteChat(id) {
+    const chat = getChatById(id);
+    if (!chat || !window.confirm(`Delete "${chat.title}"? This cannot be undone.`)) return;
+    const res = await del(`/chats/${id}`);
+    if (res.error) return setNotice(res.error, "error");
+    chatSessions = chatSessions.filter((item) => item.id !== id);
+    if (activeChatId === id) { activeChatId = null; currentMessages = []; renderMessages(); }
+    await loadSummary(); renderChatList();
+    if (chatSessions.length) await setActiveChat(chatSessions[0].id); else await createNewChat();
+    setNotice("Chat deleted.", "success");
+}
+
+async function displayModels() {
+    const res = await get("/models");
+    if (res.error || !Array.isArray(res.models)) {
+        modelSelect.innerHTML = "<option>Error loading models</option>";
+        updateContextRail();
+        return setNotice("Models could not be loaded.", "error");
     }
-    renderChatList();
+    modelSelect.innerHTML = "";
+    res.models.forEach((model, index) => {
+        const option = document.createElement("option");
+        option.value = model.model; option.textContent = model.name; option.selected = index === 0; modelSelect.appendChild(option);
+    });
+    updateContextRail();
 }
 
 async function checkSession() {
-    const res = await get('/session');
-    if (res.user) {
-        authDiv.style.display = "none";
-        chatDiv.style.display = "block";
-        await loadChatSessions();
-        await loadPersonas();
-        msgInput.focus();
-        return true;
-    }
-    return false;
-}
-
-async function loadServerChat() {
-    await loadChatSessions();
-    await loadPersonas();
+    const res = await get("/session");
+    if (!res.user) return false;
+    currentUsername = res.user; authDiv.style.display = "none"; chatDiv.style.display = "block";
+    await Promise.all([displayModels(), loadSummary(), loadChatSessions(), loadPersonas()]);
+    msgInput.focus(); return true;
 }
 
 async function handleAuth(endpoint, credentials) {
-    const {username, password} = credentials;
-    const submitBtn = endpoint === "login" ? loginSubmit : registerSubmit;
-
-    if (!username || !password) {
-        setAuthMessage("Please enter both username and password.", 'error');
-        return;
-    }
-
-    submitBtn.disabled = true;
-    setAuthMessage("Processing...", '');
-
+    const {username, password} = credentials, submitBtn = endpoint === "login" ? loginSubmit : registerSubmit;
+    if (!username || !password) return setAuthMessage("Please enter both username and password.", "error");
+    submitBtn.disabled = true; setAuthMessage("Processing...");
     const res = await post(`/${endpoint}`, {username, password});
-
     submitBtn.disabled = false;
-
-    if (res.error) {
-        setAuthMessage(res.error, 'error');
+    if (res.error) return setAuthMessage(res.error, "error");
+    if (endpoint === "login") {
+        currentUsername = username; authDiv.style.display = "none"; chatDiv.style.display = "block";
+        await Promise.all([displayModels(), loadSummary(), loadChatSessions(), loadPersonas()]);
+        setNotice("Ready.", "success"); msgInput.focus();
     } else {
-        if (endpoint === "login") {
-            setAuthMessage("Login successful! Redirecting to chat...", 'success');
-            authDiv.style.display = "none";
-            chatDiv.style.display = "block";
-            await loadServerChat();
-            msgInput.focus();
-        } else {
-            setAuthMessage("Registration successful — you can now log in!", 'success');
-            showAuthScreen('login');
-            loginUsernameInput.value = username;
-            loginPasswordInput.focus();
-        }
+        setAuthMessage("Registration successful. You can now log in.", "success");
+        showAuthScreen("login"); loginUsernameInput.value = username; loginPasswordInput.focus();
     }
 }
 
 async function sendMessage() {
     if (isProcessing) return;
-    const msg = msgInput.value.trim();
-    if (!msg) return;
-    if (!activeChatId) {
-        await createNewChat();
-    }
+    const message = msgInput.value.trim();
+    if (!message) 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");
+    if (currentChat && currentChat.title === "New chat") {
+        const autoTitle = message.length > 40 ? `${message.slice(0, 40)}...` : message;
+        currentChat.title = autoTitle; updateWorkspaceCopy(); renderChatList(); await put(`/chats/${activeChatId}`, {title: autoTitle});
     }
-    addMessage(msg, true);
-    msgInput.value = "";
-    msgInput.style.height = 'auto';
-    setLoadingState(true);
-    const loadingMsg = addMessage('', false, true, false);
+    currentMessages.push({role: "user", content: message}); addMessage(message, true); updateEmptyState(); updateChatActionState();
+    msgInput.value = ""; msgInput.style.height = "auto"; setLoadingState(true); setNotice("Generating reply...");
+    const loadingMsg = addMessage("", false, true);
     try {
-        const model = document.getElementById("model").value;
-        const res = await post("/chat", {message: msg, model, chatId: activeChatId});
-        if (messagesDiv.contains(loadingMsg)) {
-            messagesDiv.removeChild(loadingMsg);
-        }
+        const res = await post("/chat", {message, model: modelSelect.value, chatId: activeChatId});
+        if (messagesDiv.contains(loadingMsg)) messagesDiv.removeChild(loadingMsg);
         if (res.reply) {
-            addMessage(res.reply, false);
-            bumpChat(activeChatId);
+            currentMessages.push({role: "bot", content: res.reply}); addMessage(res.reply); await loadSummary(); setNotice("Reply received.", "success");
         } else {
-            addMessage(`[Error: ${res.error}]`, false);
+            addMessage(`[Error: ${res.error}]`); setNotice(res.error || "Failed to generate reply.", "error");
         }
-    } catch (error) {
-        if (messagesDiv.contains(loadingMsg)) {
-            messagesDiv.removeChild(loadingMsg);
-        }
-        addMessage(`[Error: Network error]`, false);
+    } catch {
+        if (messagesDiv.contains(loadingMsg)) messagesDiv.removeChild(loadingMsg);
+        addMessage("[Error: Network error]"); setNotice("Network error while sending message.", "error");
     } finally {
-        setLoadingState(false);
-        msgInput.focus();
+        setLoadingState(false); msgInput.focus(); updateChatActionState();
     }
 }
 
-toggleButtons.forEach(btn => {
-    btn.addEventListener('click', () => showAuthScreen(btn.dataset.target));
-});
-
-loginForm.addEventListener('submit', (e) => {
-    e.preventDefault();
-    handleAuth("login", {
-        username: loginUsernameInput.value.trim(),
-        password: loginPasswordInput.value.trim()
-    });
-});
-
-registerForm.addEventListener('submit', (e) => {
-    e.preventDefault();
-    handleAuth("register", {
-        username: registerUsernameInput.value.trim(),
-        password: registerPasswordInput.value.trim()
-    });
-});
-
-document.getElementById("logout").onclick = async () => {
-    await post("/logout", {});
-    chatDiv.style.display = "none";
-    authDiv.style.display = "grid";
-    clearMessages();
-    chatSessions = [];
-    activeChatId = null;
-    assistantPersonas = [];
-    userPersonas = [];
-    activePersonaId = null;
-    activeUserPersonaId = null;
-    publishedPersonaIds = new Set();
-    setAuthMessage("Logged out.", 'success');
-    showAuthScreen('login');
-    loginUsernameInput.value = "";
-    loginPasswordInput.value = "";
-};
-
-sendBtn.onclick = sendMessage;
-
-msgInput.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        sendMessage();
-    }
-});
-
-newChatBtn.addEventListener('click', () => createNewChat());
-
-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';
-});
-
-newPersonaBtn.addEventListener('click', () => openPersonaForm());
-
-newUserPersonaBtn.addEventListener('click', () => openPersonaForm(null, "user"));
-
-clearPersonaBtn.addEventListener('click', () => clearPersona("assistant"));
-
-clearUserPersonaBtn.addEventListener('click', () => clearPersona("user"));
-
-personaForm.addEventListener('submit', (event) => {
-    event.preventDefault();
-    savePersona();
-});
-
-personaCloseBtn.addEventListener("click", closePersonaForm);
-
-personaModal.addEventListener("click", (e) => {
-    if (e.target === personaModal) closePersonaForm();
-});
-
-function closePersonaPopover() {
-    personaPopover.classList.add("hidden");
-    personaMenuButton.setAttribute("aria-expanded", "false");
-}
-
 function togglePersonaPopover(event) {
     event.stopPropagation();
     const isHidden = personaPopover.classList.contains("hidden");
-    if (isHidden) {
-        personaPopover.classList.remove("hidden");
-        personaMenuButton.setAttribute("aria-expanded", "true");
-    } else {
-        closePersonaPopover();
-    }
+    personaPopover.classList.toggle("hidden", !isHidden);
+    personaMenuButton.setAttribute("aria-expanded", String(isHidden));
 }
 
-personaMenuButton.addEventListener("click", togglePersonaPopover);
-
-personaPopover.addEventListener("click", (event) => {
-    event.stopPropagation();
+toggleButtons.forEach((btn) => btn.addEventListener("click", () => showAuthScreen(btn.dataset.target)));
+loginForm.addEventListener("submit", (event) => { event.preventDefault(); handleAuth("login", {username: loginUsernameInput.value.trim(), password: loginPasswordInput.value.trim()}); });
+registerForm.addEventListener("submit", (event) => { event.preventDefault(); handleAuth("register", {username: registerUsernameInput.value.trim(), password: registerPasswordInput.value.trim()}); });
+$("logout").addEventListener("click", async () => {
+    await post("/logout", {}); chatDiv.style.display = "none"; authDiv.style.display = "grid";
+    activeChatId = null; currentUsername = ""; currentSummary = null; chatSessions = []; currentMessages = []; assistantPersonas = []; userPersonas = [];
+    activePersonaId = null; activeUserPersonaId = null; publishedPersonaIds = new Set(); messagesDiv.innerHTML = ""; renderChatList(); updateEmptyState(); updateChatActionState();
+    showAuthScreen("login"); setAuthMessage("Logged out.", "success"); setNotice("Ready.");
 });
-
-document.addEventListener("click", () => {
-    closePersonaPopover();
-});
-
-document.addEventListener("keydown", (event) => {
-    if (event.key === "Escape") {
-        closePersonaPopover();
-    }
-});
-
-window.addEventListener('load', () => {
-    checkSession();
-    displayModels();
+sendBtn.addEventListener("click", sendMessage);
+msgInput.addEventListener("keydown", (event) => { if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); sendMessage(); } });
+msgInput.addEventListener("input", function () { this.style.height = "auto"; this.style.height = `${Math.min(this.scrollHeight, 180)}px`; });
+newChatBtn.addEventListener("click", createNewChat); renameChatBtn.addEventListener("click", () => activeChatId && renameChat(activeChatId));
+clearChatBtn.addEventListener("click", () => activeChatId && clearChat(activeChatId)); exportChatBtn.addEventListener("click", exportCurrentChat);
+chatSearchInput.addEventListener("input", renderChatList); modelSelect.addEventListener("change", updateContextRail);
+newPersonaBtn.addEventListener("click", () => openPersonaForm()); newUserPersonaBtn.addEventListener("click", () => openPersonaForm(null, "user"));
+clearPersonaBtn.addEventListener("click", () => clearPersona("assistant")); clearUserPersonaBtn.addEventListener("click", () => clearPersona("user"));
+personaForm.addEventListener("submit", (event) => { event.preventDefault(); savePersona(); }); personaCloseBtn.addEventListener("click", closePersonaForm);
+personaModal.addEventListener("click", (event) => { if (event.target === personaModal) closePersonaForm(); });
+personaMenuButton.addEventListener("click", togglePersonaPopover); personaPopover.addEventListener("click", (event) => event.stopPropagation()); document.addEventListener("click", closePersonaPopover);
+document.addEventListener("keydown", (event) => { if (event.key === "Escape") { closePersonaPopover(); closePersonaForm(); } });
+window.addEventListener("load", async () => {
+    applyTheme(localStorage.getItem("krishd-theme") || "fakegpt", false);
+    setNotice("Ready."); updateEmptyState(); updateChatActionState(); await checkSession();
 });
diff --git a/public/settings.html b/public/settings.html
new file mode 100644
index 0000000..5dd12c0
--- /dev/null
+++ b/public/settings.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <title>Settings</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<div class="settings-shell card">
+    <header class="market-header market-header-simple">
+        <div>
+            <p class="eyebrow">Settings</p>
+            <h1>Preferences</h1>
+            <p class="subtitle">Manage account details and appearance.</p>
+        </div>
+        <div class="market-header-actions">
+            <a href="/" class="secondary-action">Back to chat</a>
+            <a href="/market" class="secondary-action">Persona Market</a>
+        </div>
+    </header>
+
+    <p id="settingsNotice" class="status">Loading settings...</p>
+
+    <section class="settings-layout">
+        <aside class="settings-nav" aria-label="Settings sections">
+            <button class="settings-nav-item active" type="button" data-settings-view="personal">Personal</button>
+            <button class="settings-nav-item" type="button" data-settings-view="design">Design</button>
+        </aside>
+
+        <div class="settings-content">
+            <section class="settings-view active" data-settings-panel="personal">
+                <div class="settings-panel">
+                    <div class="settings-section-header">
+                        <div>
+                            <p class="eyebrow">Profile</p>
+                            <h2>Username</h2>
+                        </div>
+                    </div>
+                    <form id="usernameForm" class="settings-form-stack">
+                        <label class="field">
+                            <span>Current username</span>
+                            <input id="currentUsername" readonly/>
+                        </label>
+                        <label class="field">
+                            <span>New username</span>
+                            <input id="newUsername" autocomplete="username"/>
+                        </label>
+                        <label class="field">
+                            <span>Current password</span>
+                            <input id="usernamePassword" type="password" autocomplete="current-password"/>
+                        </label>
+                        <button id="saveUsername" type="submit">Save username</button>
+                    </form>
+                </div>
+
+                <div class="settings-panel">
+                    <div class="settings-section-header">
+                        <div>
+                            <p class="eyebrow">Security</p>
+                            <h2>Password</h2>
+                        </div>
+                    </div>
+                    <form id="passwordForm" class="settings-form-stack">
+                        <label class="field">
+                            <span>Current password</span>
+                            <input id="currentPassword" type="password" autocomplete="current-password"/>
+                        </label>
+                        <label class="field">
+                            <span>New password</span>
+                            <input id="newPassword" type="password" autocomplete="new-password"/>
+                        </label>
+                        <label class="field">
+                            <span>Repeat new password</span>
+                            <input id="repeatPassword" type="password" autocomplete="new-password"/>
+                        </label>
+                        <button id="savePassword" type="submit">Save password</button>
+                    </form>
+                </div>
+            </section>
+
+            <section class="settings-view" data-settings-panel="design">
+                <div class="settings-panel settings-panel-compact">
+                    <div class="settings-section-header">
+                        <div>
+                            <p class="eyebrow">Appearance</p>
+                            <h2>Theme</h2>
+                            <p class="subtitle">Themes are only changed here.</p>
+                        </div>
+                    </div>
+                    <div class="settings-theme-row">
+                        <label class="field">
+                            <span>Theme</span>
+                            <select id="settingsThemeSelect">
+                                <option value="fakegpt">FakeGPT</option>
+                                <option value="fraud">Fraud</option>
+                                <option value="germini">Germini</option>
+                                <option value="slopilot">Slopilot</option>
+                                <option value="beta-ai">Beta AI</option>
+                                <option value="confusity">Confusity</option>
+                            </select>
+                        </label>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </section>
+</div>
+<script src="settings.js" defer></script>
+</body>
+</html>
diff --git a/public/settings.js b/public/settings.js
new file mode 100644
index 0000000..89f83b9
--- /dev/null
+++ b/public/settings.js
@@ -0,0 +1,122 @@
+const $ = (id) => document.getElementById(id);
+const settingsNotice = $("settingsNotice");
+const settingsThemeSelect = $("settingsThemeSelect");
+const settingsThemeName = $("settingsThemeName");
+const currentUsernameInput = $("currentUsername");
+const newUsernameInput = $("newUsername");
+const usernamePasswordInput = $("usernamePassword");
+const currentPasswordInput = $("currentPassword");
+const newPasswordInput = $("newPassword");
+const repeatPasswordInput = $("repeatPassword");
+const usernameForm = $("usernameForm");
+const passwordForm = $("passwordForm");
+const settingsNavItems = document.querySelectorAll("[data-settings-view]");
+const settingsPanels = document.querySelectorAll("[data-settings-panel]");
+
+const themes = {
+    "fakegpt": {name: "FakeGPT"},
+    "fraud": {name: "Fraud"},
+    "germini": {name: "Germini"},
+    "slopilot": {name: "Slopilot"},
+    "beta-ai": {name: "Beta AI"},
+    "confusity": {name: "Confusity"}
+};
+
+async function request(url, data, method = "POST") {
+    try {
+        const res = await fetch(url, {
+            method,
+            headers: {"Content-Type": "application/json"},
+            body: data ? JSON.stringify(data) : undefined
+        });
+        return await res.json();
+    } catch {
+        return {error: "Network error - please try again."};
+    }
+}
+
+function setNotice(message, state = "") {
+    settingsNotice.textContent = message;
+    settingsNotice.className = state ? `status ${state}` : "status";
+}
+
+function applyTheme(themeKey, persist = true) {
+    const nextTheme = themes[themeKey] ? themeKey : "fakegpt";
+    document.body.dataset.theme = nextTheme;
+    document.title = "Settings";
+    settingsThemeSelect.value = nextTheme;
+    if (settingsThemeName) settingsThemeName.textContent = themes[nextTheme].name;
+    if (persist) localStorage.setItem("krishd-theme", nextTheme);
+}
+
+function setSettingsView(view) {
+    settingsNavItems.forEach((item) => item.classList.toggle("active", item.dataset.settingsView === view));
+    settingsPanels.forEach((panel) => panel.classList.toggle("active", panel.dataset.settingsPanel === view));
+}
+
+async function loadProfile() {
+    const res = await request("/settings/profile", null, "GET");
+    if (res.error) {
+        setNotice(res.error, "error");
+        return;
+    }
+    currentUsernameInput.value = res.username || "";
+    newUsernameInput.value = res.username || "";
+    setNotice("Settings loaded.");
+}
+
+usernameForm.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const username = newUsernameInput.value.trim();
+    const password = usernamePasswordInput.value;
+    if (!username || !password) {
+        setNotice("New username and current password are required.", "error");
+        return;
+    }
+    const res = await request("/settings/username", {username, password}, "PUT");
+    if (res.error) {
+        setNotice(res.error, "error");
+        return;
+    }
+    currentUsernameInput.value = res.username;
+    newUsernameInput.value = res.username;
+    usernamePasswordInput.value = "";
+    setNotice("Username updated.", "success");
+});
+
+passwordForm.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const currentPassword = currentPasswordInput.value;
+    const newPassword = newPasswordInput.value;
+    const repeatPassword = repeatPasswordInput.value;
+    if (!currentPassword || !newPassword || !repeatPassword) {
+        setNotice("Fill in all password fields.", "error");
+        return;
+    }
+    if (newPassword !== repeatPassword) {
+        setNotice("New passwords do not match.", "error");
+        return;
+    }
+    const res = await request("/settings/password", {currentPassword, newPassword}, "PUT");
+    if (res.error) {
+        setNotice(res.error, "error");
+        return;
+    }
+    currentPasswordInput.value = "";
+    newPasswordInput.value = "";
+    repeatPasswordInput.value = "";
+    setNotice("Password updated.", "success");
+});
+
+settingsThemeSelect.addEventListener("change", (event) => {
+    applyTheme(event.target.value);
+    setNotice("Theme updated.", "success");
+});
+
+settingsNavItems.forEach((item) => item.addEventListener("click", () => setSettingsView(item.dataset.settingsView)));
+
+window.addEventListener("load", async () => {
+    applyTheme(localStorage.getItem("krishd-theme") || "fakegpt", false);
+    setSettingsView("personal");
+    await loadProfile();
+});
diff --git a/public/style.css b/public/style.css
index a158d17..2b15eda 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,634 +1,900 @@
 :root {
-    --bg-dark: #050513;
-    --bg-panel: #13132a;
-    --bg-message-user: #2563eb;
-    --bg-message-bot: #1f2937;
-    --accent: #6366f1;
-    --accent-hover: #7c3aed;
-    --text-primary: #e5e7eb;
-    --text-secondary: #9ca3af;
-    --text-muted: #6b7280;
-    --border: #2f3342;
-    --error: #ef4444;
-    --success: #22c55e;
-    --shadow: rgba(0, 0, 0, 0.35);
-    --gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    --bg: #f2ede4;
+    --bg-soft: #e7dfd1;
+    --surface: rgba(255, 252, 246, 0.82);
+    --surface-strong: rgba(255, 249, 240, 0.94);
+    --surface-dark: #1f2a2a;
+    --surface-dark-soft: #2c3938;
+    --surface-accent: #d9c3a5;
+    --text: #18201f;
+    --text-soft: #51605f;
+    --text-muted: #6e7a78;
+    --line: rgba(24, 32, 31, 0.09);
+    --line-strong: rgba(24, 32, 31, 0.18);
+    --brand: #a4552d;
+    --brand-strong: #7d391a;
+    --brand-soft: #f0c9b4;
+    --success: #25735d;
+    --error: #b5473d;
+    --shadow: 0 10px 30px rgba(68, 48, 28, 0.08);
+    --radius-xl: 18px;
+    --radius-lg: 14px;
+    --radius-md: 10px;
+    --radius-sm: 8px;
+    --bg-gradient:
+        linear-gradient(180deg, #f7f7f8 0%, #ecefed 100%);
+    --bg-overlay:
+        linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
+    --hero-gradient: linear-gradient(180deg, rgba(248, 255, 252, 0.92), rgba(236, 243, 239, 0.88));
+    --overview-gradient: linear-gradient(180deg, rgba(248, 255, 252, 0.92), rgba(236, 243, 239, 0.88));
+    --assistant-message: #1f2937;
+    --assistant-message-text: #eff4f2;
+    --button-text: #fff8f0;
 }
 
-html, body {
-    height: 100%;
-    min-height: 0;
+body[data-theme="fakegpt"] {
+    --bg: #f7f7f8;
+    --bg-soft: #ecefed;
+    --surface: rgba(255, 255, 255, 0.82);
+    --surface-strong: rgba(255, 255, 255, 0.94);
+    --surface-dark: #1f2937;
+    --surface-dark-soft: #374151;
+    --surface-accent: #d8f3e7;
+    --text: #111827;
+    --text-soft: #4b5563;
+    --text-muted: #6b7280;
+    --line: rgba(17, 24, 39, 0.08);
+    --line-strong: rgba(17, 24, 39, 0.16);
+    --brand: #10a37f;
+    --brand-strong: #0c7c61;
+    --brand-soft: #cff6ea;
+    --success: #0f8a67;
+    --error: #c2410c;
+    --shadow: 0 10px 30px rgba(16, 52, 44, 0.08);
+    --bg-gradient:
+        linear-gradient(180deg, #f7f7f8 0%, #ecefed 100%);
+    --hero-gradient: linear-gradient(180deg, rgba(248, 255, 252, 0.92), rgba(236, 243, 239, 0.88));
+    --overview-gradient: linear-gradient(180deg, rgba(248, 255, 252, 0.92), rgba(236, 243, 239, 0.88));
+    --assistant-message: #202123;
+    --assistant-message-text: #f3f4f6;
+    --button-text: #f8fffc;
+}
+
+body[data-theme="fraud"] {
+    --bg: #f7f2ea;
+    --bg-soft: #ede4d7;
+    --surface: rgba(255, 250, 244, 0.84);
+    --surface-strong: rgba(255, 249, 242, 0.95);
+    --text: #2d261e;
+    --text-soft: #63584b;
+    --text-muted: #88796a;
+    --line: rgba(45, 38, 30, 0.09);
+    --line-strong: rgba(45, 38, 30, 0.16);
+    --brand: #c46f4c;
+    --brand-strong: #9d5638;
+    --brand-soft: #f8d5c4;
+    --success: #6f8360;
+    --error: #b55a47;
+    --shadow: 0 10px 30px rgba(94, 58, 33, 0.08);
+    --bg-gradient:
+        linear-gradient(180deg, #f8f1e8 0%, #ede3d5 100%);
+    --hero-gradient: linear-gradient(180deg, rgba(255, 250, 244, 0.92), rgba(241, 230, 216, 0.9));
+    --overview-gradient: linear-gradient(180deg, rgba(255, 250, 244, 0.92), rgba(241, 230, 216, 0.9));
+    --assistant-message: #40352f;
+    --assistant-message-text: #faf4ef;
+    --button-text: #fff9f4;
+}
+
+body[data-theme="germini"] {
+    --bg: #eef3ff;
+    --bg-soft: #e0e9ff;
+    --surface: rgba(248, 250, 255, 0.84);
+    --surface-strong: rgba(251, 252, 255, 0.96);
+    --text: #17203d;
+    --text-soft: #4c5b86;
+    --text-muted: #7380ab;
+    --line: rgba(23, 32, 61, 0.08);
+    --line-strong: rgba(23, 32, 61, 0.16);
+    --brand: #5a6df0;
+    --brand-strong: #a14ae8;
+    --brand-soft: #d9dbff;
+    --success: #2d8f85;
+    --error: #bf4b7b;
+    --shadow: 0 10px 30px rgba(69, 75, 162, 0.1);
+    --bg-gradient:
+        linear-gradient(180deg, #f0f4ff 0%, #e3eaff 100%);
+    --hero-gradient: linear-gradient(180deg, rgba(247, 249, 255, 0.94), rgba(229, 235, 255, 0.9));
+    --overview-gradient: linear-gradient(180deg, rgba(247, 249, 255, 0.94), rgba(229, 235, 255, 0.9));
+    --assistant-message: linear-gradient(145deg, #3046c8, #7e3fdc);
+    --assistant-message-text: #f8f7ff;
+    --button-text: #f8f7ff;
+}
+
+body[data-theme="slopilot"] {
+    --bg: #edf4fb;
+    --bg-soft: #dfeaf8;
+    --surface: rgba(250, 252, 255, 0.84);
+    --surface-strong: rgba(251, 253, 255, 0.96);
+    --text: #16233b;
+    --text-soft: #50647f;
+    --text-muted: #7589a1;
+    --line: rgba(22, 35, 59, 0.08);
+    --line-strong: rgba(22, 35, 59, 0.16);
+    --brand: #0d68ff;
+    --brand-strong: #4b34d2;
+    --brand-soft: #d8e7ff;
+    --success: #118573;
+    --error: #c24b4b;
+    --shadow: 0 10px 30px rgba(25, 77, 147, 0.1);
+    --bg-gradient:
+        linear-gradient(180deg, #eef5ff 0%, #dfeaf6 100%);
+    --hero-gradient: linear-gradient(180deg, rgba(246, 251, 255, 0.94), rgba(228, 239, 255, 0.9));
+    --overview-gradient: linear-gradient(180deg, rgba(246, 251, 255, 0.94), rgba(228, 239, 255, 0.9));
+    --assistant-message: linear-gradient(145deg, #123460, #1f6fff);
+    --assistant-message-text: #f6fbff;
+    --button-text: #f6fbff;
+}
+
+body[data-theme="beta-ai"] {
+    --bg: #f7f6ff;
+    --bg-soft: #ebe9fb;
+    --surface: rgba(252, 251, 255, 0.84);
+    --surface-strong: rgba(253, 252, 255, 0.96);
+    --text: #231f3f;
+    --text-soft: #5d5980;
+    --text-muted: #8681ac;
+    --line: rgba(35, 31, 63, 0.08);
+    --line-strong: rgba(35, 31, 63, 0.16);
+    --brand: #4f46e5;
+    --brand-strong: #1e1b4b;
+    --brand-soft: #ddd7ff;
+    --success: #2a8c7b;
+    --error: #be557d;
+    --shadow: 0 10px 30px rgba(61, 54, 122, 0.1);
+    --bg-gradient:
+        linear-gradient(180deg, #f8f7ff 0%, #ece9fb 100%);
+    --hero-gradient: linear-gradient(180deg, rgba(251, 250, 255, 0.94), rgba(237, 233, 254, 0.9));
+    --overview-gradient: linear-gradient(180deg, rgba(251, 250, 255, 0.94), rgba(237, 233, 254, 0.9));
+    --assistant-message: linear-gradient(145deg, #2d236f, #5c49f1);
+    --assistant-message-text: #f8f7ff;
+    --button-text: #f8f7ff;
+}
+
+body[data-theme="confusity"] {
+    --bg: #f6f7fb;
+    --bg-soft: #ebedf4;
+    --surface: rgba(255, 255, 255, 0.86);
+    --surface-strong: rgba(255, 255, 255, 0.97);
+    --text: #111827;
+    --text-soft: #4b5563;
+    --text-muted: #6b7280;
+    --line: rgba(17, 24, 39, 0.08);
+    --line-strong: rgba(17, 24, 39, 0.16);
+    --brand: #111827;
+    --brand-strong: #374151;
+    --brand-soft: #d1d5db;
+    --success: #0284c7;
+    --error: #dc2626;
+    --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
+    --bg-gradient:
+        linear-gradient(180deg, #f7f8fb 0%, #eceff5 100%);
+    --hero-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 242, 247, 0.92));
+    --overview-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 242, 247, 0.92));
+    --assistant-message: #111827;
+    --assistant-message-text: #f9fafb;
+    --button-text: #f9fafb;
 }
 
 * {
     box-sizing: border-box;
 }
 
+html,
 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%),
-    linear-gradient(135deg, #0b0b1d 0%, #0f1124 40%, #0b1020 100%);
-    color: var(--text-primary);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    overflow: hidden;
-    margin: 0;
-    padding: 24px;
-    min-height: 0;
-}
-
-.app-shell {
     width: 100%;
-    display: flex;
-    gap: 20px;
-    align-items: stretch;
-    justify-content: center;
+    min-height: 100%;
+    margin: 0;
 }
 
-.card {
-    background: rgba(19, 19, 42, 0.92);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 24px;
-    box-shadow: 0 25px 60px -12px var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.04);
-    transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
-    min-height: 0;
+body {
+    font-family: "Manrope", "Segoe UI", sans-serif;
+    color: var(--text);
+    background: var(--bg-gradient);
+    padding: 24px;
 }
 
-.card::before {
-    content: '';
-    position: absolute;
+body::before {
+    content: "";
+    position: fixed;
     inset: 0;
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
-    opacity: 0.5;
+    background: var(--bg-overlay);
     pointer-events: none;
 }
 
-#auth {
-    padding: 36px;
-    width: 520px;
-    max-width: 95vw;
-    display: grid;
-    gap: 18px;
+.app-shell {
+    position: relative;
+    z-index: 1;
+    width: min(1440px, 100%);
+    margin: 0 auto;
 }
 
-#auth:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 35px 60px -12px var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.08);
+.card {
+    background: var(--surface);
+    border: 1px solid rgba(24, 32, 31, 0.08);
+    backdrop-filter: blur(10px);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow);
+}
+
+.auth-card {
+    display: grid;
+    grid-template-columns: 1.1fr minmax(340px, 460px);
+    overflow: hidden;
+    min-height: calc(100vh - 48px);
+    max-width: 1120px;
+    margin: 0 auto;
+}
+
+.auth-card-compact {
+    min-height: min(760px, calc(100vh - 48px));
+}
+
+.auth-hero {
+    padding: 48px;
+    background: var(--hero-gradient);
+    border-right: 1px solid rgba(24, 32, 31, 0.08);
+    display: grid;
+    align-content: start;
+    gap: 24px;
+}
+
+.theme-switcher {
+    display: grid;
+    gap: 6px;
+}
+
+.theme-switcher label {
+    font-size: 0.76rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
+.theme-select-control {
+    min-width: 170px;
+}
+
+.hero-theme-switcher {
+    justify-self: end;
+}
+
+.compact-theme-switcher {
+    min-width: 170px;
+}
+
+.auth-panel {
+    padding: 40px;
+    display: grid;
+    align-content: center;
+    gap: 18px;
+    background: rgba(252, 248, 240, 0.82);
+}
+
+.auth-hero-compact {
+    justify-content: center;
 }
 
 .brand {
     display: grid;
     grid-template-columns: auto 1fr;
-    gap: 16px;
+    gap: 18px;
     align-items: center;
 }
 
 .logo {
-    width: 52px;
-    height: 52px;
-    border-radius: 16px;
-    background: var(--gradient);
+    width: 54px;
+    height: 54px;
+    border-radius: 14px;
     display: grid;
     place-items: center;
-    color: white;
-    font-weight: 800;
-    letter-spacing: 1px;
-    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.35);
+    font-family: "Space Grotesk", sans-serif;
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #fff8f0;
+    background: linear-gradient(145deg, var(--brand), var(--brand-strong));
+    box-shadow: none;
 }
 
 .eyebrow {
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-    font-size: 11px;
-    color: var(--text-secondary);
     margin: 0;
+    font-size: 0.73rem;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--text-muted);
 }
 
-.subtitle {
-    margin: 6px 0 0;
-    color: var(--text-muted);
-    line-height: 1.5;
+h1,
+h2,
+h3,
+h4 {
+    margin: 0;
+    font-family: "Space Grotesk", sans-serif;
+    letter-spacing: -0.03em;
 }
 
 h1 {
-    margin: 4px 0 2px;
-    color: var(--text-primary);
-    font-size: 1.9rem;
-    font-weight: 800;
-    letter-spacing: -0.02em;
+    margin-top: 6px;
+    font-size: clamp(2rem, 2.5vw, 2.8rem);
+}
+
+h2 {
+    font-size: 1.45rem;
+}
+
+.subtitle,
+.persona-guidance,
+.persona-helper,
+.composer-hint,
+.empty-state p:last-child {
+    margin: 0;
+    color: var(--text-soft);
+    line-height: 1.6;
+}
+
+.hero-grid {
+    display: grid;
+    gap: 14px;
+}
+
+.hero-panel {
+    padding: 20px;
+    border-radius: var(--radius-lg);
+    background: rgba(255, 251, 245, 0.55);
+    border: 1px solid rgba(24, 32, 31, 0.08);
+}
+
+.hero-panel h2 {
+    margin: 10px 0 12px;
+    font-size: clamp(1.3rem, 1.7vw, 1.8rem);
+}
+
+.hero-stat,
+.summary-card,
+.context-pill {
+    padding: 14px;
+    border-radius: var(--radius-md);
+    background: rgba(255, 253, 249, 0.56);
+    border: 1px solid rgba(24, 32, 31, 0.08);
+}
+
+.hero-stat span,
+.summary-card span,
+.context-pill span {
+    display: block;
+    font-size: 0.78rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+}
+
+.hero-stat strong,
+.summary-card strong,
+.context-pill strong {
+    font-size: 1.2rem;
+    font-family: "Space Grotesk", sans-serif;
+}
+
+.auth-toggle,
+.persona-form,
+.input-shell,
+.chat-sidebar,
+.messages-panel,
+.empty-state,
+.persona-popover,
+.modal-card,
+.market-shell {
+    background: var(--surface-strong);
+    border: 1px solid rgba(24, 32, 31, 0.08);
 }
 
 .auth-toggle {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.07);
-    border-radius: 14px;
-    padding: 6px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 8px;
+    padding: 8px;
+    border-radius: var(--radius-md);
+}
+
+.toggle,
+button,
+.secondary-action,
+.icon-button {
+    border: none;
+    border-radius: 14px;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+    font: inherit;
+}
+
+button {
+    padding: 12px 18px;
+    font-weight: 700;
+    color: var(--button-text);
+    background: linear-gradient(145deg, var(--brand), var(--brand-strong));
+    box-shadow: none;
+}
+
+button:hover:not(:disabled),
+.secondary-action:hover,
+.icon-button:hover {
+    transform: none;
+}
+
+button:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
 }
 
 .toggle {
-    background: transparent;
-    border: none;
-    color: var(--text-secondary);
     padding: 12px 14px;
-    border-radius: 10px;
+    background: transparent;
+    color: var(--text-soft);
     font-weight: 700;
-    cursor: pointer;
-    transition: all 0.25s ease;
 }
 
 .toggle.active {
-    background: var(--gradient);
-    color: white;
-    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.25);
+    color: var(--button-text);
+    background: linear-gradient(145deg, var(--brand), var(--brand-strong));
 }
 
 .auth-screen {
     display: none;
-    animation: fadeIn 0.35s ease;
 }
 
 .auth-screen.active {
     display: block;
 }
 
-.auth-form {
-    display: grid;
-    gap: 14px;
-}
-
+.auth-form,
 .field {
     display: grid;
-    gap: 6px;
+    gap: 8px;
+}
+
+.auth-form {
+    gap: 16px;
 }
 
 .field span {
-    font-size: 14px;
-    color: var(--text-secondary);
-    letter-spacing: 0.01em;
+    font-size: 0.9rem;
+    color: var(--text-soft);
 }
 
-input, textarea, select {
+input,
+textarea,
+select {
     width: 100%;
-    margin: 0;
+    border-radius: 16px;
+    border: 1px solid rgba(24, 32, 31, 0.1);
     padding: 14px 16px;
-    border: 2px solid transparent;
-    background: rgba(10, 10, 20, 0.85);
-    border-radius: 14px;
-    color: var(--text-primary);
+    background: rgba(255, 253, 249, 0.92);
+    font: inherit;
+    color: var(--text);
     outline: none;
-    font-size: 16px;
-    font-family: inherit;
-    transition: all 0.25s ease;
-    backdrop-filter: blur(10px);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+textarea {
     resize: none;
 }
 
-input::placeholder, textarea::placeholder {
-    color: var(--text-muted);
-}
-
-input:focus, textarea:focus, select:focus {
-    border-color: var(--accent);
-    background: rgba(10, 10, 20, 1);
-    transform: translateY(-1px);
-    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.18);
-}
-
-button {
-    background: var(--accent);
-    color: white;
-    padding: 14px 24px;
-    border: none;
-    border-radius: 12px;
-    cursor: pointer;
-    font-weight: 700;
-    font-size: 15px;
-    transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
-}
-
-button::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    transition: left 0.5s ease;
-}
-
-button:hover:not(:disabled) {
-    background: var(--accent-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3);
-}
-
-button:hover::before {
-    left: 100%;
-}
-
-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    transform: none;
+input:focus,
+textarea:focus,
+select:focus {
+    border-color: rgba(164, 85, 45, 0.55);
+    box-shadow: 0 0 0 4px rgba(164, 85, 45, 0.12);
+    background: #fffdfa;
 }
 
 .primary-action {
-    margin-top: 6px;
     width: 100%;
 }
 
 .status {
-    margin: 4px 0 0;
-    font-size: 14px;
-    text-align: center;
     min-height: 24px;
-    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);
-    color: var(--text-secondary);
+    margin: 0;
+    padding: 12px 14px;
+    border-radius: 14px;
+    background: rgba(24, 32, 31, 0.04);
+    border: 1px solid rgba(24, 32, 31, 0.06);
+    color: var(--text-soft);
 }
 
 .status.error {
     color: var(--error);
-    background: rgba(239, 68, 68, 0.1);
-    border: 1px solid rgba(239, 68, 68, 0.2);
+    background: rgba(181, 71, 61, 0.09);
+    border-color: rgba(181, 71, 61, 0.2);
 }
 
 .status.success {
     color: var(--success);
-    background: rgba(34, 197, 94, 0.12);
-    border: 1px solid rgba(34, 197, 94, 0.2);
+    background: rgba(37, 115, 93, 0.1);
+    border-color: rgba(37, 115, 93, 0.2);
 }
 
-#chat {
-    height: 90vh;
-    width: 95%;
-    max-width: 1200px;
-    padding: 24px;
-    background: rgba(19, 19, 42, 0.92);
-    border-radius: 24px;
-    box-shadow: 0 25px 50px -12px var(--shadow);
-    min-height: 0;
+.inline-status {
+    min-height: auto;
+    padding: 10px 12px;
+}
+
+.consent-container {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    font-size: 0.88rem;
+    color: var(--text-soft);
+}
+
+.consent-container input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    margin-top: 2px;
+}
+
+.consent-container a,
+.msg-content a {
+    color: var(--brand-strong);
+    text-decoration: none;
+}
+
+.consent-container a:hover,
+.msg-content a:hover {
+    text-decoration: underline;
+}
+
+.chat-card {
+    padding: 16px;
+    min-height: calc(100vh - 48px);
 }
 
 .chat-layout {
     display: grid;
-    grid-template-columns: 280px 1fr;
+    grid-template-columns: 340px minmax(0, 1fr);
     gap: 20px;
-    height: 100%;
-    min-height: 0;
+    min-height: calc(100vh - 88px);
 }
 
 .chat-sidebar {
-    background: rgba(10, 10, 20, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 20px;
+    border-radius: var(--radius-lg);
     padding: 18px;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
     gap: 16px;
-    min-height: 0;
 }
 
-.sidebar-header {
+.sidebar-top {
+    display: grid;
+    gap: 14px;
+}
+
+.sidebar-header,
+.chat-header,
+.chat-title-block,
+.chat-toolbar,
+.chat-header-actions,
+.market-header,
+.market-header-actions,
+.persona-title-row,
+.persona-item-actions,
+.persona-section-header,
+.persona-section-actions,
+.modal-header,
+.market-preview-actions {
     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;
-}
-
-a.secondary-action {
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.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;
+.sidebar-header,
+.chat-header,
+.market-header,
+.persona-title-row,
+.persona-section-header,
+.modal-header {
     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);
-}
-
-.persona-status {
-    text-align: left;
-    margin: 0;
-    padding: 10px 12px;
-    font-size: 13px;
+.compact-field span {
+    font-size: 0.78rem;
 }
 
+.chat-list,
 .persona-list {
     display: grid;
     gap: 10px;
-    max-height: 200px;
-    overflow-y: auto;
+    align-content: start;
+    overflow: auto;
+    min-height: 0;
     padding-right: 4px;
 }
 
+.chat-item,
 .persona-item {
-    background: rgba(15, 15, 35, 0.7);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 14px;
-    padding: 10px 12px;
-    display: grid;
-    gap: 8px;
-}
-
-.persona-title-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-}
-
-.persona-role-tag {
-    font-size: 0.7rem;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    padding: 4px 8px;
-    border-radius: 999px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    color: var(--text-secondary);
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.persona-role-tag.ai {
-    border-color: rgba(99, 102, 241, 0.6);
-    color: #c7d2fe;
-    background: rgba(99, 102, 241, 0.15);
-}
-
-.persona-role-tag.user {
-    border-color: rgba(34, 197, 94, 0.6);
-    color: #bbf7d0;
-    background: rgba(34, 197, 94, 0.15);
-}
-
-.persona-item.active {
-    border-color: rgba(99, 102, 241, 0.6);
-    box-shadow: 0 8px 18px rgba(99, 102, 241, 0.18);
-}
-
-.persona-item h4 {
-    margin: 0;
-    font-size: 0.98rem;
-}
-
-.persona-item p {
-    margin: 0;
-    font-size: 0.82rem;
-    color: var(--text-secondary);
-}
-
-.persona-item-actions {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-}
-
-.persona-item-actions button {
-    padding: 6px 10px;
-    font-size: 12px;
-    border-radius: 10px;
-}
-
-.persona-form {
     display: grid;
     gap: 10px;
-    background: rgba(10, 10, 20, 0.75);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 16px;
-    padding: 12px;
+    padding: 16px;
+    border-radius: var(--radius-md);
+    border: 1px solid rgba(24, 32, 31, 0.08);
+    background: rgba(255, 252, 246, 0.8);
+    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
-.persona-helper {
-    margin: 0;
-    font-size: 0.82rem;
+.chat-item {
+    grid-template-columns: minmax(0, 1fr) max-content;
+    align-items: center;
+    column-gap: 14px;
+    cursor: pointer;
+}
+
+.chat-item:hover,
+.persona-item:hover {
+    border-color: rgba(164, 85, 45, 0.28);
+    box-shadow: none;
+}
+
+.chat-item.active,
+.persona-item.active {
+    border-color: rgba(164, 85, 45, 0.48);
+    box-shadow: none;
+}
+
+.chat-item span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 700;
+    line-height: 1.35;
+}
+
+.chat-item button,
+.icon-button {
+    padding: 8px 12px;
+    background: rgba(24, 32, 31, 0.06);
+    color: var(--text);
+    box-shadow: none;
+    min-height: 40px;
+}
+
+.secondary-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 11px 14px;
+    min-height: 44px;
+    background: rgba(164, 85, 45, 0.1);
+    color: var(--text);
+    border: 1px solid rgba(164, 85, 45, 0.18);
+    text-decoration: none;
+    box-shadow: none;
+}
+
+.danger {
+    background: linear-gradient(145deg, #b34b40, #8f3026);
+}
+
+.sidebar-footer button {
+    width: 100%;
+}
+
+.sidebar-footer-stack {
+    display: grid;
+    gap: 10px;
+}
+
+.session-chip {
+    display: grid;
+    gap: 4px;
+    padding: 12px 14px;
+    border-radius: 14px;
+    border: 1px solid rgba(24, 32, 31, 0.08);
+    background: rgba(24, 32, 31, 0.04);
+}
+
+.session-chip-label {
+    font-size: 0.74rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
     color: var(--text-muted);
-    line-height: 1.4;
 }
 
-.persona-form.hidden {
-    display: none;
+.session-chip strong {
+    font-size: 0.98rem;
+    line-height: 1.3;
+    color: var(--text);
 }
 
-.persona-form h3 {
-    margin: 0;
-    font-size: 1rem;
-}
-
-.persona-actions {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
+.sidebar-footer-stack .secondary-action {
+    width: 100%;
 }
 
 .chat-main {
     display: grid;
-    grid-template-rows: auto 1fr auto auto;
-    row-gap: 15px;
+    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
+    gap: 16px;
     min-height: 0;
 }
 
-#messages {
-    grid-row: 2;
-    overflow-y: auto;
+.chat-layout-focus {
+    grid-template-columns: 340px minmax(0, 1fr);
+}
+
+.chat-main-focus {
+    grid-template-rows: auto minmax(0, 1fr) auto auto;
+}
+
+.chat-header-focus {
+    padding-bottom: 2px;
+    border-bottom: 1px solid rgba(24, 32, 31, 0.07);
+}
+
+.messages-panel-focus {
+    min-height: 58vh;
+}
+
+.input-shell-focus {
+    border-top: 1px solid rgba(24, 32, 31, 0.07);
+}
+
+.workspace-overview,
+.messages-panel,
+.empty-state,
+.input-shell {
+    border-radius: var(--radius-lg);
+    padding: 14px;
+}
+
+.workspace-overview {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(300px, 500px);
+    gap: 14px;
+    background: var(--overview-gradient);
+    border: 1px solid rgba(24, 32, 31, 0.07);
+}
+
+.workspace-intro {
+    display: grid;
+    gap: 8px;
+}
+
+.summary-cards {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 12px;
+}
+
+.chat-title-block {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    gap: 14px;
+}
+
+.chat-title {
+    display: grid;
+    gap: 4px;
+}
+
+.chat-toolbar {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-self: end;
+}
+
+.chat-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    gap: 16px;
+}
+
+.chat-header-actions {
+    justify-content: flex-end;
+    align-items: end;
+    flex-wrap: nowrap;
+}
+
+.model-select {
+    display: grid;
+    gap: 6px;
+    min-width: 180px;
+    align-self: end;
+}
+
+.model-select label {
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--text-muted);
+}
+
+.context-rail,
+.quick-prompts {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.context-pill {
+    min-width: 180px;
+}
+
+.quick-prompts {
+    margin-top: 0;
+}
+
+.prompt-chip {
+    padding: 9px 12px;
+    border-radius: 999px;
+    background: rgba(255, 251, 245, 0.65);
+    color: var(--text);
+    border: 1px solid rgba(24, 32, 31, 0.08);
+    box-shadow: none;
+    font-weight: 600;
+}
+
+.messages-panel {
+    position: relative;
+    overflow: 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);
-    border-radius: 20px;
-    backdrop-filter: blur(10px);
-    scroll-behavior: smooth;
-    min-height: 0;
-}
-
-.input-container {
-    grid-row: 3;
-    display: flex;
-    align-items: flex-end;
     gap: 12px;
-    flex-shrink: 0;
-    min-height: 70px;
+    background: rgba(252, 248, 240, 0.52);
 }
 
-.logout-container {
-    grid-row: 4;
-    text-align: center;
-    margin-top: 10px;
+.empty-state {
+    display: none;
+    align-content: center;
+    justify-items: start;
+    gap: 8px;
+    background: rgba(250, 244, 235, 0.75);
 }
 
-#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;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.empty-state.visible {
+    display: grid;
 }
 
 .msg {
-    padding: 16px 20px;
-    border-radius: 18px;
-    line-height: 1.5;
-    max-width: 80%;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    animation: fadeIn 0.3s ease;
-    position: relative;
-    white-space: normal;
-    margin: 0;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+    max-width: min(78%, 780px);
+    padding: 14px 16px;
+    border-radius: 16px;
+    display: grid;
+    gap: 8px;
+    animation: fadeIn 0.24s ease;
 }
 
 .msg.user {
-    background: var(--bg-message-user);
-    color: white;
     align-self: flex-end;
-    border-bottom-right-radius: 4px;
-    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
-}
-
-.msg.bot {
-    background: var(--bg-message-bot);
-    color: var(--text-primary);
-    align-self: flex-start;
-    border-bottom-left-radius: 4px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(145deg, var(--brand), var(--brand-strong));
+    color: var(--button-text);
+    border-bottom-right-radius: 8px;
 }
 
+.msg.bot,
 .msg.loading {
-    background: var(--bg-message-bot);
-    color: var(--text-primary);
     align-self: flex-start;
-    border-bottom-left-radius: 4px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    padding: 10px 14px;
-    max-width: fit-content;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    background: var(--assistant-message);
+    color: var(--assistant-message-text);
+    border-bottom-left-radius: 8px;
 }
 
 .msg-header {
-    font-size: 0.7rem;
-    letter-spacing: 0.12em;
+    font-size: 0.72rem;
     text-transform: uppercase;
-    font-weight: 700;
-    color: rgba(255, 255, 255, 0.7);
+    letter-spacing: 0.14em;
+    opacity: 0.74;
 }
 
 .msg-content {
@@ -640,34 +906,25 @@ a.secondary-action {
     margin: 0;
 }
 
-.msg-content p {
-    margin: 0;
-}
-
 .msg-content ul,
 .msg-content ol {
     margin: 0;
     padding-left: 20px;
 }
 
-.msg-content li {
-    margin: 4px 0;
-}
-
 .msg-content pre {
-    background: rgba(15, 15, 35, 0.9);
     padding: 12px 14px;
-    border-radius: 12px;
-    overflow-x: auto;
+    border-radius: 14px;
+    overflow: auto;
+    background: rgba(8, 10, 10, 0.28);
     border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .msg-content code {
-    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+    font-family: "JetBrains Mono", Consolas, monospace;
     background: rgba(255, 255, 255, 0.08);
     padding: 2px 6px;
-    border-radius: 6px;
-    font-size: 0.9em;
+    border-radius: 8px;
 }
 
 .msg-content pre code {
@@ -677,169 +934,162 @@ a.secondary-action {
 
 .msg-content blockquote {
     margin: 0;
-    padding-left: 14px;
+    padding-left: 12px;
     border-left: 3px solid rgba(255, 255, 255, 0.2);
-    color: var(--text-secondary);
-}
-
-.msg-content a {
-    color: #93c5fd;
-}
-
-.msg-content a:hover {
-    color: #bfdbfe;
+    opacity: 0.86;
 }
 
 .typing-indicator {
     display: flex;
     align-items: center;
     gap: 6px;
-    height: 16px;
 }
 
 .typing-dot {
-    width: 6px;
-    height: 6px;
+    width: 7px;
+    height: 7px;
     border-radius: 50%;
-    background: var(--text-secondary);
-    animation: typingAnimation 1.2s infinite ease-in-out;
-}
-
-.typing-dot:nth-child(1) {
-    animation-delay: -0.32s;
+    background: rgba(239, 244, 242, 0.78);
+    animation: typing 1.2s infinite ease-in-out;
 }
 
 .typing-dot:nth-child(2) {
-    animation-delay: -0.16s;
+    animation-delay: 0.15s;
 }
 
-@keyframes typingAnimation {
-    0%, 80%, 100% {
-        transform: scale(0.8);
-        opacity: 0.5;
-    }
-    40% {
-        transform: scale(1);
-        opacity: 1;
-    }
+.typing-dot:nth-child(3) {
+    animation-delay: 0.3s;
 }
 
-#msgInput {
-    flex: 1;
-    margin: 0;
-    border-radius: 20px;
-    padding: 16px 24px;
-    min-height: 56px;
-    max-height: 120px;
-    overflow-y: auto;
-}
-
-#send {
-    background: var(--accent);
-    border-radius: 50%;
-    width: 56px;
-    height: 56px;
+.loading-shell {
     display: flex;
     align-items: center;
-    justify-content: center;
-    padding: 0;
-    font-size: 18px;
-    flex-shrink: 0;
+    gap: 14px;
+    min-width: 220px;
 }
 
-#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);
-    }
-}
-
-#logout {
-    background: linear-gradient(135deg, #6b7280, #4b5563);
-    border-radius: 12px;
-}
-
-.auth-buttons, .logout-container {
+.loading-bars {
     display: flex;
-    gap: 12px;
-    justify-content: center;
-    margin-top: 20px;
+    align-items: flex-end;
+    gap: 4px;
+    height: 26px;
 }
 
-.chat-header {
+.loading-bar {
+    width: 6px;
+    height: 10px;
+    border-radius: 999px;
+    background: currentColor;
+    opacity: 0.42;
+    animation: loadingWave 1.1s ease-in-out infinite;
+}
+
+.loading-bar:nth-child(2) {
+    animation-delay: 0.12s;
+}
+
+.loading-bar:nth-child(3) {
+    animation-delay: 0.24s;
+}
+
+.loading-bar:nth-child(4) {
+    animation-delay: 0.36s;
+}
+
+.loading-copy {
+    display: grid;
+    gap: 2px;
+}
+
+.loading-copy strong,
+.loading-copy span {
+    line-height: 1.2;
+}
+
+.loading-copy strong {
+    font-size: 0.9rem;
+}
+
+.loading-copy span {
+    font-size: 0.8rem;
+    opacity: 0.72;
+}
+
+.input-shell {
+    display: grid;
+    gap: 12px;
+}
+
+.input-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
-}
-
-.chat-header-actions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
     flex-wrap: wrap;
-    justify-content: flex-end;
 }
 
-.chat-title {
-    display: flex;
+.input-container {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 56px;
+    gap: 12px;
+    align-items: stretch;
+}
+
+#msgInput {
+    min-height: 56px;
+    max-height: 180px;
+}
+
+#send {
+    width: 56px;
+    height: auto;
+    min-height: 56px;
+    padding: 0;
+    border-radius: 18px;
+}
+
+#send::after {
+    content: ">";
+    font-size: 1.2rem;
+}
+
+#send.loading::after {
+    content: "";
+}
+
+#send.loading {
+    animation: pulse 1s infinite ease-in-out;
+}
+
+.chat-toolbar .icon-button,
+.chat-header-actions .secondary-action,
+.chat-header-actions .model-select select,
+.sidebar-header .secondary-action,
+.sidebar-footer-stack button,
+.sidebar-footer-stack .secondary-action {
+    min-height: 44px;
+}
+
+.chat-toolbar .icon-button,
+.chat-header-actions .secondary-action,
+.sidebar-header .secondary-action {
+    display: inline-flex;
     align-items: center;
-    gap: 10px;
+    justify-content: center;
 }
 
-.chat-title h2 {
-    margin: 0;
-    font-size: 1.3rem;
+.chat-toolbar .icon-button {
+    min-width: 88px;
 }
 
-.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 {
+.chat-header-actions .persona-menu {
     display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    color: var(--text-secondary);
+    align-items: end;
+    align-self: end;
 }
 
-.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;
+.chat-header-actions .model-select select {
+    min-width: 190px;
 }
 
 .persona-menu {
@@ -848,319 +1098,137 @@ a.secondary-action {
 
 .persona-popover {
     position: absolute;
-    right: 0;
     top: calc(100% + 10px);
-    width: min(520px, 80vw);
-    background: rgba(19, 19, 42, 0.98);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 18px;
-    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.55);
-    padding: 14px;
+    right: 0;
+    width: min(560px, 88vw);
+    border-radius: var(--radius-lg);
+    padding: 16px;
+    box-shadow: var(--shadow);
     display: grid;
     gap: 16px;
-    z-index: 30;
+    z-index: 20;
 }
 
 .persona-section {
     display: grid;
-    gap: 10px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-    padding-top: 12px;
-}
-
-.persona-section:first-child {
-    border-top: none;
-    padding-top: 0;
-}
-
-.persona-section-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
     gap: 12px;
 }
 
-.persona-guidance {
-    margin: 4px 0 0;
-    font-size: 0.82rem;
-    color: var(--text-muted);
-    line-height: 1.4;
+.persona-status {
+    text-align: left;
 }
 
-.persona-section-actions {
-    display: flex;
-    gap: 8px;
+.persona-role-tag {
+    padding: 5px 9px;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    background: rgba(24, 32, 31, 0.06);
+}
+
+.persona-role-tag.ai {
+    color: var(--brand-strong);
+    background: rgba(164, 85, 45, 0.12);
+}
+
+.persona-role-tag.user {
+    color: var(--success);
+    background: rgba(37, 115, 93, 0.12);
+}
+
+.persona-item p {
+    margin: 0;
+    color: var(--text-soft);
+    font-size: 0.88rem;
+    line-height: 1.5;
+}
+
+.persona-item-actions,
+.persona-section-actions,
+.market-header-actions,
+.market-preview-actions {
     flex-wrap: wrap;
 }
 
-.persona-market-columns {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
-    gap: 12px;
+.persona-item-actions button {
+    padding: 8px 11px;
+    font-size: 0.84rem;
 }
 
-.persona-market-column h3 {
-    margin: 0 0 6px;
-    font-size: 0.95rem;
-    color: var(--text-secondary);
+.hidden {
+    display: none !important;
 }
 
-.persona-popover .persona-list {
-    max-height: 220px;
-}
-
-.market-shell {
-    width: min(980px, 95vw);
-    padding: 28px;
-    display: grid;
-    gap: 18px;
-}
-
-.market-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 20px;
-    flex-wrap: wrap;
-}
-
-.market-header h1 {
-    margin: 4px 0;
-}
-
-.market-search {
-    display: grid;
-    gap: 6px;
-    margin-top: 12px;
-    max-width: 320px;
-}
-
-.market-search label {
-    font-size: 0.78rem;
-    color: var(--text-muted);
-}
-
-.market-search input {
-    padding: 10px 12px;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(10, 10, 25, 0.8);
-    color: var(--text-primary);
-    font-size: 0.9rem;
-}
-
-.market-search input:focus {
-    outline: none;
-    border-color: var(--accent);
-    box-shadow: 0 0 0 2px rgba(112, 86, 255, 0.25);
-}
-
-.market-header-actions {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-
-.market-page-columns .persona-list {
-    max-height: 360px;
-}
-
-.market-link {
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.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: 85vh;
-    }
-
-    .chat-layout {
-        grid-template-columns: 1fr;
-    }
-
-    .chat-header {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .chat-header-actions {
-        width: 100%;
-        justify-content: flex-start;
-    }
-
-    .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;
-    }
-
-    .persona-popover {
-        width: 95vw;
-        right: auto;
-        left: 0;
-    }
-
-    .persona-item-actions {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .market-shell {
-        padding: 20px;
-    }
-
-    .market-header {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .market-header-actions {
-        width: 100%;
-        justify-content: flex-start;
-    }
-
-    .market-search {
-        max-width: none;
-    }
-}
-
-@media (max-width: 480px) {
-    .brand {
-        grid-template-columns: 1fr;
-    }
-
-    .logo {
-        width: 48px;
-        height: 48px;
-    }
-
-    #chat {
-        padding: 12px;
-    }
-
-    #messages {
-        padding: 14px;
-    }
-
-    .market-preview-actions {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .market-preview-details {
-        grid-template-columns: 1fr;
-    }
-}
-
-.consent-container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 10px 0;
-    font-size: 0.8rem;
-    color: #aaa;
-}
-
-.consent-container input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-}
-
-.consent-container label {
-    line-height: 1.3;
-}
-
-.consent-container a {
-    color: #7b87ff;
-    text-decoration: none;
-}
-
-.consent-container a:hover {
-    text-decoration: underline;
-}
-
-html, body {
-    width: 100%;
-    max-width: 100%;
-    overflow-x: hidden;
-}
-
-.content {
-    width: 100%;
-    max-width: 100%;
-    padding: 1.5rem;
-    box-sizing: border-box;
-}
-
-.content * {
-    overflow-wrap: break-word;
-    word-break: break-word;
-}
-
-.hidden { display: none !important; }
-
 .modal-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0,0,0,0.55);
-    backdrop-filter: blur(8px);
     display: grid;
     place-items: center;
-    z-index: 9999;
     padding: 24px;
+    background: rgba(24, 32, 31, 0.16);
+    backdrop-filter: blur(4px);
+    z-index: 50;
 }
 
 .modal-card {
-    width: min(520px, 95vw);
-    background: rgba(19, 19, 42, 0.96);
-    border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 20px;
-    box-shadow: 0 25px 60px -12px rgba(0,0,0,0.45);
-    padding: 16px;
+    width: min(560px, 95vw);
+    border-radius: var(--radius-lg);
+    padding: 18px;
+}
+
+.persona-form {
+    display: grid;
+    gap: 12px;
+    padding: 14px;
+    border-radius: var(--radius-md);
+}
+
+.market-shell {
+    width: min(1180px, 100%);
+    margin: 0 auto;
+    padding: 20px;
+    border-radius: var(--radius-xl);
+    display: grid;
+    gap: 14px;
+}
+
+.market-shell-simple {
+    width: min(960px, 100%);
+}
+
+.market-header-simple {
+    align-items: flex-start;
+}
+
+.market-search {
+    display: grid;
+    gap: 8px;
+    max-width: 520px;
+}
+
+.market-search label {
+    font-size: 0.8rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
+.persona-market-column h3 {
+    margin-bottom: 6px;
+}
+
+.persona-market-columns,
+.market-preview-details {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
 }
 
 .market-preview-card {
-    width: min(640px, 95vw);
+    width: min(720px, 95vw);
     display: grid;
-    gap: 12px;
+    gap: 16px;
 }
 
 .market-preview-body {
@@ -1168,37 +1236,734 @@ html, body {
     gap: 12px;
 }
 
-.market-preview-details {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 12px;
-}
-
 .market-preview-details h4 {
-    margin: 0 0 4px;
-    font-size: 0.85rem;
-    color: var(--text-secondary);
+    margin-bottom: 6px;
+    font-size: 0.82rem;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.12em;
+    color: var(--text-muted);
 }
 
 .market-preview-details p {
     margin: 0;
-    font-size: 0.9rem;
-    color: var(--text-primary);
+    color: var(--text);
+    line-height: 1.5;
 }
 
-.market-preview-actions {
+.settings-shell {
+    width: min(920px, 100%);
+    margin: 0 auto;
+    padding: 20px;
+    display: grid;
+    gap: 16px;
+}
+
+.settings-shell .market-header-simple {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 16px;
+    align-items: start;
+}
+
+.settings-shell .market-header-actions {
     display: flex;
-    gap: 12px;
     flex-wrap: wrap;
     justify-content: flex-end;
+    gap: 10px;
 }
 
-.modal-header {
+.settings-shell .market-header-actions .secondary-action {
+    min-width: 150px;
+}
+
+.settings-layout {
+    display: grid;
+    grid-template-columns: 220px minmax(0, 1fr);
+    gap: 16px;
+    align-items: start;
+}
+
+.settings-nav {
+    display: grid;
+    gap: 10px;
+    padding: 12px;
+    border-radius: var(--radius-lg);
+    background: var(--surface-strong);
+    border: 1px solid rgba(24, 32, 31, 0.08);
+}
+
+.settings-nav-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    text-align: left;
+    padding: 12px 14px;
+    min-height: 48px;
+    background: rgba(24, 32, 31, 0.04);
+    color: var(--text);
+    border: 1px solid rgba(24, 32, 31, 0.08);
+}
+
+.settings-nav-item.active {
+    background: linear-gradient(145deg, var(--brand), var(--brand-strong));
+    color: var(--button-text);
+    border-color: transparent;
+}
+
+.settings-content {
+    display: grid;
+}
+
+.settings-view {
+    display: none;
+    gap: 16px;
+}
+
+.settings-view.active {
+    display: grid;
+}
+
+.settings-form-stack {
+    display: grid;
+    gap: 14px;
+}
+
+.settings-panel {
+    display: grid;
+    gap: 14px;
+    padding: 16px;
+    border-radius: var(--radius-lg);
+    background: var(--surface-strong);
+    border: 1px solid rgba(24, 32, 31, 0.08);
+}
+
+.settings-panel-compact {
+    max-width: 560px;
+}
+
+.settings-section-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 12px;
-    margin-bottom: 10px;
+    gap: 10px;
+}
+
+.settings-theme-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 180px;
+    gap: 14px;
+    align-items: end;
+}
+
+.settings-theme-note {
+    display: grid;
+    gap: 4px;
+    padding: 12px 14px;
+    min-height: 76px;
+    border-radius: 14px;
+    border: 1px solid rgba(24, 32, 31, 0.08);
+    background: rgba(24, 32, 31, 0.04);
+    align-content: center;
+}
+
+.settings-theme-note-label {
+    font-size: 0.74rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
+body[data-theme="fakegpt"] {
+    background: radial-gradient(circle at top left, rgba(16, 163, 127, 0.15), transparent 26%), linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
+    color: #e8fff7;
+}
+
+body[data-theme="fakegpt"] .card,
+body[data-theme="fakegpt"] .chat-sidebar,
+body[data-theme="fakegpt"] .messages-panel,
+body[data-theme="fakegpt"] .input-shell,
+body[data-theme="fakegpt"] .market-shell,
+body[data-theme="fakegpt"] .settings-panel,
+body[data-theme="fakegpt"] .modal-card,
+body[data-theme="fakegpt"] .persona-popover {
+    background: rgba(18, 24, 21, 0.88);
+    border-color: rgba(36, 255, 180, 0.14);
+    box-shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12);
+}
+
+body[data-theme="fakegpt"] .chat-item,
+body[data-theme="fakegpt"] .persona-item,
+body[data-theme="fakegpt"] .hero-panel {
+    background: rgba(10, 15, 13, 0.92);
+    border-color: rgba(36, 255, 180, 0.12);
+}
+
+body[data-theme="fakegpt"] .msg.user {
+    border-radius: 24px 24px 8px 24px;
+    box-shadow: 0 0 24px rgba(16, 163, 127, 0.22);
+}
+
+body[data-theme="fakegpt"] .msg.bot,
+body[data-theme="fakegpt"] .msg.loading {
+    background: #141917;
+    border: 1px solid rgba(36, 255, 180, 0.08);
+    border-radius: 24px 24px 24px 8px;
+    box-shadow: 0 0 18px rgba(16, 163, 127, 0.08);
+}
+
+body[data-theme="fakegpt"] .typing-dot {
+    background: #50f2c2;
+    box-shadow: 0 0 10px rgba(80, 242, 194, 0.55);
+}
+
+body[data-theme="fakegpt"] .secondary-action,
+body[data-theme="fakegpt"] .icon-button,
+body[data-theme="fakegpt"] .chat-item button,
+body[data-theme="fakegpt"] .session-chip,
+body[data-theme="fakegpt"] .settings-nav,
+body[data-theme="fakegpt"] .settings-nav-item:not(.active),
+body[data-theme="fakegpt"] .settings-theme-note {
+    background: rgba(18, 24, 21, 0.96);
+    color: #d7fff3;
+    border: 1px solid rgba(36, 255, 180, 0.16);
+}
+
+body[data-theme="fakegpt"] input,
+body[data-theme="fakegpt"] textarea,
+body[data-theme="fakegpt"] select {
+    background: rgba(10, 15, 13, 0.96);
+    color: #e8fff7;
+    border-color: rgba(36, 255, 180, 0.12);
+}
+
+body[data-theme="fraud"] {
+    font-family: Georgia, "Times New Roman", serif;
+}
+
+body[data-theme="fraud"] h1,
+body[data-theme="fraud"] h2,
+body[data-theme="fraud"] h3,
+body[data-theme="fraud"] h4,
+body[data-theme="fraud"] .logo {
+    font-family: Georgia, "Times New Roman", serif;
+    letter-spacing: 0;
+}
+
+body[data-theme="fraud"] .app-shell,
+body[data-theme="fraud"] .settings-shell,
+body[data-theme="fraud"] .market-shell {
+    width: min(1180px, 100%);
+}
+
+body[data-theme="fraud"] .chat-layout-focus {
+    grid-template-columns: 330px minmax(0, 1fr);
+    gap: 28px;
+}
+
+body[data-theme="fraud"] .chat-sidebar,
+body[data-theme="fraud"] .messages-panel,
+body[data-theme="fraud"] .input-shell,
+body[data-theme="fraud"] .market-shell,
+body[data-theme="fraud"] .settings-panel,
+body[data-theme="fraud"] .hero-panel {
+    background: rgba(255, 251, 245, 0.72);
+    border-color: rgba(84, 62, 43, 0.08);
+}
+
+body[data-theme="fraud"] .chat-main-focus,
+body[data-theme="fraud"] .auth-hero {
+    gap: 24px;
+}
+
+body[data-theme="fraud"] .msg {
+    max-width: min(70%, 860px);
+    border-radius: 10px;
+}
+
+body[data-theme="fraud"] .msg.user {
+    background: linear-gradient(180deg, #d8b194, #c99c7c);
+    color: #fffaf4;
+}
+
+body[data-theme="fraud"] .msg.bot,
+body[data-theme="fraud"] .msg.loading {
+    background: rgba(255, 248, 240, 0.95);
+    color: #3b3127;
+    border: 1px solid rgba(84, 62, 43, 0.08);
+}
+
+body[data-theme="fraud"] button,
+body[data-theme="fraud"] .toggle.active {
+    background: #b78362;
+}
+
+body[data-theme="fraud"] input,
+body[data-theme="fraud"] textarea,
+body[data-theme="fraud"] select,
+body[data-theme="fraud"] .secondary-action,
+body[data-theme="fraud"] .icon-button,
+body[data-theme="fraud"] .session-chip,
+body[data-theme="fraud"] .settings-nav,
+body[data-theme="fraud"] .settings-nav-item:not(.active),
+body[data-theme="fraud"] .settings-theme-note {
+    background: rgba(255, 249, 242, 0.88);
+    color: #4b3d31;
+    border: 1px solid rgba(84, 62, 43, 0.08);
+}
+
+body[data-theme="germini"]::before {
+    display: none;
+}
+
+body[data-theme="germini"] {
+    background:
+        radial-gradient(circle at top left, rgba(154, 120, 255, 0.28), transparent 24%),
+        radial-gradient(circle at top right, rgba(84, 170, 255, 0.24), transparent 24%),
+        linear-gradient(180deg, #eef1ff 0%, #dfe6ff 100%);
+}
+
+body[data-theme="germini"] .card,
+body[data-theme="germini"] .chat-sidebar,
+body[data-theme="germini"] .messages-panel,
+body[data-theme="germini"] .input-shell,
+body[data-theme="germini"] .market-shell,
+body[data-theme="germini"] .settings-panel,
+body[data-theme="germini"] .modal-card,
+body[data-theme="germini"] .persona-popover,
+body[data-theme="germini"] .hero-panel {
+    background: rgba(255, 255, 255, 0.32);
+    backdrop-filter: blur(22px);
+    border: 1px solid rgba(255, 255, 255, 0.34);
+    box-shadow: 0 18px 40px rgba(98, 110, 255, 0.16);
+}
+
+body[data-theme="germini"] .chat-item,
+body[data-theme="germini"] .persona-item {
+    background: rgba(255, 255, 255, 0.38);
+    border-color: rgba(255, 255, 255, 0.34);
+}
+
+body[data-theme="germini"] .msg.user,
+body[data-theme="germini"] .msg.bot {
+    box-shadow: 0 10px 30px rgba(98, 110, 255, 0.18);
+}
+
+body[data-theme="germini"] .logo,
+body[data-theme="germini"] button,
+body[data-theme="germini"] .toggle.active {
+    box-shadow: 0 10px 28px rgba(100, 112, 255, 0.24);
+}
+
+body[data-theme="germini"] .chat-card,
+body[data-theme="germini"] .market-shell,
+body[data-theme="germini"] .settings-shell {
+    animation: gemFloat 8s ease-in-out infinite;
+}
+
+body[data-theme="germini"] input,
+body[data-theme="germini"] textarea,
+body[data-theme="germini"] select {
+    background: rgba(255, 255, 255, 0.4);
+    border-color: rgba(255, 255, 255, 0.42);
+}
+
+body[data-theme="slopilot"] .chat-layout-focus {
+    grid-template-columns: 330px minmax(0, 1fr);
+}
+
+body[data-theme="slopilot"] .chat-sidebar {
+    background: #f8fbff;
+    border-color: rgba(13, 104, 255, 0.12);
+}
+
+body[data-theme="slopilot"] .messages-panel {
+    background: #ffffff;
+}
+
+body[data-theme="slopilot"] .msg.bot,
+body[data-theme="slopilot"] .msg.loading {
+    background: #edf4ff;
+    color: #18324d;
+    border: 1px solid rgba(13, 104, 255, 0.1);
+}
+
+body[data-theme="slopilot"] .chat-header-focus {
+    padding: 12px 14px;
+    border: 1px solid rgba(13, 104, 255, 0.1);
+    border-radius: 12px;
+    background: #f8fbff;
+}
+
+body[data-theme="slopilot"] .chat-item {
+    background: #ffffff;
+    border-color: rgba(13, 104, 255, 0.1);
+    border-radius: 12px;
+}
+
+body[data-theme="slopilot"] .chat-item.active {
+    border-color: rgba(13, 104, 255, 0.32);
+    box-shadow: 0 10px 22px rgba(13, 104, 255, 0.08);
+}
+
+body[data-theme="slopilot"] .chat-item button {
+    background: #edf4ff;
+    color: #123460;
+    border: 1px solid rgba(13, 104, 255, 0.12);
+}
+
+body[data-theme="slopilot"] .session-chip {
+    background: #ffffff;
+    border-color: rgba(13, 104, 255, 0.12);
+}
+
+body[data-theme="slopilot"] .settings-nav,
+body[data-theme="slopilot"] .settings-nav-item:not(.active),
+body[data-theme="slopilot"] .settings-theme-note {
+    background: #ffffff;
+    border-color: rgba(13, 104, 255, 0.12);
+}
+
+body[data-theme="beta-ai"] {
+    background:
+        radial-gradient(circle at top left, rgba(115, 117, 255, 0.18), transparent 24%),
+        linear-gradient(180deg, #f7f6ff 0%, #ece9fb 100%);
+}
+
+body[data-theme="beta-ai"] .chat-layout-focus {
+    grid-template-columns: 250px minmax(0, 780px);
+    justify-content: center;
+}
+
+body[data-theme="beta-ai"] .chat-sidebar,
+body[data-theme="beta-ai"] .messages-panel,
+body[data-theme="beta-ai"] .input-shell,
+body[data-theme="beta-ai"] .settings-panel,
+body[data-theme="beta-ai"] .market-shell {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(243, 238, 255, 0.92));
+}
+
+body[data-theme="beta-ai"] .msg {
+    border-radius: 26px;
+}
+
+body[data-theme="beta-ai"] .msg.user {
+    background: linear-gradient(145deg, #5a67ff, #7d4dff);
+    border-bottom-right-radius: 10px;
+}
+
+body[data-theme="beta-ai"] .msg.bot,
+body[data-theme="beta-ai"] .msg.loading {
+    background: linear-gradient(145deg, #ffffff, #f1edff);
+    color: #2e2356;
+    border: 1px solid rgba(90, 103, 255, 0.08);
+    border-bottom-left-radius: 10px;
+}
+
+body[data-theme="confusity"] .chat-layout-focus {
+    grid-template-columns: 330px minmax(0, 1fr);
+}
+
+body[data-theme="confusity"] .messages-panel,
+body[data-theme="confusity"] .input-shell,
+body[data-theme="confusity"] .chat-sidebar,
+body[data-theme="confusity"] .settings-panel,
+body[data-theme="confusity"] .market-shell {
+    background: #ffffff;
+}
+
+body[data-theme="confusity"] .messages-panel {
+    gap: 10px;
+}
+
+body[data-theme="confusity"] .chat-header-focus {
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(17, 24, 39, 0.1);
+}
+
+body[data-theme="confusity"] .chat-item {
+    background: #ffffff;
+    border-color: rgba(17, 24, 39, 0.08);
+    border-radius: 10px;
+}
+
+body[data-theme="confusity"] .chat-item.active {
+    background: #f8fafc;
+    border-color: rgba(2, 132, 199, 0.26);
+}
+
+body[data-theme="confusity"] .chat-item button {
+    background: #f3f4f6;
+    color: #374151;
+    border: 1px solid rgba(17, 24, 39, 0.08);
+}
+
+body[data-theme="confusity"] .session-chip {
+    background: #f8fafc;
+    border-color: rgba(17, 24, 39, 0.08);
+}
+
+body[data-theme="confusity"] .settings-nav,
+body[data-theme="confusity"] .settings-nav-item:not(.active),
+body[data-theme="confusity"] .settings-theme-note {
+    background: #ffffff;
+    border-color: rgba(17, 24, 39, 0.08);
+}
+
+body[data-theme="confusity"] .msg {
+    max-width: 100%;
+    border-radius: 8px;
+    padding: 12px 14px;
+}
+
+body[data-theme="confusity"] .msg.user {
+    background: #f3f4f6;
+    color: #111827;
+    border: 1px solid rgba(17, 24, 39, 0.08);
+}
+
+body[data-theme="confusity"] .msg.bot,
+body[data-theme="confusity"] .msg.loading {
+    background: #ffffff;
+    color: #111827;
+    border: 1px solid rgba(17, 24, 39, 0.12);
+    box-shadow: none;
+}
+
+body[data-theme="confusity"] .msg-header {
+    color: #0369a1;
+    opacity: 1;
+}
+
+body[data-theme="confusity"] .msg-content {
+    gap: 8px;
+}
+
+body[data-theme="confusity"] .msg-content blockquote {
+    border-left-color: #0284c7;
+    color: #334155;
+}
+
+body[data-theme="confusity"] .msg-content a {
+    text-decoration: underline;
+}
+
+body[data-theme="fakegpt"] .settings-nav-item.active {
+    background: linear-gradient(145deg, #10a37f, #0c7c61);
+    color: #f8fffc;
+    border: 1px solid rgba(36, 255, 180, 0.26);
+    box-shadow: 0 0 18px rgba(16, 163, 127, 0.16);
+}
+
+body[data-theme="fraud"] .settings-nav-item.active {
+    background: #b78362;
+    color: #fff9f4;
+    border: 1px solid rgba(84, 62, 43, 0.12);
+}
+
+body[data-theme="germini"] .settings-nav-item.active {
+    background: linear-gradient(145deg, #5a6df0, #a14ae8);
+    color: #f8f7ff;
+    border: 1px solid rgba(255, 255, 255, 0.28);
+    box-shadow: 0 10px 24px rgba(100, 112, 255, 0.2);
+}
+
+body[data-theme="slopilot"] .settings-nav-item.active {
+    background: linear-gradient(145deg, #0d68ff, #4b34d2);
+    color: #f6fbff;
+    border: 1px solid rgba(13, 104, 255, 0.2);
+}
+
+body[data-theme="beta-ai"] .settings-nav-item.active {
+    background: linear-gradient(145deg, #4f46e5, #7d4dff);
+    color: #f8f7ff;
+    border: 1px solid rgba(90, 103, 255, 0.18);
+}
+
+body[data-theme="confusity"] .settings-nav-item.active {
+    background: #111827;
+    color: #f9fafb;
+    border: 1px solid rgba(17, 24, 39, 0.16);
+}
+
+@keyframes gemFloat {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-4px);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes typing {
+    0%, 80%, 100% {
+        transform: scale(0.8);
+        opacity: 0.45;
+    }
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.94);
+    }
+}
+
+@keyframes loadingWave {
+    0%, 100% {
+        height: 10px;
+        opacity: 0.32;
+    }
+    50% {
+        height: 24px;
+        opacity: 1;
+    }
+}
+
+@media (max-width: 1180px) {
+    .auth-card,
+    .chat-layout,
+    .workspace-overview,
+    .persona-market-columns,
+    .settings-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .auth-card {
+        min-height: auto;
+    }
+
+    .chat-card,
+    .chat-layout {
+        min-height: auto;
+    }
+
+    .summary-cards {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .settings-theme-row {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 820px) {
+    body {
+        padding: 14px;
+    }
+
+    .auth-hero,
+    .auth-panel,
+    .chat-card,
+    .market-shell,
+    .settings-shell {
+        padding: 20px;
+    }
+
+    .hero-stats,
+    .summary-cards,
+    .market-preview-details {
+        grid-template-columns: 1fr;
+    }
+
+    .chat-main {
+        grid-template-rows: auto auto auto auto minmax(300px, 1fr) auto auto;
+    }
+
+    .chat-main-focus {
+        grid-template-rows: auto minmax(300px, 1fr) auto auto;
+    }
+
+    .input-container {
+        grid-template-columns: 1fr;
+    }
+
+    #send {
+        width: 100%;
+        height: 52px;
+    }
+
+    .msg {
+        max-width: 100%;
+    }
+
+    .persona-popover {
+        right: auto;
+        left: 0;
+        width: min(92vw, 560px);
+    }
+
+    .hero-theme-switcher {
+        justify-self: stretch;
+    }
+
+    .settings-shell .market-header-simple {
+        grid-template-columns: 1fr;
+    }
+
+    .settings-shell .market-header-actions {
+        justify-content: stretch;
+    }
+
+    .settings-shell .market-header-actions .secondary-action {
+        width: 100%;
+    }
+}
+
+@media (max-width: 560px) {
+    .brand {
+        grid-template-columns: 1fr;
+    }
+
+    .chat-header-actions,
+    .input-meta,
+    .sidebar-header,
+    .market-header,
+    .chat-title-block {
+        align-items: stretch;
+    }
+
+    .chat-header,
+    .chat-title-block {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .chat-header-actions,
+    .market-header-actions,
+    .persona-item-actions,
+    .persona-section-actions,
+    .chat-toolbar {
+        display: grid;
+        grid-template-columns: 1fr;
+    }
+
+    .chat-toolbar .icon-button,
+    .chat-header-actions .secondary-action,
+    .chat-header-actions .model-select select {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .context-pill {
+        min-width: 0;
+        width: 100%;
+    }
 }
diff --git a/server.js b/server.js
index 6ba52f6..573357c 100644
--- a/server.js
+++ b/server.js
@@ -298,6 +298,8 @@ db.prepare(`
 
 const insertUserStmt = db.prepare("INSERT INTO users (username, password) VALUES (?, ?)");
 const getUserStmt = db.prepare("SELECT username, password FROM users WHERE username = ?");
+const updateUsernameStmt = db.prepare("UPDATE users SET username = ? WHERE username = ?");
+const updatePasswordStmt = db.prepare("UPDATE users SET password = ? WHERE username = ?");
 const getLegacyChatsStmt = db.prepare(`
     SELECT role, content
     FROM chats
@@ -529,6 +531,71 @@ const listPublishedPersonaIdsStmt = db.prepare(`
     WHERE creator_username = ?
 `);
 
+const getChatMessageCountForUserStmt = db.prepare(`
+    SELECT COUNT(*) as count
+    FROM chat_messages cm
+             JOIN chat_sessions cs ON cs.id = cm.chat_id
+    WHERE cs.username = ?
+`);
+
+const getPersonaCountForUserStmt = db.prepare(`
+    SELECT COUNT(*) as count
+    FROM personas
+    WHERE username = ?
+`);
+
+const getPublishedPersonaCountForUserStmt = db.prepare(`
+    SELECT COUNT(*) as count
+    FROM persona_market
+    WHERE creator_username = ?
+`);
+
+const updateLegacyChatsUsernameStmt = db.prepare(`
+    UPDATE chats
+    SET username = ?
+    WHERE username = ?
+`);
+
+const updateChatSessionsUsernameStmt = db.prepare(`
+    UPDATE chat_sessions
+    SET username = ?
+    WHERE username = ?
+`);
+
+const updatePersonasUsernameStmt = db.prepare(`
+    UPDATE personas
+    SET username = ?
+    WHERE username = ?
+`);
+
+const updatePersonasSourceCreatorStmt = db.prepare(`
+    UPDATE personas
+    SET source_creator_username = ?
+    WHERE source_creator_username = ?
+`);
+
+const updateUserSettingsUsernameStmt = db.prepare(`
+    UPDATE user_settings
+    SET username = ?
+    WHERE username = ?
+`);
+
+const updatePersonaMarketCreatorStmt = db.prepare(`
+    UPDATE persona_market
+    SET creator_username = ?
+    WHERE creator_username = ?
+`);
+
+const renameUserTransaction = db.transaction((currentUsername, nextUsername) => {
+    updateUsernameStmt.run(nextUsername, currentUsername);
+    updateLegacyChatsUsernameStmt.run(nextUsername, currentUsername);
+    updateChatSessionsUsernameStmt.run(nextUsername, currentUsername);
+    updatePersonasUsernameStmt.run(nextUsername, currentUsername);
+    updatePersonasSourceCreatorStmt.run(nextUsername, currentUsername);
+    updateUserSettingsUsernameStmt.run(nextUsername, currentUsername);
+    updatePersonaMarketCreatorStmt.run(nextUsername, currentUsername);
+});
+
 const deleteMarketPersonaByPersonaIdStmt = db.prepare(`
     DELETE FROM persona_market
     WHERE persona_id = ?
@@ -640,6 +707,76 @@ app.post("/logout", (req, res) => {
     req.session.destroy(() => res.json({message: "Logged out"}));
 });
 
+const requireLogin = (req, res, next) => {
+    if (!req.session.user) return res.status(403).json({error: "Not logged in"});
+    next();
+};
+
+app.get("/settings/profile", requireLogin, (req, res) => {
+    const user = getUserStmt.get(req.session.user);
+    if (!user) return res.status(404).json({error: "User not found"});
+    res.json({username: user.username});
+});
+
+app.put("/settings/username", requireLogin, async (req, res) => {
+    const currentUsername = req.session.user;
+    const nextUsername = (req.body?.username || "").trim();
+    const password = req.body?.password || "";
+
+    if (!nextUsername) {
+        return res.status(400).json({error: "New username is required"});
+    }
+    if (nextUsername.length < 3) {
+        return res.status(400).json({error: "Username must be at least 3 characters"});
+    }
+    if (nextUsername === currentUsername) {
+        return res.status(400).json({error: "That is already your username"});
+    }
+
+    const currentUser = getUserStmt.get(currentUsername);
+    if (!currentUser) {
+        return res.status(404).json({error: "User not found"});
+    }
+    const valid = await bcrypt.compare(password, currentUser.password);
+    if (!valid) {
+        return res.status(403).json({error: "Current password is incorrect"});
+    }
+
+    if (getUserStmt.get(nextUsername)) {
+        return res.status(400).json({error: "Username already exists"});
+    }
+
+    renameUserTransaction(currentUsername, nextUsername);
+    req.session.user = nextUsername;
+    res.json({username: nextUsername});
+});
+
+app.put("/settings/password", requireLogin, async (req, res) => {
+    const username = req.session.user;
+    const currentPassword = req.body?.currentPassword || "";
+    const nextPassword = req.body?.newPassword || "";
+
+    if (!currentPassword || !nextPassword) {
+        return res.status(400).json({error: "Current and new password are required"});
+    }
+    if (nextPassword.length < 6) {
+        return res.status(400).json({error: "New password must be at least 6 characters"});
+    }
+
+    const user = getUserStmt.get(username);
+    if (!user) {
+        return res.status(404).json({error: "User not found"});
+    }
+    const valid = await bcrypt.compare(currentPassword, user.password);
+    if (!valid) {
+        return res.status(403).json({error: "Current password is incorrect"});
+    }
+
+    const hashed = await bcrypt.hash(nextPassword, 10);
+    updatePasswordStmt.run(hashed, username);
+    res.json({message: "Password updated"});
+});
+
 const normalizePersonaField = (value) => {
     const trimmed = (value || "").trim();
     return trimmed ? trimmed : null;
@@ -683,11 +820,6 @@ const buildUserPersonaPrompt = (persona) => {
     return lines.join("\n");
 };
 
-const requireLogin = (req, res, next) => {
-    if (!req.session.user) return res.status(403).json({error: "Not logged in"});
-    next();
-};
-
 app.get("/models", async (req, res) => {
     try {
         if (modelsCache && (Date.now() - modelsCacheAt) < MODELS_TTL_MS) {
@@ -898,6 +1030,26 @@ app.get("/personas/market", requireLogin, (req, res) => {
     res.json({personas});
 });
 
+app.get("/dashboard/summary", requireLogin, (req, res) => {
+    const user = req.session.user;
+    const chats = countChatSessionsStmt.get(user).count;
+    const messages = getChatMessageCountForUserStmt.get(user).count;
+    const personas = getPersonaCountForUserStmt.get(user).count;
+    const published = getPublishedPersonaCountForUserStmt.get(user).count;
+    const marketPersonas = listMarketPersonasStmt.all().length;
+
+    res.json({
+        username: user,
+        stats: {
+            chats,
+            messages,
+            personas,
+            published,
+            marketPersonas
+        }
+    });
+});
+
 app.post("/personas/:id/publish", requireLogin, (req, res) => {
     const user = req.session.user;
     const personaId = Number(req.params.id);
@@ -1090,6 +1242,14 @@ app.get("/chat/history", requireLogin, (req, res) => {
     res.json({history: chats});
 });
 
+app.get("/market", (req, res) => {
+    res.sendFile(path.resolve("public/market.html"));
+});
+
+app.get("/settings", (req, res) => {
+    res.sendFile(path.resolve("public/settings.html"));
+});
+
 app.get("/", (req, res) => {
     res.sendFile(path.resolve("public/index.html"));
 });