:root {
    --mobile-teacher-nav-offset: calc(var(--bottom-nav-height, 46px) + var(--bottom-nav-margin, 22px) + env(safe-area-inset-bottom, 0px));
    --mobile-teacher-avatar-width: clamp(178px, 29vw, 270px);
    --mobile-teacher-dock-height: 48px;
}

#tutorial-help-btn-mobile {
    position: fixed;
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--mobile-teacher-nav-offset) + 8px);
    z-index: 99968;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    max-width: min(290px, calc(100vw - 16px));
    padding: 8px 13px;
    border: 1px solid rgba(147, 211, 255, 0.9);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(76, 156, 231, 0.96), rgba(77, 103, 210, 0.96));
    color: #fff;
    box-shadow: 0 0 0 1px rgba(193, 231, 255, 0.2), 0 0 20px rgba(82, 174, 255, 0.55), 0 8px 22px rgba(0, 0, 0, 0.32);
    font: 800 0.72rem/1.15 'Inter', sans-serif;
    letter-spacing: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#tutorial-help-btn-mobile::before {
    content: '?';
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    font-size: 0.66rem;
}

#tutorial-help-btn-mobile::after {
    content: '✦';
    color: #eefaff;
    font-size: 0.72rem;
    filter: drop-shadow(0 0 5px #fff);
    animation: mobileTeacherSparkle 2.4s ease-in-out infinite;
}

#tutorial-help-btn-mobile:active { transform: scale(0.97); }
body.teacher-help-open #tutorial-help-btn-mobile { display: none; }

#teacher-app-lock {
    position: fixed;
    inset: 0;
    z-index: 220000;
    display: none;
    background: transparent;
    touch-action: none;
}

body.teacher-lesson-active #teacher-app-lock { display: block; }

#teacher-help-modal {
    position: fixed;
    inset: 0;
    z-index: 230000;
    display: none;
    overflow: hidden;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
}

.teacher-help-shell { position: absolute; inset: 0; }

.teacher-video-frame {
    position: fixed;
    right: calc(2px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--mobile-teacher-nav-offset) + 2px);
    width: var(--mobile-teacher-avatar-width);
    height: min(72dvh, 445px);
    overflow: hidden;
    pointer-events: none;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.42));
    transform-origin: 50% 100%;
}

.teacher-video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    background: transparent;
}

.teacher-video-frame .teacher-afk-video {
    visibility: hidden;
    opacity: 0;
}

.teacher-video-frame.teacher-afk-visible #teacher-help-video {
    visibility: hidden !important;
    opacity: 0;
}

.teacher-video-frame.teacher-afk-visible .teacher-afk-video {
    visibility: visible !important;
    opacity: 1;
}

.teacher-avatar-podium {
    position: fixed;
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--mobile-teacher-nav-offset) + 3px);
    z-index: -1;
    width: calc(var(--mobile-teacher-avatar-width) - 12px);
    height: 31px;
    border: 1px solid rgba(139, 190, 255, 0.36);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(75, 125, 217, 0.8), rgba(18, 24, 60, 0.94) 68%);
    box-shadow: 0 0 24px rgba(78, 150, 255, 0.36), inset 0 6px 12px rgba(255, 255, 255, 0.1);
}

.teacher-help-head {
    position: fixed;
    right: calc(var(--mobile-teacher-avatar-width) + 14px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--mobile-teacher-nav-offset) + var(--mobile-teacher-dock-height) + min(252px, 48dvh));
    width: min(290px, calc(100vw - var(--mobile-teacher-avatar-width) - 28px));
    color: #fff;
    text-align: right;
    pointer-events: none;
}

.teacher-help-kicker {
    margin: 0 0 3px;
    color: #93cfff;
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.teacher-help-title {
    margin: 0;
    font-size: clamp(0.85rem, 2.1vw, 1.05rem);
    line-height: 1.15;
    letter-spacing: 0;
}

.teacher-help-copy { display: none; }

.teacher-topic-rail {
    position: fixed;
    right: calc(var(--mobile-teacher-avatar-width) + 14px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--mobile-teacher-nav-offset) + var(--mobile-teacher-dock-height) + 7px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    width: min(290px, calc(100vw - var(--mobile-teacher-avatar-width) - 28px));
    max-height: calc(100dvh - var(--mobile-teacher-nav-offset) - var(--mobile-teacher-dock-height) - 15px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    pointer-events: auto;
}

.teacher-topic-rail::before {
    content: '';
    flex: 1 1 auto;
    min-height: 0;
}

.teacher-topic-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 39px;
    padding: 7px 9px 7px 11px;
    border: 1px solid rgba(133, 190, 255, 0.45);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(9, 27, 52, 0.96), rgba(35, 38, 94, 0.96));
    color: #f8fbff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.06);
    font-size: clamp(0.61rem, 1.55vw, 0.74rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0;
    text-align: right;
    flex: 0 0 auto;
    opacity: 0;
    transform: translateX(18px);
    animation: mobileTeacherTopicIn 0.55s cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
    animation-delay: var(--topic-delay, 0.2s);
    -webkit-tap-highlight-color: transparent;
}

.teacher-topic-btn:active { transform: scale(0.985); }
.teacher-topic-btn.primary {
    border-color: rgba(75, 211, 150, 0.72);
    background: linear-gradient(135deg, rgba(18, 119, 80, 0.96), rgba(39, 101, 211, 0.96));
}

.teacher-topic-label { min-width: 0; }
.teacher-topic-meta { display: flex; align-items: center; gap: 4px; }
.teacher-topic-time,
.teacher-topic-reward {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 5px;
    border: 1px solid rgba(143, 190, 255, 0.28);
    border-radius: 7px;
    background: rgba(6, 15, 39, 0.55);
    color: #cde7ff;
    font-size: 0.54rem;
    white-space: nowrap;
}

.teacher-topic-reward { color: #f9d66f; }
.teacher-topic-check { display: none; color: #d8ffe8; font-weight: 900; }
.teacher-topic-btn.completed {
    border-color: rgba(67, 222, 137, 0.76);
    background: linear-gradient(135deg, rgba(15, 112, 70, 0.97), rgba(23, 89, 98, 0.97));
}
.teacher-topic-btn.completed .teacher-topic-check { display: inline; }

body.profile-guest .teacher-topic-btn[data-teacher-auth-required="true"] { display: none; }
.teacher-topic-btn[data-teacher-menu="mini"] { display: none; }
body.teacher-mini-lessons .teacher-topic-btn[data-teacher-menu="main"] { display: none; }
body.teacher-mini-lessons .teacher-topic-btn[data-teacher-menu="mini"] { display: grid; }

.teacher-action-dock {
    position: fixed;
    right: calc(3px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--mobile-teacher-nav-offset) + 2px);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: min(360px, 49vw);
    min-width: 275px;
    min-height: var(--mobile-teacher-dock-height);
    padding: 5px 6px;
    border: 1px solid rgba(130, 181, 255, 0.52);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(7, 17, 42, 0.97), rgba(27, 30, 81, 0.97));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42), 0 0 18px rgba(68, 129, 237, 0.28);
    pointer-events: auto;
}

.teacher-did-credit,
.teacher-music-toggle,
.teacher-dock-btn {
    min-height: 36px;
    border: 1px solid rgba(146, 190, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.teacher-did-credit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    padding: 0 5px;
    flex: 0 0 auto;
}
.teacher-did-credit img { width: 28px; max-height: 16px; }

.teacher-music-control { position: relative; flex: 0 0 auto; }
.teacher-music-toggle {
    display: grid;
    place-items: center;
    width: 36px;
    padding: 0;
}
.teacher-music-toggle svg { width: 17px; height: 17px; }
.teacher-music-toggle .icon-muted { display: none; }
.teacher-music-toggle.muted .icon-sound { display: none; }
.teacher-music-toggle.muted .icon-muted { display: block; }

.teacher-volume-popover {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    display: none;
    width: 48px;
    height: 132px;
    padding: 8px 6px 10px;
    transform: translateX(-50%);
    border: 1px solid rgba(130, 181, 255, 0.55);
    border-radius: 10px;
    background: rgba(10, 24, 66, 0.97);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4), 0 0 16px rgba(69, 132, 255, 0.25);
    box-sizing: border-box;
}
.teacher-music-control:focus-within .teacher-volume-popover,
.teacher-music-control.volume-open .teacher-volume-popover { display: block; }
.teacher-volume-label { color: #d9ebff; font-size: 0.58rem; font-weight: 800; text-align: center; }
.teacher-volume-slider {
    position: relative;
    width: 22px;
    height: 92px;
    margin: 5px auto 0;
    border-radius: 9px;
    background: rgba(2, 9, 29, 0.72);
    touch-action: none;
}
.teacher-volume-slider::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 5px;
    bottom: 5px;
    width: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
}
.teacher-volume-fill {
    position: absolute;
    left: 9px;
    bottom: 5px;
    width: 4px;
    height: var(--teacher-volume-fill, 100%);
    max-height: calc(100% - 10px);
    border-radius: 4px;
    background: #79c5ff;
}
.teacher-volume-thumb {
    position: absolute;
    left: 4px;
    bottom: calc(var(--teacher-volume-fill, 100%) - 7px);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ccecff;
    box-shadow: 0 0 10px rgba(92, 180, 255, 0.8);
}

.teacher-dock-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 7px;
    font: 800 clamp(0.56rem, 1.35vw, 0.69rem)/1.1 'Inter', sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
}
.teacher-dock-btn.close { border-color: rgba(183, 143, 255, 0.52); }
.teacher-dock-btn.mini { border-color: rgba(60, 220, 158, 0.58); background: linear-gradient(135deg, rgba(17, 126, 79, 0.95), rgba(35, 104, 207, 0.95)); }
.teacher-dock-btn.back { display: none; border-color: rgba(95, 171, 255, 0.65); }
.teacher-dock-btn.end { display: none; border-color: rgba(255, 116, 116, 0.65); background: rgba(155, 35, 49, 0.94); }
body.teacher-mini-lessons .teacher-dock-btn.close,
body.teacher-mini-lessons .teacher-dock-btn.mini { display: none; }
body.teacher-mini-lessons .teacher-dock-btn.back { display: block; }
body.profile-guest .teacher-dock-btn.mini { display: none; }
body.teacher-lesson-active .teacher-did-credit,
body.teacher-lesson-active .teacher-music-control,
body.teacher-lesson-active .teacher-dock-btn.close,
body.teacher-lesson-active .teacher-dock-btn.mini,
body.teacher-lesson-active .teacher-dock-btn.back { display: none; }
body.teacher-lesson-active .teacher-dock-btn.end { display: block; }

body.teacher-topics-hiding .teacher-topic-btn,
body.teacher-lesson-active .teacher-topic-btn {
    pointer-events: none;
    animation: mobileTeacherTopicOut 0.28s ease forwards;
    animation-delay: var(--topic-exit-delay, 0s);
}

body.teacher-avatar-entering .teacher-video-frame,
body.teacher-avatar-entering .teacher-avatar-podium,
body.teacher-avatar-entering .teacher-action-dock {
    animation: mobileTeacherEnter 0.65s cubic-bezier(0.2, 0.85, 0.2, 1) both;
}
body.teacher-avatar-leaving .teacher-video-frame,
body.teacher-avatar-leaving .teacher-avatar-podium,
body.teacher-avatar-leaving .teacher-action-dock {
    animation: mobileTeacherLeave 0.45s ease-in both;
}

.teacher-tour-highlight {
    position: relative !important;
    z-index: 220010 !important;
    outline: 3px solid #7dd3fc !important;
    outline-offset: 4px !important;
    border-radius: 9px !important;
    box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.18), 0 0 26px rgba(56, 189, 248, 0.88) !important;
}

body.teacher-show-controls #mobile-controls-btn,
body.teacher-show-controls #mobile-controls-popover,
body.teacher-show-controls #mobile-active-tools-bar,
body.teacher-show-drum #drum-machine-open-btn,
body.teacher-show-streak #marimba-streak-mobile-btn {
    display: flex !important;
}
body.teacher-show-controls #mobile-controls-popover {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.mobile-teacher-midi-demo {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid rgba(247, 194, 80, 0.5);
    border-radius: 8px;
    background: rgba(55, 37, 8, 0.88);
    color: #ffe7a3;
    font-size: 0.67rem;
    font-weight: 800;
}
body.teacher-show-midi .mobile-teacher-midi-demo { display: flex; }
.mobile-teacher-recording-demo {
    padding: 10px;
    border: 1px solid rgba(123, 183, 255, 0.4);
    border-radius: 10px;
    background: rgba(33, 61, 112, 0.45);
    color: #eef8ff;
    font-size: 0.72rem;
    font-weight: 800;
}

@keyframes mobileTeacherSparkle {
    0%, 100% { opacity: 0.45; transform: scale(0.84) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.12) rotate(20deg); }
}
@keyframes mobileTeacherTopicIn { to { opacity: 1; transform: translateX(0); } }
@keyframes mobileTeacherTopicOut { to { opacity: 0; transform: translateX(18px); } }
@keyframes mobileTeacherEnter {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mobileTeacherLeave {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(34px) scale(0.96); }
}

@media (orientation: portrait) {
    #tutorial-help-btn-mobile { display: none !important; }
}

@media (orientation: landscape) and (max-height: 430px) {
    :root {
        --mobile-teacher-avatar-width: clamp(170px, 28vw, 230px);
        --mobile-teacher-dock-height: 45px;
    }
    .teacher-video-frame { height: min(74dvh, 330px); }
    .teacher-topic-rail {
        gap: 4px;
        right: calc(var(--mobile-teacher-avatar-width) + 8px + env(safe-area-inset-right, 0px));
        width: min(278px, calc(100vw - var(--mobile-teacher-avatar-width) - 18px));
        bottom: calc(var(--mobile-teacher-nav-offset) + var(--mobile-teacher-dock-height) + 3px);
    }
    .teacher-topic-btn { min-height: 34px; padding: 5px 7px 5px 9px; }
    .teacher-help-head { display: none; }
    .teacher-action-dock { width: min(342px, 51vw); min-height: 45px; padding: 4px 5px; }
    .teacher-did-credit,
    .teacher-music-toggle,
    .teacher-dock-btn { min-height: 34px; }
}

@media (orientation: landscape) and (max-width: 700px) {
    .teacher-topic-meta { gap: 2px; }
    .teacher-topic-time,
    .teacher-topic-reward { padding: 2px 4px; font-size: 0.5rem; }
    .teacher-action-dock { min-width: 270px; }
}

@media (prefers-reduced-motion: reduce) {
    #tutorial-help-btn-mobile::after,
    .teacher-topic-btn,
    body.teacher-avatar-entering .teacher-video-frame,
    body.teacher-avatar-entering .teacher-avatar-podium,
    body.teacher-avatar-entering .teacher-action-dock,
    body.teacher-avatar-leaving .teacher-video-frame,
    body.teacher-avatar-leaving .teacher-avatar-podium,
    body.teacher-avatar-leaving .teacher-action-dock {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }
}