/* ===== YT Transcript Fetcher — Frontend Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Syne:wght@400;600;800&display=swap');

:root {
    --ytt-red:    #FF0000;
    --ytt-dark:   #0A0A0A;
    --ytt-gray:   #1A1A1A;
    --ytt-border: #2A2A2A;
    --ytt-muted:  #666;
    --ytt-text:   #E8E8E8;
    --ytt-accent: #FF0000;
    --ytt-radius: 12px;
    --ytt-font:   'Syne', system-ui, sans-serif;
    --ytt-mono:   'IBM Plex Mono', monospace;
}

.ytt-widget {
    font-family: var(--ytt-font);
    border-radius: var(--ytt-radius);
    overflow: hidden;
    border: 1px solid var(--ytt-border);
    max-width: 860px;
    margin: 24px auto;
}

/* === DARK THEME (default) === */
.ytt-theme-dark {
    background: var(--ytt-dark);
    color: var(--ytt-text);
}

/* === LIGHT THEME === */
.ytt-theme-light {
    --ytt-dark:   #F5F5F5;
    --ytt-gray:   #FFFFFF;
    --ytt-border: #E0E0E0;
    --ytt-muted:  #888;
    --ytt-text:   #1A1A1A;
    background: #F5F5F5;
    color: #1A1A1A;
}

/* === Search Form === */
.ytt-search-form {
    padding: 20px;
    background: var(--ytt-gray);
    border-bottom: 1px solid var(--ytt-border);
}

.ytt-input-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ytt-url-input {
    flex: 1;
    min-width: 200px;
    background: var(--ytt-dark) !important;
    border: 1px solid var(--ytt-border) !important;
    color: var(--ytt-text) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: var(--ytt-mono) !important;
    font-size: 13px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .2s;
}

.ytt-url-input:focus {
    border-color: var(--ytt-red) !important;
}

.ytt-lang-select {
    background: var(--ytt-dark) !important;
    border: 1px solid var(--ytt-border) !important;
    color: var(--ytt-text) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-family: var(--ytt-font) !important;
    font-size: 13px !important;
    cursor: pointer;
}

/* === Buttons === */
.ytt-btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: var(--ytt-font);
    font-weight: 600;
    font-size: 13px;
    transition: all .2s;
    white-space: nowrap;
}

.ytt-btn-fetch {
    background: var(--ytt-red);
    color: #fff;
}

.ytt-btn-fetch:hover {
    background: #CC0000;
    transform: translateY(-1px);
}

.ytt-btn:not(.ytt-btn-fetch) {
    background: var(--ytt-gray);
    color: var(--ytt-text);
    border: 1px solid var(--ytt-border);
}

.ytt-btn:not(.ytt-btn-fetch):hover {
    border-color: var(--ytt-red);
    color: var(--ytt-red);
}

/* === Status === */
.ytt-status {
    padding: 0 20px;
}

.ytt-status:empty { display: none; }

.ytt-spinner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    font-size: 14px;
    color: var(--ytt-muted);
}

.ytt-spinner::before {
    content: '';
    width: 18px; height: 18px;
    border: 2px solid var(--ytt-border);
    border-top-color: var(--ytt-red);
    border-radius: 50%;
    animation: ytt-spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes ytt-spin { to { transform: rotate(360deg); } }

.ytt-error {
    padding: 14px 20px;
    color: #FF6B6B;
    background: rgba(255,0,0,.06);
    border-radius: 8px;
    margin: 12px 20px;
    font-size: 14px;
}

/* === Toolbar === */
.ytt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    background: var(--ytt-gray);
    border-bottom: 1px solid var(--ytt-border);
}

.ytt-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ytt-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* === Badges === */
.ytt-lang-badge,
.ytt-word-count,
.ytt-seg-count {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--ytt-mono);
}

.ytt-lang-badge {
    background: var(--ytt-red);
    color: #fff;
}

.ytt-word-count,
.ytt-seg-count {
    background: var(--ytt-border);
    color: var(--ytt-muted);
}

/* === Lang selector === */
.ytt-lang-selector {
    padding: 12px 20px;
    border-bottom: 1px solid var(--ytt-border);
    background: var(--ytt-gray);
}

.ytt-lang-selector label {
    font-size: 12px;
    color: var(--ytt-muted);
    margin-right: 8px;
}

.ytt-tracks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.ytt-track-btn {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--ytt-border);
    background: transparent;
    color: var(--ytt-text);
    font-size: 12px;
    font-family: var(--ytt-font);
    cursor: pointer;
    transition: all .2s;
}

.ytt-track-btn:hover,
.ytt-track-btn.active {
    border-color: var(--ytt-red);
    color: var(--ytt-red);
    background: rgba(255,0,0,.06);
}

/* === Transcript === */
.ytt-transcript-container {
    max-height: 480px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ytt-border) transparent;
}

.ytt-transcript-container::-webkit-scrollbar { width: 4px; }
.ytt-transcript-container::-webkit-scrollbar-track { background: transparent; }
.ytt-transcript-container::-webkit-scrollbar-thumb { background: var(--ytt-border); border-radius: 2px; }

.ytt-transcript-list {
    padding: 4px 0;
}

.ytt-seg {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .15s;
}

.ytt-theme-light .ytt-seg {
    border-bottom-color: rgba(0,0,0,.05);
}

.ytt-seg:hover {
    background: rgba(255,0,0,.04);
}

.ytt-seg-time {
    font-family: var(--ytt-mono);
    font-size: 11px;
    color: var(--ytt-muted);
    white-space: nowrap;
    padding-top: 3px;
    min-width: 42px;
    flex-shrink: 0;
}

.ytt-seg-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ytt-text);
}

.ytt-seg.ts-hidden .ytt-seg-time { display: none; }

/* === Copy feedback === */
.ytt-btn.copied {
    background: #22c55e !important;
    color: #fff !important;
    border-color: #22c55e !important;
}