/**
 * AI Architecture Diagram Generator - Custom Styles
 * This file contains all custom CSS styles for the application
 */

/* Font family configuration */
body {
    font-family: "Inter", sans-serif;
}

/* Loading spinner styles */
.loader {
    border: 4px solid #f3f3f3; /* Light grey circle */
    border-top: 4px solid #3498db; /* Blue spinning part */
    border-radius: 50%; /* Makes the element circular */
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite; /* Applies spinning animation */
    position: absolute; /* Allows precise positioning */
    top: 50%;
    left: 50%;
    margin-top: -20px; /* Centers the spinner vertically */
    margin-left: -20px; /* Centers the spinner horizontally */
}

/* Spin animation keyframes */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive SVG diagram styling */
#diagramOutput svg {
    max-width: 100%;
    height: auto;
}

/* Utility class for hidden elements */
.hidden {
    display: none !important;
}

/* Custom scrollbar for code areas */
#mermaid-code,
#prompt-input {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

#mermaid-code::-webkit-scrollbar,
#prompt-input::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#mermaid-code::-webkit-scrollbar-track,
#prompt-input::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#mermaid-code::-webkit-scrollbar-thumb,
#prompt-input::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

#mermaid-code::-webkit-scrollbar-thumb:hover,
#prompt-input::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Ensure proper spacing and alignment for diagram output */
#diagramOutput {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Error message styling enhancements */
#error-message {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Button disabled state improvements */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Focus visible improvements for accessibility */
button:focus-visible,
textarea:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}