UI: Mover botones de acción fuera del overflow-hidden

- Botones de responder/reaccionar/debug ahora están fuera del contenedor con overflow
- ReactionPicker ya no se trunca y flota correctamente
- Botones siempre aparecen al lado izquierdo de la burbuja (usando flex-row-reverse para fromMe)

app/components/messages/MessageBubble.vue

@@ -12,6 +12,44 @@
       {{ senderName }}
     </span>
 
+    <!-- Message container with action buttons -->
+    <div class="relative flex items-start gap-1" :class="message.fromMe ? 'flex-row-reverse' : 'flex-row'">
+      <!-- Action buttons (always on left side of bubble) -->
+      <div
+        class="flex gap-0.5 opacity-0 group-hover/message:opacity-100 transition-opacity pt-1"
+      >
+        <button
+          class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+          title="Responder"
+          @click="$emit('reply', message)"
+        >
+          <UIcon name="i-lucide-reply" class="w-4 h-4" />
+        </button>
+        <div class="relative">
+          <button
+            class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+            title="Reaccionar"
+            @click.stop="showReactionPicker = !showReactionPicker"
+          >
+            <UIcon name="i-lucide-smile-plus" class="w-4 h-4" />
+          </button>
+          <ReactionPicker
+            :visible="showReactionPicker"
+            :position="message.fromMe ? 'top' : 'bottom'"
+            @select="handleReaction"
+            @close="showReactionPicker = false"
+          />
+        </div>
+        <button
+          class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+          title="Debug"
+          @click="showDebug = !showDebug"
+        >
+          <UIcon name="i-lucide-bug" class="w-4 h-4" />
+        </button>
+      </div>
+
+      <!-- Message bubble -->
       <div
         class="relative max-w-[70%] rounded-lg overflow-hidden"
         :class="bubbleClass"
@@ -144,44 +182,6 @@
           :class="statusColor"
         />
       </div>
-
-      <!-- Action buttons on hover -->
-      <div
-        class="absolute top-1 opacity-0 group-hover/message:opacity-100 transition-opacity flex gap-0.5"
-        :class="message.fromMe ? 'left-1' : 'right-1'"
-      >
-        <button
-          class="p-1 rounded-full hover:bg-black/10"
-          :class="message.fromMe ? 'text-white/60 hover:text-white' : 'text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]'"
-          title="Responder"
-          @click="$emit('reply', message)"
-        >
-          <UIcon name="i-lucide-reply" class="w-4 h-4" />
-        </button>
-        <div class="relative">
-          <button
-            class="p-1 rounded-full hover:bg-black/10"
-            :class="message.fromMe ? 'text-white/60 hover:text-white' : 'text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]'"
-            title="Reaccionar"
-            @click.stop="showReactionPicker = !showReactionPicker"
-          >
-            <UIcon name="i-lucide-smile-plus" class="w-4 h-4" />
-          </button>
-          <ReactionPicker
-            :visible="showReactionPicker"
-            position="bottom"
-            @select="handleReaction"
-            @close="showReactionPicker = false"
-          />
-        </div>
-        <button
-          class="p-1 rounded-full hover:bg-black/10"
-          :class="message.fromMe ? 'text-white/60 hover:text-white' : 'text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]'"
-          title="Debug"
-          @click="showDebug = !showDebug"
-        >
-          <UIcon name="i-lucide-bug" class="w-3.5 h-3.5" />
-        </button>
       </div>
     </div>