/* Motion is kept on transform/opacity; scrolling itself stays native. */
:root {
  --motion-fast: 120ms;
  --motion-enter: 210ms;
  --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sidebar-list.virtualized {
  min-height: 0;
  overflow-anchor: none;
  scrollbar-gutter: stable;
}
.virtualized > .chat-tile {
  height: var(--chat-row-height);
  min-height: var(--chat-row-height);
  flex: 0 0 var(--chat-row-height);
  contain: layout style;
}
.virtualized > .chat-date-section {
  height: 28px;
  flex: 0 0 28px;
  box-sizing: border-box;
  overflow: hidden;
}
.chat-list-spacer {
  flex: 0 0 auto;
  width: 100%;
  pointer-events: none;
}
.sidebar-list, .messages-viewport, .modal-body, .folder-bar {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.messages-viewport { scrollbar-gutter: stable; }

/* These panels border a moving viewport. Live blur can require expensive
   re-rasterization on older integrated GPUs/software-rendered browsers. */
.chat-room-header, .pinned-banner, .composer-bar, .composer-reply-bar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-surface);
}

.icon-btn, .folder-chip, .mobile-nav-item, .drawer-item, .fab-btn,
.composer-send-btn, .auth-switch-btn, .auth-btn-primary, .chat-tile {
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease,
    opacity var(--motion-fast) ease, transform 160ms var(--ease-soft),
    box-shadow 160ms var(--ease-soft);
}
.icon-btn:active:not(:disabled), .fab-btn:active:not(:disabled),
.composer-send-btn:active:not(:disabled) { transform: scale(0.93); }
.folder-chip:active:not(:disabled), .auth-switch-btn:active:not(:disabled),
.auth-btn-primary:active:not(:disabled) { transform: scale(0.975); }
.chat-tile:active { background-color: var(--bg-active); }
.mobile-nav-item:active { opacity: 0.7; }
.drawer-item:active { background-color: var(--bg-active); }
.mobile-nav-item .icon-svg { transition: transform 180ms var(--ease-soft); }
.mobile-nav-item.active .icon-svg { transform: translateY(-1px); }
button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.modal-backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: soft-backdrop-in 160ms ease-out;
}
.modal-card { animation: soft-panel-in var(--motion-enter) var(--ease-soft); }
.context-menu { animation: soft-menu-in 150ms var(--ease-soft); transform-origin: top center; }
.emoji-picker { animation: soft-panel-in 160ms var(--ease-soft); }
@keyframes soft-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes soft-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes soft-menu-in {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* A user's accessibility preference takes precedence over the visual polish. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}