/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(232, 67, 147, 0.2);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(232, 67, 147, 0.5);
}

/* Base styles to align transparent textarea and highlight div */
#inpText {
    color: transparent;
    caret-color: white;
}

#inpText,
#highlightLayer {
    font-family: 'JetBrains Mono', monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Match Highlights */
.match-highlight {
    background-color: rgba(232, 67, 147, 0.4);
    border-radius: 2px;
    color: transparent;
    /* Keep text transparent to rely on textarea text, or draw text here */
}

/* Wait, if highlight layer has transparent text, we just need background. 
   But if caret is over it, it might look weird.
   A better approach: The textarea is transparent, but its caret is visible. 
   The highlight layer has ACTUAL visible text and background colors for matches.
*/
#inpText {
    color: transparent;
    caret-color: #FD79A8;
    background: transparent;
}

#highlightLayer {
    color: #e5e7eb;
    /* gray-200 */
}

.match-highlight {
    background-color: rgba(232, 67, 147, 0.3);
    color: #fff;
    border-bottom: 2px solid #E84393;
    border-radius: 2px;
}

/* Explainer Pills */
.token-pill {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.token-char {
    color: #FD79A8;
    font-weight: bold;
}

.token-desc {
    color: #00CEC9;
}