Revamp authentication screens

public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8"/>
@@ -6,16 +6,53 @@
     <link rel="stylesheet" href="style.css"/>
 </head>
 <body>
+<div class="app-shell">
     <div id="auth" class="card">
+        <div class="brand">
+            <div class="logo">DF</div>
+            <div>
+                <p class="eyebrow">Secure AI Access</p>
                 <h1>Welcome to DeepFake</h1>
-    <input id="username" placeholder="Username" autocomplete="username"/>
+                <p class="subtitle">Log in to continue your conversation or create an account to get started.</p>
-    <input id="password" type="password" placeholder="Password" autocomplete="current-password"/>
-    <div class="auth-buttons">
-        <button id="login">Login</button>
-        <button id="register">Register</button>
             </div>
-    <p id="authMsg"></p>
         </div>
+
+        <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="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>
+                <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-header">
             <div class="model-select">
@@ -35,6 +72,7 @@
             <button id="logout">Logout</button>
         </div>
     </div>
+</div>
 <script src="script.js"></script>
 </body>
 </html>

public/script.js

@@ -2,12 +2,19 @@ const authDiv = document.getElementById("auth");
 const chatDiv = document.getElementById("chat");
 const authMsg = document.getElementById("authMsg");
 const messagesDiv = document.getElementById("messages");
-const usernameInput = document.getElementById("username");
+
-const passwordInput = document.getElementById("password");
+const loginForm = document.getElementById("loginForm");
-const loginBtn = document.getElementById("login");
+const registerForm = document.getElementById("registerForm");
-const registerBtn = document.getElementById("register");
+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");
 
 let isProcessing = false;
 let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [];
@@ -18,7 +25,6 @@ const displayModels = async () => {
     fetch("/models")
         .then(response => response.json())
         .then(data => {
-            // Clear loading option
             select.innerHTML = "";
 
             data.models.forEach(model => {
@@ -56,9 +62,9 @@ async function get(url) {
     }
 }
 
-function setAuthMessage(msg, isError = false) {
+function setAuthMessage(msg, state = "") {
     authMsg.textContent = msg;
-    authMsg.className = isError ? 'error' : 'success';
+    authMsg.className = state ? `status ${state}` : 'status';
 }
 
 function addMessage(content, isUser = false, isLoading = false, saveToHistory = true) {
@@ -76,7 +82,6 @@ function addMessage(content, isUser = false, isLoading = false, saveToHistory =
     } else {
         msgDiv.textContent = content;
 
-        // Save to history (but not loading messages)
         if (saveToHistory) {
             chatHistory.push({
                 content: content,
@@ -89,7 +94,6 @@ function addMessage(content, isUser = false, isLoading = false, saveToHistory =
 
     messagesDiv.appendChild(msgDiv);
 
-    // Smooth scroll to bottom
     setTimeout(() => {
         messagesDiv.scrollTop = messagesDiv.scrollHeight;
     }, 100);
@@ -117,13 +121,23 @@ function setLoadingState(loading) {
 
     if (loading) {
         sendBtn.classList.add('loading');
-        msgInput.placeholder = "Verarbeite Antwort...";
+        msgInput.placeholder = "Processing response...";
     } else {
         sendBtn.classList.remove('loading');
         msgInput.placeholder = "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('', '');
+}
+
 async function checkSession() {
     const res = await get('/session');
     if (res.user) {
@@ -152,33 +166,36 @@ async function loadServerChat() {
     }
 }
 
-async function handleAuth(endpoint) {
+async function handleAuth(endpoint, credentials) {
-    const username = usernameInput.value.trim();
+    const { username, password } = credentials;
-    const password = passwordInput.value.trim();
+    const submitBtn = endpoint === "login" ? loginSubmit : registerSubmit;
+
     if (!username || !password) {
-        setAuthMessage("Please enter both username and password.", true);
+        setAuthMessage("Please enter both username and password.", 'error');
         return;
     }
-    loginBtn.disabled = true;
+
-    registerBtn.disabled = true;
+    submitBtn.disabled = true;
-    setAuthMessage("Processing...", false);
+    setAuthMessage("Processing...", '');
 
     const res = await post(`/${endpoint}`, {username, password});
 
-    loginBtn.disabled = false;
+    submitBtn.disabled = false;
-    registerBtn.disabled = false;
 
     if (res.error) {
-        setAuthMessage(res.error, true);
+        setAuthMessage(res.error, 'error');
     } else {
         if (endpoint === "login") {
-            setAuthMessage("Login successful!", false);
+            setAuthMessage("Login successful! Redirecting to chat...", 'success');
             authDiv.style.display = "none";
             chatDiv.style.display = "grid";
             await loadServerChat();
             msgInput.focus();
         } else {
-            setAuthMessage("Registration successful — you can now log in!", false);
+            setAuthMessage("Registration successful — you can now log in!", 'success');
+            showAuthScreen('login');
+            loginUsernameInput.value = username;
+            loginPasswordInput.focus();
         }
     }
 }
@@ -214,11 +231,24 @@ async function sendMessage() {
     }
 }
 
-loginBtn.onclick = () => handleAuth("login");
+toggleButtons.forEach(btn => {
-registerBtn.onclick = () => handleAuth("register");
+    btn.addEventListener('click', () => showAuthScreen(btn.dataset.target));
+});
 
-passwordInput.addEventListener("keydown", (e) => {
+loginForm.addEventListener('submit', (e) => {
-    if (e.key === "Enter") handleAuth("login");
+    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 () => {
@@ -226,9 +256,10 @@ document.getElementById("logout").onclick = async () => {
     chatDiv.style.display = "none";
     authDiv.style.display = "grid";
     clearChatHistory();
-    setAuthMessage("Logged out.", false);
+    setAuthMessage("Logged out.", 'success');
-    usernameInput.value = "";
+    showAuthScreen('login');
-    passwordInput.value = "";
+    loginUsernameInput.value = "";
+    loginPasswordInput.value = "";
 };
 
 sendBtn.onclick = sendMessage;
@@ -252,5 +283,5 @@ msgInput.addEventListener('input', function () {
 
 window.addEventListener('load', () => {
     checkSession();
-    displayModels()
+    displayModels();
 });

public/style.css

@@ -1,18 +1,18 @@
-:root {
+:root {
-    --bg-dark: #0a0a0f;
+    --bg-dark: #050513;
-    --bg-panel: #1a1a2e;
+    --bg-panel: #13132a;
     --bg-message-user: #2563eb;
-    --bg-message-bot: #374151;
+    --bg-message-bot: #1f2937;
-    --accent: #3b82f6;
+    --accent: #6366f1;
-    --accent-hover: #2563eb;
+    --accent-hover: #7c3aed;
-    --text-primary: #f8fafc;
+    --text-primary: #e5e7eb;
-    --text-secondary: #94a3b8;
+    --text-secondary: #9ca3af;
-    --text-muted: #64748b;
+    --text-muted: #6b7280;
-    --border: #334155;
+    --border: #2f3342;
     --error: #ef4444;
     --success: #22c55e;
-    --shadow: rgba(0, 0, 0, 0.3);
+    --shadow: rgba(0, 0, 0, 0.35);
-    --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
 }
 
 html, body {
@@ -24,13 +24,36 @@ html, body {
     box-sizing: border-box;
 }
 
+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;
+}
+
 .card {
-    background: rgba(26, 26, 46, 0.9);
+    background: rgba(19, 19, 42, 0.92);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.06);
     border-radius: 24px;
-    box-shadow: 0 25px 50px -12px var(--shadow),
+    box-shadow: 0 25px 60px -12px var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.04);
-    0 0 0 1px rgba(255, 255, 255, 0.05);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
@@ -40,37 +63,213 @@ html, body {
 .card::before {
     content: '';
     position: absolute;
-    top: 0;
+    inset: 0;
-    left: 0;
+    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05));
-    right: 0;
+    opacity: 0.5;
-    height: 1px;
+    pointer-events: none;
-    opacity: 0.6;
 }
 
 #auth {
-    padding: 40px 35px;
+    padding: 36px;
-    width: 420px;
+    width: 520px;
-    max-width: 90vw;
+    max-width: 95vw;
+    display: grid;
+    gap: 18px;
 }
 
 #auth:hover {
     transform: translateY(-4px);
-    box-shadow: 0 35px 60px -12px var(--shadow),
+    box-shadow: 0 35px 60px -12px var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.08);
-    0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 
-body {
+.brand {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
+    display: grid;
-    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%) fixed;
+    grid-template-columns: auto 1fr;
-    color: var(--text-primary);
+    gap: 16px;
-    display: flex;
+    align-items: center;
-    justify-content: center;
+}
-    align-items: stretch;
+
-    height: 100vh;
+.logo {
-    overflow: hidden;
+    width: 52px;
+    height: 52px;
+    border-radius: 16px;
+    background: var(--gradient);
+    display: grid;
+    place-items: center;
+    color: white;
+    font-weight: 800;
+    letter-spacing: 1px;
+    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.35);
+}
+
+.eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    font-size: 11px;
+    color: var(--text-secondary);
     margin: 0;
-    padding: 20px;
+}
-    min-height: 0;
+
+.subtitle {
+    margin: 6px 0 0;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+h1 {
+    margin: 4px 0 2px;
+    color: var(--text-primary);
+    font-size: 1.9rem;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+}
+
+.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;
+}
+
+.toggle {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    padding: 12px 14px;
+    border-radius: 10px;
+    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);
+}
+
+.auth-screen {
+    display: none;
+    animation: fadeIn 0.35s ease;
+}
+
+.auth-screen.active {
+    display: block;
+}
+
+.auth-form {
+    display: grid;
+    gap: 14px;
+}
+
+.field {
+    display: grid;
+    gap: 6px;
+}
+
+.field span {
+    font-size: 14px;
+    color: var(--text-secondary);
+    letter-spacing: 0.01em;
+}
+
+input, textarea {
+    width: 100%;
+    margin: 0;
+    padding: 14px 16px;
+    border: 2px solid transparent;
+    background: rgba(10, 10, 20, 0.85);
+    border-radius: 14px;
+    color: var(--text-primary);
+    outline: none;
+    font-size: 16px;
+    font-family: inherit;
+    transition: all 0.25s ease;
+    backdrop-filter: blur(10px);
+    resize: none;
+}
+
+input::placeholder, textarea::placeholder {
+    color: var(--text-muted);
+}
+
+input:focus, textarea: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;
+}
+
+.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);
+}
+
+.status.error {
+    color: var(--error);
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.status.success {
+    color: var(--success);
+    background: rgba(34, 197, 94, 0.12);
+    border: 1px solid rgba(34, 197, 94, 0.2);
 }
 
 #chat {
@@ -79,9 +278,9 @@ body {
     row-gap: 15px;
     height: 90vh;
     width: 90%;
-    max-width: 95vw;
+    max-width: 1100px;
-    padding: 25px;
+    padding: 24px;
-    background: rgba(26,26,46,0.9);
+    background: rgba(19,19,42,0.92);
     border-radius: 24px;
     box-shadow: 0 25px 50px -12px var(--shadow);
     min-height: 0;
@@ -90,13 +289,12 @@ body {
 #messages {
     grid-row: 1;
     overflow-y: auto;
-    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     gap: 16px;
     padding: 20px;
     margin: 0;
-    background: rgba(15,15,35,0.6);
+    background: rgba(10,10,20,0.6);
     border: 1px solid rgba(255,255,255,0.05);
     border-radius: 20px;
     backdrop-filter: blur(10px);
@@ -119,18 +317,9 @@ body {
     margin-top: 10px;
 }
 
-#messages::-webkit-scrollbar {
+#messages::-webkit-scrollbar { width: 8px; }
-    width: 8px;
+#messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-}
+#messages::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
-
-#messages::-webkit-scrollbar-thumb {
-    background: var(--border);
-    border-radius: 4px;
-}
-
-#messages::-webkit-scrollbar-thumb:hover {
-    background: var(--text-muted);
-}
 
 #chat h1 {
     flex-shrink: 0;
@@ -140,94 +329,12 @@ body {
     justify-content: center;
 }
 
-h1 {
-    margin: 0 0 30px;
-    color: var(--text-primary);
-    font-size: 2rem;
-    font-weight: 700;
-    text-align: center;
-    background: var(--gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    letter-spacing: -0.02em;
-}
-
-input, textarea {
-    width: 100%;
-    margin: 0 0 20px;
-    padding: 16px 20px;
-    border: 2px solid transparent;
-    background: rgba(15, 15, 35, 0.8);
-    border-radius: 16px;
-    color: var(--text-primary);
-    outline: none;
-    font-size: 16px;
-    font-family: inherit;
-    transition: all 0.3s ease;
-    backdrop-filter: blur(10px);
-    resize: none;
-}
-
-input::placeholder, textarea::placeholder {
-    color: var(--text-muted);
-}
-
-input:focus, textarea:focus {
-    border-color: var(--accent);
-    background: rgba(15, 15, 35, 1);
-    transform: translateY(-1px);
-    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
-}
-
-button {
-    background: var(--accent);
-    color: white;
-    padding: 14px 24px;
-    border: none;
-    border-radius: 12px;
-    cursor: pointer;
-    font-weight: 600;
-    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(59, 130, 246, 0.3);
-}
-
-button:hover::before {
-    left: 100%;
-}
-
-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    transform: none;
-}
-
 .msg {
     padding: 16px 20px;
     border-radius: 18px;
     line-height: 1.5;
     max-width: 80%;
     word-wrap: break-word;
-    word-break: break-word;
     overflow-wrap: break-word;
     animation: fadeIn 0.3s ease;
     position: relative;
@@ -237,14 +344,8 @@ button:disabled {
 }
 
 @keyframes fadeIn {
-    from {
+    from { opacity: 0; transform: translateY(10px); }
-        opacity: 0;
+    to { opacity: 1; transform: translateY(0); }
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
 }
 
 .msg.user {
@@ -263,20 +364,6 @@ button:disabled {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.msg.user::before {
-    position: absolute;
-    right: -40px;
-    top: 16px;
-    font-size: 18px;
-}
-
-.msg.bot::before {
-    position: absolute;
-    left: -40px;
-    top: 16px;
-    font-size: 18px;
-}
-
 .msg.loading {
     background: var(--bg-message-bot);
     color: var(--text-primary);
@@ -290,60 +377,13 @@ button:disabled {
     justify-content: center;
 }
 
-.typing-indicator {
+.typing-indicator { display: flex; align-items: center; gap: 6px; height: 16px; }
-    display: flex;
+.typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); animation: typingAnimation 1.2s infinite ease-in-out; }
-    align-items: center;
+.typing-dot:nth-child(1) { animation-delay: -0.32s; }
-    gap: 6px;
+.typing-dot:nth-child(2) { animation-delay: -0.16s; }
-    height: 16px;
-}
-
-.typing-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--text-secondary);
-    animation: typingAnimation 1.2s infinite ease-in-out;
-}
-
-.typing-dot:nth-child(1) {
-    animation-delay: -0.32s;
-}
-
-.typing-dot:nth-child(2) {
-    animation-delay: -0.16s;
-}
-
 @keyframes typingAnimation {
-    0%, 80%, 100% {
+    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
-        transform: scale(0.8);
+    40% { transform: scale(1); opacity: 1; }
-        opacity: 0.5;
-    }
-    40% {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-#authMsg {
-    margin-top: 15px;
-    font-size: 14px;
-    text-align: center;
-    min-height: 20px;
-    padding: 10px;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-}
-
-#authMsg.error {
-    color: var(--error);
-    background: rgba(239, 68, 68, 0.1);
-    border: 1px solid rgba(239, 68, 68, 0.2);
-}
-
-#authMsg.success {
-    color: var(--success);
-    background: rgba(34, 197, 94, 0.1);
-    border: 1px solid rgba(34, 197, 94, 0.2);
 }
 
 #msgInput {
@@ -369,125 +409,34 @@ button:disabled {
     flex-shrink: 0;
 }
 
-#send::after {
+#send::after { content: "➤"; font-weight: bold; }
-    content: "➤";
+#send.loading::after { content: ''; }
-    font-weight: bold;
+#send.loading { animation: spin 1s linear infinite; }
-}
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 
-#send.loading::after {
+#logout { background: linear-gradient(135deg, #6b7280, #4b5563); border-radius: 12px; }
-    content: '';
-}
 
-#send.loading {
+.auth-buttons, .logout-container { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
-    animation: spin 1s linear infinite;
+.chat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
-}
+.model-select { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); }
+.model-select select { background: rgba(15, 15, 35, 0.8); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 14px; outline: none; transition: all 0.2s ease; }
+.model-select select:hover, .model-select select:focus { border-color: var(--accent); background: rgba(15, 15, 35, 1); }
 
-@keyframes spin {
+@media (max-width: 1100px) {
-    from {
+    .app-shell { flex-direction: column; align-items: center; }
-        transform: rotate(0deg);
+    #chat { width: 95vw; height: 80vh; }
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-#logout {
-    background: linear-gradient(135deg, #6b7280, #4b5563);
-    border-radius: 12px;
-}
-
-.auth-buttons {
-    display: flex;
-    gap: 12px;
-    justify-content: center;
-    margin-top: 20px;
-}
-
-.logout-container {
-    text-align: center;
-    margin-top: 15px;
-    flex-shrink: 0;
-}
-
-.chat-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 15px;
-}
-
-.model-select {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    color: var(--text-secondary);
-}
-
-.model-select select {
-    background: rgba(15, 15, 35, 0.8);
-    color: var(--text-primary);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 6px 10px;
-    font-size: 14px;
-    outline: none;
-    transition: all 0.2s ease;
-}
-
-.model-select select:hover,
-.model-select select:focus {
-    border-color: var(--accent);
-    background: rgba(15, 15, 35, 1);
 }
 
 @media (max-width: 768px) {
-    #chat {
+    body { padding: 16px; }
-        width: 95vw;
+    #chat { width: 95vw; height: 85vh; padding: 16px; }
-        height: 95vh;
+    #auth { width: 95vw; padding: 28px; }
-        max-height: 95vh;
+    h1 { font-size: 1.6rem; }
-        padding: 15px;
-    }
-
-    #auth {
-        width: 95vw;
-        padding: 30px 20px;
-    }
-
-    .msg {
-        max-width: 85%;
-    }
-
-    .msg.user::before {
-        right: -35px;
-        font-size: 16px;
-    }
-
-    .msg.bot::before {
-        left: -35px;
-        font-size: 16px;
-    }
-
-    h1 {
-        font-size: 1.8rem;
-    }
 }
 
 @media (max-width: 480px) {
-    .msg {
+    .brand { grid-template-columns: 1fr; }
-        max-width: 90%;
+    .logo { width: 48px; height: 48px; }
-    }
+    #chat { padding: 12px; }
-
+    #messages { padding: 14px; }
-    .msg.user::before,
-    .msg.bot::before {
-        display: none;
-    }
-
-    #chat {
-        padding: 10px;
-    }
-
-    #messages {
-        padding: 15px;
-    }
 }