/* css/mobile.css – мобильная вёрстка чата */

@media (max-width: 1024px) {

  html, body {
    height: 100%;
  }

  body {
    overflow-x: hidden;
  }

  /* Убираем боковые панели и нижний чат */
  .side_panel,
  .bottom_chat {
    display: none !important;
  }

  /* Центр – единственная колонка */
  .main {
    display: block;
    min-height: 100vh;
  }

  .center_panel {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Видеочат */
  .videochat {
    padding: 0 8px 16px;
    height: 100vh;
  }

  .videochat .container {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .filters {
    margin-bottom: 8px;
    /* height: 50vh; */
  }

  /* Блок с двумя камерами */
  .vi {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .vidos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 73.5vh;
  }

  .vi_line {
    display: none !important;
  }

  /* Карточки камер – две штуки одна под другой */
  .camera,
  .start {
    width: 100%;
  }

  .camera,
  .start,
  .booth {
    background: #050607;
    border-radius: 22px;
    /* padding: 4px; */
    position: relative;               /* для лоадера */
    height: 36vh;
    width: 100% !important;
  }

  /* Видео внутри карточек – фиксированное 16:9 */
  #video,
  #remoteVideo,
  .booth video {
    width: 100% !important;
    /* height: auto !important; */
    aspect-ratio: 16 / 9;
    display: block;
    border-radius: 18px;
    object-fit: cover;
  }

  /* Кнопка СТАРТ + онлайн под верхней камерой */
  .start .big-btn {
    margin-top: -46px;
    width: 75%;
  }

  .online__users {
    text-align: center;
    margin: 4px 0 2px;
    margin-top: -34px;
  }

  /* Лоадер по центру блока собеседника */
  .searching-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  /* Ряд кнопок внизу (4 штуки) */
  .control {
    margin-top: 10px;
    display: flex;
    gap: 8px;
  }

  /* Прячем "пригласить друга" и "пожаловаться" на мобиле */
  .control__3,
  .control__4 {
    display: none !important;
  }

  /* 4 основные кнопки в один ряд */
  .control__1,
  .control__2,
  .control__5,
  .control__6 {
    flex: 1 1 0;
    max-width: 25%;
    padding-bottom: 6vh;
  }

  /* Чат внизу справа тоже не нужен на мобиле */
  .chat_info {
    display: none !important;
  }
}