/* GETCOURSE — LESSON UI / Mobile v0.3.12 */
/* GETCOURSE — LESSON UI / Mobile v0.3.6 */
@media (max-width: 767px) {
    body.psych-lesson-ui .psych-lesson-standard-page {
        width: auto;
        max-width: none;
        padding: 0 12px 36px;
    }

    .psych-lesson-hero {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .psych-lesson-hero__top {
        flex-direction: column;
        gap: 14px;
    }

    .psych-lesson-hero h1 {
        font-size: 22px !important;
    }

    .psych-lesson-hero__nav {
        width: 100%;
    }

    .psych-lesson-nav-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 10px;
        font-size: 10px;
    }

    .psych-lesson-player-shell {
        border-radius: 14px;
    }

    .psych-lesson-player-shell__footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px;
    }

    .psych-lesson-player-help {
        flex-wrap: wrap;
    }

    .psych-lesson-materials-control {
        width: 100%;
    }

    .psych-lesson-materials-button {
        width: 100%;
        justify-content: center;
    }

    .psych-lesson-materials-popover {
        position: fixed;
        z-index: 999999;
        left: 12px;
        right: 12px;
        bottom: 12px;
        top: auto;
        width: auto;
        max-height: 70vh;
        overflow: auto;
    }

    .psych-lesson-admin-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .psych-lesson-admin-toolbar__actions {
        width: 100%;
    }

    .psych-lesson-admin-btn {
        flex: 1 1 0;
    }

    .psych-lesson-admin-panel__sheet {
        width: 100%;
    }

    .psych-lesson-admin-tabs {
        padding-left: 10px;
        padding-right: 10px;
    }

    .psych-lesson-admin-panels {
        padding: 10px;
    }

    body.psych-lesson-ui .lesson-mission-text {
        padding: 16px !important;
        font-size: 14px !important;
    }

    body.psych-lesson-ui .lesson-send-answer-block {
        padding: 12px !important;
    }
}


/* =========================================================
   v0.2 — MOBILE FIXES
   ========================================================= */
@media (max-width: 767px) {
    .psych-lesson-hero__meta {
        align-items: flex-start !important;
        gap: 6px 10px !important;
    }

    .psych-lesson-hero__meta > span {
        min-height: 22px !important;
    }

    .psych-lesson-edit-return {
        align-items: flex-start;
        flex-direction: column;
    }

    .psych-lesson-edit-return__button {
        width: 100%;
    }

    body.psych-lesson-ui .lesson-send-answer-block {
        padding: 12px !important;
    }

    body.psych-lesson-ui #LessonAnswer_answer_text,
    body.psych-lesson-ui .answer-form textarea.emoji-textarea {
        min-height: 135px !important;
        padding: 12px !important;
        font-size: 12px !important;
    }

    body.psych-lesson-ui .answer-form .btn-send-answer,
    body.psych-lesson-ui .answer-form .btn-save-draft {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 8px !important;
    }

    .psych-lesson-alt-controls {
        left: 8px;
        right: 8px;
        bottom: 8px;
        grid-template-columns: auto auto auto minmax(70px, 1fr) auto auto;
        gap: 5px;
        padding: 6px;
    }

    .psych-lesson-alt-time {
        display: none;
    }

    .psych-lesson-alt-mute {
        display: none;
    }

    .psych-lesson-alt-control {
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        font-size: 9px;
    }

    .psych-lesson-alt-speed {
        height: 28px;
        font-size: 9px;
    }

    .psych-lesson-alt-player__big-play {
        width: 50px;
        height: 50px;
        font-size: 16px;
    }
}


@media (max-width: 767px) {
    .psych-lesson-alt-controls {
        left: 8px;
        right: 8px;
        bottom: 8px;
        grid-template-columns: 32px 38px 38px minmax(70px, 1fr) 58px 32px;
        gap: 5px;
        padding: 6px;
    }

    .psych-lesson-alt-control {
        min-width: 32px;
        height: 32px;
        padding: 0 6px;
    }

    .psych-lesson-alt-speed {
        width: 58px;
        height: 32px;
    }

    .psych-lesson-alt-player__bar {
        padding: 9px 10px;
    }

    .psych-lesson-alt-player__bar-left {
        gap: 8px 12px;
    }
}


@media (max-width: 767px) {
    .psych-lesson-alt-controls {
        grid-template-columns: 32px 38px 38px minmax(70px, 1fr) 32px 58px 32px !important;
    }

    .psych-lesson-alt-volume {
        display: none !important;
    }
}


@media (max-width: 767px) {
    .psych-lesson-back-to-module {
        width: 100%;
        margin-bottom: 14px;
    }

    body.psych-lesson-ui .self-answers {
        padding: 12px !important;
    }

    body.psych-lesson-ui .psych-lesson-answer-card {
        padding: 12px !important;
    }

    body.psych-lesson-ui .psych-lesson-answer-card > .answer-content > .title {
        gap: 6px;
    }

    body.psych-lesson-ui .psych-lesson-answer-card .answer-date {
        flex-basis: 100%;
        padding-left: 40px;
    }

    body.psych-lesson-ui .psych-lesson-comment-form form {
        grid-template-columns: 1fr !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-form .user-image-wrapper {
        display: none !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-form .textarea-block {
        grid-column: 1 !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-form .btn-send {
        width: 100% !important;
        grid-column: 1 / -1 !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-card .comment {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        column-gap: 8px;
        padding: 10px !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-card .user-image-wrapper img {
        width: 30px !important;
        height: 30px !important;
    }
}


@media (max-width: 767px) {
    body.psych-lesson-ui .psych-lesson-comment-form .textarea-block {
        grid-column: 1 !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-form .new-comment-textarea,
    body.psych-lesson-ui .psych-lesson-comment-form .emoji-wysiwyg-editor {
        min-height: 100px !important;
        padding-right: 76px !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-form .emoji-button,
    body.psych-lesson-ui .psych-lesson-comment-form .emoji-picker-icon {
        right: 42px !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-form .attach-file-button-container,
    body.psych-lesson-ui .psych-lesson-comment-form .btn-send {
        width: 100% !important;
        margin: 8px 0 0 !important;
    }
}


@media (max-width: 767px) {
    body.psych-lesson-ui .psych-lesson-comment-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-actions > .attach-file-button-container,
    body.psych-lesson-ui .psych-lesson-comment-actions > .btn-send {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-form .textarea-block > .emoji-wysiwyg-editor {
        min-height: 100px !important;
        padding-right: 44px !important;
    }

    body.psych-lesson-ui .answer-textarea-container.psych-has-emoji-editor > .emoji-wysiwyg-editor {
        min-height: 135px !important;
        padding-right: 44px !important;
    }
}


@media (max-width: 767px) {
    body.psych-lesson-ui .psych-lesson-comment-actions {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-actions > .attach-file-button-container,
    body.psych-lesson-ui .psych-lesson-comment-actions > .btn-send {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}


@media (max-width: 767px) {
    body.psych-lesson-ui .answer-textarea-container.psych-has-emoji-editor .psych-primary-answer-emoji-editor,
    body.psych-lesson-ui .answer-textarea-container.psych-has-emoji-editor .emoji-wysiwyg-editor,
    body.psych-lesson-ui .answer-textarea-container.psych-has-emoji-editor [contenteditable="true"] {
        min-height: 135px !important;
        padding: 12px 44px 12px 12px !important;
        font-size: 12px !important;
    }
}


@media (max-width: 767px) {
    body.psych-lesson-ui .psych-lesson-breadcrumbs {
        gap: 6px !important;
        margin-bottom: 14px !important;
        font-size: 11px !important;
    }
}


/* =========================================================
   v0.3.6 — MOBILE WIDTH / EMOJI / PLAYER
   ========================================================= */
@media (max-width: 767px) {
    /* GetCourse has several nested containers with their own gutters.
       Pull the lesson UI back out to almost the whole viewport. */
    body.psych-lesson-ui .psych-lesson-standard-page {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw + 8px) !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.psych-lesson-ui .psych-lesson-standard-page > div,
    body.psych-lesson-ui .center-block,
    body.psych-lesson-ui .psych-lesson-content,
    body.psych-lesson-ui .psych-lesson-mission-shell,
    body.psych-lesson-ui .psych-lesson-comments-shell {
        width: 100% !important;
        max-width: none !important;
    }

    body.psych-lesson-ui .psych-lesson-hero {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Emoji is intentionally disabled visually on mobile.
       Native textarea/editor remains fully usable. */
    body.psych-lesson-ui .answer-textarea-container .emoji-button,
    body.psych-lesson-ui .answer-textarea-container .emoji-picker-icon,
    body.psych-lesson-ui .psych-lesson-comment-form .emoji-button,
    body.psych-lesson-ui .psych-lesson-comment-form .emoji-picker-icon {
        display: none !important;
    }

    body.psych-lesson-ui .answer-textarea-container.psych-has-emoji-editor .psych-primary-answer-emoji-editor,
    body.psych-lesson-ui .answer-textarea-container.psych-has-emoji-editor .emoji-wysiwyg-editor,
    body.psych-lesson-ui .answer-textarea-container.psych-has-emoji-editor [contenteditable="true"],
    body.psych-lesson-ui .psych-lesson-comment-form .textarea-block > .emoji-wysiwyg-editor {
        padding-right: 12px !important;
    }

    /* Two-row mobile player:
       progress on its own row, controls beneath it. */
    .psych-lesson-alt-controls {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        display: grid !important;
        grid-template-columns:
            34px 40px 40px minmax(0, 1fr) 64px 34px !important;
        grid-template-areas:
            "progress progress progress progress progress progress"
            "play back forward spacer speed fullscreen" !important;
        gap: 6px !important;
        padding: 7px !important;
    }

    .psych-lesson-alt-play {
        grid-area: play !important;
    }

    .psych-lesson-alt-back {
        grid-area: back !important;
    }

    .psych-lesson-alt-forward {
        grid-area: forward !important;
    }

    .psych-lesson-alt-progress {
        grid-area: progress !important;
        width: 100% !important;
        margin: 2px 0 3px !important;
    }

    .psych-lesson-alt-speed {
        grid-area: speed !important;
        width: 64px !important;
        min-width: 64px !important;
        height: 32px !important;
        padding: 0 6px !important;
        font-size: 9px !important;
    }

    .psych-lesson-alt-fullscreen {
        grid-area: fullscreen !important;
    }

    .psych-lesson-alt-time,
    .psych-lesson-alt-mute,
    .psych-lesson-alt-volume {
        display: none !important;
    }

    .psych-lesson-alt-control {
        min-width: 32px !important;
        width: auto !important;
        height: 32px !important;
        padding: 0 6px !important;
    }

    .psych-lesson-alt-player__big-play {
        width: 52px !important;
        height: 52px !important;
    }

    .psych-lesson-alt-player__big-play svg {
        width: 22px !important;
        height: 22px !important;
        flex-basis: 22px !important;
    }
}


/* =========================================================
   v0.3.8 — MOBILE FLAT HIERARCHY
   Reduce "card inside card inside card" effect
   ========================================================= */
@media (max-width: 767px) {
    /* Keep only the mission wrapper as the main outer card */
    body.psych-lesson-ui .lesson-mission-wrapper {
        border-radius: 14px !important;
        box-shadow: 0 6px 18px rgba(16,24,40,.035) !important;
    }

    /* The user's answer section becomes a transparent content layer */
    body.psych-lesson-ui .self-answers {
        margin: 0 !important;
        padding: 12px 12px 14px !important;
        background: transparent !important;
    }

    /* Remove the extra answer-card frame; retain its internal content blocks */
    body.psych-lesson-ui .psych-lesson-answer-card {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Slightly tighten answer metadata */
    body.psych-lesson-ui .psych-lesson-answer-card .answer-status {
        margin-bottom: 10px !important;
    }

    body.psych-lesson-ui .psych-lesson-answer-card > .answer-content > .title {
        margin-bottom: 10px !important;
    }

    /* The answer text itself remains a visible semantic card */
    body.psych-lesson-ui .psych-lesson-answer-card .answer-text {
        padding: 12px !important;
        border-radius: 11px !important;
        background: #FAFBFC !important;
    }

    /* Comments are separated by spacing/line rather than another outer box */
    body.psych-lesson-ui .psych-lesson-answer-card > .comments {
        margin: 14px 0 0 !important;
        padding: 14px 0 0 !important;
        border-top: 1px solid var(--lu-border) !important;
    }

    /* Individual comments remain cards, but lighter and less "boxed-in" */
    body.psych-lesson-ui .psych-lesson-comment-card {
        margin-bottom: 10px !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-card .comment {
        padding: 11px !important;
        border-color: #EEF1F5 !important;
        border-radius: 11px !important;
        background: #FBFCFE !important;
        box-shadow: none !important;
    }

    /* Remove the extra container around the new-comment form */
    body.psych-lesson-ui .psych-lesson-comment-form {
        margin-top: 14px !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-form .new-comment {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-form form {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.psych-lesson-ui .psych-lesson-comment-form .textarea-block {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* The textarea itself is the form's only card-like surface */
    body.psych-lesson-ui .psych-lesson-comment-form .new-comment-textarea,
    body.psych-lesson-ui .psych-lesson-comment-form .textarea-block > .emoji-wysiwyg-editor {
        min-height: 112px !important;
        border-radius: 11px !important;
        background: #fff !important;
    }

    /* Buttons visually belong to the form, not to another nested card */
    body.psych-lesson-ui .psych-lesson-comment-actions {
        margin-top: 10px !important;
        padding: 0 !important;
    }

    /* Remove any residual GC borders/backgrounds around comment/form wrappers */
    body.psych-lesson-ui .comments-tree-wrapper,
    body.psych-lesson-ui .comments-tree,
    body.psych-lesson-ui .comments-container,
    body.psych-lesson-ui .comments-top-level,
    body.psych-lesson-ui .comment-list {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Slightly reduce side padding so content feels less nested */
    body.psych-lesson-ui .lesson-mission-text {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* =========================================================
   v0.3.10 — MOBILE PRIMARY ANSWER FULL WIDTH
   ========================================================= */
@media (max-width: 767px) {
    /* Use the full width of the mission card for the first-answer form */
    body.psych-lesson-ui .lesson-send-answer-block {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 12px 14px !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    body.psych-lesson-ui .lesson-send-answer-block #lessonAnswerForm,
    body.psych-lesson-ui .lesson-send-answer-block .answer-form,
    body.psych-lesson-ui .lesson-send-answer-block .answer-form-inner,
    body.psych-lesson-ui .lesson-send-answer-block .answer-form-inner > div,
    body.psych-lesson-ui .lesson-send-answer-block .answer-textarea-container,
    body.psych-lesson-ui .lesson-send-answer-block .field-lessonanswer-answer_text {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* The textarea / emoji editor should fill the same width as comment forms */
    body.psych-lesson-ui .lesson-send-answer-block textarea#LessonAnswer_answer_text,
    body.psych-lesson-ui .lesson-send-answer-block .answer-textarea-container.psych-has-emoji-editor .psych-primary-answer-emoji-editor,
    body.psych-lesson-ui .lesson-send-answer-block .answer-textarea-container.psych-has-emoji-editor .emoji-wysiwyg-editor,
    body.psych-lesson-ui .lesson-send-answer-block .answer-textarea-container.psych-has-emoji-editor [contenteditable="true"] {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 150px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Upload button becomes full width */
    body.psych-lesson-ui .lesson-send-answer-block .uploadifive-button,
    body.psych-lesson-ui .lesson-send-answer-block .uploadify-button,
    body.psych-lesson-ui .lesson-send-answer-block [id^="file_upload"][style],
    body.psych-lesson-ui .lesson-send-answer-block .answer-textarea-container > div[style*="overflow"] .uploadifive-button {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    body.psych-lesson-ui .lesson-send-answer-block .answer-textarea-container > div[style*="overflow"] {
        width: 100% !important;
        max-width: none !important;
        margin: 10px 0 0 !important;
        overflow: visible !important;
    }

    /* Full-width primary actions */
    body.psych-lesson-ui .lesson-send-answer-block .btn-send-answer,
    body.psych-lesson-ui .lesson-send-answer-block .btn-save-draft {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 48px !important;
        margin: 8px 0 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    /* Remove legacy line-break spacing below native buttons */
    body.psych-lesson-ui .lesson-send-answer-block .answer-form-inner > div > br {
        display: none !important;
    }

    /* File-size hint aligns with the field rather than the old narrow button */
    body.psych-lesson-ui .lesson-send-answer-block .text-muted.small {
        display: block !important;
        width: 100% !important;
        margin-top: 8px !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
    }
}

/* Center lesson content */
@media (max-width:767px){
body.psych-lesson-ui .psych-lesson-standard-page{
width:calc(100% - 24px) !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
float:none !important;
box-sizing:border-box !important;
}
body.psych-lesson-ui .psych-lesson-standard-page>.psych-lesson-native-page-header,
body.psych-lesson-ui .psych-lesson-standard-page>.psych-lesson-content,
body.psych-lesson-ui .psych-lesson-standard-page>.psych-lesson-hero{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
box-sizing:border-box !important;
}
}


/* REJECTED / NOT ACCEPTED ANSWER */
@media (max-width:767px) {
    body.psych-lesson-ui
    .psych-lesson-answer-card
    .answer-status-label.psych-answer-status-danger,
    body.psych-lesson-ui
    .psych-lesson-answer-card.status-declined
    .answer-status-label,
    body.psych-lesson-ui
    .psych-lesson-answer-card.status-not_accepted
    .answer-status-label,
    body.psych-lesson-ui
    .psych-lesson-answer-card.status-not-accepted
    .answer-status-label {
        background:#FEF3F2 !important;
        color:#B42318 !important;
        border:1px solid #FECDCA !important;
    }
}