/* Short compositor motion for the native chat interface. No layout animation. */
:root { --rv-motion-fast: 120ms; --rv-motion-enter: 180ms; --rv-motion-ease: cubic-bezier(.2,.75,.25,1); }
@keyframes rv-surface-enter { from { opacity: .55; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes rv-panel-enter { from { opacity: .6; translate: 10px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes rv-surface-exit { from { opacity: 1; } to { opacity: 0; } }
@keyframes rv-backdrop-enter { from { opacity: 0; } }
@keyframes rv-overlay-enter { from { opacity: .55; } to { opacity: 1; } }
@media (min-width: 0px) {
  .mx_Dialog, .mx_ContextualMenu, .mx_ReplyPreview, .mx_EmojiPicker, .mx_Toast_toast,
  [role="menu"][data-state="open"], [role="dialog"][data-state="open"],
  [role="listbox"][data-state="open"] {
    animation: rv-surface-enter var(--rv-motion-enter) var(--rv-motion-ease);
  }
  .mx_RightPanel, .mx_ThreadView { animation: rv-panel-enter 200ms var(--rv-motion-ease); }
  /* Overlay focus guards are fixed. Translating their ancestor changes the
     containing block and can make native focus scroll the whole page. */
  .mx_ContextualMenu, .mx_Dialog, [role="menu"][data-state="open"],
  [role="dialog"][data-state="open"], [role="listbox"][data-state="open"] {
    animation-name: rv-overlay-enter;
  }
  .mx_Dialog_background, .mx_ContextualMenu_background { animation: rv-backdrop-enter 150ms ease-out; }
  [role="menu"][data-state="closed"], [role="dialog"][data-state="closed"] {
    animation: rv-surface-exit 100ms ease-out;
  }
  .mx_Tooltip, [role="tooltip"] { animation: rv-surface-enter 120ms ease-out; }
  .mx_RoomHeader button, .mx_MessageComposer button, nav[aria-label="Spaces"] button,
  .mx_Dialog button, .mx_AccessibleButton {
    transition: background-color var(--rv-motion-fast) ease, color var(--rv-motion-fast) ease,
      opacity var(--rv-motion-fast) ease, scale var(--rv-motion-fast) var(--rv-motion-ease);
  }
  .mx_RoomHeader button:active, .mx_MessageComposer button:active,
  nav[aria-label="Spaces"] button:active, .mx_Dialog button:active { scale: .95; }
  nav[aria-label="Room list"] [role="button"], nav[aria-label="Room list"] button,
  [role="menuitem"], [role="option"], .mx_EventTile_line {
    transition: background-color var(--rv-motion-fast) ease, color var(--rv-motion-fast) ease;
  }
  .mx_MessageComposer, .mx_BasicMessageComposer, .mx_Field input, .mx_Field textarea {
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-rv-motion="full"]) :is(.mx_Dialog, .mx_ContextualMenu, .mx_ReplyPreview,
    .mx_EmojiPicker, .mx_Toast_toast, .mx_RightPanel, .mx_ThreadView, .mx_Tooltip,
    .mx_Dialog_background, .mx_ContextualMenu_background, [role="tooltip"],
    [role="menu"][data-state], [role="dialog"][data-state], [role="listbox"][data-state],
    .mx_RoomHeader button, .mx_MessageComposer button, nav[aria-label="Spaces"] button,
    .mx_Dialog button, .mx_AccessibleButton, nav[aria-label="Room list"] button,
    nav[aria-label="Room list"] [role="button"], [role="menuitem"], [role="option"],
    .mx_EventTile_line, .mx_MessageComposer, .mx_BasicMessageComposer, .mx_Field input, .mx_Field textarea) {
    animation: none !important; transition: none !important;
  }
}
:root[data-rv-motion="reduced"] :is(.mx_Dialog, .mx_ContextualMenu, .mx_ReplyPreview,
  .mx_EmojiPicker, .mx_Toast_toast, .mx_RightPanel, .mx_ThreadView, .mx_Tooltip,
  .mx_Dialog_background, .mx_ContextualMenu_background, [role="tooltip"],
  [role="menu"][data-state], [role="dialog"][data-state], [role="listbox"][data-state],
  .mx_RoomHeader button, .mx_MessageComposer button, nav[aria-label="Spaces"] button,
  .mx_Dialog button, .mx_AccessibleButton, nav[aria-label="Room list"] button,
  nav[aria-label="Room list"] [role="button"], [role="menuitem"], [role="option"],
  .mx_EventTile_line, .mx_MessageComposer, .mx_BasicMessageComposer, .mx_Field input, .mx_Field textarea) {
  animation: none !important; transition: none !important;
}
.rv_MotionPreference { display: flex; flex-direction: column; gap: 8px; margin-block-start: 16px; font: inherit; }
.rv_MotionPreference select { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--cpd-color-border-interactive-primary, #9da7b7); border-radius: 8px; background: var(--cpd-color-bg-canvas-default, white); color: var(--cpd-color-text-primary, #172137); font: inherit; }
/* Native accessibility CSS uses !important near-zero durations. An explicit
   Smooth preference restores only these short application surface motions. */
@layer app-web {
:root[data-rv-motion="full"] :is(.mx_Dialog, .mx_ContextualMenu, .mx_ReplyPreview,
  .mx_EmojiPicker, .mx_Toast_toast, [role="menu"][data-state="open"],
  [role="dialog"][data-state="open"], [role="listbox"][data-state="open"]) {
  animation-duration: 180ms !important; animation-iteration-count: 1 !important;
}
:root[data-rv-motion="full"] :is(.mx_RightPanel, .mx_ThreadView) {
  animation-duration: 200ms !important; animation-iteration-count: 1 !important;
}
:root[data-rv-motion="full"] :is(.mx_Dialog_background, .mx_ContextualMenu_background) { animation-duration: 150ms !important; }
:root[data-rv-motion="full"] :is(.mx_Tooltip, [role="tooltip"]) { animation-duration: 120ms !important; }
:root[data-rv-motion="full"] :is([role="menu"][data-state="closed"], [role="dialog"][data-state="closed"]) { animation-duration: 100ms !important; }
:root[data-rv-motion="full"] :is(.mx_RoomHeader button, .mx_MessageComposer button,
  nav[aria-label="Spaces"] button, .mx_Dialog button, .mx_AccessibleButton,
  nav[aria-label="Room list"] button, nav[aria-label="Room list"] [role="button"],
  [role="menuitem"], [role="option"], .mx_EventTile_line, .mx_MessageComposer,
  .mx_BasicMessageComposer, .mx_Field input, .mx_Field textarea) { transition-duration: 120ms !important; }
}