/* web-layout.css */

@media (min-width: 900px) {
  /* Применяем десктопный макет ТОЛЬКО если НЕ включён принудительный мобильный режим */
  body:not(.force-mobile) {
    background: #d9dbdc;
  }

  body:not(.force-mobile) .container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh;
    max-width: none;
    background: #d9dbdc;
  }

  /* Левая панель: список чатов */
  body:not(.force-mobile) #chatListScreen {
    flex: 0 0 350px;
    flex-direction: column;
    height: 100vh;
    border-right: 1px solid #e6e6e6;
    background: #ffffff;
    position: relative;
    display: flex !important;
  }

  /* Правая панель: чат */
  body:not(.force-mobile) #chatScreen {
    flex: 1;
    flex-direction: column;
    height: 100vh;
    background: #efeae2;
    display: flex !important;
    min-width: 0;
  }

  /* ЕДИНАЯ ВЫСОТА HEADER = 64px (в т.ч. поиск — переопределяет padding из styles.css) */
  body:not(.force-mobile) #chatListScreen .header,
  body:not(.force-mobile) #searchScreen .header,
  body:not(.force-mobile) #chatScreen .header {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
    box-sizing: border-box;
  }

  /* Поле поиска — ограничить высоту, чтобы шапка не растягивалась */
  body:not(.force-mobile) #searchScreen .header input {
    min-height: 0;
    height: 36px;
  }

  /* Для списка чатов и поиска — padding уже задан выше */
  /* Для чата — padding уже задан выше */

  /* Панель выбора — та же высота 64px, что и шапка */
  body:not(.force-mobile) #chatScreen .selection-action-bar {
    height: 64px;
    padding: 0 16px;
  }

  /* Скрыть кнопку "назад" в десктопной версии */
  body:not(.force-mobile) #chatScreen .header i.fa-arrow-left {
    display: none !important;
  }

  /* Кнопка "+" в левой панели */
  body:not(.force-mobile) #createChatButton {
    display: flex !important;
    position: fixed !important;
    left: calc(350px - 56px - 20px) !important;
    right: auto !important;
    bottom: 20px !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 20;
  }

  body:not(.force-mobile) .messages {
    max-height: none;
    /* padding-bottom не задаём — отступ до поля ввода в React (important) + index.html */
  }

  body:not(.force-mobile) .input-area {
    position: sticky;
    bottom: 0;
  }

  /* Правая панель: информация о контакте — та же ширина, что и список чатов (350px) */
  body:not(.force-mobile) #contactInfoScreen {
    flex: 0 0 350px;
    flex-shrink: 0;
    flex-direction: column;
    height: 100vh;
    border-left: 1px solid #e6e6e6;
    background: #ffffff;
    min-width: 0;
  }

  body:not(.force-mobile) #contactInfoScreen .contact-info-container {
    flex: 1;
    min-height: 0;
  }

  /* Единая высота header для информации о контакте */
  body:not(.force-mobile) #contactInfoScreen .header {
    height: 64px;
    padding: 0 16px;
    box-sizing: border-box;
    align-items: center;
  }

  /* Галерея медиа — та же ширина 350px, что и информация о контакте */
  body:not(.force-mobile) #mediaGalleryScreen {
    flex: 0 0 350px;
    flex-shrink: 0;
    flex-direction: column;
    height: 100vh;
    border-left: 1px solid #e6e6e6;
    background: #ffffff;
    min-width: 0;
  }

  body:not(.force-mobile) #mediaGalleryScreen .media-header {
    height: 64px;
    padding: 0 16px;
    box-sizing: border-box;
    align-items: center;
  }

  /* Когда показаны медиа-экраны — скрыть панель информации о контакте */
  body:not(.force-mobile).media-panel-active #contactInfoScreen {
    display: none !important;
  }

  /* Скрыть панель контакта/медиа при возврате в чат (остаётся список + чат) */
  body:not(.force-mobile).contact-panel-hidden #contactInfoScreen,
  body:not(.force-mobile).contact-panel-hidden #mediaGalleryScreen {
    display: none !important;
  }
}

/* === Принудительный мобильный режим (работает на ЛЮБОМ экране) === */
body.force-mobile .container {
  max-width: 400px !important;
  margin: 0 auto !important;
  height: 100vh;
  display: flex !important;
  flex-direction: column !important;
}

body.force-mobile #chatListScreen,
body.force-mobile #chatScreen,
body.force-mobile #searchScreen,
body.force-mobile #contactInfoScreen {
  width: 100% !important;
  height: 100vh !important;
  display: none; /* будет управляться JS */
}

body.force-mobile #createChatButton {
  display: flex !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
}

/* === Единые шапки в мобильной версии — как в чате (64px = аватар 40px + padding 12px×2) === */
@media (max-width: 899px) {
  #chatListScreen .header,
  #searchScreen .header,
  #chatScreen .header,
  #chatScreen #chatHeader,
  #contactInfoScreen .header,
  #mediaGalleryScreen .header,
  #mediaGalleryScreen .media-header {
    min-height: 64px !important;
    height: 64px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
}

body.force-mobile #chatListScreen .header,
body.force-mobile #searchScreen .header,
body.force-mobile #chatScreen .header,
body.force-mobile #chatScreen #chatHeader,
body.force-mobile #contactInfoScreen .header,
body.force-mobile #mediaGalleryScreen .header,
body.force-mobile #mediaGalleryScreen .media-header {
  min-height: 64px !important;
  height: 64px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}