From 4648aab7d57c6d289cca6964832a161fd1daa5db Mon Sep 17 00:00:00 2001
From: Alex <info@hb3-accelerator.com>
Date: Mon, 21 Apr 2025 16:52:32 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B2=D0=B0=D1=88=D0=B5=20=D1=81=D0=BE=D0=BE?=
 =?UTF-8?q?=D0=B1=D1=89=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=BC?=
 =?UTF-8?q?=D0=B8=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/eslint.config.js                     |   37 +-
 frontend/src/App.vue                          |  143 +-
 frontend/src/api/axios.js                     |   10 +-
 frontend/src/assets/styles/home.css           | 2949 +++++++++------
 .../src/components/chat/ConversationList.vue  |  281 +-
 frontend/src/components/chat/MessageInput.vue |  310 +-
 .../src/components/chat/MessageThread.vue     |  276 +-
 .../src/components/identity/EmailConnect.vue  |  213 +-
 .../components/identity/TelegramConnect.vue   |  265 +-
 .../components/identity/WalletConnection.vue  |  140 +-
 frontend/src/components/identity/index.js     |    6 +-
 frontend/src/composables/useAuth.js           |  227 +-
 frontend/src/main.js                          |    3 +-
 frontend/src/router/index.js                  |   10 +-
 frontend/src/services/tokens.js               |   30 +-
 frontend/src/services/wallet.js               |   40 +-
 frontend/src/utils/wallet.js                  |   97 +-
 frontend/src/views/HomeView.vue               | 3227 +++++++++--------
 frontend/vite.config.js                       |    6 +-
 yarn.lock                                     |    4 +
 20 files changed, 4206 insertions(+), 4068 deletions(-)
 create mode 100644 yarn.lock

diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index 0f514fd..bb938be 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -1,7 +1,8 @@
 import globals from 'globals';
+import * as vueParser from 'vue-eslint-parser';
 import vuePlugin from 'eslint-plugin-vue';
 import prettierPlugin from 'eslint-plugin-prettier';
-import prettierConfig from '@vue/eslint-config-prettier';
+import eslintConfigPrettier from 'eslint-config-prettier';
 
 export default [
   {
@@ -35,29 +36,37 @@ export default [
         ...globals.browser,
         ...globals.es2021,
       },
-      parser: vuePlugin.parser,
+      parser: vueParser,
       parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
+        sourceType: 'module',
+        ecmaVersion: 2022,
       },
     },
     plugins: {
       vue: vuePlugin,
       prettier: prettierPlugin,
     },
-    processor: vuePlugin.processors['.vue'],
     rules: {
-      ...prettierConfig.rules,
+      ...vuePlugin.configs.base.rules,
+      ...vuePlugin.configs['vue3-essential'].rules,
+      ...vuePlugin.configs['vue3-strongly-recommended'].rules,
+      ...vuePlugin.configs['vue3-recommended'].rules,
+      ...eslintConfigPrettier.rules,
+      'prettier/prettier': 'warn',
+      'vue/comment-directive': 'off',
       'vue/multi-word-component-names': 'off',
       'vue/no-unused-vars': 'warn',
-      'vue/html-self-closing': ['warn', {
-        html: {
-          void: 'always',
-          normal: 'always',
-          component: 'always'
-        }
-      }],
+      'vue/no-v-html': 'off',
+      'vue/html-self-closing': [
+        'warn',
+        {
+          html: {
+            void: 'always',
+            normal: 'always',
+            component: 'always',
+          },
+        },
+      ],
       'vue/component-name-in-template-casing': ['warn', 'PascalCase'],
     },
   },
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3437f0f..63e7762 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,137 +1,28 @@
 <template>
   <div id="app">
-    <router-view />
+    <div v-if="isLoading" class="loading-overlay">
+      <div class="loading-spinner" />
+    </div>
+
+    <RouterView />
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, provide, computed } from 'vue';
-import { useRouter } from 'vue-router';
-import axios from 'axios';
+  import { ref, watch } from 'vue';
+  import { RouterView } from 'vue-router';
+  import { useAuth } from './composables/useAuth';
+  import './assets/styles/home.css';
 
-console.log('App.vue: Version with auth check loaded');
+  // Состояние загрузки
+  const isLoading = ref(false);
 
-const router = useRouter();
+  // Использование composable для аутентификации
+  const { isAuthenticated } = useAuth();
 
-// Создаем реактивное состояние с помощью ref
-const authState = ref({
-  isAuthenticated: false,
-  userRole: null,
-  address: null
-});
-
-// Предоставляем состояние аутентификации всем компонентам
-const auth = {
-  // Используем computed для реактивности
-  isAuthenticated: computed(() => authState.value.isAuthenticated),
-  userRole: computed(() => authState.value.userRole),
-  address: computed(() => authState.value.address),
-  async checkAuth() {
-    try {
-      const response = await axios.get('/api/auth/check');
-      console.log('Auth check response:', response.data);
-      authState.value = {
-        isAuthenticated: response.data.authenticated,
-        userRole: response.data.role,
-        address: response.data.address
-      };
-      console.log('Auth state updated:', authState.value);
-    } catch (error) {
-      console.error('Auth check failed:', error);
+  watch(isAuthenticated, (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      console.log('Состояние аутентификации изменилось:', newValue);
     }
-  },
-  async disconnect() {
-    try {
-      await axios.post('/api/auth/logout');
-      authState.value = {
-        isAuthenticated: false,
-        userRole: null,
-        address: null
-      };
-    } catch (error) {
-      console.error('Logout failed:', error);
-    }
-  }
-};
-
-provide('auth', auth);
-
-onMounted(async () => {
-  await auth.checkAuth();
-});
+  });
 </script>
-
-<style>
-body {
-  margin: 0;
-  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #333;
-  background-color: #f5f5f5;
-}
-
-#app {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.main-content {
-  flex: 1;
-  padding: 1rem;
-}
-
-button {
-  cursor: pointer;
-}
-
-.btn {
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  font-weight: 500;
-  border: none;
-}
-
-.btn-primary {
-  background-color: #3498db;
-  color: white;
-}
-
-.btn-secondary {
-  background-color: #95a5a6;
-  color: white;
-}
-
-.btn-danger {
-  background-color: #e74c3c;
-  color: white;
-}
-
-.loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-.loading-spinner {
-  width: 50px;
-  height: 50px;
-  border: 5px solid #f3f3f3;
-  border-top: 5px solid #3498db;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-</style>
diff --git a/frontend/src/api/axios.js b/frontend/src/api/axios.js
index 146073e..4763c46 100644
--- a/frontend/src/api/axios.js
+++ b/frontend/src/api/axios.js
@@ -15,15 +15,15 @@ const api = axios.create({
   baseURL: getBaseUrl(),
   withCredentials: true,
   headers: {
-    'Content-Type': 'application/json'
-  }
+    'Content-Type': 'application/json',
+  },
 });
 
 // Перехватчик запросов
 api.interceptors.request.use(
   (config) => {
     config.withCredentials = true; // Важно для каждого запроса
-    
+
     return config;
   },
   (error) => Promise.reject(error)
@@ -50,11 +50,11 @@ const sendGuestMessageToServer = async (messageText) => {
   try {
     await axios.post('/api/chat/guest-message', {
       message: messageText,
-      language: userLanguage.value
+      // language: userLanguage.value, // TODO: Реализовать получение языка пользователя
     });
   } catch (error) {
     console.error('Ошибка при отправке гостевого сообщения на сервер:', error);
   }
 };
 
-export default api;
\ No newline at end of file
+export default api;
diff --git a/frontend/src/assets/styles/home.css b/frontend/src/assets/styles/home.css
index becd623..ef95002 100644
--- a/frontend/src/assets/styles/home.css
+++ b/frontend/src/assets/styles/home.css
@@ -1,15 +1,96 @@
+/* Переменные CSS для цветов, размеров и т.д. */
+:root {
+  /* Цвета */
+  --color-primary: #4CAF50;
+  --color-primary-dark: #45a049;
+  --color-secondary: #2196F3;
+  --color-danger: #F44336;
+  --color-warning: #FF9800;
+  --color-light: #f5f5f5;
+  --color-dark: #333333;
+  --color-grey: #777777;
+  --color-grey-light: #e0e0e0;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-telegram: #0088cc;
+  --color-error: #e74c3c;
+  
+  /* Цвета сообщений */
+  --color-user-message: #EFFAFF;
+  --color-ai-message: #F8F8F8;
+  --color-system-message: #FFF3E0;
+  --color-system-text: #FF5722;
+  
+  /* Тени */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  
+  /* Отступы */
+  --spacing-xs: 5px;
+  --spacing-sm: 10px;
+  --spacing-md: 15px;
+  --spacing-lg: 20px;
+  --spacing-xl: 30px;
+  
+  /* Размеры шрифтов */
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-xxl: 24px;
+  
+  /* Радиусы скругления */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  
+  /* Переходы */
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+  
+  /* Размеры компонентов */
+  --sidebar-width: 110px;
+  --sidebar-expanded-width: 325px;
+  --nav-btn-size: 40px;
+  --chat-input-min-height: 100px;
+  --chat-input-max-height: 200px;
+  --chat-input-focus-min-height: 170px;
+  --chat-input-focus-max-height: 300px;
+  
+  /* Унифицированные размеры для кнопок и форм */
+  --button-height: 48px;
+  --button-height-mobile: 42px;
+  --button-padding: 0 var(--spacing-lg);
+  --button-gap: var(--spacing-md);
+  --form-gap: var(--spacing-md);
+  --block-padding: 24px;
+  --block-padding-mobile: 16px;
+  --block-margin: 24px;
+  --block-margin-mobile: 16px;
+  --input-height: 48px;
+  --input-height-mobile: 42px;
+  --input-padding: 0 var(--spacing-lg);
+  
+  /* Общие стили */
+  --button-radius: var(--radius-lg);
+  --input-radius: var(--radius-lg);
+  --block-radius: var(--radius-lg);
+}
+
 /* Общие стили для всех элементов */
 * {
-  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-  background-color: #fff;
+  background-color: var(--color-white);
 }
 
 /* Стили для монопространственных шрифтов (код, верификация) */
@@ -23,56 +104,77 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h3 {
-  font-size: 18px;
-  margin-bottom: 15px;
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--spacing-md);
 }
 
 p {
-  font-size: 14px;
+  font-size: var(--font-size-md);
   line-height: 1.5;
 }
 
-button, .btn, .auth-btn, .send-email-btn, .verify-btn, .wallet-disconnect-btn-small, .cancel-btn {
-  font-size: 14px;
-}
-
 input, textarea {
-  font-size: 14px;
+  font-size: var(--font-size-md);
 }
 
+/* Контейнеры */
 .app-container {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background-color: #fff;
+  background-color: var(--color-white);
 }
 
-/* Стили для боковой панели */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+  width: 100%;
+}
+
+/* Адаптация контента при боковой панели */
+.sidebar-expanded ~ .main-content {
+  margin-left: 190px;
+}
+
+.main-content.no-right-sidebar {
+  margin-right: 190px;
+}
+
+.main-content:not(.no-right-sidebar) {
+  margin-right: 190px;
+}
+
+/* Стили для боковой панели (sidebar) */
 .sidebar {
-  width: 110px;
-  min-width: 110px;
-  background-color: #f5f5f5;
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  background-color: var(--color-light);
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 20px;
+  padding-top: var(--spacing-lg);
   position: fixed;
   height: 100vh;
   z-index: 2;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
 }
 
 .sidebar.sidebar-expanded {
-  width: 325px;
-  min-width: 325px;
+  width: var(--sidebar-expanded-width);
+  min-width: var(--sidebar-expanded-width);
 }
 
+/* Кнопка меню в боковой панели */
 .menu-button {
-  width: 40px;
-  height: 40px;
-  background: white;
-  border: 1px solid #333;
-  border-radius: 4px;
+  width: var(--nav-btn-size);
+  height: var(--nav-btn-size);
+  background: var(--color-white);
+  border: 1px solid var(--color-dark);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -85,7 +187,7 @@ input, textarea {
 .hamburger {
   width: 24px;
   height: 3px;
-  background-color: #333;
+  background-color: var(--color-dark);
   position: relative;
 }
 
@@ -95,7 +197,7 @@ input, textarea {
   position: absolute;
   width: 24px;
   height: 3px;
-  background-color: #333;
+  background-color: var(--color-dark);
   left: 0;
 }
 
@@ -107,11 +209,12 @@ input, textarea {
   bottom: -8px;
 }
 
+/* Навигационные кнопки */
 .nav-buttons {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  width: 110px;
+  gap: var(--spacing-lg);
+  width: var(--sidebar-width);
   padding: 0;
   position: fixed;
   left: 35px;
@@ -119,23 +222,23 @@ input, textarea {
 }
 
 .nav-btn {
-  width: 40px;
-  height: 40px;
-  border: 1px solid #333;
-  border-radius: 4px;
-  background: white;
+  width: var(--nav-btn-size);
+  height: var(--nav-btn-size);
+  border: 1px solid var(--color-dark);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   padding: 0;
-  font-size: 16px;
+  font-size: var(--font-size-lg);
 }
 
 .nav-btn-text {
-  font-size: 16px;
-  color: #333;
+  font-size: var(--font-size-lg);
+  color: var(--color-dark);
   opacity: 0;
   visibility: hidden;
   white-space: nowrap;
@@ -161,756 +264,16 @@ input, textarea {
   padding-left: 40px;
 }
 
-/* Стили для основного контента */
-.main-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-  width: 100%;
-}
-
-.sidebar-expanded ~ .main-content {
-  margin-left: 190px; /* 40px + 110px (sidebar) + 40px (button) */
-}
-
-/* Стили для адаптации основного содержимого при скрытии правой панели */
-.main-content.no-right-sidebar {
-  margin-right: 190px; /* 40px + 110px (sidebar) + 40px (button) */
-}
-
-.main-content:not(.no-right-sidebar) {
-  margin-right: 190px; /* 40px + 110px (sidebar) + 40px (button) */
-}
-
-/* Стили для контейнера чата */
-.chat-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  margin: 20px 0 35px 0; /* Добавляем нижний отступ 35px */
-  height: calc(100vh - 195px); /* Вычитаем высоту header, footer и margins */
-  min-height: 500px; /* Минимальная высота для контейнера */
-  position: relative;
-}
-
-.chat-messages {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow-y: auto; /* Обеспечиваем прокрутку */
-  padding: 20px;
-  margin-bottom: 20px;
-  background: #fff;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 135px; /* Базовое значение: минимальная высота chat-input (100px) + margin (15px) + padding (20px) */
-  transition: bottom 0.3s ease; /* Плавный переход для изменения позиции */
-}
-
-/* Адаптация позиции при активации фокуса */
-.chat-container:has(.chat-input.focused) .chat-messages {
-  bottom: 235px; /* Для расширенного chat-input: 200px + margin (15px) + padding (20px) */
-}
-
-/* Реализуем программное изменение позиции через JS для браузеров без поддержки :has */
-@media (max-width: 100vw) {
-  .chat-input.focused ~ .messages-container {
-    bottom: 235px;
-  }
-}
-
-.message {
-  margin-bottom: 15px;
-  padding: 10px 15px;
-  border-radius: 8px;
-  max-width: 75%;
-  word-wrap: break-word;
-  position: relative;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.user-message {
-  background-color: #EFFAFF;
-  align-self: flex-end;
-  margin-left: auto;
-  margin-right: 10px;
-  border-bottom-right-radius: 2px;
-}
-
-.ai-message {
-  background-color: #F8F8F8;
-  align-self: flex-start;
-  margin-right: auto;
-  margin-left: 10px;
-  word-break: break-word;
-  max-width: 70%;
-  border-bottom-left-radius: 2px;
-}
-
-.system-message {
-  background-color: #FFF3E0;
-  align-self: center;
-  margin-left: auto;
-  margin-right: auto;
-  font-style: italic;
-  color: #FF5722;
-  text-align: center;
-  max-width: 90%;
-}
-
-.message-content {
-  margin-bottom: 5px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.message-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.message-time {
-  font-size: 12px;
-  color: #777;
-  text-align: right;
-}
-
-.message-status {
-  font-size: 12px;
-  color: #777;
-}
-
-.sending-indicator {
-  color: #2196F3;
-  font-style: italic;
-}
-
-.error-indicator {
-  color: #F44336;
-  font-weight: bold;
-}
-
-.is-local {
-  opacity: 0.7;
-}
-
-.has-error {
-  border: 1px solid #F44336;
-}
-
-/* Стили для ввода сообщений */
-.chat-input {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 15px 20px; /* Уменьшаем вертикальный padding */
-  background: #fff;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: auto; /* Меняем на auto для адаптивной высоты */
-  min-height: 100px; /* Минимальная высота */
-  max-height: 200px; /* Максимальная высота */
-  transition: min-height 0.3s ease, padding 0.3s ease; /* Добавляем transition для padding */
-  margin-bottom: 15px; /* Отступ от нижнего края экрана */
-  z-index: 10; /* Обеспечиваем отображение поверх других элементов */
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Добавляем тень для выделения */
-}
-
-/* Стиль для input при фокусе */
-.chat-input.focused {
-  min-height: 170px; /* Увеличенная минимальная высота при фокусе */
-  max-height: 300px; /* Увеличенная максимальная высота при фокусе */
-  padding: 20px; /* Увеличиваем padding при фокусе */
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Усиливаем тень при фокусе */
-}
-
-.chat-input textarea {
-  flex: 1;
-  padding: 12px;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  resize: none;
-  font-size: 14px;
-  line-height: 1.5;
-  min-height: 40px; /* Уменьшаем минимальную высоту */
-  transition: min-height 0.3s ease, border-color 0.3s ease; /* Плавный переход для высоты и границы */
-}
-
-.chat-input textarea:focus {
-  outline: none;
-  border-color: #4CAF50; /* Подсветка границы при фокусе */
-}
-
-.chat-input.focused textarea {
-  min-height: 120px; /* Увеличенная высота textarea при фокусе */
-}
-
-.chat-input button {
-  padding: 0 20px;
-  background: #4CAF50;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s;
-}
-
-.chat-input button:hover:not(:disabled) {
-  background: #45a049;
-}
-
-.chat-input button:disabled {
-  background: #ccc;
-  cursor: not-allowed;
-}
-
-/* Стили для правой панели с информацией о кошельке */
-.wallet-sidebar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 300px;
-  height: 100vh;
-  background: white;
-  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  overflow-y: auto;
-  z-index: 1000;
-}
-
-.wallet-buttons {
-  margin-top: 40px;
-  width: 100%;
-}
-
-/* Общий стиль для кнопок */
-.wallet-connect-btn,
-.wallet-disconnect-btn,
-.auth-btn,
-.bot-link,
-.verify-btn,
-.send-email-btn,
-.cancel-btn {
-  border: 1px solid #333;
-  border-radius: 4px;
-  background: white;
-  cursor: pointer;
-  font-size: 14px;
-  padding: 10px 15px;
-  margin-bottom: 10px;
-  transition: background-color 0.2s;
-}
-
-.wallet-connect-btn,
-.wallet-disconnect-btn {
-  box-sizing: border-box;
-  width: 100%;
-  white-space: normal;
-  text-align: center;
-  line-height: 1.3;
-  border: 1px solid #333;
-  border-radius: 4px;
-  margin-bottom: 30px;
-  font-size: 16px;
-  padding: 12px 15px;
-}
-
-.wallet-connect-btn {
-  background-color: white;
-  color: #333;
-}
-
-.wallet-disconnect-btn {
-  background-color: white;
-  color: #e74c3c;
-  border-color: #e74c3c;
-}
-
-.wallet-connect-btn:hover {
-  background-color: #f0f0f0;
-}
-
-.wallet-disconnect-btn:hover {
-  background-color: #ffebee;
-}
-
-.auth-btn {
-  padding: 12px 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  box-sizing: border-box;
-  color: #333;
-  background-color: white;
-  margin-bottom: 0;
-}
-
-.email-btn, 
-.telegram-btn {
-  color: #333;
-  background-color: white;
-}
-
-.auth-btn:hover,
-.bot-link:hover,
-.verify-btn:hover:not(:disabled),
-.send-email-btn:hover:not(:disabled),
-.cancel-btn:hover {
-  background-color: #f0f0f0;
-}
-
-.bot-link {
-  display: block;
-  text-align: center;
-  padding: 10px;
-  border-radius: 4px;
-  text-decoration: none;
-  font-weight: bold;
-  transition: background-color 0.2s;
-  box-sizing: border-box;
-  font-size: 14px;
-  background-color: white;
-  color: #333;
-  border: 1px solid #333;
-}
-
-.balance-container {
-  margin-top: 20px;
-}
-
-.balance-container h3 {
-  margin-bottom: 15px;
-  font-size: 18px;
-}
-
-.token-balance {
-  display: flex;
-  margin-bottom: 10px;
-  font-size: 16px;
-}
-
-.token-name {
-  width: 60px;
-}
-
-.token-amount {
-  flex: 1;
-  text-align: right;
-  padding-right: 10px;
-}
-
-.token-symbol {
-  width: 60px;
-  text-align: right;
-}
-
-.wallet-address {
-  margin-top: 30px;
-}
-
-.wallet-address h3 {
-  margin-bottom: 10px;
-  font-size: 18px;
-}
-
-.address {
-  font-family: monospace;
-  font-size: 14px;
-  word-break: break-all;
-}
-
-/* Стили для кнопок авторизации */
-.auth-buttons {
-  display: flex;
-  flex-direction: column;
-  margin-top: 15px;
-  margin-bottom: 20px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.auth-buttons h3 {
-  margin-bottom: 15px;
-  font-size: 16px;
-}
-
-.auth-btn-container {
-  width: 100%;
-  margin-bottom: 15px;
-  box-sizing: border-box;
-}
-
-.verification-block,
-.email-form,
-.email-verification-form {
-  background-color: white;
-  border-radius: 4px;
-  padding: 12px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-  margin-bottom: 15px;
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid #ddd;
-}
-
-.verification-code {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 15px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.verification-code span {
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: #555;
-}
-
-.verification-code code {
-  background-color: #f5f5f5;
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-family: monospace;
-  font-size: 14px;
-  font-weight: bold;
-  cursor: pointer;
-  user-select: all;
-  border: 1px dashed #ddd;
-  width: 100%;
-  display: block;
-  box-sizing: border-box;
-  text-align: center;
-}
-
-.verification-code .copied-message {
-  color: #4CAF50;
-  font-size: 12px;
-  margin-top: 5px;
-}
-
-.user-info {
-  margin-top: 20px;
-}
-
-.user-info h3 {
-  margin-bottom: 10px;
-  font-size: 18px;
-}
-
-.user-info-item {
-  display: flex;
-  margin-bottom: 8px;
-  font-size: 14px;
-}
-
-.user-info-label {
-  min-width: 80px;
-  color: #555;
-}
-
-.user-info-value {
-  font-weight: bold;
-}
-
-/* Стили для форм верификации Email */
-.email-verification-form p {
-  margin-bottom: 8px;
-  font-size: 13px;
-}
-
-.verification-input {
-  display: flex;
-  margin-bottom: 10px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.verification-input input {
-  flex-grow: 1;
-  flex-shrink: 1;
-  min-width: 0;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 13px;
-  letter-spacing: 1px;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.verify-btn {
-  padding: 0 10px;
-  background-color: white;
-  color: #333;
-  border: 1px solid #333;
-  border-radius: 4px;
-  margin-left: 8px;
-  cursor: pointer;
-  white-space: nowrap;
-  flex-shrink: 0;
-  font-size: 13px;
-  height: 32px;
-}
-
-.verify-btn:disabled {
-  background-color: #f5f5f5;
-  color: #999;
-  border-color: #ddd;
-  cursor: not-allowed;
-}
-
-.email-input-container {
-  display: flex;
-  margin-top: 8px;
-  margin-bottom: 8px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.email-input {
-  flex-grow: 1;
-  flex-shrink: 1;
-  min-width: 0;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-.email-input-error {
-  border-color: #e74c3c;
-}
-
-.send-email-btn {
-  padding: 0 10px;
-  background-color: white;
-  color: #333;
-  border: 1px solid #333;
-  border-radius: 4px;
-  cursor: pointer;
-  white-space: nowrap;
-  flex-shrink: 0;
-  font-size: 13px;
-  height: 32px;
-  width: 100%;
-  margin-left: 0;
-  box-sizing: border-box;
-}
-
-.send-email-btn:disabled {
-  background-color: #f5f5f5;
-  color: #999;
-  border-color: #ddd;
-  cursor: not-allowed;
-}
-
-.email-format-error {
-  color: #e74c3c;
-  font-size: 12px;
-  margin-top: 5px;
-}
-
-.form-actions {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-}
-
-.cancel-btn {
-  background-color: white;
-  color: #333;
-  border: 1px solid #333;
-  border-radius: 4px;
-  padding: 8px 15px;
-  font-size: 13px;
-  cursor: pointer;
-  margin-top: 10px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.error-message {
-  background-color: white;
-  color: #e74c3c;
-  padding: 12px;
-  border-radius: 4px;
-  margin-top: 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  word-wrap: break-word;
-  word-break: break-word;
-  border: 1px solid #e74c3c;
-}
-
-.close-error {
-  background: none;
-  border: none;
-  color: #e74c3c;
-  font-size: 18px;
-  cursor: pointer;
-  padding: 0 5px;
-}
-
-.verification-block p,
-.email-form p,
-.email-verification-form p {
-  margin: 0 0 12px 0;
-  font-size: 14px;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  line-height: 1.4;
-}
-
-.email-verification-form strong {
-  word-break: break-all;
-}
-
-/* Медиа-запросы для адаптивности */
-@media (max-width: 1200px) {
-  .header-content,
-  .main-content {
-    max-width: 100%;
-    padding: 0 15px;
-  }
-}
-
-/* Медиа-запросы для мобильных устройств */
-@media screen and (max-width: 768px) {
-  .chat-container {
-    margin: 10px 0 25px 0;
-    height: calc(100vh - 165px);
-  }
-  
-  .chat-messages {
-    padding: 15px;
-  }
-  
-  .message {
-    max-width: 85%;
-    padding: 8px 12px;
-  }
-  
-  .ai-message {
-    max-width: 85%;
-  }
-  
-  .chat-input {
-    padding: 10px 15px;
-    margin-bottom: 10px;
-  }
-  
-  .chat-input textarea {
-    padding: 10px;
-    font-size: 14px;
-  }
-  
-  .header-content {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
-  }
-
-  .header-text {
-    flex: 1;
-    margin-right: 10px;
-    min-width: 0; /* Важно для корректной работы text-overflow */
-  }
-
-  .title {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 1.2rem;
-    margin: 0;
-  }
-
-  .subtitle {
-    white-space: normal;
-    font-size: 0.9rem;
-    margin: 0;
-    line-height: 1.2;
-  }
-
-  .header-wallet-btn {
-    flex-shrink: 0;
-    margin-left: 10px;
-  }
-}
-
-/* Дополнительные стили для очень маленьких экранов */
-@media screen and (max-width: 480px) {
-  .chat-container {
-    margin: 5px 0 20px 0;
-    height: calc(100vh - 150px);
-  }
-  
-  .message {
-    max-width: 90%;
-    margin-bottom: 10px;
-    font-size: 13px;
-  }
-  
-  .ai-message, .user-message {
-    max-width: 90%;
-  }
-  
-  .message-time {
-    font-size: 10px;
-  }
-  
-  .header-content {
-    padding: 8px;
-  }
-
-  .title {
-    font-size: 1.1rem;
-  }
-
-  .subtitle {
-    font-size: 0.8rem;
-  }
-  
-  .chat-buttons button {
-    padding: 8px 10px;
-    font-size: 13px;
-    max-width: 120px;
-  }
-}
-
-/* Стиль для кнопки в нижней части боковой панели */
+/* Кнопка в нижней части боковой панели */
 .sidebar-bottom-btn {
   position: fixed;
   bottom: 30px;
   left: 35px;
-  width: 40px;
-  height: 40px;
-  transition: width 0.3s ease;
+  width: var(--nav-btn-size);
+  height: var(--nav-btn-size);
+  transition: width var(--transition-normal);
 }
 
-/* Обновленный стиль для кнопки при раскрытом меню */
 .sidebar-expanded .sidebar-bottom-btn {
   width: auto;
   min-width: 200px;
@@ -923,32 +286,6 @@ input, textarea {
   left: 10px;
 }
 
-/* Кнопка закрытия правой панели */
-.close-wallet-sidebar {
-  position: static;
-  width: 40px;
-  height: 40px;
-  border-radius: 4px;
-  background-color: white;
-  color: #333;
-  border: 1px solid #333;
-  font-size: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  z-index: 2;
-  transition: background-color 0.2s;
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-.close-wallet-sidebar:hover {
-  background-color: #f0f0f0;
-}
-
 .sidebar-expanded .sidebar-bottom-btn .nav-btn-text {
   opacity: 1;
   visibility: visible;
@@ -957,211 +294,587 @@ input, textarea {
   display: inline-block;
 }
 
-.email-form-error {
-  color: #e74c3c;
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.email-form-container {
+/* Стили для контейнера чата */
+.chat-container {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/* Стили для заголовка правой панели */
-.wallet-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 40px;
-  position: relative;
-  margin-bottom: 15px;
-  gap: 10px;
-}
-
-/* Кнопки в верхней части правой панели */
-.wallet-top-buttons {
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-.wallet-connect-btn-top,
-.wallet-disconnect-btn-top {
-  width: 100%;
-  height: 40px;
-  border-radius: 4px;
-  background-color: white;
-  border: 1px solid #333;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0;
-  box-sizing: border-box;
-  transition: background-color 0.2s;
-}
-
-.wallet-connect-btn-top {
-  color: #333;
-}
-
-.wallet-disconnect-btn-top {
-  color: #e74c3c;
-  border-color: #e74c3c;
-}
-
-.wallet-connect-btn-top:hover {
-  background-color: #f0f0f0;
-}
-
-.wallet-disconnect-btn-top:hover {
-  background-color: #ffebee;
-}
-
-.wallet-disconnect-btn-small {
-  position: absolute;
-  top: 10px;
-  right: 60px;
-  width: 90px;
-  height: 40px;
-  border-radius: 4px;
-  background-color: white;
-  color: #333;
-  border: 1px solid #333;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  z-index: 2;
-  transition: background-color 0.2s;
-}
-
-.wallet-disconnect-btn-small:hover {
-  background-color: #f0f0f0;
-}
-
-.wallet-connect-btn-small {
-  position: absolute;
-  top: 10px;
-  right: 160px;
-  width: 100px;
-  height: 40px;
-  border-radius: 4px;
-  background-color: white;
-  color: #333;
-  border: 1px solid #333;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  z-index: 2;
-  transition: background-color 0.2s;
-}
-
-.wallet-connect-btn-small:hover {
-  background-color: #f0f0f0;
-}
-
-.wallet-connect-btn-header,
-.wallet-disconnect-btn-header {
-  height: 40px;
-  border-radius: 4px;
-  background-color: white;
-  border: 1px solid #333;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0 15px;
-  box-sizing: border-box;
-  transition: background-color 0.2s;
-  flex-grow: 1;
-}
-
-.wallet-connect-btn-header {
-  color: #333;
-}
-
-.wallet-disconnect-btn-header {
-  color: #e74c3c;
-  border-color: #e74c3c;
-}
-
-.wallet-connect-btn-header:hover {
-  background-color: #f0f0f0;
-}
-
-.wallet-disconnect-btn-header:hover {
-  background-color: #ffebee;
-}
-
-.main-container {
-  padding-top: 0;
-  max-width: 1200px;
-  margin: 0 auto;
+  margin: var(--spacing-lg) 0 35px 0;
+  height: calc(100vh - 195px);
+  min-height: 500px;
   position: relative;
 }
 
-.header {
-  background: #fff;
-  border-bottom: 1px solid #e0e0e0;
-  padding: 20px 0;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.header-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
+.chat-messages {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.header-text {
+  flex-direction: column;
   flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-grey-light);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 135px;
+  transition: bottom var(--transition-normal);
 }
 
-.title {
-  font-size: 24px;
+/* Адаптация позиции при активации фокуса */
+.chat-container:has(.chat-input.focused) .chat-messages {
+  bottom: 235px;
+}
+
+/* Реализуем программное изменение позиции через JS для браузеров без поддержки :has */
+@media (max-width: 100vw) {
+  .chat-input.focused ~ .messages-container {
+    bottom: 235px;
+  }
+}
+
+/* Стили для сообщений */
+.message {
+  margin-bottom: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-lg);
+  max-width: 75%;
+  word-wrap: break-word;
+  position: relative;
+  box-shadow: var(--shadow-sm);
+}
+
+.user-message {
+  background-color: var(--color-user-message);
+  align-self: flex-end;
+  margin-left: auto;
+  margin-right: var(--spacing-sm);
+  border-bottom-right-radius: 2px;
+}
+
+.ai-message {
+  background-color: var(--color-ai-message);
+  align-self: flex-start;
+  margin-right: auto;
+  margin-left: var(--spacing-sm);
+  word-break: break-word;
+  max-width: 70%;
+  border-bottom-left-radius: 2px;
+}
+
+.system-message {
+  background-color: var(--color-system-message);
+  align-self: center;
+  margin-left: auto;
+  margin-right: auto;
+  font-style: italic;
+  color: var(--color-system-text);
+  text-align: center;
+  max-width: 90%;
+}
+
+.message-content {
+  margin-bottom: var(--spacing-xs);
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+}
+
+.message-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.message-time {
+  font-size: var(--font-size-xs);
+  color: var(--color-grey);
+  text-align: right;
+}
+
+.message-status {
+  font-size: var(--font-size-xs);
+  color: var(--color-grey);
+}
+
+.sending-indicator {
+  color: var(--color-secondary);
+  font-style: italic;
+}
+
+.error-indicator {
+  color: var(--color-danger);
+  font-weight: bold;
+}
+
+.is-local {
+  opacity: 0.7;
+}
+
+.has-error {
+  border: 1px solid var(--color-danger);
+}
+
+/* Стили для ввода сообщений */
+.chat-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-grey-light);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: auto;
+  min-height: var(--chat-input-min-height);
+  max-height: var(--chat-input-max-height);
+  transition: min-height var(--transition-normal), padding var(--transition-normal);
+  margin-bottom: var(--spacing-md);
+  z-index: 10;
+  box-shadow: none;
+}
+
+/* Стиль для input при фокусе */
+.chat-input.focused {
+  min-height: var(--chat-input-focus-min-height);
+  max-height: var(--chat-input-focus-max-height);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-md);
+}
+
+.chat-input textarea {
+  flex: 1;
+  padding: var(--spacing-sm);
+  border: 1px solid var(--color-grey-light);
+  border-radius: var(--radius-sm);
+  resize: none;
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  min-height: 40px;
+  transition: min-height var(--transition-normal), border-color var(--transition-normal);
+}
+
+.chat-input textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.chat-input.focused textarea {
+  min-height: 120px;
+}
+
+.chat-input button {
+  padding: 0 var(--spacing-lg);
+  background: var(--color-primary);
+  color: var(--color-white);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: var(--font-size-md);
+  transition: background-color var(--transition-normal);
+}
+
+.chat-input button:hover:not(:disabled) {
+  background: var(--color-primary-dark);
+}
+
+.chat-input button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+/* Стили для кнопок в чате */
+.chat-buttons {
+  display: flex;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-xs);
+  padding-bottom: 0;
+  width: 100%;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+}
+
+.chat-buttons button {
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  font-size: var(--font-size-md);
+  transition: background-color var(--transition-normal);
+  white-space: nowrap;
+  flex-shrink: 0;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-buttons button:first-child {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.chat-buttons button:first-child:hover:not(:disabled) {
+  background-color: var(--color-primary-dark);
+  }
+  
+.chat-buttons .clear-btn {
+  background-color: var(--color-danger);
+  color: var(--color-white);
+}
+
+.chat-buttons .clear-btn:hover:not(:disabled) {
+  background-color: #da190b;
+  }
+  
+.chat-buttons button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
+/* Стили для правой панели */
+  .wallet-sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-white);
+  z-index: 1000;
+  overflow-y: auto;
+  padding: var(--spacing-lg);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  transition: transform var(--transition-normal), opacity var(--transition-normal);
+  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
+}
+
+.wallet-sidebar-content {
+  max-width: 600px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 var(--spacing-md);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+/* Блок с кнопкой отключения */
+.disconnect-block {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-lg);
+  position: relative;
+}
+
+.disconnect-btn {
+  width: 100%;
+  height: 48px;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-error);
+  color: var(--color-error);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--transition-normal);
+}
+
+.disconnect-btn:hover {
+  background-color: #ffebee;
+}
+
+/* Кнопка закрытия */
+.close-wallet-sidebar {
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  background-color: var(--color-white);
+  color: var(--color-dark);
+  border: 1px solid var(--color-grey);
+  border-radius: var(--radius-lg);
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  transition: all var(--transition-normal);
+  margin-left: var(--spacing-sm);
+}
+
+.close-wallet-sidebar:hover {
+  background-color: var(--color-grey-light);
+  border-color: var(--color-dark);
+}
+
+/* Блок идентификаторов */
+.identifiers-block {
+  width: 100%;
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: var(--spacing-lg);
+}
+
+.identifiers-block h3 {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-xl);
+  color: var(--color-dark);
+  border-bottom: 1px solid var(--color-grey-light);
+  padding-bottom: var(--spacing-sm);
+}
+
+.identifier-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--font-size-md);
+}
+
+.identifier-item:last-child {
+  margin-bottom: 0;
+}
+
+.identifier-label {
+  min-width: 100px;
+  color: var(--color-grey);
   font-weight: 500;
-  color: #333;
-  margin-bottom: 5px;
 }
 
-.subtitle {
-  font-size: 16px;
+.identifier-value {
+  flex: 1;
+  font-family: monospace;
+  color: var(--color-dark);
+  word-break: break-all;
+}
+
+/* Медиа-запросы */
+@media screen and (min-width: 1200px) {
+  .wallet-sidebar {
+    width: 30%;
+    max-width: 550px;
+  }
+}
+
+@media screen and (min-width: 769px) and (max-width: 1199px) {
+  .wallet-sidebar {
+    width: 40%;
+    max-width: 500px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .wallet-sidebar {
+    padding: var(--spacing-md);
+  }
+
+  .wallet-sidebar-content {
+    padding: 0;
+    gap: var(--spacing-md);
+  }
+
+  .disconnect-block {
+    margin-bottom: var(--spacing-md);
+  }
+
+  .disconnect-btn,
+  .close-wallet-sidebar {
+    height: 42px;
+  }
+
+  .close-wallet-sidebar {
+    width: 42px;
+    min-width: 42px;
+    font-size: 18px;
+  }
+
+  .identifiers-block {
+    padding: var(--spacing-md);
+  }
+
+  .identifier-item {
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--spacing-xs);
+  }
+
+  .identifier-label {
+    min-width: 80px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .wallet-sidebar {
+    padding: var(--spacing-sm);
+  }
+
+  .wallet-sidebar-content {
+    gap: var(--spacing-sm);
+  }
+
+  .disconnect-block {
+    margin-bottom: var(--spacing-sm);
+  }
+
+  .disconnect-btn,
+  .close-wallet-sidebar {
+    height: 36px;
+    font-size: var(--font-size-sm);
+  }
+
+  .close-wallet-sidebar {
+    width: 36px;
+    min-width: 36px;
+  }
+
+  .identifiers-block {
+    padding: var(--spacing-sm);
+  }
+}
+
+/* Стили для блока кнопок авторизации */
+.auth-buttons-container {
+  width: 100%;
+  max-width: 450px;
+  margin-bottom: var(--spacing-lg);
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: var(--spacing-lg);
+  box-sizing: border-box;
+  position: relative;
+}
+
+/* Стили для заголовка */
+.header-with-close {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: var(--nav-btn-size);
+  margin-bottom: var(--spacing-lg);
+  position: relative;
+}
+
+/* Стили для кнопок в заголовке */
+.header-button {
+  height: var(--nav-btn-size);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: all var(--transition-normal);
+}
+
+/* Стили для кнопок авторизации */
+.auth-buttons-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  width: 100%;
+}
+
+.auth-btn {
+  width: 100%;
+  height: var(--nav-btn-size);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-light);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: var(--color-dark);
+  font-size: var(--font-size-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0 var(--spacing-md);
+  box-sizing: border-box;
+  transition: all var(--transition-normal);
+  margin: 0;
+}
+
+.auth-btn:hover {
+  background-color: var(--color-grey-light);
+}
+
+/* Стили для блока информации о пользователе и баланса токенов */
+.user-info, .token-balances {
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.user-info h3, .token-balances h3 {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-xl);
+  color: var(--color-dark);
+  border-bottom: 1px solid #eee;
+  padding-bottom: 8px;
+}
+
+.user-info-item, .token-balance {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--font-size-md);
+}
+
+.user-info-label, .token-name {
+  min-width: 80px;
   color: #666;
+  font-weight: 500;
 }
 
+.user-info-value, .token-amount {
+  flex: 1;
+  color: var(--color-dark);
+  font-family: monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.token-symbol {
+  margin-left: var(--spacing-xs);
+  color: #666;
+  font-size: var(--font-size-xs);
+}
+
+/* Стили для кнопки бургера в шапке */
 .header-wallet-btn {
-  margin-left: 20px;
-  padding: 10px;
+  margin-left: var(--spacing-lg);
+  padding: var(--spacing-sm);
   background: transparent;
-  color: #333;
+  color: var(--color-dark);
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 10px;
-  transition: background-color 0.3s;
+  gap: var(--spacing-sm);
+  transition: background-color var(--transition-normal);
   position: relative;
-  width: 40px;
-  height: 40px;
+  width: var(--nav-btn-size);
+  height: var(--nav-btn-size);
   justify-content: center;
 }
 
@@ -1184,8 +897,8 @@ input, textarea {
   position: absolute;
   width: 24px;
   height: 2px;
-  background-color: #333;
-  transition: all 0.3s ease;
+  background-color: var(--color-dark);
+  transition: all var(--transition-normal);
 }
 
 .header-wallet-btn::before {
@@ -1225,263 +938,1113 @@ input, textarea {
   opacity: 0;
 }
 
-.header-wallet-btn .hamburger-line {
-  top: 50%;
-  transform: translateY(-50%);
+/* Стили для заголовка */
+.header {
+  background: var(--color-white);
+  border-bottom: 1px solid var(--color-grey-light);
+  padding: var(--spacing-lg) 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
-.footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 60px;
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-text {
+  flex: 1;
+}
+
+.title {
+  font-size: var(--font-size-xxl);
+  font-weight: 500;
+  color: var(--color-dark);
+  margin-bottom: var(--spacing-xs);
+}
+
+.subtitle {
+  font-size: var(--font-size-lg);
+  color: #666;
+}
+
+/* Анимация появления и исчезновения правой панели */
+.sidebar-slide-enter-active,
+.sidebar-slide-leave-active {
+  transition: all var(--transition-normal);
+}
+
+.sidebar-slide-enter-from,
+.sidebar-slide-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+  }
+
+.sidebar-slide-enter-to,
+.sidebar-slide-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+/* Стили для блока кнопок авторизации */
+.auth-buttons-container {
+  width: 100%;
+  max-width: 450px;
+  margin-bottom: var(--spacing-lg);
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: var(--spacing-lg);
+  box-sizing: border-box;
+  position: relative;
+}
+
+.auth-btn {
+  width: 100%;
+  height: var(--nav-btn-size);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-light);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: var(--color-dark);
+  font-size: var(--font-size-md);
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #f5f5f5;
-  border-top: 1px solid #e0e0e0;
-}
-
-.footer p {
+  cursor: pointer;
+  padding: 0 var(--spacing-md);
+  box-sizing: border-box;
+  transition: all var(--transition-normal);
   margin: 0;
-  color: #666;
-  font-size: 14px;
 }
 
-/* Стили для отображения подключенного кошелька */
-.wallet-connected .wallet-button {
-  background-color: #4CAF50 !important;
-  color: white !important;
+.auth-btn:hover {
+  background-color: var(--color-grey-light);
 }
 
-.wallet-connected #auth-display {
-  display: inline-block;
-  padding: 8px 12px;
-  background-color: rgba(76, 175, 80, 0.1);
-  border: 1px solid #4CAF50;
-  border-radius: 4px;
-  margin-right: 10px;
-  color: #4CAF50;
-  font-weight: 500;
-}
-
-/* Индикатор подключения */
-.connection-indicator {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin-right: 8px;
-  background-color: #ccc;
-}
-
-.wallet-connected .connection-indicator {
-  background-color: #4CAF50;
-}
-
-/* Стили для кнопок авторизации */
-#auth-buttons {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
-}
-
-#logout-button {
-  display: none;
-  background-color: #f44336;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-#logout-button:hover {
-  background-color: #d32f2f;
-}
-
-/* Анимация для индикации подключения */
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
-  }
-  70% {
-    box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
+/* Медиа-запросы для адаптивности */
+@media screen and (min-width: 1200px) {
+  .wallet-sidebar {
+    width: 30%;
+    max-width: 550px;
   }
 }
 
-.wallet-connected .connection-indicator {
-  animation: pulse 2s infinite;
+@media screen and (min-width: 769px) and (max-width: 1199px) {
+  .wallet-sidebar {
+    width: 40%;
+    max-width: 500px;
+  }
 }
 
-/* Стили для отладочной информации */
-.debug-info {
-  margin-top: 20px;
-  padding: 10px;
-  background-color: #f5f5f5;
-  border-radius: 8px;
-  font-size: 0.9em;
+@media screen and (min-width: 481px) and (max-width: 768px) {
+  .wallet-sidebar {
+    width: 100%;
+    padding: var(--spacing-md);
+  }
+  
+  .wallet-sidebar-content {
+    padding: 0;
+    gap: var(--spacing-md);
+  }
+
+  .sidebar-block {
+    padding: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+  }
+
+  .sidebar-block h3 {
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--spacing-sm);
+  }
+
+  .identifier-item,
+  .token-balance {
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--spacing-xs);
+  }
+
+  .identifier-label,
+  .token-name {
+    min-width: 80px;
+  }
+
+  .chat-container {
+    margin: var(--spacing-sm) 0 25px 0;
+    height: calc(100vh - 165px);
+  }
+
+  .chat-messages {
+    padding: var(--spacing-md);
+  }
+  
+  .message {
+    max-width: 85%;
+    padding: 8px var(--spacing-sm);
+  }
+
+  .ai-message {
+    max-width: 85%;
+  }
+  
+  .chat-input {
+    padding: var(--spacing-sm) var(--spacing-md);
+    margin-bottom: var(--spacing-sm);
+  }
+
+  .chat-input textarea {
+    padding: var(--spacing-sm);
+    font-size: var(--font-size-md);
+  }
+  
+  .header-content {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-sm);
+  }
+
+  .header-text {
+    flex: 1;
+    margin-right: var(--spacing-sm);
+    min-width: 0;
+  }
+  
+  .title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 1.2rem;
+    margin: 0;
+  }
+
+  .subtitle {
+    white-space: normal;
+    font-size: 0.9rem;
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  .header-wallet-btn {
+    flex-shrink: 0;
+    margin-left: var(--spacing-sm);
+  }
 }
 
-.debug-info h4 {
-  margin-top: 0;
-  margin-bottom: 8px;
-  color: #666;
+@media screen and (max-width: 480px) {
+  .wallet-sidebar {
+    padding: var(--spacing-sm);
+  }
+
+  .wallet-sidebar-content {
+    gap: var(--spacing-sm);
+  }
+
+  .sidebar-block {
+    padding: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+  }
+
+  .disconnect-block {
+    padding: var(--spacing-sm) 0;
+  }
+
+  .wallet-header {
+    height: 32px;
+    gap: var(--spacing-xs);
+  }
+  
+  .wallet-header-buttons {
+    gap: var(--spacing-xs);
+  }
+  
+  .wallet-connect-btn-header,
+  .wallet-disconnect-btn-header,
+  .auth-btn.disconnect-wallet-btn {
+    height: 32px;
+    font-size: var(--font-size-sm);
+    padding: 0 12px;
+  }
+  
+  .close-wallet-sidebar {
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+  font-size: 18px;
 }
 
-.debug-item {
-  margin-bottom: 8px;
-  word-break: break-all;
+  .auth-buttons-container {
+    padding: var(--spacing-sm);
+  }
+  
+  .auth-btn {
+    height: 32px;
+    font-size: var(--font-size-sm);
+  }
+  
+  .chat-container {
+    margin: var(--spacing-xs) 0 var(--spacing-lg) 0;
+    height: calc(100vh - 150px);
+  }
+  
+  .message {
+    max-width: 90%;
+    margin-bottom: var(--spacing-sm);
+    font-size: var(--font-size-sm);
+  }
+
+  .ai-message, .user-message {
+    max-width: 90%;
+  }
+
+  .message-time {
+    font-size: var(--font-size-xs);
+  }
+  
+  .header-content {
+    padding: 8px;
+  }
+
+  .title {
+    font-size: 1.1rem;
+  }
+
+  .subtitle {
+    font-size: 0.8rem;
+  }
+  
+  .chat-buttons button {
+    padding: 8px var(--spacing-sm);
+    font-size: var(--font-size-sm);
+    max-width: 120px;
+  }
+  
+  .auth-btn,
+  .email-btn,
+  .telegram-btn,
+  .connect-wallet-btn {
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-sm);
+  }
+  
+  .send-email-btn,
+  button.email-btn {
+    padding: 8px var(--spacing-sm);
+    font-size: var(--font-size-xs);
+  }
+
+  .chat-buttons {
+    gap: var(--spacing-xs);
+  }
+  
+  .chat-buttons button {
+    padding: 8px var(--spacing-sm);
+    font-size: var(--font-size-sm);
+  }
+  
+  .header-wallet-btn {
+    margin-left: var(--spacing-xs);
+    width: 32px;
+    height: 32px;
+    padding: 8px;
+  }
+
+  .header-wallet-btn::before,
+  .header-wallet-btn::after,
+  .header-wallet-btn .hamburger-line {
+    width: 18px;
+    height: 2px;
+  }
+  
+  .header-wallet-btn::before {
+    top: 10px;
+  }
+  
+  .header-wallet-btn::after {
+    bottom: 10px;
+  }
+
+  .auth-buttons-container {
+    padding: var(--spacing-sm);
+  }
+
+  .auth-buttons-container button.auth-btn,
+  .auth-buttons-container button.email-btn,
+  .auth-buttons-container button.telegram-btn,
+  .auth-buttons-container button.connect-wallet-btn {
+    height: 42px;
+    font-size: var(--font-size-sm);
+  }
 }
 
-.debug-item code {
-  background-color: #e0e0e0;
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-family: monospace;
-  color: #333;
-}
+@media screen and (max-width: 360px) {
+  .wallet-sidebar {
+    padding: 8px 3px;
+  }
 
-.debug-buttons {
-  display: flex;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.small-button {
-  padding: 5px 10px;
-  background-color: #5e5e5e;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.8em;
-}
-
-.small-button:hover {
-  background-color: #444;
-}
-
-/* Стили для блоков информации о пользователе и баланса токенов */
-.user-info, .token-balances {
-  background: #fff;
-  border-radius: 8px;
-  padding: 15px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.user-info h3, .token-balances h3 {
-  margin: 0 0 15px 0;
+  .wallet-header {
+    margin-bottom: var(--spacing-sm);
+  }
+  
+  .wallet-connect-btn-header,
+  .wallet-disconnect-btn-header,
+  .auth-btn.disconnect-wallet-btn {
+    font-size: var(--font-size-xs);
+    padding: 0 8px;
+  }
+  
+  .close-wallet-sidebar {
   font-size: 16px;
-  color: #333;
 }
 
-.user-info-item, .token-balance {
+  .identifiers-block {
+    padding: var(--spacing-sm);
+  }
+  
+  .identifiers-block h3 {
+    font-size: var(--font-size-md);
+    padding-bottom: var(--spacing-xs);
+  }
+}
+
+/* Анимации */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Стили для форм email и telegram */
+.auth-buttons-container .email-form,
+.auth-buttons-container .telegram-form,
+.auth-buttons-container .telegram-verification {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  margin: var(--spacing-md) 0;
+}
+
+/* Стили для инпутов */
+.auth-buttons-container input[type="email"],
+.auth-buttons-container input[type="text"] {
+  width: 100%;
+  height: 48px;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-grey-light);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-md);
+  margin: 0 0 var(--spacing-sm) 0;
+  box-sizing: border-box;
+  background-color: var(--color-white);
+}
+
+/* Стили для кнопок в формах */
+.auth-buttons-container .email-form button,
+.auth-buttons-container .telegram-form button,
+.auth-buttons-container .telegram-verification button,
+.auth-buttons-container .telegram-verification a {
+  width: 100%;
+  height: 48px;
+  margin: 0;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  text-align: center;
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
-  font-size: 14px;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
 }
 
-.user-info-label, .token-name {
-  min-width: 80px;
-  color: #666;
+/* Стили для основных кнопок */
+.auth-buttons-container button[type="submit"],
+.auth-buttons-container a[href*="telegram"] {
+  background-color: var(--color-primary);
+  color: var(--color-white);
 }
 
-.user-info-value, .token-amount {
-  flex: 1;
-  color: #333;
-  font-family: monospace;
+.auth-buttons-container button[type="submit"]:hover,
+.auth-buttons-container a[href*="telegram"]:hover {
+  background-color: var(--color-primary-dark);
 }
 
-.token-symbol {
-  margin-left: 5px;
-  color: #666;
-  font-size: 12px;
+/* Стили для кнопок отмены */
+.auth-buttons-container button:not([type="submit"]) {
+  background-color: var(--color-grey-light);
+  color: var(--color-dark);
 }
 
-/* Стили для правой панели */
-.right-sidebar {
-  width: 250px;
-  padding: 20px;
-  background: #f5f5f5;
-  border-left: 1px solid #ddd;
-  height: 100vh;
-  position: fixed;
-  right: 0;
-  top: 0;
-  overflow-y: auto;
+.auth-buttons-container button:not([type="submit"]):hover {
+  background-color: #d9d9d9;
 }
 
-.right-sidebar.collapsed {
-  width: 0;
-  padding: 0;
-  border-left: none;
+/* Стили для телеграм-ссылки */
+.auth-buttons-container a[href*="telegram"] {
+  background-color: var(--color-telegram);
 }
 
-/* Стили для кнопок в чате */
-.chat-buttons {
-  display: flex;
-  gap: 10px;
-  margin-top: 5px;
-  padding-bottom: 0;
+.auth-buttons-container a[href*="telegram"]:hover {
+  background-color: #0077b3;
+}
+
+@media screen and (max-width: 480px) {
+  .auth-buttons-container .email-form button,
+  .auth-buttons-container .telegram-form button,
+  .auth-buttons-container .telegram-verification button,
+  .auth-buttons-container .telegram-verification a,
+  .auth-buttons-container input[type="email"],
+  .auth-buttons-container input[type="text"] {
+    height: 42px;
+    font-size: var(--font-size-sm);
+  }
+}
+
+/* Общие стили для форм */
+.auth-buttons-container .email-form,
+.auth-buttons-container .verification-block {
   width: 100%;
-  justify-content: flex-end;
-  flex-wrap: nowrap;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin: var(--spacing-sm) 0;
+}
+
+.auth-buttons-container .email-form-container {
+  display: flex;
+    flex-direction: column;
+  gap: var(--spacing-sm);
+  width: 100%;
+}
+
+/* Стили для инпутов */
+.auth-buttons-container input[type="email"],
+.auth-buttons-container input[type="text"] {
+  width: 100%;
+  height: 48px;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-grey-light);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-md);
+  margin: 0 0 var(--spacing-sm) 0;
+  box-sizing: border-box;
+  background-color: var(--color-white);
+}
+
+/* Общие стили для всех кнопок в формах */
+.auth-buttons-container .email-form button,
+.auth-buttons-container .verification-block button,
+.auth-buttons-container .verification-block a.bot-link {
+  width: 100%;
+  height: 48px;
+  margin: 0;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  border: none;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+
+/* Стили для кнопок отправки/подтверждения */
+.auth-buttons-container button[type="submit"],
+.auth-buttons-container .send-email-btn {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+/* Стили для кнопок отмены */
+.auth-buttons-container button:not([type="submit"]):not(.send-email-btn):not(.bot-link) {
+  background-color: #E8E8E8;
+  color: var(--color-dark);
+}
+
+/* Стили для ссылки Telegram */
+.auth-buttons-container .verification-block a.bot-link {
+  background-color: #0088cc;
+  color: var(--color-white);
+}
+
+/* Стили для блока с кодом верификации */
+.auth-buttons-container .verification-code {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--font-size-md);
+  width: 100%;
+  height: 48px;
+  border-radius: var(--radius-lg);
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-light);
+  padding: 0 var(--spacing-md);
   box-sizing: border-box;
 }
 
-.chat-buttons button {
-  padding: 8px 16px;
-  border-radius: 4px;
+/* Стили для текста в формах */
+.auth-buttons-container p {
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-md);
+  color: var(--color-dark);
+}
+
+/* Эффекты при наведении */
+.auth-buttons-container button[type="submit"]:hover,
+.auth-buttons-container .send-email-btn:hover {
+  background-color: var(--color-primary-dark);
+}
+
+.auth-buttons-container button:not([type="submit"]):not(.send-email-btn):hover {
+  background-color: #DADADA;
+}
+
+.auth-buttons-container .verification-block a.bot-link:hover {
+  background-color: #0077b3;
+}
+
+@media screen and (max-width: 480px) {
+  .auth-buttons-container .email-form button,
+  .auth-buttons-container .verification-block button,
+  .auth-buttons-container .verification-block a.bot-link,
+  .auth-buttons-container input[type="email"],
+  .auth-buttons-container input[type="text"] {
+    height: 42px;
+    font-size: var(--font-size-sm);
+  }
+}
+
+/* Общие стили для контейнера */
+.auth-buttons-container,
+.wallet-info-container {
+  width: 100%;
+  max-width: 450px;
+  margin-bottom: var(--spacing-lg);
+  background-color: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: var(--spacing-lg);
+  box-sizing: border-box;
+  position: relative;
+}
+
+/* Стили для заголовка */
+.header-with-close {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: var(--nav-btn-size);
+  margin-bottom: var(--spacing-lg);
+  position: relative;
+}
+
+/* Стили для кнопок в заголовке */
+.header-button {
+  height: var(--nav-btn-size);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: all var(--transition-normal);
+}
+
+/* Кнопка отключения */
+.disconnect-btn {
+  background-color: var(--color-white);
+  border: 1px solid var(--color-error);
+  color: var(--color-error);
+  padding: 0 var(--spacing-md);
+  flex: 1;
+  margin-right: var(--spacing-sm);
+}
+
+.disconnect-btn:hover {
+  background-color: #ffebee;
+}
+
+/* Кнопка закрытия */
+  .close-wallet-sidebar {
+  width: var(--nav-btn-size);
+  height: var(--nav-btn-size);
+  min-width: var(--nav-btn-size);
+  background-color: var(--color-white);
+  color: var(--color-dark);
+  border: 1px solid var(--color-grey);
+  font-size: 20px;
+  padding: 0;
+  line-height: 1;
+}
+
+.close-wallet-sidebar:hover {
+  background-color: var(--color-grey-light);
+  border-color: var(--color-dark);
+}
+
+/* Стили для кнопок авторизации */
+.auth-buttons-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  width: 100%;
+}
+
+.auth-btn {
+  width: 100%;
+  height: var(--nav-btn-size);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-light);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: var(--color-dark);
+  font-size: var(--font-size-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0 var(--spacing-md);
+  box-sizing: border-box;
+  transition: all var(--transition-normal);
+  margin: 0;
+}
+
+.auth-btn:hover {
+  background-color: var(--color-grey-light);
+}
+
+/* Стили для блока идентификаторов */
+.identifiers-block {
+  margin-top: var(--spacing-lg);
+  border-top: 1px solid var(--color-grey-light);
+  padding-top: var(--spacing-lg);
+}
+
+.identifiers-block h3 {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-xl);
+  color: var(--color-dark);
+}
+
+.identifier-item {
+    display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--font-size-md);
+}
+
+.identifier-item:last-child {
+  margin-bottom: 0;
+}
+
+.identifier-label {
+  min-width: 100px;
+  color: var(--color-grey);
+  font-weight: 500;
+}
+
+.identifier-value {
+  flex: 1;
+  font-family: monospace;
+  color: var(--color-dark);
+  word-break: break-all;
+}
+
+@media screen and (max-width: 480px) {
+  .auth-buttons-container,
+  .wallet-info-container {
+    padding: var(--spacing-md);
+  }
+
+  .header-with-close {
+    height: 32px;
+    margin-bottom: var(--spacing-md);
+  }
+
+  .header-button {
+    height: 32px;
+    font-size: var(--font-size-sm);
+  }
+
+  .disconnect-btn {
+    padding: 0 12px;
+  }
+
+  .close-wallet-sidebar {
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    font-size: 18px;
+  }
+
+  .auth-btn {
+    height: 32px;
+    font-size: var(--font-size-sm);
+  }
+
+  .identifiers-block {
+    margin-top: var(--spacing-md);
+    padding-top: var(--spacing-md);
+  }
+
+  .identifier-item {
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--spacing-xs);
+  }
+
+  .identifier-label {
+    min-width: 80px;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .auth-buttons-container,
+  .wallet-info-container {
+    padding: var(--spacing-sm);
+  }
+
+  .header-button {
+    font-size: var(--font-size-xs);
+  }
+
+  .disconnect-btn {
+    padding: 0 8px;
+  }
+
+  .close-wallet-sidebar {
+  font-size: 16px;
+  }
+
+  .identifiers-block {
+    margin-top: var(--spacing-sm);
+    padding-top: var(--spacing-sm);
+  }
+}
+
+/* Общие стили для кнопок */
+.auth-btn,
+.disconnect-btn,
+.close-wallet-sidebar,
+.send-email-btn,
+.chat-buttons button,
+.header-button,
+.connect-btn,
+.cancel-btn,
+.bot-link {
+  height: var(--button-height);
+  padding: 0 var(--spacing-lg);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-md);
+  font-weight: 500;
   border: none;
   cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s;
-  white-space: nowrap;
-  flex-shrink: 0;
-  max-width: 150px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  transition: var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  background: var(--color-primary);
+  color: var(--color-white);
+  width: 100%;
+  margin: 0;
+  text-decoration: none;
 }
 
-.chat-buttons button:first-child {
-  background-color: #4CAF50;
-  color: white;
+/* Стили для квадратных кнопок (close) */
+.close-wallet-sidebar {
+  width: var(--button-height);
+  padding: 0;
+  position: absolute;
+  top: var(--block-padding);
+  right: var(--block-padding);
+  background: var(--color-grey-light);
+  color: var(--color-dark);
+  font-size: var(--font-size-xl);
 }
 
-.chat-buttons button:first-child:hover:not(:disabled) {
-  background-color: #45a049;
+/* Общие стили для форм */
+.email-form,
+.verification-block,
+.auth-buttons-wrapper,
+.email-verification-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  width: 100%;
+  margin-bottom: var(--block-margin);
 }
 
-.chat-buttons .clear-btn {
-  background-color: #f44336;
-  color: white;
+/* Контейнер формы email */
+.email-form-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  width: 100%;
 }
 
-.chat-buttons .clear-btn:hover:not(:disabled) {
-  background-color: #da190b;
+/* Общие стили для инпутов */
+input[type="email"],
+input[type="text"],
+.email-input {
+  height: var(--input-height);
+  padding: 0 var(--spacing-lg);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-grey-light);
+  font-size: var(--font-size-md);
+  width: 100%;
+  background: var(--color-white);
 }
 
-.chat-buttons button:disabled {
-  background-color: #cccccc;
-  cursor: not-allowed;
+/* Общие стили для контейнеров */
+.auth-container,
+.wallet-info-container,
+.identifiers-block,
+.token-balances,
+.user-info {
+  width: 100%;
+  max-width: 450px;
+  padding: var(--block-padding);
+  margin-bottom: var(--block-margin);
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
 }
 
-/* Адаптивность для маленьких экранов */
-@media (max-width: 480px) {
-  .chat-buttons button {
-    padding: 8px 12px;
-    font-size: 13px;
+/* Заголовки в блоках */
+.identifiers-block h3,
+.token-balances h3,
+.user-info h3 {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-xl);
+  color: var(--color-dark);
+  border-bottom: 1px solid var(--color-grey-light);
+  padding-bottom: var(--spacing-sm);
+}
+
+/* Элементы списков */
+.identifier-item,
+.token-balance,
+.user-info-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--font-size-md);
+}
+
+.identifier-label,
+.token-name,
+.user-info-label {
+  min-width: 100px;
+  color: var(--color-grey);
+  font-weight: 500;
+}
+
+.identifier-value,
+.token-amount,
+.user-info-value {
+  flex: 1;
+  font-family: monospace;
+  color: var(--color-dark);
+  word-break: break-all;
+}
+
+/* Код верификации */
+.verification-code {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  background: var(--color-light);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-md);
+  cursor: pointer;
+}
+
+.verification-code code {
+  font-family: monospace;
+  color: var(--color-dark);
+  font-weight: bold;
+}
+
+.copied-message {
+  color: var(--color-primary);
+  font-size: var(--font-size-sm);
+}
+
+/* Сообщения об ошибках */
+.error-message {
+  color: var(--color-error);
+  padding: var(--spacing-sm);
+  margin-top: var(--spacing-sm);
+  background: #ffebee;
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.close-error {
+  background: none;
+  border: none;
+  color: var(--color-error);
+  cursor: pointer;
+  font-size: var(--font-size-xl);
+  padding: 0 var(--spacing-xs);
+}
+
+/* Медиа-запросы */
+@media screen and (max-width: 480px) {
+  :root {
+    --button-height: var(--button-height-mobile);
+    --input-height: var(--input-height-mobile);
+    --block-padding: var(--block-padding-mobile);
+    --block-margin: var(--block-margin-mobile);
   }
-  
-  .chat-buttons {
-    gap: 5px;
+
+  /* Общие стили для кнопок на мобильных */
+  .auth-btn,
+  .disconnect-btn,
+  .close-wallet-sidebar,
+  .send-email-btn,
+  .chat-buttons button,
+  .header-button,
+  .connect-btn,
+  .cancel-btn,
+  .bot-link {
+    font-size: var(--font-size-sm);
+  }
+
+  .close-wallet-sidebar {
+    width: var(--button-height);
+    font-size: 18px;
+  }
+
+  /* Адаптация размеров текста */
+  .verification-code,
+  .identifier-item,
+  .token-balance,
+  .user-info-item {
+    font-size: var(--font-size-sm);
+  }
+
+  .identifier-label,
+  .token-name,
+  .user-info-label {
+    min-width: 80px;
   }
 }
+
+@media screen and (max-width: 360px) {
+  :root {
+    --block-padding: var(--spacing-sm);
+    --block-margin: var(--spacing-sm);
+  }
+
+  .close-wallet-sidebar {
+    font-size: 16px;
+  }
+
+  .auth-btn,
+  .disconnect-btn,
+  .send-email-btn,
+  .chat-buttons button,
+  .header-button,
+  .connect-btn,
+  .cancel-btn,
+  .bot-link {
+    font-size: var(--font-size-xs);
+    padding: 0 var(--spacing-sm);
+  }
+
+  .verification-code {
+    font-size: var(--font-size-xs);
+  }
+}
+
+/* Анимации */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Анимации для боковой панели */
+.sidebar-slide-enter-active,
+.sidebar-slide-leave-active {
+  transition: all var(--transition-normal);
+}
+
+.sidebar-slide-enter-from,
+.sidebar-slide-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.sidebar-slide-enter-to,
+.sidebar-slide-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+}
diff --git a/frontend/src/components/chat/ConversationList.vue b/frontend/src/components/chat/ConversationList.vue
index 2306744..7da4e30 100644
--- a/frontend/src/components/chat/ConversationList.vue
+++ b/frontend/src/components/chat/ConversationList.vue
@@ -3,7 +3,7 @@
     <div class="conversation-list">
       <div class="list-header">
         <h3>Диалоги</h3>
-        <button @click="createNewConversation" class="new-conversation-btn">
+        <button class="new-conversation-btn" @click="createNewConversation">
           <span>+</span> Новый диалог
         </button>
       </div>
@@ -40,205 +40,110 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed, defineEmits, watch, inject } from 'vue';
-import axios from 'axios';
+  import { ref, onMounted, computed, defineEmits, watch, inject } from 'vue';
+  import axios from 'axios';
 
-const emit = defineEmits(['select-conversation']);
-const auth = inject('auth');
-const isAuthenticated = computed(() => auth.isAuthenticated.value);
+  const emit = defineEmits(['select-conversation']);
+  const auth = inject('auth');
+  const isAuthenticated = computed(() => auth.isAuthenticated.value);
 
-const conversations = ref([]);
-const loading = ref(true);
-const selectedConversationId = ref(null);
+  const conversations = ref([]);
+  const loading = ref(true);
+  const selectedConversationId = ref(null);
 
-// Следим за изменением статуса аутентификации
-watch(() => isAuthenticated.value, (authenticated) => {
-  if (!authenticated) {
-    conversations.value = []; // Очищаем список бесед при отключении
-    selectedConversationId.value = null;
-  }
-});
-
-// Загрузка списка диалогов
-const fetchConversations = async () => {
-  try {
-    loading.value = true;
-    const response = await axios.get('/api/messages/conversations');
-    conversations.value = response.data;
-
-    // Если есть диалоги и не выбран ни один, выбираем первый
-    if (conversations.value.length > 0 && !selectedConversationId.value) {
-      selectConversation(conversations.value[0].conversation_id);
+  // Следим за изменением статуса аутентификации
+  watch(
+    () => isAuthenticated.value,
+    (authenticated) => {
+      if (!authenticated) {
+        conversations.value = []; // Очищаем список бесед при отключении
+        selectedConversationId.value = null;
+      }
     }
-  } catch (error) {
-    console.error('Error fetching conversations:', error);
-  } finally {
-    loading.value = false;
-  }
-};
+  );
 
-// Выбор диалога
-const selectConversation = (conversationId) => {
-  selectedConversationId.value = conversationId;
-  emit('select-conversation', conversationId);
-};
+  // Загрузка списка диалогов
+  const fetchConversations = async () => {
+    try {
+      loading.value = true;
+      const response = await axios.get('/api/messages/conversations');
+      conversations.value = response.data;
 
-// Создание нового диалога
-const createNewConversation = async () => {
-  try {
-    const response = await axios.post('/api/messages/conversations', {
-      title: 'Новый диалог',
-    });
+      // Если есть диалоги и не выбран ни один, выбираем первый
+      if (conversations.value.length > 0 && !selectedConversationId.value) {
+        selectConversation(conversations.value[0].conversation_id);
+      }
+    } catch (error) {
+      console.error('Error fetching conversations:', error);
+    } finally {
+      loading.value = false;
+    }
+  };
 
-    // Добавляем новый диалог в список
-    const newConversation = {
-      conversation_id: response.data.id,
-      title: response.data.title,
-      username: authStore.username,
-      address: authStore.address,
-      message_count: 0,
-      last_activity: response.data.created_at,
-      created_at: response.data.created_at,
-    };
+  // Выбор диалога
+  const selectConversation = (conversationId) => {
+    selectedConversationId.value = conversationId;
+    emit('select-conversation', conversationId);
+  };
 
-    conversations.value.unshift(newConversation);
+  // Создание нового диалога
+  const createNewConversation = async () => {
+    try {
+      const response = await axios.post('/api/messages/conversations', {
+        title: 'Новый диалог',
+      });
 
-    // Выбираем новый диалог
-    selectConversation(newConversation.conversation_id);
-  } catch (error) {
-    console.error('Error creating conversation:', error);
-  }
-};
+      // Добавляем новый диалог в список
+      const newConversation = {
+        conversation_id: response.data.id,
+        title: response.data.title,
+        username: authStore.username,
+        address: authStore.address,
+        message_count: 0,
+        last_activity: response.data.created_at,
+        created_at: response.data.created_at,
+      };
 
-// Форматирование времени
-const formatTime = (timestamp) => {
-  if (!timestamp) return '';
+      conversations.value.unshift(newConversation);
 
-  const date = new Date(timestamp);
-  const now = new Date();
-  const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+      // Выбираем новый диалог
+      selectConversation(newConversation.conversation_id);
+    } catch (error) {
+      console.error('Error creating conversation:', error);
+    }
+  };
 
-  if (diffDays === 0) {
-    // Сегодня - показываем только время
-    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-  } else if (diffDays === 1) {
-    // Вчера
-    return 'Вчера';
-  } else if (diffDays < 7) {
-    // В течение недели - показываем день недели
-    const days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
-    return days[date.getDay()];
-  } else {
-    // Более недели назад - показываем дату
-    return date.toLocaleDateString();
-  }
-};
+  // Форматирование времени
+  const formatTime = (timestamp) => {
+    if (!timestamp) return '';
 
-// Загрузка диалогов при монтировании компонента
-onMounted(() => {
-  fetchConversations();
-});
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
 
-// Экспорт методов для использования в родительском компоненте
-defineExpose({
-  fetchConversations,
-});
+    if (diffDays === 0) {
+      // Сегодня - показываем только время
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } else if (diffDays === 1) {
+      // Вчера
+      return 'Вчера';
+    } else if (diffDays < 7) {
+      // В течение недели - показываем день недели
+      const days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
+      return days[date.getDay()];
+    } else {
+      // Более недели назад - показываем дату
+      return date.toLocaleDateString();
+    }
+  };
+
+  // Загрузка диалогов при монтировании компонента
+  onMounted(() => {
+    fetchConversations();
+  });
+
+  // Экспорт методов для использования в родительском компоненте
+  defineExpose({
+    fetchConversations,
+  });
 </script>
-
-<style scoped>
-.conversation-list {
-  display: flex;
-  flex-direction: column;
-  width: 300px;
-  border-right: 1px solid #e0e0e0;
-  background-color: #f9f9f9;
-  height: 100%;
-}
-
-.list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.list-header h3 {
-  margin: 0;
-  font-size: 1.2rem;
-}
-
-.new-conversation-btn {
-  display: flex;
-  align-items: center;
-  background-color: #4caf50;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  font-size: 0.9rem;
-}
-
-.new-conversation-btn span {
-  font-size: 1.2rem;
-  margin-right: 0.25rem;
-}
-
-.loading,
-.empty-list {
-  padding: 2rem;
-  text-align: center;
-  color: #666;
-}
-
-.empty-list p {
-  margin: 0.5rem 0;
-}
-
-.conversations {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.conversation-item {
-  padding: 1rem;
-  border-bottom: 1px solid #e0e0e0;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.conversation-item:hover {
-  background-color: #f0f0f0;
-}
-
-.conversation-item.active {
-  background-color: #e8f5e9;
-  color: #4caf50;
-}
-
-.conversation-title {
-  font-weight: 500;
-  margin-bottom: 0.5rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.conversation-meta {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.8rem;
-  color: #888;
-}
-
-.time {
-  font-size: 0.8rem;
-}
-
-.connect-wallet-prompt {
-  text-align: center;
-  padding: 2rem;
-  color: #666;
-}
-</style>
diff --git a/frontend/src/components/chat/MessageInput.vue b/frontend/src/components/chat/MessageInput.vue
index 34516da..4389d5e 100644
--- a/frontend/src/components/chat/MessageInput.vue
+++ b/frontend/src/components/chat/MessageInput.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="message-input">
     <textarea
+      ref="textareaRef"
       v-model="message"
       placeholder="Введите сообщение..."
-      @keydown.enter.prevent="handleEnter"
-      ref="textareaRef"
       :disabled="sending"
-    ></textarea>
+      @keydown.enter.prevent="handleEnter"
+    />
 
-    <button @click="sendMessage" class="send-button" :disabled="!message.trim() || sending">
+    <button class="send-button" :disabled="!message.trim() || sending" @click="sendMessage">
       <span v-if="sending">Отправка...</span>
       <span v-else>Отправить</span>
     </button>
@@ -16,199 +16,149 @@
 </template>
 
 <script setup>
-import { ref, defineEmits, nextTick } from 'vue';
-import axios from 'axios';
+  import { ref, defineEmits, nextTick } from 'vue';
+  import axios from 'axios';
 
-const props = defineProps({
-  conversationId: {
-    type: [Number, String],
-    required: true,
-  },
-});
+  const props = defineProps({
+    conversationId: {
+      type: [Number, String],
+      required: true,
+    },
+  });
 
-const emit = defineEmits(['message-sent']);
-const message = ref('');
-const sending = ref(false);
-const textareaRef = ref(null);
+  const emit = defineEmits(['message-sent']);
+  const message = ref('');
+  const sending = ref(false);
+  const textareaRef = ref(null);
 
-// Обработка нажатия Enter
-const handleEnter = (event) => {
-  // Если нажат Shift+Enter, добавляем перенос строки
-  if (event.shiftKey) {
-    return;
-  }
+  // Обработка нажатия Enter
+  const handleEnter = (event) => {
+    // Если нажат Shift+Enter, добавляем перенос строки
+    if (event.shiftKey) {
+      return;
+    }
 
-  // Иначе отправляем сообщение
-  sendMessage();
-};
-
-// Отправка сообщения
-const sendMessage = async () => {
-  const messageText = message.value.trim();
-  if (!messageText) return;
-
-  const userMessage = {
-    id: Date.now(),
-    content: messageText,
-    role: auth.isAuthenticated ? 'user' : 'guest',
-    timestamp: new Date().toISOString()
+    // Иначе отправляем сообщение
+    sendMessage();
   };
 
-  messages.value.push(userMessage);
+  // Отправка сообщения
+  const sendMessage = async () => {
+    const messageText = message.value.trim();
+    if (!messageText) return;
 
-  try {
-    // Логируем параметры запроса
-    console.log('Sending message to Ollama:', {
-      message: messageText,
-      language: userLanguage.value
-    });
+    const userMessage = {
+      id: Date.now(),
+      content: messageText,
+      role: auth.isAuthenticated ? 'user' : 'guest',
+      timestamp: new Date().toISOString(),
+    };
 
-    const response = await axios.post('/api/chat/message', {
-      message: messageText,
-      language: userLanguage.value
-    });
+    messages.value.push(userMessage);
 
-    // Логируем ответ от Ollama
-    console.log('Response from Ollama:', response.data);
+    try {
+      // Логируем параметры запроса
+      console.log('Sending message to Ollama:', {
+        message: messageText,
+        language: userLanguage.value,
+      });
 
-    // Обработка ответа
-    messages.value.push({
-      id: Date.now() + 1,
-      content: response.data.message,
-      role: 'assistant',
-      timestamp: new Date().toISOString()
-    });
+      const response = await axios.post('/api/chat/message', {
+        message: messageText,
+        language: userLanguage.value,
+      });
+
+      // Логируем ответ от Ollama
+      console.log('Response from Ollama:', response.data);
+
+      // Обработка ответа
+      messages.value.push({
+        id: Date.now() + 1,
+        content: response.data.message,
+        role: 'assistant',
+        timestamp: new Date().toISOString(),
+      });
+
+      // Очищаем поле ввода
+      message.value = '';
+
+      // Фокусируемся на поле ввода
+      nextTick(() => {
+        textareaRef.value.focus();
+      });
+
+      // Уведомляем родительский компонент о новых сообщениях
+      emit('message-sent', [response.data.userMessage, response.data.aiMessage]);
+    } catch (error) {
+      console.error('Ошибка при отправке сообщения:', error);
+    } finally {
+      sending.value = false;
+    }
+  };
+
+  // Сброс поля ввода
+  const resetInput = () => {
+    message.value = '';
+  };
+
+  // Экспорт методов для использования в родительском компоненте
+  defineExpose({
+    resetInput,
+    focus: () => textareaRef.value?.focus(),
+  });
+
+  const sendGuestMessage = async (messageText) => {
+    if (!messageText.trim()) return;
+
+    const userMessage = {
+      id: Date.now(),
+      content: messageText,
+      role: 'user',
+      timestamp: new Date().toISOString(),
+      isGuest: true,
+    };
+
+    // Добавляем сообщение пользователя в локальную историю
+    messages.value.push(userMessage);
+
+    // Сохраняем сообщение в массиве гостевых сообщений
+    guestMessages.value.push(userMessage);
+
+    // Сохраняем гостевые сообщения в localStorage
+    localStorage.setItem('guestMessages', JSON.stringify(guestMessages.value));
 
     // Очищаем поле ввода
-    message.value = '';
+    newMessage.value = '';
 
-    // Фокусируемся на поле ввода
-    nextTick(() => {
-      textareaRef.value.focus();
-    });
+    // Прокрутка вниз
+    await nextTick();
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+    }
 
-    // Уведомляем родительский компонент о новых сообщениях
-    emit('message-sent', [response.data.userMessage, response.data.aiMessage]);
-  } catch (error) {
-    console.error('Ошибка при отправке сообщения:', error);
-  } finally {
-    sending.value = false;
-  }
-};
+    // Устанавливаем состояние загрузки
+    isLoading.value = true;
 
-// Сброс поля ввода
-const resetInput = () => {
-  message.value = '';
-};
+    // Вместо отправки запроса к Ollama, отправляем сообщение с кнопками для аутентификации
+    const authMessage = {
+      id: Date.now() + 1,
+      content: 'Чтобы продолжить, пожалуйста, аутентифицируйтесь.',
+      role: 'assistant',
+      timestamp: new Date().toISOString(),
+      isGuest: true,
+      showAuthOptions: true, // Указываем, что нужно показать кнопки аутентификации
+    };
 
-// Экспорт методов для использования в родительском компоненте
-defineExpose({
-  resetInput,
-  focus: () => textareaRef.value?.focus(),
-});
+    messages.value.push(authMessage);
+    guestMessages.value.push(authMessage);
+    localStorage.setItem('guestMessages', JSON.stringify(guestMessages.value));
 
-const sendGuestMessage = async (messageText) => {
-  if (!messageText.trim()) return;
+    // Прокрутка вниз
+    await nextTick();
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+    }
 
-  const userMessage = {
-    id: Date.now(),
-    content: messageText,
-    role: 'user',
-    timestamp: new Date().toISOString(),
-    isGuest: true
+    isLoading.value = false;
   };
-
-  // Добавляем сообщение пользователя в локальную историю
-  messages.value.push(userMessage);
-
-  // Сохраняем сообщение в массиве гостевых сообщений
-  guestMessages.value.push(userMessage);
-
-  // Сохраняем гостевые сообщения в localStorage
-  localStorage.setItem('guestMessages', JSON.stringify(guestMessages.value));
-
-  // Очищаем поле ввода
-  newMessage.value = '';
-
-  // Прокрутка вниз
-  await nextTick();
-  if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
-  }
-
-  // Устанавливаем состояние загрузки
-  isLoading.value = true;
-
-  // Вместо отправки запроса к Ollama, отправляем сообщение с кнопками для аутентификации
-  const authMessage = {
-    id: Date.now() + 1,
-    content: 'Чтобы продолжить, пожалуйста, аутентифицируйтесь.',
-    role: 'assistant',
-    timestamp: new Date().toISOString(),
-    isGuest: true,
-    showAuthOptions: true // Указываем, что нужно показать кнопки аутентификации
-  };
-
-  messages.value.push(authMessage);
-  guestMessages.value.push(authMessage);
-  localStorage.setItem('guestMessages', JSON.stringify(guestMessages.value));
-
-  // Прокрутка вниз
-  await nextTick();
-  if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
-  }
-
-  isLoading.value = false;
-};
 </script>
-
-<style scoped>
-.message-input {
-  display: flex;
-  padding: 1rem;
-  border-top: 1px solid #e0e0e0;
-  background-color: #fff;
-}
-
-textarea {
-  flex: 1;
-  min-height: 40px;
-  max-height: 120px;
-  padding: 0.75rem;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  resize: none;
-  font-family: inherit;
-  font-size: 0.9rem;
-  line-height: 1.4;
-}
-
-textarea:focus {
-  outline: none;
-  border-color: #4caf50;
-  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
-}
-
-.send-button {
-  margin-left: 0.5rem;
-  padding: 0 1rem;
-  height: 40px;
-  background-color: #4caf50;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-  transition: background-color 0.2s;
-}
-
-.send-button:hover:not(:disabled) {
-  background-color: #43a047;
-}
-
-.send-button:disabled {
-  background-color: #9e9e9e;
-  cursor: not-allowed;
-}
-</style>
diff --git a/frontend/src/components/chat/MessageThread.vue b/frontend/src/components/chat/MessageThread.vue
index 0a39d71..001ad33 100644
--- a/frontend/src/components/chat/MessageThread.vue
+++ b/frontend/src/components/chat/MessageThread.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="isAuthenticated">
-    <div class="message-thread" ref="threadContainer">
+    <div ref="threadContainer" class="message-thread">
       <div v-if="loading" class="loading">Загрузка сообщений...</div>
 
       <div v-else-if="messages.length === 0" class="empty-thread">
@@ -8,7 +8,11 @@
       </div>
 
       <div v-else class="messages">
-        <div v-for="message in messages" :key="message.id" :class="['message', message.sender_type]">
+        <div
+          v-for="message in messages"
+          :key="message.id"
+          :class="['message', message.sender_type]"
+        >
           <div class="message-content">{{ message.content }}</div>
           <div class="message-meta">
             <span class="time">{{ formatTime(message.created_at) }}</span>
@@ -26,188 +30,110 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, nextTick, defineExpose } from 'vue';
-import axios from 'axios';
+  import { ref, onMounted, watch, nextTick, defineExpose } from 'vue';
+  import axios from 'axios';
 
-const props = defineProps({
-  conversationId: {
-    type: [Number, String],
-    required: true,
-  },
-});
-
-const messages = ref([]);
-const loading = ref(true);
-const threadContainer = ref(null);
-const isAuthenticated = ref(false);
-
-// Загрузка сообщений диалога
-const fetchMessages = async () => {
-  try {
-    loading.value = true;
-    const response = await axios.get(
-      `/api/messages/conversations/${props.conversationId}/messages`
-    );
-    messages.value = response.data;
-
-    // Прокрутка к последнему сообщению
-    await nextTick();
-    scrollToBottom();
-  } catch (error) {
-    console.error('Error fetching messages:', error);
-  } finally {
-    loading.value = false;
-  }
-};
-
-// Добавление новых сообщений
-const addMessages = (newMessages) => {
-  if (Array.isArray(newMessages)) {
-    messages.value = [...messages.value, ...newMessages];
-  } else {
-    messages.value.push(newMessages);
-  }
-
-  // Прокрутка к последнему сообщению
-  nextTick(() => {
-    scrollToBottom();
+  const props = defineProps({
+    conversationId: {
+      type: [Number, String],
+      required: true,
+    },
   });
-};
 
-// Прокрутка к последнему сообщению
-const scrollToBottom = () => {
-  if (threadContainer.value) {
-    threadContainer.value.scrollTop = threadContainer.value.scrollHeight;
-  }
-};
+  const messages = ref([]);
+  const loading = ref(true);
+  const threadContainer = ref(null);
+  const isAuthenticated = ref(false);
 
-// Форматирование времени
-const formatTime = (timestamp) => {
-  if (!timestamp) return '';
+  // Загрузка сообщений диалога
+  const fetchMessages = async () => {
+    try {
+      loading.value = true;
+      const response = await axios.get(
+        `/api/messages/conversations/${props.conversationId}/messages`
+      );
+      messages.value = response.data;
 
-  const date = new Date(timestamp);
-  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-};
-
-// Получение названия канала
-const channelName = (channel) => {
-  const channels = {
-    web: 'Веб',
-    telegram: 'Telegram',
-    email: 'Email',
+      // Прокрутка к последнему сообщению
+      await nextTick();
+      scrollToBottom();
+    } catch (error) {
+      console.error('Error fetching messages:', error);
+    } finally {
+      loading.value = false;
+    }
   };
 
-  return channels[channel] || channel;
-};
+  // Добавление новых сообщений
+  const addMessages = (newMessages) => {
+    if (Array.isArray(newMessages)) {
+      messages.value = [...messages.value, ...newMessages];
+    } else {
+      messages.value.push(newMessages);
+    }
 
-// Наблюдение за изменением ID диалога
-watch(
-  () => props.conversationId,
-  (newId, oldId) => {
-    if (newId && newId !== oldId) {
+    // Прокрутка к последнему сообщению
+    nextTick(() => {
+      scrollToBottom();
+    });
+  };
+
+  // Прокрутка к последнему сообщению
+  const scrollToBottom = () => {
+    if (threadContainer.value) {
+      threadContainer.value.scrollTop = threadContainer.value.scrollHeight;
+    }
+  };
+
+  // Форматирование времени
+  const formatTime = (timestamp) => {
+    if (!timestamp) return '';
+
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  };
+
+  // Получение названия канала
+  const channelName = (channel) => {
+    const channels = {
+      web: 'Веб',
+      telegram: 'Telegram',
+      email: 'Email',
+    };
+
+    return channels[channel] || channel;
+  };
+
+  // Наблюдение за изменением ID диалога
+  watch(
+    () => props.conversationId,
+    (newId, oldId) => {
+      if (newId && newId !== oldId) {
+        fetchMessages();
+      }
+    }
+  );
+
+  // Следим за изменением статуса аутентификации
+  watch(
+    () => isAuthenticated.value,
+    (authenticated) => {
+      if (!authenticated) {
+        messages.value = []; // Очищаем сообщения при отключении
+      }
+    }
+  );
+
+  // Загрузка сообщений при монтировании компонента
+  onMounted(() => {
+    if (props.conversationId) {
       fetchMessages();
     }
-  }
-);
+  });
 
-// Следим за изменением статуса аутентификации
-watch(() => isAuthenticated.value, (authenticated) => {
-  if (!authenticated) {
-    messages.value = []; // Очищаем сообщения при отключении
-  }
-});
-
-// Загрузка сообщений при монтировании компонента
-onMounted(() => {
-  if (props.conversationId) {
-    fetchMessages();
-  }
-});
-
-// Экспорт методов для использования в родительском компоненте
-defineExpose({
-  fetchMessages,
-  addMessages,
-});
+  // Экспорт методов для использования в родительском компоненте
+  defineExpose({
+    fetchMessages,
+    addMessages,
+  });
 </script>
-
-<style scoped>
-.message-thread {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.loading,
-.empty-thread {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  color: #666;
-}
-
-.messages {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.message {
-  max-width: 80%;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  position: relative;
-}
-
-.message.user {
-  align-self: flex-end;
-  background-color: #e3f2fd;
-  border: 1px solid #bbdefb;
-}
-
-.message.ai {
-  align-self: flex-start;
-  background-color: #f5f5f5;
-  border: 1px solid #e0e0e0;
-}
-
-.message.admin {
-  align-self: flex-start;
-  background-color: #fff3e0;
-  border: 1px dashed #ffb74d;
-}
-
-.message-content {
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.message-meta {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 0.25rem;
-  font-size: 0.7rem;
-  color: #999;
-}
-
-.time {
-  font-size: 0.7rem;
-}
-
-.channel {
-  font-size: 0.7rem;
-  padding: 0.1rem 0.3rem;
-  border-radius: 3px;
-  background-color: #f0f0f0;
-}
-
-.connect-wallet-prompt {
-  text-align: center;
-  padding: 2rem;
-  color: #666;
-}
-</style>
diff --git a/frontend/src/components/identity/EmailConnect.vue b/frontend/src/components/identity/EmailConnect.vue
index 78e295c..f78ec83 100644
--- a/frontend/src/components/identity/EmailConnect.vue
+++ b/frontend/src/components/identity/EmailConnect.vue
@@ -1,173 +1,90 @@
 <template>
   <div class="email-connection">
     <div v-if="!showVerification" class="email-form">
-      <input 
-        v-model="email"
-        type="email"
-        placeholder="Введите email"
-        class="email-input"
-      />
-      <button 
-        @click="requestCode"
-        :disabled="isLoading || !isValidEmail"
-        class="email-btn"
-      >
+      <input v-model="email" type="email" placeholder="Введите email" class="email-input" />
+      <button :disabled="isLoading || !isValidEmail" class="email-btn" @click="requestCode">
         {{ isLoading ? 'Отправка...' : 'Получить код' }}
       </button>
     </div>
     <div v-else class="verification-form">
       <p class="verification-info">Код отправлен на {{ email }}</p>
-      <input 
-        v-model="code"
-        type="text"
-        placeholder="Введите код"
-        class="code-input"
-      />
-      <button 
-        @click="verifyCode"
-        :disabled="isLoading || !code"
-        class="verify-btn"
-      >
+      <input v-model="code" type="text" placeholder="Введите код" class="code-input" />
+      <button :disabled="isLoading || !code" class="verify-btn" @click="verifyCode">
         {{ isLoading ? 'Проверка...' : 'Подтвердить' }}
       </button>
-      <button 
-        @click="resetForm"
-        class="reset-btn"
-      >
-        Изменить email
-      </button>
+      <button class="reset-btn" @click="resetForm">Изменить email</button>
     </div>
     <div v-if="error" class="error">{{ error }}</div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import axios from '@/api/axios';
-import { useAuth } from '@/composables/useAuth';
+  import { ref, computed } from 'vue';
+  import axios from '@/api/axios';
+  import { useAuth } from '@/composables/useAuth';
 
-const emit = defineEmits(['close']);
-const { linkIdentity } = useAuth();
+  const emit = defineEmits(['close']);
+  const { linkIdentity } = useAuth();
 
-const email = ref('');
-const code = ref('');
-const error = ref('');
-const isLoading = ref(false);
-const showVerification = ref(false);
+  const email = ref('');
+  const code = ref('');
+  const error = ref('');
+  const isLoading = ref(false);
+  const showVerification = ref(false);
 
-const isValidEmail = computed(() => {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value);
-});
+  const isValidEmail = computed(() => {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value);
+  });
 
-const requestCode = async () => {
-  try {
-    isLoading.value = true;
-    error.value = '';
-    
-    const response = await axios.post('/api/auth/email/request-verification', {
-      email: email.value
-    });
-    
-    if (response.data.success) {
-      showVerification.value = true;
-    } else {
-      error.value = response.data.error || 'Ошибка отправки кода';
+  const requestCode = async () => {
+    try {
+      isLoading.value = true;
+      error.value = '';
+
+      const response = await axios.post('/api/auth/email/request-verification', {
+        email: email.value,
+      });
+
+      if (response.data.success) {
+        showVerification.value = true;
+      } else {
+        error.value = response.data.error || 'Ошибка отправки кода';
+      }
+    } catch (err) {
+      error.value = err.response?.data?.error || 'Ошибка отправки кода';
+    } finally {
+      isLoading.value = false;
     }
-  } catch (err) {
-    error.value = err.response?.data?.error || 'Ошибка отправки кода';
-  } finally {
-    isLoading.value = false;
-  }
-};
+  };
 
-const verifyCode = async () => {
-  try {
-    isLoading.value = true;
-    error.value = '';
-    
-    const response = await axios.post('/api/auth/email/verify', {
-      email: email.value,
-      code: code.value
-    });
-    
-    if (response.data.success) {
-      // Связываем email с текущим пользователем
-      await linkIdentity('email', email.value);
-      emit('close');
-    } else {
-      error.value = response.data.error || 'Неверный код';
+  const verifyCode = async () => {
+    try {
+      isLoading.value = true;
+      error.value = '';
+
+      const response = await axios.post('/api/auth/email/verify', {
+        email: email.value,
+        code: code.value,
+      });
+
+      if (response.data.success) {
+        // Связываем email с текущим пользователем
+        await linkIdentity('email', email.value);
+        emit('close');
+      } else {
+        error.value = response.data.error || 'Неверный код';
+      }
+    } catch (err) {
+      error.value = err.response?.data?.error || 'Ошибка проверки кода';
+    } finally {
+      isLoading.value = false;
     }
-  } catch (err) {
-    error.value = err.response?.data?.error || 'Ошибка проверки кода';
-  } finally {
-    isLoading.value = false;
-  }
-};
+  };
 
-const resetForm = () => {
-  email.value = '';
-  code.value = '';
-  error.value = '';
-  showVerification.value = false;
-};
+  const resetForm = () => {
+    email.value = '';
+    code.value = '';
+    error.value = '';
+    showVerification.value = false;
+  };
 </script>
-
-<style scoped>
-.email-connection {
-  padding: 20px;
-  max-width: 400px;
-}
-
-.email-form,
-.verification-form {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.email-input,
-.code-input {
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 16px;
-}
-
-.email-btn,
-.verify-btn,
-.reset-btn {
-  padding: 10px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.email-btn,
-.verify-btn {
-  background-color: #48bb78;
-  color: white;
-}
-
-.reset-btn {
-  background-color: #e2e8f0;
-  color: #4a5568;
-}
-
-.verification-info {
-  color: #4a5568;
-  font-size: 14px;
-}
-
-.error {
-  color: #e53e3e;
-  margin-top: 5px;
-  font-size: 14px;
-}
-
-button:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-</style>
diff --git a/frontend/src/components/identity/TelegramConnect.vue b/frontend/src/components/identity/TelegramConnect.vue
index f96550e..f7481b8 100644
--- a/frontend/src/components/identity/TelegramConnect.vue
+++ b/frontend/src/components/identity/TelegramConnect.vue
@@ -2,7 +2,7 @@
   <div class="telegram-connect">
     <div v-if="!showQR" class="intro">
       <p>Подключите свой аккаунт Telegram для быстрой авторизации</p>
-      <button @click="startConnection" class="connect-button" :disabled="loading">
+      <button class="connect-button" :disabled="loading" @click="startConnection">
         <span class="telegram-icon">📱</span>
         {{ loading ? 'Загрузка...' : 'Подключить Telegram' }}
       </button>
@@ -10,14 +10,11 @@
 
     <div v-else class="qr-section">
       <p>Отсканируйте QR-код в приложении Telegram</p>
-      <div class="qr-container" v-html="qrCode"></div>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div class="qr-container" v-html="qrCode" />
       <p class="or-divider">или</p>
-      <a :href="botLink" target="_blank" class="bot-link">
-        Открыть бота в Telegram
-      </a>
-      <button @click="resetConnection" class="reset-button">
-        Отмена
-      </button>
+      <a :href="botLink" target="_blank" class="bot-link"> Открыть бота в Telegram </a>
+      <button class="reset-button" @click="resetConnection">Отмена</button>
     </div>
 
     <div v-if="error" class="error">{{ error }}</div>
@@ -25,183 +22,87 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
-import axios from '@/api/axios';
-import { useAuth } from '@/composables/useAuth';
-import QRCode from 'qrcode';
+  import { ref, onMounted, onUnmounted } from 'vue';
+  import axios from '@/api/axios';
+  import { useAuth } from '@/composables/useAuth';
+  import QRCode from 'qrcode';
 
-const emit = defineEmits(['close']);
-const { linkIdentity } = useAuth();
+  const emit = defineEmits(['close']);
+  const { linkIdentity } = useAuth();
 
-const loading = ref(false);
-const error = ref('');
-const showQR = ref(false);
-const qrCode = ref('');
-const botLink = ref('');
-const pollInterval = ref(null);
-const connectionToken = ref('');
+  const loading = ref(false);
+  const error = ref('');
+  const showQR = ref(false);
+  const qrCode = ref('');
+  const botLink = ref('');
+  const pollInterval = ref(null);
+  const connectionToken = ref('');
 
-const startConnection = async () => {
-  try {
-    loading.value = true;
+  const startConnection = async () => {
+    try {
+      loading.value = true;
+      error.value = '';
+
+      const response = await axios.post('/api/auth/telegram/start-connection');
+
+      if (response.data.success) {
+        connectionToken.value = response.data.token;
+        botLink.value = `https://t.me/${response.data.botUsername}?start=${connectionToken.value}`;
+
+        // Генерируем QR-код
+        const qr = await QRCode.toDataURL(botLink.value);
+        qrCode.value = `<img src="${qr}" alt="Telegram QR Code" />`;
+
+        showQR.value = true;
+        startPolling();
+      } else {
+        error.value = response.data.error || 'Не удалось начать процесс подключения';
+      }
+    } catch (err) {
+      error.value = err.response?.data?.error || 'Ошибка при подключении Telegram';
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const checkConnection = async () => {
+    try {
+      const response = await axios.post('/api/auth/telegram/check-connection', {
+        token: connectionToken.value,
+      });
+
+      if (response.data.success && response.data.telegramId) {
+        // Связываем Telegram с текущим пользователем
+        await linkIdentity('telegram', response.data.telegramId);
+        stopPolling();
+        emit('close');
+      }
+    } catch (error) {
+      console.error('Error checking connection:', error);
+    }
+  };
+
+  const startPolling = () => {
+    pollInterval.value = setInterval(checkConnection, 2000);
+  };
+
+  const stopPolling = () => {
+    if (pollInterval.value) {
+      clearInterval(pollInterval.value);
+      pollInterval.value = null;
+    }
+  };
+
+  const resetConnection = () => {
+    stopPolling();
+    showQR.value = false;
     error.value = '';
-    
-    const response = await axios.post('/api/auth/telegram/start-connection');
-    
-    if (response.data.success) {
-      connectionToken.value = response.data.token;
-      botLink.value = `https://t.me/${response.data.botUsername}?start=${connectionToken.value}`;
-      
-      // Генерируем QR-код
-      const qr = await QRCode.toDataURL(botLink.value);
-      qrCode.value = `<img src="${qr}" alt="Telegram QR Code" />`;
-      
-      showQR.value = true;
-      startPolling();
-    } else {
-      error.value = response.data.error || 'Не удалось начать процесс подключения';
-    }
-  } catch (err) {
-    error.value = err.response?.data?.error || 'Ошибка при подключении Telegram';
-  } finally {
-    loading.value = false;
-  }
-};
+    qrCode.value = '';
+    botLink.value = '';
+    connectionToken.value = '';
+  };
 
-const checkConnection = async () => {
-  try {
-    const response = await axios.post('/api/auth/telegram/check-connection', {
-      token: connectionToken.value
-    });
-    
-    if (response.data.success && response.data.telegramId) {
-      // Связываем Telegram с текущим пользователем
-      await linkIdentity('telegram', response.data.telegramId);
-      stopPolling();
-      emit('close');
-    }
-  } catch (error) {
-    console.error('Error checking connection:', error);
-  }
-};
-
-const startPolling = () => {
-  pollInterval.value = setInterval(checkConnection, 2000);
-};
-
-const stopPolling = () => {
-  if (pollInterval.value) {
-    clearInterval(pollInterval.value);
-    pollInterval.value = null;
-  }
-};
-
-const resetConnection = () => {
-  stopPolling();
-  showQR.value = false;
-  error.value = '';
-  qrCode.value = '';
-  botLink.value = '';
-  connectionToken.value = '';
-};
-
-onUnmounted(() => {
-  stopPolling();
-});
+  onUnmounted(() => {
+    stopPolling();
+  });
 </script>
-
-<style scoped>
-.telegram-connect {
-  padding: 20px;
-  max-width: 400px;
-}
-
-.intro,
-.qr-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 15px;
-  text-align: center;
-}
-
-.connect-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 20px;
-  background-color: #0088cc;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-  transition: background-color 0.2s;
-}
-
-.connect-button:hover:not(:disabled) {
-  background-color: #0077b5;
-}
-
-.telegram-icon {
-  margin-right: 10px;
-  font-size: 18px;
-}
-
-.qr-container {
-  background: white;
-  padding: 10px;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.qr-container img {
-  max-width: 200px;
-  height: auto;
-}
-
-.or-divider {
-  color: #666;
-  margin: 10px 0;
-}
-
-.bot-link {
-  color: #0088cc;
-  text-decoration: none;
-  padding: 8px 16px;
-  border: 1px solid #0088cc;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.bot-link:hover {
-  background-color: #0088cc;
-  color: white;
-}
-
-.reset-button {
-  padding: 8px 16px;
-  background-color: #e2e8f0;
-  color: #4a5568;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.reset-button:hover {
-  background-color: #cbd5e0;
-}
-
-.error {
-  color: #e53e3e;
-  margin-top: 10px;
-  text-align: center;
-}
-
-button:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-</style>
-
diff --git a/frontend/src/components/identity/WalletConnection.vue b/frontend/src/components/identity/WalletConnection.vue
index 62aece2..54a4dca 100644
--- a/frontend/src/components/identity/WalletConnection.vue
+++ b/frontend/src/components/identity/WalletConnection.vue
@@ -2,11 +2,7 @@
   <div class="wallet-connection">
     <div v-if="!isConnected" class="connect-section">
       <p>Подключите свой кошелек для доступа к расширенным функциям</p>
-      <button 
-        @click="connectWallet" 
-        :disabled="isLoading"
-        class="wallet-btn"
-      >
+      <button :disabled="isLoading" class="wallet-btn" @click="connectWallet">
         <span class="wallet-icon">💳</span>
         {{ isLoading ? 'Подключение...' : 'Подключить кошелек' }}
       </button>
@@ -20,106 +16,48 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import { useAuth } from '@/composables/useAuth';
-import { connectWithWallet } from '@/services/wallet';
+  import { ref, computed } from 'vue';
+  import { useAuth } from '@/composables/useAuth';
+  import { connectWithWallet } from '@/services/wallet';
 
-const emit = defineEmits(['close']);
-const { linkIdentity } = useAuth();
+  const emit = defineEmits(['close']);
+  const { linkIdentity } = useAuth();
 
-const isLoading = ref(false);
-const error = ref('');
-const address = ref('');
+  const isLoading = ref(false);
+  const error = ref('');
+  const address = ref('');
 
-const isConnected = computed(() => !!address.value);
+  const isConnected = computed(() => !!address.value);
 
-const formatAddress = (addr) => {
-  if (!addr) return '';
-  return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
-};
+  const formatAddress = (addr) => {
+    if (!addr) return '';
+    return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+  };
 
-const connectWallet = async () => {
-  if (isLoading.value) return;
-  
-  try {
-    isLoading.value = true;
-    error.value = '';
-    
-    // Подключаем кошелек
-    const result = await connectWithWallet();
-    
-    if (result.success) {
-      address.value = result.address;
-      
-      // Связываем кошелек с текущим пользователем
-      await linkIdentity('wallet', result.address);
-      emit('close');
-    } else {
-      error.value = result.error || 'Не удалось подключить кошелек';
+  const connectWallet = async () => {
+    if (isLoading.value) return;
+
+    try {
+      isLoading.value = true;
+      error.value = '';
+
+      // Подключаем кошелек
+      const result = await connectWithWallet();
+
+      if (result.success) {
+        address.value = result.address;
+
+        // Связываем кошелек с текущим пользователем
+        await linkIdentity('wallet', result.address);
+        emit('close');
+      } else {
+        error.value = result.error || 'Не удалось подключить кошелек';
+      }
+    } catch (err) {
+      console.error('Error connecting wallet:', err);
+      error.value = err.message || 'Произошла ошибка при подключении кошелька';
+    } finally {
+      isLoading.value = false;
     }
-  } catch (err) {
-    console.error('Error connecting wallet:', err);
-    error.value = err.message || 'Произошла ошибка при подключении кошелька';
-  } finally {
-    isLoading.value = false;
-  }
-};
+  };
 </script>
-
-<style scoped>
-.wallet-connection {
-  padding: 20px;
-  max-width: 400px;
-}
-
-.connect-section,
-.status-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 15px;
-  text-align: center;
-}
-
-.wallet-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 20px;
-  background-color: #4a5568;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-  transition: all 0.2s;
-}
-
-.wallet-btn:hover:not(:disabled) {
-  background-color: #2d3748;
-}
-
-.wallet-icon {
-  margin-right: 10px;
-  font-size: 18px;
-}
-
-.address {
-  font-family: monospace;
-  background-color: #f7fafc;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.error {
-  color: #e53e3e;
-  margin-top: 10px;
-  text-align: center;
-}
-
-button:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-</style> 
\ No newline at end of file
diff --git a/frontend/src/components/identity/index.js b/frontend/src/components/identity/index.js
index 232a23d..b93b731 100644
--- a/frontend/src/components/identity/index.js
+++ b/frontend/src/components/identity/index.js
@@ -2,8 +2,4 @@ import TelegramConnect from './TelegramConnect.vue';
 import WalletConnection from './WalletConnection.vue';
 import EmailConnect from './EmailConnect.vue';
 
-export {
-  TelegramConnect,
-  WalletConnection,
-  EmailConnect
-};
\ No newline at end of file
+export { TelegramConnect, WalletConnection, EmailConnect };
diff --git a/frontend/src/composables/useAuth.js b/frontend/src/composables/useAuth.js
index 887c760..eaf069b 100644
--- a/frontend/src/composables/useAuth.js
+++ b/frontend/src/composables/useAuth.js
@@ -12,26 +12,26 @@ export function useAuth() {
   const processedGuestIds = ref([]);
   const identities = ref([]);
   const tokenBalances = ref([]);
-  
+
   // Функция для обновления списка идентификаторов
   const updateIdentities = async () => {
     if (!isAuthenticated.value || !userId.value) return;
-    
+
     try {
       const response = await axios.get('/api/auth/identities');
       if (response.data.success) {
         // Фильтруем идентификаторы: убираем гостевые и оставляем только уникальные
         const filteredIdentities = response.data.identities
-          .filter(identity => identity.provider !== 'guest')
+          .filter((identity) => identity.provider !== 'guest')
           .reduce((acc, identity) => {
             // Для каждого типа провайдера оставляем только один идентификатор
-            const existingIdentity = acc.find(i => i.provider === identity.provider);
+            const existingIdentity = acc.find((i) => i.provider === identity.provider);
             if (!existingIdentity) {
               acc.push(identity);
             }
             return acc;
           }, []);
-        
+
         identities.value = filteredIdentities;
         console.log('User identities updated:', identities.value);
       }
@@ -39,7 +39,7 @@ export function useAuth() {
       console.error('Error fetching user identities:', error);
     }
   };
-  
+
   // Периодическое обновление идентификаторов
   let identitiesInterval;
 
@@ -54,7 +54,7 @@ export function useAuth() {
       identitiesInterval = null;
     }
   };
-  
+
   const checkTokenBalances = async (address) => {
     try {
       const response = await axios.get(`/api/auth/check-tokens/${address}`);
@@ -68,21 +68,29 @@ export function useAuth() {
       return null;
     }
   };
-  
-  const updateAuth = async ({ authenticated, authType: newAuthType, userId: newUserId, address: newAddress, telegramId: newTelegramId, isAdmin: newIsAdmin, email: newEmail }) => {
+
+  const updateAuth = async ({
+    authenticated,
+    authType: newAuthType,
+    userId: newUserId,
+    address: newAddress,
+    telegramId: newTelegramId,
+    isAdmin: newIsAdmin,
+    email: newEmail,
+  }) => {
     const wasAuthenticated = isAuthenticated.value;
     const previousUserId = userId.value;
-    
-    console.log('updateAuth called with:', { 
-      authenticated, 
-      newAuthType, 
-      newUserId, 
-      newAddress, 
-      newTelegramId, 
-      newIsAdmin, 
-      newEmail 
+
+    console.log('updateAuth called with:', {
+      authenticated,
+      newAuthType,
+      newUserId,
+      newAddress,
+      newTelegramId,
+      newIsAdmin,
+      newEmail,
     });
-    
+
     // Убедимся, что переменные являются реактивными
     isAuthenticated.value = authenticated === true;
     authType.value = newAuthType || null;
@@ -91,23 +99,26 @@ export function useAuth() {
     telegramId.value = newTelegramId || null;
     isAdmin.value = newIsAdmin === true;
     email.value = newEmail || null;
-    
+
     // Кэшируем данные аутентификации
-    localStorage.setItem('authData', JSON.stringify({
-      authenticated,
-      authType: newAuthType,
-      userId: newUserId,
-      address: newAddress,
-      telegramId: newTelegramId,
-      isAdmin: newIsAdmin,
-      email: newEmail
-    }));
-    
+    localStorage.setItem(
+      'authData',
+      JSON.stringify({
+        authenticated,
+        authType: newAuthType,
+        userId: newUserId,
+        address: newAddress,
+        telegramId: newTelegramId,
+        isAdmin: newIsAdmin,
+        email: newEmail,
+      })
+    );
+
     // Если аутентификация через кошелек, проверяем баланс токенов только при изменении адреса
     if (authenticated && newAuthType === 'wallet' && newAddress && newAddress !== address.value) {
       await checkTokenBalances(newAddress);
     }
-    
+
     // Обновляем идентификаторы при любом изменении аутентификации
     if (authenticated) {
       await updateIdentities();
@@ -116,63 +127,63 @@ export function useAuth() {
       stopIdentitiesPolling();
       identities.value = [];
     }
-    
-    console.log('Auth updated:', { 
+
+    console.log('Auth updated:', {
       authenticated: isAuthenticated.value,
       userId: userId.value,
       address: address.value,
-      telegramId: telegramId.value, 
+      telegramId: telegramId.value,
       email: email.value,
-      isAdmin: isAdmin.value
+      isAdmin: isAdmin.value,
     });
-    
-    // Если пользователь только что аутентифицировался или сменил аккаунт, 
+
+    // Если пользователь только что аутентифицировался или сменил аккаунт,
     // пробуем связать сообщения
     if (authenticated && (!wasAuthenticated || (previousUserId && previousUserId !== newUserId))) {
       console.log('Auth change detected, linking messages');
       linkMessages();
     }
   };
-  
+
   // Функция для связывания сообщений после успешной авторизации
   const linkMessages = async () => {
     try {
       if (isAuthenticated.value) {
         console.log('Linking messages after authentication');
-        
+
         // Проверка, есть ли гостевой ID для обработки
         const localGuestId = localStorage.getItem('guestId');
-        
+
         // Если гостевого ID нет или он уже был обработан, пропускаем запрос
         if (!localGuestId || processedGuestIds.value.includes(localGuestId)) {
           console.log('No new guest IDs to process or already processed');
-          return { 
-            success: true, 
+          return {
+            success: true,
             message: 'No new guest IDs to process',
-            processedIds: processedGuestIds.value
+            processedIds: processedGuestIds.value,
           };
         }
-        
+
         // Создаем объект с идентификаторами для передачи на сервер
         const identifiersData = {
           userId: userId.value,
-          guestId: localGuestId
+          guestId: localGuestId,
         };
-        
+
         // Добавляем все доступные идентификаторы
         if (address.value) identifiersData.address = address.value;
         if (email.value) identifiersData.email = email.value;
         if (telegramId.value) identifiersData.telegramId = telegramId.value;
-        
+
         console.log('Sending link-guest-messages request with data:', identifiersData);
-        
+
         try {
           // Отправляем запрос на связывание сообщений
           const response = await axios.post('/api/auth/link-guest-messages', identifiersData);
-          
+
           if (response.data.success) {
             console.log('Messages linked successfully:', response.data);
-            
+
             // Обновляем список обработанных guestIds из ответа сервера
             if (response.data.processedIds && Array.isArray(response.data.processedIds)) {
               processedGuestIds.value = [...response.data.processedIds];
@@ -181,49 +192,51 @@ export function useAuth() {
             // В качестве запасного варианта также обрабатываем старый формат ответа
             else if (response.data.results && Array.isArray(response.data.results)) {
               const newProcessedIds = response.data.results
-                .filter(result => result.guestId)
-                .map(result => result.guestId);
-              
+                .filter((result) => result.guestId)
+                .map((result) => result.guestId);
+
               if (newProcessedIds.length > 0) {
-                processedGuestIds.value = [...new Set([...processedGuestIds.value, ...newProcessedIds])];
+                processedGuestIds.value = [
+                  ...new Set([...processedGuestIds.value, ...newProcessedIds]),
+                ];
                 console.log('Updated processed guest IDs from results:', processedGuestIds.value);
               }
             }
-            
+
             // Очищаем гостевые сообщения из localStorage после успешного связывания
             localStorage.removeItem('guestMessages');
             localStorage.removeItem('guestId');
-            
+
             return {
               success: true,
-              processedIds: processedGuestIds.value
+              processedIds: processedGuestIds.value,
             };
           }
         } catch (error) {
           console.error('Error linking messages:', error);
           return {
             success: false,
-            error: error.message
+            error: error.message,
           };
         }
       }
-      
+
       return { success: false, message: 'Not authenticated' };
     } catch (error) {
       console.error('Error in linkMessages:', error);
       return { success: false, error: error.message };
     }
   };
-  
+
   const checkAuth = async () => {
     try {
       const response = await axios.get('/api/auth/check');
       console.log('Auth check response:', response.data);
-      
+
       const wasAuthenticated = isAuthenticated.value;
       const previousUserId = userId.value;
       const previousAuthType = authType.value;
-      
+
       // Обновляем данные авторизации через updateAuth вместо прямого изменения
       await updateAuth({
         authenticated: response.data.authenticated,
@@ -232,21 +245,21 @@ export function useAuth() {
         address: response.data.address,
         telegramId: response.data.telegramId,
         email: response.data.email,
-        isAdmin: response.data.isAdmin
+        isAdmin: response.data.isAdmin,
       });
-      
+
       // Если пользователь аутентифицирован, обновляем список идентификаторов и связываем сообщения
       if (response.data.authenticated) {
         // Сначала обновляем идентификаторы, чтобы иметь актуальные данные
         await updateIdentities();
-        
+
         // Если пользователь только что аутентифицировался или сменил аккаунт,
         // связываем гостевые сообщения с его аккаунтом
         if (!wasAuthenticated || (previousUserId && previousUserId !== response.data.userId)) {
           // Немедленно связываем сообщения
           const linkResult = await linkMessages();
           console.log('Link messages result on auth change:', linkResult);
-          
+
           // Если пользователь только что аутентифицировался через Telegram,
           // обновляем историю чата без перезагрузки страницы
           if (response.data.authType === 'telegram' && previousAuthType !== 'telegram') {
@@ -255,14 +268,14 @@ export function useAuth() {
             window.dispatchEvent(new CustomEvent('load-chat-history'));
           }
         }
-        
+
         // Обновляем отображение подключенного состояния в UI
         updateConnectionDisplay(true, response.data.authType, response.data);
       } else {
         // Обновляем отображение отключенного состояния
         updateConnectionDisplay(false);
       }
-      
+
       return response.data;
     } catch (error) {
       console.error('Error checking auth:', error);
@@ -271,30 +284,30 @@ export function useAuth() {
       return { authenticated: false };
     }
   };
-  
+
   const disconnect = async () => {
     try {
       // Удаляем все идентификаторы перед выходом
       await axios.post('/api/auth/logout');
-      
+
       // Обновляем состояние в памяти
-      updateAuth({ 
-        authenticated: false, 
-        authType: null, 
-        userId: null, 
-        address: null, 
+      updateAuth({
+        authenticated: false,
+        authType: null,
+        userId: null,
+        address: null,
         telegramId: null,
         email: null,
-        isAdmin: false 
+        isAdmin: false,
       });
-      
+
       // Обновляем отображение отключенного состояния
       updateConnectionDisplay(false);
-      
+
       // Очищаем списки идентификаторов
       identities.value = [];
       processedGuestIds.value = [];
-      
+
       // Очищаем localStorage полностью
       localStorage.removeItem('isAuthenticated');
       localStorage.removeItem('userId');
@@ -304,38 +317,38 @@ export function useAuth() {
       localStorage.removeItem('guestMessages');
       localStorage.removeItem('telegramId');
       localStorage.removeItem('email');
-      
+
       // Удаляем класс подключенного кошелька
       document.body.classList.remove('wallet-connected');
-      
+
       console.log('User disconnected successfully and all identifiers cleared');
-      
+
       return { success: true };
     } catch (error) {
       console.error('Error disconnecting:', error);
       return { success: false, error: error.message };
     }
   };
-  
+
   // Обновляем список обработанных guestIds
   const updateProcessedGuestIds = (ids) => {
     if (Array.isArray(ids)) {
       processedGuestIds.value = [...new Set([...processedGuestIds.value, ...ids])];
     }
   };
-  
+
   // Функция для обновления отображения подключения в UI
   const updateConnectionDisplay = (isConnected, authType, authData = {}) => {
     try {
       console.log('Updating connection display:', { isConnected, authType, authData });
-      
+
       if (isConnected) {
         document.body.classList.add('wallet-connected');
-        
+
         const authDisplayEl = document.getElementById('auth-display');
         if (authDisplayEl) {
           let displayText = 'Подключено';
-          
+
           if (authType === 'wallet' && authData.address) {
             const shortAddress = `${authData.address.substring(0, 6)}...${authData.address.substring(authData.address.length - 4)}`;
             displayText = `Кошелек: <strong>${shortAddress}</strong>`;
@@ -344,30 +357,30 @@ export function useAuth() {
           } else if (authType === 'telegram' && authData.telegramId) {
             displayText = `Telegram: <strong>${authData.telegramUsername || authData.telegramId}</strong>`;
           }
-          
+
           authDisplayEl.innerHTML = displayText;
           authDisplayEl.style.display = 'inline-block';
         }
-        
+
         // Скрываем кнопки авторизации и показываем кнопку выхода
         const authButtonsEl = document.getElementById('auth-buttons');
         const logoutButtonEl = document.getElementById('logout-button');
-        
+
         if (authButtonsEl) authButtonsEl.style.display = 'none';
         if (logoutButtonEl) logoutButtonEl.style.display = 'inline-block';
       } else {
         document.body.classList.remove('wallet-connected');
-        
+
         // Скрываем отображение аутентификации
         const authDisplayEl = document.getElementById('auth-display');
         if (authDisplayEl) {
           authDisplayEl.style.display = 'none';
         }
-        
+
         // Показываем кнопки авторизации и скрываем кнопку выхода
         const authButtonsEl = document.getElementById('auth-buttons');
         const logoutButtonEl = document.getElementById('logout-button');
-        
+
         if (authButtonsEl) authButtonsEl.style.display = 'flex';
         if (logoutButtonEl) logoutButtonEl.style.display = 'none';
       }
@@ -375,7 +388,7 @@ export function useAuth() {
       console.error('Error updating connection display:', error);
     }
   };
-  
+
   onMounted(async () => {
     await checkAuth();
   });
@@ -384,7 +397,7 @@ export function useAuth() {
   onUnmounted(() => {
     stopIdentitiesPolling();
   });
-  
+
   /**
    * Связывает новый идентификатор с текущим аккаунтом пользователя
    * @param {string} provider - Тип идентификатора (wallet, email, telegram)
@@ -397,12 +410,12 @@ export function useAuth() {
         console.error('Невозможно связать идентификатор: пользователь не аутентифицирован');
         return { success: false, error: 'Пользователь не аутентифицирован' };
       }
-      
+
       const response = await axios.post('/api/auth/identities/link', {
         type: provider,
-        value: providerId
+        value: providerId,
       });
-      
+
       if (response.data.success) {
         // Обновляем локальные данные при необходимости
         if (provider === 'wallet') {
@@ -413,24 +426,24 @@ export function useAuth() {
         } else if (provider === 'email') {
           email.value = providerId;
         }
-        
+
         // Обновляем список идентификаторов
         await updateIdentities();
-        
+
         console.log(`Идентификатор ${provider} успешно связан с аккаунтом`);
         return { success: true };
       }
-      
+
       return response.data;
     } catch (error) {
       console.error('Ошибка при связывании идентификатора:', error);
-      return { 
-        success: false, 
-        error: error.response?.data?.error || error.message 
+      return {
+        success: false,
+        error: error.response?.data?.error || error.message,
       };
     }
   };
-  
+
   return {
     isAuthenticated,
     authType,
@@ -449,6 +462,6 @@ export function useAuth() {
     updateIdentities,
     updateProcessedGuestIds,
     updateConnectionDisplay,
-    linkIdentity
+    linkIdentity,
   };
-} 
\ No newline at end of file
+}
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 2d0591b..19b9e0e 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -8,7 +8,8 @@ import axios from 'axios';
 
 // Настройка axios
 // В Docker контейнере localhost:8000 не работает, поэтому используем явное значение
-const apiUrl = window.location.hostname === 'localhost' ? 'http://localhost:8000' : import.meta.env.VITE_API_URL;
+const apiUrl =
+  window.location.hostname === 'localhost' ? 'http://localhost:8000' : import.meta.env.VITE_API_URL;
 axios.defaults.baseURL = apiUrl;
 axios.defaults.withCredentials = true;
 
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index d7834b6..adfc4ee 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -8,13 +8,13 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: HomeView
-  }
+    component: HomeView,
+  },
 ];
 
 const router = createRouter({
   history: createWebHistory(),
-  routes
+  routes,
 });
 
 console.log('router/index.js: Router created');
@@ -25,9 +25,9 @@ router.beforeEach(async (to, from, next) => {
   if (!to.matched.length) {
     return next({ name: 'home' });
   }
-  
+
   // Проверяем аутентификацию, если маршрут требует авторизации
-  if (to.matched.some(record => record.meta.requiresAuth)) {
+  if (to.matched.some((record) => record.meta.requiresAuth)) {
     try {
       const response = await axios.get('/api/auth/check');
       if (response.data.authenticated) {
diff --git a/frontend/src/services/tokens.js b/frontend/src/services/tokens.js
index c60d3b1..2b7344d 100644
--- a/frontend/src/services/tokens.js
+++ b/frontend/src/services/tokens.js
@@ -3,25 +3,25 @@ import api from '../api/axios';
 // Адреса смарт-контрактов токенов HB3A
 export const TOKEN_CONTRACTS = {
   eth: {
-    address: "0xd95a45fc46a7300e6022885afec3d618d7d3f27c",
-    symbol: "HB3A",
-    network: "Ethereum"
+    address: '0xd95a45fc46a7300e6022885afec3d618d7d3f27c',
+    symbol: 'HB3A',
+    network: 'Ethereum',
   },
   bsc: {
-    address: "0x1d47f12ffA279BFE59Ab16d56fBb10d89AECdD5D",
-    symbol: "HB3A",
-    network: "BSC"
+    address: '0x1d47f12ffA279BFE59Ab16d56fBb10d89AECdD5D',
+    symbol: 'HB3A',
+    network: 'BSC',
   },
   arbitrum: {
-    address: "0xdce769b847a0a697239777d0b1c7dd33b6012ba0",
-    symbol: "HB3A",
-    network: "Arbitrum"
+    address: '0xdce769b847a0a697239777d0b1c7dd33b6012ba0',
+    symbol: 'HB3A',
+    network: 'Arbitrum',
   },
   polygon: {
-    address: "0x351f59de4fedbdf7601f5592b93db3b9330c1c1d",
-    symbol: "HB3A",
-    network: "Polygon"
-  }
+    address: '0x351f59de4fedbdf7601f5592b93db3b9330c1c1d',
+    symbol: 'HB3A',
+    network: 'Polygon',
+  },
 };
 
 // Получение балансов токенов
@@ -35,7 +35,7 @@ export const fetchTokenBalances = async () => {
       eth: '0',
       bsc: '0',
       arbitrum: '0',
-      polygon: '0'
+      polygon: '0',
     };
   }
-}; 
\ No newline at end of file
+};
diff --git a/frontend/src/services/wallet.js b/frontend/src/services/wallet.js
index 2097423..7d44493 100644
--- a/frontend/src/services/wallet.js
+++ b/frontend/src/services/wallet.js
@@ -4,39 +4,39 @@ import { SiweMessage } from 'siwe';
 
 export async function connectWithWallet() {
   console.log('Starting wallet connection...');
-  
+
   try {
     // Проверяем наличие MetaMask
     if (!window.ethereum) {
       throw new Error('MetaMask not detected. Please install MetaMask.');
     }
-    
+
     console.log('MetaMask detected, requesting accounts...');
-    
+
     // Запрашиваем доступ к аккаунтам
     const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
-    
+
     console.log('Got accounts:', accounts);
-    
+
     if (!accounts || accounts.length === 0) {
       throw new Error('No accounts found. Please unlock MetaMask.');
     }
-    
+
     // Берем первый аккаунт
     const address = ethers.getAddress(accounts[0]);
     console.log('Normalized address:', address);
-    
+
     // Запрашиваем nonce с сервера
     console.log('Requesting nonce...');
     const nonceResponse = await axios.get(`/api/auth/nonce?address=${address}`);
     const nonce = nonceResponse.data.nonce;
     console.log('Got nonce:', nonce);
-    
+
     // Создаем сообщение для подписи
     const domain = window.location.host;
     const origin = window.location.origin;
     const statement = 'Sign in with Ethereum to the app.';
-    
+
     const siweMessage = new SiweMessage({
       domain,
       address,
@@ -45,31 +45,31 @@ export async function connectWithWallet() {
       version: '1',
       chainId: 1,
       nonce,
-      resources: [`${origin}/api/auth/verify`]
+      resources: [`${origin}/api/auth/verify`],
     });
-    
+
     const message = siweMessage.prepareMessage();
     console.log('SIWE message:', message);
-    
+
     // Запрашиваем подпись
     console.log('Requesting signature...');
     const signature = await window.ethereum.request({
       method: 'personal_sign',
-      params: [message, address]
+      params: [message, address],
     });
-    
+
     console.log('Got signature:', signature);
-    
+
     // Отправляем подпись на сервер для верификации
     console.log('Sending verification request...');
     const verificationResponse = await axios.post('/api/auth/verify', {
       message,
       signature,
-      address
+      address,
     });
-    
+
     console.log('Verification response:', verificationResponse.data);
-    
+
     // Обновляем состояние аутентификации
     if (verificationResponse.data.success) {
       // Обновляем состояние аутентификации в localStorage
@@ -78,10 +78,10 @@ export async function connectWithWallet() {
       localStorage.setItem('address', verificationResponse.data.address);
       localStorage.setItem('isAdmin', verificationResponse.data.isAdmin);
     }
-    
+
     return verificationResponse.data;
   } catch (error) {
     console.error('Error connecting wallet:', error);
     throw error;
   }
-} 
\ No newline at end of file
+}
diff --git a/frontend/src/utils/wallet.js b/frontend/src/utils/wallet.js
index cd08791..2f34c8c 100644
--- a/frontend/src/utils/wallet.js
+++ b/frontend/src/utils/wallet.js
@@ -5,56 +5,57 @@ import { SiweMessage } from 'siwe';
 export const connectWallet = async () => {
   try {
     console.log('Starting wallet connection...');
-    
+
     // Проверяем наличие MetaMask или другого Ethereum провайдера
     if (!window.ethereum) {
       console.error('No Ethereum provider (like MetaMask) detected!');
-      return { 
-        success: false, 
-        error: 'Не найден кошелек MetaMask или другой Ethereum провайдер. Пожалуйста, установите расширение MetaMask.' 
+      return {
+        success: false,
+        error:
+          'Не найден кошелек MetaMask или другой Ethereum провайдер. Пожалуйста, установите расширение MetaMask.',
       };
     }
-    
+
     console.log('MetaMask detected, requesting accounts...');
-    
+
     // Запрашиваем доступ к аккаунтам
     const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
     console.log('Got accounts:', accounts);
-    
+
     if (!accounts || accounts.length === 0) {
-      return { 
-        success: false, 
-        error: 'Не удалось получить доступ к аккаунтам. Пожалуйста, разрешите доступ в MetaMask.' 
+      return {
+        success: false,
+        error: 'Не удалось получить доступ к аккаунтам. Пожалуйста, разрешите доступ в MetaMask.',
       };
     }
-    
+
     // Берем первый аккаунт в списке
     const address = accounts[0];
     // Нормализуем адрес (приводим к нижнему регистру для последующих сравнений)
     const normalizedAddress = ethers.utils.getAddress(address);
     console.log('Normalized address:', normalizedAddress);
-    
+
     // Запрашиваем nonce с сервера
     console.log('Requesting nonce...');
     const nonceResponse = await axios.get(`/api/auth/nonce?address=${normalizedAddress}`);
     const nonce = nonceResponse.data.nonce;
     console.log('Got nonce:', nonce);
-    
+
     if (!nonce) {
-      return { 
-        success: false, 
-        error: 'Не удалось получить nonce от сервера.' 
+      return {
+        success: false,
+        error: 'Не удалось получить nonce от сервера.',
       };
     }
-    
+
     // Создаем провайдер Ethers
     const provider = new ethers.providers.Web3Provider(window.ethereum);
     const signer = provider.getSigner();
-    
+
     // Создаем сообщение для подписи
     const domain = window.location.host;
     const origin = window.location.origin;
-    
+
     // Создаем SIWE сообщение
     const message = new SiweMessage({
       domain,
@@ -65,37 +66,37 @@ export const connectWallet = async () => {
       chainId: 1, // Ethereum mainnet
       nonce: nonce,
       issuedAt: new Date().toISOString(),
-      resources: [`${origin}/api/auth/verify`]
+      resources: [`${origin}/api/auth/verify`],
     });
-    
+
     // Получаем строку сообщения для подписи
     const messageToSign = message.prepareMessage();
     console.log('SIWE message:', messageToSign);
-    
+
     // Запрашиваем подпись
     console.log('Requesting signature...');
     const signature = await signer.signMessage(messageToSign);
-    
+
     if (!signature) {
-      return { 
-        success: false, 
-        error: 'Подпись не была получена. Пожалуйста, подпишите сообщение в MetaMask.' 
+      return {
+        success: false,
+        error: 'Подпись не была получена. Пожалуйста, подпишите сообщение в MetaMask.',
       };
     }
-    
+
     console.log('Got signature:', signature);
-    
+
     // Отправляем верификацию на сервер
     console.log('Sending verification request...');
     const verifyResponse = await axios.post('/api/auth/verify', {
       address: normalizedAddress,
       signature,
-      nonce
+      nonce,
     });
-    
+
     // Обновляем интерфейс для отображения подключенного состояния
     document.body.classList.add('wallet-connected');
-    
+
     // Обновляем отображение адреса кошелька в UI
     const authDisplayEl = document.getElementById('auth-display');
     if (authDisplayEl) {
@@ -103,35 +104,35 @@ export const connectWallet = async () => {
       authDisplayEl.innerHTML = `Кошелек: <strong>${shortAddress}</strong>`;
       authDisplayEl.style.display = 'inline-block';
     }
-    
+
     // Скрываем кнопки авторизации и показываем кнопку выхода
     const authButtonsEl = document.getElementById('auth-buttons');
     const logoutButtonEl = document.getElementById('logout-button');
-    
+
     if (authButtonsEl) authButtonsEl.style.display = 'none';
     if (logoutButtonEl) logoutButtonEl.style.display = 'inline-block';
-    
+
     console.log('Verification response:', verifyResponse.data);
-    
+
     if (verifyResponse.data.success) {
-      return { 
-        success: true, 
+      return {
+        success: true,
         address: normalizedAddress,
         userId: verifyResponse.data.userId,
-        isAdmin: verifyResponse.data.isAdmin
+        isAdmin: verifyResponse.data.isAdmin,
       };
     } else {
-      return { 
-        success: false, 
-        error: verifyResponse.data.error || 'Ошибка верификации на сервере.' 
+      return {
+        success: false,
+        error: verifyResponse.data.error || 'Ошибка верификации на сервере.',
       };
     }
   } catch (error) {
     console.error('Error connecting wallet:', error);
-    
+
     // Формируем понятное сообщение об ошибке
     let errorMessage = 'Произошла ошибка при подключении кошелька.';
-    
+
     if (error.code === 4001) {
       errorMessage = 'Вы отклонили запрос на подпись в MetaMask.';
     } else if (error.response && error.response.data && error.response.data.error) {
@@ -139,10 +140,10 @@ export const connectWallet = async () => {
     } else if (error.message) {
       errorMessage = error.message;
     }
-    
-    return { 
-      success: false, 
-      error: errorMessage
+
+    return {
+      success: false,
+      error: errorMessage,
     };
   }
-}; 
\ No newline at end of file
+};
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 35aab69..70059d5 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -8,25 +8,41 @@
             <h1 class="title">✌️HB3 - Accelerator DLE</h1>
             <p class="subtitle">Венчурный фонд и поставщик программного обеспечения</p>
           </div>
-          <button class="nav-btn header-wallet-btn" @click="toggleWalletSidebar" :class="{ active: showWalletSidebar }">
-            <div class="hamburger-line"></div>
-            <div class="nav-btn-number">7</div>
-            <div class="nav-btn-text">{{ showWalletSidebar ? 'Скрыть панель' : 'Подключиться' }}</div>
+          <button
+            class="header-wallet-btn"
+            :class="{ active: showWalletSidebar }"
+            @click="toggleWalletSidebar"
+          >
+            <div class="hamburger-line" />
+            <div class="nav-btn-text">
+              {{ showWalletSidebar ? 'Скрыть панель' : 'Подключиться' }}
+            </div>
           </button>
         </div>
       </div>
-      
+
       <div class="chat-container">
-        <div class="chat-messages" ref="messagesContainer">
-          <div v-for="message in messages" :key="message.id" 
-               :class="['message', 
-                       message.sender_type === 'assistant' || message.role === 'assistant' ? 'ai-message' : 
-                       message.sender_type === 'system' || message.role === 'system' ? 'system-message' : 'user-message',
-                       message.isLocal ? 'is-local' : '',
-                       message.hasError ? 'has-error' : '']">
-            <div class="message-content" v-html="formatMessage(message.content)"></div>
+        <div ref="messagesContainer" class="chat-messages">
+          <div
+            v-for="message in messages"
+            :key="message.id"
+            :class="[
+              'message',
+              message.sender_type === 'assistant' || message.role === 'assistant'
+                ? 'ai-message'
+                : message.sender_type === 'system' || message.role === 'system'
+                  ? 'system-message'
+                  : 'user-message',
+              message.isLocal ? 'is-local' : '',
+              message.hasError ? 'has-error' : '',
+            ]"
+          >
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <div class="message-content" v-html="formatMessage(message.content)" />
             <div class="message-meta">
-              <div class="message-time">{{ formatTime(message.timestamp || message.created_at) }}</div>
+              <div class="message-time">
+                {{ formatTime(message.timestamp || message.created_at) }}
+              </div>
               <div v-if="message.isLocal" class="message-status">
                 <span class="sending-indicator">Отправка...</span>
               </div>
@@ -36,777 +52,1575 @@
             </div>
           </div>
         </div>
-        
+
         <div class="chat-input">
-          <textarea 
-            v-model="newMessage" 
-            placeholder="Введите сообщение..." 
+          <textarea
+            ref="messageInput"
+            v-model="newMessage"
+            placeholder="Введите сообщение..."
+            :disabled="isLoading"
+            rows="3"
+            autofocus
             @keydown.enter.prevent="handleMessage(newMessage)"
             @focus="handleFocus"
             @blur="handleBlur"
-            :disabled="isLoading"
-            ref="messageInput"
-            rows="3"
-            autofocus
-          ></textarea>
+          />
           <div class="chat-buttons">
-            <button @click="handleMessage(newMessage)" :disabled="isLoading || !newMessage.trim()">
+            <button :disabled="isLoading || !newMessage.trim()" @click="handleMessage(newMessage)">
               {{ isLoading ? 'Отправка...' : 'Отправить' }}
             </button>
-            <button @click="clearGuestMessages" class="clear-btn" :disabled="isLoading">
+            <button class="clear-btn" :disabled="isLoading" @click="clearGuestMessages">
               Очистить
             </button>
           </div>
         </div>
-        </div>
-          </div>
-          
-    <!-- Правая панель с информацией о кошельке -->
-    <div class="wallet-sidebar" v-if="showWalletSidebar">
-      <div class="wallet-header">
-        <button v-if="!isAuthenticated" @click="handleWalletAuth" class="wallet-connect-btn-header">
-              Подключить кошелек
-            </button>
-        <button v-if="isAuthenticated" @click="disconnectWallet" class="wallet-disconnect-btn-header">
-          Отключить
-        </button>
-        <button class="close-wallet-sidebar" @click="toggleWalletSidebar">×</button>
-      </div>
-      
-      <!-- Добавляем дополнительные кнопки авторизации -->
-      <div v-if="!isAuthenticated" class="auth-buttons">
-        <h3>Авторизация через:</h3>
-        <div v-if="!telegramAuth.showVerification" class="auth-btn-container">
-          <button @click="handleTelegramAuth" class="auth-btn telegram-btn">
-            Подключить Telegram
-          </button>
-        </div>
-        <div v-if="telegramAuth.showVerification" class="verification-block">
-          <div class="verification-code">
-            <span>Код верификации:</span>
-            <code @click="copyCode(telegramAuth.verificationCode)">{{ telegramAuth.verificationCode }}</code>
-            <span v-if="codeCopied" class="copied-message">Скопировано!</span>
-          </div>
-          <a :href="telegramAuth.botLink" target="_blank" class="bot-link">Открыть бота Telegram</a>
-          <button @click="cancelTelegramAuth" class="cancel-btn">Отмена</button>
-        </div>
-        
-        <!-- Сообщение об ошибке в Telegram -->
-        <div v-if="telegramAuth.error" class="error-message">
-          {{ telegramAuth.error }}
-          <button class="close-error" @click="telegramAuth.error = ''">×</button>
-        </div>
-        
-        <div v-if="!emailAuth.showForm && !emailAuth.showVerification" class="auth-btn-container">
-          <button @click="handleEmailAuth" class="auth-btn email-btn">
-            Подключить Email
-          </button>
-        </div>
-              
-        <!-- Форма для Email верификации -->
-        <div v-if="emailAuth.showForm" class="email-form">
-          <p>Введите ваш email для получения кода подтверждения:</p>
-          <div class="email-form-container">
-            <input 
-              v-model="emailAuth.email" 
-              type="email" 
-              placeholder="Ваш email" 
-              class="email-input"
-              :class="{ 'email-input-error': emailAuth.formatError }"
-            />
-            <button @click="sendEmailVerification" class="send-email-btn" :disabled="emailAuth.isLoading">
-              {{ emailAuth.isLoading ? 'Отправка...' : 'Отправить код' }}
-            </button>
-          </div>
-          <div class="form-actions">
-            <button @click="cancelEmailAuth" class="cancel-btn">Отмена</button>
-            <p v-if="emailAuth.formatError" class="email-format-error">Пожалуйста, введите корректный email</p>
-          </div>
-        </div>
-        
-        <!-- Форма для ввода кода верификации Email -->
-        <div v-if="emailAuth.showVerification" class="email-verification-form">
-          <p>На ваш email <strong>{{ emailAuth.verificationEmail }}</strong> отправлен код подтверждения.</p>
-          <div class="email-form-container">
-            <input 
-              v-model="emailAuth.verificationCode" 
-              type="text" 
-              placeholder="Введите код верификации" 
-              maxlength="6"
-              class="email-input"
-            />
-            <button @click="verifyEmailCode" class="send-email-btn" :disabled="emailAuth.isVerifying">
-              {{ emailAuth.isVerifying ? 'Проверка...' : 'Подтвердить' }}
-            </button>
-          </div>
-          <button @click="cancelEmailAuth" class="cancel-btn">Отмена</button>
-        </div>
-      </div>
-            
-      <!-- Сообщение об ошибке в Email -->
-      <div v-if="emailAuth.error" class="error-message">
-        {{ emailAuth.error }}
-        <button class="close-error" @click="emailAuth.error = ''">×</button>
-      </div>
-          
-      <!-- Блок информации о пользователе -->
-      <div v-if="isAuthenticated" class="user-info">
-        <h3>Идентификаторы:</h3>
-        <div class="user-info-item">
-          <span class="user-info-label">Кошелек:</span>
-          <span v-if="hasIdentityType('wallet')" class="user-info-value">
-            {{ truncateAddress(getIdentityValue('wallet')) }}
-          </span>
-          <button v-else @click="handleWalletAuth" class="connect-btn">
-            Подключить кошелек
-          </button>
-        </div>
-        <div class="user-info-item">
-          <span class="user-info-label">Telegram:</span>
-          <span v-if="hasIdentityType('telegram')" class="user-info-value">
-            {{ getIdentityValue('telegram') }}
-          </span>
-          <button v-else @click="handleTelegramAuth" class="connect-btn">
-            Подключить Telegram
-          </button>
-        </div>
-        <div class="user-info-item">
-          <span class="user-info-label">Email:</span>
-          <span v-if="hasIdentityType('email')" class="user-info-value">
-            {{ getIdentityValue('email') }}
-          </span>
-          <button v-else @click="handleEmailAuth" class="connect-btn">
-            Подключить Email
-          </button>
-        </div>
-      </div>
-      
-      <!-- Блок форм подключения для аутентифицированных пользователей -->
-      <div v-if="isAuthenticated && (emailAuth.showForm || telegramAuth.showVerification || emailAuth.showVerification)" class="connect-forms">
-        <!-- Форма для Email верификации -->
-        <div v-if="emailAuth.showForm" class="email-form">
-          <p>Введите ваш email для получения кода подтверждения:</p>
-          <div class="email-form-container">
-            <input 
-              v-model="emailAuth.email" 
-              type="email" 
-              placeholder="Ваш email" 
-              class="email-input"
-              :class="{ 'email-input-error': emailAuth.formatError }"
-            />
-            <button @click="sendEmailVerification" class="send-email-btn" :disabled="emailAuth.isLoading">
-              {{ emailAuth.isLoading ? 'Отправка...' : 'Отправить код' }}
-            </button>
-          </div>
-          <div class="form-actions">
-            <button @click="cancelEmailAuth" class="cancel-btn">Отмена</button>
-            <p v-if="emailAuth.formatError" class="email-format-error">Пожалуйста, введите корректный email</p>
-          </div>
-        </div>
-
-        <!-- Форма для ввода кода верификации Email -->
-        <div v-if="emailAuth.showVerification" class="email-verification-form">
-          <p>На ваш email <strong>{{ emailAuth.verificationEmail }}</strong> отправлен код подтверждения.</p>
-          <div class="email-form-container">
-            <input 
-              v-model="emailAuth.verificationCode" 
-              type="text" 
-              placeholder="Введите код верификации" 
-              maxlength="6"
-              class="email-input"
-            />
-            <button @click="verifyEmailCode" class="send-email-btn" :disabled="emailAuth.isVerifying">
-              {{ emailAuth.isVerifying ? 'Проверка...' : 'Подтвердить' }}
-            </button>
-          </div>
-          <button @click="cancelEmailAuth" class="cancel-btn">Отмена</button>
-        </div>
-
-        <!-- Форма для Telegram верификации -->
-        <div v-if="telegramAuth.showVerification" class="verification-block">
-          <div class="verification-code">
-            <span>Код верификации:</span>
-            <code @click="copyCode(telegramAuth.verificationCode)">{{ telegramAuth.verificationCode }}</code>
-            <span v-if="codeCopied" class="copied-message">Скопировано!</span>
-          </div>
-          <a :href="telegramAuth.botLink" target="_blank" class="bot-link">Открыть бота Telegram</a>
-          <button @click="cancelTelegramAuth" class="cancel-btn">Отмена</button>
-        </div>
-      </div>
-      
-      <!-- Блок баланса токенов -->
-      <div v-if="isAuthenticated && auth.address?.value" class="token-balances">
-        <h3>Баланс токенов:</h3>
-        <div class="token-balance">
-          <span class="token-name">ETH:</span>
-          <span class="token-amount">{{ Number(tokenBalances.eth).toLocaleString() }}</span>
-          <span class="token-symbol">{{ TOKEN_CONTRACTS.eth.symbol }}</span>
-        </div>
-        <div class="token-balance">
-          <span class="token-name">BSC:</span>
-          <span class="token-amount">{{ Number(tokenBalances.bsc).toLocaleString() }}</span>
-          <span class="token-symbol">{{ TOKEN_CONTRACTS.bsc.symbol }}</span>
-        </div>
-        <div class="token-balance">
-          <span class="token-name">ARB:</span>
-          <span class="token-amount">{{ Number(tokenBalances.arbitrum).toLocaleString() }}</span>
-          <span class="token-symbol">{{ TOKEN_CONTRACTS.arbitrum.symbol }}</span>
-        </div>
-        <div class="token-balance">
-          <span class="token-name">POL:</span>
-          <span class="token-amount">{{ Number(tokenBalances.polygon).toLocaleString() }}</span>
-          <span class="token-symbol">{{ TOKEN_CONTRACTS.polygon.symbol }}</span>
-        </div>
       </div>
     </div>
+
+    <!-- Правая панель с информацией о кошельке -->
+    <transition name="sidebar-slide">
+      <div v-if="showWalletSidebar" class="wallet-sidebar">
+        <div class="wallet-sidebar-content">
+          <!-- Блок для неавторизованных пользователей -->
+          <div v-if="!isAuthenticated" class="auth-container">
+            <div class="wallet-header">
+              <div class="wallet-header-buttons">
+                <button class="close-wallet-sidebar" @click="toggleWalletSidebar">×</button>
+              </div>
+            </div>
+
+            <div class="auth-buttons-wrapper">
+              <button
+                v-if="
+                  !telegramAuth.showVerification &&
+                  !emailAuth.showForm &&
+                  !emailAuth.showVerification
+                "
+                class="auth-btn connect-wallet-btn"
+                @click="handleWalletAuth"
+              >
+                Подключить кошелек
+              </button>
+
+              <button
+                v-if="
+                  !telegramAuth.showVerification &&
+                  !emailAuth.showForm &&
+                  !emailAuth.showVerification
+                "
+                class="auth-btn telegram-btn"
+                @click="handleTelegramAuth"
+              >
+                Подключить Telegram
+              </button>
+
+              <button
+                v-if="
+                  !telegramAuth.showVerification &&
+                  !emailAuth.showForm &&
+                  !emailAuth.showVerification
+                "
+                class="auth-btn email-btn"
+                @click="handleEmailAuth"
+              >
+                Подключить Email
+              </button>
+            </div>
+
+            <div v-if="telegramAuth.showVerification" class="verification-block">
+              <div class="verification-code">
+                <span>Код верификации:</span>
+                <code @click="copyCode(telegramAuth.verificationCode)">{{
+                  telegramAuth.verificationCode
+                }}</code>
+                <span v-if="codeCopied" class="copied-message">Скопировано!</span>
+              </div>
+              <a :href="telegramAuth.botLink" target="_blank" class="bot-link"
+                >Открыть бота Telegram</a
+              >
+              <button class="cancel-btn" @click="cancelTelegramAuth">Отмена</button>
+            </div>
+
+            <!-- Сообщение об ошибке в Telegram -->
+            <div v-if="telegramAuth.error" class="error-message">
+              {{ telegramAuth.error }}
+              <button class="close-error" @click="telegramAuth.error = ''">×</button>
+            </div>
+
+            <!-- Форма для Email верификации -->
+            <div v-if="emailAuth.showForm" class="email-form">
+              <p>Введите ваш email для получения кода подтверждения:</p>
+              <div class="email-form-container">
+                <input
+                  v-model="emailAuth.email"
+                  type="email"
+                  placeholder="Ваш email"
+                  class="email-input"
+                  :class="{ 'email-input-error': emailAuth.formatError }"
+                />
+                <button
+                  class="send-email-btn"
+                  :disabled="emailAuth.isLoading"
+                  @click="sendEmailVerification"
+                >
+                  {{ emailAuth.isLoading ? 'Отправка...' : 'Отправить код' }}
+                </button>
+              </div>
+              <div class="form-actions">
+                <button class="cancel-btn" @click="cancelEmailAuth">Отмена</button>
+                <p v-if="emailAuth.formatError" class="email-format-error">
+                  Пожалуйста, введите корректный email
+                </p>
+              </div>
+            </div>
+
+            <!-- Форма для ввода кода верификации Email -->
+            <div v-if="emailAuth.showVerification" class="email-verification-form">
+              <p>
+                На ваш email <strong>{{ emailAuth.verificationEmail }}</strong> отправлен код
+                подтверждения.
+              </p>
+              <div class="email-form-container">
+                <input
+                  v-model="emailAuth.verificationCode"
+                  type="text"
+                  placeholder="Введите код верификации"
+                  maxlength="6"
+                  class="email-input"
+                />
+                <button
+                  class="send-email-btn"
+                  :disabled="emailAuth.isVerifying"
+                  @click="verifyEmailCode"
+                >
+                  {{ emailAuth.isVerifying ? 'Проверка...' : 'Подтвердить' }}
+                </button>
+              </div>
+              <button class="cancel-btn" @click="cancelEmailAuth">Отмена</button>
+            </div>
+
+            <!-- Сообщение об ошибке в Email -->
+            <div v-if="emailAuth.error" class="error-message">
+              {{ emailAuth.error }}
+              <button class="close-error" @click="emailAuth.error = ''">×</button>
+            </div>
+          </div>
+
+          <!-- Блок для авторизованных пользователей -->
+          <div v-if="isAuthenticated" class="auth-buttons-container">
+            <div class="wallet-header">
+              <div class="wallet-header-buttons">
+                <button class="auth-btn disconnect-wallet-btn" @click="disconnectWallet">
+                  Отключить
+                </button>
+                <button class="close-wallet-sidebar" @click="toggleWalletSidebar">×</button>
+              </div>
+            </div>
+
+            <!-- Блок информации о пользователе -->
+            <div class="user-info">
+              <h3>Идентификаторы:</h3>
+              <div class="user-info-item">
+                <span class="user-info-label">Кошелек:</span>
+                <span v-if="hasIdentityType('wallet')" class="user-info-value">
+                  {{ truncateAddress(getIdentityValue('wallet')) }}
+                </span>
+                <button v-else class="connect-btn" @click="handleWalletAuth">
+                  Подключить кошелек
+                </button>
+              </div>
+              <div class="user-info-item">
+                <span class="user-info-label">Telegram:</span>
+                <span v-if="hasIdentityType('telegram')" class="user-info-value">
+                  {{ getIdentityValue('telegram') }}
+                </span>
+                <button v-else class="connect-btn" @click="handleTelegramAuth">
+                  Подключить Telegram
+                </button>
+              </div>
+              <div class="user-info-item">
+                <span class="user-info-label">Email:</span>
+                <span v-if="hasIdentityType('email')" class="user-info-value">
+                  {{ getIdentityValue('email') }}
+                </span>
+                <button v-else class="connect-btn" @click="handleEmailAuth">
+                  Подключить Email
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Блок форм подключения для аутентифицированных пользователей -->
+          <div
+            v-if="
+              isAuthenticated &&
+              (emailAuth.showForm || telegramAuth.showVerification || emailAuth.showVerification)
+            "
+            class="connect-forms"
+          >
+            <!-- Форма для Email верификации -->
+            <div v-if="emailAuth.showForm" class="email-form">
+              <p>Введите ваш email для получения кода подтверждения:</p>
+              <div class="email-form-container">
+                <input
+                  v-model="emailAuth.email"
+                  type="email"
+                  placeholder="Ваш email"
+                  class="email-input"
+                  :class="{ 'email-input-error': emailAuth.formatError }"
+                />
+                <button
+                  class="send-email-btn"
+                  :disabled="emailAuth.isLoading"
+                  @click="sendEmailVerification"
+                >
+                  {{ emailAuth.isLoading ? 'Отправка...' : 'Отправить код' }}
+                </button>
+              </div>
+              <div class="form-actions">
+                <button class="cancel-btn" @click="cancelEmailAuth">Отмена</button>
+                <p v-if="emailAuth.formatError" class="email-format-error">
+                  Пожалуйста, введите корректный email
+                </p>
+              </div>
+            </div>
+
+            <!-- Форма для ввода кода верификации Email -->
+            <div v-if="emailAuth.showVerification" class="email-verification-form">
+              <p>
+                На ваш email <strong>{{ emailAuth.verificationEmail }}</strong> отправлен код
+                подтверждения.
+              </p>
+              <div class="email-form-container">
+                <input
+                  v-model="emailAuth.verificationCode"
+                  type="text"
+                  placeholder="Введите код верификации"
+                  maxlength="6"
+                  class="email-input"
+                />
+                <button
+                  class="send-email-btn"
+                  :disabled="emailAuth.isVerifying"
+                  @click="verifyEmailCode"
+                >
+                  {{ emailAuth.isVerifying ? 'Проверка...' : 'Подтвердить' }}
+                </button>
+              </div>
+              <button class="cancel-btn" @click="cancelEmailAuth">Отмена</button>
+            </div>
+
+            <!-- Форма для Telegram верификации -->
+            <div v-if="telegramAuth.showVerification" class="verification-block">
+              <div class="verification-code">
+                <span>Код верификации:</span>
+                <code @click="copyCode(telegramAuth.verificationCode)">{{
+                  telegramAuth.verificationCode
+                }}</code>
+                <span v-if="codeCopied" class="copied-message">Скопировано!</span>
+              </div>
+              <a :href="telegramAuth.botLink" target="_blank" class="bot-link"
+                >Открыть бота Telegram</a
+              >
+              <button class="cancel-btn" @click="cancelTelegramAuth">Отмена</button>
+            </div>
+          </div>
+
+          <!-- Блок баланса токенов -->
+          <div v-if="isAuthenticated && auth.address?.value" class="token-balances">
+            <h3>Баланс токенов:</h3>
+            <div class="token-balance">
+              <span class="token-name">ETH:</span>
+              <span class="token-amount">{{ Number(tokenBalances.eth).toLocaleString() }}</span>
+              <span class="token-symbol">{{ TOKEN_CONTRACTS.eth.symbol }}</span>
+            </div>
+            <div class="token-balance">
+              <span class="token-name">BSC:</span>
+              <span class="token-amount">{{ Number(tokenBalances.bsc).toLocaleString() }}</span>
+              <span class="token-symbol">{{ TOKEN_CONTRACTS.bsc.symbol }}</span>
+            </div>
+            <div class="token-balance">
+              <span class="token-name">ARB:</span>
+              <span class="token-amount">{{
+                Number(tokenBalances.arbitrum).toLocaleString()
+              }}</span>
+              <span class="token-symbol">{{ TOKEN_CONTRACTS.arbitrum.symbol }}</span>
+            </div>
+            <div class="token-balance">
+              <span class="token-name">POL:</span>
+              <span class="token-amount">{{ Number(tokenBalances.polygon).toLocaleString() }}</span>
+              <span class="token-symbol">{{ TOKEN_CONTRACTS.polygon.symbol }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount } from 'vue';
-import { useAuth } from '../composables/useAuth';
-import { connectWithWallet } from '../services/wallet';
-import axios from 'axios';
-import api from '../api/axios';
-import DOMPurify from 'dompurify';
-import { marked } from 'marked';
-import '../assets/styles/home.css';
-import { fetchTokenBalances, TOKEN_CONTRACTS } from '../services/tokens';
+  import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount } from 'vue';
+  import { useAuth } from '../composables/useAuth';
+  import { connectWithWallet } from '../services/wallet';
+  import axios from 'axios';
+  import api from '../api/axios';
+  import DOMPurify from 'dompurify';
+  import { marked } from 'marked';
+  import '../assets/styles/home.css';
+  import { fetchTokenBalances, TOKEN_CONTRACTS } from '../services/tokens';
 
-console.log('HomeView.vue: Оптимизированная версия с чатом');
+  console.log('HomeView.vue: Оптимизированная версия с чатом');
 
-// =====================================================================
-// 1. ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
-// =====================================================================
+  // =====================================================================
+  // 1. ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
+  // =====================================================================
 
-/**
- * Проверяет доступность localStorage
- * @returns {boolean} - Доступен ли localStorage
- */
-const isLocalStorageAvailable = () => {
-  try {
-    const test = 'test';
-    window.localStorage.setItem(test, test);
-    window.localStorage.removeItem(test);
-    return true;
-  } catch (e) {
-    console.error('localStorage is not available:', e);
-    return false;
-  }
-};
+  /**
+   * Проверяет доступность localStorage
+   * @returns {boolean} - Доступен ли localStorage
+   */
+  const isLocalStorageAvailable = () => {
+    try {
+      const test = 'test';
+      window.localStorage.setItem(test, test);
+      window.localStorage.removeItem(test);
+      return true;
+    } catch (e) {
+      console.error('localStorage is not available:', e);
+      return false;
+    }
+  };
 
-/**
- * Получает данные из localStorage
- * @param {string} key - Ключ для получения
- * @param {any} defaultValue - Значение по умолчанию
- * @returns {any} - Полученное значение или значение по умолчанию
- */
-const getFromStorage = (key, defaultValue = null) => {
-  if (!isLocalStorageAvailable()) return defaultValue;
-  try {
-    return window.localStorage.getItem(key) || defaultValue;
-  } catch (e) {
-    console.error(`Error getting ${key} from localStorage:`, e);
-    return defaultValue;
-  }
-};
+  /**
+   * Получает данные из localStorage
+   * @param {string} key - Ключ для получения
+   * @param {any} defaultValue - Значение по умолчанию
+   * @returns {any} - Полученное значение или значение по умолчанию
+   */
+  const getFromStorage = (key, defaultValue = null) => {
+    if (!isLocalStorageAvailable()) return defaultValue;
+    try {
+      return window.localStorage.getItem(key) || defaultValue;
+    } catch (e) {
+      console.error(`Error getting ${key} from localStorage:`, e);
+      return defaultValue;
+    }
+  };
 
-/**
- * Сохраняет данные в localStorage
- * @param {string} key - Ключ для сохранения
- * @param {any} value - Значение для сохранения
- * @returns {boolean} - Успешно ли сохранено
- */
-const setToStorage = (key, value) => {
-  if (!isLocalStorageAvailable()) return false;
-  try {
-    window.localStorage.setItem(key, value);
-    return true;
-  } catch (e) {
-    console.error(`Error setting ${key} in localStorage:`, e);
-    return false;
-  }
-};
+  /**
+   * Сохраняет данные в localStorage
+   * @param {string} key - Ключ для сохранения
+   * @param {any} value - Значение для сохранения
+   * @returns {boolean} - Успешно ли сохранено
+   */
+  const setToStorage = (key, value) => {
+    if (!isLocalStorageAvailable()) return false;
+    try {
+      window.localStorage.setItem(key, value);
+      return true;
+    } catch (e) {
+      console.error(`Error setting ${key} in localStorage:`, e);
+      return false;
+    }
+  };
 
-/**
- * Удаляет данные из localStorage
- * @param {string} key - Ключ для удаления
- * @returns {boolean} - Успешно ли удалено
- */
-const removeFromStorage = (key) => {
-  if (!isLocalStorageAvailable()) return false;
-  try {
-    window.localStorage.removeItem(key);
-    return true;
-  } catch (e) {
-    console.error(`Error removing ${key} from localStorage:`, e);
-    return false;
-  }
-};
+  /**
+   * Удаляет данные из localStorage
+   * @param {string} key - Ключ для удаления
+   * @returns {boolean} - Успешно ли удалено
+   */
+  const removeFromStorage = (key) => {
+    if (!isLocalStorageAvailable()) return false;
+    try {
+      window.localStorage.removeItem(key);
+      return true;
+    } catch (e) {
+      console.error(`Error removing ${key} from localStorage:`, e);
+      return false;
+    }
+  };
 
-/**
- * Генерирует уникальный ID
- * @returns {string} - Уникальный ID
- */
-const generateUniqueId = () => {
-  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-};
+  /**
+   * Генерирует уникальный ID
+   * @returns {string} - Уникальный ID
+   */
+  const generateUniqueId = () => {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  };
 
-/**
- * Форматирует сообщение с поддержкой markdown
- * @param {string} text - Текст для форматирования
- * @returns {string} - Форматированный HTML
- */
-const formatMessage = (text) => {
-  if (!text) return '';
-  const rawHtml = marked.parse(text);
-  return DOMPurify.sanitize(rawHtml);
-};
+  /**
+   * Форматирует сообщение с поддержкой markdown
+   * @param {string} text - Текст для форматирования
+   * @returns {string} - Форматированный HTML
+   */
+  const formatMessage = (text) => {
+    if (!text) return '';
+    const rawHtml = marked.parse(text);
+    return DOMPurify.sanitize(rawHtml);
+  };
 
-/**
- * Форматирует время в человекочитаемый вид
- * @param {string} timestamp - Метка времени
- * @returns {string} - Форматированное время
- */
-const formatTime = (timestamp) => {
-  if (!timestamp) return '';
-  
-  try {
-    const date = new Date(timestamp);
-    
-    if (isNaN(date.getTime())) {
-      console.warn('Invalid timestamp:', timestamp);
+  /**
+   * Форматирует время в человекочитаемый вид
+   * @param {string} timestamp - Метка времени
+   * @returns {string} - Форматированное время
+   */
+  const formatTime = (timestamp) => {
+    if (!timestamp) return '';
+
+    try {
+      const date = new Date(timestamp);
+
+      if (isNaN(date.getTime())) {
+        console.warn('Invalid timestamp:', timestamp);
+        return '';
+      }
+
+      return date.toLocaleString([], {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    } catch (error) {
+      console.error('Error formatting time:', error, timestamp);
       return '';
     }
-    
-    return date.toLocaleString([], { 
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-  } catch (error) {
-    console.error('Error formatting time:', error, timestamp);
-    return '';
-  }
-};
-
-/**
- * Сокращает адрес кошелька
- * @param {string} address - Адрес кошелька
- * @returns {string} - Сокращенный адрес
- */
-const truncateAddress = (address) => {
-  if (!address) return '';
-  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
-};
-
-// =====================================================================
-// 2. СОСТОЯНИЯ (REFS)
-// =====================================================================
-
-// Основные состояния
-const auth = useAuth();
-const messages = ref([]);
-const newMessage = ref('');
-const messagesContainer = ref(null);
-const userLanguage = ref('ru');
-const isLoading = ref(false);
-const isConnecting = ref(false);
-const hasUserSentMessage = ref(getFromStorage('hasUserSentMessage') === 'true');
-const codeCopied = ref(false);
-const showWalletSidebar = ref(false);
-
-// Объединяем состояния для Telegram аутентификации
-const telegramAuth = ref({
-  showVerification: false,
-  verificationCode: '',
-  botLink: '',
-  checkInterval: null,
-  error: ''
-});
-
-// Объединяем состояния для Email аутентификации
-const emailAuth = ref({
-  showForm: false,
-  showVerification: false,
-  email: '',
-  verificationEmail: '',
-  verificationCode: '',
-  formatError: false,
-  isLoading: false,
-  isVerifying: false,
-  error: ''
-});
-
-// Состояния для уведомлений
-const notifications = ref({
-  successMessage: '',
-  showSuccess: false
-});
-
-// Состояния для пагинации и загрузки сообщений
-const messageLoading = ref({
-  isLoadingMore: false,
-  hasMoreMessages: false,
-  offset: 0,
-  limit: 30,
-  isInProgress: false,
-  isLinkingGuest: false
-});
-
-// Состояние для балансов токенов
-const tokenBalances = ref({
-  eth: '0',
-  bsc: '0',
-  arbitrum: '0',
-  polygon: '0'
-});
-
-// Переменная для хранения интервала обновления балансов
-let balanceUpdateInterval = null;
-
-// =====================================================================
-// 3. ВЫЧИСЛЯЕМЫЕ СВОЙСТВА (COMPUTED)
-// =====================================================================
-
-/**
- * Вычисляет, аутентифицирован ли пользователь
- */
-const isAuthenticated = computed(() => auth.isAuthenticated.value);
-
-/**
- * Получает ID гостевой сессии из localStorage
- */
-const guestIdValue = computed(() => {
-  return getFromStorage('guestId', '');
-});
-
-/**
- * Фильтрует идентификаторы, чтобы не показывать дубликаты
- */
-const filteredIdentities = computed(() => {
-  if (!auth.identities || !auth.identities.value) return [];
-  
-  return auth.identities.value.filter(identity => {
-    if (identity.provider === 'wallet' && auth.address?.value === identity.provider_id) {
-      return false;
-    }
-    if (identity.provider === 'telegram' && auth.telegramId?.value === identity.provider_id) {
-      return false;
-    }
-    if (identity.provider === 'email' && auth.email?.value === identity.provider_id) {
-      return false;
-    }
-    return true;
-  });
-});
-
-/**
- * Определяет, нужно ли загружать историю сообщений
- */
-const shouldLoadHistory = computed(() => {
-  return isAuthenticated.value || 
-    (getFromStorage('guestId') && getFromStorage('guestId').length > 0);
-});
-
-/**
- * Форматирует названия провайдеров идентификации
- * @param {string} provider - Тип провайдера
- * @returns {string} - Форматированное название
- */
-const formatIdentityProvider = (provider) => {
-  const providers = {
-    'wallet': 'Кошелек',
-    'email': 'Email',
-    'telegram': 'Telegram',
-    'guest': 'Гость'
   };
-  return providers[provider] || provider;
-};
 
-// =====================================================================
-// 4. ФУНКЦИИ РАБОТЫ С СООБЩЕНИЯМИ
-// =====================================================================
+  /**
+   * Сокращает адрес кошелька
+   * @param {string} address - Адрес кошелька
+   * @returns {string} - Сокращенный адрес
+   */
+  const truncateAddress = (address) => {
+    if (!address) return '';
+    return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
+  };
 
-/**
- * Загружает сообщения пользователя из истории
- * @param {Object} options - Опции загрузки
- */
-const loadMessages = async (options = {}) => {
-  const { silent = false, initial = false, authType = null } = options;
-  
-  if (messageLoading.value.isLoadingMore && !initial) return;
-  
-  try {
-    messageLoading.value.isLoadingMore = true;
-    messageLoading.value.isInProgress = true;
-    if (!silent) isLoading.value = true;
-    
-    console.log(`Загрузка истории сообщений${authType ? ` после ${authType} аутентификации` : ''}...`);
-    
-    // Если это загрузка после аутентификации, немного ждем для завершения привязки сообщений
-    if (authType) {
-      console.log(`Ожидание завершения привязки гостевых сообщений после ${authType} аутентификации...`);
-      
-      // Задержка для гарантии, что сервер успеет обработать сессию
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      
-      // Дополнительно проверяем, что процесс связывания сообщений завершился
-      if (messageLoading.value.isLinkingGuest) {
-        await new Promise(resolve => {
-          const checkInterval = setInterval(() => {
-            if (!messageLoading.value.isLinkingGuest) {
+  // =====================================================================
+  // 2. СОСТОЯНИЯ (REFS)
+  // =====================================================================
+
+  // Основные состояния
+  const auth = useAuth();
+  const messages = ref([]);
+  const newMessage = ref('');
+  const messagesContainer = ref(null);
+  const userLanguage = ref('ru');
+  const isLoading = ref(false);
+  const isConnecting = ref(false);
+  const hasUserSentMessage = ref(getFromStorage('hasUserSentMessage') === 'true');
+  const codeCopied = ref(false);
+  const showWalletSidebar = ref(false);
+
+  // Объединяем состояния для Telegram аутентификации
+  const telegramAuth = ref({
+    showVerification: false,
+    verificationCode: '',
+    botLink: '',
+    checkInterval: null,
+    error: '',
+  });
+
+  // Объединяем состояния для Email аутентификации
+  const emailAuth = ref({
+    showForm: false,
+    showVerification: false,
+    email: '',
+    verificationEmail: '',
+    verificationCode: '',
+    formatError: false,
+    isLoading: false,
+    isVerifying: false,
+    error: '',
+  });
+
+  // Состояния для уведомлений
+  const notifications = ref({
+    successMessage: '',
+    showSuccess: false,
+  });
+
+  // Состояния для пагинации и загрузки сообщений
+  const messageLoading = ref({
+    isLoadingMore: false,
+    hasMoreMessages: false,
+    offset: 0,
+    limit: 30,
+    isInProgress: false,
+    isLinkingGuest: false,
+  });
+
+  // Состояние для балансов токенов
+  const tokenBalances = ref({
+    eth: '0',
+    bsc: '0',
+    arbitrum: '0',
+    polygon: '0',
+  });
+
+  // Переменная для хранения интервала обновления балансов
+  let balanceUpdateInterval = null;
+
+  // =====================================================================
+  // 3. ВЫЧИСЛЯЕМЫЕ СВОЙСТВА (COMPUTED)
+  // =====================================================================
+
+  /**
+   * Вычисляет, аутентифицирован ли пользователь
+   */
+  const isAuthenticated = computed(() => auth.isAuthenticated.value);
+
+  /**
+   * Получает ID гостевой сессии из localStorage
+   */
+  const guestIdValue = computed(() => {
+    return getFromStorage('guestId', '');
+  });
+
+  /**
+   * Фильтрует идентификаторы, чтобы не показывать дубликаты
+   */
+  const filteredIdentities = computed(() => {
+    if (!auth.identities || !auth.identities.value) return [];
+
+    return auth.identities.value.filter((identity) => {
+      if (identity.provider === 'wallet' && auth.address?.value === identity.provider_id) {
+        return false;
+      }
+      if (identity.provider === 'telegram' && auth.telegramId?.value === identity.provider_id) {
+        return false;
+      }
+      if (identity.provider === 'email' && auth.email?.value === identity.provider_id) {
+        return false;
+      }
+      return true;
+    });
+  });
+
+  /**
+   * Определяет, нужно ли загружать историю сообщений
+   */
+  const shouldLoadHistory = computed(() => {
+    return (
+      isAuthenticated.value || (getFromStorage('guestId') && getFromStorage('guestId').length > 0)
+    );
+  });
+
+  /**
+   * Форматирует названия провайдеров идентификации
+   * @param {string} provider - Тип провайдера
+   * @returns {string} - Форматированное название
+   */
+  const formatIdentityProvider = (provider) => {
+    const providers = {
+      wallet: 'Кошелек',
+      email: 'Email',
+      telegram: 'Telegram',
+      guest: 'Гость',
+    };
+    return providers[provider] || provider;
+  };
+
+  // =====================================================================
+  // 4. ФУНКЦИИ РАБОТЫ С СООБЩЕНИЯМИ
+  // =====================================================================
+
+  /**
+   * Загружает сообщения пользователя из истории
+   * @param {Object} options - Опции загрузки
+   */
+  const loadMessages = async (options = {}) => {
+    const { silent = false, initial = false, authType = null } = options;
+
+    if (messageLoading.value.isLoadingMore && !initial) return;
+
+    try {
+      messageLoading.value.isLoadingMore = true;
+      messageLoading.value.isInProgress = true;
+      if (!silent) isLoading.value = true;
+
+      console.log(
+        `Загрузка истории сообщений${authType ? ` после ${authType} аутентификации` : ''}...`
+      );
+
+      // Если это загрузка после аутентификации, немного ждем для завершения привязки сообщений
+      if (authType) {
+        console.log(
+          `Ожидание завершения привязки гостевых сообщений после ${authType} аутентификации...`
+        );
+
+        // Задержка для гарантии, что сервер успеет обработать сессию
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+
+        // Дополнительно проверяем, что процесс связывания сообщений завершился
+        if (messageLoading.value.isLinkingGuest) {
+          await new Promise((resolve) => {
+            const checkInterval = setInterval(() => {
+              if (!messageLoading.value.isLinkingGuest) {
+                clearInterval(checkInterval);
+                resolve();
+              }
+            }, 100);
+
+            // Таймаут на всякий случай
+            setTimeout(() => {
               clearInterval(checkInterval);
               resolve();
-            }
-          }, 100);
-          
-          // Таймаут на всякий случай
-          setTimeout(() => {
-            clearInterval(checkInterval);
-            resolve();
-          }, 5000);
-        });
+            }, 5000);
+          });
+        }
+
+        console.log('Привязка сообщений завершена, загружаем историю...');
       }
-      
-      console.log('Привязка сообщений завершена, загружаем историю...');
-    }
-    
-    // Проверяем сессию перед загрузкой
-    if (!initial) {
-      try {
-        const sessionCheck = await axios.get('/api/auth/check');
-        if (!sessionCheck.data.authenticated && !shouldLoadHistory.value) {
-          console.warn('Пользователь не аутентифицирован, пропускаем загрузку истории');
+
+      // Проверяем сессию перед загрузкой
+      if (!initial) {
+        try {
+          const sessionCheck = await axios.get('/api/auth/check');
+          if (!sessionCheck.data.authenticated && !shouldLoadHistory.value) {
+            console.warn('Пользователь не аутентифицирован, пропускаем загрузку истории');
+            messageLoading.value.isLoadingMore = false;
+            messageLoading.value.isInProgress = false;
+            isLoading.value = false;
+            return;
+          }
+        } catch (error) {
+          console.error('Ошибка при проверке сессии:', error);
           messageLoading.value.isLoadingMore = false;
           messageLoading.value.isInProgress = false;
           isLoading.value = false;
           return;
         }
-      } catch (error) {
-        console.error('Ошибка при проверке сессии:', error);
-        messageLoading.value.isLoadingMore = false;
-        messageLoading.value.isInProgress = false;
-        isLoading.value = false;
-        return;
       }
-    }
-    
-    // Запрашиваем общее количество сообщений
-    const countResponse = await axios.get('/api/chat/history', {
-      params: { count_only: true }
-    });
-    
-    if (!countResponse.data.success) {
-      throw new Error('Не удалось получить количество сообщений');
-    }
-    
-    const totalMessages = countResponse.data.total || countResponse.data.count || 0;
-    console.log(`Всего сообщений в истории: ${totalMessages}`);
-    
-    // Рассчитываем смещение для получения последних сообщений
-    let effectiveOffset = messageLoading.value.offset;
-    if (messageLoading.value.offset === 0 && totalMessages > messageLoading.value.limit) {
-      effectiveOffset = Math.max(0, totalMessages - messageLoading.value.limit);
-    }
-    
-    // Получаем историю сообщений
-    const response = await axios.get('/api/chat/history', {
-      params: {
-        offset: effectiveOffset,
-        limit: messageLoading.value.limit
+
+      // Запрашиваем общее количество сообщений
+      const countResponse = await axios.get('/api/chat/history', {
+        params: { count_only: true },
+      });
+
+      if (!countResponse.data.success) {
+        throw new Error('Не удалось получить количество сообщений');
       }
-    });
-    
-    if (response.data.success) {
-      // Если это первая загрузка или после аутентификации, заменяем сообщения
-      if (messageLoading.value.offset === 0 || authType) {
-        messages.value = response.data.messages || [];
-        
-        // Очищаем локальное хранилище гостевых сообщений после аутентификации
-        if (authType) {
-  removeFromStorage('guestMessages');
-          removeFromStorage('guestId');
+
+      const totalMessages = countResponse.data.total || countResponse.data.count || 0;
+      console.log(`Всего сообщений в истории: ${totalMessages}`);
+
+      // Рассчитываем смещение для получения последних сообщений
+      let effectiveOffset = messageLoading.value.offset;
+      if (messageLoading.value.offset === 0 && totalMessages > messageLoading.value.limit) {
+        effectiveOffset = Math.max(0, totalMessages - messageLoading.value.limit);
+      }
+
+      // Получаем историю сообщений
+      const response = await axios.get('/api/chat/history', {
+        params: {
+          offset: effectiveOffset,
+          limit: messageLoading.value.limit,
+        },
+      });
+
+      if (response.data.success) {
+        // Если это первая загрузка или после аутентификации, заменяем сообщения
+        if (messageLoading.value.offset === 0 || authType) {
+          messages.value = response.data.messages || [];
+
+          // Очищаем локальное хранилище гостевых сообщений после аутентификации
+          if (authType) {
+            removeFromStorage('guestMessages');
+            removeFromStorage('guestId');
+          }
+        } else if (response.data.messages && response.data.messages.length) {
+          // Иначе добавляем к существующим
+          messages.value = [...messages.value, ...response.data.messages];
         }
-      } else if (response.data.messages && response.data.messages.length) {
-        // Иначе добавляем к существующим
-        messages.value = [...messages.value, ...response.data.messages];
-      }
-      
-      console.log(`Загружено ${messages.value.length} сообщений из истории`);
-      
-      // Обновляем смещение для следующей загрузки
-      messageLoading.value.offset = effectiveOffset + (response.data.messages?.length || 0);
-      
-      // Проверяем, есть ли еще сообщения для загрузки
-      messageLoading.value.hasMoreMessages = messageLoading.value.offset < totalMessages;
-      
-      // После загрузки сообщений считаем, что пользователь уже отправлял сообщения
-      if (messages.value.length > 0) {
-        hasUserSentMessage.value = true;
-        setToStorage('hasUserSentMessage', 'true');
-      }
-      
-      // Уведомляем о загрузке сообщений
-      if (authType) {
-        window.dispatchEvent(new CustomEvent('messages-updated', { 
-          detail: { count: messages.value.length } 
-        }));
-      }
-        
-      // Прокручиваем к последнему сообщению
+
+        console.log(`Загружено ${messages.value.length} сообщений из истории`);
+
+        // Обновляем смещение для следующей загрузки
+        messageLoading.value.offset = effectiveOffset + (response.data.messages?.length || 0);
+
+        // Проверяем, есть ли еще сообщения для загрузки
+        messageLoading.value.hasMoreMessages = messageLoading.value.offset < totalMessages;
+
+        // После загрузки сообщений считаем, что пользователь уже отправлял сообщения
+        if (messages.value.length > 0) {
+          hasUserSentMessage.value = true;
+          setToStorage('hasUserSentMessage', 'true');
+        }
+
+        // Уведомляем о загрузке сообщений
+        if (authType) {
+          window.dispatchEvent(
+            new CustomEvent('messages-updated', {
+              detail: { count: messages.value.length },
+            })
+          );
+        }
+
+        // Прокручиваем к последнему сообщению
         await nextTick();
         scrollToBottom();
-    }
-  } catch (error) {
-    console.error('Ошибка загрузки истории сообщений:', error);
-  } finally {
-    messageLoading.value.isLoadingMore = false;
-    messageLoading.value.isInProgress = false;
-    isLoading.value = false;
-  }
-};
-
-/**
- * Обрабатывает отправку сообщения
- * @param {string} text - Текст сообщения
- */
-const handleMessage = async (text) => {
-  if (!text.trim()) return;
-  
-  try {
-    // Создаем сообщение пользователя
-    const userMessageContent = text.trim();
-    const tempId = generateUniqueId();
-    
-    const userMessage = {
-      id: tempId,
-      content: userMessageContent,
-      sender_type: 'user',
-      role: 'user',
-      isLocal: true,
-      isGuest: !auth.isAuthenticated.value,
-      timestamp: new Date().toISOString()
-    };
-    
-    // Добавляем сообщение в чат
-    messages.value.push(userMessage);
-    
-    // Очищаем поле ввода
-    newMessage.value = '';
-    
-    // Прокручиваем к последнему сообщению
-    scrollToBottom();
-    
-    // Устанавливаем состояние загрузки
-    isLoading.value = true;
-    
-    try {
-      if (auth.isAuthenticated.value) {
-        // Отправляем сообщение как авторизованный пользователь
-        const response = await axios.post('/api/chat/message', {
-          message: userMessageContent,
-          language: userLanguage.value
-        });
-        
-        if (response.data.success) {
-          // Обновляем ID сообщения пользователя
-          const userMsgIndex = messages.value.findIndex(m => m.id === tempId);
-          if (userMsgIndex !== -1) {
-            messages.value[userMsgIndex].id = response.data.userMessage.id;
-            messages.value[userMsgIndex].isLocal = false;
-          }
-          
-          // Добавляем ответ ИИ
-          messages.value.push({
-            id: response.data.aiMessage.id,
-            content: response.data.aiMessage.content,
-            sender_type: 'assistant',
-            role: 'assistant',
-            timestamp: response.data.aiMessage.created_at
-          });
-          
-          // Прокручиваем к последнему сообщению
-          scrollToBottom();
-        }
-      } else {
-        // Отправляем сообщение как гость
-        console.log('Отправка гостевого сообщения:', userMessageContent);
-        
-        // Получаем или создаем идентификатор гостя
-        let guestId = getFromStorage('guestId');
-        if (!guestId) {
-          guestId = generateUniqueId();
-          setToStorage('guestId', guestId);
-        }
-        
-        const response = await axios.post('/api/chat/guest-message', {
-          content: userMessageContent,
-          guestId,
-          language: userLanguage.value
-        });
-        
-        if (response.data.success) {
-          console.log('Гостевое сообщение отправлено:', response.data);
-          
-          // Обновляем ID сообщения пользователя
-          const userMsgIndex = messages.value.findIndex(m => m.id === tempId);
-          if (userMsgIndex !== -1) {
-            messages.value[userMsgIndex].id = response.data.messageId;
-            messages.value[userMsgIndex].isLocal = false;
-          }
-          
-          // Сохраняем сообщение в localStorage
-          try {
-            const storedMessages = JSON.parse(getFromStorage('guestMessages', '[]'));
-            storedMessages.push({
-              id: response.data.messageId,
-              content: userMessageContent,
-              sender_type: 'user',
-              role: 'user',
-              isGuest: true,
-              timestamp: new Date().toISOString()
-            });
-            setToStorage('guestMessages', JSON.stringify(storedMessages));
-            setToStorage('hasUserSentMessage', 'true');
-            hasUserSentMessage.value = true;
-          } catch (storageError) {
-            console.error('Ошибка сохранения сообщения в localStorage:', storageError);
-          }
-          
-          // Показываем правую панель, если она скрыта
-          if (!showWalletSidebar.value) {
-            showWalletSidebar.value = true;
-              setToStorage('showWalletSidebar', 'true');
-          }
-        }
       }
     } catch (error) {
-      console.error('Ошибка отправки сообщения:', error);
-      
-      // Помечаем сообщение как ошибочное
-      const userMsgIndex = messages.value.findIndex(m => m.id === tempId);
-      if (userMsgIndex !== -1) {
-        messages.value[userMsgIndex].hasError = true;
-      }
-      
-      // Добавляем сообщение об ошибке в чат
-      messages.value.push({
-        id: `error-${Date.now()}`,
-        content: 'Произошла ошибка при отправке сообщения. Пожалуйста, попробуйте еще раз.',
-        sender_type: 'system',
-        role: 'system',
-        timestamp: new Date().toISOString()
-      });
-      scrollToBottom();
+      console.error('Ошибка загрузки истории сообщений:', error);
     } finally {
+      messageLoading.value.isLoadingMore = false;
+      messageLoading.value.isInProgress = false;
       isLoading.value = false;
     }
+  };
 
-    // После отправки сообщения возвращаем нормальный размер
+  /**
+   * Обрабатывает отправку сообщения
+   * @param {string} text - Текст сообщения
+   */
+  const handleMessage = async (text) => {
+    if (!text.trim()) return;
+
+    try {
+      // Создаем сообщение пользователя
+      const userMessageContent = text.trim();
+      const tempId = generateUniqueId();
+
+      const userMessage = {
+        id: tempId,
+        content: userMessageContent,
+        sender_type: 'user',
+        role: 'user',
+        isLocal: true,
+        isGuest: !auth.isAuthenticated.value,
+        timestamp: new Date().toISOString(),
+      };
+
+      // Добавляем сообщение в чат
+      messages.value.push(userMessage);
+
+      // Очищаем поле ввода
+      newMessage.value = '';
+
+      // Прокручиваем к последнему сообщению
+      scrollToBottom();
+
+      // Устанавливаем состояние загрузки
+      isLoading.value = true;
+
+      try {
+        if (auth.isAuthenticated.value) {
+          // Отправляем сообщение как авторизованный пользователь
+          const response = await axios.post('/api/chat/message', {
+            message: userMessageContent,
+            language: userLanguage.value,
+          });
+
+          if (response.data.success) {
+            // Обновляем ID сообщения пользователя
+            const userMsgIndex = messages.value.findIndex((m) => m.id === tempId);
+            if (userMsgIndex !== -1) {
+              messages.value[userMsgIndex].id = response.data.userMessage.id;
+              messages.value[userMsgIndex].isLocal = false;
+            }
+
+            // Добавляем ответ ИИ
+            messages.value.push({
+              id: response.data.aiMessage.id,
+              content: response.data.aiMessage.content,
+              sender_type: 'assistant',
+              role: 'assistant',
+              timestamp: response.data.aiMessage.created_at,
+            });
+
+            // Прокручиваем к последнему сообщению
+            scrollToBottom();
+          }
+        } else {
+          // Отправляем сообщение как гость
+          console.log('Отправка гостевого сообщения:', userMessageContent);
+
+          // Получаем или создаем идентификатор гостя
+          let guestId = getFromStorage('guestId');
+          if (!guestId) {
+            guestId = generateUniqueId();
+            setToStorage('guestId', guestId);
+          }
+
+          const response = await axios.post('/api/chat/guest-message', {
+            content: userMessageContent,
+            guestId,
+            language: userLanguage.value,
+          });
+
+          if (response.data.success) {
+            console.log('Гостевое сообщение отправлено:', response.data);
+
+            // Обновляем ID сообщения пользователя
+            const userMsgIndex = messages.value.findIndex((m) => m.id === tempId);
+            if (userMsgIndex !== -1) {
+              messages.value[userMsgIndex].id = response.data.messageId;
+              messages.value[userMsgIndex].isLocal = false;
+            }
+
+            // Сохраняем сообщение в localStorage
+            try {
+              const storedMessages = JSON.parse(getFromStorage('guestMessages', '[]'));
+              storedMessages.push({
+                id: response.data.messageId,
+                content: userMessageContent,
+                sender_type: 'user',
+                role: 'user',
+                isGuest: true,
+                timestamp: new Date().toISOString(),
+              });
+              setToStorage('guestMessages', JSON.stringify(storedMessages));
+              setToStorage('hasUserSentMessage', 'true');
+              hasUserSentMessage.value = true;
+            } catch (storageError) {
+              console.error('Ошибка сохранения сообщения в localStorage:', storageError);
+            }
+
+            // Показываем правую панель, если она скрыта
+            if (!showWalletSidebar.value) {
+              showWalletSidebar.value = true;
+              setToStorage('showWalletSidebar', 'true');
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Ошибка отправки сообщения:', error);
+
+        // Помечаем сообщение как ошибочное
+        const userMsgIndex = messages.value.findIndex((m) => m.id === tempId);
+        if (userMsgIndex !== -1) {
+          messages.value[userMsgIndex].hasError = true;
+        }
+
+        // Добавляем сообщение об ошибке в чат
+        messages.value.push({
+          id: `error-${Date.now()}`,
+          content: 'Произошла ошибка при отправке сообщения. Пожалуйста, попробуйте еще раз.',
+          sender_type: 'system',
+          role: 'system',
+          timestamp: new Date().toISOString(),
+        });
+        scrollToBottom();
+      } finally {
+        isLoading.value = false;
+      }
+
+      // После отправки сообщения возвращаем нормальный размер
+      setTimeout(() => {
+        const chatInput = document.querySelector('.chat-input');
+        const chatMessages = document.querySelector('.chat-messages');
+        if (chatInput) {
+          chatInput.classList.remove('focused');
+          if (!CSS.supports('selector(:has(div))') && chatMessages) {
+            chatMessages.style.bottom = '135px';
+          }
+        }
+      }, 100);
+    } catch (error) {
+      console.error('Непредвиденная ошибка в handleMessage:', error);
+      isLoading.value = false;
+    }
+  };
+
+  /**
+   * Прокручивает контейнер с сообщениями к последнему сообщению
+   */
+  const scrollToBottom = () => {
+    if (messagesContainer.value) {
+      setTimeout(() => {
+        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+      }, 100);
+    }
+  };
+
+  /**
+   * Очищает гостевые сообщения
+   */
+  const clearGuestMessages = () => {
+    removeFromStorage('guestMessages');
+    console.log('Гостевые сообщения очищены');
+    messages.value = messages.value.filter((m) => !m.isGuest);
+  };
+
+  /**
+   * Обрабатывает прокрутку контейнера с сообщениями
+   */
+  const handleScroll = async () => {
+    const element = messagesContainer.value;
+    if (
+      !messageLoading.value.isLoadingMore &&
+      messageLoading.value.hasMoreMessages &&
+      element.scrollTop === 0
+    ) {
+      await loadMessages();
+    }
+  };
+
+  /**
+   * Настраивает периодическую проверку новых сообщений
+   * @param {number} initialCount - Начальное количество сообщений
+   * @returns {Function} - Функция для очистки интервала
+   */
+  const setupMessagePolling = (initialCount) => {
+    console.log(`Настройка отслеживания сообщений с начальным количеством: ${initialCount}`);
+    let messageCheckInterval;
+
+    const clearMessagePolling = () => {
+      if (messageCheckInterval) {
+        clearInterval(messageCheckInterval);
+        messageCheckInterval = null;
+        console.log('Отслеживание сообщений остановлено');
+      }
+    };
+
+    // Очищаем предыдущий интервал, если он существует
+    clearMessagePolling();
+
+    // Создаем новый интервал для проверки сообщений
+    messageCheckInterval = setInterval(async () => {
+      try {
+        // Проверяем, есть ли новые сообщения
+        const newCountResponse = await axios.get('/api/chat/history?count_only=true');
+
+        if (newCountResponse.data.success) {
+          const newCount = newCountResponse.data.count;
+          console.log(`Проверка новых сообщений: ${newCount} / ${initialCount}`);
+
+          if (newCount > initialCount) {
+            console.log(`Обнаружены новые сообщения: ${newCount} > ${initialCount}`);
+
+            // Загружаем обновленные сообщения
+            await loadMessages({ silent: true });
+
+            // Останавливаем интервал после получения ответа
+            clearMessagePolling();
+          }
+        }
+      } catch (error) {
+        console.error('Ошибка при проверке новых сообщений:', error);
+        clearMessagePolling();
+      }
+    }, 2000); // Проверяем каждые 2 секунды
+
+    // Останавливаем интервал после 30 секунд в любом случае
     setTimeout(() => {
+      clearMessagePolling();
+    }, 30000);
+
+    return clearMessagePolling;
+  };
+
+  // =====================================================================
+  // 5. ФУНКЦИИ АУТЕНТИФИКАЦИИ
+  // =====================================================================
+
+  /**
+   * Обрабатывает аутентификацию через кошелек
+   */
+  const handleWalletAuth = async () => {
+    if (isConnecting.value) return;
+
+    isConnecting.value = true;
+    try {
+      const result = await connectWithWallet();
+      console.log('Результат подключения кошелька:', result);
+
+      if (result.success) {
+        if (auth.isAuthenticated.value) {
+          // Если пользователь уже авторизован, связываем кошелек с существующим аккаунтом
+          console.log('Связывание кошелька с существующим аккаунтом:', result.address);
+          const linkResult = await auth.linkIdentity('wallet', result.address);
+
+          if (linkResult.success) {
+            notifications.value.successMessage = 'Кошелек успешно подключен к вашему аккаунту!';
+            notifications.value.showSuccess = true;
+
+            // Скрываем сообщение через 3 секунды
+            setTimeout(() => {
+              notifications.value.showSuccess = false;
+            }, 3000);
+
+            // Обновляем данные авторизации и балансы
+            await auth.checkAuth();
+            startBalanceUpdates();
+          } else {
+            notifications.value.errorMessage = linkResult.error || 'Не удалось подключить кошелек';
+            notifications.value.showError = true;
+
+            // Скрываем сообщение через 3 секунды
+            setTimeout(() => {
+              notifications.value.showError = false;
+            }, 3000);
+          }
+        } else {
+          // Если пользователь не авторизован, выполняем обычную авторизацию через кошелек
+          const authResponse = await auth.checkAuth();
+
+          if (authResponse.authenticated && authResponse.authType === 'wallet') {
+            console.log('Кошелёк успешно подключен и аутентифицирован');
+
+            // Загружаем сообщения после аутентификации
+            await loadMessages({ authType: 'wallet' });
+
+            // Запускаем обновление балансов
+            startBalanceUpdates();
+          }
+        }
+
+        // Небольшая задержка перед сбросом состояния
+        setTimeout(() => {
+          isConnecting.value = false;
+        }, 500);
+        return;
+      } else {
+        console.error('Не удалось подключить кошелёк:', result.error);
+      }
+    } catch (error) {
+      console.error('Ошибка при подключении кошелька:', error);
+    }
+
+    isConnecting.value = false;
+  };
+
+  /**
+   * Обрабатывает аутентификацию через Telegram
+   */
+  const handleTelegramAuth = async () => {
+    try {
+      // Показываем окно верификации
+      telegramAuth.value.showVerification = true;
+      telegramAuth.value.error = '';
+
+      // Инициализируем процесс аутентификации через Telegram
+      const response = await axios.post('/api/auth/telegram/init');
+
+      if (response.data.success) {
+        telegramAuth.value.verificationCode = response.data.verificationCode;
+        telegramAuth.value.botLink = response.data.botLink;
+
+        // Создаем интервал для проверки состояния авторизации
+        telegramAuth.value.checkInterval = setInterval(async () => {
+          try {
+            const checkResponse = await auth.checkAuth();
+
+            // Получаем Telegram ID из проверки аутентификации
+            const telegramId = checkResponse.telegramId;
+
+            if (auth.isAuthenticated.value && telegramId) {
+              if (auth.authType.value !== 'telegram') {
+                // Если пользователь авторизован не через Telegram, связываем идентификаторы
+                console.log('Связывание Telegram с существующим аккаунтом:', telegramId);
+                const linkResult = await auth.linkIdentity('telegram', telegramId);
+
+                if (linkResult.success) {
+                  notifications.value.successMessage =
+                    'Telegram успешно подключен к вашему аккаунту!';
+                  notifications.value.showSuccess = true;
+
+                  setTimeout(() => {
+                    notifications.value.showSuccess = false;
+                  }, 3000);
+                } else {
+                  notifications.value.errorMessage =
+                    linkResult.error || 'Не удалось подключить Telegram';
+                  notifications.value.showError = true;
+
+                  setTimeout(() => {
+                    notifications.value.showError = false;
+                  }, 3000);
+                }
+              } else {
+                // Если новая аутентификация через Telegram
+                console.log('Telegram аутентификация успешна');
+
+                // Загружаем сообщения после аутентификации
+                await loadMessages({ authType: 'telegram' });
+              }
+
+              // Очищаем интервал и скрываем окно верификации
+              clearTelegramInterval();
+              telegramAuth.value.showVerification = false;
+              telegramAuth.value.verificationCode = '';
+            }
+          } catch (error) {
+            console.error('Ошибка при проверке аутентификации:', error);
+          }
+        }, 2000); // Проверяем каждые 2 секунды
+      } else {
+        telegramAuth.value.error =
+          response.data.error || 'Ошибка при инициализации авторизации Telegram';
+        telegramAuth.value.showVerification = false;
+      }
+    } catch (error) {
+      console.error('Ошибка инициализации Telegram аутентификации:', error);
+      telegramAuth.value.error = 'Произошла ошибка при инициализации аутентификации через Telegram';
+      telegramAuth.value.showVerification = false;
+    }
+  };
+
+  /**
+   * Очищает интервал проверки Telegram аутентификации
+   */
+  const clearTelegramInterval = () => {
+    if (telegramAuth.value.checkInterval) {
+      clearInterval(telegramAuth.value.checkInterval);
+      telegramAuth.value.checkInterval = null;
+      console.log('Интервал проверки Telegram авторизации очищен');
+    }
+  };
+
+  /**
+   * Отменяет процесс аутентификации через Telegram
+   */
+  const cancelTelegramAuth = () => {
+    clearTelegramInterval();
+    telegramAuth.value.showVerification = false;
+    telegramAuth.value.verificationCode = '';
+    telegramAuth.value.error = '';
+
+    console.log('Аутентификация Telegram отменена пользователем');
+  };
+
+  /**
+   * Инициирует процесс аутентификации через Email
+   */
+  const handleEmailAuth = async () => {
+    try {
+      console.log('Начало процесса аутентификации через Email');
+
+      // Показываем форму для ввода email
+      emailAuth.value.showForm = true;
+      emailAuth.value.showVerification = false;
+
+      // Очищаем поля и ошибки
+      emailAuth.value.email = '';
+      emailAuth.value.formatError = false;
+      emailAuth.value.error = '';
+
+      console.log('Форма Email отображена');
+    } catch (error) {
+      console.error('Ошибка инициализации Email аутентификации:', error);
+    }
+  };
+
+  /**
+   * Отправляет запрос на верификацию Email
+   */
+  const sendEmailVerification = async () => {
+    try {
+      emailAuth.value.formatError = false;
+      emailAuth.value.error = '';
+
+      // Проверяем формат email
+      if (!emailAuth.value.email || !emailAuth.value.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
+        emailAuth.value.formatError = true;
+        return;
+      }
+
+      emailAuth.value.isLoading = true;
+
+      // Отправляем запрос для инициализации email аутентификации
+      const response = await axios.post('/api/auth/email/init', { email: emailAuth.value.email });
+
+      console.log('Ответ инициализации Email:', response.data);
+
+      if (response.data.success) {
+        // Переключаем отображение формы
+        emailAuth.value.showForm = false;
+        emailAuth.value.showVerification = true;
+        emailAuth.value.verificationEmail = emailAuth.value.email;
+        emailAuth.value.verificationCode = '';
+
+        console.log(
+          'Отображаем форму ввода кода верификации для email:',
+          emailAuth.value.verificationEmail
+        );
+      } else {
+        emailAuth.value.error =
+          response.data.error || 'Ошибка инициализации аутентификации по email';
+        emailAuth.value.showForm = true;
+        emailAuth.value.showVerification = false;
+      }
+    } catch (error) {
+      console.error('Ошибка при запросе инициализации Email:', error);
+      if (error.response && error.response.data && error.response.data.error) {
+        emailAuth.value.error = error.response.data.error;
+      } else {
+        emailAuth.value.error = 'Ошибка при запросе кода подтверждения';
+      }
+      emailAuth.value.showForm = true;
+      emailAuth.value.showVerification = false;
+    } finally {
+      emailAuth.value.isLoading = false;
+    }
+  };
+
+  /**
+   * Проверяет введенный код верификации Email
+   */
+  const verifyEmailCode = async () => {
+    try {
+      emailAuth.value.error = '';
+
+      if (!emailAuth.value.verificationCode) {
+        emailAuth.value.error = 'Пожалуйста, введите код верификации';
+        return;
+      }
+
+      emailAuth.value.isVerifying = true;
+
+      const response = await axios.post('/api/auth/email/verify-code', {
+        email: emailAuth.value.verificationEmail,
+        code: emailAuth.value.verificationCode,
+      });
+
+      if (response.data.success) {
+        // Сбрасываем состояния форм email
+        emailAuth.value.showForm = false;
+        emailAuth.value.showVerification = false;
+
+        // Получаем текущее состояние аутентификации
+        const authResponse = await auth.checkAuth();
+
+        if (auth.isAuthenticated.value && emailAuth.value.verificationEmail) {
+          // Если пользователь уже авторизован, связываем email
+          if (auth.authType.value !== 'email') {
+            console.log(
+              'Связывание Email с существующим аккаунтом:',
+              emailAuth.value.verificationEmail
+            );
+            const linkResult = await auth.linkIdentity('email', emailAuth.value.verificationEmail);
+
+            if (linkResult.success) {
+              // Показываем сообщение об успехе
+              notifications.value.successMessage = `Email ${emailAuth.value.verificationEmail} успешно подключен к вашему аккаунту!`;
+              notifications.value.showSuccess = true;
+
+              // Скрываем сообщение через 3 секунды
+              setTimeout(() => {
+                notifications.value.showSuccess = false;
+              }, 3000);
+            } else {
+              notifications.value.errorMessage = linkResult.error || 'Не удалось подключить Email';
+              notifications.value.showError = true;
+
+              setTimeout(() => {
+                notifications.value.showError = false;
+              }, 3000);
+            }
+          } else {
+            // Показываем сообщение об успехе
+            notifications.value.successMessage = `Email ${emailAuth.value.verificationEmail} успешно подтвержден!`;
+            notifications.value.showSuccess = true;
+
+            // Скрываем сообщение через 3 секунды
+            setTimeout(() => {
+              notifications.value.showSuccess = false;
+            }, 3000);
+
+            // Загружаем сообщения после аутентификации
+            await loadMessages({ authType: 'email' });
+          }
+        } else {
+          // Если пользователь не был авторизован до этого
+          // Показываем сообщение об успехе
+          notifications.value.successMessage = `Email ${emailAuth.value.verificationEmail} успешно подтвержден!`;
+          notifications.value.showSuccess = true;
+
+          // Скрываем сообщение через 3 секунды
+          setTimeout(() => {
+            notifications.value.showSuccess = false;
+          }, 3000);
+
+          // Загружаем сообщения после аутентификации
+          await loadMessages({ authType: 'email' });
+        }
+      } else {
+        emailAuth.value.error = response.data.message || 'Неверный код верификации';
+      }
+    } catch (error) {
+      if (error.response && error.response.status === 400) {
+        emailAuth.value.error = error.response.data.error || 'Неверный код верификации';
+      } else {
+        emailAuth.value.error = 'Ошибка при проверке кода';
+        console.error('Ошибка проверки кода Email:', error);
+      }
+    } finally {
+      emailAuth.value.isVerifying = false;
+    }
+  };
+
+  /**
+   * Отменяет процесс аутентификации через Email
+   */
+  const cancelEmailAuth = () => {
+    emailAuth.value.showForm = false;
+    emailAuth.value.showVerification = false;
+    emailAuth.value.email = '';
+    emailAuth.value.verificationCode = '';
+    emailAuth.value.error = '';
+    emailAuth.value.formatError = false;
+  };
+
+  /**
+   * Выполняет выход из аккаунта
+   */
+  const disconnectWallet = async () => {
+    try {
+      console.log('Выполняется выход из системы...');
+
+      // Останавливаем обновление балансов
+      stopBalanceUpdates();
+
+      // Отправляем запрос на выход
+      await axios.post('/api/auth/logout');
+
+      // Обновляем состояние аутентификации локально
+      auth.isAuthenticated.value = false;
+      auth.address.value = null;
+      auth.authType.value = null;
+      auth.telegramId.value = null;
+      auth.email.value = null;
+
+      // Обновляем отображение UI
+      document.body.classList.remove('wallet-connected');
+
+      // Очищаем сообщения и состояния
+      messages.value = [];
+      messageLoading.value.offset = 0;
+      messageLoading.value.hasMoreMessages = true;
+
+      // Очищаем localStorage
+      removeFromStorage('guestMessages');
+      removeFromStorage('hasUserSentMessage');
+
+      console.log('Выход из системы выполнен успешно');
+    } catch (error) {
+      console.error('Ошибка при выходе из системы:', error);
+    }
+  };
+
+  /**
+   * Проверяет наличие идентификатора определенного типа
+   * @param {string} type - Тип идентификатора
+   * @returns {boolean} - Имеется ли идентификатор
+   */
+  const hasIdentityType = (type) => {
+    if (!auth.identities?.value) return false;
+    return auth.identities.value.some((identity) => identity.provider === type);
+  };
+
+  /**
+   * Получает значение идентификатора определенного типа
+   * @param {string} type - Тип идентификатора
+   * @returns {string|null} - Значение идентификатора
+   */
+  const getIdentityValue = (type) => {
+    if (!auth.identities?.value) return null;
+    const identity = auth.identities.value.find((identity) => identity.provider === type);
+    return identity ? identity.provider_id : null;
+  };
+
+  /**
+   * Отслеживает изменения в аутентификации
+   */
+  const watchAuthChanges = () => {
+    watch(
+      () => auth.isAuthenticated.value,
+      async (newValue, oldValue) => {
+        console.log('Изменение аутентификации:', {
+          from: oldValue,
+          to: newValue,
+          userId: auth.userId.value,
+          authType: auth.authType.value,
+        });
+
+        // Обновляем отображение аутентификации
+        updateAuthDisplay({
+          isAuthenticated: auth.isAuthenticated.value,
+          authType: auth.authType.value,
+          address: auth.address.value,
+          email: auth.email.value,
+          telegramId: auth.telegramId.value,
+          telegramUsername: auth.telegramUsername,
+        });
+
+        if (newValue && !oldValue) {
+          // Пользователь только что аутентифицировался
+          console.log(`Пользователь аутентифицирован через ${auth.authType.value}`);
+          await loadMessages({ authType: auth.authType.value });
+        } else if (!newValue && oldValue) {
+          // Пользователь вышел из системы
+          console.log('Пользователь вышел, сбрасываем сообщения');
+          messages.value = [];
+          messageLoading.value.offset = 0;
+          messageLoading.value.hasMoreMessages = true;
+        }
+      },
+      { immediate: true }
+    );
+  };
+
+  /**
+   * Обновляет отображение аутентификации в интерфейсе
+   * @param {Object} state - Состояние аутентификации
+   */
+  const updateAuthDisplay = (state) => {
+    console.log('Обновление отображения аутентификации:', state);
+
+    if (state.isAuthenticated) {
+      const authTypeLabels = {
+        wallet: 'Кошелек',
+        email: 'Email',
+        telegram: 'Telegram',
+      };
+
+      let authLabel = authTypeLabels[state.authType] || 'Аккаунт';
+      let authValue = '';
+
+      if (state.authType === 'wallet' && state.address) {
+        authValue = truncateAddress(state.address);
+        document.body.classList.add('wallet-connected');
+      } else if (state.authType === 'email' && state.email) {
+        authValue = state.email;
+      } else if (state.authType === 'telegram' && state.telegramUsername) {
+        authValue = state.telegramUsername;
+      } else if (state.authType === 'telegram' && state.telegramId) {
+        authValue = `ID: ${state.telegramId}`;
+      }
+
+      // Обновляем элементы интерфейса
+      const authDisplayEl = document.getElementById('auth-display');
+      if (authDisplayEl) {
+        authDisplayEl.innerHTML = `${authLabel}: <strong>${authValue}</strong>`;
+        authDisplayEl.style.display = 'inline-block';
+      }
+
+      const authButtonsEl = document.getElementById('auth-buttons');
+      if (authButtonsEl) {
+        authButtonsEl.style.display = 'none';
+      }
+
+      const logoutButtonEl = document.getElementById('logout-button');
+      if (logoutButtonEl) {
+        logoutButtonEl.style.display = 'inline-block';
+      }
+    } else {
+      document.body.classList.remove('wallet-connected');
+
+      const authDisplayEl = document.getElementById('auth-display');
+      if (authDisplayEl) {
+        authDisplayEl.style.display = 'none';
+      }
+
+      const authButtonsEl = document.getElementById('auth-buttons');
+      if (authButtonsEl) {
+        authButtonsEl.style.display = 'inline-block';
+      }
+
+      const logoutButtonEl = document.getElementById('logout-button');
+      if (logoutButtonEl) {
+        logoutButtonEl.style.display = 'none';
+      }
+    }
+  };
+
+  // =====================================================================
+  // 6. ФУНКЦИИ УПРАВЛЕНИЯ БАЛАНСАМИ
+  // =====================================================================
+
+  /**
+   * Обновляет балансы токенов
+   */
+  const updateBalances = async () => {
+    if (auth.isAuthenticated.value && auth.address?.value) {
+      try {
+        console.log('Запрос балансов для адреса:', auth.address.value);
+        const balances = await fetchTokenBalances();
+        console.log('Полученные балансы:', balances);
+
+        // Обновляем каждый баланс отдельно для реактивности
+        tokenBalances.value = {
+          eth: balances.eth || '0',
+          bsc: balances.bsc || '0',
+          arbitrum: balances.arbitrum || '0',
+          polygon: balances.polygon || '0',
+        };
+
+        console.log('Обновленные балансы в интерфейсе:', tokenBalances.value);
+      } catch (error) {
+        console.error('Ошибка при обновлении балансов:', error);
+      }
+    } else {
+      console.log('Пользователь не аутентифицирован или адрес не доступен');
+    }
+  };
+
+  /**
+   * Запускает периодическое обновление балансов
+   */
+  const startBalanceUpdates = () => {
+    // Обновляем балансы сразу
+    updateBalances();
+
+    // Обновляем балансы каждые 5 минут
+    balanceUpdateInterval = setInterval(updateBalances, 300000);
+  };
+
+  /**
+   * Останавливает периодическое обновление балансов
+   */
+  const stopBalanceUpdates = () => {
+    if (balanceUpdateInterval) {
+      clearInterval(balanceUpdateInterval);
+      balanceUpdateInterval = null;
+    }
+  };
+
+  /**
+   * Копирует код верификации в буфер обмена
+   * @param {string} code - Код для копирования
+   */
+  const copyCode = (code) => {
+    navigator.clipboard.writeText(code).then(() => {
+      codeCopied.value = true;
+      setTimeout(() => {
+        codeCopied.value = false;
+      }, 2000);
+    });
+  };
+
+  /**
+   * Переключает отображение боковой панели
+   */
+  const toggleWalletSidebar = () => {
+    showWalletSidebar.value = !showWalletSidebar.value;
+    setToStorage('showWalletSidebar', showWalletSidebar.value.toString());
+  };
+
+  /**
+   * Обрабатывает получение фокуса полем ввода
+   */
+  const handleFocus = () => {
+    const chatInput = document.querySelector('.chat-input');
+    const chatMessages = document.querySelector('.chat-messages');
+    if (chatInput) {
+      chatInput.classList.add('focused');
+      if (!CSS.supports('selector(:has(div))') && chatMessages) {
+        chatMessages.style.bottom = '235px';
+      }
+    }
+  };
+
+  /**
+   * Обрабатывает потерю фокуса полем ввода
+   */
+  const handleBlur = () => {
+    // Если сообщение непустое, оставляем расширенный вид
+    if (!newMessage.value.trim()) {
       const chatInput = document.querySelector('.chat-input');
       const chatMessages = document.querySelector('.chat-messages');
       if (chatInput) {
@@ -815,849 +1629,158 @@ const handleMessage = async (text) => {
           chatMessages.style.bottom = '135px';
         }
       }
-    }, 100);
-  } catch (error) {
-    console.error('Непредвиденная ошибка в handleMessage:', error);
-    isLoading.value = false;
-  }
-};
-
-/**
- * Прокручивает контейнер с сообщениями к последнему сообщению
- */
-const scrollToBottom = () => {
-  if (messagesContainer.value) {
-    setTimeout(() => {
-      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
-    }, 100);
-  }
-};
-
-/**
- * Очищает гостевые сообщения
- */
-const clearGuestMessages = () => {
-  removeFromStorage('guestMessages');
-  console.log('Гостевые сообщения очищены');
-  messages.value = messages.value.filter(m => !m.isGuest);
-};
-
-/**
- * Обрабатывает прокрутку контейнера с сообщениями
- */
-const handleScroll = async () => {
-  const element = messagesContainer.value;
-  if (
-    !messageLoading.value.isLoadingMore &&
-    messageLoading.value.hasMoreMessages &&
-    element.scrollTop === 0
-  ) {
-    await loadMessages();
-  }
-};
-
-/**
- * Настраивает периодическую проверку новых сообщений
- * @param {number} initialCount - Начальное количество сообщений
- * @returns {Function} - Функция для очистки интервала
- */
-const setupMessagePolling = (initialCount) => {
-  console.log(`Настройка отслеживания сообщений с начальным количеством: ${initialCount}`);
-  let messageCheckInterval;
-  
-  const clearMessagePolling = () => {
-    if (messageCheckInterval) {
-      clearInterval(messageCheckInterval);
-      messageCheckInterval = null;
-      console.log('Отслеживание сообщений остановлено');
     }
   };
-  
-  // Очищаем предыдущий интервал, если он существует
-  clearMessagePolling();
-  
-  // Создаем новый интервал для проверки сообщений
-  messageCheckInterval = setInterval(async () => {
-    try {
-      // Проверяем, есть ли новые сообщения
-      const newCountResponse = await axios.get('/api/chat/history?count_only=true');
-      
-      if (newCountResponse.data.success) {
-        const newCount = newCountResponse.data.count;
-        console.log(`Проверка новых сообщений: ${newCount} / ${initialCount}`);
-        
-        if (newCount > initialCount) {
-          console.log(`Обнаружены новые сообщения: ${newCount} > ${initialCount}`);
-          
-          // Загружаем обновленные сообщения
-          await loadMessages({ silent: true });
-            
-            // Останавливаем интервал после получения ответа
-            clearMessagePolling();
-        }
+
+  // =====================================================================
+  // 7. НАБЛЮДАТЕЛИ (WATCHERS)
+  // =====================================================================
+
+  // Наблюдаем за изменением адреса кошелька для обновления балансов
+  watch(
+    () => auth.address?.value,
+    (newAddress) => {
+      if (newAddress) {
+        console.log('Адрес кошелька изменился, обновляем балансы');
+        updateBalances();
       }
-    } catch (error) {
-      console.error('Ошибка при проверке новых сообщений:', error);
-      clearMessagePolling();
     }
-  }, 2000); // Проверяем каждые 2 секунды
-  
-  // Останавливаем интервал после 30 секунд в любом случае
-  setTimeout(() => {
-    clearMessagePolling();
-  }, 30000);
-  
-  return clearMessagePolling;
-};
+  );
 
-// =====================================================================
-// 5. ФУНКЦИИ АУТЕНТИФИКАЦИИ
-// =====================================================================
+  // Наблюдаем за изменениями в сообщениях для сортировки и прокрутки
+  watch(
+    () => messages.value.length,
+    (newLength) => {
+      if (newLength > 0) {
+        // Сортируем сообщения по дате/времени
+        messages.value.sort((a, b) => {
+          const dateA = new Date(a.timestamp || a.created_at);
+          const dateB = new Date(b.timestamp || b.created_at);
+          return dateA - dateB;
+        });
 
-/**
- * Обрабатывает аутентификацию через кошелек
- */
-const handleWalletAuth = async () => {
-  if (isConnecting.value) return;
-  
-  isConnecting.value = true;
-  try {
-    const result = await connectWithWallet();
-    console.log('Результат подключения кошелька:', result);
-    
-    if (result.success) {
-      if (auth.isAuthenticated.value) {
-        // Если пользователь уже авторизован, связываем кошелек с существующим аккаунтом
-        console.log('Связывание кошелька с существующим аккаунтом:', result.address);
-        const linkResult = await auth.linkIdentity('wallet', result.address);
-        
-        if (linkResult.success) {
-          notifications.value.successMessage = 'Кошелек успешно подключен к вашему аккаунту!';
-          notifications.value.showSuccess = true;
-          
-          // Скрываем сообщение через 3 секунды
-          setTimeout(() => {
-            notifications.value.showSuccess = false;
-          }, 3000);
-          
-          // Обновляем данные авторизации и балансы
-          await auth.checkAuth();
-          startBalanceUpdates();
-        } else {
-          notifications.value.errorMessage = linkResult.error || 'Не удалось подключить кошелек';
-          notifications.value.showError = true;
-          
-          // Скрываем сообщение через 3 секунды
-          setTimeout(() => {
-            notifications.value.showError = false;
-          }, 3000);
-        }
-      } else {
-        // Если пользователь не авторизован, выполняем обычную авторизацию через кошелек
-        const authResponse = await auth.checkAuth();
-        
-        if (authResponse.authenticated && authResponse.authType === 'wallet') {
-          console.log('Кошелёк успешно подключен и аутентифицирован');
-          
-          // Загружаем сообщения после аутентификации
-          await loadMessages({ authType: 'wallet' });
-          
-          // Запускаем обновление балансов
-          startBalanceUpdates();
-        }
+        // Прокручиваем к последнему сообщению
+        nextTick(() => {
+          scrollToBottom();
+        });
       }
-      
-      // Небольшая задержка перед сбросом состояния
-      setTimeout(() => {
-        isConnecting.value = false;
-      }, 500);
-      return;
-    } else {
-      console.error('Не удалось подключить кошелёк:', result.error);
     }
-  } catch (error) {
-    console.error('Ошибка при подключении кошелька:', error);
-  }
-  
-  isConnecting.value = false;
-};
+  );
 
-/**
- * Обрабатывает аутентификацию через Telegram
- */
-const handleTelegramAuth = async () => {
-  try {
-    // Показываем окно верификации
-    telegramAuth.value.showVerification = true;
-    telegramAuth.value.error = '';
-    
-    // Инициализируем процесс аутентификации через Telegram
-    const response = await axios.post('/api/auth/telegram/init');
-    
-    if (response.data.success) {
-      telegramAuth.value.verificationCode = response.data.verificationCode;
-      telegramAuth.value.botLink = response.data.botLink;
-      
-      // Создаем интервал для проверки состояния авторизации
-      telegramAuth.value.checkInterval = setInterval(async () => {
-        try {
-          const checkResponse = await auth.checkAuth();
-          
-          // Получаем Telegram ID из проверки аутентификации
-          const telegramId = checkResponse.telegramId;
-          
-          if (auth.isAuthenticated.value && telegramId) {
-            if (auth.authType.value !== 'telegram') {
-              // Если пользователь авторизован не через Telegram, связываем идентификаторы
-              console.log('Связывание Telegram с существующим аккаунтом:', telegramId);
-              const linkResult = await auth.linkIdentity('telegram', telegramId);
-              
-              if (linkResult.success) {
-                notifications.value.successMessage = 'Telegram успешно подключен к вашему аккаунту!';
-                notifications.value.showSuccess = true;
-                
-                setTimeout(() => {
-                  notifications.value.showSuccess = false;
-                }, 3000);
-              } else {
-                notifications.value.errorMessage = linkResult.error || 'Не удалось подключить Telegram';
-                notifications.value.showError = true;
-                
-                setTimeout(() => {
-                  notifications.value.showError = false;
-                }, 3000);
-              }
-            } else {
-              // Если новая аутентификация через Telegram
-              console.log('Telegram аутентификация успешна');
-              
-              // Загружаем сообщения после аутентификации
-              await loadMessages({ authType: 'telegram' });
-            }
-            
-            // Очищаем интервал и скрываем окно верификации
-            clearTelegramInterval();
-            telegramAuth.value.showVerification = false;
-            telegramAuth.value.verificationCode = '';
-          }
-        } catch (error) {
-          console.error('Ошибка при проверке аутентификации:', error);
-        }
-      }, 2000); // Проверяем каждые 2 секунды
-    } else {
-      telegramAuth.value.error = response.data.error || 'Ошибка при инициализации авторизации Telegram';
-      telegramAuth.value.showVerification = false;
-    }
-  } catch (error) {
-    console.error('Ошибка инициализации Telegram аутентификации:', error);
-    telegramAuth.value.error = 'Произошла ошибка при инициализации аутентификации через Telegram';
-    telegramAuth.value.showVerification = false;
-  }
-};
+  // =====================================================================
+  // 8. ЖИЗНЕННЫЙ ЦИКЛ КОМПОНЕНТА
+  // =====================================================================
 
-/**
- * Очищает интервал проверки Telegram аутентификации
- */
-const clearTelegramInterval = () => {
-  if (telegramAuth.value.checkInterval) {
-    clearInterval(telegramAuth.value.checkInterval);
-    telegramAuth.value.checkInterval = null;
-    console.log('Интервал проверки Telegram авторизации очищен');
-  }
-};
+  // При монтировании компонента
+  onMounted(async () => {
+    console.log('HomeView.vue: компонент загружен');
 
-/**
- * Отменяет процесс аутентификации через Telegram
- */
-const cancelTelegramAuth = () => {
-  clearTelegramInterval();
-  telegramAuth.value.showVerification = false;
-  telegramAuth.value.verificationCode = '';
-  telegramAuth.value.error = '';
-  
-  console.log('Аутентификация Telegram отменена пользователем');
-};
-
-/**
- * Инициирует процесс аутентификации через Email
- */
-const handleEmailAuth = async () => {
-  try {
-    console.log('Начало процесса аутентификации через Email');
-    
-    // Показываем форму для ввода email
-    emailAuth.value.showForm = true;
-    emailAuth.value.showVerification = false;
-    
-    // Очищаем поля и ошибки
-    emailAuth.value.email = '';
-    emailAuth.value.formatError = false;
-    emailAuth.value.error = '';
-    
-    console.log('Форма Email отображена');
-  } catch (error) {
-    console.error('Ошибка инициализации Email аутентификации:', error);
-  }
-};
-
-/**
- * Отправляет запрос на верификацию Email
- */
-const sendEmailVerification = async () => {
-  try {
-    emailAuth.value.formatError = false;
-    emailAuth.value.error = '';
-    
-    // Проверяем формат email
-    if (!emailAuth.value.email || !emailAuth.value.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
-      emailAuth.value.formatError = true;
-      return;
-    }
-    
-    emailAuth.value.isLoading = true;
-    
-    // Отправляем запрос для инициализации email аутентификации
-    const response = await axios.post('/api/auth/email/init', { email: emailAuth.value.email });
-    
-    console.log('Ответ инициализации Email:', response.data);
-    
-    if (response.data.success) {
-      // Переключаем отображение формы
-      emailAuth.value.showForm = false;
-      emailAuth.value.showVerification = true;
-      emailAuth.value.verificationEmail = emailAuth.value.email;
-      emailAuth.value.verificationCode = '';
-      
-      console.log('Отображаем форму ввода кода верификации для email:', emailAuth.value.verificationEmail);
-    } else {
-      emailAuth.value.error = response.data.error || 'Ошибка инициализации аутентификации по email';
-      emailAuth.value.showForm = true;
-      emailAuth.value.showVerification = false;
-    }
-  } catch (error) {
-    console.error('Ошибка при запросе инициализации Email:', error);
-    if (error.response && error.response.data && error.response.data.error) {
-      emailAuth.value.error = error.response.data.error;
-    } else {
-      emailAuth.value.error = 'Ошибка при запросе кода подтверждения';
-    }
-    emailAuth.value.showForm = true;
-    emailAuth.value.showVerification = false;
-  } finally {
-    emailAuth.value.isLoading = false;
-  }
-};
-
-/**
- * Проверяет введенный код верификации Email
- */
-const verifyEmailCode = async () => {
-  try {
-    emailAuth.value.error = '';
-    
-    if (!emailAuth.value.verificationCode) {
-      emailAuth.value.error = 'Пожалуйста, введите код верификации';
-      return;
-    }
-    
-    emailAuth.value.isVerifying = true;
-    
-    const response = await axios.post('/api/auth/email/verify-code', {
-      email: emailAuth.value.verificationEmail,
-      code: emailAuth.value.verificationCode
-    });
-    
-    if (response.data.success) {
-      // Сбрасываем состояния форм email
-      emailAuth.value.showForm = false;
-      emailAuth.value.showVerification = false;
-      
-      // Получаем текущее состояние аутентификации
-      const authResponse = await auth.checkAuth();
-      
-      if (auth.isAuthenticated.value && emailAuth.value.verificationEmail) {
-        // Если пользователь уже авторизован, связываем email
-        if (auth.authType.value !== 'email') {
-          console.log('Связывание Email с существующим аккаунтом:', emailAuth.value.verificationEmail);
-          const linkResult = await auth.linkIdentity('email', emailAuth.value.verificationEmail);
-          
-          if (linkResult.success) {
-            // Показываем сообщение об успехе
-            notifications.value.successMessage = `Email ${emailAuth.value.verificationEmail} успешно подключен к вашему аккаунту!`;
-            notifications.value.showSuccess = true;
-            
-            // Скрываем сообщение через 3 секунды
-            setTimeout(() => {
-              notifications.value.showSuccess = false;
-            }, 3000);
-          } else {
-            notifications.value.errorMessage = linkResult.error || 'Не удалось подключить Email';
-            notifications.value.showError = true;
-            
-            setTimeout(() => {
-              notifications.value.showError = false;
-            }, 3000);
-          }
-        } else {
-          // Показываем сообщение об успехе
-          notifications.value.successMessage = `Email ${emailAuth.value.verificationEmail} успешно подтвержден!`;
-          notifications.value.showSuccess = true;
-          
-          // Скрываем сообщение через 3 секунды
-          setTimeout(() => {
-            notifications.value.showSuccess = false;
-          }, 3000);
-          
-          // Загружаем сообщения после аутентификации
-          await loadMessages({ authType: 'email' });
-        }
-      } else {
-        // Если пользователь не был авторизован до этого
-        // Показываем сообщение об успехе
-        notifications.value.successMessage = `Email ${emailAuth.value.verificationEmail} успешно подтвержден!`;
-        notifications.value.showSuccess = true;
-        
-        // Скрываем сообщение через 3 секунды
-        setTimeout(() => {
-          notifications.value.showSuccess = false;
-        }, 3000);
-        
-        // Загружаем сообщения после аутентификации
-        await loadMessages({ authType: 'email' });
-      }
-    } else {
-      emailAuth.value.error = response.data.message || 'Неверный код верификации';
-    }
-  } catch (error) {
-    if (error.response && error.response.status === 400) {
-      emailAuth.value.error = error.response.data.error || 'Неверный код верификации';
-    } else {
-      emailAuth.value.error = 'Ошибка при проверке кода';
-      console.error('Ошибка проверки кода Email:', error);
-    }
-  } finally {
-    emailAuth.value.isVerifying = false;
-  }
-};
-
-/**
- * Отменяет процесс аутентификации через Email
- */
-const cancelEmailAuth = () => {
-  emailAuth.value.showForm = false;
-  emailAuth.value.showVerification = false;
-  emailAuth.value.email = '';
-  emailAuth.value.verificationCode = '';
-  emailAuth.value.error = '';
-  emailAuth.value.formatError = false;
-};
-
-/**
- * Выполняет выход из аккаунта
- */
-const disconnectWallet = async () => {
-  try {
-    console.log('Выполняется выход из системы...');
-    
-    // Останавливаем обновление балансов
-    stopBalanceUpdates();
-    
-    // Отправляем запрос на выход
-    await axios.post('/api/auth/logout');
-    
-    // Обновляем состояние аутентификации локально
-    auth.isAuthenticated.value = false;
-    auth.address.value = null;
-    auth.authType.value = null;
-    auth.telegramId.value = null;
-    auth.email.value = null;
-    
-    // Обновляем отображение UI
-    document.body.classList.remove('wallet-connected');
-    
-    // Очищаем сообщения и состояния
-    messages.value = [];
-    messageLoading.value.offset = 0;
-    messageLoading.value.hasMoreMessages = true;
-    
-    // Очищаем localStorage
-    removeFromStorage('guestMessages');
-    removeFromStorage('hasUserSentMessage');
-    
-    console.log('Выход из системы выполнен успешно');
-  } catch (error) {
-    console.error('Ошибка при выходе из системы:', error);
-  }
-};
-
-/**
- * Проверяет наличие идентификатора определенного типа
- * @param {string} type - Тип идентификатора
- * @returns {boolean} - Имеется ли идентификатор
- */
-const hasIdentityType = (type) => {
-  if (!auth.identities?.value) return false;
-  return auth.identities.value.some(identity => identity.provider === type);
-};
-
-/**
- * Получает значение идентификатора определенного типа
- * @param {string} type - Тип идентификатора
- * @returns {string|null} - Значение идентификатора
- */
-const getIdentityValue = (type) => {
-  if (!auth.identities?.value) return null;
-  const identity = auth.identities.value.find(identity => identity.provider === type);
-  return identity ? identity.provider_id : null;
-};
-
-/**
- * Отслеживает изменения в аутентификации
- */
-const watchAuthChanges = () => {
-  watch(() => auth.isAuthenticated.value, async (newValue, oldValue) => {
-    console.log('Изменение аутентификации:', { 
-      from: oldValue, 
-      to: newValue, 
-      userId: auth.userId.value, 
-      authType: auth.authType.value 
-    });
-    
-    // Обновляем отображение аутентификации
-    updateAuthDisplay({
+    // Проверяем состояние аутентификации
+    console.log('Состояние аутентификации при загрузке:', {
       isAuthenticated: auth.isAuthenticated.value,
       authType: auth.authType.value,
-      address: auth.address.value,
-      email: auth.email.value,
       telegramId: auth.telegramId.value,
-      telegramUsername: auth.telegramUsername
     });
-    
-    if (newValue && !oldValue) {
-      // Пользователь только что аутентифицировался
-      console.log(`Пользователь аутентифицирован через ${auth.authType.value}`);
-      await loadMessages({ authType: auth.authType.value });
-    } else if (!newValue && oldValue) {
-      // Пользователь вышел из системы
-      console.log('Пользователь вышел, сбрасываем сообщения');
-      messages.value = [];
-      messageLoading.value.offset = 0;
-      messageLoading.value.hasMoreMessages = true;
+
+    // Загружаем сохраненное состояние боковой панели
+    const savedSidebarState = getFromStorage('showWalletSidebar');
+    if (savedSidebarState !== null) {
+      showWalletSidebar.value = savedSidebarState === 'true';
+    } else {
+      // По умолчанию показываем панель
+      showWalletSidebar.value = true;
+      setToStorage('showWalletSidebar', 'true');
     }
-  }, { immediate: true });
-};
 
-/**
- * Обновляет отображение аутентификации в интерфейсе
- * @param {Object} state - Состояние аутентификации
- */
-const updateAuthDisplay = (state) => {
-  console.log('Обновление отображения аутентификации:', state);
-  
-  if (state.isAuthenticated) {
-    const authTypeLabels = {
-      'wallet': 'Кошелек',
-      'email': 'Email',
-      'telegram': 'Telegram'
-    };
-    
-    let authLabel = authTypeLabels[state.authType] || 'Аккаунт';
-    let authValue = '';
-    
-    if (state.authType === 'wallet' && state.address) {
-      authValue = truncateAddress(state.address);
-      document.body.classList.add('wallet-connected');
-    } else if (state.authType === 'email' && state.email) {
-      authValue = state.email;
-    } else if (state.authType === 'telegram' && state.telegramUsername) {
-      authValue = state.telegramUsername;
-    } else if (state.authType === 'telegram' && state.telegramId) {
-      authValue = `ID: ${state.telegramId}`;
+    // Запускаем отслеживание изменений аутентификации
+    watchAuthChanges();
+
+    // Устанавливаем обработчик скролла
+    if (messagesContainer.value) {
+      messagesContainer.value.addEventListener('scroll', handleScroll);
     }
-    
-    // Обновляем элементы интерфейса
-    const authDisplayEl = document.getElementById('auth-display');
-    if (authDisplayEl) {
-      authDisplayEl.innerHTML = `${authLabel}: <strong>${authValue}</strong>`;
-      authDisplayEl.style.display = 'inline-block';
-    }
-    
-    const authButtonsEl = document.getElementById('auth-buttons');
-    if (authButtonsEl) {
-      authButtonsEl.style.display = 'none';
-    }
-    
-    const logoutButtonEl = document.getElementById('logout-button');
-    if (logoutButtonEl) {
-      logoutButtonEl.style.display = 'inline-block';
-    }
-  } else {
-    document.body.classList.remove('wallet-connected');
-    
-    const authDisplayEl = document.getElementById('auth-display');
-    if (authDisplayEl) {
-      authDisplayEl.style.display = 'none';
-    }
-    
-    const authButtonsEl = document.getElementById('auth-buttons');
-    if (authButtonsEl) {
-      authButtonsEl.style.display = 'inline-block';
-    }
-    
-    const logoutButtonEl = document.getElementById('logout-button');
-    if (logoutButtonEl) {
-      logoutButtonEl.style.display = 'none';
-    }
-  }
-};
 
-// =====================================================================
-// 6. ФУНКЦИИ УПРАВЛЕНИЯ БАЛАНСАМИ
-// =====================================================================
+    // Загружаем историю сообщений
+    if (shouldLoadHistory.value) {
+      // Проверяем сессию пользователя
+      const { data: sessionData } = await api.get('/api/auth/check');
+      console.log('Проверка сессии:', sessionData);
 
-/**
- * Обновляет балансы токенов
- */
-const updateBalances = async () => {
-  if (auth.isAuthenticated.value && auth.address?.value) {
-    try {
-      console.log('Запрос балансов для адреса:', auth.address.value);
-      const balances = await fetchTokenBalances();
-      console.log('Полученные балансы:', balances);
-      
-      // Обновляем каждый баланс отдельно для реактивности
-      tokenBalances.value = {
-        eth: balances.eth || '0',
-        bsc: balances.bsc || '0',
-        arbitrum: balances.arbitrum || '0',
-        polygon: balances.polygon || '0'
-      };
-      
-      console.log('Обновленные балансы в интерфейсе:', tokenBalances.value);
-  } catch (error) {
-      console.error('Ошибка при обновлении балансов:', error);
-    }
-  } else {
-    console.log('Пользователь не аутентифицирован или адрес не доступен');
-  }
-};
+      if (!isAuthenticated.value && !sessionData.authenticated) {
+        // Загружаем гостевые сообщения из localStorage
+        try {
+          const storedMessages = getFromStorage('guestMessages');
+          if (storedMessages) {
+            const parsedMessages = JSON.parse(storedMessages);
+            if (parsedMessages.length > 0) {
+              console.log(`Найдено ${parsedMessages.length} сохраненных гостевых сообщений`);
 
-/**
- * Запускает периодическое обновление балансов
- */
-const startBalanceUpdates = () => {
-  // Обновляем балансы сразу
-  updateBalances();
-  
-  // Обновляем балансы каждые 5 минут
-  balanceUpdateInterval = setInterval(updateBalances, 300000);
-};
-
-/**
- * Останавливает периодическое обновление балансов
- */
-const stopBalanceUpdates = () => {
-  if (balanceUpdateInterval) {
-    clearInterval(balanceUpdateInterval);
-    balanceUpdateInterval = null;
-  }
-};
-
-/**
- * Копирует код верификации в буфер обмена
- * @param {string} code - Код для копирования
- */
-const copyCode = (code) => {
-  navigator.clipboard.writeText(code).then(() => {
-    codeCopied.value = true;
-    setTimeout(() => {
-      codeCopied.value = false;
-    }, 2000);
-  });
-};
-
-/**
- * Переключает отображение боковой панели
- */
-const toggleWalletSidebar = () => {
-  showWalletSidebar.value = !showWalletSidebar.value;
-  setToStorage('showWalletSidebar', showWalletSidebar.value.toString());
-};
-
-/**
- * Обрабатывает получение фокуса полем ввода
- */
-const handleFocus = () => {
-  const chatInput = document.querySelector('.chat-input');
-  const chatMessages = document.querySelector('.chat-messages');
-  if (chatInput) {
-    chatInput.classList.add('focused');
-    if (!CSS.supports('selector(:has(div))') && chatMessages) {
-      chatMessages.style.bottom = '235px';
-    }
-  }
-};
-
-/**
- * Обрабатывает потерю фокуса полем ввода
- */
-const handleBlur = () => {
-  // Если сообщение непустое, оставляем расширенный вид
-  if (!newMessage.value.trim()) {
-    const chatInput = document.querySelector('.chat-input');
-    const chatMessages = document.querySelector('.chat-messages');
-    if (chatInput) {
-      chatInput.classList.remove('focused');
-      if (!CSS.supports('selector(:has(div))') && chatMessages) {
-        chatMessages.style.bottom = '135px';
-      }
-    }
-  }
-};
-
-// =====================================================================
-// 7. НАБЛЮДАТЕЛИ (WATCHERS)
-// =====================================================================
-
-// Наблюдаем за изменением адреса кошелька для обновления балансов
-watch(() => auth.address?.value, (newAddress) => {
-  if (newAddress) {
-    console.log('Адрес кошелька изменился, обновляем балансы');
-    updateBalances();
-  }
-});
-
-// Наблюдаем за изменениями в сообщениях для сортировки и прокрутки
-watch(() => messages.value.length, (newLength) => {
-  if (newLength > 0) {
-    // Сортируем сообщения по дате/времени
-    messages.value.sort((a, b) => {
-      const dateA = new Date(a.timestamp || a.created_at);
-      const dateB = new Date(b.timestamp || b.created_at);
-      return dateA - dateB;
-    });
-    
-    // Прокручиваем к последнему сообщению
-    nextTick(() => {
-      scrollToBottom();
-    });
-  }
-});
-
-// =====================================================================
-// 8. ЖИЗНЕННЫЙ ЦИКЛ КОМПОНЕНТА
-// =====================================================================
-
-// При монтировании компонента
-onMounted(async () => {
-  console.log('HomeView.vue: компонент загружен');
-  
-  // Проверяем состояние аутентификации
-  console.log('Состояние аутентификации при загрузке:', {
-    isAuthenticated: auth.isAuthenticated.value,
-    authType: auth.authType.value,
-    telegramId: auth.telegramId.value
-  });
-
-  // Загружаем сохраненное состояние боковой панели
-  const savedSidebarState = getFromStorage('showWalletSidebar');
-  if (savedSidebarState !== null) {
-    showWalletSidebar.value = savedSidebarState === 'true';
-  } else {
-    // По умолчанию показываем панель
-    showWalletSidebar.value = true;
-    setToStorage('showWalletSidebar', 'true');
-  }
-  
-  // Запускаем отслеживание изменений аутентификации
-  watchAuthChanges();
-  
-  // Устанавливаем обработчик скролла
-  if (messagesContainer.value) {
-    messagesContainer.value.addEventListener('scroll', handleScroll);
-  }
-  
-  // Загружаем историю сообщений
-  if (shouldLoadHistory.value) {
-    // Проверяем сессию пользователя
-    const { data: sessionData } = await api.get('/api/auth/check');
-    console.log('Проверка сессии:', sessionData);
-    
-    if (!isAuthenticated.value && !sessionData.authenticated) {
-      // Загружаем гостевые сообщения из localStorage
-      try {
-        const storedMessages = getFromStorage('guestMessages');
-        if (storedMessages) {
-          const parsedMessages = JSON.parse(storedMessages);
-          if (parsedMessages.length > 0) {
-            console.log(`Найдено ${parsedMessages.length} сохраненных гостевых сообщений`);
-            
-            // Если пользователь не аутентифицирован, добавляем гостевые сообщения
-            if (!isAuthenticated.value) {
-              messages.value = [...messages.value, ...parsedMessages];
-              hasUserSentMessage.value = true;
-              setToStorage('hasUserSentMessage', 'true');
-            } else {
-              // Если пользователь аутентифицирован, удаляем гостевые сообщения
-              removeFromStorage('guestMessages');
+              // Если пользователь не аутентифицирован, добавляем гостевые сообщения
+              if (!isAuthenticated.value) {
+                messages.value = [...messages.value, ...parsedMessages];
+                hasUserSentMessage.value = true;
+                setToStorage('hasUserSentMessage', 'true');
+              } else {
+                // Если пользователь аутентифицирован, удаляем гостевые сообщения
+                removeFromStorage('guestMessages');
+              }
             }
           }
+        } catch (e) {
+          console.error('Ошибка загрузки сообщений из localStorage:', e);
         }
-      } catch (e) {
-        console.error('Ошибка загрузки сообщений из localStorage:', e);
+      }
+
+      // Загружаем историю сообщений, если пользователь аутентифицирован
+      if (isAuthenticated.value) {
+        await loadMessages({ initial: true });
       }
     }
-    
-    // Загружаем историю сообщений, если пользователь аутентифицирован
-    if (isAuthenticated.value) {
-      await loadMessages({ initial: true });
-    }
-  }
-  
-  // Добавляем слушатель события для загрузки истории чата
-  window.addEventListener('load-chat-history', () => loadMessages({ initial: true }));
-  
-  // Установка статуса отправленных сообщений
-  if (messages.value.length > 0) {
-    hasUserSentMessage.value = true;
-    setToStorage('hasUserSentMessage', 'true');
-  }
-  
-  // Проверяем аутентификацию для запуска обновления балансов
-  const cachedAuth = localStorage.getItem('authData');
-  if (!cachedAuth) {
-    const { data: sessionData } = await api.get('/api/auth/check');
-    
-    if (sessionData.authenticated && sessionData.authType === 'wallet') {
-      // Запускаем обновление балансов
-      startBalanceUpdates();
-    }
-  } else {
-    // Используем кэшированные данные
-    const authData = JSON.parse(cachedAuth);
-    if (authData.authenticated && authData.authType === 'wallet') {
-      startBalanceUpdates();
-    }
-  }
-  
-  // Прокручиваем к последнему сообщению
-  scrollToBottom();
-});
 
-// При размонтировании компонента
-onBeforeUnmount(() => {
-  // Очищаем обработчик скролла
-  if (messagesContainer.value) {
-    messagesContainer.value.removeEventListener('scroll', handleScroll);
-  }
-  
-  // Удаляем слушатель события загрузки истории чата
-  window.removeEventListener('load-chat-history', () => loadMessages({ initial: true }));
-  
-  // Останавливаем обновление балансов
-  stopBalanceUpdates();
+    // Добавляем слушатель события для загрузки истории чата
+    window.addEventListener('load-chat-history', () => loadMessages({ initial: true }));
 
-  // Очищаем интервал проверки Telegram
-  clearTelegramInterval();
-});
-</script>
\ No newline at end of file
+    // Установка статуса отправленных сообщений
+    if (messages.value.length > 0) {
+      hasUserSentMessage.value = true;
+      setToStorage('hasUserSentMessage', 'true');
+    }
+
+    // Проверяем аутентификацию для запуска обновления балансов
+    const cachedAuth = localStorage.getItem('authData');
+    if (!cachedAuth) {
+      const { data: sessionData } = await api.get('/api/auth/check');
+
+      if (sessionData.authenticated && sessionData.authType === 'wallet') {
+        // Запускаем обновление балансов
+        startBalanceUpdates();
+      }
+    } else {
+      // Используем кэшированные данные
+      const authData = JSON.parse(cachedAuth);
+      if (authData.authenticated && authData.authType === 'wallet') {
+        startBalanceUpdates();
+      }
+    }
+
+    // Прокручиваем к последнему сообщению
+    scrollToBottom();
+  });
+
+  // При размонтировании компонента
+  onBeforeUnmount(() => {
+    // Очищаем обработчик скролла
+    if (messagesContainer.value) {
+      messagesContainer.value.removeEventListener('scroll', handleScroll);
+    }
+
+    // Удаляем слушатель события загрузки истории чата
+    window.removeEventListener('load-chat-history', () => loadMessages({ initial: true }));
+
+    // Останавливаем обновление балансов
+    stopBalanceUpdates();
+
+    // Очищаем интервал проверки Telegram
+    clearTelegramInterval();
+  });
+</script>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index c917254..5f8ef63 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -45,8 +45,8 @@ export default defineConfig({
         changeOrigin: true,
         secure: false,
         credentials: true,
-        rewrite: (path) => path
-      }
-    }
+        rewrite: (path) => path,
+      },
+    },
   },
 });
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..fb57ccd
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+