/* Приложение оператора Авиграма — экраны (подключать после theme/tokens.css и theme/base.css). Те же классы
   показывает образец web/design.html — стили экранов живут только здесь. Цвета — только токенами. */

html, body { height: 100%; }
.app { height: 100%; display: flex; flex-direction: column; min-height: 0; }

/* Слои фона (16.10, tokens.css): страница --page, карточки и списки --layer, подвал и исходящее --layer-2, поля --field.
   Образец design.html не трогаем — переопределение здесь, для приложения */
body { background: var(--page); }
.app .tile, .app .notice, .app .draft, .chat-list, .lead-list, .app .ai-docs { background: var(--layer); }
.app .input { background: var(--field); }
.app-foot { background: var(--layer-2); }
.msg--out { background: var(--layer-2); }
.chat-body { background: var(--layer); }   /* переписка — на слое, как колонка на компьютере: входящее (--surface) не сливается с фоном */
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.app-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-3); }
.app-head__text { display: grid; gap: 4px; min-width: 0; flex: 1; }
.app-head__text .h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4) var(--s-4) var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.app-foot { padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px solid var(--frame); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--frame); background: none; color: var(--ink);
            display: inline-grid; place-items: center; flex: none; cursor: pointer; }
.icon-btn svg, .send svg { width: 18px; height: 18px; }

.chat-tile { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 6px; padding: var(--s-4); }  /* колонка не шире карточки: длинное название объявления — «…», а не распор */
.chat-tile__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.chat-tile__top > :first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-tile__deck { margin: 0; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile--quiet .chat-tile__deck { color: var(--meta); }

/* Переписка */
.item-card { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3); }
.item-thumb { width: 48px; height: 48px; border-radius: var(--r-nest); background: var(--surface); flex: none; display: grid; place-items: center; color: var(--meta); }
.item-thumb svg { width: 22px; height: 22px; }
.day { text-align: center; padding-block: var(--s-2); }
.msg { max-width: 82%; padding: 10px 14px; border-radius: var(--r-card); display: grid; gap: 4px; }
.msg p { margin: 0; }
.msg--in  { background: var(--surface); justify-self: start; border-bottom-left-radius: var(--r-nest); }
.msg--out { border: 1px solid var(--tile-line); justify-self: end; border-bottom-right-radius: var(--r-nest); }
.msg .meta { justify-self: end; }
.draft { border: 1px solid var(--uv); border-radius: var(--r-card); padding: var(--s-4); display: grid; gap: var(--s-3); }
.draft__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.composer { display: flex; gap: var(--s-2); align-items: center; }
.send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--btn-bg); color: var(--btn-fg); display: grid; place-items: center; flex: none; cursor: pointer; }

/* Подключение */
.connect-hero { display: grid; gap: var(--s-3); padding-block: var(--s-4) var(--s-2); }
.steps { display: flex; gap: 6px; }
.steps span { height: 4px; flex: 1; border-radius: 2px; background: var(--frame); }
.steps span.on { background: var(--tab-mark); }

/* Лид */
.fields { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px var(--s-4); }
.fields dt { font: 500 11px/1.5 var(--f-mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--meta); }
.fields dd { margin: 0; }
.fields .empty { color: var(--meta); }


/* Живое приложение (core.js, mobile.js; компьютер — desk.css) */
.app > .app-body { padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); }
.app > .app-foot { padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); }
.app-tabs { padding-inline: var(--s-3); }
.app-center { align-content: center; justify-items: start; gap: var(--s-4); max-width: 34rem; margin-inline: auto; width: 100%; }
.app-center .body { margin: 0; color: var(--ink-2); }
.stack { display: grid; gap: var(--s-3); }
.stack-s { display: grid; gap: var(--s-2); }
.stack p, .stack-s p, .connect-hero p { margin: 0; }
.row--between { justify-content: space-between; }
.note { padding: var(--s-3) var(--s-4); }
.empty { display: grid; gap: var(--s-2); padding: var(--s-8) var(--s-2); text-align: center; color: var(--meta); }
.empty p { margin: 0; }
.tab__count { padding: 1px 7px; }
.btn--sm { min-height: 32px; padding: 4px 12px; }

button.chat-tile { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.chat-tile:hover .tile__title { color: var(--link-hover); }

.item-card__text { display: grid; gap: 4px; min-width: 0; }
.item-card__title { font-weight: 700; }
.item-card__price { color: var(--meta); }
.msgs { display: grid; gap: var(--s-3); }
.msg { overflow-wrap: anywhere; }
.msg__img { display: block; max-width: 100%; border-radius: var(--r-nest); }
.msg--failed { border-color: var(--uv); }
.msg__fail { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-self: end; }
.composer__input { resize: none; min-height: 44px; max-height: 160px; line-height: 1.4; }
.composer-note { margin: 0 0 var(--s-2); color: var(--meta); }
/* Фото в чате: кнопка «прикрепить», предпросмотр перед отправкой, фото без ссылки (ещё отправляется) */
.composer__attach { width: 44px; height: 44px; }
.photo-draft { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-2); margin-bottom: var(--s-2);
               border: 1px solid var(--frame); border-radius: var(--r-card); background: var(--layer-2); }
.photo-draft__img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-nest); flex: none; }
.photo-draft__side { display: grid; gap: var(--s-2); min-width: 0; }
/* Оплата: последние платежи — строки без маркеров */
.bill-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.bill-seg { justify-self: start; }   /* в сетке карточки — по содержимому, не на всю ширину */
.msg__photo { display: block; padding: var(--s-4) var(--s-6); border: 1px dashed var(--frame); border-radius: var(--r-nest); text-align: center; }
.msg__why { justify-self: end; color: var(--meta); text-align: right; }
.stack > .btn:not(.btn--block) { justify-self: start; }

/* Лента чатов как в Telegram: строка на всю ширину, аватар, три короткие строки, счётчик (≈ 9 чатов на экран) */
.app-body--flush { padding-inline: 0; padding-top: 0; gap: 0; }
.list-notes { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.chat-list { list-style: none; margin: 0; padding: 0; }
.chat-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-3); align-items: center; width: 100%;
  padding: 10px var(--s-4); border: 0; border-bottom: 1px solid var(--frame); background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.chat-row:active { background: var(--surface); }
.chat-row:hover .chat-row__name { color: var(--link-hover); }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center; font: 600 16px/1 var(--f-sans); }
.chat-row--unread .avatar { box-shadow: inset 0 0 0 2px var(--mint-mark); }
.chat-row__main { display: grid; gap: 2px; min-width: 0; }
.chat-row__line { display: flex; gap: var(--s-2); align-items: center; min-width: 0; }
.chat-row__name { flex: 1; min-width: 0; font: 600 15px/1.3 var(--f-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row__time { flex: none; font: 500 11px/1 var(--f-mono); letter-spacing: .6px; color: var(--meta); }
.chat-row__item { font: 500 10px/1.4 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--meta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row__text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row--unread .chat-row__text { color: var(--ink-2); }
.count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--mint);
  color: var(--on-accent); font: 600 11px/20px var(--f-mono); text-align: center; }

/* Сворачиваемая плашка (нет подписки): одна строка, подробности по нажатию */
.notice { border: 1px solid var(--alert-line); border-radius: var(--r-card); box-shadow: var(--alert-mark); padding: 0 var(--s-4); }
.notice > summary { list-style: none; cursor: pointer; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.notice > summary::-webkit-details-marker { display: none; }
.notice > summary .eyebrow { color: var(--ink); }
.notice > summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--meta); border-bottom: 1.5px solid var(--meta);
  transform: rotate(45deg); margin-bottom: 4px; flex: none; }
.notice[open] > summary::after { transform: rotate(-135deg); margin: 4px 0 0; }
.notice > p { margin: 0 0 var(--s-3); color: var(--ink-2); }

/* Команда и приглашения */
.team { list-style: none; margin: 0; padding: 0; display: grid; }
.team-row { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; border-bottom: 1px solid var(--frame); }
.team-row:last-child { border-bottom: 0; }
.team-row__name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar--s { width: 32px; height: 32px; font-size: 12px; }
.invite { border: 1px dashed var(--line); border-radius: var(--r-card); padding: var(--s-4); }
.invite__code { font: 600 22px/1.2 var(--f-mono); letter-spacing: 2px; }
.notice--quiet { border-color: var(--frame); box-shadow: none; margin-top: var(--s-6); }
.join { padding-bottom: var(--s-4); }

/* Админка */
.admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.admin-row { border: 1px solid var(--tile-line); border-radius: var(--r-card); padding: var(--s-3) var(--s-4); }
.admin-row__err { color: var(--ink-2); }

/* Вход на компьютере: QR всегда тёмным по светлому (камеры плохо читают инверсию), код крупно моноширинным */
.web-login { justify-items: center; text-align: center; }
.web-login__qr { width: min(240px, 70vw); aspect-ratio: 1; max-width: 100%; }
.qr { display: block; width: 100%; height: 100%; border-radius: var(--r-card); }
.qr__bg { fill: var(--qr-bg); }
.qr__ink { fill: var(--qr-ink); }
.web-login__steps { margin: 0; padding-left: 1.2em; text-align: left; color: var(--ink-2); display: grid; gap: var(--s-1); }
.web-login .stack-s { justify-items: center; }
.web-code { flex: 1; min-width: 0; max-width: 12rem; font-family: var(--f-mono); letter-spacing: 2px; text-transform: uppercase; }

/* Раздел «Ассистент» (assistant.js): вкладки раздела, список документов, документ, агент, расход */
.ai-sub { padding-inline: var(--s-3); }
.ai-tabs { border-bottom: 0; }
.ai-add { gap: var(--s-2); }
.ai-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--frame); }
.ai-doc { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: 10px var(--s-1); border: 0; border-bottom: 1px solid var(--frame);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ai-doc:hover .ai-doc__title { color: var(--link-hover); }
.ai-doc__main { display: grid; gap: 3px; flex: 1; min-width: 0; }
.ai-doc__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-doc__err { color: var(--ink-2); }
.ai-pin { color: var(--mint-mark); margin-right: 6px; font-size: 10px; vertical-align: 2px; }
.ai-empty { padding: var(--s-6) var(--s-2); color: var(--meta); text-align: center; }
.ai-text { resize: vertical; line-height: 1.5; min-height: 96px; }
.ai-text--s { min-height: 72px; }
.ai-text--l { min-height: 300px; }
.ai-check { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.ai-check input { margin-top: 3px; accent-color: var(--ink); }
.ai-note { margin: 0; color: var(--meta); }
.ai-intro { max-width: 46rem; }
.ai-intro p { color: var(--ink-2); }
.ai-samples, .ai-check-search { padding-top: var(--s-4); border-top: 1px solid var(--frame); }
.ai-check-search .row { flex-wrap: nowrap; }
.ai-check-search .input { flex: 1; min-width: 0; }
.ai-found { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.ai-found li { display: grid; gap: 2px; }
.ai-agent__grid { display: grid; gap: var(--s-3); }
.ai-agent .seg button:disabled { opacity: .45; cursor: default; }
.ai-radios { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.ai-hours__win { display: grid; gap: var(--s-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.ai-hours__win:disabled { opacity: .5; }
.ai-days { display: flex; gap: 4px; flex-wrap: wrap; }
.ai-day { position: relative; cursor: pointer; }
.ai-day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.ai-day span { display: inline-grid; place-items: center; min-width: 40px; height: 32px; padding: 0 8px; border: 1px solid var(--frame); border-radius: var(--r-btn);
  font: 600 11px/1 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--meta); }
.ai-day input:checked + span { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.ai-day input:focus-visible + span { outline: 2px solid var(--field-focus); outline-offset: 2px; }
.ai-day input:disabled + span { cursor: default; }
.ai-times { align-items: flex-end; }
.ai-times .field { width: 120px; }
.ai-vers { margin-top: 0; }
.ai-learn { list-style: none; margin: 0; padding: 0; display: grid; }
.ai-learn__row { display: grid; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--frame); min-width: 0; }
.ai-learn__row--line { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ai-learn__q { padding-left: var(--s-3); border-left: 2px solid var(--frame); color: var(--ink-2); font-size: 13px; }
.ai-learn__a, .ai-learn__was { display: grid; gap: 2px; font-size: 14px; }
.ai-learn__was { color: var(--meta); }
.ai-hist { min-width: 0; }
.ai-hist > * { min-width: 0; }
.ai-hist-bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
.ai-hist-seg { flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ai-hist-seg button { flex: none; padding: 0 10px; white-space: nowrap; }
.ai-hist-days { width: auto; min-height: 32px; padding-block: 4px; }
.ai-hist-q { font-weight: 600; min-width: 0; }
.ai-hist-n { font: 600 12px/1 var(--f-mono); color: var(--ink-2); }
.ai-hist-wrap { max-width: 1000px; }
.ai-text--xs { min-height: 0; }
.ai-company__grid { display: grid; gap: var(--s-3); }
/* Окно подтверждения «Индексировать» (AV.askIndex) */
.ai-dialog { max-width: min(440px, calc(100vw - 32px)); padding: var(--s-6); border: 1px solid var(--frame); border-radius: var(--r-card);
  background: var(--layer); color: var(--ink); }
.ai-dialog::backdrop { background: var(--scrim); }
.ai-dialog p { margin: 0; }

/* Лиды (leads.js): форма лида, фильтр стадий и список на телефоне, кнопка в чате */
.lead-form__head { display: grid; gap: 4px; }
.lead-fields { display: grid; gap: var(--s-3); }
.lead-chat { justify-content: flex-start; }
.lead-actions { margin-top: var(--s-4); }
.lead-chips { display: flex; gap: 6px; overflow-x: auto; padding: var(--s-3) var(--s-4) var(--s-2); scrollbar-width: none; border-bottom: 1px solid var(--frame); }
.lead-chips button { flex: none; min-height: 32px; padding: 0 12px; border: 1px solid var(--frame); border-radius: var(--r-pill); background: none;
  color: var(--meta); font: 600 11px/1 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.lead-chips button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.lead-list { list-style: none; margin: 0; padding: 0; }
.lead-row { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: 12px var(--s-4); border: 0; border-bottom: 1px solid var(--frame);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lead-row:active { background: var(--surface); }
.lead-row__main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.lead-row__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-row__sum { font-size: 13px; color: var(--meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-row__side { display: grid; gap: 4px; justify-items: end; flex: none; }

/* Черновик ассистента над полем ответа (drafts.js) */
.draft { margin-bottom: var(--s-3); padding: var(--s-3); gap: var(--s-2); }
.draft__flags { color: var(--ink-2); }
.draft__text { resize: vertical; min-height: 64px; line-height: 1.45; }
.draft__status:empty, .teach__status:empty { display: none; }
.draft__status, .teach__status { color: var(--ink-2); }
.teach__status--bad { color: var(--ink); box-shadow: inset 2px 0 0 0 var(--uv); padding-left: var(--s-2); }

/* «Научить ассистента» (drafts.js): панель чата на компьютере, свёрнутый блок над перепиской на телефоне */
.teach, .teach__body { display: grid; gap: var(--s-3); }
.teach__gen { display: grid; gap: var(--s-2); }
.teach__gen:empty { display: none; }
.teach__q { margin: 0; padding: var(--s-2) var(--s-3); border-left: 2px solid var(--frame); color: var(--ink-2); max-height: 8em; overflow-y: auto; }
.teach--m { display: block; margin-bottom: var(--s-3); padding-bottom: var(--s-3); }   /* у details сетка даёт пустой зазор под свёрнутым */
.teach--m:not([open]) { padding-bottom: 0; }
.teach--m[open] > summary { margin-bottom: var(--s-2); }

/* Режим ассистента в чате и архив (chatmode.js): строка под шапкой переписки */
.chat-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: var(--s-3); }
.chat-bar__seg { flex: none; }
.chat-bar__seg button { flex: none; height: 30px; padding: 0 12px; }
.chat-bar__seg button:disabled { opacity: .45; cursor: default; }
.chat-bar__sp { flex: 1; }
.chat-bar__note { flex-basis: 100%; color: var(--meta); }
.chat-bar__link { border: 0; padding: 0; background: none; color: var(--ink-2); font: 500 11px/1.2 var(--f-mono); letter-spacing: 1.1px;
  text-transform: uppercase; cursor: pointer; }
.chat-bar__link:hover { color: var(--link-hover); }