.panel-resizable {
  overflow: auto;
  min-height: 10px;
}

.section-resizer {
  width: min(980px, 100%);
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  user-select: none;
  touch-action: none;
  flex: 0 0 8px;
}

.section-resizer__grip {
  width: 180px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1e293b, #334155);
  border: 1px solid #1f2937;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  pointer-events: none;
}

.section-resizer:hover .section-resizer__grip,
.section-resizer.is-active .section-resizer__grip {
  background: linear-gradient(90deg, #38bdf8, #1d4ed8);
  box-shadow: 0 4px 8px rgba(56, 189, 248, 0.35);
  transform: scaleY(1.2);
}

.section-resizer:focus-visible .section-resizer__grip {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.section-resizer.is-active {
  cursor: row-resize;
}

body.is-resizing {
  cursor: row-resize;
}