style: Add colorful vibrant UI with hot air balloon theme

- Gradient backgrounds with coral, teal, yellow, lavender colors
- Floating balloon decorations
- Neural network node animations
- Colorful buttons and badges
- Vibrant message bubbles
- Beautiful sidebar with glowing effects
- Updated login page with colorful design

frontend/src/app.css

@@ -1,233 +1,463 @@
-/* CSS Variables - Dark Theme */
 :root {
-	--primary: #6366f1;
+  /* Vibrant Color Palette - Hot Air Balloon Theme */
-	--primary-hover: #818cf8;
+  --primary: #FF6B6B;           /* Coral Red */
-	--background: #0f172a;
+  --primary-hover: #FF5252;
-	--surface: #1e293b;
+  --secondary: #4ECDC4;          /* Teal */
-	--surface-hover: #334155;
+  --accent-1: #FFE66D;           /* Sunny Yellow */
-	--text: #f1f5f9;
+  --accent-2: #95E1D3;           /* Mint */
-	--text-muted: #94a3b8;
+  --accent-3: #F38181;           /* Salmon */
-	--border: #334155;
+  --accent-4: #AA96DA;           /* Lavender */
-	--error: #ef4444;
+  --accent-5: #FCBAD3;           /* Pink */
-	--success: #22c55e;
+  --accent-6: #A8D8EA;           /* Sky Blue */
-	--warning: #f59e0b;
+  --accent-7: #FF9F43;           /* Orange */
+  --accent-8: #5F27CD;           /* Purple */
+
+  /* Gradients */
+  --gradient-sunset: linear-gradient(135deg, #FF6B6B 0%, #FFE66D 50%, #95E1D3 100%);
+  --gradient-balloon: linear-gradient(135deg, #FF6B6B 0%, #FCBAD3 50%, #AA96DA 100%);
+  --gradient-sky: linear-gradient(135deg, #A8D8EA 0%, #95E1D3 50%, #FFE66D 100%);
+  --gradient-aurora: linear-gradient(135deg, #5F27CD 0%, #4ECDC4 50%, #FFE66D 100%);
+
+  /* Background */
+  --background: #1A1A2E;         /* Deep Space */
+  --background-light: #16213E;
+  --surface: #0F3460;            /* Ocean Blue */
+  --surface-hover: #1A4B8C;
+  --surface-card: rgba(15, 52, 96, 0.8);
+  --border: rgba(78, 205, 196, 0.3);
+  --border-bright: #4ECDC4;
+
+  /* Text */
+  --text: #F7F7F7;
+  --text-muted: #B8B8D1;
+  --text-bright: #FFFFFF;
+
+  /* Status Colors */
+  --success: #95E1D3;
+  --danger: #FF6B6B;
+  --warning: #FFE66D;
+  --info: #A8D8EA;
+
+  /* Layout */
+  --sidebar-width: 280px;
+  --header-height: 70px;
+
+  /* Shadows */
+  --shadow-glow: 0 0 30px rgba(78, 205, 196, 0.3);
+  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
+  --shadow-button: 0 4px 15px rgba(255, 107, 107, 0.4);
 }
 
-/* Reset & Base */
+* {
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
-html,
+html, body {
-body {
   height: 100%;
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
-	background-color: var(--background);
+  background: var(--background);
+  background-image:
+    radial-gradient(circle at 20% 80%, rgba(170, 150, 218, 0.15) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(78, 205, 196, 0.15) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(255, 107, 107, 0.1) 0%, transparent 40%);
   color: var(--text);
-	line-height: 1.5;
+  line-height: 1.6;
+  overflow-x: hidden;
 }
 
 a {
-	color: var(--primary);
+  color: var(--secondary);
   text-decoration: none;
+  transition: all 0.3s ease;
 }
 
 a:hover {
-	color: var(--primary-hover);
+  color: var(--accent-1);
+  text-shadow: 0 0 10px rgba(255, 230, 109, 0.5);
 }
 
-/* Utility Classes */
+button {
+  cursor: pointer;
+  font-family: inherit;
+  border: none;
+  outline: none;
+}
+
+input, textarea, select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--gradient-sunset);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--gradient-balloon);
+}
+
+/* ============ BUTTONS ============ */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-	padding: 0.625rem 1.25rem;
+  padding: 0.75rem 1.5rem;
-	font-size: 0.875rem;
+  font-size: 0.9rem;
-	font-weight: 500;
+  font-weight: 600;
-	border-radius: 0.5rem;
+  border-radius: 50px;
   border: none;
-	cursor: pointer;
+  transition: all 0.3s ease;
-	transition: all 0.15s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .btn-primary {
-	background-color: var(--primary);
+  background: var(--gradient-sunset);
-	color: white;
+  color: var(--background);
+  box-shadow: var(--shadow-button);
 }
 
 .btn-primary:hover {
-	background-color: var(--primary-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
 }
 
 .btn-secondary {
-	background-color: var(--surface);
+  background: transparent;
-	color: var(--text);
+  color: var(--secondary);
-	border: 1px solid var(--border);
+  border: 2px solid var(--secondary);
+  box-shadow: 0 0 15px rgba(78, 205, 196, 0.2);
 }
 
 .btn-secondary:hover {
-	background-color: var(--surface-hover);
+  background: var(--secondary);
+  color: var(--background);
+  box-shadow: 0 0 25px rgba(78, 205, 196, 0.4);
 }
 
 .btn-danger {
-	background-color: var(--error);
+  background: linear-gradient(135deg, #FF6B6B, #F38181);
   color: white;
+  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
 }
 
 .btn-danger:hover {
-	background-color: #dc2626;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
 }
 
 .btn-sm {
-	padding: 0.375rem 0.75rem;
+  padding: 0.5rem 1rem;
   font-size: 0.75rem;
 }
 
-.btn:disabled {
+.btn-icon {
-	opacity: 0.5;
+  padding: 0.75rem;
-	cursor: not-allowed;
+  min-width: 48px;
+  border-radius: 50%;
 }
 
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+/* ============ INPUTS ============ */
 .input {
   width: 100%;
-	padding: 0.625rem 0.875rem;
+  padding: 1rem 1.25rem;
-	font-size: 0.875rem;
+  background: rgba(22, 33, 62, 0.8);
-	background-color: var(--surface);
+  border: 2px solid transparent;
-	border: 1px solid var(--border);
+  border-radius: 15px;
-	border-radius: 0.5rem;
   color: var(--text);
-	transition: border-color 0.15s ease;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
 }
 
 .input:focus {
   outline: none;
-	border-color: var(--primary);
+  border-color: var(--secondary);
+  box-shadow: 0 0 20px rgba(78, 205, 196, 0.3);
+  background: rgba(22, 33, 62, 1);
 }
 
 .input::placeholder {
   color: var(--text-muted);
 }
 
-.card {
+.label {
-	background-color: var(--surface);
-	border: 1px solid var(--border);
-	border-radius: 0.75rem;
-	padding: 1.5rem;
-}
-
-.form-group {
-	margin-bottom: 1rem;
-}
-
-.form-group label {
   display: block;
   margin-bottom: 0.5rem;
   font-size: 0.875rem;
-	font-weight: 500;
+  font-weight: 600;
-	color: var(--text-muted);
+  color: var(--secondary);
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
-.error-message {
+/* ============ CARDS ============ */
-	color: var(--error);
+.card {
-	font-size: 0.875rem;
+  background: var(--surface-card);
-	margin-top: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 1.5rem;
+  backdrop-filter: blur(20px);
+  box-shadow: var(--shadow-card);
+  transition: all 0.3s ease;
 }
 
-.success-message {
+.card:hover {
-	color: var(--success);
+  border-color: var(--border-bright);
-	font-size: 0.875rem;
+  box-shadow: var(--shadow-glow);
-	margin-top: 0.5rem;
 }
 
-/* Scrollbar */
+.form-group {
-::-webkit-scrollbar {
+  margin-bottom: 1.25rem;
-	width: 8px;
-	height: 8px;
 }
 
-::-webkit-scrollbar-track {
+/* ============ TABS ============ */
-	background: var(--background);
-}
-
-::-webkit-scrollbar-thumb {
-	background: var(--border);
-	border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background: var(--surface-hover);
-}
-
-/* Code blocks */
-pre {
-	background-color: var(--background);
-	padding: 1rem;
-	border-radius: 0.5rem;
-	overflow-x: auto;
-	font-size: 0.875rem;
-}
-
-code {
-	font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
-	font-size: 0.875rem;
-}
-
-/* Tabs */
 .tabs {
   display: flex;
   gap: 0.5rem;
-	border-bottom: 1px solid var(--border);
   margin-bottom: 1.5rem;
+  padding: 0.5rem;
+  background: var(--surface);
+  border-radius: 50px;
+  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
 .tab {
   padding: 0.75rem 1.5rem;
-	font-size: 0.875rem;
+  background: transparent;
-	font-weight: 500;
-	color: var(--text-muted);
-	background: none;
   border: none;
+  border-radius: 50px;
+  color: var(--text-muted);
+  font-weight: 600;
   cursor: pointer;
-	transition: all 0.15s ease;
+  transition: all 0.3s ease;
-	border-bottom: 2px solid transparent;
-	margin-bottom: -1px;
 }
 
 .tab:hover {
   color: var(--text);
+  background: rgba(78, 205, 196, 0.1);
 }
 
 .tab.active {
-	color: var(--primary);
+  background: var(--gradient-sunset);
-	border-bottom-color: var(--primary);
+  color: var(--background);
+  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
 }
 
-/* Table */
+/* ============ BADGES ============ */
-.table {
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.375rem 0.875rem;
+  border-radius: 50px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.badge.admin {
+  background: var(--gradient-balloon);
+  color: white;
+}
+
+.badge.active {
+  background: linear-gradient(135deg, #95E1D3, #4ECDC4);
+  color: var(--background);
+}
+
+.badge.inactive {
+  background: linear-gradient(135deg, #FF6B6B, #F38181);
+  color: white;
+}
+
+.badge.default {
+  background: linear-gradient(135deg, #FFE66D, #FF9F43);
+  color: var(--background);
+}
+
+/* ============ TABLES ============ */
+.data-table {
   width: 100%;
-	border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 
-.table th,
+.data-table th,
-.table td {
+.data-table td {
-	padding: 0.75rem 1rem;
+  padding: 1rem 1.25rem;
   text-align: left;
+}
+
+.data-table th {
+  background: var(--background-light);
+  font-weight: 700;
+  color: var(--secondary);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border-bottom: 2px solid var(--border);
+}
+
+.data-table tr {
+  transition: all 0.3s ease;
+}
+
+.data-table tbody tr:hover {
+  background: rgba(78, 205, 196, 0.05);
+}
+
+.data-table td {
   border-bottom: 1px solid var(--border);
 }
 
-.table th {
+/* ============ ANIMATIONS ============ */
-	font-weight: 600;
+@keyframes float {
-	color: var(--text-muted);
+  0%, 100% { transform: translateY(0px); }
-	font-size: 0.75rem;
+  50% { transform: translateY(-10px); }
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
 }
 
-.table tbody tr:hover {
+@keyframes pulse-glow {
-	background-color: var(--background);
+  0%, 100% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.3); }
+  50% { box-shadow: 0 0 40px rgba(78, 205, 196, 0.6); }
+}
+
+@keyframes gradient-shift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ============ MARKDOWN CONTENT ============ */
+.markdown-content {
+  line-height: 1.8;
+}
+
+.markdown-content p {
+  margin-bottom: 1rem;
+}
+
+.markdown-content code {
+  background: var(--background);
+  padding: 0.25rem 0.5rem;
+  border-radius: 6px;
+  font-size: 0.9em;
+  color: var(--accent-1);
+  border: 1px solid var(--border);
+}
+
+.markdown-content pre {
+  background: var(--background);
+  padding: 1.25rem;
+  border-radius: 15px;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border);
+  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.markdown-content pre code {
+  background: none;
+  padding: 0;
+  border: none;
+}
+
+.markdown-content ul, .markdown-content ol {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.markdown-content li {
+  margin-bottom: 0.5rem;
+}
+
+.markdown-content h1, .markdown-content h2, .markdown-content h3 {
+  margin-bottom: 1rem;
+  margin-top: 1.5rem;
+  background: var(--gradient-sunset);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.markdown-content h1 { font-size: 1.5rem; }
+.markdown-content h2 { font-size: 1.25rem; }
+.markdown-content h3 { font-size: 1.1rem; }
+
+/* ============ MODAL ============ */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(26, 26, 46, 0.9);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal {
+  background: linear-gradient(135deg, var(--surface) 0%, var(--background-light) 100%);
+  border: 2px solid var(--border-bright);
+  border-radius: 25px;
+  padding: 2rem;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow:
+    0 0 50px rgba(78, 205, 196, 0.3),
+    0 25px 50px rgba(0, 0, 0, 0.5);
+  animation: float 3s ease-in-out infinite;
+}
+
+.modal h3 {
+  background: var(--gradient-sunset);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+/* ============ NEURAL NETWORK BACKGROUND DECORATION ============ */
+.neural-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: -1;
+  background-image:
+    radial-gradient(circle at 10% 20%, rgba(255, 107, 107, 0.1) 0%, transparent 20%),
+    radial-gradient(circle at 30% 80%, rgba(78, 205, 196, 0.1) 0%, transparent 20%),
+    radial-gradient(circle at 70% 30%, rgba(255, 230, 109, 0.1) 0%, transparent 20%),
+    radial-gradient(circle at 90% 70%, rgba(170, 150, 218, 0.1) 0%, transparent 20%);
 }

frontend/src/routes/+layout.svelte

@@ -22,7 +22,11 @@
 
 {#if isLoading}
   <div class="loading-screen">
-    <div class="spinner"></div>
+    <div class="loading-content">
+      <img src="/logo.jpg" alt="Moxiegen" class="loading-logo" />
+      <div class="loading-spinner"></div>
+      <p>Loading Moxiegen...</p>
+    </div>
   </div>
 {:else if user}
   <div class="app-layout">
@@ -42,30 +46,49 @@
       </div>
 
       <div class="header-right">
+        <div class="user-badge">
+          <span class="user-icon">👤</span>
           <span class="user-name">{user.username}</span>
-        <button class="btn btn-secondary btn-sm" onclick={handleLogout}>Logout</button>
+        </div>
+        <button class="btn btn-secondary btn-sm" onclick={handleLogout}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+            <polyline points="16 17 21 12 16 7"></polyline>
+            <line x1="21" y1="12" x2="9" y2="12"></line>
+          </svg>
+          Logout
+        </button>
       </div>
     </header>
 
     <!-- Sidebar -->
     <aside class="sidebar" class:open={sidebarOpen}>
+      <div class="sidebar-header">
+        <h3>Navigation</h3>
+      </div>
       <nav class="sidebar-nav">
         <a href="/chat" class="nav-link" class:active={$page.url.pathname === '/chat'}>
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <span class="nav-icon">💬</span>
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+          <span class="nav-text">Chat</span>
-          </svg>
+          <span class="nav-glow"></span>
-          Chat
         </a>
         {#if user.role === 'admin'}
           <a href="/admin" class="nav-link" class:active={$page.url.pathname.startsWith('/admin')}>
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <span class="nav-icon">⚙️</span>
-              <circle cx="12" cy="12" r="3"></circle>
+            <span class="nav-text">Admin Panel</span>
-              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+            <span class="nav-glow"></span>
-            </svg>
-            Admin Panel
           </a>
         {/if}
       </nav>
+      <div class="sidebar-footer">
+        <div class="neural-decoration">
+          <div class="node n1"></div>
+          <div class="node n2"></div>
+          <div class="node n3"></div>
+          <div class="connection c1"></div>
+          <div class="connection c2"></div>
+        </div>
+      </div>
     </aside>
 
     <!-- Main Content -->
@@ -78,8 +101,11 @@
       <div class="sidebar-overlay" onclick={() => sidebarOpen = false}></div>
     {/if}
   </div>
+
+  <div class="neural-bg"></div>
 {:else}
   <slot />
+  <div class="neural-bg"></div>
 {/if}
 
 <style>
@@ -91,17 +117,32 @@
     background: var(--background);
   }
 
-  .spinner {
+  .loading-content {
-    width: 40px;
+    text-align: center;
-    height: 40px;
+  }
-    border: 3px solid var(--border);
+
+  .loading-logo {
+    width: 100px;
+    height: 100px;
+    border-radius: 20px;
+    margin-bottom: 1.5rem;
+    animation: float 3s ease-in-out infinite;
+  }
+
+  .loading-spinner {
+    width: 50px;
+    height: 50px;
+    margin: 0 auto 1rem;
+    border: 4px solid var(--border);
     border-top-color: var(--primary);
+    border-right-color: var(--accent-1);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
 
-  @keyframes spin {
+  .loading-content p {
-    to { transform: rotate(360deg); }
+    color: var(--text-muted);
+    font-size: 1rem;
   }
 
   .app-layout {
@@ -114,63 +155,110 @@
     height: 100vh;
   }
 
+  /* Header */
   .header {
     grid-area: header;
     display: flex;
     align-items: center;
     gap: 1rem;
-    padding: 0 1.5rem;
+    padding: 0 2rem;
-    background: var(--surface);
+    background: linear-gradient(135deg, var(--surface) 0%, var(--background-light) 100%);
-    border-bottom: 1px solid var(--border);
+    border-bottom: 2px solid transparent;
+    border-image: var(--gradient-sunset) 1;
     z-index: 100;
   }
 
   .menu-toggle {
     display: none;
-    background: none;
+    background: transparent;
-    border: none;
+    border: 2px solid var(--secondary);
-    color: var(--text);
+    color: var(--secondary);
     padding: 0.5rem;
+    border-radius: 10px;
     cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .menu-toggle:hover {
+    background: var(--secondary);
+    color: var(--background);
   }
 
   .logo {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 1rem;
   }
 
   .logo-img {
-    width: 36px;
+    width: 50px;
-    height: 36px;
+    height: 50px;
-    border-radius: 0.5rem;
+    border-radius: 15px;
     object-fit: cover;
+    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+    transition: all 0.3s ease;
+  }
+
+  .logo-img:hover {
+    transform: scale(1.1) rotate(5deg);
+    box-shadow: 0 6px 25px rgba(255, 107, 107, 0.5);
   }
 
   .logo-text {
-    font-size: 1.25rem;
+    font-size: 1.5rem;
-    font-weight: 700;
+    font-weight: 800;
-    color: var(--text);
+    background: var(--gradient-sunset);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: 1px;
   }
 
   .header-right {
     margin-left: auto;
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 1.5rem;
+  }
+
+  .user-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(78, 205, 196, 0.1);
+    border: 1px solid var(--secondary);
+    border-radius: 50px;
+  }
+
+  .user-icon {
+    font-size: 1.2rem;
   }
 
   .user-name {
-    color: var(--text-muted);
+    color: var(--secondary);
-    font-size: 0.875rem;
+    font-weight: 600;
+    font-size: 0.9rem;
   }
 
+  /* Sidebar */
   .sidebar {
     grid-area: sidebar;
-    background: var(--surface);
+    background: linear-gradient(180deg, var(--surface) 0%, var(--background-light) 100%);
-    border-right: 1px solid var(--border);
+    border-right: 2px solid transparent;
-    padding: 1.5rem 1rem;
+    border-image: var(--gradient-sky) 1;
+    padding: 1.5rem;
     overflow-y: auto;
+    position: relative;
+  }
+
+  .sidebar-header h3 {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+    padding: 0 0.5rem;
   }
 
   .sidebar-nav {
@@ -180,27 +268,123 @@
   }
 
   .nav-link {
+    position: relative;
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 1rem;
-    padding: 0.75rem 1rem;
+    padding: 1rem 1.25rem;
-    border-radius: 0.5rem;
+    border-radius: 15px;
     color: var(--text-muted);
     text-decoration: none;
-    transition: all 0.2s;
+    transition: all 0.3s ease;
+    overflow: hidden;
   }
 
   .nav-link:hover {
-    background: var(--surface-hover);
     color: var(--text);
+    background: rgba(78, 205, 196, 0.1);
     text-decoration: none;
   }
 
-  .nav-link.active {
+  .nav-link:hover .nav-glow {
-    background: var(--primary);
+    opacity: 1;
-    color: white;
   }
 
+  .nav-link.active {
+    background: var(--gradient-sunset);
+    color: var(--background);
+    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
+  }
+
+  .nav-link.active .nav-icon {
+    transform: scale(1.2);
+  }
+
+  .nav-icon {
+    font-size: 1.5rem;
+    transition: transform 0.3s ease;
+  }
+
+  .nav-text {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  .nav-glow {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at center, rgba(78, 205, 196, 0.2), transparent);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  /* Neural Network Decoration */
+  .sidebar-footer {
+    position: absolute;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .neural-decoration {
+    position: relative;
+    width: 100px;
+    height: 60px;
+  }
+
+  .node {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    animation: pulse-glow 2s ease-in-out infinite;
+  }
+
+  .n1 {
+    left: 10px;
+    top: 10px;
+    background: var(--primary);
+    animation-delay: 0s;
+  }
+
+  .n2 {
+    left: 44px;
+    top: 35px;
+    background: var(--secondary);
+    animation-delay: 0.5s;
+  }
+
+  .n3 {
+    right: 10px;
+    top: 10px;
+    background: var(--accent-1);
+    animation-delay: 1s;
+  }
+
+  .connection {
+    position: absolute;
+    height: 2px;
+    background: linear-gradient(90deg, var(--primary), var(--secondary));
+    opacity: 0.5;
+    transform-origin: left center;
+  }
+
+  .c1 {
+    left: 16px;
+    top: 16px;
+    width: 35px;
+    transform: rotate(45deg);
+  }
+
+  .c2 {
+    left: 50px;
+    top: 40px;
+    width: 35px;
+    transform: rotate(-45deg);
+    background: linear-gradient(90deg, var(--secondary), var(--accent-1));
+  }
+
+  /* Main Content */
   .main-content {
     grid-area: main;
     overflow-y: auto;
@@ -223,7 +407,7 @@
       bottom: 0;
       width: var(--sidebar-width);
       transform: translateX(-100%);
-      transition: transform 0.3s;
+      transition: transform 0.3s ease;
       z-index: 90;
     }
 
@@ -236,7 +420,8 @@
       position: fixed;
       inset: 0;
       top: var(--header-height);
-      background: rgba(0, 0, 0, 0.5);
+      background: rgba(26, 26, 46, 0.9);
+      backdrop-filter: blur(5px);
       z-index: 80;
     }
 

frontend/src/routes/chat/+page.svelte

@@ -155,40 +155,45 @@
 </script>
 
 <div class="chat-page">
-  <!-- Sidebar with endpoints -->
+  <!-- Sidebar -->
   <aside class="chat-sidebar">
-    <h3>AI Endpoints</h3>
+    <div class="sidebar-section">
+      <h3>🎈 AI Endpoints</h3>
       {#if endpoints.length === 0}
-      <p class="no-endpoints">No endpoints configured. Ask an admin to add one.</p>
+        <p class="no-data">No endpoints configured. <a href="/admin">Add one</a></p>
       {:else}
         <div class="endpoint-list">
           {#each endpoints as endpoint}
-          <label class="endpoint-option">
+            <label class="endpoint-option" class:selected={selectedEndpoint === endpoint.id}>
               <input
                 type="radio"
                 name="endpoint"
                 value={endpoint.id}
                 bind:group={selectedEndpoint}
               />
-            <span class="endpoint-info">
+              <div class="endpoint-info">
                 <span class="endpoint-name">{endpoint.name}</span>
                 <span class="endpoint-model">{endpoint.model}</span>
-            </span>
+              </div>
+              {#if endpoint.is_default}
+                <span class="default-badge">⭐</span>
+              {/if}
             </label>
           {/each}
         </div>
       {/if}
+    </div>
 
-    <div class="files-section">
+    <div class="sidebar-section">
-      <h4>Uploaded Files</h4>
+      <h4>📎 Recent Files</h4>
       {#if uploadedFiles.length === 0}
-        <p class="no-files">No files uploaded yet</p>
+        <p class="no-data">No files uploaded yet</p>
       {:else}
         <ul class="files-list">
-          {#each uploadedFiles as file}
+          {#each uploadedFiles.slice(0, 5) as file}
             <li>
+              <span class="file-icon">📄</span>
               <span class="file-name">{file.original_filename}</span>
-              <span class="file-size">{formatFileSize(file.file_size)}</span>
             </li>
           {/each}
         </ul>
@@ -196,24 +201,47 @@
     </div>
   </aside>
 
-  <!-- Main chat area -->
+  <!-- Main Chat Area -->
   <div class="chat-main">
     <!-- Messages -->
     <div class="messages-container">
       {#if loading}
         <div class="loading-state">
-          <div class="spinner"></div>
+          <div class="loading-balloon"></div>
-          <p>Loading chat...</p>
+          <p>Loading your conversations...</p>
         </div>
       {:else if messages.length === 0}
         <div class="empty-state">
-          <img src="/logo.jpg" alt="Moxiegen" class="empty-logo" />
+          <div class="empty-illustration">
+            <div class="balloon-small"></div>
+            <div class="balloon-small b2"></div>
+            <div class="balloon-small b3"></div>
+          </div>
           <h2>Start a Conversation</h2>
           <p>Send a message to begin chatting with AI</p>
+          <div class="suggestions">
+            <button onclick={() => inputMessage = 'Explain quantum computing'} class="suggestion-chip">
+              🔬 Explain quantum computing
+            </button>
+            <button onclick={() => inputMessage = 'Write a poem about technology'} class="suggestion-chip">
+              ✍️ Write a poem
+            </button>
+            <button onclick={() => inputMessage = 'Help me brainstorm ideas'} class="suggestion-chip">
+              💡 Brainstorm ideas
+            </button>
+          </div>
         </div>
       {:else}
         {#each messages as message}
-          <div class="message {message.role} {message.isError ? 'error' : ''}">
+          <div class="message {message.role}" class:error={message.isError}>
+            <div class="message-avatar">
+              {#if message.role === 'user'}
+                👤
+              {:else}
+                🤖
+              {/if}
+            </div>
+            <div class="message-body">
               <div class="message-header">
                 <span class="message-role">
                   {message.role === 'user' ? 'You' : 'Assistant'}
@@ -221,6 +249,9 @@
                 {#if message.model}
                   <span class="message-model">{message.model}</span>
                 {/if}
+                <span class="message-time">
+                  {message.timestamp.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
+                </span>
               </div>
               <div class="message-content">
                 {#if message.role === 'user'}
@@ -232,34 +263,33 @@
                 {/if}
               </div>
             </div>
+          </div>
         {/each}
       {/if}
     </div>
 
-    <!-- Input area -->
+    <!-- Input Area -->
     <div class="input-area">
       {#if selectedFiles.length > 0}
         <div class="selected-files">
           {#each selectedFiles as file}
-            <div class="selected-file-chip">
+            <div class="file-chip">
-              <span>{file.original_filename}</span>
+              <span>📎 {file.original_filename}</span>
-              <button onclick={() => removeSelectedFile(file)}>&times;</button>
+              <button onclick={() => removeSelectedFile(file)}>×</button>
             </div>
           {/each}
         </div>
       {/if}
 
       <form onsubmit={(e) => { e.preventDefault(); sendMessage(); }} class="input-form">
-        <div class="input-row">
+        <div class="input-wrapper">
           <button
             type="button"
-            class="btn btn-secondary btn-icon"
+            class="attach-btn"
             onclick={() => fileInput.click()}
-            title="Upload file"
+            title="Attach file"
           >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            📎
-              <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
-            </svg>
           </button>
           <input
             type="file"
@@ -270,7 +300,7 @@
           />
 
           <textarea
-            class="input message-input"
+            class="message-input"
             placeholder="Type your message..."
             bind:value={inputMessage}
             onkeydown={(e) => {
@@ -284,16 +314,15 @@
 
           <button
             type="submit"
-            class="btn btn-primary btn-icon"
+            class="send-btn"
             disabled={!inputMessage.trim() || sending || endpoints.length === 0}
           >
             {#if sending}
-              <div class="spinner-small"></div>
+              <div class="sending-dots">
+                <span></span><span></span><span></span>
+              </div>
             {:else}
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              🚀
-                <line x1="22" y1="2" x2="11" y2="13"></line>
-                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-              </svg>
             {/if}
           </button>
         </div>
@@ -307,39 +336,49 @@
 
   .chat-page {
     display: flex;
+    gap: 1.5rem;
     height: calc(100vh - var(--header-height) - 4rem);
-    gap: 1rem;
   }
 
+  /* Sidebar */
   .chat-sidebar {
-    width: 240px;
+    width: 260px;
-    background: var(--surface);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    flex-shrink: 0;
+  }
+
+  .sidebar-section {
+    background: var(--surface-card);
     border: 1px solid var(--border);
-    border-radius: 0.75rem;
+    border-radius: 20px;
-    padding: 1rem;
+    padding: 1.25rem;
-    overflow-y: auto;
+    backdrop-filter: blur(10px);
   }
 
-  .chat-sidebar h3 {
+  .sidebar-section h3 {
-    font-size: 0.875rem;
+    font-size: 0.8rem;
+    color: var(--accent-1);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .sidebar-section h4 {
+    font-size: 0.75rem;
     color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 1px;
     margin-bottom: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
   }
 
-  .chat-sidebar h4 {
+  .no-data {
-    font-size: 0.75rem;
     color: var(--text-muted);
-    margin-top: 1.5rem;
+    font-size: 0.85rem;
-    margin-bottom: 0.5rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .no-endpoints, .no-files {
-    color: var(--text-muted);
-    font-size: 0.75rem;
     font-style: italic;
   }
 
@@ -351,31 +390,39 @@
 
   .endpoint-option {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
-    gap: 0.5rem;
+    gap: 0.75rem;
-    padding: 0.5rem;
+    padding: 0.75rem;
-    border-radius: 0.5rem;
+    border-radius: 12px;
     cursor: pointer;
-    transition: background 0.2s;
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
   }
 
   .endpoint-option:hover {
-    background: var(--surface-hover);
+    background: rgba(78, 205, 196, 0.1);
+    border-color: var(--border);
+  }
+
+  .endpoint-option.selected {
+    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 230, 109, 0.2));
+    border-color: var(--primary);
   }
 
   .endpoint-option input {
-    margin-top: 0.25rem;
+    display: none;
-    accent-color: var(--primary);
   }
 
   .endpoint-info {
+    flex: 1;
     display: flex;
     flex-direction: column;
   }
 
   .endpoint-name {
-    font-size: 0.875rem;
+    font-size: 0.9rem;
     color: var(--text);
+    font-weight: 600;
   }
 
   .endpoint-model {
@@ -383,37 +430,48 @@
     color: var(--text-muted);
   }
 
+  .default-badge {
+    font-size: 1rem;
+  }
+
   .files-list {
     list-style: none;
-    font-size: 0.75rem;
   }
 
   .files-list li {
     display: flex;
-    justify-content: space-between;
+    align-items: center;
-    padding: 0.25rem 0;
+    gap: 0.5rem;
-    color: var(--text-muted);
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--border);
+    font-size: 0.85rem;
+  }
+
+  .files-list li:last-child {
+    border-bottom: none;
+  }
+
+  .file-icon {
+    font-size: 1rem;
   }
 
   .file-name {
+    color: var(--text-muted);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 140px;
-  }
-
-  .file-size {
-    flex-shrink: 0;
   }
 
+  /* Main Chat */
   .chat-main {
     flex: 1;
     display: flex;
     flex-direction: column;
-    background: var(--surface);
+    background: var(--surface-card);
     border: 1px solid var(--border);
-    border-radius: 0.75rem;
+    border-radius: 25px;
     overflow: hidden;
+    backdrop-filter: blur(10px);
   }
 
   .messages-container {
@@ -428,95 +486,171 @@
     align-items: center;
     justify-content: center;
     height: 100%;
-    gap: 1rem;
+    text-align: center;
     color: var(--text-muted);
   }
 
-  .empty-logo {
+  .loading-balloon {
-    width: 80px;
+    width: 60px;
-    height: 80px;
+    height: 75px;
-    border-radius: 1rem;
+    background: var(--gradient-sunset);
-    opacity: 0.5;
+    border-radius: 50% 50% 50% 50%;
+    margin-bottom: 1rem;
+    animation: float 2s ease-in-out infinite;
+  }
+
+  .empty-illustration {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .balloon-small {
+    width: 40px;
+    height: 50px;
+    background: var(--gradient-sunset);
+    border-radius: 50% 50% 50% 50%;
+    animation: float 3s ease-in-out infinite;
+  }
+
+  .balloon-small.b2 {
+    background: var(--gradient-sky);
+    animation-delay: 0.5s;
+    transform: translateY(10px);
+  }
+
+  .balloon-small.b3 {
+    background: var(--gradient-balloon);
+    animation-delay: 1s;
   }
 
   .empty-state h2 {
+    background: var(--gradient-sunset);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+    justify-content: center;
+  }
+
+  .suggestion-chip {
+    background: var(--surface);
+    border: 1px solid var(--border);
     color: var(--text);
-    margin: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 50px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
   }
 
-  .spinner {
+  .suggestion-chip:hover {
-    width: 32px;
+    background: var(--gradient-sunset);
-    height: 32px;
+    color: var(--background);
-    border: 3px solid var(--border);
+    border-color: transparent;
-    border-top-color: var(--primary);
+    transform: translateY(-2px);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  .spinner-small {
-    width: 16px;
-    height: 16px;
-    border: 2px solid white;
-    border-top-color: transparent;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
   }
 
+  /* Messages */
   .message {
+    display: flex;
+    gap: 1rem;
     margin-bottom: 1.5rem;
     max-width: 85%;
   }
 
   .message.user {
     margin-left: auto;
+    flex-direction: row-reverse;
+  }
+
+  .message-avatar {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .message.user .message-avatar {
+    background: var(--gradient-sunset);
+  }
+
+  .message.assistant .message-avatar {
+    background: var(--gradient-sky);
+  }
+
+  .message-body {
+    flex: 1;
   }
 
   .message-header {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.5rem;
   }
 
   .message-role {
-    font-size: 0.75rem;
+    font-size: 0.8rem;
     font-weight: 600;
-    color: var(--text-muted);
+    color: var(--text);
   }
 
   .message-model {
-    font-size: 0.625rem;
+    font-size: 0.7rem;
-    padding: 0.125rem 0.375rem;
+    padding: 0.2rem 0.5rem;
-    background: var(--background);
+    background: var(--secondary);
-    border-radius: 0.25rem;
+    color: var(--background);
+    border-radius: 20px;
+  }
+
+  .message-time {
+    font-size: 0.7rem;
     color: var(--text-muted);
   }
 
   .message-content {
-    padding: 1rem;
+    padding: 1rem 1.25rem;
-    border-radius: 0.75rem;
+    border-radius: 20px;
-    background: var(--background);
+    font-size: 0.95rem;
+    line-height: 1.7;
   }
 
   .message.user .message-content {
-    background: var(--primary);
+    background: var(--gradient-sunset);
-    color: white;
+    color: var(--background);
+    border-bottom-right-radius: 5px;
+  }
+
+  .message.assistant .message-content {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-bottom-left-radius: 5px;
   }
 
   .message.error .message-content {
-    background: rgba(239, 68, 68, 0.1);
+    background: rgba(255, 107, 107, 0.1);
     border: 1px solid var(--danger);
     color: var(--danger);
   }
 
+  /* Input Area */
   .input-area {
     border-top: 1px solid var(--border);
-    padding: 1rem;
+    padding: 1.25rem;
-    background: var(--surface);
+    background: var(--background);
   }
 
   .selected-files {
@@ -526,51 +660,132 @@
     margin-bottom: 0.75rem;
   }
 
-  .selected-file-chip {
+  .file-chip {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.25rem 0.5rem;
+    padding: 0.4rem 0.8rem;
-    background: var(--primary);
+    background: var(--gradient-sky);
-    color: white;
+    color: var(--background);
-    border-radius: 1rem;
+    border-radius: 20px;
-    font-size: 0.75rem;
+    font-size: 0.8rem;
+    font-weight: 500;
   }
 
-  .selected-file-chip button {
+  .file-chip button {
     background: none;
     border: none;
-    color: white;
+    color: var(--background);
-    cursor: pointer;
     font-size: 1rem;
-    line-height: 1;
+    cursor: pointer;
     opacity: 0.7;
+    line-height: 1;
   }
 
-  .selected-file-chip button:hover {
+  .file-chip button:hover {
     opacity: 1;
   }
 
-  .input-form {
+  .input-wrapper {
     display: flex;
+    align-items: flex-end;
+    gap: 0.75rem;
+    background: var(--surface);
+    border: 2px solid var(--border);
+    border-radius: 25px;
+    padding: 0.5rem;
+    transition: all 0.3s ease;
   }
 
-  .input-row {
+  .input-wrapper:focus-within {
+    border-color: var(--secondary);
+    box-shadow: 0 0 20px rgba(78, 205, 196, 0.2);
+  }
+
+  .attach-btn {
+    width: 44px;
+    height: 44px;
     display: flex;
-    gap: 0.5rem;
+    align-items: center;
-    flex: 1;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    font-size: 1.25rem;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+  }
+
+  .attach-btn:hover {
+    background: rgba(78, 205, 196, 0.2);
   }
 
   .message-input {
     flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--text);
+    font-size: 1rem;
     resize: none;
     min-height: 44px;
-    max-height: 200px;
+    max-height: 150px;
+    padding: 0.75rem 0;
   }
 
-  .btn-icon {
+  .message-input:focus {
-    padding: 0.625rem;
+    outline: none;
-    min-width: 44px;
+  }
+
+  .message-input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .send-btn {
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--gradient-sunset);
+    border: none;
+    border-radius: 50%;
+    font-size: 1.25rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
+  }
+
+  .send-btn:hover:not(:disabled) {
+    transform: scale(1.1);
+    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
+  }
+
+  .send-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  .sending-dots {
+    display: flex;
+    gap: 4px;
+  }
+
+  .sending-dots span {
+    width: 6px;
+    height: 6px;
+    background: white;
+    border-radius: 50%;
+    animation: bounce 1.4s ease-in-out infinite;
+  }
+
+  .sending-dots span:nth-child(1) { animation-delay: 0s; }
+  .sending-dots span:nth-child(2) { animation-delay: 0.2s; }
+  .sending-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+  @keyframes bounce {
+    0%, 80%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-8px); }
   }
 
   @media (max-width: 768px) {
@@ -582,12 +797,16 @@
 
     .chat-sidebar {
       width: 100%;
-      order: 2;
+      flex-direction: row;
+      overflow-x: auto;
     }
 
-    .chat-main {
+    .sidebar-section {
-      order: 1;
+      min-width: 200px;
-      min-height: 400px;
+    }
+
+    .message {
+      max-width: 95%;
     }
   }
 </style>

frontend/src/routes/login/+page.svelte

@@ -35,16 +35,32 @@
 </script>
 
 <div class="auth-page">
+  <!-- Floating decorations -->
+  <div class="balloon b1"></div>
+  <div class="balloon b2"></div>
+  <div class="balloon b3"></div>
+  <div class="node n1"></div>
+  <div class="node n2"></div>
+  <div class="node n3"></div>
+  <div class="node n4"></div>
+  <div class="node n5"></div>
+
   <div class="auth-card">
     <div class="auth-header">
+      <div class="logo-wrapper">
         <img src="/logo.jpg" alt="Moxiegen" class="auth-logo" />
+        <div class="logo-glow"></div>
+      </div>
       <h1>Welcome Back</h1>
       <p>Sign in to your account to continue</p>
     </div>
 
     <form onsubmit={handleLogin} class="auth-form">
       {#if error}
-        <div class="error-message">{error}</div>
+        <div class="error-message">
+          <span class="error-icon">⚠️</span>
+          {error}
+        </div>
       {/if}
 
       <div class="form-group">
@@ -72,7 +88,13 @@
       </div>
 
       <button type="submit" class="btn btn-primary btn-full" disabled={loading}>
-        {loading ? 'Signing in...' : 'Sign In'}
+        {#if loading}
+          <span class="loading-dots">
+            <span></span><span></span><span></span>
+          </span>
+        {:else}
+          🚀 Sign In
+        {/if}
       </button>
     </form>
 
@@ -81,9 +103,15 @@
     </div>
 
     <div class="demo-credentials">
-      <p><strong>Demo Admin:</strong></p>
+      <div class="demo-header">🎯 Demo Admin Credentials</div>
-      <p>Email: admin@moxiegen.com</p>
+      <div class="demo-row">
-      <p>Password: admin123</p>
+        <span class="demo-label">Email:</span>
+        <span class="demo-value">admin@moxiegen.com</span>
+      </div>
+      <div class="demo-row">
+        <span class="demo-label">Password:</span>
+        <span class="demo-value">admin123</span>
+      </div>
     </div>
   </div>
 </div>
@@ -95,16 +123,75 @@
     justify-content: center;
     min-height: 100vh;
     padding: 1rem;
-    background: var(--background);
+    position: relative;
+    overflow: hidden;
   }
 
+  /* Floating Balloons */
+  .balloon {
+    position: absolute;
+    border-radius: 50% 50% 50% 50%;
+    opacity: 0.15;
+    animation: float 8s ease-in-out infinite;
+  }
+
+  .b1 {
+    width: 200px;
+    height: 250px;
+    top: 10%;
+    left: 5%;
+    background: linear-gradient(135deg, #FF6B6B, #FCBAD3);
+    animation-delay: 0s;
+  }
+
+  .b2 {
+    width: 150px;
+    height: 180px;
+    top: 60%;
+    right: 10%;
+    background: linear-gradient(135deg, #4ECDC4, #95E1D3);
+    animation-delay: 2s;
+  }
+
+  .b3 {
+    width: 100px;
+    height: 120px;
+    bottom: 10%;
+    left: 15%;
+    background: linear-gradient(135deg, #FFE66D, #FF9F43);
+    animation-delay: 4s;
+  }
+
+  /* Neural Network Nodes */
+  .node {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    opacity: 0.3;
+    animation: pulse-glow 3s ease-in-out infinite;
+  }
+
+  .n1 { top: 20%; left: 20%; background: #FF6B6B; animation-delay: 0s; }
+  .n2 { top: 40%; right: 15%; background: #4ECDC4; animation-delay: 0.5s; }
+  .n3 { top: 70%; left: 10%; background: #FFE66D; animation-delay: 1s; }
+  .n4 { bottom: 20%; right: 25%; background: #AA96DA; animation-delay: 1.5s; }
+  .n5 { top: 30%; right: 30%; background: #FCBAD3; animation-delay: 2s; }
+
   .auth-card {
     width: 100%;
-    max-width: 400px;
+    max-width: 420px;
-    background: var(--surface);
+    background: linear-gradient(135deg, rgba(15, 52, 96, 0.9), rgba(22, 33, 62, 0.95));
-    border: 1px solid var(--border);
+    border: 2px solid transparent;
-    border-radius: 1rem;
+    border-image: var(--gradient-sunset) 1;
-    padding: 2rem;
+    border-radius: 30px;
+    padding: 2.5rem;
+    backdrop-filter: blur(20px);
+    box-shadow:
+      0 25px 50px rgba(0, 0, 0, 0.4),
+      0 0 100px rgba(78, 205, 196, 0.1);
+    position: relative;
+    z-index: 1;
   }
 
   .auth-header {
@@ -112,58 +199,159 @@
     margin-bottom: 2rem;
   }
 
+  .logo-wrapper {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 1.5rem;
+  }
+
   .auth-logo {
-    width: 64px;
+    width: 80px;
-    height: 64px;
+    height: 80px;
-    border-radius: 0.75rem;
+    border-radius: 20px;
-    margin-bottom: 1rem;
+    object-fit: cover;
+    position: relative;
+    z-index: 1;
+    transition: transform 0.3s ease;
+    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
+  }
+
+  .auth-logo:hover {
+    transform: scale(1.1) rotate(5deg);
+  }
+
+  .logo-glow {
+    position: absolute;
+    inset: -10px;
+    background: var(--gradient-sunset);
+    border-radius: 30px;
+    opacity: 0.3;
+    filter: blur(20px);
+    animation: pulse-glow 2s ease-in-out infinite;
   }
 
   .auth-header h1 {
-    font-size: 1.5rem;
+    font-size: 2rem;
+    font-weight: 800;
+    background: var(--gradient-sunset);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
     margin-bottom: 0.5rem;
   }
 
   .auth-header p {
     color: var(--text-muted);
-    font-size: 0.875rem;
+    font-size: 1rem;
   }
 
   .auth-form {
     margin-bottom: 1.5rem;
   }
 
-  .btn-full {
-    width: 100%;
-    margin-top: 1rem;
-  }
-
   .error-message {
-    background: rgba(239, 68, 68, 0.1);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: rgba(255, 107, 107, 0.1);
     border: 1px solid var(--danger);
     color: var(--danger);
-    padding: 0.75rem 1rem;
+    padding: 1rem;
-    border-radius: 0.5rem;
+    border-radius: 15px;
     margin-bottom: 1rem;
-    font-size: 0.875rem;
+    font-size: 0.9rem;
+  }
+
+  .error-icon {
+    font-size: 1.25rem;
+  }
+
+  .btn-full {
+    width: 100%;
+    margin-top: 1.5rem;
+    padding: 1rem 1.5rem;
+    font-size: 1rem;
+  }
+
+  .loading-dots {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .loading-dots span {
+    width: 8px;
+    height: 8px;
+    background: currentColor;
+    border-radius: 50%;
+    animation: bounce 1.4s ease-in-out infinite;
+  }
+
+  .loading-dots span:nth-child(1) { animation-delay: 0s; }
+  .loading-dots span:nth-child(2) { animation-delay: 0.2s; }
+  .loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+  @keyframes bounce {
+    0%, 80%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-10px); }
   }
 
   .auth-footer {
     text-align: center;
+    margin-bottom: 1.5rem;
+  }
+
+  .auth-footer p {
     color: var(--text-muted);
-    font-size: 0.875rem;
+    font-size: 0.9rem;
+  }
+
+  .auth-footer a {
+    color: var(--secondary);
+    font-weight: 600;
+  }
+
+  .auth-footer a:hover {
+    color: var(--accent-1);
   }
 
   .demo-credentials {
-    margin-top: 1.5rem;
+    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(149, 225, 211, 0.1));
-    padding: 1rem;
+    border: 1px solid var(--secondary);
-    background: var(--background);
+    border-radius: 15px;
-    border-radius: 0.5rem;
+    padding: 1rem 1.25rem;
-    font-size: 0.75rem;
+  }
+
+  .demo-header {
+    font-weight: 700;
+    color: var(--secondary);
+    margin-bottom: 0.75rem;
+    font-size: 0.85rem;
+  }
+
+  .demo-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.25rem 0;
+    font-size: 0.85rem;
+  }
+
+  .demo-label {
     color: var(--text-muted);
   }
 
-  .demo-credentials p {
+  .demo-value {
-    margin-bottom: 0.25rem;
+    color: var(--accent-1);
+    font-family: monospace;
+    font-weight: 600;
+  }
+
+  @media (max-width: 480px) {
+    .auth-card {
+      padding: 1.5rem;
+    }
+
+    .auth-header h1 {
+      font-size: 1.5rem;
+    }
   }
 </style>