app.py

import gradio as gr
import os
import httpx
import json

API_URL = "https://api.featherless.ai/v1/chat/completions"
MODEL = "OpceanAI/Yuuki-RxG"

def get_token(request: gr.Request):
    if request and hasattr(request, "oauth_token") and request.oauth_token:
        return request.oauth_token
    return os.environ.get("HF_TOKEN")

def chat_stream(message, history, request: gr.Request):
    token = get_token(request)
    if not token:
        yield history + [(message, "⚠️ Por favor, inicia sesión con tu cuenta de Hugging Face para usar el chat.")]
        return
    
    messages = []
    for user_msg, bot_msg in history:
        if user_msg:
            messages.append({"role": "user", "content": user_msg})
        if bot_msg:
            messages.append({"role": "assistant", "content": bot_msg})
    messages.append({"role": "user", "content": message})
    
    headers = {"Authorization": f"Bearer {token}", "Content-Type": "application/json"}
    payload = {"model": MODEL, "messages": messages, "stream": True, "max_tokens": 2048}
    
    chat_history = history + [(message, None)]
    yield chat_history
    
    full_response = ""
    try:
        with httpx.Client(timeout=60.0) as client:
            with client.stream("POST", API_URL, json=payload, headers=headers) as response:
                if response.status_code != 200:
                    yield chat_history[:-1] + [(message, f"❌ Error {response.status_code}")]
                    return
                for line in response.iter_lines():
                    if not line.startswith("data: "):
                        continue
                    data = line[6:]
                    if data.strip() == "[DONE]":
                        break
                    try:
                        chunk = json.loads(data)
                        delta = chunk.get("choices", [{}])[0].get("delta", {})
                        content = delta.get("content", "")
                        if content:
                            full_response += content
                            yield chat_history[:-1] + [(message, full_response)]
                    except (json.JSONDecodeError, IndexError, KeyError):
                        continue
    except Exception as e:
        yield chat_history[:-1] + [(message, f"❌ Error: {str(e)}")]

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 {
    --bg-primary: #09090b;
    --bg-secondary: #111113;
    --bg-tertiary: #18181b;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-card-hover: rgba(255, 255, 255, 0.05);
    --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);
    --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;
    --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, 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);
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f4f4f5;
    --bg-tertiary: #e4e4e7;
    --bg-card: rgba(0, 0, 0, 0.02);
    --bg-card-hover: rgba(0, 0, 0, 0.04);
    --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);
    --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);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
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;
    color: var(--text-primary) !important;
    background: var(--bg-primary) !important;
    -webkit-font-smoothing: antialiased !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100vh !important;
}

body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 9999;
    opacity: 0.015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 128px 128px;
}

body::after {
    content: '';
    position: fixed; top: -30%; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 60vh;
    background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 70%);
    pointer-events: none; z-index: -1; opacity: 0.4;
}

.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; min-height: auto !important;
}

/* Navbar */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg));
    border-bottom: 1px solid var(--border-primary);
}
.navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.navbar-logo {
    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);
    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; }
.theme-toggle {
    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;
    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; }

/* Hero */
.hero { padding: 120px 24px 60px; text-align: center; max-width: 900px; margin: 0 auto; position: relative; }
.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;
    letter-spacing: -0.02em !important; line-height: 1 !important; margin: 0 !important;
    position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap;
}
.hero-letter {
    display: inline-block;
    background: linear-gradient(135deg, #22c55e 0%, #a855f7 50%, #3b82f6 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 20px rgba(34, 197, 94, 0.3));
    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-glow-bg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    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; opacity: 0; filter: blur(40px);
}
.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; }
.btn {
    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;
    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); }

/* 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; border-radius: var(--radius-lg); background: var(--bg-glass);
    border: 1px solid var(--border-primary); backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    transition: all var(--transition-base); position: relative; overflow: hidden;
}
.feature-card::before {
    content: ''; 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-icon {
    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;
    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; }

/* Chat */
.chat-section { padding: 40px 24px 80px; max-width: 900px; margin: 0 auto; }
.chat-container {
    border-radius: var(--radius-xl); background: var(--bg-glass);
    border: 1px solid var(--border-primary); backdrop-filter: blur(var(--blur-lg));
    -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; 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; }

/* Auth */
.auth-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.auth-row p { font-size: 13px; color: var(--text-secondary); flex: 1; }
.auth-login-btn {
    padding: 8px 16px; height: 36px;
    background: var(--text-primary); color: var(--text-inverse);
    border: none; border-radius: var(--radius-md);
    font-family: var(--font-sans); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all var(--transition-fast);
}
.auth-login-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* Gradio Overrides */
.chatbot, div[data-testid="chatbot"] {
    background: transparent !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; height: 480px !important; max-height: 480px !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 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 {
    background: var(--bg-input) !important; border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-md) !important; color: var(--text-primary) !important;
    font-family: var(--font-sans) !important; font-size: 13px !important;
    padding: 10px 14px !important; resize: none !important; 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; }

button[variant="primary"], .submit-btn {
    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;
    height: 38px !important; padding: 0 18px !important; cursor: pointer !important;
    transition: all var(--transition-fast) !important;
}
button[variant="primary"]:hover, .submit-btn:hover { opacity: 0.85; transform: translateY(-1px); }
button[variant="secondary"] {
    background: transparent !important; color: var(--text-secondary) !important;
    border: 1px solid var(--border-primary) !important; border-radius: var(--radius-md) !important;
    font-family: var(--font-sans) !important; font-size: 12px !important;
    height: 34px !important; 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; }

label span, .label-wrap span {
    font-family: var(--font-mono) !important; font-size: 10px !important; font-weight: 500 !important;
    letter-spacing: 0.08em !important; color: var(--text-tertiary) !important; 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; }

::-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 { 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, .footer, .built-with { display: none !important; }

/* Animation states */
.hero { opacity: 0; }
.hero-badge { opacity: 0; }
.hero-glow-bg { opacity: 0; }
.hero-letter { opacity: 0; }
.hero p { opacity: 0; }
.hero-cta { opacity: 0; }
.features-grid { opacity: 1; }
.feature-card { opacity: 0; }
.chat-section { opacity: 1; }
.chat-container { opacity: 0; }
.footer { opacity: 0; }

@media (max-width: 768px) {
    .navbar { padding: 10px 16px; }
    .hero { padding: 100px 16px 40px; }
    .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; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
"""

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(); };
    document.head.appendChild(script);
})();

function initTheme() {
    const stored = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const theme = stored || (prefersDark ? 'dark' : 'light');
    document.documentElement.setAttribute('data-theme', theme);
    updateThemeIcon(theme);
}

function toggleTheme() {
    const current = document.documentElement.getAttribute('data-theme');
    const next = current === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', next);
    localStorage.setItem('theme', next);
    updateThemeIcon(next);
    if (typeof anime !== 'undefined') {
        anime({ targets: '.theme-toggle', rotate: [0, 360], duration: 400, easing: 'easeInOutQuad' });
    }
}

function updateThemeIcon(theme) {
    const btn = document.querySelector('.theme-toggle');
    if (!btn) return;
    const isDark = theme === 'dark';
    btn.innerHTML = isDark 
        ? '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>'
        : '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>';
}

function setupNavbar() {
    const navbar = document.createElement('nav');
    navbar.className = 'navbar';
    navbar.innerHTML = `
        <div class="navbar-brand">
            <div class="navbar-logo">Y</div>
            <span class="navbar-title">Yuuki-RxG</span>
        </div>
        <div class="navbar-actions">
            <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme"></button>
        </div>
    `;
    document.body.insertBefore(navbar, document.body.firstChild);
}

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'; });
        return;
    }

    anime({ targets: '.navbar', translateY: [-60, 0], opacity: [0, 1], duration: 600, easing: 'easeOutExpo' });

    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');

    anime({ targets: 'body::after', translateX: ['-52%', '-48%'], translateY: ['-2%', '2%'], duration: 8000, loop: true, direction: 'alternate', easing: 'easeInOutSine' });

    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' });
    }});

    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' });
    }});

    anime.scroll('.footer', { repeat: false, threshold: 0.5, onEnter: () => {
        anime({ targets: '.footer', opacity: [0, 1], translateY: [15, 0], duration: 500, easing: 'easeOutExpo' });
    }});

    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' }));
    });
    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' }));
    });

    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' }));
    });

    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: '.hero-badge-dot', scale: [1, 1.3, 1], opacity: [1, 0.6, 1], duration: 2000, loop: true, easing: 'easeInOutSine' });
    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(); });
"""

# ─── App ──────────────────────────────────────────────────────────────────────
with gr.Blocks(
    fill_height=False,
    title="Yuuki-RxG",
) as demo:
    # ─── Hero ─────────────────────────────────────────────────────────────
    gr.HTML("""
        <section class="hero">
            <div class="hero-badge">
                <span class="hero-badge-dot"></span>
                Powered by Featherless AI
            </div>
            <div class="hero-title-container">
                <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>
            </div>
            <p>Modelo de lenguaje de última generación servido vía featherless-ai. Inferencia rápida, segura y con autenticación Hugging Face.</p>
            <div class="hero-cta">
                <a href="#chat" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
                    Iniciar chat
                </a>
                <a href="https://huggingface.co/OpceanAI/Yuuki-RxG" target="_blank" class="btn btn-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1-2.5-1.5-5.5-1.5-8 0-2-1-3-1-3-1-.28 1.15-.28 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18H6a2 2 0 0 1-2-2v-1a2 2 0 0 1 2-2h3"/></svg>
                    Ver modelo
                </a>
                <a href="https://github.com/OpceanAI" target="_blank" class="btn btn-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1-2.5-1.5-5.5-1.5-8 0-2-1-3-1-3-1-.28 1.15-.28 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18H6a2 2 0 0 1-2-2v-1a2 2 0 0 1 2-2h3"/></svg>
                    GitHub
                </a>
            </div>
        </section>
    """)

    # ─── Features ─────────────────────────────────────────────────────────
    gr.HTML("""
        <section class="features">
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                    </div>
                    <h3>Inferencia Ultra-Rápida</h3>
                    <p>Respuestas en milisegundos gracias a la infraestructura optimizada de Featherless AI.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                    </div>
                    <h3>Autenticación Segura</h3>
                    <p>Acceso protegido con OAuth de Hugging Face. Solo usuarios autorizados pueden interactuar.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg>
                    </div>
                    <h3>Privacidad Primero</h3>
                    <p>Tus conversaciones no se almacenan. Cada sesión es efímera y completamente privada.</p>
                </div>
            </div>
        </section>
    """)

    # ─── 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>
        """)

        login_btn = gr.LoginButton("Iniciar sesión con Hugging Face", elem_classes="auth-login-btn")

        chatbot = gr.Chatbot(height=480)
        msg = gr.Textbox(placeholder="Escribe tu mensaje...", lines=1)
        clear = gr.Button("Limpiar chat", variant="secondary")

        msg.submit(chat_stream, [msg, chatbot], [chatbot])
        msg.submit(lambda: "", None, [msg])
        clear.click(lambda: [], None, [chatbot], queue=False)

    # ─── Footer ───────────────────────────────────────────────────────────
    gr.HTML("""
        <footer class="footer">
            <p>Construido con <a href="https://gradio.app" target="_blank">Gradio</a> · 
            Servido vía <a href="https://featherless.ai" target="_blank">Featherless AI</a> · 
            <a href="https://huggingface.co/OpceanAI/Yuuki-RxG" target="_blank">Hugging Face</a> ·
            <a href="https://github.com/OpceanAI" target="_blank">GitHub</a></p>
        </footer>
    """)

if __name__ == "__main__":
    try:
        demo.launch(
            css=custom_css,
            js=custom_js,
            theme=gr.themes.Base(
                primary_hue="zinc", neutral_hue="zinc",
                font=gr.themes.GoogleFont("Inter"), font_mono=gr.themes.GoogleFont("JetBrains Mono"),
                radius_size=gr.themes.sizes.radius_sm, spacing_size=gr.themes.sizes.spacing_sm,
            ).set(
                body_background_fill="#09090b", body_text_color="#fafafa",
                background_fill_primary="#09090b", background_fill_secondary="#111113",
                border_color_primary="rgba(255,255,255,0.08)", color_accent="#22c55e",
                color_accent_soft="rgba(34,197,94,0.12)",
                button_primary_background_fill="#fafafa", button_primary_text_color="#09090b",
                button_primary_background_fill_hover="#e4e4e7",
                button_secondary_background_fill="transparent",
                button_secondary_border_color="rgba(255,255,255,0.08)",
                button_secondary_text_color="#a1a1aa",
                block_border_color="rgba(255,255,255,0.08)", block_background_fill="transparent",
                block_shadow="none", input_background_fill="rgba(255,255,255,0.04)",
                input_border_color="rgba(255,255,255,0.08)",
                input_border_color_focus="rgba(255,255,255,0.25)", input_shadow_focus="none",
                shadow_drop="none", shadow_drop_lg="none",
            )
        )
    finally:
        import asyncio
        try:
            loop = asyncio.get_event_loop()
            if loop.is_running():
                loop.stop()
            if not loop.is_closed():
                loop.close()
        except Exception:
            pass