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

html, body { height: 100%; }
.app { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.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; 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); }


/* Живое приложение (app.js) */
.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; }
.stack > .btn:not(.btn--block) { justify-self: start; }