/* Custom Styles overrides for Empower B1 Simulator */
/* Most styling is handled by Tailwind CSS */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Hide scrollbar for clean app-like look but allow scrolling */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 10px;
}
.dark ::-webkit-scrollbar-thumb {
    background-color: rgba(71, 85, 105, 0.8);
}

/* Ensure audio player looks decent in light/dark mode */
audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    height: 36px;
    outline: none;
    border-radius: 9999px;
}
.dark audio {
    filter: invert(0.9) hue-rotate(180deg);
}

/* Inputs (for text input questions) */
input[type="text"] {
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #e0e3e6;
    background: #ffffff;
    font-size: 1rem;
    color: #181c1f;
    transition: all 0.2s;
}
.dark input[type="text"] {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
input[type="text"]:focus {
    outline: none;
    border-color: #005bbf;
    box-shadow: 0 0 0 4px rgba(0, 91, 191, 0.1);
}
.dark input[type="text"]:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Animation utilities */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out forwards;
}