/* Mandala background and core styles */
.mandala-bg {
    background: linear-gradient(135deg, #0E1F1A 0%, #1a3a31 50%, #2AB09B 100%);
    background-attachment: fixed;
}

/* Lotus icon animation */
.lotus-icon-animated {
    animation: lotus-pulse 3s ease-in-out infinite;
}

@keyframes lotus-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Button spinner animation */
.button-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* WebGL Canvas styling */
#webgl-canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8px;
}

/* Audio visualizer bars */
.audio-bar {
    background: linear-gradient(to top, #2AB09B, #4BD7C1);
    margin: 0 1px;
    border-radius: 2px;
    transition: height 0.1s ease;
}

/* Visual gallery item */
.visual-item {
    background: #1a3a31;
    border: 1px solid #2AB09B;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.visual-item:hover {
    border-color: #4BD7C1;
    box-shadow: 0 4px 12px rgba(75, 215, 193, 0.3);
}

.visual-item.active {
    border-color: #4BD7C1;
    background: #2AB09B;
}

/* Loading indicator */
.loading-indicator {
    width: 16px;
    height: 16px;
    border: 2px solid #4BD7C1;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Preview area styling */
#analysis-preview-area video,
#analysis-preview-area img {
    max-width: 100%;
    height: auto;
}

/* Custom scrollbar */
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #2AB09B;
    border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #4BD7C1;
}