/* MoraqWorkspaceSplit - reusable docked panel grid shell (pair with creative-workspace-split.js) */

html.mc-ws-split,
html.mc-support-workspace-split {
  --mc-ws-dock-w: var(--mc-support-dock-w, 520px);
}

html.mc-ws-split,
html.mc-ws-split body,
html.mc-support-workspace-split,
html.mc-support-workspace-split body {
  height: 100%;
  overflow: hidden;
}

html.mc-ws-split body.mc-ws-body,
html.mc-ws-split body.mc-support-workspace-body,
html.mc-support-workspace-split body.mc-ws-body,
html.mc-support-workspace-split body.mc-support-workspace-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px var(--mc-ws-dock-w, var(--mc-support-dock-w, 520px));
  grid-template-rows: 100dvh;
  margin: 0;
  overflow: hidden;
}

html.mc-ws-dragging,
html.mc-ws-dragging body,
html.mc-support-split-dragging,
html.mc-support-split-dragging body {
  cursor: col-resize !important;
  user-select: none !important;
}

html.mc-ws-split .mc-ws__resizer,
html.mc-support-workspace-split .mc-support__split-resizer {
  grid-column: 2;
  grid-row: 1;
  width: 10px;
  min-width: 10px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  z-index: 20;
  position: relative;
  margin: 0;
  padding: 0;
}

html.mc-ws-split .mc-ws__resizer[hidden],
html.mc-support-workspace-split .mc-support__split-resizer[hidden] {
  display: none;
}

html.mc-ws-split .mc-ws__resizer::after,
html.mc-support-workspace-split .mc-support__split-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.1);
  border-radius: 1px;
  transition: background 0.15s ease;
}

html.mc-ws-split .mc-ws__resizer:hover::after,
html.mc-ws-split .mc-ws__resizer:focus-visible::after,
html.mc-ws-split .mc-ws__resizer.is-dragging::after,
html.mc-support-workspace-split .mc-support__split-resizer:hover::after,
html.mc-support-workspace-split .mc-support__split-resizer:focus-visible::after,
html.mc-support-workspace-split .mc-support__split-resizer.is-dragging::after {
  background: rgba(0, 48, 222, 0.35);
}