.generation-state-placeholder {
  background: oklch(20.5% 0 0);
  position: relative;
  overflow: hidden;
}

.generation-state-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(24% 0 0 / 0.6) 50%,
    transparent 100%
  );
  animation: generation-shimmer 2s ease-in-out infinite;
}

@keyframes generation-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.generation-state-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid oklch(24% 0 0);
  border-top-color: oklch(55.6% 0 0);
  border-radius: 50%;
  animation: generation-spin 0.8s linear infinite;
}

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

.generation-state-placeholder-card {
  background: oklch(20.5% 0 0);
  border-radius: 0.375rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.generation-state-placeholder-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(24% 0 0 / 0.5) 50%,
    transparent 100%
  );
  animation: generation-shimmer-card 2.2s ease-in-out infinite;
}

@keyframes generation-shimmer-card {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.generation-state-label {
  animation: generation-pulse 2s ease-in-out infinite;
}

@keyframes generation-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.generation-state-progress-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: oklch(85% 0 0);
  text-shadow: 0 0 8px oklch(100% 0 0 / 0.2);
  z-index: 5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  animation: text-pulse 2s ease-in-out infinite;
  user-select: none;
}

@keyframes text-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.55; }
}