:root {
    --content-width: 1200px;
    --page-padding: 28px;
    --page-top: 24px;
    --page-bottom: 40px;
    --page-height: 100dvh;
}

.app-shell {
    --page-sheet-min-height: 100dvh;
}

.app-shell > .app-content {
    flex: 1 1 0%;
    width: 0;
    min-width: 0;
    max-width: none;
}

.web-shell > .app-content:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    background: var(--bg-2);
}

.web-shell > .main:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
}

.web-shell .topbar:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    display: none;
}

.page-layout {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
}

.page-layout:has(> :is(.page-flow, .page-rfq):not([hidden])) {
    max-width: none;
}

.home-container:not(.page-layout) {
    display: contents;
}

.page-sheet {
    box-sizing: border-box;
    border: 0;
    border-right: 1px solid var(--border-1);
    border-left: 1px solid var(--border-1);
    border-radius: 0;
    background: var(--surface);
}

.content-page:where(.app-shell, .app-shell *),
.page-sheet.studio-library {
    flex: 1;
    min-height: var(--page-sheet-min-height, 100dvh);
    padding: var(--page-top) var(--page-padding) var(--page-bottom);
}

.workspace.chat-shell > .app-content:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    flex: 1 1 0%;
    align-items: stretch;
    max-width: none;
    margin: 0;
    padding: 0;
}

.chat-shell :is(.chat-columns, .projects-page):where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    flex: 1 1 0%;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.chat-shell .chat-columns > .conversation:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    flex: 1 1 0%;
    width: auto;
    max-width: none;
}

.chat-columns > .conversation-list[data-topics-open]:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    --topic-strip-width: 76px;
    position: relative;
    min-width: 300px;
    overflow: hidden;
}

.chat-columns > .conversation-list[data-topics-open] > :not(.topic-column):where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    width: var(--topic-strip-width);
}

.chat-columns > .conversation-list > .topic-column:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    position: absolute;
    inset: 0 0 0 var(--topic-strip-width);
}

@media (prefers-reduced-motion: no-preference) {
    .chat-columns > .conversation-list > .topic-column:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
        animation: topic-column-in .16s cubic-bezier(.2, 0, 0, 1);
    }
}

@keyframes topic-column-in {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
}

:is(.flow-page, .rfq-page):where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 0;
    border: 0;
}

:is(.flow-page .flow-host, .rfq-page .rfq-host):where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    background: var(--surface);
}

:is(.flow-notice, .rfq-notice):where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

:is(.flow-notice, .rfq-notice) .secondary:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    padding: 7px 14px;
}

/*
 * Третья колонка шаблона (split-layout.js: [data-split-aside], openAside/closeAside/dock) —
 * справа от основной. Шаблон на flex — обычный элемент ряда; на grid — неявная колонка после
 * последней явной, шириной grid-auto-columns: так шаблону не нужно знать, есть ли у него третья.
 * Ширину (--split-aside-width) ставит split-layout.js в пределах, где основной остаётся contentMin.
 */
.split-layout > [data-split-aside]:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    grid-row: 1;
    grid-column: -1 / span 1;
    box-sizing: border-box;
    width: var(--split-aside-width, 360px);
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-left: 1px solid var(--border-1);
    background: var(--surface);
}

.split-layout > [data-split-aside][hidden]:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    display: none;
}

.split-layout[data-split-aside-open]:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
    grid-auto-columns: var(--split-aside-width, 360px);
}

@media (min-width: 769px) {
    .app-shell > .app-sidebar.sidebar {
        border-right: 1px solid var(--border-1);
    }

    .app-shell > .app-content {
        border-left: 0;
    }

}

@media (max-width: 768px) {
    :root {
        --page-padding: 16px;
        --page-top: 16px;
        --page-bottom: 32px;
        --page-height: calc(100dvh - 48px);
    }

    .app-shell {
        --page-sheet-min-height: calc(100dvh - 48px);
    }

    body:has(.mobile-bottom-nav) .app-shell {
        --page-sheet-min-height: 100dvh;
    }

    .app-shell[data-signed-in="false"] {
        --page-sheet-min-height: calc(100dvh - var(--guest-header-height, 48px));
    }

    .app-shell > .app-content {
        width: 100%;
    }

    .panel:where(.app-shell, .app-shell *) {
        padding: 16px;
    }

    body:has(.mobile-bottom-nav) .app-shell .content-page {
        padding-bottom: max(var(--page-bottom), var(--mobile-nav-height, 0px));
    }

    body:has(.mobile-bottom-nav) .page-sheet.page-flow .content,
    body:has(.mobile-bottom-nav) .page-sheet.page-rfq .rfq-content {
        padding-bottom: calc(40px + var(--mobile-nav-height, 0px));
    }

    body:has(.mobile-bottom-nav) .page-sheet.page-flow .sidebar,
    body:has(.mobile-bottom-nav) .page-sheet.page-rfq .rfq-sidebar {
        padding-bottom: calc(16px + var(--mobile-nav-height, 0px));
    }

    :is(.flow-page, .rfq-page):where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) {
        min-height: calc(100dvh - var(--mobile-nav-height, 0px));
    }
}