/* Mermaid Diagram Styling */
.mermaid {
    text-align: center;
    margin: 20px auto;
    background-color: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 16px;
}

/* Ensure mermaid diagrams are responsive */
.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* Enhanced stroke visibility for better diagram clarity */
.mermaid svg .actor rect {
    stroke-width: 2px;
}

/* Ensure text is always readable */
.mermaid svg text {
    fill: #000000;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Larger text for actor labels */
.mermaid svg .actor text {
    font-size: 18px;
    font-weight: 500;
}

/* Clear message text */
.mermaid svg .messageText {
    font-size: 15px;
    font-weight: 400;
}

/* Thicker message lines for visibility */
.mermaid svg .messageLine0,
.mermaid svg .messageLine1 {
    stroke-width: 1.5px;
}

/* Style for dark mode compatibility (if needed) */
@media (prefers-color-scheme: dark) {
    .mermaid {
        background-color: #0d1117;
        border-color: #30363d;
    }
}