/* Glassmorphism effect taken from index.html */

.glass-card {

    background: rgba(30, 41, 59, 0.7);

    backdrop-filter: blur(12px);

}



/* Container dynamic sizing */

.container {

    width: 100%;

    max-width: 900px;

}

.container.wide-mode {

    max-width: 1200px;

}



/* Workspace Layout (Toggle side-by-side) */

#main-workspace {

    display: flex;

    flex-direction: column;

    gap: 24px;

    margin-top: 15px;

}

#main-workspace.layout-side {

    flex-direction: row;

}
/* --- Debugging Breakpoint Highlight --- */
.CodeMirror .debug-line {
    background-color: rgba(99, 102, 241, 0.4) !important;
    /* Box-shadow draws an inner border without messing up CodeMirror's line heights! */
    box-shadow: inset 0 0 0 1.5px rgba(99, 102, 241, 0.9) !important;
    z-index: 10 !important;
}
/* --- Draggable Resizer Styles --- */
/* Tighter gap when side-by-side so the resizer fits perfectly */
#main-workspace.layout-side {
    gap: 8px; 
}

.resizer {
    display: none; /* Hidden by default in stacked mode */
    align-items: center;
    justify-content: center;
    width: 16px;
    cursor: col-resize;
    z-index: 10;
}

/* Only show the resizer in side-by-side mode */
#main-workspace.layout-side .resizer {
    display: flex; 
}

/* The visible pill-shaped handle inside the resizer */
.resizer-handle {
    width: 4px;
    height: 40px;
    background-color: rgba(100, 116, 139, 0.6); /* slate-500 */
    border-radius: 4px;
    transition: background-color 0.2s, transform 0.2s;
}

/* Hover and Dragging effects */
.resizer:hover .resizer-handle, 
.resizer.dragging .resizer-handle {
    background-color: rgba(99, 102, 241, 0.9); /* Indigo highlight */
    transform: scaleX(1.5);
}

/* Prevents code highlighting/blue selection blocks while dragging */
body.no-select {
    user-select: none;
}

/* Pane sizing */

.editor-pane, .output-pane {

    flex: 1;

    display: flex;

    flex-direction: column;

    min-width: 0;

}



/* --- PIXEL-PERFECT ALIGNMENT FIX --- */

.CodeMirror, #output {

    box-sizing: border-box !important;

    height: 380px !important;

    margin: 0 !important;

    background: transparent !important; 

}



/* Make CodeMirror blend with our modern theme better */

.CodeMirror {

    background-color: rgba(15, 23, 42, 0.4) !important;

    font-family: 'Consolas', 'Monaco', monospace;

}

.CodeMirror-gutters {

    background-color: rgba(30, 41, 59, 0.6) !important;

    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;

}



/* Make both boxes identically taller when in side-by-side mode */

#main-workspace.layout-side .CodeMirror, 

#main-workspace.layout-side #output {

    height: 550px !important; 

}



/* Output Area (Console) */

#output {

    color: #e2e8f0;

    overflow-y: auto;

    overflow-x: auto;

    white-space: pre-wrap;

    word-wrap: break-word;

    font-family: 'Consolas', 'Monaco', monospace;

    line-height: 1.6;

    flex-grow: 1;

}



/* Custom scrollbar matching dark slate theme */

::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}

::-webkit-scrollbar-track {

    background: rgba(15, 23, 42, 0.8);

}

::-webkit-scrollbar-thumb {

    background: rgba(71, 85, 105, 0.8);

    border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

    background: rgba(99, 102, 241, 0.8);

}



/* File Output Section hiding logic */

.file-section {

    display: none; 

}



/* Responsive grid for the virtual files */

#file-output {

    display: grid;

    grid-template-columns: 1fr; /* Default to 1 column for narrow screens */

    gap: 16px;

    align-items: start;

    padding-top: 8px;

}



/* Force 2 columns on screens wider than 768px */

@media (min-width: 768px) {

    #file-output {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* The main Notepad body */

.file-container {

    margin-bottom: 0; 

    padding: 0; 

    background-color: #fdf6e3; 

    border: 1px solid #94a3b8;

    border-radius: 6px;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



/* The Notepad Title Bar */

.file-container h4 {

    margin: 0;

    padding: 8px 12px;

    background: linear-gradient(to bottom, #f8fafc, #e2e8f0);

    color: #334155;

    font-family: 'Inter', sans-serif;

    font-size: 0.9rem;

    font-weight: 600;

    border-bottom: 1px solid #cbd5e1;

    display: flex;

    align-items: center;

}



/* Add a tiny document icon next to the filename */

.file-container h4::before {

    content: '📄';

    margin-right: 8px;

    font-size: 1.1em;

}



/* The Notepad Text Area (with perfectly aligned ruled lines) */

.file-container pre {

    margin: 0;

    /* Padding-top is exactly 24px so the text starts neatly on the second line */

    padding: 24px 12px 24px 30px; 

    font-family: 'Consolas', 'Monaco', monospace;

    white-space: pre-wrap;

    color: #0f172a; 

    /* Fixed font-size to prevent fractional pixel rendering issues */

    font-size: 14px; 

    line-height: 24px;

    min-height: 120px;

    

    /* Strict 24px background sizing to match the line-height */

    background-image: linear-gradient(transparent 23px, #cbd5e1 23px, #cbd5e1 24px);

    background-size: 100% 24px;

    background-position: 0 0;

    

    /* A subtle red vertical margin line */

    border-left: 2px solid rgba(239, 68, 68, 0.3);

}



/* Interactive Input Container hiding logic */

#input-container {

    display: none; 

}



/* Running Button Animation */

.running {

    animation: pulse-border 1.5s infinite !important;

    background-color: #ef4444 !important; 

    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4) !important;

    border-color: #ef4444 !important;

}



@keyframes pulse-border {

    0% { opacity: 1; }

    50% { opacity: 0.8; transform: scale(0.97); }

    100% { opacity: 1; }

}