/* ============================================================
   IBC — floating chat buttons (WhatsApp + Zalo)

   Loaded by the English and Vietnamese pages. The Chinese pages
   keep their own purpose-built contact rail (zh-cn/zh-contact.js),
   which already carries WeChat, Zalo and WhatsApp — two floating
   contact clusters on one page would just be clutter.

   Markup is built by chat-fab.js. Edit the numbers there, not here.
   ============================================================ */

.chat-fab{
  position:fixed;
  right:20px;
  bottom:20px;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));  /* clears the iPhone home indicator */
  z-index:130;              /* above content and the sticky header (100) and mega menu (120),
                               deliberately below the mobile menu overlay (150) */
  display:flex;
  flex-direction:column-reverse;   /* stack upward; first item in the DOM sits lowest */
  align-items:flex-end;
  gap:14px;
  pointer-events:none;      /* the gap between buttons stays click-through */
}
.chat-fab > *{pointer-events:auto}

/* ---------- the button ---------- */
.chat-fab-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  color:#fff;
  text-decoration:none;
  box-shadow:0 6px 18px -6px rgba(11,31,51,.34), 0 2px 6px -2px rgba(11,31,51,.24);
  transition:transform .22s cubic-bezier(.2,.8,.3,1.1),
             box-shadow .22s var(--ease-out, ease),
             filter .22s var(--ease-out, ease);
  -webkit-tap-highlight-color:transparent;
}
.chat-fab-btn svg{width:28px;height:28px;display:block;position:relative;z-index:2}
/* Zalo's mark is a wordmark on a 2:1 viewBox — squaring it shrinks the letters
   to about half size. Size it on its own aspect ratio so it reads at a glance. */
.chat-fab-zalo svg{width:33px;height:17px}
.chat-fab-whatsapp{background:#25D366}
.chat-fab-zalo{background:#0068FF}

/* ---------- the label, revealed on hover ---------- */
.chat-fab-label{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  white-space:nowrap;
  background:var(--navy-900, #0B1F33);
  color:#fff;
  font-family:var(--font-body, 'Inter', 'Segoe UI', system-ui, sans-serif);
  font-size:13px;
  font-weight:600;
  line-height:1;
  padding:10px 14px;
  border-radius:9px;
  box-shadow:0 10px 26px -14px rgba(11,31,51,.6);
  opacity:0;
  visibility:hidden;
  transform:translateY(-50%) translateX(8px);
  transition:opacity .2s var(--ease-out, ease),
             transform .2s var(--ease-out, ease),
             visibility .2s;
  pointer-events:none;
}
.chat-fab-label::after{           /* little arrow pointing at the button */
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  margin-top:-5px;
  border:5px solid transparent;
  border-left-color:var(--navy-900, #0B1F33);
}
html[lang="vi"] .chat-fab-label{
  font-family:'Be Vietnam Pro','Inter','Segoe UI',Arial,sans-serif;   /* carries the diacritics */
}

/* ---------- the pulse ---------- */
.chat-fab-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:inherit;
  opacity:.45;
  z-index:0;
  animation:chat-fab-pulse 2.8s var(--ease-out, ease-out) infinite;
}
.chat-fab-btn:nth-child(2)::before{animation-delay:1.4s}   /* stagger, so they never bloom together */
@keyframes chat-fab-pulse{
  0%   {transform:scale(1);   opacity:.42}
  70%  {transform:scale(1.5); opacity:0}
  100% {transform:scale(1.5); opacity:0}
}

/* ---------- interaction ---------- */
@media (hover:hover) and (pointer:fine){
  .chat-fab-btn:hover{
    transform:translateY(-3px) scale(1.06);
    box-shadow:0 14px 30px -10px rgba(11,31,51,.45), 0 3px 8px -2px rgba(11,31,51,.28);
    filter:saturate(1.08);
  }
  .chat-fab-btn:hover .chat-fab-label,
  .chat-fab-btn:focus-visible .chat-fab-label{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) translateX(0);
  }
  /* a pulsing ring under the cursor reads as noise — stop it there */
  .chat-fab-btn:hover::before,
  .chat-fab-btn:focus-visible::before{animation-play-state:paused;opacity:0}
}
.chat-fab-btn:focus-visible{
  outline:3px solid var(--gold, #B79A5B);
  outline-offset:3px;
}
.chat-fab-btn:focus-visible .chat-fab-label{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.chat-fab-btn:active{transform:scale(.94);transition-duration:.08s}

/* ---------- entrance ---------- */
.chat-fab-btn{animation:chat-fab-in .42s cubic-bezier(.2,.8,.3,1.1) both}
.chat-fab-btn:nth-child(2){animation-delay:.08s}
@keyframes chat-fab-in{
  from{opacity:0;transform:translateY(14px) scale(.85)}
  to  {opacity:1;transform:none}
}

/* ---------- get out of the way ---------- */
/* The mobile menu is a full-screen dialog; a floating button on top of its
   scrim is both ugly and reachable by tab. */
body.menu-open .chat-fab{opacity:0;visibility:hidden;pointer-events:none}
.chat-fab{transition:opacity .2s var(--ease-out, ease), visibility .2s}

/* ---------- responsive ---------- */
@media (max-width:620px){
  .chat-fab{
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    gap:12px;
  }
  .chat-fab-btn{width:52px;height:52px}   /* still well over the 44px minimum tap target */
  .chat-fab-btn svg{width:26px;height:26px}
  .chat-fab-zalo svg{width:31px;height:16px}
  .chat-fab-label{display:none}           /* no hover on touch — the icon and aria-label carry it */
}
@media (max-width:360px){
  .chat-fab-btn{width:48px;height:48px}
  .chat-fab-btn svg{width:24px;height:24px}
  .chat-fab-zalo svg{width:28px;height:14px}
}

/* ---------- motion preferences ---------- */
/* styles.css already kills all animation globally under reduced-motion; this is
   belt and braces so the component is safe if it is ever used on its own. */
@media (prefers-reduced-motion:reduce){
  .chat-fab-btn,
  .chat-fab-btn::before{animation:none !important}
  .chat-fab-btn{transition:none !important}
  .chat-fab-btn::before{opacity:0}
}

/* ---------- print ---------- */
@media print{ .chat-fab{display:none} }