fix: fix image preview remove button styles

src/channels/web/static/app.js

@@ -434,7 +434,8 @@ function sendMessage() {
   const content = input.value.trim();
   if (!content && stagedImages.length === 0) return;
 
-  addMessage('user', content || '(images attached)');
+  const imagesToDisplay = stagedImages.slice(); // snapshot before clearing
+  addMessage('user', content, imagesToDisplay);
   input.value = '';
   autoResizeTextarea(input);
   input.focus();
@@ -540,6 +541,24 @@ document.getElementById('chat-input').addEventListener('paste', (e) => {
   }
 });
 
+document.getElementById('chat-input').addEventListener('dragover', (e) => {
+  const hasImage = Array.from(e.dataTransfer.items || []).some(
+    item => item.kind === 'file' && item.type.startsWith('image/')
+  );
+  if (hasImage) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+  }
+});
+
+document.getElementById('chat-input').addEventListener('drop', (e) => {
+  const files = Array.from(e.dataTransfer.files || []).filter(f => f.type.startsWith('image/'));
+  if (files.length > 0) {
+    e.preventDefault();
+    handleImageFiles(files);
+  }
+});
+
 function addGeneratedImage(dataUrl, path) {
   const container = document.getElementById('chat-messages');
   const card = document.createElement('div');
@@ -714,9 +733,32 @@ function copyMessage(btn) {
   });
 }
 
-function addMessage(role, content) {
+function addMessage(role, content, images) {
   const container = document.getElementById('chat-messages');
-  const div = createMessageElement(role, content);
+  const div = document.createElement('div');
+  div.className = 'message ' + role;
+  if (role === 'user') {
+    if (images && images.length > 0) {
+      const imgStrip = document.createElement('div');
+      imgStrip.className = 'message-images';
+      images.forEach(img => {
+        const thumb = document.createElement('img');
+        thumb.className = 'message-image-thumb';
+        thumb.src = img.dataUrl;
+        thumb.alt = 'Attached image';
+        imgStrip.appendChild(thumb);
+      });
+      div.appendChild(imgStrip);
+    }
+    if (content) {
+      const textDiv = document.createElement('div');
+      textDiv.textContent = content;
+      div.appendChild(textDiv);
+    }
+  } else {
+    div.setAttribute('data-raw', content);
+    div.innerHTML = renderMarkdown(content);
+  }
   container.appendChild(div);
   container.scrollTop = container.scrollHeight;
 }

src/channels/web/static/style.css

@@ -3903,8 +3903,9 @@ mark {
   display: flex;
   flex-direction: row;
   gap: 8px;
-  padding: 4px;
+  padding: 10px 4px 4px;
   overflow-x: auto;
+  overflow-y: visible;
   min-height: 0;
   width: 100%;
 }
@@ -3925,6 +3926,7 @@ mark {
   border-radius: 6px;
   object-fit: cover;
   display: block;
+  border: 1px solid var(--border);
 }
 
 .image-preview-remove {
@@ -3933,21 +3935,41 @@ mark {
   right: -6px;
   width: 18px;
   height: 18px;
+  padding: 4px !important;
   border-radius: 50%;
   background: var(--danger);
   color: #fff;
-  border: none;
+  border: 2px solid var(--bg-secondary);
-  font-size: 12px;
+  font-size: 10px;
-  line-height: 18px;
+  line-height: 14px;
   text-align: center;
   cursor: pointer;
   padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .image-preview-remove:hover {
   background: #c33;
 }
 
+/* Images in user message bubbles */
+.message.user .message-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.message.user .message-image-thumb {
+  max-width: 240px;
+  max-height: 200px;
+  border-radius: 8px;
+  object-fit: cover;
+  display: block;
+}
+
 /* Generated Image */
 .generated-image-card {
   max-width: 512px;