/* Custom scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Checkerboard background for visualizer */
.checkerboard {
    background-image:
        linear-gradient(45deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.02) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.02) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.dark .checkerboard {
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.02) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.02) 75%);
}

/* Fix mermaid SVG scaling */
#mermaid-output svg {
    max-width: none !important;
    height: auto;
}