/* chatfx.css — переход список ⇄ переписка. Только телефон. Пара к js/chatfx.js.

   Что здесь есть и чего нарочно нет. Движение играет js через Web Animations — двумя простыми
   анимациями: полотно едет справа и проявляется, список одновременно гаснет. Никаких раскадровок,
   никаких морф по частям: прошлый заход разложил переписку на девять летящих кусков, и по факту это
   читалось как беспорядок. Простое движение одного слоя понятнее и дешевле.

   На широком экране нет вообще ничего: там список и переписка стоят рядом, диалог включается
   мгновенно. Ни классов, ни ожидания — по прямому указанию владельца.

   Классы (все ставит и снимает js):
     fx-hold — переписка открыта, но держится в кулисах, пока собирается;
     fx-over — полотно снято с потока и лежит поверх списка, список под ним виден;
     fx-run  — идёт перелёт: внутри полотна тишина, нажатия по нему не принимаются. */

/* Кулисы: переписка собирается, пока её не видно. visibility, а не display — скрытому через
   display элементу нельзя посчитать высоту, у ленты scrollHeight стал бы нулём и прокрутка к
   нижнему краю ушла бы в пустоту (в проекте на это уже наступали, см. довод в onOpened).
   С visibility раскладка считается полностью: за кулисами лента успевает встать на нижний край и
   расставить кадры по их пропорциям — приезжает готовое, а не собирается на глазах. */
body.fx-hold #chatpane{ visibility:hidden }

@media(max-width:760px){
  /* Приезжать надо НА список — значит на время перехода полотно ложится поверх, а список остаётся
     на экране. То же, что делает chat-fly в layout.css, но своим классом: тот живёт по таймеру
     showScreen, а нам нужно держать перекрытие от начала сборки до конца перелёта — сроки разные и
     заранее неизвестны. */
  body.fx-over #chatpane{ position:absolute; inset:0; z-index:20 }
  body.inchat.fx-over #sidebar{ display:flex }

  /* Полоса прокрутки ленты на телефоне не нужна, а мелькает. Браузер показывает её на каждую
     ПРОГРАММНУЮ прокрутку, а их при открытии переписки идёт несколько подряд: постановка на нижний
     край, удержание низа (pinMessagesToBottom), пересчёт запаса под полем ввода. Человек видит
     тонкую полосу справа на долю секунды, хотя пальцем ничего не крутил.
     Работы у неё тут тоже нет: длину истории она не показывает (лента подшивается по мере
     прокрутки), а тянуть её пальцем никто не станет. Скрываем в трёх нотациях — своя у Firefox,
     своя у старого Edge, своя у webkit. Сама прокрутка остаётся: скрыт только указатель. */
  #messages{ scrollbar-width:none; -ms-overflow-style:none }
  #messages::-webkit-scrollbar{ width:0; height:0; display:none }

  /* Тишина внутри полотна на время перелёта. Звёздочка тут по делу: внутри переписки десятки своих
     переходов и анимаций — кольцо загрузки, проявление картинки, спиннер у видео, подсветка
     нажатий, — перечислить их поимённо нельзя, новые добавлялись бы в список молча. Наши две
     анимации это не глушит: Web Animations не подчиняются css-объявлению animation. */
  body.fx-run #chatpane{ will-change:opacity, transform; pointer-events:none }
  body.fx-run #chatpane *{ animation:none !important; transition:none !important }

  /* Старая раскадровка наплыва больше не играет — её место занял перелёт из js. Сами keyframes и
     такты в chat.js нарочно оставлены: не доедет однажды этот лист до устройства — переход будет
     прежним, а не пропадёт вовсе. */
  body.chat-fly.chat-in #chatpane,
  body.chat-fly.chat-out #chatpane{ animation:none }
}

/* Просили покоя — переписка просто появляется; js в этом режиме не ставит ни кулис, ни классов, а
   правило стоит страховкой на случай повисшего класса. */
@media (prefers-reduced-motion: reduce){
  body.fx-hold #chatpane{ visibility:visible }
}