/*
 * ШАБЛОНЫ СТРАНИЦ — единственное место, где живёт их геометрия.
 *
 * Два шаблона: одна колонка (.content-page) и две (.chat-columns, .projects-page).
 * Здесь оболочка, лист, отступы и точки перелома; что нарисовано ВНУТРИ шаблона —
 * в файле своей страницы или компонента. Раньше это лежало в четырёх файлах сразу
 * (ui.css, layout.css, page-layout.css и не применявшийся content-pages.css), и правка
 * отступа требовала обойти их все.
 */
:root {
 --content-width:1200px;
 --page-padding:28px;
 --page-top:24px;
 --page-bottom:40px;
 --page-height:100dvh;
 --page-background:var(--bg-soft);
 --page-paper:var(--surface);
 --page-border:1px solid var(--border);
}
.app-shell > .app-content { flex:1 1 0%; min-width:0; 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(--page-background); }
.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; }
/* Home in chat layout: the container adds no box, chat columns stay direct flex items of .main. */
.home-container:not(.page-layout) { display:contents; }
.page-sheet {
 box-sizing:border-box;
 background:var(--page-paper);
 border:0;
 border-left:var(--page-border);
 border-right:var(--page-border);
 border-radius:0;
}
/* Chat does not use the page container. */
.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%; max-width:none; margin:0; padding:0; align-items:stretch; }
.chat-shell .chat-columns:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) { width:100%; max-width:none; flex:1 1 0%; align-self:stretch; 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-shell .projects-page:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) { width:100%; max-width:none; flex:1 1 0%; align-self:stretch; margin:0; padding:0; }
@media(max-width:768px) {
 :root { --page-padding:16px; --page-top:16px; --page-bottom:32px; --page-height:calc(100dvh - 48px); }
 .app-shell > .app-content { width:100%; }
 .panel:where(.app-shell, .app-shell *) { padding:16px; }
}

/* Раздел «Задачи»: сервис на отдельном домене, рамка занимает всю рабочую область. */
.tasks-page:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) { padding: 0; display: flex; flex-direction: column; min-height: 0; }
.tasks-page #tasks-frame:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) { flex: 1; width: 100%; min-height: calc(100dvh - 96px); border: 0; display: block; background: var(--surface); }
@media (max-width: 768px) { .tasks-page #tasks-frame:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) { min-height: calc(100dvh - 140px); } }

/* Раздел «Flow» (ADR-067): интерфейс Flow монтируется в #flow-host (Shadow DOM) и занимает всю рабочую область. */
.page-layout:has(> #flow-section:not([hidden])) { max-width:none; }
/* Высота раздела растёт вместе с содержимым Flow: страница прокручивается целиком. */
.flow-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; }
.flow-page .flow-host:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) { flex:1 0 auto; min-width:0; width:100%; display:flex; flex-direction:column; background:var(--surface); }
.flow-notice:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.flow-notice .secondary:where(.app-shell, .app-shell *, .page-layout, .page-layout *, .page-sheet, .page-sheet *, .home-container, .home-container *) { padding:7px 14px; }
@media (max-width: 768px) {
 .flow-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)); }
}
/* Full-width workspaces own their seam; ordinary pages use the sheet borders. */
@media(min-width:769px){
 .app-shell>.app-sidebar.sidebar{border-right:0}
 .app-shell>.app-content{border-left:1px solid var(--border)}
 .app-shell.web-shell>.app-content{border-left:0}
}

/* ── Шаблон «одна колонка» ───────────────────────────────────────────
   Отступ тот же, что у содержательной колонки двухколончатого шаблона. */
.content-page:where(.app-shell, .app-shell *), .page-sheet.studio-library { min-height:var(--page-sheet-min-height, 100dvh); flex:1; padding:var(--page-top) var(--page-padding) var(--page-bottom); }

/* The sheet includes its own padding; mobile bars must not add a second viewport. */
.app-shell { --page-sheet-min-height:100dvh; }
@media(max-width:768px) {
 .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)); }
 body:has(.mobile-bottom-nav) .app-shell .content-page { padding-bottom:max(var(--page-bottom), var(--mobile-nav-height, 0px)); }
}