/* FineME v325 — mobile reaction picker, compact breakdown, and selected-state correctness. */

/* Absolute safeguard: a check mark can only exist visually when the actual reaction button is pressed. */
.fm-v324 .fm-js-reaction:not([aria-pressed="true"]) .fm-reaction-selected-mark,
.fm-v324 .fm-js-reaction .fm-reaction-selected-mark[hidden]{display:none!important}
.fm-v324 .fm-js-reaction[aria-pressed="true"] .fm-reaction-selected-mark:not([hidden]){display:grid!important}

/* Reaction controls cloned into the post popup stay interactive instead of becoming a dead preview. */
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-social-post-stats{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;min-height:48px!important;
  padding:8px 14px!important;border-top:1px solid #eef1f7!important;border-bottom:1px solid #eef1f7!important;
  background:linear-gradient(180deg,#fff,#fafbff)!important;overflow:visible!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-summary-button{
  min-height:34px!important;padding:6px 10px!important;border-radius:999px!important;background:#f5f4ff!important;
  color:#5f58d9!important;box-shadow:inset 0 0 0 1px rgba(111,87,225,.10)!important;cursor:pointer!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-summary-button:hover,
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-summary-button[aria-expanded="true"]{
  background:linear-gradient(135deg,#eeebff,#fff2fa)!important;box-shadow:inset 0 0 0 1px rgba(111,87,225,.18)!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-social-post-actions{
  position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;
  padding:9px 14px 12px!important;border-top:0!important;background:#fff!important;overflow:visible!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-social-post-actions>.fm-reaction-action{
  width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;position:relative!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-social-post-actions>.fm-reaction-action>.fm-js-reaction{
  width:100%!important;min-height:42px!important;border-radius:14px!important;background:linear-gradient(180deg,#fff,#f7f9fe)!important;
  box-shadow:inset 0 0 0 1px #e7ebf4!important;color:#55627a!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-social-post-actions>.fm-reaction-action>.fm-js-reaction.is-active{
  background:linear-gradient(135deg,#f1eeff,#fff4fa)!important;color:#6257db!important;
  box-shadow:inset 0 0 0 1px rgba(111,87,225,.18)!important
}

/* In a modal, the breakdown expands inline so it cannot be clipped by the post card. */
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-insights{
  position:static!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;
  display:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
  margin:0!important;padding:13px!important;border-radius:18px!important;border:1px solid #e6eaf2!important;
  background:linear-gradient(180deg,#fff,#f8f9fe)!important;box-shadow:0 12px 28px rgba(32,45,76,.08)!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-action.is-summary-open .fm-reaction-insights{
  display:block!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-insights:before{display:none!important}

/* Emoji picker also becomes an inline, easy-to-hit row inside the popup. */
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-picker{
  position:static!important;left:auto!important;right:auto!important;bottom:auto!important;width:max-content!important;max-width:100%!important;
  display:none!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
  margin:0!important;padding:7px!important;border-radius:16px!important;background:#fff!important;border:1px solid #e6eaf2!important;
  box-shadow:0 10px 24px rgba(31,44,76,.10)!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-action.is-picker-open .fm-reaction-picker,
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-action .fm-reaction-picker:hover,
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-action .fm-reaction-picker:focus-within{
  display:flex!important
}

/* Video post popup: retain only the Reaction rail and render it as a clean block under the video. */
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview.shadow-video-card .shadow-video-actions{
  position:static!important;inset:auto!important;width:auto!important;height:auto!important;display:block!important;
  padding:10px 12px 12px!important;margin:0!important;background:linear-gradient(180deg,rgba(10,17,30,.94),rgba(15,24,40,.98))!important;
  border-top:1px solid rgba(255,255,255,.08)!important;transform:none!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview.shadow-video-card .fm-video-reaction-action{
  width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;
  position:relative!important;z-index:3!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview.shadow-video-card .fm-video-reaction-action>.fm-js-reaction{
  width:100%!important;min-height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  border-radius:15px!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview.shadow-video-card .fm-video-reaction-summary-toggle{
  position:static!important;min-height:44px!important;padding:8px 11px!important;border-radius:15px!important
}
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview.shadow-video-card .fm-video-reaction-action .fm-reaction-picker,
.fm-v324 .fm-social-modal.is-post .fm-modal-post-preview.shadow-video-card .fm-video-reaction-action .fm-reaction-insights{
  grid-column:1/-1!important;width:100%!important;max-width:none!important
}

@media(max-width:700px){
  .fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-social-post-stats{padding:7px 10px!important}
  .fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-social-post-actions{padding:8px 10px 10px!important}
  .fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-picker{width:100%!important;justify-content:space-around!important}
  .fm-v324 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-picker button{flex:1 1 0!important;max-width:70px!important}
}

/* FineME v325 — mobile-first reaction controls + no phantom check marks. */
.fm-v325 .fm-reaction-selected-mark{display:none!important}
.fm-v325 .fm-js-reaction.is-active[aria-pressed="true"]>.fm-reaction-selected-mark{display:grid!important}
/* The chooser no longer paints a detached purple ✓ pseudo-element. Selected choices use the card highlight instead. */
.fm-v325 .fm-reaction-picker button::after{display:none!important;content:none!important}
.fm-v325 .fm-reaction-picker button.is-selected{background:#f1efff!important;box-shadow:inset 0 0 0 1px rgba(111,87,225,.22)!important}

@media(max-width:760px),(hover:none) and (pointer:coarse){
  /* On phones a normal tap opens all reactions. Keep the chooser inside the viewport. */
  .fm-v325 .fm-reaction-action:not(.fm-social-modal .fm-reaction-action) .fm-reaction-picker,
  .fm-v325 .fm-video-reaction-action:not(.fm-social-modal .fm-video-reaction-action) .fm-reaction-picker{
    position:fixed!important;left:12px!important;right:12px!important;bottom:calc(74px + env(safe-area-inset-bottom))!important;
    width:auto!important;max-width:none!important;height:auto!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;padding:10px!important;border-radius:20px!important;background:rgba(255,255,255,.985)!important;
    border:1px solid rgba(224,229,239,.96)!important;box-shadow:0 20px 55px rgba(20,30,56,.28)!important;
    backdrop-filter:blur(18px)!important;transform:translateY(10px) scale(.98)!important;transform-origin:center bottom!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;z-index:6200!important
  }
  .fm-v325 .fm-reaction-action.is-picker-open:not(.fm-social-modal .fm-reaction-action) .fm-reaction-picker,
  .fm-v325 .fm-video-reaction-action.is-picker-open:not(.fm-social-modal .fm-video-reaction-action) .fm-reaction-picker{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important
  }
  .fm-v325 .fm-reaction-action:not(.fm-social-modal .fm-reaction-action) .fm-reaction-picker button,
  .fm-v325 .fm-video-reaction-action:not(.fm-social-modal .fm-video-reaction-action) .fm-reaction-picker button{
    width:100%!important;min-width:0!important;max-width:none!important;height:58px!important;border-radius:15px!important;
    display:grid!important;place-items:center!important;align-content:center!important;gap:3px!important;padding:5px 2px!important
  }
  .fm-v325 .fm-reaction-action:not(.fm-social-modal .fm-reaction-action) .fm-reaction-picker button>span,
  .fm-v325 .fm-video-reaction-action:not(.fm-social-modal .fm-video-reaction-action) .fm-reaction-picker button>span{font-size:26px!important}
  .fm-v325 .fm-reaction-action:not(.fm-social-modal .fm-reaction-action) .fm-reaction-picker button>small,
  .fm-v325 .fm-video-reaction-action:not(.fm-social-modal .fm-video-reaction-action) .fm-reaction-picker button>small{font-size:9px!important;font-weight:850!important}

  /* Reaction breakdown is compact and viewport-bounded on mobile. */
  .fm-v325 .fm-reaction-action:not(.fm-social-modal .fm-reaction-action) .fm-reaction-insights,
  .fm-v325 .fm-video-reaction-action:not(.fm-social-modal .fm-video-reaction-action) .fm-reaction-insights{
    position:fixed!important;left:12px!important;right:12px!important;bottom:calc(76px + env(safe-area-inset-bottom))!important;
    width:auto!important;max-width:none!important;max-height:min(58dvh,440px)!important;overflow:auto!important;
    margin:0!important;padding:11px!important;border-radius:20px!important;z-index:6190!important;transform:translateY(10px) scale(.98)!important;
    transform-origin:center bottom!important
  }
  .fm-v325 .fm-reaction-action.is-summary-open:not(.fm-social-modal .fm-reaction-action) .fm-reaction-insights,
  .fm-v325 .fm-video-reaction-action.is-summary-open:not(.fm-social-modal .fm-video-reaction-action) .fm-reaction-insights{transform:none!important}
  .fm-v325 .fm-reaction-action:not(.fm-social-modal .fm-reaction-action) .fm-reaction-insights::before,
  .fm-v325 .fm-video-reaction-action:not(.fm-social-modal .fm-video-reaction-action) .fm-reaction-insights::before{display:none!important}
  .fm-v325 .fm-reaction-insights header{padding-bottom:8px!important;margin-bottom:4px!important}
  .fm-v325 .fm-reaction-insight-row{grid-template-columns:30px minmax(0,1fr) 38px!important;gap:7px!important;padding:5px 4px!important}
  .fm-v325 .fm-reaction-insight-emoji{width:29px!important;height:29px!important;font-size:17px!important}
  .fm-v325 .fm-reaction-insight-copy strong{font-size:9px!important}
  .fm-v325 .fm-reaction-insights footer{font-size:7px!important;padding-top:7px!important}

  /* The small summary trigger must not expand beyond the post stat row. */
  .fm-v325 .fm-reaction-summary-button{max-width:min(64vw,220px)!important;min-width:0!important;padding:5px 7px!important;gap:4px!important;overflow:hidden!important}
  .fm-v325 .fm-reaction-summary-icons{max-width:92px!important;overflow:hidden!important;white-space:nowrap!important;flex-shrink:1!important}
  .fm-v325 .fm-reaction-summary-icons i{width:18px!important;height:18px!important;font-size:11px!important}
  .fm-v325 .fm-reaction-summary-button>[data-fm-reaction-count]{font-size:10px!important}
  .fm-v325 .fm-reaction-stat-label{display:none!important}
  .fm-v325 .fm-reaction-stat-chevron{font-size:9px!important;flex:0 0 auto!important}

  /* Inside the post modal the existing inline layout remains touch friendly and never becomes fixed. */
  .fm-v325 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-picker{
    position:static!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:100%!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;padding:7px!important;gap:5px!important;z-index:auto!important
  }
  .fm-v325 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-picker button{height:52px!important;max-width:none!important}
  .fm-v325 .fm-social-modal.is-post .fm-modal-post-preview .fm-reaction-insights{
    position:static!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:100%!important;
    max-height:none!important;overflow:visible!important;transform:none!important;z-index:auto!important
  }
}

@media(max-width:390px){
  .fm-v325 .fm-reaction-summary-button{max-width:58vw!important}
  .fm-v325 .fm-reaction-summary-icons{max-width:76px!important}
  .fm-v325 .fm-reaction-action:not(.fm-social-modal .fm-reaction-action) .fm-reaction-picker,
  .fm-v325 .fm-video-reaction-action:not(.fm-social-modal .fm-video-reaction-action) .fm-reaction-picker,
  .fm-v325 .fm-reaction-action:not(.fm-social-modal .fm-reaction-action) .fm-reaction-insights,
  .fm-v325 .fm-video-reaction-action:not(.fm-social-modal .fm-video-reaction-action) .fm-reaction-insights{left:8px!important;right:8px!important}
}