/* ═════ Sentos · Поведение под палец и раскладка на компьютере ═════
   Перенесено из прототипа newfront/chats.css.
   Палитра и общие примитивы — в base.css и app.css. */

/* Долгое нажатие на сообщение открывает наше меню, и системное
   выделение текста здесь только мешает: на iPhone оно подсвечивало
   синим половину экрана заодно с соседними пузырями.

   Запрет — только там, где нет мыши. На компьютере долгого нажатия не
   бывает (меню открывает правая кнопка), а выделить кусок текста
   мышью привычно и полезно. */
@media (hover: none) {
  /* Не только лента, а всё приложение: долгое нажатие на фото цепляло
     ближайший выделяемый текст — шапку, поле ввода — и растягивало
     выделение на весь экран, закрашивая его синим. */
  .messages,
  .messenger {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Фото и видео не перетаскиваются: долгое нажатие на них открывает
     меню сообщения, а iOS иначе поднимал бы картинку для переноса. */
  .messages img,
  .messages video {
    -webkit-user-drag: none;
  }

  /* Где выделять нужно: поля ввода и значения в карточке человека —
     логин, телефон, код безопасности их копируют. */
  .messenger input,
  .messenger textarea,
  .messenger [contenteditable="true"],
  .messenger .detail-value {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
}

/* ═════════════════════════ Телефон ═════════════════════════ */

@media (max-width: 759px) {
  .messenger {
    grid-template-areas: "sidebar";
  }

  /* На телефоне отдельных блоков-панелей нет: экран — это фон страницы,
     а на нём лежат поле поиска, строки, пузыри и нижняя панель. Панельный
     тон здесь только зря отделял бы экран от самого себя. */
  .panel { --panel-bg: var(--page); }

  /* Раз панели нет, то и «утонуть в ней» нечему: поиск, поле ввода,
     нижняя панель, отборы, пузыри и плашки дат лежат прямо на странице.
     В тёмной теме они светлее её и оттого читаются блоками; в светлой
     полевой серый темнее страницы и читается вмятиной. Поэтому на
     телефоне те же тона идут вверх, а не вниз: поле — белое, нажатое
     и плашки — на тон ниже белого. Внутри окон (они лежат вне .panel)
     всё остаётся как на компьютере. */
  .light .panel {
    --field: var(--panel);
    --field-strong: #f6f6f8;
    --composer-bg: var(--panel);
    --bubble-in: var(--panel);
  }

  /* Кроме белых групп: такая группа сама и есть панель, и плашки внутри
     неё идут вниз, как на компьютере. Иначе кружки иконок в настройках
     на белом пропадают. */
  .light .list-group { --field-strong: #ececee; }

  .sidebar,
  .chat,
  .profile {
    grid-area: sidebar;
  }

  .bottom-nav { display: flex; }

  /* Смена экранов — общее движение из app.css: вперёд приходящий
     выезжает справа на 28 точек и проявляется, уходящий гаснет, уходя
     влево; назад — зеркально. Здесь оно сделано переходами, а не
     анимацией: экраны переключает класс на #messenger, и направление
     выходит само — класс поставили, значит вперёд, сняли — назад.

     Уход — 110 мс, приход — 230 мс после паузы в 70: экраны почти не
     стоят друг на друге, и гаснущий не просвечивает сквозь приходящий.
     Прячется ушедший (visibility) с запасом, через 150 мс: занятый
     главный поток сдвигает начало перехода, и ровно в 110 мс экран
     бывал виден ещё на треть — исчезал хлопком. */
  .sidebar {
    transition:
      opacity 230ms ease 70ms,
      transform 230ms cubic-bezier(0.22, 1, 0.36, 1) 70ms;
  }

  .messenger.mobile-chat-open .sidebar {
    opacity: 0;
    transform: translateX(-28px);
    transition:
      opacity 110ms ease-in 0ms,
      transform 110ms cubic-bezier(0.4, 0, 1, 1) 0ms;
  }

  .chat {
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateX(28px);
    transition:
      opacity 110ms ease-in 0ms,
      transform 110ms cubic-bezier(0.4, 0, 1, 1) 0ms,
      visibility 0s linear 150ms;
  }

  .messenger.mobile-chat-open .chat {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 230ms ease 70ms,
      transform 230ms cubic-bezier(0.22, 1, 0.36, 1) 70ms,
      visibility 0s linear 0s;
  }

  /* Профиль — следующий экран после переписки: она уходит влево так же,
     как список уходит от неё. Прежде карточка возникала поверх
     переписки без проявления — сквозь полупрозрачную просвечивал чат.
     Теперь переписка к её приходу уже погасла. */
  .messenger.profile-open .chat {
    opacity: 0;
    transform: translateX(-28px);
    transition:
      opacity 110ms ease-in 0ms,
      transform 110ms cubic-bezier(0.4, 0, 1, 1) 0ms;
  }

  /* Видимость переключаем visibility, а не display: с display переход не
     играет вовсе — карточка просто возникает. */
  .profile {
    z-index: 20;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateX(28px);
    transition:
      opacity 110ms ease-in 0ms,
      transform 110ms cubic-bezier(0.4, 0, 1, 1) 0ms,
      visibility 0s linear 150ms;
  }

  .messenger.profile-open .profile {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 230ms ease 70ms,
      transform 230ms cubic-bezier(0.22, 1, 0.36, 1) 70ms,
      visibility 0s linear 0s;
  }

  .messages { padding-bottom: 4px; }
}

/* ═════════════════════════ Компьютер ═════════════════════════ */

@media (min-width: 760px) {
  .app-page {
    padding: 10px;
  }

  /* Колонка профиля есть всегда, просто в покое она нулевой ширины:
     иначе её появление — мгновенная перекладка сетки, а не движение. */
  .messenger {
    --profile-w: 320px;
    grid-template-columns: 340px minmax(0, 1fr) 0px;
    grid-template-areas: "sidebar chat profile";
    gap: 10px;
    height: calc(100dvh - 20px);
    transition: grid-template-columns 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .messenger.profile-open {
    grid-template-columns: 340px minmax(0, 1fr) var(--profile-w);
  }

  /* Пока колонка растёт, панель проявляется; отрицательный отступ съедает
     зазор сетки, чтобы у закрытого профиля не оставалось пустой полосы.
     Содержимому задана своя ширина — иначе оно перекладывалось бы на
     каждом кадре движения. */
  .profile {
    display: flex;
    margin-left: -10px;
    opacity: 0;
    visibility: hidden;
    transition:
      margin 320ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 140ms ease,
      visibility 0s linear 320ms;
  }

  .messenger.profile-open .profile {
    margin-left: 0;
    opacity: 1;
    visibility: visible;
    transition:
      margin 320ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms ease 120ms,
      visibility 0s linear 0s;
  }

  .profile-head,
  .profile-views { width: var(--profile-w); }

  .panel { border-radius: 28px; }

  .brand-row { display: flex; }
  .sidebar-head { display: none; }
  .chat-back { display: none; }

  .chat-row.is-active { background: var(--field); }

  .message { max-width: 64%; }

  .chat-head { padding: 10px 12px 8px; }

  /* Лента не растягивается на всю ширину монитора: длинные строки
     читать неудобно, а пузыри превращались в полосы во весь экран. */
  .composer {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
  }

  /* Та же ширина у ленты держится боковыми полями, а не max-width.
     Разница видна на свайпе-ответе: обрезает не край строки, а край
     прокручиваемого блока, и с max-width входящий пузырь — он прижат
     влево — исчезал посреди панели, где места ещё полно. С полями он
     уезжает в поле и дальше за край панели, как за край экрана на
     телефоне. Содержимое от этого не двигается: сумма поля и ленты
     та же. */
  .messages {
    padding: 12px max(18px, calc((100% - 820px) / 2)) 8px;
  }

  .composer { padding: 8px 14px 14px; }

  /* Пилюля стоит вне потока, поэтому её края привязаны к полям формы
     руками — а здесь поля другие. */
  .voice-bar {
    left: 14px;
    right: 29px;
    bottom: 14px;
  }
}

@media (min-width: 1280px) {
  .messenger {
    --profile-w: 340px;
    grid-template-columns: 360px minmax(0, 1fr) 0px;
  }

  .messenger.profile-open {
    grid-template-columns: 360px minmax(0, 1fr) var(--profile-w);
  }

  .message { max-width: 68%; }
}

/* ─────────────────────── Меньше движения ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .chat,
  .profile,
  .toast {
    transition-duration: 1ms;
    transition-delay: 0s;
  }
}