/* Дополнительные исправления для адаптивности */

/* Исправление для промежуточных размеров окна браузера */
@media (min-width: 900px) and (max-width: 1180px) {
  .shell-body {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .chat-row {
    padding: 10px 12px;
    gap: 5px 8px;
  }

  .chat-row-avatar {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  .auth-layout {
    grid-template-columns: minmax(280px, 400px) minmax(280px, 1fr);
    gap: 20px;
  }

  .hero {
    padding: 28px 32px;
  }

  .hero h1 {
    font-size: 38px;
  }
}

/* Критические размеры для узких окон браузера */
@media (min-width: 800px) and (max-width: 899px) {
  .auth-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .shell-body {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .chat-workspace-head {
    flex-wrap: wrap;
    gap: 12px;
  }

  .chat-search {
    width: 100%;
  }

  .chat-search__input {
    max-width: 100%;
    flex: 1;
  }
}

/* Предотвращение наложения элементов */
@media (max-width: 1200px) {
  .shell-topbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .topbar-left,
  .topbar-actions {
    min-width: 0;
    flex-basis: auto;
  }

  .chat-workspace-head {
    flex-wrap: wrap;
  }

  .chat-workspace-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Фиксация переполнения текста */
* {
  min-width: 0;
  min-height: 0;
}

.topbar-title,
.topbar-subtitle,
.panel-title,
.panel-subtitle,
.chat-workspace-title,
.chat-workspace-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Адаптивное поведение кнопок */
@media (max-width: 1100px) {
  .compact {
    min-height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }

  .topbar-actions,
  .chat-workspace-actions {
    gap: 8px;
  }
}

/* Исправление для очень узких окон */
@media (max-width: 700px) {
  .auth-card {
    padding: 20px;
  }

  .qr-frame {
    width: min(100%, 220px);
    margin: 20px auto 16px;
  }

  .hero {
    padding: 24px 28px;
  }

  .hero h1 {
    font-size: 30px;
  }
}

/* Обеспечение правильного масштабирования viewport */
@media (max-width: 1024px) {
  html {
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
    min-width: 320px;
  }

  .shell {
    overflow-x: hidden;
    max-width: 100vw;
  }
}