.presence-tip{position:absolute;bottom:calc(100% + 6px);right:0;min-width:max-content;max-width:220px;
  background:#1f2430;color:#fff;font-size:.72rem;line-height:1.3;padding:6px 10px;border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(var(--tip-shift,0px)) translateY(4px);transition:opacity .15s ease,transform .15s ease;z-index:60;white-space:nowrap;}
.presence-tip::after{content:'';position:absolute;top:100%;right:10px;border:5px solid transparent;
  border-top-color:#1f2430;}
.presence-tip.is-open{opacity:1;visibility:visible;transform:translateX(var(--tip-shift,0px)) translateY(0);pointer-events:none;}
.presence-tip.presence-tip--flip{right:auto;left:0;}
.presence-tip.presence-tip--flip::after{right:auto;left:10px;}
.presence-tip.presence-tip--flip-v{bottom:auto;top:calc(100% + 6px);transform:translateX(var(--tip-shift,0px)) translateY(-4px);}
.presence-tip.presence-tip--flip-v.is-open{transform:translateX(var(--tip-shift,0px)) translateY(0);}
.presence-tip.presence-tip--flip-v::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#1f2430;}
.presence-badge--label{position:relative;}
.presence-badge--label .presence-tip{right:auto;left:0;}
.presence-badge--label .presence-tip::after{right:auto;left:10px;}
.presence-tip-dots{display:inline-flex;align-items:center;gap:3px;}
.presence-tip-dots span{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.35;
  animation:presenceWave 1s infinite ease-in-out;}
.presence-tip-dots span:nth-child(2){animation-delay:.15s;}
.presence-tip-dots span:nth-child(3){animation-delay:.3s;}
@keyframes presenceWave{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-2px);}}
.presence-tip-text{opacity:0;animation:presenceFadeIn .18s ease forwards;}
@keyframes presenceFadeIn{to{opacity:1;}}