Update app.py

app.py

@@ -57,7 +57,22 @@ document.addEventListener("DOMContentLoaded", () => {
     // Enhanced typing animation for textarea
     const txt = document.querySelector("textarea");
     if (txt) {
-        txt.style.paddingRight = "70px"; // Make space for the button
+        // Add smooth text appearance
+        txt.addEventListener("input", function() {
+            // Store current cursor position
+            const cursorPosition = this.selectionStart;
+            
+            // Add smooth text effect
+            this.style.transition = "all 0.2s ease";
+            this.style.backgroundColor = "#222";
+            
+            setTimeout(() => {
+                this.style.backgroundColor = "#1a1a1a";
+                
+                // Restore cursor position
+                this.setSelectionRange(cursorPosition, cursorPosition);
+            }, 200);
+        });
         
         txt.addEventListener("focus", () => {
             txt.style.transition = "all 0.3s ease";
@@ -69,14 +84,6 @@ document.addEventListener("DOMContentLoaded", () => {
             txt.style.transform = "translateY(0)";
             txt.style.boxShadow = "0 2px 8px rgba(0,0,0,0.1)";
         });
-        
-        txt.addEventListener("input", () => {
-            txt.style.backgroundColor = "#222";
-            setTimeout(() => {
-                txt.style.transition = "background-color 0.5s ease";
-                txt.style.backgroundColor = "#1a1a1a";
-            }, 150);
-        });
     }
 
     // Move button inside textarea
@@ -87,12 +94,12 @@ document.addEventListener("DOMContentLoaded", () => {
         if (btn && textareaContainer) {
             // Position button inside textarea
             btn.style.position = "absolute";
-            btn.style.right = "10px";
-            btn.style.bottom = "10px";
+            btn.style.right = "8px";
+            btn.style.bottom = "8px";
             btn.style.zIndex = "10";
             btn.style.marginLeft = "0";
-            btn.style.width = "50px";
-            btn.style.height = "50px";
+            btn.style.width = "44px";
+            btn.style.height = "44px";
             
             // Add container for positioning
             textareaContainer.style.position = "relative";
@@ -183,6 +190,36 @@ document.addEventListener("DOMContentLoaded", () => {
             }, 50);
         }, 3000);
     }
+    
+    // Add smooth text appearance effect
+    const addSmoothTextEffect = () => {
+        const textareas = document.querySelectorAll("textarea");
+        textareas.forEach(textarea => {
+            if (textarea.hasAttribute("data-smooth-added")) return;
+            
+            textarea.setAttribute("data-smooth-added", "true");
+            
+            textarea.addEventListener("input", function() {
+                // Add smooth transition for text color
+                this.style.transition = "color 0.2s ease";
+                
+                // Briefly change color for smooth appearance
+                const originalColor = this.style.color;
+                this.style.color = "#aaa";
+                
+                setTimeout(() => {
+                    this.style.color = originalColor || "#fff";
+                }, 50);
+            });
+        });
+    };
+    
+    // Add smooth text effect
+    addSmoothTextEffect();
+    
+    // Observe for new textareas
+    const textareaObserver = new MutationObserver(addSmoothTextEffect);
+    textareaObserver.observe(document.body, { childList: true, subtree: true });
 });
 </script>
 """
@@ -231,26 +268,28 @@ textarea {
     border: none; 
     outline: none; 
     border-radius: 25px; 
-    padding: 16px 20px; 
+    padding: 14px 20px; 
+    padding-right: 60px; /* Space for button */
     background-color: #1a1a1a; 
     color: #fff; 
     font-size: 16px; 
     flex: 1; 
-    height: 70px; 
+    height: 56px; /* Reduced height */
+    min-height: 56px; /* Prevent resizing */
     box-sizing: border-box; 
     resize: none; 
-    transition: all 0.3s ease;
+    transition: all 0.3s ease, color 0.2s ease;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     width: 100%;
 }
 .send-btn { 
     border: none; 
-    border-radius: 20px; 
+    border-radius: 18px; 
     background: linear-gradient(145deg, #555, #444); 
     color: #fff; 
-    width: 60px; 
-    height: 60px; 
-    font-size: 20px; 
+    width: 44px; 
+    height: 44px; 
+    font-size: 18px; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
@@ -322,6 +361,20 @@ textarea {
 .bounce {
     animation: bounce 0.8s;
 }
+/* Smooth text animation */
+@keyframes textAppear {
+    from {
+        opacity: 0.5;
+        transform: translateY(2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.smooth-text {
+    animation: textAppear 0.2s ease;
+}
 /* Scrollbar styling */
 ::-webkit-scrollbar {
     width: 8px;