/* =============================
   TOOL WRAPPER
   ============================= */
.tool-wrapper {
    resize: both;
    overflow: hidden;
    min-width: 320px;
    min-height: 500px;
    max-width: min(1600px, 100%);
    margin: 0 auto;
    max-height: none;
    height: 90vh;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overscroll-behavior: auto;
}

/* =============================
   FULL WIDTH TOOL 
   ============================= */
.tool-wrapper .html-viewer-tool {
    width: 100%;
    height: 100%;
    max-width: none !important;
    display: flex;
    flex-direction: column;
}

/* =============================
   SPLITTER 
   ============================= */
#split-container {
    display: flex;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#split-container.stack {
    flex-direction: column;
}

#split-container.side {
    flex-direction: row;
}

#editor-pane,
#preview-pane {
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

#editor-pane,
#preview-pane {
    width: auto;
    height: auto;
}

/* =============================
   DRAG BAR 
   ============================= */
#dragbar {
    flex-shrink: 0;
    background: rgb(226 232 240);
    transition: background .15s;
}

.dark #dragbar {
    background: rgb(30 41 59);
}

#dragbar:hover {
    background: #9333ea;
}

#split-container.side #dragbar {
    width: 8px;
    cursor: col-resize;
}

#split-container.stack #dragbar {
    height: 8px;
    width: 100%;
    cursor: row-resize;
}

/* =============================
   FULLSCREEN 
   ============================= */
#split-container.fullscreen #editor-pane,
#split-container.fullscreen #dragbar {
    display: none;
}

#split-container.fullscreen #preview-pane {
    width: 100% !important;
    height: 100% !important;
}

#btnExitFullscreen {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10000;
}

html, body {
    height: auto;
    overflow-x: hidden;
}