/* Subtitle overlay for YouTube players — shown only in dev mode until rolled out.
   Matches the site's gold-on-dark glassmorphic aesthetic. */

/* The overlay is appended as a sibling of the YT iframe inside the iframe's
   existing parent; we never reparent the iframe itself (reparenting causes
   Safari/Firefox to reload it, which desyncs YT.Player and freezes the
   progress bar). .ytsub-host is applied to that parent. */
.ytsub-host { position: relative; }
/* Keep old .ytsub-wrapper class supported in case any earlier DOM is still around */
.ytsub-wrapper { position: relative; }

.ytsub-overlay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    bottom: 10%;
    max-width: 82%;
    padding: 10px 22px 11px;
    background:
        linear-gradient(135deg, rgba(10, 12, 20, 0.82) 0%, rgba(22, 17, 8, 0.86) 100%);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-radius: 12px;
    border: 1px solid rgba(212, 168, 83, 0.28);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(212, 168, 83, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #f5e8c8;
    font-family: "Tamil Sangam MN", "Noto Sans Tamil", "Noto Sans Devanagari",
                 "Noto Sans Telugu", "Noto Sans Malayalam",
                 "Crimson Text", "Inter", system-ui, sans-serif;
    font-size: clamp(15px, 2.5vw, 23px);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: 0.015em;
    text-align: center;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.9),
        0 0 14px rgba(212, 168, 83, 0.22);
    pointer-events: none;
    opacity: 0;
    transition:
        opacity 260ms ease,
        transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
    z-index: 5;
}
.ytsub-overlay.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Gold accent underline — subtle, fades at the ends */
.ytsub-overlay::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 3px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 168, 83, 0.75) 50%,
        transparent 100%);
    pointer-events: none;
}
.ytsub-overlay.controls-shown { bottom: 18%; }   /* nudge up when YT controls show */

/* ---------- per-word karaoke ----------
   Each word in a cue is wrapped in .ytsub-w. Every frame the tick loop
   promotes one span from "future" → "now" → "past" so the eye rides along
   with the speaker. Only the two changing spans update per frame, so the
   transitions are what carry the motion — not JS. */
.ytsub-w {
    display: inline-block;
    transition:
        color 280ms ease,
        opacity 260ms ease,
        text-shadow 320ms ease,
        font-weight 260ms ease,
        transform 360ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
    will-change: color, opacity, text-shadow, transform;
}

/* Unspoken — ghosted parchment. Present but quiet; you see the shape of the
   verse before you hear it. */
.ytsub-w-future {
    color: rgba(245, 232, 200, 0.32);
    text-shadow: none;
    opacity: 0.7;
}

/* The active word — bright gold with a soft bloom and a micro-lift. This is
   the heartbeat of the karaoke; it's what the eye locks onto. */
.ytsub-w-now {
    color: #ffd77a;
    opacity: 1;
    text-shadow:
        0 0 12px rgba(255, 215, 122, 0.70),
        0 0 28px rgba(212, 168, 83, 0.45),
        0 0 52px rgba(212, 168, 83, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.92);
    transform: translateY(-1px) scale(1.035);
}

/* Spoken — dim gold parchment, held in memory but no longer in the moment.
   Slightly richer than future so the spoken phrase feels "inscribed". */
.ytsub-w-past {
    color: rgba(201, 180, 135, 0.92);
    opacity: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

/* ---------- sacred keywords ----------
   Proper nouns and weighted verbs (Jesus, Lord, believe, rose, heal...)
   get heavier stroke and a deeper glow at every stage of the karaoke so
   the verse lands with the right emphasis. The viral-caption trick — color
   the money word — re-skinned for scripture. */
.ytsub-w-sacred {
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ytsub-w-sacred.ytsub-w-future {
    color: rgba(212, 168, 83, 0.42);
    text-shadow: 0 0 8px rgba(212, 168, 83, 0.12);
    opacity: 0.85;
}
.ytsub-w-sacred.ytsub-w-now {
    color: #ffe6a0;
    text-shadow:
        0 0 18px rgba(255, 215, 122, 0.90),
        0 0 42px rgba(212, 168, 83, 0.62),
        0 0 72px rgba(212, 168, 83, 0.32),
        0 2px 6px rgba(0, 0, 0, 0.92);
    transform: translateY(-1.5px) scale(1.065);
}
.ytsub-w-sacred.ytsub-w-past {
    color: rgba(230, 190, 110, 0.98);
    text-shadow:
        0 0 8px rgba(212, 168, 83, 0.30),
        0 1px 4px rgba(0, 0, 0, 0.70);
}

/* Users who asked for reduced motion get the color/opacity reveal without
   the scale-lift — the word still breathes, it just doesn't move. */
@media (prefers-reduced-motion: reduce) {
    .ytsub-w,
    .ytsub-w-sacred.ytsub-w-now,
    .ytsub-w-now { transform: none; }
}

/* Small gold dot next to languages that have NARRATION SRT in that lang
   (the card's videoUrl — read in movie mode / immersive cover). Reuses
   the site's gold color to feel native. */
.translate-lang-btn .ytsub-cc-badge {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--gold, #d4a853);
    box-shadow: 0 0 6px rgba(212, 168, 83, 0.6);
    vertical-align: middle;
}

/* Music-note badge when the MUSIC track (card's musicUrl) also has SRT in
   that lang. In meditative mode the overlay reads the music track's SRT,
   so this tells you whether lyrics karaoke along or stay empty. Sits
   next to the narration dot so both are visible at a glance. */
.translate-lang-btn .ytsub-music-badge {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
    line-height: 1;
    color: #ffd77a;
    text-shadow: 0 0 6px rgba(255, 215, 122, 0.7);
    vertical-align: middle;
    font-family: "Inter", system-ui, sans-serif;
}

/* Dev-only "CC" chip on timeline cards whose video(s) have SRT in the manifest.
   Hidden in production via body.is-dev gating below. Sized to be obvious at a
   glance in dev — not intended for end users. */
.timeline-card .ytsub-card-cc {
    position: absolute;
    top: 6px;
    right: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(10, 12, 20, 0.92);
    color: rgba(212, 168, 83, 0.85);
    border: 1px solid rgba(212, 168, 83, 0.5);
    pointer-events: none;
    display: none;   /* hidden by default; body.is-dev (dev mode) flips this on */
    z-index: 2;
}
body.is-dev .timeline-card .ytsub-card-cc { display: block; }
/* Louder when the *currently shown* language has an SRT for this card. */
.timeline-card .ytsub-card-cc.match-current {
    color: #0a0c14;
    background: var(--gold, #d4a853);
    border-color: var(--gold, #d4a853);
    box-shadow: 0 0 10px rgba(212, 168, 83, 0.7);
}

/* Dev-only "generate SRT" button on each timeline card that has video(s).
   Sits bottom-right so it doesn't fight the share / fav / photo-edit icons
   that live at the top. Hidden in production via body.is-dev. */
.timeline-card .ytsub-card-gen {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    padding: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    line-height: 1;
    border-radius: 4px;
    border: 1px solid rgba(212, 168, 83, 0.25);
    background: rgba(10, 12, 20, 0.75);
    color: rgba(212, 168, 83, 0.55);
    cursor: pointer;
    display: none;   /* dev-only */
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    z-index: 2;
}
body.is-dev .timeline-card .ytsub-card-gen { display: block; }
.timeline-card:hover .ytsub-card-gen { opacity: 1; }
.timeline-card .ytsub-card-gen:hover {
    color: var(--gold, #d4a853);
    border-color: var(--gold, #d4a853);
    background: rgba(212, 168, 83, 0.12);
}
/* Generate-button state colours (persist for ~6s after a generate finishes).
   Kept visible (opacity 1) so the outcome is obvious without hover. */
.timeline-card .ytsub-card-gen.ytsub-gen-loading,
.timeline-card .ytsub-card-gen.ytsub-gen-success,
.timeline-card .ytsub-card-gen.ytsub-gen-partial,
.timeline-card .ytsub-card-gen.ytsub-gen-error { opacity: 1; }
.timeline-card .ytsub-card-gen.ytsub-gen-loading {
    color: var(--gold, #d4a853);
    border-color: var(--gold, #d4a853);
    background: rgba(212, 168, 83, 0.12);
}
.timeline-card .ytsub-card-gen.ytsub-gen-success {
    color: #10b981;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.45);
}
.timeline-card .ytsub-card-gen.ytsub-gen-partial {
    color: #f59e0b;
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}
.timeline-card .ytsub-card-gen.ytsub-gen-error {
    color: #e74c3c;
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.12);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
}

/* Dev-only section tucked inside the existing translatePanel.
   Uses the site's existing .dev-only class so it only appears in dev mode. */
.ytsub-dev-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(212, 168, 83, 0.2);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.68rem;
}
.ytsub-dev-section .ytsub-dev-label {
    color: var(--gold, #d4a853);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
    font-size: 0.6rem;
}
.ytsub-dev-section .ytsub-dev-vid {
    opacity: 0.75;
    margin-bottom: 6px;
    word-break: break-all;
}

/* Per-track row: narration (●) or music (♪) + its YouTube ID + lang chips.
   One row per track so you can see at a glance which langs are present for
   which track. */
.ytsub-dev-section .ytsub-dev-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.015);
}
.ytsub-dev-section .ytsub-dev-row.is-music {
    background: rgba(212, 168, 83, 0.04);
}
.ytsub-dev-section .ytsub-dev-tag {
    color: var(--gold, #d4a853);
    font-size: 0.82rem;
    line-height: 1;
    min-width: 12px;
    text-align: center;
    cursor: help;
}
.ytsub-dev-section .ytsub-dev-row.is-music .ytsub-dev-tag {
    color: #ffd77a;
    text-shadow: 0 0 4px rgba(255, 215, 122, 0.5);
}
.ytsub-dev-section .ytsub-dev-id {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.6rem;
    opacity: 0.72;
    min-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ytsub-dev-section .ytsub-dev-langs {
    display: flex;
    gap: 3px;
    margin-left: auto;
}
.ytsub-dev-section .ytsub-dev-lang {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.58rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: help;
    transition: background 120ms ease, color 120ms ease;
}
.ytsub-dev-section .ytsub-dev-lang.present {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.ytsub-dev-section .ytsub-dev-lang.missing {
    background: rgba(231, 76, 60, 0.08);
    color: rgba(231, 76, 60, 0.55);
    border: 1px solid rgba(231, 76, 60, 0.18);
}

.ytsub-dev-section .ytsub-dev-status {
    opacity: 0.62;
    margin: 8px 0;
    font-size: 0.62rem;
}
.ytsub-dev-btn {
    display: block;
    width: 100%;
    padding: 7px 10px;
    background: rgba(212, 168, 83, 0.08);
    border: 1px solid rgba(212, 168, 83, 0.25);
    border-radius: 6px;
    color: var(--gold, #d4a853);
    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ytsub-dev-btn:hover:not(:disabled) {
    background: rgba(212, 168, 83, 0.18);
    border-color: var(--gold, #d4a853);
}
.ytsub-dev-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Small transient toast, bottom-center of viewport, when a chosen
   language has no subtitles for the current video. */
.ytsub-toast {
    position: fixed;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    background: rgba(10, 12, 20, 0.96);
    border: 1px solid rgba(212, 168, 83, 0.3);
    color: var(--gold, #d4a853);
    padding: 8px 16px;
    border-radius: 6px;
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
}
.ytsub-toast.visible { opacity: 1; }