/* Ensure html and body take 100% height and allow scrolling */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrollbar */
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* Ensure body is at least 100vh, but expands if content overflows */
}

/* Main container: allow content to overflow and cause scrolling */
.container {
    width: 1200px;
    max-width: 95%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    min-height: 100vh; /* KEY: Ensure container is at least 100vh, but expands if content overflows */
}

/* Editor/Preview container: flexible sizing */
.editor-preview-container {
    display: flex;
    justify-content: space-between;
    flex-grow: 1; /* Key: allow it to expand to fill available space */
    margin-bottom: 20px;
    /* REMOVED: height: calc(100vh - 200px); - This was a fixed height, now handled by flex-grow */
    /* REMOVED: overflow: hidden; -- This was preventing internal scrolling if not enough height */
}

/* Editor and Preview sections: 48% width on desktop, stack children vertically */
.editor-section, .preview-section {
    width: 48%; /* Desktop width */
    display: flex;
    flex-direction: column; /* Stack toolbar and content vertically */
    height: 100%; /* Fill the height of its parent .editor-preview-container */
    overflow: hidden; /* Prevent content overflow within these sections */
}

/* Toolbar styling */
.editor-toolbar, .preview-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    min-height: 42px; /* Ensure toolbar has minimum height */
}

/* Toolbar button styling */
.toolbar-btn {
    padding: 8px 12px;
    margin-right: 10px;
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s, transform 0.1s;
    font-size: 14px;
    display: flex;
    align-items: center;
    height: 32px; /* Fixed button height for consistent calculations */
}
.toolbar-btn:hover { background-color: #e3e3e3; }
.toolbar-btn:active { transform: translateY(1px); }
.toolbar-btn i { margin-right: 5px; }

/* Ensure actual editor and preview areas are fixed height relative to their parent sections */
#editor-container, #preview { /* #editor-container is the parent of CodeMirror */
    border: 1px solid #ccc;
    overflow: auto; /* KEY: Allow content scrolling within these areas */
    box-sizing: border-box;
    height: calc(100% - 42px); /* This makes the content area fixed and scrollable */
}

/* Group of buttons */
.button-group { margin-bottom:10px; }

/* General button styling */
button {
    margin-right:10px;
    padding:8px 12px;
    cursor: pointer;
    background-color: #f1f1f1;
    border:1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s;
}
button:hover { background-color: #e3e3e3; }

/* MathJax styling */
.MathJax { display: inline-block !important; max-width:100%; overflow-x: auto; }

/* Copyright information styling */
.copyright { text-align: center; margin-top:20px; font-size: 0.8em; color: #666; }

/* Notification styling */
.notification {
    position: fixed; top:20px; right: 20px; padding: 10px; border-radius:4px;
    color: white; font-weight: bold; z-index:1000; opacity: 0;
    transition: opacity 0.3s;
}
.notification.show { opacity:1; }
.notification.success { background-color: #4CAF50; }
.notification.error { background-color: #f44336; }
.notification.info { background-color: #2196F3; }

/* Preview content wrapper styling */
.preview-wrapper { width: 100%; height: 100%; overflow-y: auto; }
.preview-wrapper > * { max-width: 100%; word-wrap: break-word; }
.preview-wrapper img { max-width: 100%; height: auto; }

/* Preview area background */
#preview { background-color: #f9f9f9; }

/* Override HTML styles within preview to prevent layout interference */
.preview-wrapper body, .preview-wrapper html { margin: 0; padding: 0; max-width: none; width: auto; }
.preview-wrapper pre { white-space: pre-wrap; word-wrap: break-word; max-width: 100%; overflow-x: auto; }
.preview-wrapper table { display: block; width: 100%; overflow-x: auto; }
.preview-wrapper th, .preview-wrapper td { border: 1px solid #ddd; padding: 8px; word-wrap: break-word; }

/* TinyMCE related styling (remove if not used) */
.tox-tinymce { height: calc(100% - 40px) !important; }
.mce-content-body { font-size: 14px; line-height: 1.6; }

/* CodeMirror core styling: KEY! Force it to fill its parent container */
.CodeMirror {
    height: 100% !important; /* CodeMirror needs 100% height of its parent */
    min-height: 100px; /* A minimum height for insurance */
}

/* QR Code Area Styling */
.qr-codes-container {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 30px;
    margin-top: 20px; margin-bottom: 20px; padding: 10px 0;
    background-color: #f8f8f8; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.qr-code-item { text-align: center; padding: 15px; border-radius: 8px; width: 150px; flex-shrink: 0; }
.qr-code-item img {
    width: 120px; height: 120px; margin-bottom: 10px;
    display: block; margin-left: auto; margin-right: auto;
    border: 1px solid #eee; border-radius: 4px;
}
.qr-code-item p { font-size: 0.85em; color: #666; line-height: 1.5; margin: 0; }

/* Responsive design adjustments for <= 900px */
@media (max-width: 900px) {
    .container {
        width: 100%; max-width: 100%; padding: 10px;
        min-height: 100vh; /* Mobile also ensures at least 100vh, allowing content overflow */
    }
    .editor-preview-container {
        flex-direction: column; /* Mobile: editor and preview sections stack vertically */
        /* KEY: Ensure editor/preview area has a minimum height on mobile, even if top content is large */
        height: calc(100vh - 310px); /* This ensures it takes the available space above it */
        min-height: 300px; /* Fallback min-height for very small screens or complex content */
    }
    .editor-section, .preview-section {
        width: 100%; /* Mobile: fill full width */
        height: 100%; /* Fill the height of its parent .editor-preview-container (when one is visible) */
        margin-bottom: 0; /* Remove vertical margin between them as only one is shown */
    }
    .toolbar-btn { padding: 6px 10px; font-size: 12px; }
}

/* NEW: Styles for the global mobile toggle wrapper */
#mobile-view-toggle-wrapper {
    display: flex; /* Use flexbox to center the button */
    justify-content: center; /* Center horizontally */
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%; /* Take full width */
}
/* Hide the wrapper by default on desktop */
@media (min-width: 769px) {
    #mobile-view-toggle-wrapper {
        display: none;
    }
}

/* Responsive design adjustments for <= 768px (mobile specific) */
@media (max-width: 768px) {
    /* QR Code area adjustments */
    .qr-codes-container { flex-direction: column; align-items: center; gap: 15px; }
    .qr-code-item { width: 80%; max-width: 180px; padding: 10px; }
    .qr-code-item img { width: 100px; height: 100px; }

    /* Touch interaction optimization */
    .toolbar-btn:active { background-color: #d3d3d3; }

    /* Ensure CodeMirror occupies full height on mobile */
    .CodeMirror { height: 100% !important; }

    /* >>>>>>>>>>> CRITICAL FIX: REMOVE THE CONFLICTING !important STYLE HERE <<<<<<<<<< */
    /* This line was causing height issues by overriding calc() and flex. */
    /* REMOVED: #editor, #preview { height: 45vh !important; } */
}