.CodeMirror {
    height: 100% !important;
    flex-grow: 1;
    font-size: 14px;
    line-height: 1.5;
    background-color: var(--editor-bg) !important; /* Use your dark theme variable */
    color: var(--text-color); /* Use your theme text color */
}

        .CodeMirror-focused {
            border-color: var(--accent-color); /* Highlight border when focused */
            box-shadow: 0 0 5px rgba(255, 117, 130, 0.3);
        }

        .CodeMirror-gutters {
            background: #f5f5f5; /* Background for line number area */
            border-right: 1px solid #ddd;
            min-width: 40px;       /* Set a minimum instead of fixed width */
        }

        .CodeMirror-lines {
            padding-left: 20px; /* Push text away from line numbers */

            /* This allows the editor to scroll far beyond the last line of code */
	    padding-bottom: 15vh !important; /* Uses 15% of their screen instead of a fixed 300px */
        }

        .CodeMirror-linenumber {
            color: var(--text-color) !important;
        }

        :root:not(.light-mode) .CodeMirror-gutters {
            background-color: var(--card-bg) !important;
            border-right: 1px solid var(--tertiary-color) !important;
        }

        :root:not(.light-mode) .CodeMirror-linenumber {
            color: var(--text-muted) !important;
        }

        .CodeMirror pre {
            padding-left: 120px !important; /* Pushes code to the right to avoid overlap */
        }


/* 1. Remove the 85vh limit - Let it fill the Pane */
#guestEditorContainer {
    display: flex;
    flex-direction: column;
    height: 100%;     /* FIX: Fill the entire height of the left/right pane */
    width: 100%;
    overflow: hidden; 
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--editor-bg);
}	

/* Add padding to editor content below the panel header */
#guestEditorContainer #guestFileTabsRow,
#guestEditorContainer #editorOutputWrapper {
    padding-left: 10px;
    padding-right: 10px;
}

/* 1. Clean up the shared wrapper - Remove the fixed padding-bottom */
#guestEditorContainer #editorOutputWrapper {
    padding-bottom: 0; /* Changed from 10px to 0 */
    background-color: var(--editor-bg); /* Ensure the wrapper matches your theme */
}

.editor-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Add spacing between buttons */
.editor-header .editor-icon-btn {
  margin-right: 6px;  /* space between icons */
}

.editor-header .editor-icon-btn:last-child {
  margin-right: 0;   /* avoid extra space after last one */
}

#editorOutputWrapper button,
#guestFileTabsRow button {
    background-color: var(--button-bg);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}

#editorOutputWrapper button:hover,
#guestFileTabsRow button:hover {
    background-color: var(--button-hover);
}

/* 2. The Inner Wrapper: Ensure it fills the container completely */
#editorOutputWrapper {
    display: flex;
    flex-direction: column;
    flex: 1;          
    overflow: hidden; 
    background-color: var(--editor-bg); /* Use the DARK bg here to avoid white gaps */
}

/* 2. The Editor: Use height, not flex-basis, to allow JS to work */
#editorWrapper {
    height: 50%;      /* Starting height */
    flex: none;       /* FIX: Tells flexbox "don't calculate me, just use my height" */
    display: flex;
    flex-direction: column;
    min-height: 100px;
    overflow: hidden;
    position: relative;
    background-color: var(--editor-bg);
}

/* 2. Ensure the output stretches to the bottom edge */
#outputWrapper {
    flex: 1;          
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 100px;
    background-color: var(--card-bg);
    margin-bottom: 0; /* FIX: Ensure no margin at the bottom */
}

#guestEditor {
    width: 100%;
    height: 100%; /* fill wrapper */
    padding: 10px;
    border: 1px solid var(--border-color);
    resize: none;
    box-sizing: border-box;
}

/* 4. The Code Output: Ensure the text area fills the wrapper */
#codeOutput {
    flex: 1;
    margin: 0;
    padding: 10px;
    overflow-y: auto;
    background-color: var(--card-bg);
    color: var(--text-color);
    border: none;
    font-family: 'JetBrains Mono', monospace;
}

#rowResizer {
    height: 8px;
    flex: 0 0 8px;
    background: #eee;
    cursor: ns-resize; /* North-South resize cursor */
    z-index: 100 !important; /* Ensure it's above the editor layers */
    position: relative;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

#rowResizer:hover {
    background: #c56c86; /* Your brand pink on hover */
}

.editor-icon-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.2s;
}

.editor-icon-btn i {
  font-size: 14px; /* smaller icon */
}

.editor-icon-btn:hover {
  background: #e0e0e0; /* light gray hover on light backgrounds */
}

.panel-header,
#guestFileTabsRow {
    flex: 0 0 auto;
    background-color: var(--editor-bg); /* FIX: Use variable instead of hardcoded white */
    z-index: 10;
}

/* When editor-icon-btn is inside a panel-header, use white icons */
.panel-header .editor-icon-btn {
  color: rgba(255, 255, 255, 0.8) !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 6px !important;
}
.panel-header .editor-icon-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Override the fa-play color rules when inside panel header */
.panel-header .editor-icon-btn .fa-play {
  color: rgba(255, 255, 255, 0.8) !important;
}
.panel-header .editor-icon-btn:hover .fa-play {
  color: #fff !important;
}
.panel-header .editor-icon-btn.btn-multi .fa-play {
  color: #f6b133 !important;
}

.panel-header #guestLanguageLabel {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12px !important;
  margin-right: 4px;
  font-weight: normal !important;
}

/* Standard Run Button */
#guestEditorContainer .editor-icon-btn .fa-play {
    color: #3aa0ff !important;
}

/* Multi-File Button Icon (Blue) */
/* This targets the icon INSIDE the multi button to override the green above */
#guestEditorContainer .editor-icon-btn.btn-multi .fa-play {
    color: #f6b133 !important;
}

#guestLanguageLabel {
    display: inline-block;
    font-weight: bold;
    margin-right: 10px;
    font-size: 0.9rem;
    color: var(--text-color);
}

@media (max-width: 768px) {
    .CodeMirror {
        height: 100% !important;
        max-height: 100%;
    }

    #editorOutputWrapper {
        flex: 1;
        height: auto;
        min-height: 0;
    }

    #editorWrapper {
        flex: 1;
        height: auto;
        min-height: 0;
    }

    #outputWrapper {
        min-height: 160px;
    }
}

/* Table Headers */
.file-selection-header {
    display: flex;
    padding: 10px;
    font-weight: bold;
    background: var(--editor-bg);
    border-bottom: 2px solid var(--tertiary-color);
    color: var(--text-color);
}

.file-selection-row {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--tertiary-color);
    transition: all 0.2s ease;
    background: var(--card-bg);
    color: var(--text-color);
}

/* Column Widths */
.col-include { width: 80px; text-align: center; }
.col-filename { flex: 1; font-family: 'JetBrains Mono', monospace; padding-left: 10px; }
.col-main { width: 100px; text-align: center; position: relative; }

/* Highlight Row */
.file-selection-row.is-main {
    background-color: rgba(197, 108, 134, 0.1);
    border-left: 4px solid var(--secondary-color);
}

/* Primary Indicator */
.file-selection-row.is-main .col-main::after {
    content: "MAIN";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    background: var(--secondary-color);
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
}

.file-selection-row:hover {
    background-color: #f9f9f9;
}

.file-name-label {
    flex-grow: 1;
    margin: 0 15px;
    font-family: monospace;
}

#guestFileTabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden; /* Prevent vertical scrolling */
    /* Optional: Hide scrollbar in Chrome/Safari/Webkit for a cleaner look */
    scrollbar-width: none; /* Firefox */
    padding-left: 15px; /* small offset from left edge */
}

#guestFileTabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

#guestFileTabsRow {
    background: var(--editor-bg); /* Match the editor's header background */
    padding-bottom: 0; /* Tabs should sit flush against the border */
    overflow-y: hidden; /* Prevent vertical scrollbar here */
    border-bottom: 1px solid var(--editor-border, #ccc);
    pointer-events: auto;
}

.guest-file-tab {
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s ease;
    
    /* Inactive State */
    background: rgba(0, 0, 0, 0.05); 
    color: var(--text-muted, #888);
    opacity: 0.8;
}

.guest-file-tab:first-child {
    margin-left: 4px; /* extra spacing */
    border-radius: 6px 6px 0 0;
}

/* Hover effect for inactive tabs */
.guest-file-tab:hover:not(.active) {
    background: rgba(0, 0, 0, 0.1);
    opacity: 1;
}

/* Active State */
.guest-file-tab.active {
    background: var(--editor-bg); /* Makes it look like it's part of the editor */
    color: var(--accent, #00a1d6); /* Use your primary accent color */
    font-weight: 700;
    opacity: 1;
    border: 1px solid var(--editor-border, #ccc);
    border-bottom: 2px solid var(--accent, #00a1d6); /* Bright underline */
    
    /* Subtle lift effect */
    position: relative;
    z-index: 2; 
    margin-bottom: -1px; /* Overlaps the row's bottom border */
}

/* Overlay background */
.multiFile-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.multiFile-modal-content {
  background: #fff;
  color: var(--text-color, #222);
  padding: 30px;
  border-radius: 16px;
  width: 90%;   /* much larger */
  max-height: 90%;
  overflow-y: auto;
  position: relative;
}

/* Add spacing under the modal title */
.multiFile-modal-content h3 {
    margin-bottom: 16px;
}

/* Pretty Buttons with Icons */
.multiFile-modal .modal-actions button {
    font-weight: 500;
    letter-spacing: 0.3px;
}

.multiFile-modal .modal-actions .btn-run {
    background: var(--button-bg); !important;
    color: white !important;
}

.multiFile-modal .modal-actions .btn-cancel {
    background: var(--button-bg); !important;
    color: white !important;
}

/* Ensure the active line highlight is visible even when read-only */
.CodeMirror-activeline-background {
    background: rgba(255, 117, 130, 0.1) !important;
}

.cm-url {
    color: #2196F3 !important;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Namespaced Snippet Copy Buttons for Guest Page --- */
.pa-guest-snippet-wrapper {
    position: relative;
    margin: 1.5rem 0;
}

.pa-guest-snippet-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    font-size: 11px;
    color: #57606a;
    background-color: #f6f8fa;
    border: 1px solid rgba(27, 31, 36, 0.15);
    border-radius: 6px;
    cursor: pointer;
    z-index: 10;
    font-family: sans-serif;
    transition: all 0.2s;
}

.pa-guest-snippet-copy-btn:hover {
    background-color: #f3f4f6;
    color: #c56c86; /* Match your brand pink */
}

.pa-guest-snippet-copy-btn.pa-guest-copy-success {
    color: #1a7f37;
    border-color: #1a7f37;
    background-color: #f0fff4;
}

/* 3. The Markdown Gap - This handles your "preview mode space" requirement */
#markdownPreview {
    flex: 1;
    overflow-y: auto;
    font-size: 18px;
    line-height: 1.7 !important;
    padding: 2.5rem;
    
    /* THE FIX: This creates the "blank space" INSIDE the scroll area.
       The container reaches the bottom of the screen, but the text 
       can't go further than halfway down. */
    padding-bottom: 50vh !important; 
    
    background: white; 
    box-sizing: border-box;
}

#markdownPreview pre.line-numbers {
    padding: 0 !important;
    padding-left: 3.8em !important; /* Space for numbers */
    position: relative;
    background: #282c34 !important; /* Match your dark theme */
    border-radius: 10px;
    line-height: 1.7 !important;
    margin: 1.5rem 0;
}

#markdownPreview pre.line-numbers code {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    display: block !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-family: 'Consolas', 'Monaco', 'Ubuntu Mono', monospace !important;
}

/* Align the gutter rows */
#markdownPreview .line-numbers-rows {
    top: 0 !important;
    padding-top: 16px !important; /* Matches code padding-top */
    border-right: 1px solid #4b5263 !important;
    line-height: 1.7 !important;
}

#markdownPreview .line-numbers-rows > span:before {
    line-height: 1.7 !important;
    font-family: 'Consolas', 'Monaco', 'Ubuntu Mono', monospace !important;
    font-size: 16px !important;
}

/* --- Pretty Markdown Styles for Guest Preview --- */

/* Horizontal Rule (---) */
#markdownPreview hr {
    height: 3px;
    background-color: #c56c86;
    border: none;
    margin: 2rem 0;
    opacity: 1;
}

/* Blockquote Styling (This creates the pink vertical bar) */
#markdownPreview blockquote {
    border-left: 4px solid #c56c86 !important;
    background: #fff5f7 !important; /* Very light pink tint */
    padding: 1rem 1.25rem;
    font-style: normal;
    color: #555;
    margin: 1.5rem 0;
}

/* The pink "**Question**" text inside blockquotes */
#markdownPreview blockquote strong:first-child {
    color: #c56c86;
    display: block;
    margin-bottom: 0.25rem;
}

/* List Styling */
#markdownPreview ul,
#markdownPreview ol {
    padding-left: 2rem !important;
    margin-bottom: 1rem;
    display: block !important;
}

#markdownPreview ul {
    list-style-type: disc !important;
}

#markdownPreview ol {
    list-style-type: decimal !important;
}

#markdownPreview li {
    display: list-item !important;
    margin-bottom: 0.25rem;
    line-height: 1.6;
}

/* Link Styling */
#markdownPreview a {
    color: #c56c86;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Table Styling */
/* 1. Base Table Style (The "Odd" and Default state) */
#markdownPreview table {
    background-color: white !important;
    color: #24292e !important;
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
}

/* 2. All Cells (This is your 'Odd' row definition by default) */
#markdownPreview table th,
#markdownPreview table td {
    border: 1px solid #dfe2e5;
    padding: 8px 12px;
    background-color: white !important; /* Forces Odd rows to be white */
    color: #24292e !important;          /* Forces text to stay dark */
}

/* 3. Even Rows (Zebra Striping) */
#markdownPreview table tr:nth-child(even) td {
    background-color: #f6f8fa !important; /* Slightly grey for contrast */
}

/* 4. Header Row */
#markdownPreview table th {
    background-color: #f6f8fa !important;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid #dfe2e5;
}

/* Guest Header Accents - Matching Host (No automatic underline) */
#markdownPreview h1 {
    padding-bottom: 0.3em;
    margin-bottom: 1rem;
    font-size: 2rem; /* Optional: Ensure H1 stays prominent */
    color: #24292e;
}

#markdownPreview h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #24292e;
}

#markdownPreview a[target="_blank"]::after {
    content: "\f35d"; /* FontAwesome external-link-alt icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    margin-left: 5px;
    vertical-align: super;
    opacity: 0.7;
}

/* 5. The Argument Group: Keep it compact */
.arg-group {
    flex: 0 0 auto;
    padding: 8px 10px;
    background-color: var(--card-bg);
    border-top: 1px solid var(--border-color);
}

/* The background color for highlighted lines */
.cm-highlight {
    background: rgba(255, 255, 0, 0.3) !important; /* Semi-transparent yellow */
    border-left: 3px solid gold;
}