UI: Botones de acción flotantes con position absolute

- Botones ahora flotan fuera de la burbuja sin ocupar espacio
- Para mensajes propios: botones a la izquierda (right-full)
- Para mensajes recibidos: botones a la derecha (left-full)
- Agregado fondo y sombra a los botones para mejor visibilidad

app/components/messages/MessageBubble.vue

@@ -12,14 +12,15 @@
       {{ senderName }}
     </span>
 
-    <!-- Message container with action buttons -->
+    <!-- Message bubble with floating action buttons -->
-    <div class="relative flex items-start gap-1" :class="message.fromMe ? 'flex-row-reverse' : 'flex-row'">
+    <div class="relative max-w-[70%]">
-      <!-- Action buttons (always on left side of bubble) -->
+      <!-- Action buttons (floating, always on left side) -->
       <div
-        class="flex gap-0.5 opacity-0 group-hover/message:opacity-100 transition-opacity pt-1"
+        class="absolute z-10 flex gap-0.5 opacity-0 group-hover/message:opacity-100 transition-opacity"
+        :class="message.fromMe ? 'right-full mr-1 top-0' : 'left-full ml-1 top-0'"
       >
         <button
-          class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+          class="p-1 rounded-full bg-[var(--wa-surface)] hover:bg-[var(--wa-bg-light)] text-[var(--wa-text-muted)] hover:text-[var(--wa-text)] shadow-sm"
           title="Responder"
           @click="$emit('reply', message)"
         >
@@ -27,7 +28,7 @@
         </button>
         <div class="relative">
           <button
-            class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+            class="p-1 rounded-full bg-[var(--wa-surface)] hover:bg-[var(--wa-bg-light)] text-[var(--wa-text-muted)] hover:text-[var(--wa-text)] shadow-sm"
             title="Reaccionar"
             @click.stop="showReactionPicker = !showReactionPicker"
           >
@@ -41,7 +42,7 @@
           />
         </div>
         <button
-          class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+          class="p-1 rounded-full bg-[var(--wa-surface)] hover:bg-[var(--wa-bg-light)] text-[var(--wa-text-muted)] hover:text-[var(--wa-text)] shadow-sm"
           title="Debug"
           @click="showDebug = !showDebug"
         >
@@ -49,9 +50,9 @@
         </button>
       </div>
 
-      <!-- Message bubble -->
+      <!-- Message bubble content -->
       <div
-        class="relative max-w-[70%] rounded-lg overflow-hidden"
+        class="rounded-lg overflow-hidden"
         :class="bubbleClass"
         @contextmenu.prevent="showReactionPicker = true"
         @touchstart="onTouchStart"