/* FineME v321 — unified Wow/reaction insights for Feed + Video Feed. */
.fm-v321 .fm-reaction-action{position:relative!important;isolation:isolate}

/* Reaction summary trigger in the main feed. */
.fm-v321 .fm-reaction-summary-button{
  display:inline-flex!important;align-items:center!important;gap:5px!important;
  min-height:28px!important;padding:3px 7px 3px 2px!important;border-radius:999px!important;
  text-decoration:none!important;transition:background .14s ease,color .14s ease,transform .14s ease!important;
}
.fm-v321 .fm-reaction-summary-button:hover,
.fm-v321 .fm-reaction-summary-button[aria-expanded="true"]{background:#f4f2ff!important;color:#5f55d9!important;text-decoration:none!important}
.fm-v321 .fm-reaction-summary-button:active{transform:scale(.98)}
.fm-v321 .fm-reaction-summary-icons{display:inline-flex!important;align-items:center!important;padding-left:3px!important}
.fm-v321 .fm-reaction-summary-icons i{
  display:grid!important;place-items:center!important;width:19px!important;height:19px!important;margin-left:-4px!important;
  border-radius:50%!important;background:#fff!important;box-shadow:0 0 0 1.5px #fff,0 1px 4px rgba(44,53,78,.16)!important;
  font-style:normal!important;font-size:12px!important;line-height:1!important
}
.fm-v321 .fm-reaction-summary-icons i:first-child{margin-left:0!important}
.fm-v321 .fm-reaction-stat-label{font-size:10px!important;font-weight:750!important;color:#8a94a6!important}
.fm-v321 .fm-reaction-stat-chevron{font-size:11px!important;line-height:1!important;color:#9da5b3!important;transition:transform .14s ease!important}
.fm-v321 [data-fm-reaction-summary-toggle][aria-expanded="true"] .fm-reaction-stat-chevron{transform:rotate(180deg)}

/* Main reaction button has a visible selected state instead of relying on color alone. */
.fm-v321 .fm-js-reaction{position:relative!important;overflow:visible!important;transition:background .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease!important}
.fm-v321 .fm-social-post-actions .fm-reaction-action>.fm-js-reaction.is-active{
  background:linear-gradient(135deg,#f5f2ff,#fff7fb)!important;
  box-shadow:inset 0 0 0 1px rgba(111,87,225,.13)!important;
  color:#6754d8!important
}
.fm-v321 .fm-reaction-selected-mark{
  display:none!important;position:absolute!important;right:8px!important;top:6px!important;width:14px!important;height:14px!important;
  place-items:center!important;border-radius:50%!important;background:#6f57e1!important;color:#fff!important;font-size:8px!important;font-weight:950!important;line-height:1!important;
  box-shadow:0 2px 7px rgba(72,56,170,.25)!important
}
.fm-v321 .fm-js-reaction.is-active .fm-reaction-selected-mark{display:grid!important}
.fm-v321 .fm-js-reaction.is-reaction-pop{animation:fmReactionPop321 .34s cubic-bezier(.2,.82,.26,1.2)}
@keyframes fmReactionPop321{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}

/* Shared emoji chooser. */
.fm-v321 .fm-reaction-picker{
  gap:4px!important;padding:6px!important;border:1px solid #e1e4ed!important;border-radius:18px!important;
  background:rgba(255,255,255,.98)!important;box-shadow:0 14px 36px rgba(35,46,78,.22)!important;backdrop-filter:blur(18px)!important
}
.fm-v321 .fm-social-post-actions .fm-reaction-picker{left:0!important;bottom:45px!important}
.fm-v321 .fm-reaction-picker button{
  width:46px!important;height:48px!important;display:grid!important;place-items:center!important;align-content:center!important;gap:2px!important;
  border-radius:13px!important;background:transparent!important;transition:transform .13s ease,background .13s ease,box-shadow .13s ease!important
}
.fm-v321 .fm-reaction-picker button>span{font-size:24px!important;line-height:1!important}
.fm-v321 .fm-reaction-picker button>small{display:block!important;font-size:7px!important;line-height:1!important;font-weight:850!important;color:#6f7b90!important}
.fm-v321 .fm-reaction-picker button:hover,.fm-v321 .fm-reaction-picker button:focus-visible{background:#f5f3ff!important;transform:translateY(-3px) scale(1.04)!important;outline:none!important}
.fm-v321 .fm-reaction-picker button.is-selected{background:#f0edff!important;box-shadow:inset 0 0 0 1px rgba(111,87,225,.18)!important}
.fm-v321 .fm-reaction-picker button.is-selected:after{content:'✓';position:absolute;margin:0 0 30px 30px;width:13px;height:13px;display:grid;place-items:center;border-radius:50%;background:#6f57e1;color:#fff;font-size:7px;font-weight:950;box-shadow:0 1px 4px rgba(0,0,0,.16)}
.fm-v321 .fm-reaction-picker button{position:relative!important}
.fm-v321 .fm-reaction-action.is-summary-open .fm-reaction-picker{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(5px) scale(.96)!important}

/* Shared breakdown card. */
.fm-v321 .fm-reaction-insights{
  position:absolute;left:0;bottom:46px;width:292px;max-width:calc(100vw - 24px);padding:12px;
  border:1px solid #e1e5ef;border-radius:18px;background:rgba(255,255,255,.985);backdrop-filter:blur(20px);
  box-shadow:0 20px 55px rgba(30,42,73,.24);color:#26334b;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px) scale(.97);transform-origin:left bottom;
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;z-index:90
}
.fm-v321 .fm-reaction-action.is-summary-open .fm-reaction-insights{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.fm-v321 .fm-reaction-insights:before{content:'';position:absolute;left:24px;bottom:-6px;width:12px;height:12px;background:#fff;border-right:1px solid #e1e5ef;border-bottom:1px solid #e1e5ef;transform:rotate(45deg)}
.fm-v321 .fm-reaction-insights header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:1px 1px 10px;margin-bottom:6px;border-bottom:1px solid #edf0f5}
.fm-v321 .fm-reaction-insights header>div{min-width:0;display:grid;gap:3px}
.fm-v321 .fm-reaction-insights header strong{font-size:12px;line-height:1.35;color:#27334a}
.fm-v321 .fm-reaction-insights header [data-fm-reaction-current-status]{font-size:8.5px;line-height:1.35;color:#818ca0;font-weight:700}
.fm-v321 .fm-reaction-insights header>b{min-width:48px;display:grid;justify-items:end;line-height:1}
.fm-v321 .fm-reaction-insights header>b>span{font-size:15px;color:#6357d8}
.fm-v321 .fm-reaction-insights header>b>small{margin-top:3px;font-size:7px;color:#9aa3b3;font-weight:750}
.fm-v321 .fm-reaction-insight-row{display:grid;grid-template-columns:34px minmax(0,1fr) 40px;align-items:center;gap:8px;padding:6px 5px;border-radius:12px;transition:background .13s ease,box-shadow .13s ease}
.fm-v321 .fm-reaction-insight-row.is-active{background:linear-gradient(90deg,#f3f0ff,#fff7fb);box-shadow:inset 0 0 0 1px rgba(111,87,225,.10)}
.fm-v321 .fm-reaction-insight-row.is-active .fm-reaction-insight-copy strong:after{content:' · คุณ';color:#6f57e1;font-size:7px;font-weight:900}
.fm-v321 .fm-reaction-insight-emoji{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#f7f8fb;font-size:19px;box-shadow:inset 0 0 0 1px #eef0f5}
.fm-v321 .fm-reaction-insight-copy{min-width:0;display:grid;gap:5px}
.fm-v321 .fm-reaction-insight-copy strong{font-size:9px;color:#526078}
.fm-v321 .fm-reaction-insight-copy>i{display:block;height:5px;border-radius:999px;background:#eef1f6;overflow:hidden}
.fm-v321 .fm-reaction-insight-copy>i>span{display:block;height:100%;min-width:0;border-radius:inherit;background:linear-gradient(90deg,#7468ee,#df70b0);transition:width .22s ease}
.fm-v321 .fm-reaction-insight-value{display:grid;justify-items:end;gap:1px}
.fm-v321 .fm-reaction-insight-value>b{font-size:10px;color:#35425a}
.fm-v321 .fm-reaction-insight-value>small{font-size:7px;color:#9ba4b3;font-weight:750}
.fm-v321 .fm-reaction-insight-row.is-zero{opacity:.55}
.fm-v321 .fm-reaction-insights footer{margin-top:6px;padding:8px 5px 1px;border-top:1px solid #f0f2f6;font-size:7.8px;line-height:1.45;color:#9099a9}
.fm-v321 .fm-reaction-action.is-summary-loading .fm-reaction-insights:after{content:'กำลังอัปเดต…';position:absolute;right:11px;bottom:9px;padding:3px 6px;border-radius:999px;background:#f2efff;color:#6c5bd7;font-size:7px;font-weight:850}

/* Video rail: use the same data and visual language, sized for an immersive player. */
.fm-v321 .fm-video-reaction-action .fm-reaction-selected-mark{right:1px!important;top:1px!important}
.fm-v321 .fm-video-reaction-action .fm-js-reaction.is-active{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,244,255,.95))!important;box-shadow:0 8px 24px rgba(0,0,0,.20),inset 0 0 0 1px rgba(121,95,228,.14)!important}
.fm-v321 .fm-video-reaction-action .fm-js-reaction.is-active small{color:#6656d9!important;font-weight:900!important}
.fm-v321 .fm-video-reaction-action .fm-reaction-picker{right:68px!important;left:auto!important;bottom:52px!important;transform-origin:right bottom!important}
.fm-v321 .fm-video-reaction-action .fm-reaction-insights{left:auto!important;right:68px!important;bottom:-2px!important;width:286px!important;transform-origin:right bottom!important}
.fm-v321 .fm-video-reaction-action .fm-reaction-insights:before{left:auto!important;right:-6px!important;bottom:34px!important;border-right:1px solid #e1e5ef!important;border-bottom:1px solid #e1e5ef!important}
.fm-v321 .fm-video-reaction-summary-toggle{transition:background .14s ease,transform .14s ease!important}
.fm-v321 .fm-video-reaction-summary-toggle[aria-expanded="true"]{background:rgba(124,98,235,.24)!important;box-shadow:inset 0 0 0 1px rgba(177,162,255,.25)!important}
.fm-v321 .fm-video-reaction-stack i[hidden]{display:none!important}

@media(max-width:700px){
  .fm-v321 .fm-reaction-stat-label{display:none!important}
  .fm-v321 .fm-reaction-summary-button{padding-right:3px!important}
  .fm-v321 .fm-social-post-actions .fm-reaction-picker{left:0!important;bottom:47px!important}
  .fm-v321 .fm-reaction-picker button{width:43px!important;height:45px!important}
  .fm-v321 .fm-reaction-insights{width:min(286px,calc(100vw - 28px));left:0;bottom:49px;padding:10px}
  .fm-v321 .fm-video-reaction-action .fm-reaction-picker{right:56px!important;bottom:54px!important}
  .fm-v321 .fm-video-reaction-action .fm-reaction-insights{right:57px!important;bottom:-2px!important;width:min(276px,calc(100vw - 86px))!important}
  .fm-v321 .fm-video-reaction-action .fm-reaction-insights:before{right:-6px!important;bottom:31px!important}
}

@media(max-width:420px){
  .fm-v321 .fm-reaction-insight-row{grid-template-columns:30px minmax(0,1fr) 36px;gap:6px;padding:5px 3px}
  .fm-v321 .fm-reaction-insight-emoji{width:29px;height:29px;font-size:17px}
  .fm-v321 .fm-reaction-insights header strong{font-size:11px}
  .fm-v321 .fm-reaction-insights footer{font-size:7.2px}
}

@media(prefers-reduced-motion:reduce){
  .fm-v321 .fm-js-reaction.is-reaction-pop{animation:none!important}
  .fm-v321 .fm-reaction-insights,.fm-v321 .fm-reaction-picker,.fm-v321 .fm-reaction-insight-copy>i>span{transition:none!important}
}