/* Custom Styles to augment Tailwind */

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar for Chrome/Safari/Edge */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #020617; 
}

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

::-webkit-scrollbar-thumb:hover {
    background: #06b6d4; 
}

/* Animation for the "System Active" badge */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.animate-pulse-slow {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Formula Tooltip Hover Effect */
.formula-var:hover .formula-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

.formula-tooltip {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.3s ease;
    width: 200px;
    padding: 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    z-index: 50;
    text-align: center;
    pointer-events: none;
}

/* Range Input Styling */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #06b6d4;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

input[type=range]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border: none;
    border-radius: 50%;
    background: #06b6d4;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

/* Code Block Styling */
pre {
    scrollbar-width: thin;
    scrollbar-color: #334155 #0f172a;
}