/* Diagram / flowchart responsive + centered rendering (theme-level) */

/* Common containers used by diagram libraries */
.diagram,
.diagram-container,
.flowchart,
.flowchart-container,
.graph,
.graph-container,
.mermaid,
.svg-container,
.react-flow,
.react-flow__container,
[data-diagram],
[data-flowchart] {
    max-width: 100% !important;
}

/* Center diagrams and prevent page overflow */
.diagram-container,
.flowchart-container,
.graph-container,
.mermaid,
.svg-container,
[data-diagram],
[data-flowchart] {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 12px 8px !important;
}

/* Make any inline SVG scale properly */
.diagram-container svg,
.flowchart-container svg,
.graph-container svg,
.mermaid svg,
.svg-container svg,
[data-diagram] svg,
[data-flowchart] svg,
svg.diagram,
svg.flowchart {
    max-width: 100% !important;
    height: auto !important;
}

/* Improve text wrapping when nodes use foreignObject */
svg foreignObject * {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

/* If a library uses pure SVG <text>, at least keep it smaller and readable */
svg text {
    font-size: 12px;
}

@media (max-width: 768px) {
    svg text {
        font-size: 11px;
    }
    .diagram-container,
    .flowchart-container,
    .graph-container,
    .mermaid,
    .svg-container,
    [data-diagram],
    [data-flowchart] {
        padding: 10px 6px !important;
    }
}