/* Анимации интерфейса. Отключаются вместе с «Анимации», лёгким режимом,
   игровым режимом, экономией батареи и «Пониженным движением» (класс no-anim). */

/* Переливающийся фон цветных тем */
body.grad.grad-anim { background-size: 300% 300%; animation: grad-move 24s ease-in-out infinite; }
@keyframes grad-move {
  0% { background-position: 0% 30%; }
  25% { background-position: 60% 0%; }
  50% { background-position: 100% 70%; }
  75% { background-position: 40% 100%; }
  100% { background-position: 0% 30%; }
}
body.no-anim.grad, body.reduce-motion.grad { animation: none !important; }

body:not(.no-anim) {
  /* Появление окон */
  .overlay { animation: ov-in .18s ease-out; }
  .overlay > .modal, .overlay > .profile-card { animation: modal-in .22s cubic-bezier(.2, .9, .3, 1.2); }
  .menu, .status-fly { animation: menu-in .14s ease-out; transform-origin: top left; }
  .toast { animation: ntf-in .25s cubic-bezier(.2, .9, .3, 1.2); }

  /* Новые сообщения плавно выезжают */
  .msg.new { animation: msg-in .28s ease-out; }
  .msg .reaction { transition: transform .15s; }
  .msg .reaction:hover { transform: translateY(-2px) scale(1.05); }
  .msg .reaction.pop { animation: pop-bounce .35s cubic-bezier(.3, 1.6, .5, 1); }
  .msg .actions { animation: menu-in .12s ease-out; }

  /* Список каналов и чатов */
  .side-item { transition: background var(--t), color var(--t), transform .15s; }
  .side-item:hover { transform: translateX(2px); }
  .side-item.active { transform: none; }
  .member, .person { transition: background var(--t), transform .15s; }
  .member:hover { transform: translateX(2px); }

  /* Иконки серверов: «таблетка» слева, как индикатор */
  .rail-item { transition: border-radius .2s, background .2s, transform .15s; }
  .rail-item:hover { transform: translateY(-1px); }
  .rail-item:active { transform: scale(.94); }
  .rail-item::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: var(--text); transform: translateY(-50%); transition: height .2s; }
  .rail-item:hover::before { height: 20px; }
  .rail-item.active::before { height: 40px; }
  .rail-item { overflow: visible; }
  .rail-item img { border-radius: inherit; }

  /* Кнопки и аватары */
  .btn, .icon-btn, .round-btn, .call-btn { transition: background var(--t), color var(--t), transform .12s, filter var(--t); }
  .icon-btn:active, .round-btn:active, .call-btn:active { transform: scale(.9); }
  .call-btn:hover { transform: translateY(-2px); }
  .avatar.speaking { animation: speak-pulse 1.2s ease-in-out infinite; }
  .tile.speaking { animation: tile-pulse 1.2s ease-in-out infinite; }
  .profile-card .pc-avatar .avatar { transition: transform .2s; }
  .profile-card .pc-avatar:hover .avatar { transform: scale(1.04); }
  .pc-bubble { animation: bubble-in .35s cubic-bezier(.3, 1.5, .5, 1); transform-origin: bottom left; }

  /* Переключение вкладок и чатов */
  #messages, .list-pad, #st-pane { animation: fade-up .2s ease-out; }
  .badge, .count { animation: pop-bounce .3s cubic-bezier(.3, 1.6, .5, 1); }
  .toggle::after { transition: left .2s cubic-bezier(.3, 1.4, .5, 1); }
  .theme-swatch { transition: transform .15s, box-shadow .15s; }

  #pip { transition: box-shadow .2s; }
  #pip:hover { box-shadow: 0 16px 48px rgba(0,0,0,.65); }
}

@keyframes ov-in { from { background: rgba(0,0,0,0); } }
@keyframes modal-in { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pop-bounce { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes bubble-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes speak-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--ok); } 50% { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 6px color-mix(in srgb, var(--ok) 60%, transparent); } }
@keyframes tile-pulse { 0%, 100% { box-shadow: inset 0 0 0 3px var(--ok); } 50% { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ok) 50%, transparent); } }
@keyframes ring-shake { 0%, 100% { transform: translateX(-50%); } 10%, 30% { transform: translateX(calc(-50% - 3px)); } 20%, 40% { transform: translateX(calc(-50% + 3px)); } 50% { transform: translateX(-50%); } }