.rapid-split-workspace {
    --rapid-split-detail-width: 33%;
    --rapid-split-detail-ratio: .33;
    --rapid-split-overlay-top: 77px;
    min-width: 0;
    container-type: inline-size;
    container-name: rapid-split-workspace;
}

.rapid-split-workspace__body {
    display: grid;
    gap: var(--rapid-space-4);
    min-width: 0;
}

.rapid-split-workspace__primary,
.rapid-split-workspace__detail {
    min-width: 0;
}

.rapid-split-workspace__detail {
    padding: var(--rapid-space-4);
    border: 1px solid var(--rapid-line);
    border-radius: var(--rapid-radius-card);
    background: var(--rapid-paper);
    box-shadow: var(--rapid-shadow-card);
}

.rapid-split-workspace__handle {
    display: none;
}

/* The wide layout sets display:flex on the detail, which beats the hidden
   attribute; without this a closed panel shows as an empty card under the list. */
.rapid-split-workspace__detail[hidden] {
    display: none;
}

@media (min-width: 761px) {
    .rapid-page--workspace > .rapid-split-workspace {
        display: flex;
        flex: 1;
        min-height: 0;
    }

    .rapid-split-workspace__body {
        flex: 1;
        min-height: 0;
    }
}

@container rapid-split-workspace (min-width: 960px) {
    .rapid-split-workspace__body {
        grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
        align-items: stretch;
    }
    .rapid-split-workspace--detail-closed .rapid-split-workspace__body {
        grid-template-columns: minmax(0, 1fr);
    }
    .rapid-split-workspace--resizable:not(.rapid-split-workspace--detail-closed) .rapid-split-workspace__body {
        grid-template-columns: minmax(0, 1fr) 10px minmax(280px, var(--rapid-split-detail-width, 33%));
        gap: 0;
    }

    .rapid-split-workspace__primary {
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
    .rapid-split-workspace__detail {
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        display: flex;
        flex-direction: column;
    }
    .rapid-split-workspace__detail:has(.rapid-conversation--unified-scroll) {
        overflow: hidden;
        scrollbar-gutter: auto;
    }
    /* Only the visible retained panel fills the detail; hidden drafts must stay display:none. */
    .rapid-split-workspace__detail:has(.rapid-conversation--unified-scroll) > :not([hidden]) {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .rapid-split-workspace--resizable .rapid-split-workspace__handle {
        display: block;
        width: 10px;
        margin-inline: -4px;
        cursor: col-resize;
        touch-action: none;
        background: transparent;
        border: 0;
        position: relative;
        z-index: 2;
    }
    .rapid-split-workspace--resizable .rapid-split-workspace__handle::after {
        content: "";
        position: absolute;
        inset: 12% 3px;
        border-radius: 999px;
        background: var(--rapid-line-strong);
        opacity: .55;
    }
    .rapid-split-workspace--resizable .rapid-split-workspace__handle:focus-visible {
        outline: 2px solid var(--rapid-focus);
        outline-offset: 2px;
    }
}

/* Overlay mode: on desktop the open detail is a drawer from under the app top
   bar to the bottom of the window, over the page header and filters. The list
   keeps the full width underneath, so its scroll position never changes.
   Container containment would make the section the containing block for the
   fixed drawer, so this mode lays out with a media query instead. */
@media (min-width: 761px) {
    .rapid-split-workspace--overlay {
        --rapid-split-overlay-width: clamp(320px, calc(var(--rapid-split-detail-ratio, .33) * (100vw - var(--rapid-rail-width, 0px))), 90vw);
        container-type: normal;
    }
    .rapid-split-workspace--overlay .rapid-split-workspace__body,
    .rapid-split-workspace--overlay.rapid-split-workspace--resizable:not(.rapid-split-workspace--detail-closed) .rapid-split-workspace__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .rapid-split-workspace--overlay .rapid-split-workspace__primary {
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
    .rapid-split-workspace--overlay .rapid-split-workspace__detail:not([hidden]) {
        position: fixed;
        top: var(--rapid-split-overlay-top, 77px);
        right: 0;
        bottom: 0;
        z-index: var(--rapid-z-overlay);
        width: var(--rapid-split-overlay-width);
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: auto;
        overscroll-behavior: contain;
        border-width: 0 0 0 1px;
        border-radius: 0;
        box-shadow: var(--rapid-shadow-pop);
    }
    .rapid-split-workspace--overlay .rapid-split-workspace__detail:not([hidden]):has(.rapid-conversation--unified-scroll) {
        overflow: hidden;
    }
    .rapid-split-workspace--overlay .rapid-split-workspace__detail:not([hidden]):has(.rapid-conversation--unified-scroll) > :not([hidden]) {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .rapid-split-workspace--overlay.rapid-split-workspace--resizable .rapid-split-workspace__handle {
        display: block;
        position: fixed;
        top: var(--rapid-split-overlay-top, 77px);
        bottom: 0;
        right: calc(var(--rapid-split-overlay-width) - 5px);
        z-index: calc(var(--rapid-z-overlay) + 1);
        width: 10px;
        margin: 0;
        cursor: col-resize;
        touch-action: none;
        background: transparent;
        border: 0;
    }
    .rapid-split-workspace--overlay.rapid-split-workspace--resizable .rapid-split-workspace__handle::after {
        content: "";
        position: absolute;
        inset: 12% 3px;
        border-radius: 999px;
        background: var(--rapid-line-strong);
        opacity: .55;
    }
    .rapid-split-workspace--overlay.rapid-split-workspace--resizable .rapid-split-workspace__handle:focus-visible {
        outline: 2px solid var(--rapid-focus);
        outline-offset: 2px;
    }
}