/* V7.14 - Zalo-like reaction polish only.
   Scope: PC/tablet reaction hover + mobile selected-message sheet.
   No changes to chat loading, presence, login, sorting or other features. */

/* ===== PC / TABLET: hover Like -> dark glossy emoji rail ===== */
@media (min-width:701px){
  .reaction-popup.zalo-reaction-picker-v2{
    background:linear-gradient(180deg,rgba(38,41,47,.98),rgba(24,27,32,.98)) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:24px !important;
    padding:5px 8px !important;
    gap:2px !important;
    min-height:50px !important;
    box-shadow:0 14px 32px rgba(0,0,0,.42),0 3px 10px rgba(0,0,0,.25) !important;
    backdrop-filter:blur(14px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(125%) !important;
  }
  .reaction-popup.zalo-reaction-picker-v2 .reaction-choice{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:50% !important;
    color:#fff !important;
    background:transparent !important;
    font-size:28px !important;
    line-height:1 !important;
    filter:none !important;
  }
  .reaction-popup.zalo-reaction-picker-v2 .reaction-choice:hover,
  .reaction-popup.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.zalo-reaction-picker-v2 .reaction-choice:active{
    transform:scale(1.05) !important;
  }

  /* Keep the toolbar itself compact and dark like the reference. */
  .msg-row .msg-actions{
    background:rgba(29,32,38,.96) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.34) !important;
  }
}

/* ===== MOBILE: selected-message bottom sheet ===== */
@media (max-width:700px){
  .zalo-mobile-sheet-backdrop-v711{
    background:rgba(0,0,0,.66) !important;
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;
  }
  .zalo-mobile-sheet-card-v711{
    background:linear-gradient(180deg,#202226 0%,#17191d 100%) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-bottom:0 !important;
    border-radius:20px 20px 0 0 !important;
    box-shadow:0 -14px 40px rgba(0,0,0,.55),0 -1px 0 rgba(255,255,255,.05) inset !important;
    padding-top:6px !important;
  }
  .zalo-mobile-reactions-v711{
    justify-content:space-around !important;
    gap:2px !important;
    min-height:60px !important;
    padding:2px 10px 8px !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;
    border-radius:50% !important;
    font-size:31px !important;
    background:transparent !important;
    color:#fff !important;
    transition:transform .12s ease,background .12s ease !important;
  }
  .zalo-mobile-reaction-v711:active{
    background:rgba(255,255,255,.11) !important;
    transform:scale(.90) !important;
  }
  .zalo-mobile-actions-grid-v711{
    padding:8px 2px calc(4px + env(safe-area-inset-bottom)) !important;
    gap:2px !important;
  }
  .zalo-mobile-action-item-v711{
    min-height:72px !important;
    color:#f3f4f6 !important;
    border-radius:12px !important;
  }
  .zalo-mobile-action-item-v711:active{
    background:rgba(255,255,255,.09) !important;
  }
  .zalo-mobile-action-icon-v711{
    color:#2ea7ff !important;
  }
}