/* Custom Styles over Tailwind */

/* Flashing Light effect for the visualizer */
.signal-active {
    background-color: #0ea5e9 !important;
    /* brand-500 */
    border-color: #38bdf8 !important;
    /* brand-400 */
    box-shadow: 0 0 40px rgba(14, 165, 233, 0.6) !important;
}

.signal-active #current-char {
    color: white !important;
}

/* Custom scrollbar for textareas */
textarea::-webkit-scrollbar {
    width: 8px;
}

textarea::-webkit-scrollbar-track {
    background: transparent;
}

textarea::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    /* gray-400 half transparent */
    border-radius: 4px;
}

html.dark textarea::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.5);
    /* gray-600 */
}