From c61a15c8a75129c1a46bdf2f0aa4e2ac3902ad50 Mon Sep 17 00:00:00 2001
From: Professional <Professional@DENIIS-PC>
Date: Fri, 23 May 2025 18:42:29 +0700
Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B5=D0=BE=D1=80=D0=B3=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BF=D1=80=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                |  351 +++++++++---
 src/views/ChatListView.vue | 1075 +++++++++++++++---------------------
 src/views/ChatView.vue     |  681 +++++++++--------------
 src/views/SwipeView.vue    |  887 ++++++++++-------------------
 4 files changed, 1258 insertions(+), 1736 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b1d0c2e..f2de39f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,157 +1,344 @@
 <template>
   <div id="app-container">
-    <header class="app-header bg-dark text-white p-3 mb-4 shadow-sm">
-      <nav class="container d-flex justify-content-between align-items-center">
-        <router-link to="/" class="navbar-brand text-white fs-4">DatingApp</router-link>
-        <div>
-          <template v-if="authState">
-            <span class="me-3">Привет, {{ userData?.name || 'Пользователь' }}!</span>
-            <router-link to="/swipe" class="btn btn-outline-light me-2">Поиск</router-link>
-            <router-link to="/chats" class="btn btn-outline-light me-2">Чаты</router-link> <!-- НОВАЯ ССЫЛКА -->
-            <router-link to="/profile" class="btn btn-outline-light me-2">Профиль</router-link>
-            <button @click="handleLogout" class="btn btn-light">Выход</button>
-          </template>
-          <template v-else>
-            <router-link to="/login" class="btn btn-outline-light me-2">Войти</router-link>
-            <router-link to="/register" class="btn btn-light">Регистрация</router-link>
-          </template>
-        </div>
-      </nav>
-    </header>
-
-    <main class="container">
-      <router-view /> <!-- Сюда Vue Router будет рендерить компонент текущего маршрута -->
+    <!-- Основная область с содержимым -->
+    <main class="app-content">
+      <router-view v-slot="{ Component }">
+        <transition name="page-transition" mode="out-in">
+          <component :is="Component" />
+        </transition>
+      </router-view>
     </main>
 
-    <footer class="app-footer mt-auto py-3 bg-light text-center">
-      <div class="container">
-        <span class="text-muted">© {{ new Date().getFullYear() }} Dating App PWA</span>
-      </div>
-    </footer>
+    <!-- Мобильная навигация внизу экрана -->
+    <nav v-if="authState" class="mobile-nav">
+      <router-link to="/swipe" class="nav-item" active-class="active">
+        <div class="nav-icon">
+          <i class="bi-search"></i>
+        </div>
+        <span>Поиск</span>
+      </router-link>
+      <router-link to="/chats" class="nav-item" active-class="active">
+        <div class="nav-icon">
+          <i class="bi-chat-dots"></i>
+          <span v-if="totalUnread > 0" class="unread-badge">
+            {{ totalUnread < 100 ? totalUnread : '99+' }}
+          </span>
+        </div>
+        <span>Чаты</span>
+      </router-link>
+      <router-link to="/profile" class="nav-item" active-class="active">
+        <div class="nav-icon">
+          <i class="bi-person"></i>
+        </div>
+        <span>Профиль</span>
+      </router-link>
+    </nav>
   </div>
 </template>
 
 <script setup>
-import { useAuth } from '@/auth'; // Убедись, что путь '@/auth' правильный
-import { ref, watch, onMounted } from 'vue';
+import { useAuth } from '@/auth';
+import { ref, watch, onMounted, computed } from 'vue';
+import api from '@/services/api';
+import { getSocket, connectSocket } from '@/services/socketService';
 
 const { user, isAuthenticated, logout, fetchUser } = useAuth();
 
 // Используем локальные переменные для отслеживания состояния
 const userData = ref(null);
 const authState = ref(false);
+const conversations = ref([]);
+const totalUnread = computed(() => {
+  return conversations.value.reduce((sum, conv) => sum + (conv.unreadCount || 0), 0);
+});
+
+let socket = null;
+
+// Получение списка диалогов для отображения счетчика непрочитанных сообщений
+const fetchConversations = async () => {
+  if (!isAuthenticated.value) return;
+  
+  try {
+    const response = await api.getConversations();
+    conversations.value = response.data;
+    console.log('[App] Загружено диалогов для счетчика уведомлений:', conversations.value.length);
+  } catch (err) {
+    console.error('[App] Ошибка при загрузке диалогов:', err);
+  }
+};
+
+// Обработчик новых сообщений
+const handleNewMessage = (message) => {
+  // Если сообщение от другого пользователя, увеличиваем счетчик
+  if (message.sender !== user.value?._id) {
+    const conversation = conversations.value.find(c => c._id === message.conversationId);
+    if (conversation) {
+      conversation.unreadCount = (conversation.unreadCount || 0) + 1;
+    } else {
+      // Если диалога нет в списке, обновим весь список
+      fetchConversations();
+    }
+  }
+};
+
+// Обработчик прочитанных сообщений
+const handleMessagesRead = ({ conversationId, readerId }) => {
+  // Если текущий пользователь прочитал сообщения
+  if (readerId === user.value?._id) {
+    const conversation = conversations.value.find(c => c._id === conversationId);
+    if (conversation) {
+      conversation.unreadCount = 0;
+    }
+  }
+};
 
 // Обновляем локальные переменные при изменении состояния аутентификации
 watch(() => isAuthenticated.value, (newVal) => {
-  console.log('isAuthenticated изменился:', newVal);
+  console.log('[App] isAuthenticated изменился:', newVal);
   authState.value = newVal;
+  
+  if (newVal) {
+    fetchConversations();
+    setupSocketConnection();
+  }
 });
 
 // Обновляем локальную копию данных пользователя
 watch(() => user.value, (newVal) => {
-  console.log('Данные пользователя изменились:', newVal);
+  console.log('[App] Данные пользователя изменились:', newVal);
   userData.value = newVal;
 });
 
+// Настройка сокет-соединения
+const setupSocketConnection = () => {
+  socket = getSocket();
+  if (!socket) {
+    socket = connectSocket();
+  }
+  
+  if (socket) {
+    socket.on('getMessage', handleNewMessage);
+    socket.on('messagesRead', handleMessagesRead);
+    
+    // Присоединение к комнате для уведомлений
+    if (user.value?._id) {
+      socket.emit('joinNotificationRoom', user.value._id);
+    }
+  }
+};
+
 // При монтировании компонента синхронизируем состояние
 onMounted(() => {
-  console.log('App.vue монтирован, проверка состояния аутентификации');
+  console.log('[App] App.vue монтирован, проверка состояния аутентификации');
   authState.value = isAuthenticated.value;
   userData.value = user.value;
   
   // Убедимся, что у нас есть актуальные данные пользователя
   if (localStorage.getItem('userToken') && !isAuthenticated.value) {
-    fetchUser();
+    fetchUser().then(() => {
+      if (isAuthenticated.value) {
+        fetchConversations();
+        setupSocketConnection();
+      }
+    });
+  } else if (isAuthenticated.value) {
+    fetchConversations();
+    setupSocketConnection();
   }
 });
 
-const handleLogout = async () => {
-  try {
-    await logout();
-    console.log('Пользователь успешно вышел из системы (из App.vue)');
-    authState.value = false;
-    userData.value = null;
-  } catch (error) {
-    console.error('Ошибка при выходе:', error);
+// При размонтировании компонента очищаем обработчики событий
+onUnmounted(() => {
+  if (socket) {
+    socket.off('getMessage', handleNewMessage);
+    socket.off('messagesRead', handleMessagesRead);
+    
+    if (user.value?._id) {
+      socket.emit('leaveNotificationRoom', user.value._id);
+    }
   }
-};
+});
 </script>
 
 <style>
 /* Глобальные стили */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 html, body {
   height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+  -webkit-tap-highlight-color: transparent; /* Убирает фон при касании на мобильных */
 }
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   color: #212529;
-  background-color: #f8f9fa; /* Светлый фон для всего приложения */
+  background-color: #f8f9fa;
+  overscroll-behavior: none; /* Предотвращает "bounce" эффект на iOS */
+  overflow: hidden;
+  will-change: transform; /* Ускорение для анимаций */
 }
 
 #app-container {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
-}
-
-/* Global Responsive Styles */
-.app {
+  height: 100vh;
+  width: 100%;
   position: relative;
-  min-height: 100vh;
+  overflow: hidden;
+  background-color: #f8f9fa;
 }
 
-.app-header .navbar-brand {
-  font-weight: bold;
+/* Основная область содержимого */
+.app-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
+  width: 100%;
+  height: calc(100% - var(--nav-height, 60px)); /* Высота за вычетом навбара */
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
 }
 
-.app-header .btn {
-  min-width: 100px; /* Чтобы кнопки были примерно одинаковой ширины */
+/* Анимация переходов между страницами */
+.page-transition-enter-active,
+.page-transition-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
-main.container {
-  flex-grow: 1;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+.page-transition-enter-from,
+.page-transition-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
 }
 
-/* Адаптивные глобальные стили */
+/* Мобильная навигация */
+.mobile-nav {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--nav-height, 60px);
+  background: white;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.nav-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: #6c757d;
+  transition: all 0.2s ease;
+  padding: 4px 0;
+  position: relative;
+}
+
+.nav-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 3px;
+  height: 28px;
+}
+
+.nav-item i {
+  font-size: 1.5rem;
+  transition: transform 0.2s ease;
+}
+
+.nav-item span {
+  font-size: 0.7rem;
+  font-weight: 500;
+}
+
+.nav-item.active {
+  color: #667eea;
+}
+
+.nav-item.active i {
+  transform: scale(1.15);
+}
+
+/* Индикатор непрочитанных сообщений */
+.unread-badge {
+  position: absolute;
+  top: -5px;
+  right: -8px;
+  background-color: #ff6b6b;
+  color: white;
+  font-size: 0.6rem;
+  border-radius: 50%;
+  min-width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  box-shadow: 0 2px 5px rgba(255, 107, 107, 0.3);
+  border: 1px solid white;
+}
+
+/* CSS переменные для динамической настройки */
+:root {
+  --nav-height: 60px;
+  --header-height: 56px;
+  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+/* Учет Safe Area на устройствах с вырезами (iPhone X и новее) */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  .mobile-nav {
+    height: calc(var(--nav-height) + var(--safe-area-inset-bottom));
+    padding-bottom: var(--safe-area-inset-bottom);
+  }
+}
+
+/* Адаптивные настройки для различных устройств */
 @media (max-width: 576px) {
-  .app-header .navbar-brand {
-    font-size: 1.2rem;
+  :root {
+    --nav-height: 56px;
   }
   
-  .app-header .btn {
-    min-width: 80px;
-    font-size: 0.9rem;
-    padding: 0.4rem 0.8rem;
-  }
-  
-  .container {
-    padding-left: 15px;
-    padding-right: 15px;
+  .nav-item i {
+    font-size: 1.3rem;
   }
 }
 
-/* Small phones */
+/* Маленькие телефоны */
 @media (max-width: 375px) {
-  .app-header .navbar-brand {
-    font-size: 1.1rem;
-  }
-  
-  .app-header .btn {
-    min-width: 70px;
-    font-size: 0.85rem;
-    padding: 0.35rem 0.7rem;
+  .nav-item span {
+    font-size: 0.65rem;
   }
 }
 
-/* Landscape orientation on mobile */
+/* Ландшафтная ориентация на мобильных */
 @media (max-height: 450px) and (orientation: landscape) {
-  .app-header {
-    padding-top: 0.25rem !important;
-    padding-bottom: 0.25rem !important;
+  :root {
+    --nav-height: 50px;
+  }
+  
+  .nav-item {
+    flex-direction: row;
+    gap: 5px;
+  }
+  
+  .nav-icon {
+    margin-bottom: 0;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ChatListView.vue b/src/views/ChatListView.vue
index 0bad735..3702ede 100644
--- a/src/views/ChatListView.vue
+++ b/src/views/ChatListView.vue
@@ -1,372 +1,303 @@
 <template>
-  <div class="modern-chatlist-view">
-    <!-- Header Section -->
+  <div class="app-chatlist-view">
+    <!-- Фиксированный хедер -->
     <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>
+      <h2 class="section-title">Диалоги</h2>
+    </div>
+
+    <!-- Основное содержимое -->
+    <main class="chatlist-content">
+      <!-- Loading State -->
+      <div v-if="loading" class="loading-section">
+        <div class="loading-spinner">
+          <div class="spinner"></div>
+          <p>Загрузка диалогов...</p>
         </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">
+      <!-- Conversations List -->
+      <div v-if="!loading && isAuthenticated" class="conversations-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 v-if="conversations.length === 0" class="empty-chats">
+          <div class="empty-chats-content">
+            <i class="bi-chat-dots"></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}"
+        <!-- Conversations List -->
+        <div v-else class="conversations-list">
+          <router-link 
+            v-for="conversation in conversationsSorted" 
+            :key="conversation._id"
+            :to="`/chat/${conversation._id}`"
+            class="conversation-card"
+          >
+            <!-- User Photo -->
+            <div class="user-photo-container">
+              <img 
+                v-if="getOtherParticipant(conversation)?.mainPhotoUrl" 
+                :src="getOtherParticipant(conversation)?.mainPhotoUrl" 
+                :alt="getOtherParticipantName(conversation) || 'Фото собеседника'" 
+                class="user-photo"
+              />
+              <div v-else class="user-photo-placeholder">
+                <i class="bi-person"></i>
+              </div>
+              <span 
+                v-if="conversation.unreadCount > 0" 
+                class="unread-badge"
               >
-                <!-- 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>
+                {{ conversation.unreadCount < 100 ? conversation.unreadCount : '99+' }}
+              </span>
             </div>
-          </div>
+            
+            <!-- Conversation Info -->
+            <div class="conversation-info">
+              <div class="conversation-header">
+                <h3 class="user-name">{{ getOtherParticipantName(conversation) || 'Собеседник' }}</h3>
+                <span class="timestamp">{{ formatTimestamp(conversation.updatedAt) }}</span>
+              </div>
+              <p class="last-message">
+                <span v-if="conversation.typing" class="typing-text">
+                  <span class="typing-animation">
+                    <span class="dot"></span>
+                    <span class="dot"></span>
+                    <span class="dot"></span>
+                  </span>
+                  печатает...
+                </span>
+                <template v-else>
+                  {{ formatLastMessage(conversation) }}
+                </template>
+              </p>
+            </div>
+            <div class="conversation-arrow">
+              <i class="bi-chevron-right"></i>
+            </div>
+          </router-link>
         </div>
       </div>
-    </div>
 
-    <!-- No Data State -->
-    <div v-if="!isAuthenticated && !loading" class="not-authenticated-section">
-      <div class="container">
-        <div class="error-card">
+      <!-- No Auth State -->
+      <div v-if="!isAuthenticated && !loading" class="not-authenticated-section">
+        <div class="not-auth-card">
           <i class="bi-person-lock"></i>
           <h3>Доступ ограничен</h3>
           <p>Пожалуйста, войдите в систему, чтобы просматривать диалоги.</p>
           <router-link to="/login" class="action-btn primary">Войти в систему</router-link>
         </div>
       </div>
-    </div>
+    </main>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, computed, onUnmounted } from 'vue';
+import { ref, onMounted, computed, onUnmounted, watch } from 'vue';
 import api from '@/services/api';
-import { useAuth } from '@/auth'; // Для получения ID текущего пользователя
-import router from '@/router';   // Если понадобится редирект
+import { useAuth } from '@/auth'; 
 import { getSocket, connectSocket } from '@/services/socketService';
 
-const { user: currentUser, isAuthenticated } = useAuth(); // Получаем текущего пользователя
+const { user, 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; // Для прослушивания обновлений о прочтении
+let socket = null;
 
+// Сортировка диалогов
+const conversationsSorted = computed(() => {
+  return [...conversations.value].sort((a, b) => {
+    // Диалоги с непрочитанными сообщениями в начало
+    if (a.unreadCount !== b.unreadCount) {
+      return b.unreadCount - a.unreadCount;
+    }
+    
+    // Диалоги, где собеседник печатает, в начало
+    if (a.typing !== b.typing) {
+      return a.typing ? -1 : 1;
+    }
+    
+    // Сортировка по времени обновления (последнее сообщение)
+    return new Date(b.updatedAt) - new Date(a.updatedAt);
+  });
+});
+
+// Получение данных
 const fetchConversations = async () => {
+  if (!isAuthenticated.value) {
+    loading.value = false;
+    return;
+  }
+  
   loading.value = true;
   error.value = '';
   try {
-    console.log('[ChatListView] Запрос списка диалогов...');
-    const response = await api.getUserConversations();
-    conversations.value = response.data;
-    console.log('[ChatListView] Диалоги загружены:', conversations.value);
+    const response = await api.getConversations();
+    conversations.value = response.data.map(conv => ({
+      ...conv,
+      typing: false
+    }));
+    console.log('[ChatListView] Получено диалогов:', conversations.value.length);
   } 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();
-    }
+    console.error('[ChatListView] Ошибка при загрузке диалогов:', err.response ? err.response.data : err);
+    error.value = err.response?.data?.message || 'Не удалось загрузить диалоги';
   } 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 = (conversation) => {
+  if (!conversation || !conversation.participants || !user.value) return null;
+  return conversation.participants.find(p => p._id !== user.value._id);
 };
 
-// Получаем другого участника диалога
-const getOtherParticipant = (participants) => {
-  if (!currentUser.value || !participants || participants.length < 2) return null;
-  return participants.find(p => p._id !== currentUser.value._id);
+const getOtherParticipantName = (conversation) => {
+  const participant = getOtherParticipant(conversation);
+  return participant ? participant.name : 'Собеседник';
 };
 
-// Новая функция для получения 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 now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
   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
-        }
-    }
+  if (date >= today) {
+    // Сегодня: показываем только время
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  } else if (date >= yesterday) {
+    // Вчера: показываем "вчера"
+    return 'вчера';
+  } else if (now.getFullYear() === date.getFullYear()) {
+    // В этом году: день и месяц
+    return date.toLocaleDateString([], { day: 'numeric', month: 'short' });
+  } else {
+    // Другой год: день, месяц, год
+    return date.toLocaleDateString([], { day: 'numeric', month: 'short', year: 'numeric' });
   }
 };
 
-// Обработчик события messagesRead для обновления UI списка чатов
-const handleMessagesReadInList = ({ conversationId: readConversationId, readerId }) => {
-  // Если текущий пользователь прочитал сообщения в каком-то чате (событие от ChatView через сервер)
-  // или если собеседник прочитал наши сообщения.
-  // Нам нужно обновить состояние `conversations` чтобы убрать индикатор непрочитанных.
+const formatLastMessage = (conversation) => {
+  if (!conversation.lastMessage) {
+    return 'Нет сообщений';
+  }
+  
+  let text = conversation.lastMessage.text || '';
+  if (text.length > 30) {
+    text = text.substring(0, 30) + '...';
+  }
+  
+  // Если последнее сообщение от текущего пользователя, добавляем "Вы: "
+  if (conversation.lastMessage.sender === user.value._id) {
+    text = 'Вы: ' + text;
+  }
+  
+  return text;
+};
 
-  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, но если хотим обновить тут что-то)
-    // В данном контексте (список чатов), это событие в основном означает, что МЫ прочитали,
-    // и если у нас был индикатор непрочитанных от собеседника, он должен исчезнуть.
+// Обработка событий
+const handleNewMessageEvent = (message) => {
+  const conversation = conversations.value.find(c => c._id === message.conversationId);
+  if (conversation) {
+    // Обновляем диалог с новым сообщением
+    conversation.lastMessage = message;
+    conversation.updatedAt = new Date().toISOString();
     
-    // Перезапрос fetchConversations() может быть слишком тяжелым.
-    // Лучше, если сервер присылает обновленный объект диалога или мы мутируем локально.
-    console.log(`[ChatListView] Messages read in conversation ${readConversationId}, reader: ${readerId}. Updating UI.`);
-    // Форсируем обновление, если Vue не подхватывает изменение в глубине объекта
-    conversations.value = [...conversations.value]; 
+    // Если сообщение пришло от другого пользователя, увеличиваем счетчик непрочитанных
+    if (message.sender !== user.value._id) {
+      conversation.unreadCount = (conversation.unreadCount || 0) + 1;
+    }
+    
+    // Сбрасываем статус печати
+    conversation.typing = false;
   }
 };
 
-onMounted(() => {
-  if (isAuthenticated.value) {
-    fetchConversations(); // unreadMessageCounts будет инициализирован или очищен внутри fetchConversations при необходимости
+const handleMessagesReadEvent = ({ conversationId, readerId }) => {
+  // Обрабатываем только если текущий пользователь прочитал сообщения
+  if (readerId === user.value._id) {
+    const conversation = conversations.value.find(c => c._id === conversationId);
+    if (conversation) {
+      conversation.unreadCount = 0;
+    }
+  }
+};
 
+const handleTypingEvent = ({ conversationId, senderId }) => {
+  // Если тот, кто печатает - другой пользователь
+  if (senderId !== user.value._id) {
+    const conversation = conversations.value.find(c => c._id === conversationId);
+    if (conversation) {
+      conversation.typing = true;
+    }
+  }
+};
+
+const handleStopTypingEvent = ({ conversationId, senderId }) => {
+  if (senderId !== user.value._id) {
+    const conversation = conversations.value.find(c => c._id === conversationId);
+    if (conversation) {
+      conversation.typing = false;
+    }
+  }
+};
+
+// Жизненный цикл
+onMounted(async () => {
+  await fetchConversations();
+  
+  if (isAuthenticated.value) {
+    // Подключаем сокет
     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', handleNewMessageEvent);
+      socket.on('messagesRead', handleMessagesReadEvent);
+      socket.on('userTyping', handleTypingEvent);
+      socket.on('userStopTyping', handleStopTypingEvent);
       
-      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();
-        }
-      });
+      // Присоединение к комнате для уведомлений
+      if (user.value?._id) {
+        socket.emit('joinNotificationRoom', user.value._id);
+      }
     }
-
-  } else {
-    error.value = "Пожалуйста, войдите в систему, чтобы просматривать диалоги.";
-    loading.value = false;
-    // Можно перенаправить на логин здесь или положиться на router guard
-    // router.push('/login'); 
   }
 });
 
-// Добавляем onUnmounted для отписки от событий сокета
 onUnmounted(() => {
   if (socket) {
-    socket.off('messagesRead'); // Используем то же имя события, что и в onMounted
-    socket.off('getMessage'); 
+    socket.off('getMessage', handleNewMessageEvent);
+    socket.off('messagesRead', handleMessagesReadEvent);
+    socket.off('userTyping', handleTypingEvent);
+    socket.off('userStopTyping', handleStopTypingEvent);
+    
+    if (user.value?._id) {
+      socket.emit('leaveNotificationRoom', user.value._id);
+    }
+  }
+});
+
+// Следить за статусом аутентификации
+watch(() => isAuthenticated.value, (newVal) => {
+  if (newVal) {
+    fetchConversations();
+  } else {
+    conversations.value = [];
+    loading.value = false;
+    // Можно перенаправить на логин здесь или положиться на router guard
+    // router.push('/login'); 
   }
 });
 
@@ -386,70 +317,56 @@ const getDialogsCountText = (count) => {
 </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;
+/* Основные стили */
+.app-chatlist-view {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
   width: 100%;
-  overflow-x: hidden;
+  position: relative;
+  background-color: #f8f9fa;
+  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
-.container {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 0 20px;
-  width: 100%;
-}
-
-/* Header Section */
+/* Хедер */
 .chatlist-header {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(33, 33, 60, 0.9);
   backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  padding: 2rem 0;
+  padding: 0.8rem 0;
+  text-align: center;
   color: white;
-  width: 100%;
-  margin: 0;
   position: sticky;
   top: 0;
   z-index: 10;
-}
-
-.header-content {
+  height: var(--header-height, 56px);
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
+  justify-content: center;
 }
 
-.chatlist-title h1 {
+.section-title {
   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;
+  font-size: 1.3rem;
+  font-weight: 600;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
-.chatlist-title .subtitle {
-  margin: 0.5rem 0 0 0;
-  font-size: 1.1rem;
-  opacity: 0.9;
+/* Основная область контента */
+.chatlist-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow-x: hidden;
 }
 
-/* Loading State */
+/* Состояния загрузки */
 .loading-section {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 400px;
+  flex: 1;
+  padding: 1rem;
   color: white;
 }
 
@@ -472,192 +389,106 @@ const getDialogsCountText = (count) => {
   100% { transform: rotate(360deg); }
 }
 
-/* Error and Not Authenticated Sections */
-.error-section, .not-authenticated-section {
-  padding: 4rem 0;
+/* Контейнер диалогов */
+.conversations-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
 }
 
-.error-card {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
+/* Пустое состояние */
+.empty-chats {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  padding: 1rem;
+}
+
+.empty-chats-content {
+  background: white;
   border-radius: 20px;
-  padding: 3rem;
+  padding: 2rem;
   text-align: center;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  max-width: 400px;
+  width: 100%;
 }
 
-.error-card i {
+.empty-chats-content i {
   font-size: 3rem;
-  color: #dc3545;
   margin-bottom: 1rem;
+  color: #6c757d;
 }
 
-.error-card h3 {
-  color: #495057;
-  margin-bottom: 1rem;
+.empty-chats-content h3 {
+  color: #343a40;
+  margin-bottom: 0.5rem;
 }
 
-.retry-btn, .action-btn {
-  display: inline-block;
+.empty-chats-content p {
+  margin-bottom: 1.5rem;
+  color: #6c757d;
+}
+
+.action-btn.primary {
   background: linear-gradient(45deg, #667eea, #764ba2);
   color: white;
   border: none;
-  padding: 0.75rem 2rem;
+  padding: 0.75rem 1.5rem;
   border-radius: 50px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   text-decoration: none;
+  display: inline-block;
+  box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
 }
 
-.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 {
+/* Список диалогов */
+.conversations-list {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
+  overflow-y: auto;
+  padding-bottom: 0.5rem;
+  -webkit-overflow-scrolling: touch;
 }
 
-/* Conversation Card */
+/* Карточка диалога */
 .conversation-card {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  padding: 0.8rem;
   background: white;
-  border-radius: 16px;
-  padding: 1rem;
+  border-radius: 12px;
   text-decoration: none;
   color: inherit;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  position: relative;
+  transition: all 0.2s ease;
+  gap: 1rem;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
 }
 
-.conversation-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
-  background: #f9faff;
+.conversation-card:active {
+  transform: scale(0.98);
+  background-color: #f8f9fa;
 }
 
-.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;
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
   overflow: hidden;
+  position: relative;
   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 {
@@ -666,129 +497,159 @@ const getDialogsCountText = (count) => {
   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);
+  background: #e9ecef;
+  color: #6c757d;
 }
 
 .user-photo-placeholder i {
-  font-size: 1.8rem;
-  color: #adb5bd;
+  font-size: 1.5rem;
 }
 
+/* Индикатор непрочитанных сообщений */
 .unread-badge {
   position: absolute;
-  top: -5px;
-  right: -5px;
-  background: linear-gradient(45deg, #667eea, #764ba2);
+  top: -2px;
+  right: -2px;
+  background-color: #ff6b6b;
   color: white;
-  font-size: 0.75rem;
-  font-weight: 700;
-  width: 22px;
-  height: 22px;
+  font-size: 0.7rem;
   border-radius: 50%;
+  min-width: 18px;
+  height: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
-  animation: pulse 2s infinite;
+  font-weight: 600;
+  box-shadow: 0 2px 5px rgba(255, 107, 107, 0.3);
+  border: 1px solid white;
 }
 
-@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; /* Для корректного переноса текста */
+  flex: 1;
+  min-width: 0; /* Для корректной работы text-overflow */
 }
 
 .conversation-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
+  align-items: baseline;
+  margin-bottom: 0.25rem;
 }
 
 .user-name {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: 1rem;
   font-weight: 600;
-  color: #2c3e50;
+  color: #212529;
   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;
+  font-size: 0.75rem;
   color: #6c757d;
-  font-weight: 500;
+  flex-shrink: 0;
 }
 
 .last-message {
   margin: 0;
-  font-size: 0.95rem;
+  font-size: 0.85rem;
   color: #6c757d;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
 }
 
-.last-message.unread {
-  font-weight: 600;
-  color: #495057;
+.typing-text {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-style: italic;
+  color: #667eea;
 }
 
-/* Responsive */
+.typing-animation {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+}
+
+.dot {
+  width: 3px;
+  height: 3px;
+  background-color: #667eea;
+  border-radius: 50%;
+  display: inline-block;
+  animation: bouncingDots 1.4s infinite;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes bouncingDots {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-3px); }
+}
+
+/* Стрелка для перехода в диалог */
+.conversation-arrow {
+  display: flex;
+  align-items: center;
+  color: #adb5bd;
+  transition: transform 0.2s ease;
+}
+
+.conversation-card:active .conversation-arrow {
+  transform: translateX(2px);
+  color: #667eea;
+}
+
+/* Неавторизованное состояние */
+.not-authenticated-section {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+}
+
+.not-auth-card {
+  background: white;
+  border-radius: 20px;
+  padding: 2rem;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  max-width: 400px;
+  width: 100%;
+}
+
+.not-auth-card i {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: #6c757d;
+}
+
+.not-auth-card h3 {
+  color: #343a40;
+  margin-bottom: 0.5rem;
+}
+
+.not-auth-card p {
+  margin-bottom: 1.5rem;
+  color: #6c757d;
+}
+
+/* Адаптивные стили */
 @media (max-width: 576px) {
-  .chatlist-title h1 {
-    font-size: 1.8rem;
-  }
-  
-  .card-header {
-    padding: 1rem 1.25rem;
-  }
-
-  .card-content {
-    padding: 0.75rem;
-  }
-  
   .conversation-card {
-    padding: 0.75rem;
+    padding: 0.7rem;
   }
   
   .user-photo-container {
@@ -796,44 +657,16 @@ const getDialogsCountText = (count) => {
     height: 45px;
   }
   
-  .unread-badge {
-    min-width: 18px;
-    height: 18px;
-    font-size: 0.7rem;
-  }
-
   .user-name {
     font-size: 0.95rem;
-    max-width: calc(100% - 60px);
-  }
-  
-  .timestamp {
-    font-size: 0.75rem;
   }
   
   .last-message {
-    font-size: 0.85rem;
-  }
-  
-  .empty-chats-content p {
-    font-size: 0.95rem;
+    font-size: 0.8rem;
   }
 }
 
-/* Малые телефоны */
 @media (max-width: 375px) {
-  .chatlist-title h1 {
-    font-size: 1.6rem;
-  }
-  
-  .card-header {
-    padding: 0.8rem 1rem;
-  }
-  
-  .card-content {
-    padding: 0.5rem;
-  }
-  
   .conversation-card {
     padding: 0.6rem;
   }
@@ -843,79 +676,35 @@ const getDialogsCountText = (count) => {
     height: 40px;
   }
   
-  .user-name {
-    font-size: 0.9rem;
-  }
-  
-  .timestamp {
-    font-size: 0.7rem;
-  }
-  
-  .last-message {
-    font-size: 0.8rem;
+  .user-photo-placeholder i {
+    font-size: 1.3rem;
   }
 }
 
-/* Большие телефоны и малые планшеты */
-@media (min-width: 577px) and (max-width: 767px) {
-  .container {
-    max-width: 540px;
+/* Ландшафтная ориентация */
+@media (max-height: 450px) and (orientation: landscape) {
+  .chatlist-header {
+    height: 46px;
+    padding: 0.5rem 0;
   }
   
-  .chatlist-card {
-    border-radius: 15px;
+  .section-title {
+    font-size: 1.1rem;
+  }
+  
+  .conversations-container {
+    padding: 0.3rem;
   }
   
   .conversation-card {
-    border-radius: 10px;
+    padding: 0.5rem 0.7rem;
   }
 }
 
-/* Планшеты */
-@media (min-width: 768px) and (max-width: 991px) {
-  .container {
-    max-width: 720px;
-  }
-}
-
-/* Малые настольные */
-@media (min-width: 992px) and (max-width: 1199px) {
-  .container {
-    max-width: 960px;
-  }
-  
-  .chatlist-card {
-    max-width: 800px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-/* Большие настольные */
-@media (min-width: 1200px) {
-  .chatlist-card {
-    max-width: 900px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-/* Ландшафтная ориентация на мобильных устройствах */
-@media (max-height: 500px) and (orientation: landscape) {
-  .chatlist-header {
-    padding: 0.75rem 0;
-  }
-  
-  .chatlist-title h1 {
-    font-size: 1.5rem;
-  }
-  
-  .card-header {
-    padding: 0.75rem 1rem;
-  }
-  
+/* Учитываем Safe Area для iPhone X+ */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
   .conversations-list {
-    max-height: calc(100vh - 180px);
+    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ChatView.vue b/src/views/ChatView.vue
index 35ccddb..cd5731c 100644
--- a/src/views/ChatView.vue
+++ b/src/views/ChatView.vue
@@ -1,51 +1,48 @@
 <template>
-  <div class="modern-chat-view">
-    <!-- Header Section -->
+  <div class="app-chat-view">
+    <!-- Фиксированный хедер -->
     <div v-if="conversationData && !loadingInitialMessages" class="chat-header">
-      <div class="container">
-        <div class="header-content">
-          <div class="chat-info">
-            <router-link to="/chats" class="back-button">
-              <i class="bi-arrow-left"></i>
-            </router-link>
-            <div class="participant-avatar">
-              <img 
-                v-if="getOtherParticipant()?.mainPhotoUrl" 
-                :src="getOtherParticipant()?.mainPhotoUrl" 
-                :alt="getOtherParticipantName() || 'Фото собеседника'" 
-                class="avatar-image"
-              />
-              <div v-else class="avatar-placeholder">
-                <i class="bi-person"></i>
-              </div>
-            </div>
-            <div class="participant-info">
-              <h2 class="participant-name">{{ getOtherParticipantName() || 'Собеседник' }}</h2>
-              <p v-if="otherUserIsTyping" class="typing-status">
-                <span class="typing-animation">
-                  <span class="dot"></span>
-                  <span class="dot"></span>
-                  <span class="dot"></span>
-                </span>
-                печатает...
-              </p>
-            </div>
+      <div class="header-content">
+        <router-link to="/chats" class="back-button">
+          <i class="bi-arrow-left"></i>
+        </router-link>
+        <div class="participant-avatar">
+          <img 
+            v-if="getOtherParticipant()?.mainPhotoUrl" 
+            :src="getOtherParticipant()?.mainPhotoUrl" 
+            :alt="getOtherParticipantName() || 'Фото собеседника'" 
+            class="avatar-image"
+          />
+          <div v-else class="avatar-placeholder">
+            <i class="bi-person"></i>
           </div>
         </div>
+        <div class="participant-info">
+          <h2 class="participant-name">{{ getOtherParticipantName() || 'Собеседник' }}</h2>
+          <p v-if="otherUserIsTyping" class="typing-status">
+            <span class="typing-animation">
+              <span class="dot"></span>
+              <span class="dot"></span>
+              <span class="dot"></span>
+            </span>
+            печатает...
+          </p>
+        </div>
       </div>
     </div>
 
-    <!-- Loading State -->
-    <div v-if="loadingInitialMessages" class="loading-section">
-      <div class="loading-spinner">
-        <div class="spinner"></div>
-        <p>Загрузка сообщений...</p>
+    <!-- Основное содержимое -->
+    <main class="chat-content">
+      <!-- Loading State -->
+      <div v-if="loadingInitialMessages" class="loading-section">
+        <div class="loading-spinner">
+          <div class="spinner"></div>
+          <p>Загрузка сообщений...</p>
+        </div>
       </div>
-    </div>
 
-    <!-- Error State -->
-    <div v-if="error" class="error-section">
-      <div class="container">
+      <!-- Error State -->
+      <div v-if="error" class="error-section">
         <div class="error-card">
           <i class="bi-exclamation-triangle"></i>
           <h3>Ошибка загрузки</h3>
@@ -53,11 +50,9 @@
           <button class="retry-btn" @click="fetchInitialMessages">Попробовать снова</button>
         </div>
       </div>
-    </div>
 
-    <!-- No Data State -->
-    <div v-if="!loadingInitialMessages && !conversationData && !error" class="empty-section">
-      <div class="container">
+      <!-- No Data State -->
+      <div v-if="!loadingInitialMessages && !conversationData && !error" class="empty-section">
         <div class="empty-card">
           <i class="bi-chat-dots"></i>
           <h3>Диалог недоступен</h3>
@@ -65,102 +60,95 @@
           <router-link to="/chats" class="action-btn primary">К списку диалогов</router-link>
         </div>
       </div>
-    </div>
 
-    <!-- Main Content -->
-    <div v-if="conversationData && !loadingInitialMessages && !error" class="main-content">
-      <div class="container">
-        <div class="chat-card">
-          <!-- Messages Container -->
-          <div ref="messagesContainer" class="messages-container">
-            <template v-for="item in messagesWithDateSeparators" :key="item.id">
-              <!-- Date Separator -->
-              <div v-if="item.type === 'date_separator'" class="date-separator">
-                <span class="date-badge">{{ formatDateHeader(item.timestamp) }}</span>
-              </div>
-              
-              <!-- Message Item -->
-              <div v-else-if="item.type === 'message'"
-                   :class="['message-item', item.data.sender?._id === currentUser?._id ? 'sent' : 'received']"
-                   @mouseenter="!isTouchDevice.value && handleMouseEnter(item.data)" 
-                   @mouseleave="!isTouchDevice.value && handleMouseLeave()"
-                   @click.stop="handleMessageTap(item.data, $event)" 
-                   @contextmenu.stop="handleNativeContextMenu($event, item.data)">
-                <div class="message-wrapper">
-                  <div 
-                    class="message-bubble" 
-                    :class="{ 
-                      'edited': item.data.isEdited,
-                      'with-actions': !isTouchDevice.value && hoveredMessageId === item.data._id && item.data.sender?._id === currentUser?._id
-                    }"
-                  >
-                    <div class="message-content">
-                      <p class="message-text">{{ item.data.text }}</p>
-                      <div class="message-meta">
-                        <span class="message-time">{{ formatMessageTimestamp(item.data.createdAt) }}</span>
-                        <span v-if="item.data.isEdited" class="message-edited">(изменено)</span>
-                        <span v-if="item.data.sender?._id === currentUser?._id" class="message-status">
-                          <i :class="getMessageStatusIcon(item.data)"></i>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <!-- Message Actions (visible on hover/desktop) -->
-                  <div v-if="!isTouchDevice.value && hoveredMessageId === item.data._id && item.data.sender?._id === currentUser?._id && !editingMessageId" 
-                      class="message-actions">
-                    <button @click="startEditMessage(item.data._id)" class="action-icon edit-icon" title="Редактировать">
-                      <i class="bi-pencil-fill"></i>
-                    </button>
-                    <button @click="confirmDeleteMessage(item.data._id)" class="action-icon delete-icon" title="Удалить">
-                      <i class="bi-trash"></i>
-                    </button>
+      <!-- Messages Container -->
+      <div v-if="conversationData && !loadingInitialMessages && !error" ref="messagesContainer" class="messages-container">
+        <template v-for="item in messagesWithDateSeparators" :key="item.id">
+          <!-- Date Separator -->
+          <div v-if="item.type === 'date_separator'" class="date-separator">
+            <span class="date-badge">{{ formatDateHeader(item.timestamp) }}</span>
+          </div>
+          
+          <!-- Message Item -->
+          <div v-else-if="item.type === 'message'"
+               :class="['message-item', item.data.sender?._id === currentUser?._id ? 'sent' : 'received']"
+               @mouseenter="!isTouchDevice.value && handleMouseEnter(item.data)" 
+               @mouseleave="!isTouchDevice.value && handleMouseLeave()"
+               @click.stop="handleMessageTap(item.data, $event)" 
+               @contextmenu.stop="handleNativeContextMenu($event, item.data)">
+            <div class="message-wrapper">
+              <div 
+                class="message-bubble" 
+                :class="{ 
+                  'edited': item.data.isEdited,
+                  'with-actions': !isTouchDevice.value && hoveredMessageId === item.data._id && item.data.sender?._id === currentUser?._id
+                }"
+              >
+                <div class="message-content">
+                  <p class="message-text">{{ item.data.text }}</p>
+                  <div class="message-meta">
+                    <span class="message-time">{{ formatMessageTimestamp(item.data.createdAt) }}</span>
+                    <span v-if="item.data.isEdited" class="message-edited">(изменено)</span>
+                    <span v-if="item.data.sender?._id === currentUser?._id" class="message-status">
+                      <i :class="getMessageStatusIcon(item.data)"></i>
+                    </span>
                   </div>
                 </div>
               </div>
-            </template>
-
-            <!-- Scroll to Bottom Button -->
-            <button v-if="showScrollButton" class="scroll-bottom-btn" @click="scrollToBottom">
-              <i class="bi-arrow-down"></i>
-            </button>
-          </div>
-          
-          <!-- Message Input Area -->
-          <div v-if="isAuthenticated" class="message-input-container">
-            <form @submit.prevent="editingMessageId ? saveEditedMessage() : sendMessage()" class="message-form">
-              <input
-                type="text"
-                v-model="newMessageText"
-                class="message-input"
-                :placeholder="editingMessageId ? 'Редактирование сообщения...' : 'Введите сообщение...'"
-                :disabled="sendingMessage || savingEdit"
-                ref="messageInputRef"
-              />
-              <div class="input-actions">
-                <button 
-                  v-if="editingMessageId" 
-                  type="button" 
-                  class="action-btn secondary" 
-                  @click="cancelEditMessage"
-                  :disabled="savingEdit"
-                >
-                  Отмена
+              
+              <!-- Message Actions (visible on hover/desktop) -->
+              <div v-if="!isTouchDevice.value && hoveredMessageId === item.data._id && item.data.sender?._id === currentUser?._id && !editingMessageId" 
+                  class="message-actions">
+                <button @click="startEditMessage(item.data._id)" class="action-icon edit-icon" title="Редактировать">
+                  <i class="bi-pencil-fill"></i>
                 </button>
-                <button 
-                  type="submit" 
-                  class="action-btn primary" 
-                  :disabled="sendingMessage || savingEdit || !newMessageText.trim()"
-                >
-                  <span v-if="sendingMessage || savingEdit" class="spinner-small"></span>
-                  <i v-else :class="editingMessageId ? 'bi-check' : 'bi-send'"></i>
-                  {{ editingMessageId ? 'Сохранить' : 'Отправить' }}
+                <button @click="confirmDeleteMessage(item.data._id)" class="action-icon delete-icon" title="Удалить">
+                  <i class="bi-trash"></i>
                 </button>
               </div>
-            </form>
+            </div>
           </div>
-        </div>
+        </template>
+
+        <!-- Scroll to Bottom Button -->
+        <button v-if="showScrollButton" class="scroll-bottom-btn" @click="scrollToBottom">
+          <i class="bi-arrow-down"></i>
+        </button>
       </div>
+    </main>
+          
+    <!-- Фиксированный нижний блок для ввода сообщений -->
+    <div v-if="isAuthenticated && conversationData" class="message-input-container">
+      <form @submit.prevent="editingMessageId ? saveEditedMessage() : sendMessage()" class="message-form">
+        <input
+          type="text"
+          v-model="newMessageText"
+          class="message-input"
+          :placeholder="editingMessageId ? 'Редактирование сообщения...' : 'Введите сообщение...'"
+          :disabled="sendingMessage || savingEdit"
+          ref="messageInputRef"
+        />
+        <div class="input-actions">
+          <button 
+            v-if="editingMessageId" 
+            type="button" 
+            class="action-btn secondary" 
+            @click="cancelEditMessage"
+            :disabled="savingEdit"
+          >
+            Отмена
+          </button>
+          <button 
+            type="submit" 
+            class="action-btn primary" 
+            :disabled="sendingMessage || savingEdit || !newMessageText.trim()"
+          >
+            <span v-if="sendingMessage || savingEdit" class="spinner-small"></span>
+            <i v-else :class="editingMessageId ? 'bi-check' : 'bi-send'"></i>
+            {{ editingMessageId ? 'Сохранить' : 'Отправить' }}
+          </button>
+        </div>
+      </form>
     </div>
 
     <!-- Context Menu (Mobile) -->
@@ -183,12 +171,12 @@
 </template>
 
 <script setup>
-// Используем существующий script setup
+// Используем существующий script setup без изменений
 import { ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import api from '@/services/api';
 import { useAuth } from '@/auth';
-import { getSocket, connectSocket, disconnectSocket } from '@/services/socketService';
+import { getSocket, connectSocket } from '@/services/socketService';
 
 const route = useRoute();
 const router = useRouter();
@@ -691,50 +679,39 @@ const handleClickOutsideContextMenu = (event) => {
 </script>
 
 <style scoped>
-/* Global Reset and Base Styles */
-.modern-chat-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%;
+/* Основные стили */
+.app-chat-view {
   display: flex;
   flex-direction: column;
-  position: relative;
-}
-
-.container {
-  max-width: 800px;
-  margin: 0 auto;
+  height: 100vh;
   width: 100%;
-  padding: 0 15px;
+  position: relative;
+  background-color: #f8f9fa;
+  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  overflow: hidden;
 }
 
-/* Header Section */
+/* Хедер */
 .chat-header {
-  background: rgba(33, 33, 60, 0.8); /* Более темный, менее прозрачный фон */
+  background: rgba(33, 33, 60, 0.9);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  padding: 1rem 0;
+  padding: 0.8rem 1rem;
   color: white;
   position: sticky;
   top: 0;
   z-index: 10;
+  flex-shrink: 0;
+  height: var(--header-height, 56px);
 }
 
 .header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.chat-info {
   display: flex;
   align-items: center;
   gap: 1rem;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .back-button {
@@ -747,22 +724,17 @@ const handleClickOutsideContextMenu = (event) => {
   background: rgba(255, 255, 255, 0.2);
   color: white;
   text-decoration: none;
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
 }
 
-.back-button:hover {
-  background: rgba(255, 255, 255, 0.3);
-  transform: translateX(-2px);
-}
-
-/* Аватар участника (новый) */
 .participant-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   overflow: hidden;
   border: 2px solid white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  flex-shrink: 0;
 }
 
 .avatar-image {
@@ -786,29 +758,28 @@ const handleClickOutsideContextMenu = (event) => {
 }
 
 .participant-info {
-  display: flex;
-  flex-direction: column;
+  overflow: hidden;
 }
 
 .participant-name {
   margin: 0;
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   font-weight: 600;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Добавлена тень для лучшей видимости текста */
-  color: #ffffff; /* Гарантирует белый цвет текста */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .typing-status {
   margin: 0;
   font-size: 0.8rem;
-  opacity: 0.8;
+  opacity: 0.9;
   font-style: italic;
   display: flex;
   align-items: center;
   gap: 0.4rem;
 }
 
-/* Анимация "печатает" */
 .typing-animation {
   display: flex;
   gap: 3px;
@@ -837,18 +808,29 @@ const handleClickOutsideContextMenu = (event) => {
   50% { transform: translateY(-4px); }
 }
 
-/* Loading State */
-.loading-section {
+/* Основная область содержимого */
+.chat-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Состояния загрузки и ошибки */
+.loading-section,
+.error-section,
+.empty-section {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 400px;
-  flex-grow: 1;
-  color: white;
+  flex: 1;
+  padding: 1rem;
 }
 
 .loading-spinner {
   text-align: center;
+  color: white;
 }
 
 .spinner {
@@ -877,22 +859,19 @@ const handleClickOutsideContextMenu = (event) => {
   100% { transform: rotate(360deg); }
 }
 
-/* Error and Empty States */
-.error-section, .empty-section {
-  padding: 4rem 0;
-  flex-grow: 1;
-}
-
-.error-card, .empty-card {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
-  border-radius: 20px;
-  padding: 3rem;
+.error-card,
+.empty-card {
+  background: white;
+  border-radius: 16px;
+  padding: 2rem;
   text-align: center;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 100%;
 }
 
-.error-card i, .empty-card i {
+.error-card i,
+.empty-card i {
   font-size: 3rem;
   margin-bottom: 1rem;
 }
@@ -905,71 +884,46 @@ const handleClickOutsideContextMenu = (event) => {
   color: #6c757d;
 }
 
-.error-card h3, .empty-card h3 {
-  color: #495057;
+.error-card h3,
+.empty-card h3 {
+  color: #343a40;
   margin-bottom: 1rem;
 }
 
-.retry-btn {
+.retry-btn,
+.action-btn.primary {
   background: linear-gradient(45deg, #667eea, #764ba2);
   color: white;
   border: none;
-  padding: 0.75rem 2rem;
+  padding: 0.75rem 1.5rem;
   border-radius: 50px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-block;
+  box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
 }
 
-.retry-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
-}
-
-/* Main Content */
-.main-content {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 1rem 0;
-  position: relative;
-}
-
-/* Chat Card (новое) */
-.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);
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 140px);
-  position: relative;
-  margin: 0 auto; /* Центрировать карточку */
-  width: 100%; /* Ширина 100% в контейнере */
-}
-
-/* Messages Container */
+/* Контейнер сообщений */
 .messages-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem;
+  flex: 1;
   overflow-y: auto;
-  flex-grow: 1;
-  position: relative;
-  height: calc(100% - 80px);
+  padding: 1rem;
   scrollbar-width: thin;
   scrollbar-color: rgba(102, 126, 234, 0.5) rgba(255, 255, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  -webkit-overflow-scrolling: touch;
 }
 
 .messages-container::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
 }
 
 .messages-container::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
+  background: transparent;
 }
 
 .messages-container::-webkit-scrollbar-thumb {
@@ -977,11 +931,11 @@ const handleClickOutsideContextMenu = (event) => {
   border-radius: 6px;
 }
 
-/* Кнопка прокрутки вниз (новая) */
+/* Кнопка прокрутки вниз */
 .scroll-bottom-btn {
   position: absolute;
-  right: 20px;
-  bottom: 20px;
+  right: 16px;
+  bottom: 16px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
@@ -993,22 +947,15 @@ const handleClickOutsideContextMenu = (event) => {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.3s ease;
-  font-size: 1.2rem;
   z-index: 5;
 }
 
-.scroll-bottom-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
-}
-
-/* Date Separator */
+/* Разделитель даты */
 .date-separator {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 1.5rem 0;
+  margin: 1rem 0;
 }
 
 .date-badge {
@@ -1016,14 +963,14 @@ const handleClickOutsideContextMenu = (event) => {
   color: #495057;
   padding: 0.5rem 1rem;
   border-radius: 20px;
-  font-size: 0.9rem;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  font-size: 0.85rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* Message Styles */
+/* Стили сообщений */
 .message-item {
   display: flex;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.4rem;
 }
 
 .message-item.sent {
@@ -1032,11 +979,11 @@ const handleClickOutsideContextMenu = (event) => {
 
 .message-wrapper {
   position: relative;
-  max-width: 75%;
+  max-width: 80%;
 }
 
 .message-bubble {
-  padding: 0.8rem 1rem;
+  padding: 0.7rem 1rem;
   border-radius: 18px;
   position: relative;
   transition: all 0.2s ease;
@@ -1046,30 +993,18 @@ const handleClickOutsideContextMenu = (event) => {
   background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
   border-bottom-right-radius: 4px;
-  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
 }
 
 .received .message-bubble {
-  background: rgba(255, 255, 255, 0.95);
+  background: white;
   color: #333;
   border-bottom-left-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.sent .message-bubble.edited {
-  background: linear-gradient(135deg, #5c70d6, #6742a6);
-}
-
-.sent .message-bubble.with-actions {
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-}
-
-.message-content {
-  position: relative;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
 }
 
 .message-text {
-  margin: 0 0 0.5rem;
+  margin: 0 0 0.4rem;
   line-height: 1.4;
   word-break: break-word;
 }
@@ -1086,36 +1021,19 @@ const handleClickOutsideContextMenu = (event) => {
   justify-content: flex-start;
 }
 
-.message-time {
-  opacity: 0.8;
-}
-
-.message-edited {
-  font-style: italic;
-  opacity: 0.8;
-}
-
-.message-status {
-  opacity: 0.8;
-}
-
 .message-actions {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
+  left: -60px;
   display: flex;
-  gap: 0.5rem;
+  gap: 0.4rem;
   opacity: 0;
-  transition: opacity 0.3s ease, transform 0.3s ease;
+  transition: opacity 0.3s ease;
 }
 
 .sent .message-wrapper:hover .message-actions {
   opacity: 1;
-  transform: translateY(-50%) scale(1);
-}
-
-.sent .message-actions {
-  left: -60px; /* Outside message bubble */
 }
 
 .action-icon {
@@ -1128,51 +1046,53 @@ const handleClickOutsideContextMenu = (event) => {
   border: none;
   cursor: pointer;
   transition: all 0.2s ease;
-  background: rgba(255, 255, 255, 0.95);
+  background: white;
   color: #495057;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .edit-icon:hover {
   background: #0dcaf0;
   color: white;
-  transform: scale(1.1);
 }
 
 .delete-icon:hover {
   background: #dc3545;
   color: white;
-  transform: scale(1.1);
 }
 
-/* Message Input Container */
+/* Контейнер ввода сообщений */
 .message-input-container {
-  padding: 1rem;
   background: white;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 0.8rem 1rem;
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 }
 
 .message-form {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  position: relative;
 }
 
 .message-input {
-  flex-grow: 1;
-  padding: 0.8rem 1rem;
+  flex: 1;
+  padding: 0.7rem 1rem;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 24px;
   font-size: 0.95rem;
   background: white;
-  transition: all 0.3s ease;
 }
 
 .message-input:focus {
   outline: none;
   border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
 }
 
 .input-actions {
@@ -1180,26 +1100,18 @@ const handleClickOutsideContextMenu = (event) => {
   gap: 0.5rem;
 }
 
-/* Action Buttons */
 .action-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.8rem 1.25rem;
+  padding: 0.7rem 1.2rem;
   border: none;
   border-radius: 50px;
   font-weight: 600;
   font-size: 0.9rem;
-  transition: all 0.3s ease;
   cursor: pointer;
 }
 
-.action-btn.primary {
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-}
-
 .action-btn.secondary {
   background: #f1f3f5;
   color: #495057;
@@ -1210,16 +1122,7 @@ const handleClickOutsideContextMenu = (event) => {
   cursor: not-allowed;
 }
 
-.action-btn.primary:not(:disabled):hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
-}
-
-.action-btn.secondary:not(:disabled):hover {
-  background: #e9ecef;
-}
-
-/* Context Menu */
+/* Контекстное меню */
 .context-menu {
   position: fixed;
   z-index: 1000;
@@ -1230,11 +1133,6 @@ const handleClickOutsideContextMenu = (event) => {
   min-width: 180px;
 }
 
-.context-menu-content {
-  display: flex;
-  flex-direction: column;
-}
-
 .context-menu-item {
   display: flex;
   align-items: center;
@@ -1245,6 +1143,7 @@ const handleClickOutsideContextMenu = (event) => {
   text-align: left;
   cursor: pointer;
   transition: background 0.2s;
+  width: 100%;
 }
 
 .context-menu-item:hover {
@@ -1263,47 +1162,19 @@ const handleClickOutsideContextMenu = (event) => {
   color: #dc3545;
 }
 
-/* Responsive adjustments */
+/* Адаптивные стили */
 @media (max-width: 576px) {
-  .chat-card {
-    height: calc(100vh - 120px);
-    margin: 0;
-    border-radius: 0;
-  }
-  
   .message-wrapper {
     max-width: 85%;
   }
   
   .message-actions {
-    display: none; /* Hide on mobile, use context menu instead */
+    display: none; /* Скрываем на мобильных, используем контекстное меню */
   }
   
-  .messages-container {
-    padding: 1rem;
-  }
-  
-  .chat-input {
-    padding: 0.8rem;
-  }
-  
-  .message-bubble {
-    padding: 0.7rem 0.9rem;
-  }
-  
-  .message-meta {
-    font-size: 0.65rem;
-  }
-  
-  .scroll-bottom-btn {
-    width: 36px;
-    height: 36px;
-    right: 15px;
-    bottom: 15px;
-  }
-  
-  .participant-name {
-    font-size: 1.1rem;
+  .action-btn {
+    padding: 0.6rem 1rem;
+    font-size: 0.85rem;
   }
   
   .back-button {
@@ -1312,97 +1183,61 @@ const handleClickOutsideContextMenu = (event) => {
   }
 }
 
-/* Small phones */
 @media (max-width: 375px) {
   .message-wrapper {
     max-width: 90%;
   }
   
-  .chat-input {
-    padding: 0.6rem;
-  }
-  
-  .message-text {
-    font-size: 0.95rem;
-  }
-  
-  .message-typing {
-    font-size: 0.85rem;
-  }
-  
   .context-menu {
     width: 160px;
   }
+}
+
+/* Учитываем наличие нижней навигационной панели */
+@media (max-height: 680px) {
+  .messages-container {
+    padding: 0.8rem;
+    gap: 0.6rem;
+  }
   
-  .chat-info {
-    gap: 0.5rem;
+  .message-input-container {
+    padding: 0.7rem;
+  }
+  
+  .message-input {
+    padding: 0.6rem 0.8rem;
   }
   
   .action-btn {
     padding: 0.6rem 1rem;
-    font-size: 0.85rem;
   }
 }
 
-/* Large phones and small tablets */
-@media (min-width: 577px) and (max-width: 767px) {
-  .chat-card {
-    height: calc(100vh - 130px);
-  }
-  
-  .message-wrapper {
-    max-width: 80%;
-  }
-  
-  .message-actions {
-    opacity: 0.7; /* Always visible but slightly transparent */
-  }
-}
-
-/* Tablets */
-@media (min-width: 768px) and (max-width: 991px) {
-  .container {
-    max-width: 700px;
-  }
-  
-  .chat-card {
-    height: calc(100vh - 140px);
-  }
-}
-
-/* Small desktops */
-@media (min-width: 992px) and (max-width: 1199px) {
-  .container {
-    max-width: 800px;
-  }
-}
-
-/* Landscape orientation on mobile */
-@media (max-height: 500px) and (orientation: landscape) {
+/* Ландшафтная ориентация на мобильных */
+@media (max-height: 450px) and (orientation: landscape) {
   .chat-header {
-    padding: 0.5rem 0;
+    padding: 0.5rem 1rem;
+    height: 46px;
   }
   
-  .chat-card {
-    height: calc(100vh - 80px);
+  .participant-avatar {
+    width: 32px;
+    height: 32px;
   }
   
-  .messages-container {
-    padding: 0.8rem;
-    height: calc(100% - 60px);
+  .participant-name {
+    font-size: 1rem;
   }
   
-  .chat-input-container {
+  .message-input-container {
     padding: 0.5rem;
-    min-height: 60px;
   }
-  
-  .message-item {
-    margin-bottom: 0.4rem;
-  }
-  
-  .date-separator {
-    margin: 0.8rem 0;
+}
+
+/* Учет нижней мобильной навигации (примерно 60px) */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  .message-input-container {
+    padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/SwipeView.vue b/src/views/SwipeView.vue
index 5202b9c..648599b 100644
--- a/src/views/SwipeView.vue
+++ b/src/views/SwipeView.vue
@@ -1,23 +1,22 @@
 <template>
-  <div class="modern-swipe-view">
-    <!-- Header Section -->
+  <div class="app-swipe-view">
+    <!-- Фиксированный хедер -->
     <div class="swipe-header">
-      <div class="container">
-        <h2 class="section-title">Поиск</h2>
-      </div>
+      <h2 class="section-title">Поиск</h2>
     </div>
 
-    <!-- Loading State -->
-    <div v-if="loading" class="loading-section">
-      <div class="loading-spinner">
-        <div class="spinner"></div>
-        <p>Загрузка анкет...</p>
+    <!-- Основное содержимое -->
+    <main class="swipe-content">
+      <!-- Loading State -->
+      <div v-if="loading" class="loading-section">
+        <div class="loading-spinner">
+          <div class="spinner"></div>
+          <p>Загрузка анкет...</p>
+        </div>
       </div>
-    </div>
 
-    <!-- Error State -->
-    <div v-if="error" class="error-section">
-      <div class="container">
+      <!-- Error State -->
+      <div v-if="error" class="error-section">
         <div class="error-card">
           <i class="bi-exclamation-triangle"></i>
           <h3>Ошибка загрузки</h3>
@@ -25,138 +24,132 @@
           <button class="retry-btn" @click="fetchSuggestions">Попробовать снова</button>
         </div>
       </div>
-    </div>
 
-    <!-- No Suggestions State -->
-    <div v-if="!loading && suggestions.length === 0 && !error" class="empty-section">
-      <div class="container">
+      <!-- No Suggestions State -->
+      <div v-if="!loading && suggestions.length === 0 && !error" class="empty-section">
         <div class="empty-card">
           <i class="bi-person-x"></i>
           <h3>Нет анкет</h3>
           <p>Пока нет доступных анкет. Попробуй зайти позже!</p>
         </div>
       </div>
-    </div>
 
-    <!-- Main Content with Swipeable Cards -->
-    <div v-if="!loading && suggestions.length > 0 && !error" class="swipe-content">
-      <div class="container">
-        <div class="swipe-area" ref="swipeArea">
-          <!-- Swipeable Card Container -->
-          <div class="card-stack-container">
-            <div 
-              v-for="(user, index) in visibleUsers" 
-              :key="user._id"
-              class="swipe-card" 
-              :class="{ 
-                'active': index === 0, 
-                'next': index === 1,
-                'swiping-left': swipeDirection === 'left' && index === 0,
-                'swiping-right': swipeDirection === 'right' && index === 0
-              }"
-              :style="index === 0 ? cardStyle : {}"
-              @touchstart="index === 0 ? startTouch($event) : null"
-              @touchmove="index === 0 ? moveTouch($event) : null"
-              @touchend="index === 0 ? endTouch($event) : null"
-              @mousedown="index === 0 ? startDrag($event) : null"
-            >
-              <!-- Photo Section -->
-              <div class="card-photo-section">
-                <!-- Photo Carousel -->
-                <div class="photo-carousel">
-                  <!-- Option 1: Photos Array -->
-                  <div 
-                    v-if="user.photos && user.photos.length > 0"
-                    class="carousel-wrapper"
-                  >
-                    <div class="carousel-inner">
-                      <div 
-                        v-for="(photo, photoIndex) in user.photos"
-                        :key="photo.public_id || photo._id"
-                        class="carousel-slide"
-                        :class="{ 'active': currentPhotoIndex[user._id] === photoIndex }"
-                      >
-                        <img 
-                          :src="photo.url"
-                          class="photo-image"
-                          :alt="'Фото ' + user.name"
-                          @error="onImageError($event, user, photo, 'carousel')"
-                        />
-                      </div>
-                    </div>
-                    
-                    <!-- Photo Navigation Dots -->
-                    <div class="carousel-dots" v-if="user.photos.length > 1">
-                      <span 
-                        v-for="(photo, photoIndex) in user.photos" 
-                        :key="`dot-${photo._id}`"
-                        class="dot"
-                        :class="{ 'active': currentPhotoIndex[user._id] === photoIndex }"
-                        @click.stop="changePhoto(user._id, photoIndex)"
-                      ></span>
-                    </div>
-                    
-                    <!-- Previous/Next buttons -->
-                    <button 
-                      v-if="user.photos.length > 1" 
-                      class="carousel-nav prev"
-                      @click.stop="prevPhoto(user._id)"
+      <!-- Main Card Swiping Area -->
+      <div v-if="!loading && suggestions.length > 0 && !error" class="swipe-area" ref="swipeArea">
+        <!-- Card Stack -->
+        <div class="card-stack">
+          <div 
+            v-for="(user, index) in visibleUsers" 
+            :key="user._id"
+            class="swipe-card" 
+            :class="{ 
+              'active': index === 0, 
+              'next': index === 1,
+              'swiping-left': swipeDirection === 'left' && index === 0,
+              'swiping-right': swipeDirection === 'right' && index === 0
+            }"
+            :style="index === 0 ? cardStyle : {}"
+            @touchstart="index === 0 ? startTouch($event) : null"
+            @touchmove="index === 0 ? moveTouch($event) : null"
+            @touchend="index === 0 ? endTouch($event) : null"
+            @mousedown="index === 0 ? startDrag($event) : null"
+          >
+            <!-- Photo Section -->
+            <div class="card-photo-section">
+              <!-- Photo Carousel -->
+              <div class="photo-carousel">
+                <!-- Photos Array -->
+                <div 
+                  v-if="user.photos && user.photos.length > 0"
+                  class="carousel-wrapper"
+                >
+                  <div class="carousel-inner">
+                    <div 
+                      v-for="(photo, photoIndex) in user.photos"
+                      :key="photo.public_id || photo._id"
+                      class="carousel-slide"
+                      :class="{ 'active': currentPhotoIndex[user._id] === photoIndex }"
                     >
-                      <i class="bi-chevron-left"></i>
-                    </button>
-                    <button 
-                      v-if="user.photos.length > 1" 
-                      class="carousel-nav next"
-                      @click.stop="nextPhoto(user._id)"
-                    >
-                      <i class="bi-chevron-right"></i>
-                    </button>
+                      <img 
+                        :src="photo.url"
+                        class="photo-image"
+                        :alt="'Фото ' + user.name"
+                        @error="onImageError($event, user, photo, 'carousel')"
+                      />
+                    </div>
                   </div>
                   
-                  <!-- Option 2: Single Photo -->
-                  <div v-else-if="user.mainPhotoUrl" class="single-photo">
-                    <img 
-                      :src="user.mainPhotoUrl"
-                      class="photo-image"
-                      :alt="'Фото ' + user.name"
-                      @error="onImageError($event, user, { url: user.mainPhotoUrl }, 'mainPhoto')"
-                    />
+                  <!-- Photo Navigation Dots -->
+                  <div class="carousel-dots" v-if="user.photos.length > 1">
+                    <span 
+                      v-for="(photo, photoIndex) in user.photos" 
+                      :key="`dot-${photo._id}`"
+                      class="dot"
+                      :class="{ 'active': currentPhotoIndex[user._id] === photoIndex }"
+                      @click.stop="changePhoto(user._id, photoIndex)"
+                    ></span>
                   </div>
                   
-                  <!-- Option 3: No Photo Placeholder -->
-                  <div v-else class="no-photo">
-                    <i class="bi-person"></i>
-                  </div>
+                  <!-- Previous/Next buttons -->
+                  <button 
+                    v-if="user.photos.length > 1" 
+                    class="carousel-nav prev"
+                    @click.stop="prevPhoto(user._id)"
+                  >
+                    <i class="bi-chevron-left"></i>
+                  </button>
+                  <button 
+                    v-if="user.photos.length > 1" 
+                    class="carousel-nav next"
+                    @click.stop="nextPhoto(user._id)"
+                  >
+                    <i class="bi-chevron-right"></i>
+                  </button>
                 </div>
                 
-                <!-- Action Indicators -->
-                <div class="swipe-indicators">
-                  <div 
-                    class="like-indicator"
-                    :class="{ 'visible': swipeDirection === 'right' && index === 0 }"
-                  >
-                    <i class="bi-heart-fill"></i>
-                  </div>
-                  <div 
-                    class="pass-indicator"
-                    :class="{ 'visible': swipeDirection === 'left' && index === 0 }"
-                  >
-                    <i class="bi-x-lg"></i>
-                  </div>
+                <!-- Single Photo -->
+                <div v-else-if="user.mainPhotoUrl" class="single-photo">
+                  <img 
+                    :src="user.mainPhotoUrl"
+                    class="photo-image"
+                    :alt="'Фото ' + user.name"
+                    @error="onImageError($event, user, { url: user.mainPhotoUrl }, 'mainPhoto')"
+                  />
                 </div>
                 
-                <!-- User Info Overlay -->
-                <div class="user-info-overlay">
-                  <h3 class="user-name">{{ user.name }}<span class="user-age">, {{ user.age || '?' }}</span></h3>
-                  <p class="user-gender">{{ formatGender(user.gender) }}</p>
+                <!-- No Photo Placeholder -->
+                <div v-else class="no-photo">
+                  <i class="bi-person"></i>
                 </div>
               </div>
               
-              <!-- User Details Section -->
-              <div class="card-details-section">
-                <div class="bio-container">
-                  <p class="bio-text">{{ user.bio || 'Нет описания.' }}</p>
+              <!-- Action Indicators -->
+              <div class="swipe-indicators">
+                <div 
+                  class="like-indicator"
+                  :class="{ 'visible': swipeDirection === 'right' && index === 0 }"
+                >
+                  <i class="bi-heart-fill"></i>
                 </div>
+                <div 
+                  class="pass-indicator"
+                  :class="{ 'visible': swipeDirection === 'left' && index === 0 }"
+                >
+                  <i class="bi-x-lg"></i>
+                </div>
+              </div>
+              
+              <!-- User Info Overlay -->
+              <div class="user-info-overlay">
+                <h3 class="user-name">{{ user.name }}<span class="user-age">, {{ user.age || '?' }}</span></h3>
+                <p class="user-gender">{{ formatGender(user.gender) }}</p>
+              </div>
+            </div>
+            
+            <!-- User Details Section -->
+            <div class="card-details-section">
+              <div class="bio-container">
+                <p class="bio-text">{{ user.bio || 'Нет описания' }}</p>
               </div>
             </div>
           </div>
@@ -184,7 +177,7 @@
           </button>
         </div>
       </div>
-    </div>
+    </main>
     
     <!-- Match Notification -->
     <transition name="match-popup">
@@ -661,55 +654,58 @@ watch(suggestions, () => {
 </script>
 
 <style scoped>
-/* Global Reset and Base Styles */
-.modern-swipe-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%;
-  position: relative;
+/* Основные стили контейнера */
+.app-swipe-view {
   display: flex;
   flex-direction: column;
-}
-
-.container {
-  max-width: 640px;
-  margin: 0 auto;
+  height: 100vh;
   width: 100%;
-  padding: 0 15px;
+  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
 }
 
-/* Header Section */
+/* Хедер */
 .swipe-header {
-  background: rgba(33, 33, 60, 0.8);
+  background: rgba(33, 33, 60, 0.9);
   backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  padding: 1rem 0;
+  padding: 0.8rem 0;
+  text-align: center;
   color: white;
   position: sticky;
   top: 0;
   z-index: 10;
+  height: var(--header-height, 56px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .section-title {
   margin: 0;
-  font-size: 1.5rem;
-  text-align: center;
+  font-size: 1.3rem;
   font-weight: 600;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
-/* Loading State */
-.loading-section {
+/* Основная область контента */
+.swipe-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Состояния загрузки и ошибки */
+.loading-section,
+.error-section,
+.empty-section {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 400px;
-  flex-grow: 1;
+  flex: 1;
+  padding: 1rem;
   color: white;
 }
 
@@ -732,98 +728,75 @@ watch(suggestions, () => {
   100% { transform: rotate(360deg); }
 }
 
-/* Error and Empty States */
-.error-section, .empty-section {
-  padding: 4rem 0;
-  flex-grow: 1;
-}
-
 .error-card, .empty-card {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
+  background: white;
   border-radius: 20px;
-  padding: 3rem;
+  padding: 2rem;
   text-align: center;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  max-width: 400px;
+  width: 100%;
 }
 
 .error-card i, .empty-card i {
   font-size: 3rem;
   margin-bottom: 1rem;
-}
-
-.error-card i {
-  color: #dc3545;
-}
-
-.empty-card i {
-  color: #6c757d;
+  color: #495057;
 }
 
 .error-card h3, .empty-card h3 {
-  color: #495057;
-  margin-bottom: 1rem;
+  color: #343a40;
+  margin-bottom: 0.5rem;
 }
 
 .retry-btn {
   background: linear-gradient(45deg, #667eea, #764ba2);
   color: white;
   border: none;
-  padding: 0.75rem 2rem;
+  padding: 0.8rem 2rem;
   border-radius: 50px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
+  margin-top: 1rem;
+  display: inline-block;
 }
 
-.retry-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
-}
-
-/* Main Content */
-.swipe-content {
-  flex-grow: 1;
+/* Область свайпов */
+.swipe-area {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 1rem 0;
+  position: relative;
+  padding: 0.8rem;
+  touch-action: none;
 }
 
-/* Swipe Area */
-.swipe-area {
+/* Стек карточек */
+.card-stack {
+  flex: 1;
   position: relative;
-  height: 68vh;
-  max-height: 680px;
-  min-height: 450px;
   margin: 0 auto;
   width: 100%;
-  perspective: 1000px;
-  touch-action: none;
-  user-select: none;
-}
-
-/* Card Stack */
-.card-stack-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
+  max-width: 400px;
   perspective: 1000px;
 }
 
-/* Swipe Card */
+/* Свайп-карточка */
 .swipe-card {
   position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 20px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 16px;
   background-color: white;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   overflow: hidden;
-  transition: transform 0.3s ease, opacity 0.3s ease, scale 0.3s ease;
-  cursor: grab;
-  will-change: transform;
   display: flex;
   flex-direction: column;
+  will-change: transform;
+  transition: transform 0.3s ease, opacity 0.3s ease, scale 0.3s ease;
 }
 
 .swipe-card.active {
@@ -836,48 +809,15 @@ watch(suggestions, () => {
   opacity: 0.8;
 }
 
-/* Card Animations */
-.swipe-card.swiping-left {
-  animation: swipeLeft 0.5s forwards;
-}
-
-.swipe-card.swiping-right {
-  animation: swipeRight 0.5s forwards;
-}
-
-@keyframes swipeLeft {
-  to {
-    transform: translateX(-120%) rotate(-12deg);
-    opacity: 0;
-  }
-}
-
-@keyframes swipeRight {
-  to {
-    transform: translateX(120%) rotate(12deg);
-    opacity: 0;
-  }
-}
-
-/* Card-Stack Transitions */
-.card-stack-enter-active, .card-stack-leave-active {
-  transition: transform 0.5s ease, opacity 0.5s ease;
-}
-
-.card-stack-enter-from, .card-stack-leave-to {
-  opacity: 0;
-  transform: translateX(100%) rotate(5deg);
-}
-
-/* Photo Section */
+/* Секция с фотографией */
 .card-photo-section {
   flex: 1;
   position: relative;
   min-height: 0;
+  max-height: 70vh;
   overflow: hidden;
 }
 
-/* Photo Carousel */
 .photo-carousel {
   width: 100%;
   height: 100%;
@@ -917,7 +857,7 @@ watch(suggestions, () => {
   object-fit: cover;
 }
 
-/* Carousel Navigation */
+/* Навигация карусели */
 .carousel-nav {
   position: absolute;
   top: 50%;
@@ -932,23 +872,17 @@ watch(suggestions, () => {
   justify-content: center;
   cursor: pointer;
   z-index: 5;
-  transition: all 0.3s ease;
-}
-
-.carousel-nav:hover {
-  background: rgba(255, 255, 255, 0.9);
-  transform: translateY(-50%) scale(1.1);
+  transition: all 0.2s ease;
 }
 
 .carousel-nav.prev {
-  left: 10px;
+  left: 12px;
 }
 
 .carousel-nav.next {
-  right: 10px;
+  right: 12px;
 }
 
-/* Carousel Dots */
 .carousel-dots {
   position: absolute;
   bottom: 15px;
@@ -956,7 +890,7 @@ watch(suggestions, () => {
   right: 0;
   display: flex;
   justify-content: center;
-  gap: 8px;
+  gap: 6px;
   z-index: 5;
 }
 
@@ -966,21 +900,20 @@ watch(suggestions, () => {
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
 }
 
 .dot.active {
   background-color: white;
-  transform: scale(1.3);
+  transform: scale(1.2);
 }
 
-/* Single Photo */
+/* Заполнители для фото */
 .single-photo {
   width: 100%;
   height: 100%;
 }
 
-/* No Photo Placeholder */
 .no-photo {
   width: 100%;
   height: 100%;
@@ -991,11 +924,11 @@ watch(suggestions, () => {
 }
 
 .no-photo i {
-  font-size: 5rem;
+  font-size: 4rem;
   color: #adb5bd;
 }
 
-/* Swipe Indicators */
+/* Индикаторы действий */
 .swipe-indicators {
   position: absolute;
   top: 0;
@@ -1012,12 +945,12 @@ watch(suggestions, () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100px;
-  height: 100px;
+  width: 90px;
+  height: 90px;
   border-radius: 50%;
-  font-size: 3rem;
+  font-size: 2.8rem;
   opacity: 0;
-  transition: opacity 0.3s ease, transform 0.3s ease;
+  transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
 .like-indicator {
@@ -1037,80 +970,62 @@ watch(suggestions, () => {
   transform: translateY(-50%) scale(1);
 }
 
-/* User Info Overlay */
+/* Информация о пользователе */
 .user-info-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
   color: white;
-  padding: 20px;
+  padding: 16px;
   text-align: left;
 }
 
 .user-name {
-  font-size: 1.8rem;
   margin: 0;
+  font-size: 1.6rem;
   font-weight: 600;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
-.user-age {
-  font-weight: normal;
-}
-
 .user-gender {
   margin: 5px 0 0;
   opacity: 0.9;
-  font-size: 0.95rem;
 }
 
-/* Card Details */
+/* Секция с деталями */
 .card-details-section {
-  padding: 15px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background: white;
+  padding: 12px 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  flex-shrink: 0;
 }
 
 .bio-container {
   max-height: 80px;
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: rgba(102, 126, 234, 0.5) rgba(255, 255, 255, 0.1);
-}
-
-.bio-container::-webkit-scrollbar {
-  width: 4px;
-}
-
-.bio-container::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.bio-container::-webkit-scrollbar-thumb {
-  background-color: rgba(102, 126, 234, 0.5);
-  border-radius: 4px;
+  -webkit-overflow-scrolling: touch;
 }
 
 .bio-text {
   margin: 0;
-  font-size: 0.95rem;
   line-height: 1.5;
   color: #333;
 }
 
-/* Action Buttons */
+/* Кнопки действий */
 .action-buttons {
   display: flex;
   justify-content: center;
   gap: 20px;
-  margin-top: 20px;
-  padding-bottom: 20px;
+  padding: 16px 0;
 }
 
 .action-btn {
-  width: 70px;
-  height: 70px;
+  width: 65px;
+  height: 65px;
   border-radius: 50%;
   border: none;
   display: flex;
@@ -1118,6 +1033,7 @@ watch(suggestions, () => {
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
+  background: white;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -1127,36 +1043,23 @@ watch(suggestions, () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
   font-size: 1.8rem;
 }
 
-.pass-btn {
-  background-color: white;
+.pass-btn .btn-icon {
   color: #dc3545;
 }
 
-.pass-btn:hover:not(:disabled) {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 15px rgba(220, 53, 69, 0.3);
-}
-
-.like-btn {
-  background-color: white;
+.like-btn .btn-icon {
   color: #28a745;
 }
 
-.like-btn:hover:not(:disabled) {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 15px rgba(40, 167, 69, 0.3);
-}
-
 .action-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-/* Match Popup */
+/* Всплывающее окно совпадения */
 .match-popup {
   position: fixed;
   top: 50%;
@@ -1164,9 +1067,9 @@ watch(suggestions, () => {
   transform: translate(-50%, -50%);
   background: white;
   border-radius: 20px;
-  padding: 2rem;
+  padding: 1.8rem;
   width: 90%;
-  max-width: 400px;
+  max-width: 360px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
   text-align: center;
   z-index: 1000;
@@ -1179,30 +1082,29 @@ watch(suggestions, () => {
 .match-header i {
   font-size: 3rem;
   color: #ff6b6b;
-  display: block;
   margin-bottom: 1rem;
 }
 
 .match-header h3 {
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   color: #333;
   margin: 0;
 }
 
 .match-actions {
   display: flex;
-  gap: 1rem;
-  justify-content: center;
+  flex-direction: column;
+  gap: 0.8rem;
 }
 
 .match-btn {
-  flex: 1;
   padding: 0.8rem 1rem;
   border-radius: 50px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
+  width: 100%;
 }
 
 .match-btn.primary {
@@ -1215,15 +1117,7 @@ watch(suggestions, () => {
   color: #495057;
 }
 
-.match-btn:hover {
-  transform: translateY(-2px);
-}
-
-.match-btn.primary:hover {
-  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
-}
-
-/* Overlay */
+/* Затемняющий оверлей */
 .overlay {
   position: fixed;
   top: 0;
@@ -1235,7 +1129,7 @@ watch(suggestions, () => {
   z-index: 999;
 }
 
-/* Match Popup Animation */
+/* Анимации для всплывающего окна */
 .match-popup-enter-active, .match-popup-leave-active {
   transition: all 0.3s ease;
 }
@@ -1245,23 +1139,85 @@ watch(suggestions, () => {
   opacity: 0;
 }
 
-/* Добавляем стили для Swipe компонентов */
-.swipe {
-  height: 100%;
-  width: 100%;
-  overflow: visible;
+/* Адаптивные настройки */
+@media (min-height: 700px) {
+  .card-photo-section {
+    max-height: 65vh;
+  }
 }
 
-.swipe-item {
-  height: 100%;
-  width: 100%;
+@media (max-height: 600px) {
+  .card-photo-section {
+    max-height: 60vh;
+  }
+  
+  .card-details-section {
+    padding: 8px 12px;
+  }
+  
+  .bio-container {
+    max-height: 60px;
+  }
+  
+  .action-buttons {
+    padding: 10px 0;
+  }
+  
+  .action-btn {
+    width: 55px;
+    height: 55px;
+  }
+  
+  .btn-icon {
+    font-size: 1.5rem;
+  }
 }
 
-/* Responsive Adjustments */
-@media (max-width: 576px) {
+/* Ландшафтная ориентация */
+@media (max-height: 450px) and (orientation: landscape) {
   .swipe-area {
-    height: 60vh;
-    min-height: 400px;
+    flex-direction: row;
+    gap: 0.8rem;
+    padding: 0.5rem 0.8rem;
+  }
+  
+  .card-stack {
+    max-width: calc(100% - 130px);
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+    height: 100%;
+    padding: 16px 0;
+    justify-content: center;
+  }
+  
+  .swipe-header {
+    height: 46px;
+    padding: 0.5rem 0;
+  }
+  
+  .section-title {
+    font-size: 1.1rem;
+  }
+  
+  .card-details-section {
+    padding: 6px 10px;
+  }
+  
+  .bio-container {
+    max-height: 50px;
+  }
+  
+  .user-name {
+    font-size: 1.3rem;
+  }
+}
+
+/* Маленькие экраны */
+@media (max-width: 375px) {
+  .user-name {
+    font-size: 1.4rem;
   }
   
   .action-btn {
@@ -1269,267 +1225,22 @@ watch(suggestions, () => {
     height: 60px;
   }
   
-  .user-name {
-    font-size: 1.5rem;
+  .carousel-nav {
+    width: 32px;
+    height: 32px;
   }
   
-  .card-details-section {
-    padding: 10px;
-  }
-  
-  .bio-container {
-    max-height: 60px;
-  }
-
-  .section-title {
-    font-size: 1.3rem;
-  }
-
   .like-indicator, .pass-indicator {
     width: 80px;
     height: 80px;
     font-size: 2.5rem;
   }
-
-  .carousel-nav {
-    width: 32px;
-    height: 32px;
-  }
-
-  /* Match Popup адаптация для мобильных */
-  .match-popup {
-    width: 95%;
-    max-width: 340px;
-    padding: 1.5rem 1rem;
-  }
-  
-  .match-header i {
-    font-size: 2.5rem;
-    margin-bottom: 0.75rem;
-  }
-  
-  .match-header h3 {
-    font-size: 1.3rem;
-  }
-  
-  .match-actions {
-    flex-direction: column;
-  }
-  
-  .match-btn {
-    padding: 0.7rem 0.8rem;
-    font-size: 0.95rem;
-  }
 }
 
-/* Small phones */
-@media (max-width: 375px) {
-  .swipe-area {
-    height: 55vh;
-    min-height: 350px;
-  }
-  
-  .action-btn {
-    width: 50px;
-    height: 50px;
-  }
-  
-  .user-name {
-    font-size: 1.3rem;
-  }
-  
-  .user-gender {
-    font-size: 0.85rem;
-  }
-  
-  .bio-text {
-    font-size: 0.9rem;
-  }
-  
+/* Учитываем Safe Area для iPhone X+ */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
   .action-buttons {
-    gap: 15px;
-  }
-  
-  .like-indicator, .pass-indicator {
-    width: 70px;
-    height: 70px;
-    font-size: 2rem;
-  }
-  
-  /* Match Popup адаптация для малых экранов */
-  .match-popup {
-    width: 100%;
-    max-width: 300px;
-    padding: 1.25rem 0.75rem;
-    border-radius: 15px;
-  }
-  
-  .match-header i {
-    font-size: 2.2rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  .match-header h3 {
-    font-size: 1.2rem;
-  }
-  
-  .match-btn {
-    padding: 0.6rem 0.75rem;
-    font-size: 0.9rem;
-  }
-}
-
-/* Large phones and small tablets */
-@media (min-width: 577px) and (max-width: 767px) {
-  .swipe-area {
-    height: 65vh;
-    max-height: 600px;
-  }
-  
-  .action-buttons {
-    margin-top: 15px;
-  }
-  
-  /* Match Popup адаптация для средних экранов */
-  .match-popup {
-    width: 85%;
-    max-width: 380px;
-    padding: 1.75rem;
-  }
-  
-  .match-header i {
-    font-size: 2.8rem;
-  }
-}
-
-/* Tablets */
-@media (min-width: 768px) and (max-width: 991px) {
-  .container {
-    max-width: 700px;
-  }
-  
-  .swipe-area {
-    height: 70vh;
-    max-height: 700px;
-  }
-  
-  .action-btn {
-    width: 75px;
-    height: 75px;
-  }
-  
-  .btn-icon {
-    font-size: 2rem;
-  }
-  
-  /* Match Popup адаптация для планшетов */
-  .match-popup {
-    width: 80%;
-    max-width: 450px;
-  }
-  
-  .match-header i {
-    font-size: 3.2rem;
-  }
-  
-  .match-btn {
-    padding: 0.9rem 1.2rem;
-    font-size: 1rem;
-  }
-}
-
-/* Small desktops */
-@media (min-width: 992px) and (max-width: 1199px) {
-  .container {
-    max-width: 800px;
-  }
-  
-  .swipe-area {
-    max-height: 750px;
-  }
-  
-  /* Match Popup адаптация для настольных */
-  .match-popup {
-    max-width: 480px;
-    padding: 2.25rem;
-  }
-}
-
-/* Large desktops */
-@media (min-width: 1200px) {
-  .container {
-    max-width: 850px;
-  }
-  
-  .swipe-area {
-    max-height: 800px;
-  }
-}
-
-/* Landscape orientation on mobile */
-@media (max-height: 576px) and (orientation: landscape) {
-  .swipe-area {
-    height: 80vh;
-    min-height: 280px;
-  }
-  
-  .action-buttons {
-    margin-top: 10px;
-    padding-bottom: 10px;
-  }
-  
-  .action-btn {
-    width: 50px;
-    height: 50px;
-  }
-  
-  .bio-container {
-    max-height: 40px;
-  }
-  
-  .card-details-section {
-    padding: 8px;
-  }
-  
-  .user-info-overlay {
-    padding: 10px;
-  }
-  
-  .user-name {
-    font-size: 1.3rem;
-  }
-  
-  /* Match Popup адаптация для ландшафтной ориентации */
-  .match-popup {
-    width: 70%;
-    max-width: 450px;
-    padding: 1rem 1.5rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    text-align: left;
-  }
-  
-  .match-content {
-    display: flex;
-    width: 100%;
-    align-items: center;
-  }
-  
-  .match-header {
-    margin-bottom: 0;
-    margin-right: 1.5rem;
-    flex: 1;
-  }
-  
-  .match-actions {
-    flex-direction: column;
-    flex: 1;
-    gap: 0.7rem;
-  }
-  
-  .match-btn {
-    padding: 0.6rem 0.8rem;
+    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
   }
 }
 </style>
\ No newline at end of file