.device-presence {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 78px;
  color: #b7adb1;
  font: 10px 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: .6px;
}

.device-presence.online {
  color: #63e3a6;
}

.device-presence.offline {
  color: #ff6c83;
}

.presence-bubble {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: currentColor;
}

.presence-bubble::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .7;
  animation: presence-pulse 1.8s ease-out infinite;
}

.device-presence.online .presence-bubble {
  box-shadow: 0 0 12px #63e3a6;
}

.device-presence.offline .presence-bubble {
  box-shadow: 0 0 12px #ff3156;
}

@keyframes presence-pulse {
  0% { transform: scale(.55); opacity: .85; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .presence-bubble::after { animation: none; opacity: .35; }
}