/* =========================================================
   Yapper v3.60 — motion polish
   Smoother, springier interactions without changing layout.
   ========================================================= */

:root {
  --yapper-motion-spring: cubic-bezier(.16, 1, .3, 1);
  --yapper-motion-soft: cubic-bezier(.22, .75, .25, 1);
  --yapper-motion-press: cubic-bezier(.2, .8, .2, 1);
  --yapper-motion-fast: 150ms;
  --yapper-motion-ui: 230ms;
  --yapper-motion-menu: 285ms;
  --yapper-motion-surface: 360ms;
}

/* Buttons and tappable controls: soft lift + quick compression. */
button:not(:disabled),
[role="button"],
.mobile-dock-tab,
.mobile-dock-edge-button,
.mobile-dock-create-button,
.theme-button,
.music-platform-choice,
.app-wallpaper-choice,
.notification-item,
.search-result,
.connection-item,
.saved-account-item,
.dm-inbox-item,
.dm-search-result,
.dm-group-search-result,
.composer-attachment-menu-item,
.post-actions button,
.profile-main-actions > button,
.profile-edit-actions > button,
.profile-edit-persistent-actions > button {
  transform-origin: center !important;
  transition-property: transform, background-color, border-color, color, opacity, box-shadow !important;
  transition-duration: var(--yapper-motion-ui) !important;
  transition-timing-function: var(--yapper-motion-spring) !important;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover,
  [role="button"]:hover,
  .mobile-dock-tab:hover,
  .theme-button:hover,
  .music-platform-choice:hover,
  .app-wallpaper-choice:hover,
  .notification-item:hover,
  .search-result:hover,
  .connection-item:hover,
  .saved-account-item:hover,
  .dm-inbox-item:hover,
  .dm-search-result:hover,
  .dm-group-search-result:hover,
  .composer-attachment-menu-item:hover,
  .post-actions button:hover {
    transform: translateY(-1px) scale(1.012) !important;
  }
}

button:not(:disabled):active,
[role="button"]:active,
.mobile-dock-tab:active,
.mobile-dock-edge-button:active,
.mobile-dock-create-button:active,
.theme-button:active,
.music-platform-choice:active,
.app-wallpaper-choice:active,
.notification-item:active,
.search-result:active,
.connection-item:active,
.saved-account-item:active,
.dm-inbox-item:active,
.dm-search-result:active,
.dm-group-search-result:active,
.composer-attachment-menu-item:active,
.post-actions button:active,
.profile-main-actions > button:active {
  transform: scale(.955) !important;
  transition-duration: 85ms !important;
  transition-timing-function: var(--yapper-motion-press) !important;
}

/* Like state gets one tiny pop instead of abruptly changing fill. */
.like-button .heart-icon,
.story-like svg,
.story-comment-actions [data-comment-action="like"] svg {
  transform-origin: center;
  transition: transform 240ms var(--yapper-motion-spring), fill 180ms ease, color 180ms ease !important;
}

.like-button.liked .heart-icon,
.story-like[aria-pressed="true"] svg,
.story-comment-actions [data-comment-action="like"][aria-pressed="true"] svg {
  animation: yapperHeartPop 360ms var(--yapper-motion-spring) both;
}

/* Feed/content entry. Only runs when nodes are actually inserted/rebuilt. */
#yapFeed > .yap,
.search-results > .search-result,
.notifications-list > .notification-item,
.profile-connections-list > .connection-item,
.dm-search-results > .dm-search-result,
.dm-group-search-results > .dm-group-search-result {
  animation: yapperContentIn 390ms var(--yapper-motion-spring) both;
}

/* Small popup menus. */
.composer-attachment-menu:not(.hidden),
.dm-snippets-menu:not(.hidden),
.profile-status-duration-menu:not(.hidden):not(.is-closing),
.dm-message-row.message-menu-open .dm-message-menu,
.dm-group-member.is-menu-open .dm-group-member-menu,
#storyDialog .story-menu:not(.hidden) {
  animation: yapperMenuIn var(--yapper-motion-menu) var(--yapper-motion-spring) both !important;
  will-change: transform, opacity;
}

/* Main overlays: fade the scrim, then let the surface settle into place. */
.modal-overlay:not(.hidden),
.settings-overlay:not(.hidden),
.device-preferences-overlay:not(.hidden),
.authentication-overlay:not(.hidden),
.notifications-overlay:not(.hidden),
.search-overlay:not(.hidden),
.profile-overlay:not(.hidden),
.account-switcher-overlay:not(.hidden),
.snippet-editor-overlay:not(.hidden),
.customization-overlay:not(.hidden),
.yapper-plus-overlay:not(.hidden),
.yap-share-overlay:not(.hidden),
.dm-overlay:not(.hidden) {
  animation: yapperBackdropIn 210ms ease-out both !important;
}

.modal-overlay:not(.hidden) > .modal-surface,
.modal-overlay:not(.hidden) > .delete-modal,
.settings-overlay:not(.hidden) .settings-modal,
.device-preferences-overlay:not(.hidden) .device-preferences-modal,
.authentication-overlay:not(.hidden) .authentication-modal,
.notifications-overlay:not(.hidden) .notifications-modal,
.search-overlay:not(.hidden) .search-modal,
.profile-overlay:not(.hidden) .profile-modal,
.account-switcher-overlay:not(.hidden) .account-switcher-modal,
.snippet-editor-overlay:not(.hidden) .snippet-editor-modal,
.customization-overlay:not(.hidden) .customization-modal,
.yapper-plus-overlay:not(.hidden) .yapper-plus-modal,
.yap-share-overlay:not(.hidden) .yap-share-modal,
.dm-overlay:not(.hidden) .dm-modal {
  animation: yapperSurfaceIn var(--yapper-motion-surface) var(--yapper-motion-spring) both !important;
  will-change: transform, opacity;
}

/* Panels that replace content inside an already-open surface. */
.dm-contact-info-panel:not(.hidden),
.dm-theme-panel:not(.hidden),
.profile-connections-panel:not(.hidden),
.plus-editor-panel.mobile-active {
  animation: yapperPanelIn 330ms var(--yapper-motion-spring) both !important;
}

/* The mobile dock keeps its existing long shrink/expand motion, but icon taps
   and the moving selection capsule settle more naturally. */
.mobile-dock-highlight {
  transition-timing-function: var(--yapper-motion-spring) !important;
}

.mobile-dock-tab,
.mobile-dock-edge-button,
.mobile-dock-create-button {
  transition-duration: 210ms !important;
  transition-timing-function: var(--yapper-motion-spring) !important;
}

/* Inputs/focus changes no longer snap. */
input,
textarea,
select {
  transition: border-color 190ms ease, background-color 230ms ease, box-shadow 230ms var(--yapper-motion-soft), color 190ms ease !important;
}

@keyframes yapperBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes yapperSurfaceIn {
  0% { opacity: 0; transform: translateY(14px) scale(.965); }
  68% { opacity: 1; transform: translateY(-1px) scale(1.006); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yapperMenuIn {
  0% { opacity: 0; transform: translateY(8px) scale(.94); }
  72% { opacity: 1; transform: translateY(-1px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yapperPanelIn {
  0% { opacity: 0; transform: translateX(10px) scale(.99); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes yapperContentIn {
  0% { opacity: 0; transform: translateY(10px) scale(.988); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yapperHeartPop {
  0% { transform: scale(.82); }
  58% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* On phones, keep the same motion but shorten the travel so it never feels
   like a bottom-sheet animation. */
@media (max-width: 700px) {
  @keyframes yapperSurfaceIn {
    0% { opacity: 0; transform: translateY(9px) scale(.978); }
    70% { opacity: 1; transform: translateY(-.5px) scale(1.004); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}