.drop-active {
    outline: 2px dashed rgb(56 189 248);
    outline-offset: 2px
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.tag button {
    line-height: 0
}

/* FilePond Dark Theme Customization */
.filepond--root {
    font-family: inherit;
    min-height: 140px;
}

.filepond--panel-root {
    background-color: rgb(15 23 42) !important;
    border: 1px solid rgb(30 41 59) !important;
    border-radius: 0.5rem !important;
}

.filepond--drop-label {
    color: rgb(226 232 240) !important;
}

.filepond--label-action {
    color: rgb(148 163 184) !important;
    text-decoration: underline;
}

.filepond--label-action:hover {
    color: rgb(226 232 240) !important;
}

.filepond--drip-blob {
    background-color: rgb(30 41 59) !important;
}

.filepond--file {
    color: rgb(226 232 240) !important;
}

.filepond--file-info {
    color: rgb(148 163 184) !important;
}

.filepond--item-panel {
    background-color: rgb(30 41 59) !important;
}

.filepond--image-preview {
    background-color: rgb(15 23 42) !important;
}

/* Progress bar */
.filepond--file-status {
    color: rgb(148 163 184) !important;
}

.filepond--progress-indicator {
    color: rgb(226 232 240) !important;
}

/* Thumbnail pond specific - 16:9 aspect ratio */
#thumbInput + .filepond--root {
    height: auto !important;
    min-height: 140px;
}

#thumbInput + .filepond--root .filepond--item {
    width: 100%;
}

#thumbInput + .filepond--root .filepond--image-preview-wrapper {
    aspect-ratio: 16 / 9;
}

#thumbInput + .filepond--root .filepond--drop-label {
    min-height: 140px;
}

/* Button styles */
.filepond--file-action-button {
    background-color: rgba(30, 41, 59, 0.8) !important;
    color: rgb(226 232 240) !important;
}

.filepond--file-action-button:hover {
    background-color: rgba(51, 65, 85, 0.9) !important;
}

/* Processing indicator */
.filepond--action-process-item {
    background-color: rgb(226 232 240) !important;
    color: rgb(15 23 42) !important;
}

.filepond--action-process-item:hover {
    background-color: rgb(248 250 252) !important;
}

/* YouTube Import Animations */
@keyframes pulse-line {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(200%);
    }
}

.animate-pulse-line {
    animation: pulse-line 2s ease-in-out infinite;
}