/* ====================== GLOBAL TRIPLE-PANE LAYOUT ====================== */
/* The header is ~120px tall. Fill remaining viewport height for the panes */
.split-wrapper {
    display: flex;
    height: calc(100vh - 120px);
}

/* Each pane is scrollable if content overflows */
.split-pane {
    overflow: auto;
}

/* ---------------------------
   1) Left Pane
   --------------------------- */
#leftPane {
    flex: 0 0 33.333%;
    background: #1f1f1f;
}

/* ---------------------------
   2) Middle Pane
   --------------------------- */
#middlePane {
    flex: 1 1 0;
    background: #292929;
    position: relative;
}

/* ---------------------------
   3) Right Pane (off-screen by default)
   We’ll set width = 0, then drag to reveal
   --------------------------- */
#rightPane {
    flex: 0 0 0;            /* hidden initially */
    background: #1e1e1e;
    overflow: auto;
    transition: flex 0.4s ease-in-out; /* smooth reveal */
}

/* -----------------------------------
   Vertical Resizers
   ----------------------------------- */
.resizer {
    flex: 0 0 6px;
    background: #555;
    cursor: col-resize;
    position: relative; 
    user-select: none;
}
.resizer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: #aaa;
    transform: translateX(-50%);
}
.resizer:hover {
    background: #777;
}

/* Disable transitions while actively dragging */
.no-transition {
    transition: none !important;
}
