/* Costa Chat v3.2 | Smooth, restrained motion across the app. Honors reduced-motion. */
:root{--motion-quick:135ms;--motion-base:210ms;--motion-slow:310ms;--motion-ease:cubic-bezier(.22,1,.36,1);--motion-bounce:cubic-bezier(.2,1.3,.4,1)}
@keyframes cc-enter{from{opacity:0;transform:translate3d(0,9px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes cc-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes cc-slide-left{from{opacity:0;transform:translate3d(-9px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes cc-toast-enter{from{opacity:0;transform:translate3d(12px,0,0) scale(.97)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes cc-modal-in{from{opacity:0;transform:translate3d(0,15px,0) scale(.975)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes cc-fade{from{opacity:0}to{opacity:1}}
@keyframes cc-live{0%,100%{box-shadow:0 0 0 0 #28b46844}55%{box-shadow:0 0 0 6px #28b46800}}
@keyframes cc-shimmer{from{background-position:100% 50%}to{background-position:0% 50%}}
@keyframes cc-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@keyframes cc-ring{0%,100%{box-shadow:0 0 0 0 #5865f200}45%{box-shadow:0 0 0 5px #5865f224}}
html{scroll-behavior:smooth}
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
button,a,input,select,textarea{transition:background-color var(--motion-quick) ease,color var(--motion-quick) ease,border-color var(--motion-quick) ease,box-shadow var(--motion-base) ease,filter var(--motion-quick) ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--user-accent,#5865f2);outline-offset:3px}
.rail-item{transition:background-color .18s ease,color .18s ease,border-radius .23s var(--motion-ease),box-shadow .23s ease!important;transform:none!important}
.rail-item:hover{box-shadow:0 5px 22px #0004}.rail-item.active{box-shadow:0 0 0 1px #ffffff18}
.server-rail .rail-item:active{filter:brightness(.85)}
.channel-entry,.dm-entry,.nav-top-entry,.member-entry,.friend-row,.sidebar-head,.sidebar-footer .icon-btn{transition:background-color .14s ease,color .14s ease,padding-left .17s var(--motion-ease),box-shadow .17s ease}
.channel-entry:not(.selected):hover,.dm-entry:not(.selected):hover{padding-left:12px}
.channel-entry.selected,.dm-entry.selected,.nav-top-entry.selected{box-shadow:inset 2px 0 0 var(--user-accent,#5865f2)}
.category-head svg,.sidebar-head svg{transition:transform .2s ease}.category-head:hover svg{transform:translateY(1px)}
.icon-btn,.composer .tool,.composer .file-label,.stage-icon-btn,.modal-close,.voice-inline-open,.voice-inline-leave{transition:background-color .16s,color .16s,transform .15s var(--motion-ease),filter .16s}
.icon-btn:hover,.composer .tool:hover,.stage-icon-btn:hover{transform:translateY(-1px)}
.icon-btn:active,.composer .tool:active,.stage-icon-btn:active,.primary-btn:active,.secondary-btn:active{transform:scale(.94)}
.primary-btn,.secondary-btn,.call-join-btn{transition:background-color .15s,transform .18s var(--motion-ease),box-shadow .2s,filter .15s}
.primary-btn:hover,.call-join-btn:hover{box-shadow:0 3px 12px #0003}
.composer{transition:background-color .18s,border-color .16s,box-shadow .2s}
.composer:focus-within{background:#404249;box-shadow:0 0 0 1px #6973dd45}
.composer textarea{transition:color .15s}
.composer:focus-within .send-button{color:#fff}
.message{transition:background-color .12s ease;contain:layout style}
.message-actions{transition:opacity .13s ease,transform .16s var(--motion-ease),box-shadow .16s;transform:translateY(2px)}
.message:hover .message-actions,.message:focus-within .message-actions{transform:translateY(0)}
.reaction{transition:background-color .16s,border-color .16s,transform .16s var(--motion-bounce)}
.reaction:hover{transform:translateY(-2px)}.reaction:active{transform:scale(.9)}
.attachment-file,.friend-row,.search-result{transition:background .15s,border-color .15s,transform .2s var(--motion-ease)}
.member-entry:hover .member-avatar,.friend-row:hover .member-avatar{filter:brightness(1.1)}
.members-panel,.sidebar,.server-rail{transition:background-color .25s ease}
/* Route transition plays only when view key changes, never for presence or routine SSE re-renders. */
.motion-view-enter .chat-header,.motion-view-enter .call-topbar{animation:cc-fade .19s ease both}
.motion-view-enter .chat-scroll,.motion-view-enter .friends-body,.motion-view-enter .call-experience,.motion-view-enter .home-main,.motion-view-enter .welcome-body{animation:cc-enter .22s var(--motion-ease) both}
.motion-view-enter .composer-container{animation:cc-enter .25s var(--motion-ease) both}
.motion-sidebar-enter .sidebar-scroll>*{animation:cc-slide-left .21s var(--motion-ease) both}
.motion-sidebar-enter .sidebar-scroll>*:nth-child(2){animation-delay:30ms}.motion-sidebar-enter .sidebar-scroll>*:nth-child(3){animation-delay:55ms}.motion-sidebar-enter .sidebar-scroll>*:nth-child(4){animation-delay:80ms}
.motion-message-new{animation:cc-enter .23s var(--motion-ease) both;transform-origin:left center}
.motion-member-new,.motion-tile-new{animation:cc-pop .27s var(--motion-ease) both}
.call-tile{transition:border-color .16s,box-shadow .23s,background .2s;overflow:hidden}
.call-tile.chosen{box-shadow:0 0 0 1px var(--user-accent,#5865f2)}
.call-tile .tile-avatar{transition:transform .25s var(--motion-ease),filter .2s}
.call-tile:hover .tile-avatar{transform:scale(1.055)}
.call-stage{animation:cc-pop .27s var(--motion-ease) both;transform-origin:center}
.call-stage-top .stream-live{animation:cc-live 2.2s ease infinite}
.dc-call-pulse,.voice-inline-title i,.online-indicator{animation:cc-live 2.4s ease-in-out infinite}
.voice-under-person.is-speaking{transition:box-shadow .12s ease,background-color .12s ease}
.call-tile.is-speaking .tile-avatar{animation:cc-ring 1.1s ease-in-out infinite}
.dc-voice-menu{animation:cc-pop .16s var(--motion-ease) both;transform-origin:bottom left}
.modal-backdrop{animation:cc-fade .17s ease both;backdrop-filter:blur(4px)}
.modal-card{animation:cc-modal-in .25s var(--motion-ease) both}
.toast{animation:cc-toast-enter .23s var(--motion-ease) both}
.search-popover,.search-result,.reply-bar,.attachment-chip,.appearance-settings-shortcut{animation:cc-enter .2s var(--motion-ease) both}
.auth-root .auth-container{animation:cc-modal-in .4s var(--motion-ease) both}
.auth-switch button{transition:background-color .2s,color .2s}
.voice-inline-panel{animation:cc-enter .23s var(--motion-ease) both}
.appearance-color{transition:box-shadow .17s,border-color .17s,transform .16s}
.appearance-color:hover{transform:scale(1.08)}.appearance-color.chosen{transform:scale(1.04)}
.mobile-backdrop{animation:cc-fade .16s ease both}
/* Keep motion inexpensive on mobile and never animate video media itself. */
video,.stage-video,.tile-video{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.motion-view-enter *,.motion-message-new{animation:none!important}}

.appearance-motion{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.motion-option{font-size:12px;background:#262831;border:1px solid #444752;border-radius:5px;padding:9px 14px;color:#c1c5d2}
.motion-option:hover{background:#3a3d48;color:white}
.motion-option.selected{background:var(--user-accent,#5865f2);border-color:var(--user-accent,#5865f2);color:white;font-weight:750}
html[data-motion="subtle"] .motion-sidebar-enter .sidebar-scroll>*,html[data-motion="subtle"] .motion-member-new{animation:none}
html[data-motion="subtle"] .motion-view-enter .chat-scroll,html[data-motion="subtle"] .motion-view-enter .call-experience{animation:cc-fade .16s ease both}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* v6: reduced visual noise, retain only subtle hover and speaking feedback */
html[data-motion="subtle"] .motion-view-enter *,html[data-motion="subtle"] .motion-message-new,html[data-motion="subtle"] .motion-tile-new,html[data-motion="subtle"] .motion-sidebar-enter *,html[data-motion="subtle"] .motion-member-new{animation:none!important}
html[data-motion="subtle"] .dc-call-pulse,html[data-motion="subtle"] .voice-inline-title i,html[data-motion="subtle"] .online-indicator,html[data-motion="subtle"] .stream-live{animation:none!important}
html[data-motion="subtle"] .call-tile:hover .tile-avatar,html[data-motion="subtle"] .reaction:hover{transform:none!important}
html[data-motion="subtle"] .modal-backdrop,html[data-motion="subtle"] .modal-card,html[data-motion="subtle"] .dc-voice-menu,html[data-motion="subtle"] .v5-presence-popover{animation:none!important}