/* FineME v290 — viewport-safe media lightbox, object-only pinch zoom and automatic feed continuation. */

/* The lightbox must always fit inside the visual viewport. v289 used 94dvh plus
   outer padding, which could exceed the desktop viewport on shorter screens. */
.fm-v290 .fm-social-modal-root.fm-media-modal-open{
  --fm-media-edge:clamp(10px,1.5vw,20px);
  box-sizing:border-box!important;
  padding:var(--fm-media-edge)!important;
  overflow:hidden!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
}
.fm-v290 .fm-social-modal.is-media{
  box-sizing:border-box!important;
  width:min(1480px,calc(100vw - (var(--fm-media-edge) * 2)))!important;
  height:min(1040px,calc(100dvh - (var(--fm-media-edge) * 2)))!important;
  max-width:calc(100vw - (var(--fm-media-edge) * 2))!important;
  max-height:calc(100dvh - (var(--fm-media-edge) * 2))!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  inset:auto!important;
  overflow:hidden!important;
}
.fm-v290 .fm-social-modal.is-media .fm-social-modal-body{
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
.fm-v290 .fm-media-viewer,
.fm-v290 .fm-media-stage{
  min-width:0!important;
  min-height:0!important;
}
.fm-v290 .fm-media-stage{
  overflow:hidden!important;
  touch-action:none!important;
  overscroll-behavior:contain!important;
  cursor:zoom-in;
}
.fm-v290 .fm-media-stage.is-zoomed{cursor:grab}
.fm-v290 .fm-media-stage.is-zoomed:active{cursor:grabbing}
.fm-v290 .fm-media-stage img{
  max-width:100%!important;
  max-height:100%!important;
  transform-origin:center center!important;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.fm-v290 .fm-media-stage:not(.is-pinching) img{transition:transform .12s ease-out}
.fm-v290 .fm-media-stage.is-pinching img{transition:none!important}
.fm-v290 .fm-media-viewer.is-zoomed .fm-media-nav{opacity:.72}
.fm-v290 .fm-media-viewer.is-zoomed .fm-media-counter{opacity:.82}

/* Infinite feed: the sentinel is intentionally subtle. There is no manual
   "ดูเพิ่มเติม" control; the next page arrives before the user reaches it. */
.fm-v290 .fm-feed-infinite-sentinel{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:15px 10px 22px;
  color:#818ba3;
  font-size:12px;
  font-weight:750;
  text-align:center;
}
.fm-v290 .fm-feed-infinite-sentinel[hidden]{display:none!important}
.fm-v290 .fm-feed-infinite-sentinel[data-state="loading"]::before{
  content:"";
  width:15px;
  height:15px;
  margin-right:8px;
  border:2px solid rgba(101,87,220,.18);
  border-top-color:#6657dc;
  border-radius:50%;
  animation:fm-v290-spin .7s linear infinite;
}
.fm-v290 .fm-feed-infinite-sentinel[data-state="error"]{color:#a24a5b}
@keyframes fm-v290-spin{to{transform:rotate(360deg)}}

@media(max-width:780px){
  .fm-v290 .fm-social-modal-root.fm-media-modal-open{
    --fm-media-edge:max(6px,env(safe-area-inset-top));
    padding:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom))!important;
  }
  .fm-v290 .fm-social-modal.is-media{
    width:calc(100vw - 12px)!important;
    height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    max-width:calc(100vw - 12px)!important;
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
  }
  .fm-v290 .fm-media-footer{max-height:62px;overflow:hidden}
  .fm-v290 .fm-feed-infinite-sentinel{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
}

@media(max-width:420px){
  .fm-v290 .fm-social-modal.is-media{
    width:calc(100vw - 8px)!important;
    max-width:calc(100vw - 8px)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .fm-v290 .fm-media-stage img{transition:none!important}
  .fm-v290 .fm-feed-infinite-sentinel[data-state="loading"]::before{animation-duration:1.2s}
}