/* FB Lite Loader - Skeleton Shimmer + smooth content transition */
:root{
  --fbl-bg:#f6f7f8; --fbl-card:#fff; --fbl-skeleton:#e9ebee; --fbl-highlight:#f5f6f7; --fbl-radius:12px;
}
html.fbl-loading body > *{ visibility:hidden !important; }
html.fbl-loading #fbl-overlay{ visibility:visible !important; }
html.fbl-loading, html.fbl-loading body{ overflow:hidden; }

/* content fade-in */
html.fbl-ready body{ opacity:1; transition: opacity 220ms ease; }
html:not(.fbl-ready) body{ opacity:0; }

#fbl-overlay{
  position:fixed; inset:0; z-index:2147483000;
  background:var(--fbl-bg);
  display:none; opacity:1;
  transition: opacity 280ms ease, transform 280ms ease;
  transform: translateY(0);
  will-change: opacity, transform;
}
html.fbl-loading #fbl-overlay{ display:block; }
#fbl-overlay.fbl-fadeout{ opacity:0; pointer-events:none; transform: translateY(-4px); }

#fbl-overlay .fbl-shell{ max-width:980px; margin:0 auto; padding:20px; }
#fbl-overlay .fbl-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 14px 8px;
  background:var(--fbl-card); border-radius:var(--fbl-radius);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
#fbl-overlay .fbl-avatar{ width:48px; height:48px; border-radius:999px; background:var(--fbl-skeleton); flex:0 0 auto; }
#fbl-overlay .fbl-meta{ flex:1 1 auto; }
#fbl-overlay .fbl-line{ height:12px; border-radius:999px; margin:10px 0; background:var(--fbl-skeleton); }
#fbl-overlay .fbl-w-90{width:90%} .fbl-w-88{width:88%} .fbl-w-85{width:85%}
#fbl-overlay .fbl-w-80{width:80%} .fbl-w-72{width:72%} .fbl-w-70{width:70%}
#fbl-overlay .fbl-w-66{width:66%} .fbl-w-60{width:60%} .fbl-w-55{width:55%}
#fbl-overlay .fbl-w-50{width:50%} .fbl-w-35{width:35%}

#fbl-overlay .fbl-card{
  margin-top:14px; padding:14px;
  background:var(--fbl-card); border-radius:var(--fbl-radius);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
#fbl-overlay .fbl-box{ height:180px; border-radius:10px; background:var(--fbl-skeleton); }
#fbl-overlay .fbl-spacer{ height:8px; }

#fbl-overlay .fbl-shimmer{ position:relative; overflow:hidden; }
#fbl-overlay .fbl-shimmer::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background-image: linear-gradient(90deg, rgba(233,235,238,0) 0%, rgba(245,246,247,1) 50%, rgba(233,235,238,0) 100%);
  animation:fbl-shimmer 1.15s infinite;
}
@keyframes fbl-shimmer{ 0%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }

@media (max-width:640px){
  #fbl-overlay .fbl-shell{ padding:14px; }
  #fbl-overlay .fbl-row{ padding:12px; }
  #fbl-overlay .fbl-avatar{ width:42px; height:42px; }
  #fbl-overlay .fbl-box{ height:120px; }
  #fbl-overlay .fbl-card-compact{ display:none; }
  html[data-fbl-mcompact="false"] #fbl-overlay .fbl-card-compact{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  #fbl-overlay .fbl-shimmer::after{ animation:none; }
  #fbl-overlay, html.fbl-ready body{ transition:none; }
}
