/* ══════════════════════════════════════════════════════════════
   Notespark — draggable splitters (sidebar & note-list)
   Isolated file. Load AFTER app.css / nota-layout.css.

   Widths are driven by CSS vars on the .nota root; nota-splitters.js
   sets those vars live during a pointer drag (no Blazor re-render).

   SEED-SAFE: the width rules only take effect once JS has added the
   matching `-ready` flag to .nota (which happens right after JS seeds
   the var from the pane's real current width, or from localStorage).
   No hardcoded/guessed default width, no first-paint jump.
   ══════════════════════════════════════════════════════════════ */

/* Sidebar (.nota-sidebar) — only bound once seeded */
.nota.nota-sidebar-ready .nota-sidebar {
    width: var(--nota-sidebar-w);
    min-width: var(--nota-sidebar-w);
    flex-shrink: 0;
}

/* Note list (.notes-panel) — only bound once seeded */
.nota.nota-notes-ready .notes-panel {
    width: var(--nota-notes-w);
    min-width: var(--nota-notes-w);
    flex-shrink: 0;
}

/* ── The drag handles ───────────────────────────────────────── */
.nota-divider,
.notes-divider {
    flex: 0 0 auto;
    width: 8px;
    align-self: stretch;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 20;
    touch-action: none;
    transition: background 0.15s ease;
}

    /* full-height hairline, centred in the hit area */
    .nota-divider::after,
    .notes-divider::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        background: rgba(255, 255, 255, 0.07);
        transition: background 0.15s ease, width 0.15s ease;
    }

    /* grab dots — a little 2-column grip centred vertically.
   `currentColor` drives the dot colour so hover just changes color. */
    .nota-divider::before,
    .notes-divider::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 30px;
        color: rgba(255, 255, 255, 0.22);
        background-image: radial-gradient(currentColor 1px, transparent 1.6px);
        background-size: 3px 7px; /* 2 dots across × ~4 down */
        background-position: center;
        background-repeat: round;
        border-radius: 3px;
        pointer-events: none;
        transition: color 0.15s ease;
    }

    /* hover: brighten the whole handle */
    .nota-divider:hover,
    .notes-divider:hover {
        background: rgba(124, 92, 231, 0.10);
    }

        .nota-divider:hover::after,
        .notes-divider:hover::after {
            width: 2px;
            background: #7C5CE7;
        }

        .nota-divider:hover::before,
        .notes-divider:hover::before {
            color: rgba(255, 255, 255, 0.55);
        }

/* While dragging: lock selection, force resize cursor everywhere,
   neutralise iframes (e.g. Excalidraw), and light the grip fully. */
body.nota-resizing,
body.nota-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

    body.nota-resizing iframe {
        pointer-events: none !important;
    }

    body.nota-resizing .nota-divider::before,
    body.nota-resizing .notes-divider::before {
        color: rgba(255, 255, 255, 0.7);
    }

/* ── Light theme ── */
.nota.theme-light .nota-divider::after,
.nota.theme-light .notes-divider::after {
    background: rgba(0, 0, 0, 0.10);
}

.nota.theme-light .nota-divider::before,
.nota.theme-light .notes-divider::before {
    color: rgba(0, 0, 0, 0.20);
}

.nota.theme-light .nota-divider:hover::after,
.nota.theme-light .notes-divider:hover::after {
    background: #6C5CE7;
}

.nota.theme-light .nota-divider:hover::before,
.nota.theme-light .notes-divider:hover::before {
    color: rgba(0, 0, 0, 0.45);
}

/* Never on mobile/compact — single-pane layouts. */
.nota.compact .nota-divider,
.nota.compact .notes-divider {
    display: none !important;
}