/* ============================================================
   MOBILE — стили для мобильной версии
   Подключается последним в templates/index.html, после pages.css.

   Десктопный сайдбар (static/css/layout.css, .sidebar) на мобильном
   скрывается целиком — ни широкой, ни узкой версии меню там нет.
   Вместо него — новые элементы, которых нет на десктопе:
     .mobile-topbar — тонкая шапка (бургер + аватар/имя)
     .mobile-menu   — полноэкранное меню, раскрывается по бургеру
   Разметку рендерит layout/sidebar.js в #mobileNavContainer.

   .mobile-topbar/.mobile-menu скрыты по умолчанию (вне @media) —
   это безопасно: десктопных классов эти правила не касаются, элементы
   с такими именами больше нигде не существуют.
   ============================================================ */

#mobileNavContainer {
  display: none;
}

.mobile-topbar {
  display: none;
}

.mobile-menu {
  display: none;
}

/* Кнопка «назад» в шапке переписки (pages/chat, pages/dialogs) — на десктопе
   .dlg-thread__header её не имеет вообще, добавлена только в разметке этих
   двух страниц и скрыта здесь по умолчанию, см. блок ниже про .dlg. */
.dlg-thread__back-btn {
  display: none;
}

/* Мини-шапка треда «Чата» — у него, в отличие от «Диалогов», нет
   .dlg-thread__header на десктопе, поэтому кнопка «назад» + название
   комнаты идут отдельным блоком (см. pages/chat/ui.js). */
.dlg-thread__mobile-bar {
  display: none;
}

@media (max-width: 768px) {

  /* 100vh в мобильных браузерах — высота при СВЁРНУТОЙ адресной строке, то
     есть больше, чем реально видно в моменте загрузки. html/body становятся
     выше видимой области, страница получает собственный скролл — и поле
     ввода в низу .dlg-thread «уезжает» за нижний край экрана вместо того,
     чтобы быть прижатым к видимому низу. 100dvh (динамическая высота
     вьюпорта) считает реально видимую область; overflow:hidden на
     html/body — доп. страховка, весь скролл — только внутри выделенных
     зон (.dlg-thread__messages, .mobile-menu и т.п.), как на десктопе. */
  html, body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  /* десктопный сайдбар (widе/narrow) скрываем целиком */
  #sidebarContainer {
    display: none;
  }

  #appMain {
    /* sidebar.js::applyWidth() проставляет margin-left инлайн-стилем
       под десктопную ширину сайдбара — на мобильном её нет вообще */
    margin-left: 0 !important;
    margin-top: var(--mobile-topbar-h);
    height: calc(100vh - var(--mobile-topbar-h));
    height: calc(100dvh - var(--mobile-topbar-h));
  }

  /* Общий фиксированный контейнер шапки+меню — оба элемента лежат внутри
     одной flex-колонки, друг под другом, а не как два независимых
     position:fixed каждый сам по себе. На реальных мобильных браузерах
     (плавающая адресная строка) два отдельных fixed-блока с расчётом
     "top меню = высота шапки" могут разъезжаться визуально — меню
     начинает рисоваться чуть выше/ниже, и непрозрачная шапка перекрывает
     его первый пункт. Внутри общего контейнера меню просто идёт следующим
     элементом потока сразу после шапки — рассинхронизироваться нечему. */
  #mobileNavContainer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sidebar);
  }

  /* ----------------------------------------------------------
     TOPBAR — бургер слева, аватар + имя занимают остальное место
     ---------------------------------------------------------- */

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
    height: var(--mobile-topbar-h);
    padding: 0 var(--space-4);
    background: var(--color-bg-sidebar);
    border-bottom: 1px solid var(--color-border);
  }

  .mobile-topbar__burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  .mobile-topbar__burger-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--color-text-secondary);
  }

  .mobile-topbar__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    overflow: hidden;
  }

  .mobile-topbar__user-name {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ----------------------------------------------------------
     ПОЛНОЭКРАННОЕ МЕНЮ — всё под шапкой, до низа экрана.
     Разворачивается/сворачивается через анимацию height (не display) —
     0 → высота экрана за вычетом шапки, «шторкой» сверху вниз и обратно.
     ---------------------------------------------------------- */

  .mobile-menu {
    display: block; /* переопределяет display:none по умолчанию (десктоп) */
    flex-shrink: 0;
    height: 0;
    overflow: hidden;
    background: var(--color-bg-sidebar);
    transition: height var(--transition-slow);
  }

  .mobile-menu.is-open {
    height: calc(100vh - var(--mobile-topbar-h));
    height: calc(100dvh - var(--mobile-topbar-h));
    overflow-y: auto;
  }

  .mobile-menu__list {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu__item {
    position: relative;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .mobile-menu__link {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-7) var(--space-6);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
  }

  .mobile-menu__link:active {
    background: var(--color-bg-overlay);
  }

  .mobile-menu__item.is-active .mobile-menu__link {
    color: var(--color-accent);
    background: var(--color-accent-muted);
  }

  [data-theme="light"] .mobile-menu__item.is-active .mobile-menu__link {
    color: var(--color-active);
  }

  .mobile-menu__icon {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu__icon svg {
    width: 100%;
    height: 100%;
  }

  .mobile-menu__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--color-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--color-bg-sidebar);
  }

  /* ----------------------------------------------------------
     ЧАТ / ДИАЛОГИ — список ↔ переписка, как в мессенджерах.
     Обе панели рендерятся всегда (та же разметка, что на десктопе);
     здесь только переключение видимости + полная ширина вместо
     фиксированной колонки. .dlg--conversation-open проставляет
     JS страницы (pages/chat, pages/dialogs) при выборе комнаты/диалога.
     ---------------------------------------------------------- */

  /* Собственная шапка страницы «Чат» (просто надпись «Чат») занимает место
     и дублирует смысл — на мобильном и так ясно, что это чат; список
     комнат/переписка начинаются сразу под общей мобильной шапкой. */
  body[data-page="chat"] .page-header {
    display: none;
  }

  .dlg-list,
  .dlg-thread-wrap {
    width: 100%;
  }

  .dlg:not(.dlg--conversation-open) .dlg-thread-wrap {
    display: none;
  }

  .dlg.dlg--conversation-open .dlg-list {
    display: none;
  }

  .dlg-thread__back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
  }

  .dlg-thread__back-btn svg {
    width: 20px;
    height: 20px;
  }

  .dlg-thread__mobile-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
  }

  .dlg-thread__mobile-title {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Композер — крупнее под тач: .dlg-composer сидит в конце flex-колонки
     .dlg-thread с flex-shrink:0, поэтому уже прижат к низу и не скроллится
     вместе с лентой сообщений (см. правку html/body/#appMain выше про dvh —
     без неё «прижат к низу» мог оказаться ниже реально видимой области). */
  .dlg-composer {
    padding: var(--space-5);
  }

  .dlg-composer__input {
    padding: var(--space-4) var(--space-5);
    min-height: 44px;
    font-size: var(--text-md);
  }

  .dlg-composer__attach,
  .dlg-composer__send {
    width: 40px;
    height: 40px;
  }

  .dlg-composer__attach svg,
  .dlg-composer__send svg {
    width: 18px;
    height: 18px;
  }
}