<!-- #region AssistantChat.MarkdownRenderer [C:2] [TYPE Component] [SEMANTICS assistant,chat,markdown,rendering] -->
<!-- @ingroup AgentChat -->
<!-- @BRIEF Renders markdown text using @humanspeak/svelte-markdown with semantic Tailwind prose styles. -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [EXT:@humanspeak/svelte-markdown] -->
<!-- @UX_STATE Rendered -> Markdown rendered with proper headings, lists, code blocks, links. -->
<!-- @UX_STATE Empty -> Empty string renders nothing. -->
<script lang="ts">
  import SvelteMarkdown from "@humanspeak/svelte-markdown";

  let { source = "" } = $props();
</script>

{#if source}
  <div class="markdown-text">
    <SvelteMarkdown {source} />
  </div>
{/if}

<style>
  /* @humanspeak/svelte-markdown renderers use semantic HTML tags — style via cascade */
  .markdown-text :global(h1),
  .markdown-text :global(h2),
  .markdown-text :global(h3) {
    font-weight: 600;
    color: var(--color-text, #1a1a2e);
    margin-top: 0.75rem;
    margin-bottom: 0.375rem;
  }
  .markdown-text :global(h1) {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
  .markdown-text :global(h2) {
    font-size: 1rem;
    line-height: 1.375rem;
  }
  .markdown-text :global(h3) {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .markdown-text :global(p) {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text, #1a1a2e);
    margin-bottom: 0.375rem;
  }
  .markdown-text :global(ul),
  .markdown-text :global(ol) {
    list-style-position: inside;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text, #1a1a2e);
    margin-bottom: 0.375rem;
    padding-left: 0;
  }
  .markdown-text :global(ul) {
    list-style-type: disc;
  }
  .markdown-text :global(ol) {
    list-style-type: decimal;
  }
  .markdown-text :global(li) {
    margin-bottom: 0.125rem;
  }
  .markdown-text :global(code) {
    border-radius: 0.25rem;
    background-color: var(--color-surface-muted, #f3f4f6);
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
    color: var(--color-text, #1a1a2e);
  }
  .markdown-text :global(pre) {
    border-radius: 0.5rem;
    background-color: var(--color-surface-muted, #f3f4f6);
    padding: 0.75rem;
    overflow-x: auto;
    margin-bottom: 0.5rem;
  }
  .markdown-text :global(pre code) {
    background: none;
    padding: 0;
    font-size: 0.75rem;
  }
  .markdown-text :global(a) {
    color: var(--color-primary, #2563eb);
    text-decoration: underline;
  }
  .markdown-text :global(a:hover) {
    color: var(--color-primary-hover, #1d4ed8);
  }
  .markdown-text :global(strong) {
    font-weight: 600;
    color: var(--color-text, #1a1a2e);
  }
  .markdown-text :global(em) {
    font-style: italic;
    color: var(--color-text, #1a1a2e);
  }
  .markdown-text :global(hr) {
    border: none;
    border-top: 1px solid var(--color-border, #e5e7eb);
    margin: 0.75rem 0;
  }
  .markdown-text :global(blockquote) {
    border-left: 3px solid var(--color-primary, #2563eb);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    color: var(--color-text-muted, #6b7280);
    font-style: italic;
  }
  .markdown-text :global(table) {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
  }
  .markdown-text :global(th),
  .markdown-text :global(td) {
    border: 1px solid var(--color-border, #e5e7eb);
    padding: 0.375rem 0.5rem;
    text-align: left;
  }
  .markdown-text :global(th) {
    background-color: var(--color-surface-muted, #f3f4f6);
    font-weight: 600;
  }
  .markdown-text :global(img) {
    max-width: 100%;
    border-radius: 0.375rem;
    margin: 0.5rem 0;
  }
</style>
<!-- #endregion AssistantChat.MarkdownRenderer -->
