.status-indicator {
  display: inline-block;
  width: 0.58rem;
  height: 0.58rem;
  background: var(--color-success);
  border: 2px solid light-dark(#c9f2df, #1d4a35);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--color-success-soft);
  flex: 0 0 auto;
}

/* Badges and status pills */

.app-body .badge {
  --bs-badge-padding-x: 0.7em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-border-radius: var(--radius-sm);
  font-weight: 500;
}

.status-pill {
  display: inline-flex;
  min-height: 1.5rem;
  padding: 0.2rem 0.7rem 0.2rem 0.55rem;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-ink-soft);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}

.status-pill::before {
  width: 0.45rem;
  height: 0.45rem;
  background: var(--color-subtle);
  border-radius: 50%;
  content: "";
}

.status-pill--waiting::before {
  background: #e0a526;
  box-shadow: 0 0 0 3px light-dark(rgb(224 165 38 / 18%), rgb(224 165 38 / 24%));
}

.status-pill--success::before {
  background: var(--color-success);
  box-shadow: 0 0 0 3px light-dark(rgb(20 145 95 / 16%), rgb(63 207 142 / 22%));
}

.status-pill--danger::before {
  background: var(--color-danger);
  box-shadow: 0 0 0 3px light-dark(rgb(217 45 32 / 14%), rgb(255 123 112 / 22%));
}