/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Оболочка пульта: шапка (вкладки сервиса, расход и лимиты, аккаунт, тема), левое меню, нижняя панель на телефоне,
   второй уровень внутри проекта. Значения — только из tokens.css. Раскладка: 390 — одна колонка и нижняя панель,
   с 1024 — меню 15rem и экран. */

.app { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.side { display: none; }
.stage { min-width: 0; display: flex; flex-direction: column; }
#main { flex: 1; min-width: 0; padding: var(--space-6) var(--layout-container-gutter) calc(var(--layout-tabbar) + var(--space-12) + env(safe-area-inset-bottom)); outline: none; }
.screen { max-width: var(--layout-container-max); }

/* ---------- Шапка ---------- */
.top {
  position: relative; z-index: var(--z-nav);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--layout-container-gutter);
  background: var(--color-glass); backdrop-filter: blur(var(--space-4)); -webkit-backdrop-filter: blur(var(--space-4));
  border-bottom: 1px solid var(--color-line);
}
.top__brand, .brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; min-height: var(--size-touch-min); }
.brand__mark { width: var(--size-logo); height: var(--size-logo); color: var(--color-logo); }
.brand__word { font: var(--weight-medium) var(--text-h3-size)/1 var(--font-head); letter-spacing: var(--text-h3-track); }
.top__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
/* Строка расхода и лимитов. Телефон: два столбца — расход (две строки) и чипы лимитов (столбиком, каждый в одну строку).
   От 768 — отдельная строка под вкладками: расход слева, чипы справа. От 80rem — одна строка шапки: вкладки слева, расход и чипы справа.
   Блок — контейнер: при нехватке места уходят слова, затем подпись чипа моделей, затем сам чип (@container money ниже); чипы не переносятся. */
.top__money {
  flex: 1 0 100%; min-width: 0; container: money / inline-size;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-4);
}

/* Вкладки сервиса: «Проекты» (этот сайт) и «Кабинет» (lk) */
.svc__list { display: flex; gap: var(--space-1); }
.svc__a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--size-touch-min); padding: 0 var(--space-3);
  color: var(--color-ink2); text-decoration: none; font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/1 var(--font-sans);
  transition: color var(--duration-fast) var(--ease-out);
}
.svc__a:hover { color: var(--color-ink); }
.svc__a[aria-current="page"] { color: var(--color-ink); }
.svc__a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0;
  height: var(--size-focus-width); border-radius: var(--radius-pill); background: var(--color-acc);
}

/* Токены: «Сегодня: 340 тыс. токенов», «Неделя: 2,1 млн токенов» — каждая пара в одну строку, не рвётся */
.spendbox { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.spend {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0 var(--space-1); white-space: nowrap;
  font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-num); font-variant-numeric: var(--num-features);
}
.spend__k { color: var(--color-ink2); }
.spend__v { color: var(--color-ink); font-weight: var(--weight-medium); }

/* Лимиты подписки Claude: значок + слово + цифра «осталось»; цвет только усиливает. Подсказка — по наведению, фокусу, нажатию, Esc. */
.lims { display: flex; flex-direction: column; align-items: stretch; justify-self: end; gap: var(--space-2); min-width: 0; max-width: 100%; }
.lim { --p-bg: var(--color-ok-soft); --p-fg: var(--color-ok-soft-text); }
.lim[data-tone="warn"] { --p-bg: var(--color-warn-soft); --p-fg: var(--color-warn-soft-text); }
.lim[data-tone="danger"] { --p-bg: var(--color-danger-soft); --p-fg: var(--color-danger-soft-text); }
.lim__b {
  display: flex; width: 100%; align-items: center; gap: var(--space-2); min-height: var(--size-touch-min); padding: 0 var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--p-bg); color: var(--p-fg); cursor: pointer;
  font: var(--weight-medium) var(--text-caption-size)/1 var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.lim { min-width: 0; }
.lim__b { max-width: 100%; }
.lim__b:hover { border-color: currentColor; }
.lim__b .ic { width: 1rem; height: 1rem; }
.lim__t { display: inline-flex; flex-direction: row; align-items: baseline; gap: 0; white-space: nowrap; }
.lim__tip {
  display: none; position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: var(--z-overlay);
  width: min(calc(var(--space-16) * 5), calc(100vw - var(--space-6))); gap: var(--space-2); padding: var(--space-4);
  background: var(--color-panel); color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.lim__tip::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--space-2) * -1); height: var(--space-2); }
.lim__tip .link { justify-self: start; }
/* Расход по моделям: нейтральный чип, полоска долей и подпись «Opus N % · Sonnet M %»; при нехватке места остаётся полоска, на телефоне чипа нет. */
.lim[data-tone="neutral"] { --p-bg: var(--color-panel); --p-fg: var(--color-ink2); }
.lim--models .lim__b { border-color: var(--color-line2); }
.lim--models .lim__b { width: auto; }
.mbar { width: 3.25rem; height: var(--space-2); border-radius: var(--radius-pill); overflow: hidden; background: var(--color-panel2); flex: none; }
.mbar rect[data-m="opus"], .mdot[data-m="opus"] { fill: var(--color-model-opus); background: var(--color-model-opus); }
.mbar rect[data-m="sonnet"], .mdot[data-m="sonnet"] { fill: var(--color-model-sonnet); background: var(--color-model-sonnet); }
.mbar rect[data-m="haiku"], .mdot[data-m="haiku"] { fill: var(--color-model-haiku); background: var(--color-model-haiku); }
.mbar rect[data-m="other"], .mdot[data-m="other"] { fill: var(--color-ink3); background: var(--color-ink3); }
.lim__tip--models { width: min(calc(var(--space-16) * 5), calc(100vw - var(--space-6))); }
.mlist { display: grid; gap: var(--space-2); margin: var(--space-1) 0; }
.mlist li { display: grid; grid-template-columns: var(--space-2) minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); }
.mlist .mono { color: var(--color-ink); text-align: right; min-width: calc(var(--space-10) + var(--space-1)); }
.mlist .caption { color: var(--color-ink3); text-align: right; min-width: calc(var(--space-16) * 2); }
.mdot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); }
/* Телефон (блок уже 30rem): чипа моделей нет. От 768 строка расхода одна, и слова уходят по мере нехватки места:
   блок уже 50rem — «осталось» и «токенов»; уже 40rem — полоска в чипе моделей (остаётся подпись); уже 34rem — подпись (остаётся полоска;
   доли, токены и названия — в aria-label и подсказке). Пороги подобраны по замеру: на 1024, 1280 и 1440 строка не шире блока. */
@container money (max-width: 30rem) { .lim--models { display: none; } }
@media (min-width: 768px) {
  @container money (max-width: 50rem) { .lim__w, .spend__u { display: none; } }
  @container money (max-width: 40rem) { .lim--models .mbar { display: none; } }
  @container money (max-width: 34rem) { .lim--models .mbar { display: block; } }
  @container money (max-width: 34rem) { .lim--models .lim__t { display: none; } }
}
/* Совсем тесно (телефон не в счёт: там чипы столбиком): у чипов лимитов остаётся «5 ч: 38 %», слово «осталось» — в подсказке и aria-label. */

.lim.is-open .lim__tip, .lim:not(.is-dismissed):focus-within .lim__tip { display: grid; }
@media (hover: hover) {
  .lim:not(.is-dismissed):hover .lim__tip { display: grid; }
}

/* Аккаунт */
.acct { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch-min); }
.acct__ava {
  display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round);
  background: var(--color-acc-soft); color: var(--color-acc-soft-text); font-weight: var(--weight-medium);
}
.acct__name {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  font: var(--text-ui-strong-weight) var(--text-ui-size)/1 var(--font-sans);
}

/* Переключатель темы */
.sw {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-touch-min); padding: 0 var(--space-2); border-radius: var(--radius-pill);
  border: 1px solid var(--color-line2); background: transparent; color: var(--color-ink); cursor: pointer;
  font: var(--weight-regular) var(--text-caption-size)/1 var(--font-sans);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.sw:hover { border-color: var(--color-ink); }
.sw__label { display: none; white-space: nowrap; }
.sw__track { position: relative; width: var(--space-10); height: var(--space-6); border-radius: var(--radius-pill); background: var(--color-ink3); transition: background-color var(--duration-base) var(--ease-out); flex: none; }
.sw__thumb { position: absolute; left: calc(var(--space-1) / 2); top: calc(var(--space-1) / 2); width: var(--space-5); height: var(--space-5); border-radius: var(--radius-round); background: var(--color-panel); transition: transform var(--duration-base) var(--ease-out); }
.sw[aria-checked="true"] .sw__track { background: var(--color-acc); }
.sw[aria-checked="true"] .sw__thumb { transform: translateX(var(--space-4)); background: var(--color-on-acc); }
.sw__sun { display: none; }
html[data-theme="light"] .sw__sun { display: block; }
html[data-theme="light"] .sw__moon { display: none; }

/* ---------- Левое меню (уровень 1) ---------- */
.nav__list { display: grid; gap: var(--space-1); }
.nav__a {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  min-height: var(--size-control-sm); padding: 0 var(--space-3); border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-ink2); font: var(--weight-medium) var(--text-ui-size)/1 var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.nav__a:hover { background: var(--color-panel2); color: var(--color-ink); }
.nav__a[aria-current="page"] { background: var(--color-panel2); color: var(--color-ink); }
.nav__a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: var(--space-2); bottom: var(--space-2); width: var(--space-1); border-radius: var(--radius-pill); background: var(--color-acc); }
.nav__a:focus-visible { outline-offset: calc(var(--size-focus-offset) * -1); }

/* Круглый счётчик «Решения · N»: цифра, не статус */
.count {
  display: inline-grid; place-items: center; min-width: var(--space-6); height: var(--space-6); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--color-acc); color: var(--color-on-acc);
  font: var(--weight-medium) var(--text-caption-size)/1 var(--font-sans);
}

/* ---------- Нижняя панель (390): Проекты · Решения · Новая задача · Ещё ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  height: calc(var(--layout-tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-glass); backdrop-filter: blur(var(--space-4)); -webkit-backdrop-filter: blur(var(--space-4));
  border-top: 1px solid var(--color-line);
}
.tabbar__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: var(--layout-tabbar); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); height: 100%; min-width: var(--size-touch-min); text-decoration: none; color: var(--color-ink2); }
.tab__t { font: var(--weight-medium) var(--text-label-size)/1 var(--font-sans); white-space: nowrap; }
.tab__ic { position: relative; display: block; }
.tab__ic .count { position: absolute; left: 70%; top: calc(var(--space-3) * -1); }
.tab[aria-current="page"] { color: var(--color-ink); }
.tab[aria-current="page"] .tab__ic .ic { color: var(--color-acc-text); }
.tab[aria-current="page"] .tab__t::after { content: ""; display: block; height: var(--size-focus-width); margin-top: var(--space-1); background: var(--color-acc); border-radius: var(--radius-pill); }

/* ---------- Внутри проекта (уровень 2) ---------- */
.pframe { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
/* Заголовок экрана внутри проекта — меньше обычного: главное здесь вкладки и содержимое. */
.screen[data-screen="project"] .page-title { font-size: clamp(1.625rem, 1.3rem + 0.8vw, 2.125rem); letter-spacing: -0.02em; line-height: 1.15; }
.pback { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; min-height: var(--size-touch-min); color: var(--color-acc-text); text-decoration: none; font: var(--text-ui-strong-weight) var(--text-ui-size)/1 var(--font-sans); }
.pback:hover { text-decoration: underline; }
.crumbs { display: none; }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); color: var(--color-ink2); }
.crumbs__list li + li::before { content: "/"; margin-right: var(--space-2); }
.crumbs__list a { display: inline-flex; align-items: center; min-height: var(--size-touch-min); color: var(--color-ink2); }
.crumbs__list [aria-current="page"] { color: var(--color-ink); }
/* Вкладки проекта — спокойный сегментированный ряд-пилюля; активная вкладка залита цветом текста. Высота ряда не зависит от вкладки. */
.ptabs { min-width: 0; overflow-x: auto; }
.ptabs__list { display: flex; width: max-content; min-width: 100%; gap: calc(var(--space-1) / 2); padding: var(--space-1); border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-panel); }
.ptab {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--size-touch-min);
  min-height: calc(var(--size-touch-min) - var(--space-2)); padding: 0 var(--space-3); border-radius: var(--radius-pill);
  color: var(--color-ink2); text-decoration: none; white-space: nowrap; font: var(--weight-medium) var(--text-caption-size)/1 var(--font-sans);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
/* Область касания — не меньше 44 px по высоте при визуально компактной вкладке. */
.ptab::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--space-1) * -1); bottom: calc(var(--space-1) * -1); }
.ptabs__list li { flex: 1 1 auto; display: flex; }
.ptab { flex: 1 1 auto; }
.ptab:hover { background: var(--color-panel2); color: var(--color-ink); }
.ptab[aria-current="page"] { background: var(--color-ink); color: var(--color-bg); }
.ptab__short { display: none; }

/* ---------- Экран «Ещё» ---------- */
.more { display: grid; gap: var(--space-5); justify-items: start; }
.more__list { width: 100%; max-width: var(--layout-narrow); }
.more__list > li { padding: 0; }
.more__a { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--size-control); padding: var(--space-3) var(--space-5); text-decoration: none; }

/* ---------- Телефон: до 767 ---------- */
@media (max-width: 767.98px) {
  .ptab__full { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ptab__short { display: inline; }
}
@media (max-width: 430px) {
  .top__brand { display: none; }
  /* пилюли лимитов не выходят за экран: текст переносится */
  .lims, .lim { min-width: 0; max-width: 100%; }
  .lim__b { white-space: normal; min-width: 0; line-height: 1.2; padding-block: var(--space-1); overflow: hidden; }
  .lim__t { white-space: normal; flex-wrap: wrap; min-width: 0; }
}

/* ---------- Планшет и шире: от 768 ---------- */
@media (min-width: 768px) {
  .top__money { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .spendbox { flex-direction: column; align-items: flex-start; gap: 0; flex: none; }
  .lims { flex-direction: row; align-items: center; justify-self: auto; justify-content: flex-end; flex: 0 1 auto; gap: var(--space-2); }
  .lim { position: relative; flex: 0 1 auto; }
  .lim__b { width: auto; }
  .lim__tip { left: auto; right: 0; }
  .crumbs { display: block; }
  .pback { display: none; }
  .ptabs { overflow-x: visible; }
  .ptabs__list { min-width: 0; }
  .ptabs__list li, .ptab { flex: 0 1 auto; }
  .ptab { padding: 0 var(--space-4); font-size: var(--text-caption-size); }
}

/* ---------- Рабочий стол: от 1024, меню 15rem ---------- */
@media (min-width: 1024px) {
  .app { grid-template-columns: var(--layout-sidebar) minmax(0, 1fr); }
  .side {
    display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    padding: var(--space-5) var(--space-3) var(--space-4); border-right: 1px solid var(--color-line); background: var(--color-bg2);
  }
  .side .brand { padding: var(--space-2) var(--space-3) var(--space-4); }
  .side__foot { margin-top: auto; display: grid; gap: var(--space-3); }
  .tabbar { display: none; }
  .top__brand { display: none; }
  #main { padding-top: var(--space-10); padding-bottom: var(--space-16); }
}

/* ---------- Чат проекта на широком экране: окно своей высоты ----------
   Окно = высота экрана минус шапка и вкладки; прокручивается только переписка, поле ввода — внизу окна.
   Страница не листается и не меняет ширину (scrollbar-gutter в base.css), поэтому вкладки стоят на одном месте на любой вкладке.
   Высоту задаёт раскладка (flex), а не скрипт: ничего не пересчитывается при смене размера окна. */
@media (min-width: 45.0625rem) {
  .app[data-view="chat"] { height: 100dvh; grid-template-rows: minmax(0, 1fr); overflow: clip; }
  .app[data-view="chat"] .stage { height: 100dvh; min-height: 0; }
  .app[data-view="chat"] #main {
    display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: calc(var(--layout-tabbar) + var(--space-4) + env(safe-area-inset-bottom));
  }
  .app[data-view="chat"] .pframe { flex: none; }
  .app[data-view="chat"] .host, .app[data-view="chat"] .screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .app[data-view="chat"] .screen > * { flex: 1 1 auto; min-height: 0; }
}
@media (min-width: 64rem) {
  .app[data-view="chat"] #main { padding-bottom: var(--space-4); }
}

/* ---------- Широкая шапка: от 80rem одна строка, закреплена ---------- */
@media (min-width: 80rem) {
  .top { position: sticky; top: 0; flex-wrap: nowrap; column-gap: var(--space-3); }
  .top__end { order: 3; margin-left: 0; }
  .top__money { order: 2; flex: 1 1 0; justify-content: flex-end; }
}
/* Имя аккаунта и подпись переключателя — только когда места хватает всей строке: иначе шапка не помещается в один ряд. */
@media (min-width: 120rem) {
  .acct__name { position: static; width: auto; height: auto; margin: 0; overflow: hidden; clip: auto; max-width: calc(var(--space-16) * 3); text-overflow: ellipsis; }
  .sw__label { display: inline; }
}