@layer app {

body {
    background-color: var(--fill-100);
}

.monaco-editor-container {
    flex-grow: 1;
    width: 100%;
}

/* Flex-column fill for the scrollable content containers. */
.ant-tabs-content-holder,
.ant-tabs-content,
.ant-page-header-content,
.ant-splitter-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.ant-page-header-content {
    min-height: 0;
}

/* Folder tree + content split: flex-fill the leftover space (not 100%, which would include the
   header height and overflow). min-height:0 lets it shrink so the tree's own scroll governs.
   Applies to every page that uses this wrapper (Scripts, Tests, …). */
.resizable-split {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
}

/* Fit variant for treeview pages: height follows content, capped at the leftover space
   (basis=auto sizes to content, shrink=1 caps it; panes then scroll internally).
   The default fill stays for editor tenants (FileExplorerEditor) — Monaco has no intrinsic height. */
.resizable-split--fit {
    flex: 0 1 auto;
}

/* Root flashes periwinkle during prerender->interactive before any author bg applies;
   paint it the console surface so the load flash blends in. */
html {
    background: var(--fill-100);
}

/* Shared chrome for static log/text output blocks. */
.log-box {
    background: var(--fill-200);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border-200);
}

:root[data-theme="dark"] .log-box {
    background: #000000;
}