@layer components {
  .replay {
    display: grid;
    gap: 1.5rem;
  }

  .replay__subheading {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  .replay-changes {
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: var(--text-sm);
  }

  .replay-prompt pre {
    max-block-size: 20rem;
    overflow: auto;
    white-space: pre-wrap;
  }

  .replay-tool {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .replay-comparison {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .replay-row {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    container-type: inline-size;
  }

  .replay-row__caller {
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--muted);

    & p {
      margin: 0;
      text-wrap: pretty;
    }
  }

  /* Stacked when narrow, side by side once the row has room for two columns. */
  .replay-row__sides {
    display: grid;
    gap: 0.75rem;
  }

  @container (width >= 40rem) {
    .replay-row__sides {
      grid-template-columns: 1fr 1fr;
    }
  }

  .replay-side {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-inline-size: 0;
    padding-inline-start: 0.75rem;
    border-inline-start: 2px solid var(--border);
  }

  .replay-side--replay {
    border-inline-start-color: var(--primary);
  }

  .replay-side__label {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .replay-side__pending {
    block-size: 3rem;
    border-radius: var(--radius-md);
    background: var(--muted);
    animation: replay-pending 1.2s ease-in-out infinite alternate;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  .replay-steps {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .replay-step {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
    font-size: var(--text-sm);

    & p {
      margin: 0;
    }

    & pre {
      margin-block: 0.25rem 0;
      overflow-x: auto;
      font-size: var(--text-xs);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
  }

  .replay-step--tool summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .replay-step__title {
    font-weight: var(--font-weight-medium);
  }

  .replay-step__meta {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
  }

  .replay-step--failed .replay-step__title {
    color: var(--destructive);
  }

  @keyframes replay-pending {
    from { opacity: 1; }
    to { opacity: 0.5; }
  }
}