diff --git a/app/Events/ChatMessageDeleted.php b/app/Events/ChatMessageDeleted.php
index f7ba4b8..c511060 100644
--- a/app/Events/ChatMessageDeleted.php
+++ b/app/Events/ChatMessageDeleted.php
@@ -14,12 +14,15 @@ class ChatMessageDeleted implements ShouldBroadcastNow
 
     public int $messageId;
 
+    public string $deletedAt;
+
     /**
      * Create a new event instance.
      */
-    public function __construct(int $messageId)
+    public function __construct(int $messageId, ?string $deletedAt = null)
     {
         $this->messageId = $messageId;
+        $this->deletedAt = $deletedAt ?? now()->toIso8601String();
     }
 
     /**
@@ -38,4 +41,17 @@ public function broadcastAs(): string
     {
         return 'message.deleted';
     }
+
+    /**
+     * Data to broadcast with the event.
+     *
+     * @return array<string, mixed>
+     */
+    public function broadcastWith(): array
+    {
+        return [
+            'messageId' => $this->messageId,
+            'deleted_at' => $this->deletedAt,
+        ];
+    }
 }
diff --git a/app/Events/ChatMessageReacted.php b/app/Events/ChatMessageReacted.php
new file mode 100644
index 0000000..8f6262e
--- /dev/null
+++ b/app/Events/ChatMessageReacted.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+
+class ChatMessageReacted implements ShouldBroadcastNow
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    public int $messageId;
+
+    public array $reactions;
+
+    /**
+     * Create a new event instance.
+     */
+    public function __construct(int $messageId, array $reactions)
+    {
+        $this->messageId = $messageId;
+        $this->reactions = $reactions;
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return array<int, Channel>
+     */
+    public function broadcastOn(): array
+    {
+        return [
+            new Channel('global-chat'),
+        ];
+    }
+
+    public function broadcastAs(): string
+    {
+        return 'message.reacted';
+    }
+
+    /**
+     * Data to broadcast with the event.
+     *
+     * @return array<string, mixed>
+     */
+    public function broadcastWith(): array
+    {
+        return [
+            'messageId' => $this->messageId,
+            'reactions' => $this->reactions,
+        ];
+    }
+}
diff --git a/app/Events/ChatMessageSent.php b/app/Events/ChatMessageSent.php
index 1d85bd6..de7c362 100644
--- a/app/Events/ChatMessageSent.php
+++ b/app/Events/ChatMessageSent.php
@@ -24,9 +24,12 @@ public function __construct(ChatMessage $chatMessage)
 
         $this->message = [
             'id' => $chatMessage->id,
-            'content' => $chatMessage->content,
+            'content' => $chatMessage->deleted_at ? 'This message was deleted by a moderator.' : $chatMessage->content,
+            'is_deleted' => $chatMessage->deleted_at !== null,
+            'deleted_at' => $chatMessage->deleted_at?->toIso8601String(),
             'reply_to_id' => $chatMessage->reply_to_id,
             'reply_to_content' => $chatMessage->reply_to_content,
+            'reactions' => $chatMessage->getFormattedReactions(null),
             'created_at' => $chatMessage->created_at->toIso8601String(),
             'user' => [
                 'id' => $chatMessage->user->id,
diff --git a/app/Events/ChatSettingsUpdated.php b/app/Events/ChatSettingsUpdated.php
index df3bea4..4f917fb 100644
--- a/app/Events/ChatSettingsUpdated.php
+++ b/app/Events/ChatSettingsUpdated.php
@@ -27,6 +27,7 @@ public function __construct()
             'cooldown_seconds' => (int) AppSetting::get('global_chat_cooldown_seconds', 30),
             'max_messages' => (int) AppSetting::get('global_chat_max_messages', 200),
             'max_length' => (int) AppSetting::get('global_chat_max_length', 280),
+            'allowed_emojis' => (array) AppSetting::get('global_chat_allowed_emojis', ['👍', '❤️', '🔥', '😂', '🎉', '😮', '😢', '👏']),
         ];
     }
 
diff --git a/app/Http/Controllers/Admin/ChatSettingsController.php b/app/Http/Controllers/Admin/ChatSettingsController.php
index 421e1bb..e13663c 100644
--- a/app/Http/Controllers/Admin/ChatSettingsController.php
+++ b/app/Http/Controllers/Admin/ChatSettingsController.php
@@ -2,10 +2,12 @@
 
 namespace App\Http\Controllers\Admin;
 
+use App\Events\ChatSettingsUpdated;
 use App\Http\Controllers\Controller;
 use App\Models\AppSetting;
 use App\Models\ChatMessage;
 use App\Models\ChatReport;
+use App\Models\User;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 
@@ -15,6 +17,7 @@ public function edit()
     {
         $bannedWords = AppSetting::get('global_chat_banned_words', '');
         $bannedWordsText = is_array($bannedWords) ? implode(', ', $bannedWords) : (string) $bannedWords;
+        $allowedEmojis = AppSetting::get('global_chat_allowed_emojis', ['👍', '❤️', '🔥', '😂', '🎉', '😮', '😢', '👏']);
 
         return Inertia::render('admin/ChatSettings', [
             'settings' => [
@@ -26,6 +29,8 @@ public function edit()
                 'max_length' => (int) AppSetting::get('global_chat_max_length', 280),
                 'profanity_filter_enabled' => (bool) AppSetting::get('global_chat_profanity_filter_enabled', true),
                 'banned_words' => $bannedWordsText,
+                'allowed_emojis' => (array) $allowedEmojis,
+                'bot_username' => (string) AppSetting::get('global_chat_bot_username', 'hscstack'),
             ],
             'totalMessages' => ChatMessage::count(),
             'recentMessagesCount' => ChatMessage::where('created_at', '>=', now()->subHours(24))->count(),
@@ -83,6 +88,9 @@ public function update(Request $request)
             'max_length' => ['required', 'integer', 'min:50', 'max:1000'],
             'profanity_filter_enabled' => ['required', 'boolean'],
             'banned_words' => ['nullable', 'string'],
+            'allowed_emojis' => ['nullable', 'array'],
+            'allowed_emojis.*' => ['required', 'string', 'max:32'],
+            'bot_username' => ['nullable', 'string', 'max:50', 'exists:users,username'],
         ]);
 
         $isEnabled = $validated['audience'] !== 'disabled';
@@ -95,12 +103,21 @@ public function update(Request $request)
         AppSetting::set('global_chat_profanity_filter_enabled', $validated['profanity_filter_enabled'], 'boolean');
         AppSetting::set('global_chat_banned_words', $validated['banned_words'] ?? '', 'string');
 
+        $emojis = ! empty($validated['allowed_emojis'])
+            ? array_values(array_unique(array_filter($validated['allowed_emojis'])))
+            : ['👍', '❤️', '🔥', '😂', '🎉', '😮', '😢', '👏'];
+        AppSetting::set('global_chat_allowed_emojis', $emojis, 'json');
+
+        if (isset($validated['bot_username']) && ! empty($validated['bot_username'])) {
+            AppSetting::set('global_chat_bot_username', $validated['bot_username'], 'string');
+        }
+
         // Immediately prune if current count exceeds new limit
         ChatMessage::pruneOldMessages($validated['max_messages']);
 
         // Broadcast settings update to global-chat channel
         try {
-            broadcast(new \App\Events\ChatSettingsUpdated());
+            broadcast(new ChatSettingsUpdated);
         } catch (\Throwable $e) {
             // Log without failing response
         }
@@ -132,4 +149,32 @@ public function deleteReport(ChatReport $report)
 
         return back()->with('success', 'Report deleted successfully.');
     }
+
+    public function updateUserBan(Request $request, User $user)
+    {
+        if ($user->can('view admin')) {
+            return back()->with('error', 'Staff and Admin accounts cannot be banned from chat.');
+        }
+
+        $validated = $request->validate([
+            'chat_banned_until' => ['nullable', 'date'],
+        ]);
+
+        $user->update([
+            'chat_banned_until' => $validated['chat_banned_until'],
+        ]);
+
+        $moderator = $request->user();
+
+        if ($user->isChatBanned()) {
+            $durationText = $user->chat_banned_until->diffForHumans();
+            ChatMessage::sendBotMessage("Moderator @{$moderator->username} banned @{$user->username} from chat until {$user->chat_banned_until->toDayDateTimeString()} ({$durationText}).");
+            $message = "User @{$user->username} has been banned from chat until {$user->chat_banned_until->toDateTimeString()}.";
+        } else {
+            ChatMessage::sendBotMessage("Moderator @{$moderator->username} unbanned @{$user->username} from chat.");
+            $message = "User @{$user->username} has been unbanned from chat.";
+        }
+
+        return back()->with('success', $message);
+    }
 }
diff --git a/app/Http/Controllers/Admin/UserController.php b/app/Http/Controllers/Admin/UserController.php
index d087b0c..c39cab6 100644
--- a/app/Http/Controllers/Admin/UserController.php
+++ b/app/Http/Controllers/Admin/UserController.php
@@ -41,14 +41,20 @@ public function store(StoreUserRequest $request)
         }
 
         $user = User::create($validated);
-        $role = $validated['role'];
-        $user->syncRoles([$role]);
+        $role = $validated['role'] ?? null;
 
-        if ($role === 'editor') {
-            $user->syncPermissions(
-                $validated['permissions'] ?? []
-            );
+        if (! empty($role)) {
+            $user->syncRoles([$role]);
+
+            if ($role === 'editor') {
+                $user->syncPermissions(
+                    $validated['permissions'] ?? []
+                );
+            } else {
+                $user->syncPermissions([]);
+            }
         } else {
+            $user->syncRoles([]);
             $user->syncPermissions([]);
         }
 
@@ -86,16 +92,21 @@ public function update(UpdateUserRequest $request, User $user)
 
         $user->update($validated);
 
-        if (isset($validated['role'])) {
+        if (array_key_exists('role', $validated)) {
             $role = $validated['role'];
 
-            $user->syncRoles([$role]);
+            if (! empty($role)) {
+                $user->syncRoles([$role]);
 
-            if ($role === 'editor') {
-                $user->syncPermissions(
-                    $validated['permissions'] ?? []
-                );
+                if ($role === 'editor') {
+                    $user->syncPermissions(
+                        $validated['permissions'] ?? []
+                    );
+                } else {
+                    $user->syncPermissions([]);
+                }
             } else {
+                $user->syncRoles([]);
                 $user->syncPermissions([]);
             }
         }
diff --git a/app/Http/Controllers/ChatController.php b/app/Http/Controllers/ChatController.php
index cfc14ea..cf50ac3 100644
--- a/app/Http/Controllers/ChatController.php
+++ b/app/Http/Controllers/ChatController.php
@@ -3,9 +3,12 @@
 namespace App\Http\Controllers;
 
 use App\Events\ChatMessageDeleted;
+use App\Events\ChatMessageReacted;
 use App\Events\ChatMessageSent;
 use App\Models\AppSetting;
 use App\Models\ChatMessage;
+use App\Models\ChatReport;
+use App\Models\User;
 use App\Services\ChatProfanityFilter;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\RateLimiter;
@@ -48,7 +51,7 @@ public function index(Request $request)
         }
 
         // Fetch last X messages in chronological order
-        $messages = ChatMessage::with(['user:id,name,username,image_path,institution', 'user.roles:id,name'])
+        $messages = ChatMessage::with(['user:id,name,username,image_path,institution', 'user.roles:id,name', 'reactions.user:id,name,username'])
             ->latest('id')
             ->take($maxMessages)
             ->get()
@@ -56,9 +59,12 @@ public function index(Request $request)
             ->values()
             ->map(fn (ChatMessage $msg) => [
                 'id' => $msg->id,
-                'content' => $msg->content,
+                'content' => $msg->deleted_at ? 'This message was deleted by a moderator.' : $msg->content,
+                'is_deleted' => $msg->deleted_at !== null,
+                'deleted_at' => $msg->deleted_at?->toIso8601String(),
                 'reply_to_id' => $msg->reply_to_id,
                 'reply_to_content' => $msg->reply_to_content,
+                'reactions' => $msg->getFormattedReactions($user?->id),
                 'created_at' => $msg->created_at->toIso8601String(),
                 'user' => [
                     'id' => $msg->user->id,
@@ -71,6 +77,8 @@ public function index(Request $request)
                 ],
             ]);
 
+        $allowedEmojis = (array) AppSetting::get('global_chat_allowed_emojis', ['👍', '❤️', '🔥', '😂', '🎉', '😮', '😢', '👏']);
+
         if (! $request->wantsJson() && ! $request->is('api/*')) {
             return Inertia::render('Chat/Index', [
                 'chatState' => [
@@ -82,6 +90,7 @@ public function index(Request $request)
                     'can_post' => $canPost,
                     'reason' => $reason,
                     'can_delete' => (bool) $user?->can('manage chat'),
+                    'reaction_emojis' => $allowedEmojis,
                     'messages' => $messages,
                     'pusher_key' => config('broadcasting.connections.pusher.key'),
                     'pusher_cluster' => config('broadcasting.connections.pusher.options.cluster', 'ap2'),
@@ -98,6 +107,7 @@ public function index(Request $request)
             'can_post' => $canPost,
             'reason' => $reason,
             'can_delete' => (bool) $user?->can('manage chat'),
+            'reaction_emojis' => $allowedEmojis,
             'messages' => $messages,
             'pusher_key' => config('broadcasting.connections.pusher.key'),
             'pusher_cluster' => config('broadcasting.connections.pusher.options.cluster', 'ap2'),
@@ -179,7 +189,9 @@ public function store(Request $request)
         if ($replyToId) {
             $parentMessage = ChatMessage::find($replyToId);
             if ($parentMessage) {
-                $replyToContent = Str::limit($parentMessage->content, 97, '...');
+                $replyToContent = $parentMessage->deleted_at
+                    ? 'This message was deleted by a moderator.'
+                    : Str::limit($parentMessage->content, 97, '...');
             } else {
                 $replyToId = null;
             }
@@ -211,9 +223,12 @@ public function store(Request $request)
 
         return response()->json([
             'id' => $message->id,
-            'content' => $message->content,
+            'content' => $message->deleted_at ? 'This message was deleted by a moderator.' : $message->content,
+            'is_deleted' => $message->deleted_at !== null,
+            'deleted_at' => $message->deleted_at?->toIso8601String(),
             'reply_to_id' => $message->reply_to_id,
             'reply_to_content' => $message->reply_to_content,
+            'reactions' => [],
             'created_at' => $message->created_at->toIso8601String(),
             'user' => [
                 'id' => $message->user->id,
@@ -237,16 +252,19 @@ public function destroy(Request $request, ChatMessage $message)
             abort(403, 'Unauthorized');
         }
 
-        $messageId = $message->id;
-        $message->delete();
+        $deletedAt = now();
+        $message->update(['deleted_at' => $deletedAt]);
 
         try {
-            broadcast(new ChatMessageDeleted($messageId))->toOthers();
+            broadcast(new ChatMessageDeleted($message->id, $deletedAt->toIso8601String()))->toOthers();
         } catch (\Throwable $e) {
             // Ignore
         }
 
-        return response()->json(['success' => true]);
+        return response()->json([
+            'success' => true,
+            'deleted_at' => $deletedAt->toIso8601String(),
+        ]);
     }
 
     public function report(Request $request)
@@ -264,7 +282,7 @@ public function report(Request $request)
         ]);
 
         // Prevent duplicate reporting of the exact same message content by the same user
-        $alreadyReported = \App\Models\ChatReport::where('reporter_id', $user->id)
+        $alreadyReported = ChatReport::where('reporter_id', $user->id)
             ->where('message_content', $validated['message_content'])
             ->where('reported_user_id', $validated['reported_user_id'] ?? null)
             ->exists();
@@ -275,7 +293,7 @@ public function report(Request $request)
             ], 422);
         }
 
-        $report = \App\Models\ChatReport::create([
+        $report = ChatReport::create([
             'reporter_id' => $user->id,
             'reported_user_id' => $validated['reported_user_id'] ?? null,
             'reported_user_name' => $validated['reported_user_name'] ?? null,
@@ -288,16 +306,21 @@ public function report(Request $request)
 
         // Auto-ban logic: If the reported user has 5 or more reports on this message/content, auto-ban for 1 day
         if (! empty($validated['reported_user_id'])) {
-            $reportedUser = \App\Models\User::find($validated['reported_user_id']);
+            $reportedUser = User::find($validated['reported_user_id']);
             if ($reportedUser && ! $reportedUser->can('view admin')) {
-                $totalReportsForMessage = \App\Models\ChatReport::where('reported_user_id', $reportedUser->id)
+                $totalReportsForMessage = ChatReport::where('reported_user_id', $reportedUser->id)
                     ->where('message_content', $validated['message_content'])
                     ->count();
 
                 if ($totalReportsForMessage >= 5) {
+                    $wasAlreadyBanned = $reportedUser->isChatBanned();
                     $reportedUser->update([
                         'chat_banned_until' => now()->addDay(),
                     ]);
+
+                    if (! $wasAlreadyBanned) {
+                        ChatMessage::sendBotMessage("System automatically suspended @{$reportedUser->username} from chat for 24 hours following community reports.");
+                    }
                 }
             }
         }
@@ -307,4 +330,64 @@ public function report(Request $request)
             'report_id' => $report->id,
         ], 201);
     }
+
+    public function toggleReaction(Request $request, ChatMessage $message)
+    {
+        $user = $request->user();
+        abort_unless($user, 401, 'Unauthenticated');
+
+        if ($user->isChatBanned()) {
+            return response()->json([
+                'message' => 'You cannot react to messages while chat banned.',
+            ], 403);
+        }
+
+        if ($message->isDeleted()) {
+            return response()->json([
+                'message' => 'Cannot react to deleted messages.',
+            ], 422);
+        }
+
+        $validated = $request->validate([
+            'emoji' => ['required', 'string', 'max:32'],
+        ]);
+
+        $emoji = $validated['emoji'];
+
+        // Allowed reaction emojis from settings
+        $allowedEmojis = (array) AppSetting::get('global_chat_allowed_emojis', ['👍', '❤️', '🔥', '😂', '🎉', '😮', '😢', '👏']);
+        if (! in_array($emoji, $allowedEmojis, true)) {
+            return response()->json([
+                'message' => 'This reaction emoji is not enabled.',
+            ], 422);
+        }
+
+        $existing = $message->reactions()
+            ->where('user_id', $user->id)
+            ->where('emoji', $emoji)
+            ->first();
+
+        if ($existing) {
+            $existing->delete();
+        } else {
+            $message->reactions()->create([
+                'user_id' => $user->id,
+                'emoji' => $emoji,
+            ]);
+        }
+
+        $formattedReactions = $message->getFormattedReactions($user->id);
+        $publicReactions = $message->getFormattedReactions(null);
+
+        try {
+            broadcast(new ChatMessageReacted($message->id, $publicReactions))->toOthers();
+        } catch (\Throwable $e) {
+            // Ignore
+        }
+
+        return response()->json([
+            'success' => true,
+            'reactions' => $formattedReactions,
+        ]);
+    }
 }
diff --git a/app/Http/Requests/User/StoreUserRequest.php b/app/Http/Requests/User/StoreUserRequest.php
index 00cd66a..6c40ad0 100644
--- a/app/Http/Requests/User/StoreUserRequest.php
+++ b/app/Http/Requests/User/StoreUserRequest.php
@@ -26,8 +26,8 @@ public function rules(): array
 
             'name' => ['required', 'string', 'max:255'],
             'email' => ['required', 'email', 'unique:users,email'],
-            'role' => ['required', 'string', 'exists:roles,name'],
-            'permissions' => ['required', 'array'],
+            'role' => ['nullable', 'string'],
+            'permissions' => ['nullable', 'array'],
             'permissions.*' => ['string', 'exists:permissions,name'],
             'file' => ['nullable', 'image', 'max:2048'],
             'about' => ['nullable', 'string'],
diff --git a/app/Http/Requests/User/UpdateUserRequest.php b/app/Http/Requests/User/UpdateUserRequest.php
index 71ff13d..2c6a2ab 100644
--- a/app/Http/Requests/User/UpdateUserRequest.php
+++ b/app/Http/Requests/User/UpdateUserRequest.php
@@ -34,8 +34,8 @@ public function rules(): array
             'facebook' => ['sometimes', 'nullable', 'string', 'max:255'],
             'instagram' => ['sometimes', 'nullable', 'string', 'max:255'],
             'github' => ['sometimes', 'nullable', 'string', 'max:255'],
-            'role' => ['sometimes', 'string'],
-            'permissions' => ['sometimes', 'array'],
+            'role' => ['sometimes', 'nullable', 'string'],
+            'permissions' => ['sometimes', 'nullable', 'array'],
             'permissions.*' => ['string', 'exists:permissions,name'],
             'chat_banned_until' => ['sometimes', 'nullable', 'date'],
         ];
diff --git a/app/Models/ChatMessage.php b/app/Models/ChatMessage.php
index 9f87c1d..5858cb6 100644
--- a/app/Models/ChatMessage.php
+++ b/app/Models/ChatMessage.php
@@ -2,8 +2,10 @@
 
 namespace App\Models;
 
+use App\Events\ChatMessageSent;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 
 class ChatMessage extends Model
 {
@@ -12,6 +14,11 @@ class ChatMessage extends Model
         'content',
         'reply_to_id',
         'reply_to_content',
+        'deleted_at',
+    ];
+
+    protected $casts = [
+        'deleted_at' => 'datetime',
     ];
 
     public function user(): BelongsTo
@@ -19,6 +26,39 @@ public function user(): BelongsTo
         return $this->belongsTo(User::class);
     }
 
+    public function reactions(): HasMany
+    {
+        return $this->hasMany(ChatMessageReaction::class);
+    }
+
+    public function isDeleted(): bool
+    {
+        return $this->deleted_at !== null;
+    }
+
+    /**
+     * Format reactions as an aggregated array.
+     */
+    public function getFormattedReactions(?int $currentUserId = null): array
+    {
+        $reactions = $this->relationLoaded('reactions')
+            ? $this->reactions
+            : $this->reactions()->with('user:id,name,username')->get();
+
+        return $reactions
+            ->groupBy('emoji')
+            ->map(function ($group, $emoji) use ($currentUserId) {
+                return [
+                    'emoji' => $emoji,
+                    'count' => $group->count(),
+                    'reacted' => $currentUserId ? $group->contains('user_id', $currentUserId) : false,
+                    'users' => $group->map(fn ($r) => $r->user?->username ?? $r->user?->name)->filter()->values()->toArray(),
+                ];
+            })
+            ->values()
+            ->toArray();
+    }
+
     /**
      * Keep only the latest N messages in the database.
      */
@@ -29,4 +69,31 @@ public static function pruneOldMessages(int $keepCount = 200): void
             static::where('id', '<=', $cutoffId)->delete();
         }
     }
+
+    /**
+     * Post an automated announcement message from the configured system bot.
+     */
+    public static function sendBotMessage(string $content): ?self
+    {
+        $bot = User::getSystemBot();
+        if (! $bot) {
+            return null;
+        }
+
+        $message = static::create([
+            'user_id' => $bot->id,
+            'content' => $content,
+        ]);
+
+        $maxMessages = (int) AppSetting::get('global_chat_max_messages', 200);
+        static::pruneOldMessages($maxMessages);
+
+        try {
+            broadcast(new ChatMessageSent($message));
+        } catch (\Throwable $e) {
+            // Ignore broadcast failures in testing or if pusher is offline
+        }
+
+        return $message;
+    }
 }
diff --git a/app/Models/ChatMessageReaction.php b/app/Models/ChatMessageReaction.php
new file mode 100644
index 0000000..4fa1a89
--- /dev/null
+++ b/app/Models/ChatMessageReaction.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class ChatMessageReaction extends Model
+{
+    protected $fillable = [
+        'chat_message_id',
+        'user_id',
+        'emoji',
+    ];
+
+    public function chatMessage(): BelongsTo
+    {
+        return $this->belongsTo(ChatMessage::class);
+    }
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
index 03f0191..b2b29ac 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -80,6 +80,13 @@ public function isChatBanned(): bool
         return $this->chat_banned_until !== null && $this->chat_banned_until->isFuture();
     }
 
+    public static function getSystemBot(): ?self
+    {
+        $botUsername = AppSetting::get('global_chat_bot_username');
+
+        return $botUsername ? static::where('username', $botUsername)->first() : null;
+    }
+
     public function getImageUrlAttribute()
     {
         if (! $this->image_path) {
diff --git a/database/migrations/2026_08_28_111000_add_deleted_at_to_chat_messages_table.php b/database/migrations/2026_08_28_111000_add_deleted_at_to_chat_messages_table.php
new file mode 100644
index 0000000..ccb7438
--- /dev/null
+++ b/database/migrations/2026_08_28_111000_add_deleted_at_to_chat_messages_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('chat_messages', function (Blueprint $table) {
+            $table->timestamp('deleted_at')->nullable()->after('reply_to_content');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('chat_messages', function (Blueprint $table) {
+            $table->dropColumn('deleted_at');
+        });
+    }
+};
diff --git a/database/migrations/2026_08_28_111600_create_chat_message_reactions_table.php b/database/migrations/2026_08_28_111600_create_chat_message_reactions_table.php
new file mode 100644
index 0000000..52e38cb
--- /dev/null
+++ b/database/migrations/2026_08_28_111600_create_chat_message_reactions_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('chat_message_reactions', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('chat_message_id')->constrained('chat_messages')->cascadeOnDelete();
+            $table->foreignId('user_id')->constrained('users')->cascadeOnDelete();
+            $table->string('emoji', 32);
+            $table->timestamps();
+
+            $table->unique(['chat_message_id', 'user_id', 'emoji'], 'chat_reaction_unique');
+            $table->index(['chat_message_id', 'emoji'], 'chat_reaction_index');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('chat_message_reactions');
+    }
+};
diff --git a/resources/js/components/ChatBanModal.vue b/resources/js/components/ChatBanModal.vue
new file mode 100644
index 0000000..7f296d6
--- /dev/null
+++ b/resources/js/components/ChatBanModal.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3';
+import { Ban, Clock, Loader2, X } from 'lucide-vue-next';
+import { ref, watch } from 'vue';
+
+export interface ChatBanUser {
+    id: number;
+    name: string;
+    username?: string | null;
+    chat_banned_until?: string | null;
+    is_chat_banned?: boolean;
+}
+
+const props = defineProps<{
+    isOpen: boolean;
+    user: ChatBanUser | null;
+}>();
+
+const emit = defineEmits<{
+    (e: 'close'): void;
+}>();
+
+const banUntilInput = ref('');
+const isSubmittingBan = ref(false);
+
+const banPresets = [
+    { label: '1 Hour', hours: 1 },
+    { label: '24 Hours', hours: 24 },
+    { label: '3 Days', hours: 72 },
+    { label: '7 Days', hours: 168 },
+    { label: '30 Days', hours: 720 },
+];
+
+const formatForDatetimeLocal = (dateString?: string | null) => {
+    if (!dateString) {
+        return '';
+    }
+
+    const d = new Date(dateString);
+
+    if (isNaN(d.getTime())) {
+        return '';
+    }
+
+    const offset = d.getTimezoneOffset() * 60000;
+    const localISOTime = new Date(d.getTime() - offset)
+        .toISOString()
+        .slice(0, 16);
+
+    return localISOTime;
+};
+
+const formatDate = (isoString?: string | null) => {
+    if (!isoString) {
+        return '';
+    }
+
+    try {
+        const d = new Date(isoString);
+
+        return d.toLocaleString([], {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    } catch {
+        return '';
+    }
+};
+
+const applyBanPreset = (hours: number) => {
+    const futureDate = new Date(Date.now() + hours * 60 * 60 * 1000);
+    banUntilInput.value = formatForDatetimeLocal(futureDate.toISOString());
+};
+
+const clearBanInput = () => {
+    banUntilInput.value = '';
+};
+
+watch(
+    () => props.isOpen,
+    (open) => {
+        if (open && props.user) {
+            banUntilInput.value = formatForDatetimeLocal(
+                props.user.chat_banned_until,
+            );
+        } else {
+            banUntilInput.value = '';
+        }
+    },
+    { immediate: true },
+);
+
+const handleClose = () => {
+    emit('close');
+};
+
+const submitBan = () => {
+    if (!props.user || isSubmittingBan.value) {
+        return;
+    }
+
+    isSubmittingBan.value = true;
+    router.post(
+        `/admin/chat/users/${props.user.id}/ban`,
+        {
+            chat_banned_until: banUntilInput.value
+                ? new Date(banUntilInput.value).toISOString()
+                : null,
+        },
+        {
+            preserveScroll: true,
+            onFinish: () => {
+                isSubmittingBan.value = false;
+                emit('close');
+            },
+        },
+    );
+};
+</script>
+
+<template>
+    <Teleport to="body">
+        <Transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+        >
+            <div
+                v-if="isOpen && user"
+                class="fixed inset-0 z-50 flex items-center justify-center p-4"
+            >
+                <div
+                    class="fixed inset-0 bg-slate-950/40 backdrop-blur-xs dark:bg-black/60"
+                    @click="handleClose"
+                />
+
+                <div
+                    class="relative w-full max-w-md overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 shadow-xl dark:border-gray-800 dark:bg-gray-900"
+                >
+                    <!-- Close button -->
+                    <button
+                        type="button"
+                        @click="handleClose"
+                        class="absolute top-4 right-4 cursor-pointer rounded-xl p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                    >
+                        <X class="h-4 w-4" />
+                    </button>
+
+                    <div class="flex items-center gap-3">
+                        <div
+                            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
+                        >
+                            <Ban class="h-5 w-5" />
+                        </div>
+                        <div>
+                            <h3
+                                class="text-base font-bold text-slate-900 dark:text-gray-100"
+                            >
+                                Chat Moderation
+                            </h3>
+                            <p
+                                class="text-xs text-slate-500 dark:text-gray-400"
+                            >
+                                Manage chat ban timer for
+                                <strong
+                                    class="text-slate-700 dark:text-gray-300"
+                                    >{{ user.name }}</strong
+                                >
+                                <span v-if="user.username">
+                                    (@{{ user.username }})</span
+                                >
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Current status banner (when ban status is available) -->
+                    <div
+                        v-if="user.chat_banned_until || user.is_chat_banned"
+                        class="mt-4 rounded-xl border border-rose-200 bg-rose-50/70 p-3 text-xs text-rose-800 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-300"
+                    >
+                        <div class="flex items-center gap-2">
+                            <Clock class="h-3.5 w-3.5 shrink-0" />
+                            <div>
+                                <span class="font-bold">Current status: </span>
+                                <span>
+                                    Banned until
+                                    {{ formatDate(user.chat_banned_until) }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <form @submit.prevent="submitBan" class="mt-4 space-y-4">
+                        <!-- Quick Presets -->
+                        <div>
+                            <label
+                                class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                            >
+                                Quick Presets
+                            </label>
+                            <div class="mt-2 flex flex-wrap gap-1.5">
+                                <button
+                                    v-for="preset in banPresets"
+                                    :key="preset.label"
+                                    type="button"
+                                    @click="applyBanPreset(preset.hours)"
+                                    class="cursor-pointer rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-700 transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
+                                >
+                                    +{{ preset.label }}
+                                </button>
+                                <button
+                                    type="button"
+                                    @click="clearBanInput"
+                                    class="cursor-pointer rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+                                >
+                                    Clear / Unban
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Custom Date & Time Picker -->
+                        <div class="space-y-1.5">
+                            <label
+                                for="reusable_modal_chat_banned_until"
+                                class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                            >
+                                Ban Until (Date & Time)
+                            </label>
+                            <input
+                                id="reusable_modal_chat_banned_until"
+                                type="datetime-local"
+                                v-model="banUntilInput"
+                                class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs text-slate-800 shadow-2xs focus:border-rose-500 focus:ring-1 focus:ring-rose-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
+                            />
+                            <p
+                                class="text-[11px] text-slate-400 dark:text-gray-500"
+                            >
+                                Leave blank to unban or lift restrictions.
+                            </p>
+                        </div>
+
+                        <div class="flex items-center justify-end gap-2 pt-2">
+                            <button
+                                type="button"
+                                @click="handleClose"
+                                class="cursor-pointer rounded-xl border border-slate-200 px-3.5 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                type="submit"
+                                :disabled="isSubmittingBan"
+                                class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl px-4 py-2 text-xs font-bold text-white transition disabled:opacity-50"
+                                :class="
+                                    !banUntilInput
+                                        ? 'bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600'
+                                        : 'bg-rose-600 hover:bg-rose-700 dark:bg-rose-500 dark:hover:bg-rose-600'
+                                "
+                            >
+                                <Loader2
+                                    v-if="isSubmittingBan"
+                                    class="h-3.5 w-3.5 animate-spin"
+                                />
+                                <Ban
+                                    v-else-if="banUntilInput"
+                                    class="h-3.5 w-3.5"
+                                />
+                                <span>
+                                    {{
+                                        !banUntilInput
+                                            ? 'Unban User'
+                                            : 'Apply Ban Timer'
+                                    }}
+                                </span>
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
diff --git a/resources/js/components/admin/UserRow.vue b/resources/js/components/admin/UserRow.vue
index 8ac1d8c..114087d 100644
--- a/resources/js/components/admin/UserRow.vue
+++ b/resources/js/components/admin/UserRow.vue
@@ -5,7 +5,7 @@ import { usePermissions } from '@/lib/usePermissions';
 
 const { can } = usePermissions();
 
-const props = defineProps({
+defineProps({
     user: Object,
 });
 
@@ -13,7 +13,10 @@ const page = usePage();
 const userId = page.props.auth.user.id;
 
 const isChatBanned = (user: any) => {
-    if (!user?.chat_banned_until) return false;
+    if (!user?.chat_banned_until) {
+        return false;
+    }
+
     return new Date(user.chat_banned_until).getTime() > Date.now();
 };
 
@@ -84,7 +87,7 @@ const deleteUser = (id: number) => {
                         class="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold uppercase ring-1 ring-inset"
                         :class="getRoleBadgeStyles(user.roles?.[0]?.name)"
                     >
-                        {{ user.roles?.[0]?.name ?? 'no role' }}
+                        {{ user.roles?.[0]?.name ?? 'student' }}
                     </span>
 
                     <span
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index c7605ef..6abd825 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -29,7 +29,7 @@ import ToastNotification from '@/components/ToastNotification.vue';
             <main class="min-h-[calc(100vh-4rem)] flex-1">
                 <slot />
             </main>
-            <Footer />
+            <Footer v-if="$page.component !== 'Chat/Index'" />
         </div>
         <FloatingShareBar />
         <ToastNotification />
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 8ebdedb..e639636 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -7,17 +7,21 @@ import {
     Loader2,
     LogIn,
     ArrowDown,
-    ShieldAlert,
-    Pencil,
+    Ban,
     Flag,
     Check,
     X,
     Reply,
+    Smile,
     Info,
     ShieldCheck,
     AlertCircle,
+    MoreHorizontal,
+    Radio,
 } from 'lucide-vue-next';
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+import ChatBanModal from '@/components/ChatBanModal.vue';
+import type { ChatBanUser } from '@/components/ChatBanModal.vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
 import { getEcho } from '@/lib/echo';
 import { usePermissions } from '@/lib/usePermissions';
@@ -32,15 +36,31 @@ interface ChatUser {
     roles: string[];
 }
 
+export interface ChatMessageReactionItem {
+    emoji: string;
+    count: number;
+    reacted: boolean;
+    users?: string[];
+}
+
 interface ChatMessageItem {
     id: number;
     content: string;
+    is_deleted?: boolean;
+    deleted_at?: string | null;
     reply_to_id?: number | null;
     reply_to_content?: string | null;
+    reactions?: ChatMessageReactionItem[];
     created_at: string;
     user: ChatUser;
 }
 
+interface MessageSegment {
+    type: 'text' | 'mention';
+    text: string;
+    username?: string;
+}
+
 const props = defineProps<{
     chatState: {
         enabled: boolean;
@@ -51,6 +71,7 @@ const props = defineProps<{
         can_post: boolean;
         reason: string | null;
         can_delete: boolean;
+        reaction_emojis?: string[];
         messages: ChatMessageItem[];
         pusher_key?: string;
         pusher_cluster?: string;
@@ -71,16 +92,75 @@ const restrictionReason = ref(props.chatState.reason);
 const canDelete = ref(props.chatState.can_delete);
 const activeCooldownSeconds = ref(props.chatState.cooldown_seconds ?? 30);
 
+watch(
+    () => props.chatState,
+    (newState) => {
+        if (newState) {
+            if (newState.messages && Array.isArray(newState.messages)) {
+                messages.value = [...newState.messages];
+            }
+
+            if (typeof newState.can_post === 'boolean') {
+                canPost.value = newState.can_post;
+            }
+
+            if (typeof newState.can_delete === 'boolean') {
+                canDelete.value = newState.can_delete;
+            }
+
+            if (newState.reason !== undefined) {
+                restrictionReason.value = newState.reason;
+            }
+
+            if (newState.cooldown_seconds !== undefined) {
+                activeCooldownSeconds.value = newState.cooldown_seconds;
+            }
+
+            if (newState.max_messages !== undefined) {
+                maxMessagesLimit.value = newState.max_messages;
+            }
+
+            if (newState.max_length !== undefined) {
+                maxLengthLimit.value = newState.max_length;
+            }
+
+            if (
+                newState.reaction_emojis &&
+                newState.reaction_emojis.length > 0
+            ) {
+                reactionEmojis.value = [...newState.reaction_emojis];
+            }
+        }
+    },
+    { deep: true },
+);
+
 const messagesContainerRef = ref<HTMLElement | null>(null);
 const messageInputRef = ref<HTMLInputElement | null>(null);
 const showScrollButton = ref(false);
 const highlightedMessageId = ref<number | null>(null);
 const showRulesModal = ref(false);
 
+// Mobile Action Sheet State
+const mobileActionMessage = ref<ChatMessageItem | null>(null);
+
+const openMobileActions = (msg: ChatMessageItem) => {
+    if (msg.is_deleted || msg.deleted_at) {
+        return;
+    }
+
+    mobileActionMessage.value = msg;
+};
+
+const closeMobileActions = () => {
+    mobileActionMessage.value = null;
+};
+
 // Reply State
 const activeReplyTo = ref<ChatMessageItem | null>(null);
 
 const startReply = (msg: ChatMessageItem) => {
+    closeMobileActions();
     activeReplyTo.value = msg;
     nextTick(() => {
         messageInputRef.value?.focus();
@@ -93,6 +173,7 @@ const cancelReply = () => {
 
 const scrollToMessage = (messageId: number) => {
     const el = document.getElementById(`chat-msg-${messageId}`);
+
     if (el) {
         el.scrollIntoView({ behavior: 'smooth', block: 'center' });
         highlightedMessageId.value = messageId;
@@ -184,38 +265,53 @@ const scrollToBottom = (smooth = true) => {
     });
 };
 
-let lastFetchTimestamp = Date.now();
+let lastFetchTimestamp = 0;
 const fetchLatestMessages = async (force = false) => {
-    // Throttle automatic refreshes to at most once every 15 seconds unless forced
     const now = Date.now();
-    if (!force && now - lastFetchTimestamp < 15000) {
+
+    if (!force && now - lastFetchTimestamp < 3000) {
         return;
     }
+
     lastFetchTimestamp = now;
 
     try {
-        const res = await fetch('/chat', {
+        const res = await fetch('/api/chat/messages', {
             headers: {
                 Accept: 'application/json',
                 'X-Requested-With': 'XMLHttpRequest',
             },
         });
+
         if (res.ok) {
             const data = await res.json();
+
             if (data.messages && Array.isArray(data.messages)) {
                 messages.value = data.messages;
+
                 if (typeof data.can_post === 'boolean') {
                     canPost.value = data.can_post;
                 }
+
                 if (typeof data.can_delete === 'boolean') {
                     canDelete.value = data.can_delete;
                 }
+
                 if (data.reason !== undefined) {
                     restrictionReason.value = data.reason;
                 }
+
                 if (data.cooldown_seconds !== undefined) {
                     activeCooldownSeconds.value = data.cooldown_seconds;
                 }
+
+                if (
+                    data.reaction_emojis &&
+                    Array.isArray(data.reaction_emojis) &&
+                    data.reaction_emojis.length > 0
+                ) {
+                    reactionEmojis.value = data.reaction_emojis;
+                }
             }
         }
     } catch {
@@ -223,6 +319,8 @@ const fetchLatestMessages = async (force = false) => {
     }
 };
 
+let handlePusherReconnect: (() => void) | null = null;
+
 const setupRealtime = () => {
     const echo = getEcho(
         props.chatState.pusher_key,
@@ -236,6 +334,7 @@ const setupRealtime = () => {
     echo.channel('global-chat')
         .stopListening('.message.sent')
         .stopListening('.message.deleted')
+        .stopListening('.message.reacted')
         .stopListening('.settings.updated')
         .listen('.message.sent', (e: { message: ChatMessageItem }) => {
             if (e && e.message) {
@@ -250,13 +349,51 @@ const setupRealtime = () => {
                 }
             }
         })
-        .listen('.message.deleted', (e: { messageId: number }) => {
-            if (e && e.messageId) {
-                messages.value = messages.value.filter(
-                    (m) => m.id !== e.messageId,
-                );
-            }
-        })
+        .listen(
+            '.message.deleted',
+            (e: { messageId: number; deleted_at?: string }) => {
+                if (e && e.messageId) {
+                    const target = messages.value.find(
+                        (m) => m.id === e.messageId,
+                    );
+
+                    if (target) {
+                        target.is_deleted = true;
+                        target.deleted_at =
+                            e.deleted_at || new Date().toISOString();
+                        target.content =
+                            'This message was deleted by a moderator.';
+                    }
+                }
+            },
+        )
+        .listen(
+            '.message.reacted',
+            (e: {
+                messageId: number;
+                reactions: ChatMessageReactionItem[];
+            }) => {
+                if (e && e.messageId) {
+                    const target = messages.value.find(
+                        (m) => m.id === e.messageId,
+                    );
+
+                    if (target) {
+                        const currentReactedMap = new Map(
+                            (target.reactions || []).map((r) => [
+                                r.emoji,
+                                r.reacted,
+                            ]),
+                        );
+
+                        target.reactions = (e.reactions || []).map((r) => ({
+                            ...r,
+                            reacted: currentReactedMap.get(r.emoji) || false,
+                        }));
+                    }
+                }
+            },
+        )
         .listen(
             '.settings.updated',
             (e: {
@@ -266,22 +403,26 @@ const setupRealtime = () => {
                     cooldown_seconds: number;
                     max_messages: number;
                     max_length: number;
+                    allowed_emojis?: string[];
                 };
             }) => {
                 if (e && e.settings) {
+                    if (e.settings.allowed_emojis) {
+                        reactionEmojis.value = e.settings.allowed_emojis;
+                    }
+
                     activeCooldownSeconds.value = e.settings.cooldown_seconds;
                     maxMessagesLimit.value = e.settings.max_messages;
                     maxLengthLimit.value = e.settings.max_length;
 
-                    // Automatically trim messages if max_messages decreased
                     if (messages.value.length > e.settings.max_messages) {
                         messages.value = messages.value.slice(
                             -e.settings.max_messages,
                         );
                     }
 
-                    // Dynamically update permissions
                     const user = currentUser.value;
+
                     if (
                         !e.settings.enabled ||
                         e.settings.audience === 'disabled'
@@ -312,6 +453,28 @@ const setupRealtime = () => {
                 }
             },
         );
+
+    try {
+        const pusher = (
+            echo.connector as {
+                pusher?: {
+                    connection?: {
+                        bind: (event: string, callback: () => void) => void;
+                        unbind: (event: string, callback: () => void) => void;
+                    };
+                };
+            }
+        )?.pusher;
+
+        if (pusher?.connection) {
+            handlePusherReconnect = () => {
+                fetchLatestMessages(true);
+            };
+            pusher.connection.bind('connected', handlePusherReconnect);
+        }
+    } catch {
+        // Silently ignore connector inspection
+    }
 };
 
 const sendMessage = async () => {
@@ -384,6 +547,8 @@ const sendMessage = async () => {
 };
 
 const deleteMessage = async (messageId: number) => {
+    closeMobileActions();
+
     if (!confirm('Are you sure you want to delete this message?')) {
         return;
     }
@@ -402,13 +567,103 @@ const deleteMessage = async (messageId: number) => {
         });
 
         if (res.ok) {
-            messages.value = messages.value.filter((m) => m.id !== messageId);
+            const data = await res.json();
+            const target = messages.value.find((m) => m.id === messageId);
+
+            if (target) {
+                target.is_deleted = true;
+                target.deleted_at = data.deleted_at || new Date().toISOString();
+                target.content = 'This message was deleted by a moderator.';
+            }
         }
     } catch (e) {
         console.error('Failed to delete message', e);
     }
 };
 
+// Message Reactions state & methods
+const activeReactionPickerMessageId = ref<number | null>(null);
+const reactionEmojis = ref<string[]>(
+    props.chatState.reaction_emojis &&
+        props.chatState.reaction_emojis.length > 0
+        ? props.chatState.reaction_emojis
+        : ['👍', '❤️', '🔥', '😂', '🎉', '😮', '😢', '👏'],
+);
+
+const toggleReactionPicker = (messageId: number) => {
+    if (activeReactionPickerMessageId.value === messageId) {
+        activeReactionPickerMessageId.value = null;
+    } else {
+        activeReactionPickerMessageId.value = messageId;
+    }
+};
+
+const reactToMessage = async (message: ChatMessageItem, emoji: string) => {
+    if (!currentUser.value) {
+        alert('Please sign in to react to messages.');
+
+        return;
+    }
+
+    activeReactionPickerMessageId.value = null;
+    closeMobileActions();
+
+    if (!message.reactions) {
+        message.reactions = [];
+    }
+
+    // Optimistic UI update
+    const existing = message.reactions.find((r) => r.emoji === emoji);
+
+    if (existing) {
+        if (existing.reacted) {
+            existing.reacted = false;
+            existing.count = Math.max(0, existing.count - 1);
+
+            if (existing.count === 0) {
+                message.reactions = message.reactions.filter(
+                    (r) => r.emoji !== emoji,
+                );
+            }
+        } else {
+            existing.reacted = true;
+            existing.count += 1;
+        }
+    } else {
+        message.reactions.push({
+            emoji,
+            count: 1,
+            reacted: true,
+        });
+    }
+
+    try {
+        const token = (
+            document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement
+        )?.content;
+        const res = await fetch(`/api/chat/messages/${message.id}/reactions`, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': token || '',
+            },
+            body: JSON.stringify({ emoji }),
+        });
+
+        if (res.ok) {
+            const data = await res.json();
+
+            if (data.reactions) {
+                message.reactions = data.reactions;
+            }
+        }
+    } catch (e) {
+        console.error('Failed to toggle reaction', e);
+    }
+};
+
 // Report message state & methods
 const reportingMessage = ref<ChatMessageItem | null>(null);
 const reportReason = ref('Inappropriate message or conduct');
@@ -425,10 +680,14 @@ const reportReasons = [
 ];
 
 const openReportModal = (message: ChatMessageItem) => {
+    closeMobileActions();
+
     if (!currentUser.value) {
         alert('Please sign in to report a message.');
+
         return;
     }
+
     reportingMessage.value = message;
     reportReason.value = 'Inappropriate message or conduct';
     reportSuccessMessage.value = null;
@@ -443,7 +702,9 @@ const closeReportModal = () => {
 };
 
 const submitReport = async () => {
-    if (!reportingMessage.value || isSubmittingReport.value) return;
+    if (!reportingMessage.value || isSubmittingReport.value) {
+        return;
+    }
 
     isSubmittingReport.value = true;
     reportSuccessMessage.value = null;
@@ -490,6 +751,71 @@ const submitReport = async () => {
     }
 };
 
+const parseMessageSegments = (content: string): MessageSegment[] => {
+    if (!content) {
+        return [];
+    }
+
+    const mentionRegex = /(?<=^|\s)@([a-zA-Z0-9_.-]+)/g;
+    const segments: MessageSegment[] = [];
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    while ((match = mentionRegex.exec(content)) !== null) {
+        const matchStart = match.index;
+
+        if (matchStart > lastIndex) {
+            segments.push({
+                type: 'text',
+                text: content.substring(lastIndex, matchStart),
+            });
+        }
+
+        let username = match[1];
+        let mentionText = match[0];
+        let trailingPunctuation = '';
+
+        const trailingMatch = username.match(/[.,!?;:]+$/);
+
+        if (trailingMatch) {
+            trailingPunctuation = trailingMatch[0];
+            username = username.slice(0, -trailingPunctuation.length);
+            mentionText = mentionText.slice(0, -trailingPunctuation.length);
+        }
+
+        if (username) {
+            segments.push({
+                type: 'mention',
+                text: mentionText,
+                username,
+            });
+        } else {
+            segments.push({
+                type: 'text',
+                text: match[0],
+            });
+        }
+
+        if (trailingPunctuation) {
+            segments.push({
+                type: 'text',
+                text: trailingPunctuation,
+            });
+        }
+
+        lastIndex = match.index + match[0].length;
+    }
+
+    if (lastIndex < content.length) {
+        segments.push({
+            type: 'text',
+            text: content.substring(lastIndex),
+        });
+    }
+
+    return segments;
+};
+
 const formatTime = (isoString: string) => {
     try {
         const date = new Date(isoString);
@@ -506,10 +832,25 @@ const formatTime = (isoString: string) => {
 const formatDateDivider = (isoString: string) => {
     try {
         const date = new Date(isoString);
+        const today = new Date();
+        const yesterday = new Date();
+        yesterday.setDate(today.getDate() - 1);
+
+        if (date.toDateString() === today.toDateString()) {
+            return 'Today';
+        }
+
+        if (date.toDateString() === yesterday.toDateString()) {
+            return 'Yesterday';
+        }
 
         return date.toLocaleDateString(undefined, {
             month: 'short',
             day: 'numeric',
+            year:
+                date.getFullYear() !== today.getFullYear()
+                    ? 'numeric'
+                    : undefined,
         });
     } catch {
         return '';
@@ -527,12 +868,60 @@ const shouldShowDateDivider = (index: number) => {
     return prev !== curr;
 };
 
+// Smart Message Grouping: consecutive messages by same author within 2 minutes merge
+const isGroupedWithPrevious = (idx: number) => {
+    if (idx === 0) {
+        return false;
+    }
+
+    if (shouldShowDateDivider(idx)) {
+        return false;
+    }
+
+    const prev = messages.value[idx - 1];
+    const curr = messages.value[idx];
+
+    if (!prev || !curr) {
+        return false;
+    }
+
+    if (Number(prev.user.id) !== Number(curr.user.id)) {
+        return false;
+    }
+
+    if (curr.reply_to_content || curr.is_deleted || prev.is_deleted) {
+        return false;
+    }
+
+    const prevTime = new Date(prev.created_at).getTime();
+    const currTime = new Date(curr.created_at).getTime();
+
+    return currTime - prevTime < 120000;
+};
+
+const isBanModalOpen = ref(false);
+const selectedUserToBan = ref<ChatBanUser | null>(null);
+
+const openBanModal = (user: ChatUser) => {
+    closeMobileActions();
+    selectedUserToBan.value = {
+        id: user.id,
+        name: user.name,
+        username: user.username,
+    };
+    isBanModalOpen.value = true;
+};
+
 const handleVisibilityOrFocus = () => {
     if (document.visibilityState === 'visible') {
         fetchLatestMessages();
     }
 };
 
+const handleDocumentClick = () => {
+    activeReactionPickerMessageId.value = null;
+};
+
 onMounted(() => {
     initCooldown();
     setupRealtime();
@@ -541,15 +930,50 @@ onMounted(() => {
     window.addEventListener('focus', fetchLatestMessages);
     window.addEventListener('pageshow', fetchLatestMessages);
     document.addEventListener('visibilitychange', handleVisibilityOrFocus);
+    window.addEventListener('click', handleDocumentClick);
 });
 
 onUnmounted(() => {
     if (cooldownInterval) {
         clearInterval(cooldownInterval);
     }
+
     window.removeEventListener('focus', fetchLatestMessages);
     window.removeEventListener('pageshow', fetchLatestMessages);
     document.removeEventListener('visibilitychange', handleVisibilityOrFocus);
+    window.removeEventListener('click', handleDocumentClick);
+
+    const echo = getEcho();
+
+    if (echo) {
+        if (handlePusherReconnect) {
+            try {
+                const pusher = (
+                    echo.connector as {
+                        pusher?: {
+                            connection?: {
+                                unbind: (
+                                    event: string,
+                                    callback: () => void,
+                                ) => void;
+                            };
+                        };
+                    }
+                )?.pusher;
+
+                if (pusher?.connection) {
+                    pusher.connection.unbind(
+                        'connected',
+                        handlePusherReconnect,
+                    );
+                }
+            } catch {
+                // Ignore
+            }
+        }
+
+        echo.leave('global-chat');
+    }
 });
 </script>
 
@@ -562,19 +986,19 @@ onUnmounted(() => {
         />
     </Head>
 
-    <main class="mx-auto max-w-4xl px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
+    <main class="mx-auto max-w-4xl px-3 py-3 sm:px-6 sm:py-5 lg:px-8">
         <!-- Compact Page Title & Subtitle + Rules Button -->
         <div
-            class="mb-3 flex items-center justify-between border-b border-slate-100 pb-3 dark:border-gray-800"
+            class="mb-3 flex items-center justify-between border-b border-slate-100 pb-3 dark:border-zinc-800"
         >
             <div>
                 <h1
-                    class="text-2xl font-extrabold tracking-tight text-slate-900 sm:text-3xl dark:text-gray-100"
+                    class="text-2xl font-extrabold tracking-tight text-slate-900 sm:text-3xl dark:text-zinc-100"
                 >
                     Global Chat
                 </h1>
                 <p
-                    class="mt-0.5 text-xs text-slate-500 sm:text-sm dark:text-gray-400"
+                    class="mt-0.5 text-xs text-slate-500 sm:text-sm dark:text-zinc-400"
                 >
                     অন্যান্য শিক্ষার্থীদের সাথে সরাসরি কথা বলুন ও প্রশ্ন শেয়ার
                     করুন।
@@ -585,7 +1009,7 @@ onUnmounted(() => {
             <button
                 type="button"
                 @click="showRulesModal = true"
-                class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl border border-slate-200/80 bg-slate-50/80 px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-2xs transition hover:bg-slate-100 active:scale-95 dark:border-gray-700/80 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700"
+                class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl border border-slate-200/80 bg-slate-50/80 px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-2xs transition hover:bg-slate-100 active:scale-95 dark:border-zinc-700 dark:bg-zinc-800/80 dark:text-zinc-200 dark:hover:bg-zinc-700"
                 title="Chat Rules & Guidelines"
             >
                 <Info class="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
@@ -593,172 +1017,135 @@ onUnmounted(() => {
             </button>
         </div>
 
-        <!-- Chat Container Window -->
+        <!-- Main Messenger Shell -->
         <div
-            class="flex h-[calc(100vh-14rem)] max-h-[740px] min-h-[520px] flex-col overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-2xs dark:border-gray-800 dark:bg-gray-900/90"
+            class="flex h-[calc(100dvh-13.5rem)] max-h-[760px] min-h-[480px] flex-col overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-xs sm:h-[calc(100dvh-15rem)] dark:border-zinc-800 dark:bg-zinc-900"
         >
-            <!-- Messages Stream -->
+            <!-- Scrollable Message Stream -->
             <div
                 ref="messagesContainerRef"
                 @scroll="handleScroll"
-                class="relative flex-1 divide-y divide-slate-100/80 overflow-y-auto p-3 sm:p-5 dark:divide-gray-800/60"
+                class="relative flex-1 space-y-1 overflow-y-auto px-3 py-4 sm:px-5"
             >
                 <!-- Empty State -->
                 <div
                     v-if="messages.length === 0"
-                    class="flex h-full flex-col items-center justify-center p-8 text-center text-slate-400 dark:text-gray-500"
+                    class="flex h-full flex-col items-center justify-center p-8 text-center"
                 >
+                    <div
+                        class="flex h-12 w-12 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 dark:bg-indigo-950/50 dark:text-indigo-400"
+                    >
+                        <Radio class="h-6 w-6" />
+                    </div>
                     <p
-                        class="text-sm font-semibold text-slate-600 dark:text-gray-400"
+                        class="mt-3 text-sm font-semibold text-slate-800 dark:text-zinc-200"
                     >
                         No messages yet
                     </p>
-                    <p class="mt-1 text-xs text-slate-400 dark:text-gray-500">
-                        Be the first to send a message to start the
-                        conversation.
+                    <p class="mt-1 text-xs text-slate-400 dark:text-zinc-500">
+                        Be the first to start the conversation!
                     </p>
                 </div>
 
-                <!-- Messages Feed -->
+                <!-- Message Items -->
                 <template v-for="(msg, idx) in messages" :key="msg.id">
                     <!-- Date Divider -->
                     <div
                         v-if="shouldShowDateDivider(idx)"
-                        class="sticky top-0 z-10 my-2 flex justify-center"
+                        class="my-3 flex justify-center"
                     >
                         <span
-                            class="rounded-full bg-slate-100/90 px-3 py-0.5 text-[10px] font-medium text-slate-600 shadow-2xs backdrop-blur-xs dark:bg-gray-800/90 dark:text-gray-300"
+                            class="rounded-full border border-slate-200/80 bg-slate-50 px-3 py-0.5 text-[10px] font-semibold text-slate-500 shadow-2xs dark:border-zinc-800 dark:bg-zinc-800/80 dark:text-zinc-400"
                         >
                             {{ formatDateDivider(msg.created_at) }}
                         </span>
                     </div>
 
-                    <!-- Individual Message Row (Distinctly Highlighted for currentUser) -->
+                    <!-- Chat Message Row -->
                     <div
                         :id="`chat-msg-${msg.id}`"
-                        class="group flex items-start gap-3 rounded-2xl p-2.5 transition-all duration-300 sm:p-3"
+                        class="group relative flex items-start gap-2.5 rounded-xl px-2.5 py-1.5 transition-colors duration-150 sm:gap-3 sm:px-3 sm:py-2"
                         :class="[
                             currentUser &&
                             Number(currentUser.id) === Number(msg.user.id)
-                                ? 'bg-indigo-50/50 dark:bg-indigo-950/20'
-                                : 'hover:bg-slate-50 dark:hover:bg-gray-800/40',
+                                ? 'bg-indigo-50/30 dark:bg-indigo-950/15'
+                                : 'hover:bg-slate-50/80 dark:hover:bg-zinc-800/40',
                             highlightedMessageId === msg.id
-                                ? 'bg-indigo-100/70 ring-2 ring-indigo-500 dark:bg-indigo-950/60'
+                                ? 'bg-indigo-100/70 ring-2 ring-indigo-500/50 dark:bg-indigo-950/60'
                                 : '',
+                            isGroupedWithPrevious(idx) ? '!pt-0.5' : 'mt-1',
                         ]"
                     >
-                        <!-- User Avatar -->
-                        <Link
-                            :href="`/u/${msg.user.username}`"
-                            class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold transition hover:ring-2 hover:ring-indigo-400 sm:h-9 sm:w-9"
-                            :class="
-                                currentUser &&
-                                Number(currentUser.id) === Number(msg.user.id)
-                                    ? 'bg-indigo-600 text-white dark:bg-indigo-500'
-                                    : 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/70 dark:text-indigo-300'
-                            "
-                        >
-                            <img
-                                v-if="msg.user.image_url"
-                                :src="msg.user.image_url"
-                                :alt="msg.user.name"
-                                class="h-full w-full object-cover"
-                            />
-                            <span v-else class="text-xs uppercase">
-                                {{ msg.user.name?.charAt(0) || 'U' }}
+                        <!-- Left Avatar Gutter -->
+                        <div class="w-8 shrink-0 sm:w-9">
+                            <Link
+                                v-if="!isGroupedWithPrevious(idx)"
+                                :href="`/u/${msg.user.username}`"
+                                class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full font-semibold transition hover:opacity-85 sm:h-9 sm:w-9"
+                                :class="
+                                    currentUser &&
+                                    Number(currentUser.id) ===
+                                        Number(msg.user.id)
+                                        ? 'bg-indigo-600 text-white'
+                                        : 'bg-slate-100 text-slate-700 dark:bg-zinc-800 dark:text-zinc-300'
+                                "
+                            >
+                                <img
+                                    v-if="msg.user.image_url"
+                                    :src="msg.user.image_url"
+                                    :alt="msg.user.name"
+                                    class="h-full w-full object-cover"
+                                />
+                                <span v-else class="text-xs uppercase">
+                                    {{ msg.user.name?.charAt(0) || 'U' }}
+                                </span>
+                            </Link>
+                            <span
+                                v-else
+                                class="block text-center text-[9px] text-slate-300 opacity-0 transition-opacity group-hover:opacity-100 dark:text-zinc-600"
+                            >
+                                {{ formatTime(msg.created_at) }}
                             </span>
-                        </Link>
+                        </div>
 
-                        <!-- Content Area -->
+                        <!-- Message Content Area -->
                         <div class="min-w-0 flex-1">
-                            <!-- Header Info -->
+                            <!-- Header Info (Shown on First in Group) -->
                             <div
-                                class="flex items-center justify-between gap-2"
+                                v-if="!isGroupedWithPrevious(idx)"
+                                class="flex items-baseline gap-1.5"
                             >
-                                <div class="flex min-w-0 items-center gap-1.5">
-                                    <Link
-                                        :href="`/u/${msg.user.username}`"
-                                        class="truncate text-xs font-semibold text-slate-900 transition hover:text-indigo-600 dark:text-gray-100 dark:hover:text-indigo-400"
-                                    >
-                                        {{ msg.user.name }}
-                                    </Link>
-
-                                    <!-- You Badge -->
-                                    <span
-                                        v-if="
-                                            currentUser &&
-                                            Number(currentUser.id) ===
-                                                Number(msg.user.id)
-                                        "
-                                        class="rounded-md bg-indigo-100 px-1.5 py-0.5 text-[9px] font-bold text-indigo-700 dark:bg-indigo-900/70 dark:text-indigo-200"
-                                    >
-                                        You
-                                    </span>
-
-                                    <VerifiedBadge
-                                        v-if="msg.user.is_verified"
-                                    />
-                                    <span
-                                        v-if="msg.user.institution"
-                                        class="hidden truncate text-[11px] text-slate-400 sm:inline dark:text-gray-500"
-                                    >
-                                        • {{ msg.user.institution }}
-                                    </span>
-                                </div>
-
-                                <div class="flex shrink-0 items-center gap-1">
-                                    <span
-                                        class="text-[10px] text-slate-400 sm:text-[11px] dark:text-gray-500"
-                                    >
-                                        {{ formatTime(msg.created_at) }}
-                                    </span>
-
-                                    <!-- Reply Button -->
-                                    <button
-                                        v-if="currentUser && canPost"
-                                        type="button"
-                                        @click="startReply(msg)"
-                                        class="cursor-pointer rounded-md p-1 text-slate-400 opacity-100 transition hover:bg-indigo-50 hover:text-indigo-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-gray-500 dark:hover:bg-indigo-950/40 dark:hover:text-indigo-400"
-                                        title="Reply to message"
-                                    >
-                                        <Reply class="h-3 w-3" />
-                                    </button>
+                                <Link
+                                    :href="`/u/${msg.user.username}`"
+                                    class="truncate text-xs font-bold text-slate-900 transition hover:text-indigo-600 dark:text-zinc-100 dark:hover:text-indigo-400"
+                                >
+                                    {{ msg.user.name }}
+                                </Link>
+
+                                <span
+                                    v-if="
+                                        currentUser &&
+                                        Number(currentUser.id) ===
+                                            Number(msg.user.id)
+                                    "
+                                    class="py-0.2 rounded-md bg-indigo-100 px-1 text-[9px] font-bold text-indigo-700 dark:bg-indigo-900/60 dark:text-indigo-300"
+                                >
+                                    You
+                                </span>
 
-                                    <!-- Quick Admin Edit / Ban User Button -->
-                                    <Link
-                                        v-if="can('edit users')"
-                                        :href="`/admin/users/edit/${msg.user.id}`"
-                                        class="cursor-pointer rounded-md p-1 text-slate-400 opacity-100 transition hover:bg-indigo-50 hover:text-indigo-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-gray-500 dark:hover:bg-indigo-950/40 dark:hover:text-indigo-400"
-                                        :title="`Manage / Ban ${msg.user.name}`"
-                                    >
-                                        <Pencil class="h-3 w-3" />
-                                    </Link>
+                                <VerifiedBadge v-if="msg.user.is_verified" />
 
-                                    <!-- Report Button (for non-author users) -->
-                                    <button
-                                        v-if="
-                                            currentUser &&
-                                            Number(currentUser.id) !==
-                                                Number(msg.user.id)
-                                        "
-                                        @click="openReportModal(msg)"
-                                        class="cursor-pointer rounded-md p-1 text-slate-400 opacity-100 transition hover:bg-amber-50 hover:text-amber-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-gray-500 dark:hover:bg-amber-950/40 dark:hover:text-amber-400"
-                                        title="Report message"
-                                    >
-                                        <Flag class="h-3 w-3" />
-                                    </button>
+                                <span
+                                    class="truncate text-[11px] text-slate-400 dark:text-zinc-500"
+                                >
+                                    @{{ msg.user.username }}
+                                </span>
 
-                                    <!-- Delete Button (Staff Only) -->
-                                    <button
-                                        v-if="canDelete"
-                                        type="button"
-                                        @click="deleteMessage(msg.id)"
-                                        class="cursor-pointer rounded-md p-1 text-slate-400 opacity-100 transition hover:bg-rose-50 hover:text-rose-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-gray-500 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
-                                        title="Delete message (Staff)"
-                                    >
-                                        <Trash2 class="h-3 w-3" />
-                                    </button>
-                                </div>
+                                <span
+                                    class="ml-auto text-[10px] text-slate-400 select-none sm:text-[11px] dark:text-zinc-500"
+                                >
+                                    {{ formatTime(msg.created_at) }}
+                                </span>
                             </div>
 
                             <!-- Quoted Parent Snapshot (If Reply) -->
@@ -769,7 +1156,7 @@ onUnmounted(() => {
                                         ? scrollToMessage(msg.reply_to_id)
                                         : null
                                 "
-                                class="mt-1.5 flex items-center gap-1.5 rounded-lg border-l-2 border-indigo-500 bg-slate-100/70 px-2.5 py-1 text-[11px] text-slate-600 transition dark:border-indigo-400 dark:bg-gray-800/60 dark:text-gray-300"
+                                class="mt-1 flex items-center gap-1.5 rounded-lg border-l-2 border-indigo-500 bg-slate-100/60 px-2 py-0.5 text-[11px] text-slate-600 transition dark:border-indigo-400 dark:bg-zinc-800/60 dark:text-zinc-400"
                                 :class="
                                     msg.reply_to_id
                                         ? 'cursor-pointer hover:bg-indigo-50/60 dark:hover:bg-indigo-950/30'
@@ -777,50 +1164,199 @@ onUnmounted(() => {
                                 "
                                 :title="
                                     msg.reply_to_id
-                                        ? 'Click to jump to original message'
+                                        ? 'Jump to original message'
                                         : ''
                                 "
                             >
-                                <Reply
-                                    class="h-3 w-3 shrink-0 text-indigo-500 dark:text-indigo-400"
-                                />
+                                <Reply class="h-3 w-3 shrink-0 opacity-70" />
                                 <span class="truncate italic">
                                     "{{ msg.reply_to_content }}"
                                 </span>
                             </div>
 
-                            <!-- Message Text -->
+                            <!-- Message Text Body -->
                             <p
-                                class="mt-1 text-xs leading-relaxed break-words whitespace-pre-wrap sm:text-sm"
-                                :class="
+                                v-if="msg.is_deleted || msg.deleted_at"
+                                class="mt-0.5 text-xs text-slate-400 italic select-none sm:text-sm dark:text-zinc-500"
+                            >
+                                {{ msg.content }}
+                            </p>
+                            <p
+                                v-else
+                                class="mt-0.5 text-xs leading-relaxed break-words whitespace-pre-wrap text-slate-800 sm:text-sm dark:text-zinc-200"
+                            >
+                                <template
+                                    v-for="(seg, sIdx) in parseMessageSegments(
+                                        msg.content,
+                                    )"
+                                    :key="sIdx"
+                                >
+                                    <Link
+                                        v-if="
+                                            seg.type === 'mention' &&
+                                            seg.username
+                                        "
+                                        :href="`/u/${seg.username}`"
+                                        class="font-semibold text-indigo-600 hover:underline dark:text-indigo-400"
+                                        @click.stop
+                                    >
+                                        {{ seg.text }}
+                                    </Link>
+                                    <span v-else>{{ seg.text }}</span>
+                                </template>
+                            </p>
+
+                            <!-- Reaction Pills -->
+                            <div
+                                v-if="msg.reactions && msg.reactions.length > 0"
+                                class="mt-1.5 flex flex-wrap items-center gap-1"
+                            >
+                                <button
+                                    v-for="r in msg.reactions"
+                                    :key="r.emoji"
+                                    type="button"
+                                    :disabled="
+                                        !currentUser ||
+                                        msg.is_deleted ||
+                                        !!msg.deleted_at
+                                    "
+                                    @click="reactToMessage(msg, r.emoji)"
+                                    class="inline-flex cursor-pointer items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium transition active:scale-95 disabled:cursor-default"
+                                    :class="
+                                        r.reacted
+                                            ? 'border-indigo-300 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-950/70 dark:text-indigo-300'
+                                            : 'border-slate-200 bg-slate-50/90 text-slate-600 hover:bg-slate-100 dark:border-zinc-800 dark:bg-zinc-800/80 dark:text-zinc-400 dark:hover:bg-zinc-800'
+                                    "
+                                    :title="
+                                        r.users && r.users.length
+                                            ? `Reacted by: ${r.users.join(', ')}`
+                                            : ''
+                                    "
+                                >
+                                    <span>{{ r.emoji }}</span>
+                                    <span class="font-bold">{{ r.count }}</span>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Floating Action Toolbar (Desktop on Hover) -->
+                        <div
+                            v-if="!msg.is_deleted && !msg.deleted_at"
+                            class="absolute -top-3 right-3 hidden items-center gap-0.5 rounded-xl border border-slate-200/90 bg-white p-0.5 shadow-sm sm:group-hover:flex dark:border-zinc-700 dark:bg-zinc-800"
+                            @click.stop
+                        >
+                            <!-- Reaction Trigger -->
+                            <div class="relative">
+                                <button
+                                    v-if="currentUser"
+                                    type="button"
+                                    @click.stop="toggleReactionPicker(msg.id)"
+                                    class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-amber-50 hover:text-amber-600 dark:text-zinc-400 dark:hover:bg-amber-950/40 dark:hover:text-amber-400"
+                                    title="Add reaction"
+                                >
+                                    <Smile class="h-3.5 w-3.5" />
+                                </button>
+
+                                <!-- Emoji Quick Popover -->
+                                <div
+                                    v-if="
+                                        activeReactionPickerMessageId === msg.id
+                                    "
+                                    class="absolute right-0 bottom-full z-30 mb-1 flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-800"
+                                    @click.stop
+                                >
+                                    <button
+                                        v-for="emoji in reactionEmojis"
+                                        :key="emoji"
+                                        type="button"
+                                        @click="reactToMessage(msg, emoji)"
+                                        class="cursor-pointer text-base transition hover:scale-125 active:scale-95"
+                                    >
+                                        {{ emoji }}
+                                    </button>
+                                </div>
+                            </div>
+
+                            <!-- Reply -->
+                            <button
+                                v-if="currentUser && canPost"
+                                type="button"
+                                @click="startReply(msg)"
+                                class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 dark:text-zinc-400 dark:hover:bg-indigo-950/40 dark:hover:text-indigo-400"
+                                title="Reply"
+                            >
+                                <Reply class="h-3.5 w-3.5" />
+                            </button>
+
+                            <!-- Ban (Staff) -->
+                            <button
+                                v-if="
+                                    (can('manage chat') || canDelete) &&
+                                    Number(currentUser?.id) !==
+                                        Number(msg.user.id)
+                                "
+                                type="button"
+                                @click="openBanModal(msg.user)"
+                                class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-rose-50 hover:text-rose-600 dark:text-zinc-400 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
+                                :title="`Ban @${msg.user.username}`"
+                            >
+                                <Ban class="h-3.5 w-3.5" />
+                            </button>
+
+                            <!-- Report -->
+                            <button
+                                v-if="
                                     currentUser &&
-                                    Number(currentUser.id) ===
+                                    Number(currentUser.id) !==
                                         Number(msg.user.id)
-                                        ? 'text-slate-900 dark:text-gray-100'
-                                        : 'text-slate-700 dark:text-gray-300'
                                 "
+                                type="button"
+                                @click="openReportModal(msg)"
+                                class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-amber-50 hover:text-amber-600 dark:text-zinc-400 dark:hover:bg-amber-950/40 dark:hover:text-amber-400"
+                                title="Report"
                             >
-                                {{ msg.content }}
-                            </p>
+                                <Flag class="h-3.5 w-3.5" />
+                            </button>
+
+                            <!-- Delete (Staff) -->
+                            <button
+                                v-if="canDelete"
+                                type="button"
+                                @click="deleteMessage(msg.id)"
+                                class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-rose-50 hover:text-rose-600 dark:text-zinc-400 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
+                                title="Delete"
+                            >
+                                <Trash2 class="h-3.5 w-3.5" />
+                            </button>
                         </div>
+
+                        <!-- Mobile Action Trigger (3-dots) -->
+                        <button
+                            v-if="!msg.is_deleted && !msg.deleted_at"
+                            type="button"
+                            @click.stop="openMobileActions(msg)"
+                            class="shrink-0 p-1 text-slate-300 hover:text-slate-600 sm:hidden dark:text-zinc-600 dark:hover:text-zinc-300"
+                        >
+                            <MoreHorizontal class="h-3.5 w-3.5" />
+                        </button>
                     </div>
                 </template>
             </div>
 
-            <!-- Scroll To Bottom Button -->
+            <!-- Floating Scroll-To-Bottom Button -->
             <button
                 v-if="showScrollButton"
                 type="button"
                 @click="scrollToBottom(true)"
-                class="absolute right-8 bottom-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-slate-900 text-white shadow-md transition hover:bg-slate-800 active:scale-95 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
+                class="absolute right-6 bottom-20 z-20 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-slate-900 text-white shadow-lg transition hover:scale-105 active:scale-95 sm:right-8 sm:bottom-22 dark:bg-zinc-100 dark:text-zinc-900"
                 title="Scroll to bottom"
             >
                 <ArrowDown class="h-4 w-4" />
             </button>
 
-            <!-- Bottom Input Field -->
-            <div
-                class="border-t border-slate-100 bg-white p-3.5 sm:p-4 dark:border-gray-800 dark:bg-gray-900"
+            <!-- Bottom Input Bar Area -->
+            <footer
+                class="border-t border-slate-100 bg-white p-3 sm:p-4 dark:border-zinc-800 dark:bg-zinc-900"
             >
                 <!-- Active Reply Banner -->
                 <div
@@ -845,14 +1381,14 @@ onUnmounted(() => {
                     <button
                         type="button"
                         @click="cancelReply"
-                        class="cursor-pointer rounded-lg p-0.5 text-indigo-500 transition hover:bg-indigo-100 dark:text-indigo-400 dark:hover:bg-indigo-900/60"
+                        class="cursor-pointer rounded-lg p-0.5 text-indigo-500 hover:bg-indigo-100 dark:text-indigo-400 dark:hover:bg-indigo-900/60"
                         title="Cancel reply"
                     >
                         <X class="h-3.5 w-3.5" />
                     </button>
                 </div>
 
-                <!-- Can Post -->
+                <!-- Input Form when User can post -->
                 <form
                     v-if="canPost"
                     @submit.prevent="sendMessage"
@@ -867,14 +1403,14 @@ onUnmounted(() => {
                             :placeholder="
                                 activeReplyTo
                                     ? `Reply to ${activeReplyTo.user.name}...`
-                                    : 'Type a message...'
+                                    : 'Send a message...'
                             "
                             :maxlength="maxLengthLimit"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50/70 px-4 py-2.5 text-xs text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:outline-none disabled:opacity-60 sm:text-sm dark:border-gray-700/80 dark:bg-gray-800/80 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50/80 px-4 py-2.5 text-xs text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:outline-none disabled:opacity-60 sm:text-sm dark:border-zinc-700 dark:bg-zinc-800/80 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:border-indigo-400 dark:focus:bg-zinc-800"
                         />
                         <span
-                            v-if="inputContent.length > maxLengthLimit - 80"
-                            class="absolute top-1/2 right-3.5 -translate-y-1/2 text-[10px] font-medium text-slate-400 dark:text-gray-500"
+                            v-if="inputContent.length > maxLengthLimit - 60"
+                            class="absolute top-1/2 right-3 -translate-y-1/2 text-[10px] font-medium text-slate-400 dark:text-zinc-500"
                         >
                             {{ maxLengthLimit - inputContent.length }}
                         </span>
@@ -903,16 +1439,16 @@ onUnmounted(() => {
                     </button>
                 </form>
 
-                <!-- Restricted Notice -->
+                <!-- Restricted State Notice -->
                 <div
                     v-else
-                    class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 px-4 py-2.5 text-xs dark:border-gray-800 dark:bg-gray-800/40"
+                    class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 px-4 py-2.5 text-xs dark:border-zinc-800 dark:bg-zinc-800/40"
                 >
                     <div
-                        class="flex items-center gap-2 text-slate-600 dark:text-gray-400"
+                        class="flex items-center gap-2 text-slate-600 dark:text-zinc-400"
                     >
                         <Lock
-                            class="h-3.5 w-3.5 shrink-0 text-slate-400 dark:text-gray-500"
+                            class="h-3.5 w-3.5 shrink-0 text-slate-400 dark:text-zinc-500"
                         />
                         <span>{{
                             restrictionReason || 'Posting is restricted'
@@ -928,6 +1464,99 @@ onUnmounted(() => {
                         <span>Sign in</span>
                     </Link>
                 </div>
+            </footer>
+        </div>
+
+        <!-- Mobile Action Sheet Bottom Drawer -->
+        <div
+            v-if="mobileActionMessage"
+            class="fixed inset-0 z-50 flex items-end bg-black/50 backdrop-blur-xs sm:hidden"
+            @click.self="closeMobileActions"
+        >
+            <div
+                class="w-full rounded-t-2xl border-t border-slate-200 bg-white p-4 shadow-xl dark:border-zinc-800 dark:bg-zinc-900"
+            >
+                <!-- Header with message preview -->
+                <div
+                    class="flex items-center justify-between border-b border-slate-100 pb-3 dark:border-zinc-800"
+                >
+                    <span
+                        class="text-xs font-bold text-slate-700 dark:text-zinc-300"
+                    >
+                        Message by @{{ mobileActionMessage.user.username }}
+                    </span>
+                    <button
+                        type="button"
+                        @click="closeMobileActions"
+                        class="rounded-lg p-1 text-slate-400"
+                    >
+                        <X class="h-4 w-4" />
+                    </button>
+                </div>
+
+                <!-- Quick Emoji Reactions -->
+                <div v-if="currentUser" class="my-3 flex justify-between gap-1">
+                    <button
+                        v-for="emoji in reactionEmojis"
+                        :key="emoji"
+                        type="button"
+                        @click="reactToMessage(mobileActionMessage, emoji)"
+                        class="cursor-pointer text-xl transition active:scale-95"
+                    >
+                        {{ emoji }}
+                    </button>
+                </div>
+
+                <!-- Action Rows -->
+                <div class="space-y-1 pt-1 text-xs">
+                    <button
+                        v-if="currentUser && canPost"
+                        type="button"
+                        @click="startReply(mobileActionMessage)"
+                        class="flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 font-semibold text-slate-700 hover:bg-slate-100 active:scale-98 dark:text-zinc-200 dark:hover:bg-zinc-800"
+                    >
+                        <Reply class="h-4 w-4 text-indigo-500" />
+                        <span>Reply</span>
+                    </button>
+
+                    <button
+                        v-if="
+                            currentUser &&
+                            Number(currentUser.id) !==
+                                Number(mobileActionMessage.user.id)
+                        "
+                        type="button"
+                        @click="openReportModal(mobileActionMessage)"
+                        class="flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 font-semibold text-amber-600 hover:bg-amber-50 active:scale-98 dark:text-amber-400 dark:hover:bg-amber-950/40"
+                    >
+                        <Flag class="h-4 w-4" />
+                        <span>Report Message</span>
+                    </button>
+
+                    <button
+                        v-if="
+                            (can('manage chat') || canDelete) &&
+                            Number(currentUser?.id) !==
+                                Number(mobileActionMessage.user.id)
+                        "
+                        type="button"
+                        @click="openBanModal(mobileActionMessage.user)"
+                        class="flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 font-semibold text-rose-600 hover:bg-rose-50 active:scale-98 dark:text-rose-400 dark:hover:bg-rose-950/40"
+                    >
+                        <Ban class="h-4 w-4" />
+                        <span>Ban User</span>
+                    </button>
+
+                    <button
+                        v-if="canDelete"
+                        type="button"
+                        @click="deleteMessage(mobileActionMessage.id)"
+                        class="flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 font-semibold text-rose-600 hover:bg-rose-50 active:scale-98 dark:text-rose-400 dark:hover:bg-rose-950/40"
+                    >
+                        <Trash2 class="h-4 w-4" />
+                        <span>Delete Message</span>
+                    </button>
+                </div>
             </div>
         </div>
 
@@ -938,10 +1567,10 @@ onUnmounted(() => {
             @click.self="closeReportModal"
         >
             <div
-                class="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-5 shadow-xl sm:p-6 dark:border-gray-800 dark:bg-gray-900"
+                class="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-5 shadow-xl sm:p-6 dark:border-zinc-800 dark:bg-zinc-900"
             >
                 <div
-                    class="flex items-center justify-between border-b border-slate-100 pb-3.5 dark:border-gray-800"
+                    class="flex items-center justify-between border-b border-slate-100 pb-3.5 dark:border-zinc-800"
                 >
                     <div class="flex items-center gap-2">
                         <div
@@ -950,7 +1579,7 @@ onUnmounted(() => {
                             <Flag class="h-4 w-4" />
                         </div>
                         <h3
-                            class="text-sm font-bold text-slate-900 dark:text-gray-100"
+                            class="text-sm font-bold text-slate-900 dark:text-zinc-100"
                         >
                             Report Message
                         </h3>
@@ -958,7 +1587,7 @@ onUnmounted(() => {
                     <button
                         type="button"
                         @click="closeReportModal"
-                        class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                        class="cursor-pointer rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
                     >
                         <X class="h-4 w-4" />
                     </button>
@@ -987,7 +1616,6 @@ onUnmounted(() => {
                     @submit.prevent="submitReport"
                     class="mt-4 space-y-4"
                 >
-                    <!-- Error notice if duplicate or validation fails -->
                     <div
                         v-if="reportErrorMessage"
                         class="rounded-xl border border-rose-200 bg-rose-50/80 p-3 text-xs font-semibold text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/50 dark:text-rose-300"
@@ -995,15 +1623,14 @@ onUnmounted(() => {
                         {{ reportErrorMessage }}
                     </div>
 
-                    <!-- Message Preview Snapshot -->
                     <div
-                        class="rounded-xl border border-slate-200/80 bg-slate-50/80 p-3 dark:border-gray-800 dark:bg-gray-800/60"
+                        class="rounded-xl border border-slate-200/80 bg-slate-50/80 p-3 dark:border-zinc-800 dark:bg-zinc-800/60"
                     >
                         <div
-                            class="flex items-center justify-between text-[11px] text-slate-500 dark:text-gray-400"
+                            class="flex items-center justify-between text-[11px] text-slate-500 dark:text-zinc-400"
                         >
                             <span
-                                class="font-semibold text-slate-700 dark:text-gray-300"
+                                class="font-semibold text-slate-700 dark:text-zinc-300"
                             >
                                 {{ reportingMessage.user.name }} (@{{
                                     reportingMessage.user.username
@@ -1014,40 +1641,38 @@ onUnmounted(() => {
                             }}</span>
                         </div>
                         <p
-                            class="mt-1.5 text-xs break-words text-slate-800 dark:text-gray-200"
+                            class="mt-1.5 text-xs break-words text-slate-800 dark:text-zinc-200"
                         >
                             "{{ reportingMessage.content }}"
                         </p>
                     </div>
 
-                    <!-- Reason Selection -->
                     <div>
                         <label
-                            class="mb-1.5 block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                            class="mb-1.5 block text-xs font-semibold text-slate-700 dark:text-zinc-300"
                         >
                             Why are you reporting this message?
                         </label>
                         <select
                             v-model="reportReason"
-                            class="w-full rounded-xl border border-slate-200 bg-slate-50/80 px-3.5 py-2 text-xs font-medium text-slate-800 transition outline-none focus:border-indigo-500 focus:bg-white dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50/80 px-3.5 py-2 text-xs font-medium text-slate-800 transition outline-none focus:border-indigo-500 focus:bg-white dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus:border-indigo-400 dark:focus:bg-zinc-800"
                         >
                             <option
                                 v-for="reason in reportReasons"
                                 :key="reason"
                                 :value="reason"
-                                class="bg-white text-slate-800 dark:bg-gray-800 dark:text-gray-200"
+                                class="bg-white text-slate-800 dark:bg-zinc-800 dark:text-zinc-200"
                             >
                                 {{ reason }}
                             </option>
                         </select>
                     </div>
 
-                    <!-- Action Buttons -->
                     <div class="flex items-center justify-end gap-2 pt-2">
                         <button
                             type="button"
                             @click="closeReportModal"
-                            class="cursor-pointer rounded-xl border border-slate-200 bg-transparent px-4 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                            class="cursor-pointer rounded-xl border border-slate-200 bg-transparent px-4 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
                         >
                             Cancel
                         </button>
@@ -1067,24 +1692,28 @@ onUnmounted(() => {
             </div>
         </div>
 
+        <!-- Reusable Quick Ban Moderation Modal (Staff) -->
+        <ChatBanModal
+            :is-open="isBanModalOpen"
+            :user="selectedUserToBan"
+            @close="isBanModalOpen = false"
+        />
+
         <!-- Chat Guidelines & Rules Alert Dialog Modal -->
         <div
             v-if="showRulesModal"
             class="fixed inset-0 z-50 flex items-center justify-center p-4"
         >
-            <!-- Backdrop -->
             <div
                 class="fixed inset-0 bg-slate-900/60 backdrop-blur-xs transition-opacity"
                 @click="showRulesModal = false"
             ></div>
 
-            <!-- Modal Content -->
             <div
-                class="relative w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl transition-all sm:p-6 dark:border-gray-800 dark:bg-gray-900"
+                class="relative w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl transition-all sm:p-6 dark:border-zinc-800 dark:bg-zinc-900"
             >
-                <!-- Modal Header -->
                 <div
-                    class="flex items-start justify-between border-b border-slate-100 pb-4 dark:border-gray-800"
+                    class="flex items-start justify-between border-b border-slate-100 pb-4 dark:border-zinc-800"
                 >
                     <div class="flex items-center gap-3">
                         <div
@@ -1094,12 +1723,12 @@ onUnmounted(() => {
                         </div>
                         <div>
                             <h3
-                                class="text-base font-bold text-slate-900 dark:text-gray-100"
+                                class="text-base font-bold text-slate-900 dark:text-zinc-100"
                             >
                                 Global Chat Rules & Guidelines
                             </h3>
                             <p
-                                class="text-xs text-slate-500 dark:text-gray-400"
+                                class="text-xs text-slate-500 dark:text-zinc-400"
                             >
                                 সবার জন্য চ্যাট নিরাপদ ও ফ্রেন্ডলি রাখতে নিচের
                                 নিয়মগুলো মেনে চলুন।
@@ -1109,7 +1738,7 @@ onUnmounted(() => {
                     <button
                         type="button"
                         @click="showRulesModal = false"
-                        class="cursor-pointer rounded-lg p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                        class="cursor-pointer rounded-lg p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
                     >
                         <X class="h-4 w-4" />
                     </button>
@@ -1117,7 +1746,7 @@ onUnmounted(() => {
 
                 <!-- Rules List -->
                 <div
-                    class="my-4 space-y-3.5 text-xs text-slate-700 dark:text-gray-300"
+                    class="my-4 space-y-3.5 text-xs text-slate-700 dark:text-zinc-300"
                 >
                     <div class="flex items-start gap-2.5">
                         <div
@@ -1127,11 +1756,11 @@ onUnmounted(() => {
                         </div>
                         <div>
                             <strong
-                                class="font-semibold text-slate-900 dark:text-gray-100"
+                                class="font-semibold text-slate-900 dark:text-zinc-100"
                                 >পরস্পরকে সম্মান করুন (Respectful
                                 Environment):</strong
                             >
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">
+                            <p class="mt-0.5 text-slate-500 dark:text-zinc-400">
                                 অন্য শিক্ষার্থী ও মডারেটরদের সাথে শালীন আচরণ
                                 বজায় রাখুন। কোনো ধরনের ব্যক্তিগত আক্রমণ, বুলিং
                                 বা হেট স্পিচ কঠোরভাবে নিষিদ্ধ।
@@ -1147,11 +1776,11 @@ onUnmounted(() => {
                         </div>
                         <div>
                             <strong
-                                class="font-semibold text-slate-900 dark:text-gray-100"
+                                class="font-semibold text-slate-900 dark:text-zinc-100"
                                 >খারাপ ভাষা ও গালিগালাজ নিষেধ (No Abuse /
                                 Slang):</strong
                             >
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">
+                            <p class="mt-0.5 text-slate-500 dark:text-zinc-400">
                                 বাংলা, ইংরেজি বা বাংলিশ কোনো ভাষাতেই গালাগালি বা
                                 অশালীন শব্দ ব্যবহার করা যাবে না। এমন মেসেজ
                                 অটোমেটিক ব্লক হবে।
@@ -1167,11 +1796,11 @@ onUnmounted(() => {
                         </div>
                         <div>
                             <strong
-                                class="font-semibold text-slate-900 dark:text-gray-100"
+                                class="font-semibold text-slate-900 dark:text-zinc-100"
                                 >স্প্যামিং ও অ্যাডভার্টাইজিং নিষেধ (No
                                 Spam):</strong
                             >
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">
+                            <p class="mt-0.5 text-slate-500 dark:text-zinc-400">
                                 একই মেসেজ বারবার পাঠানো, চ্যাট ফ্লাড করা বা
                                 অনুমতি ছাড়া কোনো প্রোমোশন বা অপ্রাসঙ্গিক লিংক
                                 শেয়ার করা যাবে না।
@@ -1187,14 +1816,14 @@ onUnmounted(() => {
                         </div>
                         <div>
                             <strong
-                                class="font-semibold text-slate-900 dark:text-gray-100"
+                                class="font-semibold text-slate-900 dark:text-zinc-100"
                                 >অনুপযুক্ত মেসেজ রিপোর্ট করুন (Report
                                 Violations):</strong
                             >
-                            <p class="mt-0.5 text-slate-500 dark:text-gray-400">
+                            <p class="mt-0.5 text-slate-500 dark:text-zinc-400">
                                 কারো মেসেজে নিয়ম লঙ্ঘন দেখতে পেলে মেসেজের
-                                ডানপাশে থাকা ফ্ল্যাগ/রিপোর্ট বাটনে ক্লিক করে
-                                মডারেটরদের জানান।
+                                ডানপাশে থাকা রিপোর্ট বাটনে ক্লিক করে মডারেটরদের
+                                জানান।
                             </p>
                         </div>
                     </div>
diff --git a/resources/js/pages/admin/ChatSettings.vue b/resources/js/pages/admin/ChatSettings.vue
index 35e73e7..a389dea 100644
--- a/resources/js/pages/admin/ChatSettings.vue
+++ b/resources/js/pages/admin/ChatSettings.vue
@@ -10,7 +10,13 @@ import {
     Activity,
     Flag,
     ShieldAlert,
+    Smile,
+    Plus,
+    X,
+    RotateCcw,
+    Bot,
 } from 'lucide-vue-next';
+import { ref } from 'vue';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 
 defineOptions({ layout: AdminLayout });
@@ -25,6 +31,8 @@ interface ChatSettingsProps {
         max_length: number;
         profanity_filter_enabled: boolean;
         banned_words: string;
+        allowed_emojis?: string[];
+        bot_username?: string;
     };
     totalMessages: number;
     recentMessagesCount: number;
@@ -33,6 +41,28 @@ interface ChatSettingsProps {
 
 const props = defineProps<ChatSettingsProps>();
 
+const defaultReactionEmojis = ['👍', '❤️', '🔥', '😂', '🎉', '😮', '😢', '👏'];
+const popularReactionEmojis = [
+    '👍',
+    '❤️',
+    '🔥',
+    '😂',
+    '🎉',
+    '😮',
+    '😢',
+    '👏',
+    '🚀',
+    '💯',
+    '👀',
+    '🙏',
+    '💡',
+    '✨',
+    '🤝',
+    '🥳',
+];
+
+const newEmojiInput = ref('');
+
 const form = useForm({
     enabled: props.settings.enabled,
     audience: props.settings.audience,
@@ -42,8 +72,36 @@ const form = useForm({
     max_length: props.settings.max_length ?? 280,
     profanity_filter_enabled: props.settings.profanity_filter_enabled ?? true,
     banned_words: props.settings.banned_words ?? '',
+    allowed_emojis:
+        props.settings.allowed_emojis &&
+        props.settings.allowed_emojis.length > 0
+            ? [...props.settings.allowed_emojis]
+            : [...defaultReactionEmojis],
+    bot_username: props.settings.bot_username ?? 'hscstack',
 });
 
+const addEmoji = (emojiToAdd?: string) => {
+    const emoji = (emojiToAdd || newEmojiInput.value).trim();
+
+    if (!emoji) {
+        return;
+    }
+
+    if (!form.allowed_emojis.includes(emoji)) {
+        form.allowed_emojis.push(emoji);
+    }
+
+    newEmojiInput.value = '';
+};
+
+const removeEmoji = (index: number) => {
+    form.allowed_emojis.splice(index, 1);
+};
+
+const resetDefaultEmojis = () => {
+    form.allowed_emojis = [...defaultReactionEmojis];
+};
+
 const submitSettings = () => {
     form.post('/admin/chat/settings', {
         preserveScroll: true,
@@ -612,6 +670,183 @@ const lengthPresets = [
                 </div>
             </div>
 
+            <!-- 7. Allowed Reaction Emojis -->
+            <div
+                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
+            >
+                <div
+                    class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"
+                >
+                    <div>
+                        <label
+                            class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
+                        >
+                            <Smile class="h-4 w-4 text-amber-500" />
+                            Allowed Message Reaction Emojis
+                        </label>
+                        <p
+                            class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
+                        >
+                            Configure the emojis students and members can use to
+                            react to chat messages.
+                        </p>
+                    </div>
+
+                    <button
+                        type="button"
+                        @click="resetDefaultEmojis"
+                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-100 active:scale-95 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                    >
+                        <RotateCcw class="h-3.5 w-3.5" />
+                        <span>Reset Defaults</span>
+                    </button>
+                </div>
+
+                <!-- Current Active Emojis List (Pills) -->
+                <div>
+                    <span
+                        class="mb-2 block text-xs font-semibold text-slate-600 dark:text-gray-400"
+                    >
+                        Active Reaction Emojis ({{ form.allowed_emojis.length }}
+                        enabled):
+                    </span>
+                    <div class="flex flex-wrap items-center gap-2">
+                        <div
+                            v-for="(emoji, idx) in form.allowed_emojis"
+                            :key="emoji"
+                            class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-sm shadow-2xs dark:border-gray-700 dark:bg-gray-800"
+                        >
+                            <span class="text-base">{{ emoji }}</span>
+                            <button
+                                type="button"
+                                @click="removeEmoji(idx)"
+                                class="cursor-pointer rounded-full p-0.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/50 dark:hover:text-rose-400"
+                                title="Remove emoji"
+                            >
+                                <X class="h-3 w-3" />
+                            </button>
+                        </div>
+
+                        <span
+                            v-if="form.allowed_emojis.length === 0"
+                            class="text-xs text-amber-600 italic dark:text-amber-400"
+                        >
+                            No emojis active. Reactions will be disabled until
+                            emojis are added.
+                        </span>
+                    </div>
+                </div>
+
+                <!-- Add Custom Emoji Input -->
+                <div class="flex flex-wrap items-center gap-2 pt-1">
+                    <div class="relative w-48">
+                        <input
+                            v-model="newEmojiInput"
+                            type="text"
+                            placeholder="Type or paste emoji..."
+                            maxlength="32"
+                            @keydown.enter.prevent="addEmoji()"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2 text-xs text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
+                        />
+                    </div>
+                    <button
+                        type="button"
+                        @click="addEmoji()"
+                        class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl bg-indigo-50 px-3.5 py-2 text-xs font-bold text-indigo-700 transition hover:bg-indigo-100 active:scale-95 dark:bg-indigo-950/70 dark:text-indigo-300 dark:hover:bg-indigo-900"
+                    >
+                        <Plus class="h-3.5 w-3.5" />
+                        <span>Add Emoji</span>
+                    </button>
+                </div>
+
+                <!-- Quick Presets Picker -->
+                <div class="space-y-1.5 pt-1">
+                    <span
+                        class="block text-[11px] font-semibold text-slate-500 dark:text-gray-400"
+                    >
+                        Quick Add Popular Emojis:
+                    </span>
+                    <div class="flex flex-wrap gap-1.5">
+                        <button
+                            v-for="emoji in popularReactionEmojis"
+                            :key="emoji"
+                            type="button"
+                            @click="addEmoji(emoji)"
+                            :disabled="form.allowed_emojis.includes(emoji)"
+                            class="cursor-pointer rounded-lg border px-2 py-1 text-sm transition hover:scale-110 active:scale-95 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100"
+                            :class="
+                                form.allowed_emojis.includes(emoji)
+                                    ? 'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-950/60 dark:text-indigo-300'
+                                    : 'border-slate-200 bg-slate-50 hover:bg-slate-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700'
+                            "
+                            :title="
+                                form.allowed_emojis.includes(emoji)
+                                    ? 'Already added'
+                                    : `Add ${emoji}`
+                            "
+                        >
+                            {{ emoji }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 8. System Chat Bot Account -->
+            <div
+                class="space-y-4 border-b border-slate-100 pb-6 dark:border-gray-800"
+            >
+                <div class="flex items-center justify-between">
+                    <div>
+                        <label
+                            class="flex items-center gap-2 text-sm font-bold text-slate-900 dark:text-gray-100"
+                        >
+                            <Bot
+                                class="h-4 w-4 text-purple-600 dark:text-purple-400"
+                            />
+                            System Chat Bot Account
+                        </label>
+                        <p
+                            class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
+                        >
+                            Specify the username of the account that will post
+                            automated system announcements, ban notices, and
+                            moderation alerts.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="max-w-xs space-y-1.5">
+                    <label
+                        class="block text-xs font-semibold text-slate-600 dark:text-gray-400"
+                    >
+                        Bot Account Username:
+                    </label>
+                    <div class="relative">
+                        <span
+                            class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-xs font-bold text-slate-400"
+                        >
+                            @
+                        </span>
+                        <input
+                            v-model="form.bot_username"
+                            type="text"
+                            placeholder="hscstack"
+                            class="w-full rounded-xl border border-slate-200 bg-slate-50 py-2 pr-3 pl-8 text-xs font-bold text-slate-800 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-indigo-400 dark:focus:bg-gray-800"
+                        />
+                    </div>
+                    <p class="text-[11px] text-slate-400 dark:text-gray-500">
+                        Enter the username of an existing user account to post
+                        automated moderation notices and ban announcements.
+                    </p>
+                    <p
+                        v-if="form.errors.bot_username"
+                        class="text-xs font-medium text-rose-500"
+                    >
+                        {{ form.errors.bot_username }}
+                    </p>
+                </div>
+            </div>
+
             <!-- Submit Button -->
             <div class="flex items-center justify-between pt-2">
                 <button
diff --git a/resources/js/pages/admin/chat/Reports.vue b/resources/js/pages/admin/chat/Reports.vue
index bbeac0b..456773b 100644
--- a/resources/js/pages/admin/chat/Reports.vue
+++ b/resources/js/pages/admin/chat/Reports.vue
@@ -2,16 +2,17 @@
 import { Head, Link, router } from '@inertiajs/vue3';
 import {
     Flag,
-    ShieldAlert,
-    Pencil,
     CheckCircle,
     XCircle,
     Trash2,
     Clock,
     CheckCheck,
     MessageCircle,
+    Ban,
 } from 'lucide-vue-next';
 import { ref, computed } from 'vue';
+import ChatBanModal from '@/components/ChatBanModal.vue';
+import type { ChatBanUser } from '@/components/ChatBanModal.vue';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 
 defineOptions({ layout: AdminLayout });
@@ -56,6 +57,7 @@ const filteredReports = computed(() => {
     if (currentFilter.value === 'all') {
         return props.reports;
     }
+
     return props.reports.filter((r) => r.status === currentFilter.value);
 });
 
@@ -79,10 +81,36 @@ const deleteReport = (reportId: number) => {
     }
 };
 
+const isBanModalOpen = ref(false);
+const selectedUser = ref<ChatBanUser | null>(null);
+
+const openBanModal = (report: ReportItem) => {
+    if (!report.reported_user_id) {
+        return;
+    }
+
+    selectedUser.value = {
+        id: report.reported_user_id,
+        name: report.reported_user?.name || report.reported_user_name || 'User',
+        username:
+            report.reported_user?.username ||
+            report.reported_user_username ||
+            null,
+        chat_banned_until: report.reported_user?.chat_banned_until || null,
+        is_chat_banned: report.reported_user?.is_chat_banned ?? false,
+    };
+
+    isBanModalOpen.value = true;
+};
+
 const formatDate = (isoString?: string | null) => {
-    if (!isoString) return '';
+    if (!isoString) {
+        return '';
+    }
+
     try {
         const d = new Date(isoString);
+
         return d.toLocaleString([], {
             month: 'short',
             day: 'numeric',
@@ -386,16 +414,30 @@ const formatDate = (isoString?: string | null) => {
 
                         <!-- Right: Action buttons & Moderation shortcut -->
                         <div class="flex flex-wrap items-center gap-2">
-                            <!-- Direct link to edit/ban reported user -->
-                            <Link
+                            <!-- Quick Ban / Unban Modal trigger -->
+                            <button
                                 v-if="report.reported_user_id"
-                                :href="`/admin/users/edit/${report.reported_user_id}`"
-                                class="inline-flex items-center gap-1.5 rounded-xl bg-rose-50 px-3 py-1.5 text-xs font-bold text-rose-700 transition hover:bg-rose-100 dark:bg-rose-950/60 dark:text-rose-300 dark:hover:bg-rose-900/60"
-                                title="Open user profile to ban or moderate"
+                                type="button"
+                                @click="openBanModal(report)"
+                                class="inline-flex cursor-pointer items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-bold transition"
+                                :class="
+                                    report.reported_user?.is_chat_banned
+                                        ? 'bg-amber-50 text-amber-800 hover:bg-amber-100 dark:bg-amber-950/60 dark:text-amber-300 dark:hover:bg-amber-900/60'
+                                        : 'bg-rose-50 text-rose-700 hover:bg-rose-100 dark:bg-rose-950/60 dark:text-rose-300 dark:hover:bg-rose-900/60'
+                                "
+                                :title="
+                                    report.reported_user?.is_chat_banned
+                                        ? 'Edit chat ban timer or unban user'
+                                        : 'Ban user from chat'
+                                "
                             >
-                                <Pencil class="h-3 w-3" />
-                                <span>Edit / Ban Author</span>
-                            </Link>
+                                <Ban class="h-3 w-3" />
+                                <span>{{
+                                    report.reported_user?.is_chat_banned
+                                        ? 'Edit Ban / Unban'
+                                        : 'Ban Author'
+                                }}</span>
+                            </button>
 
                             <!-- Mark Status Buttons -->
                             <button
@@ -486,5 +528,12 @@ const formatDate = (isoString?: string | null) => {
                 </div>
             </div>
         </div>
+
+        <!-- Reusable Quick Chat Ban Modal -->
+        <ChatBanModal
+            :is-open="isBanModalOpen"
+            :user="selectedUser"
+            @close="isBanModalOpen = false"
+        />
     </div>
 </template>
diff --git a/resources/js/pages/admin/users/CreateOrEdit.vue b/resources/js/pages/admin/users/CreateOrEdit.vue
index e24f781..a022777 100644
--- a/resources/js/pages/admin/users/CreateOrEdit.vue
+++ b/resources/js/pages/admin/users/CreateOrEdit.vue
@@ -16,6 +16,7 @@ const props = defineProps({
 });
 
 const roles = [
+    { value: '', label: 'Student (No Role)' },
     { value: 'admin', label: 'Admin' },
     { value: 'editor', label: 'Editor' },
     { value: 'manager', label: 'Manager' },
@@ -24,13 +25,21 @@ const roles = [
 const availablePermissions = props.permissions;
 
 const formatForDatetimeLocal = (dateString?: string | null) => {
-    if (!dateString) return '';
+    if (!dateString) {
+        return '';
+    }
+
     const d = new Date(dateString);
-    if (isNaN(d.getTime())) return '';
+
+    if (isNaN(d.getTime())) {
+        return '';
+    }
+
     const offset = d.getTimezoneOffset() * 60000;
     const localISOTime = new Date(d.getTime() - offset)
         .toISOString()
         .slice(0, 16);
+
     return localISOTime;
 };
 
@@ -38,7 +47,7 @@ const form = useForm({
     _method: props.user ? 'PATCH' : 'POST',
     name: props.user?.name || '',
     email: props.user?.email || '',
-    role: props.user?.roles?.[0]?.name || 'manager',
+    role: props.user?.roles?.[0]?.name || '',
     permissions: props.user?.permissions?.map((p) => p.name) || ['view admin'],
     chat_banned_until: formatForDatetimeLocal(props.user?.chat_banned_until),
 
diff --git a/routes/admin.php b/routes/admin.php
index 813ce34..7cb3c49 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -120,4 +120,5 @@
     Route::post('/chat/clear', [ChatSettingsController::class, 'clearMessages'])->name('chat.clear');
     Route::patch('/chat/reports/{report}/status', [ChatSettingsController::class, 'updateReportStatus'])->name('chat.reports.update-status');
     Route::delete('/chat/reports/{report}', [ChatSettingsController::class, 'deleteReport'])->name('chat.reports.destroy');
+    Route::post('/chat/users/{user}/ban', [ChatSettingsController::class, 'updateUserBan'])->name('chat.users.ban');
 });
diff --git a/routes/web.php b/routes/web.php
index eeec2f7..3d29b95 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -39,6 +39,7 @@
     Route::post('/api/chat/messages', [ChatController::class, 'store'])->name('chat.messages.store');
     Route::delete('/api/chat/messages/{message}', [ChatController::class, 'destroy'])->name('chat.messages.destroy');
     Route::post('/api/chat/reports', [ChatController::class, 'report'])->name('chat.reports.store');
+    Route::middleware('throttle:60,1')->post('/api/chat/messages/{message}/reactions', [ChatController::class, 'toggleReaction'])->name('chat.messages.react');
 });
 
 // Global Chat Messages List (Public Read)