@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fade-in 200ms ease-out both;
}

.dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.dot-green     { background: #16a34a; box-shadow: 0 0 0 3px #dcfce7; }
.dot-amber     { background: #ca8a04; box-shadow: 0 0 0 3px #fef9c3; }
.dot-red       { background: #dc2626; box-shadow: 0 0 0 3px #fee2e2; }
.dot-draft     { background: #94a3b8; box-shadow: 0 0 0 3px #e2e8f0; }
.dot-processing{ background: #0f4c81; box-shadow: 0 0 0 3px #dbeafe; animation: pulse 1.5s ease-in-out infinite; }
.dot-error     { background: #6b21a8; box-shadow: 0 0 0 3px #f3e8ff; }

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

.json-pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  background: #0b1220;
  color: #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}