/* Переменные 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-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);
}

/* Общие стили для всех элементов */
* {
  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: var(--color-white);
}

/* Стили для монопространственных шрифтов (код, верификация) */
code, .verification-code code, .address {
  font-family: 'Courier New', Courier, monospace;
}

/* Унификация размеров шрифтов */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-md);
}

p {
  font-size: var(--font-size-md);
  line-height: 1.5;
}

input, textarea {
  font-size: var(--font-size-md);
}

/* Контейнеры */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-white);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0;
  padding: 0 20px;
  width: 100%;
  background-color: var(--color-white);
}

/* Адаптация контента при боковой панели */
.main-content.no-right-sidebar {
  margin-right: 190px;
}

.main-content:not(.no-right-sidebar) {
  margin-right: 190px;
}

/* Стили для контейнера чата */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: var(--spacing-lg) auto;
  min-height: 500px;
  max-width: 1150px;
  width: 100%;
  position: relative;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 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: calc(var(--chat-input-height, 80px) + 15px); /* Добавляем 15px отступа между сообщениями и полем ввода */
  transition: bottom var(--transition-normal);
}

/* Стили для сообщений */
.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;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-grey-light);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all var(--transition-normal);
  z-index: 10;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

.input-area {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
}

.chat-input textarea {
  flex: 1;
  border: none;
  resize: none;
  font-size: var(--font-size-md);
  line-height: 1.5;
  min-height: 24px;
  max-height: 120px; /* Ограничение высоты textarea */
  padding: 8px 0; /* Уменьшаем вертикальные отступы */
  outline: none;
  overflow-y: hidden; /* Убираем скролл, так как высота меняется динамически */
  height: auto; /* Позволяем высоте изменяться */
}

.chat-input textarea:focus {
  outline: none;
}

/* Контейнер для иконок */
.chat-icons {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
}

/* Стили для кнопок-иконок */
.chat-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-grey);
  padding: 0;
  position: relative;
}

.chat-icon-btn:hover {
  color: var(--color-primary);
  background-color: rgba(0, 0, 0, 0.05);
}

.chat-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Стили для кнопки отправки */
.chat-icon-btn.send-button {
  background-color: var(--color-primary);
  color: white;
  width: 36px;
  height: 36px;
}

.chat-icon-btn.send-button:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
  color: white;
  transform: scale(1.05);
}

.chat-icon-btn.send-button:disabled {
  background-color: #ccc;
  opacity: 0.7;
}

/* Стили для состояния записи */
.chat-icon-btn.recording {
  color: var(--color-danger);
  animation: pulse 1.5s infinite;
}

.chat-icon-btn.recording::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--color-danger);
  border-radius: 50%;
  top: 2px;
  right: 2px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Стили для области предпросмотра */
.attachment-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-grey-light);
  max-height: 100px; /* Ограничение высоты области превью */
  overflow-y: auto; /* Скролл для превью */
}

.preview-item {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--color-light);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  font-size: var(--font-size-sm);
}

.image-preview {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-right: 8px;
}

.audio-preview,
.video-preview,
.file-preview {
  display: flex;
  align-items: center;
  gap: 5px;
}

.remove-attachment-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}

/* Новый контейнер для действий чата */
.chat-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Стили для кнопок в чате */
.chat-buttons {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  padding-bottom: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
  box-sizing: border-box;
  align-items: center;
}

.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 .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);
}

/* Стили для заголовка */
.header {
  background: var(--color-white);
  padding: 15px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.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;
  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);
}

/* Медиа-запросы для адаптивности */
@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);
  }
}

/* Анимации */
@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;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}

/* Стили для основных кнопок */
.auth-buttons-container button[type="submit"],
.auth-buttons-container a[href*="telegram"] {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.auth-buttons-container button[type="submit"]:hover,
.auth-buttons-container a[href*="telegram"]:hover {
  background-color: var(--color-primary-dark);
}

/* Стили для кнопок отмены */
.auth-buttons-container button:not([type="submit"]) {
  background-color: var(--color-grey-light);
  color: var(--color-dark);
}

.auth-buttons-container button:not([type="submit"]):hover {
  background-color: #d9d9d9;
}

/* Стили для телеграм-ссылки */
.auth-buttons-container a[href*="telegram"] {
  background-color: var(--color-telegram);
}

.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%;
  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;
}

/* Стили для текста в формах */
.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;
  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;
}

/* Стили для квадратных кнопок (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);
}

/* Общие стили для форм */
.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);
}

/* Контейнер формы email */
.email-form-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}

/* Общие стили для инпутов */
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);
}

/* Общие стили для контейнеров */
.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);
}

/* Заголовки в блоках */
.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);
  }

  /* Общие стили для кнопок на мобильных */
  .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;
}