.jti-workspace {
  --jti-left-pane-width: 38%;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(280px, var(--jti-left-pane-width)) 10px minmax(420px, 1fr);
  gap: 0;
}

.jti-pane {
  min-height: 0;
}

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

.jti-pane-left .jti-panel,
.jti-pane-right .jti-panel {
  height: 100%;
}

.jti-pane-right {
  --jti-right-top-height: 190px;
  display: grid;
  grid-template-rows: minmax(140px, var(--jti-right-top-height)) 10px minmax(240px, 1fr);
  gap: 0;
  min-height: 0;
}

.jti-mapping-panel,
.jti-result-panel {
  overflow: auto;
}

.jti-result-panel {
  display: grid;
  gap: 8px;
  align-content: start;
}

.jti-resize-grip {
  position: relative;
  user-select: none;
  background: var(--awwbookmarklet-surface-inset-bg, #e6ebf2);
  border: 1px solid var(--awwbookmarklet-border-subtle, #9ba5b3);
}

.jti-resize-grip::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: linear-gradient(
    to bottom,
    transparent 0 15%,
    color-mix(in srgb, var(--awwbookmarklet-border-strong, #7b8695) 80%, transparent) 15% 20%,
    transparent 20% 35%,
    color-mix(in srgb, var(--awwbookmarklet-border-strong, #7b8695) 80%, transparent) 35% 40%,
    transparent 40% 55%,
    color-mix(in srgb, var(--awwbookmarklet-border-strong, #7b8695) 80%, transparent) 55% 60%,
    transparent 60% 100%
  );
}

.jti-resize-grip-vertical {
  cursor: ew-resize;
}

.jti-resize-grip-horizontal {
  cursor: ns-resize;
}

.jti-workspace.is-input-collapsed {
  grid-template-columns: 0 0 minmax(420px, 1fr);
}

.jti-workspace.is-input-collapsed .jti-pane-left,
.jti-workspace.is-input-collapsed .jti-resize-grip-vertical {
  display: none;
}

@media (max-width: 980px) {
  .jti-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(260px, auto) minmax(400px, 1fr);
    gap: 10px;
  }

  .jti-resize-grip-vertical,
  .jti-resize-grip-horizontal {
    display: none;
  }

  .jti-pane-right {
    grid-template-rows: minmax(170px, auto) minmax(280px, 1fr);
    gap: 10px;
  }

  .jti-workspace.is-input-collapsed {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(400px, 1fr);
  }
}