/* ===== Анимации, часть А (документы, окна, меню, кнопки). Грузится после всех стилей. ===== */
: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);
}

/* ---------- keyframes (имена фиксированы спецификацией) ---------- */
@keyframes mIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mInScale{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px) scale(.96)}}
@keyframes mDrop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mPop{0%{transform:scale(.6)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes mSlideL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes mSlideR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
/* вспомогательные */
@keyframes mFade{from{opacity:0}to{opacity:1}}
@keyframes mFadeOut{from{opacity:1}to{opacity:0}}
@keyframes mDropOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px)}}
@keyframes mItem{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes mInSheet{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes mOutSheet{from{opacity:1;transform:none}to{opacity:0;transform:translateY(24px)}}
@keyframes mRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mRiseOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px)}}
@keyframes mPageOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(4px)}}
@keyframes mTreeOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px)}}
@keyframes mShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

[data-m-wc]{will-change:transform,opacity}

/* ---------- 3.1 смена экрана ---------- */
#docs-view,#admin-view,#settings-view,#chats-view,#gpr-view{animation:none}
#main.m-out{animation:mPageOut 120ms var(--e-in) both;pointer-events:none}
#main.m-in{animation:mIn var(--m-page) var(--e-out) both}
#main.m-in .main-head{animation:mIn var(--m-page) var(--e-out) 40ms both}

/* ---------- 3.2 бегунок вкладок ---------- */
.m-ind{position:absolute;left:0;top:0;z-index:0;pointer-events:none;transform-origin:0 0;background:var(--sel-bg);border-radius:999px;transition:opacity var(--m-fast) var(--e-std)}
.m-ind.m-hide{opacity:0}
.m-ind--line{background:var(--accent)}
[data-m-tabs]>:not(.m-ind){position:relative;z-index:1}
.cat-tab.on,.cat-tab.on:hover{background:transparent}
.tabs .tab.on{border-bottom-color:transparent}
.set-nav .set-nav-item.sel,.set-nav .set-nav-item.sel:hover{background:transparent;border-bottom-color:transparent}
.cat-tabn{transition:background-color var(--m-fast) var(--e-std),color var(--m-fast) var(--e-std)}
/* сдвиг списка при смене вкладки */
.m-slide-l{animation:mSlideL 300ms var(--e-out) both}
.m-slide-r{animation:mSlideR 300ms var(--e-out) both}

/* ---------- 3.3 волна списков ---------- */
.m-w{animation:mFadeUp 380ms var(--e-out) var(--wd,0ms) both}

/* ---------- 3.12 скелетоны ---------- */
.m-skel{display:flex;flex-direction:column;gap:10px;padding:2px 0}
.m-skel-row{position:relative;overflow:hidden;height:56px;border-radius:10px;background:var(--track);opacity:.75}
.m-skel-row:nth-child(2){opacity:.6}.m-skel-row:nth-child(3){opacity:.5}.m-skel-row:nth-child(n+4){opacity:.4}
.m-skel-row::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:mShimmer 1.2s linear infinite}
:root[data-theme="dark"] .m-skel-row::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent)}

/* ---------- 3.4 дерево ---------- */
.t-item{transition:background-color 200ms var(--e-std),color 200ms var(--e-std)}
.t-item .chev{position:relative}
.t-item .chev .fi{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;transition:opacity 200ms var(--e-std)}
.t-item .chev .fo{opacity:0}
.t-item .chev.open .fo{opacity:1}
.t-item .chev.open .fc{opacity:0}
.t-item .chev.ic-open .fo{animation:mFade 200ms var(--e-std) both}
.t-item .chev.ic-open .fc{animation:mFadeOut 200ms var(--e-std) both}
.t-item .chev svg{transition:transform 160ms var(--e-out)}
.t-new{animation:mFadeUp 380ms var(--e-out) calc(var(--i,0)*25ms) both}
.t-out{animation:mTreeOut 160ms var(--e-in) both;pointer-events:none}

/* ---------- 3.5 модальные окна ---------- */
.overlay{animation:mFade var(--m-base) var(--e-out) both}
.overlay .modal{transform-origin:50% 50%;animation:mInScale var(--m-slow) var(--e-spring) both}
.overlay.m-closing{pointer-events:none;animation:mFadeOut 220ms var(--e-in) both}
.overlay.m-closing .modal{animation:mOut 200ms var(--e-in) both}
@media (max-width:700px){
  .overlay .modal{animation:mInSheet var(--m-slow) var(--e-out) both}
  .overlay.m-closing .modal{animation:mOutSheet 200ms var(--e-in) both}
}

/* ---------- 3.6 выпадающие меню ---------- */
.dropdown{transform-origin:top right}
.dropdown:not([hidden]){animation:mDrop 260ms var(--e-spring) both}
.dropdown.m-closing{animation:mDropOut 140ms var(--e-in) both;pointer-events:none}
.dropdown:not([hidden])>button{animation:mItem 240ms var(--e-out) both}
.dropdown:not([hidden])>button:nth-child(1){animation-delay:30ms}
.dropdown:not([hidden])>button:nth-child(2){animation-delay:48ms}
.dropdown:not([hidden])>button:nth-child(3){animation-delay:66ms}
.dropdown:not([hidden])>button:nth-child(4){animation-delay:84ms}
.dropdown:not([hidden])>button:nth-child(n+5){animation-delay:102ms}
.dropdown.m-closing>button{animation:none}
.upload-menu .dropdown.upmenu.sheet:not([hidden]){transform-origin:bottom center;animation:mInSheet 320ms var(--e-out) both}
.upload-menu .dropdown.upmenu.sheet.m-closing{animation:mOutSheet 160ms var(--e-in) both}

/* ---------- 3.7 тосты и плашки ---------- */
.toast{animation:mRise 360ms var(--e-spring) both}
.toast.m-out{animation:mRiseOut 220ms var(--e-in) both}
.upd-banner{animation:mRise 360ms var(--e-spring) both}
.upd-banner.m-out{animation:mRiseOut 220ms var(--e-in) both;pointer-events:none}

/* ---------- 3.8 кнопки ---------- */
.btn,.icon-btn,.hic,.cat-tab,.store-btn,.ov-card,.bnav button,.tab,.badge,.dropdown button,.seg button{
  outline:2px solid transparent;outline-offset:2px;
  transition:background-color var(--m-fast) var(--e-std),color var(--m-fast) var(--e-std),border-color var(--m-fast) var(--e-std),outline-color 150ms var(--e-std),transform 120ms var(--e-out);
}
.btn:focus-visible,.icon-btn:focus-visible,.hic:focus-visible,.cat-tab:focus-visible,.store-btn:focus-visible,.ov-card:focus-visible,.bnav button:focus-visible,.tab:focus-visible,.badge:focus-visible,.dropdown button:focus-visible{outline-color:var(--accent)}
.btn:active,.icon-btn:active,.hic:active,.cat-tab:active,.store-btn:active,.ov-card:active,.bnav button:active{transform:scale(.97)}
.btn:disabled:active{transform:none}
.btn.primary:hover{transform:translateY(-1px)}
.btn.primary:active{transform:scale(.97)}
.ov-card:hover{transform:translateY(-1px)}
.ov-card:active{transform:scale(.97)}
.store-btn:hover{transform:translateY(-1px)}
.store-btn:active{transform:scale(.97)}
/* тень через псевдоэлемент (анимируется opacity, а не box-shadow) */
.store-btn{position:relative}
.store-btn:hover{box-shadow:none}
.store-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity var(--m-fast) var(--e-std)}
.store-btn:hover::after{opacity:1}
.card{position:relative;transition:background-color var(--m-fast) var(--e-std),border-color var(--m-fast) var(--e-std),color var(--m-fast) var(--e-std)}
.card:hover{box-shadow:none}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 2px 10px rgba(0,0,0,.08);opacity:0;pointer-events:none;transition:opacity var(--m-fast) var(--e-std)}
.card:hover::after{opacity:1}
.otp-cells span{transition:border-color var(--m-fast) var(--e-std),transform 120ms var(--e-out)}
.otp-cells span.on{box-shadow:none;outline:3px solid color-mix(in oklab,var(--accent) 22%,transparent);outline-offset:0}
.seg button{transition:background-color var(--m-fast) var(--e-std),color var(--m-fast) var(--e-std)}

/* ---------- 3.9 галочки и радио ---------- */
input[type=checkbox],input[type=radio]{
  -webkit-appearance:none;appearance:none;position:relative;flex:none;width:18px;height:18px;min-height:0;padding:0;margin:0;
  border:1.5px solid var(--muted);background:var(--panel);cursor:pointer;vertical-align:middle;
  transition:background-color var(--m-fast) var(--e-std),border-color var(--m-fast) var(--e-std);
}
input[type=checkbox]{border-radius:5px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);opacity:0;transition:transform 220ms var(--e-spring),opacity 120ms var(--e-std)}
input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1);opacity:1}
input[type=radio]::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#fff;transform:scale(.6);opacity:0;transition:transform 220ms var(--e-spring),opacity 120ms var(--e-std)}
input[type=radio]:checked::after{transform:scale(1);opacity:1}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:not-allowed}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- 3.10 бейджи ---------- */
.m-pop{animation:mPop 360ms var(--e-spring) both}

/* ---------- 3.11 нижняя панель ---------- */
.bnav .bi svg{transition:transform 220ms var(--e-spring)}
.bnav button.on{color:var(--sel-text)}
.bnav button.on .bi svg{transform:translateY(-1px)}
.bnav .m-ind{border-radius:14px}
.bnav button:active{background:transparent}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .m-skel-row::after{animation:none!important}
}