.view {
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--color-surface);
}

.view>.view-header {
  max-height: 4rem;
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--size-3) var(--size-4);

  >.prose {
    max-inline-size: 80%;
  }
}

/* Pending State Styles */
.pending-state {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  padding: var(--size-8);
  animation: fadeIn 0.6s ease-out;
}

.pending-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-3);
  max-inline-size: 32rem;
  text-align: center;
}

/* Icon Wrapper with Pulse Effect */
.pending-state__icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: auto;
  block-size: auto;
}

.pending-state__icon {
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--color-text-subtle);
  position: relative;
  z-index: 1;
}

.pending-state__icon--pulsing {
  animation: pulse 2s ease-in-out infinite;
}

/* Animated Bars */
.pending-state__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  block-size: 2.5rem;
}

.pending-state__bar {
  inline-size: 6px;
  block-size: 40%;
  background: var(--color-standout);
  border-radius: var(--rounded-full);
  animation: barPulse 1.2s ease-in-out infinite;
  opacity: 0.5;
}

.pending-state__bar:nth-child(1) {
  animation-delay: 0s;
}

.pending-state__bar:nth-child(2) {
  animation-delay: 0.15s;
}

.pending-state__bar:nth-child(3) {
  animation-delay: 0.3s;
}

.pending-state__bar:nth-child(4) {
  animation-delay: 0.45s;
}

.pending-state__bar:nth-child(5) {
  animation-delay: 0.6s;
}

/* Message Section */
.pending-state__message {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
}

.pending-state__title {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text-subtle);
  margin: 0;
  animation: slideInDown 0.5s ease-out 0.2s both;
}

.pending-state__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-subtle);
  margin: 0;
  animation: slideInDown 0.5s ease-out 0.3s both;
}

/* Animated Progress Bars */
.pending-state__progress {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  inline-size: 100%;
  max-inline-size: 16rem;
}

.pending-state[data-status="running"] .pending-state__progress {
  display: none;
}

.pending-state__progress-bar {
  block-size: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--color-primary) 50%,
      transparent 100%);
  background-size: 200% 100%;
  border-radius: var(--rounded-full);
  opacity: 0.3;
  animation: shimmer 2s ease-in-out infinite;
}

.pending-state__progress-bar--delayed {
  animation-delay: 0.3s;
  opacity: 0.2;
}

.pending-state__progress-bar--slow {
  animation-duration: 3s;
  animation-delay: 0.6s;
  opacity: 0.15;
}

/* Info Section */
.pending-state__info {
  padding: var(--size-3);
  background-color: transparent;
  border: none;
  inline-size: 100%;
  animation: slideInUp 0.5s ease-out 0.4s both;
}

/* Action Buttons */
.pending-state__actions {
  display: flex;
  gap: var(--size-6);
  flex-wrap: wrap;
  justify-content: center;
  animation: slideInUp 0.5s ease-out 0.5s both;
}

.pending-state__actions .btn {
  display: flex;
  align-items: center;
  gap: var(--size-2);
}

.pending-state__cancel-btn {
  --btn-color: light-dark(var(--red-700), var(--red-400)) !important;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes barPulse {

  0%,
  100% {
    block-size: 40%;
    opacity: 0.6;
  }

  50% {
    block-size: 100%;
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* State-specific styling */
.pending-state[data-status="queued"] .pending-state__progress-bar {
  background: linear-gradient(90deg,
      transparent 0%,
      light-dark(var(--amber-500), var(--amber-600)) 50%,
      transparent 100%);
}

.pending-state[data-status="queued"] .pending-state__icon {
  color: light-dark(var(--amber-500), var(--amber-500));
}

.pending-state[data-status="running"] .pending-state__icon {
  color: light-dark(var(--color-standout), var(--color-standout));
}

.pending-state[data-status="running"] .pending-state__pulse {
  border-color: var(--color-standout);
}

/* Responsive */
@media (max-width: 640px) {
  .pending-state__actions {
    flex-direction: column;
    inline-size: 100%;
  }

  .pending-state__actions .btn {
    inline-size: 100%;
    justify-content: center;
  }
}

/* Result State Styles (Failed/Cancelled) */
.result-state {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  padding: var(--size-8);
  animation: fadeIn 0.6s ease-out;
}

.result-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-3);
  max-inline-size: 32rem;
  text-align: center;
}

.result-state__icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: auto;
  block-size: auto;
}

.result-state__icon {
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--color-text-subtle);
}

.result-state__icon--failed {
  color: light-dark(var(--red-600), var(--red-400));
}

.result-state__icon--cancelled {
  color: var(--color-text-subtle);
}

.result-state__message {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
}

.result-state__title {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text-subtle);
  margin: 0;
}

.result-state__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-subtle);
  margin: 0;
}

.result-state__error {
  font-size: var(--text-sm);
  color: light-dark(var(--red-700), var(--red-300));
  background-color: light-dark(var(--red-50), var(--red-950));
  border: var(--border) solid light-dark(var(--red-200), var(--red-800));
  border-radius: var(--rounded-md);
  padding: var(--size-3);
  margin-block-start: var(--size-2);
  font-family: monospace;
  text-align: start;
  max-inline-size: 100%;
  overflow-x: auto;
}

.result-state__actions {
  display: flex;
  gap: var(--size-6);
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: var(--size-2);
}

.result-state__actions .btn {
  display: flex;
  align-items: center;
  gap: var(--size-2);
}

@media (max-width: 640px) {
  .result-state__actions {
    flex-direction: column;
    inline-size: 100%;
  }

  .result-state__actions .btn {
    inline-size: 100%;
    justify-content: center;
  }
}

/* Chart Container */
.chart-container {
  inline-size: 100%;
  block-size: 100%;
  position: relative;
}