@keyframes msg {
  from {
    @apply opacity-0;
    transform: translateY(var(--y, 1));
  }
}

@keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  to {
    -webkit-mask-position: -50%;
  }
}

.message {
  & .tool-processing {
    @apply text-content flex;
    -webkit-mask-image: linear-gradient(
      -75deg,
      rgba(var(--color-content) / 0.4) 30%,
      rgb(var(--color-content)) 50%,
      rgba(var(--color-content) / 0.4) 70%
    );
    -webkit-mask-size: 200%;
    animation: shine 2s linear infinite;
  }
}

.message x-markdown > div > * {
  --y: 3rem;
  animation: msg both linear;
  animation-timeline: view(100px);
  animation-range: entry;
}

.message x-markdown > div > *:nth-child(1) {
  --y: 1rem;
}

.message x-markdown > div > *:nth-child(2) {
  --y: 2rem;
}

.message x-markdown > div {
  @apply prose
    max-w-none 
    font-editor 
    prose-headings:font-editor-heading
    prose-headings:font-semibold
    prose-pre:p-6
    prose-pre:relative
    prose-pre:rounded-lg
    prose-pre:bg-line-super-dimmed
    leading-6;

  & > *:first-child {
    @apply mt-0;
  }

  & > *:last-child {
    @apply mb-0;
  }

  pre {
    @apply whitespace-pre-wrap border border-line-dimmed p-0;
  }

  pre svg {
    @apply absolute top-0 left-0 w-full h-full rounded-lg text-line-dimmed group-hover:text-line group-data-[selected]:hidden -z-10;
  }

  pre .actions {
    @apply flex items-center gap-2 text-content-dimmed justify-between px-6 py-1 bg-line-dimmed;
  }

  pre .lang {
    @apply uppercase pointer-events-none text-xs;
  }

  pre .copy {
    @apply cursor-pointer hover:text-content;
  }

  img {
    @apply my-2;
  }
}