/*
 * V7.16 - Targeted reaction visual fix.
 * Scope ONLY: PC/tablet hover picker + reaction badge in dark workspace.
 */

/* ===== PC / TABLET: Zalo-like dark glossy hover picker ===== */
@media (min-width:701px){
  .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;
    height:54px !important;
    min-width:0 !important;
    padding:4px 8px !important;
    gap:2px !important;
    border-radius:28px !important;
    background:linear-gradient(180deg,rgba(37,40,46,.985),rgba(22,24,28,.985)) !important;
    border:1px solid rgba(255,255,255,.12) !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;
  }

  /* Existing reaction result attached to a message: never white in dark mode. */
  :root[data-theme="dark"] .msg-bubble-wrapper > .reactions-badge{
    background:linear-gradient(180deg,rgba(39,42,48,.98),rgba(24,27,32,.98)) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:
      0 4px 12px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }
}

/* Dark reaction badge on smaller layouts too; no layout/behavior changes. */
@media (max-width:700px){
  :root[data-theme="dark"] .msg-bubble-wrapper > .reactions-badge{
    background:linear-gradient(180deg,rgba(39,42,48,.98),rgba(24,27,32,.98)) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05) !important;
  }
}