:root{--ui-duration:180ms;--ui-ease:cubic-bezier(.2,.7,.2,1)}
button,a,input,textarea,select{transition:background-color var(--ui-duration),color var(--ui-duration),border-color var(--ui-duration),box-shadow var(--ui-duration)}
body,.chat-main,.chat-header,.sidebar,.message-form,.msg,.feature-dialog{transition:background-color var(--ui-duration),color var(--ui-duration),border-color var(--ui-duration)}
/* Only visual surfaces move; chat rows, heights and scroll offsets do not. */
.messages{overflow-anchor:none;scroll-behavior:auto}
.room-menu,.feature-dialog{flex-direction:column}
dialog{opacity:0;transform:translateY(6px);transition:opacity var(--ui-duration) var(--ui-ease),transform var(--ui-duration) var(--ui-ease),display var(--ui-duration) allow-discrete,overlay var(--ui-duration) allow-discrete}
dialog[open]{opacity:1;transform:translateY(0)}
dialog::backdrop{opacity:0;transition:opacity var(--ui-duration),display var(--ui-duration) allow-discrete,overlay var(--ui-duration) allow-discrete}dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;transform:translateY(6px)}dialog[open]::backdrop{opacity:0}}
.tools-panel,.emoji-picker,.dccon-picker,.gif-modal,.music-modal,.roulette-modal,.sticker-preview-modal{transition:opacity var(--ui-duration),transform var(--ui-duration),display var(--ui-duration) allow-discrete;opacity:1;transform:translateY(0)}
.tools-panel.hidden,.emoji-picker.hidden,.dccon-picker.hidden,.gif-modal.hidden,.music-modal.hidden,.roulette-modal.hidden,.sticker-preview-modal.hidden{opacity:0;transform:translateY(4px)}
@starting-style{.tools-panel:not(.hidden),.emoji-picker:not(.hidden),.dccon-picker:not(.hidden),.gif-modal:not(.hidden),.music-modal:not(.hidden),.roulette-modal:not(.hidden),.sticker-preview-modal:not(.hidden){opacity:0;transform:translateY(4px)}}
.archive-overlay,.star-overlay,.help-modal.active,.dccon-list-modal.active,.reaction-popup,.screen.active{animation:ui-appear var(--ui-duration) var(--ui-ease)}
.archive-results,.star-results,.feature-body{animation:ui-fade var(--ui-duration) var(--ui-ease)}
.star-overlay{transition:opacity var(--ui-duration),display var(--ui-duration) allow-discrete;opacity:1;animation:none}.star-overlay[hidden]{opacity:0}@starting-style{.star-overlay:not([hidden]){opacity:0}}
@keyframes ui-appear{from{opacity:0}to{opacity:1}}@keyframes ui-fade{from{opacity:.65}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}#toolsToggleBtn .tools-toggle-icon{transition:transform .24s cubic-bezier(.4,0,.2,1)!important}}