diff --git a/src/components/common/FormattedDescription.tsx b/src/components/common/FormattedDescription.tsx
index da81583..a1924ee 100644
--- a/src/components/common/FormattedDescription.tsx
+++ b/src/components/common/FormattedDescription.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cn } from "@/components/ui/utils";
+import { sanitizeHTML } from "@/utils/sanitizer";
 
 interface FormattedDescriptionProps {
   content: string;
@@ -33,7 +34,8 @@ export function FormattedDescription({ content, className }: FormattedDescriptio
       return `<div class="table-wrapper">${match}</div>`;
     });
 
-    return processed;
+    // Sanitize the content to prevent CSP violations (onclick, style tags, etc.)
+    return sanitizeHTML(processed);
   }, [content]);
 
   if (!content) return null;
diff --git a/src/components/modals/WorkNoteModal.tsx b/src/components/modals/WorkNoteModal.tsx
index f7cf4f0..836370b 100644
--- a/src/components/modals/WorkNoteModal.tsx
+++ b/src/components/modals/WorkNoteModal.tsx
@@ -1,18 +1,19 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';
+import { sanitizeHTML } from '../../utils/sanitizer';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Avatar, AvatarFallback } from '../ui/avatar';
 import { Badge } from '../ui/badge';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
 import { ScrollArea } from '../ui/scroll-area';
-import { 
-  Send, 
-  Smile, 
-  Paperclip, 
-  Users, 
-  FileText, 
-  Download, 
+import {
+  Send,
+  Smile,
+  Paperclip,
+  Users,
+  FileText,
+  Download,
   Eye,
   MoreHorizontal
 } from 'lucide-react';
@@ -166,7 +167,8 @@ export function WorkNoteModal({ open, onClose, requestId }: WorkNoteModalProps)
 
   const formatMessage = (content: string) => {
     // Simple mention highlighting
-    return content.replace(/@(\w+\s?\w+)/g, '<span class="text-blue-600 font-medium">@$1</span>');
+    const formatted = content.replace(/@(\w+\s?\w+)/g, '<span class="text-blue-600 font-medium">@$1</span>');
+    return sanitizeHTML(formatted);
   };
 
   return (
@@ -187,7 +189,7 @@ export function WorkNoteModal({ open, onClose, requestId }: WorkNoteModalProps)
                 <TabsTrigger value="chat">Chat</TabsTrigger>
                 <TabsTrigger value="media">Media</TabsTrigger>
               </TabsList>
-              
+
               <TabsContent value="chat" className="flex-1 flex flex-col">
                 <ScrollArea className="flex-1 p-4 border rounded-lg">
                   <div className="space-y-4">
@@ -195,16 +197,15 @@ export function WorkNoteModal({ open, onClose, requestId }: WorkNoteModalProps)
                       <div key={msg.id} className={`flex gap-3 ${msg.isSystem ? 'justify-center' : ''}`}>
                         {!msg.isSystem && (
                           <Avatar className="h-8 w-8 flex-shrink-0">
-                            <AvatarFallback className={`text-white text-xs ${
-                              msg.user.role === 'Initiator' ? 'bg-re-green' : 
+                            <AvatarFallback className={`text-white text-xs ${msg.user.role === 'Initiator' ? 'bg-re-green' :
                               msg.user.role === 'Current User' ? 'bg-blue-500' :
-                              'bg-re-light-green'
-                            }`}>
+                                'bg-re-light-green'
+                              }`}>
                               {msg.user.avatar}
                             </AvatarFallback>
                           </Avatar>
                         )}
-                        
+
                         <div className={`flex-1 ${msg.isSystem ? 'text-center' : ''}`}>
                           {msg.isSystem ? (
                             <div className="inline-flex items-center gap-2 px-3 py-1 bg-muted rounded-full text-sm text-muted-foreground">
@@ -222,7 +223,7 @@ export function WorkNoteModal({ open, onClose, requestId }: WorkNoteModalProps)
                                   {msg.timestamp}
                                 </span>
                               </div>
-                              <div 
+                              <div
                                 className="text-sm bg-muted/30 p-3 rounded-lg"
                                 dangerouslySetInnerHTML={{ __html: formatMessage(msg.content) }}
                               />
@@ -300,15 +301,14 @@ export function WorkNoteModal({ open, onClose, requestId }: WorkNoteModalProps)
               <h4 className="font-medium">Participants</h4>
               <Badge variant="outline">{participants.length}</Badge>
             </div>
-            
+
             <div className="space-y-3">
               {participants.map((participant, index) => (
                 <div key={index} className="flex items-center gap-3">
                   <div className="relative">
                     <Avatar className="h-8 w-8">
-                      <AvatarFallback className={`text-white text-xs ${
-                        participant.role === 'Initiator' ? 'bg-re-green' : 'bg-re-light-green'
-                      }`}>
+                      <AvatarFallback className={`text-white text-xs ${participant.role === 'Initiator' ? 'bg-re-green' : 'bg-re-light-green'
+                        }`}>
                         {participant.avatar}
                       </AvatarFallback>
                     </Avatar>
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index b49bc36..6332ce2 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -54,13 +54,13 @@ function ChartContainer({
       <div
         data-slot="chart"
         data-chart={chartId}
+        style={getChartStyle(config)}
         className={cn(
           "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className,
         )}
         {...props}
       >
-        <ChartStyle id={chartId} config={config} />
         <RechartsPrimitive.ResponsiveContainer>
           {children}
         </RechartsPrimitive.ResponsiveContainer>
@@ -69,37 +69,39 @@ function ChartContainer({
   );
 }
 
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+const getChartStyle = (config: ChartConfig) => {
   const colorConfig = Object.entries(config).filter(
     ([, config]) => config.theme || config.color,
   );
 
   if (!colorConfig.length) {
-    return null;
+    return {};
   }
 
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
-}
-`,
-          )
-          .join("\n"),
-      }}
-    />
-  );
+  const styles: Record<string, string> = {};
+
+  colorConfig.forEach(([key, itemConfig]) => {
+    // For simplicity, we'll use the default color or the light theme color
+    // If you need per-theme variables, they should be handled via CSS classes or media queries 
+    // but applying them here as inline styles is CSP-safe.
+    const color = itemConfig.color || itemConfig.theme?.light;
+    if (color) {
+      styles[`--color-${key}`] = color;
+    }
+
+    // Handle dark theme if present
+    const darkColor = itemConfig.theme?.dark;
+    if (darkColor) {
+      styles[`--color-${key}-dark`] = darkColor;
+    }
+  });
+
+  return styles as React.CSSProperties;
+};
+
+// Deprecated: Kept for backward compatibility if needed in other files.
+const ChartStyle = () => {
+  return null;
 };
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
@@ -316,8 +318,8 @@ function getPayloadConfigFromPayload(
 
   const payloadPayload =
     "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
+      typeof payload.payload === "object" &&
+      payload.payload !== null
       ? payload.payload
       : undefined;
 
diff --git a/src/components/ui/rich-text-editor.tsx b/src/components/ui/rich-text-editor.tsx
index f53b199..e0d90bb 100644
--- a/src/components/ui/rich-text-editor.tsx
+++ b/src/components/ui/rich-text-editor.tsx
@@ -3,6 +3,7 @@ import { cn } from "./utils";
 import { Button } from "./button";
 import { Bold, Italic, Underline, List, ListOrdered, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, Highlighter, X, Type } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { sanitizeHTML } from "@/utils/sanitizer";
 
 interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   value: string;
@@ -59,7 +60,8 @@ export function RichTextEditor({
       // Only update if the value actually changed externally
       const currentValue = editorRef.current.innerHTML;
       if (currentValue !== value) {
-        editorRef.current.innerHTML = value || '';
+        // Sanitize incoming content
+        editorRef.current.innerHTML = sanitizeHTML(value || '');
       }
     }
   }, [value]);
@@ -230,9 +232,9 @@ export function RichTextEditor({
     selection.removeAllRanges();
     selection.addRange(range);
 
-    // Trigger onChange
+    // Trigger onChange with sanitized content
     if (editorRef.current) {
-      onChange(editorRef.current.innerHTML);
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
     }
   }, [onChange, cleanWordHTML]);
 
@@ -377,7 +379,7 @@ export function RichTextEditor({
 
     // Update content
     if (editorRef.current) {
-      onChange(editorRef.current.innerHTML);
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
     }
 
     // Check active formats after a short delay
@@ -529,7 +531,7 @@ export function RichTextEditor({
 
     // Update content
     if (editorRef.current) {
-      onChange(editorRef.current.innerHTML);
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
     }
 
     // Close popover
@@ -633,7 +635,7 @@ export function RichTextEditor({
 
     // Update content
     if (editorRef.current) {
-      onChange(editorRef.current.innerHTML);
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
     }
 
     // Close popover
@@ -646,7 +648,7 @@ export function RichTextEditor({
   // Handle input changes
   const handleInput = React.useCallback(() => {
     if (editorRef.current) {
-      onChange(editorRef.current.innerHTML);
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
     }
     checkActiveFormats();
   }, [onChange, checkActiveFormats]);
@@ -682,7 +684,7 @@ export function RichTextEditor({
   const handleBlur = React.useCallback(() => {
     setIsFocused(false);
     if (editorRef.current) {
-      onChange(editorRef.current.innerHTML);
+      onChange(sanitizeHTML(editorRef.current.innerHTML));
     }
   }, [onChange]);
 
diff --git a/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx b/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx
index f0db392..dc81250 100644
--- a/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx
+++ b/src/components/workNote/WorkNoteChat/WorkNoteChat.tsx
@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { getWorkNotes, createWorkNoteMultipart, getWorkflowDetails, downloadWorkNoteAttachment, getWorkNoteAttachmentPreviewUrl, addSpectator, addApproverAtLevel } from '@/services/workflowApi';
+import { sanitizeHTML } from '@/utils/sanitizer';
 import { getPublicConfigurations, AdminConfiguration } from '@/services/adminApi';
 import { toast } from 'sonner';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -15,13 +16,13 @@ import { ActionStatusModal } from '@/components/common/ActionStatusModal';
 import { AddSpectatorModal } from '@/components/participant/AddSpectatorModal';
 import { AddApproverModal } from '@/components/participant/AddApproverModal';
 import { formatDateTime } from '@/utils/dateFormatter';
-import { 
-  Send, 
-  Smile, 
-  Paperclip, 
-  Users, 
-  FileText, 
-  Download, 
+import {
+  Send,
+  Smile,
+  Paperclip,
+  Users,
+  FileText,
+  Download,
   Eye,
   MessageSquare,
   Clock,
@@ -109,21 +110,21 @@ const getStatusText = (status: string) => {
 
 const formatMessage = (content: string) => {
   // Enhanced mention highlighting - Blue color with extra bold font for high visibility
-  // Matches: @username or @FirstName LastName (only one space allowed for first name + last name)
-  // Pattern: @word or @word word (stops after second word)
-  return content
+  const formattedContent = content
     .replace(/@(\w+(?:\s+\w+)?)(?=\s|$|[.,!?;:]|@)/g, (match, mention, offset, string) => {
       const afterPos = offset + match.length;
       const afterChar = string[afterPos];
-      
+
       // Valid mention if followed by: space, punctuation, @ (another mention), or end of string
       if (!afterChar || /\s|[.,!?;:]|@/.test(afterChar)) {
         return '<span class="inline-flex items-center px-2.5 py-0.5 rounded-md bg-blue-50 text-blue-800 font-black text-base border-2 border-blue-400 shadow-sm">@' + mention + '</span>';
       }
-      
+
       return match;
     })
     .replace(/\n/g, '<br />');
+
+  return sanitizeHTML(formattedContent);
 };
 
 const formatFileSize = (bytes: number): string => {
@@ -198,11 +199,11 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
 
   const [participants, setParticipants] = useState<Participant[]>([]);
   const onlineParticipants = participants.filter(p => p.status === 'online');
-  const filteredMessages = messages.filter(msg => 
+  const filteredMessages = messages.filter(msg =>
     msg.content.toLowerCase().includes(searchTerm.toLowerCase()) ||
     msg.user.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
-  
+
   // Determine if current user is a spectator (when not passed as prop)
   const effectiveIsSpectator = useMemo(() => {
     // If isSpectator is explicitly passed as prop, use it
@@ -220,17 +221,17 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
       return pUserId === currentUserId && (pRole === 'SPECTATOR' || pType === 'SPECTATOR');
     });
   }, [isSpectator, currentUserId, participants]);
-  
+
   // Log when participants change - logging removed for performance
   useEffect(() => {
     // Participants state changed - logging removed
   }, [participants]);
-  
+
   // Load initial messages from backend (only if not provided by parent)
   useEffect(() => {
     if (!effectiveRequestId || !currentUserId) return;
     if (externalMessages) return; // Skip if parent is providing messages
-    
+
     (async () => {
       try {
         const rows = await getWorkNotes(effectiveRequestId);
@@ -238,19 +239,19 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           const noteUserId = m.userId || m.user_id;
           return {
             id: m.noteId || m.id || String(Math.random()),
-            user: { 
-              name: m.userName || 'User', 
-              avatar: (m.userName || 'U').slice(0,2).toUpperCase(), 
-              role: m.userRole || 'Participant' 
+            user: {
+              name: m.userName || 'User',
+              avatar: (m.userName || 'U').slice(0, 2).toUpperCase(),
+              role: m.userRole || 'Participant'
             },
             content: m.message || '',
             timestamp: m.createdAt || new Date().toISOString(),
             isCurrentUser: noteUserId === currentUserId,
-            attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({ 
+            attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({
               attachmentId: a.attachmentId || a.attachment_id,
               name: a.fileName || a.file_name || a.name,
               fileName: a.fileName || a.file_name || a.name,
-              url: a.storageUrl || a.storage_url || a.url || '#', 
+              url: a.storageUrl || a.storage_url || a.url || '#',
               type: a.fileType || a.file_type || a.type || 'file',
               fileType: a.fileType || a.file_type || a.type || 'file',
               fileSize: a.fileSize || a.file_size
@@ -297,10 +298,10 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
   const existingParticipants = useMemo(() => {
     return participants.map(p => ({
       email: (p.email || '').toLowerCase(),
-      participantType: p.role === 'Initiator' ? 'INITIATOR' : 
-                      p.role === 'Approver' ? 'APPROVER' : 
-                      p.role === 'Spectator' ? 'SPECTATOR' : 
-                      'PARTICIPANT',
+      participantType: p.role === 'Initiator' ? 'INITIATOR' :
+        p.role === 'Approver' ? 'APPROVER' :
+          p.role === 'Spectator' ? 'SPECTATOR' :
+            'PARTICIPANT',
       name: p.name
     }));
   }, [participants]);
@@ -342,26 +343,26 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
     if (participantsLoadedRef.current) {
       return;
     }
-    
+
     if (!effectiveRequestId) {
       return;
     }
-    
+
     (async () => {
       try {
         const details = await getWorkflowDetails(effectiveRequestId);
         const rows = Array.isArray(details?.participants) ? details.participants : [];
-        
+
         if (rows.length === 0) {
           return;
         }
-        
+
         const mapped: Participant[] = rows.map((p: any) => {
           const participantType = p.participantType || p.participant_type || 'participant';
           const userId = p.userId || p.user_id || '';
           return {
             name: p.userName || p.user_name || p.user_email || p.userEmail || 'User',
-            avatar: (p.userName || p.user_name || p.user_email || 'U').toString().split(' ').map((s: string)=>s[0]).filter(Boolean).join('').slice(0,2).toUpperCase(),
+            avatar: (p.userName || p.user_name || p.user_email || 'U').toString().split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
             role: formatParticipantRole(participantType.toString()),
             status: 'offline', // will be updated by presence events
             email: p.userEmail || p.user_email || '',
@@ -369,11 +370,11 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
             userId: userId // store userId for presence matching
           } as any;
         });
-        
+
         // Participants loaded - logging removed
         participantsLoadedRef.current = true;
         setParticipants(mapped);
-        
+
         // Request online users immediately after setting participants with retries
         let retryCount = 0;
         const maxRetries = 3;
@@ -395,7 +396,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           }
         };
         setTimeout(requestOnlineUsers, 100); // Initial delay to ensure state is updated
-        
+
       } catch (error) {
         console.error('[WorkNoteChat] ❌ Failed to load participants:', error);
       }
@@ -456,7 +457,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
   // Realtime updates via Socket.IO (standalone usage OR when embedded in RequestDetail)
   useEffect(() => {
     if (!currentUserId) return; // Wait for currentUserId to be loaded
-    
+
     let joinedId = effectiveRequestId;
     (async () => {
       try {
@@ -464,18 +465,18 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
         if (details?.workflow?.requestId) {
           joinedId = details.workflow.requestId; // join by UUID to match server emits
         }
-      } catch {}
+      } catch { }
       try {
         // Get socket using helper function (handles VITE_BASE_URL or VITE_API_BASE_URL)
         const s = getSocket(); // Uses getSocketBaseUrl() helper internally
-        
+
         // Only join room if not skipped (standalone mode)
         if (!skipSocketJoin) {
           joinRequestRoom(s, joinedId, currentUserId);
-          
+
           // Mark self as online immediately after joining room
           setParticipants(prev => {
-            const updated = prev.map(p => 
+            const updated = prev.map(p =>
               (p as any).userId === currentUserId ? { ...p, status: 'online' as const } : p
             );
             return updated;
@@ -483,7 +484,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
         } else {
           // Still mark self as online even when embedded (parent handles socket but we track presence)
           setParticipants(prev => {
-            const updated = prev.map(p => 
+            const updated = prev.map(p =>
               (p as any).userId === currentUserId ? { ...p, status: 'online' as const } : p
             );
             return updated;
@@ -496,41 +497,41 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           if (!n) {
             return;
           }
-          
+
           const noteId = n.noteId || n.id;
-          
+
           // Prevent duplicates: check if message with same noteId already exists
           setMessages(prev => {
             if (prev.some(m => m.id === noteId)) {
               return prev; // Already exists, don't add
             }
-            
+
             const userName = n.userName || n.user_name || 'User';
             const userRole = n.userRole || n.user_role; // Get role directly from backend
             const participantRole = getFormattedRole(userRole);
             const noteUserId = n.userId || n.user_id;
-            
+
             const newMessage = {
               id: noteId || String(Date.now()),
-              user: { 
-                name: userName, 
-                avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(), 
-                role: participantRole 
+              user: {
+                name: userName,
+                avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
+                role: participantRole
               },
               content: n.message || '',
               timestamp: n.createdAt || new Date().toISOString(),
               isCurrentUser: noteUserId === currentUserId,
-              attachments: Array.isArray(n.attachments) ? n.attachments.map((a: any) => ({ 
+              attachments: Array.isArray(n.attachments) ? n.attachments.map((a: any) => ({
                 attachmentId: a.attachmentId || a.attachment_id,
                 name: a.fileName || a.file_name || a.name,
                 fileName: a.fileName || a.file_name || a.name,
-                url: a.storageUrl || a.storage_url || a.url || '#', 
+                url: a.storageUrl || a.storage_url || a.url || '#',
                 type: a.fileType || a.file_type || a.type || 'file',
                 fileType: a.fileType || a.file_type || a.type || 'file',
                 fileSize: a.fileSize || a.file_size
               })) : undefined
             } as any;
-            
+
             return [...prev, newMessage];
           });
         };
@@ -545,7 +546,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
             if (!participant) {
               return prev;
             }
-            const updated = prev.map(p => 
+            const updated = prev.map(p =>
               (p as any).userId === data.userId ? { ...p, status: 'online' as const } : p
             );
             return updated;
@@ -558,7 +559,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           if (data.userId === currentUserId) {
             return;
           }
-          
+
           setParticipants(prev => {
             if (prev.length === 0) {
               return prev;
@@ -567,7 +568,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
             if (!participant) {
               return prev;
             }
-            const updated = prev.map(p => 
+            const updated = prev.map(p =>
               (p as any).userId === data.userId ? { ...p, status: 'offline' as const } : p
             );
             return updated;
@@ -580,17 +581,17 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
             if (prev.length === 0) {
               return prev;
             }
-            
+
             // Updating online status - logging removed
             const updated = prev.map(p => {
               const pUserId = (p as any).userId || '';
               const isCurrentUserSelf = pUserId === currentUserId;
-              
+
               // Always keep self as online in own browser
               if (isCurrentUserSelf) {
                 return { ...p, status: 'online' as const };
               }
-              
+
               const isOnline = data.userIds.includes(pUserId);
               return { ...p, status: isOnline ? 'online' as const : 'offline' as const };
             });
@@ -603,21 +604,21 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
         const connectHandler = () => {
           // Mark self as online on connection
           setParticipants(prev => {
-            const updated = prev.map(p => 
+            const updated = prev.map(p =>
               (p as any).userId === currentUserId ? { ...p, status: 'online' as const } : p
             );
             return updated;
           });
-          
+
           // Rejoin room if needed
           if (!skipSocketJoin) {
             joinRequestRoom(s, joinedId, currentUserId);
           }
-          
+
           // Request online users on connection with multiple retries
           if (participantsLoadedRef.current) {
             s.emit('request:online-users', { requestId: joinedId });
-            
+
             // Send additional requests with delay to ensure we get the response
             setTimeout(() => s.emit('request:online-users', { requestId: joinedId }), 300);
             setTimeout(() => s.emit('request:online-users', { requestId: joinedId }), 800);
@@ -628,15 +629,15 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
         const errorHandler = (error: any) => {
           console.error('[WorkNoteChat] ❌ Socket error:', error);
         };
-        
+
         const disconnectHandler = (reason: string) => {
           console.warn('[WorkNoteChat] ⚠️ Socket disconnected:', reason);
           // Mark all other users as offline on disconnect
-          setParticipants(prev => prev.map(p => 
+          setParticipants(prev => prev.map(p =>
             (p as any).userId === currentUserId ? p : { ...p, status: 'offline' as const }
           ));
         };
-        
+
         // Debug: Log ALL events received from server for this request
         const anyEventHandler = (eventName: string) => {
           if (eventName.includes('presence') || eventName.includes('worknote') || eventName.includes('request')) {
@@ -657,7 +658,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
 
         // Store socket in ref for coordination with participants loading
         socketRef.current = s;
-        
+
         // Always request online users after socket is ready
         if (s.connected) {
           if (participantsLoadedRef.current) {
@@ -693,10 +694,10 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           // Socket cleanup completed - logging removed
         };
         (window as any).__wn_cleanup = cleanup;
-      } catch {}
+      } catch { }
     })();
     return () => {
-      try { (window as any).__wn_cleanup?.(); } catch {}
+      try { (window as any).__wn_cleanup?.(); } catch { }
     };
   }, [effectiveRequestId, currentUserId, skipSocketJoin]);
 
@@ -704,11 +705,11 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
     if (message.trim() || selectedFiles.length > 0) {
       // Extract mentions from message
       const mentions = extractMentions(message);
-      
+
       // Find mentioned user IDs from participants
       const mentionedUserIds = mentions
         .map(mentionedName => {
-          const participant = participants.find(p => 
+          const participant = participants.find(p =>
             p.name.toLowerCase().includes(mentionedName.toLowerCase())
           );
           return (participant as any)?.userId;
@@ -727,20 +728,20 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
         id: Date.now().toString(),
         user: { name: 'You', avatar: 'YO', role: 'Current User' },
         content: message,
-        timestamp: new Date().toLocaleString('en-US', { 
-          month: 'short', 
-          day: 'numeric', 
-          year: 'numeric', 
-          hour: 'numeric', 
+        timestamp: new Date().toLocaleString('en-US', {
+          month: 'short',
+          day: 'numeric',
+          year: 'numeric',
+          hour: 'numeric',
           minute: 'numeric',
-          hour12: true 
+          hour12: true
         }),
         mentions: mentions,
         isHighPriority: message.includes('!important') || message.includes('urgent'),
         attachments: attachments.length > 0 ? attachments : undefined,
         isCurrentUser: true
       };
-      
+
       // If external onSend provided, delegate to caller (RequestDetail will POST and refresh)
       if (onSend) {
         try { await onSend(message, selectedFiles); } catch { /* ignore */ }
@@ -748,31 +749,31 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
         // Fallback: call backend directly with mentions
         try {
           await createWorkNoteMultipart(
-            effectiveRequestId, 
-            { 
+            effectiveRequestId,
+            {
               message,
               mentions: mentionedUserIds // Send mentioned user IDs to backend
-            }, 
+            },
             selectedFiles
           );
           const rows = await getWorkNotes(effectiveRequestId);
           const mapped = Array.isArray(rows) ? rows.map((m: any) => {
             const noteUserId = m.userId || m.user_id;
             return {
-            id: m.noteId || m.id || String(Math.random()),
-              user: { 
-                name: m.userName || 'User', 
-                avatar: (m.userName || 'U').slice(0,2).toUpperCase(), 
-                role: m.userRole || 'Participant' 
+              id: m.noteId || m.id || String(Math.random()),
+              user: {
+                name: m.userName || 'User',
+                avatar: (m.userName || 'U').slice(0, 2).toUpperCase(),
+                role: m.userRole || 'Participant'
               },
-            content: m.message || '',
-            timestamp: m.createdAt || new Date().toISOString(),
+              content: m.message || '',
+              timestamp: m.createdAt || new Date().toISOString(),
               isCurrentUser: noteUserId === currentUserId,
-              attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({ 
+              attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({
                 attachmentId: a.attachmentId || a.attachment_id,
                 name: a.fileName || a.file_name || a.name,
                 fileName: a.fileName || a.file_name || a.name,
-                url: a.storageUrl || a.storage_url || a.url || '#', 
+                url: a.storageUrl || a.storage_url || a.url || '#',
                 type: a.fileType || a.file_type || a.type || 'file',
                 fileType: a.fileType || a.file_type || a.type || 'file',
                 fileSize: a.fileSize || a.file_size
@@ -800,55 +801,55 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
             return activityType !== 'sla_warning';
           })
           .map((m: any) => {
-          // Check if this is an activity (system message) or work note
-          const isActivity = m.type || m.activityType || m.isSystem;
-          
-          if (isActivity) {
-            // Map activity to system message
-            return {
-              id: m.id || `activity-${m.timestamp || Date.now()}-${Math.random()}`,
-              user: { name: 'System', avatar: 'SY', role: 'System' },
-              content: m.details || m.action || m.content || '',
-              timestamp: m.timestamp || m.createdAt || m.created_at || new Date().toISOString(),
-              isSystem: true,
-              isCurrentUser: false
-            };
-          } else {
-            // Map work note
-            const userName = m.userName || m.user_name || m.user?.name || 'User';
-            const userRole = m.userRole || m.user_role;
-            const participantRole = getFormattedRole(userRole);
-            const noteUserId = m.userId || m.user_id;
-            
-            return {
-              id: m.noteId || m.note_id || m.id || String(Math.random()),
-              user: { 
-                name: userName, 
-                avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(), 
-                role: participantRole 
-              },
-              content: m.message || m.content || '',
-              timestamp: m.createdAt || m.created_at || m.timestamp || new Date().toISOString(),
-              isSystem: false,
-              attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({ 
-                attachmentId: a.attachmentId || a.attachment_id,
-                name: a.fileName || a.file_name || a.name,
-                fileName: a.fileName || a.file_name || a.name,
-                url: a.storageUrl || a.storage_url || a.url || '#', 
-                type: a.fileType || a.file_type || a.type || 'file',
-                fileType: a.fileType || a.file_type || a.type || 'file',
-                fileSize: a.fileSize || a.file_size
-              })) : undefined,
-              isCurrentUser: noteUserId === currentUserId
-            };
-          }
-        });
-        
+            // Check if this is an activity (system message) or work note
+            const isActivity = m.type || m.activityType || m.isSystem;
+
+            if (isActivity) {
+              // Map activity to system message
+              return {
+                id: m.id || `activity-${m.timestamp || Date.now()}-${Math.random()}`,
+                user: { name: 'System', avatar: 'SY', role: 'System' },
+                content: m.details || m.action || m.content || '',
+                timestamp: m.timestamp || m.createdAt || m.created_at || new Date().toISOString(),
+                isSystem: true,
+                isCurrentUser: false
+              };
+            } else {
+              // Map work note
+              const userName = m.userName || m.user_name || m.user?.name || 'User';
+              const userRole = m.userRole || m.user_role;
+              const participantRole = getFormattedRole(userRole);
+              const noteUserId = m.userId || m.user_id;
+
+              return {
+                id: m.noteId || m.note_id || m.id || String(Math.random()),
+                user: {
+                  name: userName,
+                  avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
+                  role: participantRole
+                },
+                content: m.message || m.content || '',
+                timestamp: m.createdAt || m.created_at || m.timestamp || new Date().toISOString(),
+                isSystem: false,
+                attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({
+                  attachmentId: a.attachmentId || a.attachment_id,
+                  name: a.fileName || a.file_name || a.name,
+                  fileName: a.fileName || a.file_name || a.name,
+                  url: a.storageUrl || a.storage_url || a.url || '#',
+                  type: a.fileType || a.file_type || a.type || 'file',
+                  fileType: a.fileType || a.file_type || a.type || 'file',
+                  fileSize: a.fileSize || a.file_size
+                })) : undefined,
+                isCurrentUser: noteUserId === currentUserId
+              };
+            }
+          });
+
         // Sort by timestamp
-        const sorted = mapped.sort((a, b) => 
+        const sorted = mapped.sort((a, b) =>
           new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
         );
-        
+
         // Messages mapped - logging removed
         setMessages(sorted);
       } catch (err) {
@@ -859,26 +860,26 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
       (async () => {
         try {
           const rows = await getWorkNotes(effectiveRequestId);
-            const mapped = Array.isArray(rows) ? rows.map((m: any) => {
-              const userName = m.userName || m.user_name || 'User';
-              const userRole = m.userRole || m.user_role; // Get role directly from backend
-              const participantRole = getFormattedRole(userRole);
-              const noteUserId = m.userId || m.user_id;
-              
-              return {
+          const mapped = Array.isArray(rows) ? rows.map((m: any) => {
+            const userName = m.userName || m.user_name || 'User';
+            const userRole = m.userRole || m.user_role; // Get role directly from backend
+            const participantRole = getFormattedRole(userRole);
+            const noteUserId = m.userId || m.user_id;
+
+            return {
               id: m.noteId || m.note_id || m.id || String(Math.random()),
-              user: { 
-                name: userName, 
-                avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(), 
-                role: participantRole 
+              user: {
+                name: userName,
+                avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
+                role: participantRole
               },
               content: m.message || '',
               timestamp: m.createdAt || m.created_at || new Date().toISOString(),
-              attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({ 
+              attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({
                 attachmentId: a.attachmentId || a.attachment_id,
                 name: a.fileName || a.file_name || a.name,
                 fileName: a.fileName || a.file_name || a.name,
-                url: a.storageUrl || a.storage_url || a.url || '#', 
+                url: a.storageUrl || a.storage_url || a.url || '#',
                 type: a.fileType || a.file_type || a.type || 'file',
                 fileType: a.fileType || a.file_type || a.type || 'file',
                 fileSize: a.fileSize || a.file_size
@@ -907,7 +908,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
     // Check file extension
     const fileName = file.name.toLowerCase();
     const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
-    
+
     if (!documentPolicy.allowedFileTypes.includes(fileExtension)) {
       return {
         valid: false,
@@ -920,9 +921,9 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
 
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files || e.target.files.length === 0) return;
-    
+
     const filesArray = Array.from(e.target.files);
-    
+
     // Validate all files
     const validationErrors: Array<{ fileName: string; reason: string }> = [];
     const validFiles: File[] = [];
@@ -994,7 +995,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           const userName = p.userName || p.user_name || p.userEmail || p.user_email || 'User';
           const userEmail = p.userEmail || p.user_email || '';
           const initials = userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase();
-          
+
           return {
             name: userName,
             avatar: initials,
@@ -1007,7 +1008,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           };
         });
         setParticipants(mapped);
-        
+
         // Request updated online users list from server to get correct status
         if (socketRef.current && socketRef.current.connected) {
           socketRef.current.emit('request:online-users', { requestId: effectiveRequestId });
@@ -1054,7 +1055,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
             const userName = p.userName || p.user_name || p.userEmail || p.user_email || 'User';
             const userEmail = p.userEmail || p.user_email || '';
             const initials = userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase();
-            
+
             return {
               name: userName,
               avatar: initials,
@@ -1067,7 +1068,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
             };
           });
           setParticipants(mapped);
-          
+
           if (socketRef.current && socketRef.current.connected) {
             socketRef.current.emit('request:online-users', { requestId: effectiveRequestId });
           }
@@ -1105,35 +1106,35 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
     '😳', '🥺', '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱',
     '😖', '😣', '😞', '😓', '😩', '😫', '🥱', '😤', '😡', '😠',
     '🤬', '😈', '👿', '💀', '☠️', '💩', '🤡', '👹', '👺', '👻',
-    
+
     // Gestures & Body
     '👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤌', '🤏', '✌️', '🤞',
     '🤟', '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '👍',
     '👎', '✊', '👊', '🤛', '🤜', '👏', '🙌', '👐', '🤲', '🤝',
     '🙏', '💪', '🦾', '🦿', '🦵', '🦶', '👂', '🦻', '👃', '🧠',
-    
+
     // Hearts & Love
     '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔',
     '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '❤️‍🔥',
-    
+
     // Work & Office
     '💼', '📊', '📈', '📉', '💻', '⌨️', '🖥️', '🖨️', '🖱️', '💾',
     '💿', '📱', '☎️', '📞', '📟', '📠', '📧', '✉️', '📨', '📩',
     '📮', '📪', '📫', '📬', '📭', '📄', '📃', '📑', '📝', '✏️',
     '✒️', '🖊️', '🖋️', '📏', '📐', '📌', '📍', '🗂️', '📁', '📂',
-    
+
     // Success & Achievement
     '✅', '✔️', '☑️', '🎯', '🎖️', '🏆', '🥇', '🥈', '🥉', '⭐',
     '🌟', '✨', '💫', '🔥', '💥', '⚡', '💯', '🎉', '🎊', '🎈',
-    
+
     // Alerts & Symbols
     '⚠️', '🚫', '❌', '⛔', '🚷', '🚯', '🚱', '🚳', '🔞', '📵',
     '❗', '❓', '❕', '❔', '‼️', '⁉️', '💢', '💬', '💭', '🗯️',
-    
+
     // Time & Calendar
     '⏰', '⏱️', '⏲️', '⏳', '⌛', '📅', '📆', '🗓️', '📇', '🕐',
     '🕑', '🕒', '🕓', '🕔', '🕕', '🕖', '🕗', '🕘', '🕙', '🕚',
-    
+
     // Actions & Arrows
     '🚀', '🎯', '🎲', '🎰', '🧩', '🔍', '🔎', '🔑', '🗝️', '🔒',
     '🔓', '🔐', '🔏', '🔔', '🔕', '📣', '📢', '💡', '🔦', '🏮',
@@ -1155,7 +1156,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
         const afterPos = match.index + match[0].length;
         const afterText = text.slice(afterPos);
         const afterChar = text[afterPos];
-        
+
         // Valid if followed by: @ (another mention), space, punctuation, or end
         if (afterText.startsWith('@') || !afterChar || /\s|[.,!?;:]|@/.test(afterChar)) {
           mentions.push(match[1].trim());
@@ -1177,7 +1178,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
       if (msg.id === messageId) {
         const reactions = msg.reactions || [];
         const existingReaction = reactions.find(r => r.emoji === emoji);
-        
+
         if (existingReaction) {
           if (existingReaction.users.includes('You')) {
             existingReaction.users = existingReaction.users.filter(u => u !== 'You');
@@ -1190,7 +1191,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
         } else {
           reactions.push({ emoji, users: ['You'] });
         }
-        
+
         return { ...msg, reactions };
       }
       return msg;
@@ -1216,7 +1217,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
               </div>
             </div>
           </div>
-          
+
           <div className="flex items-center gap-3">
             <div className="flex items-center gap-2 text-sm text-gray-600">
               <div className="flex -space-x-2">
@@ -1235,8 +1236,8 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
               </div>
 
             </div>
-            <Button 
-              variant="outline" 
+            <Button
+              variant="outline"
               size="sm"
               onClick={() => setShowSidebar(!showSidebar)}
               className="lg:hidden"
@@ -1250,88 +1251,87 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
       <div className="flex-1 flex overflow-hidden relative">
         {/* Main Chat Area */}
         <div className="flex-1 flex flex-col min-w-0">
-              {/* Search Bar - Fixed */}
-              <div className="bg-white border-b border-gray-200 px-2 sm:px-3 lg:px-6 py-2 sm:py-3 flex-shrink-0">
-                <div className="relative">
-                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                  <Input
-                    placeholder="Search messages..."
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    className="pl-10 bg-gray-50 border-gray-200 h-9 sm:h-10"
-                  />
-                </div>
-              </div>
+          {/* Search Bar - Fixed */}
+          <div className="bg-white border-b border-gray-200 px-2 sm:px-3 lg:px-6 py-2 sm:py-3 flex-shrink-0">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Input
+                placeholder="Search messages..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-10 bg-gray-50 border-gray-200 h-9 sm:h-10"
+              />
+            </div>
+          </div>
 
-              {/* Messages Area - Fixed height with proper scrolling */}
-              <div className="flex-1 overflow-y-auto overflow-x-hidden px-2 sm:px-3 lg:px-6 py-2 sm:py-4 min-h-0">
-                <div className="space-y-3 sm:space-y-6 max-w-full">
-                  {filteredMessages.map((msg) => {
-                    // Check if this message is from the current user
-                    const isCurrentUser = (msg as any).isCurrentUser || false;
-                    
-                    return (
-                    <div key={msg.id} className={`flex gap-2 sm:gap-3 lg:gap-4 ${msg.isSystem ? 'justify-center' : isCurrentUser ? 'justify-end' : ''}`}>
-                      {!msg.isSystem && !isCurrentUser && (
-                        <Avatar className="h-8 w-8 sm:h-10 sm:w-10 lg:h-12 lg:w-12 flex-shrink-0 ring-1 sm:ring-2 ring-white shadow-sm">
-                          <AvatarFallback className={`text-white font-semibold text-xs sm:text-sm ${
-                            msg.user.role === 'Initiator' ? 'bg-green-600' : 
-                            msg.user.role === 'Current User' ? 'bg-blue-500' :
+          {/* Messages Area - Fixed height with proper scrolling */}
+          <div className="flex-1 overflow-y-auto overflow-x-hidden px-2 sm:px-3 lg:px-6 py-2 sm:py-4 min-h-0">
+            <div className="space-y-3 sm:space-y-6 max-w-full">
+              {filteredMessages.map((msg) => {
+                // Check if this message is from the current user
+                const isCurrentUser = (msg as any).isCurrentUser || false;
+
+                return (
+                  <div key={msg.id} className={`flex gap-2 sm:gap-3 lg:gap-4 ${msg.isSystem ? 'justify-center' : isCurrentUser ? 'justify-end' : ''}`}>
+                    {!msg.isSystem && !isCurrentUser && (
+                      <Avatar className="h-8 w-8 sm:h-10 sm:w-10 lg:h-12 lg:w-12 flex-shrink-0 ring-1 sm:ring-2 ring-white shadow-sm">
+                        <AvatarFallback className={`text-white font-semibold text-xs sm:text-sm ${msg.user.role === 'Initiator' ? 'bg-green-600' :
+                          msg.user.role === 'Current User' ? 'bg-blue-500' :
                             msg.user.role === 'System' ? 'bg-gray-500' :
-                            'bg-slate-600'
+                              'bg-slate-600'
                           }`}>
-                            {msg.user.avatar}
-                          </AvatarFallback>
-                        </Avatar>
-                      )}
-                      
-                      <div className={`${isCurrentUser ? 'max-w-[70%]' : 'flex-1'} min-w-0 ${msg.isSystem ? 'text-center max-w-xs sm:max-w-md mx-auto' : ''}`}>
-                        {msg.isSystem ? (
-                          <div className="inline-flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-1.5 sm:py-2 bg-gray-100 rounded-full">
-                            <Activity className="w-3 h-3 sm:w-4 sm:h-4 text-gray-500 flex-shrink-0" />
-                            <span className="text-xs sm:text-sm text-gray-700">{msg.content}</span>
-                            <span className="text-xs text-gray-500 hidden sm:inline">{formatDateTime(msg.timestamp)}</span>
-                          </div>
-                        ) : (
-                          <div>
-                            {/* Message Header */}
-                            <div className={`flex items-center gap-2 sm:gap-3 mb-1 sm:mb-2 flex-wrap ${isCurrentUser ? 'justify-end' : ''}`}>
-                              <span className="font-semibold text-gray-900 text-sm sm:text-base truncate">
-                                {msg.user.name} {isCurrentUser && <span className="text-xs text-gray-500 font-normal">(you)</span>}
-                              </span>
-                              <Badge variant="outline" className="text-xs flex-shrink-0">
-                                {msg.user.role}
+                          {msg.user.avatar}
+                        </AvatarFallback>
+                      </Avatar>
+                    )}
+
+                    <div className={`${isCurrentUser ? 'max-w-[70%]' : 'flex-1'} min-w-0 ${msg.isSystem ? 'text-center max-w-xs sm:max-w-md mx-auto' : ''}`}>
+                      {msg.isSystem ? (
+                        <div className="inline-flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-1.5 sm:py-2 bg-gray-100 rounded-full">
+                          <Activity className="w-3 h-3 sm:w-4 sm:h-4 text-gray-500 flex-shrink-0" />
+                          <span className="text-xs sm:text-sm text-gray-700">{msg.content}</span>
+                          <span className="text-xs text-gray-500 hidden sm:inline">{formatDateTime(msg.timestamp)}</span>
+                        </div>
+                      ) : (
+                        <div>
+                          {/* Message Header */}
+                          <div className={`flex items-center gap-2 sm:gap-3 mb-1 sm:mb-2 flex-wrap ${isCurrentUser ? 'justify-end' : ''}`}>
+                            <span className="font-semibold text-gray-900 text-sm sm:text-base truncate">
+                              {msg.user.name} {isCurrentUser && <span className="text-xs text-gray-500 font-normal">(you)</span>}
+                            </span>
+                            <Badge variant="outline" className="text-xs flex-shrink-0">
+                              {msg.user.role}
+                            </Badge>
+                            <span className="text-xs text-gray-500 flex items-center gap-1 flex-shrink-0">
+                              <Clock className="w-3 h-3" />
+                              {formatDateTime(msg.timestamp)}
+                            </span>
+                            {msg.isHighPriority && (
+                              <Badge variant="destructive" className="text-xs flex-shrink-0">
+                                <Flag className="w-3 h-3 mr-1" />
+                                Priority
                               </Badge>
-                              <span className="text-xs text-gray-500 flex items-center gap-1 flex-shrink-0">
-                                <Clock className="w-3 h-3" />
-                                {formatDateTime(msg.timestamp)}
-                              </span>
-                              {msg.isHighPriority && (
-                                <Badge variant="destructive" className="text-xs flex-shrink-0">
-                                  <Flag className="w-3 h-3 mr-1" />
-                                  Priority
-                                </Badge>
-                              )}
-                            </div>
+                            )}
+                          </div>
 
-                            {/* Message Content */}
-                            <div className={`rounded-lg border p-3 sm:p-4 shadow-sm ${isCurrentUser ? 'bg-blue-50 border-blue-200' : 'bg-white border-gray-200'}`}>
-                              <div 
-                                className="text-gray-800 leading-relaxed text-sm sm:text-base"
-                                dangerouslySetInnerHTML={{ __html: formatMessage(msg.content) }}
-                              />
+                          {/* Message Content */}
+                          <div className={`rounded-lg border p-3 sm:p-4 shadow-sm ${isCurrentUser ? 'bg-blue-50 border-blue-200' : 'bg-white border-gray-200'}`}>
+                            <div
+                              className="text-gray-800 leading-relaxed text-sm sm:text-base"
+                              dangerouslySetInnerHTML={{ __html: formatMessage(msg.content) }}
+                            />
 
-                              {/* Attachments */}
-                              {msg.attachments && msg.attachments.length > 0 && (
-                                <div className="mt-2 sm:mt-3 pt-2 sm:pt-3 border-t border-gray-100">
-                                  <div className="space-y-2">
-                                    {msg.attachments.map((attachment: any, index) => {
-                                      const fileSize = attachment.fileSize || attachment.file_size;
-                                      const fileName = attachment.fileName || attachment.file_name || attachment.name;
-                                      const fileType = attachment.fileType || attachment.file_type || attachment.type || '';
-                                      const attachmentId = attachment.attachmentId || attachment.attachment_id;
-                                      
-                                      return (
+                            {/* Attachments */}
+                            {msg.attachments && msg.attachments.length > 0 && (
+                              <div className="mt-2 sm:mt-3 pt-2 sm:pt-3 border-t border-gray-100">
+                                <div className="space-y-2">
+                                  {msg.attachments.map((attachment: any, index) => {
+                                    const fileSize = attachment.fileSize || attachment.file_size;
+                                    const fileName = attachment.fileName || attachment.file_name || attachment.name;
+                                    const fileType = attachment.fileType || attachment.file_type || attachment.type || '';
+                                    const attachmentId = attachment.attachmentId || attachment.attachment_id;
+
+                                    return (
                                       <div key={index} className="flex items-center gap-2 sm:gap-3 p-2 sm:p-3 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors">
                                         <div className="flex-shrink-0">
                                           <FileIcon type={fileType} />
@@ -1346,50 +1346,50 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
                                             </p>
                                           )}
                                         </div>
-                                        
+
                                         {/* Preview button for images and PDFs */}
                                         {attachmentId && (() => {
                                           const type = (fileType || '').toLowerCase();
-                                          return type.includes('image') || type.includes('pdf') || 
-                                                 type.includes('jpg') || type.includes('jpeg') || 
-                                                 type.includes('png') || type.includes('gif');
+                                          return type.includes('image') || type.includes('pdf') ||
+                                            type.includes('jpg') || type.includes('jpeg') ||
+                                            type.includes('png') || type.includes('gif');
                                         })() && (
-                                          <Button 
-                                            variant="ghost" 
-                                            size="sm" 
-                                            className="h-6 w-6 sm:h-8 sm:w-8 p-0 flex-shrink-0 hover:bg-purple-100 hover:text-purple-600"
-                                            onClick={(e) => {
-                                              e.preventDefault();
-                                              e.stopPropagation();
-                                              const previewUrl = getWorkNoteAttachmentPreviewUrl(attachmentId);
-                                              setPreviewFile({
-                                                fileName,
-                                                fileType,
-                                                fileUrl: previewUrl,
-                                                fileSize,
-                                                attachmentId
-                                              });
-                                            }}
-                                            title="Preview file"
-                                          >
-                                            <Eye className="w-3 h-3 sm:w-4 sm:h-4" />
-                                          </Button>
-                                        )}
-                                        
+                                            <Button
+                                              variant="ghost"
+                                              size="sm"
+                                              className="h-6 w-6 sm:h-8 sm:w-8 p-0 flex-shrink-0 hover:bg-purple-100 hover:text-purple-600"
+                                              onClick={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                const previewUrl = getWorkNoteAttachmentPreviewUrl(attachmentId);
+                                                setPreviewFile({
+                                                  fileName,
+                                                  fileType,
+                                                  fileUrl: previewUrl,
+                                                  fileSize,
+                                                  attachmentId
+                                                });
+                                              }}
+                                              title="Preview file"
+                                            >
+                                              <Eye className="w-3 h-3 sm:w-4 sm:h-4" />
+                                            </Button>
+                                          )}
+
                                         {/* Download button */}
-                                        <Button 
-                                          variant="ghost" 
-                                          size="sm" 
+                                        <Button
+                                          variant="ghost"
+                                          size="sm"
                                           className="h-6 w-6 sm:h-8 sm:w-8 p-0 flex-shrink-0 hover:bg-blue-100 hover:text-blue-600"
                                           onClick={async (e) => {
                                             e.preventDefault();
                                             e.stopPropagation();
-                                            
+
                                             if (!attachmentId) {
                                               toast.error('Cannot download: Attachment ID missing');
                                               return;
                                             }
-                                            
+
                                             try {
                                               await downloadWorkNoteAttachment(attachmentId);
                                             } catch (error) {
@@ -1401,288 +1401,286 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
                                           <Download className="w-3 h-3 sm:w-4 sm:h-4" />
                                         </Button>
                                       </div>
-                                      );
-                                    })}
-                                  </div>
+                                    );
+                                  })}
                                 </div>
-                              )}
+                              </div>
+                            )}
 
-                              {/* Reactions */}
-                              {msg.reactions && msg.reactions.length > 0 && (
-                                <div className="flex items-center gap-1 sm:gap-2 mt-2 sm:mt-3 pt-2 sm:pt-3 border-t border-gray-100 flex-wrap">
-                                  {msg.reactions.map((reaction, index) => (
-                                    <button
-                                      key={index}
-                                      onClick={() => addReaction(msg.id, reaction.emoji)}
-                                      className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs sm:text-sm transition-colors flex-shrink-0 ${
-                                        reaction.users.includes('You') 
-                                          ? 'bg-blue-100 text-blue-800 border border-blue-200' 
-                                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                            {/* Reactions */}
+                            {msg.reactions && msg.reactions.length > 0 && (
+                              <div className="flex items-center gap-1 sm:gap-2 mt-2 sm:mt-3 pt-2 sm:pt-3 border-t border-gray-100 flex-wrap">
+                                {msg.reactions.map((reaction, index) => (
+                                  <button
+                                    key={index}
+                                    onClick={() => addReaction(msg.id, reaction.emoji)}
+                                    className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs sm:text-sm transition-colors flex-shrink-0 ${reaction.users.includes('You')
+                                      ? 'bg-blue-100 text-blue-800 border border-blue-200'
+                                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                                       }`}
-                                    >
-                                      <span>{reaction.emoji}</span>
-                                      <span className="text-xs font-medium">{reaction.users.length}</span>
-                                    </button>
-                                  ))}
-                                  <Button 
-                                    variant="ghost" 
-                                    size="sm" 
-                                    className="h-6 w-6 sm:h-7 sm:w-7 p-0 flex-shrink-0"
-                                    onClick={() => setShowEmojiPicker(!showEmojiPicker)}
                                   >
-                                    <Plus className="w-2 h-2 sm:w-3 sm:h-3" />
-                                  </Button>
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                      
-                      {!msg.isSystem && isCurrentUser && (
-                        <Avatar className="h-8 w-8 sm:h-10 sm:w-10 lg:h-12 lg:w-12 flex-shrink-0 ring-1 sm:ring-2 ring-white shadow-sm">
-                          <AvatarFallback className="bg-blue-500 text-white font-semibold text-xs sm:text-sm">
-                            {msg.user.avatar}
-                          </AvatarFallback>
-                        </Avatar>
-                      )}
-                    </div>
-                    );
-                  })}
-                  
-                  <div ref={messagesEndRef} />
-                </div>
-              </div>
-
-              {/* Message Input - Fixed at bottom */}
-              <div className="bg-white border-t border-gray-200 p-2 sm:p-3 lg:p-6 flex-shrink-0">
-                <div className="max-w-full">
-                  {/* Hidden File Input */}
-                  <input
-                    type="file"
-                    ref={fileInputRef}
-                    onChange={handleFileSelect}
-                    className="hidden"
-                    multiple
-                    accept={documentPolicy.allowedFileTypes.map(ext => `.${ext}`).join(',')}
-                  />
-
-                  {/* Selected Files Preview - Scrollable if many files */}
-                  {selectedFiles.length > 0 && (
-                    <div className="mb-3 space-y-2 max-h-32 overflow-y-auto pr-2">
-                      {selectedFiles.map((file, index) => (
-                        <div key={index} className="flex items-center gap-2 p-2 bg-blue-50 rounded-lg border border-blue-200">
-                          <div className="flex-shrink-0">
-                            <FileIcon type={file.type.split('/')[1] || 'file'} />
-                          </div>
-                          <span className="text-sm text-gray-700 flex-1 truncate min-w-0">{file.name}</span>
-                          <span className="text-xs text-gray-500 flex-shrink-0">{(file.size / 1024).toFixed(1)} KB</span>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => handleRemoveFile(index)}
-                            className="h-6 w-6 p-0 hover:bg-red-100 flex-shrink-0"
-                          >
-                            <X className="h-3 w-3 text-red-600" />
-                          </Button>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-
-                  {/* Textarea with Mention Dropdown and Emoji Picker */}
-                  <div className="relative mb-2">
-                    {/* Mention Suggestions Dropdown - Shows above textarea */}
-                    {(() => {
-                      // Find the last @ symbol that hasn't been completed (doesn't have a space after a name)
-                      const lastAtIndex = message.lastIndexOf('@');
-                      const hasAt = lastAtIndex >= 0;
-                      
-                      if (!hasAt) return null;
-                      
-                      // Get text after the last @
-                      const textAfterAt = message.slice(lastAtIndex + 1);
-                      
-                      // Check if this mention is already completed
-                      // A completed mention looks like: "@username " (ends with space after name)
-                      // An incomplete mention looks like: "@" or "@user" (no space after, or just typed @)
-                      const trimmedAfterAt = textAfterAt.trim();
-                      const endsWithSpace = textAfterAt.endsWith(' ');
-                      const hasNonSpaceChars = trimmedAfterAt.length > 0;
-                      
-                      // Don't show dropdown if:
-                      // 1. Text after @ is too long (>20 chars) - probably not a mention
-                      // 2. Text after @ ends with space AND has characters (completed mention like "@user ")
-                      // 3. Text after @ contains space in the middle (like "@user name" - multi-word name already typed)
-                      const containsSpaceInMiddle = trimmedAfterAt.includes(' ') && !endsWithSpace;
-                      const isCompletedMention = endsWithSpace && hasNonSpaceChars;
-                      
-                      // Show dropdown if:
-                      // - Has @ symbol
-                      // - Text after @ is not too long
-                      // - Mention is not completed (doesn't end with space after a name)
-                      // - Doesn't contain space in middle (not a multi-word name being typed)
-                      const shouldShowDropdown = hasAt && 
-                                                 textAfterAt.length <= 20 && 
-                                                 !containsSpaceInMiddle &&
-                                                 !isCompletedMention;
-                      
-                      if (!shouldShowDropdown) return null;
-                      
-                      // Use trimmed text for search (ignore trailing spaces)
-                      const searchTerm = trimmedAfterAt.toLowerCase();
-                      const filteredParticipants = participants.filter(p => {
-                        // Exclude current user from mention suggestions
-                        const isCurrentUserInList = (p as any).userId === currentUserId;
-                        if (isCurrentUserInList) return false;
-                        
-                        // Filter by search term (empty search term shows all)
-                        if (searchTerm) {
-                          return p.name.toLowerCase().includes(searchTerm);
-                        }
-                        return true; // Show all if no search term
-                      });
-                      
-                      return (
-                        <div className="absolute bottom-full left-0 mb-2 bg-white border-2 border-blue-300 rounded-lg shadow-2xl p-3 z-[100] w-full sm:max-w-md">
-                          <p className="text-sm font-semibold text-gray-900 mb-2">💬 Mention someone</p>
-                          <div className="max-h-60 overflow-y-auto space-y-1">
-                            {filteredParticipants.length > 0 ? (
-                              filteredParticipants.map((participant, idx) => (
-                                <button
-                                  key={idx}
-                                  type="button"
-                                  onClick={(e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    // Find the last @ and replace everything from @ to end with the new mention
-                                    const lastAt = message.lastIndexOf('@');
-                                    const before = message.slice(0, lastAt);
-                                    // Add the mention with a space after for easy continuation
-                                    setMessage(before + '@' + participant.name + ' ');
-                                  }}
-                                  className="w-full flex items-center gap-3 p-3 hover:bg-blue-50 rounded-lg text-left transition-colors border border-transparent hover:border-blue-200"
+                                    <span>{reaction.emoji}</span>
+                                    <span className="text-xs font-medium">{reaction.users.length}</span>
+                                  </button>
+                                ))}
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-6 w-6 sm:h-7 sm:w-7 p-0 flex-shrink-0"
+                                  onClick={() => setShowEmojiPicker(!showEmojiPicker)}
                                 >
-                                  <Avatar className="h-10 w-10">
-                                    <AvatarFallback className={`text-white text-sm font-semibold ${
-                                      participant.role === 'Initiator' ? 'bg-green-600' :
-                                      participant.role === 'Approver' ? 'bg-purple-600' :
-                                      'bg-blue-500'
-                                    }`}>
-                                      {participant.avatar}
-                                    </AvatarFallback>
-                                  </Avatar>
-                                  <div className="flex-1 min-w-0">
-                                    <p className="text-sm font-semibold text-gray-900">{participant.name}</p>
-                                    <p className="text-xs text-gray-600">{participant.role}</p>
-                                  </div>
-                                </button>
-                              ))
-                            ) : (
-                              <p className="text-sm text-gray-500 text-center py-4">
-                                {searchTerm ? `No participants found matching "${searchTerm}"` : 'No other participants available'}
-                              </p>
+                                  <Plus className="w-2 h-2 sm:w-3 sm:h-3" />
+                                </Button>
+                              </div>
                             )}
                           </div>
                         </div>
-                      );
-                    })()}
+                      )}
+                    </div>
 
-                    <Textarea
-                      placeholder="Type your message... Use @username to mention someone"
-                      value={message}
-                      onChange={(e) => setMessage(e.target.value)}
-                      onKeyPress={handleKeyPress}
-                      className="min-h-[50px] sm:min-h-[60px] resize-none border-gray-200 focus:ring-blue-500 focus:border-blue-500 w-full text-sm"
-                      rows={2}
-                    />
-
-                    {/* Emoji Picker Popup */}
-                    {showEmojiPicker && (
-                      <div className="absolute bottom-full left-0 mb-2 bg-white border border-gray-200 rounded-lg shadow-xl p-3 z-50 w-full sm:w-96 max-h-80 overflow-y-auto">
-                        <div className="flex items-center justify-between mb-3 sticky top-0 bg-white pb-2 border-b">
-                          <span className="text-sm font-semibold text-gray-700">Pick an emoji</span>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => setShowEmojiPicker(false)}
-                            className="h-6 w-6 p-0"
-                          >
-                            <X className="h-3 w-3" />
-                          </Button>
-                        </div>
-                        <div className="grid grid-cols-8 sm:grid-cols-10 gap-1">
-                          {emojiList.map((emoji, index) => (
-                            <button
-                              key={index}
-                              onClick={() => handleEmojiSelect(emoji)}
-                              className="text-xl sm:text-2xl hover:bg-gray-100 rounded p-1 transition-colors flex items-center justify-center"
-                              title={emoji}
-                            >
-                              {emoji}
-                            </button>
-                          ))}
-                        </div>
-                      </div>
+                    {!msg.isSystem && isCurrentUser && (
+                      <Avatar className="h-8 w-8 sm:h-10 sm:w-10 lg:h-12 lg:w-12 flex-shrink-0 ring-1 sm:ring-2 ring-white shadow-sm">
+                        <AvatarFallback className="bg-blue-500 text-white font-semibold text-xs sm:text-sm">
+                          {msg.user.avatar}
+                        </AvatarFallback>
+                      </Avatar>
                     )}
                   </div>
+                );
+              })}
 
-                  {/* Action Buttons Row - Always visible */}
-                  <div className="flex items-center justify-between gap-2 flex-shrink-0">
-                        {/* Left side - Action buttons */}
-                        <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
-                          <Button 
-                            variant="ghost" 
-                            size="sm" 
-                            className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600 flex-shrink-0"
-                            onClick={handleAttachmentClick}
-                            title="Attach file"
-                          >
-                            <Paperclip className="h-4 w-4" />
-                          </Button>
-                          <Button 
-                            variant="ghost" 
-                            size="sm" 
-                            className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600 flex-shrink-0"
-                            onClick={() => setShowEmojiPicker(!showEmojiPicker)}
-                            title="Add emoji"
-                          >
-                            <Smile className="h-4 w-4" />
-                          </Button>
-                          <Button 
-                            variant="ghost" 
-                            size="sm" 
-                            className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600 flex-shrink-0"
-                            onClick={() => setMessage(prev => prev + '@')}
-                            title="Mention someone"
-                          >
-                            <AtSign className="h-4 w-4" />
-                          </Button>
-                        </div>
+              <div ref={messagesEndRef} />
+            </div>
+          </div>
 
-                        {/* Right side - Character count and Send button */}
-                        <div className="flex items-center gap-2 ml-auto flex-shrink-0">
-                          <span className="text-xs text-gray-500 hidden md:inline whitespace-nowrap">
-                            {message.length}/2000
-                          </span>
-                          <Button 
-                            onClick={handleSendMessage} 
-                            disabled={!message.trim() && selectedFiles.length === 0}
-                            className="bg-blue-600 hover:bg-blue-700 h-8 sm:h-9 px-3 sm:px-4 disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
-                            size="sm"
-                          >
-                            <Send className="h-4 w-4 sm:mr-2" />
-                            <span className="hidden sm:inline">Send</span>
-                          </Button>
-                        </div>
+          {/* Message Input - Fixed at bottom */}
+          <div className="bg-white border-t border-gray-200 p-2 sm:p-3 lg:p-6 flex-shrink-0">
+            <div className="max-w-full">
+              {/* Hidden File Input */}
+              <input
+                type="file"
+                ref={fileInputRef}
+                onChange={handleFileSelect}
+                className="hidden"
+                multiple
+                accept={documentPolicy.allowedFileTypes.map(ext => `.${ext}`).join(',')}
+              />
+
+              {/* Selected Files Preview - Scrollable if many files */}
+              {selectedFiles.length > 0 && (
+                <div className="mb-3 space-y-2 max-h-32 overflow-y-auto pr-2">
+                  {selectedFiles.map((file, index) => (
+                    <div key={index} className="flex items-center gap-2 p-2 bg-blue-50 rounded-lg border border-blue-200">
+                      <div className="flex-shrink-0">
+                        <FileIcon type={file.type.split('/')[1] || 'file'} />
                       </div>
+                      <span className="text-sm text-gray-700 flex-1 truncate min-w-0">{file.name}</span>
+                      <span className="text-xs text-gray-500 flex-shrink-0">{(file.size / 1024).toFixed(1)} KB</span>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRemoveFile(index)}
+                        className="h-6 w-6 p-0 hover:bg-red-100 flex-shrink-0"
+                      >
+                        <X className="h-3 w-3 text-red-600" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Textarea with Mention Dropdown and Emoji Picker */}
+              <div className="relative mb-2">
+                {/* Mention Suggestions Dropdown - Shows above textarea */}
+                {(() => {
+                  // Find the last @ symbol that hasn't been completed (doesn't have a space after a name)
+                  const lastAtIndex = message.lastIndexOf('@');
+                  const hasAt = lastAtIndex >= 0;
+
+                  if (!hasAt) return null;
+
+                  // Get text after the last @
+                  const textAfterAt = message.slice(lastAtIndex + 1);
+
+                  // Check if this mention is already completed
+                  // A completed mention looks like: "@username " (ends with space after name)
+                  // An incomplete mention looks like: "@" or "@user" (no space after, or just typed @)
+                  const trimmedAfterAt = textAfterAt.trim();
+                  const endsWithSpace = textAfterAt.endsWith(' ');
+                  const hasNonSpaceChars = trimmedAfterAt.length > 0;
+
+                  // Don't show dropdown if:
+                  // 1. Text after @ is too long (>20 chars) - probably not a mention
+                  // 2. Text after @ ends with space AND has characters (completed mention like "@user ")
+                  // 3. Text after @ contains space in the middle (like "@user name" - multi-word name already typed)
+                  const containsSpaceInMiddle = trimmedAfterAt.includes(' ') && !endsWithSpace;
+                  const isCompletedMention = endsWithSpace && hasNonSpaceChars;
+
+                  // Show dropdown if:
+                  // - Has @ symbol
+                  // - Text after @ is not too long
+                  // - Mention is not completed (doesn't end with space after a name)
+                  // - Doesn't contain space in middle (not a multi-word name being typed)
+                  const shouldShowDropdown = hasAt &&
+                    textAfterAt.length <= 20 &&
+                    !containsSpaceInMiddle &&
+                    !isCompletedMention;
+
+                  if (!shouldShowDropdown) return null;
+
+                  // Use trimmed text for search (ignore trailing spaces)
+                  const searchTerm = trimmedAfterAt.toLowerCase();
+                  const filteredParticipants = participants.filter(p => {
+                    // Exclude current user from mention suggestions
+                    const isCurrentUserInList = (p as any).userId === currentUserId;
+                    if (isCurrentUserInList) return false;
+
+                    // Filter by search term (empty search term shows all)
+                    if (searchTerm) {
+                      return p.name.toLowerCase().includes(searchTerm);
+                    }
+                    return true; // Show all if no search term
+                  });
+
+                  return (
+                    <div className="absolute bottom-full left-0 mb-2 bg-white border-2 border-blue-300 rounded-lg shadow-2xl p-3 z-[100] w-full sm:max-w-md">
+                      <p className="text-sm font-semibold text-gray-900 mb-2">💬 Mention someone</p>
+                      <div className="max-h-60 overflow-y-auto space-y-1">
+                        {filteredParticipants.length > 0 ? (
+                          filteredParticipants.map((participant, idx) => (
+                            <button
+                              key={idx}
+                              type="button"
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                // Find the last @ and replace everything from @ to end with the new mention
+                                const lastAt = message.lastIndexOf('@');
+                                const before = message.slice(0, lastAt);
+                                // Add the mention with a space after for easy continuation
+                                setMessage(before + '@' + participant.name + ' ');
+                              }}
+                              className="w-full flex items-center gap-3 p-3 hover:bg-blue-50 rounded-lg text-left transition-colors border border-transparent hover:border-blue-200"
+                            >
+                              <Avatar className="h-10 w-10">
+                                <AvatarFallback className={`text-white text-sm font-semibold ${participant.role === 'Initiator' ? 'bg-green-600' :
+                                  participant.role === 'Approver' ? 'bg-purple-600' :
+                                    'bg-blue-500'
+                                  }`}>
+                                  {participant.avatar}
+                                </AvatarFallback>
+                              </Avatar>
+                              <div className="flex-1 min-w-0">
+                                <p className="text-sm font-semibold text-gray-900">{participant.name}</p>
+                                <p className="text-xs text-gray-600">{participant.role}</p>
+                              </div>
+                            </button>
+                          ))
+                        ) : (
+                          <p className="text-sm text-gray-500 text-center py-4">
+                            {searchTerm ? `No participants found matching "${searchTerm}"` : 'No other participants available'}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })()}
+
+                <Textarea
+                  placeholder="Type your message... Use @username to mention someone"
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                  onKeyPress={handleKeyPress}
+                  className="min-h-[50px] sm:min-h-[60px] resize-none border-gray-200 focus:ring-blue-500 focus:border-blue-500 w-full text-sm"
+                  rows={2}
+                />
+
+                {/* Emoji Picker Popup */}
+                {showEmojiPicker && (
+                  <div className="absolute bottom-full left-0 mb-2 bg-white border border-gray-200 rounded-lg shadow-xl p-3 z-50 w-full sm:w-96 max-h-80 overflow-y-auto">
+                    <div className="flex items-center justify-between mb-3 sticky top-0 bg-white pb-2 border-b">
+                      <span className="text-sm font-semibold text-gray-700">Pick an emoji</span>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setShowEmojiPicker(false)}
+                        className="h-6 w-6 p-0"
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
+                    <div className="grid grid-cols-8 sm:grid-cols-10 gap-1">
+                      {emojiList.map((emoji, index) => (
+                        <button
+                          key={index}
+                          onClick={() => handleEmojiSelect(emoji)}
+                          className="text-xl sm:text-2xl hover:bg-gray-100 rounded p-1 transition-colors flex items-center justify-center"
+                          title={emoji}
+                        >
+                          {emoji}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Action Buttons Row - Always visible */}
+              <div className="flex items-center justify-between gap-2 flex-shrink-0">
+                {/* Left side - Action buttons */}
+                <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600 flex-shrink-0"
+                    onClick={handleAttachmentClick}
+                    title="Attach file"
+                  >
+                    <Paperclip className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600 flex-shrink-0"
+                    onClick={() => setShowEmojiPicker(!showEmojiPicker)}
+                    title="Add emoji"
+                  >
+                    <Smile className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600 flex-shrink-0"
+                    onClick={() => setMessage(prev => prev + '@')}
+                    title="Mention someone"
+                  >
+                    <AtSign className="h-4 w-4" />
+                  </Button>
+                </div>
+
+                {/* Right side - Character count and Send button */}
+                <div className="flex items-center gap-2 ml-auto flex-shrink-0">
+                  <span className="text-xs text-gray-500 hidden md:inline whitespace-nowrap">
+                    {message.length}/2000
+                  </span>
+                  <Button
+                    onClick={handleSendMessage}
+                    disabled={!message.trim() && selectedFiles.length === 0}
+                    className="bg-blue-600 hover:bg-blue-700 h-8 sm:h-9 px-3 sm:px-4 disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
+                    size="sm"
+                  >
+                    <Send className="h-4 w-4 sm:mr-2" />
+                    <span className="hidden sm:inline">Send</span>
+                  </Button>
                 </div>
               </div>
+            </div>
+          </div>
         </div>
 
         {/* Mobile Sidebar Overlay */}
         {showSidebar && (
-          <div 
+          <div
             className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
             onClick={() => setShowSidebar(false)}
           />
@@ -1697,8 +1695,8 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           <div className="p-4 sm:p-6 border-b border-gray-200 flex-1 flex flex-col min-h-0">
             <div className="flex items-center justify-between mb-4 flex-shrink-0">
               <h3 className="text-base sm:text-lg font-semibold text-gray-900">Participants</h3>
-              <Button 
-                variant="ghost" 
+              <Button
+                variant="ghost"
                 size="sm"
                 onClick={() => setShowSidebar(false)}
                 className="lg:hidden h-8 w-8 p-0"
@@ -1710,32 +1708,31 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
               {participants.map((participant, index) => {
                 const isCurrentUser = (participant as any).userId === currentUserId;
                 return (
-                <div key={index} className="flex items-center gap-3">
-                  <div className="relative">
-                    <Avatar className="h-9 w-9 sm:h-10 sm:w-10">
-                      <AvatarFallback className={`text-white font-semibold text-sm ${
-                        participant.role === 'Initiator' ? 'bg-green-600' : 
-                        isCurrentUser ? 'bg-blue-500' : 'bg-slate-600'
-                      }`}>
-                        {participant.avatar}
-                      </AvatarFallback>
-                    </Avatar>
-                    <div className={`absolute -bottom-1 -right-1 w-3 h-3 rounded-full border-2 border-white ${getStatusColor(participant.status)}`}></div>
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="font-medium text-gray-900 truncate text-sm sm:text-base">
-                      {participant.name} {isCurrentUser && <span className="text-xs text-gray-500 font-normal">(you)</span>}
-                    </p>
-                    <div className="flex items-center gap-2">
-                      <p className="text-xs text-gray-500">{participant.role}</p>
-                      <span className="text-xs text-gray-400">•</span>
-                      <p className="text-xs text-gray-500">{getStatusText(participant.status)}</p>
+                  <div key={index} className="flex items-center gap-3">
+                    <div className="relative">
+                      <Avatar className="h-9 w-9 sm:h-10 sm:w-10">
+                        <AvatarFallback className={`text-white font-semibold text-sm ${participant.role === 'Initiator' ? 'bg-green-600' :
+                          isCurrentUser ? 'bg-blue-500' : 'bg-slate-600'
+                          }`}>
+                          {participant.avatar}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className={`absolute -bottom-1 -right-1 w-3 h-3 rounded-full border-2 border-white ${getStatusColor(participant.status)}`}></div>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-gray-900 truncate text-sm sm:text-base">
+                        {participant.name} {isCurrentUser && <span className="text-xs text-gray-500 font-normal">(you)</span>}
+                      </p>
+                      <div className="flex items-center gap-2">
+                        <p className="text-xs text-gray-500">{participant.role}</p>
+                        <span className="text-xs text-gray-400">•</span>
+                        <p className="text-xs text-gray-500">{getStatusText(participant.status)}</p>
+                      </div>
+                      {participant.lastSeen && participant.status === 'offline' && (
+                        <p className="text-xs text-gray-400">{participant.lastSeen}</p>
+                      )}
                     </div>
-                    {participant.lastSeen && participant.status === 'offline' && (
-                      <p className="text-xs text-gray-400">{participant.lastSeen}</p>
-                    )}
                   </div>
-                </div>
                 );
               })}
             </div>
@@ -1748,9 +1745,9 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
               <div className="space-y-2">
                 {/* Only initiator can add approvers */}
                 {isInitiator && (
-                  <Button 
-                    variant="outline" 
-                    size="sm" 
+                  <Button
+                    variant="outline"
+                    size="sm"
                     className="w-full justify-start gap-2 h-9 text-sm"
                     onClick={() => setShowAddApproverModal(true)}
                   >
@@ -1758,9 +1755,9 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
                     Add Approver
                   </Button>
                 )}
-                <Button 
-                  variant="outline" 
-                  size="sm" 
+                <Button
+                  variant="outline"
+                  size="sm"
                   className="w-full justify-start gap-2 h-9 text-sm"
                   onClick={() => setShowAddSpectatorModal(true)}
                 >
@@ -1780,7 +1777,7 @@ export function WorkNoteChat({ requestId, messages: externalMessages, onSend, sk
           )}
         </div>
       </div>
-      
+
       {/* File Preview Modal */}
       {previewFile && (
         <FilePreview
diff --git a/src/components/workNote/WorkNoteChat/WorkNoteChatSimple.tsx b/src/components/workNote/WorkNoteChat/WorkNoteChatSimple.tsx
index 2b21dbf..4bc192e 100644
--- a/src/components/workNote/WorkNoteChat/WorkNoteChatSimple.tsx
+++ b/src/components/workNote/WorkNoteChat/WorkNoteChatSimple.tsx
@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import { getWorkNotes, createWorkNoteMultipart, getWorkflowDetails, downloadWorkNoteAttachment, getWorkNoteAttachmentPreviewUrl } from '@/services/workflowApi';
+import { sanitizeHTML } from '@/utils/sanitizer';
 import { toast } from 'sonner';
 import { getSocket, joinRequestRoom, leaveRequestRoom } from '@/utils/socket';
 import { formatDateTime } from '@/utils/dateFormatter';
@@ -8,12 +9,12 @@ import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Textarea } from '@/components/ui/textarea';
-import { 
-  Send, 
-  Smile, 
-  Paperclip, 
-  FileText, 
-  Download, 
+import {
+  Send,
+  Smile,
+  Paperclip,
+  FileText,
+  Download,
   Clock,
   Flag,
   X,
@@ -58,9 +59,11 @@ interface WorkNoteChatSimpleProps {
 }
 
 const formatMessage = (content: string) => {
-  return content
+  const formattedContent = content
     .replace(/@([\w\s]+)(?=\s|$|[.,!?])/g, '<span class="inline-flex items-center px-2 py-1 rounded-md bg-blue-100 text-blue-800 font-medium text-sm">@$1</span>')
     .replace(/\n/g, '<br />');
+
+  return sanitizeHTML(formattedContent);
 };
 
 const FileIcon = ({ type }: { type: string }) => {
@@ -102,7 +105,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const filteredMessages = messages.filter(msg => 
+  const filteredMessages = messages.filter(msg =>
     msg.content.toLowerCase().includes(searchTerm.toLowerCase()) ||
     msg.user.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
@@ -132,7 +135,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
   // Realtime updates via Socket.IO
   useEffect(() => {
     if (!currentUserId) return; // Wait for currentUserId to be loaded
-    
+
     let joinedId = requestId;
     (async () => {
       try {
@@ -140,39 +143,39 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
         if (details?.workflow?.requestId) {
           joinedId = details.workflow.requestId;
         }
-      } catch {}
+      } catch { }
       try {
         // Get socket using helper function (handles VITE_BASE_URL or VITE_API_BASE_URL)
         const s = getSocket(); // Uses getSocketBaseUrl() helper internally
-        
+
         joinRequestRoom(s, joinedId, currentUserId || undefined);
 
         const noteHandler = (payload: any) => {
           const n = payload?.note || payload;
           if (!n) return;
-          
+
           setMessages(prev => {
             if (prev.some(m => m.id === (n.noteId || n.note_id || n.id))) {
               return prev;
             }
-            
+
             const userName = n.userName || n.user_name || 'User';
             const userRole = n.userRole || n.user_role;
             const participantRole = formatParticipantRole(userRole);
             const noteUserId = n.userId || n.user_id;
-            
+
             const newMsg = {
               id: n.noteId || n.note_id || String(Date.now()),
-              user: { 
-                name: userName, 
-                avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(), 
-                role: participantRole 
+              user: {
+                name: userName,
+                avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
+                role: participantRole
               },
               content: n.message || '',
               timestamp: n.createdAt || n.created_at || new Date().toISOString(),
               isCurrentUser: noteUserId === currentUserId
             } as any;
-            
+
             return [...prev, newMsg];
           });
         };
@@ -189,7 +192,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
       }
     })();
     return () => {
-      try { (window as any).__wn_cleanup?.(); } catch {}
+      try { (window as any).__wn_cleanup?.(); } catch { }
     };
   }, [requestId, currentUserId]);
 
@@ -205,20 +208,20 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
             const userName = m.userName || m.user_name || 'User';
             const userRole = m.userRole || m.user_role;
             const participantRole = formatParticipantRole(userRole);
-            
+
             return {
               id: m.noteId || m.note_id || m.id || String(Math.random()),
-              user: { 
-                name: userName, 
-                avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(), 
-                role: participantRole 
+              user: {
+                name: userName,
+                avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
+                role: participantRole
               },
               content: m.message || '',
               timestamp: m.createdAt || m.created_at || new Date().toISOString(),
             };
           }) : [];
           setMessages(mapped as any);
-        } catch {}
+        } catch { }
       }
       setMessage('');
       setSelectedFiles([]);
@@ -234,21 +237,21 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
           const userRole = m.userRole || m.user_role;
           const participantRole = formatParticipantRole(userRole);
           const noteUserId = m.userId || m.user_id;
-          
+
           return {
             id: m.noteId || m.note_id || m.id || String(Math.random()),
-            user: { 
-              name: userName, 
-              avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(), 
-              role: participantRole 
+            user: {
+              name: userName,
+              avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
+              role: participantRole
             },
             content: m.message || m.content || '',
             timestamp: m.createdAt || m.created_at || m.timestamp || new Date().toISOString(),
-            attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({ 
+            attachments: Array.isArray(m.attachments) ? m.attachments.map((a: any) => ({
               attachmentId: a.attachmentId || a.attachment_id,
-              name: a.fileName || a.file_name || a.name, 
+              name: a.fileName || a.file_name || a.name,
               fileName: a.fileName || a.file_name || a.name,
-              url: a.storageUrl || a.storage_url || a.url || '#', 
+              url: a.storageUrl || a.storage_url || a.url || '#',
               type: a.fileType || a.file_type || a.type || 'file',
               fileType: a.fileType || a.file_type || a.type || 'file',
               fileSize: a.fileSize || a.file_size
@@ -257,24 +260,24 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
           } as any;
         });
         setMessages(mapped);
-      } catch {}
+      } catch { }
     } else {
       (async () => {
         try {
           const rows = await getWorkNotes(requestId);
-          
+
           const mapped = Array.isArray(rows) ? rows.map((m: any) => {
             const userName = m.userName || m.user_name || 'User';
             const userRole = m.userRole || m.user_role;
             const participantRole = formatParticipantRole(userRole);
             const noteUserId = m.userId || m.user_id;
-            
+
             return {
               id: m.noteId || m.note_id || m.id || String(Math.random()),
-              user: { 
-                name: userName, 
-                avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(), 
-                role: participantRole 
+              user: {
+                name: userName,
+                avatar: userName.split(' ').map((s: string) => s[0]).filter(Boolean).join('').slice(0, 2).toUpperCase(),
+                role: participantRole
               },
               content: m.message || '',
               timestamp: m.createdAt || m.created_at || new Date().toISOString(),
@@ -336,7 +339,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
       if (msg.id === messageId) {
         const reactions = msg.reactions || [];
         const existingReaction = reactions.find(r => r.emoji === emoji);
-        
+
         if (existingReaction) {
           if (existingReaction.users.includes('You')) {
             existingReaction.users = existingReaction.users.filter(u => u !== 'You');
@@ -349,7 +352,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
         } else {
           reactions.push({ emoji, users: ['You'] });
         }
-        
+
         return { ...msg, reactions };
       }
       return msg;
@@ -371,7 +374,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
             </div>
           </div>
         </div>
-        
+
         {/* Search Bar */}
         <div className="relative">
           <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
@@ -389,21 +392,20 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
         <div className="space-y-6 max-w-full">
           {filteredMessages.map((msg) => {
             const isCurrentUser = (msg as any).isCurrentUser || msg.user.name === 'You';
-            
+
             return (
               <div key={msg.id} className={`flex gap-3 ${msg.isSystem ? 'justify-center' : isCurrentUser ? 'justify-end' : ''}`}>
                 {!msg.isSystem && !isCurrentUser && (
                   <Avatar className="h-10 w-10 flex-shrink-0 ring-2 ring-white shadow-sm">
-                    <AvatarFallback className={`text-white font-semibold text-sm ${
-                      msg.user.role === 'Initiator' ? 'bg-green-600' : 
-                      msg.user.role === 'Approver' ? 'bg-blue-600' :
-                      'bg-slate-600'
-                    }`}>
+                    <AvatarFallback className={`text-white font-semibold text-sm ${msg.user.role === 'Initiator' ? 'bg-green-600' :
+                        msg.user.role === 'Approver' ? 'bg-blue-600' :
+                          'bg-slate-600'
+                      }`}>
                       {msg.user.avatar}
                     </AvatarFallback>
                   </Avatar>
                 )}
-                
+
                 <div className={`${isCurrentUser ? 'max-w-[70%]' : 'flex-1'} min-w-0 ${msg.isSystem ? 'text-center max-w-md mx-auto' : ''}`}>
                   {msg.isSystem ? (
                     <div className="inline-flex items-center gap-3 px-4 py-2 bg-gray-100 rounded-full">
@@ -435,7 +437,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
 
                       {/* Message Content */}
                       <div className={`rounded-lg border p-4 shadow-sm ${isCurrentUser ? 'bg-blue-50 border-blue-200' : 'bg-white border-gray-200'}`}>
-                        <div 
+                        <div
                           className="text-gray-800 leading-relaxed text-base"
                           dangerouslySetInnerHTML={{ __html: formatMessage(msg.content) }}
                         />
@@ -449,72 +451,72 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
                                 const fileName = attachment.fileName || attachment.file_name || attachment.name;
                                 const fileType = attachment.fileType || attachment.file_type || attachment.type || '';
                                 const attachmentId = attachment.attachmentId || attachment.attachment_id;
-                                
+
                                 return (
-                                <div key={index} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors">
-                                  <div className="flex-shrink-0">
-                                    <FileIcon type={fileType} />
-                                  </div>
-                                  <div className="flex-1 min-w-0">
-                                    <p className="text-sm font-medium text-gray-700 truncate">
-                                      {fileName}
-                                    </p>
-                                    {fileSize && (
-                                      <p className="text-xs text-gray-500">
-                                        {formatFileSize(fileSize)}
+                                  <div key={index} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors">
+                                    <div className="flex-shrink-0">
+                                      <FileIcon type={fileType} />
+                                    </div>
+                                    <div className="flex-1 min-w-0">
+                                      <p className="text-sm font-medium text-gray-700 truncate">
+                                        {fileName}
                                       </p>
+                                      {fileSize && (
+                                        <p className="text-xs text-gray-500">
+                                          {formatFileSize(fileSize)}
+                                        </p>
+                                      )}
+                                    </div>
+
+                                    {/* Preview button for images and PDFs */}
+                                    {attachmentId && (fileType.includes('image') || fileType.includes('pdf')) && (
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-8 w-8 p-0 flex-shrink-0 hover:bg-purple-100 hover:text-purple-600"
+                                        onClick={(e) => {
+                                          e.preventDefault();
+                                          e.stopPropagation();
+                                          const previewUrl = getWorkNoteAttachmentPreviewUrl(attachmentId);
+                                          setPreviewFile({
+                                            fileName,
+                                            fileType,
+                                            fileUrl: previewUrl,
+                                            fileSize,
+                                            attachmentId
+                                          });
+                                        }}
+                                        title="Preview file"
+                                      >
+                                        <Eye className="w-4 h-4" />
+                                      </Button>
                                     )}
-                                  </div>
-                                  
-                                  {/* Preview button for images and PDFs */}
-                                  {attachmentId && (fileType.includes('image') || fileType.includes('pdf')) && (
-                                    <Button 
-                                      variant="ghost" 
-                                      size="sm" 
-                                      className="h-8 w-8 p-0 flex-shrink-0 hover:bg-purple-100 hover:text-purple-600"
-                                      onClick={(e) => {
+
+                                    {/* Download button */}
+                                    <Button
+                                      variant="ghost"
+                                      size="sm"
+                                      className="h-8 w-8 p-0 flex-shrink-0 hover:bg-blue-100 hover:text-blue-600"
+                                      onClick={async (e) => {
                                         e.preventDefault();
                                         e.stopPropagation();
-                                        const previewUrl = getWorkNoteAttachmentPreviewUrl(attachmentId);
-                                        setPreviewFile({
-                                          fileName,
-                                          fileType,
-                                          fileUrl: previewUrl,
-                                          fileSize,
-                                          attachmentId
-                                        });
+
+                                        if (!attachmentId) {
+                                          toast.error('Cannot download: Attachment ID missing');
+                                          return;
+                                        }
+
+                                        try {
+                                          await downloadWorkNoteAttachment(attachmentId);
+                                        } catch (error) {
+                                          toast.error('Failed to download file');
+                                        }
                                       }}
-                                      title="Preview file"
+                                      title="Download file"
                                     >
-                                      <Eye className="w-4 h-4" />
+                                      <Download className="w-4 h-4" />
                                     </Button>
-                                  )}
-                                  
-                                  {/* Download button */}
-                                  <Button 
-                                    variant="ghost" 
-                                    size="sm" 
-                                    className="h-8 w-8 p-0 flex-shrink-0 hover:bg-blue-100 hover:text-blue-600"
-                                    onClick={async (e) => {
-                                      e.preventDefault();
-                                      e.stopPropagation();
-                                      
-                                      if (!attachmentId) {
-                                        toast.error('Cannot download: Attachment ID missing');
-                                        return;
-                                      }
-                                      
-                                      try {
-                                        await downloadWorkNoteAttachment(attachmentId);
-                                      } catch (error) {
-                                        toast.error('Failed to download file');
-                                      }
-                                    }}
-                                    title="Download file"
-                                  >
-                                    <Download className="w-4 h-4" />
-                                  </Button>
-                                </div>
+                                  </div>
                                 );
                               })}
                             </div>
@@ -528,19 +530,18 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
                               <button
                                 key={index}
                                 onClick={() => addReaction(msg.id, reaction.emoji)}
-                                className={`flex items-center gap-1 px-2 py-1 rounded-full text-sm transition-colors flex-shrink-0 ${
-                                  reaction.users.includes('You') 
-                                    ? 'bg-blue-100 text-blue-800 border border-blue-200' 
+                                className={`flex items-center gap-1 px-2 py-1 rounded-full text-sm transition-colors flex-shrink-0 ${reaction.users.includes('You')
+                                    ? 'bg-blue-100 text-blue-800 border border-blue-200'
                                     : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                                }`}
+                                  }`}
                               >
                                 <span>{reaction.emoji}</span>
                                 <span className="text-xs font-medium">{reaction.users.length}</span>
                               </button>
                             ))}
-                            <Button 
-                              variant="ghost" 
-                              size="sm" 
+                            <Button
+                              variant="ghost"
+                              size="sm"
                               className="h-7 w-7 p-0 flex-shrink-0"
                               onClick={() => setShowEmojiPicker(!showEmojiPicker)}
                             >
@@ -552,7 +553,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
                     </div>
                   )}
                 </div>
-                
+
                 {!msg.isSystem && isCurrentUser && (
                   <Avatar className="h-10 w-10 flex-shrink-0 ring-2 ring-white shadow-sm">
                     <AvatarFallback className="bg-blue-500 text-white font-semibold text-sm">
@@ -648,27 +649,27 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
           <div className="flex items-center justify-between gap-2">
             {/* Left side - Action buttons */}
             <div className="flex items-center gap-2 flex-shrink-0">
-              <Button 
-                variant="ghost" 
-                size="sm" 
+              <Button
+                variant="ghost"
+                size="sm"
                 className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600"
                 onClick={handleAttachmentClick}
                 title="Attach file"
               >
                 <Paperclip className="h-4 w-4" />
               </Button>
-              <Button 
-                variant="ghost" 
-                size="sm" 
+              <Button
+                variant="ghost"
+                size="sm"
                 className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600"
                 onClick={() => setShowEmojiPicker(!showEmojiPicker)}
                 title="Add emoji"
               >
                 <Smile className="h-4 w-4" />
               </Button>
-              <Button 
-                variant="ghost" 
-                size="sm" 
+              <Button
+                variant="ghost"
+                size="sm"
                 className="text-gray-500 h-8 w-8 p-0 hover:bg-blue-50 hover:text-blue-600"
                 onClick={() => setMessage(prev => prev + '@')}
                 title="Mention someone"
@@ -682,8 +683,8 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
               <span className="text-xs text-gray-500 whitespace-nowrap">
                 {message.length}/2000
               </span>
-              <Button 
-                onClick={handleSendMessage} 
+              <Button
+                onClick={handleSendMessage}
                 disabled={!message.trim() && selectedFiles.length === 0}
                 className="bg-blue-600 hover:bg-blue-700 h-9 px-4 disabled:opacity-50 disabled:cursor-not-allowed"
                 size="sm"
@@ -695,7 +696,7 @@ export function WorkNoteChatSimple({ requestId, messages: externalMessages, onSe
           </div>
         </div>
       </div>
-      
+
       {/* File Preview Modal */}
       {previewFile && (
         <FilePreview
diff --git a/src/pages/CreateAdminRequest/components/AdminRequestReviewStep.tsx b/src/pages/CreateAdminRequest/components/AdminRequestReviewStep.tsx
index 0e50020..416be65 100644
--- a/src/pages/CreateAdminRequest/components/AdminRequestReviewStep.tsx
+++ b/src/pages/CreateAdminRequest/components/AdminRequestReviewStep.tsx
@@ -3,6 +3,7 @@ import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import { FileText, AlertCircle } from 'lucide-react';
 import { RequestTemplate } from '@/hooks/useCreateRequestForm';
+import { sanitizeHTML } from '@/utils/sanitizer';
 
 interface AdminRequestReviewStepProps {
     template: RequestTemplate;
@@ -47,7 +48,7 @@ export function AdminRequestReviewStep({
                                     <span className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Request Detail</span>
                                     <div
                                         className="text-sm text-gray-700 mt-1 prose prose-sm max-w-none"
-                                        dangerouslySetInnerHTML={{ __html: formData.description }}
+                                        dangerouslySetInnerHTML={{ __html: sanitizeHTML(formData.description) }}
                                     />
                                 </div>
 
diff --git a/src/utils/sanitizer.ts b/src/utils/sanitizer.ts
new file mode 100644
index 0000000..4b39c7e
--- /dev/null
+++ b/src/utils/sanitizer.ts
@@ -0,0 +1,25 @@
+/**
+ * Sanitizes HTML content by removing dangerous attributes and tags.
+ * This is used to comply with CSP policies and prevent XSS.
+ */
+export function sanitizeHTML(html: string): string {
+    if (!html) return '';
+
+    // 1. Remove script tags completely
+    let sanitized = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
+
+    // 2. Remove all "on*" event handler attributes (onclick, onload, etc.)
+    // This handles attributes like onclick="alert(1)" or onclick='alert(1)' or onclick=alert(1)
+    sanitized = sanitized.replace(/\s+on\w+\s*=\s*(?:'[^']*'|"[^"]*"|[^\s>]+)/gi, '');
+
+    // 3. Remove "javascript:" pseudo-protocols in href or src
+    sanitized = sanitized.replace(/(href|src)\s*=\s*(?:'javascript:[^']*'|"javascript:[^"]*"|javascript:[^\s>]+)/gi, '$1="#"');
+
+    // 4. Remove <style> tags (to comply with style-src)
+    sanitized = sanitized.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
+
+    // 5. Remove meta and link tags (except for purely visual ones if needed, but safer to remove)
+    sanitized = sanitized.replace(/<(meta|link|iframe|object|embed|applet)[^>]*>/gi, '');
+
+    return sanitized;
+}