/**
 * Real-time Updates Styling
 * Animations and styles for WebSocket-powered features
 */

/* ================================
   Toast Notifications
   ================================ */

.toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--c-depth);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: slideIn 0.3s ease-out;
}

.toast-success {
  border-color: var(--c-reality);
  background: color-mix(in srgb, var(--c-reality) 8%, var(--c-depth));
}

.toast-error {
  border-color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 8%, var(--c-depth));
}

.toast-info {
  border-color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 8%, var(--c-depth));
}

.toast-icon {
  font-size: 24px;
  line-height: 1;
}

.toast-content {
  flex: 1;
}

.toast-content strong {
  display: block;
  color: var(--c-text);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.toast-content p {
  color: var(--c-text-soft);
  font-size: 13px;
  margin: 0;
}

.toast-close {
  background: none;
  border: none;
  color: var(--c-text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.toast-close:hover {
  opacity: 1;
}

.toast-hiding {
  animation: slideOut 0.3s ease-in forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* ================================
   Connection Status
   ================================ */

/* The pill starts `hidden` in the HTML (websockets are feature-flagged off);
   without this rule the class's display:flex overrides the UA [hidden] style
   and a permanent, meaningless "Connecting…" pill shows on every load. */
.connection-status[hidden] {
  display: none;
}

.connection-status {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--c-depth);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--c-text-soft);
  box-shadow: var(--shadow-md);
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-warning);
  animation: pulse 1.5s ease-in-out infinite;
}

.connection-status.connected .connection-dot {
  background: var(--c-reality);
  animation: none;
}

.connection-status.disconnected .connection-dot {
  background: var(--c-danger);
  animation: none;
}

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

/* ================================
   Vote Update Animations
   ================================ */

.vote-updating {
  animation: voteFlash 0.5s ease-out;
}

@keyframes voteFlash {
  0% {
    transform: scale(1);
    color: inherit;
  }
  50% {
    transform: scale(1.2);
    color: var(--c-accent);
  }
  100% {
    transform: scale(1);
    color: inherit;
  }
}

.score-changing {
  position: relative;
}

.score-changing::after {
  content: attr(data-delta);
  position: absolute;
  top: -20px;
  right: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-reality);
  animation: floatUp 1s ease-out forwards;
}

.score-changing[data-delta^="-"]::after {
  color: var(--c-danger);
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* ================================
   Convergence Score Animation
   ================================ */

.convergence-score {
  transition: color 0.3s ease;
}

.convergence-animating {
  color: var(--c-accent);
}

.confidence-indicator {
  position: relative;
  width: 100%;
  height: 4px;
  background: var(--c-abyss);
  border-radius: 2px;
  overflow: hidden;
}

.confidence-indicator::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--confidence, 0%);
  background: var(--c-accent);
  border-radius: 2px;
  transition: width 0.5s ease-out;
}

/* ================================
   Voting Eligibility Badge
   ================================ */

.eligibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.eligibility-badge.can-vote {
  background: var(--c-reality-glow);
  color: var(--c-reality);
  border: 1px solid color-mix(in srgb, var(--c-reality) 30%, transparent);
}

.eligibility-badge.comment-only {
  background: var(--c-idea-glow);
  color: var(--c-warning);
  border: 1px solid color-mix(in srgb, var(--c-warning) 30%, transparent);
}

.eligibility-badge svg {
  width: 12px;
  height: 12px;
}

/* ================================
   Live Indicator
   ================================ */

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--c-danger-glow);
  border: 1px solid color-mix(in srgb, var(--c-danger) 30%, transparent);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-danger);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.live-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-danger);
  animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.3);
  }
}

/* ================================
   Job Progress
   ================================ */

.job-progress {
  padding: 16px;
  background: var(--c-depth);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  margin-bottom: 16px;
}

.job-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.job-progress-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}

.job-progress-status {
  font-size: 12px;
  color: var(--c-text-soft);
}

.job-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--c-abyss);
  border-radius: 3px;
  overflow: hidden;
}

.job-progress-fill {
  height: 100%;
  background: var(--c-accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.job-progress-text {
  margin-top: 8px;
  font-size: 12px;
  color: var(--c-text-muted);
  text-align: center;
}

/* ================================
   Responsive
   ================================ */

@media (max-width: 480px) {
  .toast-container {
    right: 10px;
    left: 10px;
    max-width: none;
  }

  .connection-status {
    left: 10px;
    bottom: 10px;
  }
}