/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Экраны «Обзор» и «Проекты» и каркас окна чата. Значения — только из tokens.css; размеры в rem. Спокойные списки: один блок
   на панели, строки разделены тонкой линией (контейнер и разделители лежат в base.css, .list), внимание — словом и значком,
   без цветных рамок, заливки и боковых полос. Проект и время в строке — мелко и серым, кнопки компактные (.btn--sm).
   Раскладка: 390 — одна колонка, фильтр выпадающим списком; с 48rem — кнопки-фильтры; с 64rem — две колонки «Обзора».
   Движения нет, поэтому prefers-reduced-motion здесь ничего не отключает (вращение значка гасит base.css). */

/* ---------- Заголовок экрана ---------- */
.head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.head--split { grid-template-columns: minmax(0, 1fr); align-items: end; }
.head--split > div:first-child { display: grid; gap: var(--space-2); min-width: 0; }
.head__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.head__note { max-width: var(--layout-measure); }
.lead:empty { display: none; }
@media (min-width: 48rem) {
  .head--split { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); }
}

/* ---------- Ошибка связи ---------- */
.projects__err:empty, .overview__err:empty { display: none; }
.projects__err, .overview__err { margin-bottom: var(--space-5); }
.projects__err .notice > .btn, .overview__err .notice > .btn { margin-left: auto; }

/* ---------- Фильтр проектов: кнопки на широком, список на узком ---------- */
.filters { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.filters__l { display: none; align-items: center; min-height: var(--size-touch-min); }
.filters__chips { display: none; flex-wrap: wrap; gap: var(--space-2); }
.filters__sel { display: grid; gap: var(--space-2); max-width: var(--layout-narrow); }
.filters__sel label { font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); color: var(--color-ink2); }
.filters__sel select {
  width: 100%; min-height: var(--size-control); padding: 0 var(--space-4);
  background: var(--color-panel); color: var(--color-ink);
  border: 1px solid var(--color-line2); border-radius: var(--radius-md);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--size-touch-min); padding: 0 calc(var(--space-3) - var(--space-1) / 2);
  background: transparent; color: var(--color-ink);
  border: 1px solid var(--color-line2); border-radius: var(--radius-pill);
  font: var(--text-button-weight) var(--text-label-size)/1 var(--font-sans); cursor: pointer;
}
.chip:hover { border-color: var(--color-ink); }
.chip[aria-pressed="true"] { background: var(--color-panel2); border-color: var(--color-ink); }
.chip__ok { display: none; margin-right: var(--space-1); }
.chip[aria-pressed="true"] .chip__ok { display: block; }
.chip__n { color: var(--color-ink2); }
@media (min-width: 48rem) {
  .filters { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }
  .filters__l { display: flex; }
  .filters__chips { display: flex; }
  .filters__sel { display: none; }
}

/* ---------- Группы проектов и строки списка ----------
   Все группы — в одном блоке на панели: заголовок группы («Ожидает решения · 1») и под ним строки, разделённые тонкой линией. */
.pgroups { background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.pgroup + .pgroup { border-top: 1px solid var(--color-line); }
.pgroup__h { padding: var(--space-4) var(--space-6) var(--space-3); }

.plist, .list.plist { display: grid; gap: 0; }
.plist > li, .list.plist > li { display: block; padding: 0; min-height: 0; }
.plist > li { border-top: 1px solid var(--color-line); }
.list.plist > li:first-child { border-top: 0; }
.plist > li:hover { background: var(--color-panel2); }
.pcard__a {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4);
  height: 100%; min-height: var(--size-control); padding: var(--space-4) var(--space-6);
  color: inherit; text-decoration: none;
}
.pcard__a:focus-visible { outline-offset: calc(var(--size-focus-offset) * -1); }
.pcard__main { flex: 1 1 10rem; min-width: 0; display: grid; gap: var(--space-1); }
.pcard__meta { color: var(--color-ink3); font: var(--text-caption-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.pcard__meta .mono { font-size: inherit; color: inherit; }
.pcard__name { overflow-wrap: anywhere; }
.pcard__now { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); overflow-wrap: anywhere; }
.pcard__counts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-1); color: var(--color-ink3); font: var(--text-caption-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); }
.pcard__counts .mono { font-size: inherit; color: inherit; }
.pcard__side { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-1) var(--space-4); }
.pcard__time { white-space: nowrap; color: var(--color-ink3); font-size: var(--text-label-size); }
@media (max-width: 40rem) {
  .pcard__a { padding: var(--space-4); }
  .pcard__side { margin-left: 0; justify-content: flex-start; }
  .pgroup__h { padding: var(--space-4) var(--space-4) var(--space-3); }
}

/* ---------- Обзор ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8) var(--space-6); }
.dsec { min-width: 0; }
.dsec__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: var(--size-touch-min); margin-bottom: var(--space-2); }
.dsec__none { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
@media (min-width: 64rem) {
  .dash { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .dsec--dec { grid-column: 1; }
  .dsec--now { grid-column: 2; }
  .dsec--warn, .dsec--spend, .dsec--ev { grid-column: 1 / -1; }
}

/* Предупреждения: значок, «что случилось» и под ним «что сделать»; одна строка списка — одно предупреждение */
.alerts { display: grid; gap: 0; background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-4); row-gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
}
.alert + .alert { border-top: 1px solid var(--color-line); }
.alert__ic { display: inline-flex; color: var(--color-ink3); }
.alert__ic .ic { width: 1rem; height: 1rem; }
.alert[data-attention="stopped"] .alert__ic { color: var(--color-danger-text); }
.alert[data-attention="warning"] .alert__ic { color: var(--color-warn-text); }
.alert__dl { display: grid; gap: var(--space-1); min-width: 0; }
.alert__v { margin: 0; overflow-wrap: anywhere; }
.alert__todo { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
@media (max-width: 40rem) {
  .alert { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-4); }
  .alert > .btn { grid-column: 2; justify-self: start; }
}

/* Расход: один блок на панели; на телефоне строки «подпись — сумма», с 40rem три ячейки в ряд с тонкими разделителями. Сумма не рвётся. */
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.tile {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4); min-width: 0; background: var(--color-panel);
}
.tile__v {
  white-space: nowrap;
  font: var(--text-number-lg-weight) var(--text-h2-size)/var(--text-number-lg-line) var(--text-number-lg-family);
  letter-spacing: var(--text-number-lg-track); font-variant-numeric: tabular-nums;
}
@media (min-width: 40rem) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5) var(--space-6); }
  .tile__v { font-size: var(--text-number-lg-size); }
}

/* Последние события */
.feed { display: grid; }
.feed__i {
  display: grid; gap: var(--space-1) var(--space-4); align-items: center;
  padding: var(--space-3) 0; border-top: 1px solid var(--color-line);
}
.feed__i:last-child { border-bottom: 1px solid var(--color-line); }
.feed__t { white-space: nowrap; color: var(--color-ink3); font-size: var(--text-label-size); }
.feed__a {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1);
  min-height: var(--size-touch-min); color: inherit; text-decoration: none; overflow-wrap: anywhere;
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
a.feed__a:hover { text-decoration: underline; }
@media (min-width: 40rem) {
  .feed__i { grid-template-columns: calc(var(--space-16) * 2) minmax(0, 1fr); }
}

/* ---------- Чат проекта: каркас окна (экран «Чат» подключается позже; раскладку окна задаёт shell.css) ----------
   Свои сообщения — светлые (панель и тонкая рамка), ответы без пузыря, время мелко и серым.
   Широкий экран: окно своей высоты, листается только переписка, поле ввода внизу окна. */
.chat { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: var(--layout-narrow); min-height: 26rem; }
.chat__intro { flex: none; color: var(--color-ink2); }
.thread { display: grid; align-content: start; gap: var(--space-5); }
.msg { display: grid; gap: var(--space-2); }
.msg--me {
  justify-self: end; max-width: min(80%, 34rem); padding: var(--space-3) var(--space-4);
  background: var(--color-panel); color: var(--color-ink); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-xs);
}
.msg--app { justify-self: start; width: 100%; padding: 0; background: none; }
.msg__h { font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/1.4 var(--font-sans); color: var(--color-ink); }
.msg__time { color: var(--color-ink3); font: var(--text-caption-weight) var(--text-label-size)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.msg--me .msg__time { justify-self: end; }
.msg--app .msg__time { justify-self: start; }
.msg--day { justify-self: stretch; display: flex; align-items: center; gap: var(--space-3); color: var(--color-ink3); font: var(--text-caption-weight) var(--text-label-size)/1 var(--font-sans); }
.msg--day::before, .msg--day::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.composer { flex: none; display: grid; gap: var(--space-3); padding-top: var(--space-3); }
.composer__l { font: var(--weight-medium) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.composer__box { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--color-panel); border: 1px solid var(--color-line2); border-radius: var(--radius-lg); }
.composer__box:focus-within { border-color: var(--color-ink3); outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.composer textarea { width: 100%; min-height: var(--size-control); padding: var(--space-2); border: 0; background: transparent; resize: none; outline: none; line-height: var(--text-body-line); }
.composer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
@media (min-width: 45.0625rem) {
  .chat { flex: 1 1 auto; min-height: 0; }
  .thread {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
    padding: var(--space-2) var(--space-2) var(--space-4) 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--space-4)); mask-image: linear-gradient(to bottom, transparent 0, black var(--space-4));
  }
}