.markdown-body .mermaid {
    min-width: 0;
    max-width: 100%;
    margin: 1rem 0;
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid var(--weave-block-border, #d8e0e9);
    border-radius: 0.5rem;
    background: var(--weave-block-bg, #f8fafc);
}

.markdown-body .mermaid:not([data-mermaid-state="done"]) {
    white-space: pre-wrap;
    font-family: var(--bs-font-monospace);
}

.markdown-body .mermaid[data-mermaid-state="done"] {
    text-align: center;
}

.markdown-body .mermaid > svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}