@layer components {
  .prose.comparison-markdown h1,
  .prose.comparison-markdown h2,
  .prose.comparison-markdown h3,
  .prose.comparison-markdown h4 {
    color: var(--accent-700) !important;
    font-weight: 600 !important;
  }

  .prose.comparison-markdown h2 {
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  @media (prefers-color-scheme: dark) {
    .prose.comparison-markdown h1,
    .prose.comparison-markdown h2,
    .prose.comparison-markdown h3,
    .prose.comparison-markdown h4 {
      color: var(--accent-400) !important;
    }
  }

  .dark .prose.comparison-markdown h1,
  .dark .prose.comparison-markdown h2,
  .dark .prose.comparison-markdown h3,
  .dark .prose.comparison-markdown h4 {
    color: var(--accent-400) !important;
  }

  /* ── chat-markdown: scoped prose overrides for assistant messages ── */

  .prose.chat-markdown h1 {
    font-size: 1.375rem !important;
    line-height: 1.875rem !important;
    font-weight: 700 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.625rem !important;
  }

  .prose.chat-markdown h2 {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
    font-weight: 600 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  .prose.chat-markdown h3 {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    font-weight: 600 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.375rem !important;
  }

  .prose.chat-markdown h4,
  .prose.chat-markdown h5,
  .prose.chat-markdown h6 {
    font-weight: 600 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.25rem !important;
  }

  .prose.chat-markdown p {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .prose.chat-markdown ul {
    list-style-type: disc !important;
    padding-left: 1.25rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .prose.chat-markdown ol {
    list-style-type: decimal !important;
    padding-left: 1.25rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .prose.chat-markdown li {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .prose.chat-markdown pre {
    overflow-x: auto !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
  }

  .prose.chat-markdown code:not(pre code) {
    border-radius: 0.25rem !important;
    padding: 0.125rem 0.3125rem !important;
    font-size: 0.8125rem !important;
    background-color: rgb(243 244 246) !important;
    color: rgb(17 24 39) !important;
  }

  .dark .prose.chat-markdown code:not(pre code) {
    background-color: rgb(55 65 81) !important;
    color: rgb(229 231 235) !important;
  }

  .prose.chat-markdown blockquote {
    border-left-width: 3px !important;
    border-left-color: rgb(156 163 175) !important;
    padding-left: 1rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    font-style: italic !important;
    color: rgb(75 85 99) !important;
  }

  .dark .prose.chat-markdown blockquote {
    border-left-color: rgb(107 114 128) !important;
    color: rgb(156 163 175) !important;
  }

  .prose.chat-markdown table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    font-size: 0.8125rem !important;
  }

  .prose.chat-markdown th {
    font-weight: 600 !important;
    text-align: left !important;
    padding: 0.375rem 0.75rem !important;
    border: 1px solid rgb(229 231 235) !important;
    background-color: rgb(249 250 251) !important;
  }

  .prose.chat-markdown td {
    padding: 0.375rem 0.75rem !important;
    border: 1px solid rgb(229 231 235) !important;
  }

  .dark .prose.chat-markdown th {
    border-color: rgb(75 85 99) !important;
    background-color: rgb(31 41 55) !important;
  }

  .dark .prose.chat-markdown td {
    border-color: rgb(75 85 99) !important;
  }

  .prose.chat-markdown a {
    color: rgb(37 99 235) !important;
    text-decoration: underline !important;
  }

  .prose.chat-markdown a:hover {
    color: rgb(29 78 216) !important;
  }

  .dark .prose.chat-markdown a {
    color: rgb(96 165 250) !important;
  }

  .dark .prose.chat-markdown a:hover {
    color: rgb(147 197 253) !important;
  }

  .prose.chat-markdown hr {
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    border-top-width: 1px !important;
    border-color: rgb(229 231 235) !important;
  }

  .dark .prose.chat-markdown hr {
    border-color: rgb(75 85 99) !important;
  }

}