/* -----------------------------------------------------------
   A. GLOBAL RESET & BASE STYLES
   ----------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #1e1e1e; /* Main background */
  color: #d4d4d4;
  overflow: hidden; /* Prevent window-level scrolling */
}

/* Vertical Flex container (Header + Main) */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

/* --- Header Section (Fixed Top) --- */
.header {
  flex: 0 0 auto;
  padding: 1rem 1.5rem;
  background-color: #252526;
  border-bottom: 1px solid #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 10;
}

.header h1 { margin: 0; font-size: 1.5rem; color: #fff; }
.header h2 { margin: 5px 0 15px 0; font-size: 0.9rem; font-weight: 400; color: #aaa; }

.toolbar { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; font-size: 0.85rem; }
.toolbar-item { display: flex; align-items: center; gap: 5px; }

.toolbar select, .toolbar input[type="range"] {
  background: #3c3c3c;
  border: 1px solid #555;
  color: white;
  padding: 2px 5px;
  border-radius: 4px;
}


/* -----------------------------------------------------------
   B. MAIN LAYOUT (STABLE 50/50 SPLIT)
   ----------------------------------------------------------- */
.main-layout {
  display: flex;
  flex: 1; /* Fills remaining height */
  overflow: hidden; 
  height: 100%;
}

/* LHS & RHS split 50/50 */
.lhs, .rhs {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  flex: 1; 
}

.output-header {
  background-color: #2d2d2d;
  padding: 8px 15px;
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #333;
  color: #ccc;
  flex: 0 0 auto;
}

/* --- Divider --- */
.divider {
  width: 1px;
  background-color: #444;
}

/* -----------------------------------------------------------
   C. LHS: INPUT EDITOR (CURSOR ALIGNMENT & FULL HEIGHT)
   ----------------------------------------------------------- */
.input-card {
  display: flex;
  flex-direction: column;
  flex: 1; /* Makes the card fill the LHS column */
  height: 100%;
  position: relative;
  background-color: #1e1e1e;
}

#input-container {
  position: relative;
  flex: 1; /* Pushes the run button to the bottom */
  width: 100%;
  min-height: 0;
}

/* CRITICAL: Enforce Font Consistency on ALL layers for cursor alignment */
#code-input,
#highlighted-code,
#highlighted-code pre,
#highlighted-code code {
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  tab-size: 2;
}

/* Textarea Layer (for input) */
#code-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 15px; 
  border: none;
  margin: 0;
  resize: none;
  background: transparent;
  color: transparent; 
  caret-color: #fff;
  z-index: 2;
  outline: none;
  white-space: pre; /* No wrapping (standard code editor behavior) */
  overflow: auto; 
}

/* Highlight Layer (for background color) */
#highlighted-code {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 15px; /* Must match textarea padding */
  background-color: #1e1e1e;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Override Highlight.js defaults (removes padding/margin from HLJS theme) */
#highlighted-code pre,
#highlighted-code code.hljs {
  margin: 0;
  padding: 0; 
  border: none;
  background: transparent; 
  white-space: pre; 
  overflow: visible;
}

/* Run Button Area (Pinned to bottom) */
.run-button-wrapper {
  flex: 0 0 auto;
  padding: 10px;
  background-color: #252526;
  border-top: 1px solid #333;
  text-align: right;
  z-index: 10;
}

.run-button {
  background-color: #007acc;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9rem;
}

/* -----------------------------------------------------------
   D. RHS: OUTPUT & LOGS (CONSISTENT PADDING & STRUCTURED STYLING)
   ----------------------------------------------------------- */

.output-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 50/50 Vertical Split */
.output-item {
  flex: 1; 
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #444;
  min-height: 0;
}

.output-item:last-child {
  border-bottom: none;
}

.stdout-header { color: #4ec9b0; }
.stderr-header { color: #ce9178; }

/* Output Boxes Container */
.output-box {
  flex: 1;
  margin: 0;
  /* FIX: Restore base padding here for consistent initial text alignment */
  padding: 10px; 
  overflow-y: auto;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  background-color: transparent;
  color: #d4d4d4;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}

/* FIX: Override Highlight.js theme background and padding on output */
.output-box code.hljs,
.output-box .hljs {
  background: transparent !important;
  /* FIX: Set content padding to 0 so parent .output-box handles the 15px spacing */
  padding: 0 !important; 
}

/* --- LOG STREAM STYLING (STDERR) --- */

/* Reset the stderr code block (it receives the styled log-entry divs) */
#stderr-code {
  display: block;
  background: transparent !important;
  /* We remove padding here as it's handled by .output-box */
  padding: 0; 
}

#stdout-code {
  display: block;
  background: transparent !important;
  /* We remove padding here as it's handled by .output-box */
  padding: 0; 
}

/* Individual Log Line Container */
.log-entry {
  display: block;
  /* FIX: Set horizontal padding to 0, vertical padding remains 4px (Parent handles 15px horizontal spacing) */
  padding: 4px 0; 
  margin-bottom: 1px;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  border-left: 3px solid transparent; 
  color: #d4d4d4;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Log Level Colors */
.log-level-debug {
  color: #888;
}

.log-level-info {
  color: #0b6fb6;
  border-left-color: #444;
}

.log-level-warn {
  color: #cca700;
  border-left-color: #cca700;
  background-color: rgba(204, 167, 0, 0.05);
}

.log-level-error {
  color: #f48771;
  border-left-color: #f48771;
  background-color: rgba(244, 135, 113, 0.1);
}