/* Sandbox split layout: outer container and panels */
/* --app-header-height: set by assets/sandbox_split.js from .hdr measured height */

:root {
  --app-header-height: 56px;
}

/* Page wrapper: 4px padding (overrides Bootstrap .p-3 = 16px); by id so it always wins */
#sbx-exp-page-wrapper,
#sbx-task-page-wrapper,
#sbx-review-page-wrapper,
#sbx-conf-page-wrapper,
#trainer-layout-page.sandbox-page-wrapper {
  padding: 4px !important;
}

/* Trainer: task grid above split; fill viewport below fixed header */
#sbx-exp-page-wrapper,
#sbx-task-page-wrapper,
#sbx-review-page-wrapper,
#sbx-conf-page-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--app-header-height));
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#sbx-exp-page-wrapper .sandbox-split-outer,
#sbx-task-page-wrapper .sandbox-split-outer,
#sbx-review-page-wrapper .sandbox-split-outer,
#sbx-conf-page-wrapper .sandbox-split-outer-conf {
  flex: 1 1 0;
  min-height: 0;
  height: auto !important;
}

#trainer-layout-page.sandbox-page-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--app-header-height));
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#trainer-layout-page.sandbox-page-wrapper > #main-form {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

#trainer-layout-page.sandbox-page-wrapper #sbx-trainer-split-outer.sandbox-split-outer {
  flex: 1 1 0;
  min-height: 0;
  height: auto !important;
  /* Split.js + later rules must not stack left above editor; row is the canonical trainer layout */
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* Trainer left column: without this, .sandbox-split-panel { min-width: 0 } + .sandbox-split-panel-right { flex: 1 }
   collapses the left panel to zero until Split.js applies flex-basis (or if Split fails to init). */
#trainer-layout-page #sbx-trainer-split-outer:not(.sandbox-left-collapsed) #sbx-trainer-panel-left {
  min-width: 265px;
}

/* Page title in sandbox left panel: section-title size (smaller than main portal page title) */
.sandbox-page-title {
  font-size: var(--font-size-section-title);
  font-weight: 600;
}

/* Header row (title + badge): zero padding; -2px bottom margin to reduce gap to card below */
.sandbox-panel-header {
  padding: 0;
  margin: 2px 0 4px 0;
  flex-shrink: 0;
}

/* Left panel: flex column, header + body; no padding, 5px top margin; overflow hidden so body scrolls */
.sandbox-split-panel.sbx-exp-panel-left,
.sandbox-split-panel.sbx-task-panel-left,
.sandbox-split-panel.sbx-trainer-panel-left,
.sandbox-split-panel.sbx-review-panel-left,
.sandbox-split-panel.sbx-conf-panel-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin-top: 5px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Left panel body: flex column for cards, gap between sections */
.sandbox-left-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

.sandbox-split-outer {
  display: flex;
  flex-direction: row;
  height: calc(100vh - var(--app-header-height));
  overflow: hidden;
  min-height: 300px;
}

/* Collapse left (schema) panel: Split.js keeps min-width inline; override when hidden */
.sandbox-split-outer.sandbox-left-collapsed > [id$="-panel-left"] {
  flex: 0 0 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.sandbox-split-outer.sandbox-left-collapsed > [id$="-panel-left"] + .gutter.gutter-horizontal {
  display: none !important;
}

.sandbox-split-panel {
  overflow: auto;
  min-width: 0;
}

/* Editor panel: fill height from splitter; sandbox-editor-inner and ace grow/shrink, toolbar fixed */
.sandbox-split-panel-editor {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Canonical editor inner: toolbar + ace-wrapper, no Card */
.sandbox-editor-inner {
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 2px;
  box-sizing: border-box;
}

/* Wrapper size comes from flex (splitter); Ace fills it via absolute positioning
   so editor height does not depend on content and does not shrink on input. */
/* overflow: visible so Ace autocomplete (position:fixed) is not clipped to a gray line */
.sandbox-split-panel-editor .sandbox-editor-inner,
.sandbox-split-panel-editor .sandbox-editor-ace-wrapper {
  overflow: visible;
}

.sandbox-editor-ace-wrapper {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
}

.sandbox-split-panel-editor .sandbox-editor-ace-wrapper > div {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Force Ace editor chain to fill container so ace_content height is from splitter, not content */
.sandbox-editor-ace-wrapper .ace_editor,
.sandbox-editor-ace-wrapper .ace_scroller {
  height: 100% !important;
  min-height: 100% !important;
}

/* Toolbar row (Execute, Format): 2px margin, no padding, contain to prevent reflow */
.sandbox-split-panel-editor .d-flex.flex-wrap {
  flex-shrink: 0;
  padding: 0 !important;
  margin: 2px;
  contain: layout;
}

/* Trainer: toolbar spans editor panel width; stats icon in right column (not beside buttons) */
#trainer-layout-page .sbx-trainer-editor-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  margin: 2px;
  contain: layout;
}

/* Toolbar buttons: no bottom margin */
.sandbox-split-panel-editor .d-flex.flex-wrap .btn {
  margin-bottom: 0;
}

#trainer-layout-page .sbx-trainer-editor-toolbar .btn {
  margin-bottom: 0;
}

/* Conference: 3-column outer, fixed height, contain layout to prevent reflow on re-render */
.sandbox-split-outer-conf {
  height: calc(100vh - var(--app-header-height)) !important;
  contain: layout;
  flex: 1 1 0;
  min-height: 0;
}

/* Lock conference page: fixed height, no scrollbar, layers do not resize on re-render */
#sbx-conf-page-wrapper {
  height: calc(100vh - var(--app-header-height));
  overflow: hidden;
  box-sizing: border-box;
  contain: layout;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sandbox-split-outer-conf .sandbox-split-panel,
.sandbox-split-outer-conf #sbx-conf-panel-left,
.sandbox-split-outer-conf #sbx-conf-panel-center,
.sandbox-split-outer-conf #sbx-conf-panel-chat,
.sandbox-split-outer-conf .sandbox-left-body,
.sandbox-split-outer-conf .schema-viewer-container,
.sandbox-split-outer-conf .schema-viewer-container .schema-viewer-component,
.sandbox-split-outer-conf #sbx-conf-results,
.sandbox-split-outer-conf #sbx-conf-results-socket,
.sandbox-split-outer-conf .sbx-conf-chat-messages {
  contain: layout;
}

/* Toolbar: fixed widths so "Connected" does not shift when timer ticks */
.sbx-conf-connection-status {
  display: inline-block;
  min-width: 10ch;
}
.sbx-conf-timer-display {
  display: inline-block;
  min-width: 8ch;
  font-variant-numeric: tabular-nums;
  contain: layout;
}

.sbx-conf-panel-chat {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-color);
  min-width: 0;
  overflow: hidden;
}

.sbx-conf-panel-chat .sbx-conf-participants {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sbx-conf-participants-title {
  font-size: var(--font-size-label);
  margin-bottom: 0;
}

/* Chat split container: only chat-messages + chat-input-area for correct Split.js sizing */
.sbx-conf-chat-split-container {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Chat input area: editor fills space, Send button pinned to bottom */
.sbx-conf-chat-input-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.sbx-conf-chat-editor-wrapper {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sbx-conf-chat-editor-wrapper textarea,
.sbx-conf-chat-editor-wrapper .form-control {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  resize: none;
}
.sbx-conf-chat-input-area .btn {
  flex-shrink: 0;
}

/* Participants: horizontal row of icons (override conference.css flex-direction: column) */
.sbx-conf-participants .participants-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 0;
}

/* Icon-only badge: tooltip via title, no label */
.sbx-conf-participant-badge {
  flex-shrink: 0;
  cursor: default;
}
.sbx-conf-participant-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-label);
  font-weight: 600;
  box-sizing: border-box;
}

/* Socket-injected participants: compact icon-only row, no dark frame (override conference.css) */
.sbx-conf-participants .participant-item {
  flex-shrink: 0;
  display: inline-flex;
  cursor: default;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.sbx-conf-participants .participant-item:hover {
  background: transparent;
}
.sbx-conf-participants .participant-item .participant-avatar.sbx-conf-avatar,
.sbx-conf-participants .participant-item.sbx-conf-participant-badge .participant-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: var(--font-size-small);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.sbx-conf-participants .participant-item .participant-placeholder {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sbx-conf-participants .participant-item .participant-name,
.sbx-conf-participants .participant-item .participant-status {
  font-size: var(--font-size-label);
}
.sbx-conf-participants .participant-item .participant-status {
  color: var(--bs-secondary-color);
}

.sbx-conf-panel-chat .sbx-conf-chat-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.sandbox-split-panel-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Results panel: gray border on left, right, bottom (no top - gutter border) */
[id$="-panel-results"].sandbox-split-panel {
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: var(--border-color);
  border-radius: 0;
  box-sizing: border-box;
}

/* Split.js gutters (use theme variables, no hardcoded hex) */
.sandbox-split-outer .gutter {
  flex-shrink: 0;
  background: var(--border-color);
  cursor: col-resize;
}

.sandbox-split-panel-right .gutter {
  cursor: row-resize;
}

.sandbox-split-outer .gutter:hover {
  background: var(--text-secondary);
}

.sandbox-split-outer .gutter.gutter-horizontal {
  width: 6px;
}

.sandbox-split-outer .gutter.gutter-vertical {
  height: 6px;
  cursor: row-resize;
}

/* Flex-fill for results panel (no inline styles) */
.sandbox-panel-fill {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Canonical results body: stacking multiple ResultTableComponents */
.sandbox-results-body {
  padding: 8px 8px 8px 10px;
  overflow-y: auto !important;
  min-height: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

/* Force individual tables to take natural height and disable their internal vertical scrolls
   when stacked in a scrollable results panel. !important to override component inline styles. */
.sandbox-results-body .result-table-component {
  flex: 0 0 auto !important;
  height: auto !important;
  width: 100% !important;
}
.sandbox-results-body .result-table-body {
  overflow-y: visible !important;
  overflow-x: auto !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
}

/* Experiment left panel: schema card fills rest */
.sbx-exp-schema-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Schema card body: flex column so inner viewer can fill and scroll */
.sbx-exp-schema-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Wrapper: overlay refresh button without shifting the viewer */
.sbx-exp-schema-body .sbx-exp-schema-viewer-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sbx-exp-schema-refresh-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 4;
  padding: 2px 8px;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Schema viewer container must fill the card body (was smaller than panel) */
.sbx-exp-schema-body .sbx-exp-schema-viewer-wrap .schema-viewer-container {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* When fill_container=True, component grows to fill (no inline max-height) */
.sbx-exp-schema-body .sbx-exp-schema-viewer-wrap .schema-viewer-container .schema-viewer-component {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* Context toolbar: stay inside panel (button must not overflow right edge) */
.sbx-exp-context-toolbar {
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.sbx-exp-context-toolbar .btn {
  max-width: 100%;
  min-width: 0;
}

/* Context collapse in card body: do not grow, schema viewer fills the rest */
.sbx-exp-schema-body .sbx-exp-context-collapse {
  flex: 0 0 auto;
  margin-bottom: 0.5rem;
}

/* Task left panel: schema card fills rest */
.sbx-task-desc-card {
  flex: 0 0 auto;
}
.sbx-task-desc-card .card-body {
  padding-left: 6px !important;
}

/* Trainer: statement block — no card border/shadow; flush padding (scoped; sandbox task keeps chrome) */
#trainer-layout-page .sbx-task-desc-card.card,
#trainer-layout-page .sbx-task-desc-card {
  --bs-card-border-width: 0;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent;
  border-radius: 0 !important;
}
#trainer-layout-page .sbx-task-desc-card .card-body {
  padding: 0 !important;
}

#sbx-task-description {
  font-size: 12px;
}
/* Question dropdown: compact width, right-align, 8px right padding */
.sbx-task-question-dropdown .dropdown-toggle {
  text-align: right !important;
  padding-right: 8px !important;
  min-width: 48px !important;
  width: 48px !important;
}
.sbx-task-question-dropdown .dropdown-menu {
  min-width: 48px !important;
  width: 48px !important;
}
.sbx-task-question-dropdown-item {
  text-align: right !important;
  padding-right: 8px !important;
}
.sbx-task-schema-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sbx-task-schema-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sbx-task-schema-body .schema-viewer-container {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sbx-task-schema-body .schema-viewer-container .schema-viewer-component {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* Review left panel: solution + schema (fill) + feedback */
.sbx-review-solution-card {
  flex: 0 0 auto;
}
.sbx-review-schema-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sbx-review-schema-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sbx-review-schema-body .schema-viewer-container {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sbx-review-schema-body .schema-viewer-container .schema-viewer-component {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
.sbx-review-feedback-card {
  flex: 0 0 auto;
}

/* Conference left panel: schema card only (Context + schema); border between left and center */
.sandbox-split-panel.sbx-conf-panel-left {
  border-right: 1px solid var(--border-color);
}

/* Conference center (editor+results): same as panel-right - no extra padding (unified with exp/task/review) */
#sbx-conf-panel-center {
  padding: 0;
  box-sizing: border-box;
}
.sbx-conf-schema-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sbx-conf-schema-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sbx-conf-schema-body .schema-viewer-container {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sbx-conf-schema-body .schema-viewer-container .schema-viewer-component {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.sbx-conf-context-toolbar {
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.sbx-conf-context-toolbar .btn {
  max-width: 100%;
  min-width: 0;
}

.sbx-conf-schema-body .sbx-conf-context-collapse {
  flex: 0 0 auto;
  margin-bottom: 0.5rem;
}

/* Conference results panel */
.sandbox-split-outer-conf #sbx-conf-panel-results {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#sbx-conf-results {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}


/* Socket result block (receiving side): fill panel height (override .results-body max-height: 260px) */
#sbx-conf-results-socket {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
#sbx-conf-results-socket .sbx-conf-socket-result-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#sbx-conf-results-socket .sbx-conf-socket-result-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Trainer /trainer: adaptive result cards (SPEC §6.5) */
/* Contain Bootstrap .container-fluid + .row.g-* negative margins: without this, scrollWidth
   can exceed clientWidth by a few px and show a spurious horizontal scrollbar on the wrap. */
#trainer-layout-page .trainer-results-wrap {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
#trainer-layout-page #query-output.sandbox-results-body {
  min-width: 0;
}
/* height:auto: 100% fills the results panel and clips the second check section (seed DB) */
#trainer-layout-page .trainer-results-wrap .trainer-result-card {
  min-width: 0;
  height: auto;
  --bs-card-border-width: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

/* Title row ("Вывод запроса..."): no border; no padding (flush left/bottom) */
#trainer-layout-page .trainer-results-wrap .trainer-result-card .card-header.trainer-result-card-header {
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  color: var(--bs-secondary-color, var(--text-secondary)) !important;
}

/* Table area: no visible frame; no padding; flex for ResultTableComponent */
#trainer-layout-page .trainer-results-wrap .trainer-result-card .trainer-result-card-body {
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Narrow viewports: experiment / task / review — stack panels (reader-first, like SQL Shorts) */
@media (max-width: 992px) {
  #sbx-exp-page-wrapper,
  #sbx-task-page-wrapper,
  #sbx-review-page-wrapper {
    height: calc(100vh - var(--app-header-height));
    min-height: 0;
    overflow: hidden;
  }

  #sbx-exp-page-wrapper .sandbox-split-outer,
  #sbx-task-page-wrapper .sandbox-split-outer,
  #sbx-review-page-wrapper .sandbox-split-outer {
    flex-direction: column !important;
    flex-wrap: nowrap;
    overflow: hidden;
    min-height: 0;
    height: auto !important;
  }

  #sbx-exp-page-wrapper .sandbox-split-outer > .gutter,
  #sbx-task-page-wrapper .sandbox-split-outer > .gutter,
  #sbx-review-page-wrapper .sandbox-split-outer > .gutter {
    display: none !important;
  }

  #sbx-exp-page-wrapper .sandbox-split-panel,
  #sbx-task-page-wrapper .sandbox-split-panel,
  #sbx-review-page-wrapper .sandbox-split-panel,
  #sbx-exp-page-wrapper [id$="-panel-right"],
  #sbx-task-page-wrapper [id$="-panel-right"],
  #sbx-review-page-wrapper [id$="-panel-right"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-basis: auto !important;
  }

  #sbx-exp-page-wrapper [id$="-panel-left"],
  #sbx-task-page-wrapper [id$="-panel-left"],
  #sbx-review-page-wrapper [id$="-panel-left"] {
    flex: 0 0 auto !important;
    max-height: min(40vh, 20rem);
    min-height: 0 !important;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
  }

  #sbx-exp-page-wrapper .sandbox-split-outer.sandbox-left-collapsed > [id$="-panel-left"],
  #sbx-task-page-wrapper .sandbox-split-outer.sandbox-left-collapsed > [id$="-panel-left"],
  #sbx-review-page-wrapper .sandbox-split-outer.sandbox-left-collapsed > [id$="-panel-left"] {
    display: none !important;
    flex: 0 0 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #sbx-exp-page-wrapper .sandbox-split-outer:not(.sandbox-left-collapsed) > [id$="-panel-left"],
  #sbx-task-page-wrapper .sandbox-split-outer:not(.sandbox-left-collapsed) > [id$="-panel-left"],
  #sbx-review-page-wrapper .sandbox-split-outer:not(.sandbox-left-collapsed) > [id$="-panel-left"] {
    display: flex !important;
    flex: 0 0 auto !important;
    height: min(40vh, 20rem) !important;
    min-height: min(40vh, 20rem) !important;
    max-height: min(40vh, 20rem) !important;
  }

  #sbx-exp-page-wrapper [id$="-panel-right"],
  #sbx-task-page-wrapper [id$="-panel-right"],
  #sbx-review-page-wrapper [id$="-panel-right"] {
    flex: 1 1 0 !important;
    min-height: 0;
    overflow: hidden;
  }

  #sbx-exp-page-wrapper .sandbox-split-panel-right,
  #sbx-task-page-wrapper .sandbox-split-panel-right,
  #sbx-review-page-wrapper .sandbox-split-panel-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #sbx-exp-page-wrapper .sandbox-split-panel-editor,
  #sbx-task-page-wrapper .sandbox-split-panel-editor,
  #sbx-review-page-wrapper .sandbox-split-panel-editor {
    flex: 1 1 0;
    min-height: 12rem;
  }

  #sbx-exp-page-wrapper [id$="-panel-results"],
  #sbx-task-page-wrapper [id$="-panel-results"],
  #sbx-review-page-wrapper [id$="-panel-results"] {
    flex: 0 1 auto;
    min-height: 8rem;
    max-height: 40vh;
  }
}

/* Conference: keep 3-column row; horizontal scroll instead of vertical stack */
@media (max-width: 992px) {
  #sbx-conf-page-wrapper {
    height: calc(100vh - var(--app-header-height));
    overflow: hidden;
  }

  #sbx-conf-page-wrapper .sandbox-split-outer-conf {
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  #sbx-conf-page-wrapper .sandbox-split-outer-conf > .gutter.gutter-horizontal {
    flex-shrink: 0;
  }

  #sbx-conf-panel-left {
    flex: 0 0 min(42vw, 16rem) !important;
    min-width: min(42vw, 16rem) !important;
    max-width: min(42vw, 16rem) !important;
  }

  #sbx-conf-page-wrapper .sandbox-split-outer-conf.sandbox-left-collapsed #sbx-conf-panel-left {
    flex: 0 0 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }

  #sbx-conf-panel-center {
    flex: 1 0 55vw !important;
    min-width: 55vw !important;
  }

  #sbx-conf-panel-chat {
    flex: 0 0 min(38vw, 14rem) !important;
    min-width: min(38vw, 14rem) !important;
    max-width: min(38vw, 14rem) !important;
  }
}

/* Trainer: horizontal scroll on narrow viewports (Split.js keeps inline sizes) */
@media (max-width: 992px) {
  #trainer-layout-page #sbx-trainer-split-outer.sandbox-split-outer {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}