/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Общее для экранов: заголовок, ошибка связи, фильтр с чипами и каркас окна чата. Значения — только из tokens.css; размеры в rem.
   Стили самих экранов лежат рядом: overview.css («Обзор»), projects.css («Проекты»), limits.css, server.css, notify.css.
   Спокойные списки: один блок на панели, строки разделены тонкой линией (контейнер и разделители лежат в base.css, .list),
   внимание — словом и значком, без цветных рамок, заливки и боковых полос.
   Раскладка: 390 — фильтр выпадающим списком; с 48rem — кнопки-фильтры.
   Движения нет, поэтому 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; }
}

/* ---------- Чат проекта: каркас окна (экран «Чат» подключается позже; раскладку окна задаёт 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));
  }
}