/* One quiet motion language; content stays legible and layout stays stable. */
:root{--motion-fast:100ms;--motion-content:160ms;--motion-panel:220ms;--motion-exit:160ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
:is(.rail-button,.rail-employee-shortcut,.conversation-row,.hs-sidebar nav button,.wcs-row){transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease}
@media(hover:hover){:is(.rail-button,.chat-add>summary,.chat-add>.chat-add-trigger,.header-menu>summary,.wcs-header button):active{transform:scale(.97)}}
/* Module surfaces are kept mounted. Display changes replay only this surface,
   never every message, attachment or streaming update inside it. */
:is(.system-settings,.employee-directory,.wepre-applications,.network-contacts,.skill-library-page,.demand-circle):not([hidden]){animation:interface-surface-in var(--motion-content) var(--motion-ease)}
@keyframes interface-surface-in{from{opacity:.94;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Native close releases modal focus immediately. Supporting browsers keep only
   the visual layer for the exit; older browsers simply close immediately. */
@supports(transition-behavior:allow-discrete){
 dialog{opacity:0;transform:translateY(6px) scale(.992);transition:opacity var(--motion-exit) ease,transform var(--motion-exit) var(--motion-ease),display var(--motion-exit) allow-discrete,overlay var(--motion-exit) allow-discrete}
 dialog[open]{opacity:1;transform:none;transition-duration:var(--motion-panel)}
 dialog::backdrop{background-color:transparent;transition:background-color var(--motion-exit) ease,display var(--motion-exit) allow-discrete,overlay var(--motion-exit) allow-discrete}
 :where(dialog[open])::backdrop{background-color:#18271e30}
 dialog:not([open]),dialog:not([open])::backdrop{pointer-events:none}
 dialog.wcs-drawer{transform:translateX(18px);transition-timing-function:var(--motion-ease)}
 dialog.wcs-drawer[open]{transform:none}
 dialog[data-motion-instant],dialog[data-motion-instant]::backdrop{transition:none!important}
 @starting-style{dialog[open]{opacity:0;transform:translateY(6px) scale(.992)}dialog.wcs-drawer[open]{transform:translateX(18px)}dialog[open]::backdrop{background-color:transparent}}
}
/* Side panels overlay rather than reflow long messages on every open/close. */
@media(min-width:761px){html body.wcs-group-open .chat-pane{width:100%!important}html body.wcs-group-open>.frame:not(:has(.chat-pane))>.right{margin-right:0}}
@supports(transition-behavior:allow-discrete){
 .chat-focused #work-panel{position:absolute;right:0;top:0;bottom:0;width:min(var(--work-sidebar-width,320px),94vw);margin:0;border-radius:0;z-index:40;box-shadow:-12px 0 25px #0001}
 #work-panel{opacity:1;transform:none;transition:opacity var(--motion-exit) ease,transform var(--motion-exit) var(--motion-ease),display var(--motion-exit) allow-discrete}
 #work-panel[hidden]{opacity:0;transform:translateX(12px);pointer-events:none}
 @starting-style{#work-panel:not([hidden]){opacity:0;transform:translateX(12px)}}
}
@media(prefers-reduced-motion:reduce){
 :root{--motion-fast:0ms;--motion-content:0ms;--motion-panel:0ms;--motion-exit:0ms}
 :is(.system-settings,.employee-directory,.wepre-applications,.network-contacts,.skill-library-page,.demand-circle):not([hidden]){animation:none}
 dialog,dialog::backdrop,#work-panel,:is(.rail-button,.rail-employee-shortcut,.conversation-row,.hs-sidebar nav button,.wcs-row){transition:none!important}
 dialog[open],dialog.wcs-drawer[open],#work-panel:not([hidden]){transform:none}
}