fix(webchat): move action buttons outside message bubble

Wrap each message in a .message-wrapper div and render copy/edit buttons
below the bubble instead of overlapping inside it. Improves readability
and prevents buttons from covering message content.

src/gateway/ui/pages/chat.js

@@ -52,6 +52,9 @@ function highlightCode() {
 }
 
 function createMessageEl(role, content) {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'message-wrapper';
+
   const div = document.createElement('div');
   div.className = `message ${role}`;
 
@@ -61,13 +64,14 @@ function createMessageEl(role, content) {
   } else {
     div.textContent = content;
   }
+  wrapper.appendChild(div);
 
-  // Add action buttons (copy for all, edit for user)
+  // Add action buttons (copy for all, edit for user) outside the message box
   if (role !== 'system') {
-    div.appendChild(createMessageActions(role));
+    wrapper.appendChild(createMessageActions(role));
   }
 
-  return div;
+  return wrapper;
 }
 
 function createToolEventEl(event, data) {

src/gateway/ui/style.css

@@ -163,11 +163,18 @@ header #status.status-ok {
   gap: 12px;
 }
 
+/* Message wrapper - contains message box and actions below it */
+.message-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 85%;
+}
+
 /* Individual message bubble */
 .message {
   padding: 10px 14px;
   border-radius: var(--radius);
-  max-width: 85%;
   word-wrap: break-word;
   white-space: pre-wrap;
   font-size: var(--font-size-base);
@@ -1048,25 +1055,38 @@ tr:hover td {
   border-radius: 3px;
 }
 
-/* Message action buttons (copy, edit) */
-.message {
-  position: relative;
+/* Message wrapper alignment */
+.message-wrapper.user {
+  align-self: flex-end;
 }
 
+.message-wrapper.assistant {
+  align-self: flex-start;
+}
+
+/* Message action buttons (copy, edit) */
 .message-actions {
-  position: absolute;
-  bottom: 4px;
-  right: 4px;
   display: flex;
-  gap: 2px;
+  gap: 4px;
   opacity: 0;
   transition: opacity var(--transition);
+  align-self: flex-end;
 }
 
-.message:hover .message-actions {
+.message-wrapper:hover .message-actions {
   opacity: 1;
 }
 
+/* User message actions align right */
+.message-wrapper.user .message-actions {
+  align-self: flex-end;
+}
+
+/* Assistant message actions align left */
+.message-wrapper.assistant .message-actions {
+  align-self: flex-start;
+}
+
 .msg-action-btn {
   display: inline-flex;
   align-items: center;