.split-pane {
  display: flex;
  width: 100%;
  gap: 0;
}

.split-pane-left,
.split-pane-right {
  min-width: 0;
  min-height: 0;
}

.split-pane-left {
  flex: 0 0 42%;
  overflow: hidden;
}

.split-pane-right {
  flex: 1 1 auto;
  overflow-y: auto;
}

.split-pane-handle {
  flex: 0 0 10px;
  cursor: col-resize;
  position: relative;
  user-select: none;
  touch-action: none;
  background: transparent;
}

.split-pane-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 48px;
  background: var(--tblr-border-color, #e6e7e9);
  border-radius: 2px;
  transition: background 0.15s ease, width 0.15s ease, height 0.15s ease;
}

.split-pane-handle:hover::before,
body.split-pane-dragging .split-pane-handle::before {
  background: var(--tblr-primary, #026CFF);
  width: 3px;
  height: 64px;
}

body.split-pane-dragging {
  cursor: col-resize;
  user-select: none;
}

body.split-pane-dragging iframe {
  pointer-events: none;
}