/* Winston V3 — SSE connection pill in the top bar. */

.conn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.conn-pill[data-state="live"]       { background: var(--money-up-soft);  color: var(--money-up);  border-color: var(--money-up-line); }
.conn-pill[data-state="connecting"] { background: var(--mode-live-soft); color: var(--mode-live); border-color: var(--mode-live-line); }
.conn-pill[data-state="down"]       { background: var(--surface-3);      color: var(--ink-muted); }

.conn-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.conn-pill[data-state="live"] .conn-pill-dot {
  animation: conn-pulse 1.6s ease-in-out infinite;
}
@keyframes conn-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (max-width: 540px) {
  .conn-pill-label { display: none; }
  .conn-pill { padding: 0 var(--space-2); }
}