feat: Implement messaging functionality with conversation and chat screens, and enhance agent detail views.

lib/features/messaging/data/messaging_repository.dart

@@ -0,0 +1,149 @@
+import 'package:dio/dio.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:logger/logger.dart';
+import 'package:real_estate_mobile/core/constants/api_constants.dart';
+import 'package:real_estate_mobile/core/network/api_client.dart';
+import 'package:real_estate_mobile/core/network/api_exceptions.dart';
+import 'package:real_estate_mobile/features/messaging/data/models/messaging_models.dart';
+
+final _log = Logger(printer: PrettyPrinter(methodCount: 0));
+
+class MessagingRepository {
+  final Dio _dio = ApiClient.instance.dio;
+
+  /// GET /messages/conversations
+  Future<List<Conversation>> getConversations() async {
+    try {
+      final response = await _dio.get(ApiConstants.conversations);
+      final data = response.data['data'] as List<dynamic>;
+      return data
+          .map((e) => Conversation.fromJson(e as Map<String, dynamic>))
+          .toList();
+    } on DioException catch (e) {
+      if (e.error is ApiException) throw e.error as ApiException;
+      throw ApiException(
+        message: e.message ?? 'Failed to fetch conversations',
+        statusCode: e.response?.statusCode,
+      );
+    } catch (e, stack) {
+      _log.e('Conversation parsing error', error: e, stackTrace: stack);
+      throw ApiException(message: 'Failed to parse conversations: $e');
+    }
+  }
+
+  /// POST /messages/conversations
+  Future<Conversation> startConversation(String agentProfileId) async {
+    try {
+      final response = await _dio.post(
+        ApiConstants.conversations,
+        data: {'agentProfileId': agentProfileId},
+      );
+      return Conversation.fromJson(
+          response.data['data'] as Map<String, dynamic>);
+    } on DioException catch (e) {
+      if (e.error is ApiException) throw e.error as ApiException;
+      throw ApiException(
+        message: e.message ?? 'Failed to start conversation',
+        statusCode: e.response?.statusCode,
+      );
+    }
+  }
+
+  /// GET /messages/conversations/:id
+  Future<Conversation> getConversation(String id) async {
+    try {
+      final response = await _dio.get('${ApiConstants.conversations}/$id');
+      return Conversation.fromJson(
+          response.data['data'] as Map<String, dynamic>);
+    } on DioException catch (e) {
+      if (e.error is ApiException) throw e.error as ApiException;
+      throw ApiException(
+        message: e.message ?? 'Failed to fetch conversation',
+        statusCode: e.response?.statusCode,
+      );
+    }
+  }
+
+  /// GET /messages/conversations/:id/messages?page=&limit=
+  Future<({List<ChatMessage> messages, PaginationInfo pagination})> getMessages(
+    String conversationId, {
+    int page = 1,
+    int limit = 50,
+  }) async {
+    try {
+      final response = await _dio.get(
+        '${ApiConstants.conversations}/$conversationId/messages',
+        queryParameters: {'page': page, 'limit': limit},
+      );
+      final data = response.data['data'] as Map<String, dynamic>;
+      final messages = (data['messages'] as List<dynamic>)
+          .map((e) => ChatMessage.fromJson(e as Map<String, dynamic>))
+          .toList();
+      final pagination = PaginationInfo.fromJson(
+          data['pagination'] as Map<String, dynamic>);
+      return (messages: messages, pagination: pagination);
+    } on DioException catch (e) {
+      if (e.error is ApiException) throw e.error as ApiException;
+      throw ApiException(
+        message: e.message ?? 'Failed to fetch messages',
+        statusCode: e.response?.statusCode,
+      );
+    }
+  }
+
+  /// POST /messages/conversations/:id/messages
+  Future<ChatMessage> sendMessage(
+    String conversationId, {
+    required String content,
+    MessageType type = MessageType.text,
+  }) async {
+    try {
+      final response = await _dio.post(
+        '${ApiConstants.conversations}/$conversationId/messages',
+        data: {
+          'content': content,
+          'messageType': type.toApiString(),
+        },
+      );
+      return ChatMessage.fromJson(
+          response.data['data'] as Map<String, dynamic>);
+    } on DioException catch (e) {
+      if (e.error is ApiException) throw e.error as ApiException;
+      throw ApiException(
+        message: e.message ?? 'Failed to send message',
+        statusCode: e.response?.statusCode,
+      );
+    }
+  }
+
+  /// PATCH /messages/conversations/:id/read
+  Future<void> markAsRead(String conversationId) async {
+    try {
+      await _dio.patch('${ApiConstants.conversations}/$conversationId/read');
+    } on DioException catch (e) {
+      if (e.error is ApiException) throw e.error as ApiException;
+      throw ApiException(
+        message: e.message ?? 'Failed to mark as read',
+        statusCode: e.response?.statusCode,
+      );
+    }
+  }
+
+  /// GET /messages/unread-count
+  Future<int> getUnreadCount() async {
+    try {
+      final response = await _dio.get(ApiConstants.unreadCount);
+      return response.data['data']['unreadCount'] as int? ?? 0;
+    } on DioException catch (e) {
+      if (e.error is ApiException) throw e.error as ApiException;
+      throw ApiException(
+        message: e.message ?? 'Failed to fetch unread count',
+        statusCode: e.response?.statusCode,
+      );
+    }
+  }
+}
+
+final messagingRepositoryProvider = Provider<MessagingRepository>((ref) {
+  return MessagingRepository();
+});

lib/features/messaging/data/models/conversation.dart

@@ -0,0 +1,3 @@
+// Re-export from the combined messaging models file.
+export 'package:real_estate_mobile/features/messaging/data/models/messaging_models.dart'
+    show OtherParty, Conversation;

lib/features/messaging/data/models/message.dart

@@ -0,0 +1,3 @@
+// Re-export from the combined messaging models file.
+export 'package:real_estate_mobile/features/messaging/data/models/messaging_models.dart'
+    show MessageType, MessageStatus, MessageSender, SenderProfile, ChatMessage, PaginationInfo;

lib/features/messaging/data/models/messaging_models.dart

@@ -0,0 +1,281 @@
+enum MessageType {
+  text,
+  file,
+  image,
+  system;
+
+  static MessageType fromString(String? value) {
+    switch (value?.toUpperCase()) {
+      case 'FILE':
+        return MessageType.file;
+      case 'IMAGE':
+        return MessageType.image;
+      case 'SYSTEM':
+        return MessageType.system;
+      default:
+        return MessageType.text;
+    }
+  }
+
+  String toApiString() => name.toUpperCase();
+}
+
+enum MessageStatus {
+  sent,
+  delivered,
+  read;
+
+  static MessageStatus fromString(String? value) {
+    switch (value?.toUpperCase()) {
+      case 'DELIVERED':
+        return MessageStatus.delivered;
+      case 'READ':
+        return MessageStatus.read;
+      default:
+        return MessageStatus.sent;
+    }
+  }
+}
+
+class OtherParty {
+  final String id;
+  final String? userId;
+  final String name;
+  final String? avatar;
+  final String? headline;
+  final bool isOnline;
+  final String? lastSeenAt;
+
+  const OtherParty({
+    required this.id,
+    this.userId,
+    required this.name,
+    this.avatar,
+    this.headline,
+    this.isOnline = false,
+    this.lastSeenAt,
+  });
+
+  factory OtherParty.fromJson(Map<String, dynamic> json) {
+    return OtherParty(
+      id: json['id'] as String,
+      userId: json['userId'] as String?,
+      name: json['name'] as String? ?? '',
+      avatar: json['avatar'] as String?,
+      headline: json['headline'] as String?,
+      isOnline: json['isOnline'] as bool? ?? false,
+      lastSeenAt: json['lastSeenAt'] as String?,
+    );
+  }
+}
+
+class Conversation {
+  final String id;
+  final String userId;
+  final String agentProfileId;
+  final String? lastMessageAt;
+  final String? lastMessageText;
+  final int userUnreadCount;
+  final int agentUnreadCount;
+  final int unreadCount;
+  final String createdAt;
+  final String updatedAt;
+  final OtherParty otherParty;
+  final List<ChatMessage>? messages;
+
+  const Conversation({
+    required this.id,
+    required this.userId,
+    required this.agentProfileId,
+    this.lastMessageAt,
+    this.lastMessageText,
+    this.userUnreadCount = 0,
+    this.agentUnreadCount = 0,
+    this.unreadCount = 0,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.otherParty,
+    this.messages,
+  });
+
+  factory Conversation.fromJson(Map<String, dynamic> json) {
+    return Conversation(
+      id: json['id'] as String,
+      userId: json['userId'] as String,
+      agentProfileId: json['agentProfileId'] as String,
+      lastMessageAt: json['lastMessageAt'] as String?,
+      lastMessageText: json['lastMessageText'] as String?,
+      userUnreadCount: json['userUnreadCount'] as int? ?? 0,
+      agentUnreadCount: json['agentUnreadCount'] as int? ?? 0,
+      unreadCount: json['unreadCount'] as int? ?? 0,
+      createdAt: json['createdAt'] as String,
+      updatedAt: json['updatedAt'] as String,
+      otherParty:
+          OtherParty.fromJson(json['otherParty'] as Map<String, dynamic>),
+      messages: (json['messages'] as List<dynamic>?)
+          ?.map((e) => ChatMessage.fromJson(e as Map<String, dynamic>))
+          .toList(),
+    );
+  }
+
+  Conversation copyWith({
+    int? unreadCount,
+    String? lastMessageAt,
+    String? lastMessageText,
+    OtherParty? otherParty,
+    List<ChatMessage>? messages,
+  }) {
+    return Conversation(
+      id: id,
+      userId: userId,
+      agentProfileId: agentProfileId,
+      lastMessageAt: lastMessageAt ?? this.lastMessageAt,
+      lastMessageText: lastMessageText ?? this.lastMessageText,
+      userUnreadCount: userUnreadCount,
+      agentUnreadCount: agentUnreadCount,
+      unreadCount: unreadCount ?? this.unreadCount,
+      createdAt: createdAt,
+      updatedAt: updatedAt,
+      otherParty: otherParty ?? this.otherParty,
+      messages: messages ?? this.messages,
+    );
+  }
+}
+
+class SenderProfile {
+  final String? firstName;
+  final String? lastName;
+  final String? avatar;
+
+  const SenderProfile({this.firstName, this.lastName, this.avatar});
+
+  factory SenderProfile.fromJson(Map<String, dynamic> json) {
+    return SenderProfile(
+      firstName: json['firstName'] as String?,
+      lastName: json['lastName'] as String?,
+      avatar: json['avatar'] as String?,
+    );
+  }
+}
+
+class MessageSender {
+  final String id;
+  final String role;
+  final SenderProfile? userProfile;
+  final SenderProfile? agentProfile;
+
+  const MessageSender({
+    required this.id,
+    required this.role,
+    this.userProfile,
+    this.agentProfile,
+  });
+
+  String get displayName {
+    final profile = userProfile ?? agentProfile;
+    if (profile == null) return 'Unknown';
+    return '${profile.firstName ?? ''} ${profile.lastName ?? ''}'.trim();
+  }
+
+  String? get avatar => userProfile?.avatar ?? agentProfile?.avatar;
+
+  factory MessageSender.fromJson(Map<String, dynamic> json) {
+    return MessageSender(
+      id: json['id'] as String,
+      role: json['role'] as String? ?? '',
+      userProfile: json['userProfile'] != null
+          ? SenderProfile.fromJson(
+              json['userProfile'] as Map<String, dynamic>)
+          : null,
+      agentProfile: json['agentProfile'] != null
+          ? SenderProfile.fromJson(
+              json['agentProfile'] as Map<String, dynamic>)
+          : null,
+    );
+  }
+}
+
+class ChatMessage {
+  final String id;
+  final String conversationId;
+  final String senderId;
+  final String content;
+  final MessageType messageType;
+  final String? fileUrl;
+  final String? fileName;
+  final int? fileSize;
+  final String? mimeType;
+  final MessageStatus status;
+  final String? deliveredAt;
+  final String? readAt;
+  final String createdAt;
+  final String updatedAt;
+  final MessageSender sender;
+
+  const ChatMessage({
+    required this.id,
+    required this.conversationId,
+    required this.senderId,
+    required this.content,
+    this.messageType = MessageType.text,
+    this.fileUrl,
+    this.fileName,
+    this.fileSize,
+    this.mimeType,
+    this.status = MessageStatus.sent,
+    this.deliveredAt,
+    this.readAt,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.sender,
+  });
+
+  bool isMine(String currentUserId) => senderId == currentUserId;
+
+  factory ChatMessage.fromJson(Map<String, dynamic> json) {
+    return ChatMessage(
+      id: json['id'] as String,
+      conversationId: json['conversationId'] as String,
+      senderId: json['senderId'] as String,
+      content: json['content'] as String? ?? '',
+      messageType: MessageType.fromString(json['messageType'] as String?),
+      fileUrl: json['fileUrl'] as String?,
+      fileName: json['fileName'] as String?,
+      fileSize: json['fileSize'] as int?,
+      mimeType: json['mimeType'] as String?,
+      status: MessageStatus.fromString(json['status'] as String?),
+      deliveredAt: json['deliveredAt'] as String?,
+      readAt: json['readAt'] as String?,
+      createdAt: json['createdAt'] as String,
+      updatedAt: json['updatedAt'] as String,
+      sender: json['sender'] != null
+          ? MessageSender.fromJson(json['sender'] as Map<String, dynamic>)
+          : MessageSender(id: json['senderId'] as String, role: ''),
+    );
+  }
+}
+
+class PaginationInfo {
+  final int page;
+  final int limit;
+  final int total;
+  final int pages;
+
+  const PaginationInfo({
+    required this.page,
+    required this.limit,
+    required this.total,
+    required this.pages,
+  });
+
+  bool get hasMore => page < pages;
+
+  factory PaginationInfo.fromJson(Map<String, dynamic> json) {
+    return PaginationInfo(
+      page: json['page'] as int? ?? 1,
+      limit: json['limit'] as int? ?? 50,
+      total: json['total'] as int? ?? 0,
+      pages: json['pages'] as int? ?? 1,
+    );
+  }
+}

lib/features/messaging/data/socket_service.dart

@@ -0,0 +1,204 @@
+import 'dart:async';
+import 'package:logger/logger.dart';
+import 'package:real_estate_mobile/config/app_config.dart';
+import 'package:real_estate_mobile/core/storage/secure_storage.dart';
+import 'package:real_estate_mobile/features/messaging/data/models/message.dart';
+
+// We'll use a simple WebSocket approach for now since socket_io_client needs to be added
+// This will be a placeholder that uses REST polling until socket_io_client is added
+import 'package:socket_io_client/socket_io_client.dart' as io;
+
+final _log = Logger(printer: PrettyPrinter(methodCount: 0));
+
+class SocketService {
+  static final SocketService _instance = SocketService._();
+  factory SocketService() => _instance;
+  SocketService._();
+
+  io.Socket? _socket;
+  bool _isConnected = false;
+  String? _currentToken;
+
+  // Stream controllers for events
+  final _messageController = StreamController<ChatMessage>.broadcast();
+  final _typingStartController = StreamController<Map<String, dynamic>>.broadcast();
+  final _typingStopController = StreamController<Map<String, dynamic>>.broadcast();
+  final _statusController = StreamController<Map<String, dynamic>>.broadcast();
+  final _readController = StreamController<Map<String, dynamic>>.broadcast();
+  final _connectionController = StreamController<bool>.broadcast();
+
+  Stream<ChatMessage> get onNewMessage => _messageController.stream;
+  Stream<Map<String, dynamic>> get onTypingStart => _typingStartController.stream;
+  Stream<Map<String, dynamic>> get onTypingStop => _typingStopController.stream;
+  Stream<Map<String, dynamic>> get onStatusChange => _statusController.stream;
+  Stream<Map<String, dynamic>> get onMessagesRead => _readController.stream;
+  Stream<bool> get onConnectionChange => _connectionController.stream;
+  bool get isConnected => _isConnected;
+
+  Future<void> connect() async {
+    final token = await SecureStorage.getAccessToken();
+    if (token == null) {
+      _log.w('No access token for socket connection');
+      return;
+    }
+
+    if (_socket?.connected == true && _currentToken == token) return;
+
+    _currentToken = token;
+
+    // Strip /api/v1 from base URL for socket connection
+    final apiUrl = AppConfig.apiBaseUrl;
+    final baseUrl = apiUrl.replaceAll(RegExp(r'/api/v1/?$'), '');
+
+    _socket?.disconnect();
+    _socket?.dispose();
+
+    _socket = io.io(baseUrl, io.OptionBuilder()
+      .setTransports(['websocket', 'polling'])
+      .setAuth({'token': token})
+      .disableAutoConnect()
+      .enableReconnection()
+      .setReconnectionAttempts(5)
+      .setReconnectionDelay(1000)
+      .setReconnectionDelayMax(5000)
+      .build(),
+    );
+
+    _socket!.onConnect((_) {
+      _log.i('Socket connected: ${_socket!.id}');
+      _isConnected = true;
+      _connectionController.add(true);
+    });
+
+    _socket!.onDisconnect((reason) {
+      _log.w('Socket disconnected: $reason');
+      _isConnected = false;
+      _connectionController.add(false);
+
+      if (reason == 'io server disconnect') {
+        _log.w('Server rejected connection - token likely expired');
+        _reconnectWithFreshToken();
+      }
+    });
+
+    _socket!.onConnectError((error) {
+      _log.e('Socket connect error: $error');
+      _isConnected = false;
+      _connectionController.add(false);
+    });
+
+    // Listen for events
+    _socket!.on('new_message', (data) {
+      try {
+        final message = ChatMessage.fromJson(data as Map<String, dynamic>);
+        _messageController.add(message);
+      } catch (e) {
+        _log.e('Error parsing new_message: $e');
+      }
+    });
+
+    _socket!.on('typing_start', (data) {
+      _typingStartController.add(Map<String, dynamic>.from(data as Map));
+    });
+
+    _socket!.on('typing_stop', (data) {
+      _typingStopController.add(Map<String, dynamic>.from(data as Map));
+    });
+
+    _socket!.on('user_status_change', (data) {
+      _statusController.add(Map<String, dynamic>.from(data as Map));
+    });
+
+    _socket!.on('messages_read', (data) {
+      _readController.add(Map<String, dynamic>.from(data as Map));
+    });
+
+    _socket!.connect();
+  }
+
+  Future<void> _reconnectWithFreshToken() async {
+    final token = await SecureStorage.getAccessToken();
+    if (token != null && token != _currentToken) {
+      _currentToken = token;
+      _socket?.io.options?['auth'] = {'token': token};
+      _socket?.connect();
+    }
+  }
+
+  void disconnect() {
+    _socket?.disconnect();
+    _socket?.dispose();
+    _socket = null;
+    _isConnected = false;
+    _currentToken = null;
+  }
+
+  Future<void> joinConversation(String conversationId) async {
+    if (_socket == null || !_isConnected) return;
+    final completer = Completer<void>();
+    _socket!.emitWithAck('join_conversation', {'conversationId': conversationId},
+      ack: (data) => completer.complete(),
+    );
+    await completer.future.timeout(
+      const Duration(seconds: 10),
+      onTimeout: () => _log.w('join_conversation timeout'),
+    );
+  }
+
+  void leaveConversation(String conversationId) {
+    _socket?.emit('leave_conversation', {'conversationId': conversationId});
+  }
+
+  Future<ChatMessage?> sendMessage(
+    String conversationId,
+    Map<String, dynamic> messageData,
+  ) async {
+    if (_socket == null || !_isConnected) return null;
+
+    final completer = Completer<ChatMessage?>();
+    _socket!.emitWithAck('send_message', {
+      'conversationId': conversationId,
+      'message': messageData,
+    }, ack: (data) {
+      try {
+        final response = data as Map<String, dynamic>;
+        if (response['success'] == true && response['message'] != null) {
+          completer.complete(
+            ChatMessage.fromJson(response['message'] as Map<String, dynamic>),
+          );
+        } else {
+          completer.complete(null);
+        }
+      } catch (e) {
+        completer.complete(null);
+      }
+    });
+
+    return completer.future.timeout(
+      const Duration(seconds: 10),
+      onTimeout: () => null,
+    );
+  }
+
+  void startTyping(String conversationId) {
+    _socket?.emit('typing_start', {'conversationId': conversationId});
+  }
+
+  void stopTyping(String conversationId) {
+    _socket?.emit('typing_stop', {'conversationId': conversationId});
+  }
+
+  void markAsRead(String conversationId) {
+    _socket?.emit('mark_read', {'conversationId': conversationId});
+  }
+
+  void dispose() {
+    disconnect();
+    _messageController.close();
+    _typingStartController.close();
+    _typingStopController.close();
+    _statusController.close();
+    _readController.close();
+    _connectionController.close();
+  }
+}

lib/features/messaging/presentation/providers/messaging_provider.dart

@@ -0,0 +1,299 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:logger/logger.dart';
+import 'package:real_estate_mobile/features/auth/presentation/providers/auth_provider.dart';
+import 'package:real_estate_mobile/features/messaging/data/models/messaging_models.dart';
+import 'package:real_estate_mobile/features/messaging/data/messaging_repository.dart';
+
+final _log = Logger(printer: PrettyPrinter(methodCount: 0));
+
+class MessagingState {
+  final List<Conversation> conversations;
+  final Map<String, List<ChatMessage>> messages;
+  final Map<String, PaginationInfo> pagination;
+  final Set<String> typingUsers;
+  final bool isLoadingConversations;
+  final bool isLoadingMessages;
+  final bool isSending;
+  final String? error;
+  final String? activeConversationId;
+  final int unreadCount;
+
+  const MessagingState({
+    this.conversations = const [],
+    this.messages = const {},
+    this.pagination = const {},
+    this.typingUsers = const {},
+    this.isLoadingConversations = false,
+    this.isLoadingMessages = false,
+    this.isSending = false,
+    this.error,
+    this.activeConversationId,
+    this.unreadCount = 0,
+  });
+
+  MessagingState copyWith({
+    List<Conversation>? conversations,
+    Map<String, List<ChatMessage>>? messages,
+    Map<String, PaginationInfo>? pagination,
+    Set<String>? typingUsers,
+    bool? isLoadingConversations,
+    bool? isLoadingMessages,
+    bool? isSending,
+    String? error,
+    String? activeConversationId,
+    int? unreadCount,
+    bool clearError = false,
+    bool clearActiveConversation = false,
+  }) {
+    return MessagingState(
+      conversations: conversations ?? this.conversations,
+      messages: messages ?? this.messages,
+      pagination: pagination ?? this.pagination,
+      typingUsers: typingUsers ?? this.typingUsers,
+      isLoadingConversations:
+          isLoadingConversations ?? this.isLoadingConversations,
+      isLoadingMessages: isLoadingMessages ?? this.isLoadingMessages,
+      isSending: isSending ?? this.isSending,
+      error: clearError ? null : (error ?? this.error),
+      activeConversationId: clearActiveConversation
+          ? null
+          : (activeConversationId ?? this.activeConversationId),
+      unreadCount: unreadCount ?? this.unreadCount,
+    );
+  }
+}
+
+class MessagingNotifier extends StateNotifier<MessagingState> {
+  final MessagingRepository _repository;
+  final Ref _ref;
+
+  MessagingNotifier(this._repository, this._ref)
+      : super(const MessagingState());
+
+  String? get _currentUserId => _ref.read(authProvider).user?.id;
+
+  Future<void> loadConversations() async {
+    state = state.copyWith(isLoadingConversations: true, clearError: true);
+    try {
+      final result = await _repository.getConversations();
+      state = state.copyWith(
+        conversations: result,
+        isLoadingConversations: false,
+      );
+    } catch (e, stack) {
+      _log.e('Failed to load conversations', error: e, stackTrace: stack);
+      state = state.copyWith(
+        isLoadingConversations: false,
+        error: 'Failed to load conversations',
+      );
+    }
+  }
+
+  Future<void> loadMessages(
+    String conversationId, {
+    bool loadMore = false,
+  }) async {
+    if (loadMore) {
+      final existing = state.pagination[conversationId];
+      if (existing != null && !existing.hasMore) return;
+    }
+
+    state = state.copyWith(isLoadingMessages: true, clearError: true);
+
+    try {
+      final nextPage =
+          loadMore ? ((state.pagination[conversationId]?.page ?? 0) + 1) : 1;
+
+      final result = await _repository.getMessages(
+        conversationId,
+        page: nextPage,
+      );
+
+      final newMessages = result.messages;
+      final paginationInfo = result.pagination;
+
+      final existingMessages =
+          loadMore ? (state.messages[conversationId] ?? []) : <ChatMessage>[];
+      final mergedMessages =
+          loadMore ? [...existingMessages, ...newMessages] : newMessages;
+
+      final updatedMessages =
+          Map<String, List<ChatMessage>>.from(state.messages)
+            ..[conversationId] = mergedMessages;
+
+      final updatedPagination =
+          Map<String, PaginationInfo>.from(state.pagination)
+            ..[conversationId] = paginationInfo;
+
+      state = state.copyWith(
+        messages: updatedMessages,
+        pagination: updatedPagination,
+        isLoadingMessages: false,
+      );
+    } catch (_) {
+      state = state.copyWith(
+        isLoadingMessages: false,
+        error: 'Failed to load messages',
+      );
+    }
+  }
+
+  Future<void> sendMessage(String conversationId, String content) async {
+    final currentUserId = _currentUserId;
+    if (currentUserId == null) return;
+
+    final tempId = 'temp_${DateTime.now().millisecondsSinceEpoch}';
+    final now = DateTime.now().toIso8601String();
+
+    final tempMessage = ChatMessage(
+      id: tempId,
+      conversationId: conversationId,
+      senderId: currentUserId,
+      content: content,
+      messageType: MessageType.text,
+      status: MessageStatus.sent,
+      createdAt: now,
+      updatedAt: now,
+      sender: MessageSender(
+        id: currentUserId,
+        role: 'user',
+      ),
+    );
+
+    // Add optimistic message at the beginning (newest-first)
+    final currentMessages =
+        List<ChatMessage>.from(state.messages[conversationId] ?? []);
+    currentMessages.insert(0, tempMessage);
+
+    final updatedMessages =
+        Map<String, List<ChatMessage>>.from(state.messages)
+          ..[conversationId] = currentMessages;
+
+    state = state.copyWith(
+      messages: updatedMessages,
+      isSending: true,
+      clearError: true,
+    );
+
+    try {
+      final realMessage = await _repository.sendMessage(
+        conversationId,
+        content: content,
+      );
+
+      final messagesAfterSend =
+          List<ChatMessage>.from(state.messages[conversationId] ?? []);
+      final tempIndex = messagesAfterSend.indexWhere((m) => m.id == tempId);
+      if (tempIndex != -1) {
+        messagesAfterSend[tempIndex] = realMessage;
+      }
+
+      final finalMessages =
+          Map<String, List<ChatMessage>>.from(state.messages)
+            ..[conversationId] = messagesAfterSend;
+
+      // Update conversation's last message
+      final updatedConversations = state.conversations.map((c) {
+        if (c.id == conversationId) {
+          return c.copyWith(
+            lastMessageText: realMessage.content,
+            lastMessageAt: realMessage.createdAt,
+          );
+        }
+        return c;
+      }).toList();
+
+      state = state.copyWith(
+        messages: finalMessages,
+        conversations: updatedConversations,
+        isSending: false,
+      );
+    } catch (_) {
+      final messagesAfterError =
+          List<ChatMessage>.from(state.messages[conversationId] ?? []);
+      messagesAfterError.removeWhere((m) => m.id == tempId);
+
+      final errorMessages =
+          Map<String, List<ChatMessage>>.from(state.messages)
+            ..[conversationId] = messagesAfterError;
+
+      state = state.copyWith(
+        messages: errorMessages,
+        isSending: false,
+        error: 'Failed to send message',
+      );
+    }
+  }
+
+  Future<void> markAsRead(String conversationId) async {
+    try {
+      await _repository.markAsRead(conversationId);
+
+      final updatedConversations = state.conversations.map((c) {
+        if (c.id == conversationId) {
+          return c.copyWith(unreadCount: 0);
+        }
+        return c;
+      }).toList();
+
+      final totalUnread = updatedConversations.fold<int>(
+        0,
+        (sum, c) => sum + c.unreadCount,
+      );
+
+      state = state.copyWith(
+        conversations: updatedConversations,
+        unreadCount: totalUnread,
+      );
+    } catch (_) {}
+  }
+
+  void setActiveConversation(String? conversationId) {
+    if (conversationId == null) {
+      state = state.copyWith(clearActiveConversation: true);
+    } else {
+      state = state.copyWith(activeConversationId: conversationId);
+    }
+  }
+
+  Future<void> loadUnreadCount() async {
+    try {
+      final count = await _repository.getUnreadCount();
+      state = state.copyWith(unreadCount: count);
+    } catch (_) {}
+  }
+
+  Future<String?> startConversation(String agentProfileId) async {
+    state = state.copyWith(isLoadingConversations: true, clearError: true);
+    try {
+      final conversation =
+          await _repository.startConversation(agentProfileId);
+
+      final exists = state.conversations.any((c) => c.id == conversation.id);
+      final updatedConversations = exists
+          ? state.conversations
+          : [conversation, ...state.conversations];
+
+      state = state.copyWith(
+        conversations: updatedConversations,
+        isLoadingConversations: false,
+      );
+      return conversation.id;
+    } catch (_) {
+      state = state.copyWith(
+        isLoadingConversations: false,
+        error: 'Failed to start conversation',
+      );
+      return null;
+    }
+  }
+}
+
+final messagingProvider =
+    StateNotifierProvider<MessagingNotifier, MessagingState>((ref) {
+  return MessagingNotifier(ref.watch(messagingRepositoryProvider), ref);
+});
+
+final currentUserIdProvider = Provider<String?>((ref) {
+  return ref.watch(authProvider).user?.id;
+});

lib/features/messaging/presentation/screens/chat_screen.dart

@@ -0,0 +1,907 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:real_estate_mobile/config/app_config.dart';
+import 'package:real_estate_mobile/core/constants/app_colors.dart';
+import 'package:real_estate_mobile/features/auth/presentation/providers/auth_provider.dart';
+import 'package:real_estate_mobile/features/messaging/data/models/messaging_models.dart';
+import 'package:real_estate_mobile/features/messaging/presentation/providers/messaging_provider.dart';
+
+class ChatScreen extends ConsumerStatefulWidget {
+  final String conversationId;
+
+  const ChatScreen({super.key, required this.conversationId});
+
+  @override
+  ConsumerState<ChatScreen> createState() => _ChatScreenState();
+}
+
+class _ChatScreenState extends ConsumerState<ChatScreen> {
+  final TextEditingController _messageController = TextEditingController();
+  final ScrollController _scrollController = ScrollController();
+  final FocusNode _messageFocusNode = FocusNode();
+  bool _isComposing = false;
+  int _previousMessageCount = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      final notifier = ref.read(messagingProvider.notifier);
+      notifier.setActiveConversation(widget.conversationId);
+      notifier.loadMessages(widget.conversationId);
+      notifier.markAsRead(widget.conversationId);
+    });
+    _scrollController.addListener(_onScroll);
+    _messageController.addListener(_onTextChanged);
+  }
+
+  @override
+  void dispose() {
+    ref.read(messagingProvider.notifier).setActiveConversation(null);
+    _messageController.dispose();
+    _scrollController.dispose();
+    _messageFocusNode.dispose();
+    super.dispose();
+  }
+
+  void _onScroll() {
+    if (_scrollController.position.pixels >=
+        _scrollController.position.maxScrollExtent - 50) {
+      ref
+          .read(messagingProvider.notifier)
+          .loadMessages(widget.conversationId, loadMore: true);
+    }
+  }
+
+  void _onTextChanged() {
+    final composing = _messageController.text.trim().isNotEmpty;
+    if (composing != _isComposing) {
+      setState(() => _isComposing = composing);
+    }
+  }
+
+  void _scrollToBottom({bool animated = true}) {
+    if (!_scrollController.hasClients) return;
+    if (animated) {
+      _scrollController.animateTo(
+        0.0,
+        duration: const Duration(milliseconds: 300),
+        curve: Curves.easeOut,
+      );
+    } else {
+      _scrollController.jumpTo(0.0);
+    }
+  }
+
+  void _sendMessage() {
+    final text = _messageController.text.trim();
+    if (text.isEmpty) return;
+
+    ref
+        .read(messagingProvider.notifier)
+        .sendMessage(widget.conversationId, text);
+    _messageController.clear();
+    setState(() => _isComposing = false);
+
+    Future.delayed(const Duration(milliseconds: 100), () {
+      _scrollToBottom();
+    });
+  }
+
+  void _handleBack() {
+    ref.read(messagingProvider.notifier).setActiveConversation(null);
+    Navigator.pop(context);
+  }
+
+  // ============================================================
+  // DATE / TIME FORMATTING
+  // ============================================================
+
+  String _formatTime(String isoTimestamp) {
+    try {
+      final dt = DateTime.parse(isoTimestamp).toLocal();
+      final hour =
+          dt.hour > 12 ? dt.hour - 12 : (dt.hour == 0 ? 12 : dt.hour);
+      final minute = dt.minute.toString().padLeft(2, '0');
+      return '$hour.$minute';
+    } catch (_) {
+      return '';
+    }
+  }
+
+  String _formatDateSeparator(DateTime date) {
+    final now = DateTime.now();
+    final today = DateTime(now.year, now.month, now.day);
+    final messageDate = DateTime(date.year, date.month, date.day);
+    final diff = today.difference(messageDate).inDays;
+
+    if (diff == 0) return 'Today';
+    if (diff == 1) return 'Yesterday';
+
+    const months = [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November', 'December',
+    ];
+    return '${months[date.month - 1]} ${date.day}, ${date.year}';
+  }
+
+  bool _shouldShowDateSeparator(List<ChatMessage> messages, int index) {
+    if (index == messages.length - 1) return true;
+
+    final current = DateTime.parse(messages[index].createdAt).toLocal();
+    final older = DateTime.parse(messages[index + 1].createdAt).toLocal();
+
+    return DateTime(current.year, current.month, current.day) !=
+        DateTime(older.year, older.month, older.day);
+  }
+
+  String _getInitials(String name) {
+    final parts = name.trim().split(RegExp(r'\s+'));
+    if (parts.isEmpty) return '';
+    if (parts.length == 1) return parts[0][0].toUpperCase();
+    return '${parts[0][0]}${parts[1][0]}'.toUpperCase();
+  }
+
+  String _resolveAvatarUrl(String? avatarKey) {
+    if (avatarKey == null || avatarKey.isEmpty) return '';
+    if (avatarKey.startsWith('http://') || avatarKey.startsWith('https://')) {
+      return avatarKey;
+    }
+    final base = AppConfig.storageBaseUrl;
+    if (avatarKey.startsWith('/uploads')) {
+      return '$base$avatarKey';
+    }
+    return '$base/$avatarKey';
+  }
+
+  // ============================================================
+  // BUILD
+  // ============================================================
+
+  @override
+  Widget build(BuildContext context) {
+    final messagingState = ref.watch(messagingProvider);
+    final currentUserId = ref.read(authProvider).user?.id;
+    final messages = messagingState.messages[widget.conversationId] ?? [];
+    final isTyping = messagingState.typingUsers.isNotEmpty;
+
+    final conversation = messagingState.conversations
+        .cast<Conversation?>()
+        .firstWhere(
+          (c) => c!.id == widget.conversationId,
+          orElse: () => null,
+        );
+
+    if (messages.length > _previousMessageCount && _previousMessageCount > 0) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _scrollToBottom(animated: true);
+      });
+    }
+    _previousMessageCount = messages.length;
+
+    final otherPartyName = conversation?.otherParty.name ?? 'Chat';
+    final otherPartyAvatar = conversation?.otherParty.avatar;
+    final isOnline = conversation?.otherParty.isOnline ?? false;
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: SafeArea(
+        child: Column(
+          children: [
+            _buildHeader(
+              name: otherPartyName,
+              isOnline: isOnline,
+            ),
+            Expanded(
+              child: messagingState.isLoadingMessages && messages.isEmpty
+                  ? const Center(
+                      child: CircularProgressIndicator(
+                        color: AppColors.accentOrange,
+                        strokeWidth: 2,
+                      ),
+                    )
+                  : messages.isEmpty
+                      ? Center(
+                          child: Text(
+                            'No messages yet.\nSay hello!',
+                            textAlign: TextAlign.center,
+                            style: TextStyle(
+                              fontFamily: 'SourceSerif4',
+                              fontSize: 14,
+                              fontWeight: FontWeight.w400,
+                              color: AppColors.hintText,
+                            ),
+                          ),
+                        )
+                      : _buildMessagesList(
+                          messages: messages,
+                          currentUserId: currentUserId ?? '',
+                          currentUserName: 'You',
+                          otherPartyName: otherPartyName,
+                          otherPartyAvatar: otherPartyAvatar,
+                          isTyping: isTyping,
+                          isLoadingMore: messagingState.isLoadingMessages &&
+                              messages.isNotEmpty,
+                        ),
+            ),
+            _buildInputArea(),
+          ],
+        ),
+      ),
+    );
+  }
+
+  // ============================================================
+  // HEADER - matches Figma: rounded border, back arrow, name, status, icons
+  // ============================================================
+
+  Widget _buildHeader({
+    required String name,
+    required bool isOnline,
+  }) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      child: Container(
+        height: 55,
+        decoration: BoxDecoration(
+          border: Border.all(
+            color: AppColors.primaryDark,
+            width: 0.5,
+          ),
+          borderRadius: BorderRadius.circular(7),
+        ),
+        child: Row(
+          children: [
+            // Back arrow
+            GestureDetector(
+              onTap: _handleBack,
+              behavior: HitTestBehavior.opaque,
+              child: const Padding(
+                padding: EdgeInsets.symmetric(horizontal: 14),
+                child: Icon(
+                  Icons.arrow_back,
+                  size: 23,
+                  color: AppColors.primaryDark,
+                ),
+              ),
+            ),
+            // Name and active status
+            Expanded(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    name,
+                    style: const TextStyle(
+                      fontFamily: 'Fractul',
+                      fontSize: 14,
+                      fontWeight: FontWeight.w700,
+                      color: AppColors.primaryDark,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                  const SizedBox(height: 2),
+                  Row(
+                    children: [
+                      if (isOnline) ...[
+                        Container(
+                          width: 8,
+                          height: 8,
+                          decoration: const BoxDecoration(
+                            color: Color(0xFF4CAF50),
+                            shape: BoxShape.circle,
+                          ),
+                        ),
+                        const SizedBox(width: 5),
+                      ],
+                      Text(
+                        isOnline ? 'Active Now' : 'Offline',
+                        style: const TextStyle(
+                          fontFamily: 'Fractul',
+                          fontSize: 10,
+                          fontWeight: FontWeight.w400,
+                          color: AppColors.primaryDark,
+                        ),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+            // Three dots (vertical)
+            GestureDetector(
+              onTap: () {},
+              behavior: HitTestBehavior.opaque,
+              child: const Padding(
+                padding: EdgeInsets.symmetric(horizontal: 10),
+                child: Icon(
+                  Icons.more_vert,
+                  size: 20,
+                  color: AppColors.primaryDark,
+                ),
+              ),
+            ),
+            // Star icon
+            GestureDetector(
+              onTap: () {},
+              behavior: HitTestBehavior.opaque,
+              child: Padding(
+                padding: const EdgeInsets.only(right: 14),
+                child: Icon(
+                  Icons.star_rounded,
+                  size: 24,
+                  color: AppColors.accentOrange,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  // ============================================================
+  // MESSAGES LIST
+  // ============================================================
+
+  Widget _buildMessagesList({
+    required List<ChatMessage> messages,
+    required String currentUserId,
+    required String currentUserName,
+    required String otherPartyName,
+    String? otherPartyAvatar,
+    required bool isTyping,
+    required bool isLoadingMore,
+  }) {
+    final itemCount =
+        messages.length + (isLoadingMore ? 1 : 0) + (isTyping ? 1 : 0);
+
+    return ListView.builder(
+      controller: _scrollController,
+      reverse: true,
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+      itemCount: itemCount,
+      itemBuilder: (context, index) {
+        if (isTyping && index == 0) {
+          return _buildTypingIndicator();
+        }
+
+        final adjustedIndex = isTyping ? index - 1 : index;
+
+        if (isLoadingMore && adjustedIndex == messages.length) {
+          return const Padding(
+            padding: EdgeInsets.symmetric(vertical: 16),
+            child: Center(
+              child: SizedBox(
+                width: 20,
+                height: 20,
+                child: CircularProgressIndicator(
+                  color: AppColors.accentOrange,
+                  strokeWidth: 2,
+                ),
+              ),
+            ),
+          );
+        }
+
+        if (adjustedIndex < 0 || adjustedIndex >= messages.length) {
+          return const SizedBox.shrink();
+        }
+
+        final message = messages[adjustedIndex];
+        final isMine = message.isMine(currentUserId);
+
+        final showDateSeparator =
+            _shouldShowDateSeparator(messages, adjustedIndex);
+
+        // Get sender info
+        final senderName = isMine
+            ? (message.sender.displayName.isNotEmpty
+                ? message.sender.displayName
+                : currentUserName)
+            : otherPartyName;
+        final senderAvatar = isMine ? null : otherPartyAvatar;
+
+        return Column(
+          children: [
+            if (showDateSeparator)
+              _buildDateSeparator(
+                DateTime.parse(message.createdAt).toLocal(),
+              ),
+            Padding(
+              padding: const EdgeInsets.only(bottom: 16),
+              child: isMine
+                  ? _buildSentMessage(message, senderName)
+                  : _buildReceivedMessage(message, senderName, senderAvatar),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  // -- Date Separator --
+  Widget _buildDateSeparator(DateTime date) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 16),
+      child: Row(
+        children: [
+          Expanded(
+            child: Divider(
+              color: AppColors.primaryDark.withValues(alpha: 0.1),
+              thickness: 0.5,
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 12),
+            child: Text(
+              _formatDateSeparator(date),
+              style: const TextStyle(
+                fontFamily: 'SourceSerif4',
+                fontSize: 12,
+                fontWeight: FontWeight.w400,
+                color: AppColors.subtleText,
+              ),
+            ),
+          ),
+          Expanded(
+            child: Divider(
+              color: AppColors.primaryDark.withValues(alpha: 0.1),
+              thickness: 0.5,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  // -- Sent Message (right-aligned, with avatar on right) --
+  Widget _buildSentMessage(ChatMessage message, String senderName) {
+    final timestamp = _formatTime(message.createdAt);
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.end,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const Spacer(),
+        Flexible(
+          flex: 3,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.end,
+            children: [
+              // Name row with timestamp
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    timestamp,
+                    style: const TextStyle(
+                      fontFamily: 'SourceSerif4',
+                      fontSize: 10,
+                      fontWeight: FontWeight.w200,
+                      color: AppColors.primaryDark,
+                    ),
+                  ),
+                  const SizedBox(width: 6),
+                  Text(
+                    senderName,
+                    style: const TextStyle(
+                      fontFamily: 'Fractul',
+                      fontSize: 14,
+                      fontWeight: FontWeight.w700,
+                      color: AppColors.primaryDark,
+                    ),
+                  ),
+                  const SizedBox(width: 6),
+                  Container(
+                    width: 8,
+                    height: 8,
+                    decoration: const BoxDecoration(
+                      color: AppColors.accentOrange,
+                      shape: BoxShape.circle,
+                    ),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 6),
+              // Message text
+              Text(
+                message.content,
+                style: const TextStyle(
+                  fontFamily: 'Fractul',
+                  fontSize: 10,
+                  fontWeight: FontWeight.w400,
+                  color: AppColors.primaryDark,
+                ),
+                textAlign: TextAlign.right,
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(width: 10),
+        // Avatar
+        _buildMessageAvatar(null, senderName, 45),
+      ],
+    );
+  }
+
+  // -- Received Message (left-aligned, with avatar on left) --
+  Widget _buildReceivedMessage(
+      ChatMessage message, String senderName, String? avatar) {
+    final timestamp = _formatTime(message.createdAt);
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        // Avatar
+        _buildMessageAvatar(avatar, senderName, 45),
+        const SizedBox(width: 10),
+        Flexible(
+          flex: 3,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // Name row with timestamp
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    senderName,
+                    style: const TextStyle(
+                      fontFamily: 'Fractul',
+                      fontSize: 14,
+                      fontWeight: FontWeight.w700,
+                      color: AppColors.primaryDark,
+                    ),
+                  ),
+                  const SizedBox(width: 6),
+                  Container(
+                    width: 8,
+                    height: 8,
+                    decoration: const BoxDecoration(
+                      color: AppColors.accentOrange,
+                      shape: BoxShape.circle,
+                    ),
+                  ),
+                  const SizedBox(width: 6),
+                  Text(
+                    timestamp,
+                    style: const TextStyle(
+                      fontFamily: 'SourceSerif4',
+                      fontSize: 10,
+                      fontWeight: FontWeight.w200,
+                      color: AppColors.primaryDark,
+                    ),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 6),
+              // Message text
+              Text(
+                message.content,
+                style: const TextStyle(
+                  fontFamily: 'Fractul',
+                  fontSize: 10,
+                  fontWeight: FontWeight.w400,
+                  color: AppColors.primaryDark,
+                ),
+              ),
+            ],
+          ),
+        ),
+        const Spacer(),
+      ],
+    );
+  }
+
+  // -- Message Avatar --
+  Widget _buildMessageAvatar(String? avatarKey, String name, double size) {
+    final avatarUrl = _resolveAvatarUrl(avatarKey);
+    final initials = _getInitials(name);
+
+    return ClipOval(
+      child: avatarUrl.isNotEmpty
+          ? CachedNetworkImage(
+              imageUrl: avatarUrl,
+              width: size,
+              height: size,
+              fit: BoxFit.cover,
+              errorWidget: (_, __, ___) =>
+                  _AvatarFallback(letter: initials, size: size),
+            )
+          : _AvatarFallback(letter: initials, size: size),
+    );
+  }
+
+  // -- Typing Indicator --
+  Widget _buildTypingIndicator() {
+    return Align(
+      alignment: Alignment.centerLeft,
+      child: Padding(
+        padding: const EdgeInsets.only(bottom: 8),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            _buildDot(0),
+            const SizedBox(width: 4),
+            _buildDot(1),
+            const SizedBox(width: 4),
+            _buildDot(2),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildDot(int index) {
+    return TweenAnimationBuilder<double>(
+      tween: Tween(begin: 0.3, end: 1.0),
+      duration: Duration(milliseconds: 600 + (index * 200)),
+      builder: (context, value, child) {
+        return Opacity(
+          opacity: value,
+          child: Container(
+            width: 6,
+            height: 6,
+            decoration: const BoxDecoration(
+              color: AppColors.subtleText,
+              shape: BoxShape.circle,
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  // ============================================================
+  // INPUT AREA - matches Figma: + circle, text input, send, mic circle
+  // ============================================================
+
+  Widget _buildInputArea() {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
+      color: Colors.white,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          // Plus icon in circle border
+          GestureDetector(
+            onTap: _showAttachmentOptions,
+            child: Container(
+              width: 36,
+              height: 36,
+              decoration: BoxDecoration(
+                color: Colors.white,
+                shape: BoxShape.circle,
+                border: Border.all(
+                  color: AppColors.primaryDark,
+                  width: 0.5,
+                ),
+              ),
+              child: const Center(
+                child: Icon(
+                  Icons.add,
+                  size: 24,
+                  color: AppColors.primaryDark,
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(width: 10),
+
+          // Text input
+          Expanded(
+            child: Container(
+              height: 38,
+              decoration: BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(20),
+                border: Border.all(
+                  color: AppColors.primaryDark,
+                  width: 0.5,
+                ),
+              ),
+              child: Row(
+                children: [
+                  Expanded(
+                    child: TextField(
+                      controller: _messageController,
+                      focusNode: _messageFocusNode,
+                      textInputAction: TextInputAction.send,
+                      onSubmitted: (_) => _sendMessage(),
+                      style: const TextStyle(
+                        fontFamily: 'Fractul',
+                        fontSize: 14,
+                        fontWeight: FontWeight.w500,
+                        color: AppColors.primaryDark,
+                      ),
+                      decoration: const InputDecoration(
+                        hintText: 'Write a Message',
+                        hintStyle: TextStyle(
+                          fontFamily: 'Fractul',
+                          fontSize: 14,
+                          fontWeight: FontWeight.w500,
+                          color: AppColors.primaryDark,
+                        ),
+                        contentPadding: EdgeInsets.symmetric(
+                          horizontal: 16,
+                          vertical: 8,
+                        ),
+                        border: InputBorder.none,
+                        enabledBorder: InputBorder.none,
+                        focusedBorder: InputBorder.none,
+                      ),
+                    ),
+                  ),
+                  // Send icon inside the input field
+                  GestureDetector(
+                    onTap: _sendMessage,
+                    behavior: HitTestBehavior.opaque,
+                    child: Padding(
+                      padding: const EdgeInsets.only(right: 12),
+                      child: Icon(
+                        Icons.send,
+                        size: 20,
+                        color: AppColors.accentOrange,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          const SizedBox(width: 10),
+
+          // Mic icon in circle border
+          GestureDetector(
+            onTap: () => _showComingSoon('Speech to text'),
+            child: Container(
+              width: 36,
+              height: 36,
+              decoration: BoxDecoration(
+                color: Colors.white,
+                shape: BoxShape.circle,
+                border: Border.all(
+                  color: AppColors.primaryDark,
+                  width: 0.5,
+                ),
+              ),
+              child: const Center(
+                child: Icon(
+                  Icons.mic_none,
+                  size: 20,
+                  color: AppColors.primaryDark,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  // ============================================================
+  // HELPERS
+  // ============================================================
+
+  void _showComingSoon(String feature) {
+    ScaffoldMessenger.of(context).showSnackBar(
+      SnackBar(
+        content: Text('$feature coming soon'),
+        duration: const Duration(seconds: 1),
+        backgroundColor: AppColors.primaryDark,
+        behavior: SnackBarBehavior.floating,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      ),
+    );
+  }
+
+  void _showAttachmentOptions() {
+    showModalBottomSheet(
+      context: context,
+      backgroundColor: Colors.white,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+      ),
+      builder: (ctx) {
+        return Padding(
+          padding: const EdgeInsets.all(20),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Container(
+                width: 40,
+                height: 4,
+                decoration: BoxDecoration(
+                  color: AppColors.divider,
+                  borderRadius: BorderRadius.circular(2),
+                ),
+              ),
+              const SizedBox(height: 20),
+              _buildAttachmentOption(
+                icon: Icons.image_outlined,
+                label: 'Photo',
+                onTap: () {
+                  Navigator.pop(ctx);
+                  _showComingSoon('Photo attachment');
+                },
+              ),
+              _buildAttachmentOption(
+                icon: Icons.attach_file,
+                label: 'Document',
+                onTap: () {
+                  Navigator.pop(ctx);
+                  _showComingSoon('Document attachment');
+                },
+              ),
+              _buildAttachmentOption(
+                icon: Icons.location_on_outlined,
+                label: 'Location',
+                onTap: () {
+                  Navigator.pop(ctx);
+                  _showComingSoon('Location sharing');
+                },
+              ),
+              const SizedBox(height: 10),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _buildAttachmentOption({
+    required IconData icon,
+    required String label,
+    required VoidCallback onTap,
+  }) {
+    return ListTile(
+      leading: Icon(icon, color: AppColors.primaryDark),
+      title: Text(
+        label,
+        style: const TextStyle(
+          fontFamily: 'Fractul',
+          fontSize: 14,
+          fontWeight: FontWeight.w500,
+          color: AppColors.primaryDark,
+        ),
+      ),
+      onTap: onTap,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+    );
+  }
+}
+
+// -- Avatar Fallback --
+
+class _AvatarFallback extends StatelessWidget {
+  final String letter;
+  final double size;
+
+  const _AvatarFallback({required this.letter, this.size = 45});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size,
+      height: size,
+      decoration: const BoxDecoration(
+        color: Color(0xFFE8E8E8),
+        shape: BoxShape.circle,
+      ),
+      alignment: Alignment.center,
+      child: Text(
+        letter,
+        style: TextStyle(
+          fontFamily: 'Fractul',
+          fontSize: size * 0.38,
+          fontWeight: FontWeight.w700,
+          color: AppColors.primaryDark,
+        ),
+      ),
+    );
+  }
+}

lib/features/messaging/presentation/screens/conversations_screen.dart

@@ -0,0 +1,527 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:shimmer/shimmer.dart';
+import 'package:real_estate_mobile/config/app_config.dart';
+import 'package:real_estate_mobile/core/constants/app_colors.dart';
+import 'package:real_estate_mobile/features/messaging/data/models/messaging_models.dart';
+import 'package:real_estate_mobile/features/messaging/presentation/providers/messaging_provider.dart';
+
+class ConversationsScreen extends ConsumerStatefulWidget {
+  const ConversationsScreen({super.key});
+
+  @override
+  ConsumerState<ConversationsScreen> createState() =>
+      _ConversationsScreenState();
+}
+
+class _ConversationsScreenState extends ConsumerState<ConversationsScreen> {
+  final TextEditingController _searchController = TextEditingController();
+  String _searchQuery = '';
+  bool _isSearchActive = false;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      ref.read(messagingProvider.notifier).loadConversations();
+    });
+    _searchController.addListener(() {
+      setState(() {
+        _searchQuery = _searchController.text.trim().toLowerCase();
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    super.dispose();
+  }
+
+  List<Conversation> _filteredConversations(List<Conversation> conversations) {
+    if (_searchQuery.isEmpty) return conversations;
+    return conversations
+        .where((c) => c.otherParty.name.toLowerCase().contains(_searchQuery))
+        .toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final state = ref.watch(messagingProvider);
+    final filtered = _filteredConversations(state.conversations);
+
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: SafeArea(
+        child: Column(
+          children: [
+            _buildHeader(),
+            Expanded(child: _buildConversationList(state, filtered)),
+          ],
+        ),
+      ),
+    );
+  }
+
+  // -- Header with back arrow, search, icons --
+  Widget _buildHeader() {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+      child: Container(
+        height: 51,
+        decoration: BoxDecoration(
+          border: Border.all(
+            color: AppColors.primaryDark,
+            width: 0.5,
+          ),
+          borderRadius: BorderRadius.circular(7),
+        ),
+        child: Row(
+          children: [
+            // Back arrow
+            GestureDetector(
+              onTap: () {
+                if (_isSearchActive) {
+                  setState(() {
+                    _isSearchActive = false;
+                    _searchController.clear();
+                  });
+                } else {
+                  context.go('/home');
+                }
+              },
+              behavior: HitTestBehavior.opaque,
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 12),
+                child: Icon(
+                  Icons.arrow_back_ios_new,
+                  size: 17,
+                  color: AppColors.primaryDark,
+                ),
+              ),
+            ),
+            // Search text or input
+            Expanded(
+              child: _isSearchActive
+                  ? TextField(
+                      controller: _searchController,
+                      autofocus: true,
+                      style: const TextStyle(
+                        fontFamily: 'Fractul',
+                        fontSize: 15,
+                        fontWeight: FontWeight.w700,
+                        color: AppColors.primaryDark,
+                      ),
+                      decoration: const InputDecoration(
+                        hintText: 'Search Messages',
+                        hintStyle: TextStyle(
+                          fontFamily: 'Fractul',
+                          fontSize: 15,
+                          fontWeight: FontWeight.w700,
+                          color: AppColors.hintText,
+                        ),
+                        border: InputBorder.none,
+                        contentPadding: EdgeInsets.zero,
+                        isDense: true,
+                      ),
+                    )
+                  : GestureDetector(
+                      onTap: () => setState(() => _isSearchActive = true),
+                      child: const Text(
+                        'Search Messages',
+                        style: TextStyle(
+                          fontFamily: 'Fractul',
+                          fontSize: 15,
+                          fontWeight: FontWeight.w700,
+                          color: AppColors.primaryDark,
+                        ),
+                      ),
+                    ),
+            ),
+            // Search icon
+            GestureDetector(
+              onTap: () => setState(() => _isSearchActive = true),
+              behavior: HitTestBehavior.opaque,
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8),
+                child: Icon(
+                  Icons.search,
+                  size: 20,
+                  color: AppColors.primaryDark,
+                ),
+              ),
+            ),
+            // Three dots menu
+            GestureDetector(
+              onTap: () {},
+              behavior: HitTestBehavior.opaque,
+              child: Padding(
+                padding: const EdgeInsets.only(right: 12, left: 4),
+                child: Icon(
+                  Icons.more_horiz,
+                  size: 20,
+                  color: AppColors.primaryDark,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  // -- Shimmer Loading State --
+  Widget _buildShimmerLoading() {
+    return Shimmer.fromColors(
+      baseColor: const Color(0xFFE8E8E8),
+      highlightColor: const Color(0xFFF5F5F5),
+      child: ListView.builder(
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        physics: const NeverScrollableScrollPhysics(),
+        itemCount: 6,
+        itemBuilder: (_, index) => Padding(
+          padding: const EdgeInsets.symmetric(vertical: 14),
+          child: Row(
+            children: [
+              Container(
+                width: 52,
+                height: 52,
+                decoration: const BoxDecoration(
+                  color: Colors.white,
+                  shape: BoxShape.circle,
+                ),
+              ),
+              const SizedBox(width: 10),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Container(
+                      width: 130,
+                      height: 14,
+                      decoration: BoxDecoration(
+                        color: Colors.white,
+                        borderRadius: BorderRadius.circular(4),
+                      ),
+                    ),
+                    const SizedBox(height: 8),
+                    Container(
+                      width: double.infinity,
+                      height: 12,
+                      decoration: BoxDecoration(
+                        color: Colors.white,
+                        borderRadius: BorderRadius.circular(4),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(width: 8),
+              Container(
+                width: 45,
+                height: 12,
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(4),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  // -- Conversation List --
+  Widget _buildConversationList(
+      MessagingState state, List<Conversation> filtered) {
+    if (state.isLoadingConversations) {
+      return _buildShimmerLoading();
+    }
+
+    if (filtered.isEmpty) {
+      return Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              Icons.chat_bubble_outline_rounded,
+              color: AppColors.hintText,
+              size: 56,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              _searchQuery.isNotEmpty
+                  ? 'No conversations found'
+                  : 'No messages yet',
+              style: const TextStyle(
+                fontFamily: 'Fractul',
+                fontSize: 16,
+                fontWeight: FontWeight.w600,
+                color: AppColors.primaryDark,
+              ),
+            ),
+            const SizedBox(height: 8),
+            Text(
+              _searchQuery.isNotEmpty
+                  ? 'Try a different search term'
+                  : 'Start a conversation with a professional',
+              style: const TextStyle(
+                fontFamily: 'SourceSerif4',
+                fontSize: 14,
+                fontWeight: FontWeight.w400,
+                color: AppColors.subtleText,
+              ),
+            ),
+            if (state.error != null) ...[
+              const SizedBox(height: 20),
+              TextButton.icon(
+                onPressed: () =>
+                    ref.read(messagingProvider.notifier).loadConversations(),
+                icon: const Icon(
+                  Icons.refresh,
+                  color: AppColors.accentOrange,
+                  size: 18,
+                ),
+                label: const Text(
+                  'Retry',
+                  style: TextStyle(
+                    fontFamily: 'Fractul',
+                    fontSize: 14,
+                    fontWeight: FontWeight.w600,
+                    color: AppColors.accentOrange,
+                  ),
+                ),
+              ),
+            ],
+          ],
+        ),
+      );
+    }
+
+    return RefreshIndicator(
+      color: AppColors.accentOrange,
+      onRefresh: () =>
+          ref.read(messagingProvider.notifier).loadConversations(),
+      child: ListView.separated(
+        padding: EdgeInsets.zero,
+        itemCount: filtered.length,
+        separatorBuilder: (_, __) => Divider(
+          color: AppColors.primaryDark.withValues(alpha: 0.1),
+          height: 0.5,
+          thickness: 0.5,
+        ),
+        itemBuilder: (context, index) {
+          return _ConversationTile(
+            conversation: filtered[index],
+            onTap: () =>
+                context.push('/messages/chat/${filtered[index].id}'),
+          );
+        },
+      ),
+    );
+  }
+}
+
+// -- Conversation Tile Widget --
+
+class _ConversationTile extends StatelessWidget {
+  final Conversation conversation;
+  final VoidCallback onTap;
+
+  const _ConversationTile({
+    required this.conversation,
+    required this.onTap,
+  });
+
+  String _resolveAvatarUrl(String? avatarKey) {
+    if (avatarKey == null || avatarKey.isEmpty) return '';
+    if (avatarKey.startsWith('http://') || avatarKey.startsWith('https://')) {
+      return avatarKey;
+    }
+    final base = AppConfig.storageBaseUrl;
+    if (avatarKey.startsWith('/uploads')) {
+      return '$base$avatarKey';
+    }
+    return '$base/$avatarKey';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final otherParty = conversation.otherParty;
+    final avatarUrl = _resolveAvatarUrl(otherParty.avatar);
+    final lastMessage = conversation.lastMessageText ?? '';
+    final timestamp = _formatTimestamp(conversation.lastMessageAt);
+    final firstLetter = otherParty.name.isNotEmpty
+        ? otherParty.name[0].toUpperCase()
+        : '?';
+
+    return InkWell(
+      onTap: onTap,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+        child: Row(
+          children: [
+            // Avatar with online indicator
+            Stack(
+              children: [
+                ClipOval(
+                  child: avatarUrl.isNotEmpty
+                      ? CachedNetworkImage(
+                          imageUrl: avatarUrl,
+                          width: 52,
+                          height: 52,
+                          fit: BoxFit.cover,
+                          placeholder: (_, url) => _AvatarFallback(
+                            letter: firstLetter,
+                          ),
+                          errorWidget: (_, url, err) => _AvatarFallback(
+                            letter: firstLetter,
+                          ),
+                        )
+                      : _AvatarFallback(letter: firstLetter),
+                ),
+                if (otherParty.isOnline)
+                  Positioned(
+                    right: 0,
+                    bottom: 0,
+                    child: Container(
+                      width: 14,
+                      height: 14,
+                      decoration: BoxDecoration(
+                        color: const Color(0xFF4CAF50),
+                        shape: BoxShape.circle,
+                        border: Border.all(
+                          color: Colors.white,
+                          width: 2.5,
+                        ),
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+            const SizedBox(width: 10),
+            // Name and last message
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    otherParty.name,
+                    style: const TextStyle(
+                      fontFamily: 'Fractul',
+                      fontSize: 14,
+                      fontWeight: FontWeight.w700,
+                      color: AppColors.primaryDark,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                  const SizedBox(height: 4),
+                  Text(
+                    lastMessage,
+                    style: const TextStyle(
+                      fontFamily: 'SourceSerif4',
+                      fontSize: 14,
+                      fontWeight: FontWeight.w400,
+                      color: AppColors.primaryDark,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(width: 8),
+            // Timestamp
+            Text(
+              timestamp,
+              style: const TextStyle(
+                fontFamily: 'SourceSerif4',
+                fontSize: 14,
+                fontWeight: FontWeight.w400,
+                color: AppColors.primaryDark,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+// -- Avatar Fallback --
+
+class _AvatarFallback extends StatelessWidget {
+  final String letter;
+
+  const _AvatarFallback({required this.letter});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 52,
+      height: 52,
+      decoration: const BoxDecoration(
+        color: Color(0xFFE8E8E8),
+        shape: BoxShape.circle,
+      ),
+      alignment: Alignment.center,
+      child: Text(
+        letter,
+        style: const TextStyle(
+          fontFamily: 'Fractul',
+          fontSize: 20,
+          fontWeight: FontWeight.w700,
+          color: AppColors.primaryDark,
+        ),
+      ),
+    );
+  }
+}
+
+// -- Timestamp Formatting --
+
+String _formatTimestamp(String? isoTimestamp) {
+  if (isoTimestamp == null || isoTimestamp.isEmpty) return '';
+
+  final dateTime = DateTime.tryParse(isoTimestamp);
+  if (dateTime == null) return '';
+
+  final now = DateTime.now();
+  final today = DateTime(now.year, now.month, now.day);
+  final messageDate = DateTime(dateTime.year, dateTime.month, dateTime.day);
+  final localTime = dateTime.toLocal();
+  final diff = now.difference(dateTime);
+
+  // "Now" for messages within the last 2 minutes
+  if (diff.inMinutes < 2) {
+    return 'Now';
+  }
+
+  // Same day: show time like "2 hours Ago"
+  if (messageDate == today) {
+    if (diff.inHours >= 1) {
+      return '${diff.inHours} hour${diff.inHours > 1 ? 's' : ''} Ago';
+    }
+    return '${diff.inMinutes} min Ago';
+  }
+
+  // Within last 30 days: show "X Days Ago"
+  final daysDiff = today.difference(messageDate).inDays;
+  if (daysDiff == 1) {
+    return 'Yesterday';
+  }
+  if (daysDiff <= 30) {
+    return '$daysDiff Days Ago';
+  }
+
+  // Older: show month and day
+  const months = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+  ];
+  return '${months[localTime.month - 1]} ${localTime.day}';
+}