/* =====================================================================
 * THE RIGHT DRAWER - the docked slot on the right edge that the file
 * browser and the session notepad share.
 * ---------------------------------------------------------------------
 * The mechanism is web/src/lib/right-drawer/dock.svelte.ts, the right-hand
 * twin of client/js/session-sidebar-pin.js. Owner, 2026-09-24: "the file
 * drawer should slide out on the right like the Left menu / agents drawer
 * does. not hide everything", and the notepad the same.
 *
 * `body.right-drawer-docked` is set only while a drawer is open AND the
 * viewport is wider than 700px, so a phone needs no override here: the
 * class is simply never applied and each drawer keeps its overlay rules.
 *
 * NO TRANSITION ON THE PADDING, for the reason session-sidebar.css gives:
 * the dock module asks the page terminal to refit the moment the class
 * lands, and an animated padding would make it measure a box still moving.
 * The drawer box itself slides in with a transform, which moves nothing
 * the terminal measures.
 * ===================================================================== */

:root {
    /* Rewritten on the root by the dock module with the device's own width. */
    --right-dock-w: 320px;
}

/* ---- the page makes room ------------------------------------------- */

body.right-drawer-docked #terminal-screen {
    padding-right: var(--right-dock-w);
}

/* The header pays the dock width plus its own side padding, the mirror of
 * `body.session-sidebar-pinned .header` - only while the terminal screen is
 * the one on show, since that is the only screen a right drawer belongs to. */
body.right-drawer-docked.ps-terminal-active .header {
    padding-right: calc(var(--right-dock-w) + var(--header-pad-x));
}

/* ---- the file browser, docked -------------------------------------- */

/* The overlay stops being a full-page backdrop: it becomes the drawer's own
 * column, so nothing to its left is covered or catches a click. */
body.right-drawer-docked .config-editor-picker-overlay {
    left: auto;
    width: var(--right-dock-w);
    background: transparent;
    animation: none;
    z-index: 1100;
}

body.right-drawer-docked .config-editor-picker-overlay .config-editor-picker-content {
    width: 100%;
    /* Part of the layout now, like the docked left drawer: a line, not a
     * shadow that says "floating above". */
    box-shadow: none;
}

.config-editor-picker-content {
    position: relative;
}

/* ---- the notepad ---------------------------------------------------- */

/* One box at every width. Docked it sits in the room the page made; on a
 * phone it slides over the terminal at a readable width. */
#session-notes-panel {
    position: fixed;
    /* Below the desktop app's title strip (client/css/desktop-chrome.css); 0 in a browser tab. */
    top: var(--desktop-inset-top, 0px);
    right: 0;
    bottom: 0;
    z-index: 1100;
    width: min(360px, 88vw);
    display: flex;
    flex-direction: column;
    background: var(--oc-ground-panel);
    /* The RESTING line between the main area and the drawer: the same thickness and frame color as the bars' edge lines (`--oc-grip-line`, tokens.css, #2772). */
    border-left: var(--oc-grip-line) solid var(--oc-line-frame);
    box-shadow: -4px 0 24px var(--oc-shadow-lift);
    animation: rightDrawerIn 160ms ease;
}

body.right-drawer-docked #session-notes-panel {
    width: var(--right-dock-w);
    box-shadow: none;
}

@keyframes rightDrawerIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    #session-notes-panel {
        animation: none;
    }
}

/* ---- the resize handle ---------------------------------------------- */

/* A strip over the drawer's inner edge. Only docked: an overlay on a phone
 * has a fixed readable width and nothing beside it to give room to. */
.right-drawer-grip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--oc-grip-hit);
    z-index: 5;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
}

.right-drawer-grip:hover,
.right-drawer-grip:focus-visible,
body.right-drawer-resizing .right-drawer-grip {
    /* The shared separator look (`--oc-grip-*`, tokens.css): the same line as the bars' edges, flush on the drawer's inner edge. */
    background: linear-gradient(to right, var(--oc-text-dim) var(--oc-grip-line), transparent var(--oc-grip-line));
    outline: none;
}

body:not(.right-drawer-docked) .right-drawer-grip {
    display: none;
}

/* A drag across the terminal must not select its text or hand the pointer
 * to the pane under it. */
body.right-drawer-resizing {
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
}

body.right-drawer-resizing .xterm {
    pointer-events: none;
}