/* ===== Движение чатов (SPEC-MOTION §1, §4 «часть Б»). Подключается после motion.css ===== */
/* Токены — идентичны motion.css (дублируются, чтобы файл работал автономно) */
:root{
  --m-fast:160ms;--m-base:280ms;--m-slow:420ms;--m-page:360ms;
  --e-out:cubic-bezier(.22,1,.36,1);--e-in:cubic-bezier(.4,0,1,1);
  --e-spring:cubic-bezier(.34,1.36,.64,1);--e-std:cubic-bezier(.4,0,.2,1);
}
/* Ключевые кадры с префиксом c (копии mIn/mInScale/mOut/mDrop/mFadeUp/mPop по спецификации) */
@keyframes cIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cInScale{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
@keyframes cOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.96) translateY(6px)}}
@keyframes cDrop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cPop{0%{transform:scale(.6)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes cSlideR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes cSlideL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
/* специфичные для чатов */
@keyframes cSlideOutR{from{opacity:1;transform:none}to{opacity:0;transform:translateX(24px)}}
@keyframes cDropOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px)}}
@keyframes cItem{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes cFeed{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 1. Список чатов ---------- */
/* строки появляются один раз (класс ставит list.js только новым узлам и снимает по animationend) */
.ch-item.ch-enter{animation:cFadeUp 380ms var(--e-out) both;will-change:transform,opacity}
.ch-item.ch-flip{will-change:transform}
/* выбор чата: плавная смена заливки (узлы строк сохраняются между перерисовками) */
.ch-item{transition:background-color 200ms var(--e-std),color 200ms var(--e-std)}
.ch-item :is(.ch-name,.ch-time,.ch-tick,.ch-mute,.ch-pin,.ch-who,.ch-prev,.ch-badge){transition:color 200ms var(--e-std),background-color 200ms var(--e-std),opacity 200ms var(--e-std)}
.ch-badge.pop{animation:cPop 360ms var(--e-spring)}
/* вкладки списка: бегунок вместо фона активной вкладки */
.ch-tabs{position:relative}
.ch-tab{position:relative;z-index:1;transition:color var(--m-fast) var(--e-std),background-color var(--m-fast) var(--e-std),transform 120ms var(--e-out)}
.ch-tab:active{transform:scale(.97)}
.ch-tab.on,.ch-tab.on:hover{background:transparent}
.c-ind{position:absolute;left:0;top:0;width:64px;height:30px;margin:0;padding:0;border:0;border-radius:15px;pointer-events:none;z-index:0;opacity:0;transform-origin:0 0;
  background:color-mix(in srgb,var(--ch-accent,var(--accent)) 14%,transparent)}
.c-ind.go{transition:transform 380ms var(--e-spring),opacity var(--m-fast) var(--e-std);will-change:transform}
.ch-tabn{transition:background-color var(--m-fast) var(--e-std)}

/* ---------- 2. Лента ---------- */
/* входящее/исходящее: mInScale с origin у хвоста; --fe — отрицательная задержка, если перерисовка случилась посреди анимации */
.cm-msg.fresh{animation:none}
.cm-msg.fresh .cm-bubble{animation:cInScale 320ms var(--e-spring) both;animation-delay:var(--fe,0ms);transform-origin:left bottom}
.cm-msg.mine.fresh .cm-bubble{transform-origin:right bottom}
/* смена чата: лента проявляется */
.cm-scroll.feed-in{animation:cFeed 240ms var(--e-out) both}
.cm-scroll.feed-in .cm-date span,.cm-scroll.feed-in .cm-new{animation:none}
.cm-down{animation:cFadeUp var(--m-base) var(--e-out) both}
.cm-mini,.cm-ctx{animation:cDrop var(--m-base) var(--e-out) both;transform-origin:top}
.cm-chip{animation:none}
/* поле ввода: без анимации высоты; кнопка отправки — opacity/transform (ширина меняется мгновенно, без transition) */
.cm-send{transition:opacity var(--m-fast) var(--e-std),transform 200ms var(--e-spring),background-color var(--m-fast) var(--e-std)}
.cm-send.on:active{transform:scale(.94)}
/* режим выбора: чекбокс не анимирует width/margin */
.cm-chk{transition:opacity var(--m-fast) var(--e-std),transform 220ms var(--e-spring),background-color var(--m-fast) var(--e-std);transform:scale(.6)}
.selmode .cm-chk{transform:scale(1)}
.cm-msg.picked .cm-chk::after{animation:cPop 220ms var(--e-spring)}
.cm-msg{transition:background-color var(--m-fast) var(--e-std)}
/* подсветка перехода к сообщению — через opacity псевдоэлемента вместо box-shadow */
.cm-msg.flash .cm-bubble{animation:none}
.cm-msg.flash .cm-bubble::before{content:"";position:absolute;inset:-3px;border-radius:15px;border:3px solid var(--accent);pointer-events:none;animation:cFlashO 1.6s var(--e-out) both}
@keyframes cFlashO{0%,40%{opacity:1}100%{opacity:0}}

/* ---------- 3. Меню ---------- */
.cm-menu{animation:cDrop 260ms var(--e-spring) both}
.cm-menu.out{animation:cDropOut 140ms var(--e-in) both;pointer-events:none}
.cm-menu>*{animation:cItem 260ms var(--e-out) both}
.cm-menu.out>*{animation:none}
.cm-menu>:nth-child(1){animation-delay:0ms}.cm-menu>:nth-child(2){animation-delay:18ms}.cm-menu>:nth-child(3){animation-delay:36ms}
.cm-menu>:nth-child(4){animation-delay:54ms}.cm-menu>:nth-child(5){animation-delay:72ms}.cm-menu>:nth-child(6){animation-delay:90ms}
.cm-menu>:nth-child(7){animation-delay:108ms}.cm-menu>:nth-child(n+8){animation-delay:126ms}
.cm-mention,.cp-dd:not([hidden]){animation:cDrop 260ms var(--e-spring) both;transform-origin:top}
.cm-mention{transform-origin:bottom left}
.cm-menu .cm-mi,.cm-emo button{transition:background-color var(--m-fast) var(--e-std),transform 120ms var(--e-out)}

/* ---------- 4. Профиль / подвид ---------- */
.cm-prof{animation:cSlideR 380ms var(--e-out) both}
.cm-prof.out{animation:cSlideOutR 260ms var(--e-in) both;pointer-events:none}
.pu-sub{animation:cSlideR 380ms var(--e-out) both}
.pu-sub.out{animation:cSlideOutR 280ms var(--e-in) both;pointer-events:none}
.pf-pane.tf{animation:cIn var(--m-base) var(--e-out) both}
.pf-tabs{position:sticky}
.pf-tab{transition:color var(--m-fast) var(--e-std),transform 120ms var(--e-out)}
.pf-tab.on{border-color:transparent}
.pf-tabs>.c-ind{top:auto;bottom:0;height:2px;width:100px;border-radius:0;background:var(--ch-accent,var(--accent))}
.pf-tabs>.c-ind.go{transition:transform 380ms var(--e-spring),opacity var(--m-fast) var(--e-std)}

/* ---------- 6. Кнопки записи ---------- */
.cm-compose.can-rec .cm-rec{animation:cPop 360ms var(--e-spring)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ch-item,.ch-item *,.ch-tab,.c-ind,.c-ind.go,.cm-send,.cm-chk,.cm-menu,.cm-menu>*,.cm-prof,.pu-sub,.pf-tab,.pf-pane,.cm-scroll,.cm-msg .cm-bubble,.cm-rec,.cm-mention,.cp-dd{
    animation:none!important;transition:none!important}
}