/* Shared status-dot styling (Free + Pro) */



.statusdot-status-icon{
  width:var(--statusdot-size,14px);
  height:var(--statusdot-size,14px);
  display:inline-block;
  position:relative;
  /* spacing is handled by .statusdot-wrap gap so the dot + (text+sep+countdown) move together */
  margin-right:0;
  vertical-align:middle;
  border-radius:50%;
  /* Dot + pulse share the same color via this variable */
  --statusdot-color:#9aa0a6;
  background-color:var(--statusdot-color);
}

.statusdot-status-icon img{
  width:100%;
  height:100%;
  border-radius:50%;
  display:block;
}

.statusdot-status-icon::before{
  content:'';
  position:absolute;
  top:var(--statusdot-pulse-top,50%);
  left:var(--statusdot-pulse-left,50%);
  width:100%;
  height:100%;
  border-radius:50%;
  transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%));
  transform-origin:var(--statusdot-pulse-origin,50% 50%);
  opacity:.6;
  animation:statusdotPulse var(--statusdot-pulse-speed,1.5s) infinite ease-out;
}

.statusdot-status-icon[data-status="green-dot"]{--statusdot-color:#2BBC5B;--statusdot-color-rgb:43,188,91}
.statusdot-status-icon[data-status="orange-dot"]{--statusdot-color:#FFC200;--statusdot-color-rgb:255,194,0}
.statusdot-status-icon[data-status="red-dot"]{--statusdot-color:#F70808;--statusdot-color-rgb:247,8,8}

.statusdot-status-icon::before{background-color:var(--statusdot-color)}

@keyframes statusdotPulse{
  0%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.7}
  50%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-mid,1.7));opacity:.3}
  100%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-max,2));opacity:0}
}

@keyframes statusdotPulseBreathe{
  0%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.45}
  50%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-mid,1.25));opacity:.25}
  100%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-max,1.4));opacity:0}
}

@keyframes statusdotPulseSignal{
  0%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.6}
  70%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-max,2));opacity:0}
  100%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-max,2));opacity:0}
}

/* Pro pulse styles (applied via class on the icon) */
.statusdot-pulse-breathe::before{animation-name:statusdotPulseBreathe;}
.statusdot-pulse-signal::before{animation-name:statusdotPulseSignal;}


/* --- Status styles (dot/label/badge/pill) --- */
.statusdot-wrap {
  display:inline-flex;
  align-items:center;
  vertical-align: middle;
  /* Default spacing between dot and the whole text block. */
  gap: 12px;
}

/* Optional typography controls (Pro). These apply to BOTH the status text and the countdown/time. */
.statusdot-wrap .statusdot-status-text,
.statusdot-wrap .statusdot-status-countdown,
.statusdot-wrap .statusdot-sep{
  font-size: var(--statusdot-text-size, inherit);
  font-weight: var(--statusdot-text-weight, inherit);
  font-style: var(--statusdot-text-style, inherit);
  text-decoration: var(--statusdot-text-decoration, inherit);
  text-transform: var(--statusdot-text-transform, inherit);
  color: var(--statusdot-text-color, inherit);
}
.statusdot-wrap.statusdot-wrap--light-text .statusdot-status-text,
.statusdot-wrap.statusdot-wrap--light-text .statusdot-status-countdown,
.statusdot-wrap.statusdot-wrap--light-text .statusdot-sep{
  color:#ffffff !important;
}
.statusdot-wrap .statusdot-label { margin-left: 0; font-size: 13px; line-height: 1; }

/* Group text + separator + countdown together so gap only affects dot <-> text group */
.statusdot-meta{ display:inline-flex; align-items:center; }
.statusdot-style-badge .statusdot-label,
.statusdot-style-pill .statusdot-label {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
}
.statusdot-style-badge .statusdot-label { border-radius: 6px; }

/* Stale indicator (fallback) */
.statusdot-status-icon.statusdot-stale { opacity: 0.85; filter: grayscale(15%); }
.statusdot-status-icon.statusdot-stale::after {
  content: "•";
  position: absolute;
  right: -6px;
  top: -8px;
  font-size: 10px;
}

/* Extra pulse styles */
@keyframes statusdotPulseRipple {
  0% {
    transform: translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);
    box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb,154,160,166),0.00);
    opacity: .9;
  }
  70% {
    transform: translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-max,2));
    box-shadow: 0 0 0 calc(var(--statusdot-size,13px) * (var(--statusdot-pulse-max,2) - 1)) rgba(var(--statusdot-color-rgb,154,160,166),0.22);
    opacity: .25;
  }
  100% {
    transform: translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-max,2));
    box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb,154,160,166),0.00);
    opacity: 0;
  }
}
@keyframes statusdotPulseGlow {
  0%{
    transform: translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);
    box-shadow:
      0 0 calc(var(--statusdot-size,13px) * 0.6) rgba(var(--statusdot-color-rgb,154,160,166),0.35),
      0 0 calc(var(--statusdot-size,13px) * 1.2) rgba(var(--statusdot-color-rgb,154,160,166),0.18);
    opacity:.75;
  }
  50%{
    transform: translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(calc(1 + (var(--statusdot-pulse-max,2) - 1) * 0.55));
    box-shadow:
      0 0 calc(var(--statusdot-size,13px) * (1.2 + (var(--statusdot-pulse-max,2) * 1.2))) rgba(var(--statusdot-color-rgb,154,160,166),0.55),
      0 0 calc(var(--statusdot-size,13px) * (2.0 + (var(--statusdot-pulse-max,2) * 2.2))) rgba(var(--statusdot-color-rgb,154,160,166),0.28);
    opacity:.95;
  }
  100%{
    transform: translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);
    box-shadow:
      0 0 calc(var(--statusdot-size,13px) * 0.6) rgba(var(--statusdot-color-rgb,154,160,166),0.35),
      0 0 calc(var(--statusdot-size,13px) * 1.2) rgba(var(--statusdot-color-rgb,154,160,166),0.18);
    opacity:.75;
  }
}
@keyframes statusdotPulsePing {
  0% { transform: translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); opacity: 1; }
  80% { transform: translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-max,2)); opacity: 0.2; }
  100% { transform: translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); opacity: 1; }
}

/* New pulse styles (Pro) */
@keyframes statusdotPulseWave {
  0%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.65}
  50%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(calc(1 + (var(--statusdot-pulse-max,2)-1)*0.85));opacity:.20}
  100%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.65}
}
@keyframes statusdotPulseHalo {
  0%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);box-shadow:0 0 0 0 rgba(var(--statusdot-color-rgb,154,160,166),0.35);opacity:.85}
  70%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-max,2));box-shadow:0 0 0 calc(var(--statusdot-size,13px)*0.9) rgba(var(--statusdot-color-rgb,154,160,166),0.08);opacity:.25}
  100%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-max,2));box-shadow:0 0 0 0 rgba(var(--statusdot-color-rgb,154,160,166),0);opacity:0}
}
@keyframes statusdotPulsePop {
  0%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.75}
  25%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(calc(1 + (var(--statusdot-pulse-max,2)-1)*0.55));opacity:.35}
  55%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.75}
  100%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.75}
}
@keyframes statusdotPulseHeartbeat {
  0%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.55}
  15%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1.18);opacity:.85}
  30%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1.02);opacity:.65}
  45%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1.28);opacity:.9}
  70%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.55}
  100%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.55}
}
@keyframes statusdotPulseFlicker {
  0%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.55}
  20%{opacity:.15}
  40%{opacity:.65}
  60%{opacity:.20}
  80%{opacity:.55}
  100%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-mid,1.7));opacity:.15}
}
@keyframes statusdotPulseSonar {
  0%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.7;box-shadow:0 0 0 0 rgba(var(--statusdot-color-rgb,154,160,166),0.0)}
  55%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(calc(1 + (var(--statusdot-pulse-max,2)-1)*0.65));opacity:.25;box-shadow:0 0 0 calc(var(--statusdot-size,13px)*0.7) rgba(var(--statusdot-color-rgb,154,160,166),0.12)}
  100%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(var(--statusdot-pulse-max,2));opacity:0;box-shadow:0 0 0 0 rgba(var(--statusdot-color-rgb,154,160,166),0.0)}
}
@keyframes statusdotPulseSpark {
  0%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.55;filter:blur(0px)}
  

@keyframes statusdotPulseRecord{
  0%, 45% { opacity: .15; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
  50%, 100% { opacity: .8; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1.05); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), .35); }
}
  50%, 100% { opacity: .15; box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
}

@keyframes statusdotPulseLive{
  0% { opacity: .2; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
  20% { opacity: .75; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1.12); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), .28); }
  40% { opacity: .2; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
  60% { opacity: .75; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1.12); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), .28); }
  100% { opacity: .2; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
}
  50% { opacity: .25; box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), .05); }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), .55); }
}
50%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(calc(1 + (var(--statusdot-pulse-max,2)-1)*0.75));opacity:.15;filter:blur(1px)}
  100%{transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1);opacity:.55;filter:blur(0px)}
}

/* Map pulse style classes to animations (Pro sets class) */
.statusdot-status-icon.statusdot-pulse-ripple::before { animation-name: statusdotPulseRipple; }
.statusdot-status-icon.statusdot-pulse-glow::before { animation-name: statusdotPulseGlow; }
.statusdot-status-icon.statusdot-pulse-ping::before { animation-name: statusdotPulsePing; }
.statusdot-status-icon.statusdot-pulse-wave::before { animation-name: statusdotPulseWave; }
.statusdot-status-icon.statusdot-pulse-halo::before { animation-name: statusdotPulseHalo; }
.statusdot-status-icon.statusdot-pulse-pop::before { animation-name: statusdotPulsePop; }
.statusdot-status-icon.statusdot-pulse-heartbeat::before { animation-name: statusdotPulseHeartbeat; }
.statusdot-status-icon.statusdot-pulse-flicker::before { animation-name: statusdotPulseFlicker; }
.statusdot-status-icon.statusdot-pulse-sonar::before { animation-name: statusdotPulseSonar; }
.statusdot-status-icon.statusdot-pulse-spark::before { animation-name: statusdotPulseSpark; }
.statusdot-status-icon.statusdot-pulse-record::before { animation-name: statusdotPulseRecord; opacity: 1; }
.statusdot-status-icon.statusdot-pulse-record{animation:statusdotDotRecord var(--statusdot-pulse-speed,1.5s) infinite steps(1,end);}
.statusdot-status-icon.statusdot-pulse-live{animation:statusdotDotLive var(--statusdot-pulse-speed,1.5s) infinite;}
.statusdot-status-icon.statusdot-pulse-record::before{animation-duration:var(--statusdot-pulse-speed,1.5s);}
.statusdot-status-icon.statusdot-pulse-live::before{animation-duration:var(--statusdot-pulse-speed,1.5s);}

.statusdot-status-icon.statusdot-pulse-live::before { animation-name: statusdotPulseLive; opacity: 1; }


/* REC (short flash + long pause) */
@keyframes statusdotDotRec{
  0% { filter: brightness(1.35); box-shadow: 0 0 0 4px rgba(var(--statusdot-color-rgb), .10); }
  8% { filter: brightness(.65); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
  100% { filter: brightness(.65); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
}
@keyframes statusdotPulseRec{
  0% { opacity: .85; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1.08); }
  8% { opacity: 0; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); }
  100% { opacity: 0; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); }
}
.statusdot-status-icon.statusdot-pulse-rec{animation:statusdotDotRec var(--statusdot-pulse-speed,1.5s) infinite steps(1,end);}
.statusdot-status-icon.statusdot-pulse-rec::before{animation-name: statusdotPulseRec; animation-duration:var(--statusdot-pulse-speed,1.5s); opacity:1;}

/* Luma: smooth brightness (dot only) */
@keyframes statusdotDotLuma{
  0% { filter: brightness(.75); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
  50% { filter: brightness(1.35); box-shadow: 0 0 0 6px rgba(var(--statusdot-color-rgb), .10); }
  100% { filter: brightness(.75); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
}
.statusdot-status-icon.statusdot-pulse-luma{animation:statusdotDotLuma var(--statusdot-pulse-speed,1.5s) infinite;}
.statusdot-status-icon.statusdot-pulse-luma::before{display:none !important; animation:none !important; opacity:0 !important;}

/* Luma Ring: smooth brightness + gentle ring */
@keyframes statusdotPulseLumaRing{
  0% { opacity:.10; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); }
  50% { opacity:.40; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(calc(1 + (var(--statusdot-pulse-max,2)-1)*0.55)); }
  100% { opacity:.10; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); }
}
.statusdot-status-icon.statusdot-pulse-luma-ring{animation:statusdotDotLuma var(--statusdot-pulse-speed,1.5s) infinite;}
.statusdot-status-icon.statusdot-pulse-luma-ring::before{animation-name: statusdotPulseLumaRing; animation-duration:var(--statusdot-pulse-speed,1.5s); opacity:1;}

/* Strobe (party): brightness shimmer + quick strobe flashes */
@keyframes statusdotDotStrobe{
  0%   { filter: brightness(.70) saturate(1.15); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
  12%  { filter: brightness(1.55) saturate(1.30); box-shadow: 0 0 0 6px rgba(var(--statusdot-color-rgb), .14); }
  18%  { filter: brightness(.65) saturate(1.10); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
  28%  { filter: brightness(1.55) saturate(1.30); box-shadow: 0 0 0 7px rgba(var(--statusdot-color-rgb), .16); }
  34%  { filter: brightness(.65) saturate(1.10); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
  65%  { filter: brightness(1.20) saturate(1.20); box-shadow: 0 0 0 5px rgba(var(--statusdot-color-rgb), .10); }
  100% { filter: brightness(.70) saturate(1.15); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
}
@keyframes statusdotPulseStrobe{
  0%   { opacity: 0; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); }
  12%  { opacity: .75; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1.25); }
  18%  { opacity: 0; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); }
  28%  { opacity: .80; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1.35); }
  34%  { opacity: 0; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); }
  65%  { opacity: .35; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1.15); }
  100% { opacity: 0; transform:translate(var(--statusdot-pulse-x,-50%),var(--statusdot-pulse-y,-50%)) scale(1); }
}
.statusdot-status-icon.statusdot-pulse-strobe{animation:statusdotDotStrobe var(--statusdot-pulse-speed,1.5s) infinite;}
.statusdot-status-icon.statusdot-pulse-strobe::before{animation-name: statusdotPulseStrobe; animation-duration:var(--statusdot-pulse-speed,1.5s); opacity:1;}

/* Disabled pulse: show dot only (no pulse animation) */
.statusdot-status-icon.statusdot-pulse-disabled::before {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Dark-mode friendly tweaks */
@media (prefers-color-scheme: dark) {
  .statusdot-style-badge .statusdot-label,
  .statusdot-style-pill .statusdot-label {
    border-color: rgba(255,255,255,0.18);
  }
}

.statusdot-sep{margin:0;opacity:.8;}

/* Fallback color before AJAX resolves status.
   IMPORTANT: do not override ::before directly, because ::before must follow --statusdot-color
   so the pulse always matches the dot color.
*/
.statusdot-status-icon--unknown:not([data-status]){ --statusdot-color:#999; }

/* Map semantic statuses to colors too (some payloads send open/busy/closed). */
.statusdot-status-icon[data-status="open"]{ --statusdot-color:#2bbc5b; }
.statusdot-status-icon[data-status="busy"]{ --statusdot-color:#f5a623; }
.statusdot-status-icon[data-status="closed"]{ --statusdot-color:#d0021b; }

@keyframes statusdotDotRecord{
  0%, 49% { filter: brightness(1.25); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
  50%, 100% { filter: brightness(.75); box-shadow: 0 0 0 3px rgba(var(--statusdot-color-rgb), .08); }
}

@keyframes statusdotDotLive{
  0% { filter: brightness(1.15); box-shadow: 0 0 0 2px rgba(var(--statusdot-color-rgb), .10); }
  20% { filter: brightness(.75); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
  40% { filter: brightness(1.15); box-shadow: 0 0 0 2px rgba(var(--statusdot-color-rgb), .10); }
  60% { filter: brightness(.75); box-shadow: 0 0 0 0 rgba(var(--statusdot-color-rgb), 0); }
  100% { filter: brightness(1.05); box-shadow: 0 0 0 2px rgba(var(--statusdot-color-rgb), .08); }
}