/* FineME v328 — mobile reaction overlays for Feed + Video Feed. */
@media (max-width:760px), (hover:none) and (pointer:coarse){
  /* Opening reaction insights promotes only that post while the mobile overlay is visible. */
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open{
    position:relative!important;
    z-index:7000!important;
    overflow:visible!important;
    isolation:auto!important;
  }
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-social-post-stats,
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-social-post-actions,
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-reaction-action{
    overflow:visible!important;
    isolation:auto!important;
  }
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-reaction-action.is-summary-open{
    position:relative!important;
    z-index:7100!important;
    isolation:auto!important;
  }

  /* This is a viewport overlay, not a card popover, so the next post can never cover it. */
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-reaction-action.is-summary-open .fm-reaction-insights,
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-video-reaction-action.is-summary-open .fm-reaction-insights{
    position:fixed!important;
    left:max(10px,env(safe-area-inset-left))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    bottom:calc(82px + env(safe-area-inset-bottom))!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(56dvh,420px)!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    margin:0!important;
    padding:11px!important;
    border-radius:20px!important;
    z-index:7250!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    box-shadow:0 24px 70px rgba(15,23,45,.34)!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-reaction-insights::before{display:none!important}

  /* Keep the content compact on phones. */
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-reaction-insights header{gap:8px!important;padding-bottom:8px!important;margin-bottom:4px!important}
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-reaction-insights header strong{font-size:11.5px!important}
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-reaction-insights header [data-fm-reaction-current-status]{font-size:8px!important}
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-reaction-insight-row{grid-template-columns:30px minmax(0,1fr) 38px!important;gap:7px!important;padding:5px 4px!important}
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-reaction-insight-emoji{width:29px!important;height:29px!important;font-size:17px!important}
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-reaction-insights footer{font-size:7px!important;padding-top:7px!important}
}

@media (max-width:390px){
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-reaction-action.is-summary-open .fm-reaction-insights,
  .fm-v328 [data-fm-post-id].fm-reaction-overlay-open .fm-video-reaction-action.is-summary-open .fm-reaction-insights{
    left:max(7px,env(safe-area-inset-left))!important;
    right:max(7px,env(safe-area-inset-right))!important;
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    padding:9px!important;
    border-radius:18px!important;
  }
}

/* v328 — video Reaction summary: close affordance + tap-away layer that never toggles playback. */
.fm-v328 .fm-reaction-mobile-scrim[hidden]{display:none!important}
@media (max-width:760px), (hover:none) and (pointer:coarse){
  .fm-v328 .fm-reaction-mobile-scrim{
    position:fixed!important;
    inset:0!important;
    z-index:7200!important;
    display:block!important;
    background:rgba(6,11,22,.08)!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .fm-v328 .fm-video-reaction-action.is-summary-open .fm-reaction-insights{
    z-index:7260!important;
    padding-top:12px!important;
  }
  .fm-v328 .fm-video-reaction-action.is-summary-open .fm-reaction-insights header{
    padding-right:38px!important;
  }
  .fm-v328 .fm-reaction-summary-close{
    position:absolute!important;
    top:9px!important;
    right:9px!important;
    z-index:3!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(218,224,236,.96)!important;
    border-radius:50%!important;
    background:linear-gradient(180deg,#fff,#f1f4fa)!important;
    color:#66728a!important;
    font-size:21px!important;
    line-height:1!important;
    font-weight:500!important;
    box-shadow:0 6px 16px rgba(25,36,62,.12)!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .fm-v328 .fm-reaction-summary-close:active{
    transform:scale(.94)!important;
    background:#ebeefe!important;
    color:#5f56da!important;
  }
  html.fm-video-reaction-summary-open,
  html.fm-video-reaction-summary-open body{
    overscroll-behavior:contain!important;
  }
}

@media (max-width:390px){
  .fm-v328 .fm-reaction-summary-close{
    top:8px!important;
    right:8px!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    font-size:20px!important;
  }
  .fm-v328 .fm-video-reaction-action.is-summary-open .fm-reaction-insights header{
    padding-right:34px!important;
  }
}