html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* Убираем скроллинг страницы */
}

.main-grid {
  display: grid;
  grid-template-columns: 400px 1fr; /* Левая и правая колонка */
  grid-template-rows: auto 1fr auto; /* Верхний, средний и нижний блок */
  height: 100%; /* Фиксированная высота страницы */
}

.top-block {
  grid-column: 1;
  grid-row: 1; /* Верхний блок в первой строке */
}

.chat {
  grid-column: 2; /* Чат во второй колонке */
  grid-row: 1 / span 3; /* Чат занимает всю высоту */
  overflow-y: auto; /* Включаем внутренний скроллер */
  height: 100%; /* Чат на больших экранах занимает всю высоту */
}

.bottom-block {
  grid-column: 1;
  grid-row: 3; /* Нижний блок остается внизу */
  margin-top: auto;
}

@media (max-width: 768px) {
  .main-grid {
      grid-template-columns: 1fr; /* Одна колонка */
      grid-template-rows: auto auto auto; /* Три строки */
  }

  .top-block {
      grid-row: 1; /* Верхний блок в первой строке */
  }

  .chat {
      grid-column: 1;
      grid-row: 2; /* Чат между верхним и нижним блоками */
      height: 50vh; /* Высота чата 50% от высоты экрана */
  }

  .bottom-block {
      grid-row: 3; /* Нижний блок остается внизу */
  }
}

.toast-center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
text-align: center;
margin: 0;
}

.hidden-element {
  display: none;
}