Upload app.py with huggingface_hub

app.py

@@ -1,12 +1,10 @@
 import gradio as gr
-import os
 
 # ─── Custom CSS ───────────────────────────────────────────────────────────────
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');
 
 :root {
-    /* Dark theme (default) */
     --bg-primary: #09090b;
     --bg-secondary: #111113;
     --bg-tertiary: #18181b;
@@ -15,51 +13,38 @@ custom_css = """
     --bg-glass: rgba(255, 255, 255, 0.04);
     --bg-glass-strong: rgba(255, 255, 255, 0.07);
     --bg-input: rgba(255, 255, 255, 0.04);
-
     --border-primary: rgba(255, 255, 255, 0.08);
     --border-secondary: rgba(255, 255, 255, 0.12);
     --border-focus: rgba(255, 255, 255, 0.25);
-    --border-glass: rgba(255, 255, 255, 0.1);
-
     --text-primary: #fafafa;
     --text-secondary: #a1a1aa;
     --text-tertiary: #52525b;
     --text-inverse: #09090b;
-
     --accent: #22c55e;
     --accent-soft: rgba(34, 197, 94, 0.12);
     --accent-glow: rgba(34, 197, 94, 0.25);
-
     --purple: #a855f7;
     --purple-soft: rgba(168, 85, 247, 0.12);
     --blue: #3b82f6;
-    --blue-soft: rgba(59, 130, 246, 0.12);
-
     --blur-sm: 8px;
     --blur-md: 16px;
     --blur-lg: 24px;
     --blur-xl: 40px;
-
     --radius-sm: 6px;
     --radius-md: 10px;
     --radius-lg: 14px;
     --radius-xl: 20px;
     --radius-full: 9999px;
-
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
     --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
     --shadow-glow: 0 0 40px rgba(34, 197, 94, 0.15);
-
-    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
-
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
     --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
     --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Light theme */
 [data-theme="light"] {
     --bg-primary: #ffffff;
     --bg-secondary: #f4f4f5;
@@ -69,52 +54,34 @@ custom_css = """
     --bg-glass: rgba(255, 255, 255, 0.7);
     --bg-glass-strong: rgba(255, 255, 255, 0.85);
     --bg-input: rgba(0, 0, 0, 0.03);
-
     --border-primary: rgba(0, 0, 0, 0.08);
     --border-secondary: rgba(0, 0, 0, 0.12);
     --border-focus: rgba(0, 0, 0, 0.25);
-    --border-glass: rgba(255, 255, 255, 0.5);
-
     --text-primary: #09090b;
     --text-secondary: #52525b;
     --text-tertiary: #a1a1aa;
     --text-inverse: #fafafa;
-
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
     --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
 }
 
-/* ─── Reset & Base ─────────────────────────────────────────────────────────── */
-*, *::before, *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-html {
-    scroll-behavior: smooth;
-    -webkit-text-size-adjust: 100%;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
-}
+html { scroll-behavior: smooth; overflow-y: auto !important; overflow-x: hidden !important; }
 
 body {
     font-family: var(--font-sans) !important;
     font-size: 14px !important;
     line-height: 1.6 !important;
-    letter-spacing: -0.01em !important;
     color: var(--text-primary) !important;
     background: var(--bg-primary) !important;
     -webkit-font-smoothing: antialiased !important;
-    -moz-osx-font-smoothing: grayscale !important;
     overflow-x: hidden !important;
     overflow-y: auto !important;
     min-height: 100vh !important;
-    height: auto !important;
 }
 
-/* ─── Grain Overlay ────────────────────────────────────────────────────────── */
 body::before {
     content: '';
     position: fixed;
@@ -127,7 +94,6 @@ body::before {
     background-size: 128px 128px;
 }
 
-/* ─── Gradient Orbs (Background Depth) ─────────────────────────────────────── */
 body::after {
     content: '';
     position: fixed;
@@ -142,39 +108,21 @@ body::after {
     opacity: 0.4;
 }
 
-/* ─── Gradio Container ─────────────────────────────────────────────────────── */
-.gradio-container {
-    background: transparent !important;
-    padding: 0 !important;
-    max-width: 100% !important;
-    margin: 0 !important;
-    height: auto !important;
-    min-height: auto !important;
-}
-
-.gradio-container > .main {
-    background: transparent !important;
-    padding: 0 !important;
-    max-width: 100% !important;
-    margin: 0 !important;
-    height: auto !important;
-}
-
+.gradio-container,
+.gradio-container > .main,
 .gradio-container > .main > .wrap {
     background: transparent !important;
     padding: 0 !important;
     max-width: 100% !important;
     margin: 0 !important;
     height: auto !important;
-    max-height: none !important;
+    min-height: auto !important;
 }
 
-/* ─── Navbar / Top Bar ─────────────────────────────────────────────────────── */
+/* Navbar */
 .navbar {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
+    top: 0; left: 0; right: 0;
     z-index: 1000;
     display: flex;
     align-items: center;
@@ -184,69 +132,34 @@ body::after {
     backdrop-filter: blur(var(--blur-lg));
     -webkit-backdrop-filter: blur(var(--blur-lg));
     border-bottom: 1px solid var(--border-primary);
-    transition: background var(--transition-base), border-color var(--transition-base);
-}
-
-.navbar-brand {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    text-decoration: none;
 }
 
+.navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
 .navbar-logo {
-    width: 28px;
-    height: 28px;
+    width: 28px; height: 28px;
     border-radius: var(--radius-md);
     background: linear-gradient(135deg, var(--accent), var(--purple));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 800;
-    font-size: 14px;
-    color: var(--text-inverse);
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 800; font-size: 14px; color: var(--text-inverse);
     box-shadow: var(--shadow-glow);
 }
-
-.navbar-title {
-    font-size: 15px;
-    font-weight: 700;
-    letter-spacing: -0.03em;
-    color: var(--text-primary);
-}
-
-.navbar-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
+.navbar-title { font-size: 15px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); }
+.navbar-actions { display: flex; align-items: center; gap: 8px; }
 
 .theme-toggle {
-    width: 36px;
-    height: 36px;
+    width: 36px; height: 36px;
     border-radius: var(--radius-full);
     background: var(--bg-card);
     border: 1px solid var(--border-primary);
     color: var(--text-secondary);
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: flex; align-items: center; justify-content: center;
     transition: all var(--transition-fast);
 }
+.theme-toggle:hover { background: var(--bg-card-hover); border-color: var(--border-secondary); color: var(--text-primary); }
+.theme-toggle svg { width: 16px; height: 16px; }
 
-.theme-toggle:hover {
-    background: var(--bg-card-hover);
-    border-color: var(--border-secondary);
-    color: var(--text-primary);
-}
-
-.theme-toggle svg {
-    width: 16px;
-    height: 16px;
-}
-
-/* ─── Hero Section ─────────────────────────────────────────────────────────── */
+/* Hero */
 .hero {
     padding: 120px 24px 60px;
     text-align: center;
@@ -255,12 +168,27 @@ body::after {
     position: relative;
 }
 
-.hero-title-container {
-    position: relative;
-    display: inline-block;
+.hero-badge {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 6px 14px;
+    border-radius: var(--radius-full);
+    background: var(--bg-glass);
+    border: 1px solid var(--border-primary);
+    font-size: 12px; font-weight: 500; color: var(--text-secondary);
     margin-bottom: 24px;
+    backdrop-filter: blur(var(--blur-sm));
+    -webkit-backdrop-filter: blur(var(--blur-sm));
 }
 
+.hero-badge-dot {
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 8px var(--accent-glow);
+}
+
+.hero-title-container { position: relative; display: inline-block; margin-bottom: 24px; }
+
 .hero-title {
     font-size: clamp(3.5rem, 10vw, 7rem) !important;
     font-weight: 900 !important;
@@ -284,24 +212,14 @@ body::after {
     transition: filter 0.3s ease, transform 0.3s ease;
     cursor: default;
 }
-
-.hero-letter:hover {
-    filter: drop-shadow(0 0 40px rgba(168, 85, 247, 0.6));
-    transform: translateY(-5px) scale(1.1);
-}
-
-.hero-space {
-    display: inline-block;
-    width: 0.3em;
-}
+.hero-letter:hover { filter: drop-shadow(0 0 40px rgba(168, 85, 247, 0.6)); transform: translateY(-5px) scale(1.1); }
+.hero-space { display: inline-block; width: 0.3em; }
 
 .hero-glow-bg {
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 50%; left: 50%;
     transform: translate(-50%, -50%);
-    width: 120%;
-    height: 120%;
+    width: 120%; height: 120%;
     background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.15) 0%, rgba(168, 85, 247, 0.08) 40%, transparent 70%);
     z-index: 1;
     pointer-events: none;
@@ -309,114 +227,29 @@ body::after {
     filter: blur(40px);
 }
 
-.hero-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 14px;
-    border-radius: var(--radius-full);
-    background: var(--bg-glass);
-    border: 1px solid var(--border-primary);
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--text-secondary);
-    margin-bottom: 24px;
-    backdrop-filter: blur(var(--blur-sm));
-    -webkit-backdrop-filter: blur(var(--blur-sm));
-}
-
-.hero-badge-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--accent);
-    box-shadow: 0 0 8px var(--accent-glow);
-    animation: pulse 2s ease-in-out infinite;
-}
+.hero p { font-size: 18px; color: var(--text-secondary); max-width: 560px; margin: 0 auto 32px; line-height: 1.7; }
 
-@keyframes pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.6; transform: scale(1.2); }
-}
-
-.hero h1 {
-    font-size: clamp(2.5rem, 6vw, 4rem) !important;
-    font-weight: 800 !important;
-    letter-spacing: -0.04em !important;
-    line-height: 1.1 !important;
-    margin-bottom: 16px !important;
-    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.hero p {
-    font-size: 18px;
-    color: var(--text-secondary);
-    max-width: 560px;
-    margin: 0 auto 32px;
-    line-height: 1.7;
-}
-
-.hero-cta {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    flex-wrap: wrap;
-}
+.hero-cta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
 
 .btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
+    display: inline-flex; align-items: center; gap: 8px;
     padding: 10px 20px;
     border-radius: var(--radius-md);
     font-family: var(--font-sans);
-    font-size: 14px;
-    font-weight: 600;
-    letter-spacing: -0.01em;
+    font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
     cursor: pointer;
     transition: all var(--transition-fast);
     text-decoration: none;
     border: none;
 }
+.btn-primary { background: var(--text-primary); color: var(--text-inverse); }
+.btn-primary:hover { opacity: 0.85; transform: translateY(-1px); box-shadow: var(--shadow-md); }
+.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-primary); }
+.btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--border-secondary); }
 
-.btn-primary {
-    background: var(--text-primary);
-    color: var(--text-inverse);
-}
-
-.btn-primary:hover {
-    opacity: 0.85;
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-md);
-}
-
-.btn-secondary {
-    background: var(--bg-card);
-    color: var(--text-primary);
-    border: 1px solid var(--border-primary);
-}
-
-.btn-secondary:hover {
-    background: var(--bg-card-hover);
-    border-color: var(--border-secondary);
-}
-
-/* ─── Features Section ─────────────────────────────────────────────────────── */
-.features {
-    padding: 40px 24px 60px;
-    max-width: 1100px;
-    margin: 0 auto;
-}
-
-.features-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 16px;
-}
+/* Features */
+.features { padding: 40px 24px 60px; max-width: 1100px; margin: 0 auto; }
+.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
 
 .feature-card {
     padding: 24px;
@@ -429,54 +262,29 @@ body::after {
     position: relative;
     overflow: hidden;
 }
-
 .feature-card::before {
     content: '';
-    position: absolute;
-    inset: 0;
+    position: absolute; inset: 0;
     background: linear-gradient(135deg, transparent 0%, var(--bg-card-hover) 100%);
     opacity: 0;
     transition: opacity var(--transition-base);
 }
-
-.feature-card:hover {
-    border-color: var(--border-secondary);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
-}
-
-.feature-card:hover::before {
-    opacity: 1;
-}
+.feature-card:hover { border-color: var(--border-secondary); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
+.feature-card:hover::before { opacity: 1; }
 
 .feature-icon {
-    width: 40px;
-    height: 40px;
+    width: 40px; height: 40px;
     border-radius: var(--radius-md);
     background: var(--bg-card);
     border: 1px solid var(--border-primary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: flex; align-items: center; justify-content: center;
     margin-bottom: 16px;
     color: var(--accent);
 }
+.feature-card h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--text-primary); }
+.feature-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
 
-.feature-card h3 {
-    font-size: 15px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    margin-bottom: 8px;
-    color: var(--text-primary);
-}
-
-.feature-card p {
-    font-size: 13px;
-    color: var(--text-secondary);
-    line-height: 1.6;
-}
-
-/* ─── Chat Section ─────────────────────────────────────────────────────────── */
+/* Chat Section */
 .chat-section {
     padding: 40px 24px 80px;
     max-width: 900px;
@@ -492,93 +300,48 @@ body::after {
     -webkit-backdrop-filter: blur(var(--blur-lg));
     overflow: hidden;
     box-shadow: var(--shadow-lg);
+    margin-bottom: 20px;
 }
 
 .chat-header {
     padding: 16px 20px;
     border-bottom: 1px solid var(--border-primary);
-    display: flex;
-    align-items: center;
-    gap: 12px;
+    display: flex; align-items: center; gap: 12px;
     background: var(--bg-glass-strong);
 }
+.chat-header-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
+.chat-header h3 { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
+.chat-header span { font-size: 12px; color: var(--text-tertiary); margin-left: auto; }
 
-.chat-header-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--accent);
-    box-shadow: 0 0 12px var(--accent-glow);
+/* Auth */
+.auth-box {
+    background: var(--bg-glass);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+    margin-bottom: 20px;
+    backdrop-filter: blur(var(--blur-md));
+    -webkit-backdrop-filter: blur(var(--blur-md));
 }
-
-.chat-header h3 {
+.auth-box p { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
+.auth-box button {
+    width: 100%;
+    padding: 10px 16px;
+    height: 42px;
+    background: var(--text-primary);
+    color: var(--text-inverse);
+    border: none;
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
     font-size: 13px;
     font-weight: 600;
-    letter-spacing: -0.01em;
-    color: var(--text-primary);
-}
-
-.chat-header span {
-    font-size: 12px;
-    color: var(--text-tertiary);
-    margin-left: auto;
-}
-
-/* ─── Sidebar (inline, not full-page) ─────────────────────────────────────── */
-.gradio-container .sidebar,
-.gradio-container aside {
-    background: var(--bg-glass-strong) !important;
-    backdrop-filter: blur(var(--blur-lg)) !important;
-    -webkit-backdrop-filter: blur(var(--blur-lg)) !important;
-    border: 1px solid var(--border-primary) !important;
-    border-radius: var(--radius-lg) !important;
-    padding: 20px !important;
-    margin: 0 auto 24px !important;
-    max-width: 400px !important;
-    min-width: auto !important;
-    width: 100% !important;
-    box-shadow: var(--shadow-md) !important;
-}
-
-.sidebar h1, aside h1 {
-    font-family: var(--font-sans) !important;
-    font-size: 18px !important;
-    font-weight: 700 !important;
-    letter-spacing: -0.03em !important;
-    color: var(--text-primary) !important;
-    margin-bottom: 8px !important;
-}
-
-.sidebar p, aside p {
-    font-size: 13px !important;
-    color: var(--text-secondary) !important;
-    line-height: 1.6 !important;
-}
-
-.sidebar button, aside button {
-    margin-top: 12px !important;
-    padding: 10px 16px !important;
-    height: 40px !important;
-    background: var(--text-primary) !important;
-    color: var(--text-inverse) !important;
-    border: none !important;
-    border-radius: var(--radius-md) !important;
-    font-family: var(--font-sans) !important;
-    font-size: 13px !important;
-    font-weight: 600 !important;
-    cursor: pointer !important;
-    transition: all var(--transition-fast) !important;
-}
-
-.sidebar button:hover, aside button:hover {
-    opacity: 0.85 !important;
-    transform: translateY(-1px) !important;
+    cursor: pointer;
+    transition: all var(--transition-fast);
 }
+.auth-box button:hover { opacity: 0.85; transform: translateY(-1px); }
 
-/* ─── Gradio Overrides ─────────────────────────────────────────────────────── */
-
-.chatbot,
-div[data-testid="chatbot"] {
+/* Gradio Overrides */
+.chatbot, div[data-testid="chatbot"] {
     background: transparent !important;
     border: none !important;
     border-radius: 0 !important;
@@ -586,65 +349,16 @@ div[data-testid="chatbot"] {
     height: 480px !important;
     max-height: 480px !important;
 }
+.chatbot .message-wrap, div[data-testid="chatbot"] .message-wrap { padding: 16px !important; background: transparent !important; }
 
-.chatbot .message-wrap,
-div[data-testid="chatbot"] .message-wrap {
-    padding: 16px !important;
-    background: transparent !important;
-}
-
-.message {
-    max-width: 80% !important;
-    padding: 10px 14px !important;
-    border-radius: var(--radius-md) !important;
-    font-family: var(--font-sans) !important;
-    font-size: 13px !important;
-    line-height: 1.6 !important;
-}
-
-.message.user, .user.message {
-    background: var(--bg-glass-strong) !important;
-    color: var(--text-primary) !important;
-    align-self: flex-end !important;
-    border: 1px solid var(--border-primary) !important;
-    border-bottom-right-radius: var(--radius-sm) !important;
-    backdrop-filter: blur(var(--blur-sm)) !important;
-    -webkit-backdrop-filter: blur(var(--blur-sm)) !important;
-}
-
-.message.bot, .bot.message {
-    background: var(--bg-card) !important;
-    color: var(--text-secondary) !important;
-    align-self: flex-start !important;
-    border: 1px solid var(--border-primary) !important;
-    border-bottom-left-radius: var(--radius-sm) !important;
-}
+.message { max-width: 80% !important; padding: 10px 14px !important; border-radius: var(--radius-md) !important; font-family: var(--font-sans) !important; font-size: 13px !important; line-height: 1.6 !important; }
+.message.user, .user.message { background: var(--bg-glass-strong) !important; color: var(--text-primary) !important; align-self: flex-end !important; border: 1px solid var(--border-primary) !important; border-bottom-right-radius: var(--radius-sm) !important; backdrop-filter: blur(var(--blur-sm)) !important; -webkit-backdrop-filter: blur(var(--blur-sm)) !important; }
+.message.bot, .bot.message { background: var(--bg-card) !important; color: var(--text-secondary) !important; align-self: flex-start !important; border: 1px solid var(--border-primary) !important; border-bottom-left-radius: var(--radius-sm) !important; }
 
-.message code {
-    font-family: var(--font-mono) !important;
-    font-size: 12px !important;
-    background: var(--bg-tertiary) !important;
-    border: 1px solid var(--border-primary) !important;
-    border-radius: var(--radius-sm) !important;
-    padding: 2px 6px !important;
-    color: var(--accent) !important;
-}
-
-.message pre {
-    font-family: var(--font-mono) !important;
-    font-size: 12px !important;
-    background: var(--bg-secondary) !important;
-    border: 1px solid var(--border-primary) !important;
-    border-radius: var(--radius-md) !important;
-    padding: 12px !important;
-    color: var(--text-secondary) !important;
-    overflow-x: auto !important;
-    margin-top: 8px !important;
-}
+.message code { font-family: var(--font-mono) !important; font-size: 12px !important; background: var(--bg-tertiary) !important; border: 1px solid var(--border-primary) !important; border-radius: var(--radius-sm) !important; padding: 2px 6px !important; color: var(--accent) !important; }
+.message pre { font-family: var(--font-mono) !important; font-size: 12px !important; background: var(--bg-secondary) !important; border: 1px solid var(--border-primary) !important; border-radius: var(--radius-md) !important; padding: 12px !important; color: var(--text-secondary) !important; overflow-x: auto !important; margin-top: 8px !important; }
 
-textarea,
-input[type="text"],
-.scroll-hide {
+textarea, input[type="text"], .scroll-hide {
     background: var(--bg-input) !important;
     border: 1px solid var(--border-primary) !important;
     border-radius: var(--radius-md) !important;
@@ -656,16 +370,8 @@ input[type="text"],
     transition: border-color var(--transition-fast) !important;
     caret-color: var(--accent) !important;
 }
-
-textarea:focus, input[type="text"]:focus {
-    border-color: var(--border-focus) !important;
-    outline: none !important;
-    box-shadow: 0 0 0 3px var(--accent-soft) !important;
-}
-
-textarea::placeholder, input[type="text"]::placeholder {
-    color: var(--text-tertiary) !important;
-}
+textarea:focus, input[type="text"]:focus { border-color: var(--border-focus) !important; outline: none !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
+textarea::placeholder, input[type="text"]::placeholder { color: var(--text-tertiary) !important; }
 
 button[variant="primary"], .submit-btn {
     background: var(--text-primary) !important;
@@ -680,11 +386,7 @@ button[variant="primary"], .submit-btn {
     cursor: pointer !important;
     transition: all var(--transition-fast) !important;
 }
-
-button[variant="primary"]:hover, .submit-btn:hover {
-    opacity: 0.85;
-    transform: translateY(-1px);
-}
+button[variant="primary"]:hover, .submit-btn:hover { opacity: 0.85; transform: translateY(-1px); }
 
 button[variant="secondary"] {
     background: transparent !important;
@@ -697,12 +399,7 @@ button[variant="secondary"] {
     padding: 0 14px !important;
     transition: all var(--transition-fast) !important;
 }
-
-button[variant="secondary"]:hover {
-    border-color: var(--border-secondary) !important;
-    color: var(--text-primary) !important;
-    background: var(--bg-card) !important;
-}
+button[variant="secondary"]:hover { border-color: var(--border-secondary) !important; color: var(--text-primary) !important; background: var(--bg-card) !important; }
 
 label span, .label-wrap span {
     font-family: var(--font-mono) !important;
@@ -713,12 +410,7 @@ label span, .label-wrap span {
     text-transform: uppercase !important;
 }
 
-.block, .gr-block {
-    background: transparent !important;
-    border-color: var(--border-primary) !important;
-    border-radius: var(--radius-lg) !important;
-    box-shadow: none !important;
-}
+.block, .gr-block { background: transparent !important; border-color: var(--border-primary) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; }
 
 .examples td {
     background: var(--bg-card) !important;
@@ -731,43 +423,21 @@ label span, .label-wrap span {
     cursor: pointer !important;
     transition: all var(--transition-fast) !important;
 }
+.examples td:hover { border-color: var(--border-secondary) !important; color: var(--text-primary) !important; background: var(--bg-card-hover) !important; }
 
-.examples td:hover {
-    border-color: var(--border-secondary) !important;
-    color: var(--text-primary) !important;
-    background: var(--bg-card-hover) !important;
-}
-
-/* ─── Scrollbar ────────────────────────────────────────────────────────────── */
 ::-webkit-scrollbar { width: 4px; height: 4px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 99px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
 * { scrollbar-width: thin !important; scrollbar-color: var(--border-secondary) transparent !important; }
 
-/* ─── Footer ───────────────────────────────────────────────────────────────── */
-.footer {
-    padding: 24px;
-    text-align: center;
-    border-top: 1px solid var(--border-primary);
-    color: var(--text-tertiary);
-    font-size: 12px;
-}
+.footer { padding: 24px; text-align: center; border-top: 1px solid var(--border-primary); color: var(--text-tertiary); font-size: 12px; }
+.footer a { color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); }
+.footer a:hover { color: var(--text-primary); }
 
-.footer a {
-    color: var(--text-secondary);
-    text-decoration: none;
-    transition: color var(--transition-fast);
-}
-
-.footer a:hover {
-    color: var(--text-primary);
-}
-
-/* ─── Hide Gradio Footer ───────────────────────────────────────────────────── */
 footer, .footer, .built-with { display: none !important; }
 
-/* ─── Animations (anime.js handles all) ────────────────────────────────────── */
+/* Animation states */
 .hero { opacity: 0; }
 .hero-badge { opacity: 0; }
 .hero-glow-bg { opacity: 0; }
@@ -780,30 +450,18 @@ footer, .footer, .built-with { display: none !important; }
 .chat-container { opacity: 0; }
 .footer { opacity: 0; }
 
-/* ─── Responsive ───────────────────────────────────────────────────────────── */
 @media (max-width: 768px) {
     .navbar { padding: 10px 16px; }
     .hero { padding: 100px 16px 40px; }
-    .hero h1 { font-size: 2rem !important; }
+    .hero-title { font-size: clamp(2.5rem, 8vw, 4rem) !important; }
     .hero p { font-size: 15px; }
     .features { padding: 24px 16px 40px; }
     .chat-section { padding: 24px 16px 60px; }
     .message { max-width: 90% !important; }
-    
-    .gradio-container .sidebar,
-    .gradio-container aside {
-        max-width: 100% !important;
-        margin: 0 0 16px !important;
-    }
 }
 
-/* ─── Reduced Motion ───────────────────────────────────────────────────────── */
 @media (prefers-reduced-motion: reduce) {
-    *, *::before, *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
+    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
 }
 """
 
@@ -812,9 +470,7 @@ custom_js = """
 (function() {
     const script = document.createElement('script');
     script.src = 'https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.min.js';
-    script.onload = function() {
-        initAnimations();
-    };
+    script.onload = function() { initAnimations(); };
     document.head.appendChild(script);
 })();
 
@@ -832,12 +488,9 @@ function toggleTheme() {
     document.documentElement.setAttribute('data-theme', next);
     localStorage.setItem('theme', next);
     updateThemeIcon(next);
-    anime({
-        targets: '.theme-toggle',
-        rotate: [0, 360],
-        duration: 400,
-        easing: 'easeInOutQuad'
-    });
+    if (typeof anime !== 'undefined') {
+        anime({ targets: '.theme-toggle', rotate: [0, 360], duration: 400, easing: 'easeInOutQuad' });
+    }
 }
 
 function updateThemeIcon(theme) {
@@ -867,217 +520,67 @@ function setupNavbar() {
 function initAnimations() {
     const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     if (prefersReduced) {
-        document.querySelectorAll('.hero, .hero-badge, .hero-letter, .hero-glow-bg, .hero p, .hero-cta, .features-grid, .feature-card, .chat-section, .footer').forEach(el => {
-            el.style.opacity = '1';
-        });
+        document.querySelectorAll('.hero, .hero-badge, .hero-letter, .hero-glow-bg, .hero p, .hero-cta, .features-grid, .feature-card, .chat-section, .footer').forEach(el => { el.style.opacity = '1'; });
         return;
     }
 
     // Navbar slide down
-    anime({
-        targets: '.navbar',
-        translateY: [-60, 0],
-        opacity: [0, 1],
-        duration: 600,
-        easing: 'easeOutExpo'
-    });
+    anime({ targets: '.navbar', translateY: [-60, 0], opacity: [0, 1], duration: 600, easing: 'easeOutExpo' });
 
-    // Hero entrance timeline
+    // Hero timeline
     const heroTL = anime.timeline({ easing: 'easeOutExpo' });
     heroTL
-        .add({
-            targets: '.hero-badge',
-            opacity: [0, 1],
-            translateY: [15, 0],
-            scale: [0.95, 1],
-            duration: 500
-        })
-        .add({
-            targets: '.hero-glow-bg',
-            opacity: [0, 1],
-            scale: [0.8, 1],
-            duration: 800,
-            easing: 'easeOutQuad'
-        }, '-=300')
-        .add({
-            targets: '.hero-letter',
-            opacity: [0, 1],
-            translateY: [40, 0],
-            scale: [0.8, 1],
-            delay: anime.stagger(80, { start: 100 }),
-            duration: 800,
-            easing: 'easeOutElastic(1, .6)'
-        }, '-=600')
-        .add({
-            targets: '.hero p',
-            opacity: [0, 1],
-            translateY: [20, 0],
-            duration: 600
-        }, '-=400')
-        .add({
-            targets: '.hero-cta',
-            opacity: [0, 1],
-            translateY: [20, 0],
-            duration: 600
-        }, '-=350');
-
-    // Floating orbs animation
-    anime({
-        targets: 'body::after',
-        translateX: ['-52%', '-48%'],
-        translateY: ['-2%', '2%'],
-        duration: 8000,
-        loop: true,
-        direction: 'alternate',
-        easing: 'easeInOutSine'
-    });
-
-    // Feature cards stagger on scroll
-    const scrollObserver = anime.scroll('.features', {
-        repeat: false,
-        threshold: 0.2,
-        onEnter: () => {
-            anime({
-                targets: '.feature-card',
-                opacity: [0, 1],
-                translateY: [30, 0],
-                delay: anime.stagger(120, { start: 100 }),
-                duration: 700,
-                easing: 'easeOutExpo'
-            });
-        }
-    });
-
-    // Chat section on scroll
-    anime.scroll('.chat-section', {
-        repeat: false,
-        threshold: 0.15,
-        onEnter: () => {
-            anime({
-                targets: '.chat-container',
-                opacity: [0, 1],
-                translateY: [25, 0],
-                scale: [0.98, 1],
-                duration: 600,
-                easing: 'easeOutExpo'
-            });
-        }
-    });
-
-    // Footer on scroll
-    anime.scroll('.footer', {
-        repeat: false,
-        threshold: 0.5,
-        onEnter: () => {
-            anime({
-                targets: '.footer',
-                opacity: [0, 1],
-                translateY: [15, 0],
-                duration: 500,
-                easing: 'easeOutExpo'
-            });
-        }
-    });
-
-    // Button hover micro-interactions
+        .add({ targets: '.hero-badge', opacity: [0, 1], translateY: [15, 0], scale: [0.95, 1], duration: 500 })
+        .add({ targets: '.hero-glow-bg', opacity: [0, 1], scale: [0.8, 1], duration: 800, easing: 'easeOutQuad' }, '-=300')
+        .add({ targets: '.hero-letter', opacity: [0, 1], translateY: [40, 0], scale: [0.8, 1], delay: anime.stagger(80, { start: 100 }), duration: 800, easing: 'easeOutElastic(1, .6)' }, '-=600')
+        .add({ targets: '.hero p', opacity: [0, 1], translateY: [20, 0], duration: 600 }, '-=400')
+        .add({ targets: '.hero-cta', opacity: [0, 1], translateY: [20, 0], duration: 600 }, '-=350');
+
+    // Floating orbs
+    anime({ targets: 'body::after', translateX: ['-52%', '-48%'], translateY: ['-2%', '2%'], duration: 8000, loop: true, direction: 'alternate', easing: 'easeInOutSine' });
+
+    // Features scroll
+    anime.scroll('.features', { repeat: false, threshold: 0.2, onEnter: () => {
+        anime({ targets: '.feature-card', opacity: [0, 1], translateY: [30, 0], delay: anime.stagger(120, { start: 100 }), duration: 700, easing: 'easeOutExpo' });
+    }});
+
+    // Chat scroll
+    anime.scroll('.chat-section', { repeat: false, threshold: 0.15, onEnter: () => {
+        anime({ targets: '.chat-container', opacity: [0, 1], translateY: [25, 0], scale: [0.98, 1], duration: 600, easing: 'easeOutExpo' });
+    }});
+
+    // Footer scroll
+    anime.scroll('.footer', { repeat: false, threshold: 0.5, onEnter: () => {
+        anime({ targets: '.footer', opacity: [0, 1], translateY: [15, 0], duration: 500, easing: 'easeOutExpo' });
+    }});
+
+    // Button hover
     document.querySelectorAll('.btn-primary').forEach(btn => {
-        btn.addEventListener('mouseenter', () => {
-            anime({
-                targets: btn,
-                scale: 1.03,
-                duration: 200,
-                easing: 'easeOutQuad'
-            });
-        });
-        btn.addEventListener('mouseleave', () => {
-            anime({
-                targets: btn,
-                scale: 1,
-                duration: 200,
-                easing: 'easeOutQuad'
-            });
-        });
+        btn.addEventListener('mouseenter', () => anime({ targets: btn, scale: 1.03, duration: 200, easing: 'easeOutQuad' }));
+        btn.addEventListener('mouseleave', () => anime({ targets: btn, scale: 1, duration: 200, easing: 'easeOutQuad' }));
     });
-
     document.querySelectorAll('.btn-secondary').forEach(btn => {
-        btn.addEventListener('mouseenter', () => {
-            anime({
-                targets: btn,
-                scale: 1.02,
-                duration: 200,
-                easing: 'easeOutQuad'
-            });
-        });
-        btn.addEventListener('mouseleave', () => {
-            anime({
-                targets: btn,
-                scale: 1,
-                duration: 200,
-                easing: 'easeOutQuad'
-            });
-        });
+        btn.addEventListener('mouseenter', () => anime({ targets: btn, scale: 1.02, duration: 200, easing: 'easeOutQuad' }));
+        btn.addEventListener('mouseleave', () => anime({ targets: btn, scale: 1, duration: 200, easing: 'easeOutQuad' }));
     });
 
-    // Feature card hover
+    // Card hover
     document.querySelectorAll('.feature-card').forEach(card => {
-        card.addEventListener('mouseenter', () => {
-            anime({
-                targets: card.querySelector('.feature-icon'),
-                scale: 1.1,
-                rotate: '5deg',
-                duration: 300,
-                easing: 'easeOutQuad'
-            });
-        });
-        card.addEventListener('mouseleave', () => {
-            anime({
-                targets: card.querySelector('.feature-icon'),
-                scale: 1,
-                rotate: '0deg',
-                duration: 300,
-                easing: 'easeOutQuad'
-            });
-        });
+        card.addEventListener('mouseenter', () => anime({ targets: card.querySelector('.feature-icon'), scale: 1.1, rotate: '5deg', duration: 300, easing: 'easeOutQuad' }));
+        card.addEventListener('mouseleave', () => anime({ targets: card.querySelector('.feature-icon'), scale: 1, rotate: '0deg', duration: 300, easing: 'easeOutQuad' }));
     });
 
     // Logo pulse
-    anime({
-        targets: '.navbar-logo',
-        boxShadow: [
-            '0 0 20px rgba(34, 197, 94, 0.15)',
-            '0 0 35px rgba(34, 197, 94, 0.3)',
-            '0 0 20px rgba(34, 197, 94, 0.15)'
-        ],
-        duration: 3000,
-        loop: true,
-        easing: 'easeInOutSine'
-    });
+    anime({ targets: '.navbar-logo', boxShadow: ['0 0 20px rgba(34,197,94,0.15)', '0 0 35px rgba(34,197,94,0.3)', '0 0 20px rgba(34,197,94,0.15)'], duration: 3000, loop: true, easing: 'easeInOutSine' });
 
     // Badge dot pulse
-    anime({
-        targets: '.hero-badge-dot',
-        scale: [1, 1.3, 1],
-        opacity: [1, 0.6, 1],
-        duration: 2000,
-        loop: true,
-        easing: 'easeInOutSine'
-    });
+    anime({ targets: '.hero-badge-dot', scale: [1, 1.3, 1], opacity: [1, 0.6, 1], duration: 2000, loop: true, easing: 'easeInOutSine' });
 
-    // Chat header dot pulse
-    anime({
-        targets: '.chat-header-dot',
-        scale: [1, 1.4, 1],
-        opacity: [1, 0.5, 1],
-        duration: 2500,
-        loop: true,
-        easing: 'easeInOutSine'
-    });
+    // Chat dot pulse
+    anime({ targets: '.chat-header-dot', scale: [1, 1.4, 1], opacity: [1, 0.5, 1], duration: 2500, loop: true, easing: 'easeInOutSine' });
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-    initTheme();
-    setupNavbar();
-});
+document.addEventListener('DOMContentLoaded', () => { initTheme(); setupNavbar(); });
 """
 
 # ─── App ──────────────────────────────────────────────────────────────────────
@@ -1118,7 +621,7 @@ with gr.Blocks(
         shadow_drop_lg="none",
     )
 ) as demo:
-    # ─── Landing Page (HTML sections) ─────────────────────────────────────
+    # ──��� Hero ─────────────────────────────────────────────────────────────
     gr.HTML("""
         <section class="hero">
             <div class="hero-badge">
@@ -1126,7 +629,7 @@ with gr.Blocks(
                 Powered by Featherless AI
             </div>
             <div class="hero-title-container">
-                <h1 class="hero-title" id="hero-title">
+                <h1 class="hero-title">
                     <span class="hero-letter">Y</span><span class="hero-letter">u</span><span class="hero-letter">u</span><span class="hero-letter">k</span><span class="hero-letter">i</span><span class="hero-space"> </span><span class="hero-letter">R</span><span class="hero-letter">x</span><span class="hero-letter">G</span>
                 </h1>
                 <div class="hero-glow-bg"></div>
@@ -1149,6 +652,7 @@ with gr.Blocks(
         </section>
     """)
 
+    # ─── Features ─────────────────────────────────────────────────────────
     gr.HTML("""
         <section class="features">
             <div class="features-grid">
@@ -1177,20 +681,25 @@ with gr.Blocks(
         </section>
     """)
 
-    # ─── Chat Section ─────────────────────────────────────────────────────
-    with gr.Sidebar():
-        gr.Markdown("# Yuuki-RxG")
-        gr.Markdown(
-            "Modelo servido via featherless-ai. "
-            "Inicia sesión con tu cuenta de Hugging Face para acceder a la inferencia."
-        )
-        login_btn = gr.LoginButton("Iniciar sesión")
+    # ─── Chat ─────────────────────────────────────────────────────────────
+    with gr.Column(elem_classes="chat-section"):
+        gr.HTML("""
+            <div class="chat-container" id="chat">
+                <div class="chat-header">
+                    <span class="chat-header-dot"></span>
+                    <h3>Chat con Yuuki-RxG</h3>
+                    <span>Featherless AI</span>
+                </div>
+            </div>
+        """)
 
-    gr.load(
-        "models/OpceanAI/Yuuki-RxG",
-        accept_token=login_btn,
-        provider="featherless-ai",
-    )
+        login_btn = gr.LoginButton("Iniciar sesión con Hugging Face", elem_classes="auth-box")
+
+        gr.load(
+            "models/OpceanAI/Yuuki-RxG",
+            accept_token=login_btn,
+            provider="featherless-ai",
+        )
 
     # ─── Footer ───────────────────────────────────────────────────────────
     gr.HTML("""