static/css/_misc.css

/* ── inputs global ── */
textarea, input[type="text"] { border-radius: 10px !important; font-size: 15px !important; }

/* ── code blocks ── */
#hy-chat pre {
    background: #f5f5f7 !important;
    border: 1px solid #ebebeb !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    overflow-x: auto !important;
    margin: 0.8em 0 !important;
}
.dark #hy-chat pre {
    background: #111 !important;
    border-color: #2a2a2a !important;
}
#hy-chat code {
    font-family: "SF Mono", "Fira Code", "JetBrains Mono", "Consolas", "Monaco", monospace !important;
    font-size: 0.9em !important;
}
.dark #hy-chat code {
    color: #d4d4d4 !important;
}
#hy-chat :not(pre) > code {
    background: #f0f0f3 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    color: #333 !important;
}
.dark #hy-chat :not(pre) > code {
    background: #2a2a2a !important;
    color: #d4d4d4 !important;
}

/* ── blockquote ── */
#hy-chat blockquote {
    border-left: 3px solid #d1d1d6 !important;
    margin: 0.8em 0 !important;
    padding: 4px 16px !important;
    color: #555 !important;
    background: transparent !important;
}
.dark #hy-chat blockquote {
    border-left-color: #3a3a3a !important;
    color: #909090 !important;
}

/* ── tables ──
 * Markdown tables otherwise render with ``display: table`` and
 * intrinsic auto sizing, which lets a wide table push past the
 * message's ``max-width: 95%`` and overflow ``#hy-chat`` horizontally.
 * Beyond the obvious horizontal-clip ugliness, the post-stream column-
 * width pass (browser re-measures cells once all rows are in) was
 * leaving ``#hy-chat``'s ``scrollHeight`` desynced from real layout —
 * the user could drag the scrollbar to the bottom of its track without
 * reaching the actual last row of the answer, and the wheel was dead
 * because they really were at the (stale) max scrollTop.
 *
 * The fix is to (a) keep the table inside the message bubble and
 * (b) make any too-wide table scroll horizontally inside ITS OWN
 * bounds rather than the row's:
 *   - ``display: block`` + ``max-width: 100%`` + ``overflow-x: auto``
 *     makes the ``<table>`` itself a horizontally-scrollable inline
 *     box; column widths are still auto-computed but the layout
 *     impact stays inside the table.
 *   - ``border-collapse: collapse`` + light borders give it the
 *     conventional spreadsheet look without adding cell-spacing
 *     surprises that browsers handle inconsistently. */
#hy-chat table {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border-collapse: collapse !important;
    margin: 0.8em 0 !important;
    font-size: 14px !important;
}
#hy-chat th,
#hy-chat td {
    border: 1px solid #e5e5ea !important;
    padding: 6px 12px !important;
    text-align: left !important;
    vertical-align: top !important;
}
#hy-chat th {
    background: #f5f5f7 !important;
    font-weight: 600 !important;
}
.dark #hy-chat th,
.dark #hy-chat td {
    border-color: #333 !important;
}
.dark #hy-chat th {
    background: #1f1f1f !important;
}

/* ── hr ── */
#hy-chat hr {
    border: none !important;
    border-top: 1px solid #e5e5ea !important;
    margin: 1.2em 0 !important;
}
.dark #hy-chat hr {
    border-top-color: #2a2a2a !important;
}

/* ── slider progress ── */
.gradio-container input[type="range"]::-moz-range-progress { background-color: #2563eb !important; }
.gradio-container input[type="range"]::-moz-range-track { background: #e5e7eb !important; }