Fix messaging UI alignment, unsend functionality, and applicant notification bugs

src/components/Admin/AdminInterviewManagement.jsx

@@ -2,13 +2,13 @@ import React, { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { supabase } from '../../supabaseClient';
 import FullProfileOverlay from '../FullProfileOverlay';
-import ScheduleInterviewModal from '../ScheduleInterviewModal'; 
+import ScheduleInterviewModal from '../ScheduleInterviewModal';
 
 // --- ICONS ---
 const SmallCalendarIcon = () => (<svg style={{ width: '24px', height: '24px', color: 'rgba(255,255,255,0.7)' }} viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" /></svg>);
 const ChevronRightIcon = () => (<svg style={{ width: '16px', height: '16px', marginLeft: '4px' }} viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" /></svg>);
 const CloseIcon = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>;
-const SendIcon = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>;
+const SendIcon = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></svg>;
 
 // --- NEW FULL CHAT UI MODAL ---
 const AdminChatModal = ({ isOpen, onClose, applicant }) => {
@@ -78,20 +78,56 @@ const AdminChatModal = ({ isOpen, onClose, applicant }) => {
         if (error) console.error("Error sending message:", error);
     };
 
+    const unsendMsg = async (msgId) => {
+        if (!window.confirm("Unsend this message?")) return;
+
+        // 1. Try to delete the message
+        const { data, error } = await supabase.from('messages').delete().eq('id', msgId).select();
+
+        if (error) {
+            console.error("Unsend Error:", error);
+            alert("Failed to unsend message.");
+            return;
+        }
+
+        // 2. If RLS silently blocks deletion, fallback to update
+        if (!data || data.length === 0) {
+            const { error: updateError } = await supabase
+                .from('messages')
+                .update({ content: "🚫 This message was unsent" })
+                .eq('id', msgId);
+
+            if (updateError) {
+                alert("Database policies prevent unsending this message.");
+                return;
+            }
+
+            setMessages(prev => prev.map(m => m.id === msgId ? { ...m, content: "🚫 This message was unsent" } : m));
+        } else {
+            setMessages(prev => prev.filter(m => m.id !== msgId));
+        }
+    };
+
+    const canUnsend = (rawTime) => {
+        if (!rawTime) return false;
+        const msgTime = new Date(rawTime).getTime();
+        return (Date.now() - msgTime) < 5 * 60 * 1000; // 5 minutes
+    };
+
     if (!isOpen || !applicant) return null;
 
     return (
         <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(5px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100 }}>
             <style>{`.chat-scroll::-webkit-scrollbar { width: 6px; } .chat-scroll::-webkit-scrollbar-track { background: transparent; } .chat-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }`}</style>
-            
-            <motion.div 
+
+            <motion.div
                 initial={{ opacity: 0, scale: 0.95, y: 20 }}
                 animate={{ opacity: 1, scale: 1, y: 0 }}
                 exit={{ opacity: 0, scale: 0.95, y: 20 }}
-                style={{ 
-                    width: '100%', maxWidth: '600px', height: '75vh', 
-                    background: 'rgba(15, 23, 42, 0.95)', border: '1px solid rgba(255,255,255,0.1)', 
-                    borderRadius: '1.25rem', display: 'flex', flexDirection: 'column', 
+                style={{
+                    width: '100%', maxWidth: '600px', height: '75vh',
+                    background: 'rgba(15, 23, 42, 0.95)', border: '1px solid rgba(255,255,255,0.1)',
+                    borderRadius: '1.25rem', display: 'flex', flexDirection: 'column',
                     overflow: 'hidden', boxShadow: '0 25px 50px rgba(0,0,0,0.5)'
                 }}
             >
@@ -121,19 +157,26 @@ const AdminChatModal = ({ isOpen, onClose, applicant }) => {
                         messages.map(m => {
                             const isMe = m.sender_id === adminId;
                             return (
-                                <motion.div key={m.id} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} style={{ alignSelf: isMe ? 'flex-end' : 'flex-start', maxWidth: '75%' }}>
-                                    <div style={{ 
+                                <motion.div key={m.id} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} style={{ alignSelf: isMe ? 'flex-end' : 'flex-start', maxWidth: '75%', position: 'relative' }}>
+                                    <div style={{
                                         // Use Admin's Red Theme for outgoing bubbles
-                                        background: isMe ? 'linear-gradient(135deg, #EF4444 0%, #DC2626 100%)' : 'rgba(255,255,255,0.08)', 
-                                        color: 'white', padding: '0.85rem 1.25rem', borderRadius: '1.25rem', 
+                                        background: isMe ? 'linear-gradient(135deg, #EF4444 0%, #DC2626 100%)' : 'rgba(255,255,255,0.08)',
+                                        color: 'white', padding: '0.85rem 1.25rem', borderRadius: '1.25rem',
                                         borderBottomRightRadius: isMe ? 4 : '1.25rem', borderBottomLeftRadius: isMe ? '1.25rem' : 4,
                                         fontSize: '0.95rem', lineHeight: '1.5',
                                         boxShadow: isMe ? '0 4px 15px rgba(239, 68, 68, 0.3)' : 'none'
                                     }}>
                                         {m.content}
                                     </div>
-                                    <div style={{ fontSize: '0.7rem', color: '#64748b', marginTop: 4, textAlign: isMe ? 'right' : 'left', padding: '0 0.5rem' }}>
-                                        {new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                                    <div style={{ display: 'flex', justifyContent: isMe ? 'flex-end' : 'flex-start', alignItems: 'center', gap: '8px', marginTop: '4px' }}>
+                                        <div style={{ fontSize: '0.7rem', color: '#64748b', padding: '0 0.5rem' }}>
+                                            {new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                                        </div>
+                                        {isMe && canUnsend(m.created_at) && (
+                                            <button onClick={() => unsendMsg(m.id)} title="Unsend message (5 min window)" style={{ background: 'transparent', border: 'none', color: '#ef4444', cursor: 'pointer', padding: '0 2px', display: 'flex', alignItems: 'center' }}>
+                                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+                                            </button>
+                                        )}
                                     </div>
                                 </motion.div>
                             );
@@ -145,19 +188,19 @@ const AdminChatModal = ({ isOpen, onClose, applicant }) => {
                 {/* Input Area */}
                 <div style={{ padding: '1.25rem', background: 'rgba(0,0,0,0.3)', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
                     <div style={{ display: 'flex', gap: '0.75rem', background: 'rgba(255,255,255,0.03)', borderRadius: '1rem', padding: '0.5rem', border: '1px solid rgba(255,255,255,0.1)' }}>
-                        <textarea 
-                            value={text} 
-                            onChange={e => setText(e.target.value)} 
-                            onKeyDown={e => { if(e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); sendMsg(); }}} 
-                            placeholder="Type a message..." 
-                            style={{ flex: 1, padding: '0.75rem', border: 'none', background: 'transparent', color: 'white', outline: 'none', resize: 'none', height: '45px', fontFamily: 'inherit' }} 
+                        <textarea
+                            value={text}
+                            onChange={e => setText(e.target.value)}
+                            onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMsg(); } }}
+                            placeholder="Type a message..."
+                            style={{ flex: 1, padding: '0.75rem', border: 'none', background: 'transparent', color: 'white', outline: 'none', resize: 'none', height: '45px', fontFamily: 'inherit' }}
                         />
-                        <button 
-                            onClick={sendMsg} 
-                            disabled={!text.trim()} 
-                            style={{ 
-                                background: text.trim() ? '#EF4444' : 'rgba(255,255,255,0.05)', 
-                                color: text.trim() ? 'white' : '#64748b', border: 'none', borderRadius: '50%', 
+                        <button
+                            onClick={sendMsg}
+                            disabled={!text.trim()}
+                            style={{
+                                background: text.trim() ? '#EF4444' : 'rgba(255,255,255,0.05)',
+                                color: text.trim() ? 'white' : '#64748b', border: 'none', borderRadius: '50%',
                                 width: '45px', height: '45px', cursor: text.trim() ? 'pointer' : 'not-allowed',
                                 display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                                 transition: 'all 0.2s ease'
@@ -179,7 +222,7 @@ export default function AdminInterviewManagement() {
     const [applicants, setApplicants] = useState({ interviews: [], accepted: [], rejected: [] });
 
     // Modals State
-    const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false); 
+    const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false);
     const [isMessageModalOpen, setIsMessageModalOpen] = useState(false);
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
@@ -271,8 +314,8 @@ export default function AdminInterviewManagement() {
     };
 
     // 1. Fetch Data on Component Mount
-    useEffect(() => { 
-        fetchData(); 
+    useEffect(() => {
+        fetchData();
     }, []);
 
     // 2. Updated Schedule Handler
@@ -314,7 +357,7 @@ export default function AdminInterviewManagement() {
                 location: mode === 'Offline' ? details : null,
                 interviewer_name: interviewerName,
                 interviewer_role: interviewerRole,
-                duration_mins: 45 
+                duration_mins: 45
             };
 
             let dbError;
@@ -444,19 +487,19 @@ export default function AdminInterviewManagement() {
 
             <AnimatePresence>
                 {isMessageModalOpen && (
-                    <AdminChatModal 
-                        isOpen={isMessageModalOpen} 
-                        onClose={() => setIsMessageModalOpen(false)} 
-                        applicant={selectedApplicant} 
+                    <AdminChatModal
+                        isOpen={isMessageModalOpen}
+                        onClose={() => setIsMessageModalOpen(false)}
+                        applicant={selectedApplicant}
                     />
                 )}
             </AnimatePresence>
-            
+
             <AnimatePresence>
                 {isDrawerOpen && (
-                    <FullProfileOverlay 
-                        candidate={drawerCandidate} 
-                        onClose={() => setIsDrawerOpen(false)} 
+                    <FullProfileOverlay
+                        candidate={drawerCandidate}
+                        onClose={() => setIsDrawerOpen(false)}
                     />
                 )}
             </AnimatePresence>

src/components/ApplicantLayout.jsx

@@ -171,6 +171,13 @@ export default function ApplicantLayout({ children, activePage, onNavigate }) {
                     async (payload) => {
                         console.log("=== MESSAGES PAYLOAD ===", payload);
 
+                        // Ignore applicant's own manual replies to the system thread
+                        if (payload.new.sender_id === user.id) {
+                            if (!payload.new.content || !payload.new.content.startsWith("Hello, Thank you for applying")) {
+                                return;
+                            }
+                        }
+
                         // Fetch the sender's name from user_roles/companies
                         let senderName = 'Admin / HR';
                         const { data: roleData } = await supabase

src/components/JobListings.jsx

@@ -48,15 +48,15 @@ export default function JobListings({ searchQuery, setSearchQuery, isSearching,
     // ✅ Helper: Send welcome message to applicant
     const sendApplicationConfirmationMessage = async (userId, jobTitle) => {
         try {
-            const { data: { user: adminUser } } = await supabase.auth.getUser();
-            if (!adminUser) return;
-
             const message = `Hello, Thank you for applying for the **${jobTitle}** position. We have received your application and our team is currently reviewing your profile. If your qualifications match our requirements, we will contact you shortly regarding the next steps in the selection process. We appreciate your interest in this opportunity.`;
 
+            // Insert message using applicant's ID for both sender and receiver 
+            // (RLS prevents applicants from inserting messages on behalf of an Admin)
             const { error } = await supabase.from('messages').insert([{
-                sender_id: adminUser.id,
+                sender_id: userId,
                 receiver_id: userId,
-                content: message
+                content: message,
+                is_read: false
             }]);
 
             if (error) console.error('Error sending confirmation message:', error);

src/pages/ApplicantMessages.jsx

@@ -3,22 +3,22 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { supabase } from '../supabaseClient';
 import ApplicantLayout from '../components/ApplicantLayout';
 import PlaceholderContent from '../components/PlaceholderContent';
-import { ChatIcon, SearchIcon } from '../components/Icons'; 
+import { ChatIcon, SearchIcon } from '../components/Icons';
 
 // --- Inline UI Components for Chat ---
 const SendIcon = () => (
     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-        <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+        <line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" />
     </svg>
 );
 
 const Avatar = ({ name }) => (
-    <div style={{ 
-        width: 45, height: 45, borderRadius: '50%', 
-        background: 'linear-gradient(135deg, #374151, #1f2937)', 
-        border: '2px solid rgba(255,255,255,0.1)', 
-        display: 'flex', alignItems: 'center', justifyContent: 'center', 
-        fontWeight: 'bold', color: 'white', flexShrink: 0 
+    <div style={{
+        width: 45, height: 45, borderRadius: '50%',
+        background: 'linear-gradient(135deg, #374151, #1f2937)',
+        border: '2px solid rgba(255,255,255,0.1)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        fontWeight: 'bold', color: 'white', flexShrink: 0
     }}>
         {name ? name[0].toUpperCase() : 'U'}
     </div>
@@ -55,17 +55,30 @@ export default function ApplicantMessages({ onNavigate }) {
 
             const threadMap = {};
             messages.forEach(m => {
-                const isMe = m.sender_id === uid;
-                const otherId = isMe ? m.receiver_id : m.sender_id;
+                let isMe = m.sender_id === uid;
+                let otherId = isMe ? m.receiver_id : m.sender_id;
+
+                // --- FIX FOR AUTOMATED MESSAGES ---
+                // If the applicant sent it to themselves, it's a thread used for system messages.
+                if (m.sender_id === m.receiver_id && m.sender_id === uid) {
+                    otherId = uid; // Keep a valid UUID so replies work
+
+                    // Only force the automated welcome message to the left side
+                    if (m.content && m.content.startsWith("Hello, Thank you for applying")) {
+                        isMe = false;
+                    } else {
+                        isMe = true; // Applicant's manual replies stay on the right
+                    }
+                }
 
                 if (!threadMap[otherId]) {
-                    threadMap[otherId] = { 
-                        id: otherId, 
-                        name: 'Admin / HR', 
-                        subj: 'Application Update', 
-                        last: '', 
-                        unread: false, 
-                        time: m.created_at, 
+                    threadMap[otherId] = {
+                        id: otherId,
+                        name: 'Admin / HR',
+                        subj: 'Application Update',
+                        last: '',
+                        unread: false,
+                        time: m.created_at,
                         msgs: [],
                         companyName: '',
                         companyLogo: '',
@@ -73,11 +86,12 @@ export default function ApplicantMessages({ onNavigate }) {
                     };
                 }
 
-                threadMap[otherId].msgs.push({ 
-                    id: m.id, 
-                    text: m.content, 
-                    time: new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), 
-                    isMe 
+                threadMap[otherId].msgs.push({
+                    id: m.id,
+                    text: m.content,
+                    time: new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+                    rawTime: m.created_at,
+                    isMe
                 });
                 threadMap[otherId].last = m.content;
                 threadMap[otherId].time = m.created_at;
@@ -91,7 +105,7 @@ export default function ApplicantMessages({ onNavigate }) {
             if (otherUserIds.length > 0) {
                 const { data: rolesData } = await supabase
                     .from('user_roles')
-                    .select('user_id, name, company_id') 
+                    .select('user_id, name, company_id')
                     .in('user_id', otherUserIds);
 
                 console.log("Roles Data:", rolesData);
@@ -106,7 +120,7 @@ export default function ApplicantMessages({ onNavigate }) {
                     // ✅ Fetch Company Details including logo from storage
                     const companyIds = [...new Set(rolesData.map(r => r.company_id).filter(Boolean))];
                     console.log("Company IDs to fetch:", companyIds);
-                    
+
                     if (companyIds.length > 0) {
                         const { data: companiesData } = await supabase
                             .from('companies')
@@ -134,7 +148,7 @@ export default function ApplicantMessages({ onNavigate }) {
 
             console.log("Final Thread List:", threadList);
             setThreads(threadList);
-            
+
             // Refresh currently open chat window if data changed
             if (selected) {
                 const updated = threadList.find(t => t.id === selected.id);
@@ -158,11 +172,11 @@ export default function ApplicantMessages({ onNavigate }) {
 
             // Create a channel to listen for any new messages where THIS user is the receiver
             channel = supabase.channel('applicant_inbox')
-                .on('postgres_changes', { 
-                    event: 'INSERT', 
-                    schema: 'public', 
+                .on('postgres_changes', {
+                    event: 'INSERT',
+                    schema: 'public',
                     table: 'messages',
-                    filter: `receiver_id=eq.${user.id}` 
+                    filter: `receiver_id=eq.${user.id}`
                 }, () => {
                     console.log("New message received from Admin!");
                     fetchMsgs(user.id);
@@ -194,11 +208,11 @@ export default function ApplicantMessages({ onNavigate }) {
         setText('');
 
         // Send to Supabase
-        const { error } = await supabase.from('messages').insert([{ 
-            sender_id: userId, 
-            receiver_id: selected.id, 
-            content: messageText, 
-            is_read: false 
+        const { error } = await supabase.from('messages').insert([{
+            sender_id: userId,
+            receiver_id: selected.id,
+            content: messageText,
+            is_read: false
         }]);
 
         if (error) {
@@ -208,14 +222,48 @@ export default function ApplicantMessages({ onNavigate }) {
         }
     };
 
+    const unsendMsg = async (msgId) => {
+        if (!window.confirm("Unsend this message?")) return;
+
+        // 1. Try to delete the message
+        const { data, error } = await supabase.from('messages').delete().eq('id', msgId).select();
+
+        if (error) {
+            console.error("Unsend Error:", error);
+            alert("Failed to unsend message.");
+            return;
+        }
+
+        // 2. If RLS silently blocks deletion (data is empty), fallback to updating the content
+        if (!data || data.length === 0) {
+            const { error: updateError } = await supabase
+                .from('messages')
+                .update({ content: "🚫 This message was unsent" })
+                .eq('id', msgId);
+
+            if (updateError) {
+                alert("Database policies prevent unsending this message.");
+                return;
+            }
+        }
+
+        fetchMsgs(userId);
+    };
+
+    const canUnsend = (rawTime) => {
+        if (!rawTime) return false;
+        const msgTime = new Date(rawTime).getTime();
+        return (Date.now() - msgTime) < 5 * 60 * 1000; // 5 minutes
+    };
+
     const filtered = threads.filter(t => t.name.toLowerCase().includes(search.toLowerCase()));
 
     return (
         <ApplicantLayout activePage="applicant-messages" onNavigate={onNavigate}>
             <style>{`.hide-scroll::-webkit-scrollbar { width: 0px; }`}</style>
-            
+
             <div style={{ display: 'flex', height: 'calc(100vh - 140px)', gap: '1.5rem', paddingBottom: '1rem' }}>
-                
+
                 {/* --- CONVERSATIONS LIST --- */}
                 <div style={{ ...glassStyle, width: '350px', flexShrink: 0 }}>
                     <div style={{ padding: '1.5rem' }}>
@@ -235,36 +283,36 @@ export default function ApplicantMessages({ onNavigate }) {
                             filtered.map(t => {
                                 const isAct = selected?.id === t.id;
                                 return (
-                                    <motion.div 
+                                    <motion.div
                                         key={t.id} onClick={() => markAsRead(t)}
-                                        whileHover={{ scale: 0.98 }} 
-                                        style={{ 
-                                            padding: '1.25rem', marginBottom: '0.5rem', borderRadius: '1rem', 
+                                        whileHover={{ scale: 0.98 }}
+                                        style={{
+                                            padding: '1.25rem', marginBottom: '0.5rem', borderRadius: '1rem',
                                             cursor: 'pointer', position: 'relative',
-                                            background: isAct ? 'rgba(251, 191, 36, 0.08)' : 'transparent', 
+                                            background: isAct ? 'rgba(251, 191, 36, 0.08)' : 'transparent',
                                             border: isAct ? '1px solid rgba(251,191,36,0.3)' : '1px solid transparent',
                                             display: 'flex', gap: '1rem'
                                         }}
                                     >
                                         {t.unread && !isAct && <div style={{ position: 'absolute', top: '1.5rem', right: '1.25rem', width: '10px', height: '10px', backgroundColor: '#FBBF24', borderRadius: '50%' }}></div>}
-                                        
+
                                         {/* Company Logo */}
                                         {t.companyLogo ? (
-                                            <img 
-                                                src={t.companyLogo} 
-                                                alt={t.companyName} 
+                                            <img
+                                                src={t.companyLogo}
+                                                alt={t.companyName}
                                                 style={{ width: 48, height: 48, borderRadius: '0.5rem', objectFit: 'cover', flexShrink: 0, border: '1px solid rgba(255,255,255,0.2)' }}
                                             />
                                         ) : (
                                             <Avatar name={t.companyName || t.name} />
                                         )}
-                                        
+
                                         {/* Message Info */}
                                         <div style={{ flex: 1, minWidth: 0 }}>
                                             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
                                                 <span style={{ fontWeight: 'bold', color: isAct ? '#FCD34D' : 'white', fontSize: '0.95rem' }}>{t.companyName || t.name}</span>
                                                 <span style={{ background: 'rgba(34, 197, 94, 0.2)', color: '#22c55e', padding: '0.15rem 0.5rem', borderRadius: '0.25rem', fontSize: '0.65rem', fontWeight: '600', flexShrink: 0 }}>HR</span>
-                                                <span style={{ fontSize: '0.7rem', color: t.unread ? '#FCD34D' : '#64748b', marginLeft: 'auto', flexShrink: 0 }}>{new Date(t.time).toLocaleDateString([],{month:'short', day:'numeric'})}</span>
+                                                <span style={{ fontSize: '0.7rem', color: t.unread ? '#FCD34D' : '#64748b', marginLeft: 'auto', flexShrink: 0 }}>{new Date(t.time).toLocaleDateString([], { month: 'short', day: 'numeric' })}</span>
                                             </div>
                                             <div style={{ fontSize: '0.8rem', color: '#e2e8f0', margin: '0.2rem 0', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.subj}</div>
                                             <div style={{ fontSize: '0.75rem', color: '#94a3b8', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.last}</div>
@@ -282,9 +330,9 @@ export default function ApplicantMessages({ onNavigate }) {
                         <>
                             <div style={{ padding: '1.25rem 2rem', background: 'rgba(0,0,0,0.2)', borderBottom: '1px solid rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', gap: '1rem' }}>
                                 {selected.companyLogo ? (
-                                    <img 
-                                        src={selected.companyLogo} 
-                                        alt={selected.companyName} 
+                                    <img
+                                        src={selected.companyLogo}
+                                        alt={selected.companyName}
                                         style={{ width: 45, height: 45, borderRadius: '0.5rem', objectFit: 'cover', border: '2px solid rgba(255,255,255,0.2)', flexShrink: 0 }}
                                     />
                                 ) : (
@@ -301,16 +349,23 @@ export default function ApplicantMessages({ onNavigate }) {
 
                             <div className="hide-scroll" style={{ flex: 1, padding: '2rem', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
                                 {selected.msgs.map(m => (
-                                    <motion.div key={m.id} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} style={{ alignSelf: m.isMe ? 'flex-end' : 'flex-start', maxWidth: '70%' }}>
-                                        <div style={{ 
-                                            background: m.isMe ? 'linear-gradient(135deg, #FBBF24, #F59E0B)' : 'rgba(255,255,255,0.06)', 
-                                            color: m.isMe ? '#020617' : 'white', 
-                                            padding: '1rem 1.25rem', borderRadius: '1.25rem', 
-                                            borderBottomRightRadius: m.isMe ? 4 : '1.25rem', borderBottomLeftRadius: m.isMe ? '1.25rem' : 4 
+                                    <motion.div key={m.id} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} style={{ alignSelf: m.isMe ? 'flex-end' : 'flex-start', maxWidth: '70%', position: 'relative' }}>
+                                        <div style={{
+                                            background: m.isMe ? 'linear-gradient(135deg, #FBBF24, #F59E0B)' : 'rgba(255,255,255,0.06)',
+                                            color: m.isMe ? '#020617' : 'white',
+                                            padding: '1rem 1.25rem', borderRadius: '1.25rem',
+                                            borderBottomRightRadius: m.isMe ? 4 : '1.25rem', borderBottomLeftRadius: m.isMe ? '1.25rem' : 4
                                         }}>
                                             {m.text}
                                         </div>
-                                        <div style={{ fontSize: '0.7rem', color: '#64748b', marginTop: 4, textAlign: m.isMe ? 'right' : 'left' }}>{m.time}</div>
+                                        <div style={{ display: 'flex', justifyContent: m.isMe ? 'flex-end' : 'flex-start', alignItems: 'center', gap: '8px', marginTop: '4px' }}>
+                                            <div style={{ fontSize: '0.7rem', color: '#64748b' }}>{m.time}</div>
+                                            {m.isMe && canUnsend(m.rawTime) && (
+                                                <button onClick={() => unsendMsg(m.id)} title="Unsend message (5 min window)" style={{ background: 'transparent', border: 'none', color: '#ef4444', cursor: 'pointer', padding: '0 2px', display: 'flex', alignItems: 'center' }}>
+                                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+                                                </button>
+                                            )}
+                                        </div>
                                     </motion.div>
                                 ))}
                                 <div ref={scrollRef} />
@@ -318,12 +373,12 @@ export default function ApplicantMessages({ onNavigate }) {
 
                             <div style={{ padding: '1.5rem', background: 'rgba(0,0,0,0.3)', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
                                 <div style={{ display: 'flex', gap: '1rem', background: 'rgba(255,255,255,0.03)', borderRadius: '1rem', padding: '0.5rem', border: '1px solid rgba(255,255,255,0.1)' }}>
-                                    <textarea 
-                                        value={text} 
-                                        onChange={e => setText(e.target.value)} 
-                                        onKeyDown={e => { if(e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); sendMsg(); }}} 
-                                        placeholder="Type your reply..." 
-                                        style={{ ...inputStyle, resize: 'none', height: '45px', fontFamily: 'inherit' }} 
+                                    <textarea
+                                        value={text}
+                                        onChange={e => setText(e.target.value)}
+                                        onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMsg(); } }}
+                                        placeholder="Type your reply..."
+                                        style={{ ...inputStyle, resize: 'none', height: '45px', fontFamily: 'inherit' }}
                                     />
                                     <button onClick={sendMsg} disabled={!text.trim()} style={{ background: text.trim() ? '#FBBF24' : 'rgba(255,255,255,0.05)', color: text.trim() ? '#020617' : '#64748b', border: 'none', borderRadius: '50%', width: 45, height: 45, cursor: text.trim() ? 'pointer' : 'not-allowed', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                         <SendIcon />