Feat: Agregar animacion de crecimiento vertical para previews

- Usar Vue Transition con slide-up para MediaPreview y ReplyPreview
- Animar altura, opacidad y espaciado
- Duracion 0.3s con ease

app/components/messages/MessageInput.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="space-y-2">
-    <!-- Reply preview -->
+    <!-- Reply preview with animation -->
+    <Transition name="slide-up">
       <div
         v-if="replyingTo"
         class="flex items-center gap-2 p-2 rounded-lg bg-[var(--wa-bg-light)]"
@@ -21,8 +22,10 @@
           <UIcon name="i-lucide-x" class="w-4 h-4 text-[var(--wa-text-muted)]" />
         </button>
       </div>
+    </Transition>
 
-    <!-- Media preview -->
+    <!-- Media preview with animation -->
+    <Transition name="slide-up">
       <MediaPreview
         v-if="selectedFiles.length > 0"
         :files="selectedFiles"
@@ -31,6 +34,7 @@
         @update:caption="caption = $event"
         @update:stickerModes="stickerModes = $event"
       />
+    </Transition>
 
     <!-- Recording indicator -->
     <div
@@ -365,3 +369,28 @@ const getTypePlaceholder = (type: MessageType): string => {
   return getMessageTypePlaceholder(type)
 }
 </script>
+
+<style scoped>
+/* Slide up animation for previews */
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  max-height: 0;
+  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>