Update web/src/components/Message.tsx

web/src/components/Message.tsx

@@ -312,11 +312,13 @@ export function Message({
             ${isUser && !showSenderInfo ? "bg-primary text-primary-foreground" : "bg-muted"}
           `}
         >
-          {/* ✅ Attachments shown “with” the message */}
+          {/* ✅ Attachments shown “with” the message (neutral card style) */}
           {hasAttachments && (
             <div className="mb-3 flex flex-wrap gap-2">
               {attachments!.map((a, idx) => {
-                const icon = a.kind === "pdf" ? pdfIcon : a.kind === "ppt" ? pptIcon : otherIcon;
+                const icon =
+                  a.kind === "pdf" ? pdfIcon : a.kind === "ppt" ? pptIcon : otherIcon;
+        
                 const label =
                   a.kind === "pdf"
                     ? "PDF"
@@ -332,19 +334,29 @@ export function Message({
                   <div
                     key={`${a.name}-${idx}`}
                     className="
-                      inline-flex items-center gap-2
+                      inline-flex items-center gap-3
                       rounded-xl border border-border
-                      bg-background/70 dark:bg-background/30
-                      px-2 py-1
+                      bg-white text-foreground
+                      dark:bg-zinc-900 dark:text-zinc-100
+                      px-3 py-2
                       shadow-sm
                       max-w-full
                     "
                     title={a.name}
                   >
-                    <img src={icon} alt={a.name} className="h-6 w-6 object-contain" draggable={false} />
-                    <div className="min-w-0">
-                      <div className="text-xs font-medium truncate max-w-[320px]">{a.name}</div>
-                      <div className="text-[11px] text-muted-foreground">{label}</div>
+                    <img
+                      src={icon}
+                      alt={a.name}
+                      className="h-6 w-6 object-contain opacity-90"
+                      draggable={false}
+                    />
+                    <div className="min-w-0 leading-tight">
+                      <div className="text-sm font-medium truncate max-w-[320px]">
+                        {a.name}
+                      </div>
+                      <div className="text-[11px] text-muted-foreground mt-0.5">
+                        {label}
+                      </div>
                     </div>
                   </div>
                 );