/* O3: the drag handle on the session sidebar panel's own right edge.
 * web/src/lib/drawer/resize.ts owns the behaviour (drag, arrow
 * keys, double-click reset, per-device persistence); this is its paint.
 *
 * Split into its own file rather than added to session-sidebar.css,
 * which sits at the 500-line project convention already (see that
 * file's own header) and has no room left.
 *
 * POSITIONED INSIDE THE PANEL, AT ITS OWN RIGHT EDGE, not as a sibling
 * overlay: `.session-sidebar-panel` is `position: fixed` with a fixed
 * `width: var(--sidebar-dock-w)` (session-sidebar.css), so a child
 * positioned `right: 0` inside it tracks that width automatically on
 * every repaint - there is no second measurement to keep in sync with
 * the panel's own.
 */

@layer components {
.session-sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 7px;
    cursor: ew-resize;
    /* Invisible at rest - the panel's own border-right already draws the
     * seam; this is a wider HIT AREA over that seam, not a new visible
     * line, so a resizable sidebar does not look different from one that
     * is not. */
    background: transparent;
    z-index: 1101;
    touch-action: none;
}

.session-sidebar-resize-handle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 1px;
    background: transparent;
    transition: background 120ms ease;
}

.session-sidebar-resize-handle:hover::after,
.session-sidebar-resize-handle:focus-visible::after {
    background: var(--oc-orange);
}

.session-sidebar-resize-handle:focus-visible {
    outline: none;
}

/* Only the DOCKED (desktop) panel is meant to be dragged: an overlay
 * drawer on a phone is already the viewport minus a 36px strip, no room to spare,
 * and there is nowhere comfortable for a thumb to grab a 7px seam on a
 * touch screen. The handle stays in the DOM either way (a fixed
 * `tabindex="0"` element that never renders is still reachable by Tab),
 * so it is hidden rather than removed. */
.session-sidebar-panel:not(.session-sidebar-panel--open) .session-sidebar-resize-handle,
body:not(.session-sidebar-pinned) .session-sidebar-resize-handle {
    display: none;
}

/* While dragging, the whole page commits to the resize cursor and no
 * text gets selected out from under the pointer - the same pattern any
 * splitter needs, because the pointer travels far outside the 7px handle
 * the instant a drag starts. */
body.session-sidebar-resizing {
    cursor: ew-resize !important;
    user-select: none;
}

body.session-sidebar-resizing .session-sidebar-panel {
    /* No slide transition mid-drag: the panel already has NO transition
     * on `width` today (only `transform`/`visibility`), so this is a
     * belt-and-braces guard against a future rule adding one. */
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .session-sidebar-resize-handle::after {
        transition: none;
    }
}
}