/* Phase 19 / OVR-08: Connection indicator — liquid-glass стиль.
 *
 * Baseline: Safari 15 (август 2021) — работает в vMix CEF 90+.
 * Используем: backdrop-filter (с -webkit- префиксом), transition, transform,
 * :not(:empty). НЕ используем container queries, has-selector, cascade layers.
 *
 * Состояния:
 *   (default/empty)  — скрыт
 *   .reconnecting    — amber «Переподключение…» (обрыв связи)
 *   .disconnected    — amber «Переподключение…» (alias, задаёт bootstrap-handler)
 *   .error           — red «Ошибка данных»
 *   .drift           — amber (19-04 timer drift badge)
 *
 * classList.remove в setIndicator:
 *   ['disconnected', 'error', 'reconnecting'] — держим все классы совместимыми.
 */

#connection-indicator {
  position: fixed;
  top: 16px;
  right: 16px;
  min-width: 180px;
  padding: 10px 14px;
  border-radius: 12px;
  font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 300ms ease, transform 300ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  z-index: 99998;

  /* Liquid-glass baseline (Safari 15 supported) */
  background: rgba(20, 22, 28, 0.72);
  color: #ffffff;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Показываем только если есть текст (setIndicator(null) → opacity 0). */
#connection-indicator:not(:empty) {
  opacity: 1;
  transform: translateY(0);
}

/* === Состояния === */

/* Reconnecting — amber (обрыв, ждём восстановления) */
#connection-indicator.reconnecting {
  background: rgba(60, 40, 16, 0.78);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fcd34d;
}

/* Disconnected — alias, визуально совпадает с reconnecting */
#connection-indicator.disconnected {
  background: rgba(60, 40, 16, 0.78);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fcd34d;
}

/* Error — red (ошибка данных, full-sync failed) */
#connection-indicator.error {
  background: rgba(60, 20, 24, 0.82);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

/* Drift — amber (Phase 19-04: timer не обновлялся > DRIFT_THRESHOLD_MS) */
#connection-indicator.drift {
  background: rgba(60, 40, 16, 0.78);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fcd34d;
}

/* Connected — скрыт; класс не обязателен, :empty уже делает это */
#connection-indicator.connected {
  opacity: 0;
  transform: translateY(-8px);
}