/* ============================================================
   Auth Status Bar — Frontend auth certainty layer
   Managed by /js/auth-observability.js.

   Surfaces:
     .ev-auth-degraded-banner   — full-width posture alert
     .ev-session-status-row     — inline row in dashboard topbar
     .ev-session-badge          — tier/status pill with state dot
     .ev-founder-badge          — founder access pill
     .ev-session-drift-warning  — JWT↔DB drift chip
     .ev-token-expiry-warning   — token expiry countdown chip
     .ev-upload-custody-state   — upload custody confirmation chip
     .ev-replay-sync-state      — replay sync status chip
   ============================================================ */

/* ── Shared: state colors ─────────────────────────────────── */

:root {
  --ev-obs-color-verified:  var(--color-emerald, #50c878);
  --ev-obs-color-drift:     var(--color-topaz, #f7b32b);
  --ev-obs-color-expiring:  #f97316; /* orange-500 */
  --ev-obs-color-expired:   var(--color-ruby, #e03c5f);
  --ev-obs-color-stale:     var(--color-slate-400, #94a3b8);
  --ev-obs-color-checking:  var(--color-sapphire, #5a8fff);
  --ev-obs-color-critical:  var(--color-ruby, #e03c5f);
  --ev-obs-color-degraded:  var(--color-topaz, #f7b32b);
  --ev-obs-color-founder:   var(--color-amethyst, #9b6bdf);
}

/* ── Degraded-mode banner ──────────────────────────────────── */

.ev-auth-degraded-banner {
  display: none;
  width: 100%;
  padding: 0.5rem 1rem;
  background: color-mix(in oklch, var(--ev-obs-color-degraded) 12%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--ev-obs-color-degraded) 40%, transparent);
  color: var(--color-on-surface, #fff);
  font-size: 0.8125rem;
  line-height: 1.4;
  z-index: 100;
}

.ev-auth-degraded-banner:not([hidden]) {
  display: flex;
  align-items: flex-start;
}

.ev-auth-degraded-banner[data-posture="critical"] {
  background: color-mix(in oklch, var(--ev-obs-color-critical) 15%, transparent);
  border-color: color-mix(in oklch, var(--ev-obs-color-critical) 50%, transparent);
  color: var(--ev-obs-color-critical);
}

.ev-auth-degraded-banner[data-posture="degraded"] {
  color: var(--ev-obs-color-degraded);
}

.ev-auth-degraded-banner__inner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

.ev-auth-degraded-banner__icon {
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.ev-auth-degraded-banner__message {
  flex: 1;
}

/* ── Session status row (topbar embed) ─────────────────────── */

.ev-session-status-row {
  display: none;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.ev-session-status-row:not([hidden]) {
  display: flex;
}

/* ── Session badge ─────────────────────────────────────────── */

.ev-session-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklch, currentcolor 30%, transparent);
  background: color-mix(in oklch, currentcolor 8%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  transition:
    color 200ms ease,
    background 200ms ease,
    border-color 200ms ease;
}

.ev-session-badge[data-state="verified"]  { color: var(--ev-obs-color-verified); }
.ev-session-badge[data-state="drift"]     { color: var(--ev-obs-color-drift); }
.ev-session-badge[data-state="expiring"]  { color: var(--ev-obs-color-expiring); }
.ev-session-badge[data-state="expired"]   { color: var(--ev-obs-color-expired); }
.ev-session-badge[data-state="stale"]     { color: var(--ev-obs-color-stale); }
.ev-session-badge[data-state="checking"]  { color: var(--ev-obs-color-checking); }

.ev-session-badge__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentcolor;
  box-shadow: 0 0 6px currentcolor;
  flex-shrink: 0;
}

.ev-session-badge[data-state="verified"] .ev-session-badge__dot {
  animation: ev-obs-pulse 2.5s ease-in-out infinite;
}

.ev-session-badge[data-state="checking"] .ev-session-badge__dot {
  animation: ev-obs-pulse 1s ease-in-out infinite;
}

@keyframes ev-obs-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.ev-session-badge__label {
  text-transform: capitalize;
}

/* ── Auth refresh timestamp ─────────────────────────────────── */

.ev-session-refreshed-at {
  font-size: 0.6875rem;
  color: var(--color-on-surface-muted, rgb(255 255 255 / 50%));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Founder badge ─────────────────────────────────────────── */

.ev-founder-badge {
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: color-mix(in oklch, var(--ev-obs-color-founder) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--ev-obs-color-founder) 40%, transparent);
  color: var(--ev-obs-color-founder);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
}

.ev-founder-badge:not([hidden]) {
  display: inline-flex;
}

/* ── Session drift warning ──────────────────────────────────── */

.ev-session-drift-warning {
  display: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: color-mix(in oklch, var(--ev-obs-color-drift) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--ev-obs-color-drift) 35%, transparent);
  border-radius: 0.375rem;
  color: var(--ev-obs-color-drift);
  font-size: 0.75rem;
  line-height: 1.4;
  max-width: 32rem;
  margin: 0.25rem 0.75rem;
}

.ev-session-drift-warning:not([hidden]) {
  display: flex;
}

/* ── Token expiry warning ───────────────────────────────────── */

.ev-token-expiry-warning {
  display: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: color-mix(in oklch, var(--ev-obs-color-expiring) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--ev-obs-color-expiring) 35%, transparent);
  border-radius: 0.375rem;
  color: var(--ev-obs-color-expiring);
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 0.25rem 0.75rem;
}

.ev-token-expiry-warning:not([hidden]) {
  display: flex;
}

.ev-token-expiry-warning__action {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  margin-left: 0.25rem;
}

.ev-token-expiry-warning__action:hover,
.ev-token-expiry-warning__action:focus-visible {
  opacity: 0.8;
}

/* ── Upload custody state chip ──────────────────────────────── */

.ev-upload-custody-state {
  display: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--color-surface-elevated, rgb(255 255 255 / 6%));
  border: 1px solid var(--color-border-subtle, rgb(255 255 255 / 10%));
  font-size: 0.75rem;
  color: var(--color-on-surface-muted, rgb(255 255 255 / 60%));
  white-space: nowrap;
  overflow: hidden;
  max-width: 20rem;
}

.ev-upload-custody-state:not([hidden]) {
  display: inline-flex;
}

.ev-upload-custody-state[data-state="uploading"] {
  color: var(--ev-obs-color-checking);
  border-color: color-mix(in oklch, var(--ev-obs-color-checking) 30%, transparent);
}

.ev-upload-custody-state[data-state="confirmed"] {
  color: var(--ev-obs-color-verified);
  border-color: color-mix(in oklch, var(--ev-obs-color-verified) 30%, transparent);
}

.ev-upload-custody-state[data-state="error"] {
  color: var(--ev-obs-color-expired);
  border-color: color-mix(in oklch, var(--ev-obs-color-expired) 30%, transparent);
}

/* Show/hide upload custody icons per state */
.ev-upload-custody-state__spinner,
.ev-upload-custody-state__check,
.ev-upload-custody-state__error-icon {
  display: none;
  flex-shrink: 0;
}

.ev-upload-custody-state[data-state="uploading"] .ev-upload-custody-state__spinner {
  display: block;
  animation: ev-obs-spin 0.8s linear infinite;
}

.ev-upload-custody-state[data-state="confirmed"] .ev-upload-custody-state__check {
  display: block;
}

.ev-upload-custody-state[data-state="error"] .ev-upload-custody-state__error-icon {
  display: block;
}

@keyframes ev-obs-spin {
  to { transform: rotate(360deg); }
}

.ev-upload-custody-state__filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}

.ev-upload-custody-state__hash {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size: 0.6875rem;
  opacity: 0.75;
  letter-spacing: 0.02em;
}

/* ── Replay sync chip ───────────────────────────────────────── */

.ev-replay-sync-state {
  display: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: var(--color-surface-elevated, rgb(255 255 255 / 6%));
  border: 1px solid var(--color-border-subtle, rgb(255 255 255 / 10%));
  font-size: 0.6875rem;
  color: var(--color-on-surface-muted, rgb(255 255 255 / 60%));
  white-space: nowrap;
}

.ev-replay-sync-state:not([hidden]) {
  display: inline-flex;
}

.ev-replay-sync-state[data-state="syncing"] {
  color: var(--ev-obs-color-checking);
}

.ev-replay-sync-state[data-state="syncing"] .ev-replay-sync-state__icon {
  animation: ev-obs-spin 1s linear infinite;
}

.ev-replay-sync-state[data-state="synced"] {
  color: var(--ev-obs-color-verified);
}

.ev-replay-sync-state[data-state="stale"] {
  color: var(--ev-obs-color-drift);
}

.ev-replay-sync-state__time {
  font-variant-numeric: tabular-nums;
}

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ev-session-badge__dot,
  .ev-upload-custody-state__spinner,
  .ev-replay-sync-state__icon {
    animation: none;
  }

  .ev-session-badge,
  .ev-founder-badge {
    transition: none;
  }
}