/* =========================================================================
   MERIT CHATS — floating widget
   ========================================================================= */
.mchat{position:fixed;right:1.25rem;bottom:1.25rem;z-index:200}

/* ---------------- launcher button ---------------- */
.mchat-btn{
  position:relative;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--red) 0%,#ff5a63 60%,var(--red) 100%);
  box-shadow:0 16px 34px -10px rgba(233,29,38,.55),0 4px 12px rgba(0,0,0,.15);
  display:grid;place-items:center;cursor:pointer;border:0;
  animation:mchatFloat 3.4s ease-in-out infinite;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.mchat-btn:hover{transform:scale(1.06);box-shadow:0 20px 40px -8px rgba(233,29,38,.65)}
@keyframes mchatFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mchat.open .mchat-btn{animation:none}

/* radar-ping rings */
.mchat-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);
  opacity:0;animation:mchatPing 3s cubic-bezier(.2,.7,.3,1) infinite}
.mchat-ring-2{animation-delay:1s}
@keyframes mchatPing{0%{transform:scale(1);opacity:.55}80%{opacity:0}100%{transform:scale(1.9);opacity:0}}
.mchat.open .mchat-ring{animation:none;opacity:0}

/* notification badge */
.mchat-badge{position:absolute;top:-3px;right:-3px;width:20px;height:20px;border-radius:50%;
  background:#FFD37A;color:#5A3B00;font:800 .68rem/20px var(--font-display);text-align:center;
  box-shadow:0 0 0 2.5px #fff;animation:mchatBadge 2.2s ease-in-out infinite}
@keyframes mchatBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.mchat.open .mchat-badge{display:none}

/* icon swap: chat bubble <-> close X, with a smooth rotate/scale morph */
.mchat-icon-wrap{position:relative;width:26px;height:26px}
.mchat-icon{position:absolute;inset:0;width:100%;height:100%;
  transition:opacity .32s var(--ease),transform .32s var(--ease)}
.mchat-icon-bubble{opacity:1;transform:rotate(0) scale(1)}
.mchat-icon-close{opacity:0;transform:rotate(-90deg) scale(.5)}
.mchat.open .mchat-icon-bubble{opacity:0;transform:rotate(90deg) scale(.5)}
.mchat.open .mchat-icon-close{opacity:1;transform:rotate(0) scale(1)}

/* hover tooltip */
.mchat-tip{position:absolute;right:72px;top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--navy);color:#fff;font-size:var(--fs-xs);font-weight:600;
  padding:.5rem .85rem;border-radius:var(--r-pill);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:var(--sh-sm)}
.mchat-tip::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:9px;height:9px;background:var(--navy)}
.mchat-btn:hover ~ .mchat-tip{opacity:1;transform:translateY(-50%) translateX(0)}
.mchat.open .mchat-tip{opacity:0 !important}

/* first-load attention peek (auto shows briefly once, then stays hover-only) */
.mchat-tip.mchat-peek{animation:mchatPeek 4.5s ease 1.4s 1}
@keyframes mchatPeek{
  0%,100%{opacity:0;transform:translateY(-50%) translateX(6px)}
  12%,78%{opacity:1;transform:translateY(-50%) translateX(0)}
}

/* ---------------- popup panel ---------------- */
.mchat-panel{
  position:absolute;right:0;bottom:76px;width:308px;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  overflow:hidden;transform-origin:bottom right;
  opacity:0;visibility:hidden;transform:scale(.85) translateY(10px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.mchat.open .mchat-panel{opacity:1;visibility:visible;transform:scale(1) translateY(0)}

.mchat-head{display:flex;align-items:center;gap:.7rem;padding:1.1rem 1.15rem;
  background:linear-gradient(120deg,var(--navy),#164A73);color:#fff;position:relative}
.mchat-head-ic{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center;font-size:1rem;flex:none}
.mchat-title{font-family:var(--font-display);font-weight:700;font-size:1rem;margin:0}
.mchat-sub{font-size:var(--fs-xs);color:rgba(255,255,255,.68);margin:.15rem 0 0;display:flex;align-items:center;gap:.4rem}
.mchat-dot{width:7px;height:7px;border-radius:50%;background:#3CD371;display:inline-block;
  box-shadow:0 0 0 0 rgba(60,211,113,.6);animation:mchatDot 1.8s ease-in-out infinite}
@keyframes mchatDot{0%{box-shadow:0 0 0 0 rgba(60,211,113,.55)}70%{box-shadow:0 0 0 6px rgba(60,211,113,0)}100%{box-shadow:0 0 0 0 rgba(60,211,113,0)}}
.mchat-close{position:absolute;top:.7rem;right:.7rem;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;font-size:.75rem;
  transition:background .25s}
.mchat-close:hover{background:rgba(255,255,255,.24)}

.mchat-body{padding:1rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem}
.mchat-lede{font-size:var(--fs-xs);color:var(--muted);margin:0 0 .25rem}

.mchat-opt{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:var(--r-md);
  border:1px solid var(--line);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.mchat-opt:hover{transform:translateX(3px);box-shadow:var(--sh-xs);border-color:transparent}
.mchat-opt-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:1.05rem;color:#fff}
.mchat-wa .mchat-opt-ic{background:linear-gradient(135deg,#25D366,#1EBE5D)}
.mchat-fb .mchat-opt-ic{background:linear-gradient(135deg,#0084FF,#0066CC)}
.mchat-call .mchat-opt-ic{background:var(--grad-blue)}
.mchat-opt-txt{flex:1;min-width:0}
.mchat-opt-title{display:block;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--ink)}
.mchat-opt-desc{display:block;font-size:var(--fs-xs);color:var(--muted)}
.mchat-opt-arrow{color:var(--muted);font-size:.75rem;transition:transform .25s var(--ease)}
.mchat-opt:hover .mchat-opt-arrow{transform:translateX(3px);color:var(--red)}

@media (max-width:460px){
  .mchat{right:.85rem;bottom:.85rem}
  .mchat-panel{width:min(88vw,308px)}
  .mchat-tip{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mchat-btn,.mchat-ring,.mchat-badge,.mchat-dot,.mchat-tip.mchat-peek{animation:none}
}