/* V7.15 - Reaction interaction polish.
   Scope ONLY: PC/tablet reaction hover rail + mobile message reaction sheet.
   No chat/presence/loading/data styles are changed here. */

/* ===== PC / TABLET ===== */
@media (min-width:701px){
  .msg-actions .zalo-primary-like-v711{
    position:relative;
    z-index:2;
  }

  /* Dark glossy rail, visually attached to the Like control. */
  .reaction-popup.v5-floating-reaction.zalo-reaction-picker-v2{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    min-width:0 !important;
    height:54px !important;
    padding:4px 8px !important;
    gap:2px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:28px !important;
    background:linear-gradient(180deg,rgba(37,40,46,.985),rgba(22,24,28,.985)) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.46),0 2px 8px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter:blur(14px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(125%) !important;
    pointer-events:auto !important;
  }

  .reaction-popup.v5-floating-reaction.zalo-reaction-picker-v2 .reaction-choice{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    color:#fff !important;
    font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
    font-size:29px !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    transition:transform .14s ease,background .14s ease !important;
  }

  .reaction-popup.v5-floating-reaction.zalo-reaction-picker-v2 .reaction-choice:hover,
  .reaction-popup.v5-floating-reaction.zalo-reaction-picker-v2 .reaction-choice:focus-visible{
    transform:translateY(-4px) scale(1.18) !important;
    background:rgba(255,255,255,.08) !important;
    outline:none !important;
  }

  .reaction-popup.v5-floating-reaction.zalo-reaction-picker-v2 .reaction-choice:active{
    transform:scale(1.06) !important;
  }

  /* Do not let the rail itself become a second message/action surface. */
  .reaction-popup.v5-floating-reaction.zalo-reaction-picker-v2 .reaction-picker-close{
    display:none !important;
  }
}

/* ===== MOBILE ===== */
@media (max-width:700px){
  /* Mobile reaction sheet has exactly the six quick reactions; no + button. */
  .zalo-mobile-reaction-v711.more-reaction{display:none !important;}

  .zalo-mobile-sheet-card-v711{
    background:linear-gradient(180deg,#222428 0%,#17191d 100%) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-bottom:0 !important;
    box-shadow:0 -18px 44px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  .zalo-mobile-reactions-v711{
    min-height:62px !important;
    padding:4px 8px 8px !important;
    gap:1px !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
  }

  .zalo-mobile-reaction-v711{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    font-size:31px !important;
    border-radius:50% !important;
    background:transparent !important;
    text-shadow:0 1px 2px rgba(0,0,0,.35) !important;
  }

  .zalo-mobile-reaction-v711:active{
    background:rgba(255,255,255,.10) !important;
    transform:scale(.91) !important;
  }
}