/* =========================================================
   HostLagbe — Floating contact bubble
   Fixed-position "we're online" bubble with a radial menu of
   real contact channels. Pure CSS animation + minimal JS for
   open/close state. Matches the existing white/orange/blue
   system — no new colors introduced except per-brand icon fills,
   which are contained to the icon glyphs only.
   ========================================================= */

.contact-bubble{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:500;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
}

/* ---- Trigger button ---- */
.bubble-trigger{
  position:relative;
  width:60px; height:60px;
  border-radius:50%;
  background:var(--ink);
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 34px -12px rgba(11,14,20,.45);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.bubble-trigger:hover{ transform:translateY(-2px); }
.bubble-trigger:active{ transform:scale(.94); }

.bubble-trigger-icon{
  position:relative;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
}
.bubble-trigger-icon svg{
  position:absolute;
  transition:opacity .25s var(--ease), transform .3s var(--ease);
}
.icon-chat{ opacity:1; transform:scale(1) rotate(0deg); }
.icon-close{ opacity:0; transform:scale(.5) rotate(-45deg); }
.contact-bubble.is-open .icon-chat{ opacity:0; transform:scale(.5) rotate(45deg); }
.contact-bubble.is-open .icon-close{ opacity:1; transform:scale(1) rotate(0deg); }

/* Pulse ring — signals "we're online" at rest */
.bubble-pulse{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--orange);
  animation:bubble-pulse 2.6s ease-out infinite;
  pointer-events:none;
}
.contact-bubble.is-open .bubble-pulse{ animation:none; opacity:0; }
@keyframes bubble-pulse{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(1.55); opacity:0; }
}

/* Online status dot */
.bubble-status-dot{
  position:absolute;
  top:-2px; right:-2px;
  width:14px; height:14px;
  border-radius:50%;
  background:#1E8A5F;
  border:2.5px solid var(--white);
}

/* "We're online" label — appears on hover, desktop only */
.bubble-label{
  position:absolute;
  right:72px;
  top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--ink);
  color:var(--white);
  font-size:.8rem;
  font-weight:600;
  padding:8px 14px;
  border-radius:100px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .bubble-trigger:hover .bubble-label{
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
}
.contact-bubble.is-open .bubble-label{ opacity:0 !important; }

/* ---- Radial menu ---- */
.bubble-menu{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}
.bubble-item{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0;
  transform:translateY(14px) scale(.85);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events:none;
}
.contact-bubble.is-open .bubble-item{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
/* Staggered entrance, bottom item (nearest trigger) appears first */
.contact-bubble.is-open .bubble-item:nth-child(5){ transition-delay:.02s; }
.contact-bubble.is-open .bubble-item:nth-child(4){ transition-delay:.06s; }
.contact-bubble.is-open .bubble-item:nth-child(3){ transition-delay:.10s; }
.contact-bubble.is-open .bubble-item:nth-child(2){ transition-delay:.14s; }
.contact-bubble.is-open .bubble-item:nth-child(1){ transition-delay:.18s; }

.bubble-item-label{
  background:var(--white);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:.82rem;
  font-weight:600;
  padding:7px 14px;
  border-radius:100px;
  box-shadow:0 8px 20px -10px rgba(11,14,20,.2);
  white-space:nowrap;
}
.bubble-item-icon{
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 10px 24px -10px rgba(11,14,20,.35);
  transition:transform .25s var(--ease);
}
.bubble-item:hover .bubble-item-icon{ transform:scale(1.08); }
.bubble-item-icon svg{ width:24px; height:24px; }

/* Per-channel brand colors, scoped to the icon circle only */
.bubble-item-icon.whatsapp{ background:#25D366; }
.bubble-item-icon.messenger{ background:linear-gradient(135deg,#00B2FF,#006AFF); }
.bubble-item-icon.instagram{ background:radial-gradient(circle at 30% 110%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.bubble-item-icon.telegram{ background:#26A5E4; }
.bubble-item-icon.ticket{ background:var(--ink); }

@media (prefers-reduced-motion: reduce){
  .bubble-pulse{ animation:none; opacity:.4; }
  .bubble-item, .bubble-trigger-icon svg{ transition:none; }
}

@media(max-width:480px){
  .contact-bubble{ right:14px; bottom:14px; }
  .bubble-trigger{ width:54px; height:54px; }
  .bubble-item-icon{ width:44px; height:44px; }
  .bubble-item-label{ font-size:.78rem; }
}