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/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;