.gse-split, .gse-split * { box-sizing: border-box; }
.gse-split { width: 100%; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 12px; margin: 16px 0; background: #fff; }

.gse-toolbar { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 0 12px 0; }
.gse-btn{
  border: 1px solid #5bdfe4;
  background: #5bdfe4;
  color: #003b3d;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: transform 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
}
.gse-btn:hover { transform: translateY(-1px); opacity: .9; }
.gse-btn.is-active { box-shadow: 0 0 0 3px rgba(91,223,228,.45); font-weight: 600; }

.gse-box { border: 1px solid rgba(0,0,0,.12); border-radius: 12px; overflow: hidden; background: #fff; }
.gse-grid{
  display: grid !important;
  gap: 12px;
  padding: 12px;
  width: 100%;
  align-items: stretch;
  grid-template-columns: 1fr 0fr;
  transition: grid-template-columns 600ms cubic-bezier(.22, 1, .36, 1);
}

.gse-panel{
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: opacity 520ms cubic-bezier(.22, 1, .36, 1), transform 520ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.gse-panel-header{
  display:flex; justify-content: space-between; align-items:center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background:#fff;
}
.gse-panel-body{ padding: 0; display:flex; flex-direction:column; min-height:0; overflow:hidden; }

.gse-scroller{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fafafa;
  padding: 10px;
  flex: 1 1 auto;
  min-height: 0;
}

/* Height modes: auto = content decides; fixed = set via data-fixed-vh */
.gse-split[data-height-mode="fixed"] .gse-scroller { height: calc(var(--gse-fixed-vh, 60) * 1vh) !important; }
.gse-split[data-height-mode="auto"] .gse-scroller { max-height: 900px; height: min(70vh, 900px); }

.gse-grid.mode-single { grid-template-columns: minmax(0,1fr) minmax(0,0fr); }
.gse-grid.mode-double { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

.gse-grid.mode-single .gse-right { opacity: 0; transform: translateX(24px); pointer-events: none; }
.gse-grid.mode-double .gse-right { opacity: 1; transform: translateX(0); pointer-events: auto; }

@media (max-width: 900px){
  .gse-grid { grid-template-columns: 1fr !important; transition: none; }
  .gse-grid.mode-single .gse-right { display: none; }
  .gse-grid.mode-double .gse-right { display: flex; opacity: 1; transform: none; }
}

/* --- Clickability fixes for Double mode ---
   Some embeds insert invisible overlays or use transforms that can create unexpected stacking contexts.
   These rules force each panel to be its own stacking context and keep clicks inside the visible panel. */

.gse-grid { position: relative; isolation: isolate; }
.gse-panel { position: relative; isolation: isolate; }
.gse-panel-body, .gse-scroller, .gse-content { position: relative; z-index: 1; }

/* Ensure both panels accept pointer events in Double mode */
.gse-grid.mode-double .gse-left,
.gse-grid.mode-double .gse-right { pointer-events: auto !important; }

/* Prevent the right panel from accidentally sitting "on top of" the left panel */
.gse-grid.mode-double .gse-left { z-index: 2; }
.gse-grid.mode-double .gse-right { z-index: 1; }