/* ============================================================
   MR BUBBLES — floating invite widget (homepage)
   ============================================================ */
.mbw{position:fixed;right:1.1rem;bottom:1.1rem;z-index:900;display:flex;align-items:flex-end;gap:.6rem;flex-direction:row-reverse}

/* the floating icon */
.mbw-icon{
  width:62px;height:62px;border-radius:50%;flex-shrink:0;cursor:pointer;
  background:radial-gradient(circle at 34% 30%, #9CCBFF, #3B76F0 55%, #0F3DA8);
  display:grid;place-items:center;font-size:1.9rem;
  box-shadow:0 8px 26px rgba(15,61,168,.5), inset 0 3px 10px rgba(255,255,255,.45);
  border:2px solid rgba(255,255,255,.55);
  animation:mbwFloat 3.4s ease-in-out infinite;
  position:relative;
}
@keyframes mbwFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mbw-icon::after{
  content:"";position:absolute;top:11px;left:14px;width:13px;height:9px;
  border-radius:50%;background:rgba(255,255,255,.8);transform:rotate(-28deg);
}
.mbw-icon:active{transform:scale(.94)}

/* unread dot */
.mbw-dot{
  position:absolute;top:-2px;right:-2px;width:17px;height:17px;border-radius:50%;
  background:#E5484D;border:2px solid #fff;display:grid;place-items:center;
  color:#fff;font-size:.62rem;font-weight:800;
  animation:mbwPulse 1.6s infinite;
}
@keyframes mbwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* the speech bubble */
.mbw-pop{
  max-width:255px;background:#fff;border-radius:18px;border-bottom-right-radius:5px;
  padding:.9rem 1rem;box-shadow:0 12px 34px rgba(14,27,51,.28);
  animation:mbwIn .38s cubic-bezier(.2,.9,.25,1.3);position:relative;
}
@keyframes mbwIn{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.mbw-pop .nm{font-size:.72rem;font-weight:800;color:#1A56DB;display:block;margin-bottom:.15rem}
.mbw-pop .tx{font-size:.88rem;line-height:1.45;color:#1B2A44;min-height:1.2em}
.mbw-pop .cur{display:inline-block;width:2px;height:.95em;background:#1A56DB;vertical-align:-2px;animation:mbwBlink .8s steps(1) infinite}
@keyframes mbwBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
.mbw-pop .x{
  position:absolute;top:5px;right:7px;background:none;border:none;
  color:#A9B6CB;font-size:.95rem;cursor:pointer;line-height:1;padding:2px 4px;
}
.mbw-pop .x:hover{color:#5B6880}
.mbw-cta{
  margin-top:.7rem;width:100%;background:linear-gradient(135deg,#1A56DB,#0F3DA8);
  color:#fff;border:none;border-radius:11px;padding:.6rem;font-weight:700;
  font-family:inherit;font-size:.85rem;cursor:pointer;
}
.mbw-cta:active{transform:scale(.97)}

/* typing dots inside the pop */
.mbw-typing{display:flex;gap:4px;padding:.15rem 0}
.mbw-typing i{width:6px;height:6px;border-radius:50%;background:#9DB0CE;animation:mbwBounce 1.2s infinite}
.mbw-typing i:nth-child(2){animation-delay:.15s}
.mbw-typing i:nth-child(3){animation-delay:.3s}
@keyframes mbwBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

@media(max-width:420px){
  .mbw{right:.8rem;bottom:.8rem}
  .mbw-icon{width:56px;height:56px;font-size:1.7rem}
  .mbw-pop{max-width:210px}
}