/* Zabanisa Reels Lesson UI v2.4
   Scope: this stylesheet is loaded only when reels_course_ui=true.
   Goal: video-first mobile layout + exactly one current segment in compact mode.
   Core lesson playback/segment logic remains in lesson_detail.html. */

.reels-course-ui-v2 {
    --reels-watch-width: min(35dvh, calc(100vw - 18px), 340px);
    --reels-study-width: min(20.5dvh, calc(100vw - 24px), 270px);
    --reels-radius: 27px;
    --reels-shadow: 0 18px 42px rgba(15, 23, 42, .21);
    --reels-panel-shadow: 0 10px 24px rgba(15, 23, 42, .07);
}

.reels-course-ui-v2 .lesson-layout.is-portrait-media .lesson-media-block {
    position: relative;
    min-width: 0;
    padding: 3px 7px 2px;
    border-radius: 29px;
    background:
        radial-gradient(circle at 50% 0%, rgba(20, 184, 166, .09), transparent 52%),
        linear-gradient(180deg, rgba(248,250,252,.92) 0%, rgba(255,255,255,.98) 100%);
}

.reels-course-ui-v2 .lesson-layout.is-portrait-media .lesson-player-shell {
    width: var(--reels-watch-width);
    aspect-ratio: 9 / 16;
    max-height: none;
    margin-inline: auto;
    border-radius: var(--reels-radius);
    overflow: hidden;
    background: #020617;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: var(--reels-shadow);
    transition: width .24s cubic-bezier(.2,.75,.25,1), border-radius .2s ease, box-shadow .2s ease;
}

.reels-course-ui-v2 .lesson-layout.is-portrait-media .lesson-player-shell video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #020617;
}

/* Study states keep the video present, but make room for learning content. */
.reels-course-ui-v2.is-reels-transcript-expanded .lesson-layout.is-portrait-media .lesson-player-shell,
.reels-course-ui-v2.is-reels-study-panel .lesson-layout.is-portrait-media .lesson-player-shell,
.reels-course-ui-v2.lesson-speaking-repeat-mode .lesson-layout.is-portrait-media .lesson-player-shell,
.reels-course-ui-v2.lesson-speaking-shadow-mode .lesson-layout.is-portrait-media .lesson-player-shell,
.reels-course-ui-v2.lesson-speaking-roleplay-mode .lesson-layout.is-portrait-media .lesson-player-shell {
    width: var(--reels-study-width);
    border-radius: 21px;
    box-shadow: 0 10px 25px rgba(15,23,42,.15);
}

.reels-course-ui-v2 .lesson-stage-top {
    /* progress / media / tabs / optional shadowing status */
    grid-template-rows: auto auto auto auto;
}

.reels-course-ui-v2 .lesson-stage-bottom {
    border-radius: 20px;
    border: 1px solid rgba(226,232,240,.92);
    background: linear-gradient(180deg, rgba(255,255,255,.995) 0%, rgba(248,250,252,.985) 100%);
    box-shadow: var(--reels-panel-shadow);
}

.reels-course-ui-v2 .lesson-panel[data-lesson-panel="text"] {
    padding: 4px 5px 5px;
    gap: 3px;
    /* v2.4: Shadowing status lives above the text panel, between tabs and the
       player/text control rail. Transcript owns the flexible row again. */
    grid-template-rows: auto minmax(0,1fr) auto auto;
}

/* One professional control rail. Report + hide-media are intentionally absent in Reels markup. */
.reels-course-ui-v2 .transcript-toolbar {
    display: block;
    min-height: 29px;
}

.reels-course-ui-v2 .transcript-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    width: 100%;
    gap: 4px;
}

.reels-course-ui-v2 .dialog-mode-toggle {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    overflow: hidden;
}

.reels-course-ui-v2 .reels-transcript-mode-state[hidden] { display: none !important; }

.reels-course-ui-v2 .mode-btn {
    min-height: 25px;
    height: 25px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: .60rem;
    line-height: 1;
    white-space: nowrap;
}

.reels-course-ui-v2 .reels-language-toggle {
    min-width: 49px;
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg,#1d4ed8 0%,#60a5fa 100%);
    box-shadow: 0 5px 12px rgba(37,99,235,.14);
}

.reels-course-ui-v2 .reels-language-toggle.is-english-only {
    background: linear-gradient(135deg,#243b6b 0%,#31578b 100%);
}

.reels-course-ui-v2 .mode-btn--auto { min-width: 48px; }

.reels-course-ui-v2 .reels-transcript-expand {
    min-width: 88px;
    color: #0f766e;
    border-color: rgba(15,118,110,.18);
    background: linear-gradient(180deg,#fff 0%,#f0fdfa 100%);
    box-shadow: 0 4px 10px rgba(15,118,110,.07);
    gap: 3px;
}

.reels-course-ui-v2 .reels-transcript-expand-icon {
    display: inline-block;
    font-size: .68rem;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform .18s ease;
}

.reels-course-ui-v2.is-reels-transcript-expanded .reels-transcript-expand-icon {
    transform: rotate(180deg) translateY(1px);
}

.reels-course-ui-v2.is-reels-transcript-expanded .reels-transcript-expand {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg,#0f766e 0%,#14b8a6 100%);
}

.reels-course-ui-v2 .transcript-player-controls {
    flex: 0 0 auto;
    gap: 2px;
    padding: 2px;
}

.reels-course-ui-v2 .mini-player-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: .64rem;
}

.reels-course-ui-v2 .mini-player-btn[data-media-play-toggle] {
    width: 28px;
    min-width: 28px;
}

/* Watch mode: exactly one sentence — the sentence already marked active by existing player logic. */
.reels-course-ui-v2:not(.is-reels-transcript-expanded):not(.is-reels-study-panel) .transcript-list {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 2px 5px;
    gap: 0;
    align-content: start;
    scroll-padding: 0;
}

.reels-course-ui-v2:not(.is-reels-transcript-expanded):not(.is-reels-study-panel) .transcript-segment {
    display: none;
}

.reels-course-ui-v2:not(.is-reels-transcript-expanded):not(.is-reels-study-panel) .transcript-segment.is-active,
.reels-course-ui-v2:not(.is-reels-transcript-expanded):not(.is-reels-study-panel) .transcript-segment.is-reels-fallback-active {
    display: grid;
}

.reels-course-ui-v2 .transcript-segment {
    border-radius: 13px;
    /* Keep a protected control lane on the right. The compact v2.2 shorthand
       accidentally removed the original reserved space and could let Play/Mic
       sit over EN/FA text. */
    padding: 6px 40px 6px 8px;
    border-color: rgba(226,232,240,.96);
    box-shadow: 0 6px 15px rgba(15,23,42,.04);
}

.reels-course-ui-v2 .transcript-segment.is-active,
.reels-course-ui-v2 .transcript-segment.is-reels-fallback-active {
    border-color: rgba(20,184,166,.40);
    background: linear-gradient(135deg,#ecfdf8 0%,#f8fffd 60%,#fff 100%);
    box-shadow: 0 9px 21px rgba(13,148,136,.11), inset 3px 0 0 rgba(20,184,166,.68);
}

.reels-course-ui-v2 .transcript-en {
    font-size: .86rem;
    line-height: 1.46;
}

.reels-course-ui-v2 .transcript-fa {
    font-size: .71rem;
    line-height: 1.52;
}

/* Expanded transcript restores the normal multi-segment study list. */
.reels-course-ui-v2.is-reels-transcript-expanded .transcript-list,
.reels-course-ui-v2.lesson-speaking-repeat-mode .transcript-list,
.reels-course-ui-v2.lesson-speaking-shadow-mode .transcript-list,
.reels-course-ui-v2.lesson-speaking-roleplay-mode .transcript-list {
    padding: 2px 2px 7px;
    gap: 5px;
}

/* Speaking techniques are study states: keep all needed sentences reachable. */
.reels-course-ui-v2.lesson-speaking-repeat-mode .transcript-segment,
.reels-course-ui-v2.lesson-speaking-shadow-mode .transcript-segment,
.reels-course-ui-v2.lesson-speaking-roleplay-mode .transcript-segment {
    display: grid !important;
}

.reels-course-ui-v2 .transcript-speaker {
    font-size: .60rem;
    line-height: 1.3;
    margin-bottom: 1px;
}

.reels-course-ui-v2 .lesson-segment-controls {
    gap: 3px;
}

.reels-course-ui-v2 .lesson-segment-controls {
    top: 5px;
    right: 6px;
}

.reels-course-ui-v2 .lesson-segment-play,
.reels-course-ui-v2 .lesson-segment-mic {
    width: 25px;
    height: 25px;
    min-width: 25px;
}

/* Repeat mode shows Play + Mic, so reserve the wider control lane explicitly. */
.reels-course-ui-v2.lesson-speaking-repeat-mode .transcript-segment {
    padding-right: 66px;
}


/* v2.4: Shadowing status is structurally outside Transcript. It sits exactly
   between lesson tabs and the lower player/text control panel, so it cannot
   overlap the current sentence. Hidden status consumes zero height. */
.reels-course-ui-v2 .reels-shadow-status-slot {
    display: grid;
    min-height: 0;
    padding: 0 1px;
    margin: 0;
}

.reels-course-ui-v2 .reels-shadow-status-slot .lesson-shadow-status {
    position: static;
    top: auto;
    z-index: 2;
    width: 100%;
    min-height: 34px;
    margin: 2px 0 1px;
    padding: 5px 7px;
    grid-template-columns: 8px minmax(0,1fr) auto;
    gap: 7px;
    border-radius: 11px;
    box-shadow: 0 7px 16px rgba(38,52,113,.14);
}

.reels-course-ui-v2 .reels-shadow-status-slot .lesson-shadow-status-pulse {
    width: 7px;
    height: 7px;
}

.reels-course-ui-v2 .reels-shadow-status-slot .lesson-shadow-status-copy {
    display: flex;
    align-items: baseline;
    gap: 5px;
    overflow: hidden;
}

.reels-course-ui-v2 .reels-shadow-status-slot .lesson-shadow-status-copy strong {
    flex: 0 0 auto;
    font-size: .60rem;
}

.reels-course-ui-v2 .reels-shadow-status-slot .lesson-shadow-status-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .54rem;
}

.reels-course-ui-v2 .reels-shadow-status-slot .lesson-shadow-status-rate {
    min-width: 46px;
    height: 25px;
    padding: 0 7px;
    border-radius: 8px;
    font-size: .56rem;
}

/* Keep CTA functionality while recovering a little vertical room on mobile. */
.reels-course-ui-v2 .lesson-action-grid { gap: 5px; padding-top: 1px; }
.reels-course-ui-v2 .lesson-action-grid .lesson-practice-cta,
.reels-course-ui-v2 .lesson-speaking-cta {
    min-height: 36px;
    border-radius: 12px;
}

/* Progress is only slightly tightened; information and behavior remain unchanged. */
.reels-course-ui-v2 .lesson-progress-strip {
    gap: 3px;
    padding: 2px;
    border-radius: 12px;
    box-shadow: 0 7px 18px rgba(15,23,42,.055);
}
.reels-course-ui-v2 .lesson-progress-pill { min-height: 27px; padding: 3px 4px; border-radius: 10px; }
.reels-course-ui-v2 .lesson-progress-label { font-size: .47rem; }
.reels-course-ui-v2 .lesson-progress-value { font-size: .61rem; }

.reels-course-ui-v2 .lesson-tabs {
    border-radius: 14px;
    padding: 3px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 8px 19px rgba(15,23,42,.06);
}
.reels-course-ui-v2 .lesson-tab { min-height: 29px; border-radius: 11px; font-size: .68rem; }

@media (max-width: 720px) {
    .reels-course-ui-v2 .lesson-stage-top { gap: 1px; }
    .reels-course-ui-v2 .lesson-layout.is-portrait-media .lesson-media-block { padding: 2px 5px 1px; }
    .reels-course-ui-v2 .lesson-stage-bottom { border-radius: 18px; }
}

/* Height-aware sizing protects toolbar + current sentence + lesson CTAs on real phones. */
@media (max-width: 720px) and (max-height: 760px) {
    .reels-course-ui-v2 {
        --reels-watch-width: min(32dvh, calc(100vw - 18px), 325px);
        --reels-study-width: min(19dvh, calc(100vw - 22px), 255px);
    }
}

@media (max-width: 720px) and (max-height: 680px) {
    .reels-course-ui-v2 {
        --reels-watch-width: min(29dvh, calc(100vw - 16px), 305px);
        --reels-study-width: min(18dvh, calc(100vw - 20px), 240px);
    }
    .reels-course-ui-v2 .lesson-progress-pill { min-height: 25px; }
    .reels-course-ui-v2 .lesson-tab { min-height: 27px; }
    .reels-course-ui-v2 .mode-btn { min-height: 23px; height: 23px; padding-inline: 6px; font-size: .57rem; }
    .reels-course-ui-v2 .mini-player-btn { width: 23px; height: 23px; min-width: 23px; }
    .reels-course-ui-v2 .mini-player-btn[data-media-play-toggle] { width: 26px; min-width: 26px; }
    .reels-course-ui-v2 .lesson-action-grid .lesson-practice-cta,
    .reels-course-ui-v2 .lesson-speaking-cta { min-height: 34px; }
}

@media (max-width: 720px) and (max-height: 600px) {
    .reels-course-ui-v2 {
        --reels-watch-width: min(26dvh, calc(100vw - 14px), 285px);
        --reels-study-width: min(17dvh, calc(100vw - 18px), 225px);
    }
}

/* Desktop is intentionally not a design target; keep it conservative. */
@media (min-width: 721px) {
    .reels-course-ui-v2 {
        --reels-watch-width: min(34dvh, 330px);
        --reels-study-width: min(22dvh, 275px);
    }
}


@media (max-width: 720px) and (max-height: 680px) {
    .reels-course-ui-v2 .transcript-segment { padding: 5px 38px 5px 7px; border-radius: 12px; }
    .reels-course-ui-v2.lesson-speaking-repeat-mode .transcript-segment { padding-right: 64px; }
    .reels-course-ui-v2 .transcript-en { font-size: .81rem; line-height: 1.42; }
    .reels-course-ui-v2 .transcript-fa { font-size: .67rem; line-height: 1.47; }
    .reels-course-ui-v2 .reels-shadow-status-slot .lesson-shadow-status-copy small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .reels-course-ui-v2 .lesson-player-shell { transition: none !important; }
}