/* 
Custom styles extending Tailwind.
Since we're using Tailwind CDN, we keep custom CSS minimal.
Mainly used for custom scrollbars and specific selection highlights.
*/

::selection {
    background-color: rgba(16, 185, 129, 0.3);
    /* Primary color with transparency */
    color: inherit;
}

/* 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.3);
    /* gray-400 with opacity */
    border-radius: 4px;
}

.dark textarea::-webkit-scrollbar-thumb {
    background-color: rgba(107, 114, 128, 0.3);
    /* gray-500 with opacity */
}

textarea::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.5);
}

.dark textarea::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.5);
}

/* Pulse animation for copy success */
@keyframes copySuccessPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.copy-success {
    animation: copySuccessPulse 0.3s ease-in-out;
}