/* ==========================================================================
   Facebook Theme - High-Performance Frontend Engine Styles
   Implements Virtual Scrolling / Windowing & Optimistic UI Enhancements
   ========================================================================== */

/* 1. Virtual Windowing: Native Browser Layout & Paint Containment with Auto Height Memory */
.post {
  content-visibility: auto;
  contain-intrinsic-size: auto 550px;
}

/* De-contain on interaction to prevent stacking context or menu clipping */
.post:hover,
.post:focus-within,
.post.is-active,
.post.has-open-dropdown,
.post.show,
.post:has(.dropdown-menu.show),
.post:has(.reactions-container:hover) {
  content-visibility: visible !important;
}

/* Standalone posts, modals, and lightbox views do not need containment */
.post.standalone,
.modal .post,
.lightbox-post .post,
.yt-watch-theater-container .post {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* 2. Optimistic UI Smooth Transitions */
.js_react-post,
.js_like-post,
.js_save-post,
.js_unsave-post,
.reactions-wrapper {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease !important;
}

.js_react-post:active,
.js_like-post:active,
.js_save-post:active,
.reactions-wrapper:active {
  transform: scale(0.92) !important;
}

/* Optimistic Like / Reaction State (Immediate 0ms Visual Feedback) */
.js_like-post.optimistic-active,
.js_react-post.optimistic-active,
.reactions-wrapper.optimistic-active .reaction-btn-name {
  color: #1877f2 !important;
  font-weight: 600 !important;
}

.js_like-post.optimistic-active svg,
.js_react-post.optimistic-active svg,
.reactions-wrapper.optimistic-active .reaction-btn-icon svg {
  fill: #1877f2 !important;
  transform: scale(1.1);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.night-mode .js_like-post.optimistic-active,
body.night-mode .js_react-post.optimistic-active,
body.night-mode .reactions-wrapper.optimistic-active .reaction-btn-name {
  color: #2d88ff !important;
}

body.night-mode .js_like-post.optimistic-active svg,
body.night-mode .js_react-post.optimistic-active svg,
body.night-mode .reactions-wrapper.optimistic-active .reaction-btn-icon svg {
  fill: #2d88ff !important;
}

/* 3. Image & Media Lazy Loading Transitions */
img.lazy-load-ready {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img.lazy-load-ready.loaded {
  opacity: 1;
}

/* 4. Search Results Performance Polish */
.dropdown-search {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* 5. Optimistic Rollback Tactile Feedback (Flicker-Free Smooth Recovery) */
.optimistic-rollback {
  animation: fbRollbackPulse 0.5s ease-out forwards;
}

@keyframes fbRollbackPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  35% {
    transform: scale(0.94);
    filter: brightness(0.85);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.02);
    filter: brightness(1.05);
    opacity: 0.95;
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
    opacity: 1;
  }
}