.button,.icon-button,.send-button { transition: opacity var(--duration-fast),background-color var(--duration-fast),color var(--duration-fast),transform var(--duration-fast); }
.button:active,.icon-button:active,.send-button:active { transform: scale(.98); }
input,textarea,.composer { transition: border-color var(--duration-base),box-shadow var(--duration-base); }
dialog[open] { animation: panel-in var(--duration-panel) var(--ease-out); }
dialog.model-picker[open] { animation-duration: 180ms; }
dialog[open]::backdrop { animation: fade-in var(--duration-base) var(--ease-out); }
.message.new { animation: message-in 180ms var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes message-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}