/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; 
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3); 
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5); 
}

/* Animations */
.animate-in {
    animation-duration: 0.2s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
}
.fade-in {
    animation-name: fadeIn;
}
.zoom-in {
    animation-name: zoomIn;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.95); }
    to { transform: scale(1); }
}

/* Tokens input styling */
.directive-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.token-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.token-badge.keyword {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.dark .token-badge.keyword {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.token-badge.source {
    background-color: rgba(107, 114, 128, 0.1);
    color: #4b5563;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.dark .token-badge.source {
    background-color: rgba(156, 163, 175, 0.1);
    color: #d1d5db;
    border-color: rgba(156, 163, 175, 0.2);
}

.token-remove {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.token-remove:hover {
    opacity: 1;
}

/* Helper to strip input outline */
.tokens-input:focus {
    outline: none;
    box-shadow: none;
}