/* Movimento: ícones que reagem ao passar o mouse (como no Discord), resposta ao clique e entradas suaves.
   "Reduzir animações" e a preferência do sistema desligam tudo isto (regras no experience.css). */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Ícones animados dos controles de voz ---------- */
.ico-mic, .ico-micOff { transform-origin: 50% 88%; }
.ico-headphones, .ico-headphonesOff { transform-origin: 50% 70%; }

/* Microfone: balança na base, como quem testa o som. */
:is(.icon-btn, .sc-btn):hover:not(:disabled) :is(.ico-mic, .ico-micOff) { animation: mic-sway .62s cubic-bezier(.36, .07, .19, .97); }
@keyframes mic-sway { 25% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } }
:is(.icon-btn, .sc-btn):hover:not(:disabled) :is(.ico-mic, .ico-micOff) rect { animation: mic-capsule .62s ease-out; }
@keyframes mic-capsule { 30% { transform: translateY(-1.5px); } }

/* Fone: dá um pulinho e assenta. */
:is(.icon-btn, .sc-btn):hover:not(:disabled) :is(.ico-headphones, .ico-headphonesOff) { animation: headset-bob .55s var(--spring); }
@keyframes headset-bob { 35% { transform: translateY(-3px) scale(1.08) rotate(-6deg); } 70% { transform: translateY(1px) scale(.97) rotate(3deg); } }

/* Engrenagem: gira até o próximo dente. */
.icon-btn .ico-settings { transition: transform .6s var(--spring); }
.icon-btn:hover .ico-settings, #settings-server-link:hover .ico-settings { transform: rotate(120deg); }

/* Ao silenciar ou ensurdecer, o risco vermelho é desenhado; ao voltar, o ícone surge com um pulo. */
.ico-swap { animation: ico-pop .38s var(--spring); }
@keyframes ico-pop { from { transform: scale(.55); opacity: .4; } }
.ico-swap .slash { stroke-dasharray: 26; stroke-dashoffset: 0; animation: slash-draw .32s .06s ease-out backwards; }
@keyframes slash-draw { from { stroke-dashoffset: 26; } }

/* Desconectar: o telefone treme de leve. */
:is(.icon-btn, .sc-btn).hangup:hover .ico { animation: hangup-ring .5s ease-in-out; }
@keyframes hangup-ring { 20% { transform: rotate(150deg); } 45% { transform: rotate(122deg); } 70% { transform: rotate(142deg); } 100% { transform: rotate(135deg); } }

/* Câmera: a lente pisca. */
:is(.vp-btn, .sc-btn):hover:not(:disabled) :is(.ico-camera, .ico-cameraOff) { animation: cam-flash .5s var(--spring); }
@keyframes cam-flash { 40% { transform: scale(1.14) translateX(1px); } }

/* Compartilhar tela: a seta sai por cima e volta por baixo. */
:is(.vp-btn, .sc-btn):hover:not(:disabled) .ico-screenShare .arrow { animation: arrow-loop .6s ease-in-out; }
@keyframes arrow-loop {
  45% { transform: translateY(-4px); opacity: 0; }
  46% { transform: translateY(4px); opacity: 0; }
}

/* Supressão de ruído: as barras viram um equalizador. */
.ico-waves .bar { transform-box: fill-box; transform-origin: center; }
:is(.icon-btn, .sc-btn):hover .ico-waves .bar { animation: eq .5s ease-in-out infinite alternate; }
:is(.icon-btn, .sc-btn):hover .ico-waves .bar:nth-of-type(3) { animation-delay: -.15s; }
:is(.icon-btn, .sc-btn):hover .ico-waves .bar:nth-of-type(4) { animation-delay: -.3s; }
:is(.icon-btn, .sc-btn):hover .ico-waves .bar:nth-of-type(5) { animation-delay: -.45s; }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1.1); } }

/* Efeitos sonoros: as notas dançam. */
.sc-btn:hover:not(:disabled) :is(.ico-music, .ico-volumeX) { animation: notes-dance .6s var(--spring); }
@keyframes notes-dance { 30% { transform: translateY(-3px) rotate(-10deg); } 65% { transform: translateY(1px) rotate(6deg); } }

/* Membros, anexar e emoji */
#btn-members:hover .ico-users { animation: headset-bob .5s var(--spring); }
#chat-form #btn-attach .ico { transition: transform .35s var(--spring); }
#chat-form #btn-attach:hover:not(:disabled) .ico { transform: rotate(90deg); }
#chat-form #btn-emoji:hover:not(:disabled) .ico { animation: emoji-wink .5s var(--spring); }
@keyframes emoji-wink { 40% { transform: scale(1.18) rotate(-12deg); } }
#btn-logout .ico-logout .arrow { transition: transform .25s var(--ease-out); }
#btn-logout:hover .ico-logout .arrow { transform: translateX(2px); }
.menu-item .ico { transition: transform .2s var(--ease-out); }
.menu-item:hover .ico { transform: scale(1.1); }
.msg-actions button .ico { transition: transform .2s var(--spring); }
.msg-actions button:hover .ico { transform: scale(1.15); }
#emoji-picker .ep-emoji { transition: background .12s, transform .15s var(--spring); }
#emoji-picker .ep-emoji:hover { transform: scale(1.18); }

/* ---------- Resposta ao clique ---------- */
.icon-btn, .vp-btn, .friend-btn, .pc-btn, .pc-icon-btn, .ft-tab, .msg-actions button, #chat-form button, .tc-btn, .cat-add, .group-action { transition-property: background, color, transform, opacity, box-shadow; transition-duration: .12s; }
:is(.icon-btn, .vp-btn, .friend-btn, .pc-icon-btn, .msg-actions button, #chat-form button, .tc-btn, .cat-add, .group-action):active:not(:disabled) { transform: scale(.9); }
:is(.pc-btn, .ft-tab, .friends-add-submit, .friend-text-btn, .watch-btn):active:not(:disabled) { transform: scale(.97); }
.sc-btn { transition: background .15s, color .15s, transform .15s var(--spring), box-shadow .2s; }
.sc-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.sc-btn:active:not(:disabled) { transform: translateY(0) scale(.94); }
.sc-btn.hangup:hover { box-shadow: 0 8px 22px rgba(217, 67, 75, .45); }

/* Faixa de servidores: o ícone afunda um pouco ao clicar. */
.rail-icon { transition: border-radius .2s var(--ease-out), background .2s, color .2s, transform .12s; }
.rail-item:active .rail-icon { transform: translateY(1px) scale(.96); }
.rail-pill { transition: transform .2s var(--ease-out), height .2s var(--ease-out), margin-top .2s var(--ease-out); }

/* ---------- Quem está falando ---------- */
.avatar.speaking { animation: speak-glow 1.6s ease-in-out infinite; }
@keyframes speak-glow { 50% { box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 0 4px var(--green), 0 0 14px 3px color-mix(in srgb, var(--green) 45%, transparent); } }
.tile { transition: box-shadow .2s ease; }
.tile.speaking { box-shadow: inset 0 0 0 3px var(--green), 0 0 26px color-mix(in srgb, var(--green) 28%, transparent); }
.tile:not(.screen) { background-image: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .07), transparent 62%); }
.tile.speaking .avatar { animation: speak-glow 1.6s ease-in-out infinite; }

/* ---------- Entradas ---------- */
.msg-new { animation: msg-in .32s var(--ease-out); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
.msg:hover .msg-actions { animation: bar-in .14s var(--ease-out); }
@keyframes bar-in { from { opacity: 0; transform: translateY(4px) scale(.98); } }
#context-menu, #context-submenu { animation: menu-in .16s var(--ease-out); transform-origin: top left; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
#emoji-picker, #autocomplete { animation: menu-in .16s var(--ease-out); }
#tooltip { animation: tip-in .14s var(--ease-out); }
#tooltip.right { animation-name: tip-in-right; }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px) scale(.96); } }
@keyframes tip-in-right { from { opacity: 0; transform: translateX(-3px) scale(.96); } }
.settings-overlay:not(.hidden) .settings-shell { animation: shell-in .3s var(--ease-out); }
@keyframes shell-in { from { opacity: 0; transform: scale(.975); } }
#settings .settings-content section:not(.hidden) { animation: page-in .28s var(--ease-out); }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }

/* Avisos (toast): sobem com um ícone, sem cobrir os controles da chamada. */
#toast {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border-radius: 12px;
  background: var(--bg-floating); color: var(--text-strong); border: 1px solid var(--divider);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: toast-in .35s var(--spring);
}
#toast.hidden { display: none; }
#toast .ico { flex-shrink: 0; padding: 5px; width: 28px; height: 28px; border-radius: 8px; }
#toast.error .ico { color: #fff; background: var(--red-dark); }
#toast.info .ico { color: #fff; background: var(--brand); }
#toast.error { border-color: color-mix(in srgb, var(--red) 35%, transparent); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } to { transform: translateX(-50%); } }
#app:has(#voice-view:not(.hidden)) ~ #toast { bottom: 108px; }

/* Faixa de reconexão */
#conn-banner { animation: banner-in .3s var(--ease-out); }
@keyframes banner-in { from { transform: translate(-50%, -100%); } }

/* Listas: realce do mouse entra e sai suave. */
.channel, .member, .voice-user, .friend-row, .admin-row { transition: background .12s, color .12s; }

/* "Reduzir animações" também vale para os detalhes desenhados com ::before e ::after. */
:root[data-reduce-motion=true] *::before, :root[data-reduce-motion=true] *::after { animation: none !important; transition: none !important; }

/* Folha de ações (toque longo na mensagem) e menus em folha sobem de baixo. */
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-fade { from { opacity: 0; } }
#msg-sheet { animation: sheet-fade .16s var(--ease-out); }
#msg-sheet .sheet-panel { animation: sheet-up .22s var(--ease-out); }
#msg-sheet.closing { opacity: 0; transition: opacity .16s; }
#msg-sheet.closing .sheet-panel { transform: translateY(100%); transition: transform .16s ease-in; }
#context-menu.sheet-menu { animation: sheet-up .2s var(--ease-out); }