/* Оболочка: шапка с закладками, панели закладок, левая панель, «Откройте проект», меню «+»,
   вход. Размеры — по прототипу: шапка 48, левая панель 280; полосы колонки и центра — одна сетка
   `--am-bar-h` (TASK-366, tokens.css). */
.app { display: flex; flex-direction: column; height: 100vh; position: relative; }

/* шапка: лого шириной левой панели, закладки начинаются от её границы */
.appbar {
  display: flex; align-items: flex-end; height: var(--am-appbar-h); flex: 0 0 auto;
  background: var(--mat-sys-surface); border-bottom: 1px solid var(--mat-sys-outline-variant);
}
.appbar .brand {
  display: flex; align-items: center; gap: 8px; align-self: stretch;
  width: var(--am-side-w); flex: 0 0 var(--am-side-w); padding: 0 14px;
}
.appbar .brand b { font-size: 15px; font-weight: 500; white-space: nowrap; }
.logo { width: 24px; height: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; flex: 0 0 auto; }
.logo i { border-radius: 4px; background: var(--mat-sys-on-surface-variant); }
.logo i:nth-child(4) { background: var(--mat-sys-primary); }

.tabstrip {
  display: flex; align-items: flex-end; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none;
  height: calc(100% + 1px); margin-bottom: -1px; margin-left: -1px; position: relative; z-index: 1;
}
.tabstrip::-webkit-scrollbar { display: none; }
.ptab {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; flex: 0 0 auto;
  min-width: 140px; max-width: 230px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
  color: var(--mat-sys-on-surface-variant); background: transparent; cursor: pointer; font-size: 13px; position: relative;
}
.ptab:hover { background: var(--mat-sys-surface-container-high); }
/* активная перекрывает нижнюю линию шапки и переходит в рабочую область одним листом */
.ptab.on {
  height: 37px; background: var(--mat-sys-surface); color: var(--mat-sys-on-surface);
  border-color: var(--mat-sys-outline-variant); box-shadow: 0 1px 0 var(--mat-sys-surface);
}
.ptab .pname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ptab .kind { display: flex; color: var(--mat-sys-on-surface-variant); }
.ptab .kind svg { width: 16px; height: 16px; }
.ptab.on .need { background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }
.ptab .x {
  width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; flex: 0 0 auto;
  color: var(--mat-sys-on-surface-variant); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ptab .x:hover { background: var(--mat-sys-surface-container-highest); color: var(--mat-sys-on-surface); }
.ptab .x svg { width: 16px; height: 16px; }
.addtab {
  width: 36px; height: 36px; margin: 0 0 2px 4px; border: 0; border-radius: 50%; background: transparent; flex: 0 0 auto;
  color: var(--mat-sys-on-surface-variant); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.addtab:hover, .addtab[aria-expanded="true"] { background: var(--mat-sys-surface-container-high); color: var(--mat-sys-on-surface); }
.appbar .right { display: flex; align-items: center; gap: 2px; height: 100%; margin-left: auto; padding-right: 8px; flex: 0 0 auto; }
.appbar .right .btn-text, .appbar .right .icon-btn { color: var(--mat-sys-on-surface-variant); }
.appbar .right .btn-text { height: 32px; }
.appbar .right .on { background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }

/* рабочая область */
.tabbody { flex: 1 1 auto; display: flex; min-height: 0; }
.tabpane { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; }
.center { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.toolbar {
  display: flex; align-items: center; gap: 8px; height: var(--am-bar-h); min-height: var(--am-bar-h); padding: 0 16px;
  border-bottom: 1px solid var(--mat-sys-outline-variant); flex: 0 0 auto;
}
.toolbar h1 { font-size: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar .grow { flex: 1 1 auto; }
.center-body { flex: 1 1 auto; overflow: auto; min-height: 0; }

/* Каркас закладки проекта (TASK-284): панель инструментов вида, центр и части видов. Собирают его
   views/project/index.js и backlog_project.js; правила жили в agent.css, artifacts.css, tasks.css и
   pipeline.css — у бэклог-проекта этих видов нет, и без них прокручивалась вся страница. */
.tb-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* место инструментов вида растягивается, чтобы кнопки вида («Фильтры», «Новая задача») ушли вправо */
.toolbar > .tb-left { flex: 1 1 auto; }
.toolbar > .tb-left + .grow { flex: 0 0 0; }
.view-bar { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.view-bar .btn-sm { height: 32px; padding: 0 14px; }
.view-bar .btn-text.btn-sm { height: 28px; padding: 0 8px; }
/* строка режима проекта разработки (TASK-308): разделы режима, справа «Конвейер» и «Артефакты».
   Высота и граница — как у панели вида; инструменты раздела — второй строкой (.toolbar), в
   «Разработке» её нет. Активный раздел подчёркнут. Режим — тумблер в левой колонке (TASK-311, ниже). */
.mode-bar {
  display: flex; align-items: center; gap: 8px; height: var(--am-bar-h); min-height: var(--am-bar-h); padding: 0 16px;
  border-bottom: 1px solid var(--mat-sys-outline-variant); flex: 0 0 auto; min-width: 0;
}
.mode-bar .grow { flex: 1 1 auto; }
.mode-bar .vsep { width: 1px; align-self: stretch; margin: 10px 4px; background: var(--mat-sys-outline-variant); flex: 0 0 auto; }
.sec-tabs { display: flex; align-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sec-tabs::-webkit-scrollbar { display: none; }
.sec {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; flex: 0 0 auto; white-space: nowrap;
  border: 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; background: transparent;
  color: var(--mat-sys-on-surface-variant); font-weight: 500; font-size: 13px; cursor: pointer;
}
.sec svg { width: 16px; height: 16px; fill: currentColor; }
.sec:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); }
.sec:focus-visible { outline: 2px solid var(--mat-sys-primary); outline-offset: -2px; }
.sec.on { color: var(--mat-sys-primary); border-bottom-color: var(--mat-sys-primary); }
.sec[data-section='chat'] .sec-label { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.sec-count {
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center;
  background: var(--mat-sys-surface-container-highest); color: var(--mat-sys-on-surface-variant);
}
.toolbar.tools-dev { display: none; }
.pipe-bar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pipe-bar:empty { display: none; }
.view-bar.pipe-bar { flex: 0 0 auto; }
.project-main { flex: 1 1 auto; display: flex; min-height: 0; min-width: 0; position: relative; }
.project-main > .project-body { flex: 1 1 auto; min-width: 0; }
.project-body { display: flex; flex-direction: column; overflow: hidden; }
.project-body > .part { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
/* Документный проект (TASK-254): центр — только чат; панель артефактов (TASK-253) — рядом, в .project-main. */
.docs-body > .part { min-width: 0; }
.section { max-width: 720px; padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.section h3 { font-size: 15px; }
.section p { margin: 0; }

/* тумблер режимов проекта разработки (TASK-311, прототип prototype_mode_switch.html, вариант A):
   капсула во всю ширину левой колонки над заголовком проекта, «дорожка» surface-container-highest с
   обводкой outline-variant, две равные половины; ползунок primary переезжает transform'ом. Колонку
   сужают (side_width.js) — когда подписи не помещаются, остаются значки (имя — aria-label/title).
   Полоса — напротив строки режима, поэтому той же высоты (TASK-366). Отступ снизу считается вместе с
   линией: сверху и снизу поровну и целым числом, иначе на масштабе 1 тумблер садится на полпикселя. */
.mode-wrap {
  height: var(--am-bar-h); padding: calc((var(--am-bar-h) - var(--am-switch-h)) / 2) 12px 0;
  border-bottom: 1px solid var(--mat-sys-outline-variant); flex: 0 0 auto; container-type: inline-size;
}
.mode-switch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; height: var(--am-switch-h); padding: 4px;
  border-radius: calc(var(--am-switch-h) / 2);
  background: var(--mat-sys-surface-container-highest); box-shadow: inset 0 0 0 1px var(--mat-sys-outline-variant);
}
.mode-switch .thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: calc(var(--am-switch-h) / 2 - 4px);
  background: var(--mat-sys-primary); box-shadow: var(--am-elev-1); transition: transform .22s cubic-bezier(.2, 0, 0, 1);
}
.mode-switch[data-mode='mgmt'] .thumb { transform: translateX(100%); }
.mode-switch button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  padding: 0 4px; border: 0; border-radius: calc(var(--am-switch-h) / 2 - 4px); background: transparent; color: var(--mat-sys-on-surface-variant);
  font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .22s;
}
.mode-switch button svg { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }
.mode-switch button[aria-checked='true'] { color: var(--mat-sys-on-primary); }
.mode-switch button:focus-visible { outline: 2px solid var(--mat-sys-primary); outline-offset: 2px; }
.ms-label { overflow: hidden; text-overflow: clip; }
@container (width < 240px) { .mode-switch .ms-label { display: none; } }
/* компактная копия в строке над центром — только на телефоне, пока колонка скрыта (ниже) */
.mode-switch-mini { --am-switch-h: 40px; display: none; flex: 0 0 auto; width: 92px; }
.mode-switch-mini .ms-label { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mode-switch .thumb, .mode-switch button { transition: none; }
}

/* левая панель закладки */
.side {
  flex: 0 0 var(--am-side-w); width: var(--am-side-w); display: flex; flex-direction: column; min-height: 0;
  background: var(--mat-sys-surface-container-high); border-right: 1px solid var(--mat-sys-outline-variant);
  position: relative;
}
/* сплиттер на правой границе (ui/splitter.js): полоса 8px поверх границы, линия видна при наведении */
.splitter {
  position: absolute; top: 0; bottom: 0; right: -5px; width: 9px; z-index: 5; cursor: col-resize;
  touch-action: none; outline: none;
}
.splitter::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px; border-radius: 2px;
  background: transparent; transition: background-color .12s;
}
.splitter:hover::after, .splitter:focus-visible::after,
.is-col-resizing .splitter::after, .is-row-resizing .splitter::after {
  background: var(--mat-sys-primary);
}
/* Горизонтальная ручка в flex-колонке: отрицательные поля оставляют её поверх границы,
   не отнимая высоту у разделов. */
.splitter[aria-orientation='horizontal'] {
  position: relative; inset: auto; flex: 0 0 9px; width: auto; height: 9px; margin: -4px 0 -5px;
  cursor: row-resize;
}
.splitter[aria-orientation='horizontal']::after {
  inset: 3px 0 auto; width: auto; height: 3px;
}
.is-col-resizing, .is-col-resizing * { cursor: col-resize !important; user-select: none; }
.is-row-resizing, .is-row-resizing * { cursor: row-resize !important; user-select: none; }
@media (max-width: 480px) {
  .splitter { display: none; }
  /* на телефоне колонки по одной, ровнять полосы не с чем: тумблер прежний, высота — по нему */
  .mode-wrap { height: auto; padding: 12px; }
  /* шапка на телефоне (TASK-270): лого без подписи, закладки листаются внутри ряда, «Каталог» — значком */
  .appbar .brand { width: auto; flex: 0 0 auto; padding: 0 8px 0 12px; }
  .appbar .brand b { display: none; }
  .tabstrip { flex: 1 1 auto; }
  .ptab { min-width: 0; max-width: 180px; }
  .appbar .right { padding-right: 4px; }
  .appbar .right .btn-text { padding: 0 8px; }
  .appbar .right .btn-text > span { display: none; }
  /* строка режима (TASK-308): режимы — значками (подпись остаётся именем кнопки для чтеца экрана),
     разделы листаются внутри строки; «назад» открытого чата — второй строкой, как прежде */
  /* строка не шире центра: в виде «Агент» центр рядом с колонкой агентов узкий — строка листается
     сама, страница вбок не уезжает; «Конвейер» — значком (и счётчиком «ждут вас») */
  .mode-bar { padding: 0 8px; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .mode-bar::-webkit-scrollbar { display: none; }
  .sec-tabs { flex: 1 1 auto; min-width: 96px; }
  .mode-bar .pipe-toggle button { font-size: 0; gap: 4px; padding: 0 10px; }
  /* лента конвейера — тоже в ширину центра (листается своими стрелками), без неё страница уезжала */
  .center > .ribbon { min-width: 0; overflow: hidden; }
  /* тумблер режимов (TASK-311): вид «Управления» закрывает колонку — копия значками первой в строке */
  .tabpane:is(.tasks-open, .backlog-open) .mode-switch-mini { display: grid; }
  .sec { padding: 0 10px; }
  .sec[data-section='chat'] .sec-label { max-width: 140px; }
  .tabpane.chat-open .toolbar.tools-dev { display: flex; }
}
.side-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.side-head {
  display: flex; align-items: center; gap: 10px; height: var(--am-bar-h); padding: 0 8px 0 14px; flex: 0 0 auto;
  border-bottom: 1px solid var(--mat-sys-outline-variant);
}
.side-head .t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.side-head .t b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-head .t span { font-size: 12px; color: var(--mat-sys-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--am-sub-h); padding: 0 16px;
  border-bottom: 1px solid var(--mat-sys-outline-variant); font-size: 12px; font-weight: 500;
  color: var(--mat-sys-on-surface-variant); white-space: nowrap; flex: 0 0 auto;
}
.side-scroll { flex: 1 1 auto; overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.side-soon { margin: 10px 8px; font-size: 12px; }
.pico {
  width: 24px; height: 24px; border-radius: var(--am-corner-s); display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; color: var(--mat-sys-on-surface-variant);
}
.pico svg { width: 18px; height: 18px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--am-corner-s);
  background: transparent; color: var(--mat-sys-on-surface); text-align: left; cursor: pointer; font-size: 13px;
}
.nav-item svg { width: 20px; height: 20px; color: var(--mat-sys-on-surface-variant); }
.nav-item:hover { background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); }
.nav-item.on { background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); font-weight: 500; }
.nav-item.on svg { color: inherit; }

/* пользователь и выход внизу левой панели */
.ufoot {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; flex: 0 0 auto;
  border-top: 1px solid var(--mat-sys-outline-variant);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); font-weight: 500; font-size: 12px;
}
.ufoot .d { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.ufoot .d b { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ufoot .d span { font-size: 11px; color: var(--mat-sys-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* весь подвал — кнопка меню аккаунта (TASK-308); геометрия прежняя: поля 10/8/10/14, «⋮» на месте
   прежнего значка выхода 36×36 */
.ufoot { padding: 4px; }
.ufoot-btn {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 6px 4px 6px 10px;
  border: 0; border-radius: var(--am-corner-s); background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.ufoot-btn:hover, .ufoot-btn[aria-expanded='true'] { background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent); }
.ufoot-btn:focus-visible { outline: 2px solid var(--mat-sys-primary); outline-offset: -2px; }
.ufoot-more {
  width: 36px; height: 36px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  color: var(--mat-sys-on-surface-variant);
}
.ufoot-more svg { width: 20px; height: 20px; fill: currentColor; }
.acct-menu { min-width: 0; }
.acct-menu .acct-logout, .acct-menu .acct-logout svg { color: var(--mat-sys-error); fill: var(--mat-sys-error); }

/* «Откройте проект» */
.home { flex: 1 1 auto; overflow: auto; padding: 40px 24px; }
.home-in { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.home-in h2 { font-size: 22px; font-weight: 400; margin-bottom: 6px; }
.home-in .lead { margin: 0; font-size: 14px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pcard {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--am-corner-m);
  background: var(--mat-sys-surface-container-lowest); border: 1px solid var(--mat-sys-outline-variant);
  cursor: pointer; text-align: left; color: inherit;
}
.pcard:hover { background: var(--mat-sys-surface-container-low); }
.pcard-head { display: flex; gap: 10px; align-items: center; }
.pcard-head b { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-need { font-size: 12px; color: var(--mat-sys-primary); font-weight: 500; }
.pcard-new { border-style: dashed; align-items: center; justify-content: center; flex-direction: row; color: var(--mat-sys-primary); }
.pcard-new b { font-weight: 500; }

/* меню «+» */
.popover { width: 340px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; }
.popover .search { padding: 12px; border-bottom: 1px solid var(--mat-sys-outline-variant); --field-bg: var(--mat-sys-surface-container-lowest); }
.popover .list { overflow-y: auto; padding: 6px; }
.popover .foot { border-top: 1px solid var(--mat-sys-outline-variant); padding: 6px; }
.popover .nothing { padding: 12px; }
.pitem {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0;
  border-radius: var(--am-corner-s); background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.pitem:hover, .pitem:focus-visible { background: var(--mat-sys-surface-container-high); outline: none; }
.pitem .txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pitem .txt b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem .txt span { font-size: 12px; color: var(--mat-sys-on-surface-variant); }
.pitem .open { font-size: 11px; color: var(--mat-sys-primary); font-weight: 500; }

/* вход: существующая страница входа поверх оболочки */
/* вход (TASK-303): своя страница входа поверх оболочки — e-mail → код из письма */
#login-overlay {
  position: fixed; inset: 0; z-index: 100; background: var(--mat-sys-surface);
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
}
.login-box {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 16px;
  padding: 32px 24px; border-radius: 16px; background: var(--mat-sys-surface-container);
}
.login-title { margin: 0; font-size: 22px; font-weight: 400; text-align: center; color: var(--mat-sys-on-surface); }
.login-step { display: flex; flex-direction: column; gap: 12px; }
.login-step[hidden] { display: none; }
.login-input {
  height: 40px; padding: 0 14px; border-radius: 4px; font: inherit; font-size: 15px;
  border: 1px solid var(--mat-sys-outline); background: transparent; color: var(--mat-sys-on-surface);
}
.login-input:focus { outline: none; border: 2px solid var(--mat-sys-primary); padding: 0 13px; }
.login-hint { font-size: 13px; color: var(--mat-sys-on-surface-variant); overflow-wrap: anywhere; }
.login-error { font-size: 13px; color: var(--mat-sys-error); }

/* режим направления (экспорт `appbar.band`): полоса вместо закладок, нижняя граница шапки акцентная */
.appbar.is-mode { box-shadow: inset 0 -3px 0 var(--mat-sys-tertiary); }
.mode-band {
  display: flex; align-items: center; gap: 10px; align-self: center; min-width: 0; flex: 1 1 auto;
  padding: 0 12px; font-size: 14px;
}
.mode-band > svg { width: 20px; height: 20px; fill: var(--mat-sys-tertiary); flex: 0 0 auto; }
.mode-band b { font-weight: 500; white-space: nowrap; }
.mode-band .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode-band .btn-text { margin-left: 8px; height: 32px; }