/* ============================================
   EDITOR.CSS - Code Editor & Output Panel
   ============================================ */

/* ============================================
   UTILITIES
   ============================================ */
.hidden {
    display: none;
}

/* Initial hidden state for page containers and modals */
#pythonStatus,
#lessonsPage,
#mainContainer,
#coachPanelChallenge,
#reviewLessonBtn,
#speechBubble,
#idePage,
#aiTutorPage,
#gcsePage,
#lessonModal,
#adSpaceBox {
    display: none;
}

/* Ad space box specific styling */
#adSpaceBox {
    margin-top: 40px;
}

/* ============================================
   CODE EDITOR PANEL
   ============================================ */
.code-panel {
    background: var(--panel-bg);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* Restored to maintain rounded corners */
    box-shadow: var(--shadow-purple);
    /* position: relative removed - .editor-wrapper handles positioning */
}

.code-header {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    color: #1e293b;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #64748b;
}

.code-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.code-controls {
    display: flex;
    gap: 10px;
}

.control-btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--gradient-success);
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    transition: var(--transition-standard);
}

.control-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ============================================
   EDITOR WRAPPER - CONTAINER FOR EDITOR + OUTPUT
   ============================================ */
.editor-wrapper {
    position: relative; /* Positioning context (currently unused, but safe to keep) */
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* CRITICAL: Allow flex child to shrink */
    overflow: visible; /* Allow child elements to overflow if needed */
}

/* ============================================
   CODEMIRROR EDITOR
   ============================================ */
.editor-container {
    flex: 1 1 auto;
    min-height: var(--editor-min-height);
    position: relative; /* Positioning context for absolute CodeMirror AND celebration toast */
    overflow: visible; /* Allow celebration toast to be visible outside bounds */
}

/* Positioning context for celebration toast in challenges only */
#mainContainer .editor-container {
    position: relative;
}

.CodeMirror {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100% !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.CodeMirror-lines {
    padding: 4px 0 !important;
}

.CodeMirror pre {
    padding-left: 8px !important;
}

/* ============================================
   OUTPUT SECTION
   ============================================ */
.output-section {
    background: #0f172a;
    border-top: 2px solid rgba(139, 92, 246, 0.3);
    min-height: var(--output-min-height);
    max-height: var(--output-max-height);
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--user-output-height); /* User-controlled via resize handle, falls back to CSS default */
}

/* ============================================
   RESIZE HANDLE (Desktop Only)
   ============================================ */
.resize-handle {
    height: 12px;
    cursor: ns-resize;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Visual affordance: Three horizontal dots */
.resize-handle::after {
    content: '⋯';
    font-size: 20px;
    color: rgba(139, 92, 246, 0.5);
    letter-spacing: 2px;
    line-height: 1;
}

.resize-handle:hover::after {
    color: rgba(139, 92, 246, 0.8);
}

/* Active drag state */
.resize-handle.dragging::after {
    color: rgba(139, 92, 246, 1);
}

/* Utility class: Zero gap on desktop for resizable layouts */
@media (min-width: 1025px) {
    .resizable-layout {
        gap: 0 !important;
    }
}

.output-header {
    background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%);
    color: #134e4a;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #0d9488;
}

.clear-output-btn {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #0c4a6e;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition-standard);
}

.clear-output-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.05);
}

.output-display {
    flex: 1;
    padding: 14px;
    background: white;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
}

/* Subtle success animation for subsequent challenge completions */
@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   COACH PANEL
   ============================================ */
.coach-panel {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    overflow: visible; /* Allow speech bubble to extend above header */
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    box-shadow: var(--shadow-purple);
    max-height: 100%; /* Constrain to grid cell height */
}

/* Scrollable content area below the coach header */
.coach-panel-content {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0; /* Allow flex child to shrink for scrolling */
}

.coach-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 2px solid #ede9fe;
}

.coach-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.coach-info {
    flex: 1;
}

/* Challenge mode coach header - different layout with button on left */
#coachPanelChallenge .coach-header {
    justify-content: space-between;
}

#coachPanelChallenge .coach-info {
    text-align: right;
}

.coach-header-flex {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

/* Coach avatar image (used in challenge mode) */
.coach-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}

.coach-name {
    font-weight: 600;
    font-size: 17px;
    color: #5b21b6;
}

.coach-status {
    font-size: 16px;
    color: #64748b;
}

.lesson-objective {
    background: var(--challenge-objective-bg);
    border-left: 4px solid var(--challenge-objective-border);
    padding: 14px;
    border-radius: var(--radius-sm);
}

.lesson-objective h3,
.lesson-objective h4 {
    font-size: 16px;
    color: var(--challenge-objective-heading);
    margin-bottom: 8px;
    font-weight: 600;
}

.lesson-objective p,
.lesson-objective li {
    font-size: 17px;
    color: var(--challenge-text);
}

.lesson-objective ul {
    padding-left: 20px;
    margin-left: 0;
}

.hints-section h4 {
    font-size: 16px;
    color: var(--challenge-text);
    margin-bottom: 10px;
    font-weight: 600;
}

.hint-btn {
    padding: 10px 16px;
    margin: 6px 6px 6px 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--challenge-hint-border);
    background: var(--challenge-hint-bg);
    color: var(--challenge-hint-text);
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
    transition: var(--transition-standard);
}

.hint-btn:hover {
    background: var(--challenge-hint-hover);
    transform: scale(1.05);
}

/* Nudge pulse: draws attention to the Review Lesson button when Hint 1 is first requested */
@keyframes nudgePulse {
    0%   { background: var(--challenge-hint-hover); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
    25%  { background: #7c3aed;                     box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.4); }
    50%  { background: var(--challenge-hint-hover); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
    75%  { background: #7c3aed;                     box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.4); }
    100% { background: var(--challenge-hint-hover); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

.nudge-pulse {
    animation: nudgePulse 1.2s ease-in-out 3;
}

.hint-btn.hint-locked {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* ============================================
   SPEECH BUBBLE
   ============================================ */
.speech-bubble {
    position: absolute;
    top: 0; /* Align top edge with top of coach container */
    right: calc(100% + 15px); /* Push entirely to the left of the coach container */
    background: white;
    border: 2px solid #8b5cf6;
    border-radius: 14px;
    padding: 16px 18px;
    font-size: 17px;
    line-height: 1.6;
    width: max-content;
    max-width: min(550px, 70vw); /* wider budget so solution code fits without wrapping */
    min-width: 200px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-height: 60vh;    /* never overflow past 60% of the viewport height */
    overflow-y: auto;    /* vertical scroll when content exceeds max-height */
    overflow-x: hidden;  /* suppress outer horizontal scrollbar — inner .hint-code owns x-scroll */
    box-shadow: var(--shadow-purple-lg);
    animation: popIn 0.3s ease-out;
    z-index: 9999;
}

/* Outer arrow (border color) — points right towards the Coach's face */
.speech-bubble::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #8b5cf6;
}

/* Inner arrow (fill color) — sits on top of outer arrow for border effect */
.speech-bubble::before {
    content: '';
    position: absolute;
    right: -7px;
    top: 21px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid white;
    z-index: 1;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: translateX(-20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.speech-bubble.success {
    background: #dcfce7;
    border-color: #10b981;
}

.speech-bubble.success::after {
    border-left-color: #10b981;
}

.speech-bubble.success::before {
    border-left-color: #dcfce7;
}

/* ============================================
   CODE SNIPPETS IN HINTS
   ============================================ */
.hint-code {
    display: block;
    background: #1e293b;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 16px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-top: 10px;
    border-left: 3px solid #8b5cf6;
    white-space: pre;
    max-width: 100%;     /* constrain to bubble width before scroll threshold is reached */
    overflow-x: auto;    /* horizontal scroll only when the code line truly overflows */
}

.success-criteria {
    background: var(--challenge-success-bg);
    padding: 14px;
    border-radius: var(--radius-sm);
}

.success-criteria h4 {
    font-size: 16px;
    color: var(--challenge-text);
    margin-bottom: 10px;
    font-weight: 600;
}

.criterion {
    font-size: 16px;
    padding: 6px 0;
    color: #64748b;
}

.criterion.pass {
    color: #10b981;
    font-weight: 500;
}

.criterion.fail {
    color: #ef4444;
    font-weight: 500;
}

.check-btn {
    width: 100%;
    padding: 12px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    font-size: 17px;
    transition: var(--transition-standard);
}

.check-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-purple-lg);
}

/* ============================================
   AI CHAT PANEL
   ============================================ */
.ai-chat-panel {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: none;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-purple);
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    background: #f9fafb;
    border-radius: 10px;
}

.ai-message {
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 14px;
    max-width: 90%;
    font-size: 17px;
    line-height: 1.6;
}

.ai-message.user {
    background: var(--gradient-primary);
    color: white;
    margin-left: auto;
}

.ai-message.assistant {
    background: white;
    border: 1px solid #e5e7eb;
}

.ai-input-area {
    display: flex;
    gap: 10px;
}

.ai-input {
    flex: 1;
    padding: 12px;
    border: 2px solid #ede9fe;
    border-radius: 10px;
    font-size: 17px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    resize: none;
    min-height: 44px;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.5;
}

.ai-send-btn {
    padding: 12px 24px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 17px;
}

/* ============================================
   THINKING ANIMATION
   ============================================ */
.ai-thinking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 14px;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.thinking-avatar {
    font-size: 18px;
    animation: pulse 1.5s ease-in-out infinite;
}

.thinking-text {
    color: #8b5cf6;
    font-size: 16px;
    font-weight: 500;
}

.thinking-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

@keyframes pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* ============================================
   IDE MODE LAYOUT - 2-COLUMN WORKSTATION
   ============================================ */

/* IDE WORKSTATION GRID: 2-Column Full Viewport (Matches Challenge Mode Layout)
   ┌─────────────────┬─────────┐
   │     EDITOR      │  NOTES  │
   │     (60%)       │ (400px) │
   │                 │         │
   ├─────────────────┤         │
   │     OUTPUT      │         │
   │     (40%)       │         │
   └─────────────────┴─────────┘

   Layout matches Challenge mode:
   - Padding: 90px top, 30px sides, 30px bottom
   - Column gap: 24px (between editor and notes)
   - Notes panel: 400px (matches Coach panel width)
*/
.ide-workstation-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-template-areas: "center notes";
    column-gap: 24px;  /* FIXED: Match Challenge mode 24px gap */
    height: 100vh;  /* Full viewport - padding is inside with box-sizing: border-box */
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    padding-top: 90px;  /* FIXED: Match Challenge mode 60px header + 30px spacing */
    padding-right: 30px;  /* FIXED: Match Challenge mode side padding */
    padding-bottom: 30px;  /* FIXED: Match Challenge mode bottom padding */
    padding-left: 30px;  /* FIXED: Match Challenge mode side padding */
    /* No background - let body gradient show through like Challenge mode */
}

/* ============================================
   LEFT: EDITOR + OUTPUT COLUMN (60/40)
   ============================================ */
.ide-center-column {
    grid-area: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--panel-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-purple);
}

/* EDITOR PANE: Top 60% */
.ide-center-column .ide-editor-pane {
    flex: 3;  /* 60% (3:2 ratio) */
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}

/* OUTPUT PANE: Bottom 40% */
.ide-center-column .ide-output-pane {
    flex: 2;  /* 40% (3:2 ratio) */
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #0f172a;
    overflow-y: auto;
}

/* SPECIFICITY OVERRIDES (0-3-0): Unlock panes when resizer is active.
   The base rules above (0-2-0) hard-lock flex ratios and block the JS
   --user-output-height variable. These higher-specificity rules take over
   once JS adds .resizable-layout to .ide-center-column. */
.ide-center-column.resizable-layout .ide-editor-pane {
    flex: 1 1 auto;
}

.ide-center-column.resizable-layout .ide-output-pane {
    flex: 0 0 var(--user-output-height);
}

/* Make textarea fill editor pane */
.ide-center-column .ide-editor-pane .editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ide-center-column .ide-editor-pane #codeEditorIDE {
    flex: 1;
    min-height: 0;
    resize: none;
}

/* Output display fills output pane */
.ide-center-column .ide-output-pane .output-display {
    flex: 1;
    overflow-y: auto;
}

/* ============================================
   RIGHT: IDE NOTES DOCKED PANE (400px)
   ============================================ */
.ide-notes-pane {
    grid-area: notes;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-purple);
    overflow-y: auto;
    padding: 20px;
    height: 100%;
}

.ide-notes-pane .panel-header {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
    margin-bottom: 16px;
}

.ide-notes-pane .panel-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.ide-notes-pane .panel-content {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ============================================
   RESPONSIVE: MOBILE/TABLET
   ============================================ */
@media (max-width: 1024px) {
    .ide-workstation-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "center"
            "notes";
        height: auto;
        min-height: 100vh;
        /* FIX: Release the desktop overflow:hidden trap so touch-scroll events
           can reach the body scroll container. Without this, iOS swallows
           every swipe gesture at the grid level and the page freezes. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
        /* FIX (Bug 2): Navbar clearance moves to .ide-page-grid on mobile.
           Desktop: .ide-page-grid has padding-top:0, this grid carries 90px.
           Mobile:  .ide-page-grid carries 80px, this grid must not double-add. */
        padding-top: 0;
    }

    .ide-center-column {
        min-height: 70vh;
    }

    /* FIX (Bug 1): On desktop, .ide-output-pane is constrained to ~40% of a
       fixed-height grid cell, so overflow-y:auto provides useful independent
       scroll. On mobile, the parent grid becomes height:auto and the pane can
       grow naturally — its overflow-y:auto creates a second scroll context
       alongside the parent grid's scroll, producing the double scrollbar.
       Setting visible collapses it into the single page-level scroll. */
    .ide-center-column .ide-output-pane {
        overflow-y: visible;
    }

    .ide-notes-pane {
        min-height: 300px;
        /* FIX (Bug 1): Same root cause as .ide-output-pane above.
           height:auto releases the desktop height:100% constraint so the pane
           expands to content rather than creating a bounded scroll context. */
        overflow-y: visible;
        height: auto;
    }
}

/* Reduce padding on smaller viewports to maximize space (matches Challenge mode) */
@media (max-height: 750px) {
    .ide-workstation-grid {
        padding: var(--container-padding-top-tablet) var(--container-padding-tablet) var(--container-padding-tablet) var(--container-padding-tablet);
        height: 100vh;  /* Padding is inside with box-sizing: border-box */
    }
}

@media (max-height: 650px) {
    .ide-workstation-grid {
        padding: var(--container-padding-top-mobile) var(--container-padding-mobile) var(--container-padding-mobile) var(--container-padding-mobile);
        height: 100vh;  /* Padding is inside with box-sizing: border-box */
    }
}

.output-panel {
    background: var(--panel-bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    min-height: 200px;
    box-shadow: var(--shadow-purple);
}

.output-panel .output-header {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

/* ============================================
   CHALLENGE MODE LAYOUT (mainContainer)
   ============================================ */

/* Challenge mode: fill viewport and stretch panels */
#mainContainer.container {
    padding-top: 90px; /* 60px fixed header + 30px spacing */
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    grid-template-columns: 1fr var(--coach-column-width); /* 2-column: Editor + Coach */
    column-gap: 24px; /* 24px gap between IDE and Coach panels */
    flex-grow: 1; /* Fill remaining vertical space in body flex container */
    align-items: stretch; /* Stretch grid items vertically */
    grid-template-rows: 1fr; /* Single row for panels only */
    grid-template-areas: "editor coach"; /* 2-column layout: no sidebar */
    min-height: 0; /* Allow flex item to shrink below content size */
    overflow: hidden; /* Prevent child overflow from causing body scrollbar */
}

/* Hide the header grid area in Challenge Mode */
#mainContainer .header {
    display: none;
}

/* Reduce padding on smaller viewports to maximize space for editor + output */
@media (max-height: 750px) {
    :root {
        --container-padding: var(--container-padding-tablet);
        --container-padding-top: var(--container-padding-top-tablet);
        /* Header is position:fixed, doesn't occupy layout space */
        --available-height: calc(100vh - var(--container-padding-top-tablet) - var(--container-padding-tablet));
    }

    #mainContainer.container {
        padding: var(--container-padding-top-tablet) var(--container-padding-tablet) var(--container-padding-tablet) var(--container-padding-tablet);
    }
}

@media (max-height: 650px) {
    :root {
        --container-padding: var(--container-padding-mobile);
        --container-padding-top: var(--container-padding-top-mobile);
        /* Header is position:fixed, doesn't occupy layout space */
        --available-height: calc(100vh - var(--container-padding-top-mobile) - var(--container-padding-mobile));
    }

    #mainContainer.container {
        padding: var(--container-padding-top-mobile) var(--container-padding-mobile) var(--container-padding-mobile) var(--container-padding-mobile);
    }
}

/* Make code panel fill grid cell height in Challenge mode */
#mainContainer .code-panel {
    height: 100%;
    max-height: var(--available-height);
    min-height: var(--code-panel-min-desktop);
}

/* Make coach panel scrollable and constrained to viewport height */
#mainContainer .coach-panel {
    max-height: var(--available-height);
}

/* For smaller viewports, reduce min-height to allow output to show */
@media (max-height: 750px) {
    #mainContainer .code-panel {
        min-height: var(--code-panel-min-tablet);
    }
}

@media (max-height: 650px) {
    #mainContainer .code-panel {
        min-height: var(--code-panel-min-mobile);
    }
}

/* ============================================
   MAIN CONTAINER - CSS GRID SKELETON
   ============================================
   ARCHITECTURAL RESET - Phase 1: Systemic Grid Architecture
   - Root-level CSS Grid with mandatory blueprint
   - Eliminates ALL JS layout recalculations
   - Browser-native responsive design
   ============================================ */

.container {
    display: grid;
    gap: 20px;
    padding: 30px;
}

/* DESKTOP LAYOUT (>768px): Mandatory Blueprint */
@media (min-width: 769px) {
    .container {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "header header header"
            "sidebar editor coach";
    }

    .container .header {
        grid-area: header;
    }

    .sidebar {
        grid-area: sidebar;
    }

    .code-panel {
        grid-area: editor;
    }

    .coach-panel,
    .ai-chat-panel {
        grid-area: coach;
        width: var(--coach-column-width, 400px);
    }

    /* Remove ads from grid system - position outside grid or hide */
    .ad-column {
        display: none;
    }
}

/* MOBILE LAYOUT (<768px): Mandatory Stack Order */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "editor"
            "sidebar"
            "coach";
        height: auto;
        max-height: none;
        overflow-y: visible;
        padding: 20px;
    }

    /* Challenge Mode mobile: No sidebar
       SPECIFICITY FIX: #mainContainer.container (1-1-0) beats .container (0-1-0),
       so all mobile layout overrides must live here to win against the base rule. */
    #mainContainer.container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "editor"
            "coach";
        height: auto;
        max-height: none;
        overflow: visible;
        padding: 20px;
    }

    .container .header {
        grid-area: header;
    }

    .sidebar {
        grid-area: sidebar;
    }

    .code-panel {
        grid-area: editor;
        height: auto;
        min-height: 50vh;
        max-height: none;
        display: flex;
        flex-direction: column;
    }

    .coach-panel,
    .ai-chat-panel {
        grid-area: coach;
        height: auto;
        min-height: 30vh;
        max-height: none;
        overflow-y: visible;
    }

    /* Remove ads from grid system */
    .ad-column {
        display: none;
    }

    /* Editor wrapper and container sizing */
    .editor-wrapper {
        flex: 1 0 350px;
        min-height: 350px;
    }

    .editor-container {
        display: flex;
        flex-direction: column;
        flex: 1 0 300px;
        min-height: 300px;
    }

    /* Override user's desktop resize preference - use default on mobile */
    .output-section {
        flex: 0 0 auto;
        height: var(--output-default-height);
        max-height: var(--output-default-height);
    }

    /* Hide resize handle - not applicable in stacked layout */
    .resize-handle {
        display: none;
    }

    /* Ensure CodeMirror fills editor-container */
    .CodeMirror {
        position: static !important;
        flex: 1 1 auto;
        min-height: 250px;
        height: auto !important;
    }
}

/* ============================================
   PORTRAIT PANEL ORDERING (JS-CONTROLLED)
   Triggered by JavaScript (layout-state.js) adding 'force-portrait' to body
   when window.innerHeight >= window.innerWidth, for viewports < 1024px.

   PURPOSE (after CSS specificity fix):
   The @media (max-width: 768px) rules above now handle all layout stacking.
   These rules exist solely to reorder panels so challenge instructions
   appear ABOVE the code editor in portrait mode — a deliberate UX choice.
   ============================================ */

/* VISUAL REORDERING: Coach Panel (Instructions) appears first */
body.force-portrait #mainContainer .coach-panel {
    order: -1;
    height: auto;
    min-height: 30vh;
    max-height: none;
    overflow-y: visible;
    flex: 0 0 auto; /* flex-shrink: 0 prevents crushing */
}

/* Code Panel (Editor + Output) appears second */
body.force-portrait #mainContainer .code-panel {
    order: 2;
    height: auto;
    min-height: 50vh;
    max-height: none;
}

/* ============================================
   AI TUTOR MODE - IDE COLUMN
   ============================================ */
/* IDE column in AI Tutor fills height */
.ai-tutor-grid .code-panel-ai-tutor {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 20px;
}

.ai-tutor-grid .code-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ai-tutor-grid .CodeMirror {
    flex: 1;
    min-height: 0;
    height: auto !important; /* Override CodeMirror's inline height */
}

.ai-tutor-grid .output-section {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--user-output-height); /* Match base output-section sizing for consistency */
    min-height: var(--output-min-height);
    max-height: var(--output-max-height);
}

.ai-tutor-grid .output-display {
    flex: 1;
    overflow-y: auto;
}

/* ============================================
   MOBILE TAB BAR
   Hidden on desktop, shown on mobile via media query
   ============================================ */
.mobile-tab-bar {
    display: none;
}

/* ============================================
   MOBILE CHALLENGE VIEW (768px)
   Switch challenge grid from CSS Grid to flex column
   and show the bottom tab bar for Task/Code/Output
   ============================================ */
@media (max-width: 768px) {
    /* Disable grid, use flex column so editor is not squashed */
    .challenge-grid {
        display: flex;
        flex-direction: column;
    }

    /* Fixed bottom tab bar for switching between Task, Code, Output */
    .mobile-tab-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #1f2937;
        border-top: 2px solid rgba(139, 92, 246, 0.4);
        padding: 0;
        margin: 0;
    }

    .mobile-tab-btn {
        flex: 1;
        padding: 12px 0;
        background: none;
        border: none;
        color: #94a3b8;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: color 0.2s, background 0.2s;
    }

    .mobile-tab-btn:hover,
    .mobile-tab-btn.active {
        color: #fff;
        background: rgba(139, 92, 246, 0.2);
    }
}