diff --git a/resources/js/Pages/Messages/Index.jsx b/resources/js/Pages/Messages/Index.jsx
index ea7c9834..98e67f16 100644
--- a/resources/js/Pages/Messages/Index.jsx
+++ b/resources/js/Pages/Messages/Index.jsx
@@ -4,8 +4,6 @@ import ConversationList from '../../components/messaging/ConversationList'
 import ConversationThread from '../../components/messaging/ConversationThread'
 import NewConversationModal from '../../components/messaging/NewConversationModal'
 
-// ── helpers ──────────────────────────────────────────────────────────────────
-
 function getCsrf() {
   return document.querySelector('meta[name="csrf-token"]')?.content ?? ''
 }
@@ -26,14 +24,34 @@ async function apiFetch(url, options = {}) {
     headers,
     ...options,
   })
+
   if (!res.ok) {
     const err = await res.json().catch(() => ({}))
     throw new Error(err.message ?? `HTTP ${res.status}`)
   }
+
   return res.json()
 }
 
-// ── MessagesPage ─────────────────────────────────────────────────────────────
+function relativeTime(iso) {
+  if (!iso) return 'No activity yet'
+
+  const diff = (Date.now() - new Date(iso).getTime()) / 1000
+  if (diff < 60) return 'Just now'
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
+  if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`
+
+  return new Date(iso).toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+function buildSearchPreview(item) {
+  const body = (item?.body || '').trim()
+  return body || '(attachment only)'
+}
 
 function MessagesPage({ userId, username, activeConversationId: initialId }) {
   const [conversations, setConversations] = useState([])
@@ -46,7 +64,6 @@ function MessagesPage({ userId, username, activeConversationId: initialId }) {
   const [searching, setSearching] = useState(false)
   const pollRef = useRef(null)
 
-  // ── Load conversations list ────────────────────────────────────────────────
   const loadConversations = useCallback(async () => {
     try {
       const data = await apiFetch('/api/messages/conversations')
@@ -62,7 +79,7 @@ function MessagesPage({ userId, username, activeConversationId: initialId }) {
     loadConversations()
 
     apiFetch('/api/messages/settings')
-      .then(data => setRealtimeEnabled(!!data?.realtime_enabled))
+      .then((data) => setRealtimeEnabled(!!data?.realtime_enabled))
       .catch(() => setRealtimeEnabled(false))
 
     return () => {
@@ -77,10 +94,10 @@ function MessagesPage({ userId, username, activeConversationId: initialId }) {
     }
 
     if (realtimeEnabled) {
-      return
+      return undefined
     }
 
-    pollRef.current = setInterval(loadConversations, 15_000)
+    pollRef.current = setInterval(loadConversations, 15000)
 
     return () => {
       if (pollRef.current) clearInterval(pollRef.current)
@@ -100,9 +117,11 @@ function MessagesPage({ userId, username, activeConversationId: initialId }) {
   }, [loadConversations])
 
   const handleMarkRead = useCallback((conversationId) => {
-    setConversations(prev =>
-      prev.map(c => c.id === conversationId ? { ...c, unread_count: 0 } : c)
-    )
+    setConversations((prev) => prev.map((conversation) => (
+      conversation.id === conversationId
+        ? { ...conversation, unread_count: 0 }
+        : conversation
+    )))
   }, [])
 
   useEffect(() => {
@@ -117,12 +136,13 @@ function MessagesPage({ userId, username, activeConversationId: initialId }) {
       }
 
       setSearching(true)
+
       try {
         const data = await apiFetch(`/api/messages/search?q=${encodeURIComponent(q)}`)
         if (!cancelled) {
           setSearchResults(data.data ?? [])
         }
-      } catch (_) {
+      } catch {
         if (!cancelled) {
           setSearchResults([])
         }
@@ -146,55 +166,107 @@ function MessagesPage({ userId, username, activeConversationId: initialId }) {
     history.replaceState(null, '', `/messages/${item.conversation_id}?focus=${item.id}`)
   }, [])
 
-  const activeConversation = conversations.find(c => c.id === activeId) ?? null
+  const activeConversation = conversations.find((conversation) => conversation.id === activeId) ?? null
+  const unreadCount = conversations.reduce((sum, conversation) => sum + Number(conversation.unread_count || 0), 0)
+  const pinnedCount = conversations.reduce((sum, conversation) => {
+    const me = conversation.my_participant ?? conversation.all_participants?.find((participant) => participant.user_id === userId)
+    return sum + (me?.is_pinned ? 1 : 0)
+  }, 0)
+  const archivedCount = conversations.reduce((sum, conversation) => {
+    const me = conversation.my_participant ?? conversation.all_participants?.find((participant) => participant.user_id === userId)
+    return sum + (me?.is_archived ? 1 : 0)
+  }, 0)
+  const activeSearch = searchQuery.trim().length >= 2
+  const activeConversationLabel = activeConversation?.title
+    || activeConversation?.all_participants?.find((participant) => participant.user_id !== userId)?.user?.username
+    || 'Conversation'
 
   return (
-    <div className="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-6">
-      <div className="flex h-[calc(100vh-10rem)] overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm">
-
-        {/* ── Left panel: conversation list ─────────────────────────────── */}
-        <aside className={`w-full sm:w-80 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 flex flex-col ${activeId ? 'hidden sm:flex' : 'flex'}`}>
-          <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-            <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Messages</h1>
-            <button
-              onClick={() => setShowNewModal(true)}
-              className="rounded-full p-1.5 text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-              title="New message"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
-              </svg>
-            </button>
-          </div>
-
-          <div className="px-3 py-2 border-b border-gray-100 dark:border-gray-800">
-            <input
-              type="search"
-              value={searchQuery}
-              onChange={e => setSearchQuery(e.target.value)}
-              placeholder="Search all messages…"
-              className="w-full rounded-lg bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 outline-none focus:ring-2 focus:ring-blue-500"
-            />
-            {searching && <p className="mt-1 text-[11px] text-gray-400">Searching…</p>}
-          </div>
-
-          {searchQuery.trim().length >= 2 && (
-            <div className="border-b border-gray-100 dark:border-gray-800 max-h-44 overflow-y-auto">
-              {searchResults.length === 0 && !searching && (
-                <p className="px-3 py-2 text-xs text-gray-400">No results.</p>
-              )}
-              {searchResults.map(item => (
-                <button
-                  key={`search-${item.id}`}
-                  onClick={() => openSearchResult(item)}
-                  className="w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800/60 border-b border-gray-100 dark:border-gray-800"
-                >
-                  <p className="text-xs text-gray-500">@{item.sender?.username ?? 'unknown'} · {new Date(item.created_at).toLocaleString()}</p>
-                  <p className="text-sm text-gray-800 dark:text-gray-200 truncate">{item.body || '(attachment)'}</p>
-                </button>
-              ))}
+    <div className="px-4 pb-16 pt-4 md:px-6 lg:px-8 lg:pt-6">
+      <div className="grid gap-5 lg:items-start lg:grid-cols-[340px_minmax(0,1fr)] xl:grid-cols-[360px_minmax(0,1fr)] xl:gap-6">
+        <aside className={`flex min-h-[calc(100vh-18rem)] flex-col overflow-hidden rounded-[30px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(10,16,26,0.96),rgba(7,11,18,0.92))] shadow-[0_20px_60px_rgba(0,0,0,0.28)] lg:sticky lg:top-6 lg:max-h-[calc(100vh-3rem)] ${activeId ? 'hidden lg:flex' : 'flex'}`}>
+          <div className="border-b border-white/[0.06] p-5">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-white/35">Private inbox</p>
+                <h2 className="mt-2 text-2xl font-semibold text-white">Messages</h2>
+                <p className="mt-2 text-sm leading-6 text-white/50">Keep direct chats, group threads, and file drops in one focused workspace.</p>
+              </div>
+              <button
+                onClick={() => setShowNewModal(true)}
+                className="inline-flex h-11 items-center justify-center gap-2 rounded-full border border-sky-400/20 bg-sky-500/12 px-4 text-sm font-medium text-sky-200 transition hover:bg-sky-500/18"
+                title="New message"
+              >
+                <i className="fa-solid fa-pen-to-square text-xs" />
+                Compose
+              </button>
             </div>
-          )}
+
+            <div className="mt-5 grid grid-cols-3 gap-2">
+              <StatChip label="Unread" value={unreadCount} tone="sky" />
+              <StatChip label="Pinned" value={pinnedCount} tone="amber" />
+              <StatChip label="Archived" value={archivedCount} tone="slate" />
+            </div>
+
+            <div className="mt-4 flex flex-wrap gap-2 text-xs text-white/45">
+              <span className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 ${realtimeEnabled ? 'border-emerald-400/20 bg-emerald-500/10 text-emerald-200' : 'border-white/[0.08] bg-white/[0.04] text-white/55'}`}>
+                <span className={`h-1.5 w-1.5 rounded-full ${realtimeEnabled ? 'bg-emerald-300' : 'bg-white/30'}`} />
+                {realtimeEnabled ? 'Realtime active' : 'Polling every 15s'}
+              </span>
+              <span className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1 text-white/55">
+                <i className="fa-solid fa-comments text-[10px]" />
+                {conversations.length} conversations
+              </span>
+            </div>
+          </div>
+
+          <div className="border-b border-white/[0.06] p-4">
+            <label className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-white/35">Search all messages</label>
+            <div className="rounded-2xl border border-white/[0.08] bg-black/15 px-3 py-2.5 transition focus-within:border-sky-400/30 focus-within:bg-black/25">
+              <div className="flex items-center gap-3">
+                <i className="fa-solid fa-magnifying-glass text-xs text-white/30" />
+                <input
+                  type="search"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Find text, attachments, or senders…"
+                  className="w-full bg-transparent text-sm text-white outline-none placeholder:text-white/25"
+                />
+              </div>
+            </div>
+            {searching ? <p className="mt-2 text-[11px] text-white/35">Searching across your inbox…</p> : null}
+          </div>
+
+          {activeSearch ? (
+            <div className="border-b border-white/[0.06] px-3 py-3">
+              <div className="mb-2 flex items-center justify-between px-2">
+                <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/35">Search results</p>
+                <span className="text-[11px] text-white/30">{searchResults.length}</span>
+              </div>
+
+              <div className="max-h-64 space-y-2 overflow-y-auto pr-1">
+                {searchResults.length === 0 && !searching ? (
+                  <div className="rounded-2xl border border-white/[0.06] bg-white/[0.025] px-4 py-4 text-sm text-white/40">
+                    No results matched “{searchQuery.trim()}”.
+                  </div>
+                ) : null}
+
+                {searchResults.map((item) => (
+                  <button
+                    key={`search-${item.id}`}
+                    onClick={() => openSearchResult(item)}
+                    className="block w-full rounded-2xl border border-white/[0.06] bg-white/[0.03] px-4 py-3 text-left transition hover:border-sky-400/20 hover:bg-sky-500/[0.08]"
+                  >
+                    <div className="flex items-center justify-between gap-3 text-[11px] text-white/35">
+                      <span>@{item.sender?.username ?? 'unknown'}</span>
+                      <span>{relativeTime(item.created_at)}</span>
+                    </div>
+                    <p className="mt-2 line-clamp-2 text-sm leading-6 text-white/78">{buildSearchPreview(item)}</p>
+                  </button>
+                ))}
+              </div>
+            </div>
+          ) : null}
 
           <ConversationList
             conversations={conversations}
@@ -205,8 +277,7 @@ function MessagesPage({ userId, username, activeConversationId: initialId }) {
           />
         </aside>
 
-        {/* ── Right panel: thread ───────────────────────────────────────── */}
-        <main className={`flex-1 flex flex-col min-w-0 ${activeId ? 'flex' : 'hidden sm:flex'}`}>
+        <main className={`flex min-h-[calc(100vh-18rem)] min-w-0 flex-col overflow-hidden rounded-[30px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(10,16,26,0.96),rgba(7,11,18,0.92))] shadow-[0_20px_60px_rgba(0,0,0,0.28)] lg:h-[calc(100vh-3rem)] lg:max-h-[calc(100vh-3rem)] ${activeId ? 'flex' : 'hidden lg:flex'}`}>
           {activeId ? (
             <ConversationThread
               key={activeId}
@@ -216,48 +287,82 @@ function MessagesPage({ userId, username, activeConversationId: initialId }) {
               currentUserId={userId}
               currentUsername={username}
               apiFetch={apiFetch}
-              onBack={() => { setActiveId(null); history.replaceState(null, '', '/messages') }}
+              onBack={() => {
+                setActiveId(null)
+                history.replaceState(null, '', '/messages')
+              }}
               onMarkRead={handleMarkRead}
               onConversationUpdated={loadConversations}
             />
           ) : (
-            <div className="flex flex-1 items-center justify-center text-gray-400 dark:text-gray-600">
-              <div className="text-center">
-                <svg xmlns="http://www.w3.org/2000/svg" className="mx-auto h-12 w-12 mb-3 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                </svg>
-                <p className="text-sm">Select a conversation or start a new one</p>
+            <div className="flex flex-1 items-center justify-center p-8">
+              <div className="max-w-xl text-center">
+                <div className="mx-auto flex h-18 w-18 items-center justify-center rounded-[26px] border border-white/[0.08] bg-white/[0.03] text-white/35 shadow-[0_18px_45px_rgba(0,0,0,0.22)]">
+                  <i className="fa-solid fa-comments text-3xl" />
+                </div>
+                <h2 className="mt-6 text-3xl font-semibold text-white">Choose a conversation</h2>
+                <p className="mt-3 text-sm leading-7 text-white/55">Jump back into a direct message, catch up on a group thread, or start a new conversation with creators and collaborators.</p>
+                <div className="mt-6 flex flex-wrap items-center justify-center gap-2 text-sm text-white/55">
+                  <span className="rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2">Search your full message history</span>
+                  <span className="rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2">Share files inline</span>
+                  <span className="rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2">Track seen status</span>
+                </div>
               </div>
             </div>
           )}
         </main>
       </div>
 
-      {showNewModal && (
+      {activeId ? (
+        <div className="mt-4 rounded-2xl border border-white/[0.06] bg-white/[0.03] px-4 py-3 text-xs text-white/45 lg:hidden">
+          Viewing <span className="font-medium text-white/75">{activeConversationLabel}</span>. Use the back button to return to your inbox list.
+        </div>
+      ) : null}
+
+      {showNewModal ? (
         <NewConversationModal
           currentUserId={userId}
           apiFetch={apiFetch}
           onCreated={handleConversationCreated}
           onClose={() => setShowNewModal(false)}
         />
-      )}
+      ) : null}
     </div>
   )
 }
 
-// ── Mount ────────────────────────────────────────────────────────────────────
+function StatChip({ label, value, tone = 'sky' }) {
+  const tones = {
+    sky: 'border-sky-400/20 bg-sky-500/10 text-sky-200',
+    amber: 'border-amber-400/20 bg-amber-500/10 text-amber-200',
+    slate: 'border-white/[0.08] bg-white/[0.04] text-white/65',
+  }
+
+  return (
+    <div className={`rounded-2xl border px-3 py-3 ${tones[tone] || tones.sky}`}>
+      <p className="text-[10px] font-semibold uppercase tracking-[0.18em] opacity-70">{label}</p>
+      <p className="mt-2 text-lg font-semibold">{Number(value || 0).toLocaleString()}</p>
+    </div>
+  )
+}
 
 const el = document.getElementById('messages-root')
+
 if (el) {
   function parse(key, fallback = null) {
-    try { return JSON.parse(el.dataset[key] ?? 'null') ?? fallback } catch { return fallback }
+    try {
+      return JSON.parse(el.dataset[key] ?? 'null') ?? fallback
+    } catch {
+      return fallback
+    }
   }
+
   createRoot(el).render(
     <MessagesPage
       userId={parse('userId')}
       username={parse('username', '')}
       activeConversationId={parse('activeConversationId')}
-    />
+    />,
   )
 }
 
diff --git a/resources/js/components/messaging/ConversationList.jsx b/resources/js/components/messaging/ConversationList.jsx
index 332f15bb..1c699942 100644
--- a/resources/js/components/messaging/ConversationList.jsx
+++ b/resources/js/components/messaging/ConversationList.jsx
@@ -1,51 +1,34 @@
-import React, { useMemo, useState } from 'react'
+import React from 'react'
 
-/**
- * Left panel: searchable, paginated list of conversations.
- */
 export default function ConversationList({ conversations, loading, activeId, currentUserId, onSelect }) {
-  const [search, setSearch] = useState('')
-
-  const filtered = useMemo(() => {
-    const q = search.toLowerCase().trim()
-    if (!q) return conversations
-    return conversations.filter(conv => {
-      const label = convLabel(conv, currentUserId).toLowerCase()
-      const last  = (conv.latest_message?.[0]?.body ?? '').toLowerCase()
-      return label.includes(q) || last.includes(q)
-    })
-  }, [conversations, search, currentUserId])
-
   return (
-    <div className="flex flex-col flex-1 overflow-hidden">
-      {/* Search */}
-      <div className="px-3 py-2 border-b border-gray-100 dark:border-gray-800">
-        <input
-          type="search"
-          placeholder="Search conversations…"
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-          className="w-full rounded-lg bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 outline-none focus:ring-2 focus:ring-blue-500"
-        />
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="flex items-center justify-between border-b border-white/[0.06] px-4 py-3">
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/35">Conversations</p>
+          <p className="mt-1 text-xs text-white/35">Recent threads and group rooms</p>
+        </div>
+        <span className="rounded-full border border-white/[0.08] bg-white/[0.04] px-2.5 py-1 text-[11px] text-white/45">
+          {conversations.length}
+        </span>
       </div>
 
-      {/* List */}
-      <ul className="flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800">
-        {loading && (
-          <li className="px-4 py-8 text-center text-sm text-gray-400">Loading…</li>
-        )}
-        {!loading && filtered.length === 0 && (
-          <li className="px-4 py-8 text-center text-sm text-gray-400">
-            {search ? 'No matches found.' : 'No conversations yet.'}
-          </li>
-        )}
-        {filtered.map(conv => (
+      <ul className="flex-1 space-y-2 overflow-y-auto p-3">
+        {loading ? (
+          <li className="rounded-2xl border border-white/[0.06] bg-white/[0.025] px-4 py-8 text-center text-sm text-white/40">Loading conversations…</li>
+        ) : null}
+
+        {!loading && conversations.length === 0 ? (
+          <li className="rounded-2xl border border-white/[0.06] bg-white/[0.025] px-4 py-8 text-center text-sm text-white/40">No conversations yet.</li>
+        ) : null}
+
+        {conversations.map((conversation) => (
           <ConversationRow
-            key={conv.id}
-            conv={conv}
-            isActive={conv.id === activeId}
+            key={conversation.id}
+            conv={conversation}
+            isActive={conversation.id === activeId}
             currentUserId={currentUserId}
-            onClick={() => onSelect(conv.id)}
+            onClick={() => onSelect(conversation.id)}
           />
         ))}
       </ul>
@@ -54,46 +37,61 @@ export default function ConversationList({ conversations, loading, activeId, cur
 }
 
 function ConversationRow({ conv, isActive, currentUserId, onClick }) {
-  const label       = convLabel(conv, currentUserId)
-  const lastMsg     = Array.isArray(conv.latest_message) ? conv.latest_message[0] : conv.latest_message
-  const preview     = lastMsg ? truncate(lastMsg.body, 60) : 'No messages yet'
-  const unread      = conv.unread_count ?? 0
-  const myParticipant = conv.all_participants?.find(p => p.user_id === currentUserId)
-  const isArchived  = myParticipant?.is_archived ?? false
-  const isPinned    = myParticipant?.is_pinned ?? false
+  const label = convLabel(conv, currentUserId)
+  const lastMsg = Array.isArray(conv.latest_message) ? conv.latest_message[0] : conv.latest_message
+  const preview = lastMsg?.body ? truncate(lastMsg.body, 88) : 'No messages yet'
+  const unread = conv.unread_count ?? 0
+  const myParticipant = conv.all_participants?.find((participant) => participant.user_id === currentUserId)
+  const isArchived = myParticipant?.is_archived ?? false
+  const isPinned = myParticipant?.is_pinned ?? false
+  const activeMembers = conv.all_participants?.filter((participant) => !participant.left_at).length ?? 0
+  const typeLabel = conv.type === 'group' ? `${activeMembers} members` : 'Direct message'
+  const senderLabel = lastMsg?.sender?.username ? `@${lastMsg.sender.username}` : null
+  const initials = label
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .join('') || 'M'
 
   return (
     <li>
       <button
         onClick={onClick}
-        className={`w-full text-left px-4 py-3 flex gap-3 hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors ${isActive ? 'bg-blue-50 dark:bg-blue-900/30' : ''} ${isArchived ? 'opacity-60' : ''}`}
+        className={`w-full rounded-[24px] border px-4 py-4 text-left transition ${isActive ? 'border-sky-400/28 bg-sky-500/[0.12] shadow-[0_0_0_1px_rgba(56,189,248,0.08)]' : 'border-white/[0.06] bg-white/[0.03] hover:border-white/[0.1] hover:bg-white/[0.05]'} ${isArchived ? 'opacity-65' : ''}`}
       >
-        {/* Avatar placeholder */}
-        <div className="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium">
-          {label.charAt(0).toUpperCase()}
-        </div>
-
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center justify-between gap-1">
-            <div className="flex items-center gap-1 min-w-0">
-              {isPinned && <span className="text-xs" title="Pinned">📌</span>}
-              <span className={`text-sm font-medium truncate ${isActive ? 'text-blue-700 dark:text-blue-300' : 'text-gray-900 dark:text-gray-100'}`}>
-                {label}
-              </span>
-            </div>
-            {conv.last_message_at && (
-              <span className="text-xs text-gray-400 flex-shrink-0">
-                {relativeTime(conv.last_message_at)}
-              </span>
-            )}
+        <div className="flex gap-3">
+          <div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl text-sm font-semibold text-white shadow-[0_10px_25px_rgba(0,0,0,0.18)] ${conv.type === 'group' ? 'bg-gradient-to-br from-fuchsia-500 to-violet-600' : 'bg-gradient-to-br from-sky-500 to-cyan-500'}`}>
+            {initials}
           </div>
-          <div className="flex items-center justify-between gap-1 mt-0.5">
-            <span className="text-xs text-gray-400 truncate">{preview}</span>
-            {unread > 0 && (
-              <span className="flex-shrink-0 min-w-[1.25rem] h-5 rounded-full bg-blue-500 text-white text-xs font-medium flex items-center justify-center px-1">
-                {unread > 99 ? '99+' : unread}
-              </span>
-            )}
+
+          <div className="min-w-0 flex-1">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className={`truncate text-sm font-semibold ${isActive ? 'text-sky-100' : 'text-white/90'}`}>
+                    {label}
+                  </span>
+                  {isPinned ? <span className="rounded-full border border-amber-400/20 bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-200">Pinned</span> : null}
+                  {isArchived ? <span className="rounded-full border border-white/[0.08] bg-white/[0.04] px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-white/45">Archived</span> : null}
+                </div>
+                <p className="mt-1 text-[11px] uppercase tracking-[0.18em] text-white/30">{typeLabel}</p>
+              </div>
+
+              <div className="flex shrink-0 flex-col items-end gap-2">
+                {conv.last_message_at ? <span className="text-[11px] text-white/30">{relativeTime(conv.last_message_at)}</span> : null}
+                {unread > 0 ? (
+                  <span className="inline-flex min-w-[1.55rem] items-center justify-center rounded-full border border-sky-400/20 bg-sky-500/14 px-1.5 py-0.5 text-[11px] font-semibold text-sky-100">
+                    {unread > 99 ? '99+' : unread}
+                  </span>
+                ) : null}
+              </div>
+            </div>
+
+            <div className="mt-3 rounded-2xl border border-white/[0.04] bg-black/10 px-3 py-2.5">
+              {senderLabel ? <p className="text-[11px] text-white/35">{senderLabel}</p> : null}
+              <p className="mt-1 truncate text-sm text-white/62">{preview}</p>
+            </div>
           </div>
         </div>
       </button>
@@ -101,22 +99,21 @@ function ConversationRow({ conv, isActive, currentUserId, onClick }) {
   )
 }
 
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
 function convLabel(conv, currentUserId) {
   if (conv.type === 'group') return conv.title ?? 'Group'
-  const other = conv.all_participants?.find(p => p.user_id !== currentUserId)
+  const other = conv.all_participants?.find((participant) => participant.user_id !== currentUserId)
   return other?.user?.username ?? 'Direct message'
 }
 
 function truncate(str, max) {
   if (!str) return ''
-  return str.length > max ? str.slice(0, max) + '…' : str
+  return str.length > max ? `${str.slice(0, max)}…` : str
 }
 
 function relativeTime(iso) {
+  if (!iso) return 'No activity'
   const diff = (Date.now() - new Date(iso).getTime()) / 1000
-  if (diff < 60) return 'now'
+  if (diff < 60) return 'Now'
   if (diff < 3600) return `${Math.floor(diff / 60)}m`
   if (diff < 86400) return `${Math.floor(diff / 3600)}h`
   return `${Math.floor(diff / 86400)}d`
diff --git a/resources/js/components/messaging/ConversationThread.jsx b/resources/js/components/messaging/ConversationThread.jsx
index 5e84e160..e83b8443 100644
--- a/resources/js/components/messaging/ConversationThread.jsx
+++ b/resources/js/components/messaging/ConversationThread.jsx
@@ -1,13 +1,10 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import MessageBubble from './MessageBubble'
 
-/**
- * Right panel: scrollable thread of messages with send form.
- */
 export default function ConversationThread({
   conversationId,
   conversation,
-  realtimeEnabled = false,
+  realtimeEnabled,
   currentUserId,
   currentUsername,
   apiFetch,
@@ -15,698 +12,765 @@ export default function ConversationThread({
   onMarkRead,
   onConversationUpdated,
 }) {
-  const [messages, setMessages]     = useState([])
-  const [loading, setLoading]       = useState(true)
-  const [sending, setSending]       = useState(false)
-  const [body, setBody]             = useState('')
-  const [nextCursor, setNextCursor] = useState(null)
+  const [messages, setMessages] = useState([])
+  const [loading, setLoading] = useState(true)
   const [loadingMore, setLoadingMore] = useState(false)
-  const [error, setError]           = useState(null)
-  const [attachments, setAttachments] = useState([])
-  const [uploadProgress, setUploadProgress] = useState(null)
+  const [nextCursor, setNextCursor] = useState(null)
+  const [body, setBody] = useState('')
+  const [files, setFiles] = useState([])
+  const [sending, setSending] = useState(false)
+  const [error, setError] = useState(null)
   const [typingUsers, setTypingUsers] = useState([])
   const [threadSearch, setThreadSearch] = useState('')
-  const [threadSearchResults, setThreadSearchResults] = useState([])
-  const [lightboxImage, setLightboxImage] = useState(null)
-  const fileInputRef                = useRef(null)
-  const bottomRef                   = useRef(null)
-  const threadRef                   = useRef(null)
-  const pollRef                     = useRef(null)
-  const typingPollRef               = useRef(null)
-  const typingStopTimerRef          = useRef(null)
-  const latestIdRef                 = useRef(null)
-  const shouldAutoScrollRef         = useRef(true)
-  const draftKey                    = `nova_draft_${conversationId}`
-  const previewAttachments = useMemo(() => {
-    return attachments.map(file => ({
-      file,
-      previewUrl: isImageLike(file) ? URL.createObjectURL(file) : null,
-    }))
-  }, [attachments])
+  const [busyAction, setBusyAction] = useState(null)
+  const [lightbox, setLightbox] = useState(null)
+  const [draftTitle, setDraftTitle] = useState(conversation?.title ?? '')
+  const listRef = useRef(null)
+  const fileInputRef = useRef(null)
+  const typingRef = useRef(null)
+  const stopTypingRef = useRef(null)
+  const lastStartRef = useRef(0)
+  const initialLoadRef = useRef(true)
+  const knownMessageIdsRef = useRef(new Set())
+  const animatedMessageIdsRef = useRef(new Set())
+  const [animatedMessageIds, setAnimatedMessageIds] = useState({})
+  const prefersReducedMotion = usePrefersReducedMotion()
 
-  useEffect(() => {
-    return () => {
-      for (const item of previewAttachments) {
-        if (item.previewUrl) {
-          URL.revokeObjectURL(item.previewUrl)
-        }
-      }
-    }
-  }, [previewAttachments])
+  const myParticipant = useMemo(() => (
+    conversation?.my_participant
+    ?? conversation?.all_participants?.find((participant) => participant.user_id === currentUserId)
+    ?? null
+  ), [conversation, currentUserId])
+
+  const participants = useMemo(() => conversation?.all_participants ?? [], [conversation])
+  const participantNames = useMemo(() => (
+    participants
+      .map((participant) => participant.user?.username)
+      .filter(Boolean)
+  ), [participants])
+
+  const filteredMessages = useMemo(() => {
+    const query = threadSearch.trim().toLowerCase()
+    if (!query) return messages
+    return messages.filter((message) => {
+      const sender = message.sender?.username?.toLowerCase() ?? ''
+      const text = message.body?.toLowerCase() ?? ''
+      const attachmentNames = (message.attachments ?? []).map((attachment) => attachment.original_name?.toLowerCase() ?? '').join(' ')
+      return sender.includes(query) || text.includes(query) || attachmentNames.includes(query)
+    })
+  }, [messages, threadSearch])
+
+  const conversationLabel = useMemo(() => {
+    if (!conversation) return 'Conversation'
+    if (conversation.type === 'group') return conversation.title ?? 'Group conversation'
+    return participants.find((participant) => participant.user_id !== currentUserId)?.user?.username ?? 'Direct message'
+  }, [conversation, currentUserId, participants])
+
+  const loadMessages = useCallback(async ({ cursor = null, append = false, silent = false } = {}) => {
+    if (append) setLoadingMore(true)
+    else if (!silent) setLoading(true)
 
-  // ── Initial load ─────────────────────────────────────────────────────────
-  const loadMessages = useCallback(async () => {
     try {
-      const data = await apiFetch(`/api/messages/${conversationId}`)
-      const msgs = [...(data.data ?? [])].map(m => tagReactions(m, currentUserId))
-      setMessages(msgs)
+      const url = cursor
+        ? `/api/messages/${conversationId}?cursor=${encodeURIComponent(cursor)}`
+        : `/api/messages/${conversationId}`
+      const data = await apiFetch(url)
+      const incoming = normalizeMessages(data.data ?? [], currentUserId)
       setNextCursor(data.next_cursor ?? null)
-      setLoading(false)
-      if (msgs.length) latestIdRef.current = msgs[msgs.length - 1].id
-      shouldAutoScrollRef.current = true
+      setMessages((prev) => append ? mergeMessageLists(incoming, prev) : incoming)
+      setError(null)
     } catch (e) {
       setError(e.message)
-      setLoading(false)
-    }
-  }, [conversationId, currentUserId, apiFetch])
-
-  useEffect(() => {
-    setLoading(true)
-    setMessages([])
-    const storedDraft = window.localStorage.getItem(draftKey)
-    setBody(storedDraft ?? '')
-    loadMessages()
-
-    if (!realtimeEnabled) {
-      pollRef.current = setInterval(async () => {
-        try {
-          const data = await apiFetch(`/api/messages/${conversationId}`)
-          const latestChunk = [...(data.data ?? [])].map(m => tagReactions(m, currentUserId))
-          if (latestChunk.length && latestChunk[latestChunk.length - 1].id !== latestIdRef.current) {
-            shouldAutoScrollRef.current = true
-            setMessages(prev => mergeMessageLists(prev, latestChunk))
-            latestIdRef.current = latestChunk[latestChunk.length - 1].id
-            onConversationUpdated()
-          }
-        } catch (_) {}
-      }, 10_000)
-    }
-
-    return () => {
-      if (pollRef.current) clearInterval(pollRef.current)
-    }
-  }, [conversationId, draftKey, realtimeEnabled, currentUserId, apiFetch, loadMessages, onConversationUpdated])
-
-  useEffect(() => {
-    if (!realtimeEnabled) {
-      typingPollRef.current = setInterval(async () => {
-        try {
-          const data = await apiFetch(`/api/messages/${conversationId}/typing`)
-          setTypingUsers(data.typing ?? [])
-        } catch (_) {}
-      }, 2_000)
-    }
-
-    return () => {
-      if (typingPollRef.current) clearInterval(typingPollRef.current)
-      clearTimeout(typingStopTimerRef.current)
-      apiFetch(`/api/messages/${conversationId}/typing/stop`, { method: 'POST' }).catch(() => {})
-    }
-  }, [conversationId, apiFetch, realtimeEnabled])
-
-  useEffect(() => {
-    const content = body.trim()
-    if (!content) {
-      clearTimeout(typingStopTimerRef.current)
-      apiFetch(`/api/messages/${conversationId}/typing/stop`, { method: 'POST' }).catch(() => {})
-      return
-    }
-
-    apiFetch(`/api/messages/${conversationId}/typing`, { method: 'POST' }).catch(() => {})
-    clearTimeout(typingStopTimerRef.current)
-    typingStopTimerRef.current = setTimeout(() => {
-      apiFetch(`/api/messages/${conversationId}/typing/stop`, { method: 'POST' }).catch(() => {})
-    }, 2500)
-  }, [body, conversationId, apiFetch])
-
-  useEffect(() => {
-    if (body.trim()) {
-      window.localStorage.setItem(draftKey, body)
-      return
-    }
-
-    window.localStorage.removeItem(draftKey)
-  }, [body, draftKey])
-
-  // ── Scroll to bottom on first load and new messages ───────────────────────
-  useEffect(() => {
-    if (!loading && shouldAutoScrollRef.current) {
-      bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
-      shouldAutoScrollRef.current = false
-    }
-  }, [loading, messages.length])
-
-  // ── Mark as read when thread is viewed ────────────────────────────────────
-  useEffect(() => {
-    if (!loading) {
-      apiFetch(`/api/messages/${conversationId}/read`, { method: 'POST' })
-        .then(() => onMarkRead(conversationId))
-        .catch(() => {})
-    }
-  }, [loading, conversationId])
-
-  // ── Load older messages ───────────────────────────────────────────────────
-  const loadMore = useCallback(async () => {
-    if (!nextCursor || loadingMore) return
-    setLoadingMore(true)
-    const container = threadRef.current
-    const prevHeight = container?.scrollHeight ?? 0
-
-    try {
-      const data = await apiFetch(`/api/messages/${conversationId}?cursor=${nextCursor}`)
-      const older = [...(data.data ?? [])].map(m => tagReactions(m, currentUserId))
-      shouldAutoScrollRef.current = false
-      setMessages(prev => [...older, ...prev])
-      setNextCursor(data.next_cursor ?? null)
-
-      requestAnimationFrame(() => {
-        if (!container) return
-        const newHeight = container.scrollHeight
-        container.scrollTop = Math.max(0, newHeight - prevHeight + container.scrollTop)
-      })
-    } catch (_) {}
-    setLoadingMore(false)
-  }, [nextCursor, loadingMore, apiFetch, conversationId, currentUserId])
-
-  const handleThreadScroll = useCallback((e) => {
-    if (e.currentTarget.scrollTop < 120) {
-      loadMore()
-    }
-  }, [loadMore])
-
-  // ── Send message ──────────────────────────────────────────────────────────
-  const handleSend = useCallback(async (e) => {
-    e.preventDefault()
-    const text = body.trim()
-    if ((!text && attachments.length === 0) || sending) return
-
-    setSending(true)
-    const optimistic = {
-      id: `opt-${Date.now()}`,
-      sender_id: currentUserId,
-      sender: { id: currentUserId, username: currentUsername },
-      body: text,
-      created_at: new Date().toISOString(),
-      _optimistic: true,
-      attachments: attachments.map((file, index) => ({
-        id: `tmp-${Date.now()}-${index}`,
-        type: file.type.startsWith('image/') ? 'image' : 'file',
-        original_name: file.name,
-      })),
-    }
-    setMessages(prev => [...prev, optimistic])
-    setBody('')
-    window.localStorage.removeItem(draftKey)
-    shouldAutoScrollRef.current = true
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
-
-    try {
-      const formData = new FormData()
-      formData.append('body', text)
-      attachments.forEach(file => formData.append('attachments[]', file))
-      setUploadProgress(0)
-
-      const msg = await sendMessageWithProgress(`/api/messages/${conversationId}`, formData, (progress) => {
-        setUploadProgress(progress)
-      })
-      setMessages(prev => prev.map(m => m.id === optimistic.id ? msg : m))
-      latestIdRef.current = msg.id
-      onConversationUpdated()
-      setAttachments([])
-    } catch (e) {
-      setMessages(prev => prev.filter(m => m.id !== optimistic.id))
-      setError(e.message)
     } finally {
-      setUploadProgress(null)
-      setSending(false)
+      if (!silent) setLoading(false)
+      setLoadingMore(false)
     }
-  }, [body, attachments, sending, conversationId, currentUserId, currentUsername, apiFetch, onConversationUpdated, draftKey])
+  }, [apiFetch, conversationId, currentUserId])
 
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      handleSend(e)
+  const loadTyping = useCallback(async () => {
+    try {
+      const data = await apiFetch(`/api/messages/${conversationId}/typing`)
+      setTypingUsers(data.typing ?? [])
+    } catch {
+      setTypingUsers([])
     }
-  }, [handleSend])
-
-  // ── Reaction ──────────────────────────────────────────────────────────────
-  const handleReact = useCallback(async (messageId, emoji) => {
-    try {
-      await apiFetch(`/api/messages/${messageId}/reactions`, {
-        method: 'POST',
-        body: JSON.stringify({ reaction: emoji }),
-      })
-      // Optimistically add reaction with _iMine flag
-      setMessages(prev => prev.map(m => {
-        if (m.id !== messageId) return m
-        const existing = (m.reactions ?? []).some(r => r._iMine && r.reaction === emoji)
-        if (existing) return m
-        return { ...m, reactions: [...(m.reactions ?? []), { reaction: emoji, user_id: currentUserId, _iMine: true }] }
-      }))
-    } catch (_) {}
-  }, [currentUserId, apiFetch])
-
-  const handleUnreact = useCallback(async (messageId, emoji) => {
-    try {
-      await apiFetch(`/api/messages/${messageId}/reactions`, {
-        method: 'DELETE',
-        body: JSON.stringify({ reaction: emoji }),
-      })
-      // Optimistically remove reaction
-      setMessages(prev => prev.map(m => {
-        if (m.id !== messageId) return m
-        return { ...m, reactions: (m.reactions ?? []).filter(r => !(r._iMine && r.reaction === emoji)) }
-      }))
-    } catch (_) {}
-  }, [apiFetch])
-
-  const handleEdit = useCallback(async (messageId, newBody) => {
-    const updated = await apiFetch(`/api/messages/message/${messageId}`, {
-      method: 'PATCH',
-      body: JSON.stringify({ body: newBody }),
-    })
-    setMessages(prev => prev.map(m => m.id === messageId ? { ...m, body: updated.body, edited_at: updated.edited_at } : m))
-  }, [apiFetch])
-
-  const handleReportMessage = useCallback(async (messageId) => {
-    try {
-      await apiFetch('/api/reports', {
-        method: 'POST',
-        body: JSON.stringify({
-          target_type: 'message',
-          target_id: messageId,
-          reason: 'inappropriate',
-          details: '',
-        }),
-      })
-    } catch (e) {
-      setError(e.message)
-    }
-  }, [apiFetch])
-
-  const handlePickAttachments = useCallback((e) => {
-    const next = Array.from(e.target.files ?? [])
-    if (!next.length) return
-    setAttachments(prev => [...prev, ...next].slice(0, 5))
-    e.target.value = ''
-  }, [])
-
-  const removeAttachment = useCallback((index) => {
-    setAttachments(prev => prev.filter((_, i) => i !== index))
-  }, [])
-
-  const togglePin = useCallback(async () => {
-    const me = conversation?.all_participants?.find(p => p.user_id === currentUserId)
-    const isPinned = !!me?.is_pinned
-    const endpoint = isPinned ? 'unpin' : 'pin'
-    try {
-      await apiFetch(`/api/messages/${conversationId}/${endpoint}`, { method: 'POST' })
-      onConversationUpdated()
-    } catch (e) {
-      setError(e.message)
-    }
-  }, [conversation, currentUserId, apiFetch, conversationId, onConversationUpdated])
-
-  const toggleMute = useCallback(async () => {
-    try {
-      await apiFetch(`/api/messages/${conversationId}/mute`, { method: 'POST' })
-      onConversationUpdated()
-    } catch (e) {
-      setError(e.message)
-    }
-  }, [apiFetch, conversationId, onConversationUpdated])
-
-  const toggleArchive = useCallback(async () => {
-    try {
-      await apiFetch(`/api/messages/${conversationId}/archive`, { method: 'POST' })
-      onConversationUpdated()
-    } catch (e) {
-      setError(e.message)
-    }
-  }, [apiFetch, conversationId, onConversationUpdated])
+  }, [apiFetch, conversationId])
 
   useEffect(() => {
-    let cancelled = false
-    const q = threadSearch.trim()
-    if (q.length < 2) {
-      setThreadSearchResults([])
+    initialLoadRef.current = true
+    setMessages([])
+    setNextCursor(null)
+    setBody('')
+    setFiles([])
+    setDraftTitle(conversation?.title ?? '')
+    loadMessages()
+    loadTyping()
+  }, [conversation?.title, conversationId, loadMessages, loadTyping])
+
+  useEffect(() => {
+    apiFetch(`/api/messages/${conversationId}/read`, { method: 'POST' })
+      .then(() => onMarkRead?.(conversationId))
+      .catch(() => {})
+  }, [apiFetch, conversationId, onMarkRead])
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      loadTyping()
+      if (!realtimeEnabled) {
+        loadMessages({ silent: true })
+      }
+    }, realtimeEnabled ? 5000 : 8000)
+
+    return () => window.clearInterval(timer)
+  }, [loadMessages, loadTyping, realtimeEnabled])
+
+  useEffect(() => () => {
+    if (typingRef.current) window.clearTimeout(typingRef.current)
+    if (stopTypingRef.current) window.clearTimeout(stopTypingRef.current)
+  }, [])
+
+  useEffect(() => {
+    if (!listRef.current) return
+    if (initialLoadRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight
+      initialLoadRef.current = false
       return
     }
 
-    const timer = setTimeout(async () => {
-      try {
-        const data = await apiFetch(`/api/messages/search?q=${encodeURIComponent(q)}&conversation_id=${conversationId}`)
-        if (!cancelled) {
-          setThreadSearchResults(data.data ?? [])
-        }
-      } catch (_) {
-        if (!cancelled) {
-          setThreadSearchResults([])
-        }
+    const nearBottom = listRef.current.scrollHeight - listRef.current.scrollTop - listRef.current.clientHeight < 180
+    if (nearBottom) {
+      listRef.current.scrollTop = listRef.current.scrollHeight
+    }
+  }, [messages.length])
+
+  useEffect(() => {
+    const known = knownMessageIdsRef.current
+    const nextAnimatedIds = []
+
+    for (const message of messages) {
+      if (known.has(message.id)) continue
+
+      known.add(message.id)
+      if (!initialLoadRef.current && !message._optimistic && !animatedMessageIdsRef.current.has(message.id)) {
+        animatedMessageIdsRef.current.add(message.id)
+        nextAnimatedIds.push(message.id)
       }
-    }, 250)
-
-    return () => {
-      cancelled = true
-      clearTimeout(timer)
     }
-  }, [threadSearch, conversationId, apiFetch])
 
-  const jumpToMessage = useCallback((messageId) => {
-    const target = document.getElementById(`message-${messageId}`)
-    if (target) {
-      target.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    if (prefersReducedMotion || nextAnimatedIds.length === 0) return undefined
+
+    setAnimatedMessageIds((prev) => {
+      const next = { ...prev }
+      nextAnimatedIds.forEach((id) => {
+        next[id] = true
+      })
+      return next
+    })
+
+    const timer = window.setTimeout(() => {
+      setAnimatedMessageIds((prev) => {
+        const next = { ...prev }
+        nextAnimatedIds.forEach((id) => {
+          delete next[id]
+        })
+        return next
+      })
+    }, 2200)
+
+    return () => window.clearTimeout(timer)
+  }, [messages, prefersReducedMotion])
+
+  const handleBodyChange = useCallback((value) => {
+    setBody(value)
+
+    const now = Date.now()
+    if (now - lastStartRef.current > 2500) {
+      lastStartRef.current = now
+      apiFetch(`/api/messages/${conversationId}/typing`, { method: 'POST' }).catch(() => {})
     }
+
+    if (stopTypingRef.current) window.clearTimeout(stopTypingRef.current)
+    stopTypingRef.current = window.setTimeout(() => {
+      apiFetch(`/api/messages/${conversationId}/typing/stop`, { method: 'POST' }).catch(() => {})
+    }, 1200)
+  }, [apiFetch, conversationId])
+
+  const handleFiles = useCallback((selectedFiles) => {
+    const nextFiles = Array.from(selectedFiles || []).slice(0, 5)
+    setFiles(nextFiles)
   }, [])
 
-  // ── Thread header label ───────────────────────────────────────────────────
-  const threadLabel = conversation?.type === 'group'
-    ? (conversation?.title ?? 'Group conversation')
-    : (conversation?.all_participants?.find(p => p.user_id !== currentUserId)?.user?.username ?? 'Direct message')
-  const myParticipant = conversation?.my_participant ?? conversation?.all_participants?.find(p => p.user_id === currentUserId)
-  const otherParticipant = conversation?.all_participants?.find(p => p.user_id !== currentUserId)
-  const otherLastReadAt = otherParticipant?.last_read_at ?? null
-  const lastMessageId = messages[messages.length - 1]?.id ?? null
+  const handleSend = useCallback(async (e) => {
+    e.preventDefault()
 
-  // ── Group date separators from messages ──────────────────────────────────
-  const grouped = groupByDate(messages)
+    if (sending) return
+    const trimmed = body.trim()
+    if (!trimmed && files.length === 0) return
+
+    const optimisticId = `optimistic-${Date.now()}`
+    const optimisticMessage = normalizeMessage({
+      id: optimisticId,
+      body: trimmed,
+      sender: { id: currentUserId, username: currentUsername },
+      sender_id: currentUserId,
+      created_at: new Date().toISOString(),
+      attachments: files.map((file, index) => ({
+        id: `${optimisticId}-${index}`,
+        type: file.type?.startsWith('image/') ? 'image' : 'file',
+        original_name: file.name,
+      })),
+      reactions: [],
+      _optimistic: true,
+    }, currentUserId)
+
+    setMessages((prev) => mergeMessageLists(prev, [optimisticMessage]))
+    setBody('')
+    setFiles([])
+    if (fileInputRef.current) fileInputRef.current.value = ''
+    setSending(true)
+    setError(null)
+
+    const formData = new FormData()
+    if (trimmed) formData.append('body', trimmed)
+    files.forEach((file) => formData.append('attachments[]', file))
+
+    try {
+      const created = await apiFetch(`/api/messages/${conversationId}`, {
+        method: 'POST',
+        body: formData,
+      })
+
+      const normalized = normalizeMessage(created, currentUserId)
+      setMessages((prev) => prev.map((message) => message.id === optimisticId ? normalized : message))
+      onConversationUpdated?.()
+    } catch (err) {
+      setMessages((prev) => prev.filter((message) => message.id !== optimisticId))
+      setBody(trimmed)
+      setFiles(files)
+      setError(err.message)
+    } finally {
+      setSending(false)
+      apiFetch(`/api/messages/${conversationId}/typing/stop`, { method: 'POST' }).catch(() => {})
+    }
+  }, [apiFetch, body, conversationId, currentUserId, currentUsername, files, onConversationUpdated, sending])
+
+  const updateReactions = useCallback((messageId, summary) => {
+    setMessages((prev) => prev.map((message) => {
+      if (message.id !== messageId) return message
+      return {
+        ...message,
+        reactions: summaryToReactionArray(summary, currentUserId),
+      }
+    }))
+  }, [currentUserId])
+
+  const handleReact = useCallback(async (messageId, reaction) => {
+    const summary = await apiFetch(`/api/messages/${messageId}/reactions`, {
+      method: 'POST',
+      body: JSON.stringify({ reaction }),
+    })
+    updateReactions(messageId, summary)
+  }, [apiFetch, updateReactions])
+
+  const handleUnreact = useCallback(async (messageId, reaction) => {
+    const summary = await apiFetch(`/api/messages/${messageId}/reactions`, {
+      method: 'DELETE',
+      body: JSON.stringify({ reaction }),
+    })
+    updateReactions(messageId, summary)
+  }, [apiFetch, updateReactions])
+
+  const handleEdit = useCallback(async (messageId, nextBody) => {
+    const updated = await apiFetch(`/api/messages/message/${messageId}`, {
+      method: 'PATCH',
+      body: JSON.stringify({ body: nextBody }),
+    })
+
+    setMessages((prev) => prev.map((message) => (
+      message.id === messageId ? normalizeMessage({ ...message, ...updated }, currentUserId) : message
+    )))
+    onConversationUpdated?.()
+  }, [apiFetch, currentUserId, onConversationUpdated])
+
+  const handleDelete = useCallback(async (messageId) => {
+    await apiFetch(`/api/messages/message/${messageId}`, { method: 'DELETE' })
+    setMessages((prev) => prev.map((message) => (
+      message.id === messageId
+        ? { ...message, body: '', deleted_at: new Date().toISOString(), attachments: [] }
+        : message
+    )))
+    onConversationUpdated?.()
+  }, [apiFetch, onConversationUpdated])
+
+  const runConversationAction = useCallback(async (action, url, apply) => {
+    setBusyAction(action)
+    setError(null)
+    try {
+      const response = await apiFetch(url, { method: action === 'leave' ? 'DELETE' : 'POST' })
+      apply?.(response)
+      onConversationUpdated?.()
+      if (action === 'leave') onBack?.()
+    } catch (e) {
+      setError(e.message)
+    } finally {
+      setBusyAction(null)
+    }
+  }, [apiFetch, onBack, onConversationUpdated])
+
+  const handleRename = useCallback(async () => {
+    const title = draftTitle.trim()
+    if (!title || title === conversation?.title) return
+
+    setBusyAction('rename')
+    setError(null)
+
+    try {
+      await apiFetch(`/api/messages/${conversationId}/rename`, {
+        method: 'POST',
+        body: JSON.stringify({ title }),
+      })
+      onConversationUpdated?.()
+    } catch (e) {
+      setError(e.message)
+    } finally {
+      setBusyAction(null)
+    }
+  }, [apiFetch, conversation?.title, conversationId, draftTitle, onConversationUpdated])
+
+  const visibleMessages = filteredMessages
+  const messagesWithDecorators = useMemo(() => decorateMessages(visibleMessages, currentUserId, myParticipant?.last_read_at ?? null), [visibleMessages, currentUserId, myParticipant?.last_read_at])
+  const typingLabel = buildTypingLabel(typingUsers)
 
   return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
-        <button
-          onClick={onBack}
-          className="sm:hidden p-1 text-gray-500 hover:text-gray-900 dark:hover:text-gray-100"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-            <path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
-          </svg>
-        </button>
-        <div>
-          <p className="font-medium text-sm text-gray-900 dark:text-gray-100">{threadLabel}</p>
-          {conversation?.type === 'group' && (
-            <p className="text-xs text-gray-400">
-              {conversation.all_participants?.filter(p => !p.left_at).length ?? 0} members
+    <div className="flex min-h-0 flex-1 flex-col">
+      <header className="border-b border-white/[0.06] px-3 py-4 sm:px-6">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2 lg:hidden">
+              <button onClick={onBack} className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.04] text-white/60 transition hover:bg-white/[0.08] hover:text-white">
+                <i className="fa-solid fa-arrow-left text-sm" />
+              </button>
+              <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/35">Inbox</span>
+            </div>
+
+            <div className="mt-1 flex flex-wrap items-center gap-2">
+              <h2 className="truncate text-2xl font-semibold text-white">{conversationLabel}</h2>
+              {conversation?.type === 'group' ? <span className="rounded-full border border-fuchsia-400/20 bg-fuchsia-500/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-fuchsia-200">Group</span> : <span className="rounded-full border border-sky-400/20 bg-sky-500/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-sky-200">Direct</span>}
+              {myParticipant?.is_pinned ? <span className="rounded-full border border-amber-400/20 bg-amber-500/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-200">Pinned</span> : null}
+              {myParticipant?.is_muted ? <span className="rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-white/45">Muted</span> : null}
+              {myParticipant?.is_archived ? <span className="rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-white/45">Archived</span> : null}
+            </div>
+
+            <p className="mt-2 max-w-3xl text-sm leading-6 text-white/50">
+              {conversation?.type === 'group'
+                ? `Participants: ${participantNames.join(', ')}`
+                : `Private thread with ${participantNames.find((name) => name !== currentUsername) ?? conversationLabel}.`}
             </p>
-          )}
-          {typingUsers.length > 0 && (
-            <p className="text-xs text-blue-400">{typingUsers.map(u => u.username).join(', ')} typing…</p>
+          </div>
+
+          <div className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-1 lg:mx-0 lg:flex-wrap lg:overflow-visible lg:px-0 lg:pb-0">
+            <button
+              onClick={() => runConversationAction('archive', `/api/messages/${conversationId}/archive`, (response) => {
+                if (conversation?.my_participant) conversation.my_participant.is_archived = !!response.is_archived
+              })}
+              className={actionButtonClass(busyAction === 'archive')}
+            >
+              <i className="fa-solid fa-box-archive text-[11px]" />
+              {myParticipant?.is_archived ? 'Unarchive' : 'Archive'}
+            </button>
+            <button
+              onClick={() => runConversationAction('mute', `/api/messages/${conversationId}/mute`, (response) => {
+                if (conversation?.my_participant) conversation.my_participant.is_muted = !!response.is_muted
+              })}
+              className={actionButtonClass(busyAction === 'mute')}
+            >
+              <i className="fa-solid fa-bell-slash text-[11px]" />
+              {myParticipant?.is_muted ? 'Unmute' : 'Mute'}
+            </button>
+            <button
+              onClick={() => runConversationAction(myParticipant?.is_pinned ? 'unpin' : 'pin', `/api/messages/${conversationId}/${myParticipant?.is_pinned ? 'unpin' : 'pin'}`, (response) => {
+                if (conversation?.my_participant) conversation.my_participant.is_pinned = !!response.is_pinned
+              })}
+              className={actionButtonClass(busyAction === 'pin' || busyAction === 'unpin')}
+            >
+              <i className="fa-solid fa-thumbtack text-[11px]" />
+              {myParticipant?.is_pinned ? 'Unpin' : 'Pin'}
+            </button>
+            {conversation?.type === 'group' ? (
+              <button
+                onClick={() => runConversationAction('leave', `/api/messages/${conversationId}/leave`)}
+                className="inline-flex items-center gap-2 rounded-full border border-rose-400/18 bg-rose-500/10 px-4 py-2 text-sm font-medium text-rose-200 transition hover:bg-rose-500/16"
+              >
+                <i className="fa-solid fa-right-from-bracket text-[11px]" />
+                Leave
+              </button>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="mt-4 grid gap-3 lg:grid-cols-[minmax(0,1fr)_260px]">
+          <div className="rounded-2xl border border-white/[0.08] bg-black/15 px-3 py-2.5 transition focus-within:border-sky-400/30 focus-within:bg-black/25">
+            <div className="flex items-center gap-3">
+              <i className="fa-solid fa-magnifying-glass text-xs text-white/30" />
+              <input
+                type="search"
+                value={threadSearch}
+                onChange={(e) => setThreadSearch(e.target.value)}
+                placeholder="Search inside this thread…"
+                className="w-full bg-transparent text-sm text-white outline-none placeholder:text-white/25"
+              />
+            </div>
+          </div>
+
+          {conversation?.type === 'group' ? (
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <input
+                type="text"
+                value={draftTitle}
+                onChange={(e) => setDraftTitle(e.target.value)}
+                placeholder="Rename group"
+                className="min-w-0 flex-1 rounded-2xl border border-white/[0.08] bg-black/15 px-3 py-2.5 text-sm text-white outline-none placeholder:text-white/25 focus:border-sky-400/30 focus:bg-black/25"
+              />
+              <button onClick={handleRename} disabled={busyAction === 'rename'} className={actionButtonClass(busyAction === 'rename')}>
+                Save
+              </button>
+            </div>
+          ) : (
+            <div className="rounded-2xl border border-white/[0.08] bg-white/[0.03] px-4 py-2.5 text-sm text-white/45">
+              {participantNames.length} participant{participantNames.length === 1 ? '' : 's'}
+            </div>
           )}
         </div>
-        <button
-          type="button"
-          onClick={togglePin}
-          className="ml-auto text-xs px-2 py-1 rounded border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800"
-        >
-          {myParticipant?.is_pinned ? 'Unpin' : 'Pin'}
-        </button>
-        <button
-          type="button"
-          onClick={toggleMute}
-          className="text-xs px-2 py-1 rounded border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800"
-        >
-          {myParticipant?.is_muted ? 'Unmute' : 'Mute'}
-        </button>
-        <button
-          type="button"
-          onClick={toggleArchive}
-          className="text-xs px-2 py-1 rounded border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800"
-        >
-          {myParticipant?.is_archived ? 'Unarchive' : 'Archive'}
-        </button>
-      </div>
+      </header>
 
-      <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
-        <input
-          type="search"
-          value={threadSearch}
-          onChange={e => setThreadSearch(e.target.value)}
-          placeholder="Search in this conversation…"
-          className="w-full rounded-lg bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 outline-none focus:ring-2 focus:ring-blue-500"
-        />
-        {threadSearch.trim().length >= 2 && (
-          <div className="mt-2 max-h-28 overflow-y-auto rounded border border-gray-200 dark:border-gray-700">
-            {threadSearchResults.length === 0 && (
-              <p className="px-2 py-1 text-xs text-gray-400">No matches</p>
-            )}
-            {threadSearchResults.map(item => (
-              <button
-                key={`thread-search-${item.id}`}
-                onClick={() => jumpToMessage(item.id)}
-                className="w-full text-left px-2 py-1 text-xs hover:bg-gray-50 dark:hover:bg-gray-800"
-              >
-                <span className="text-gray-500">@{item.sender?.username ?? 'unknown'}: </span>
-                <span className="text-gray-800 dark:text-gray-200">{item.body || '(attachment)'}</span>
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Messages */}
-      <div ref={threadRef} onScroll={handleThreadScroll} className="flex-1 overflow-y-auto px-4 py-4 space-y-1">
-        {loadingMore && (
-          <div className="text-center py-2 text-xs text-gray-400">Loading older messages…</div>
-        )}
-
-        {loading && (
-          <div className="text-center text-sm text-gray-400 py-12">Loading messages…</div>
-        )}
-
-        {!loading && messages.length === 0 && (
-          <div className="text-center text-sm text-gray-400 py-12">
-            No messages yet. Say hello!
-          </div>
-        )}
-
-        {grouped.map(({ date, messages: dayMessages }) => (
-          <React.Fragment key={date}>
-            <div className="flex items-center gap-3 my-4">
-              <hr className="flex-1 border-gray-200 dark:border-gray-700" />
-              <span className="text-xs text-gray-400 flex-shrink-0">{date}</span>
-              <hr className="flex-1 border-gray-200 dark:border-gray-700" />
-            </div>
-            {dayMessages.map((msg, idx) => (
-              <div key={msg.id} id={`message-${msg.id}`}>
-                <MessageBubble
-                  message={msg}
-                  isMine={msg.sender_id === currentUserId}
-                  showAvatar={idx === 0 || dayMessages[idx - 1]?.sender_id !== msg.sender_id}
-                  onReact={handleReact}
-                  onUnreact={handleUnreact}
-                  onEdit={handleEdit}
-                  onReport={handleReportMessage}
-                  onOpenImage={setLightboxImage}
-                  seenText={buildSeenText({
-                    message: msg,
-                    isMine: msg.sender_id === currentUserId,
-                    isDirect: conversation?.type === 'direct',
-                    isLastMessage: msg.id === lastMessageId,
-                    otherLastReadAt,
-                  })}
-                />
-              </div>
-            ))}
-          </React.Fragment>
-        ))}
-
-        <div ref={bottomRef} />
-      </div>
-
-      {/* Error */}
-      {error && (
-        <div className="mx-4 mb-2 px-3 py-2 text-xs text-red-600 bg-red-50 dark:bg-red-900/30 rounded-lg">
+      {error ? (
+        <div className="border-b border-rose-500/14 bg-rose-500/8 px-4 py-3 text-sm text-rose-200 sm:px-6">
           {error}
         </div>
-      )}
+      ) : null}
 
-      {/* Compose */}
-      <form onSubmit={handleSend} className="flex gap-2 px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
-        <input
-          ref={fileInputRef}
-          type="file"
-          multiple
-          className="hidden"
-          onChange={handlePickAttachments}
-        />
-        <button
-          type="button"
-          onClick={() => fileInputRef.current?.click()}
-          className="flex-shrink-0 rounded-xl border border-gray-200 dark:border-gray-700 px-3 py-2 text-sm text-gray-600 dark:text-gray-300"
-          title="Attach files"
-        >
-          📎
-        </button>
-        <textarea
-          value={body}
-          onChange={e => setBody(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="Write a message… (Enter to send, Shift+Enter for new line)"
-          rows={1}
-          maxLength={5000}
-          className="flex-1 resize-none rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 outline-none focus:ring-2 focus:ring-blue-500 max-h-32 overflow-y-auto"
-          style={{ minHeight: '2.5rem' }}
-        />
-        <button
-          type="submit"
-          disabled={(!body.trim() && attachments.length === 0) || sending}
-          className="flex-shrink-0 rounded-xl bg-blue-500 hover:bg-blue-600 disabled:opacity-40 text-white px-4 py-2 text-sm font-medium transition-colors"
-        >
-          Send
-        </button>
-      </form>
-
-      {attachments.length > 0 && (
-        <div className="px-4 pb-3 flex flex-wrap gap-2">
-          {previewAttachments.map(({ file, previewUrl }, idx) => (
-            <div key={`${file.name}-${idx}`} className="inline-flex items-center gap-2 rounded-lg bg-gray-100 dark:bg-gray-800 px-2 py-1 text-xs text-gray-700 dark:text-gray-300">
-              {previewUrl && (
-                <img
-                  src={previewUrl}
-                  alt={file.name}
-                  className="h-10 w-10 object-cover rounded"
-                />
-              )}
-              <span className="truncate max-w-[220px]">{file.name}</span>
-              <button type="button" onClick={() => removeAttachment(idx)} className="text-red-500">✕</button>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {sending && uploadProgress !== null && (
-        <div className="px-4 pb-3">
-          <div className="h-2 rounded bg-gray-200 dark:bg-gray-700 overflow-hidden">
-            <div className="h-full bg-blue-500" style={{ width: `${uploadProgress}%` }} />
+      <div ref={listRef} className="flex-1 overflow-y-auto px-3 py-4 sm:px-6 sm:py-5">
+        {nextCursor ? (
+          <div className="mb-4 flex justify-center">
+            <button
+              onClick={() => loadMessages({ cursor: nextCursor, append: true })}
+              disabled={loadingMore}
+              className="rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-xs font-medium text-white/60 transition hover:bg-white/[0.08] hover:text-white disabled:opacity-50"
+            >
+              {loadingMore ? 'Loading older messages…' : 'Load older messages'}
+            </button>
           </div>
-          <p className="mt-1 text-[11px] text-gray-500">Uploading {uploadProgress}%</p>
-        </div>
-      )}
+        ) : null}
 
-      {lightboxImage && (
-        <div className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-6" onClick={() => setLightboxImage(null)}>
-          <img
-            src={lightboxImage.url}
-            alt={lightboxImage.original_name || 'Attachment'}
-            className="max-h-full max-w-full rounded-lg"
-            onClick={(e) => e.stopPropagation()}
-          />
+        {loading ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] px-5 py-4 text-sm text-white/45">Loading conversation…</div>
+          </div>
+        ) : visibleMessages.length === 0 ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="max-w-md rounded-[28px] border border-white/[0.06] bg-white/[0.03] px-6 py-8 text-center">
+              <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-[22px] border border-white/[0.08] bg-white/[0.04] text-white/35">
+                <i className="fa-solid fa-message text-2xl" />
+              </div>
+              <h3 className="mt-4 text-lg font-semibold text-white">{threadSearch.trim() ? 'No matching messages' : 'No messages yet'}</h3>
+              <p className="mt-2 text-sm leading-6 text-white/45">
+                {threadSearch.trim()
+                  ? 'Try a different search term or clear the filter to see the full thread.'
+                  : 'Start the conversation with a message, file, or quick note.'}
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-1.5 sm:space-y-1">
+            {messagesWithDecorators.map(({ message, showUnreadMarker, dayLabel }, index) => {
+              const previous = messagesWithDecorators[index - 1]?.message
+              const next = messagesWithDecorators[index + 1]?.message
+              const showAvatar = !previous || previous.sender_id !== message.sender_id
+              const endsSequence = !next || next.sender_id !== message.sender_id
+              const seenText = isLastMineMessage(visibleMessages, index, currentUserId)
+                ? buildSeenText(participants, currentUserId)
+                : null
+
+              return (
+                <div key={message.id} className="relative">
+                  {dayLabel ? (
+                    <div className="sticky top-2 z-[1] my-4 flex justify-center first:mt-0">
+                      <span className="rounded-full border border-white/[0.08] bg-[#0b1220]/90 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/45 shadow-[0_10px_30px_rgba(0,0,0,0.22)] backdrop-blur">
+                        {dayLabel}
+                      </span>
+                    </div>
+                  ) : null}
+                  {showUnreadMarker ? <UnreadMarker prefersReducedMotion={prefersReducedMotion} /> : null}
+                  <MessageBubble
+                    message={message}
+                    isMine={message.sender_id === currentUserId}
+                    showAvatar={showAvatar}
+                    endsSequence={endsSequence}
+                    isNewlyArrived={!!animatedMessageIds[message.id]}
+                    prefersReducedMotion={prefersReducedMotion}
+                    onReact={handleReact}
+                    onUnreact={handleUnreact}
+                    onEdit={handleEdit}
+                    onDelete={handleDelete}
+                    onOpenImage={setLightbox}
+                    seenText={seenText}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      <div className="border-t border-white/[0.06] bg-white/[0.02] px-3 py-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] sm:px-6">
+        <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <div className="text-sm text-white/45">
+            {typingLabel ? <span>{typingLabel}</span> : <span>Markdown supported. Images and files can be sent inline.</span>}
+          </div>
+          {files.length > 0 ? <span className="text-xs text-white/30">{files.length}/5 attachments</span> : null}
         </div>
-      )}
+
+        {files.length > 0 ? (
+          <div className="mb-3 flex flex-wrap gap-2">
+            {files.map((file, index) => (
+              <span key={`${file.name}-${index}`} className="inline-flex items-center gap-2 rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1.5 text-xs text-white/65">
+                <i className={`fa-solid ${file.type?.startsWith('image/') ? 'fa-image' : 'fa-paperclip'} text-[10px]`} />
+                {file.name}
+              </span>
+            ))}
+          </div>
+        ) : null}
+
+        <form onSubmit={handleSend} className="rounded-[28px] border border-white/[0.08] bg-black/15 p-3 shadow-[0_18px_45px_rgba(0,0,0,0.2)] sm:p-3.5">
+          <textarea
+            value={body}
+            onChange={(e) => handleBodyChange(e.target.value)}
+            placeholder="Write a message…"
+            rows={3}
+            maxLength={5000}
+            className="w-full resize-none bg-transparent px-2 py-2 text-sm leading-6 text-white outline-none placeholder:text-white/25"
+          />
+
+          <div className="mt-3 flex flex-col gap-3 border-t border-white/[0.06] pt-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex flex-wrap items-center gap-2">
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                onChange={(e) => handleFiles(e.target.files)}
+                className="hidden"
+              />
+              <button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+                className="inline-flex min-h-11 items-center gap-2 rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/65 transition hover:bg-white/[0.08] hover:text-white"
+              >
+                <i className="fa-solid fa-paperclip text-[11px]" />
+                Attach files
+              </button>
+              {files.length > 0 ? (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setFiles([])
+                    if (fileInputRef.current) fileInputRef.current.value = ''
+                  }}
+                  className="inline-flex min-h-11 items-center gap-2 rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/45 transition hover:bg-white/[0.08] hover:text-white"
+                >
+                  Clear
+                </button>
+              ) : null}
+            </div>
+
+            <button
+              type="submit"
+              disabled={sending || (!body.trim() && files.length === 0)}
+              className="inline-flex min-h-11 items-center justify-center gap-2 rounded-full bg-sky-500 px-5 py-2.5 text-sm font-semibold text-slate-950 transition hover:bg-sky-400 disabled:opacity-50"
+            >
+              <i className={`fa-solid ${sending ? 'fa-spinner fa-spin' : 'fa-paper-plane'} text-[11px]`} />
+              {sending ? 'Sending…' : 'Send message'}
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {lightbox ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#020611e6] p-4 backdrop-blur-md" onClick={() => setLightbox(null)}>
+          <div className="relative max-h-[90vh] max-w-5xl" onClick={(e) => e.stopPropagation()}>
+            <button
+              type="button"
+              onClick={() => setLightbox(null)}
+              className="absolute right-3 top-3 inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/15 bg-black/30 text-white/80 transition hover:bg-black/45"
+            >
+              <i className="fa-solid fa-xmark" />
+            </button>
+            <img src={lightbox.url} alt={lightbox.original_name ?? 'Attachment'} className="max-h-[90vh] rounded-[28px] border border-white/10" />
+          </div>
+        </div>
+      ) : null}
     </div>
   )
 }
 
-// ── Helpers ──────────────────────────────────────────────────────────────────
+function actionButtonClass(isBusy) {
+  return `inline-flex min-h-11 shrink-0 items-center gap-2 rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/65 transition hover:bg-white/[0.08] hover:text-white ${isBusy ? 'opacity-60' : ''}`
+}
 
-function tagReactions(msg, currentUserId) {
-  if (!msg.reactions?.length) return msg
+function normalizeMessages(messages, currentUserId) {
+  return messages.map((message) => normalizeMessage(message, currentUserId))
+}
+
+function normalizeMessage(message, currentUserId) {
+  const reactionSummary = message.reaction_summary ?? null
   return {
-    ...msg,
-    reactions: msg.reactions.map(r => ({ ...r, _iMine: r.user_id === currentUserId })),
+    ...message,
+    sender_id: message.sender_id ?? message.sender?.id ?? null,
+    reactions: reactionSummary ? summaryToReactionArray(reactionSummary, currentUserId) : normalizeReactionArray(message.reactions ?? [], currentUserId),
   }
 }
 
-function groupByDate(messages) {
-  const map = new Map()
-  for (const msg of messages) {
-    const date = formatDate(msg.created_at)
-    if (!map.has(date)) map.set(date, [])
-    map.get(date).push(msg)
-  }
-  return Array.from(map.entries()).map(([date, messages]) => ({ date, messages }))
+function normalizeReactionArray(reactions, currentUserId) {
+  return reactions.map((reaction) => ({
+    ...reaction,
+    _iMine: reaction._iMine ?? reaction.user_id === currentUserId,
+  }))
+}
+
+function summaryToReactionArray(summary, currentUserId) {
+  if (!summary || typeof summary !== 'object') return []
+  const mine = Array.isArray(summary.me) ? summary.me : []
+  return Object.entries(summary)
+    .filter(([emoji]) => emoji !== 'me')
+    .flatMap(([emoji, count]) => Array.from({ length: Number(count) || 0 }, (_, index) => ({
+      id: `${emoji}-${index}`,
+      reaction: emoji,
+      user_id: mine.includes(emoji) && index === 0 ? currentUserId : null,
+      _iMine: mine.includes(emoji) && index === 0,
+    })))
 }
 
 function mergeMessageLists(existing, incoming) {
-  const byId = new Map()
-
-  for (const msg of existing) {
-    byId.set(String(msg.id), msg)
+  const map = new Map()
+  for (const message of [...existing, ...incoming]) {
+    map.set(message.id, message)
   }
+  return Array.from(map.values()).sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+}
 
-  for (const msg of incoming) {
-    byId.set(String(msg.id), msg)
+function buildTypingLabel(users) {
+  if (!users || users.length === 0) return ''
+  const names = users.map((user) => `@${user.username}`)
+  if (names.length === 1) return `${names[0]} is typing…`
+  if (names.length === 2) return `${names[0]} and ${names[1]} are typing…`
+  return `${names.slice(0, 2).join(', ')} and ${names.length - 2} others are typing…`
+}
+
+function isLastMineMessage(messages, index, currentUserId) {
+  const current = messages[index]
+  if (!current || current.sender_id !== currentUserId) return false
+  for (let i = index + 1; i < messages.length; i += 1) {
+    if (messages[i].sender_id === currentUserId) return false
   }
+  return true
+}
 
-  return Array.from(byId.values()).sort((a, b) => {
-    const at = new Date(a.created_at).getTime()
-    const bt = new Date(b.created_at).getTime()
-    if (at !== bt) return at - bt
-    const aid = Number(a.id)
-    const bid = Number(b.id)
-    if (!Number.isNaN(aid) && !Number.isNaN(bid)) {
-      return aid - bid
+function buildSeenText(participants, currentUserId) {
+  const seenBy = participants
+    .filter((participant) => participant.user_id !== currentUserId && participant.last_read_at)
+    .map((participant) => participant.user?.username)
+    .filter(Boolean)
+
+  if (seenBy.length === 0) return 'Sent'
+  if (seenBy.length === 1) return `Seen by @${seenBy[0]}`
+  return `Seen by ${seenBy.length} people`
+}
+
+function decorateMessages(messages, currentUserId, lastReadAt) {
+  let unreadMarked = false
+
+  return messages.map((message, index) => {
+    const previous = messages[index - 1]
+    const currentDay = dayKey(message.created_at)
+    const previousDay = previous ? dayKey(previous.created_at) : null
+    const shouldMarkUnread = !unreadMarked
+      && !!lastReadAt
+      && message.sender_id !== currentUserId
+      && !message.deleted_at
+      && new Date(message.created_at).getTime() > new Date(lastReadAt).getTime()
+
+    if (shouldMarkUnread) unreadMarked = true
+
+    return {
+      message,
+      showUnreadMarker: shouldMarkUnread,
+      dayLabel: currentDay !== previousDay ? formatDayLabel(message.created_at) : null,
     }
-    return String(a.id).localeCompare(String(b.id))
   })
 }
 
-function buildSeenText({ message, isMine, isDirect, isLastMessage, otherLastReadAt }) {
-  if (!isDirect || !isMine || !isLastMessage || !otherLastReadAt || !message?.created_at) {
-    return null
-  }
-
-  const seenAt = new Date(otherLastReadAt)
-  const sentAt = new Date(message.created_at)
-
-  if (Number.isNaN(seenAt.getTime()) || Number.isNaN(sentAt.getTime()) || seenAt < sentAt) {
-    return null
-  }
-
-  return `Seen ${relativeTimeFromNow(otherLastReadAt)} ago`
+function dayKey(iso) {
+  const date = new Date(iso)
+  return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
 }
 
-function relativeTimeFromNow(iso) {
-  const seconds = Math.max(0, Math.floor((Date.now() - new Date(iso).getTime()) / 1000))
-  if (seconds < 60) return `${seconds}s`
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`
-  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`
-  return `${Math.floor(seconds / 86400)}d`
-}
-
-function formatDate(iso) {
-  const d = new Date(iso)
+function formatDayLabel(iso) {
+  const date = new Date(iso)
   const today = new Date()
-  const yesterday = new Date(today)
-  yesterday.setDate(today.getDate() - 1)
+  const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate())
+  const startOfDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+  const diffDays = Math.round((startOfToday.getTime() - startOfDate.getTime()) / 86400000)
 
-  if (isSameDay(d, today)) return 'Today'
-  if (isSameDay(d, yesterday)) return 'Yesterday'
-  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
-}
+  if (diffDays === 0) return 'Today'
+  if (diffDays === 1) return 'Yesterday'
 
-function isSameDay(a, b) {
-  return a.getFullYear() === b.getFullYear() &&
-    a.getMonth() === b.getMonth() &&
-    a.getDate() === b.getDate()
-}
-
-function isImageLike(file) {
-  return file?.type?.startsWith('image/')
-}
-
-function getCsrf() {
-  return document.querySelector('meta[name="csrf-token"]')?.content ?? ''
-}
-
-function sendMessageWithProgress(url, formData, onProgress) {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest()
-    xhr.open('POST', url)
-    xhr.setRequestHeader('X-CSRF-TOKEN', getCsrf())
-    xhr.setRequestHeader('Accept', 'application/json')
-
-    xhr.upload.onprogress = (event) => {
-      if (!event.lengthComputable) return
-      const progress = Math.max(0, Math.min(100, Math.round((event.loaded / event.total) * 100)))
-      onProgress(progress)
-    }
-
-    xhr.onload = () => {
-      try {
-        const json = JSON.parse(xhr.responseText || '{}')
-        if (xhr.status >= 200 && xhr.status < 300) {
-          resolve(json)
-          return
-        }
-        reject(new Error(json.message || `HTTP ${xhr.status}`))
-      } catch (_) {
-        reject(new Error(`HTTP ${xhr.status}`))
-      }
-    }
-
-    xhr.onerror = () => reject(new Error('Network error'))
-    xhr.send(formData)
+  return date.toLocaleDateString(undefined, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
   })
 }
+
+function UnreadMarker({ prefersReducedMotion }) {
+  const [isVisible, setIsVisible] = useState(prefersReducedMotion)
+
+  useEffect(() => {
+    if (prefersReducedMotion) return undefined
+
+    setIsVisible(false)
+    const frame = window.requestAnimationFrame(() => setIsVisible(true))
+    return () => window.cancelAnimationFrame(frame)
+  }, [prefersReducedMotion])
+
+  return (
+    <div
+      className="my-4 flex items-center gap-3"
+      style={prefersReducedMotion ? undefined : {
+        opacity: isVisible ? 1 : 0.45,
+        transform: isVisible ? 'scale(1)' : 'scale(0.985)',
+        transition: 'opacity 280ms ease, transform 360ms ease',
+      }}
+    >
+      <span className="h-px flex-1 bg-sky-400/25" />
+      <span className="rounded-full border border-sky-400/20 bg-sky-500/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200">
+        Unread messages
+      </span>
+      <span className="h-px flex-1 bg-sky-400/25" />
+    </div>
+  )
+}
+
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const handleChange = () => setPrefersReducedMotion(mediaQuery.matches)
+
+    handleChange()
+    mediaQuery.addEventListener('change', handleChange)
+
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [])
+
+  return prefersReducedMotion
+}
diff --git a/resources/js/components/messaging/MessageBubble.jsx b/resources/js/components/messaging/MessageBubble.jsx
index 86b72aee..9e6ed31e 100644
--- a/resources/js/components/messaging/MessageBubble.jsx
+++ b/resources/js/components/messaging/MessageBubble.jsx
@@ -3,32 +3,38 @@ import ReactMarkdown from 'react-markdown'
 
 const QUICK_REACTIONS = ['👍', '❤️', '🔥', '😂', '👏', '😮']
 
-/**
- * Individual message bubble with:
- * - Markdown rendering (no raw HTML allowed)
- * - Hover reaction picker + unreact on click
- * - Inline edit for own messages
- * - Soft-delete display
- */
-export default function MessageBubble({ message, isMine, showAvatar, onReact, onUnreact, onEdit, onReport = null, onOpenImage = null, seenText = null }) {
+export default function MessageBubble({ message, isMine, showAvatar, endsSequence = true, isNewlyArrived = false, prefersReducedMotion = false, onReact, onUnreact, onEdit, onDelete = null, onReport = null, onOpenImage = null, seenText = null }) {
   const [showPicker, setShowPicker] = useState(false)
-  const [editing, setEditing]       = useState(false)
-  const [editBody, setEditBody]     = useState(message.body ?? '')
+  const [showActions, setShowActions] = useState(false)
+  const [editing, setEditing] = useState(false)
+  const [editBody, setEditBody] = useState(message.body ?? '')
   const [savingEdit, setSavingEdit] = useState(false)
-  const editRef                     = useRef(null)
+  const [isArrivalVisible, setIsArrivalVisible] = useState(true)
+  const editRef = useRef(null)
 
   const isDeleted = !!message.deleted_at
-  const isEdited  = !!message.edited_at
-  const username  = message.sender?.username ?? 'Unknown'
-  const time      = formatTime(message.created_at)
+  const isEdited = !!message.edited_at
+  const username = message.sender?.username ?? 'Unknown'
+  const time = formatTime(message.created_at)
+  const initials = username.charAt(0).toUpperCase()
 
-  // Focus textarea when entering edit mode
   useEffect(() => {
     if (editing) {
       editRef.current?.focus()
       editRef.current?.setSelectionRange(editBody.length, editBody.length)
     }
-  }, [editing])
+  }, [editing, editBody.length])
+
+  useEffect(() => {
+    if (prefersReducedMotion || !isNewlyArrived) {
+      setIsArrivalVisible(true)
+      return undefined
+    }
+
+    setIsArrivalVisible(false)
+    const frame = window.requestAnimationFrame(() => setIsArrivalVisible(true))
+    return () => window.cancelAnimationFrame(frame)
+  }, [isNewlyArrived, prefersReducedMotion])
 
   const reactionGroups = groupReactions(message.reactions ?? [])
 
@@ -45,50 +51,77 @@ export default function MessageBubble({ message, isMine, showAvatar, onReact, on
   }
 
   const handleEditKeyDown = (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSaveEdit() }
-    if (e.key === 'Escape') { setEditing(false); setEditBody(message.body) }
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSaveEdit()
+    }
+
+    if (e.key === 'Escape') {
+      setEditing(false)
+      setEditBody(message.body)
+    }
   }
 
   return (
     <div
-      className={`group flex gap-2 items-end ${isMine ? 'flex-row-reverse' : 'flex-row'} ${showAvatar ? 'mt-3' : 'mt-0.5'}`}
+      className={`group flex items-end gap-2.5 sm:gap-3 ${isMine ? 'flex-row-reverse' : 'flex-row'} ${showAvatar ? 'mt-4' : 'mt-1'}`}
+      style={prefersReducedMotion ? undefined : {
+        opacity: isArrivalVisible ? 1 : 0.55,
+        transform: isArrivalVisible ? 'translateY(0px)' : 'translateY(10px)',
+        filter: isNewlyArrived && isArrivalVisible ? 'drop-shadow(0 0 20px rgba(56,189,248,0.12))' : 'none',
+        transition: 'opacity 260ms ease, transform 320ms ease, filter 900ms ease',
+      }}
       onMouseEnter={() => !isDeleted && !editing && setShowPicker(true)}
-      onMouseLeave={() => setShowPicker(false)}
+      onMouseLeave={() => {
+        setShowPicker(false)
+        setShowActions(false)
+      }}
     >
-      {/* Avatar */}
-      <div className={`flex-shrink-0 w-7 h-7 ${showAvatar ? 'visible' : 'invisible'}`}>
-        <div className="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-400 to-pink-400 flex items-center justify-center text-white text-xs font-medium select-none">
-          {username.charAt(0).toUpperCase()}
+      <div className={`h-9 w-9 shrink-0 ${showAvatar ? 'visible' : 'invisible'}`}>
+        <div className={`flex h-9 w-9 items-center justify-center rounded-2xl text-xs font-semibold text-white shadow-[0_10px_20px_rgba(0,0,0,0.18)] ${isMine ? 'bg-gradient-to-br from-sky-500 to-cyan-500' : 'bg-gradient-to-br from-violet-500 to-fuchsia-600'}`}>
+          {initials}
         </div>
       </div>
 
-      <div className={`max-w-[75%] flex flex-col ${isMine ? 'items-end' : 'items-start'}`}>
-        {/* Sender name & time */}
-        {showAvatar && (
-          <div className={`flex items-center gap-1.5 mb-1 ${isMine ? 'flex-row-reverse' : ''}`}>
-            <span className="text-xs font-medium text-gray-700 dark:text-gray-300">{username}</span>
-            <span className="text-xs text-gray-400">{time}</span>
+      <div className={`flex max-w-[84%] flex-col sm:max-w-[75%] ${isMine ? 'items-end' : 'items-start'}`}>
+        {showAvatar ? (
+          <div className={`mb-1.5 flex items-center gap-2 ${isMine ? 'flex-row-reverse' : ''}`}>
+            <span className="text-xs font-medium text-white/78">{username}</span>
+            <span className="text-[11px] text-white/30">{time}</span>
           </div>
-        )}
+        ) : null}
 
-        {/* Bubble */}
         <div className="relative">
+          {!editing && !isDeleted ? (
+            <button
+              type="button"
+              onClick={() => setShowActions((prev) => !prev)}
+              className={`absolute z-[1] inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/[0.08] bg-[#0b1220]/88 text-white/40 shadow-[0_10px_20px_rgba(0,0,0,0.18)] transition hover:bg-[#11192a] hover:text-white ${isMine ? '-left-3 top-2 md:opacity-0 md:group-hover:opacity-100' : '-right-3 top-2 md:opacity-0 md:group-hover:opacity-100'}`}
+              aria-label="Message actions"
+            >
+              <i className="fa-solid fa-ellipsis text-[11px]" />
+            </button>
+          ) : null}
+
           {editing ? (
             <div className="w-72">
               <textarea
                 ref={editRef}
                 value={editBody}
-                onChange={e => setEditBody(e.target.value)}
+                onChange={(e) => setEditBody(e.target.value)}
                 onKeyDown={handleEditKeyDown}
                 rows={3}
                 maxLength={5000}
-                className="w-full resize-none rounded-xl border border-blue-400 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full resize-none rounded-2xl border border-sky-400/30 bg-black/20 px-3 py-2 text-sm text-white outline-none transition focus:border-sky-300/40"
               />
-              <div className="flex gap-2 mt-1 justify-end">
+              <div className="mt-2 flex justify-end gap-2">
                 <button
                   type="button"
-                  onClick={() => { setEditing(false); setEditBody(message.body) }}
-                  className="text-xs text-gray-400 hover:text-gray-600"
+                  onClick={() => {
+                    setEditing(false)
+                    setEditBody(message.body)
+                  }}
+                  className="text-xs text-white/35 transition hover:text-white/65"
                 >
                   Cancel
                 </button>
@@ -96,7 +129,7 @@ export default function MessageBubble({ message, isMine, showAvatar, onReact, on
                   type="button"
                   onClick={handleSaveEdit}
                   disabled={savingEdit || !editBody.trim() || editBody.trim() === message.body}
-                  className="text-xs text-blue-500 hover:text-blue-700 font-medium disabled:opacity-40"
+                  className="text-xs font-medium text-sky-300 transition hover:text-sky-200 disabled:opacity-40"
                 >
                   {savingEdit ? 'Saving…' : 'Save'}
                 </button>
@@ -104,137 +137,137 @@ export default function MessageBubble({ message, isMine, showAvatar, onReact, on
             </div>
           ) : (
             <div
-              className={`px-3 py-2 rounded-2xl text-sm leading-relaxed break-words ${
-                isMine
-                  ? 'bg-blue-500 text-white rounded-br-sm'
-                  : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-bl-sm'
-              } ${isDeleted ? 'italic opacity-60' : ''} ${message._optimistic ? 'opacity-70' : ''}`}
+              className={`px-4 py-3 text-sm leading-relaxed shadow-[0_14px_35px_rgba(0,0,0,0.16)] ${bubbleShape({ isMine, showAvatar, endsSequence })} ${isMine ? 'border border-sky-400/24 bg-sky-500/16 text-white' : 'border border-white/[0.06] bg-white/[0.04] text-white/88'} ${isDeleted ? 'italic opacity-60' : ''} ${message._optimistic ? 'opacity-70' : ''}`}
             >
               {isDeleted ? (
                 <span>This message was deleted.</span>
               ) : (
                 <>
-                  {message.attachments?.length > 0 && (
-                    <div className="mb-2 space-y-1">
-                      {message.attachments.map(att => (
-                        <div key={att.id}>
-                          {att.type === 'image' ? (
-                            <button
-                              type="button"
-                              onClick={() => onOpenImage?.({ id: att.id, original_name: att.original_name, url: `/messages/attachments/${att.id}` })}
-                              className="block"
-                            >
-                              <img
-                                src={`/messages/attachments/${att.id}`}
-                                alt={att.original_name}
-                                className="max-h-44 rounded-lg border border-white/20"
-                                loading="lazy"
-                              />
-                            </button>
-                          ) : (
-                            <a
-                              href={`/messages/attachments/${att.id}`}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs ${isMine ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100'}`}
-                            >
-                              📎 {att.original_name}
-                            </a>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                  <div className={`prose prose-sm max-w-none prose-p:my-0 prose-pre:my-1 ${isMine ? 'prose-invert' : 'dark:prose-invert'}`}>
+                  {message.attachments?.length > 0 ? (
+                    <AttachmentCluster attachments={message.attachments} isMine={isMine} onOpenImage={onOpenImage} />
+                  ) : null}
+
+                  <div className="prose prose-invert prose-sm max-w-none prose-headings:text-white prose-li:text-inherit prose-p:my-0 prose-pre:my-1 prose-strong:text-white text-white/90">
                     <ReactMarkdown
                       allowedElements={['p', 'strong', 'em', 'code', 'pre', 'ul', 'ol', 'li', 'blockquote', 'a', 'br']}
                       unwrapDisallowed
                       components={{
                         a: ({ href, children }) => (
-                          <a href={href} target="_blank" rel="noopener noreferrer nofollow"
-                            className={isMine ? 'text-blue-200 underline' : 'text-blue-600 dark:text-blue-400 underline'}>
+                          <a
+                            href={href}
+                            target="_blank"
+                            rel="noopener noreferrer nofollow"
+                            className={isMine ? 'text-sky-100 underline' : 'text-sky-300 underline'}
+                          >
                             {children}
                           </a>
                         ),
                         code: ({ children, className }) => className
                           ? <code className={`${className} text-xs`}>{children}</code>
-                          : <code className={`px-1 py-0.5 rounded text-xs ${isMine ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'}`}>{children}</code>,
+                          : <code className={`rounded px-1 py-0.5 text-xs ${isMine ? 'bg-sky-500/20' : 'bg-white/[0.08]'}`}>{children}</code>,
                       }}
                     >
                       {message.body}
                     </ReactMarkdown>
                   </div>
-                  {isEdited && (
-                    <span className={`text-xs ml-1 ${isMine ? 'text-blue-200' : 'text-gray-400'}`}>(edited)</span>
-                  )}
+
+                  {isEdited ? (
+                    <span className={`ml-1 text-xs ${isMine ? 'text-sky-100/80' : 'text-white/40'}`}>(edited)</span>
+                  ) : null}
                 </>
               )}
             </div>
           )}
 
-          {/* Hover action strip: reactions + edit pencil */}
-          {showPicker && !editing && !isDeleted && (
+          {(showPicker || showActions) && !editing && !isDeleted ? (
             <div
-              className={`absolute bottom-full mb-1 ${isMine ? 'right-0' : 'left-0'} flex items-center gap-1 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-full px-2 py-1 shadow-md z-10 whitespace-nowrap`}
+              className={`absolute bottom-full z-10 mb-2 flex items-center gap-1 whitespace-nowrap rounded-full border border-white/[0.08] bg-[#0b1220] px-2 py-1 shadow-[0_20px_40px_rgba(0,0,0,0.35)] ${isMine ? 'right-0' : 'left-0'}`}
               onMouseEnter={() => setShowPicker(true)}
-              onMouseLeave={() => setShowPicker(false)}
+              onMouseLeave={() => {
+                setShowPicker(false)
+                setShowActions(false)
+              }}
             >
-              {QUICK_REACTIONS.map(emoji => (
-                <button key={emoji} onClick={() => onReact(message.id, emoji)}
-                  className="text-base hover:scale-125 transition-transform" title={`React ${emoji}`}>
+              {QUICK_REACTIONS.map((emoji) => (
+                <button key={emoji} onClick={() => {
+                  onReact(message.id, emoji)
+                  setShowActions(false)
+                }} className="inline-flex h-8 w-8 items-center justify-center rounded-full text-base transition-transform hover:scale-125" title={`React ${emoji}`}>
                   {emoji}
                 </button>
               ))}
-              {isMine && (
+              {isMine ? (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setEditing(true)
+                      setShowPicker(false)
+                      setShowActions(false)
+                    }}
+                    className="ml-1 inline-flex h-8 w-8 items-center justify-center rounded-full text-white/35 transition hover:bg-white/[0.06] hover:text-white/80"
+                    title="Edit message"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
+                      <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+                    </svg>
+                  </button>
+                  {onDelete ? (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        onDelete(message.id)
+                        setShowPicker(false)
+                        setShowActions(false)
+                      }}
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-full text-white/35 transition hover:bg-rose-500/10 hover:text-rose-300"
+                      title="Delete message"
+                    >
+                      <i className="fa-solid fa-trash text-[11px]" />
+                    </button>
+                  ) : null}
+                </>
+              ) : null}
+              {!isMine && onReport ? (
                 <button
-                  onClick={() => { setEditing(true); setShowPicker(false) }}
-                  className="ml-1 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
-                  title="Edit message"
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
-                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-                  </svg>
-                </button>
-              )}
-              {!isMine && onReport && (
-                <button
-                  onClick={() => { onReport(message.id); setShowPicker(false) }}
-                  className="ml-1 text-gray-400 hover:text-red-500"
+                  type="button"
+                  onClick={() => {
+                    onReport(message.id)
+                    setShowPicker(false)
+                    setShowActions(false)
+                  }}
+                  className="ml-1 inline-flex h-8 w-8 items-center justify-center rounded-full text-white/35 transition hover:bg-rose-500/10 hover:text-rose-300"
                   title="Report message"
                 >
                   ⚑
                 </button>
-              )}
+              ) : null}
             </div>
-          )}
+          ) : null}
+
         </div>
 
-        {/* Reactions bar */}
-        {reactionGroups.length > 0 && !isDeleted && (
-          <div className={`flex flex-wrap gap-1 mt-1 ${isMine ? 'justify-end' : 'justify-start'}`}>
+        {reactionGroups.length > 0 && !isDeleted ? (
+          <div className={`mt-1 flex flex-wrap gap-1 ${isMine ? 'justify-end' : 'justify-start'} ${endsSequence ? '' : 'mb-0.5'}`}>
             {reactionGroups.map(({ emoji, count, iReacted }) => (
               <button
                 key={emoji}
-                onClick={() => iReacted ? onUnreact(message.id, emoji) : onReact(message.id, emoji)}
+                onClick={() => (iReacted ? onUnreact(message.id, emoji) : onReact(message.id, emoji))}
                 title={iReacted ? 'Remove reaction' : `React ${emoji}`}
-                className={`flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-xs transition-colors ${
-                  iReacted
-                    ? 'bg-blue-100 dark:bg-blue-900/40 border border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300'
-                    : 'bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300'
-                }`}
+                className={`flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs transition-colors ${iReacted ? 'border border-sky-400/20 bg-sky-500/14 text-sky-100' : 'border border-white/[0.08] bg-white/[0.04] text-white/55 hover:bg-white/[0.08] hover:text-white'}`}
               >
                 <span>{emoji}</span>
                 <span>{count}</span>
               </button>
             ))}
           </div>
-        )}
+        ) : null}
 
-        {isMine && seenText && (
-          <div className="mt-1 text-[11px] text-gray-400 dark:text-gray-500">
+        {isMine && seenText ? (
+          <div className="mt-1 text-[11px] text-white/30">
             {seenText}
           </div>
-        )}
+        ) : null}
       </div>
     </div>
   )
@@ -244,13 +277,102 @@ function formatTime(iso) {
   return new Date(iso).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
 }
 
+function bubbleShape({ isMine, showAvatar, endsSequence }) {
+  if (isMine) {
+    return `${showAvatar ? 'rounded-t-[24px]' : 'rounded-tl-[24px] rounded-tr-[14px]'} ${endsSequence ? 'rounded-bl-[24px] rounded-br-[8px]' : 'rounded-bl-[24px] rounded-br-[14px]'}`
+  }
+
+  return `${showAvatar ? 'rounded-t-[24px]' : 'rounded-tr-[24px] rounded-tl-[14px]'} ${endsSequence ? 'rounded-br-[24px] rounded-bl-[8px]' : 'rounded-br-[24px] rounded-bl-[14px]'}`
+}
+
+function AttachmentCluster({ attachments, isMine, onOpenImage }) {
+  const images = attachments.filter((attachment) => attachment.type === 'image')
+  const files = attachments.filter((attachment) => attachment.type !== 'image')
+
+  return (
+    <div className="mb-3 space-y-2.5">
+      {images.length > 0 ? <AttachmentImageGrid images={images} onOpenImage={onOpenImage} /> : null}
+      {files.length > 0 ? <AttachmentFileStack files={files} isMine={isMine} /> : null}
+    </div>
+  )
+}
+
+function AttachmentImageGrid({ images, onOpenImage }) {
+  const gridClass = images.length === 1 ? 'grid-cols-1' : 'grid-cols-2'
+
+  return (
+    <div className={`grid gap-2 ${gridClass}`}>
+      {images.slice(0, 4).map((attachment, index) => {
+        const remaining = images.length - 4
+        const showOverlay = remaining > 0 && index === 3
+
+        return (
+          <button
+            key={attachment.id}
+            type="button"
+            onClick={() => onOpenImage?.({
+              id: attachment.id,
+              original_name: attachment.original_name,
+              url: `/messages/attachments/${attachment.id}`,
+            })}
+            className={`group/image relative overflow-hidden rounded-[20px] border border-white/15 bg-black/20 ${images.length === 1 ? 'max-w-md' : ''}`}
+          >
+            <img
+              src={`/messages/attachments/${attachment.id}`}
+              alt={attachment.original_name}
+              className={`w-full object-cover transition duration-200 group-hover/image:scale-[1.02] ${images.length === 1 ? 'max-h-72' : 'h-32 sm:h-36'}`}
+              loading="lazy"
+            />
+            <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent px-3 py-2 text-left text-xs text-white/80">
+              <span className="line-clamp-1">{attachment.original_name}</span>
+            </div>
+            {showOverlay ? (
+              <div className="absolute inset-0 flex items-center justify-center bg-black/45 text-lg font-semibold text-white">
+                +{remaining}
+              </div>
+            ) : null}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+function AttachmentFileStack({ files, isMine }) {
+  return (
+    <div className={`rounded-[20px] border px-3 py-3 ${isMine ? 'border-sky-400/18 bg-sky-500/10' : 'border-white/[0.08] bg-black/20'}`}>
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-white/45">Files</span>
+        <span className="text-[11px] text-white/35">{files.length}</span>
+      </div>
+      <div className="space-y-2">
+        {files.map((attachment) => (
+          <a
+            key={attachment.id}
+            href={`/messages/attachments/${attachment.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`flex items-center gap-3 rounded-2xl border px-3 py-2 text-left text-xs transition hover:translate-x-[1px] ${isMine ? 'border-sky-400/12 bg-sky-500/10 text-sky-50 hover:bg-sky-500/14' : 'border-white/[0.08] bg-white/[0.04] text-white/80 hover:bg-white/[0.06]'}`}
+          >
+            <span className={`inline-flex h-9 w-9 items-center justify-center rounded-xl ${isMine ? 'bg-sky-500/16 text-sky-100' : 'bg-white/[0.08] text-white/70'}`}>
+              <i className="fa-solid fa-paperclip text-[11px]" />
+            </span>
+            <span className="min-w-0 flex-1 truncate">{attachment.original_name}</span>
+            <i className="fa-solid fa-arrow-up-right-from-square text-[10px] opacity-60" />
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 function groupReactions(reactions) {
   const map = new Map()
-  for (const r of reactions) {
-    if (!map.has(r.reaction)) map.set(r.reaction, { count: 0, iReacted: false })
-    const entry = map.get(r.reaction)
-    entry.count++
-    if (r._iMine) entry.iReacted = true
+  for (const reaction of reactions) {
+    if (!map.has(reaction.reaction)) map.set(reaction.reaction, { count: 0, iReacted: false })
+    const entry = map.get(reaction.reaction)
+    entry.count += 1
+    if (reaction._iMine) entry.iReacted = true
   }
   return Array.from(map.entries()).map(([emoji, { count, iReacted }]) => ({ emoji, count, iReacted }))
 }
diff --git a/resources/js/components/messaging/NewConversationModal.jsx b/resources/js/components/messaging/NewConversationModal.jsx
index 48efcc34..f90d80d7 100644
--- a/resources/js/components/messaging/NewConversationModal.jsx
+++ b/resources/js/components/messaging/NewConversationModal.jsx
@@ -1,22 +1,17 @@
 import React, { useState, useCallback } from 'react'
 
-/**
- * Modal for creating a new direct or group conversation.
- */
 export default function NewConversationModal({ currentUserId, apiFetch, onCreated, onClose }) {
-  const [type, setType]               = useState('direct')
+  const [type, setType] = useState('direct')
   const [recipientInput, setRecipient] = useState('')
-  const [groupTitle, setGroupTitle]   = useState('')
+  const [groupTitle, setGroupTitle] = useState('')
   const [participantInputs, setParticipantInputs] = useState(['', ''])
-  const [body, setBody]               = useState('')
-  const [sending, setSending]         = useState(false)
-  const [error, setError]             = useState(null)
+  const [body, setBody] = useState('')
+  const [sending, setSending] = useState(false)
+  const [error, setError] = useState(null)
 
-  const addParticipant = () => setParticipantInputs(p => [...p, ''])
-  const updateParticipant = (i, val) =>
-    setParticipantInputs(p => p.map((v, idx) => idx === i ? val : v))
-  const removeParticipant = (i) =>
-    setParticipantInputs(p => p.filter((_, idx) => idx !== i))
+  const addParticipant = () => setParticipantInputs((prev) => [...prev, ''])
+  const updateParticipant = (index, value) => setParticipantInputs((prev) => prev.map((entry, currentIndex) => (currentIndex === index ? value : entry)))
+  const removeParticipant = (index) => setParticipantInputs((prev) => prev.filter((_, currentIndex) => currentIndex !== index))
 
   const handleSubmit = useCallback(async (e) => {
     e.preventDefault()
@@ -24,8 +19,7 @@ export default function NewConversationModal({ currentUserId, apiFetch, onCreate
     setSending(true)
 
     try {
-      // Resolve usernames to IDs via the search API
-      let payload = { type, body }
+      const payload = { type, body }
 
       if (type === 'direct') {
         const user = await resolveUsername(recipientInput.trim(), apiFetch)
@@ -33,11 +27,11 @@ export default function NewConversationModal({ currentUserId, apiFetch, onCreate
       } else {
         const resolved = await Promise.all(
           participantInputs
-            .map(p => p.trim())
+            .map((entry) => entry.trim())
             .filter(Boolean)
-            .map(u => resolveUsername(u, apiFetch))
+            .map((entry) => resolveUsername(entry, apiFetch)),
         )
-        payload.participant_ids = resolved.map(u => u.id)
+        payload.participant_ids = resolved.map((user) => user.id)
         payload.title = groupTitle.trim()
       }
 
@@ -52,114 +46,126 @@ export default function NewConversationModal({ currentUserId, apiFetch, onCreate
     } finally {
       setSending(false)
     }
-  }, [type, body, recipientInput, groupTitle, participantInputs, apiFetch, onCreated])
+  }, [apiFetch, body, groupTitle, onCreated, participantInputs, recipientInput, type])
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm">
-      <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl w-full max-w-md p-6">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">New Message</h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-              <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Type toggle */}
-        <div className="flex rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-4">
-          {['direct', 'group'].map(t => (
-            <button
-              key={t}
-              type="button"
-              onClick={() => setType(t)}
-              className={`flex-1 py-1.5 text-sm font-medium transition-colors ${
-                type === t
-                  ? 'bg-blue-500 text-white'
-                  : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800'
-              }`}
-            >
-              {t === 'direct' ? '1:1 Message' : 'Group'}
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#020611cc] p-4 backdrop-blur-md">
+      <div className="w-full max-w-xl overflow-hidden rounded-[32px] border border-white/[0.08] bg-[linear-gradient(180deg,rgba(12,18,29,0.98),rgba(7,11,18,0.96))] shadow-[0_30px_80px_rgba(0,0,0,0.55)]">
+        <div className="border-b border-white/[0.06] bg-white/[0.02] px-6 py-5">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/35">Compose</p>
+              <h2 className="mt-2 text-xl font-semibold text-white">Start a new conversation</h2>
+              <p className="mt-2 text-sm leading-6 text-white/50">Send a direct message or set up a group thread with collaborators.</p>
+            </div>
+            <button onClick={onClose} className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.04] text-white/55 transition hover:bg-white/[0.08] hover:text-white">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+              </svg>
             </button>
-          ))}
+          </div>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-3">
+        <form onSubmit={handleSubmit} className="space-y-5 px-6 py-6">
+          <div className="grid gap-3 sm:grid-cols-2">
+            {['direct', 'group'].map((entryType) => (
+              <button
+                key={entryType}
+                type="button"
+                onClick={() => setType(entryType)}
+                className={`rounded-[24px] border px-4 py-4 text-left transition ${type === entryType ? 'border-sky-400/28 bg-sky-500/[0.12] text-sky-100' : 'border-white/[0.08] bg-white/[0.03] text-white/65 hover:bg-white/[0.05] hover:text-white'}`}
+              >
+                <div className="flex items-center gap-3">
+                  <span className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl ${entryType === 'direct' ? 'bg-sky-500/14 text-sky-200' : 'bg-fuchsia-500/14 text-fuchsia-200'}`}>
+                    <i className={`fa-solid ${entryType === 'direct' ? 'fa-user' : 'fa-user-group'}`} />
+                  </span>
+                  <div>
+                    <p className="text-sm font-semibold">{entryType === 'direct' ? 'Direct message' : 'Group conversation'}</p>
+                    <p className="mt-1 text-xs text-white/40">{entryType === 'direct' ? 'One creator, one thread.' : 'Coordinate with multiple people.'}</p>
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+
           {type === 'direct' ? (
             <div>
-              <label className="block text-xs font-medium text-gray-500 mb-1">Recipient username</label>
+              <label className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-white/35">Recipient username</label>
               <input
                 type="text"
                 value={recipientInput}
-                onChange={e => setRecipient(e.target.value)}
+                onChange={(e) => setRecipient(e.target.value)}
                 placeholder="username"
                 required
-                className="w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full rounded-2xl border border-white/[0.08] bg-black/15 px-4 py-3 text-sm text-white outline-none transition placeholder:text-white/25 focus:border-sky-400/30 focus:bg-black/25"
               />
             </div>
           ) : (
             <>
               <div>
-                <label className="block text-xs font-medium text-gray-500 mb-1">Group name</label>
+                <label className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-white/35">Group name</label>
                 <input
                   type="text"
                   value={groupTitle}
-                  onChange={e => setGroupTitle(e.target.value)}
+                  onChange={(e) => setGroupTitle(e.target.value)}
                   placeholder="Group name"
                   required
                   maxLength={120}
-                  className="w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-2xl border border-white/[0.08] bg-black/15 px-4 py-3 text-sm text-white outline-none transition placeholder:text-white/25 focus:border-sky-400/30 focus:bg-black/25"
                 />
               </div>
               <div>
-                <label className="block text-xs font-medium text-gray-500 mb-1">Participants (usernames)</label>
-                {participantInputs.map((val, i) => (
-                  <div key={i} className="flex gap-2 mb-1">
+                <div className="mb-2 flex items-center justify-between gap-3">
+                  <label className="block text-[11px] font-semibold uppercase tracking-[0.18em] text-white/35">Participants</label>
+                  <button type="button" onClick={addParticipant} className="text-xs font-medium text-sky-300 transition hover:text-sky-200">
+                    + Add participant
+                  </button>
+                </div>
+                {participantInputs.map((value, index) => (
+                  <div key={index} className="mb-2 flex gap-2">
                     <input
                       type="text"
-                      value={val}
-                      onChange={e => updateParticipant(i, e.target.value)}
-                      placeholder={`Username ${i + 1}`}
+                      value={value}
+                      onChange={(e) => updateParticipant(index, e.target.value)}
+                      placeholder={`Username ${index + 1}`}
                       required
-                      className="flex-1 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 outline-none focus:ring-2 focus:ring-blue-500"
+                      className="flex-1 rounded-2xl border border-white/[0.08] bg-black/15 px-4 py-3 text-sm text-white outline-none transition placeholder:text-white/25 focus:border-sky-400/30 focus:bg-black/25"
                     />
-                    {participantInputs.length > 2 && (
-                      <button type="button" onClick={() => removeParticipant(i)} className="text-gray-400 hover:text-red-500">×</button>
-                    )}
+                    {participantInputs.length > 2 ? (
+                      <button type="button" onClick={() => removeParticipant(index)} className="inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-white/[0.08] bg-white/[0.04] text-white/45 transition hover:border-rose-400/18 hover:bg-rose-500/10 hover:text-rose-200">×</button>
+                    ) : null}
                   </div>
                 ))}
-                <button type="button" onClick={addParticipant} className="text-xs text-blue-500 hover:text-blue-700 mt-1">
-                  + Add participant
-                </button>
               </div>
             </>
           )}
 
           <div>
-            <label className="block text-xs font-medium text-gray-500 mb-1">Message</label>
+            <label className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-white/35">Opening message</label>
             <textarea
               value={body}
-              onChange={e => setBody(e.target.value)}
+              onChange={(e) => setBody(e.target.value)}
               placeholder="Write your message…"
               required
               rows={3}
               maxLength={5000}
-              className="w-full resize-none rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full resize-none rounded-2xl border border-white/[0.08] bg-black/15 px-4 py-3 text-sm text-white outline-none transition placeholder:text-white/25 focus:border-sky-400/30 focus:bg-black/25"
             />
+            <p className="mt-2 text-[11px] text-white/30">Keep it clear. You can continue the thread after the conversation is created.</p>
           </div>
 
-          {error && (
-            <p className="text-xs text-red-500 bg-red-50 dark:bg-red-900/30 rounded px-2 py-1">{error}</p>
-          )}
+          {error ? (
+            <p className="rounded-2xl border border-rose-500/18 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">{error}</p>
+          ) : null}
 
-          <div className="flex gap-2 justify-end pt-1">
-            <button type="button" onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900">Cancel</button>
+          <div className="flex justify-end gap-2 border-t border-white/[0.06] pt-5">
+            <button type="button" onClick={onClose} className="rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/65 transition hover:bg-white/[0.08] hover:text-white">Cancel</button>
             <button
               type="submit"
               disabled={sending}
-              className="px-4 py-2 rounded-xl bg-blue-500 hover:bg-blue-600 disabled:opacity-50 text-white text-sm font-medium transition-colors"
+              className="rounded-full bg-sky-500 px-5 py-2 text-sm font-semibold text-slate-950 transition hover:bg-sky-400 disabled:opacity-50"
             >
-              {sending ? 'Sending…' : 'Send'}
+              {sending ? 'Creating…' : 'Create conversation'}
             </button>
           </div>
         </form>
@@ -168,10 +174,9 @@ export default function NewConversationModal({ currentUserId, apiFetch, onCreate
   )
 }
 
-// ── Resolve username to user object via search API ───────────────────────────
 async function resolveUsername(username, apiFetch) {
   const data = await apiFetch(`/api/search/users?q=${encodeURIComponent(username)}&limit=1`)
   const user = data?.data?.[0] ?? data?.[0]
-  if (!user) throw new Error(`User "${username}" not found.`)
+  if (!user) throw new Error(`User \"${username}\" not found.`)
   return user
 }