/* ============================================================
   WISEai chat answer typography — scoped to .wiseai-markdown

   WHY THIS FILE EXISTS: WiseAI answers are Markdig-rendered HTML
   injected as a MarkupString. The markup carries Tailwind `prose`
   classes, but this app loads Tailwind via the Play CDN — Preflight
   reset ON, Typography plugin OFF — so `prose` is inert and answers
   render as an unstyled wall (no paragraph gaps, flat headings,
   unindented lists). This hand-rolled "prose" is the actual styling
   layer.

   SCOPE / BLAST RADIUS: every rule is scoped under .wiseai-markdown,
   a class used ONLY on WiseAI surfaces (WISEaiAgent page + the chat
   drawer + the user's own prompt turns). Nothing else in the app can
   match these rules, so this is safe to load app-wide. Kept as its
   own file (not buried in wise-styles.css) so it is easy to own,
   tune, or remove as a unit. Colors bind to the oyster token scale
   from tokens.css (loaded earlier in App.razor).
   ============================================================ */

.wiseai-markdown {
    color: var(--color-oyster-700);
    font-size: 0.9375rem;   /* ~15px — small readability nudge */
    line-height: 1.65;      /* generous vertical rhythm */
    overflow-wrap: break-word;
}

/* No stray margin at the very top/bottom of an answer. */
.wiseai-markdown > :first-child { margin-top: 0; }
.wiseai-markdown > :last-child  { margin-bottom: 0; }

/* Paragraphs: the gap that separates ideas. */
.wiseai-markdown p { margin: 0 0 0.9em; }

/* Headings: real hierarchy + breathing room above each section. */
.wiseai-markdown h1,
.wiseai-markdown h2,
.wiseai-markdown h3,
.wiseai-markdown h4 {
    color: var(--color-oyster-900);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.5em 0 0.55em;
}
.wiseai-markdown h1 { font-size: 1.4em; }
.wiseai-markdown h2 { font-size: 1.2em; }
.wiseai-markdown h3 { font-size: 1.05em; }
.wiseai-markdown h4 { font-size: 1em; }

/* Lists: clear indentation, visible markers, item spacing. */
.wiseai-markdown ul,
.wiseai-markdown ol { margin: 0.75em 0; padding-left: 1.6em; }
.wiseai-markdown ul { list-style: disc; }
.wiseai-markdown ol { list-style: decimal; }
.wiseai-markdown li { margin: 0.35em 0; padding-left: 0.2em; }
.wiseai-markdown li::marker { color: var(--color-oyster-500); }
.wiseai-markdown li > p { margin: 0 0 0.4em; }   /* loose lists */
.wiseai-markdown li > ul,
.wiseai-markdown li > ol { margin: 0.3em 0; }
.wiseai-markdown ul ul { list-style: circle; }

/* Emphasis: strong stands out but stays calm. */
.wiseai-markdown strong { color: var(--color-oyster-900); font-weight: 700; }
.wiseai-markdown em { font-style: italic; }

/* Links */
.wiseai-markdown a {
    color: var(--color-indigo-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wiseai-markdown a:hover { color: var(--color-indigo-600); }

/* Inline code + code blocks */
.wiseai-markdown code {
    font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: var(--color-oyster-200);
    color: var(--color-oyster-900);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}
.wiseai-markdown pre {
    background: var(--color-oyster-200);
    border: 1px solid var(--color-oyster-300);
    border-radius: 8px;
    padding: 0.85em 1em;
    overflow-x: auto;
    margin: 0.9em 0;
}
.wiseai-markdown pre code { background: none; padding: 0; }

/* Blockquotes */
.wiseai-markdown blockquote {
    margin: 0.9em 0;
    padding: 0.35em 0 0.35em 1em;
    border-left: 3px solid var(--color-oyster-300);
    color: var(--color-oyster-600);
}

/* Tables (Markdig advanced extensions can emit these) */
.wiseai-markdown table { border-collapse: collapse; width: 100%; margin: 0.9em 0; font-size: 0.9em; }
.wiseai-markdown th,
.wiseai-markdown td { border: 1px solid var(--color-oyster-300); padding: 0.4em 0.6em; text-align: left; }
.wiseai-markdown th { background: var(--color-oyster-200); color: var(--color-oyster-900); font-weight: 600; }

/* Section divider */
.wiseai-markdown hr { border: 0; border-top: 1px solid var(--color-oyster-300); margin: 1.4em 0; }