.connection-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -8px 0 22px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
}

.connection-status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 4px rgba(232, 187, 106, .13);
}

.connection-status.is-connected {
  color: var(--mint-bright);
  border-color: rgba(99, 213, 168, .3);
}

.connection-status.is-connected .connection-status-dot {
  background: var(--mint);
  box-shadow: 0 0 0 4px var(--mint-dim);
}

.connection-status.is-disconnected {
  color: #ffabb2;
  border-color: rgba(239, 126, 136, .35);
}

.connection-status.is-disconnected .connection-status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(239, 126, 136, .13);
}