/* ========================================
   📚 Stories Section Styles
   ======================================== */

/* Story list grid */
.stories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
    overflow-y: auto;
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
    align-content: start;
}

.story-card-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.story-card-item:hover {
    transform: translateY(-2px);
    border-color: #f59e0b;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15);
}

.story-card-icon {
    font-size: 2.2rem;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    border-radius: 14px;
}

.story-card-info {
    flex: 1;
}

.story-card-number {
    font-size: 0.75rem;
    font-weight: 700;
    color: #78716c;
    margin-bottom: 2px;
}

.story-card-name {
    font-size: 1rem;
    font-weight: 800;
    color: #1c1917;
}

.story-card-check {
    font-size: 1.2rem;
}


/* Video container */
.story-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.story-video-container {
    width: 95%;
    max-width: 850px;
    margin: 10px auto;
    aspect-ratio: 16/9;
    background: #000;
    flex-shrink: 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: all 0.4s ease;
}

.story-video-container.expanded {
    width: 100%;
    max-width: 100%;
    margin: 0;
    aspect-ratio: auto;
    height: 75vh;
    border-radius: 0;
    box-shadow: none;
}

.btn-expand-video {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-expand-video:hover {
    background: rgba(0, 0, 0, 0.85);
}

/* Scene display */
.story-scene {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    max-height: 45vh;
    position: relative;
    overflow: hidden;
    transition: background 0.5s ease;
}

.story-scene-emoji {
    font-size: clamp(5rem, 20vw, 10rem);
    animation: storyBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
    z-index: 2;
}

/* Story Menu Actions (Responsive) */
.story-top-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 600px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .story-top-actions {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 15px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        padding: 8px;
        z-index: 1000;
        gap: 4px;
    }

    .story-top-actions.open {
        display: flex;
        animation: popIn 0.2s ease-out forwards;
    }

    .story-top-actions .btn-icon {
        border-radius: 8px;
        justify-content: center;
        padding: 10px;
        color: #334155;
        background: transparent;
    }

    .story-top-actions .btn-icon:hover {
        background: #f1f5f9;
    }


}

@keyframes storyBounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

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

.story-scene-extras {
    position: absolute;
    top: 15%;
    font-size: clamp(1.8rem, 6vw, 3rem);
    letter-spacing: 15px;
    opacity: 0.7;
    animation: floatExtras 3s ease-in-out infinite;
    z-index: 1;
}

.story-scene-extras-bottom {
    position: absolute;
    bottom: 10%;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    letter-spacing: 20px;
    opacity: 0.5;
    animation: floatExtras 4s ease-in-out infinite reverse;
    z-index: 1;
}

@keyframes floatExtras {

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

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

/* Text area */
.story-text-area {
    padding: 16px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    transition: opacity 0.3s ease;
}

.story-text-area.fading {
    opacity: 0;
}

.story-subtitle {
    font-size: clamp(1rem, 3.5vw, 1.3rem);
    font-weight: 700;
    color: #44403c;
    margin-bottom: 10px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    border-left: 4px solid #f97316;
}

.story-content-text {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    font-weight: 800;
    color: #1c1917;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

.story-word {
    display: inline;
}

.story-keyword {
    display: inline;
    color: #f59e0b;
    cursor: pointer;
    border-bottom: 3px dotted rgba(245, 158, 11, 0.4);
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.story-keyword:hover {
    background: rgba(245, 158, 11, 0.15);
}

.story-keyword.highlighted {
    background: rgba(245, 158, 11, 0.3);
    transform: scale(1.15);
    display: inline-block;
    animation: wordPulse 0.5s ease;
    border-bottom-color: #f59e0b;
}

@keyframes wordPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }

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

/* Progress dots */
.story-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.6);
}

.story-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.story-dot.active {
    background: #f59e0b;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.story-dot.done {
    background: #10b981;
}

/* Story nav */
.story-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Word popup */
.story-word-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    pointer-events: none;
}

.word-popup-text {
    font-size: clamp(3rem, 12vw, 5rem);
    font-weight: 900;
    color: #f97316;
    text-shadow: 0 4px 20px rgba(249, 115, 22, 0.3);
    animation: popIn 0.3s ease;
    padding: 30px 50px;
    background: white;
    border-radius: 24px;
    border: 3px solid rgba(249, 115, 22, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 480px) {
    .story-scene {
        min-height: 200px;
    }

    .story-scene-emoji {
        font-size: 4rem;
    }

    .story-scene-extras {
        letter-spacing: 10px;
        font-size: 1.5rem;
    }
}

@media (min-width: 769px) {
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .story-card-item {
        padding: 10px 12px;
        gap: 10px;
    }

    .story-card-icon {
        width: 40px;
        height: 40px;
        font-size: 1.8rem;
    }

    .story-scene {
        min-height: 180px;
    }

    .story-scene-emoji {
        font-size: 3.5rem;
    }

    .story-text-area {
        padding: 10px 12px;
    }

    .story-subtitle {
        font-size: 0.95rem;
        padding: 6px 10px;
        margin-bottom: 6px;
    }

    .story-content-text {
        font-size: 1.1rem;
    }

    .story-video-container.expanded {
        height: 40vh;
        /* Don't take whole screen on mobile */
    }

    .video-editor-content,
    .notepad-content,
    .pron-practice-content {
        padding: 16px;
        width: 95%;
    }

    .word-popup-text {
        font-size: 2.5rem;
        padding: 20px 30px;
    }

    /* Whiteboard adjustments */
    .whiteboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .whiteboard-controls {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }
}

/* Stories banner on categories page */
.stories-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    margin: 12px 16px 20px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(251, 191, 36, 0.15));
    border: 2px solid rgba(249, 115, 22, 0.15);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.stories-banner:hover {
    transform: translateY(-2px);
    border-color: #8b5cf6;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.2);
}

.stories-banner .category-icon {
    font-size: 2.5rem;
    animation: storyBounce 2s ease-in-out infinite;
}

.stories-banner .category-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
}

.stories-banner .category-desc {
    font-size: 0.85rem;
    color: #a0aec0;
}

/* Home screen buttons */
.home-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 4px;
}

.btn-stories {
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    font-size: 1rem !important;
}


.btn-stories:hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4) !important;
}

/* Video Editor Modal */
.video-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.video-editor-content {
    background: white;
    padding: 24px;
    border-radius: 24px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.video-editor-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 16px;
}

.video-editor-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    margin-bottom: 16px;
    outline: none;
    transition: all 0.2s;
}

.video-editor-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.video-editor-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn-editor {
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}

.btn-editor.save {
    background: #10b981;
    color: white;
}

.btn-editor.cancel {
    background: #f1f5f9;
    color: #64748b;
}

.btn-editor.delete {
    background: #ef4444;
    color: white;
}

/* ========================================
   ✏️ Annotation Canvas
   ======================================== */
.story-video-container {
    position: relative;
}

.annotation-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: crosshair;
    border-radius: 12px;
}

.annotation-canvas.hidden {
    pointer-events: none;
    opacity: 0;
}

.annotation-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 20px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
}

.annotation-toolbar .color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: transform 0.15s;
}

.annotation-toolbar .color-dot:hover,
.annotation-toolbar .color-dot.active {
    transform: scale(1.3);
    border-color: white;
}

.annotation-toolbar .btn-icon {
    background: rgba(255, 255, 255, 0.15);
}

.btn-draw-toggle.active {
    background: rgba(239, 68, 68, 0.25) !important;
    border: 2px solid #ef4444 !important;
}

/* ========================================
   🗒️ Voice Notepad
   ======================================== */
.notepad-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.notepad-content {
    background: white;
    padding: 20px;
    border-radius: 24px;
    width: 94%;
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.notepad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.notepad-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1a1a2e;
}

.notepad-textarea {
    width: 100%;
    min-height: 180px;
    max-height: 40vh;
    padding: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    margin-bottom: 12px;
}

.notepad-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.notepad-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.notepad-lang-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    justify-content: center;
}

.lang-chip {
    padding: 6px 12px;
    border-radius: 20px;
    border: 2px solid #e2e8f0;
    background: white;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.lang-chip.active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #3b82f6;
}

.btn-mic {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-mic.recording {
    animation: micPulse 1s ease-in-out infinite;
    background: #dc2626;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.3);
}

@keyframes micPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(239, 68, 68, 0.15);
    }
}

/* ========== LEVEL SELECTION ========== */
.levels-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 16px;
    max-width: 600px;
    margin: 0 auto;
}

.level-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    border-left: 5px solid var(--level-color, #ccc);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.level-card:hover:not(.empty) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.level-card:active:not(.empty) {
    transform: scale(0.98);
}

.level-card.empty {
    opacity: 0.5;
    cursor: default;
}

.level-emoji {
    font-size: 2.2rem;
    flex-shrink: 0;
}

.level-info {
    flex: 1;
}

.level-code {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--level-color, #333);
    letter-spacing: 1px;
}

.level-label {
    font-size: 0.9rem;
    color: #64748b;
    margin-top: 2px;
}

.level-count {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 4px;
}

.level-soon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: #94a3b8;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px 10px;
    border-radius: 12px;
    font-style: italic;
}

/* ========== PRONUNCIATION PRACTICE MODAL ========== */
.btn-pron.recording {
    color: #ef4444 !important;
    animation: pronPulse 0.8s infinite;
}

@keyframes pronPulse {

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

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

.pron-practice-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}

.pron-practice-content {
    background: white;
    border-radius: 24px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pron-practice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pron-practice-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a1a2e;
}

.pron-practice-counter {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 700;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 20px;
    align-self: center;
}

.pron-practice-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: #334155;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 24px 20px;
    margin: 10px 0;
    line-height: 1.5;
}

.pron-practice-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-height: 120px;
    justify-content: center;
}

.pron-btn-record {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 16px 32px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.pron-btn-record .material-symbols-rounded {
    font-size: 2rem;
}

.pron-btn-record:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.pron-btn-record.recording {
    background: #dc2626;
    animation: micRecordPulse 1.5s infinite;
}

@keyframes micRecordPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(239, 68, 68, 0.1);
    }
}

.pron-playback-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.pron-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pron-btn.user {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
}

.pron-btn.correct {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.pron-btn.retry {
    background: #f1f5f9;
    color: #475569;
}

.pron-practice-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
}

/* Whiteboard inside Main Story View */
.story-whiteboard-container {
    margin-top: 20px;
    background: linear-gradient(135deg, #f0fdf4, #f0f9ff);
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 3px solid #bce6d2;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

.whiteboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    gap: 10px;
}

@media (max-width: 1024px) {
    .top-bar-left,
    .top-bar-right {
        min-width: 0;
    }

    .top-bar-title {
        max-width: 28vw;
        font-size: 0.95rem;
    }

    .top-bar-title .story-icon-wrapper,
    .top-bar-title img {
        max-width: 32px !important;
        max-height: 32px !important;
    }

    .story-top-actions {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 240px;
    }

    .story-top-actions .btn-icon {
        width: 40px;
        height: 40px;
    }

    .story-whiteboard-container {
        padding: 12px;
        gap: 10px;
    }

    .whiteboard-header {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }

    .whiteboard-controls {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
        padding: 8px;
        border-radius: 14px;
    }

    .whiteboard-controls > div[style*="width: 1px"] {
        display: none;
    }

    .btn-icon-small {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .btn-icon-small .material-symbols-rounded {
        font-size: 1.1rem;
    }

    .whiteboard-controls .color-dot {
        width: 22px;
        height: 22px;
        border-width: 2px;
    }

    .whiteboard-textarea {
        font-size: 20px;
    }
}

.whiteboard-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.6);
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.whiteboard-header > span:first-child {
    display: none;
}

.whiteboard-controls .color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.whiteboard-emojis {
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    margin: 0 4px;
    max-width: 300px;
    overflow-x: auto;
    white-space: nowrap;
    /* Custom Scrollbar for emojis */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.whiteboard-emojis::-webkit-scrollbar {
    height: 6px;
}

.whiteboard-emojis::-webkit-scrollbar-track {
    background: transparent;
}

.whiteboard-emojis::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}
.whiteboard-emojis::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

.whiteboard-controls .color-dot:hover {
    transform: scale(1.15) translateY(-2px);
}

.whiteboard-controls .color-dot.active {
    border-color: #334155;
    transform: scale(1.2);
}

.btn-icon-small {
    background: white;
    border: none;
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.btn-icon-small .material-symbols-rounded {
    font-size: 1.2rem;
}

.btn-icon-small:hover {
    background: #f8fafc;
    color: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-icon-small.active {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-icon-small.delete:hover {
    background: linear-gradient(135deg, #ef4444, #f87171);
    color: white;
}

.btn-icon-small.recording {
    background: linear-gradient(135deg, #ef4444, #f87171);
    color: white;
    animation: micSmallPulse 1.2s infinite ease-in-out;
}

@keyframes micSmallPulse {

    0%,
    100% {
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.1);
    }
}

.whiteboard-hybrid-area {
    position: relative;
    width: 100%;
    min-height: 600px;
    background: white;
    border: 3px dashed #93c5fd;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.whiteboard-textarea {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    min-height: 300px;
    border: none;
    padding: 14px 16px;
    font-family: 'Nunito', 'Comic Sans MS', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    resize: none;
    outline: none;
    background: transparent;
}

/* ── Teacher section (hidden by default, shown in student broadcast mode) ── */
.wb-teacher-section {
    display: none;
    flex-direction: column;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.wb-teacher-section.visible {
    display: flex;
}

/* Visual horizontal divider with centered label */
.wb-section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
}

.wb-divider-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #6366f1 30%, #8b5cf6 70%, transparent);
    border-radius: 2px;
}

.wb-section-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: #6366f1;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border-radius: 20px;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Teacher's text block */
.wb-teacher-text {
    background: linear-gradient(135deg, #ede9fe 0%, #f0f9ff 100%);
    border-left: 4px solid #6366f1;
    margin: 0 10px;
    padding: 14px 18px;
    border-radius: 12px;
    font-family: 'Nunito', 'Comic Sans MS', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #3730a3;
    line-height: 1.6;
    min-height: 40px;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.12),
                inset 0 1px 3px rgba(255,255,255,0.8);
    user-select: none;
    pointer-events: none;
    letter-spacing: 0.2px;
}

/* Second divider (between teacher and student) gets the student color */
.wb-teacher-section .wb-section-divider:last-child .wb-divider-line {
    background: linear-gradient(90deg, transparent, #10b981 30%, #34d399 70%, transparent);
}

.wb-teacher-section .wb-section-divider:last-child .wb-section-label {
    color: #065f46;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: rgba(16, 185, 129, 0.3);
}

/* The canvas sits on top of the textarea to allow drawing OVER the text and images */
.whiteboard-draw-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* Crucial: canvas is on top so they can draw over everything */
    pointer-events: auto;
    /* Catch drawing events */
    touch-action: none;
    /* Prevent scrolling while drawing */
}

/* Modifier class to let clicks pass through the canvas when manipulating images */
.whiteboard-draw-canvas.pass-through {
    pointer-events: none;
}

/* Allow typing by passing clicks through canvas when they want to type? 
   No, the JS handles this by focusing the textarea on click-start. 
   But the textarea needs transparent background so we can see the canvas?
   Actually, standard is canvas ON TOP of textarea, but then canvas blocks text selection. 
   Let's leave canvas on top, and since background is transparent, text shows through. */

.whiteboard-hybrid-area:focus-within {
    border-color: #3b82f6;
    background: #f8fafc;
}

/* Pasted Images inside Whiteboard */
.wb-pasted-img-container {
    cursor: move;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    resize: both;
    overflow: visible;
    /* Changed from hidden so the delete button doesn't get clipped when small */
    touch-action: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    background: transparent;
    z-index: 5;
    /* Above text (1), below both canvases (9, 10) */
}

/* Teacher-protected images: clear visual indicator */
.wb-pasted-img-container.from-teacher {
    border: 2px solid rgba(99, 102, 241, 0.5);
    cursor: not-allowed;
}

.wb-pasted-img-container.from-teacher::before {
    content: '\1F512';
    position: absolute;
    top: -12px;
    left: 4px;
    font-size: 14px;
    background: #6366f1;
    color: white;
    padding: 2px 6px;
    border-radius: 20px;
    font-style: normal;
    z-index: 20;
    pointer-events: none;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}

.wb-pasted-img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    /* Dragging happens on the container */
}

.wb-pasted-img-container:hover {
    border-color: #3b82f6;
}

.wb-img-del {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ef4444;
    color: white;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 5;
}

.wb-pasted-img-container:hover .wb-img-del {
    display: flex;
}

.wb-img-del:hover {
    background: #dc2626;
    color: white;
}


/* ========================================
   Layout Toggle - Side by Side Mode
   ======================================== */

/* Normal layout (default) */
.story-content-wrapper {
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow-y: auto;
}

.story-main-layout {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* Side by side layout (pizarra izquierda, historia derecha) */
.story-content-wrapper.side-by-side {
  flex-direction: row;
  gap: 12px;
  padding: 12px;
  height: 100%;
  overflow: hidden;
}

.story-content-wrapper.side-by-side .story-whiteboard-container {
  width: 60%;
  flex-shrink: 0;
  order: 1;
  height: 100%;
  overflow-y: auto;
  margin-top: 0;
}

.story-content-wrapper.side-by-side .story-main-layout {
  width: 40%;
  order: 2;
  height: 100%;
  overflow-y: auto;
}

/* Adjust video container in side-by-side mode */
.story-content-wrapper.side-by-side .story-video-container {
  width: 100%;
  height: auto;
  max-height: 35vh;
  margin: 0 auto 10px;
}

/* Adjust whiteboard in side-by-side mode */
.story-content-wrapper.side-by-side .whiteboard-hybrid-area {
  height: calc(100vh - 250px);
  min-height: 400px;
}

.story-content-wrapper.side-by-side .whiteboard-textarea {
  height: 100%;
}

/* Mobile: disable side-by-side on small screens */
@media (max-width: 768px) {
  .story-content-wrapper.side-by-side {
    flex-direction: column;
  }
  
  .story-content-wrapper.side-by-side .story-whiteboard-container {
    width: 100%;
    order: 2;
    height: auto;
  }
  
  .story-content-wrapper.side-by-side .whiteboard-hybrid-area {
    height: 400px;
  }
  
  .story-content-wrapper.side-by-side .story-main-layout {
    width: 100%;
    order: 1;
    height: auto;
  }
}

/* ========================================
   🎬 Modo Video al Lado (Video izquierda, Pizarra derecha)
   ======================================== */
.story-content-wrapper.video-side {
  flex-direction: row;
  gap: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  align-items: stretch;
}

/* Columna izquierda: video + texto de historia */
.story-content-wrapper.video-side .story-main-layout {
  width: 55%;
  order: 1;
  height: 100%;
  overflow-y: auto;
  flex-shrink: 0;
  border-right: 3px solid rgba(0,0,0,0.06);
  background: #fff;
}

/* Video ocupa todo el ancho de su columna en este modo */
.story-content-wrapper.video-side .story-video-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  aspect-ratio: 16/9;
  border-radius: 0;
  box-shadow: none;
}

/* La escena con el emoji se minimiza un poco */
.story-content-wrapper.video-side .story-scene {
  min-height: 100px;
  max-height: 18vh;
}

/* Columna derecha: pizarra */
.story-content-wrapper.video-side .story-whiteboard-container {
  flex: 1;
  order: 2;
  height: 100%;
  overflow-y: auto;
  margin-top: 0;
  border-radius: 0;
  background: linear-gradient(135deg, #f0fdf4, #f0f9ff);
}

/* Pizarra usa todo el alto disponible */
.story-content-wrapper.video-side .whiteboard-hybrid-area {
  height: calc(100vh - 220px);
  min-height: 300px;
  border-radius: 12px;
}

.story-content-wrapper.video-side .whiteboard-textarea {
  height: 100%;
  min-height: unset;
}

/* Indicador visual del botón activo */
#btn-video-side.active {
  background: rgba(139, 92, 246, 0.2) !important;
  border: 2px solid #8b5cf6 !important;
  color: #8b5cf6 !important;
}

/* Mobile: apilar verticalmente */
@media (max-width: 768px) {
  .story-content-wrapper.video-side {
    flex-direction: column;
  }
  
  .story-content-wrapper.video-side .story-main-layout {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 3px solid rgba(0,0,0,0.06);
  }

  .story-content-wrapper.video-side .story-whiteboard-container {
    width: 100%;
    height: auto;
  }

  .story-content-wrapper.video-side .whiteboard-hybrid-area {
    height: 350px;
    min-height: 250px;
  }
}