Update app.py

app.py

@@ -22,20 +22,43 @@ Keep a simple, approachable, and friendly tone."""
 
 chatbot = gr.ChatInterface(respond, type="messages")
 
+fade_js = """
+<script>
+const observer = new MutationObserver(mutations=>{
+    mutations.forEach(m=>{
+        m.addedNodes.forEach(node=>{
+            if(node.classList && node.classList.contains('chat-message')){
+                node.style.opacity = 0;
+                node.style.transition = "opacity 0.5s ease";
+                requestAnimationFrame(()=>{
+                    node.style.opacity = 1;
+                });
+            }
+        });
+    });
+});
+
+document.addEventListener("DOMContentLoaded", ()=>{
+    const chatContainer = document.querySelector(".chat-interface");
+    if(chatContainer) observer.observe(chatContainer, {childList:true, subtree:true});
+});
+</script>
+"""
+
 with gr.Blocks(css="""
-body {background-color:#000; font-family:'Arial',sans-serif;}
-.gradio-container {border-radius:20px; padding:15px; max-width:700px; margin:20px auto; background-color:#fff;}
-.chat-message {border-radius:15px; padding:10px 15px; margin:5px 0; display:flex; flex-direction:column; opacity:0; animation: fadein 0.5s forwards;}
-.chat-message.user {background-color:#dceefc; align-items:flex-end;}
-.chat-message.bot {background-color:#f0f0f0; align-items:flex-start;}
-@keyframes fadein {
-  from {opacity:0;}
-  to {opacity:1;}
-}
+body{background-color:#000; font-family:'Arial',sans-serif;}
+.gradio-container{border-radius:25px; padding:20px; max-width:700px; margin:20px auto; background-color:#fff; outline:none;}
+.chat-message{border-radius:25px; padding:12px 18px; margin:8px 0; display:flex; flex-direction:column; outline:none;}
+.chat-message.user{background-color:#dceefc; align-items:flex-end; outline:none;}
+.chat-message.bot{background-color:#f0f0f0; align-items:flex-start; outline:none;}
+textarea{border:none; outline:none; border-radius:15px; padding:8px; background-color:#f9f9f9;}
+button{border:none; border-radius:15px;}
 """) as demo:
     with gr.Sidebar():
         gr.LoginButton()
+    
     chatbot.render()
+    gr.HTML(fade_js)
 
 if __name__=="__main__":
     demo.launch()