Fix: Corregir uso de UModal según API de Nuxt UI v4

- Usar v-model:open en lugar de v-model
- Usar slot #content para contenido personalizado
- Usar slots #body/#footer para estructura predefinida
- Corregir modal de imagen fullscreen
- Corregir modal de selector de emojis

app/components/messages/ReactionPicker.vue

@@ -23,29 +23,24 @@
   </div>
 
   <!-- Full emoji picker modal -->
-  <UModal v-model="showFullPicker">
-    <template #default>
-      <div class="p-4 bg-[var(--wa-surface)]">
-        <h3 class="text-lg font-semibold mb-4 text-[var(--wa-text)]">Elegir reaccion</h3>
-
-        <div class="grid grid-cols-8 gap-2 max-h-64 overflow-y-auto">
-          <button
-            v-for="emoji in allEmojis"
-            :key="emoji"
-            class="w-10 h-10 flex items-center justify-center text-2xl hover:bg-[var(--wa-bg-light)] rounded transition-transform hover:scale-110"
-            @click="selectReaction(emoji); showFullPicker = false"
-          >
-            {{ emoji }}
-          </button>
-        </div>
-
-        <div class="mt-4 flex justify-end">
-          <UButton variant="ghost" @click="showFullPicker = false">
-            Cancelar
-          </UButton>
-        </div>
+  <UModal v-model:open="showFullPicker" title="Elegir reacción" :ui="{ footer: 'justify-end' }">
+    <template #body>
+      <div class="grid grid-cols-8 gap-2 max-h-64 overflow-y-auto">
+        <button
+          v-for="emoji in allEmojis"
+          :key="emoji"
+          class="w-10 h-10 flex items-center justify-center text-2xl hover:bg-[var(--wa-bg-light)] rounded transition-transform hover:scale-110"
+          @click="selectReaction(emoji); showFullPicker = false"
+        >
+          {{ emoji }}
+        </button>
       </div>
     </template>
+    <template #footer>
+      <UButton variant="ghost" color="neutral" @click="showFullPicker = false">
+        Cancelar
+      </UButton>
+    </template>
   </UModal>
 </template>