/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Вкладка «Чат» проекта: раскладка и боковая часть (js/screens/project-chat.js, project-chat-rail.js, project-chat-plan.js).
   Компьютер (от 64rem): лента и постоянная правая колонка 22rem «Что сейчас / Ждёт вас / Задачи»; в ленте — короткие строки событий.
   Телефон и узкий экран: один столбец, карточки лежат в ленте, над лентой полоса «Ждёт вас: N». Порог 64rem задаёт и скрипт (WIDE_QUERY).
   Значения — только из tokens.css, размеры в rem. Подключается из index.html после chat.css. */

/* ---------- Каркас ---------- */
.chat.cx { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) var(--space-6); width: 100%; max-width: none; min-height: 0; }
.cx__main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; width: 100%; max-width: calc(var(--layout-narrow) + var(--space-16)); }
.cx__main > * { min-width: 0; }
.cx-side[hidden], .cx-strip[hidden], .cx-to[hidden], .cx-offline[hidden], .cx-empty[hidden], .cx-sec__act:empty { display: none; }
@media (min-width: 64rem) {
  .chat.cx { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .cx__main { max-width: none; }
}

/* ---------- Правая колонка (компьютер) ---------- */
.cx-side {
  display: grid; gap: var(--space-5); align-content: start; min-width: 0;
  position: sticky; top: var(--space-4); max-height: calc(100dvh - var(--space-8)); overflow-y: auto; overscroll-behavior: contain;
  padding-inline-end: var(--space-1);
}
.cx-sec { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.cx-sec__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.cx-sec__h {
  display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-ink2);
  font: var(--text-label-weight) var(--text-caption-size)/var(--text-caption-line) var(--text-label-family);
}
.cx-sec__n {
  padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-track); color: var(--color-ink);
  font-family: var(--font-num); font-size: var(--text-label-size);
}
.cx-sec__n[data-tone="acc"] { background: var(--color-acc-soft); color: var(--color-acc-soft-text); }
.cx-sec__body { display: grid; gap: var(--space-3); min-width: 0; }
.cx-sec__body:empty { display: none; }
.cx-side .cc { padding: var(--space-4); }
.cx-empty {
  margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-panel2); color: var(--color-ink2);
  font: var(--text-ui-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
}

/* Короткие строки событий в ленте: подробности лежат в колонке справа */
.cx-event {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-panel2); color: var(--color-ink);
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.cx-event > .ic { flex: none; width: 1.25rem; height: 1.25rem; color: var(--color-acc-text); }
.cx-event__t { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.cx-event__t small { display: block; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.cx-event .cx-linkbtn { margin-left: auto; }

/* ---------- Полоса «Ждёт вас: N» (телефон) ---------- */
.cx-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-ctl); background: var(--color-acc-soft); color: var(--color-acc-soft-text);
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.cx-strip > .ic { flex: none; width: 1.25rem; height: 1.25rem; }
.cx-strip__t { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; font-weight: var(--weight-medium); }
.cx-strip .btn { min-height: var(--size-touch-min); }

/* ---------- Кнопка-ссылка ---------- */
.cx-linkbtn {
  display: inline-flex; align-items: center; justify-self: start; min-height: var(--size-touch-min); padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--color-acc-text); text-underline-offset: .2em; font: var(--text-ui-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans);
}
.cx-linkbtn:hover { text-decoration: underline; }
.cx-linkbtn:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); border-radius: var(--radius-xs); }

/* ---------- Реплики: адресат и расход ---------- */
.cx-tag {
  display: inline-flex; align-items: center; gap: var(--space-1); justify-self: end; max-width: 100%; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-acc-soft); color: var(--color-acc-soft-text); font: var(--weight-medium) var(--text-label-size)/var(--text-caption-line) var(--font-sans);
  overflow-wrap: anywhere;
}
.cx-usage { margin: 0; color: var(--color-ink3); font: var(--text-caption-weight) var(--text-label-size)/var(--text-caption-line) var(--font-sans); font-variant-numeric: tabular-nums; }

/* ---------- Карточки: задача, план, «только вы», лимит ---------- */
.cc__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cc__sub { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); overflow-wrap: anywhere; }
.cc__title { font: var(--text-ui-strong-weight) var(--text-body-size)/var(--text-body-line) var(--font-sans); overflow-wrap: anywhere; }
.cc__lock { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-warn-text); font: var(--text-ui-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }
.cc__lock .ic { flex: none; width: 1rem; height: 1rem; margin-top: var(--space-1); }
.cc--task { box-shadow: var(--surface-shadow), inset 0.1875rem 0 0 var(--color-ok); }
.cc--human { box-shadow: var(--surface-shadow), inset 0.1875rem 0 0 var(--color-warn); }
.cc--limit { box-shadow: var(--surface-shadow), inset 0.1875rem 0 0 var(--color-warn); }
.cc--plan { box-shadow: var(--surface-shadow), inset 0.1875rem 0 0 var(--color-acc); }
.cc .btn[aria-disabled="true"], .msg .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cc--run .cc__acts .btn[aria-pressed="true"] { background: var(--color-acc-soft); color: var(--color-acc-soft-text); }
.cx-side .plan { padding: var(--space-4); }

/* ---------- Поле ввода: кому написать ---------- */
.cx-to { display: grid; gap: var(--space-1); justify-items: start; min-width: 0; }
.cx-to__l { margin: 0; color: var(--color-ink2); font: var(--text-label-weight) var(--text-caption-size)/var(--text-caption-line) var(--text-label-family); }
.cx-to .ui-switch { max-width: 100%; flex-wrap: wrap; }
.cx-to .ui-switch__b { max-width: 100%; white-space: normal; text-align: left; overflow-wrap: break-word; }

/* ---------- Нет связи ---------- */
.cx-offline { margin: 0; }
.cx-offline__t { font-weight: var(--weight-medium); }

/* ---------- Первый вход ---------- */
.cx-welcome { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6) 0; }
.cx-welcome > * { margin: 0; }
.cx-welcome__t { font: var(--text-h2-weight) var(--text-h2-size)/var(--text-h2-line) var(--text-h2-family); letter-spacing: var(--text-h2-track); }
.cx-welcome__p { max-width: var(--layout-measure); color: var(--color-ink2); font: var(--text-lead-weight) var(--text-ui-size)/var(--text-body-line) var(--font-sans); }
.cx-welcome .pc-chips { margin-top: var(--space-2); }

/* ---------- Блок про телефон (свёрнут, по желанию) ---------- */
.cx-rc { margin-top: var(--space-6); }
.cx-rc .talk-fb__in > * { margin: 0; }
.cx-rc .talk-acts { gap: var(--space-3); }
.cx-rc .btn { min-height: var(--size-touch-min); }

/* ---------- Телефон и узкий экран ---------- */
@media (max-width: 47.9375rem) {
  .cx-welcome .pc-chip { flex: 1 1 100%; }
  .cx-welcome { padding-block: var(--space-4); }
}
/* Поле ввода: «поле + Отправить» и строка состояния — один блок, на телефоне он закреплён над нижней панелью.
   Подсказки и «Кому написать» не закрепляются: они лежат в потоке над блоком и прокручиваются вместе с лентой. */
.composer__dock { display: grid; gap: var(--space-2); min-width: 0; }
.composer__dock > * { margin: 0; min-width: 0; }
@media not all and (min-width: 45.0625rem) {
  /* Телефон: перебиваем закрепление всего поля из chat.css — закреплён только .composer__dock. */
  /* display: contents — части поля становятся детьми .cx__main: иначе закреплённый блок не может выйти за границы .composer. */
  .composer { display: contents; }
  .composer__dock {
    position: sticky; bottom: calc(var(--layout-tabbar) + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
    margin-inline: calc(var(--layout-container-gutter) * -1); padding: var(--space-2) var(--layout-container-gutter);
    background: var(--color-bg); border-top: 1px solid var(--color-line);
  }
  /* Компактно: поле слева, кнопки справа в одной строке. */
  .composer__dock .composer__box { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); padding: var(--space-2); }
  .composer__dock .composer__bar { flex-wrap: nowrap; justify-content: flex-end; }
  .composer__dock textarea { min-height: var(--size-touch-min); max-height: calc(4 * var(--text-body-line) * 1rem); }
  .composer__keys { display: none; }
}
@media (max-width: 47.9375rem) {
  /* Подсказки над полем: переносятся целиком, без горизонтальной прокрутки и обрезки. */
  .composer .pc-chips { flex-wrap: wrap; }
  .composer .pc-chips .pc-chip { flex: 0 1 auto; overflow-wrap: break-word; }
  .cx-to { justify-items: stretch; }
}
@media (max-width: 63.9375rem) {
  /* Выбор получателя — столбцом: подписи переносятся по словам, а не режутся по буквам. */
  .cx-to .ui-switch { display: grid; grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); width: 100%; }
}
@media (max-width: 63.9375rem) {
  .cx-event .cx-linkbtn { min-width: var(--size-touch-min); }
  .cx-to .ui-switch__b { min-height: var(--size-touch-min); }
}