static/css/_hide.css

/* ── hide all avatars ── */
#hy-chat [class*="avatar"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* ── hide Gradio default action buttons & icons ── */
#hy-chat button[aria-label="Copy message"],
#hy-chat button[title="Copy message"],
#hy-chat button[aria-label="Share message"],
#hy-chat button[title="Share message"],
#hy-chat button[aria-label="Delete message"],
#hy-chat button[title="Delete message"],
#hy-chat button[aria-label="Retry"],
#hy-chat button[title="Retry"],
#hy-chat button[aria-label="Undo"],
#hy-chat button[title="Undo"],
#hy-chat .message-buttons-bot,
#hy-chat .message-buttons-user,
#hy-chat .bot .icon-button-wrapper,
#hy-chat .user .icon-button-wrapper,
#hy-chat .bot .icon-button,
#hy-chat .user .icon-button,
#hy-chat .likeable {
    display: none !important;
}

/*
 * NOTE: do NOT use a blanket `.message-row button:not(.html-preview-btn)`
 * rule here — it would also hide our per-code-block "Copy" button that
 * lives inside .hy-codeblock-header at the top-right of each fenced
 * code block. The specific aria-label/title selectors above already
 * cover the message-level action buttons we want to hide.
 */

/* ── hide stray images/svgs inside messages ── */
#hy-chat .message-row img:not([class*="markdown"]),
#hy-chat .message-row svg {
    display: none !important;
}
/* …but keep the SVGs inside our custom code-copy-btn visible.
 * Specificity is boosted via duplicated #hy-chat to beat the hide rule. */
#hy-chat#hy-chat .message-row .code-copy-btn,
#hy-chat#hy-chat .message-row .code-copy-btn svg,
#hy-chat#hy-chat .message-row .code-copy-btn svg * {
    display: inline-flex !important;
}
#hy-chat#hy-chat .message-row .code-copy-btn svg {
    display: block !important;
}
/* …and keep SVGs inside KaTeX math formulas visible.
 * KaTeX uses SVGs for radicals, stretchy delimiters, fraction lines, etc. */
#hy-chat#hy-chat .message-row .katex svg,
#hy-chat#hy-chat .message-row .katex-display svg {
    display: inline !important;
}

/* ── Hide scroll-to-bottom button (too jarring in both themes) ── */
#hy-chat button.scroll-hide,
#hy-chat button[aria-label*="scroll" i],
#hy-chat button[aria-label*="bottom" i],
#hy-chat .scroll-to-bottom,
#hy-chat [class*="scroll-button"],
#hy-chat [class*="scrollButton"],
#hy-chat button[class*="scroll"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Hide the busy-marker component completely ──
 * Driven by chat.py: contains either "" (idle) or a single
 * <span data-hy-streaming="1"> (streaming). It is a pure machine signal
 * read by static/app.js; it must never occupy any visible layout
 * regardless of value, and must never trap pointer/scroll/focus events. */
#hy-busy-marker,
#hy-busy-marker * {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* ── Hide all Gradio progress / loading status indicators globally ── */
.progress-bar-wrap,
.progress-bar,
.progress-text,
.progress,
.eta-bar,
[data-testid="loader"],
.loader,
.wrap.default.minimal,
.gradio-container .status-wrap,
.gradio-container .status,
.gradio-container .meta-text,
.gradio-container .meta-text-center,
.gradio-container [class*="progress"],
.gradio-container [class*="Progress"],
.gradio-container .generating,
#hy-chat .generating,
#hy-chat .progress,
#hy-chat .progress-text,
#hy-chat [class*="progress"],
#hy-chat [class*="loading"],
#hy-chat [class*="loader"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
}