/* App grid, rail (desktop column; mobile and tablet top bar with a drawer), main column and icon sprite. */

.app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
    padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
}

.main {
    min-width: 0;
    min-height: 0;
}

.thread {
    min-width: 0;
}

.thread__col {
    max-width: var(--col-max);
    margin: 0 auto;
    padding: var(--s-6) var(--s-5);
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Below 1200 px the rail is a fixed top bar (hamburger + brand) and a left drawer with a scrim. The rail itself is out of
   flow and makes no stacking context, so the bar, scrim and drawer sit directly on the z-index scale. */
.rail {
    position: absolute;
}

.rail__brand {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-topbar);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--s-3) 0 max(var(--s-1), env(safe-area-inset-left, 0px));
    background-color: var(--ink-1);
    border-bottom: 1px solid var(--rule);
}

.rail__logo {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
}

.rail__brand-text {
    display: flex;
    flex-direction: column;
}

.rail__word {
    font: 800 var(--t-lg) / 1 var(--font-display);
    letter-spacing: .04em;
    color: var(--paper-hi);
}

.rail__sub {
    font: 400 var(--t-xs) / 1 var(--font-mono);
    letter-spacing: .08em;
    color: var(--paper-lo);
}

.rail__toggle {
    width: var(--tap);
    height: var(--tap);
    border-radius: var(--r-2);
}

.rail__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    display: none;
    background-color: var(--ink-0);
    opacity: .72;
}

/* The drawer is a left sheet: head and mode switch on top, a scrolling middle, a footer that never scrolls away. */
.rail__drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-drawer);
    display: none;
    flex-direction: column;
    width: var(--drawer-w);
    height: 100dvh;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    background-color: var(--ink-1);
    border-right: 1px solid var(--rule);
    box-shadow: var(--e-overlay);
}

/* The toggle is a details element: its open state (no JavaScript needed) reveals the drawer and its scrim. */
.rail__drawer-toggle > summary {
    list-style: none;
    cursor: pointer;
}

.rail__drawer-toggle > summary::-webkit-details-marker {
    display: none;
}

.rail:has(.rail__drawer-toggle[open]) .rail__drawer {
    display: flex;
}

.rail:has(.rail__drawer-toggle[open]) .rail__scrim {
    display: block;
}

.rail__drawer.is-dragging {
    transition: none;
}

.rail__drawer.is-settling {
    transition: transform var(--d-fast) var(--ease-out);
}

html.is-drawer-open {
    overflow: hidden;
}

.rail__drawer-head {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--s-3);
    height: var(--topbar-h);
    padding: 0 var(--s-2) 0 var(--s-4);
    border-bottom: 1px solid var(--rule);
}

.rail__close {
    width: var(--tap);
    height: var(--tap);
    margin-left: auto;
}

.rail__mode {
    flex: none;
    padding: var(--s-3) var(--s-4) 0;
}

.rail__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--s-4);
    min-height: 0;
    padding: var(--s-4);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* A nested scroller (the chat's history list) would otherwise claim horizontal pans and cancel the swipe-to-close. */
.rail__drawer * {
    touch-action: pan-y;
}

.rail__foot {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--rule);
}

.rail__actions {
    display: flex;
    gap: var(--s-2);
}

.rail__actions > .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}

.rail__version {
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
}

/* The conversation list keeps room for a few rows; below that the body scrolls instead of collapsing it. */
.rail__body > .conv-rail {
    min-height: 13rem;
}

/* The chat list pads itself (--s-3) inside the body padding; trimming the body here lines the list, its New button
   and the mode switch up on one column. */
.rail__body:has(> .conv-rail) {
    padding-inline: calc(var(--s-4) - var(--s-3));
}

/* Short viewports (landscape phones, keyboard up): the foot becomes one row of icon buttons, the mode switch tightens. */
@media (max-height: 499.98px) and (max-width: 1199.98px) {
    .rail__mode {
        padding-top: var(--s-2);
    }

    /* The whole drawer scrolls (one scroller, not a nested one) with the foot pinned; the list keeps about four rows. */
    .rail__drawer {
        overflow-y: auto;
    }

    .rail__body {
        flex: none;
        gap: var(--s-2);
        overflow: visible;
    }

    .rail__body > .conv-rail {
        min-height: 26rem;
    }

    .rail__foot {
        position: sticky;
        bottom: 0;
        margin-top: auto;
        background-color: var(--ink-1);
        flex-direction: row;
        align-items: center;
        gap: var(--s-2);
        padding: var(--s-2) var(--s-4);
    }

    .rail__foot .install {
        flex: none;
    }

    .rail__foot .install__dismiss,
    .rail__version {
        display: none;
    }

    .rail__foot .install__action,
    .rail__actions > .btn {
        flex: none;
        justify-content: center;
    }

    .rail__actions {
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    .rail__foot .btn > span,
    .rail__foot .install__action > span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .rail:has(.rail__drawer-toggle[open]) .rail__drawer {
        animation: drawer-in var(--d-med) var(--ease-out);
    }

    .rail:has(.rail__drawer-toggle[open]) .rail__scrim {
        animation: scrim-in var(--d-med) var(--ease-out);
    }
}

@keyframes drawer-in {
    from {
        transform: translateX(-100%);
    }
}

@keyframes scrim-in {
    from {
        opacity: 0;
    }
}

@media (max-width: 599.98px) {
    .rail__brand .rail__sub {
        display: none;
    }
}

@media (min-width: 1200px) {
    .app {
        grid-template-columns: var(--rail-w) minmax(0, 1fr) auto;
        height: 100dvh;
        min-height: 0;
        padding-top: 0;
    }

    .main {
        overflow-y: auto;
    }

    .rail {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow-y: auto;
        background-color: var(--ink-1);
        border-right: 1px solid var(--rule);
    }

    .rail__brand {
        position: static;
        height: auto;
        padding: var(--s-5) var(--s-4) var(--s-4);
        background-color: transparent;
        border-bottom: 0;
    }

    .rail__drawer-toggle,
    .rail__scrim,
    .rail__drawer-head {
        display: none !important;
    }

    .rail__drawer {
        position: static;
        display: flex;
        flex: 1;
        width: auto;
        height: auto;
        padding: 0;
        overflow: visible;
        background-color: transparent;
        border-right: 0;
        box-shadow: none;
    }

    .rail__mode {
        padding: 0 var(--s-4);
    }

    .rail__body {
        padding: var(--s-4);
        overflow-y: visible;
    }

    .rail__body:has(> .conv-rail) {
        padding-inline: calc(var(--s-4) - var(--s-3));
    }

    .rail__body > .conv-rail {
        min-height: 0;
    }

    .rail__foot {
        margin-top: auto;
    }
}

/* Wide desktops give the reading column and the inspector more room. */
@media (min-width: 1560px) {
    :root {
        --col-max: 60rem;
        --inspector-w: 22.5rem;
    }
}

/* Installed with window-controls-overlay: the brand row is the title bar. Its empty space drags the window; controls stay clickable. */
@media (display-mode: window-controls-overlay) {
    .rail__brand {
        height: env(titlebar-area-height, var(--topbar-h));
        padding-left: max(var(--s-4), env(titlebar-area-x, 0));
        app-region: drag;
        -webkit-app-region: drag;
    }

    .rail__brand :is(a, button, summary, input, select, textarea) {
        app-region: no-drag;
        -webkit-app-region: no-drag;
    }
}