/* ===================================================================
   Canonical Health Status Component
   Single banner for API health — replaces duplicate outage messages.
   =================================================================== */

.bua-health {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-xl, 16px);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text, #F2EEE6);
  transition: opacity 0.25s ease, max-height 0.3s ease;
  overflow: hidden;
  max-height: 120px;
}

.bua-health--hidden {
  display: none;
}

/* Live indicator dot */
.bua-health__indicator {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  transition: background 0.3s ease;
}

.bua-health__message {
  flex: 1;
}

/* --- State variants --- */

/* Degraded / Recovering -> amber */
.bua-health--degraded {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.bua-health--degraded .bua-health__indicator {
  background: var(--bua-status-amber, #f59e0b);
}

.bua-health--recovering {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.bua-health--recovering .bua-health__indicator {
  background: var(--bua-status-amber, #f59e0b);
  animation: bua-health-pulse 1.5s ease-in-out infinite;
}

/* Offline -> red */
.bua-health--offline {
  background: var(--bua-dispute-soft);
  border: 1px solid color-mix(in srgb, var(--bua-dispute) 25%, transparent);
}
.bua-health--offline .bua-health__indicator {
  background: var(--bua-dispute, #DE7048);
}

/* Misconfigured -> grey */
.bua-health--misconfigured {
  background: rgba(156, 163, 175, 0.12);
  border: 1px solid rgba(156, 163, 175, 0.25);
}
.bua-health--misconfigured .bua-health__indicator {
  background: var(--bua-status-grey, #9ca3af);
}

/* Healthy -> green (used briefly during transitions) */
.bua-health--healthy .bua-health__indicator {
  background: var(--bua-status-green, #22c55e);
}

/* Heartbeat indicator dot state colors (used by api-heartbeat-indicator.js) */
.api-heartbeat-indicator.state-green .indicator-text,
.db-heartbeat-indicator.state-green .indicator-text { color: var(--bua-status-green, #22c55e); }

.api-heartbeat-indicator.state-amber .indicator-text { color: var(--bua-status-amber, #f59e0b); }

.api-heartbeat-indicator.state-yellow .indicator-text,
.db-heartbeat-indicator.state-yellow .indicator-text { color: var(--bua-status-yellow, #eab308); }

.api-heartbeat-indicator.state-orange .indicator-text { color: var(--bua-status-orange, #f97316); }

.api-heartbeat-indicator.state-red .indicator-text,
.db-heartbeat-indicator.state-red .indicator-text { color: var(--bua-dispute, #DE7048); }

.api-heartbeat-indicator.state-grey .indicator-text { color: var(--bua-status-grey, #9ca3af); }

/* Dot before indicator text */
.api-heartbeat-indicator .indicator-text::before,
.db-heartbeat-indicator .indicator-text::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.375rem;
  vertical-align: middle;
  background: currentColor;
}

/* Pulse animation for recovering state */
@keyframes bua-health-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .bua-health--recovering .bua-health__indicator {
    animation: none;
  }
}