/* ── Split screen (split-view.js): support server left, docked page right ──
   The panel starts below the fixed top bar (--app-header-h); the content
   area makes room for it. */

.split-view { display: none; }

.has-split-view .split-view {
    position: fixed;
    top: var(--app-header-h, 64px);
    right: 0;
    bottom: 0;
    z-index: 210;
    display: flex;
    flex-direction: column;
    width: var(--split-w, 50vw);
    background: var(--surface, #fff);
    border-left: 1px solid var(--border, #e5e7eb);
    box-shadow: -8px 0 24px -16px rgba(15, 23, 42, 0.35);
}

.has-split-view .content { margin-right: var(--split-w, 50vw); }

.split-view-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    width: 10px;
    cursor: col-resize;
    z-index: 2;
}
.split-view-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 3px;
    width: 4px;
    height: 44px;
    border-radius: 999px;
    background: var(--border, #e5e7eb);
    transform: translateY(-50%);
    transition: background 0.12s ease;
}
.split-view-handle:hover::after, .split-view-handle:focus-visible::after, .split-dragging .split-view-handle::after { background: var(--accent, #2563eb); }
.split-view-handle:focus-visible { outline: none; }

.split-view-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 42px;
    padding: 0 8px 0 14px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #f6f7f9);
}
.split-view-title { flex: 1; min-width: 0; overflow: hidden; font-size: 0.84rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.split-view-btn {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
}
.split-view-btn svg { width: 16px; height: 16px; }
.split-view-btn:hover { background: var(--surface, #fff); color: var(--accent, #2563eb); filter: none; }

.split-view-frame { flex: 1; width: 100%; border: 0; background: #fff; }

/* while dragging, the frame must not swallow the pointer */
.split-dragging, .split-dragging * { cursor: col-resize !important; user-select: none; }
.split-dragging .split-view-frame { pointer-events: none; }

@media (max-width: 899px) {
    .has-split-view .split-view { display: none; }
    .has-split-view .content { margin-right: 0; }
}