Update app.py

app.py

@@ -1,15 +1,11 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
-import time
 
-# Função principal que chama o modelo
+# Função principal do chatbot
 def respond(message, history: list[dict[str, str]], hf_token: gr.OAuthToken):
     client = InferenceClient(token=hf_token.token, model="openai/gpt-oss-20b")
     system_message = """You are BitAI (or Bit for short), a friendly chatbot created by the user "Sal". 
-You always respond politely and helpfully. If a user requests something appropriate, fulfill it. 
-If a user requests something harmful, illegal, or inappropriate, politely refuse. 
-If a user keeps insisting on harmful requests, firmly tell them to stop and that they cannot use the service for that purpose.
-Keep a simple, approachable, and friendly tone otherwise."""
+You respond politely, refuse inapropriate requests, and keep a friendly tone."""
     
     messages = [{"role": "system", "content": system_message}]
     messages.extend(history)
@@ -17,644 +13,91 @@ Keep a simple, approachable, and friendly tone otherwise."""
 
     response = ""
     for chunk in client.chat_completion(messages, max_tokens=512, stream=True, temperature=0.7, top_p=0.95):
-        token = ""
-        if chunk.choices and chunk.choices[0].delta.content:
-            token = chunk.choices[0].delta.content
+        token = chunk.choices[0].delta.content if chunk.choices and chunk.choices[0].delta.content else ""
         response += token
         yield response
 
-# JS para animações suaves
+# JS para animações e ajustes visuais
 fade_js = """
 <script>
 document.addEventListener("DOMContentLoaded", () => {
-    // Add title and subtitle
-    setTimeout(() => {
-        const chatContainer = document.querySelector(".chat-interface");
-        const gradioContainer = document.querySelector(".gradio-container");
-        
-        if (gradioContainer && !document.querySelector(".chat-title")) {
-            const titleContainer = document.createElement("div");
-            titleContainer.className = "title-container";
-            
-            const title = document.createElement("h1");
-            title.className = "chat-title";
-            title.textContent = "Talk with BitAI (W.I.P)";
-            
-            const subtitle = document.createElement("p");
-            subtitle.className = "chat-subtitle";
-            subtitle.innerHTML = "Me, Sal is still updating this AI, he cannot search on internet, he might not know how to answer you, filter is a little broken";
-            
-            titleContainer.appendChild(title);
-            titleContainer.appendChild(subtitle);
-            
-            // Insert before the login button
-            const loginButton = document.querySelector(".gr-button.gr-login");
-            if (loginButton) {
-                gradioContainer.insertBefore(titleContainer, loginButton);
-            } else {
-                gradioContainer.insertBefore(titleContainer, gradioContainer.firstChild);
-            }
-            
-            // Animate in
-            setTimeout(() => {
-                titleContainer.style.opacity = "1";
-                titleContainer.style.transform = "translateY(0)";
-            }, 100);
-        }
-    }, 100);
+    // Título animado
+    const grContainer = document.querySelector(".gradio-container");
+    if(grContainer && !document.querySelector(".chat-title")) {
+        const titleContainer = document.createElement("div");
+        titleContainer.className = "title-container";
+        titleContainer.innerHTML = `
+            <h1 class="chat-title">Talk with BitAI (W.I.P)</h1>
+            <p class="chat-subtitle">Still updating, might not know everything, filter slightly broken</p>
+        `;
+        grContainer.insertBefore(titleContainer, grContainer.firstChild);
+        setTimeout(()=>{titleContainer.style.opacity="1"; titleContainer.style.transform="translateY(0)";},100);
+    }
 
-    // Add startup message
-    setTimeout(() => {
-        const chatContainer = document.querySelector(".chat-interface");
-        if (chatContainer && chatContainer.children.length === 0) {
-            const startupMsg = document.createElement("div");
-            startupMsg.className = "startup-message";
-            startupMsg.innerHTML = '<div class="startup-content"><div class="startup-icon">🤖</div><div class="startup-text"><div class="startup-title">BitAI</div><div class="startup-subtitle">How was your day? Good morning!</div><div class="startup-note">Entirely made by AI</div></div></div>';
-            chatContainer.appendChild(startupMsg);
-            
-            // Animate in
-            setTimeout(() => {
-                startupMsg.style.opacity = "1";
-                startupMsg.style.transform = "translateY(0)";
-            }, 100);
-        }
-    }, 500);
+    // Startup message
+    const chatContainer = document.querySelector(".chat-interface");
+    if(chatContainer && chatContainer.children.length===0){
+        const startupMsg = document.createElement("div");
+        startupMsg.className="startup-message";
+        startupMsg.innerHTML='<div class="startup-content"><div class="startup-icon">🤖</div><div class="startup-text"><div class="startup-title">BitAI</div><div class="startup-subtitle">How was your day? Good morning!</div><div class="startup-note">Entirely AI</div></div></div>';
+        chatContainer.appendChild(startupMsg);
+        setTimeout(()=>{startupMsg.style.opacity="1"; startupMsg.style.transform="translateY(0)";},100);
+    }
 
-    // Observer for chat messages
+    // Observador para animação de novas mensagens
     const observer = new MutationObserver(mutations => {
         mutations.forEach(m => {
             m.addedNodes.forEach(node => {
-                if (node.classList && node.classList.contains('chat-message')) {
-                    // Remove startup message when first real message appears
+                if(node.classList?.contains('chat-message')){
                     const startupMsg = document.querySelector(".startup-message");
-                    if (startupMsg) {
-                        startupMsg.style.opacity = "0";
-                        startupMsg.style.transform = "translateY(20px)";
-                        setTimeout(() => {
-                            startupMsg.remove();
-                        }, 300);
-                    }
-                    
-                    // Enhanced message animation
-                    node.style.opacity = 0;
-                    node.style.transform = 'translateY(20px) scale(0.95)';
-                    node.style.transition = 'opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease';
-                    
-                    requestAnimationFrame(() => {
-                        node.style.opacity = 1;
-                        node.style.transform = 'translateY(0) scale(1)';
-                        
-                        // Add subtle shadow on appearance
-                        setTimeout(() => {
-                            node.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
-                        }, 500);
-                    });
+                    if(startupMsg){startupMsg.style.opacity="0"; startupMsg.style.transform="translateY(20px)"; setTimeout(()=>startupMsg.remove(),300);}
+                    node.style.opacity=0; node.style.transform='translateY(20px) scale(0.95)';
+                    node.style.transition='all 0.5s ease, box-shadow 0.3s ease';
+                    requestAnimationFrame(()=>{node.style.opacity=1; node.style.transform='translateY(0) scale(1)'; setTimeout(()=>node.style.boxShadow='0 4px 15px rgba(0,0,0,0.2)',500);});
                 }
             });
         });
     });
+    if(chatContainer) observer.observe(chatContainer, {childList:true, subtree:true});
 
-    const chatContainer = document.querySelector(".chat-interface");
-    if (chatContainer) observer.observe(chatContainer, {childList: true, subtree: true});
-
-    // Enhanced typing animation for textarea
-    const txt = document.querySelector("textarea");
-    if (txt) {
-        txt.addEventListener("focus", () => {
-            txt.style.transition = "all 0.3s ease";
-            txt.style.transform = "translateY(-2px)";
-            txt.style.boxShadow = "0 5px 15px rgba(0,0,0,0.2)";
-        });
-        
-        txt.addEventListener("blur", () => {
-            txt.style.transform = "translateY(0)";
-            txt.style.boxShadow = "0 2px 8px rgba(0,0,0,0.1)";
-        });
-    }
+    // Button dentro do textarea
+    const btn = document.querySelector(".send-btn");
+    const txtCont = document.querySelector(".input-container");
+    if(btn && txtCont){txtCont.style.position="relative"; btn.style.position="absolute"; btn.style.right="8px"; btn.style.top="8px"; btn.style.width="40px"; btn.style.height="40px";}
 
-    // Move button inside textarea
-    setTimeout(() => {
-        const btn = document.querySelector(".send-btn");
-        const textareaContainer = document.querySelector(".input-container");
-        
-        if (btn && textareaContainer) {
-            // Position button inside textarea
-            btn.style.position = "absolute";
-            btn.style.right = "8px";
-            btn.style.top = "8px";
-            btn.style.zIndex = "10";
-            btn.style.marginLeft = "0";
-            btn.style.width = "40px";
-            btn.style.height = "40px";
-            
-            // Add container for positioning
-            textareaContainer.style.position = "relative";
-        }
-    }, 100);
-
-    // Enhanced button animation
-    const addButtonAnimations = () => {
-        const btn = document.querySelector(".send-btn");
-        if (btn) {
-            btn.addEventListener("mouseenter", () => {
-                btn.style.transform = "scale(1.05)";
-                btn.style.boxShadow = "0 5px 15px rgba(0,0,0,0.3)";
-            });
-            
-            btn.addEventListener("mouseleave", () => {
-                btn.style.transform = "scale(1)";
-                btn.style.boxShadow = "0 2px 8px rgba(0,0,0,0.2)";
-            });
-            
-            btn.addEventListener("mousedown", () => {
-                btn.style.transform = "scale(0.95)";
-            });
-            
-            btn.addEventListener("mouseup", () => {
-                btn.style.transform = "scale(1.05)";
-            });
-            
-            btn.addEventListener("click", () => {
-                // Bounce effect
-                btn.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
-                btn.style.transform = "scale(0.9)";
-                
-                setTimeout(() => {
-                    btn.style.transform = "scale(1)";
-                }, 500);
-                
-                // Ripple effect
-                const ripple = document.createElement("span");
-                ripple.classList.add("ripple-effect");
-                btn.appendChild(ripple);
-                
-                setTimeout(() => {
-                    ripple.remove();
-                }, 600);
-            });
-        }
-    };
-    
-    // Add button animations after a short delay
-    setTimeout(addButtonAnimations, 200);
-    
-    // Add bounce effect to all buttons and interactive elements
-    const addBounceToElements = () => {
-        // All buttons
-        const allButtons = document.querySelectorAll("button");
-        allButtons.forEach(button => {
-            // Skip if already has bounce effect
-            if (button.hasAttribute("data-bounce-added")) return;
-            
-            button.setAttribute("data-bounce-added", "true");
-            
-            button.addEventListener("click", function() {
-                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
-                this.style.transform = "scale(0.95)";
-                
-                setTimeout(() => {
-                    this.style.transform = "scale(1)";
-                }, 500);
-            });
-        });
-        
-        // Chat messages
-        const chatMessages = document.querySelectorAll(".chat-message");
-        chatMessages.forEach(message => {
-            if (message.hasAttribute("data-bounce-added")) return;
-            
-            message.setAttribute("data-bounce-added", "true");
-            
-            message.addEventListener("click", function() {
-                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
-                this.style.transform = "scale(0.98)";
-                
-                setTimeout(() => {
-                    this.style.transform = "scale(1)";
-                }, 500);
-            });
-        });
-        
-        // Textarea
-        const textareas = document.querySelectorAll("textarea");
-        textareas.forEach(textarea => {
-            if (textarea.hasAttribute("data-bounce-added")) return;
-            
-            textarea.setAttribute("data-bounce-added", "true");
-            
-            textarea.addEventListener("click", function() {
-                this.style.transition = "transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
-                this.style.transform = "scale(0.99)";
-                
-                setTimeout(() => {
-                    this.style.transform = "scale(1)";
-                }, 300);
-            });
-        });
-        
-        // Login button
-        const loginBtn = document.querySelector(".gr-button.gr-login");
-        if (loginBtn && !loginBtn.hasAttribute("data-bounce-added")) {
-            loginBtn.setAttribute("data-bounce-added", "true");
-            
-            loginBtn.addEventListener("click", function() {
-                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
-                this.style.transform = "scale(0.95)";
-                
-                setTimeout(() => {
-                    this.style.transform = "scale(1)";
-                }, 500);
-            });
-        }
-        
-        // Title and subtitle
-        const title = document.querySelector(".chat-title");
-        const subtitle = document.querySelector(".chat-subtitle");
-        
-        if (title && !title.hasAttribute("data-bounce-added")) {
-            title.setAttribute("data-bounce-added", "true");
-            
-            title.addEventListener("click", function() {
-                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
-                this.style.transform = "scale(0.98)";
-                
-                setTimeout(() => {
-                    this.style.transform = "scale(1)";
-                }, 500);
-            });
-        }
-        
-        if (subtitle && !subtitle.hasAttribute("data-bounce-added")) {
-            subtitle.setAttribute("data-bounce-added", "true");
-            
-            subtitle.addEventListener("click", function() {
-                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
-                this.style.transform = "scale(0.98)";
-                
-                setTimeout(() => {
-                    this.style.transform = "scale(1)";
-                }, 500);
-            });
-        }
-        
-        // Startup message
-        const startupMsg = document.querySelector(".startup-message");
-        if (startupMsg && !startupMsg.hasAttribute("data-bounce-added")) {
-            startupMsg.setAttribute("data-bounce-added", "true");
-            
-            startupMsg.addEventListener("click", function() {
-                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
-                this.style.transform = "scale(0.98)";
-                
-                setTimeout(() => {
-                    this.style.transform = "scale(1)";
-                }, 500);
-            });
-        }
-        
-        // Chatbot container
-        const chatbotContainer = document.querySelector(".gr-chatbot");
-        if (chatbotContainer && !chatbotContainer.hasAttribute("data-bounce-added")) {
-            chatbotContainer.setAttribute("data-bounce-added", "true");
-            
-            chatbotContainer.addEventListener("click", function() {
-                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
-                this.style.transform = "scale(0.995)";
-                
-                setTimeout(() => {
-                    this.style.transform = "scale(1)";
-                }, 500);
-            });
-        }
+    // Função genérica de bounce
+    const bounce = el=>{
+        if(!el || el.hasAttribute("data-bounce-added")) return;
+        el.setAttribute("data-bounce-added","true");
+        el.addEventListener("click",()=>{el.style.transition="transform 0.5s cubic-bezier(0.68,-0.55,0.27,1.55)"; el.style.transform="scale(0.95)"; setTimeout(()=>el.style.transform="scale(1)",500);});
     };
-    
-    // Add bounce to existing elements
-    addBounceToElements();
-    
-    // Observe for new elements
-    const elementObserver = new MutationObserver(addBounceToElements);
-    elementObserver.observe(document.body, { childList: true, subtree: true });
-    
-    // Add subtle pulse animation to login button
-    const loginBtn = document.querySelector(".gr-button.gr-login");
-    if (loginBtn) {
-        setInterval(() => {
-            loginBtn.style.boxShadow = "0 0 0 0 rgba(68, 68, 68, 0.7)";
-            setTimeout(() => {
-                loginBtn.style.transition = "box-shadow 0.5s ease";
-                loginBtn.style.boxShadow = "0 0 0 8px rgba(68, 68, 68, 0)";
-            }, 50);
-        }, 3000);
-    }
+    document.querySelectorAll("button, .chat-message, textarea, .gr-button.gr-login, .chat-title, .chat-subtitle, .startup-message, .gr-chatbot").forEach(bounce);
 });
 </script>
 """
 
+# Gradio interface
 with gr.Blocks(css="""
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Manrope:wght@300;400;500;600&family=Outfit:wght@300;400;500;600&display=swap');
-
-body { 
-    background-color: #000; 
-    margin: 0; 
-    padding: 0; 
-}
-.gradio-container { 
-    border-radius: 20px; 
-    padding: 20px; 
-    max-width: 700px; 
-    margin: 30px auto; 
-    background: linear-gradient(145deg, #0f0f0f, #1a1a1a); 
-    box-shadow: 0 10px 30px rgba(0,0,0,0.4); 
-    overflow: hidden;
-    transition: transform 0.3s ease;
-    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif;
-}
-.gradio-container:active {
-    transform: scale(0.995);
-}
-/* Title container */
-.title-container {
-    text-align: center;
-    margin-bottom: 25px;
-    opacity: 0;
-    transform: translateY(-20px);
-    transition: opacity 0.5s ease, transform 0.5s ease;
-}
-.chat-title {
-    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
-    font-weight: 700;
-    font-size: 32px;
-    color: #fff;
-    margin-bottom: 10px;
-    letter-spacing: -0.02em;
-    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
-    cursor: pointer;
-    transition: transform 0.3s ease;
-}
-.chat-subtitle {
-    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif;
-    font-weight: 400;
-    font-size: 14px;
-    color: #aaa;
-    line-height: 1.5;
-    max-width: 600px;
-    margin: 0 auto;
-    cursor: pointer;
-    transition: transform 0.3s ease;
-}
-.chat-message { 
-    border-radius: 20px; 
-    padding: 16px 20px; 
-    margin: 12px 0; 
-    display: flex; 
-    flex-direction: column; 
-    opacity: 0;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
-    cursor: pointer;
-    font-family: 'Outfit', 'Manrope', 'Inter', sans-serif;
-    font-weight: 400;
-    letter-spacing: -0.01em;
-}
-.chat-message.user { 
-    background: linear-gradient(145deg, #252525, #1f1f1f); 
-    color: #fff; 
-    align-items: flex-end; 
-    border-bottom-right-radius: 5px; 
-    margin-left: 40px;
-    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
-    font-weight: 500;
-}
-.chat-message.bot { 
-    background: linear-gradient(145deg, #2e2e2e, #252525); 
-    color: #fff; 
-    align-items: flex-start; 
-    border-bottom-left-radius: 5px; 
-    margin-right: 40px;
-    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif;
-    font-weight: 400;
-}
-/* Startup message */
-.startup-message {
-    opacity: 0;
-    transform: translateY(20px);
-    transition: opacity 0.5s ease, transform 0.5s ease;
-    margin: 20px 0;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    font-family: 'Outfit', 'Manrope', 'Inter', sans-serif;
-}
-.startup-content {
-    display: flex;
-    align-items: center;
-    background: linear-gradient(145deg, #2e2e2e, #252525);
-    padding: 20px;
-    border-radius: 20px;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-    max-width: 80%;
-    transition: transform 0.3s ease;
-}
-.startup-icon {
-    font-size: 32px;
-    margin-right: 15px;
-}
-.startup-text {
-    text-align: left;
-}
-.startup-title {
-    font-weight: 600;
-    font-size: 18px;
-    margin-bottom: 5px;
-    color: #fff;
-    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
-    letter-spacing: -0.02em;
-}
-.startup-subtitle {
-    font-size: 16px;
-    margin-bottom: 3px;
-    color: #eee;
-    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif;
-    font-weight: 500;
-    letter-spacing: -0.01em;
-}
-.startup-note {
-    font-size: 12px;
-    color: #aaa;
-    font-style: italic;
-    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
-    font-weight: 300;
-    letter-spacing: 0.01em;
-}
-textarea { 
-    border: none; 
-    outline: none; 
-    border-radius: 25px; 
-    padding: 14px 20px; 
-    padding-right: 60px; /* Space for button */
-    background-color: #1a1a1a; 
-    color: #fff; 
-    font-size: 16px; 
-    flex: 1; 
-    height: 56px; 
-    min-height: 56px; 
-    box-sizing: border-box; 
-    resize: none; 
-    transition: all 0.3s ease;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    width: 100%;
-    cursor: pointer;
-    line-height: 1.5;
-    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
-    font-weight: 400;
-}
-.send-btn { 
-    border: none; 
-    border-radius: 20px; 
-    background: linear-gradient(145deg, #555, #444); 
-    color: #fff; 
-    width: 40px; 
-    height: 40px; 
-    font-size: 18px; 
-    display: flex; 
-    align-items: center; 
-    justify-content: center; 
-    cursor: pointer; 
-    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
-    position: absolute;
-    right: 8px;
-    top: 8px;
-    overflow: hidden;
-    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
-}
-.send-btn:hover { 
-    background: linear-gradient(145deg, #666, #555); 
-    transform: scale(1.05);
-}
-.gr-button.gr-login { 
-    border-radius: 25px !important; 
-    background: linear-gradient(145deg, #333, #222) !important; 
-    color: #fff !important; 
-    margin-bottom: 20px; 
-    padding: 14px 24px; 
-    transition: all 0.3s ease !important;
-    border: none !important;
-    cursor: pointer !important;
-    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif !important;
-    font-weight: 500 !important;
-}
-.gr-button.gr-login:hover { 
-    background: linear-gradient(145deg, #444, #333) !important; 
-    transform: translateY(-2px);
-}
-.input-container { 
-    display: flex; 
-    margin-top: 15px; 
-    position: relative;
-}
-.gr-chatbot { 
-    border-radius: 15px; 
-    overflow: hidden; 
-    background: #1a1a1a;
-    padding: 15px;
-    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
-    min-height: 400px;
-    cursor: pointer;
-    transition: transform 0.3s ease;
-    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif;
-}
-.gr-box { 
-    border-radius: 15px; 
-}
-.gr-button-primary { 
-    border-radius: 25px !important; 
-}
-/* Ripple effect */
-.ripple-effect {
-    position: absolute;
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.3);
-    transform: scale(0);
-    animation: ripple 0.6s linear;
-    width: 100px;
-    height: 100px;
-    top: calc(50% - 50px);
-    left: calc(50% - 50px);
-}
-@keyframes ripple {
-    to {
-        transform: scale(2.5);
-        opacity: 0;
-    }
-}
-/* Bounce animation */
-@keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
-    40% {transform: translateY(-10px);}
-    60% {transform: translateY(-5px);}
-}
-.bounce {
-    animation: bounce 0.8s;
-}
-/* Scrollbar styling */
-::-webkit-scrollbar {
-    width: 8px;
-}
-::-webkit-scrollbar-track {
-    background: #1a1a1a;
-    border-radius: 4px;
-}
-::-webkit-scrollbar-thumb {
-    background: #444;
-    border-radius: 4px;
-}
-::-webkit-scrollbar-thumb:hover {
-    background: #555;
-}
-/* Message typing indicator */
-.typing-indicator {
-    display: inline-block;
-    position: relative;
-    width: 60px;
-    height: 20px;
-}
-.typing-dot {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: #888;
-    position: absolute;
-    animation: typing-animation 1.4s infinite ease-in-out;
-}
-.typing-dot:nth-child(1) {
-    left: 0;
-    animation-delay: 0s;
-}
-.typing-dot:nth-child(2) {
-    left: 15px;
-    animation-delay: 0.2s;
-}
-.typing-dot:nth-child(3) {
-    left: 30px;
-    animation-delay: 0.4s;
-}
-@keyframes typing-animation {
-    0%, 60%, 100% {
-        transform: translateY(0);
-    }
-    30% {
-        transform: translateY(-5px);
-    }
-}
+body{background:#000;margin:0;padding:0;font-family:'Inter','Manrope','Outfit',sans-serif;}
+.gradio-container{border-radius:20px;padding:20px;max-width:700px;margin:30px auto;background:linear-gradient(145deg,#0f0f0f,#1a1a1a);box-shadow:0 10px 30px rgba(0,0,0,0.4);transition:transform 0.3s;}
+.title-container{opacity:0;transform:translateY(-20px);transition:0.5s;}
+.chat-title{font-size:32px;color:#fff;margin-bottom:10px;cursor:pointer;transition:0.3s;}
+.chat-subtitle{font-size:14px;color:#aaa;cursor:pointer;transition:0.3s;}
+textarea{border:none;border-radius:25px;padding:14px 20px 14px 20px;background:#1a1a1a;color:#fff;font-size:16px;width:100%;height:56px;transition:0.3s;}
+.send-btn{border:none;border-radius:20px;background:linear-gradient(145deg,#555,#444);color:#fff;width:40px;height:40px;position:absolute;right:8px;top:8px;cursor:pointer;transition:0.3s;}
+.chat-message{border-radius:20px;padding:16px;margin:12px 0;opacity:0;transition:0.5s;box-shadow:0 4px 10px rgba(0,0,0,0.15);}
+.chat-message.user{background:linear-gradient(145deg,#252525,#1f1f1f);color:#fff;align-items:flex-end;margin-left:40px;}
+.chat-message.bot{background:linear-gradient(145deg,#2e2e2e,#252525);color:#fff;align-items:flex-start;margin-right:40px;}
+.startup-message{opacity:0;transform:translateY(20px);transition:0.5s;margin:20px 0;display:flex;justify-content:center;cursor:pointer;}
+.startup-content{display:flex;align-items:center;background:linear-gradient(145deg,#2e2e2e,#252525);padding:20px;border-radius:20px;box-shadow:0 4px 15px rgba(0,0,0,0.2);}
+.startup-icon{font-size:32px;margin-right:15px;}
+.startup-title{font-weight:600;font-size:18px;color:#fff;}
+.startup-subtitle{font-size:16px;color:#eee;}
+.startup-note{font-size:12px;color:#aaa;font-style:italic;}
 """) as demo:
 
-    # Login direto na página
     gr.LoginButton()
-
-    chatbot = gr.ChatInterface(respond, type="messages")
-
+    gr.ChatInterface(respond, type="messages")
     gr.HTML(fade_js)
 
 if __name__ == "__main__":