/* Pipeline workbench: equal-height panels (desktop) + iPhone Safari safe areas */

.pipe-wb-shell {
  --pipe-wb-chrome: 220px;
  --pipe-wb-row-h: min(calc(100dvh - var(--pipe-wb-chrome) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 920px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pipe-wb-row {
  align-items: stretch;
}

.pipe-wb-panel {
  height: var(--pipe-wb-row-h);
  min-height: 280px;
  max-height: var(--pipe-wb-row-h);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.pipe-wb-panel--canvas {
  overflow: hidden;
}

.pipe-wb-flow-host {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: 100%;
  width: 100%;
}

.pipe-wb-flow-host .react-flow,
.pipe-wb-flow-host > div {
  min-height: 0 !important;
  height: 100% !important;
}

@media (max-width: 991.98px) {
  .pipe-wb-shell {
    --pipe-wb-chrome: 160px;
  }

  .pipe-wb-row > [class*="col-"] {
    margin-bottom: 12px;
  }

  .pipe-wb-panel {
    height: auto;
    max-height: none;
    min-height: 220px;
  }

  .pipe-wb-panel--palette {
    max-height: 42dvh;
  }

  .pipe-wb-panel--canvas {
    height: min(58dvh, 520px);
    max-height: min(58dvh, 520px);
  }

  .pipe-wb-panel--inspector {
    max-height: 70dvh;
  }
}