/**
 * Elegant Modal System Styles
 *
 * Additional styles for the modal system.
 * Most styling is handled by Tailwind CSS classes in modal.js
 */

#modal-container {
    /* Modal container styles */
}

/* Modal transitions */
#modal-container > div:last-child {
    transition: transform 200ms ease-out, opacity 200ms ease-out;
}

/* Ensure proper z-index stacking */
#modal-container .absolute {
    z-index: 0;
}

#modal-container > div:last-child {
    z-index: 1;
}

/* Focus styles for accessibility */
#modal-container button:focus-visible {
    outline: 2px solid rgb(57 157 156);
    outline-offset: 2px;
}

/* Prevent text selection while modal is open */
#modal-container * {
    -webkit-user-select: none;
    user-select: none;
}

#modal-container p {
    /* Allow text selection in messages */
    -webkit-user-select: text;
    user-select: text;
}

/* Animation keyframes (fallback if JS transitions fail) */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Ensure Material Symbols are centered */
#modal-container .material-symbols-outlined {
    display: inline-block;
    vertical-align: middle;
}

/* Dark mode adjustments for icons */
@media (prefers-color-scheme: dark) {
    #modal-container .material-symbols-outlined {
        color: inherit;
    }
}