Reflex/src/views/ChatListView.vue

<template>
  <div class="modern-chatlist-view">
    <!-- Header Section -->
    <div class="chatlist-header">
      <div class="container">
        <div class="header-content">
          <div class="chatlist-title">
            <h1 class="title-gradient">Мои диалоги</h1>
            <p class="subtitle">Общение с вашими совпадениями</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Loading State -->
    <div v-if="loading" class="loading-section">
      <div class="loading-spinner">
        <div class="spinner"></div>
        <p>Загрузка диалогов...</p>
      </div>
    </div>

    <!-- Error State -->
    <div v-if="error" class="error-section">
      <div class="container">
        <div class="error-card">
          <i class="bi-exclamation-triangle"></i>
          <h3>Ошибка загрузки</h3>
          <p>{{ error }}</p>
          <button class="retry-btn" @click="fetchConversations">Попробовать снова</button>
        </div>
      </div>
    </div>

    <!-- Main Content -->
    <div v-if="!loading && !error" class="main-content">
      <div class="container">
        <!-- Empty State -->
        <div v-if="conversations.length === 0" class="empty-state">
          <div class="empty-card">
            <i class="bi-chat"></i>
            <h3>У вас пока нет активных диалогов</h3>
            <p>Лайкните кого-нибудь, чтобы начать общение!</p>
            <router-link to="/swipe" class="action-btn primary">Перейти к свайпам</router-link>
          </div>
        </div>

        <!-- Conversations List Card -->
        <div v-if="conversations.length > 0" class="chat-card">
          <div class="card-header">
            <h3><i class="bi-chat-dots-fill"></i> Активные диалоги</h3>
            <div class="header-actions">
              <span class="chat-count">{{ conversations.length }} {{ getDialogsCountText(conversations.length) }}</span>
            </div>
          </div>
          
          <div class="card-content">
            <!-- Conversations Container -->
            <div class="conversations-container">
              <router-link 
                v-for="conversation in sortedConversations" 
                :key="conversation._id"
                :to="{ name: 'ChatView', params: { conversationId: conversation._id } }" 
                class="conversation-card"
                :class="{'has-unread': getUnreadCount(conversation) > 0}"
              >
                <!-- User Photo -->
                <div class="user-photo-container">
                  <img 
                    v-if="getOtherParticipant(conversation.participants)?.mainPhotoUrl"
                    :src="getParticipantAvatar(getOtherParticipant(conversation.participants))"
                    :alt="getOtherParticipant(conversation.participants)?.name || 'Фото пользователя'"
                    class="user-photo" 
                    @error="onImageError($event, getOtherParticipant(conversation.participants))"
                  />
                  <div v-else class="user-photo-placeholder">
                    <i class="bi-person"></i>
                  </div>
                  <span v-if="getUnreadCount(conversation) > 0" class="unread-badge">
                    {{ getUnreadCount(conversation) }}
                  </span>
                </div>
                
                <!-- Conversation Info -->
                <div class="conversation-info">
                  <div class="conversation-header">
                    <h3 class="user-name">{{ getOtherParticipant(conversation.participants)?.name || 'Неизвестный пользователь' }}</h3>
                    <span class="timestamp">{{ formatTimestamp(conversation.lastMessage?.createdAt || conversation.updatedAt) }}</span>
                  </div>
                  <p class="last-message" :class="{'unread': getUnreadCount(conversation) > 0}">
                    {{ conversation.lastMessage ? formatLastMessage(conversation.lastMessage) : 'Нет сообщений' }}
                  </p>
                </div>
                
                <div class="conversation-action">
                  <i class="bi-chevron-right"></i>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- No Data State -->
    <div v-if="!isAuthenticated && !loading" class="not-authenticated-section">
      <div class="container">
        <div class="error-card">
          <i class="bi-person-lock"></i>
          <h3>Доступ ограничен</h3>
          <p>Пожалуйста, войдите в систему, чтобы просматривать диалоги.</p>
          <router-link to="/login" class="action-btn primary">Войти в систему</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, onUnmounted } from 'vue';
import api from '@/services/api';
import { useAuth } from '@/auth'; // Для получения ID текущего пользователя
import router from '@/router';   // Если понадобится редирект
import { getSocket, connectSocket } from '@/services/socketService';

const { user: currentUser, isAuthenticated } = useAuth(); // Получаем текущего пользователя

const conversations = ref([]);
const loading = ref(true);
const error = ref('');
// Добавляем ref для хранения количества непрочитанных сообщений
const unreadMessageCounts = ref({}); // { conversationId: count }
const defaultAvatar = '/img/default-avatar.png'; // Путь к заглушке аватара в public/img/
let socket = null; // Для прослушивания обновлений о прочтении

const fetchConversations = async () => {
  loading.value = true;
  error.value = '';
  try {
    console.log('[ChatListView] Запрос списка диалогов...');
    const response = await api.getUserConversations();
    conversations.value = response.data;
    console.log('[ChatListView] Диалоги загружены:', conversations.value);
  } catch (err) {
    console.error('[ChatListView] Ошибка при загрузке диалогов:', err.response ? err.response.data : err.message);
    error.value = (err.response?.data?.message) || 'Не удалось загрузить диалоги.';
    if (err.response && err.response.status === 401) {
      // Если 401, возможно, нужно перенаправить на логин
      // const { logout } = useAuth(); // Если logout не импортирован
      // await logout();
    }
  } finally {
    loading.value = false;
  }
};

// Сортируем диалоги по дате последнего сообщения/обновления (новые сверху)
const sortedConversations = computed(() => {
  return [...conversations.value].sort((a, b) => {
    // Бэкенд уже сортирует по updatedAt, но если lastMessageTimestamp есть, он точнее
    const dateA = new Date(a.lastMessage?.createdAt || a.updatedAt);
    const dateB = new Date(b.lastMessage?.createdAt || b.updatedAt);
    return dateB - dateA;
  });
});

// Обновленная функция для подсчета непрочитанных сообщений
const getUnreadCount = (conversation) => {
  const countFromSocketLogic = unreadMessageCounts.value[conversation._id];
  if (countFromSocketLogic && countFromSocketLogic > 0) {
    return countFromSocketLogic;
  }
  // Fallback к старой логике, если новый счетчик 0 (или не инициализирован для старых чатов),
  // но lastMessage не прочитано текущим пользователем.
  if (currentUser.value && conversation.lastMessage && 
      conversation.lastMessage.sender?._id !== currentUser.value._id && 
      (!conversation.lastMessage.readBy || !conversation.lastMessage.readBy.includes(currentUser.value._id))) {
    return 1; // Показываем, что есть хотя бы одно непрочитанное (последнее)
  }
  return 0;
};

// Получаем другого участника диалога
const getOtherParticipant = (participants) => {
  if (!currentUser.value || !participants || participants.length < 2) return null;
  return participants.find(p => p._id !== currentUser.value._id);
};

// Новая функция для получения URL аватара (исправленная)
const getParticipantAvatar = (participant) => {
  if (participant && participant.mainPhotoUrl && typeof participant.mainPhotoUrl === 'string' && participant.mainPhotoUrl.trim() !== '') {
    return participant.mainPhotoUrl.trim();
  }
  // Важно: если mainPhotoUrl нет или он невалиден, мы НЕ возвращаем defaultAvatar здесь,
  // так как v-else в шаблоне должен показать заглушку <i class="bi bi-person-fill"></i>
  // Однако, onImageError все еще может использовать defaultAvatar, если URL есть, но картинка не грузится.
  return null; // или undefined, чтобы v-if="...mainPhotoUrl" работал как ожидается
};

// Форматирование последнего сообщения (кратко)
const formatLastMessage = (lastMsg) => {
  if (!lastMsg || !lastMsg.text) return 'Нет сообщений';
  const prefix = lastMsg.sender?._id === currentUser.value?._id ? 'Вы: ' : '';
  return prefix + (lastMsg.text.length > 30 ? lastMsg.text.substring(0, 27) + '...' : lastMsg.text);
};

// Форматирование времени последнего сообщения/обновления
const formatTimestamp = (timestamp) => {
  if (!timestamp) return '';
  
  const date = new Date(timestamp);
  const today = new Date();
  const yesterday = new Date(today);
  yesterday.setDate(yesterday.getDate() - 1);

  if (date.toDateString() === today.toDateString()) {
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  } else if (date.toDateString() === yesterday.toDateString()) {
    return 'Вчера';
  } else {
    return date.toLocaleDateString([], { day: '2-digit', month: 'short' });
  }
};

const onImageError = (event, participantOnError) => {
  console.warn("[ChatListView] Не удалось загрузить изображение:", event.target.src, "для пользователя:", participantOnError?.name);
  // Устанавливаем src на заглушку из public/img, если фото не загрузилось.
  // Это для случая, когда mainPhotoUrl был, но оказался битым.
  event.target.src = defaultAvatar;
  
  // Если хотим именно иконку, то нужно будет менять состояние, чтобы v-else сработало.
  // Например, установить participantOnError.mainPhotoUrl = null;
  // Это вызовет обновление DOM и показ блока v-else.
  if (participantOnError) {
    // Ищем диалог, где этот участник, и модифицируем его mainPhotoUrl,
    // чтобы вызвать реактивное обновление и показ заглушки-иконки
    const conversationToUpdate = conversations.value.find(conv => 
        conv.participants.some(p => p._id === participantOnError._id)
    );
    if (conversationToUpdate) {
        const participantInConversation = conversationToUpdate.participants.find(p => p._id === participantOnError._id);
        if (participantInConversation) {
            participantInConversation.mainPhotoUrl = null; // Это вызовет показ v-else
        }
    }
  }
};

// Обработчик события messagesRead для обновления UI списка чатов
const handleMessagesReadInList = ({ conversationId: readConversationId, readerId }) => {
  // Если текущий пользователь прочитал сообщения в каком-то чате (событие от ChatView через сервер)
  // или если собеседник прочитал наши сообщения.
  // Нам нужно обновить состояние `conversations` чтобы убрать индикатор непрочитанных.

  const convIndex = conversations.value.findIndex(c => c._id === readConversationId);
  if (convIndex > -1) {
    const conv = conversations.value[convIndex];
    // Если Я (currentUser) прочитал сообщения собеседника в этом диалоге
    if (readerId === currentUser.value?._id && conv.lastMessage && conv.lastMessage.sender?._id !== currentUser.value?._id) {
      // Очищаем счетчик непрочитанных для этого диалога
      unreadMessageCounts.value[readConversationId] = 0;
      if (!conv.lastMessage.readBy) conv.lastMessage.readBy = [];
      if (!conv.lastMessage.readBy.includes(readerId)) {
        conv.lastMessage.readBy.push(readerId);
        // conversations.value[convIndex] = { ...conv }; // Вызываем реактивность
        // Vue 3 должен автоматически отслеживать изменения в массиве/объекте
      }
    }
    // Если Собеседник прочитал НАШИ сообщения (это больше для ChatView, но если хотим обновить тут что-то)
    // В данном контексте (список чатов), это событие в основном означает, что МЫ прочитали,
    // и если у нас был индикатор непрочитанных от собеседника, он должен исчезнуть.
    
    // Перезапрос fetchConversations() может быть слишком тяжелым.
    // Лучше, если сервер присылает обновленный объект диалога или мы мутируем локально.
    console.log(`[ChatListView] Messages read in conversation ${readConversationId}, reader: ${readerId}. Updating UI.`);
    // Форсируем обновление, если Vue не подхватывает изменение в глубине объекта
    conversations.value = [...conversations.value]; 
  }
};

onMounted(() => {
  if (isAuthenticated.value) {
    fetchConversations(); // unreadMessageCounts будет инициализирован или очищен внутри fetchConversations при необходимости

    socket = getSocket();
    if (!socket) {
      socket = connectSocket();
    }
    if (socket) {
      // Слушаем, если сообщения были прочитаны в каком-либо из диалогов
      socket.on('messagesRead', ({ conversationId: readConversationId, readerId }) => {
        // Это событие от сервера после того, как кто-то прочитал сообщения
        // Нас интересует, когда ТЕКУЩИЙ пользователь прочитал сообщения в каком-то диалоге
        if (readerId === currentUser.value?._id) {
          console.log(`[ChatListView] Current user read messages in ${readConversationId}. Resetting unread count.`);
          unreadMessageCounts.value[readConversationId] = 0;
        }

        // Обновляем состояние readBy для lastMessage для консистентности отображения
        // и для корректной работы fallback-логики в getUnreadCount
        const convIndex = conversations.value.findIndex(c => c._id === readConversationId);
        if (convIndex > -1) {
            const conv = conversations.value[convIndex];
            if (conv.lastMessage) {
                let changed = false;
                if (readerId === currentUser.value?._id && conv.lastMessage.sender?._id !== currentUser.value?._id) { // Я прочитал сообщение другого
                    if (!conv.lastMessage.readBy) conv.lastMessage.readBy = [];
                    if (!conv.lastMessage.readBy.includes(readerId)) {
                        conv.lastMessage.readBy.push(readerId);
                        changed = true;
                    }
                } else if (conv.lastMessage.sender?._id === currentUser.value?._id && readerId !== currentUser.value?._id) { // Другой прочитал мое сообщение
                    if (!conv.lastMessage.readBy) conv.lastMessage.readBy = [];
                    if (!conv.lastMessage.readBy.includes(readerId)) {
                        conv.lastMessage.readBy.push(readerId);
                        changed = true;
                    }
                }
                if (changed) {
                    // Форсируем обновление, если Vue не подхватывает глубокие изменения
                    conversations.value = [...conversations.value];
                }
            }
        }
      });
      
      socket.on('getMessage', (newMessage) => {
        const convIndex = conversations.value.findIndex(c => c._id === newMessage.conversationId);
        if (convIndex > -1) {
          const conversation = conversations.value[convIndex];
          conversation.lastMessage = newMessage;
          conversation.updatedAt = newMessage.createdAt; // Обновляем время для сортировки

          // Если сообщение не от текущего пользователя и для этого диалога
          if (newMessage.sender?._id !== currentUser.value?._id) {
            unreadMessageCounts.value[newMessage.conversationId] = 
              (unreadMessageCounts.value[newMessage.conversationId] || 0) + 1;
          }
          
          // Пересортировываем массив диалогов, чтобы актуальный чат поднялся вверх
          conversations.value.sort((a, b) => {
            const dateA = new Date(a.lastMessage?.createdAt || a.updatedAt);
            const dateB = new Date(b.lastMessage?.createdAt || b.updatedAt);
            return dateB - dateA;
          });

        } else {
          // Если пришло сообщение для НОВОГО диалога, которого еще нет в списке,
          // лучшим решением будет перезапросить все диалоги, чтобы он корректно отобразился.
          // Это может случиться, если диалог был создан другим пользователем только что.
          console.log(`[ChatListView] Received message for a new or unknown conversation ${newMessage.conversationId}. Refetching conversations.`);
          fetchConversations();
        }
      });
    }

  } else {
    error.value = "Пожалуйста, войдите в систему, чтобы просматривать диалоги.";
    loading.value = false;
    // Можно перенаправить на логин здесь или положиться на router guard
    // router.push('/login'); 
  }
});

// Добавляем onUnmounted для отписки от событий сокета
onUnmounted(() => {
  if (socket) {
    socket.off('messagesRead'); // Используем то же имя события, что и в onMounted
    socket.off('getMessage'); 
  }
});

// Функция для определения правильного склонения слова "диалог"
const getDialogsCountText = (count) => {
  const remainder10 = count % 10;
  const remainder100 = count % 100;
  
  if (remainder10 === 1 && remainder100 !== 11) {
    return 'диалог';
  } else if ([2, 3, 4].includes(remainder10) && ![12, 13, 14].includes(remainder100)) {
    return 'диалога';
  } else {
    return 'диалогов';
  }
};
</script>

<style scoped>
/* Global Reset and Base Styles */
.modern-chatlist-view {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-attachment: fixed; /* Фиксирует фон для растяжения на весь экран */
  background-size: cover;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* Header Section */
.chatlist-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem 0;
  color: white;
  width: 100%;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.chatlist-title h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(45deg, #fff, #f0f0f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.chatlist-title .subtitle {
  margin: 0.5rem 0 0 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Loading State */
.loading-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  color: white;
}

.loading-spinner {
  text-align: center;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-left: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error and Not Authenticated Sections */
.error-section, .not-authenticated-section {
  padding: 4rem 0;
}

.error-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.error-card i {
  font-size: 3rem;
  color: #dc3545;
  margin-bottom: 1rem;
}

.error-card h3 {
  color: #495057;
  margin-bottom: 1rem;
}

.retry-btn, .action-btn {
  display: inline-block;
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.retry-btn:hover, .action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Main Content */
.main-content {
  padding: 2rem 0 4rem;
}

/* Chat Card (New) */
.chat-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.card-header {
  padding: 1.5rem 2rem;
  background: linear-gradient(45deg, #f8f9fa, #e9ecef);
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: #495057;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.chat-count {
  font-size: 0.9rem;
  color: #6c757d;
  display: flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  background: #f1f3f5;
  border-radius: 30px;
}

.card-content {
  padding: 1rem;
}

/* Empty State */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.empty-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 100%;
}

.empty-card i {
  font-size: 3rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

.empty-card h3 {
  color: #495057;
  margin-bottom: 1rem;
}

.empty-card p {
  color: #6c757d;
  margin-bottom: 1.5rem;
}

/* Conversations Container */
.conversations-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Conversation Card */
.conversation-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: white;
  border-radius: 16px;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
}

.conversation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
  background: #f9faff;
}

.conversation-card.has-unread {
  background-color: rgba(102, 126, 234, 0.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

/* User Photo */
.user-photo-container {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 3px solid white;
  background: linear-gradient(45deg, #e9ecef, #f8f9fa);
}

.user-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.conversation-card:hover .user-photo {
  transform: scale(1.1);
}

.user-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e9ecef, #f8f9fa);
  transition: background 0.3s ease;
}

.conversation-card:hover .user-photo-placeholder {
  background: linear-gradient(135deg, #dce1fc, #e9ecef);
}

.user-photo-placeholder i {
  font-size: 1.8rem;
  color: #adb5bd;
}

.unread-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
  }
  70% {
    box-shadow: 0 0 0 5px rgba(102, 126, 234, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
  }
}

/* Conversation Action */
.conversation-action {
  margin-left: auto;
  color: #ced4da;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.conversation-card:hover .conversation-action {
  color: #667eea;
  transform: translateX(3px);
}

/* Conversation Info */
.conversation-info {
  flex-grow: 1;
  min-width: 0; /* Для корректного переноса текста */
}

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.user-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 80px); /* Оставляем место для timestamp */
}

.conversation-card.has-unread .user-name {
  color: #667eea;
}

.timestamp {
  font-size: 0.8rem;
  color: #6c757d;
  font-weight: 500;
}

.last-message {
  margin: 0;
  font-size: 0.95rem;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.last-message.unread {
  font-weight: 600;
  color: #495057;
}

/* Responsive */
@media (max-width: 576px) {
  .chatlist-title h1 {
    font-size: 2rem;
  }
  
  .card-header {
    padding: 1.25rem 1.5rem;
  }

  .card-content {
    padding: 0.75rem;
  }
  
  .conversation-card {
    padding: 0.75rem;
  }
  
  .user-photo-container {
    width: 50px;
    height: 50px;
  }

  .user-name {
    font-size: 1rem;
  }
}
</style>