/* YouTube Summarizer Tool Styles */

/* Keywords cloud */
.keywords-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.keyword-tag {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border-radius: 20px;
    font-weight: 500;
    transition: transform 0.2s, box-shadow 0.2s;
}

.keyword-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.keyword-tag small {
    opacity: 0.7;
    font-size: 0.8em;
}

[data-bs-theme="dark"] .keyword-tag {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    color: #fecaca;
}

/* Topics list */
.topic-item {
    padding: 10px 15px;
    background: var(--bs-tertiary-bg);
    border-radius: 8px;
    border-left: 4px solid var(--bs-danger);
}

.topic-item strong {
    color: var(--bs-danger);
}

/* Chapter items */
.chapter-item {
    background: var(--bs-tertiary-bg);
    transition: background-color 0.2s;
}

.chapter-item:hover {
    background: var(--bs-secondary-bg);
}

.chapter-item .badge {
    font-family: monospace;
    font-size: 0.85em;
}

/* Chapters list scrollable */
.chapters-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Summary output formatting */
#summaryOutput {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Tab styling */
#resultTabs .nav-link {
    color: var(--bs-body-color);
    border: none;
    padding: 0.75rem 1rem;
}

#resultTabs .nav-link.active {
    color: var(--bs-danger);
    border-bottom: 2px solid var(--bs-danger);
    background: transparent;
}

#resultTabs .nav-link:hover:not(.active) {
    color: var(--bs-danger);
    background: rgba(220, 53, 69, 0.1);
}

/* Progress bar animation */
.progress-bar-animated {
    background: linear-gradient(
        45deg,
        var(--bs-danger) 25%,
        transparent 25%,
        transparent 50%,
        var(--bs-danger) 50%,
        var(--bs-danger) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

/* Video info card */
#videoInfoCard {
    border-left: 4px solid var(--bs-danger);
}

#videoInfoCard img {
    border: 2px solid var(--bs-border-color);
}

/* Export buttons */
#exportCard .btn {
    min-width: 120px;
}

/* Stats container */
#statsContainer .form-control {
    text-align: center;
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .keywords-cloud {
        justify-content: center;
    }

    .keyword-tag {
        font-size: 0.9em;
    }

    #resultTabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    #resultTabs .nav-link img {
        display: none;
    }

    #exportCard .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Transcript output */
#transcriptOutput {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--bs-secondary-color);
}

/* Video thumbnail hover effect */
#videoThumbnail {
    transition: transform 0.3s;
}

#videoThumbnail:hover {
    transform: scale(1.02);
}

/* Loading status card */
#loadingStatus {
    border-radius: 8px;
}

#loadingStatus .alert {
    margin-bottom: 0.5rem;
}

/* Form styling */
.form_tool .form-select:focus,
.form_tool .form-control:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Paste button */
#pasteUrlBtn {
    border-color: var(--bs-border-color);
}

#pasteUrlBtn:hover {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
}

#pasteUrlBtn:hover img {
    filter: brightness(0) invert(1);
}