Fix: Mejorar animacion de crecimiento del area de input

- Cambiar animacion a translateY para mejor rendimiento
- Agregar transition-all al contenedor del input
- El contenedor crece suavemente cuando hay archivos seleccionados

app/components/messages/MessageInput.vue

@@ -372,25 +372,21 @@ const getTypePlaceholder = (type: MessageType): string => {
 
 <style scoped>
 /* Slide up animation for previews */
-.slide-up-enter-active,
+.slide-up-enter-active {
-.slide-up-leave-active {
+  transition: all 0.3s ease-out;
-  transition: all 0.3s ease;
+}
-  overflow: hidden;
+
+.slide-up-leave-active {
+  transition: all 0.2s ease-in;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
 }
 
-.slide-up-enter-from,
 .slide-up-leave-to {
   opacity: 0;
-  max-height: 0;
+  transform: translateY(10px);
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.slide-up-enter-to,
-.slide-up-leave-from {
-  opacity: 1;
-  max-height: 200px;
 }
 </style>

app/pages/messages/index.vue

@@ -225,8 +225,8 @@
             />
           </div>
 
-          <!-- Input -->
+          <!-- Input - grows when media is selected -->
-          <div class="p-4 border-t border-[var(--wa-border)]">
+          <div class="p-4 border-t border-[var(--wa-border)] transition-all duration-300 ease-out">
             <MessagesMessageInput
               :replying-to="replyingTo"
               @send="handleSendMessage"