static/css/_math.css

/* ─────────────────────────────────────────────────────────────────────────
 * KaTeX math rendering
 *
 * The chatbot CSS sets line-height: 1.8 + letter-spacing: 0.01em on
 * .bot .markdown.  These cascade into KaTeX, where SVGs for stretchy
 * operators (like \not=) use height: inherit + width: 100%.  An inflated
 * line-height turns those SVGs into solid-colour rectangles.  We reset
 * typographic properties on all KaTeX descendants to restore correct
 * glyph and symbol layout.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Restore KaTeX's own font ──
 * _layout.css sets font-family on #hy-chat; KaTeX children inherit it.
 * Override here so KaTeX uses its own math fonts for correct glyphs.  */
#hy-chat .katex {
    font: normal 1.21em KaTeX_Main, "Times New Roman", serif !important;
    text-indent: 0 !important;
}

/* ── Reset inherited typography ──
 * High-specificity selectors ensure we beat the #hy-chat .bot .markdown
 * rule that sets line-height: 1.8 and letter-spacing: 0.01em. */
#hy-chat .bot .markdown .katex,
#hy-chat .bot .markdown .katex *,
#hy-chat .bot .markdown .katex-display,
#hy-chat .bot .markdown .katex-display *,
#hy-chat .katex,
#hy-chat .katex *,
#hy-chat .katex-display,
#hy-chat .katex-display * {
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: 1.2 !important;
}

/* ── SVG rendering ──
 * KaTeX uses SVGs for radicals (√), stretchy delimiters, fraction lines,
 * and negation slashes.  Ensure they inherit the current text colour and
 * are not distorted by the parent's line-height. */
#hy-chat .katex svg {
    fill: currentColor;
    stroke: none;
}
#hy-chat .katex svg path {
    fill: currentColor;
}

/* ── SVG overlay fix ──
 * Constrain overlay containers (negation slashes, accents) so an
 * inflated line-height can never stretch SVGs into black blocks. */
#hy-chat .katex .rlap,
#hy-chat .katex .llap,
#hy-chat .katex .clap {
    line-height: 0 !important;
}
#hy-chat .katex .stretchy,
#hy-chat .katex .halfarrow-left,
#hy-chat .katex .halfarrow-right,
#hy-chat .katex .brace-left,
#hy-chat .katex .brace-right {
    overflow: hidden !important;
}
#hy-chat .katex .rule,
#hy-chat .katex .mfrac .frac-line,
#hy-chat .katex .overline .overline-line,
#hy-chat .katex .underline .underline-line,
#hy-chat .katex .hline {
    overflow: hidden !important;
}

/* ── Text colour ──
 * Explicit colour in both themes so KaTeX text and SVG fills (via
 * currentColor) always match the surrounding prose. */
#hy-chat .katex,
#hy-chat .katex-display {
    color: var(--hy-text, #222222) !important;
}

/* ── Display math (block) ── */
#hy-chat .katex-display {
    margin: 1em 0 !important;
    padding: 0.4em 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}
#hy-chat .katex-display > .katex {
    text-align: center !important;
}

/* Subtle scrollbar for wide equations */
#hy-chat .katex-display::-webkit-scrollbar {
    height: 3px;
}
#hy-chat .katex-display::-webkit-scrollbar-track {
    background: transparent;
}
#hy-chat .katex-display::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 2px;
}

/* ── Inline math ── */
#hy-chat p .katex,
#hy-chat li .katex,
#hy-chat td .katex {
    font-size: 1.05em;
    vertical-align: baseline;
}

/* ── KaTeX error fallback: show raw LaTeX legibly ── */
#hy-chat .katex-error {
    color: var(--hy-text-muted, #666) !important;
    font-family: "SF Mono", "Fira Code", "JetBrains Mono", monospace !important;
    font-size: 0.88em !important;
    background: var(--hy-bg-muted, #f5f5f7) !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
}

/* ── Dark mode ── */
.dark #hy-chat .katex,
.dark #hy-chat .katex-display {
    color: var(--hy-text, #e8e8e8) !important;
}
.dark #hy-chat .katex-display::-webkit-scrollbar-thumb {
    background: #404040;
}
.dark #hy-chat .katex-error {
    color: var(--hy-text-muted, #909090) !important;
    background: var(--hy-bg-muted, #2a2a2a) !important;
}