фикс счетчика сообщений

src/App.vue

@@ -257,6 +257,40 @@ body {
   height: 28px;
 }
 
+/* Стили для индикатора непрочитанных сообщений в навигации */
+.nav-icon .unread-badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  background: linear-gradient(135deg, #ff6b6b, #ff5252);
+  color: white;
+  font-size: 0.65rem;
+  font-weight: 700;
+  border-radius: 10px;
+  min-width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
+  border: 2px solid white;
+  animation: pulse-notification 2s ease-in-out infinite;
+  z-index: 1;
+}
+
+/* Анимация пульсации для привлечения внимания */
+@keyframes pulse-notification {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
+  }
+  50% {
+    transform: scale(1.1);
+    box-shadow: 0 3px 12px rgba(255, 107, 107, 0.6);
+  }
+}
+
 /* Оборачиваем текст для лучшего управления */
 .nav-text {
   font-size: 0.7rem;
@@ -266,6 +300,16 @@ body {
   display: block;
 }
 
+/* Активная вкладка */
+.nav-item.active {
+  color: #667eea;
+}
+
+.nav-item.active .nav-icon i {
+  color: #667eea;
+  transform: translateY(-2px);
+}
+
 /* CSS переменные для динамической настройки */
 :root {
   --nav-height: 60px;

src/views/ChatListView.vue

@@ -510,18 +510,33 @@ const getDialogsCountText = (count) => {
   position: absolute;
   top: -2px;
   right: -2px;
-  background-color: #ff6b6b;
+  background: linear-gradient(135deg, #ff6b6b, #ff5252);
   color: white;
-  font-size: 0.7rem;
-  border-radius: 50%;
-  min-width: 18px;
-  height: 18px;
+  font-size: 0.65rem;
+  font-weight: 700;
+  border-radius: 10px;
+  min-width: 20px;
+  height: 20px;
   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;
+  padding: 0 6px;
+  box-shadow: 0 3px 8px rgba(255, 107, 107, 0.4);
+  border: 2px solid white;
+  z-index: 2;
+  animation: subtle-pulse 2s ease-in-out infinite;
+}
+
+/* Мягкая анимация пульсации для непрочитанных сообщений */
+@keyframes subtle-pulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 3px 8px rgba(255, 107, 107, 0.4);
+  }
+  50% {
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.6);
+  }
 }
 
 /* Информация о диалоге */