diff --git a/backend/src/Modules/Conversations/Application/DTOs/MessageDetailDto.cs b/backend/src/Modules/Conversations/Application/DTOs/MessageDetailDto.cs
index 02a0523..b4633ad 100644
--- a/backend/src/Modules/Conversations/Application/DTOs/MessageDetailDto.cs
+++ b/backend/src/Modules/Conversations/Application/DTOs/MessageDetailDto.cs
@@ -32,7 +32,8 @@ public record MessageDetailDto(
     bool? PollIsMultipleChoice = null,
     bool? PollIsAnonymous = null,
     bool? PollIsClosed = null,
-    List<Guid>? UserVotedOptionIds = null
+    List<Guid>? UserVotedOptionIds = null,
+    bool IsDeletedForUser = false
 );
 
 public record ReplyToMessageDto(
diff --git a/backend/src/Modules/Conversations/Application/Messages/Delete/DeleteMessagesCommand.cs b/backend/src/Modules/Conversations/Application/Messages/Delete/DeleteMessagesCommand.cs
index d90fce4..95ded75 100644
--- a/backend/src/Modules/Conversations/Application/Messages/Delete/DeleteMessagesCommand.cs
+++ b/backend/src/Modules/Conversations/Application/Messages/Delete/DeleteMessagesCommand.cs
@@ -42,10 +42,16 @@ public sealed class DeleteMessagesCommandHandler : ICommandHandler<DeleteMessage
 
             if (request.DeleteForAll)
             {
+                // Only message sender can delete for everyone
                 if (message.SenderId == request.UserId)
                 {
                     message.Delete();
                 }
+                else
+                {
+                    // If not the sender, just delete for current user
+                    message.DeleteForUser(request.UserId);
+                }
             }
             else
             {
@@ -55,24 +61,13 @@ public sealed class DeleteMessagesCommandHandler : ICommandHandler<DeleteMessage
             await _messageRepository.UpdateAsync(message, cancellationToken);
         }
 
-        if (request.DeleteForAll)
+        // Notify all clients in the chat about the deletion
+        await _hubContext.Clients.Group(request.ChatId.ToString()).SendAsync("messages_deleted", new
         {
-            await _hubContext.Clients.Group(request.ChatId.ToString()).SendAsync("messages_deleted", new
-            {
-                chatId = request.ChatId,
-                messageIds = request.MessageIds,
-                deleteForAll = true
-            });
-        }
-        else
-        {
-            await _hubContext.Clients.User(request.UserId.ToString()).SendAsync("messages_deleted", new
-            {
-                chatId = request.ChatId,
-                messageIds = request.MessageIds,
-                deleteForAll = false
-            });
-        }
+            chatId = request.ChatId,
+            messageIds = request.MessageIds,
+            deleteForAll = request.DeleteForAll
+        });
 
         return global::Knot.Shared.Kernel.Result.Success();
     }
diff --git a/backend/src/Modules/Conversations/Application/Messages/GetMessages/GetMessagesQuery.cs b/backend/src/Modules/Conversations/Application/Messages/GetMessages/GetMessagesQuery.cs
index 1feb14b..3e77abd 100644
--- a/backend/src/Modules/Conversations/Application/Messages/GetMessages/GetMessagesQuery.cs
+++ b/backend/src/Modules/Conversations/Application/Messages/GetMessages/GetMessagesQuery.cs
@@ -3,11 +3,11 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Threading;
 using System.Threading.Tasks;
+using Knot.Contracts.Conversations.Application.Abstractions;
+using Knot.Contracts.Conversations.Domain;
 using Knot.Contracts.Messaging.Application.Abstractions;
 using Knot.Contracts.Messaging.Domain;
-using Knot.Contracts.Conversations.Application.Abstractions;
 using Knot.Modules.Conversations.Application.DTOs;
-using Knot.Contracts.Conversations.Domain;
 using Knot.Shared.Kernel;
 using MediatR;
 
@@ -114,7 +114,8 @@ internal sealed class GetMessagesQueryHandler : IQueryHandler<GetMessagesQuery,
 
             senders.TryGetValue(message.SenderId, out var sender);
             reactionsByMessage.TryGetValue(message.Id, out var reactions);
-            
+
+
             Message? replyMsg = null;
             if (message.ReplyToId.HasValue)
             {
@@ -141,7 +142,7 @@ internal sealed class GetMessagesQueryHandler : IQueryHandler<GetMessagesQuery,
                     replyMsg is MediaMessage mm ? mm.Media.Select(m => new MediaDto(m.Id, m.Type, m.Url, m.Filename, m.Size, m.Duration)).ToList() : new List<MediaDto>(),
                     replySender != null ? new MessageSenderDto(replySender.Id, replySender.Username, replySender.DisplayName, replySender.Avatar) : null
                 ) : null,
-                message is TextMessage tm ? tm.Quote : null,
+                (message as TextMessage)?.Quote,
                 message.IsEdited,
                 message.IsDeleted,
                 message.CreatedAt,
@@ -154,19 +155,22 @@ internal sealed class GetMessagesQueryHandler : IQueryHandler<GetMessagesQuery,
                 (message as MediaMessage)?.Media.Select(m => new MediaDto(m.Id, m.Type, m.Url, m.Filename, m.Size, m.Duration)).ToList() ?? new List<MediaDto>(),
                 sender != null ? new MessageSenderDto(sender.Id, sender.Username, sender.DisplayName, sender.Avatar) : new MessageSenderDto(message.SenderId, "unknown", "Unknown", null),
                 new List<ReadByDto>(), // ReadBy not implemented in this detailed view yet
-                reactions?.Select(r => {
+                reactions?.Select(r =>
+                {
                     senders.TryGetValue(r.UserId, out var ru);
                     return new MessageReactionDto(r.Id, r.Emoji, r.UserId, ru != null ? new MessageSenderDto(ru.Id, ru.Username, ru.DisplayName, ru.Avatar) : null);
                 }).ToList() ?? new List<MessageReactionDto>(),
                 (message as CallMessage)?.CallType,
                 (message as CallMessage)?.CallStatus,
                 (message as CallMessage)?.Duration,
-                (message as PollMessage)?.Options.Select(o => {
+                (message as PollMessage)?.Options.Select(o =>
+                {
                     var pm = (PollMessage)message;
                     var voters = pm.IsAnonymous == false
                          ? pm.Votes
                              .Where(v => v.OptionId == o.Id)
-                             .Select(v => {
+                             .Select(v =>
+                             {
                                  senders.TryGetValue(v.UserId, out var vu);
                                  return vu != null
                                      ? new MessageSenderDto(vu.Id, vu.Username, vu.DisplayName, vu.Avatar)
@@ -174,12 +178,13 @@ internal sealed class GetMessagesQueryHandler : IQueryHandler<GetMessagesQuery,
                              })
                              .ToList()
                          : null;
-                     return new PollOptionDto(o.Id, o.Text, o.VoteCount, voters, pm.IsAnonymous == false ? pm.Votes.Where(v => v.OptionId == o.Id).Select(v => v.UserId).ToList() : null);
-                 }).ToList(),
+                    return new PollOptionDto(o.Id, o.Text, o.VoteCount, voters, pm.IsAnonymous == false ? pm.Votes.Where(v => v.OptionId == o.Id).Select(v => v.UserId).ToList() : null);
+                }).ToList(),
                  (message as PollMessage)?.IsMultipleChoice,
                  (message as PollMessage)?.IsAnonymous,
                  (message as PollMessage)?.IsClosed,
-                 (message as PollMessage)?.Votes.Where(v => v.UserId == request.UserId).Select(v => v.OptionId).ToList()
+                 (message as PollMessage)?.Votes.Where(v => v.UserId == request.UserId).Select(v => v.OptionId).ToList(),
+                 message.IsDeletedForUser(request.UserId)
              ));
         }
 
diff --git a/client-web/src/core/domain/types.ts b/client-web/src/core/domain/types.ts
index 69722ba..c7c9f47 100644
--- a/client-web/src/core/domain/types.ts
+++ b/client-web/src/core/domain/types.ts
@@ -6,7 +6,7 @@ export interface UserBasic {
   displayName: string;
   avatarUrl: string | null;
   // Fallbacks for compatibility
-  username?: string; 
+  username?: string;
   avatar?: string | null;
 }
 
@@ -51,11 +51,11 @@ export interface Reaction {
   id: string;
   emoji: string;
   userId: string;
-  user: { 
-    id: string; 
-    username: string; 
+  user: {
+    id: string;
+    username: string;
     userName?: string;
-    displayName: string; 
+    displayName: string;
     avatar?: string | null;
     avatarUrl?: string | null;
   };
@@ -84,6 +84,7 @@ export interface Message {
   storyMediaType?: string | null;
   isEdited: boolean;
   isDeleted: boolean;
+  isDeletedForUser?: boolean;
   scheduledAt?: string | null;
   createdAt: string;
   updatedAt?: string;
@@ -95,9 +96,9 @@ export interface Message {
     isDeleted?: boolean;
     quote?: string | null;
     media?: MediaItem[];
-    sender: { 
-      id: string; 
-      username: string; 
+    sender: {
+      id: string;
+      username: string;
       userName?: string;
       displayName: string;
       avatar?: string | null;
diff --git a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
index 242ff5f..97ae92d 100644
--- a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
+++ b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
@@ -290,64 +290,64 @@ function MessageBubble({
     };
   }, [showContext]);
 
-  if (message.isDeleted) {
+  if (message.isDeleted || message.isDeletedForUser) {
     return null;
   }
 
   if (message.type === 'call') {
     const isMissed = message.callStatus === 'missed' || message.callStatus === 'declined' || message.callStatus === 'cancelled';
-    const statusText = isMissed 
-        ? (message.callStatus === 'missed' ? t('missedCall') : message.callStatus === 'declined' ? t('declinedCall') : t('cancelledCall'))
-        : t('completedCall');
-    
+    const statusText = isMissed
+      ? (message.callStatus === 'missed' ? t('missedCall') : message.callStatus === 'declined' ? t('declinedCall') : t('cancelledCall'))
+      : t('completedCall');
+
     const StatusIcon = isMissed ? PhoneMissed : (isMine ? PhoneOutgoing : PhoneIncoming);
     const CallIcon = message.callType === 'video' ? Video : StatusIcon;
-    
+
     return (
       <div className={`flex ${isMine ? 'justify-end' : 'justify-start'} mb-3 px-4 group scroll-mt-20`} data-message-id={message.id}>
-        <div 
+        <div
           onContextMenu={handleContextMenu}
           className={`group/call relative flex items-center gap-3.5 px-4 py-3 rounded-[1.25rem] border backdrop-blur-sm transition-all duration-300 cursor-default select-none
-            ${isMine 
-               ? 'bg-primary/10 border-primary/20 hover:bg-primary/20 shadow-[0_4px_12px_rgba(48,150,229,0.08)]' 
-               : 'bg-surface-variant/10 border-white/5 hover:bg-surface-variant/15 shadow-[0_4px_12px_rgba(0,0,0,0.15)]'}`}>
-           
-           <div className={`w-11 h-11 rounded-2xl flex items-center justify-center shrink-0 shadow-inner group-hover/call:scale-105 transition-transform duration-500
+            ${isMine
+              ? 'bg-primary/10 border-primary/20 hover:bg-primary/20 shadow-[0_4px_12px_rgba(48,150,229,0.08)]'
+              : 'bg-surface-variant/10 border-white/5 hover:bg-surface-variant/15 shadow-[0_4px_12px_rgba(0,0,0,0.15)]'}`}>
+
+          <div className={`w-11 h-11 rounded-2xl flex items-center justify-center shrink-0 shadow-inner group-hover/call:scale-105 transition-transform duration-500
              ${isMissed ? 'bg-red-500/15 text-red-400' : 'bg-emerald-500/15 text-emerald-400'}`}>
-              <CallIcon size={22} strokeWidth={2.5} className={isMissed && message.callStatus === 'missed' ? 'animate-wiggle' : ''} />
-           </div>
+            <CallIcon size={22} strokeWidth={2.5} className={isMissed && message.callStatus === 'missed' ? 'animate-wiggle' : ''} />
+          </div>
 
-           <div className="flex-1 min-w-0 pr-4">
-              <h4 className="text-[15px] font-bold text-white tracking-tight leading-tight mb-0.5 truncate">
-                 {message.callType === 'video' ? t('videoCall') : t('audioCall')}
-              </h4>
-              <div className="flex items-center gap-1.5 opacity-80">
-                 <span className={`text-[13px] font-medium ${isMissed ? 'text-red-400' : 'text-zinc-400'}`}>
-                    {statusText} {message.duration && message.duration > 0 ? `• ${formatDuration(message.duration)}` : ''}
-                 </span>
+          <div className="flex-1 min-w-0 pr-4">
+            <h4 className="text-[15px] font-bold text-white tracking-tight leading-tight mb-0.5 truncate">
+              {message.callType === 'video' ? t('videoCall') : t('audioCall')}
+            </h4>
+            <div className="flex items-center gap-1.5 opacity-80">
+              <span className={`text-[13px] font-medium ${isMissed ? 'text-red-400' : 'text-zinc-400'}`}>
+                {statusText} {message.duration && message.duration > 0 ? `• ${formatDuration(message.duration)}` : ''}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex flex-col items-end justify-between self-stretch pt-0.5">
+            <div className="text-[10px] font-bold tracking-tight text-white/30 tabular-nums uppercase flex items-center gap-1">
+              {isPinned && <Pin size={10} className="rotate-45 text-primary fill-primary/20" />}
+              {timeStr}
+            </div>
+            {isMine && (
+              <div className="opacity-60 flex gap-0.5">
+                {isRead ? <CheckCheck size={12} className="text-primary" /> : <Check size={12} className="text-zinc-500" />}
               </div>
-           </div>
+            )}
+          </div>
 
-           <div className="flex flex-col items-end justify-between self-stretch pt-0.5">
-              <div className="text-[10px] font-bold tracking-tight text-white/30 tabular-nums uppercase flex items-center gap-1">
-                 {isPinned && <Pin size={10} className="rotate-45 text-primary fill-primary/20" />}
-                 {timeStr}
-              </div>
-              {isMine && (
-                 <div className="opacity-60 flex gap-0.5">
-                    {isRead ? <CheckCheck size={12} className="text-primary" /> : <Check size={12} className="text-zinc-500" />}
-                 </div>
-              )}
-           </div>
-
-           <div className="absolute inset-0 rounded-[1.25rem] bg-white/[0.03] opacity-0 group-hover/call:opacity-100 transition-opacity pointer-events-none" />
+          <div className="absolute inset-0 rounded-[1.25rem] bg-white/[0.03] opacity-0 group-hover/call:opacity-100 transition-opacity pointer-events-none" />
         </div>
       </div>
     );
   }
 
   const media = message.media || [];
-  
+
   const isMediaGif = (m: MediaItem) => {
     if (m.type === 'gif') return true;
     if (m.url?.toLowerCase().includes('klipy') || m.url?.toLowerCase().endsWith('.gif')) return true;
@@ -486,314 +486,234 @@ function MessageBubble({
             const needsFrame = !!message.content || !!message.forwardedFrom || !!message.replyTo || hasVoice || hasAudio || hasFile || !!message.storyId;
 
             return (
-          <div
-            id={`msg-${message.id}`}
-            onContextMenu={handleContextMenu}
-            onDoubleClick={handleReply}
-            title={t('reply') ? `${t('reply')} (Double Click)` : 'Double click to reply'}
-            className={`cursor-pointer max-w-full min-w-[60px] transition-all duration-500 overflow-hidden ${
-              !needsFrame
-                ? 'p-0 shadow-none border-none bg-transparent'
-                : isMine
-                  ? 'bubble-sent px-4 py-3 hover:brightness-110'
-                  : 'bubble-received px-4 py-3 hover:brightness-110'
-              }`}
-          >
+              <div
+                id={`msg-${message.id}`}
+                onContextMenu={handleContextMenu}
+                onDoubleClick={handleReply}
+                title={t('reply') ? `${t('reply')} (Double Click)` : 'Double click to reply'}
+                className={`cursor-pointer max-w-full min-w-[60px] transition-all duration-500 overflow-hidden ${!needsFrame
+                    ? 'p-0 shadow-none border-none bg-transparent'
+                    : isMine
+                      ? 'bubble-sent px-4 py-3 hover:brightness-110'
+                      : 'bubble-received px-4 py-3 hover:brightness-110'
+                  }`}
+              >
 
-          {/* Reply */}
-            {message.replyTo && (
-            <div
-              className={`mb-2 pl-3 py-2 cursor-pointer transition-all -mx-1 px-2 rounded-xl ${
-                isMine ? 'bg-[#1a1a1a] border-l-[3px] border-l-primary hover:bg-[#202020]' : 'bg-white/5 border-l-[3px] border-l-primary hover:bg-white/10'
-              }`}
-              onClick={(e) => {
-                e.stopPropagation();
-                const el = document.getElementById(`msg-${message.replyToId}`);
-                if (el) {
-                  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                  el.classList.add('highlight-message');
-                  setTimeout(() => el.classList.remove('highlight-message'), 5000);
-                }
-              }}
-            >
-              <p className={`text-[12px] font-black uppercase tracking-wider mb-0.5 truncate ${isMine ? 'text-primary' : 'text-primary'}`}>
-                {message.replyTo.sender?.displayName || message.replyTo.sender?.userName || message.replyTo.sender?.username || ''}
-              </p>
-              <div className="flex items-center gap-1.5">
-                {message.replyTo.isDeleted ? (
-                  <p className="text-[13px] text-zinc-500 italic truncate">{t('messageDeleted')}</p>
-                ) : (
-                  <>
-                    {message.replyTo.media && message.replyTo.media.length > 0 && !message.quote && (() => {
-                      const m = message.replyTo.media[0];
-                      const isMp4 = m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4');
-                      return (
-                      <div className="w-8 h-8 rounded bg-black/20 overflow-hidden flex-shrink-0 relative">
-                        {m.type === 'image' ? (
-                          isMp4 ? (
-                            <video src={getMediaUrl(m.url)} className="w-full h-full object-cover" muted playsInline />
-                          ) : (
-                            <img src={getMediaUrl(m.url)} className="w-full h-full object-cover" alt="" />
-                          )
-                        ) : m.type === 'video' ? (
-                          <>
-                            <video src={getMediaUrl(m.url)} className="w-full h-full object-cover" muted playsInline />
-                            <div className="absolute inset-0 flex items-center justify-center bg-black/40"><Play size={10} className="text-white" /></div>
-                          </>
-                        ) : (
-                          <div className="w-full h-full flex items-center justify-center"><FileText size={10} className="text-white/50" /></div>
-                        )}
-                      </div>
-                      );
-                    })()}
-                    <p className={`text-[13px] line-clamp-1 break-words italic ${isMine ? 'text-zinc-200' : 'text-zinc-400'}`}>
-                      {message.quote || message.replyTo.content || (message.replyTo.media && message.replyTo.media.length > 0 ? (() => {
-                        const m = message.replyTo.media[0];
-                        if (m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4')) return 'GIF';
-                        if (m.type === 'image') return t('photo');
-                        if (m.type === 'video') return t('video');
-                        if (m.type === 'voice') return t('voice');
-                        return t('media');
-                      })() : '')}
+                {/* Reply */}
+                {message.replyTo && (
+                  <div
+                    className={`mb-2 pl-3 py-2 cursor-pointer transition-all -mx-1 px-2 rounded-xl ${isMine ? 'bg-[#1a1a1a] border-l-[3px] border-l-primary hover:bg-[#202020]' : 'bg-white/5 border-l-[3px] border-l-primary hover:bg-white/10'
+                      }`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      const el = document.getElementById(`msg-${message.replyToId}`);
+                      if (el) {
+                        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        el.classList.add('highlight-message');
+                        setTimeout(() => el.classList.remove('highlight-message'), 5000);
+                      }
+                    }}
+                  >
+                    <p className={`text-[12px] font-black uppercase tracking-wider mb-0.5 truncate ${isMine ? 'text-primary' : 'text-primary'}`}>
+                      {message.replyTo.sender?.displayName || message.replyTo.sender?.userName || message.replyTo.sender?.username || ''}
                     </p>
-                  </>
-                )}
-              </div>
-            </div>
-          )}
-
-          {/* Story Reply Quote */}
-          {message.storyId && (
-            <div
-              className={`mb-1.5 pl-2.5 py-0.5 border-l-[3px] transition-colors -mx-1 px-1 rounded-sm ${
-                isMine ? 'border-l-white/80 hover:bg-white/10' : 'border-l-knot-500 hover:bg-knot-500/10'
-              }`}
-            >
-              <p className={`text-[11px] font-bold uppercase tracking-wider mb-1 ${isMine ? 'text-white/80' : 'text-knot-500/80'}`}>
-                {t('story')}
-              </p>
-              <div className="flex items-center gap-2">
-                {message.storyMediaUrl && (
-                  <div className="w-8 h-8 rounded bg-black/20 overflow-hidden flex-shrink-0">
-                    {message.storyMediaType === 'video' ? (
-                       <div className="w-full h-full relative">
-                          <video src={getMediaUrl(message.storyMediaUrl)} className="w-full h-full object-cover" />
-                          <div className="absolute inset-0 flex items-center justify-center bg-black/20"><Play size={10} className="text-white fill-white" /></div>
-                       </div>
-                    ) : message.storyMediaType === 'image' ? (
-                       <img src={getMediaUrl(message.storyMediaUrl)} className="w-full h-full object-cover" alt="" />
-                    ) : (
-                       <div className="w-full h-full flex items-center justify-center bg-knot-500/20"><FileText size={10} className="text-knot-400" /></div>
-                    )}
+                    <div className="flex items-center gap-1.5">
+                      {message.replyTo.isDeleted ? (
+                        <p className="text-[13px] text-zinc-500 italic truncate">{t('messageDeleted')}</p>
+                      ) : (
+                        <>
+                          {message.replyTo.media && message.replyTo.media.length > 0 && !message.quote && (() => {
+                            const m = message.replyTo.media[0];
+                            const isMp4 = m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4');
+                            return (
+                              <div className="w-8 h-8 rounded bg-black/20 overflow-hidden flex-shrink-0 relative">
+                                {m.type === 'image' ? (
+                                  isMp4 ? (
+                                    <video src={getMediaUrl(m.url)} className="w-full h-full object-cover" muted playsInline />
+                                  ) : (
+                                    <img src={getMediaUrl(m.url)} className="w-full h-full object-cover" alt="" />
+                                  )
+                                ) : m.type === 'video' ? (
+                                  <>
+                                    <video src={getMediaUrl(m.url)} className="w-full h-full object-cover" muted playsInline />
+                                    <div className="absolute inset-0 flex items-center justify-center bg-black/40"><Play size={10} className="text-white" /></div>
+                                  </>
+                                ) : (
+                                  <div className="w-full h-full flex items-center justify-center"><FileText size={10} className="text-white/50" /></div>
+                                )}
+                              </div>
+                            );
+                          })()}
+                          <p className={`text-[13px] line-clamp-1 break-words italic ${isMine ? 'text-zinc-200' : 'text-zinc-400'}`}>
+                            {message.quote || message.replyTo.content || (message.replyTo.media && message.replyTo.media.length > 0 ? (() => {
+                              const m = message.replyTo.media[0];
+                              if (m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4')) return 'GIF';
+                              if (m.type === 'image') return t('photo');
+                              if (m.type === 'video') return t('video');
+                              if (m.type === 'voice') return t('voice');
+                              return t('media');
+                            })() : '')}
+                          </p>
+                        </>
+                      )}
+                    </div>
                   </div>
                 )}
-                <p className={`text-[13px] line-clamp-2 break-words whitespace-pre-wrap ${isMine ? 'text-[#0a0a0a]/70' : 'text-zinc-600 dark:text-zinc-300'}`}>
-                  {message.quote}
-                </p>
-              </div>
-            </div>
-          )}
-            {/* Рендер пересланного сообщения */}
-            {message.forwardedFrom && (
-              <div
-                className="mb-1 text-[13.5px] cursor-pointer hover:bg-white/5 transition-colors -mx-1 px-1 rounded-sm"
-                onClick={() => onViewProfile?.(message.forwardedFromId!)}
-              >
-                <div className={`font-medium ${isMine ? 'text-white/90' : 'text-knot-500'}`}>
-                  {(t('forwardedFrom' as any) === 'forwardedFrom' ? 'Переслано от' : t('forwardedFrom' as any))} <span className="font-semibold">{message.forwardedFrom.displayName || message.forwardedFrom.userName || message.forwardedFrom.username || ''}</span>
-                </div>
-              </div>
-            )}
 
-            {/* Изображения и Видео (Галерея) */}
-            {(hasImage || hasVideo) && (() => {
-              const galleryMedia = media.filter(m => m.type === 'image' || m.type === 'video' || isMediaGif(m));
-              const isSingleGif = galleryMedia.length === 1 && isMediaGif(galleryMedia[0]);
-              const hasReactions = Object.keys(reactionGroups).length > 0;
+                {/* Story Reply Quote */}
+                {message.storyId && (
+                  <div
+                    className={`mb-1.5 pl-2.5 py-0.5 border-l-[3px] transition-colors -mx-1 px-1 rounded-sm ${isMine ? 'border-l-white/80 hover:bg-white/10' : 'border-l-knot-500 hover:bg-knot-500/10'
+                      }`}
+                  >
+                    <p className={`text-[11px] font-bold uppercase tracking-wider mb-1 ${isMine ? 'text-white/80' : 'text-knot-500/80'}`}>
+                      {t('story')}
+                    </p>
+                    <div className="flex items-center gap-2">
+                      {message.storyMediaUrl && (
+                        <div className="w-8 h-8 rounded bg-black/20 overflow-hidden flex-shrink-0">
+                          {message.storyMediaType === 'video' ? (
+                            <div className="w-full h-full relative">
+                              <video src={getMediaUrl(message.storyMediaUrl)} className="w-full h-full object-cover" />
+                              <div className="absolute inset-0 flex items-center justify-center bg-black/20"><Play size={10} className="text-white fill-white" /></div>
+                            </div>
+                          ) : message.storyMediaType === 'image' ? (
+                            <img src={getMediaUrl(message.storyMediaUrl)} className="w-full h-full object-cover" alt="" />
+                          ) : (
+                            <div className="w-full h-full flex items-center justify-center bg-knot-500/20"><FileText size={10} className="text-knot-400" /></div>
+                          )}
+                        </div>
+                      )}
+                      <p className={`text-[13px] line-clamp-2 break-words whitespace-pre-wrap ${isMine ? 'text-[#0a0a0a]/70' : 'text-zinc-600 dark:text-zinc-300'}`}>
+                        {message.quote}
+                      </p>
+                    </div>
+                  </div>
+                )}
+                {/* Рендер пересланного сообщения */}
+                {message.forwardedFrom && (
+                  <div
+                    className="mb-1 text-[13.5px] cursor-pointer hover:bg-white/5 transition-colors -mx-1 px-1 rounded-sm"
+                    onClick={() => onViewProfile?.(message.forwardedFromId!)}
+                  >
+                    <div className={`font-medium ${isMine ? 'text-white/90' : 'text-knot-500'}`}>
+                      {(t('forwardedFrom' as any) === 'forwardedFrom' ? 'Переслано от' : t('forwardedFrom' as any))} <span className="font-semibold">{message.forwardedFrom.displayName || message.forwardedFrom.userName || message.forwardedFrom.username || ''}</span>
+                    </div>
+                  </div>
+                )}
 
-              return (
-              <div className={`
+                {/* Изображения и Видео (Галерея) */}
+                {(hasImage || hasVideo) && (() => {
+                  const galleryMedia = media.filter(m => m.type === 'image' || m.type === 'video' || isMediaGif(m));
+                  const isSingleGif = galleryMedia.length === 1 && isMediaGif(galleryMedia[0]);
+                  const hasReactions = Object.keys(reactionGroups).length > 0;
+
+                  return (
+                    <div className={`
                 ${needsFrame ? `-mx-[14px] ${message.forwardedFrom || message.replyTo || message.storyId ? 'mt-2' : '-mt-[8px]'} ${message.content ? 'mb-2' : hasReactions ? 'mb-1' : '-mb-[8px]'}` : ''}
                 ${isSingleGif ? 'max-w-[260px]' : ''}
                 overflow-hidden relative rounded-[1.25rem]
               `}>
-                <div className={`grid gap-[2px] ${galleryMedia.length > 1 ? 'w-[80vw] sm:w-[380px] md:w-[450px]' : 'w-full'} ${
-                  galleryMedia.length === 1 ? 'grid-cols-1' : 'grid-cols-6'
-                }`}>
-                  {galleryMedia.map((m, idx) => {
-                      const gif = isMediaGif(m);
-                      
-                      let cellClass = '';
-                      const count = galleryMedia.length;
-                      
-                      if (count === 1) {
-                         cellClass = isSingleGif ? 'max-h-[260px] aspect-auto' : 'max-h-[350px] sm:max-h-[450px] md:max-h-[500px] h-auto aspect-auto';
-                      } else if (count === 2) {
-                         cellClass = 'col-span-3 aspect-square';
-                      } else if (count === 3) {
-                         cellClass = idx === 0 ? 'col-span-6 aspect-[2/1] max-h-[300px]' : 'col-span-3 aspect-square';
-                      } else if (count === 4) {
-                         cellClass = 'col-span-3 aspect-square';
-                      } else if (count === 5) {
-                         cellClass = idx < 2 ? 'col-span-3 aspect-square' : 'col-span-2 aspect-square';
-                      } else if (count === 6) {
-                         cellClass = idx === 0 ? 'col-span-6 aspect-[2/1] max-h-[300px]' : idx < 3 ? 'col-span-3 aspect-[4/3]' : 'col-span-2 aspect-square';
-                      } else {
-                         // 7+
-                         cellClass = 'col-span-2 aspect-square';
-                      }
+                      <div className={`grid gap-[2px] ${galleryMedia.length > 1 ? 'w-[80vw] sm:w-[380px] md:w-[450px]' : 'w-full'} ${galleryMedia.length === 1 ? 'grid-cols-1' : 'grid-cols-6'
+                        }`}>
+                        {galleryMedia.map((m, idx) => {
+                          const gif = isMediaGif(m);
 
-                      return (
-                        <div
-                          key={m.id}
-                          className={`relative cursor-pointer group/video overflow-hidden transition-all hover:brightness-90 bg-zinc-900 ${cellClass}`}
-                          onClick={() => setLightboxData({ index: idx })}
-                        >
-                          {gif ? (
-                            (m.url?.toLowerCase().endsWith('.gif') || m.filename?.toLowerCase().endsWith('.gif')) ? (
-                              <img
-                                src={getMediaUrl(m.url)}
-                                alt=""
-                                className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
-                              />
-                            ) : (
-                              <video
-                                src={getMediaUrl(m.url)}
-                                autoPlay loop muted playsInline preload="metadata"
-                                className={`w-full h-full object-cover min-h-[150px] min-w-[200px] bg-zinc-900 shadow-inner rounded-[1.25rem] ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
-                              />
-                            )
-                          ) : m.type === 'video' ? (
-                            <>
-                              {m.thumbnail ? (
-                                <img src={getMediaUrl(m.thumbnail)} className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`} alt="" />
+                          let cellClass = '';
+                          const count = galleryMedia.length;
+
+                          if (count === 1) {
+                            cellClass = isSingleGif ? 'max-h-[260px] aspect-auto' : 'max-h-[350px] sm:max-h-[450px] md:max-h-[500px] h-auto aspect-auto';
+                          } else if (count === 2) {
+                            cellClass = 'col-span-3 aspect-square';
+                          } else if (count === 3) {
+                            cellClass = idx === 0 ? 'col-span-6 aspect-[2/1] max-h-[300px]' : 'col-span-3 aspect-square';
+                          } else if (count === 4) {
+                            cellClass = 'col-span-3 aspect-square';
+                          } else if (count === 5) {
+                            cellClass = idx < 2 ? 'col-span-3 aspect-square' : 'col-span-2 aspect-square';
+                          } else if (count === 6) {
+                            cellClass = idx === 0 ? 'col-span-6 aspect-[2/1] max-h-[300px]' : idx < 3 ? 'col-span-3 aspect-[4/3]' : 'col-span-2 aspect-square';
+                          } else {
+                            // 7+
+                            cellClass = 'col-span-2 aspect-square';
+                          }
+
+                          return (
+                            <div
+                              key={m.id}
+                              className={`relative cursor-pointer group/video overflow-hidden transition-all hover:brightness-90 bg-zinc-900 ${cellClass}`}
+                              onClick={() => setLightboxData({ index: idx })}
+                            >
+                              {gif ? (
+                                (m.url?.toLowerCase().endsWith('.gif') || m.filename?.toLowerCase().endsWith('.gif')) ? (
+                                  <img
+                                    src={getMediaUrl(m.url)}
+                                    alt=""
+                                    className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
+                                  />
+                                ) : (
+                                  <video
+                                    src={getMediaUrl(m.url)}
+                                    autoPlay loop muted playsInline preload="metadata"
+                                    className={`w-full h-full object-cover min-h-[150px] min-w-[200px] bg-zinc-900 shadow-inner rounded-[1.25rem] ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
+                                  />
+                                )
+                              ) : m.type === 'video' ? (
+                                <>
+                                  {m.thumbnail ? (
+                                    <img src={getMediaUrl(m.thumbnail)} className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`} alt="" />
+                                  ) : (
+                                    <video
+                                      src={getMediaUrl(m.url)}
+                                      preload="metadata"
+                                      className={`w-full h-full object-cover bg-zinc-900 ${galleryMedia.length === 1 ? 'relative h-auto min-h-[160px]' : 'absolute inset-0'}`}
+                                    />
+                                  )}
+                                  <div className={`absolute inset-0 flex items-center justify-center bg-black/20 group-hover/video:bg-black/40 transition-colors`}>
+                                    <Play size={galleryMedia.length > 1 ? 24 : 48} className="text-white opacity-80" />
+                                  </div>
+                                </>
                               ) : (
-                                <video
+                                <img
                                   src={getMediaUrl(m.url)}
-                                  preload="metadata"
-                                  className={`w-full h-full object-cover bg-zinc-900 ${galleryMedia.length === 1 ? 'relative h-auto min-h-[160px]' : 'absolute inset-0'}`}
+                                  alt=""
+                                  className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
                                 />
                               )}
-                              <div className={`absolute inset-0 flex items-center justify-center bg-black/20 group-hover/video:bg-black/40 transition-colors`}>
-                                <Play size={galleryMedia.length > 1 ? 24 : 48} className="text-white opacity-80" />
-                              </div>
-                            </>
-                          ) : (
-                            <img
-                              src={getMediaUrl(m.url)}
-                              alt=""
-                              className={`w-full h-full object-cover ${galleryMedia.length === 1 ? 'relative h-auto' : 'absolute inset-0'}`}
-                            />
-                          )}
+                            </div>
+                          );
+                        })}
+                      </div>
+
+                      {!message.content && (
+                        <div className="absolute bottom-1.5 right-1.5 z-10 pointer-events-none flex justify-end">
+                          <span className="text-[10px] font-bold text-on-surface-variant/40 bg-surface-container-highest/40 px-2 py-0.5 rounded-full flex items-center gap-1 backdrop-blur-md pointer-events-auto">
+                            {isPinned && <Pin size={10} className="rotate-45 text-primary fill-primary/40" />}
+                            {timeStr}
+                            {isMine && !message.scheduledAt && (
+                              <span className={`material-symbols-outlined text-[14px] ${isRead ? 'text-primary fill-1' : 'text-on-surface-variant/40'}`} style={{ fontVariationSettings: `'FILL' ${isRead ? 1 : 0}` }}>
+                                {isRead ? 'done_all' : 'done'}
+                              </span>
+                            )}
+                          </span>
                         </div>
-                      );
-                    })}
-                </div>
-                
-                {!message.content && (
-                  <div className="absolute bottom-1.5 right-1.5 z-10 pointer-events-none flex justify-end">
-                    <span className="text-[10px] font-bold text-on-surface-variant/40 bg-surface-container-highest/40 px-2 py-0.5 rounded-full flex items-center gap-1 backdrop-blur-md pointer-events-auto">
-                      {isPinned && <Pin size={10} className="rotate-45 text-primary fill-primary/40" />}
-                      {timeStr}
-                      {isMine && !message.scheduledAt && (
-                        <span className={`material-symbols-outlined text-[14px] ${isRead ? 'text-primary fill-1' : 'text-on-surface-variant/40'}`} style={{ fontVariationSettings: `'FILL' ${isRead ? 1 : 0}` }}>
-                          {isRead ? 'done_all' : 'done'}
-                        </span>
                       )}
-                    </span>
-                  </div>
-                )}
-              </div>
-              );
-            })()}
-
-            {/* Голосовое - Optimized Kinetic Layout */}
-            {hasVoice && (
-              <div className="flex items-center gap-3 min-w-[200px] py-0.5">
-                <audio
-                  ref={audioRef}
-                  src={media.find((m) => m.type === 'voice')?.url}
-                  preload="auto"
-                />
-                <button
-                  onClick={toggleAudio}
-                  className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 ${isMine ? 'bg-white text-primary' : 'bg-primary text-white'} shadow-sm transition-all active:scale-95`}
-                >
-                  {isPlaying ? (
-                    <Pause size={16} fill="currentColor" />
-                  ) : (
-                    <Play size={16} fill="currentColor" className="ml-0.5" />
-                  )}
-                </button>
-                <div className="flex-1 min-w-0">
-                  <div
-                    className="flex items-center gap-[2px] h-6 cursor-pointer"
-                    onClick={(e) => {
-                      const audio = audioRef.current;
-                      if (!audio || !audio.duration) return;
-                      const rect = e.currentTarget.getBoundingClientRect();
-                      const pct = (e.clientX - rect.left) / rect.width;
-                      audio.currentTime = pct * audio.duration;
-                      setAudioProgress(pct * 100);
-                      if (!isPlaying) toggleAudio();
-                    }}
-                  >
-                    {(waveformBars || Array(28).fill(0.5)).map((val, i) => {
-                      const barHeight = Math.max(10, val * 85);
-                      const progress = audioProgress / 100;
-                      const barProgress = i / 28;
-                      const isActive = barProgress < progress;
-                      return (
-                        <div
-                          key={i}
-                          className={`flex-1 rounded-full transition-all duration-200 ${isActive
-                            ? isMine ? 'bg-[#000000] opacity-70' : 'bg-primary'
-                            : isMine ? 'bg-[#000000] opacity-20' : 'bg-white/30'
-                            }`}
-                          style={{ height: `${barHeight}%` }}
-                        />
-                      );
-                    })}
-                  </div>
-                  <div className="flex justify-end mt-0.5">
-                    <span className={`text-[10px] font-bold tabular-nums ${isMine ? 'text-[#0a0a0a]/60' : 'text-white/60'}`}>
-                      {isPlaying
-                        ? formatDuration(audioRef.current?.currentTime || 0)
-                        : formatDuration(audioDuration || message.media?.find((m) => m.type === 'voice')?.duration || 0)}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Аудио (mp3 файлы) */}
-            {hasAudio && (() => {
-              const audioMedia = media.find(isAudioFile);
-              const formatSize = (bytes?: number | null) => {
-                if (!bytes) return "";
-                if (bytes < 1024) return bytes + " B";
-                if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
-                if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + " MB";
-                return (bytes / (1024 * 1024 * 1024)).toFixed(1) + " GB";
-              };
-              
-              return (
-                <div className="min-w-[220px]">
-                  {audioMedia?.filename && (
-                    <div className="flex items-center gap-2 mb-2 min-w-0">
-                      <Volume2 size={14} className={isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-400'} />
-                      <span className={`text-[11px] font-bold truncate ${isMine ? 'text-[#0a0a0a]/80' : 'text-zinc-200'}`}>{audioMedia.filename}</span>
                     </div>
-                  )}
-                  <div className="flex items-center gap-3">
+                  );
+                })()}
+
+                {/* Голосовое - Optimized Kinetic Layout */}
+                {hasVoice && (
+                  <div className="flex items-center gap-3 min-w-[200px] py-0.5">
                     <audio
                       ref={audioRef}
-                      src={getMediaUrl(audioMedia?.url)}
+                      src={media.find((m) => m.type === 'voice')?.url}
                       preload="auto"
                     />
                     <button
                       onClick={toggleAudio}
-                      className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 ${isMine ? 'bg-[#0a0a0a]/10 hover:bg-[#0a0a0a]/20 text-[#0a0a0a]' : 'bg-primary text-white shadow-lg'} transition-all active:scale-95`}
+                      className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 ${isMine ? 'bg-white text-primary' : 'bg-primary text-white'} shadow-sm transition-all active:scale-95`}
                     >
                       {isPlaying ? (
                         <Pause size={16} fill="currentColor" />
@@ -802,64 +722,49 @@ function MessageBubble({
                       )}
                     </button>
                     <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-[2px] h-6 cursor-pointer" 
-                           onClick={(e) => {
-                             const audio = audioRef.current;
-                             if (!audio || !audio.duration) return;
-                             const rect = e.currentTarget.getBoundingClientRect();
-                             const pct = (e.clientX - rect.left) / rect.width;
-                             audio.currentTime = pct * audio.duration;
-                             setAudioProgress(pct * 100);
-                           }}>
-                        {Array.from({ length: 28 }).map((_, i) => {
-                          const barHeight = [40, 65, 35, 80, 50, 90, 45, 70, 55, 85, 30, 75, 60, 95, 40, 80, 50, 70, 35, 90, 55, 65, 45, 85, 60, 75, 50, 40][i] || 50;
+                      <div
+                        className="flex items-center gap-[2px] h-6 cursor-pointer"
+                        onClick={(e) => {
+                          const audio = audioRef.current;
+                          if (!audio || !audio.duration) return;
+                          const rect = e.currentTarget.getBoundingClientRect();
+                          const pct = (e.clientX - rect.left) / rect.width;
+                          audio.currentTime = pct * audio.duration;
+                          setAudioProgress(pct * 100);
+                          if (!isPlaying) toggleAudio();
+                        }}
+                      >
+                        {(waveformBars || Array(28).fill(0.5)).map((val, i) => {
+                          const barHeight = Math.max(10, val * 85);
                           const progress = audioProgress / 100;
                           const barProgress = i / 28;
                           const isActive = barProgress < progress;
                           return (
                             <div
                               key={i}
-                              className={`flex-1 rounded-full transition-all duration-150 ${isActive
-                                ? isMine ? 'bg-[#0a0a0a]/70' : 'bg-primary'
-                                : isMine ? 'bg-[#0a0a0a]/10' : 'bg-white/20'
+                              className={`flex-1 rounded-full transition-all duration-200 ${isActive
+                                ? isMine ? 'bg-[#000000] opacity-70' : 'bg-primary'
+                                : isMine ? 'bg-[#000000] opacity-20' : 'bg-white/30'
                                 }`}
                               style={{ height: `${barHeight}%` }}
                             />
                           );
                         })}
                       </div>
-                      <div className="flex justify-between items-center mt-0.5">
-                        <span className={`text-[10px] font-bold tabular-nums ${isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-500'}`}>
+                      <div className="flex justify-end mt-0.5">
+                        <span className={`text-[10px] font-bold tabular-nums ${isMine ? 'text-[#0a0a0a]/60' : 'text-white/60'}`}>
                           {isPlaying
                             ? formatDuration(audioRef.current?.currentTime || 0)
-                            : (typeof audioMedia?.duration === 'number' 
-                                ? formatDuration(audioMedia.duration) 
-                                : (audioMedia?.duration || formatDuration(audioDuration || 0)))}
+                            : formatDuration(audioDuration || message.media?.find((m) => m.type === 'voice')?.duration || 0)}
                         </span>
-                        <div className="flex items-center gap-2">
-                           <span className={`text-[10px] font-black uppercase tracking-tighter ${isMine ? 'text-[#0a0a0a]/40' : 'text-zinc-500'}`}>{formatSize(audioMedia?.size)}</span>
-                           <a 
-                             href={getMediaUrl(audioMedia?.url)} 
-                             download={audioMedia?.filename || 'audio'}
-                             target="_blank"
-                             rel="noopener noreferrer"
-                             className={`flex items-center justify-center p-1 rounded-md transition-all ${isMine ? 'hover:bg-[#0a0a0a]/10 text-[#0a0a0a]/40 hover:text-[#0a0a0a]' : 'hover:bg-white/10 text-zinc-500 hover:text-white'}`}
-                           >
-                             <Download size={12} />
-                           </a>
-                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              );
-            })()}
+                )}
 
-            {/* Файлы */}
-            {hasFile &&
-              media
-                .filter((m) => m.type !== 'image' && m.type !== 'voice' && m.type !== 'video' && !isAudioFile(m) && m.type !== 'gif')
-                .map((m) => {
+                {/* Аудио (mp3 файлы) */}
+                {hasAudio && (() => {
+                  const audioMedia = media.find(isAudioFile);
                   const formatSize = (bytes?: number | null) => {
                     if (!bytes) return "";
                     if (bytes < 1024) return bytes + " B";
@@ -867,202 +772,293 @@ function MessageBubble({
                     if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + " MB";
                     return (bytes / (1024 * 1024 * 1024)).toFixed(1) + " GB";
                   };
+
                   return (
-                    <a
-                      key={m.id}
-                      href={getMediaUrl(m.url)}
-                      download={m.filename || 'file'}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className={`flex items-center gap-3 p-3 rounded-2xl ${isMine ? 'bg-[#0a0a0a]/5 hover:bg-[#0a0a0a]/10' : 'bg-zinc-900/50 hover:bg-zinc-800/80 border border-white/5'
-                        } transition-all mb-1 group/file`}
-                    >
-                      <div className={`w-11 h-11 rounded-xl flex items-center justify-center ${isMine ? 'bg-[#0a0a0a]/10' : 'bg-primary/20'
-                        } group-hover/file:scale-110 transition-transform`}>
-                        <FileText size={22} className={isMine ? 'text-[#0a0a0a]' : 'text-primary'} />
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <p className={`text-[13px] font-bold truncate ${isMine ? 'text-[#0a0a0a]' : 'text-zinc-200'}`}>{m.filename || t('fileLabel')}</p>
-                        <p className={`text-[11px] font-medium ${isMine ? 'text-[#0a0a0a]/50' : 'text-zinc-500'}`}>
-                          {formatSize(m.size) || t('download')}
-                        </p>
-                      </div>
-                      <Download size={18} className={isMine ? 'text-[#0a0a0a]/30' : 'text-zinc-500'} />
-                    </a>
-                  );
-                })}
-
-            {/* Опрос */}
-            {message.type === 'poll' && message.pollOptions && (
-              <div className={`p-1.5 space-y-4 min-w-[260px] max-w-full ${isMine ? 'text-[#0a0a0a]' : 'text-zinc-200'}`}>
-                <div className="space-y-1">
-                  <h4 className="text-[15px] font-bold leading-tight flex items-start gap-2 whitespace-pre-wrap break-words">
-                    <BarChart2 size={18} className="mt-0.5 shrink-0 opacity-60" />
-                    {message.content}
-                  </h4>
-                  <div className="flex items-center justify-between pl-7 pr-2">
-                    <p className="text-[11px] font-medium opacity-50 uppercase tracking-widest">
-                      {message.pollIsMultipleChoice ? t('multipleAnswers') : t('singleAnswer')}
-                    </p>
-                    {message.pollIsAnonymous && (
-                      <span className="text-[10px] font-black uppercase tracking-tighter bg-black/5 px-2 py-0.5 rounded-sm opacity-40">
-                         {t('anonymous')}
-                      </span>
-                    )}
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  {(() => {
-                    const hasVoted = (message.userVotedOptionIds && message.userVotedOptionIds.length > 0) || 
-                                     message.pollOptions?.some(o => o.voterIds?.includes(user?.id || ''));
-                    const totalVotes = message.pollOptions!.reduce((sum, o) => sum + (o.voteCount || 0), 0);
-
-                    return message.pollOptions.map((opt, idx) => {
-                      const isVotedByMe = (message.userVotedOptionIds?.includes(opt.id)) || 
-                                          opt.voterIds?.includes(user?.id || '');
-                      const percent = totalVotes > 0 ? Math.round(((opt.voteCount || 0) / totalVotes) * 100) : 0;
-                      
-                      return (
+                    <div className="min-w-[220px]">
+                      {audioMedia?.filename && (
+                        <div className="flex items-center gap-2 mb-2 min-w-0">
+                          <Volume2 size={14} className={isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-400'} />
+                          <span className={`text-[11px] font-bold truncate ${isMine ? 'text-[#0a0a0a]/80' : 'text-zinc-200'}`}>{audioMedia.filename}</span>
+                        </div>
+                      )}
+                      <div className="flex items-center gap-3">
+                        <audio
+                          ref={audioRef}
+                          src={getMediaUrl(audioMedia?.url)}
+                          preload="auto"
+                        />
                         <button
-                          key={opt.id || idx}
-                          disabled={hasVoted && !message.pollIsMultipleChoice} // If already voted and not multiple choice, disable. 
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            if (hasVoted && !message.pollIsMultipleChoice) return;
+                          onClick={toggleAudio}
+                          className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 ${isMine ? 'bg-[#0a0a0a]/10 hover:bg-[#0a0a0a]/20 text-[#0a0a0a]' : 'bg-primary text-white shadow-lg'} transition-all active:scale-95`}
+                        >
+                          {isPlaying ? (
+                            <Pause size={16} fill="currentColor" />
+                          ) : (
+                            <Play size={16} fill="currentColor" className="ml-0.5" />
+                          )}
+                        </button>
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-[2px] h-6 cursor-pointer"
+                            onClick={(e) => {
+                              const audio = audioRef.current;
+                              if (!audio || !audio.duration) return;
+                              const rect = e.currentTarget.getBoundingClientRect();
+                              const pct = (e.clientX - rect.left) / rect.width;
+                              audio.currentTime = pct * audio.duration;
+                              setAudioProgress(pct * 100);
+                            }}>
+                            {Array.from({ length: 28 }).map((_, i) => {
+                              const barHeight = [40, 65, 35, 80, 50, 90, 45, 70, 55, 85, 30, 75, 60, 95, 40, 80, 50, 70, 35, 90, 55, 65, 45, 85, 60, 75, 50, 40][i] || 50;
+                              const progress = audioProgress / 100;
+                              const barProgress = i / 28;
+                              const isActive = barProgress < progress;
+                              return (
+                                <div
+                                  key={i}
+                                  className={`flex-1 rounded-full transition-all duration-150 ${isActive
+                                    ? isMine ? 'bg-[#0a0a0a]/70' : 'bg-primary'
+                                    : isMine ? 'bg-[#0a0a0a]/10' : 'bg-white/20'
+                                    }`}
+                                  style={{ height: `${barHeight}%` }}
+                                />
+                              );
+                            })}
+                          </div>
+                          <div className="flex justify-between items-center mt-0.5">
+                            <span className={`text-[10px] font-bold tabular-nums ${isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-500'}`}>
+                              {isPlaying
+                                ? formatDuration(audioRef.current?.currentTime || 0)
+                                : (typeof audioMedia?.duration === 'number'
+                                  ? formatDuration(audioMedia.duration)
+                                  : (audioMedia?.duration || formatDuration(audioDuration || 0)))}
+                            </span>
+                            <div className="flex items-center gap-2">
+                              <span className={`text-[10px] font-black uppercase tracking-tighter ${isMine ? 'text-[#0a0a0a]/40' : 'text-zinc-500'}`}>{formatSize(audioMedia?.size)}</span>
+                              <a
+                                href={getMediaUrl(audioMedia?.url)}
+                                download={audioMedia?.filename || 'audio'}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={`flex items-center justify-center p-1 rounded-md transition-all ${isMine ? 'hover:bg-[#0a0a0a]/10 text-[#0a0a0a]/40 hover:text-[#0a0a0a]' : 'hover:bg-white/10 text-zinc-500 hover:text-white'}`}
+                              >
+                                <Download size={12} />
+                              </a>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })()}
 
-                            // Optimistic update for better UX
-                            const currentVoted = message.userVotedOptionIds || [];
-                            if (!currentVoted.includes(opt.id)) {
-                                useChatStore.getState().updateMessage({
+                {/* Файлы */}
+                {hasFile &&
+                  media
+                    .filter((m) => m.type !== 'image' && m.type !== 'voice' && m.type !== 'video' && !isAudioFile(m) && m.type !== 'gif')
+                    .map((m) => {
+                      const formatSize = (bytes?: number | null) => {
+                        if (!bytes) return "";
+                        if (bytes < 1024) return bytes + " B";
+                        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+                        if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+                        return (bytes / (1024 * 1024 * 1024)).toFixed(1) + " GB";
+                      };
+                      return (
+                        <a
+                          key={m.id}
+                          href={getMediaUrl(m.url)}
+                          download={m.filename || 'file'}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={`flex items-center gap-3 p-3 rounded-2xl ${isMine ? 'bg-[#0a0a0a]/5 hover:bg-[#0a0a0a]/10' : 'bg-zinc-900/50 hover:bg-zinc-800/80 border border-white/5'
+                            } transition-all mb-1 group/file`}
+                        >
+                          <div className={`w-11 h-11 rounded-xl flex items-center justify-center ${isMine ? 'bg-[#0a0a0a]/10' : 'bg-primary/20'
+                            } group-hover/file:scale-110 transition-transform`}>
+                            <FileText size={22} className={isMine ? 'text-[#0a0a0a]' : 'text-primary'} />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <p className={`text-[13px] font-bold truncate ${isMine ? 'text-[#0a0a0a]' : 'text-zinc-200'}`}>{m.filename || t('fileLabel')}</p>
+                            <p className={`text-[11px] font-medium ${isMine ? 'text-[#0a0a0a]/50' : 'text-zinc-500'}`}>
+                              {formatSize(m.size) || t('download')}
+                            </p>
+                          </div>
+                          <Download size={18} className={isMine ? 'text-[#0a0a0a]/30' : 'text-zinc-500'} />
+                        </a>
+                      );
+                    })}
+
+                {/* Опрос */}
+                {message.type === 'poll' && message.pollOptions && (
+                  <div className={`p-1.5 space-y-4 min-w-[260px] max-w-full ${isMine ? 'text-[#0a0a0a]' : 'text-zinc-200'}`}>
+                    <div className="space-y-1">
+                      <h4 className="text-[15px] font-bold leading-tight flex items-start gap-2 whitespace-pre-wrap break-words">
+                        <BarChart2 size={18} className="mt-0.5 shrink-0 opacity-60" />
+                        {message.content}
+                      </h4>
+                      <div className="flex items-center justify-between pl-7 pr-2">
+                        <p className="text-[11px] font-medium opacity-50 uppercase tracking-widest">
+                          {message.pollIsMultipleChoice ? t('multipleAnswers') : t('singleAnswer')}
+                        </p>
+                        {message.pollIsAnonymous && (
+                          <span className="text-[10px] font-black uppercase tracking-tighter bg-black/5 px-2 py-0.5 rounded-sm opacity-40">
+                            {t('anonymous')}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      {(() => {
+                        const hasVoted = (message.userVotedOptionIds && message.userVotedOptionIds.length > 0) ||
+                          message.pollOptions?.some(o => o.voterIds?.includes(user?.id || ''));
+                        const totalVotes = message.pollOptions!.reduce((sum, o) => sum + (o.voteCount || 0), 0);
+
+                        return message.pollOptions.map((opt, idx) => {
+                          const isVotedByMe = (message.userVotedOptionIds?.includes(opt.id)) ||
+                            opt.voterIds?.includes(user?.id || '');
+                          const percent = totalVotes > 0 ? Math.round(((opt.voteCount || 0) / totalVotes) * 100) : 0;
+
+                          return (
+                            <button
+                              key={opt.id || idx}
+                              disabled={hasVoted && !message.pollIsMultipleChoice} // If already voted and not multiple choice, disable. 
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                if (hasVoted && !message.pollIsMultipleChoice) return;
+
+                                // Optimistic update for better UX
+                                const currentVoted = message.userVotedOptionIds || [];
+                                if (!currentVoted.includes(opt.id)) {
+                                  useChatStore.getState().updateMessage({
                                     ...message,
                                     userVotedOptionIds: message.pollIsMultipleChoice ? [...currentVoted, opt.id] : [opt.id]
-                                });
-                            }
+                                  });
+                                }
 
-                            const socket = getSocket();
-                            if (socket) {
-                              socket.emit('vote_poll', {
-                                messageId: message.id,
-                                chatId: message.chatId,
-                                optionId: opt.id
-                              });
-                            }
-                          }}
-                          className={`w-full group/opt relative rounded-2xl border transition-all duration-300 text-left p-3 flex flex-col gap-1.5
-                            ${isMine 
-                              ? 'bg-[#0a0a0a]/5 border-[#0a0a0a]/10 hover:bg-[#0a0a0a]/10 active:scale-[0.98] hover:z-20' 
-                              : 'bg-white/5 border-white/5 hover:bg-white/10 active:scale-[0.98] hover:z-20'}`}
-                        >
-                          <div className="flex items-center justify-between relative z-10">
-                            <div className="flex items-center gap-2 truncate flex-1">
-                               {isVotedByMe && <Check size={14} className={isMine ? 'text-[#0a0a0a]' : 'text-primary'} />}
-                               <span className="text-[14px] font-semibold truncate">{opt.text}</span>
-                            </div>
-                            {hasVoted && (
-                               <span className="text-[13px] font-black tabular-nums opacity-80">{percent}%</span>
-                            )}
-                          </div>
-                          
-                          {hasVoted && (
-                             <>
-                                <div className="relative h-1.5 w-full bg-white/5 rounded-full overflow-hidden z-10">
-                                  <motion.div 
-                                    initial={false}
-                                    animate={{ width: `${percent}%` }}
-                                    transition={{ duration: 0.8, ease: "easeOut" }}
-                                    className={`absolute inset-0 rounded-full ${isMine ? 'bg-[#0a0a0a]/40' : 'bg-primary'}`}
-                                  />
+                                const socket = getSocket();
+                                if (socket) {
+                                  socket.emit('vote_poll', {
+                                    messageId: message.id,
+                                    chatId: message.chatId,
+                                    optionId: opt.id
+                                  });
+                                }
+                              }}
+                              className={`w-full group/opt relative rounded-2xl border transition-all duration-300 text-left p-3 flex flex-col gap-1.5
+                            ${isMine
+                                  ? 'bg-[#0a0a0a]/5 border-[#0a0a0a]/10 hover:bg-[#0a0a0a]/10 active:scale-[0.98] hover:z-20'
+                                  : 'bg-white/5 border-white/5 hover:bg-white/10 active:scale-[0.98] hover:z-20'}`}
+                            >
+                              <div className="flex items-center justify-between relative z-10">
+                                <div className="flex items-center gap-2 truncate flex-1">
+                                  {isVotedByMe && <Check size={14} className={isMine ? 'text-[#0a0a0a]' : 'text-primary'} />}
+                                  <span className="text-[14px] font-semibold truncate">{opt.text}</span>
                                 </div>
-                                
-                                <div className="flex items-center justify-between relative z-10 font-bold uppercase tracking-widest text-[10px]">
-                                   <span className="opacity-40">{opt.voteCount || 0} {t('votes')}</span>
-                                   {opt.voters && opt.voters.length > 0 && (
-                                     <div className="relative group/voters flex -space-x-1.5 hover:space-x-0.5 transition-all duration-300">
-                                       {opt.voters.slice(0, 5).map((voter) => (
-                                         <Avatar 
-                                           key={voter.id}
-                                           src={voter.avatar}
-                                           name={voter.displayName}
-                                           size="xs"
-                                           className="ring-1 ring-white/20 shadow-lg"
-                                         />
-                                       ))}
-                                       {opt.voters.length > 5 && (
+                                {hasVoted && (
+                                  <span className="text-[13px] font-black tabular-nums opacity-80">{percent}%</span>
+                                )}
+                              </div>
+
+                              {hasVoted && (
+                                <>
+                                  <div className="relative h-1.5 w-full bg-white/5 rounded-full overflow-hidden z-10">
+                                    <motion.div
+                                      initial={false}
+                                      animate={{ width: `${percent}%` }}
+                                      transition={{ duration: 0.8, ease: "easeOut" }}
+                                      className={`absolute inset-0 rounded-full ${isMine ? 'bg-[#0a0a0a]/40' : 'bg-primary'}`}
+                                    />
+                                  </div>
+
+                                  <div className="flex items-center justify-between relative z-10 font-bold uppercase tracking-widest text-[10px]">
+                                    <span className="opacity-40">{opt.voteCount || 0} {t('votes')}</span>
+                                    {opt.voters && opt.voters.length > 0 && (
+                                      <div className="relative group/voters flex -space-x-1.5 hover:space-x-0.5 transition-all duration-300">
+                                        {opt.voters.slice(0, 5).map((voter) => (
+                                          <Avatar
+                                            key={voter.id}
+                                            src={voter.avatar}
+                                            name={voter.displayName}
+                                            size="xs"
+                                            className="ring-1 ring-white/20 shadow-lg"
+                                          />
+                                        ))}
+                                        {opt.voters.length > 5 && (
                                           <div className="w-4 h-4 rounded-lg bg-white/10 flex items-center justify-center text-[7px] font-black tabular-nums ring-1 ring-white/20 text-white/50">
                                             +{opt.voters.length - 5}
                                           </div>
-                                       )}
-        
-                                       {/* Подробный список при наведении */}
-                                       <div className="absolute bottom-full right-0 mb-3 opacity-0 group-hover/voters:opacity-100 transition-all duration-300 pointer-events-none scale-95 group-hover/voters:scale-100 origin-bottom-right z-50">
-                                         <div className="bg-[#1b1b1b] shadow-2xl rounded-2xl p-2 border border-white/10 min-w-[160px] backdrop-blur-xl">
-                                           <div className="space-y-1">
+                                        )}
+
+                                        {/* Подробный список при наведении */}
+                                        <div className="absolute bottom-full right-0 mb-3 opacity-0 group-hover/voters:opacity-100 transition-all duration-300 pointer-events-none scale-95 group-hover/voters:scale-100 origin-bottom-right z-50">
+                                          <div className="bg-[#1b1b1b] shadow-2xl rounded-2xl p-2 border border-white/10 min-w-[160px] backdrop-blur-xl">
+                                            <div className="space-y-1">
                                               {opt.voters.map(v => (
-                                                 <div key={v.id} className="flex items-center gap-2.5 p-1.5 hover:bg-white/10 rounded-xl transition-colors">
-                                                    <Avatar src={v.avatar} name={v.displayName} size="xs" />
-                                                    <span className="text-[11px] font-bold text-white/90 truncate">{v.displayName}</span>
-                                                 </div>
+                                                <div key={v.id} className="flex items-center gap-2.5 p-1.5 hover:bg-white/10 rounded-xl transition-colors">
+                                                  <Avatar src={v.avatar} name={v.displayName} size="xs" />
+                                                  <span className="text-[11px] font-bold text-white/90 truncate">{v.displayName}</span>
+                                                </div>
                                               ))}
-                                           </div>
-                                         </div>
-                                       </div>
-                                     </div>
-                                   )}
-                                </div>
-                             </>
-                          )}
-                        </button>
-                      );
-                    });
-                  })()}
-                </div>
-                {(() => {
-                    const hasVoted = (message.userVotedOptionIds && message.userVotedOptionIds.length > 0) || 
-                                     message.pollOptions?.some(o => o.voterIds?.includes(user?.id || ''));
-                    const totalVotes = message.pollOptions!.reduce((sum, o) => sum + (o.voteCount || 0), 0);
-                    if (hasVoted) {
-                        return <div className="text-[10px] font-black opacity-30 mt-2 px-2">ВСЕГО ПРОГОЛОСОВАЛО: {totalVotes}</div>
-                    }
-                    return null;
-                })()}
-              </div>
-            )}
-
-            {/* Текст */}
-            {message.content && message.type !== 'poll' && (() => {
-              const onlyEmojiRegex = /^[\p{Extended_Pictographic}\s]+$/u;
-              const isOnlyEmojis = onlyEmojiRegex.test(message.content) && message.content.length <= 15;
-              return (
-              <div className="flex items-end gap-2 text-sm w-full">
-                <div className="flex-1 min-w-0 w-full">
-                  <p className={`whitespace-pre-wrap break-words leading-relaxed w-full ${isOnlyEmojis ? 'text-5xl my-1' : ''} ${isMine ? 'text-[#0a0a0a] font-normal' : 'text-zinc-200'}`}>
-                    {renderFormattedText(message.content)}
-                  </p>
-                  {firstUrl && !hasImage && !hasVideo && !hasFile && (
-                    <div className="w-full mt-1 mb-1 relative overflow-hidden">
-                      <LinkPreview url={firstUrl} />
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    )}
+                                  </div>
+                                </>
+                              )}
+                            </button>
+                          );
+                        });
+                      })()}
                     </div>
-                  )}
-                </div>
-                <span className={`text-[10px] font-bold flex-shrink-0 flex items-center gap-0.5 self-end float-right leading-none ${isOnlyEmojis ? '-mb-1' : 'mb-0.5'} ${isMine ? 'text-[#0a0a0a]/50' : 'text-on-surface-variant/40'}`}>
-                  {message.isEdited && <span className="mr-0.5">{t('edited')}</span>}
-                  {message.scheduledAt && <span className="material-symbols-outlined text-[12px] text-amber-400 mr-0.5">schedule</span>}
-                  {isPinned && <Pin size={10} className={`rotate-45 ${isMine ? 'text-[#0a0a0a]/60 fill-[#0a0a0a]/20' : 'text-primary fill-primary/20'} mr-0.5`} />}
-                  {timeStr}
-                  {isMine && !message.scheduledAt && (
-                    <span className={`material-symbols-outlined text-[14px] ${isRead ? 'text-[#0a0a0a]/80 fill-1' : 'text-[#0a0a0a]/40'}`} style={{ fontVariationSettings: `'FILL' ${isRead ? 1 : 0}` }}>
-                      {isRead ? 'done_all' : 'done'}
-                    </span>
-                  )}
-                </span>
+                    {(() => {
+                      const hasVoted = (message.userVotedOptionIds && message.userVotedOptionIds.length > 0) ||
+                        message.pollOptions?.some(o => o.voterIds?.includes(user?.id || ''));
+                      const totalVotes = message.pollOptions!.reduce((sum, o) => sum + (o.voteCount || 0), 0);
+                      if (hasVoted) {
+                        return <div className="text-[10px] font-black opacity-30 mt-2 px-2">ВСЕГО ПРОГОЛОСОВАЛО: {totalVotes}</div>
+                      }
+                      return null;
+                    })()}
+                  </div>
+                )}
+
+                {/* Текст */}
+                {message.content && message.type !== 'poll' && (() => {
+                  const onlyEmojiRegex = /^[\p{Extended_Pictographic}\s]+$/u;
+                  const isOnlyEmojis = onlyEmojiRegex.test(message.content) && message.content.length <= 15;
+                  return (
+                    <div className="flex items-end gap-2 text-sm w-full">
+                      <div className="flex-1 min-w-0 w-full">
+                        <p className={`whitespace-pre-wrap break-words leading-relaxed w-full ${isOnlyEmojis ? 'text-5xl my-1' : ''} ${isMine ? 'text-[#0a0a0a] font-normal' : 'text-zinc-200'}`}>
+                          {renderFormattedText(message.content)}
+                        </p>
+                        {firstUrl && !hasImage && !hasVideo && !hasFile && (
+                          <div className="w-full mt-1 mb-1 relative overflow-hidden">
+                            <LinkPreview url={firstUrl} />
+                          </div>
+                        )}
+                      </div>
+                      <span className={`text-[10px] font-bold flex-shrink-0 flex items-center gap-0.5 self-end float-right leading-none ${isOnlyEmojis ? '-mb-1' : 'mb-0.5'} ${isMine ? 'text-[#0a0a0a]/50' : 'text-on-surface-variant/40'}`}>
+                        {message.isEdited && <span className="mr-0.5">{t('edited')}</span>}
+                        {message.scheduledAt && <span className="material-symbols-outlined text-[12px] text-amber-400 mr-0.5">schedule</span>}
+                        {isPinned && <Pin size={10} className={`rotate-45 ${isMine ? 'text-[#0a0a0a]/60 fill-[#0a0a0a]/20' : 'text-primary fill-primary/20'} mr-0.5`} />}
+                        {timeStr}
+                        {isMine && !message.scheduledAt && (
+                          <span className={`material-symbols-outlined text-[14px] ${isRead ? 'text-[#0a0a0a]/80 fill-1' : 'text-[#0a0a0a]/40'}`} style={{ fontVariationSettings: `'FILL' ${isRead ? 1 : 0}` }}>
+                            {isRead ? 'done_all' : 'done'}
+                          </span>
+                        )}
+                      </span>
+                    </div>
+                  );
+                })()}
+
+
               </div>
-              );
-            })()}
-
-
-          </div>
-          );
+            );
           })()}
 
           {Object.keys(reactionGroups).length > 0 && (
@@ -1071,11 +1067,10 @@ function MessageBubble({
                 <button
                   key={emoji}
                   onClick={(e) => { e.stopPropagation(); handleReaction(emoji); }}
-                  className={`flex items-center gap-2 px-2.5 py-1.5 rounded-[10px] transition-all border ${
-                    data.isMine
+                  className={`flex items-center gap-2 px-2.5 py-1.5 rounded-[10px] transition-all border ${data.isMine
                       ? 'bg-primary/20 border-primary text-white shadow-lg'
                       : 'bg-[#201F1F] border-white/5 text-zinc-300 hover:bg-[#2a2a2a]'
-                  } shadow-md group/react`}
+                    } shadow-md group/react`}
                   title={data.users.join(', ')}
                 >
                   <span className="text-[14px] leading-none">{emoji}</span>
@@ -1240,9 +1235,9 @@ function MessageBubble({
       <AnimatePresence>
         {lightboxData && (
           <ImageLightbox
-            images={media.filter(m => m.type === 'image' || m.type === 'video' || isMediaGif?.(m) || m.type === 'gif').map(m => ({ 
-              url: getMediaUrl(m.url), 
-              type: (isMediaGif?.(m) || m.type === 'gif' || (m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4'))) ? 'gif' : m.type 
+            images={media.filter(m => m.type === 'image' || m.type === 'video' || isMediaGif?.(m) || m.type === 'gif').map(m => ({
+              url: getMediaUrl(m.url),
+              type: (isMediaGif?.(m) || m.type === 'gif' || (m.type === 'image' && m.url?.toLowerCase().endsWith('.mp4'))) ? 'gif' : m.type
             }))}
             initialIndex={lightboxData.index}
             onClose={() => setLightboxData(null)}