@layer components {
/* LLM Request Log - markdown rendered content */

.markdown-content {
  font-size: var(--text-small);
  line-height: 1.5;

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-link);
    border-bottom: 1px solid var(--color-ink-lighter);
    padding-bottom: 0.2em;
  }

  h1 { font-size: 1.3em; font-weight: 700; margin: 1em 0 0.4em; }
  h2 { font-size: 1.2em; font-weight: 700; margin: 1em 0 0.4em; }
  h3 { font-size: 1em; font-weight: 600; margin: 0.6em 0 0.3em; border-bottom: none; }
  h4, h5, h6 { font-size: 1em; font-weight: 600; margin: 0.5em 0 0.25em; }

  p { margin: 0 0 0.5em; }
  ul, ol { margin: 0 0 0.5em; padding-left: 1.5em; }
  li { margin-bottom: 0.15em; }

  pre {
    font-size: 0.9em;
    padding: 0.5em;
    border-radius: 0.25rem;
    background: var(--color-ink-lightest);
    margin: 0.4em 0;

    code {
      padding: 0;
      background: none;
    }
  }

  code {
    font-size: 0.9em;
    padding: 0.1em 0.3em;
    border-radius: 0.25rem;
    background: var(--color-ink-lightest);
  }

  blockquote {
    border-left: 3px solid var(--color-ink-lighter);
    padding-left: 0.75em;
    margin: 0.4em 0;
    color: var(--color-ink-medium);
  }

  hr {
    margin: 0.6em 0;
  }

  > :first-child { margin-top: 0; }
  > :last-child { margin-bottom: 0; }
}

.scroll-panel {
  max-height: 400px;
  overflow-y: auto;
}

.scroll-panel--short {
  max-height: 150px;
}

pre.scroll-panel {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: var(--text-x-small);
}
}