/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0f111a;
}

::-webkit-scrollbar-thumb {
    background: #2d3748;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a5568;
}

/* Base Inputs */
input, textarea {
    font-family: inherit;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-content.active {
    display: flex;
    animation: fadeIn 0.3s ease-out forwards;
}

.tab-content {
    display: none;
}

/* Agent sub-tab content — mirrors main tab-content pattern */
.agent-subtab-content {
    display: none;
}

.agent-subtab-content.active {
    display: block;
    animation: fadeIn 0.2s ease-out forwards;
}

/* YT SEO Config — container-aware main grid (mirrors Storyboard) */
#yt-seo-config-inner {
    container-type: inline-size;
    container-name: yt-config;
}

.yt-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    gap: 1rem !important;
    align-items: start !important;
}

@container yt-config (max-width: 900px) {
    .yt-main-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Storyboard Config — Container-aware Responsive Grid */

/* Mark storyboard panel as a size container so @container can track its OWN width */
#storyboard-config-panel {
    container-type: inline-size;
    container-name: sb-config;
}

/* Default grid definitions (also serve as fallback for old browsers) */
.sb-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    gap: 1rem !important;
    align-items: start !important;
}

.sb-inner-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
}

.sb-main-grid > *,
.sb-inner-grid > * {
    min-width: 0;
}

/* ── Container query breakpoints (respond to panel width, not viewport) ── */

/* Panel narrows to ~70% → tighten ratio to 3:2 */
@container sb-config (max-width: 1100px) {
    .sb-main-grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    }
}

/* Panel too narrow for 2 columns → stack A+B+D+E above C+F */
@container sb-config (max-width: 800px) {
    .sb-main-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Inner 1fr/1fr pairs: keep side-by-side until panel is very narrow */
@container sb-config (max-width: 500px) {
    .sb-inner-grid {
        grid-template-columns: 1fr !important;
    }
}