/* ==========================================================================
   0. DESIGN TOKENS (THE THEMING ENGINE)
   ========================================================================== */
:root {
  --bg-workspace: #09090b;      /* Deep black/gray background */
  --bg-panel: #141419;          /* Slightly lighter panel background */
  --bg-splitter: #3f3f46;       /* Slate-blue for inactive splitters */
  --color-accent: #a855f7;      /* Purple for active states/hover */
  --color-text-debug: #52525b;  /* Gray for debug tags */
}

/* ==========================================================================
   1. GLOBAL ENVIRONMENT RESET & STUDIO WORKSPACE GUARD
   ========================================================================== */
body, html {
  width: 100dvw;  /* CHANGED: Dynamic viewport width */
  height: 100dvh; /* CHANGED: Dynamic viewport height */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--bg-workspace); /* CHANGED: Now uses a variable */
  display: flex;
  flex-direction: row;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* The master flex container that stretches edge-to-edge with NO padding gaps */
.studio-workspace {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  padding: 0; 
  user-select: none; /* Prevents text-highlight glitching while dragging handles */
}

/* ==========================================================================
   2. PANEL SIZE DISTRIBUTION ARCHITECTURE
   ========================================================================== */
#panel-ev {
  width: 60%; 
  min-width: 250px;
}

.right-stack-column {
  flex: 1; /* Automatically consumes all remaining horizontal space */
  display: flex;
  flex-direction: column;
  min-width: 250px;
  height: 100%;
}

#panel-osc {
  height: 50%; /* Splits stack height space 50/50 initially */
  min-height: 120px;
}

#panel-run {
  flex: 1; /* Consumes all remaining stack vertical space */
  min-height: 120px;
}

/* ==========================================================================
   3. BOX AESTHETICS & FOCUS HIGHLIGHTING (THE OVERLAY FRAME FIX)
   ========================================================================== */
.instrument-wrapper {
  background-color: var(--bg-panel); /* CHANGED: Now uses a variable */
  border: none;
  position: relative;
  overflow: hidden;
  outline: none;
  display: flex;
  flex-direction: column;
}

/* Invisible border layer sitting on top of the iframe */
.instrument-wrapper::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; /* Crucial: lets clicks pass straight through to your apps */
  box-shadow: inset 0 0 0 0px transparent;
  transition: box-shadow 0.15s ease;
  z-index: 50; /* Forces border to paint over the top of the iframe */
}

/* When the JS says this panel is active, paint the purple frame on the overlay */
.instrument-wrapper.is-active::after {
  box-shadow: inset 0 0 0 2px var(--color-accent); /* CHANGED: Now uses a variable */
}

/* Unified clean styles for your dashboard iframes */
.dashboard-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Individual iframe background colors */
#panel-ev .dashboard-frame { background: #000000; }
#panel-osc .dashboard-frame { background: #ffffff; }
#panel-run .dashboard-frame { background: #f8f9fa; }

/* High-visibility diagnostic debug layout tags */
.panel-debug-tag {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 10px;
  color: var(--color-text-debug); /* CHANGED: Now uses a variable */
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 100;
  pointer-events: none;
}

/* ==========================================================================
   4. THE HIGH-CONTRAST SINGLE DIVISION LINES
   ========================================================================== */
.splitter {
  background-color: var(--bg-splitter); /* CHANGED: Now uses a variable */
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.15s ease;
}

/* When dragging or hovering anywhere near, the line shifts to match the active purple */
.splitter:hover, 
.splitter.dragging {
  background-color: var(--color-accent); /* CHANGED: Now uses a variable */
}

/* --- Vertical Splitter (Single 1px Line) --- */
.vertical-gutter {
  width: 1px;         
  height: 100%;
  margin: 0;           
  cursor: col-resize;
}

/* Invisible Hover/Grab Guard: Expands click target zone out by 6px */
.vertical-gutter::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
  cursor: col-resize;
  z-index: 10;
}

/* --- Horizontal Splitter (Single 1px Line) --- */
.horizontal-gutter {
  height: 1px;         
  width: 100%;
  margin: 0;           
  cursor: row-resize;
}

/* Invisible Hover/Grab Guard: Expands click target zone up and down by 6px */
.horizontal-gutter::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  bottom: -6px;
  cursor: row-resize;
  z-index: 10;
}

/* ==========================================================================
   5. ANTI-SLIP DRAG DETECTION BLOCKERS
   ========================================================================== */
/* While dragging handles, temporarily freeze frame actions so mouse captures don't drop */
.studio-workspace.dragging-active iframe {
  pointer-events: none !important;
}

/* ==========================================================================
   6. ANCHORED ACTION BUTTONS GROUP (BOUND TO THE SPLITTER EDGE)
   ========================================================================== */
.studio-action-group {
  position: absolute;
  top: 12px;        /* Offset from the top of the workspace */
  right: 12px;      /* Offset from the vertical splitter line */
  z-index: 150;     /* Higher than the iframe and debug tag */
  display: flex;
  flex-direction: column; /* Stacks the open button directly below the save button */
  gap: 8px;        /* Clean gap between the two buttons */
}

.studio-action-btn {
  width: 140px;     /* Lock identical width for clean symmetry */
  border: none;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.15s ease;
  text-align: center;
}

/* Save Button styling */
.studio-action-btn.primary {
  background-color: var(--color-accent);
  color: #ffffff;
}
.studio-action-btn.primary:hover {
  background-color: #c084fc;
  transform: translateY(-1px);
}

/* Open Button styling (sleek gray slate to match the dark theme) */
.studio-action-btn.secondary {
  background-color: #27272a;
  color: #e4e4e7;
  border: 1px solid #3f3f46;
}
.studio-action-btn.secondary:hover {
  background-color: #3f3f46;
  color: #ffffff;
  transform: translateY(-1px);
}

.studio-action-btn:active {
  transform: translateY(0);
}

/* Keeps the diagnostic tag well clear of our new button group */
#panel-ev .panel-debug-tag {
  top: auto;
  bottom: 12px;
  right: 12px;
}