Sync update: 2026-05-19 23:27:14

whatsapp_app/lib/controllers/chat_controller.dart

@@ -181,13 +181,23 @@ class ChatController extends GetxController {
       case 'message_ack':
         final messageId = event['messageId'] as String?;
         final chatId = event['chatId'] as String?;
-        final ack = event['ack'] as int?;
+        // ack can arrive as int or double from JSON — handle both
+        final rawAck = event['ack'];
+        final ack = rawAck is int
+            ? rawAck
+            : rawAck is double
+                ? rawAck.toInt()
+                : null;
         if (chatId == null || messageId == null || ack == null) return;
 
         if (chatId == conversation.id) {
           final index = messages.indexWhere((m) => m.id == messageId);
           if (index != -1) {
-            messages[index] = messages[index].copyWith(ack: ack);
+            // Force a list rebuild so Obx re-renders the bubble
+            final updated = messages[index].copyWith(ack: ack);
+            final newList = List<MessageModel>.from(messages);
+            newList[index] = updated;
+            messages.assignAll(newList);
           }
         }
         break;

whatsapp_app/lib/controllers/conversations_controller.dart

@@ -166,6 +166,7 @@ class ConversationsController extends GetxController {
           timestamp: msgData['timestamp'] ?? 0,
           fromMe: msgData['fromMe'] ?? false,
           hasMedia: msgData['hasMedia'] ?? false,
+          ack: msgData['ack'] ?? 0,
         );
 
         // Find existing conversation and update it

whatsapp_app/lib/main.dart

@@ -10,28 +10,23 @@ import 'theme/app_theme.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
-  
+
-  // Initialize Firebase (Requires flutterfire configure)
+  // Initialize Firebase
   try {
     await Firebase.initializeApp();
   } catch (e) {
     print('Firebase initialization error: $e');
   }
 
-  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
-    statusBarColor: Colors.transparent,
-    statusBarIconBrightness: Brightness.light,
-  ));
-  
   // Register services before app starts
   Get.put(ContactsService(), permanent: true);
   Get.put(WhatsAppService(), permanent: true);
   Get.put(FirebaseService(), permanent: true);
-  
+
   // Initialize Contacts Service
   await Get.find<ContactsService>().init();
   Get.find<FirebaseService>().init();
-  
+
   runApp(const WhatsAppApp());
 }
 
@@ -41,9 +36,12 @@ class WhatsAppApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return GetMaterialApp(
-      title: 'WhatsApp App',
+      title: 'WhatsApp',
       debugShowCheckedModeBanner: false,
-      theme: AppTheme.dark,
+      // Follow device theme — no forced dark/light
+      theme: AppTheme.light,
+      darkTheme: AppTheme.dark,
+      themeMode: ThemeMode.system,
       home: const ConversationsScreen(),
       defaultTransition: Transition.cupertino,
     );

whatsapp_app/lib/models/conversation_model.dart

@@ -3,12 +3,14 @@ class LastMessageModel {
   final int timestamp;
   final bool fromMe;
   final bool hasMedia;
+  final int ack;
 
   LastMessageModel({
     required this.body,
     required this.timestamp,
     required this.fromMe,
     required this.hasMedia,
+    required this.ack,
   });
 
   factory LastMessageModel.fromJson(Map<String, dynamic> json) {
@@ -17,6 +19,7 @@ class LastMessageModel {
       timestamp: json['timestamp'] ?? 0,
       fromMe: json['fromMe'] ?? false,
       hasMedia: json['hasMedia'] ?? false,
+      ack: json['ack'] ?? 0,
     );
   }
 
@@ -26,6 +29,7 @@ class LastMessageModel {
       'timestamp': timestamp,
       'fromMe': fromMe,
       'hasMedia': hasMedia,
+      'ack': ack,
     };
   }
 }

whatsapp_app/lib/screens/chat_screen.dart

@@ -1,5 +1,6 @@
 import 'dart:convert';
 import 'package:flutter/material.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:get/get.dart';
 import 'package:image_picker/image_picker.dart';
 import '../controllers/chat_controller.dart';
@@ -19,84 +20,177 @@ class ChatScreen extends StatelessWidget {
       ChatController(conversation: conversation),
       tag: conversation.id,
     );
+    final isDark = AppTheme.isDark(context);
 
     return Scaffold(
-      backgroundColor: AppTheme.background,
+      backgroundColor: AppTheme.chatBackground(context),
-      appBar: _buildAppBar(conversation),
+      appBar: _buildAppBar(context, conversation, ctrl),
       body: Column(
         children: [
-          Expanded(child: _buildMessageList(ctrl)),
+          Expanded(child: _buildMessageList(context, ctrl)),
-          _buildInputBar(ctrl),
+          _buildInputBar(context, ctrl),
         ],
       ),
     );
   }
 
-  AppBar _buildAppBar(ConversationModel chat) => AppBar(
+  PreferredSizeWidget _buildAppBar(
-    backgroundColor: AppTheme.surface,
+    BuildContext context,
-    leadingWidth: 32,
+    ConversationModel chat,
-    title: Row(
+    ChatController ctrl,
-      children: [
+  ) {
-        _avatar(chat, radius: 18),
+    final isDark = AppTheme.isDark(context);
-        const SizedBox(width: 10),
+    return AppBar(
-        Expanded(
+      backgroundColor: AppTheme.surface(context),
-          child: Column(
+      leadingWidth: 36,
-            crossAxisAlignment: CrossAxisAlignment.start,
+      titleSpacing: 0,
-            children: [
+      title: InkWell(
-              Text(
+        onTap: () {}, // Future: open contact info
-                chat.name,
+        child: Row(
-                style: const TextStyle(
+          children: [
-                  color: AppTheme.textPrimary,
+            _buildAppBarAvatar(context, chat),
-                  fontSize: 16,
+            const SizedBox(width: 10),
-                  fontWeight: FontWeight.w600,
+            Expanded(
-                ),
+              child: Column(
-                overflow: TextOverflow.ellipsis,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    chat.name,
+                    style: TextStyle(
+                      color: isDark ? AppTheme.darkTextPrimary : Colors.white,
+                      fontSize: 16,
+                      fontWeight: FontWeight.w600,
+                    ),
+                    overflow: TextOverflow.ellipsis,
+                    maxLines: 1,
+                  ),
+                  // Status line
+                  _buildStatusLine(context, chat, ctrl),
+                ],
               ),
-              if (chat.isGroup)
+            ),
-                const Text(
+          ],
-                  'Group',
+        ),
-                  style: TextStyle(color: AppTheme.textSecondary, fontSize: 12),
+      ),
-                ),
+      actions: [
-            ],
+        IconButton(
+          icon: Icon(
+            Icons.videocam_outlined,
+            color: isDark ? AppTheme.darkTextSecondary : Colors.white,
           ),
+          onPressed: null,
+        ),
+        IconButton(
+          icon: Icon(
+            Icons.call_outlined,
+            color: isDark ? AppTheme.darkTextSecondary : Colors.white,
+          ),
+          onPressed: null,
+        ),
+        IconButton(
+          icon: Icon(
+            Icons.more_vert,
+            color: isDark ? AppTheme.darkTextSecondary : Colors.white,
+          ),
+          onPressed: null,
         ),
       ],
-    ),
+    );
-    actions: [
+  }
-      IconButton(
-        icon: const Icon(Icons.videocam_outlined, color: AppTheme.iconColor),
-        onPressed: null,
-      ),
-      IconButton(
-        icon: const Icon(Icons.call_outlined, color: AppTheme.iconColor),
-        onPressed: null,
-      ),
-      IconButton(
-        icon: const Icon(Icons.more_vert, color: AppTheme.iconColor),
-        onPressed: null,
-      ),
-    ],
-  );
 
-  Widget _buildMessageList(ChatController ctrl) {
+  Widget _buildStatusLine(
+    BuildContext context,
+    ConversationModel chat,
+    ChatController ctrl,
+  ) {
+    final isDark = AppTheme.isDark(context);
+    final color = isDark
+        ? AppTheme.darkTextSecondary
+        : Colors.white.withOpacity(0.85);
+
+    if (chat.isGroup) {
+      return Obx(() {
+        final count = ctrl.messages.length;
+        return Text(
+          count > 0 ? 'tap for group info' : 'Group',
+          style: TextStyle(color: color, fontSize: 12),
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+        );
+      });
+    }
+
+    // For 1:1 chats, show "online" placeholder or nothing
+    // (Real status would come from the bridge server)
+    return Text(
+      '',
+      style: TextStyle(color: color, fontSize: 12),
+    );
+  }
+
+  Widget _buildAppBarAvatar(BuildContext context, ConversationModel chat) {
+    final isDark = AppTheme.isDark(context);
+    final fallbackBg = isDark
+        ? const Color(0xff2a3942)
+        : Colors.white.withOpacity(0.25);
+
+    if (chat.avatar != null && chat.avatar!.isNotEmpty) {
+      return CircleAvatar(
+        radius: 18,
+        backgroundColor: fallbackBg,
+        child: ClipOval(
+          child: CachedNetworkImage(
+            imageUrl: chat.avatar!,
+            width: 36,
+            height: 36,
+            fit: BoxFit.cover,
+            placeholder: (_, __) => _defaultAvatarIcon(chat, fallbackBg),
+            errorWidget: (_, __, ___) => _defaultAvatarIcon(chat, fallbackBg),
+          ),
+        ),
+      );
+    }
+
+    return CircleAvatar(
+      radius: 18,
+      backgroundColor: fallbackBg,
+      child: _defaultAvatarIcon(chat, fallbackBg),
+    );
+  }
+
+  Widget _defaultAvatarIcon(ConversationModel chat, Color bg) {
+    return Icon(
+      chat.isGroup ? Icons.group : Icons.person,
+      color: Colors.white,
+      size: 20,
+    );
+  }
+
+  Widget _buildMessageList(BuildContext context, ChatController ctrl) {
     return Obx(() {
-      if (ctrl.isLoading.value) {
+      if (ctrl.isLoading.value && ctrl.messages.isEmpty) {
-        return const Center(
+        return Center(
           child: CircularProgressIndicator(color: AppTheme.primary),
         );
       }
-      
+
       final items = ctrl.groupedMessages;
       if (items.isEmpty) {
         return Center(
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: [
-              Icon(Icons.chat_bubble_outline, color: AppTheme.textSecondary.withOpacity(0.5), size: 48),
+              Icon(
+                Icons.chat_bubble_outline,
+                color: AppTheme.textSecondary(context).withOpacity(0.4),
+                size: 48,
+              ),
               const SizedBox(height: 12),
               Text(
                 'No messages yet',
-                style: TextStyle(color: AppTheme.textSecondary.withOpacity(0.8)),
+                style: TextStyle(
+                    color: AppTheme.textSecondary(context).withOpacity(0.8)),
               ),
             ],
           ),
@@ -105,198 +199,246 @@ class ChatScreen extends StatelessWidget {
 
       return ListView.builder(
         controller: ctrl.scrollCtrl,
-        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+        padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
         itemCount: items.length,
         itemBuilder: (_, i) {
           final item = items[i];
-          if (item is String) return _buildDateSeparator(item);
+          if (item is String) return _buildDateSeparator(context, item);
           return MessageBubble(message: item as MessageModel);
         },
       );
     });
   }
 
-  Widget _buildDateSeparator(String label) => Center(
+  Widget _buildDateSeparator(BuildContext context, String label) {
-    child: Container(
+    final isDark = AppTheme.isDark(context);
-      margin: const EdgeInsets.symmetric(vertical: 8),
+    return Center(
-      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+      child: Container(
-      decoration: BoxDecoration(
+        margin: const EdgeInsets.symmetric(vertical: 8),
-        color: AppTheme.surfaceLight,
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
-        borderRadius: BorderRadius.circular(12),
+        decoration: BoxDecoration(
-      ),
+          color: isDark
-      child: Text(
+              ? const Color(0xff1d2b33)
-        label,
+              : const Color(0xffd1f4cc),
-        style: const TextStyle(
+          borderRadius: BorderRadius.circular(8),
-          color: AppTheme.textSecondary,
+          boxShadow: [
-          fontSize: 12,
+            BoxShadow(
-          fontWeight: FontWeight.w500,
+              color: Colors.black.withOpacity(0.08),
+              blurRadius: 2,
+              offset: const Offset(0, 1),
+            ),
+          ],
+        ),
+        child: Text(
+          label,
+          style: TextStyle(
+            color: isDark
+                ? AppTheme.darkTextSecondary
+                : const Color(0xff54656f),
+            fontSize: 12,
+            fontWeight: FontWeight.w500,
+          ),
         ),
       ),
-    ),
+    );
-  );
+  }
 
-  Widget _buildInputBar(ChatController ctrl) => Container(
+  Widget _buildInputBar(BuildContext context, ChatController ctrl) {
-    color: AppTheme.surface,
+    final isDark = AppTheme.isDark(context);
-    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+    final barBg = isDark ? AppTheme.darkBackground : AppTheme.lightBackground;
-    child: SafeArea(
+    final inputBg = isDark ? AppTheme.darkSurfaceLight : AppTheme.lightSurfaceLight;
-      child: Obx(() {
+
-        if (ctrl.isRecording.value) {
+    return Container(
+      color: barBg,
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+      child: SafeArea(
+        child: Obx(() {
+          // ── Recording UI ─────────────────────────────────────────────────
+          if (ctrl.isRecording.value) {
+            return Row(
+              children: [
+                const SizedBox(width: 12),
+                const Icon(Icons.fiber_manual_record,
+                    color: Colors.red, size: 14),
+                const SizedBox(width: 6),
+                const Text(
+                  'Recording...',
+                  style: TextStyle(
+                      color: Colors.red,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 14),
+                ),
+                const SizedBox(width: 12),
+                Text(
+                  '${(ctrl.recordDuration.value ~/ 60).toString().padLeft(2, '0')}:${(ctrl.recordDuration.value % 60).toString().padLeft(2, '0')}',
+                  style: TextStyle(
+                      color: AppTheme.textPrimary(context),
+                      fontSize: 14,
+                      fontFeatures: [FontFeature.tabularFigures()]),
+                ),
+                const Spacer(),
+                TextButton.icon(
+                  icon: const Icon(Icons.delete,
+                      color: Colors.redAccent, size: 18),
+                  label: const Text('Cancel',
+                      style: TextStyle(color: Colors.redAccent)),
+                  onPressed: ctrl.cancelRecording,
+                ),
+                const SizedBox(width: 8),
+                GestureDetector(
+                  onTap: ctrl.stopAndSendRecording,
+                  child: Container(
+                    width: 44,
+                    height: 44,
+                    decoration: const BoxDecoration(
+                      color: AppTheme.primary,
+                      shape: BoxShape.circle,
+                    ),
+                    child: const Icon(Icons.check,
+                        color: Colors.white, size: 20),
+                  ),
+                ),
+                const SizedBox(width: 8),
+              ],
+            );
+          }
+
+          // ── Normal Input ─────────────────────────────────────────────────
           return Row(
+            crossAxisAlignment: CrossAxisAlignment.end,
             children: [
-              const SizedBox(width: 12),
+              // ── Text input field ─────────────────────────────────────────
-              const Icon(Icons.fiber_manual_record, color: Colors.red, size: 16),
+              Expanded(
-              const SizedBox(width: 8),
-              const Text(
-                'Recording...',
-                style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold, fontSize: 14),
-              ),
-              const SizedBox(width: 12),
-              Text(
-                '${(ctrl.recordDuration.value ~/ 60).toString().padLeft(2, '0')}:${(ctrl.recordDuration.value % 60).toString().padLeft(2, '0')}',
-                style: const TextStyle(color: AppTheme.textPrimary, fontSize: 14, fontFamily: 'monospace'),
-              ),
-              const Spacer(),
-              TextButton.icon(
-                icon: const Icon(Icons.delete, color: Colors.redAccent, size: 18),
-                label: const Text('Cancel', style: TextStyle(color: Colors.redAccent)),
-                onPressed: ctrl.cancelRecording,
-              ),
-              const SizedBox(width: 8),
-              GestureDetector(
-                onTap: ctrl.stopAndSendRecording,
                 child: Container(
-                  width: 44,
+                  decoration: BoxDecoration(
-                  height: 44,
+                    color: inputBg,
+                    borderRadius: BorderRadius.circular(24),
+                  ),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.end,
+                    children: [
+                      // Emoji button
+                      IconButton(
+                        icon: Icon(Icons.emoji_emotions_outlined,
+                            color: AppTheme.textSecondary(context)),
+                        onPressed: null,
+                        padding: const EdgeInsets.only(bottom: 2),
+                      ),
+                      Expanded(
+                        child: TextField(
+                          controller: ctrl.inputCtrl,
+                          style: TextStyle(
+                              color: AppTheme.textPrimary(context),
+                              fontSize: 15),
+                          maxLines: 5,
+                          minLines: 1,
+                          textCapitalization: TextCapitalization.sentences,
+                          decoration: InputDecoration(
+                            hintText: 'Message',
+                            hintStyle: TextStyle(
+                                color: AppTheme.textSecondary(context)),
+                            border: InputBorder.none,
+                            contentPadding: const EdgeInsets.symmetric(
+                              vertical: 10,
+                            ),
+                          ),
+                        ),
+                      ),
+                      // Attachment button
+                      IconButton(
+                        icon: Icon(Icons.attach_file,
+                            color: AppTheme.textSecondary(context)),
+                        onPressed: () => _showAttachmentSheet(context, ctrl),
+                        padding: const EdgeInsets.only(bottom: 2),
+                      ),
+                      // Camera button (only when no text)
+                      Obx(() => ctrl.hasText.value
+                          ? const SizedBox.shrink()
+                          : IconButton(
+                              icon: Icon(Icons.camera_alt_outlined,
+                                  color: AppTheme.textSecondary(context)),
+                              onPressed: () =>
+                                  _pickAndSendImage(ctrl, ImageSource.camera),
+                              padding: const EdgeInsets.only(bottom: 2, right: 4),
+                            )),
+                    ],
+                  ),
+                ),
+              ),
+              const SizedBox(width: 8),
+
+              // ── Send / Mic button ─────────────────────────────────────────
+              GestureDetector(
+                onTap: () {
+                  if (ctrl.hasText.value) {
+                    ctrl.sendMessage();
+                  } else {
+                    ctrl.startRecording();
+                  }
+                },
+                child: AnimatedContainer(
+                  duration: const Duration(milliseconds: 200),
+                  width: 48,
+                  height: 48,
                   decoration: const BoxDecoration(
                     color: AppTheme.primary,
                     shape: BoxShape.circle,
                   ),
-                  child: const Icon(Icons.check, color: Colors.white, size: 20),
+                  child: ctrl.isSending.value
+                      ? const Padding(
+                          padding: EdgeInsets.all(13),
+                          child: CircularProgressIndicator(
+                            strokeWidth: 2,
+                            color: Colors.white,
+                          ),
+                        )
+                      : Obx(() => Icon(
+                            ctrl.hasText.value
+                                ? Icons.send_rounded
+                                : Icons.mic_rounded,
+                            color: Colors.white,
+                            size: 22,
+                          )),
                 ),
               ),
-              const SizedBox(width: 8),
             ],
           );
-        }
+        }),
+      ),
+    );
+  }
 
-        return Row(
+  void _showAttachmentSheet(BuildContext context, ChatController ctrl) {
-          children: [
+    final isDark = AppTheme.isDark(context);
-            // Attachment button
-            IconButton(
-              icon: const Icon(Icons.add, color: AppTheme.primary, size: 28),
-              onPressed: () => _showAttachmentSheet(ctrl),
-            ),
-            // Input
-            Expanded(
-              child: TextField(
-                controller: ctrl.inputCtrl,
-                style: const TextStyle(color: AppTheme.textPrimary),
-                maxLines: 5,
-                minLines: 1,
-                textCapitalization: TextCapitalization.sentences,
-                decoration: InputDecoration(
-                  hintText: 'Message',
-                  hintStyle: const TextStyle(color: AppTheme.textSecondary),
-                  filled: true,
-                  fillColor: AppTheme.surfaceLight,
-                  contentPadding: const EdgeInsets.symmetric(
-                    horizontal: 16, vertical: 10,
-                  ),
-                  border: OutlineInputBorder(
-                    borderRadius: BorderRadius.circular(24),
-                    borderSide: BorderSide.none,
-                  ),
-                ),
-                onSubmitted: (_) => ctrl.sendMessage(),
-              ),
-            ),
-            const SizedBox(width: 8),
-            // Dynamic Send / Mic Button
-            GestureDetector(
-              onTap: () {
-                if (ctrl.hasText.value) {
-                  ctrl.sendMessage();
-                } else {
-                  ctrl.startRecording();
-                }
-              },
-              child: AnimatedContainer(
-                duration: const Duration(milliseconds: 200),
-                width: 48,
-                height: 48,
-                decoration: const BoxDecoration(
-                  color: AppTheme.primary,
-                  shape: BoxShape.circle,
-                ),
-                child: ctrl.isSending.value
-                    ? const Padding(
-                        padding: EdgeInsets.all(12),
-                        child: CircularProgressIndicator(
-                          strokeWidth: 2,
-                          color: Colors.white,
-                        ),
-                      )
-                    : Icon(
-                        ctrl.hasText.value ? Icons.send : Icons.mic,
-                        color: Colors.white,
-                        size: 20,
-                      ),
-              ),
-            ),
-            const SizedBox(width: 4),
-          ],
-        );
-      }),
-    ),
-  );
-
-  void _showAttachmentSheet(ChatController ctrl) {
     Get.bottomSheet(
       Container(
-        decoration: const BoxDecoration(
+        decoration: BoxDecoration(
-          color: AppTheme.surface,
+          color: isDark ? AppTheme.darkSurface : Colors.white,
-          borderRadius: BorderRadius.only(
+          borderRadius: const BorderRadius.only(
             topLeft: Radius.circular(20),
             topRight: Radius.circular(20),
           ),
         ),
-        padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 16),
+        padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
             Container(
-              width: 40,
+              width: 36,
               height: 4,
               decoration: BoxDecoration(
-                color: AppTheme.textSecondary.withOpacity(0.3),
+                color: AppTheme.textSecondary(context).withOpacity(0.3),
                 borderRadius: BorderRadius.circular(2),
               ),
             ),
-            const SizedBox(height: 24),
+            const SizedBox(height: 20),
-            const Text(
-              'Send Media Attachment',
-              style: TextStyle(
-                color: AppTheme.textPrimary,
-                fontSize: 18,
-                fontWeight: FontWeight.bold,
-              ),
-            ),
-            const SizedBox(height: 24),
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
                 _buildAttachmentItem(
-                  icon: Icons.camera_alt,
+                  context: context,
-                  color: Colors.green,
+                  icon: Icons.photo_library_rounded,
-                  label: 'Camera',
+                  color: const Color(0xff7c4dff),
-                  onTap: () {
-                    Get.back();
-                    _pickAndSendImage(ctrl, ImageSource.camera);
-                  },
-                ),
-                _buildAttachmentItem(
-                  icon: Icons.photo_library,
-                  color: Colors.purple,
                   label: 'Gallery',
                   onTap: () {
                     Get.back();
@@ -304,23 +446,34 @@ class ChatScreen extends StatelessWidget {
                   },
                 ),
                 _buildAttachmentItem(
-                  icon: Icons.mic,
+                  context: context,
-                  color: Colors.orange,
+                  icon: Icons.camera_alt_rounded,
-                  label: 'Voice Note',
+                  color: const Color(0xffff4081),
+                  label: 'Camera',
                   onTap: () {
                     Get.back();
-                    // 100% valid MP3 silent audio base64 snippet to prevent getAudioDuration errors
+                    _pickAndSendImage(ctrl, ImageSource.camera);
-                    const base64Audio = 'SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV////////////////////////////////////////////AAAAAExhdmM1OC4xMwAAAAAAAAAAAAAAACQDkAAAAAAAAAGw9wrNaQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+MYxAAAAANIAAAAAExBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDsAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxHYAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV';
+                  },
-                    ctrl.sendMediaMessage(
+                ),
-                      base64Audio,
+                _buildAttachmentItem(
-                      'audio/mp3',
+                  context: context,
-                      'voice_note.mp3',
+                  icon: Icons.insert_drive_file_rounded,
-                    );
+                  color: const Color(0xff2196f3),
+                  label: 'Document',
+                  onTap: () => Get.back(),
+                ),
+                _buildAttachmentItem(
+                  context: context,
+                  icon: Icons.mic_rounded,
+                  color: const Color(0xffff9800),
+                  label: 'Audio',
+                  onTap: () {
+                    Get.back();
+                    ctrl.startRecording();
                   },
                 ),
               ],
             ),
-            const SizedBox(height: 16),
           ],
         ),
       ),
@@ -339,7 +492,7 @@ class ChatScreen extends StatelessWidget {
 
       final bytes = await image.readAsBytes();
       final base64String = base64Encode(bytes);
-      
+
       String mimetype = 'image/jpeg';
       if (image.path.toLowerCase().endsWith('.png')) {
         mimetype = 'image/png';
@@ -351,7 +504,6 @@ class ChatScreen extends StatelessWidget {
         base64String,
         mimetype,
         image.name,
-        caption: '📸 Photo sent via Mywhatsapp!',
       );
     } catch (e) {
       Get.snackbar(
@@ -364,48 +516,34 @@ class ChatScreen extends StatelessWidget {
   }
 
   Widget _buildAttachmentItem({
+    required BuildContext context,
     required IconData icon,
     required Color color,
     required String label,
     required VoidCallback onTap,
   }) {
+    final isDark = AppTheme.isDark(context);
     return GestureDetector(
       onTap: onTap,
       child: Column(
         children: [
-          CircleAvatar(
+          Container(
-            radius: 28,
+            width: 54,
-            backgroundColor: color.withOpacity(0.15),
+            height: 54,
-            child: Icon(icon, color: color, size: 28),
+            decoration: BoxDecoration(
+              color: color.withOpacity(0.12),
+              shape: BoxShape.circle,
+            ),
+            child: Icon(icon, color: color, size: 26),
           ),
           const SizedBox(height: 8),
           Text(
             label,
-            style: const TextStyle(color: AppTheme.textPrimary, fontSize: 12),
+            style: TextStyle(
+                color: AppTheme.textPrimary(context), fontSize: 12),
           ),
         ],
       ),
     );
   }
-
-  Widget _avatar(ConversationModel chat, {double radius = 24}) {
-    if (chat.avatar != null) {
-      return CircleAvatar(
-        radius: radius,
-        backgroundImage: NetworkImage(chat.avatar!),
-        backgroundColor: AppTheme.surfaceLight,
-      );
-    }
-    return CircleAvatar(
-      radius: radius,
-      backgroundColor: AppTheme.primaryDark,
-      child: Text(
-        chat.name.isNotEmpty ? chat.name[0].toUpperCase() : '?',
-        style: const TextStyle(
-          color: Colors.white,
-          fontWeight: FontWeight.bold,
-        ),
-      ),
-    );
-  }
 }

whatsapp_app/lib/screens/conversations_screen.dart

@@ -15,134 +15,202 @@ class ConversationsScreen extends StatelessWidget {
   Widget build(BuildContext context) {
     final svc  = Get.find<WhatsAppService>();
     final ctrl = Get.put(ConversationsController());
+    final isDark = AppTheme.isDark(context);
 
     return Scaffold(
-      backgroundColor: AppTheme.background,
+      backgroundColor: AppTheme.background(context),
-      appBar: _buildAppBar(ctrl),
+      appBar: _buildAppBar(context, ctrl),
       body: Obx(() {
         // Not connected
         if (svc.status.value == WsStatus.disconnected ||
             svc.status.value == WsStatus.connecting) {
-          return _buildConnecting();
+          return _buildConnecting(context);
         }
         // QR Code needed
         if (svc.qrData.value != null) {
           return const QrView();
         }
         // Loading conversations
-        if (ctrl.isLoading.value) {
+        if (ctrl.isLoading.value && ctrl.conversations.isEmpty) {
-          return const Center(
+          return Center(
             child: CircularProgressIndicator(color: AppTheme.primary),
           );
         }
         // Error
-        if (ctrl.errorMessage.value != null) {
+        if (ctrl.errorMessage.value != null && ctrl.conversations.isEmpty) {
-          return _buildError(ctrl);
+          return _buildError(context, ctrl);
         }
         // Empty
         if (ctrl.conversations.isEmpty) {
-          return _buildEmpty();
+          return _buildEmpty(context);
         }
         // List
-        return _buildList(ctrl);
+        return _buildList(context, ctrl);
       }),
     );
   }
 
-  AppBar _buildAppBar(ConversationsController ctrl) {
+  PreferredSizeWidget _buildAppBar(
+      BuildContext context, ConversationsController ctrl) {
     final searching = false.obs;
+    final isDark = AppTheme.isDark(context);
 
     return AppBar(
-      backgroundColor: AppTheme.surface,
+      backgroundColor: AppTheme.surface(context),
+      elevation: 0,
       title: Obx(() => searching.value
           ? TextField(
               autofocus: true,
-              style: const TextStyle(color: AppTheme.textPrimary),
+              style: TextStyle(color: isDark ? Colors.white : Colors.white),
-              decoration: const InputDecoration(
+              cursorColor: Colors.white,
+              decoration: InputDecoration(
                 hintText: 'Search...',
                 border: InputBorder.none,
-                hintStyle: TextStyle(color: AppTheme.textSecondary),
+                hintStyle: TextStyle(
+                    color: Colors.white.withOpacity(0.7)),
               ),
               onChanged: ctrl.search,
             )
-          : const Text('WhatsApp', style: TextStyle(color: AppTheme.textPrimary))),
+          : const Text(
+              'WhatsApp',
+              style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 20,
+              ),
+            )),
       actions: [
         Obx(() => IconButton(
+              icon: Icon(
+                searching.value ? Icons.close : Icons.search,
+                color: isDark ? AppTheme.darkTextSecondary : Colors.white,
+              ),
+              onPressed: () {
+                searching.value = !searching.value;
+                if (!searching.value) ctrl.loadConversations();
+              },
+            )),
+        IconButton(
           icon: Icon(
-            searching.value ? Icons.close : Icons.search,
+            Icons.more_vert,
-            color: AppTheme.iconColor,
+            color: isDark ? AppTheme.darkTextSecondary : Colors.white,
+          ),
+          onPressed: () => _showOptionsMenu(context, ctrl),
+        ),
+      ],
+      bottom: PreferredSize(
+        preferredSize: const Size.fromHeight(1),
+        child: Container(
+          height: 1,
+          color: isDark
+              ? Colors.white.withOpacity(0.08)
+              : Colors.white.withOpacity(0.15),
+        ),
+      ),
+    );
+  }
+
+  void _showOptionsMenu(
+      BuildContext context, ConversationsController ctrl) {
+    showMenu(
+      context: context,
+      position: const RelativeRect.fromLTRB(1000, 56, 0, 0),
+      color: AppTheme.isDark(context)
+          ? AppTheme.darkSurface
+          : Colors.white,
+      items: [
+        PopupMenuItem(
+          onTap: ctrl.loadConversations,
+          child: Text(
+            'Refresh',
+            style: TextStyle(color: AppTheme.textPrimary(context)),
           ),
-          onPressed: () {
-            searching.value = !searching.value;
-            if (!searching.value) ctrl.loadConversations();
-          },
-        )),
-        PopupMenuButton<String>(
-          icon: const Icon(Icons.more_vert, color: AppTheme.iconColor),
-          color: AppTheme.surface,
-          onSelected: (v) {
-            if (v == 'refresh') ctrl.loadConversations();
-          },
-          itemBuilder: (_) => [
-            const PopupMenuItem(
-              value: 'refresh',
-              child: Text('Refresh', style: TextStyle(color: AppTheme.textPrimary)),
-            ),
-          ],
         ),
       ],
     );
   }
 
-  Widget _buildConnecting() => Center(
+  Widget _buildConnecting(BuildContext context) => Center(
-    child: Column(
+        child: Column(
-      mainAxisSize: MainAxisSize.min,
+          mainAxisSize: MainAxisSize.min,
-      children: [
+          children: [
-        const CircularProgressIndicator(color: AppTheme.primary),
+            CircularProgressIndicator(color: AppTheme.primary),
-        const SizedBox(height: 16),
+            const SizedBox(height: 16),
-        Text(
+            Text(
-          'Connecting to server...',
+              'Connecting to server...',
-          style: TextStyle(color: AppTheme.textSecondary),
+              style:
+                  TextStyle(color: AppTheme.textSecondary(context)),
+            ),
+          ],
         ),
-      ],
+      );
-    ),
-  );
 
-  Widget _buildError(ConversationsController ctrl) => Center(
+  Widget _buildError(
-    child: Column(
+          BuildContext context, ConversationsController ctrl) =>
-      mainAxisSize: MainAxisSize.min,
+      Center(
-      children: [
+        child: Padding(
-        const Icon(Icons.error_outline, color: Colors.redAccent, size: 48),
+          padding: const EdgeInsets.all(24),
-        const SizedBox(height: 12),
+          child: Column(
-        Text(
+            mainAxisSize: MainAxisSize.min,
-          ctrl.errorMessage.value ?? 'Error',
+            children: [
-          style: const TextStyle(color: AppTheme.textSecondary),
+              const Icon(Icons.error_outline,
-          textAlign: TextAlign.center,
+                  color: Colors.redAccent, size: 48),
+              const SizedBox(height: 12),
+              Text(
+                ctrl.errorMessage.value ?? 'Error',
+                style: TextStyle(
+                    color: AppTheme.textSecondary(context)),
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 16),
+              ElevatedButton(
+                onPressed: ctrl.loadConversations,
+                style: ElevatedButton.styleFrom(
+                    backgroundColor: AppTheme.primary),
+                child: const Text('Retry',
+                    style: TextStyle(color: Colors.white)),
+              ),
+            ],
+          ),
         ),
-        const SizedBox(height: 16),
+      );
-        ElevatedButton(
+
-          onPressed: ctrl.loadConversations,
+  Widget _buildEmpty(BuildContext context) => Center(
-          style: ElevatedButton.styleFrom(backgroundColor: AppTheme.primary),
+        child: Column(
-          child: const Text('Retry'),
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(Icons.chat_bubble_outline,
+                size: 64,
+                color:
+                    AppTheme.textSecondary(context).withOpacity(0.4)),
+            const SizedBox(height: 16),
+            Text(
+              'No conversations yet',
+              style: TextStyle(
+                  color: AppTheme.textSecondary(context),
+                  fontSize: 16),
+            ),
+          ],
         ),
-      ],
+      );
-    ),
-  );
 
-  Widget _buildEmpty() => const Center(
+  Widget _buildList(
-    child: Text(
+      BuildContext context, ConversationsController ctrl) {
-      'No conversations found',
-      style: TextStyle(color: AppTheme.textSecondary),
-    ),
-  );
-
-  Widget _buildList(ConversationsController ctrl) {
     return RefreshIndicator(
       color: AppTheme.primary,
-      backgroundColor: AppTheme.surface,
+      backgroundColor: AppTheme.isDark(context)
+          ? AppTheme.darkSurface
+          : Colors.white,
       onRefresh: ctrl.loadConversations,
-      child: ListView.builder(
+      child: ListView.separated(
         itemCount: ctrl.conversations.length,
+        separatorBuilder: (_, __) => Divider(
+          height: 1,
+          thickness: 0.5,
+          indent: 76,
+          color: AppTheme.isDark(context)
+              ? Colors.white.withOpacity(0.06)
+              : Colors.black.withOpacity(0.08),
+        ),
         itemBuilder: (_, i) {
           final chat = ctrl.conversations[i];
           return ConversationTile(

whatsapp_app/lib/screens/qr_screen.dart

@@ -20,40 +20,41 @@ class QrView extends StatelessWidget {
             const Icon(Icons.qr_code_scanner,
                 color: AppTheme.primary, size: 64),
             const SizedBox(height: 16),
-            const Text(
+            Text(
               'Link with your phone',
               style: TextStyle(
-                color: AppTheme.textPrimary,
+                color: AppTheme.textPrimary(context),
                 fontSize: 22,
                 fontWeight: FontWeight.bold,
               ),
             ),
             const SizedBox(height: 12),
             Container(
-              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              padding:
+                  const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
               decoration: BoxDecoration(
-                color: AppTheme.surfaceLight,
+                color: AppTheme.surfaceLight(context),
                 borderRadius: BorderRadius.circular(8),
               ),
-              child: const Column(
+              child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   Text(
                     '1. Open WhatsApp on your phone',
-                    style:
+                    style: TextStyle(
-                        TextStyle(color: AppTheme.textSecondary, fontSize: 14),
+                        color: AppTheme.textSecondary(context), fontSize: 14),
                   ),
-                  SizedBox(height: 4),
+                  const SizedBox(height: 4),
                   Text(
                     '2. Tap Menu (⋮ or ⚙️) → Linked Devices',
-                    style:
+                    style: TextStyle(
-                        TextStyle(color: AppTheme.textSecondary, fontSize: 14),
+                        color: AppTheme.textSecondary(context), fontSize: 14),
                   ),
-                  SizedBox(height: 4),
+                  const SizedBox(height: 4),
                   Text(
                     '3. Tap "Link a Device" and scan this QR code',
-                    style:
+                    style: TextStyle(
-                        TextStyle(color: AppTheme.textSecondary, fontSize: 14),
+                        color: AppTheme.textSecondary(context), fontSize: 14),
                   ),
                 ],
               ),
@@ -66,13 +67,21 @@ class QrView extends StatelessWidget {
               }
 
               try {
-                final base64Image = qr.contains(',') ? qr.split(',')[1] : qr;
+                final base64Image =
+                    qr.contains(',') ? qr.split(',')[1] : qr;
                 final bytes = base64Decode(base64Image);
                 return Container(
                   padding: const EdgeInsets.all(12),
                   decoration: BoxDecoration(
                     color: Colors.white,
                     borderRadius: BorderRadius.circular(16),
+                    boxShadow: [
+                      BoxShadow(
+                        color: Colors.black.withOpacity(0.15),
+                        blurRadius: 12,
+                        offset: const Offset(0, 4),
+                      )
+                    ],
                   ),
                   child: Image.memory(
                     bytes,
@@ -89,7 +98,8 @@ class QrView extends StatelessWidget {
                     const SizedBox(height: 8),
                     Text(
                       'Failed to render QR Code: $e',
-                      style: const TextStyle(color: AppTheme.textSecondary),
+                      style: TextStyle(
+                          color: AppTheme.textSecondary(context)),
                     ),
                   ],
                 );
@@ -98,7 +108,8 @@ class QrView extends StatelessWidget {
             const SizedBox(height: 16),
             Text(
               'Waiting for QR Code from WhatsApp...',
-              style: TextStyle(color: AppTheme.textSecondary, fontSize: 12),
+              style: TextStyle(
+                  color: AppTheme.textSecondary(context), fontSize: 12),
             ),
           ],
         ),

whatsapp_app/lib/theme/app_theme.dart

@@ -1,39 +1,56 @@
 import 'package:flutter/material.dart';
 
 class AppTheme {
-  // Dark WhatsApp Palette
+  // ── WhatsApp Dark Palette ────────────────────────────────────────────────
-  static const Color background     = Color(0xff111b21);
+  static const Color darkBackground   = Color(0xff111b21);
-  static const Color surface        = Color(0xff1f2c34);
+  static const Color darkSurface      = Color(0xff1f2c34);
-  static const Color surfaceLight   = Color(0xff2a3942);
+  static const Color darkSurfaceLight = Color(0xff2a3942);
-  static const Color primary        = Color(0xff00a884);
+  static const Color darkOutgoingMsg  = Color(0xff005c4b);
-  static const Color primaryDark    = Color(0xff005c4b);
+  static const Color darkIncomingMsg  = Color(0xff1f2c34);
-  
+  static const Color darkTextPrimary  = Color(0xffe9edef);
-  static const Color outgoingMsg    = Color(0xff005c4b);
+  static const Color darkTextSecondary= Color(0xff8696a0);
-  static const Color incomingMsg    = Color(0xff1f2c34);
-  
-  static const Color textPrimary    = Color(0xffe9edef);
-  static const Color textSecondary  = Color(0xff8696a0);
-  static const Color iconColor      = Color(0xff8696a0);
 
+  // ── WhatsApp Light Palette ───────────────────────────────────────────────
+  static const Color lightBackground   = Color(0xffffffff);
+  static const Color lightSurface      = Color(0xff075e54); // WhatsApp green header
+  static const Color lightSurfaceLight = Color(0xfff0f2f5);
+  static const Color lightOutgoingMsg  = Color(0xffd9fdd3);
+  static const Color lightIncomingMsg  = Color(0xffffffff);
+  static const Color lightTextPrimary  = Color(0xff111b21);
+  static const Color lightTextSecondary= Color(0xff667781);
+  static const Color lightChatBg      = Color(0xffe5ddd5); // WhatsApp chat wallpaper bg
+
+  // ── Shared Colors ────────────────────────────────────────────────────────
+  static const Color primary     = Color(0xff25d366); // WhatsApp green
+  static const Color primaryDark = Color(0xff128c7e);
+  static const Color teal        = Color(0xff075e54);
+  static const Color blueTick    = Color(0xff53bdeb); // WhatsApp blue double tick
+  static const Color greyTick    = Color(0xff667781);
+
+  // ── Dark Theme ───────────────────────────────────────────────────────────
   static ThemeData get dark {
-    return ThemeData.dark().copyWith(
+    return ThemeData(
-      scaffoldBackgroundColor: background,
+      brightness: Brightness.dark,
-      primaryColor: primary,
+      scaffoldBackgroundColor: darkBackground,
+      primaryColor: teal,
       colorScheme: const ColorScheme.dark(
         primary: primary,
-        background: background,
+        secondary: primaryDark,
-        surface: surface,
+        surface: darkSurface,
+        background: darkBackground,
       ),
       appBarTheme: const AppBarTheme(
-        backgroundColor: surface,
+        backgroundColor: darkSurface,
+        foregroundColor: darkTextPrimary,
         elevation: 0,
-        iconTheme: IconThemeData(color: iconColor),
+        iconTheme: IconThemeData(color: darkTextSecondary),
         titleTextStyle: TextStyle(
-          color: textPrimary,
+          color: darkTextPrimary,
           fontSize: 20,
           fontWeight: FontWeight.bold,
         ),
       ),
+      dividerColor: darkSurfaceLight,
       textSelectionTheme: const TextSelectionThemeData(
         cursorColor: primary,
         selectionColor: primaryDark,
@@ -41,4 +58,70 @@ class AppTheme {
       ),
     );
   }
+
+  // ── Light Theme ──────────────────────────────────────────────────────────
+  static ThemeData get light {
+    return ThemeData(
+      brightness: Brightness.light,
+      scaffoldBackgroundColor: lightBackground,
+      primaryColor: teal,
+      colorScheme: const ColorScheme.light(
+        primary: teal,
+        secondary: primary,
+        surface: lightSurface,
+        background: lightBackground,
+      ),
+      appBarTheme: const AppBarTheme(
+        backgroundColor: teal,
+        foregroundColor: Colors.white,
+        elevation: 0,
+        iconTheme: IconThemeData(color: Colors.white),
+        titleTextStyle: TextStyle(
+          color: Colors.white,
+          fontSize: 20,
+          fontWeight: FontWeight.bold,
+        ),
+      ),
+      dividerColor: Color(0xffe0e0e0),
+      textSelectionTheme: const TextSelectionThemeData(
+        cursorColor: teal,
+        selectionColor: primary,
+        selectionHandleColor: teal,
+      ),
+    );
+  }
+
+  // ── Context-aware helpers ─────────────────────────────────────────────────
+  static bool isDark(BuildContext context) =>
+      Theme.of(context).brightness == Brightness.dark;
+
+  static Color background(BuildContext context) =>
+      isDark(context) ? darkBackground : lightBackground;
+
+  static Color surface(BuildContext context) =>
+      isDark(context) ? darkSurface : lightSurface;
+
+  static Color surfaceLight(BuildContext context) =>
+      isDark(context) ? darkSurfaceLight : lightSurfaceLight;
+
+  static Color outgoingMsg(BuildContext context) =>
+      isDark(context) ? darkOutgoingMsg : lightOutgoingMsg;
+
+  static Color incomingMsg(BuildContext context) =>
+      isDark(context) ? darkIncomingMsg : lightIncomingMsg;
+
+  static Color chatBackground(BuildContext context) =>
+      isDark(context) ? darkBackground : lightChatBg;
+
+  static Color textPrimary(BuildContext context) =>
+      isDark(context) ? darkTextPrimary : lightTextPrimary;
+
+  static Color textSecondary(BuildContext context) =>
+      isDark(context) ? darkTextSecondary : lightTextSecondary;
+
+  static Color iconColor(BuildContext context) =>
+      isDark(context) ? darkTextSecondary : Colors.white;
+
+  static Color subtitleIconColor(BuildContext context) =>
+      isDark(context) ? darkTextSecondary : lightTextSecondary;
 }

whatsapp_app/lib/widgets/conversation_tile.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:intl/intl.dart';
 import '../models/conversation_model.dart';
 import '../theme/app_theme.dart';
@@ -17,117 +18,217 @@ class ConversationTile extends StatelessWidget {
   Widget build(BuildContext context) {
     final lastMsg = conversation.lastMessage;
     final hasUnread = conversation.unreadCount > 0;
+    final isDark = AppTheme.isDark(context);
 
-    return ListTile(
+    return InkWell(
       onTap: onTap,
-      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+      child: Container(
-      leading: _buildAvatar(),
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
-      title: Row(
-        children: [
-          Expanded(
-            child: Text(
-              conversation.name,
-              style: const TextStyle(
-                color: AppTheme.textPrimary,
-                fontSize: 16,
-                fontWeight: FontWeight.w600,
-              ),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-            ),
-          ),
-          const SizedBox(width: 8),
-          Text(
-            _formatTime(conversation.timestamp),
-            style: TextStyle(
-              color: hasUnread ? AppTheme.primary : AppTheme.textSecondary,
-              fontSize: 12,
-              fontWeight: hasUnread ? FontWeight.bold : FontWeight.normal,
-            ),
-          ),
-        ],
-      ),
-      subtitle: Padding(
-        padding: const EdgeInsets.only(top: 4.0),
         child: Row(
           children: [
-            if (lastMsg != null && lastMsg.fromMe) ...[
+            // ── Avatar ──────────────────────────────────────────────────────
-              const Icon(Icons.done_all, size: 16, color: AppTheme.primary), // Or proper ACK double tick
+            _buildAvatar(context, conversation),
-              const SizedBox(width: 4),
+            const SizedBox(width: 12),
-            ],
+
+            // ── Content ─────────────────────────────────────────────────────
             Expanded(
-              child: Text(
+              child: Column(
-                _getSubtitleText(lastMsg),
+                crossAxisAlignment: CrossAxisAlignment.start,
-                style: const TextStyle(
+                children: [
-                  color: AppTheme.textSecondary,
+                  // Name row + time
-                  fontSize: 14,
+                  Row(
-                ),
+                    children: [
-                maxLines: 1,
+                      Expanded(
-                overflow: TextOverflow.ellipsis,
+                        child: Text(
+                          conversation.name,
+                          style: TextStyle(
+                            color: AppTheme.textPrimary(context),
+                            fontSize: 16.5,
+                            fontWeight: FontWeight.w600,
+                          ),
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                      ),
+                      const SizedBox(width: 6),
+                      Text(
+                        _formatTime(conversation.timestamp),
+                        style: TextStyle(
+                          color: hasUnread
+                              ? AppTheme.primary
+                              : AppTheme.textSecondary(context),
+                          fontSize: 12,
+                          fontWeight:
+                              hasUnread ? FontWeight.w600 : FontWeight.normal,
+                        ),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 4),
+
+                  // Subtitle row: ack icon + preview + badges
+                  Row(
+                    children: [
+                      // ── ACK icon for sent messages ───────────────────────
+                      if (lastMsg != null && lastMsg.fromMe) ...[
+                        _buildAckIcon(context, lastMsg.ack),
+                        const SizedBox(width: 3),
+                      ],
+
+                      // ── Message preview ──────────────────────────────────
+                      Expanded(
+                        child: Text(
+                          _getSubtitleText(context, lastMsg),
+                          style: TextStyle(
+                            color: AppTheme.textSecondary(context),
+                            fontSize: 14,
+                          ),
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                      ),
+
+                      // ── Trailing badges ──────────────────────────────────
+                      if (conversation.isMuted) ...[
+                        const SizedBox(width: 4),
+                        Icon(Icons.volume_off,
+                            size: 15, color: AppTheme.textSecondary(context)),
+                      ],
+                      if (conversation.pinned) ...[
+                        const SizedBox(width: 4),
+                        Icon(Icons.push_pin,
+                            size: 15, color: AppTheme.textSecondary(context)),
+                      ],
+                      if (hasUnread) ...[
+                        const SizedBox(width: 6),
+                        _buildUnreadBadge(conversation.unreadCount),
+                      ],
+                    ],
+                  ),
+                ],
               ),
             ),
-            if (conversation.isMuted) ...[
-              const SizedBox(width: 8),
-              const Icon(Icons.volume_off, size: 16, color: AppTheme.textSecondary),
-            ],
-            if (conversation.pinned) ...[
-              const SizedBox(width: 8),
-              const Icon(Icons.push_pin, size: 16, color: AppTheme.textSecondary),
-            ],
-            if (hasUnread) ...[
-              const SizedBox(width: 8),
-              Container(
-                padding: const EdgeInsets.all(6),
-                decoration: const BoxDecoration(
-                  color: AppTheme.primary,
-                  shape: BoxShape.circle,
-                ),
-                child: Text(
-                  conversation.unreadCount.toString(),
-                  style: const TextStyle(
-                    color: Colors.black,
-                    fontSize: 12,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-              ),
-            ],
           ],
         ),
       ),
     );
   }
 
-  Widget _buildAvatar() {
+  // ── Avatar builder (cached network image + fallback initials) ─────────────
-    if (conversation.avatar != null) {
+  Widget _buildAvatar(BuildContext context, ConversationModel c) {
+    final isDark = AppTheme.isDark(context);
+    final fallbackBg =
+        isDark ? const Color(0xff2a3942) : const Color(0xff6b7c85);
+
+    if (c.avatar != null && c.avatar!.isNotEmpty) {
       return CircleAvatar(
-        radius: 26,
+        radius: 28,
-        backgroundImage: NetworkImage(conversation.avatar!),
+        backgroundColor: fallbackBg,
-        backgroundColor: AppTheme.surfaceLight,
+        child: ClipOval(
+          child: CachedNetworkImage(
+            imageUrl: c.avatar!,
+            width: 56,
+            height: 56,
+            fit: BoxFit.cover,
+            placeholder: (_, __) => _initialsAvatar(c.name, fallbackBg),
+            errorWidget: (_, __, ___) => _initialsAvatar(c.name, fallbackBg),
+          ),
+        ),
       );
     }
+
+    // Group icon or person icon
+    if (c.isGroup) {
+      return CircleAvatar(
+        radius: 28,
+        backgroundColor: fallbackBg,
+        child: const Icon(Icons.group, color: Colors.white, size: 30),
+      );
+    }
+
     return CircleAvatar(
-      radius: 26,
+      radius: 28,
-      backgroundColor: AppTheme.primaryDark,
+      backgroundColor: fallbackBg,
-      child: Text(
+      child: _initialsAvatar(c.name, fallbackBg),
-        conversation.name.isNotEmpty ? conversation.name[0].toUpperCase() : '?',
+    );
-        style: const TextStyle(
+  }
-          color: Colors.white,
+
-          fontSize: 18,
+  Widget _initialsAvatar(String name, Color bg) {
-          fontWeight: FontWeight.bold,
+    return Container(
-        ),
+      width: 56,
+      height: 56,
+      color: bg,
+      alignment: Alignment.center,
+      child: Icon(
+        Icons.person,
+        color: Colors.white,
+        size: 30,
       ),
     );
   }
 
-  String _getSubtitleText(LastMessageModel? lastMsg) {
+  // ── Unread badge ──────────────────────────────────────────────────────────
+  Widget _buildUnreadBadge(int count) {
+    return Container(
+      constraints: const BoxConstraints(minWidth: 20, minHeight: 20),
+      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+      decoration: const BoxDecoration(
+        color: AppTheme.primary,
+        shape: BoxShape.circle,
+      ),
+      child: Text(
+        count > 99 ? '99+' : count.toString(),
+        style: const TextStyle(
+          color: Colors.white,
+          fontSize: 11.5,
+          fontWeight: FontWeight.bold,
+        ),
+        textAlign: TextAlign.center,
+      ),
+    );
+  }
+
+  // ── ACK (delivery status) icon ────────────────────────────────────────────
+  // Real WhatsApp ACK levels from whatsapp-web.js:
+  //  -1 = error      → clock (pending/error)
+  //   0 = pending    → clock
+  //   1 = sent       → single grey tick
+  //   2 = received   → double grey tick
+  //   3 = read/played→ double blue tick
+  Widget _buildAckIcon(BuildContext context, int ack) {
+    switch (ack) {
+      case -1:
+      case 0:
+        // Pending / clock
+        return Icon(Icons.access_time_rounded,
+            size: 14, color: AppTheme.textSecondary(context));
+      case 1:
+        // Sent — single grey tick
+        return Icon(Icons.check_rounded,
+            size: 15, color: AppTheme.textSecondary(context));
+      case 2:
+        // Delivered — double grey tick
+        return Icon(Icons.done_all_rounded,
+            size: 15, color: AppTheme.textSecondary(context));
+      case 3:
+        // Read — double blue tick
+        return const Icon(Icons.done_all_rounded,
+            size: 15, color: AppTheme.blueTick);
+      default:
+        return const SizedBox.shrink();
+    }
+  }
+
+  // ── Subtitle text ─────────────────────────────────────────────────────────
+  String _getSubtitleText(BuildContext context, LastMessageModel? lastMsg) {
     if (lastMsg == null) return '';
     if (lastMsg.hasMedia) {
-      return '📷 Photo'; // or other media indicator
+      return '📷 Photo';
     }
     return lastMsg.body;
   }
 
+  // ── Time formatter ────────────────────────────────────────────────────────
   String _formatTime(int timestamp) {
     if (timestamp == 0) return '';
     final dt = DateTime.fromMillisecondsSinceEpoch(timestamp * 1000);
@@ -137,13 +238,13 @@ class ConversationTile extends StatelessWidget {
     final msgDate = DateTime(dt.year, dt.month, dt.day);
 
     if (msgDate == today) {
-      return DateFormat('hh:mm a').format(dt);
+      return DateFormat('h:mm a').format(dt);
     } else if (msgDate == yesterday) {
       return 'Yesterday';
     } else if (now.difference(dt).inDays < 7) {
-      return DateFormat('EEEE').format(dt); // e.g. "Monday"
+      return DateFormat('EEEE').format(dt);
     } else {
-      return DateFormat('MM/dd/yy').format(dt);
+      return DateFormat('dd/MM/yy').format(dt);
     }
   }
 }

whatsapp_app/lib/widgets/message_bubble.dart

@@ -52,118 +52,171 @@ class MessageBubble extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final isMe = message.fromMe;
+    final isMe  = message.fromMe;
-    final align = isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start;
+    final isDark = AppTheme.isDark(context);
-    final bg = isMe ? AppTheme.outgoingMsg : AppTheme.incomingMsg;
+
+    final bg = isMe
+        ? AppTheme.outgoingMsg(context)
+        : AppTheme.incomingMsg(context);
+
     final radius = isMe
         ? const BorderRadius.only(
-            topLeft: Radius.circular(12),
+            topLeft:     Radius.circular(12),
-            topRight: Radius.circular(0),
+            topRight:    Radius.circular(4),
-            bottomLeft: Radius.circular(12),
+            bottomLeft:  Radius.circular(12),
             bottomRight: Radius.circular(12),
           )
         : const BorderRadius.only(
-            topLeft: Radius.circular(0),
+            topLeft:     Radius.circular(4),
-            topRight: Radius.circular(12),
+            topRight:    Radius.circular(12),
-            bottomLeft: Radius.circular(12),
+            bottomLeft:  Radius.circular(12),
             bottomRight: Radius.circular(12),
           );
 
+    // Incoming message shadow/border in light mode
+    final BoxDecoration decoration = BoxDecoration(
+      color: bg,
+      borderRadius: radius,
+      boxShadow: [
+        BoxShadow(
+          color: Colors.black.withOpacity(isDark ? 0.2 : 0.08),
+          blurRadius: 2,
+          offset: const Offset(0, 1),
+        ),
+      ],
+    );
+
     return Container(
-      margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
+      margin: EdgeInsets.only(
+        top: 2,
+        bottom: 2,
+        left: isMe ? 60 : 8,
+        right: isMe ? 8 : 60,
+      ),
       child: Column(
-        crossAxisAlignment: align,
+        crossAxisAlignment:
+            isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
         children: [
-          Container(
+          // Tail + bubble
-            constraints: BoxConstraints(
+          Stack(
-              maxWidth: MediaQuery.of(context).size.width * 0.75,
+            children: [
-            ),
+              // Message bubble
-            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+              Container(
-            decoration: BoxDecoration(
+                constraints: BoxConstraints(
-              color: bg,
+                  maxWidth: MediaQuery.of(context).size.width * 0.78,
-              borderRadius: radius,
+                ),
-            ),
+                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
-            child: Column(
+                decoration: decoration,
-              crossAxisAlignment: CrossAxisAlignment.start,
+                child: Column(
-              mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                // Sender name in group chats
-                if (!isMe && message.author != null) ...[
-                  Text(
-                    message.author!,
-                    style: const TextStyle(
-                      color: AppTheme.primary,
-                      fontSize: 12,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  ),
-                  const SizedBox(height: 4),
-                ],
-
-                // Media widget
-                if (message.hasMedia) ...[
-                  InteractiveMediaWidget(message: message),
-                  const SizedBox(height: 6),
-                ],
-
-                // Text + time + ACK row
-                Row(
                   mainAxisSize: MainAxisSize.min,
-                  crossAxisAlignment: CrossAxisAlignment.end,
                   children: [
-                    Flexible(
+                    // Sender name in group chats (incoming only)
-                      child: Text(
+                    if (!isMe && message.author != null) ...[
-                        message.body,
+                      Text(
+                        message.author!,
                         style: const TextStyle(
-                          color: AppTheme.textPrimary,
+                          color: AppTheme.primaryDark,
-                          fontSize: 15,
+                          fontSize: 12.5,
+                          fontWeight: FontWeight.bold,
                         ),
                       ),
-                    ),
+                      const SizedBox(height: 2),
-                    const SizedBox(width: 8),
+                    ],
-                    Padding(
+
-                      padding: const EdgeInsets.only(top: 4),
+                    // Media
-                      child: Row(
+                    if (message.hasMedia) ...[
-                        mainAxisSize: MainAxisSize.min,
+                      InteractiveMediaWidget(message: message),
-                        children: [
+                      const SizedBox(height: 4),
-                          Text(
+                    ],
-                            _formatTime(message.timestamp),
+
-                            style: const TextStyle(
+                    // Text + time + ACK row
-                              color: AppTheme.textSecondary,
+                    _buildTextTimeRow(context, isMe),
-                              fontSize: 10,
-                            ),
-                          ),
-                          if (isMe) ...[
-                            const SizedBox(width: 4),
-                            _buildAckIcon(message.ack),
-                          ],
-                        ],
-                      ),
-                    ),
                   ],
                 ),
-              ],
+              ),
-            ),
+            ],
           ),
         ],
       ),
     );
   }
 
-  Widget _buildAckIcon(int ack) {
+  Widget _buildTextTimeRow(BuildContext context, bool isMe) {
+    // If body is empty (media-only message), just show time+ack
+    final hasBody = message.body.trim().isNotEmpty;
+
+    if (!hasBody && message.hasMedia) {
+      // Show only time+ack at bottom right of media
+      return Align(
+        alignment: Alignment.bottomRight,
+        child: _timeAckRow(context, isMe),
+      );
+    }
+
+    return Wrap(
+      alignment: WrapAlignment.end,
+      crossAxisAlignment: WrapCrossAlignment.end,
+      children: [
+        if (hasBody)
+          Text(
+            message.body,
+            style: TextStyle(
+              color: AppTheme.textPrimary(context),
+              fontSize: 15,
+            ),
+          ),
+        const SizedBox(width: 4),
+        _timeAckRow(context, isMe),
+      ],
+    );
+  }
+
+  Widget _timeAckRow(BuildContext context, bool isMe) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Text(
+          _formatTime(message.timestamp),
+          style: TextStyle(
+            color: AppTheme.textSecondary(context),
+            fontSize: 11,
+          ),
+        ),
+        if (isMe) ...[
+          const SizedBox(width: 3),
+          _buildAckIcon(context, message.ack),
+        ],
+      ],
+    );
+  }
+
+  // ── ACK icon ──────────────────────────────────────────────────────────────
+  // Real WhatsApp ACK values from whatsapp-web.js:
+  //  -1 = error
+  //   0 = pending (clock icon)
+  //   1 = sent (single grey tick ✓)
+  //   2 = delivered/received (double grey tick ✓✓)
+  //   3 = read/played (double BLUE tick ✓✓)
+  Widget _buildAckIcon(BuildContext context, int ack) {
     switch (ack) {
-      case 1: // Pending/Queued
+      case -1:
-        return const Icon(Icons.access_time,
+      case 0:
-            size: 13, color: AppTheme.textSecondary);
+        // Pending — clock
-      case 2: // Sent (single grey tick)
+        return Icon(Icons.access_time_rounded,
-        return const Icon(Icons.done, size: 15, color: AppTheme.textSecondary);
+            size: 14, color: AppTheme.textSecondary(context));
-      case 3: // Delivered (double grey tick)
+      case 1:
-        return const Icon(Icons.done_all,
+        // Sent — single grey tick
-            size: 15, color: AppTheme.textSecondary);
+        return Icon(Icons.check_rounded,
-      case 4: // Read (double blue tick)
+            size: 16, color: AppTheme.textSecondary(context));
-        return const Icon(Icons.done_all, size: 15, color: Colors.blue);
+      case 2:
-      case 5: // Played audio/video (double blue with wave icon)
+        // Delivered — double grey tick
-        return const Icon(Icons.done_all, size: 15, color: Colors.blue);
+        return Icon(Icons.done_all_rounded,
+            size: 16, color: AppTheme.textSecondary(context));
+      case 3:
+        // Read — double blue tick
+        return const Icon(Icons.done_all_rounded,
+            size: 16, color: AppTheme.blueTick);
       default:
         return const SizedBox.shrink();
     }
@@ -291,7 +344,7 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
           width: 140,
           alignment: Alignment.center,
           decoration: BoxDecoration(
-            color: Colors.black.withOpacity(0.15),
+            color: Colors.black.withOpacity(0.12),
             borderRadius: BorderRadius.circular(8),
           ),
           child: const SizedBox(
@@ -307,32 +360,50 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
       return GestureDetector(
         onTap: _downloadMedia,
         child: Container(
-          padding: const EdgeInsets.all(12),
+          padding: const EdgeInsets.all(10),
           decoration: BoxDecoration(
-            color: Colors.black.withOpacity(0.15),
+            color: Colors.black.withOpacity(0.10),
             borderRadius: BorderRadius.circular(8),
           ),
           child: Row(
             mainAxisSize: MainAxisSize.min,
             children: [
-              Icon(_getIcon(), color: AppTheme.textSecondary, size: 32),
+              Container(
-              const SizedBox(width: 12),
+                width: 40,
+                height: 40,
+                decoration: BoxDecoration(
+                  color: AppTheme.primary.withOpacity(0.15),
+                  shape: BoxShape.circle,
+                ),
+                child: Icon(_getIcon(),
+                    color: AppTheme.primary, size: 22),
+              ),
+              const SizedBox(width: 10),
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 mainAxisSize: MainAxisSize.min,
                 children: [
                   Text(
                     _getLabel(),
-                    style: const TextStyle(
+                    style: TextStyle(
-                        color: AppTheme.textPrimary,
+                        color: AppTheme.textPrimary(context),
                         fontWeight: FontWeight.w500,
                         fontSize: 13),
                   ),
                   const SizedBox(height: 2),
-                  const Text(
+                  Row(
-                    'Tap to download',
+                    children: [
-                    style:
+                      Icon(Icons.download_rounded,
-                        TextStyle(color: AppTheme.textSecondary, fontSize: 10),
+                          size: 12,
+                          color: AppTheme.textSecondary(context)),
+                      const SizedBox(width: 3),
+                      Text(
+                        'Tap to download',
+                        style: TextStyle(
+                            color: AppTheme.textSecondary(context),
+                            fontSize: 11),
+                      ),
+                    ],
                   ),
                 ],
               ),
@@ -354,7 +425,7 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
   Widget _buildDownloadedMedia(BuildContext context, String base64Data) {
     final bytes = base64Decode(base64Data);
 
-    // ── Image / Sticker: full-screen viewer on tap ─────────────────────────
+    // ── Image / Sticker ────────────────────────────────────────────────────
     if (widget.message.type == "image" || widget.message.type == "sticker") {
       final heroTag = 'img_${widget.message.id}';
       return GestureDetector(
@@ -377,7 +448,7 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
           child: ClipRRect(
             borderRadius: BorderRadius.circular(8),
             child: ConstrainedBox(
-              constraints: const BoxConstraints(maxHeight: 250),
+              constraints: const BoxConstraints(maxHeight: 260),
               child: Image.memory(
                 bytes,
                 fit: BoxFit.cover,
@@ -391,30 +462,29 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
 
     // ── Audio / Voice Note ─────────────────────────────────────────────────
     if (widget.message.type == "audio") {
-      final durationStr = _audioDurationSeconds > 1
+      final totalSec = _audioDurationSeconds > 1 ? _audioDurationSeconds : _audioCurrentSeconds;
-          ? '${(_audioDurationSeconds ~/ 60).toString().padLeft(1, '0')}:${(_audioDurationSeconds % 60).toString().padLeft(2, '0')}'
+      final durationStr =
-          : '0:${_audioCurrentSeconds.toString().padLeft(2, '0')}';
+          '${(totalSec ~/ 60).toString().padLeft(1, '0')}:${(totalSec % 60).toString().padLeft(2, '0')}';
 
       return Container(
-        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-        decoration: BoxDecoration(
-          color: Colors.black.withOpacity(0.15),
-          borderRadius: BorderRadius.circular(8),
-        ),
         child: Row(
           mainAxisSize: MainAxisSize.min,
           children: [
-            IconButton(
+            CircleAvatar(
-              icon: Icon(
+              radius: 18,
-                _isPlaying
+              backgroundColor: AppTheme.primary,
-                    ? Icons.pause_circle_filled
+              child: IconButton(
-                    : Icons.play_circle_filled,
+                padding: EdgeInsets.zero,
-                color: AppTheme.primary,
+                icon: Icon(
-                size: 36,
+                  _isPlaying
+                      ? Icons.pause_rounded
+                      : Icons.play_arrow_rounded,
+                  color: Colors.white,
+                  size: 20,
+                ),
+                onPressed: () => _toggleAudioPlayback(base64Data),
               ),
-              onPressed: () => _toggleAudioPlayback(base64Data),
-              padding: EdgeInsets.zero,
-              constraints: const BoxConstraints(),
             ),
             const SizedBox(width: 8),
             Expanded(
@@ -423,13 +493,14 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
                 children: [
                   SliderTheme(
                     data: SliderTheme.of(context).copyWith(
-                      trackHeight: 2.5,
+                      trackHeight: 2,
                       thumbShape:
                           const RoundSliderThumbShape(enabledThumbRadius: 5),
                       overlayShape:
                           const RoundSliderOverlayShape(overlayRadius: 10),
                       activeTrackColor: AppTheme.primary,
-                      inactiveTrackColor: AppTheme.surfaceLight,
+                      inactiveTrackColor:
+                          AppTheme.textSecondary(context).withOpacity(0.3),
                       thumbColor: AppTheme.primary,
                       overlayColor: AppTheme.primary.withOpacity(0.2),
                     ),
@@ -438,7 +509,8 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
                       onChanged: (v) async {
                         final targetMs =
                             (v * _audioDurationSeconds * 1000).toInt();
-                        await _player.seek(Duration(milliseconds: targetMs));
+                        await _player
+                            .seek(Duration(milliseconds: targetMs));
                       },
                     ),
                   ),
@@ -446,10 +518,10 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
                     padding: const EdgeInsets.only(left: 4),
                     child: Text(
                       durationStr,
-                      style: const TextStyle(
+                      style: TextStyle(
-                        color: AppTheme.textSecondary,
+                        color: AppTheme.textSecondary(context),
-                        fontFamily: 'monospace',
+                        fontSize: 11,
-                        fontSize: 10,
+                        fontFeatures: const [FontFeature.tabularFigures()],
                       ),
                     ),
                   ),
@@ -463,21 +535,31 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
 
     // ── Default: Document / File ───────────────────────────────────────────
     return Container(
-      padding: const EdgeInsets.all(12),
+      padding: const EdgeInsets.all(10),
       decoration: BoxDecoration(
-        color: Colors.black.withOpacity(0.15),
+        color: Colors.black.withOpacity(0.10),
         borderRadius: BorderRadius.circular(8),
       ),
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          const Icon(Icons.check_circle_outline,
+          Container(
-              color: AppTheme.primary, size: 32),
+            width: 40,
-          const SizedBox(width: 12),
+            height: 40,
+            decoration: BoxDecoration(
+              color: AppTheme.primary.withOpacity(0.15),
+              shape: BoxShape.circle,
+            ),
+            child: const Icon(Icons.insert_drive_file_rounded,
+                color: AppTheme.primary, size: 22),
+          ),
+          const SizedBox(width: 10),
           Text(
             _getLabel(),
-            style: const TextStyle(
+            style: TextStyle(
-                color: AppTheme.textPrimary, fontWeight: FontWeight.w500),
+                color: AppTheme.textPrimary(context),
+                fontWeight: FontWeight.w500,
+                fontSize: 13),
           ),
         ],
       ),
@@ -487,30 +569,30 @@ class _InteractiveMediaWidgetState extends State<InteractiveMediaWidget> {
   IconData _getIcon() {
     switch (widget.message.type) {
       case "image":
-        return Icons.photo_outlined;
+        return Icons.photo_camera_rounded;
       case "video":
-        return Icons.videocam_outlined;
+        return Icons.videocam_rounded;
       case "audio":
-        return Icons.audiotrack_outlined;
+        return Icons.mic_rounded;
       case "sticker":
-        return Icons.emoji_emotions_outlined;
+        return Icons.emoji_emotions_rounded;
       default:
-        return Icons.insert_drive_file_outlined;
+        return Icons.insert_drive_file_rounded;
     }
   }
 
   String _getLabel() {
     switch (widget.message.type) {
       case "image":
-        return "Image Attachment";
+        return "Photo";
       case "video":
-        return "Video Attachment";
+        return "Video";
       case "audio":
-        return "Audio / Voice Note";
+        return "Voice note";
       case "sticker":
-        return "Sticker Attachment";
+        return "Sticker";
       default:
-        return "File Attachment";
+        return "File";
     }
   }
 }

whatsapp_bridge/server.js

@@ -178,7 +178,8 @@ async function formatChat(chat) {
       body: chat.lastMessage.body || '',
       timestamp: chat.lastMessage.timestamp || Math.floor(Date.now() / 1000),
       fromMe: chat.lastMessage.fromMe || false,
-      hasMedia: chat.lastMessage.hasMedia || false
+      hasMedia: chat.lastMessage.hasMedia || false,
+      ack: chat.lastMessage.ack || 0
     };
   }