/* ========== BASE & TYPOGRAPHY ========== */
@import url('fonts.css');
@import url('quiz-ui.css');

body {
    font-family: var(--font-app);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better text rendering */
p, li, span {
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}

/* Selection color */
::selection {
    background: rgba(6, 182, 212, 0.25);
}

.brand-logo {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.brand-logo-img {
    display: block;
    height: 44px;
    width: auto;
    max-width: min(260px, calc(100vw - 280px));
    object-fit: contain;
}

.nav-unicef-logo {
    display: block;
    height: 58px;
    width: auto;
    max-width: min(180px, 34vw);
    object-fit: contain;
}

#topNav {
    height: 76px;
    min-height: 76px;
    gap: 8px;
}

#topNav .progress-tracker-full {
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
}

#topNav .progress-tracker-full > div:first-child {
    display: block !important;
}

#topNav #progressStatus {
    display: block !important;
}

header.header-section {
    margin-top: 76px;
}

nav.breadcrumb-nav {
    top: 76px;
    padding-top: calc(0.3rem + 4px) !important;
    padding-bottom: calc(0.3rem + 4px) !important;
}

nav.breadcrumb-nav .breadcrumb-links a,
nav.breadcrumb-nav .breadcrumb-links > span {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

@media (max-width: 1023px) {
    .brand-logo-img {
        height: 40px;
        max-width: min(220px, calc(100vw - 240px));
    }
}

@media (max-width: 768px) {
    #topNav {
        padding: 0 0.75rem !important;
        height: 72px;
        min-height: 72px;
    }

    header.header-section {
        margin-top: 72px;
    }

    nav.breadcrumb-nav {
        top: 72px;
    }

    .brand-logo-img {
        height: 38px;
        width: auto;
        max-width: calc(100vw - 200px);
    }

    #topNav .progress-tracker-full {
        display: flex !important;
        align-items: center;
        padding: 0.35rem 0.6rem !important;
        gap: 0.5rem !important;
    }

    #topNav #progressStatus {
        display: none !important;
    }

    /* #topNav .brand-logo span {
        display: none;
    } */

    .progress-tracker-mobile {
        display: none;
    }
}

@media (max-width: 480px) {
    .brand-logo-img {
        height: 36px;
        width: auto;
        max-width: calc(100vw - 168px);
    }

    .nav-unicef-logo {
        height: 46px;
        width: auto;
        max-width: 130px;
    }

    #topNav .progress-tracker-full {
        display: flex !important;
    }
}

/* Knowledge-check per-question feedback: icon + "সঠিক উত্তর" stay on one row.
   Tailwind preflight sets img/svg to display:block, which otherwise stacks them. */
#result .alert,
#quizFeedback > div.alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#result .alert img,
#result .alert i,
#result h4 img,
#result p img,
#quizFeedback img,
#quizFeedback i {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Quiz-complete banner (illustration + score + retry) — used in every module */
#result > div:not(.alert),
#quizFeedback > div:has(h4) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    text-align: center;
    padding: 1.25rem 1rem !important;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

#result > div:not(.alert) > *,
#quizFeedback > div:has(h4) > * {
    min-width: 0;
    max-width: 100%;
}

#result > div:not(.alert) > img,
#quizFeedback > div:has(h4) > img {
    width: 88px !important;
    max-width: 40vw;
    height: auto;
    margin: 0 !important;
}

#result > div:not(.alert) h4,
#quizFeedback > div:has(h4) h4 {
    font-size: 1.15rem !important;
    line-height: 1.35;
    margin: 0 !important;
}

#result > div:not(.alert) p,
#quizFeedback > div:has(h4) p {
    font-size: 0.95rem !important;
    line-height: 1.45;
    margin: 0 !important;
}

#result > div:not(.alert) button,
#quizFeedback > div:has(h4) button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 20rem;
    white-space: normal;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #result > div:not(.alert),
    #quizFeedback > div:has(h4) {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
        padding: 1.5rem 2rem !important;
        text-align: left;
    }

    #result > div:not(.alert) > img,
    #quizFeedback > div:has(h4) > img {
        width: 100px !important;
        max-width: 100px;
    }

    #result > div:not(.alert) h4,
    #quizFeedback > div:has(h4) h4 {
        font-size: 1.5rem !important;
    }

    #result > div:not(.alert) p,
    #quizFeedback > div:has(h4) p {
        font-size: 1.25rem !important;
    }

    #result > div:not(.alert) button,
    #quizFeedback > div:has(h4) button {
        width: auto;
        white-space: nowrap;
    }
}

/* ========== DECORATIVE ELEMENTS ========== */

/* Story card left border */
.story-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #063793, #06b6d4);
    border-radius: 2px;
}


/* Chat conversation top gradient line */
.chat-conversation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #06b6d4, #063793, #06b6d4, transparent);
    border-radius: 4px;
}

/* ========== CHAT SYSTEM ========== */

/* Chat panel entrance - controlled by JS typing system */
@keyframes panelSlideIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chat panels & narrations hidden until typing system triggers them */
.chat-panel,
.chat-narration,
.chat-divider {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-panel.chat-visible,
.chat-narration.chat-visible,
.chat-divider.chat-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Typing indicator dots */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    min-height: 28px;
}

.typing-indicator .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    animation: typingBounce 1.2s ease-in-out infinite;
}

.typing-indicator .dot:nth-child(2) {
    animation-delay: 0.15s;
}

.typing-indicator .dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Blinking cursor during typing */
.typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: #06b6d4;
    vertical-align: text-bottom;
    margin-left: 1px;
    margin-right: -3px;
    animation: cursorBlink 0.6s steps(2) infinite;
}

@keyframes cursorBlink {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Chat emotion hidden until typing finishes */
.chat-emotion.typing-hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
    transition: none;
}

.chat-emotion.typing-reveal {
    max-height: 100px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Avatar colors with gradients */
.chat-avatar.riya {
    --avatar-color: #063793;
    --avatar-glow: rgba(6, 55, 147, 0.3);
}

.chat-avatar.rimi {
    --avatar-color: #dc2626;
    --avatar-glow: rgba(220, 38, 38, 0.3);
}

.chat-avatar.maya {
    --avatar-color: #06b6d4;
    --avatar-glow: rgba(6, 182, 212, 0.3);
}

.chat-avatar.narrator {
    --avatar-color: #64748b;
    --avatar-glow: rgba(100, 116, 139, 0.3);
}

.chat-avatar-wrapper {
    box-shadow: 0 6px 20px var(--avatar-glow, rgba(0, 0, 0, 0.15)),
        0 0 0 3px var(--avatar-color, #063793),
        0 0 0 6px rgba(var(--avatar-color), 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chat-panel:hover .chat-avatar-wrapper {
    transform: scale(1.05);
}

.chat-name-badge {
    background: var(--avatar-color, #063793);
    box-shadow: 0 2px 8px var(--avatar-glow, rgba(0, 0, 0, 0.2));
}

/* Speech bubble tails removed — directional sharp corner handles it */
.chat-bubble::before {
    display: none;
}

.chat-bubble::after {
    display: none;
}

.chat-panel.reverse .chat-bubble::before {
    display: none;
}

/* ── Organic blob shapes per character ── */

/* Default (Riya) - calm, authoritative blob */
.chat-bubble {
    border-radius: 24px 10px 24px 0 !important;
    border: 1.5px solid rgba(6, 55, 147, 0.12) !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 60%, #f0f4ff 100%) !important;
    box-shadow:
        0 2px 12px rgba(6, 55, 147, 0.06),
        0 8px 30px rgba(6, 55, 147, 0.04),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
    position: relative;
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chat-panel:hover .chat-bubble {
    transform: translateY(-1px);
    box-shadow:
        0 4px 16px rgba(6, 55, 147, 0.08),
        0 12px 40px rgba(6, 55, 147, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

/* Reverse bubble - tail on right */
.chat-panel.reverse .chat-bubble {
    border-radius: 6px 24px 0 24px !important;
}

/* Rimi bubbles - emotional, warm blob */
.chat-avatar.rimi + .chat-speech .chat-bubble {
    border-radius: 10px 24px 0 24px !important;
    border-color: rgba(220, 38, 38, 0.12) !important;
    background: linear-gradient(145deg, #fffbfb 0%, #fff5f5 40%, #fef0f0 100%) !important;
    box-shadow:
        0 2px 12px rgba(220, 38, 38, 0.06),
        0 8px 30px rgba(220, 38, 38, 0.04),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* Maya bubbles - tech-savvy, cool blob */
.chat-avatar.maya + .chat-speech .chat-bubble {
    border-radius: 24px 10px 24px 0 !important;
    border-color: rgba(6, 182, 212, 0.15) !important;
    background: linear-gradient(145deg, #f0fdff 0%, #ecfeff 40%, #e6fbfe 100%) !important;
    box-shadow:
        0 2px 12px rgba(6, 182, 212, 0.08),
        0 8px 30px rgba(6, 182, 212, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* Riya bubbles explicit */
.chat-avatar.riya + .chat-speech .chat-bubble {
    border-radius: 24px 10px 24px 0 !important;
    border-color: rgba(6, 55, 147, 0.12) !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 40%, #f0f4ff 100%) !important;
    box-shadow:
        0 2px 12px rgba(6, 55, 147, 0.06),
        0 8px 30px rgba(6, 55, 147, 0.04),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* Reverse panels for riya */
.chat-panel.reverse .chat-avatar.riya + .chat-speech .chat-bubble {
    border-radius: 10px 24px 0 24px !important;
}

/* ── Storybook emotion labels ── */
.chat-emotion {
    background: rgba(248, 250, 252, 0.6);
    border-radius: 12px 12px 0 0 !important;
    padding: 6px 12px !important;
    margin: -20px -20px 12px -20px !important;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.3) !important;
    font-style: italic;
}

/* Narration emoji */
.chat-narration::before {
    content: '📖';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fef9c3;
    padding: 0 8px;
    font-size: 1.2rem;
    border-radius: 8px;
}

.chat-narration.emotional::before {
    content: '💔';
    background: #fee2e2;
}

/* Divider lines */
.chat-divider::before, .chat-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

/* Thought bubble */
.chat-thought::before {
    content: '💭';
    position: absolute;
    bottom: -20px;
    left: 30px;
    font-size: 1.5rem;
}

/* Popup icon animations */
@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 30px rgba(6, 55, 147, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 40px rgba(6, 55, 147, 0.6);
    }
}

@keyframes rotateBorder {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.popup-icon-wrapper {
    animation: pulseGlow 2s ease-in-out infinite;
}

.popup-icon-wrapper::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px dashed rgba(6, 182, 212, 0.5);
    animation: rotateBorder 10s linear infinite;
}

/* Resume button shimmer */
.resume-video-btn {
    background: linear-gradient(135deg, #063793, #06b6d4);
    padding: .25rem 1rem;
    border-radius: 9999px;
    position: relative;
    overflow: hidden;
    color: white;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: color 0.5s ease;
}

.resume-video-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #063793, #06b6d4);
    transition: left 0.5s ease;
}

.resume-video-btn:hover::before {
    left: 100%;
}

@keyframes playPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

.resume-video-btn img {
    animation: playPulse 1.5s ease-in-out infinite;
}

/* ========== SCENE SECTIONS ========== */
.scene-section {
    opacity: 1;
}

/* ========== CARD INTERACTIONS ========== */



/* Flip card 3D effect */
.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* ========== ARTISTIC STORYTELLING CARDS ========== */

/* Storybook Card - Main narrative cards */
.story-card-enhanced {
    position: relative;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.story-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #063793, #06b6d4, #f59e0b, #06b6d4, #063793);
    background-size: 200% 100%;
    animation: shimmerBorder 3s linear infinite;
}

.story-card-enhanced:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow:
        0 25px 50px -12px rgba(6, 55, 147, 0.15),
        0 12px 25px -5px rgba(6, 182, 212, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

@keyframes shimmerBorder {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}




/* Glow Card - Ambient lighting effect */
.glow-card {
    position: relative;
    background: white;
    border-radius: 20px;
    overflow: hidden;
}

.glow-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #063793, #06b6d4, #f59e0b, #06b6d4, #063793);
    background-size: 400% 400%;
    border-radius: 22px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: gradientShift 4s ease infinite;
}

.glow-card:hover::before {
    opacity: 1;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}


/* Sparkle Effect */
.sparkle-card {
    position: relative;
    overflow: hidden;
}

.sparkle-card .sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle 1.5s ease-in-out infinite;
}

.sparkle-card .sparkle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.sparkle-card .sparkle:nth-child(2) {
    top: 60%;
    left: 80%;
    animation-delay: 0.3s;
}

.sparkle-card .sparkle:nth-child(3) {
    top: 80%;
    left: 30%;
    animation-delay: 0.6s;
}

.sparkle-card .sparkle:nth-child(4) {
    top: 10%;
    left: 70%;
    animation-delay: 0.9s;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Floating Elements */
.float-animation {
    animation: gentleFloat 4s ease-in-out infinite;
}

@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


/* ========== BUTTONS ========== */

/* Primary button glow */
.btn-glow {
    position: relative;
    transition: all 0.3s ease;
}

.btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 55, 147, 0.35);
}

.btn-glow:active {
    transform: translateY(0);
}


/* ========== SIDEBAR ENHANCEMENTS ========== */


/* ========== RESPONSIVE ========== */

/* Mobile responsive */
@media (max-width: 640px) {
    .chat-panel, .chat-panel.reverse {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .chat-speech {
        max-width: 100%;
    }

    .chat-bubble::before, .chat-bubble::after, .chat-panel.reverse .chat-bubble::before, .chat-panel.reverse .chat-bubble::after {
        display: none;
    }

    .chat-name-badge {
        position: relative;
        bottom: 0;
        margin-top: 8px;
        margin-bottom: 8px;
    }
}


/* Timeline step animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-step .step-arrow {
    transition: transform 0.3s ease;
}

.timeline-step.expanded .step-arrow {
    transform: rotate(180deg);
}

/* Phishing card revealed state */
.phishing-test-card .phishing-verdict {
    display: none;
}

.phishing-test-card.revealed .phishing-verdict {
    display: block;
}

.phishing-test-card.revealed .phishing-message {
    opacity: 0.6;
}

/* Quiz option states */
.quiz-option {
    transition: all 0.2s ease;
}

.quiz-option:hover {
    border-color: #06b6d4;
    background: #f0fdfa;
    transform: translateX(4px);
}

.quiz-option.selected, .quiz-option:has(input:checked) {
    border-color: #06b6d4;
    background: #ecfeff;
}

.quiz-option.correct-answer {
    border-color: #10b981 !important;
    background: #d1fae5 !important;
}

.quiz-option.wrong-answer {
    border-color: #ef4444 !important;
    background: #fee2e2 !important;
}

/* Scroll to top button */
.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #063793, #06b6d4);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 20px rgba(6, 55, 147, 0.35);
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(6, 55, 147, 0.45);
}

/* Elements visible by default - no animation issues */
.animate-on-scroll {
    opacity: 1;
}

/* Decision feedback */
.decision-feedback {
    display: none;
}

.decision-feedback.visible {
    display: block;
}

/* Poll result */
#poll-result, #pollResultBox {
    display: none;
}

#poll-result.visible, #pollResultBox.visible {
    display: block;
}

/* ========== SLIDESHOW SYSTEM ========== */

/* Slideshow container - within content area */
.slideshow-container {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

/* Hide all scenes by default */
.scene-section {
    display: none;
    opacity: 0;
    padding: 1.5rem;
    padding-bottom: 80px;
    margin: 0 !important;
    border: none !important;
}

/* Only show active scene */
.scene-section.active {
    display: block;
    opacity: 1;
    animation: fadeSlideIn 0.5s ease forwards;
}

/* Slide animations */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

/* Slide navigation controls - within content area */
.slide-nav-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}

.slide-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.9rem;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    background: transparent;
}

.slide-nav-btn span {
    display: inline !important;
}

.slide-nav-btn.prev-btn {
    color: #64748b;
}

.slide-nav-btn.prev-btn:hover:not(:disabled) {
    color: #334155;
    transform: translateX(-3px);
}

.slide-nav-btn.next-btn {
  background: linear-gradient(135deg, #063793, #06b6d4);
    color: white;

}

.slide-nav-btn.next-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

.slide-nav-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

.slide-nav-btn.locked {
    color: #94a3b8;
    cursor: not-allowed;
}

.slide-nav-btn.locked::after {
    content: '🔒';
    margin-left: 0.5rem;
    font-size: 0.85rem;
}

/* Slide progress indicator */
.slide-progress {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.7rem;
    background: #f1f5f9;
    border-radius: 50px;
}

.slide-progress-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.25s ease;
    cursor: pointer;
}

.slide-progress-dot.completed {
    background: #10b981;
}

.slide-progress-dot.active {
    background: linear-gradient(135deg, #059669, #10b981);
    transform: scale(1.25);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4);
}

.slide-progress-dot.locked {
    background: #e2e8f0;
    cursor: not-allowed;
}

.slide-progress-text {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}

/* Interaction required indicator */
.interaction-required {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #92400e;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.interaction-required.show {
    opacity: 1;
    transform: translateY(0);
}

.interaction-required i {
    animation: pulse 1.5s ease infinite;
}

/* Scene completion checkmark */
.scene-completed-badge {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 2px solid #10b981;
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #065f46;
    z-index: 1000;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.scene-completed-badge.show {
    opacity: 1;
    transform: scale(1);
}

.module-finished-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgb(15 23 42 / 0.55);
}

.module-finished-overlay[hidden] {
    display: none !important;
}

.module-finished-card {
    width: min(420px, 100%);
    background: #fff;
    border-radius: 1.25rem;
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 24px 48px rgb(15 23 42 / 0.18);
    font-family: var(--font-app);
}

.module-finished-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d1fae5;
    color: #059669;
    font-size: 2rem;
}

.module-finished-kicker {
    margin: 0 0 0.25rem;
    color: #059669;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.module-finished-card h2 {
    margin: 0 0 0.5rem;
    color: #0f172a;
    font-size: 1.45rem;
}

.module-finished-copy {
    margin: 0 0 1.25rem;
    color: #475569;
    line-height: 1.6;
}

.module-finished-next,
.module-finished-stay {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.module-finished-next {
    background: #063793;
    color: #fff;
    margin-bottom: 0.6rem;
}

.module-finished-stay {
    background: transparent;
    color: #64748b;
}

/* Sidebar scene link states */
.sidebar-scene-link {
    transition: all 0.3s ease;
}

.sidebar-scene-link.active {
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.15), transparent) !important;
    border-left: 3px solid #06b6d4;
    color: #0891b2 !important;
}

.sidebar-scene-link.active .scene-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: white !important;
}

.sidebar-scene-link.completed .scene-icon {
    color: rgb(79, 79, 79) !important;
}

.sidebar-scene-link.completed .scene-icon::after {
    content: '✓';
    position: absolute;
    font-size: 0.6rem;
}

.sidebar-scene-link.locked {
    opacity: 0.7;
    pointer-events: none;
    cursor: not-allowed;
}

.sidebar-scene-link.locked .scene-icon {
    background: #e2e8f0 !important;
}

.sidebar-scene-link.locked::after {
    content: '🔒';
    font-size: 0.7rem;
    margin-left: auto;
}

/* Smooth scroll within slides */
.scene-section {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #06b6d4 #e2e8f0;
}

/* Custom scrollbar for scenes */
.scene-section::-webkit-scrollbar {
    width: 8px;
}

.scene-section::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 4px;
}

.scene-section::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #06b6d4, #063793);
    border-radius: 4px;
}

.scene-section::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0891b2, #0284c7);
}

/* Keyboard navigation hint */
.keyboard-hint {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1001;
}

.keyboard-hint.show {
    opacity: 1;
}

.keyboard-hint kbd {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin: 0 0.25rem;
}

/* Scene content visibility */
.scene-section.active .animate-on-scroll {
    opacity: 1;
    transform: none;
}

/* Progress dots responsive */
@media (max-width: 768px) {
    .slide-progress-dot {
        width: 8px;
        height: 8px;
    }

    .slide-nav-btn {
        padding: 0.35rem 0.8rem;
        font-size: 0.78rem;
    }

    .slide-progress-text {
        font-size: 0.7rem;
    }

    .slide-nav-controls {
        gap: 0.5rem;
        padding: 0;
    }
}

@media (max-width: 767px) {
    .slide-nav-btn.locked::after {
        font-size: 0.5rem;
        margin-left: 0.15rem;
        line-height: 1;
    }
}

@media (max-width: 480px) {
    .slide-progress {
        display: none;
    }

    .slide-nav-btn {
        gap: 0.2rem;
        padding: 0.28rem 0.5rem;
        font-size: 0.68rem;
    }

    .slide-nav-btn span {
        display: inline !important;
        font-size: 0.65rem;
        font-weight: 600;
    }
}

/* ========== MOBILE RESPONSIVE STYLES ========== */

/* Mobile Sidebar Overlay */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Sidebar */
@media (max-width: 1023px) {
    .mobile-sidebar {
        position: fixed !important;
        top: 4px !important;
        left: 0;
        bottom: 0;
        width: 300px;
        max-width: 85vw;
        z-index: 1060;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0 !important;
        max-height: none !important;
        height: calc(100vh - 4px) !important;
        overflow-y: auto !important;
    }

    .mobile-sidebar.open {
        transform: translateX(0);
    }

    .mobile-sidebar ul {
        max-height: none !important;
    }
}

/* Desktop/laptop sidebar: size to the scene list, scroll only when the
   viewport is shorter than the items. Grid stretch + a second 100vh cap on
   the <ul> was leaving a large empty gap on laptop screens. */
@media (min-width: 1024px) {
    .mobile-sidebar {
        align-self: start;
        display: flex;
        flex-direction: column;
        height: fit-content;
        max-height: calc(100vh - 160px);
        overflow: hidden;
    }

    .mobile-sidebar > div {
        flex-shrink: 0;
    }

    .mobile-sidebar ul {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }
}

/* Short laptops (1366×768, 150% UI scaling on 1080p, etc.) */
@media (min-width: 1024px) and (max-height: 850px) {
    .mobile-sidebar {
        max-height: calc(100vh - 148px);
    }
}

@media (min-width: 1024px) and (max-height: 720px) {
    .mobile-sidebar {
        max-height: calc(100vh - 136px);
    }
}

/* Tall monitors: keep the sticky card off the viewport bottom edge */
@media (min-width: 1024px) and (min-height: 1000px) {
    .mobile-sidebar {
        max-height: calc(100vh - 176px);
    }
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: linear-gradient(135deg, #063793, #06b6d4);
    border-radius: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(6, 55, 147, 0.3);
}

.mobile-menu-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(6, 55, 147, 0.4);
}

.mobile-menu-btn:active {
    transform: scale(0.95);
}

@media (max-width: 1023px) {
    #topNav .mobile-menu-btn {
        display: none;
    }

    .breadcrumb-nav .mobile-menu-btn {
        display: flex;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        font-size: 1rem;
        box-shadow: 0 2px 8px rgba(6, 55, 147, 0.25);
        position: relative;
        z-index: 1061;
    }

    nav.breadcrumb-nav > div {
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .breadcrumb-nav .slide-nav-controls {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        justify-content: flex-end;
        padding: 0;
    }
}

/* Mobile close button inside sidebar */
.sidebar-close-btn {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    z-index: 10;
}

.sidebar-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 1023px) {
    .sidebar-close-btn {
        display: flex;
    }
}

/* Mobile Header Responsive */
@media (max-width: 768px) {
    #topNav {
        padding: 0 0.75rem !important;
        height: 72px;
        min-height: 72px;
    }

    /* #topNav .brand-logo span {
        display: none;
    } */

    .progress-tracker-mobile {
        display: none;
    }
}

@media (max-width: 480px) {
    #topNav .progress-tracker-full .relative.w-10 {
        width: 2.5rem;
        height: 2.5rem;
        flex-shrink: 0;
    }
}

/* Mobile Breadcrumb */
@media (max-width: 768px) {
    .breadcrumb-nav {
        padding: calc(0.35rem + 4px) 0.85rem !important;
        flex-direction: row;
        gap: 0.4rem;
    }

    .breadcrumb-links {
        display: none;
    }

    .slide-nav-controls {
        width: auto;
        justify-content: flex-end;
    }
}

/* Mobile Main Content */
@media (max-width: 1023px) {
    .main-content-grid {
        grid-template-columns: 1fr !important;
        padding: 1rem !important;
    }
}

/* Phones: all outer blocks share the header's 1rem left edge.
   Desktop/tablet (768px+) keep the bordered container and side padding. */
@media (max-width: 767px) {
    .main-content-grid {
        padding: 0.5rem 0 !important;
    }

    .slideshow-container {
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .course-content {
        margin: 0 !important;
    }

    .scene-section {
        padding: 1rem !important;
        padding-bottom: 80px !important;
    }

    .story-card-enhanced,
    .glow-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-shadow: none !important;
        border-radius: 12px;
    }

    /* Character intro (and similar cards): drop extra inner inset */
    .story-card-enhanced > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .story-card-enhanced > .flex {
        align-items: stretch !important;
        width: 100%;
    }

    .story-card-enhanced > .flex > .flex-shrink-0 {
        align-self: center;
    }

    .story-card-enhanced .flex-1,
    .story-card-enhanced .grid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .story-card-enhanced .grid > div {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .chat-conversation,
    .chat-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none;
    }
}

/* Mobile Header Image */
@media (max-width: 768px) {
    .header-section {
        padding: 2rem 1rem !important;
    }

    .header-section h1 {
        font-size: 1.5rem !important;
    }

    .header-section .header-icon {
        width: 80px !important;
        height: 80px !important;
    }

    .header-section .header-icon img {
        width: 40px !important;
    }
}

@media (max-width: 480px) {
    .header-section .header-icon {
        display: none;
    }
}

/* Mobile Card Adjustments */
@media (max-width: 640px) {
    .story-card-enhanced .card-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.section-margin-mt-70{
  margin-top: 70px !important;
}

.section-margin-mb-70{
  margin-bottom: 70px !important;
}

/* ========== LARGE SCREEN FONT SIZE BOOST (1600px+) ========== */
@media (min-width: 1600px) {
    body {
        font-size: 1.1rem; /* 18px base */
    }

    p, li, span, .chat-text {
        font-size: 1.1rem;
        line-height: 1.8;
    }
.text-xs
{
    font-size: 14px !important;
}
.text-sm{
    font-size: 15px !important;
}
    .chat-bubble {
        padding: 1.75rem;
    }

    .chat-emotion {
        font-size: 0.9rem;
    }

    .chat-name-badge {
        font-size: 0.85rem;
    }

    .slide-nav-btn {
        font-size: 0.85rem;
        padding: 0.4rem 1rem;
    }

    .story-card-enhanced .card-content {
        font-size: 1.125rem;
    }
}

@media (max-width: 767px) {
    .video-play-overlay-btn{
        width: 50px !important;
        height: 50px !important;
    }
    .video-controls{
        padding: 0 !important;
    }
    .video-progress-container{
        margin-bottom: 0 !important;
    }
    .video-time-separator,
    #duration1{
        display: none !important;
    }
}

/* ========== TAP ICON BLINKING ANIMATIONS ========== */

@keyframes iconBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.9);
    }
}

@keyframes badgeGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(6, 182, 212, 0);
    }
}

/* Tap badge container - just the icon, no background */
.tap-badge-blink {
    background: transparent !important;
    color: transparent !important;
    font-weight: 600 !important;
    font-size: 0 !important;
    padding: 0 !important;
    border-radius: 0;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    box-shadow: none;
    border: none;
    transition: all 0.3s ease;
}

.tap-badge-blink:hover {
    box-shadow: none;
    transform: scale(1.1);
}

/* Only the icon blinks, not the text */
.tap-badge-blink img {
    filter: none;
    animation: iconBlink 0.9s ease-in-out infinite;
    display: inline-block;
    line-height: 1;
    width: 28px !important;
    height: 28px !important;
}
.chat-avatar-wrapper{
    background-color: transparent !important;
}

/* Wide desktops only: align the content shell and give extra width to the sidebar */
@media (min-width: 1501px) {
    .max-w-\[1500px\] {
        max-width: 1400px;
    }

    .main-content-grid {
        max-width: 1400px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        grid-template-columns: 330px minmax(0, 1fr) !important;
        column-gap: 1.5rem;
    }
}