/*
 * Navex — компоненты интерфейса «Тумана» (этап 106): кнопки, карточки, поля, вкладки, окна, таблицы, плашки и общие правила
 * страниц, которые ещё живут на прежней разметке. Токены — tokens.css, библиотека Mist — mist.css, каркас — shell.css,
 * стили страниц — pages/*.css. Этап 116: правила прежнего каркаса и страниц, которые ничего не рисуют, удалены.
 */

/* ===== Сброс списков/картинок, общие мелочи (доп. к tokens.css) ===== */
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== Гостевые страницы: полупрозрачная карточка, подсказки (раскладка входа — pages/auth.css) ===== */

.guest-benefits { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; padding: 16px 18px; border: 1px solid var(--dark-line); border-radius: var(--r-lg); background: var(--dark-surface); backdrop-filter: blur(10px); }
/* .guest-note тоже стоит прямо в белой .guest-card (register.blade.php,
   registration-closed.blade.php — подсказка «вам нужен вход») — светлый
   текст там был бы невидим на белом, поэтому тёмный/белый вариант только
   внутри .guest-benefits (стеклянная карточка на тёмном фоне), а базовый
   .guest-note остаётся читаемым на белой карточке. */
.guest-note { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 12.5px; font-weight: 500; }
.guest-note svg { width: 16px; flex: 0 0 auto; color: var(--ink); }
.guest-benefits .guest-note { color: var(--dark-ink); font-size: 13px; }
.guest-benefits .guest-note svg { color: var(--primary); }

.guest-card__title { font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 4px; }
.guest-card__subtitle { color: var(--ink-faint); font-size: 12.5px; line-height: 1.55; margin-bottom: 20px; }

.guest-card__step { color: var(--accent-strong); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }

/* Этап 82, T1.09 — страницы ошибок: гостевая карточка (кнопки друг под другом) и закрытый раздел внутри приложения. */
.error-card__logout { margin-top: 10px; }

/* Этап 69.1 — единый редактор воронки (partials/funnel-editor.blade.php, public/js/funnel-editor.js).
   Строка этапа = карточка-группа .funnel-stage: строка 1 (.funnel-row: ручка/замок, название, «⋯»),
   ниже подсказка (.funnel-hint) и пояснения (.funnel-note). */
.funnel-editor__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.funnel-editor__templates { color: var(--ink-soft); }
.funnel-intro p { margin: 0 0 4px; }
.funnel-intro p:last-child { margin-bottom: 0; }
.funnel-normalize__body { display: flex; flex-direction: column; align-items: flex-start; }
.funnel-plan { margin: 0; padding-left: 18px; }
.funnel-plan li { margin-bottom: 3px; }

.funnel-row { display: flex; align-items: center; gap: 6px; }
.funnel-row .input { flex: 1; min-width: 0; }
.funnel-row__handle, .funnel-row__lock { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; color: var(--ink-faint); }
.funnel-row__handle { cursor: grab; touch-action: none; }
.funnel-row__handle svg, .funnel-row__lock svg { width: 16px; height: 16px; }
.funnel-row__more { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-soft); }
.funnel-row__more:hover { background: var(--surface-subtle); color: var(--ink); }
.funnel-row__more svg { width: 18px; height: 18px; }
.funnel-stage { display: flex; flex-direction: column; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.funnel-stage:last-child { padding-bottom: 0; border-bottom: 0; }
.funnel-hintbox { display: flex; flex-direction: column; gap: 3px; }
.funnel-hint { display: grid; gap: 3px; padding-left: 28px; }
.funnel-hint__label { color: var(--ink-faint); font-size: 12px; font-weight: 600; }
.funnel-hint .input { min-height: 38px; font-size: 13px; }
.funnel-note { margin: 0; padding-left: 28px; color: var(--ink-faint); font-size: 12px; line-height: 1.4; }
.funnel-note--auto { color: var(--ink-soft); }
.funnel-note--legacy { color: var(--warning); }
.funnel-link { display: inline; padding: 0; border: 0; background: none; color: var(--accent-strong); font: inherit; text-decoration: underline; cursor: pointer; }
.funnel-add { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.funnel-add .funnel-note { padding-left: 0; }
.funnel-auto { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-subtle); }
.funnel-auto__title { font-size: 13px; font-weight: 650; }
.funnel-auto__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); align-items: center; gap: 10px; font-size: 13px; }
.funnel-auto .funnel-note { padding-left: 0; }
.funnel-menu .card-menu__item:disabled { opacity: .4; cursor: default; }
.funnel-static__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.funnel-static__row:last-child { border-bottom: 0; }
.funnel-static__name { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 768px) {
    /* Телефон: этап — карточка (строка 1: ручка + название + «⋯», ниже подсказка и метка);
       всё нажимаемое ≥ 44px, поля ≥ 16px (без зума iOS). */
    .funnel-stage { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
    .funnel-stage:last-child { padding: 10px; border: 1px solid var(--line); }
    .funnel-row .input { min-height: 44px; font-size: 16px; }
    .funnel-row__handle, .funnel-row__lock { width: 28px; height: 44px; }
    /* Этап 69.E — ручка перетаскивания: зона нажатия 44px по обеим сторонам (отступы гасят лишнюю ширину). */
    .funnel-row__handle { width: 44px; margin: 0 -10px 0 -8px; }
    .funnel-row__handle svg, .funnel-row__lock svg { width: 20px; height: 20px; }
    .funnel-row__more { width: 44px; height: 44px; }
    .funnel-hint, .funnel-note { padding-left: 0; }
    .funnel-hint .input { min-height: 44px; font-size: 16px; }
    /* Плейсхолдеры-примеры длинные — на узком экране чуть мельче, чтобы читались целиком. */
    .funnel-hint .input::placeholder { font-size: 14px; }
    .funnel-note { font-size: 12.5px; }
    .funnel-link { min-height: 44px; padding: 0 6px; }
    .funnel-add .btn, .funnel-editor__templates, .funnel-normalize .btn { min-height: 44px; }
    .funnel-auto__row { grid-template-columns: 1fr; gap: 6px; }
    .funnel-auto .select { min-height: 44px; font-size: 16px; }
    .funnel-menu .card-menu__item { min-height: 48px; font-size: 15px; }
    .funnel-menu .card-menu__item:disabled { display: none; }
    .modal .select { min-height: 44px; font-size: 16px; }
    .modal__footer .btn { min-height: 44px; }
}
/* Этап 87, T2.07 — выгоды регистрации внутри карточки: видны только там, где левая панель скрыта (≤ 720 px). */
.register-perks { display: none; margin: -8px 0 16px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--accent-strong); background: var(--accent-soft); font-size: 12.5px; font-weight: 500; line-height: 1.45; }
.register-consent { margin-top: 12px; color: var(--ink-faint); font-size: 12px; line-height: 1.5; text-align: center; }
/* Этап 87 — длинная подпись кнопки («Попросить владельца сбросить пароль») переносится на вторую строку, а не раздвигает карточку (на 360 px карточка вылезала за экран). */

@media (max-width: 720px) {
    .register-perks { display: block; }

}

/* ===== Логотип Navex (10.10.2026): векторные файлы public/images — знак и слово Gilroy в кривых; высоту задаёт --logo-h ===== */
.brand-logo { display: block; flex: none; height: var(--logo-h, 28px); width: auto; max-width: none; }
.brand-mark, .brand-word { display: block; flex: none; line-height: 0; }
.brand-mark img, .brand-word img { display: block; height: var(--logo-h, 28px); width: auto; max-width: none; }

.dropdown-anchor { position: relative; }
.dropdown { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 8px); right: 0; min-width: 220px; padding: 6px; border: 0; border-radius: var(--rounded-md); background: var(--surface-raised); box-shadow: var(--shadow-float), 0 0 0 1px var(--line); animation: pop-in var(--normal) var(--ease); }
.dropdown-item { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; border: 0; border-radius: var(--rounded-sm); padding: 8px 12px; color: var(--ink); background: transparent; text-align: left; font-size: 14px; font-weight: 500; line-height: 1.25; }
.dropdown-item:hover { color: var(--ink); background: var(--surface-subtle); }
.dropdown-item svg { width: 20px; height: 20px; flex: none; color: var(--ink-soft); }

.ai-chip-wrap { position: relative; }

/* Этап 94, T5.14 — страница «AI-сотрудник»: разделы формы, «Дополнительно» и воронка сворачиваются, «Сохранить» — липкая полоса внизу. */
.ai-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.ai-section:first-of-type { padding-top: 0; }
.ai-section__title { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.ai-details { margin: 0; }
.ai-details__summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin: 0 0 4px; cursor: pointer; list-style: none; }
.ai-details__summary::-webkit-details-marker { display: none; }
.ai-details__summary .ai-section__title { margin: 0; }
.ai-details__summary:after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 4px; border: solid var(--ink-faint); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--fast) var(--ease); }
.ai-details[open] > .ai-details__summary:after { transform: rotate(-135deg); }
.link--external:after { content: ' ↗'; }
.ai-funnel__switch { margin-bottom: 12px; }
.ai-funnel__actions { margin-top: 2px; }
.ai-funnel__editor { display: grid; gap: 8px; margin-top: 6px; }
.ai-funnel__editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-form-card { padding-bottom: 0; }
.ai-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -20px; padding: 12px 20px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); background: var(--surface); }
.ai-savebar.is-dirty { border-top-color: var(--line); background: var(--warning-soft); }
.ai-savebar__state { color: var(--warning); font-size: 12.5px; font-weight: 600; }
.ai-sandbox__note--dirty { color: var(--warning); }
.ai-sandbox__note--dirty .link { display: inline; min-height: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
@media (max-width: 768px) {
    .ai-savebar { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); margin: 0 -16px; padding: 10px 16px; }
    .ai-savebar .btn { min-height: 44px; }
    .ai-savebar__state { font-size: 12px; }
}
/* Этап 94, T2.23 — карточка «Запуск проекта» на «Сегодня»: шаги с галочками, у невыполненных — подсказка и кнопки; на телефоне кнопки переносятся. */
.launch-card { margin-bottom: 16px; }

.launch-card__title { margin: 0 0 8px; font-size: 16px; font-weight: 650; }

.launch-step__warn { font-size: 12.5px; }
.launch-card__ready { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--success-soft); color: var(--success); font-size: 13px; font-weight: 600; }
.launch-card__ready svg { width: 16px; flex: 0 0 auto; }
.launch-card__foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.launch-card__foot .link { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
@media (max-width: 768px) {

    .launch-card__foot .link { min-height: 44px; display: inline-flex; align-items: center; }

}
/* Этап 94 — зоны нажатия ≥ 44 px на телефоне: ссылки внутри текста (link--tap) и переключатели (невидимое расширение области нажатия). */
@media (max-width: 768px) {
    .link--tap { display: inline-flex; align-items: center; min-height: 44px; }
    .ai-master .switch:before, .ai-funnel__switch .switch:before { content: ''; position: absolute; inset: -10px -6px; }
}
/* Этап 94, T5.17 — «Когда AI отвечает клиентам»: три режима, у каждого своя подпись; на телефоне по одному в строку. */
.ai-hours { display: grid; gap: 10px; }
.ai-hours__option { display: grid; gap: 4px; justify-items: start; }
.ai-hours__hint { margin: 0 0 0 2px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
/* Этап 94, T5.13 — карточка «AI пока не отвечает клиентам»: шаги запуска с галочками и главная кнопка. */
.ai-top { margin-bottom: 14px; }
.ai-top .ai-master { margin-bottom: 0; }
.ai-launch { margin-bottom: 14px; border-color: var(--line); background: var(--warning-soft); }
.ai-launch .section-head { margin-bottom: 8px; }
.ai-launch__steps { display: grid; gap: 2px; margin: 0 0 14px; padding: 0; list-style: none; }
.ai-launch__step { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 13.5px; color: var(--ink-soft); }
.ai-launch__mark { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
.ai-launch__step.is-done .ai-launch__mark { border-color: var(--success); background: var(--success); }
.ai-launch__step.is-done .ai-launch__mark:after { content: ''; width: 5px; height: 9px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ai-launch__step.is-done .ai-launch__title { color: var(--ink-faint); text-decoration: line-through; }
.ai-launch__title { min-width: 0; overflow-wrap: anywhere; }
.ai-launch__enable { min-height: 44px; }
@media (max-width: 768px) {
    .ai-launch__enable { width: 100%; }
    .ai-launch__step { min-height: 44px; }
}
/* Этап 94, T5.10 — верх страницы «AI-сотрудник»: большой переключатель вне формы. */
.ai-master { margin-bottom: 14px; }
.ai-master .section-head { margin-bottom: 0; }
.ai-master__reason { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }

@keyframes pop-in { from { opacity: 0; transform: translateY(-3px) scale(.98); } to { opacity: 1; transform: none; } }

.heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ===== Панель инструментов доски (этап 61.2/61.3/61.6, ночной прогон 2) —
   [Поиск] [Период ▾] [Сортировка ▾] [Фильтры (N)] … [Доска|Таблица]. Период/
   Сортировка/Фильтры открывают общий .card-menu__list (см. ниже). ===== */

.board-toolbar__short { display: none; }

/* Модификатор .card-menu__list — шире (Период/Сортировка/Фильтры несут
   больше текста, чем «Переместить в этап»), тот же класс/механизм на десктопе
   и на телефоне (медиа-запрос у .card-menu__list ниже уже всё переопределяет). */
.card-menu__list--wide { width: 280px; }
.card-menu__list--filters { width: 320px; max-height: 480px; }
.card-menu__item-hint { margin-top: 1px; color: var(--ink-faint); font-size: 10.5px; font-weight: 400; line-height: 1.3; white-space: normal; }
.card-menu__custom-dates { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
.card-menu__custom-dates .input { flex: 1 1 110px; min-height: 36px; }
.card-menu__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 8px 2px; border-top: 1px solid var(--line); margin-top: 6px; }

/* ===== Фильтры (строка над списком/канбаном) ===== */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter { min-width: 150px; flex: 1 1 150px; }
.filter.search { flex: 2 1 240px; }
.filter .input, .filter .select { min-height: 38px; }
/* Этап 35, п.5 — чипы активных фильтров над списком/канбаном. */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 6px 5px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 500; }
.filter-chip button { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.filter-chip button:hover { background: rgb(22 22 22 / .08); }
.filter-chip button svg { width: 10px; height: 10px; }
.filter-actions { display: flex; align-items: center; gap: 8px; }

/* Этап 104, T3.32 — пункты листа «⋯» на доске: «Вид: Доска / Список» (два переключателя) и «Скачать список (Excel)» с серой второй строкой. */

.tabs.ai-layout__tabs { display: none; }

}

/* ===== Avatar ===== */
/* ===== Avatar — круг с инициалами на нейтрали (theme.css §8); цвета pink/green/gold — лёгкие гелевые подсветки ===== */
.avatar { position: relative; width: 36px; height: 36px; aspect-ratio: 1; flex: none; line-height: 1; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: var(--ink); background: #DCDDDC; font-size: 12px; font-weight: 600; letter-spacing: 0; -webkit-user-select: none; user-select: none; }
.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.avatar--md { width: 36px; height: 36px; font-size: 12px; }
.avatar--lg { width: 44px; height: 44px; font-size: 14px; }
/* Этап 57 — правка: панель лида хочет 48px в шапке (было 44 — avatar--lg). */
.avatar--xl { width: 48px; height: 48px; font-size: 15px; }
.avatar--lead .avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Этап 61.7 — счётчик непрочитанных (.avatar__unread) должен вылезать за
   круг аватара; .avatar по умолчанию overflow:hidden (нужен для обрезки
   фото/иконки), снято для всех .avatar--lead (карточка/таблица доски —
   единственные места с unread_count, но не вредит и остальным) — img и
   фолбэк уже сами круглые (border-radius:50% на img выше, фолбэк — текст/
   маленькая SVG-иконка, меньше круга, не вылезает). */
.avatar--lead { overflow: visible; }
.avatar--lead .avatar__fallback { position: relative; }
.avatar.pink { color: #6E1F42; background: #F0C3D7; }
.avatar.green { color: #234A1E; background: #D7DFBA; }

/* Этап 61.7 (ночной прогон 2) — было 25px квадрат-подложка под эмодзи, теперь
   логотип канала (<x-channel-icon>/channelIconSvg()) уже сам круглый и
   цветной — лишняя подложка и рамка убраны, размер спеки «16 px, не крупнее». */
.icon-source { width: 16px; height: 16px; flex: 0 0 auto; display: grid; place-items: center; }
.icon-source svg, .icon-source .channel-icon { width: 16px; height: 16px; display: block; }
.channel-icon { flex: 0 0 auto; display: block; }

/* ===== Button — таблетки «Тумана» (этап 106, theme.css §4). Плотность «просторная»: высота 44 (--control-h).
   Варианты: .btn-primary | -secondary | -outline | -ghost | -danger | -dark | -icon | -fab; размеры .btn-sm | .btn-lg.
   Нажатие (scale .97) и переходы — прямо в .btn (в прототипе это класс nx-press). Одна главная кнопка на экран. ===== */
.btn { position: relative; min-height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--rounded-pill); padding: 0 18px; color: var(--ink); background: var(--surface-raised); box-shadow: var(--shadow-1); font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0; white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: scale 160ms var(--ease), background-color var(--fast) var(--ease-hover), border-color var(--fast) var(--ease-hover), color var(--fast) var(--ease-hover), box-shadow var(--fast) var(--ease-hover), opacity var(--fast) var(--ease-hover); }
.btn:active:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) { scale: var(--press-scale); transition-duration: var(--instant); }
@media (hover: hover) and (pointer: fine) {
    .btn:hover { background: var(--surface); }
}
.btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .45; box-shadow: none; }
.btn[data-busy] { cursor: progress; opacity: 1; }
/* Этап 40 — режим просмотра: не disabled (форма остаётся видна/читаема как есть), просто серая и некликабельная;
   текст «почему» — в тосте при клике. */

.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-primary { color: var(--on-primary); background: var(--primary); border-color: rgb(22 22 22 / .1); font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 6px 16px -8px rgb(120 140 0 / .55); }
.btn-secondary { color: var(--ink); background: var(--surface-raised); }
.btn-outline { color: var(--ink); background: transparent; border-color: var(--line-strong); box-shadow: none; }
.btn-ghost { color: var(--ink); background: transparent; border-color: transparent; box-shadow: none; }
.btn-danger { color: #fff; background: var(--danger); border-color: transparent; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 6px 16px -8px rgb(179 43 43 / .6); }
.btn-dark { color: var(--ink-inverse); background: var(--ink); border-color: transparent; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { background: var(--primary-hover); }
    .btn-secondary:hover { background: var(--surface); }
    .btn-outline:hover { background: rgb(22 22 22 / .04); border-color: var(--ink); }
    .btn-ghost:hover { background: rgb(22 22 22 / .06); box-shadow: none; }
    .btn-danger:hover { background: #9E2424; }
    .btn-dark:hover { background: #2A2B2B; }
}
.btn-primary:active:not(:disabled):not(.is-disabled) { background: var(--primary-pressed); }
.btn-sm { min-height: var(--control-h-sm); padding: 0 14px; font-size: 13px; gap: 6px; }
.btn-sm svg { width: 18px; height: 18px; }
.btn-lg { min-height: var(--control-h-lg); padding: 0 24px; font-size: 15px; }
.btn-icon { width: var(--control-h); height: var(--control-h); min-height: 0; padding: 0; flex: 0 0 auto; border-radius: 50%; }
.btn-icon svg { width: 22px; height: 22px; }
.btn-icon.btn-sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.btn-icon.btn-sm svg { width: 18px; height: 18px; }
.btn-icon.btn-lg { width: var(--control-h-lg); height: var(--control-h-lg); }
.btn-fab { width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%; color: var(--on-primary); background: var(--primary); border-color: rgb(22 22 22 / .1); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 14px 32px -10px rgb(22 22 22 / .4); }
.btn-fab svg { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) { .btn-fab:hover { background: var(--primary-hover); } }
.btn-block { width: 100%; }
.btn .btn__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rounded-pill); display: inline-grid; place-items: center; background: rgb(22 22 22 / .08); font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
/* Этап 86: главная кнопка страницы уведомлений — на телефоне во всю ширину. */
@media (max-width: 768px) { .btn-block-mobile { width: 100%; justify-content: center; } }

/* ===== Card — свет вместо рамки (этап 106, theme.css §9): подложка --surface, белая плитка внутри — --surface-raised ===== */
.card { position: relative; min-width: 0; background: var(--surface); border: 0; border-radius: var(--rounded-lg); box-shadow: var(--hl-top), var(--shadow-1); padding: var(--space-card); }
.card + .card { margin-top: 16px; }
.card__title { margin: 0 0 16px; font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.card__title--flush { margin-bottom: 0; }
.card__sub { margin-top: 2px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; min-width: 0; }
.card__head .card__title { margin: 0; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.section-head p { margin: 3px 0 0; color: var(--ink-soft); font-size: 13px; }

.card--narrow { max-width: 480px; }

.card--muted { opacity: .7; }
a.card, button.card { display: block; width: 100%; color: inherit; cursor: pointer; text-align: left; font: inherit; }
@media (max-width: 767.98px) { .card { border-radius: var(--rounded-md); } }

/* ===== Settings: каналы ===== */
.settings-tabs { overflow: auto; margin-bottom: 21px; }
/* Этап 56, раздел 2а, п.7 — вкладки Настроек на телефоне: одна строка со
   скроллом вместо переноса на вторую строку (.tabs по умолчанию flex-wrap:
   wrap, здесь это единственное место, где вместо переноса нужна прокрутка). */
.settings-tabs .tabs { flex-wrap: nowrap; }
.settings-tabs .tabs__item { flex: 0 0 auto; white-space: nowrap; }
/* Этап 94, T5.15 — карточки каналов не уже 320 px (в окне с левым меню настроек две колонки были слишком тесными). */
.channels-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }
.channel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 18px; }


.qr-image { max-width: 220px; width: 100%; border-radius: var(--r-md); border: 1px solid var(--line); }
/* Этап 66 — список WhatsApp-номеров в Настройки → Каналы (одна карточка
   .card, внутри — по одному .wa-number на каждый channel_account). */
.wa-numbers { display: flex; flex-direction: column; gap: 12px; }
.wa-number { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-subtle); }
.wa-number__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.wa-number__name { min-width: 0; flex: 1 1 auto; }
.wa-number__name-btn { padding: 2px 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.wa-number__name-btn:hover:not(:disabled) { color: var(--accent-strong); }
.wa-number__rename-input { max-width: 220px; }
/* Этап 94, T5.15 — карандаш у имени номера, шаги подключения, ссылка на бота, подсветка (переход из плашки «канал отключился»). */
.wa-number__name-wrap { display: inline-flex; align-items: center; gap: 2px; }
.wa-number__pencil { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-faint); cursor: pointer; }
.wa-number__pencil:hover { color: var(--accent-strong); background: var(--surface-tint); }
.wa-number__pencil svg { width: 14px; height: 14px; }
.wa-number.is-highlight, .card.is-highlight { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(227 244 80 / .75); transition: box-shadow var(--normal) var(--ease); }
.bot-steps { display: grid; gap: 8px; margin: 0 0 12px; padding-left: 20px; list-style: decimal; font-size: 13px; color: var(--ink-soft); }
.bot-steps > li { list-style: decimal; }
.bot-steps li > span { display: block; margin-bottom: 4px; }
.connect-tip--phone { display: none; padding: 10px 12px; border-radius: var(--r-md); background: var(--warning-soft); color: var(--warning); font-size: 12.5px; text-align: left; }
@media (max-width: 767px) { .connect-tip--phone { display: block; } }
.channel-link { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 768px) {
    .wa-number__pencil { width: 44px; height: 44px; }
    .wa-number__name-btn { min-height: 44px; }
}
.wa-number__behavior { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }

@media (max-width: 720px) { .channels-grid { grid-template-columns: 1fr; } }

/* ===== AI-сотрудник ===== */
.ai-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: 20px; align-items: start; }
.ai-sandbox { position: sticky; top: calc(var(--nx-stick) + 18px); }
/* Этап 67.7 — левая колонка страницы AI: карточка настроек + блок «Как AI видит воронку»
   (в сетке остаётся две колонки; на телефоне колонка целиком принадлежит вкладке «Настройки»). */
.ai-layout__main { min-width: 0; }
/* Этап 67.7 — «Как AI видит воронку»: только чтение, по строке на этап. */
.ai-funnel { display: grid; gap: 0; margin: 0 0 14px; padding: 0; list-style: none; }
.ai-funnel__item { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ai-funnel__item:last-child { border-bottom: 0; }
.ai-funnel__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ai-funnel__name { min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ai-funnel__hint { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ai-funnel__hint.is-empty { color: var(--ink-faint); }
.ai-funnel__hint.is-gap { color: var(--warning); font-weight: 500; }
.ai-sandbox__messages { min-height: 320px; display: flex; flex-direction: column; gap: 10px; padding: 15px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--r-md); overflow-y: auto; max-height: calc(100vh - var(--topbar-h) - 260px); }
.ai-sandbox__notes { display: grid; gap: 4px; margin: 0 0 10px; }
.ai-sandbox__note { margin: 0; color: var(--ink-faint); font-size: 11.5px; line-height: 1.4; }
.ai-sandbox__understood { margin-top: 12px; padding: 11px 12px; border-radius: 9px; color: var(--accent-strong); background: var(--accent-soft); font-size: 11px; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: flex; align-items: center; min-height: 35px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); background: var(--surface); font-size: 12px; cursor: pointer; transition: all var(--fast) var(--ease); }
.choice input:checked + span { color: var(--accent-strong); border-color: var(--line); background: var(--accent-soft); }
/* Этап 94, T5.06 — неактивная галочка (например «Сам создавать запись», пока снята задача «Предлагать запись»). */
.choice input:disabled + span { opacity: .5; cursor: not-allowed; }
/* ===== Notice — полоса с тинтом слева направо и значком цвета статуса (этап 106, theme.css §13; без полоски слева) ===== */
.notice { --c: var(--warning); --soft: var(--warning-soft); display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 0; border-radius: var(--rounded-md); color: var(--ink); background: linear-gradient(90deg, var(--soft) 0%, var(--surface-raised) 75%); box-shadow: var(--hl-top), var(--shadow-1); font-size: 14px; font-weight: 500; line-height: 1.45; }
.notice svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: var(--c); }
.notice--success { --c: var(--success); --soft: var(--success-soft); }
.notice--danger { --c: var(--danger); --soft: var(--danger-soft); }
.notice--warn { --c: var(--warning); --soft: var(--warning-soft); }
.notice--ok { --c: var(--success); --soft: var(--success-soft); }
/* Этап 87, T2.11 — спокойная подсказка обычным размером текста (на гостевых страницах: «Входите по логину?»). */
.notice--info { --c: var(--info); --soft: var(--info-soft); font-size: 14px; line-height: 1.5; }
/* Этап 38 — общий баннер ошибок валидации (layouts/_form_errors.blade.php): заголовок + список + крестик закрытия. */
.notice__body { flex: 1; min-width: 0; }
/* Этап 40 — баннер режима просмотра: заголовок + текст + опциональная строка
   заявки + кнопки, каждое на своей строке. */
.frozen-banner__body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }

.frozen-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* Этап 43, спека 4.4 — на ≤ 768px заголовок сворачивает баннер до одной строки;
   toggle-стрелка и is-hidden работают только в этом медиа-запросе, на десктопе
   details всегда открыты, а сам toggle скрыт. */

.notice__body strong { display: block; margin-bottom: 3px; }
.notice__list { margin: 0; padding-left: 16px; }
.notice__list li { margin-top: 2px; }
.notice__close { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; margin: -2px -6px -2px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; opacity: .8; transition: opacity var(--fast) var(--ease-hover), background-color var(--fast) var(--ease-hover); }
.notice__close:hover { opacity: 1; background: rgba(22,22,22,.08); }
.notice__close svg { width: 14px; height: 14px; margin: 0; color: inherit; }

/* Telegram-группа проекта (этап 42) — три шага подключения, список подключённых чатов. */

.telegram-code-inline { font-family: 'SF Mono', Consolas, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.telegram-link__fallback summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: var(--ink-soft); }

/* Этап 86, T1.20 — плитки «Куда приходит» (на телефоне столбиком) и заголовки разделов страницы уведомлений. */
.settings-section-title { margin: 0 0 12px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }

/* Этап 86, T1.21 — таблица «что и куда»: заголовки групп, строки не кликабельны, кнопка «Сохранить» прилипает к низу. */

.input--narrow { max-width: 140px; }

@media (max-width: 768px) {

    /* Зоны нажатия ≥ 44 px: «Не получилось?» и т.п. (summary), строки с переключателем, ссылки внутри таблицы. */
    .telegram-link__fallback summary, .card details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
    .digest-combined label.flex { min-height: 44px; }

    .telegram-link button.link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Этап 86, T1.22 — блок «Утренняя сводка»: строка на проект (на телефоне — карточкой, всё в столбик). */

.digest-combined { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-subtle); }

.week-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.compact-time { width: 96px; }
.form-section { padding: 19px 0; border-bottom: 1px solid var(--line); }
.form-section:first-child { padding-top: 0; }
.form-section:last-child { border-bottom: 0; }
/* Этап 60.5 — «Проверить AI» справа прилипает только на десктопе ≥1100px
   (спека), уже здесь WhatsApp-карточки нет (переехала в Настройки → Каналы),
   поэтому в сетке остаются ровно 2 карточки: форма настроек и песочница. */
@media (max-width: 1099px) {
    .ai-layout { grid-template-columns: 1fr; }
    .ai-sandbox { position: static; }
    .ai-sandbox__messages { max-height: 360px; }
}

/* ===== Badge / pill (этап 54 — бейджи-пилюли с мягким фоном) ===== */
/* ===== Badge / pill — мягкий фон, статус всегда со словом (этап 106, theme.css §7) ===== */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; flex: none; max-width: 100%; border-radius: var(--rounded-pill); white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--neutral); background: var(--neutral-soft); }
.badge svg { width: 14px; height: 14px; }
.badge--lg { height: 28px; padding: 0 12px; font-size: 13px; }
.badge__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.badge-warning, .badge--warn { color: var(--warning); background: var(--warning-soft); }
.badge-danger, .badge--danger { color: var(--danger); background: var(--danger-soft); }
.badge-success, .badge--ok { color: var(--success); background: var(--success-soft); }
.badge-info, .badge--info { color: var(--info); background: var(--info-soft); }
.badge-accent, .badge--lime { color: var(--on-primary); background: var(--primary); }
.badge--neutral { color: var(--ink-soft); background: var(--neutral-soft); }
.badge--outline { color: var(--ink-soft); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge--solid-danger { color: #fff; background: var(--danger); }
.badge--ai { color: var(--ai); background: var(--ai-soft); }

.divider { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* ===== Температура ===== */
.temperature { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.temperature.cold { color: var(--blue); }
.temperature.warm { color: var(--warning); }
.temperature.hot { color: var(--danger); }

/* ===== Form controls — поля-таблетки (этап 106, theme.css §5): белое поле, граница --line-strong, фокус — чернила + лаймовое кольцо ===== */
.field { display: grid; gap: 6px; margin-bottom: 16px; min-width: 0; align-content: start; }
.field:last-child { margin-bottom: 0; }
.field__label { color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; }
.field__label small { color: var(--ink-soft); font-weight: 400; }
.field__hint { color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.field__error { color: var(--danger); font-size: 13px; font-weight: 500; line-height: 1.4; }

.field__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.input, .select, .textarea { display: block; width: 100%; min-width: 0; min-height: var(--control-h); border: 1px solid var(--line-strong); border-radius: var(--rounded-pill); padding: 0 16px; color: var(--ink); background: var(--surface-raised); font-size: 15px; line-height: 1.3; outline: none; transition: border-color var(--fast) var(--ease-hover), box-shadow var(--fast) var(--ease-hover), background-color var(--fast) var(--ease-hover); }
.textarea { min-height: 96px; padding: 12px 16px; border-radius: var(--rounded-md); resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
@media (hover: hover) and (pointer: fine) { .input:hover, .select:hover, .textarea:hover { border-color: var(--ink-soft); } }
.input:focus, .select:focus, .textarea:focus, .input.is-focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgb(227 244 80 / .75); outline: none; }
.input.is-error, .select.is-error, .textarea.is-error, .input.is-invalid, .select.is-invalid, .textarea.is-invalid, .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px rgb(179 43 43 / .12); }
.input:disabled, .select:disabled, .textarea:disabled { color: var(--ink-faint); background: var(--surface-subtle); border-style: dashed; cursor: not-allowed; }

/* Этап 89, T3.06 — жёлтая строка «С этим номером есть ещё карточка» (карточка клиента и окно «Новый клиент»). */
.phone-duplicate__name { font-weight: 600; }
.phone-duplicate__open { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; text-decoration: underline; }
/* Этап 38, п.3 — живой счётчик символов под ограниченными полями (role_text/knowledge/stop_topics). */
.field__counter { margin-top: 3px; color: var(--ink-soft); font-size: 12px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.field__counter.is-over { color: var(--danger); font-weight: 600; }
/* Этап 31 — код подтверждения email: крупное поле на 6 цифр. */

.select { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
/* Галочка и радио — нативные, с чернильным акцентом; подпись — обычным текстом */
.checkbox, .radio { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--ink); font-size: 15px; line-height: 1.35; cursor: pointer; }
.checkbox input, .radio input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--ink); }
/* Этап 87, T2.04 — поле пароля с «глазом» (partials/password-field): кнопка внутри поля справа, зона нажатия 44×44. */
.password-field { position: relative; }
/* Этап 87, T2.12 — строка сотрудника, на которую ведёт уведомление «просит сбросить пароль». */
.team-row--highlight, .team-row--highlight td { background: var(--accent-soft); }
.table-responsive tbody tr.team-row--highlight { border-color: var(--line); }
.password-field .input { padding-right: 46px; }
.password-field__toggle { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-faint); cursor: pointer; }
.password-field__toggle:hover, .password-field__toggle.is-shown { color: var(--ink); }
.password-field__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.password-field__toggle svg { width: 20px; height: 20px; }
.link-button { display: inline; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
/* Этап 87, T2.09 — подсказка «Письма нет?» под кнопками подтверждения почты. */
.verify-hint { margin-top: 14px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.55; }
.card-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.card-toggle .card__title { margin: 0; }
.card-toggle__arrow { color: var(--ink-faint); font-size: 18px; transition: transform var(--fast) var(--ease); }
.card-toggle__arrow.is-open { transform: rotate(180deg); }
#password-form { margin-top: 14px; }

/* Переключатель .switch (этап 106, theme.css §6): выкл — серая дорожка, вкл — кислотная, ручка белая → чернильная */
.switch { position: relative; width: 44px; height: 26px; display: inline-flex; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track { position: absolute; inset: 0; border-radius: var(--rounded-pill); background: var(--nx-switch-off); transition: background-color 200ms var(--ease-hover); pointer-events: none; }
.switch-track:after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: translate var(--spring-fast) var(--ease-bounce), background-color var(--fast) var(--ease-hover); }
.switch input:checked + .switch-track { background: var(--primary); box-shadow: inset 0 0 0 1px rgb(22 22 22 / .18); }
.switch input:checked + .switch-track:after { translate: 18px 0; background: #161616; box-shadow: none; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: .5; cursor: not-allowed; }

/* ===== Tabs / segmented (этап 106, theme.css §6) =====
   Разделы (.tabs): без дорожки, активный — чернильная таблетка с белым текстом.
   Сегмент (.segmented): «вдавленная» дорожка и белый бегунок. Бегунок скользит — рисует ui.js (span.nx-tabs__ink,
   [data-nx-ink] на контейнере); без JS активный пункт сам заливается своим фоном. ===== */
.tabs { position: relative; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; isolation: isolate; max-width: 100%; --nx-tab-ink: var(--ink); }
.tabs__item { position: relative; z-index: 1; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; flex: none; border: 0; border-radius: var(--rounded-pill); padding: 0 18px; color: var(--ink-soft); background: transparent; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: color var(--normal) var(--ease-hover), background-color var(--fast) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) { .tabs__item:not(.is-active):hover { color: var(--ink); } }
.tabs__item.is-active, .tabs__item[aria-selected="true"] { color: var(--ink-inverse); }
.tabs:not([data-nx-ink]) .tabs__item.is-active, .tabs:not([data-nx-ink]) .tabs__item[aria-selected="true"] { background: var(--ink); }
.tabs__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink-soft); background: rgb(22 22 22 / .07); }
.tabs__item.is-active .tabs__count, .tabs__item[aria-selected="true"] .tabs__count { color: inherit; background: rgb(255 255 255 / .18); }
.segmented { position: relative; display: inline-flex; gap: 2px; padding: 4px; max-width: 100%; border: 0; border-radius: var(--rounded-pill); background: var(--surface-sunken); box-shadow: inset 0 1px 2px rgb(22 22 22 / .08); isolation: isolate; --nx-tab-ink: var(--surface-raised); }
.segmented button, .segmented a { position: relative; z-index: 1; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 0 auto; border: 0; border-radius: var(--rounded-pill); padding: 0 16px; color: var(--ink-soft); background: transparent; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: color var(--normal) var(--ease-hover), background-color var(--fast) var(--ease-hover); }
.segmented button.is-active, .segmented a.is-active, .segmented [aria-selected="true"] { color: var(--ink); }
.segmented:not([data-nx-ink]) button.is-active, .segmented:not([data-nx-ink]) a.is-active, .segmented:not([data-nx-ink]) [aria-selected="true"] { background: var(--surface-raised); box-shadow: var(--shadow-1), var(--hl-top); }
.segmented svg { width: 18px; height: 18px; }
/* Этап 87, T2.12 — переключатель на всю ширину карточки («Вхожу по email» / «Вхожу по логину»). */
.segmented.segmented--block { display: flex; width: 100%; }
.segmented--block button { flex: 1 1 0; justify-content: center; }

/* Бегунок (создаёт ui.js) */
.nx-tabs__ink { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: var(--rounded-pill); background: var(--nx-tab-ink, var(--ink)); pointer-events: none; opacity: 0; transition: translate var(--normal) var(--ease-in-out), width var(--normal) var(--ease-in-out), height var(--normal) var(--ease-in-out), opacity var(--fast) var(--ease); }
[data-nx-ink] > .nx-tabs__ink { opacity: 1; }
.segmented .nx-tabs__ink { box-shadow: var(--shadow-1), var(--hl-top); }

/* ===== Панель лида (side panel) ===== */
/* Боковая панель карточки клиента (.panel): справа 560 px, на телефоне — во весь экран; история «Назад» — public/js/sheets.js. */
.panel-overlay { position: fixed; z-index: var(--z-panel-backdrop); inset: 0; background: var(--scrim); display: flex; justify-content: flex-end; animation: fade-in var(--normal) var(--ease); }
.panel { position: relative; z-index: var(--z-panel); width: min(560px, 42vw); min-width: 450px; height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--surface-raised); border-radius: var(--rounded-lg) 0 0 var(--rounded-lg); box-shadow: var(--shadow-float); animation: panel-in var(--normal) var(--ease); }

.panel__close { position: absolute; top: 20px; right: 20px; }
@keyframes panel-in { from { opacity: .6; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
    .panel { width: min(560px, calc(100vw - 68px)); }
}
@media (max-width: 720px) {
    .panel { width: calc(100vw - 68px); min-width: 0; }

}

/* ===== Modal (этап 106, theme.css §11): белая карточка r28, мягкий скрим без размытия; на телефоне — шторка снизу (правила этапа 21 ниже) ===== */
.modal-overlay { position: fixed; z-index: var(--z-modal); inset: 0; display: grid; place-items: center; padding: 20px; background: var(--scrim); animation: fade-in var(--normal) var(--ease); }
.modal { width: min(520px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: var(--rounded-lg); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-float), 0 0 0 1px var(--line); padding: 28px; animation: modal-in var(--normal) var(--ease); }
.modal--sm { width: min(400px, 100%); }
.modal__title { margin: 0 0 16px; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.modal__text { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.modal__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== Popover / dropdown — белая карточка r20, свет вместо рамки (этап 106, theme.css §11) ===== */
.popover { position: fixed; z-index: var(--z-dropdown); width: 280px; padding: 16px; border: 0; border-radius: var(--rounded-md); background: var(--surface-raised); box-shadow: var(--shadow-float), 0 0 0 1px var(--line); }
.popover h3, .popover .modal__title { font-size: 14px; }

/* ===== Table (этап 106): светлая подложка r28, шапка обычным шрифтом 13, строки разделены линией ===== */
.table-wrap { overflow: auto; border: 0; border-radius: var(--rounded-lg); background: var(--surface); box-shadow: var(--hl-top), var(--shadow-1); }
/* Этап 61.8 (ночной прогон 2) — «Показать ещё» под табличным видом. */

.table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; font-size: 14px; }
.table th { padding: 14px 16px; color: var(--ink-soft); background: transparent; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; white-space: nowrap; }
.table td { height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--fast) var(--ease-hover); cursor: pointer; }
.table tbody tr:hover { background: var(--primary-faint); }
.table td.is-danger { color: var(--danger); }
.table tbody tr.is-danger-row { background: var(--danger-soft); }

/* ===== Панель лида: детали, AI-передача, следующий шаг ===== */

/* Этап 60.8 — «Заявка 20 сен, 14:32 · Telegram» под именем в шапке панели. */

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.detail-grid .field { margin-bottom: 0; }
.amount-field { position: relative; }
.amount-field .input { padding-right: 32px; }
.amount-field span { position: absolute; top: 10px; right: 12px; color: var(--ink-faint); font-size: 12px; }
/* Этап 92, T3.23 — переключателя AI/менеджер (.ai-switch) больше нет: «Кто отвечает клиенту» — полоса .reply-owner. Вращение
   (.ai-switch__spinner и keyframes) используют окна подключения каналов (settings/channels.blade.php, .qr-wait__spinner). */

@keyframes ai-switch-spin { to { transform: rotate(360deg); } }

.qr-wait { display: flex; flex-direction: column; align-items: center; padding: 24px 0; }
.qr-wait__spinner { width: 32px; height: 32px; border: 3px solid var(--line-strong); border-top-color: var(--ink); border-radius: 50%; animation: ai-switch-spin .7s linear infinite; }
.next-step { padding: 13px 14px; border-radius: var(--r-md); background: var(--accent-faint); border: 1px solid var(--line); }
.next-step.overdue { border-color: var(--line); background: var(--danger-soft); }

.next-step p { margin: 0; color: var(--ink-soft); font-size: 12px; }

/* ===== Kanban =====
   Доска — flex-ряд с горизонтальной прокруткой внутри себя (этап 14б, п.1):
   при grid+auto-fit колонки на 1400px заворачивались во второй ряд, а
   карточки (min-content шире 190px) вылезали за границу колонки. Флекс с
   фиксированной шириной колонки не допускает ни того, ни другого ни на
   одном брейкпоинте — переносится не сетка колонок, а сама доска (по
   горизонтали, внутри .kanban), страница по горизонтали не скроллится. */
/* ===== Этап 57 — доска в духе Битрикс24 ===== */
.kanban { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.kanban-column { flex: 0 0 300px; min-width: 300px; }
/* Шапка этапа — цветная плашка «по смыслу» (stageColor() в sales.js) со
   скошенным правым краем-стрелкой через clip-path; название и счётчик
   белым поверх цвета. */
.kanban-column__header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 38px; padding: 8px 22px 8px 14px; border-radius: var(--r-md) var(--r-md) 0 0;
    color: #fff; font-size: 12.5px; font-weight: 650;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.kanban-column__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-column__count { flex: 0 0 auto; min-width: 20px; padding: 1px 6px; border-radius: 99px; background: rgba(255,255,255,.28); font-size: 10.5px; text-align: center; }
.kanban-column__sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-top: 0; background: var(--surface); }
.kanban-column__sum { color: var(--ink-soft); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kanban-column__add { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 7px; color: var(--ink-faint); background: var(--surface-subtle); }
.kanban-column__add:hover { color: var(--accent-strong); background: var(--accent-soft); }
.kanban-column__add svg { width: 14px; height: 14px; }
/* Этап 61.4 (ночной прогон 2) — колонка скроллится внутри себя (высота — до
   низа экрана), страница по вертикали не «тянется» за самой длинной колонкой;
   тот же приём calc(100vh - var(--topbar-h) - …), что уже есть у .ai-sandbox__messages. */
.kanban-column__list { display: grid; align-content: start; gap: 9px; min-height: 120px; max-height: calc(100vh - var(--topbar-h) - 230px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); background: var(--surface-subtle); }

/* Карточка — сверху вниз: имя+сумма, интерес, источник+AI/ответственный,
   «блок дела», бейджи, нижняя строка (температура/дата/действия). Слева —
   3px полоска по температуре (::before, без лишнего элемента в разметке). */
.lead-card { position: relative; padding: 12px 12px 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: 0 2px 7px rgba(22,22,22,.04); cursor: pointer; overflow: hidden; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.lead-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line-strong); }
.lead-card--cold::before { background: var(--blue); }
.lead-card--warm::before { background: var(--warning); }
.lead-card--hot::before { background: var(--danger); }
.lead-card:hover { transform: translateY(-2px); border-color: var(--line); box-shadow: var(--shadow-md); }
/* Место вставки при перетаскивании — пунктир акцентом (спека этапа 57). */
.lead-card.sortable-ghost { opacity: .6; border: 1px dashed var(--ink); background: var(--accent-faint); box-shadow: none; }
.lead-card.sortable-ghost::before { display: none; }
/* Сама перетаскиваемая карточка (forceFallback:true → клон .sortable-fallback,
   а не нативный .sortable-drag) — тень и лёгкий наклон (спека этапа 57). */
.lead-card.sortable-fallback, .lead-card.sortable-drag { transform: rotate(2deg); box-shadow: var(--shadow-float); cursor: grabbing; }

.lead-card__more { position: absolute; top: 8px; right: 6px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 7px; color: var(--ink-soft); background: transparent; }
.lead-card__more:hover { color: var(--ink-soft); background: var(--surface-tint); }
.lead-card__more svg { width: 15px; height: 15px; }
/* Этап 82, T3.02 — кнопка «→ Этап» на карточке: на телефоне зона нажатия 44×44. */
@media (max-width: 768px) { .lead-card__more { top: 0; right: 0; width: 44px; height: 44px; border-radius: 12px; } .lead-card__more svg { width: 18px; height: 18px; } .lead-card__row1 { padding-right: 44px; } }

/* Правка (21.09) — вернули аватар клиента (был потерян при редизайне этапа
   57): кружок 36px слева от имени, сам не сжимается, имя обрезается
   многоточием, если не помещается вместе с суммой. */
.lead-card__row1 { display: flex; align-items: center; gap: 8px; padding-right: 22px; min-width: 0; }
.lead-card__avatar { flex: 0 0 auto; width: 36px; height: 36px; font-size: 12px; }
.lead-card__name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-card__amount { flex: 0 0 auto; color: var(--ink-soft); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lead-card__interest { margin-top: 3px; color: var(--ink-faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lead-card__source { display: flex; align-items: center; gap: 6px; margin-top: 8px; min-width: 0; }
.lead-card__source-text { min-width: 0; color: var(--ink-soft); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Этап 67.3 — замок этапа (карточка доски и шапка панели лида). Зона нажатия 44px
   на телефоне достигается невидимым расширением, сам значок остаётся компактным. */
.stage-lock { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; color: var(--warning); background: var(--warning-soft); cursor: pointer; }
.stage-lock svg { width: 14px; height: 14px; }
.stage-lock::after { content: ''; position: absolute; inset: -10px; }
.stage-lock:hover { filter: brightness(.95); }
/* Этап 82, T3.02 — замок с видимой подписью «Этап закреплён» (карточка доски, Чаты). */

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.lead-card__source-who { margin-left: auto; flex: 0 0 auto; }
.lead-card__ai { padding: 2px 7px; font-size: 9.5px; }
.lead-card__ai svg { width: 11px; height: 11px; }

/* «Блок дела» — следующий шаг/запись с окраской по сроку, либо приглашение
   назначить (нет дела). Мягкий фон того же смысла, что у карточки записи
   этапа 58 — тот же язык цвета по всему приложению. */
.lead-card__deal { display: flex; align-items: flex-start; gap: 6px; margin-top: 9px; padding: 7px 9px; border-radius: var(--r-sm); font-size: 11px; line-height: 1.35; }
.lead-card__deal svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 1px; }
.lead-card__deal--ok { color: var(--success); background: var(--success-soft); }

.lead-card__deal--overdue { color: var(--danger); background: var(--danger-soft); }
.lead-card__deal--none { color: var(--ink-faint); background: var(--surface-subtle); }
.lead-card__deal .link { margin-left: 4px; }

.lead-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 9px; }
.lead-card__badges .badge, .lead-card__badges-more { padding: 3px 6px; font-size: 10px; }
.lead-card__badges-more { border: 0; color: var(--ink-faint); background: var(--surface-subtle); }

/* Этап 61.7 (ночной прогон 2) — три кнопки быстрых действий убраны;
   низ карточки теперь: слева температура + (если ждёт ответа) серая метка
   «ждёт 3 ч», справа дата и время заявки. */
.lead-card__bottom { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.lead-card__waiting { min-width: 0; padding: 2px 7px; border-radius: 99px; color: var(--ink-faint); background: var(--surface-subtle); font-size: 10px; font-weight: 600; white-space: nowrap; }
.lead-card__date { min-width: 0; margin-left: auto; color: var(--ink-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Этап 61.7 — счётчик непрочитанных на аватаре (было на кнопке «переписка»,
   которой больше нет), красный кружок в правом верхнем углу, как в мессенджерах. */
.avatar__unread { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px; display: flex; align-items: center; justify-content: center; border-radius: 99px; border: 2px solid var(--surface); color: #fff; background: var(--danger); font-size: 9px; font-weight: 700; line-height: 1; }

/* Меню «⋯» на карточке — «Переместить в этап», альтернатива drag&drop на тач
   (этап 21, п.2). Позиционируется от .lead-card (у неё уже position:relative) —
   отдельная обёртка .card-menu больше не нужна. */
.card-menu__list { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 4px); right: 0; width: 190px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-float); animation: pop-in var(--normal) var(--ease); }
.card-menu__title { padding: 6px 8px 8px; color: var(--ink-faint); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.card-menu__item { display: block; width: 100%; text-align: left; min-height: 34px; padding: 0 8px; border: 0; border-radius: 7px; color: var(--ink-soft); background: transparent; font-size: 12.5px; }
.card-menu__item:hover { background: var(--surface-tint); color: var(--ink); }
.card-menu__item.is-current { color: var(--accent-strong); font-weight: 600; }
/* Этап 60.7 — «Удалить лида» в «⋯» шапки панели лида: остаётся красным и при наведении. */
.card-menu__item.text-danger:hover { color: var(--danger); background: var(--danger-soft); }
/* Этап 60.7 — «⋯» шапки панели лида: панель сама уже var(--z-panel)=91,
   выше обычного var(--z-dropdown)=80 — без этого список прятался под ней
   на десктопе. На телефоне ниже эта же .card-menu__list становится листом
   снизу с z-index выше модалок — там всё уже верно, этот класс не мешает
   (см. медиа-запрос ниже, он идёт позже и переопределяет). */
.panel__more-menu { z-index: calc(var(--z-panel) + 1); }
.card-menu-backdrop, .card-menu__grabber { display: none; }
@media (max-width: 768px) {
    /* Этап 56-fix, раздел 2а, п.6 — «Переместить в этап» на телефоне: лист
       снизу, как остальные, а не мелкое выпадающее меню у края карточки. */
    .card-menu-backdrop { display: block; position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); }
    .card-menu__list {
        position: fixed; inset: auto 0 0 0; z-index: calc(var(--z-modal) + 1);
        width: 100%; max-width: none; max-height: 70vh;
        border-radius: var(--r-xl) var(--r-xl) 0 0; border: 0; box-shadow: var(--shadow-float);
        padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0));
        animation: sheet-in var(--normal) var(--ease);
    }
    .card-menu__grabber { display: block; width: 40px; height: 5px; margin: 4px auto 8px; border-radius: 99px; background: var(--line-strong); }
    .card-menu__title { padding: 0 8px 10px; font-size: 12px; }
    .card-menu__item { font-size: 14px; }
}
@media (max-width: 768px) {
    /* Этап 57, раздел «CRM на телефоне» — одна колонка выбранного этапа
       вертикальным списком, а не горизонтальная прокрутка узких колонок;
       переключение — чипы этапов (уже есть, этап 56) + свайп (boardTouchStart/
       End в sales.js). Сами колонки не удаляются из DOM (Sortable уже
       инициализирован на всех .kanban-column__list) — просто скрываем все,
       кроме активной, и убираем горизontальный скролл-контейнер. */
    .kanban { display: block; overflow-x: visible; }
    .kanban-column { display: none; width: 100%; min-width: 0; }

}

/* ===== Фильтры ===== */
.filter-control { max-width: 220px; min-height: 38px; }
.filter-control--sm { max-width: 170px; min-height: 34px; font-size: 12px; }

/* ===== Списки воронки (онбординг шаг 2, предложение AI) ===== */
.stage-list { display: grid; gap: 8px; margin-bottom: 20px; }
.stage-list__item { padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-subtle); font-size: 12.5px; }

/* ===== Чат ===== */
.chat { display: grid; gap: 10px; padding-top: 4px; }
.chat__messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: var(--space, 2px) 0; }
.chat-message { display: flex; margin-bottom: 0; }
.chat-message--client { justify-content: flex-start; }
.chat-message--ai, .chat-message--manager { justify-content: flex-end; }
.chat-message--system { justify-content: center; }
.chat-message__bubble { max-width: 82%; padding: 10px 12px; border-radius: 12px 12px 12px 4px; color: var(--ink); background: var(--surface-subtle); font-size: 12px; }
/* Этап 57 — три разных пузыря (спека): клиент серый (выше), AI — акцентный
   мягкий (не заливка, как раньше — залитый акцент визуально спорил с общей
   светлой палитрой приложения), менеджер — белый с рамкой. Раньше AI и
   менеджер были визуально неотличимы (общее правило ниже). */
.chat-message--ai .chat-message__bubble { border-radius: 12px 12px 4px 12px; color: var(--accent-strong); background: var(--accent-soft); }
.chat-message--manager .chat-message__bubble { border-radius: 12px 12px 4px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); }
.chat-message__meta { display: block; margin-top: 5px; color: var(--ink-faint); font-size: 10px; }
.chat-message--ai .chat-message__meta { color: var(--accent-strong); opacity: .7; }
.chat-message__system { color: var(--ink-faint); font-size: 10.5px; text-align: center; padding: 2px 12px; }
.chat__input { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.chat__input .input { min-height: 38px; }

/* --- Вложение в тестовом чате (этап 34, п.9) --- */
.chat-attachment-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 6px 5px 10px; border-radius: 999px; background: var(--surface-tint); font-size: 11.5px; max-width: 100%; }
.chat-attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-chip__remove { flex-shrink: 0; width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--line); color: var(--ink-soft); font-size: 13px; line-height: 1; cursor: pointer; }

/* Ночной прогон 2, этап 63.3 — карточки файлов send_media в песочнице «Проверить AI». */
.ai-sandbox__attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ai-sandbox__attachments .chat-attachment-chip { margin-top: 0; }

/* --- «Печатает…» в тестовом чате (этап 33, п.B) --- */
.typing-dots { display: flex; align-items: center; gap: 3px; padding: 12px 14px; }
.typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .6; animation: typing-bounce 1.2s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }

/* --- Трассировка инструментов AI (этап 33, п.14) --- */
.ai-trace { margin-top: 6px; }
.ai-trace__toggle { border: 0; background: transparent; padding: 0; color: inherit; opacity: .75; font-size: 10.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ai-trace__list { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.ai-trace__item { font-size: 11.5px; line-height: 1.4; opacity: .9; white-space: normal; overflow-wrap: anywhere; }
.ai-trace__link { display: inline-block; margin-left: 6px; font-size: 11.5px; opacity: 1; }
.ai-trace__toggle { font-size: 11.5px; }
@media (max-width: 768px) { .ai-trace__toggle, .ai-trace__link { min-height: 32px; } }

/* ===== Мягкий блок / инфо-список / история (панель лида) ===== */
.soft-box { padding: 13px 14px; border-radius: var(--r-md); background: var(--surface-tint); }
.soft-box h3 { margin: 0 0 6px; font-size: 12px; }
.soft-box p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }

/* Этап 35, п.2 — карточка-ссылка на «База знаний» (заменяет убранное поле «Информация для ответов»). */
.soft-box--link { display: flex; align-items: center; gap: 10px; color: var(--accent-strong); font-size: 13px; font-weight: 500; transition: background var(--fast) var(--ease); }
.soft-box--link:hover { background: var(--accent-soft); }
.soft-box--link svg { width: 18px; height: 18px; flex: 0 0 auto; }

.history { display: grid; gap: 11px; }

/* ===== Empty state / skeleton (этап 106, theme.css §12): подложка r28, заголовок Inter Tight 22, иконка в белом круге ===== */
.empty-state { min-height: 160px; display: grid; place-items: center; align-content: center; justify-items: center; padding: 40px 24px; text-align: center; }
.empty-state__title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: -.02em; }
.empty-state p { max-width: 44ch; margin: 8px auto 0; color: var(--ink-soft); font-size: 14px; }
.empty-state h3 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
.empty-state-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 50%; color: var(--ink); background: var(--surface-raised); box-shadow: var(--hl-top), var(--shadow-1); }
.empty-state-icon svg { width: 28px; height: 28px; }

.skeleton { position: relative; overflow: hidden; border-radius: var(--rounded-xs); background: var(--nx-skel); }
.skeleton:after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--nx-skel-shine), transparent); animation: skeleton var(--shimmer-time) linear infinite; }
@keyframes skeleton { to { transform: translateX(100%); } }
.skeleton-line { height: 12px; border-radius: 6px; }
.skeleton-line.wide { width: 72%; }
.skeleton-line.short { width: 38%; }

/* ===== Focus ===== */
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }

/* ===== Utility ===== */
.link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(22 22 22 / .3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-color: currentColor; }
/* Этап 104 — кнопка, выглядящая как ссылка (button.link), по умолчанию без серой рамки и фона браузера. :where() даёт нулевую специфичность:
   прежние локальные правила экранов (.setup-page button.link, .booking-dialog button.link …) по-прежнему главнее. */
:where(button.link) { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: inherit; }
/* Кнопка внутри текста, выглядящая как .link — например «Вернуться в
   панель» посреди предложения в жёлтой полосе impersonation (этап 23). */
.inline-form-link { display: inline; }
.inline-form-link button.link { border: 0; padding: 0; background: transparent; font: inherit; }
.text-muted { color: var(--ink-faint); }

.text-danger { color: var(--danger); }
/* Этап 84: «≈ 6 570 ₸» рядом с суммой баланса AI в долларах — мелко и серым (Money::usdWithKzt, public/js/money.js). */
.money-kzt { color: var(--ink-faint); font-size: .8em; font-weight: 400; white-space: nowrap; }
.text-warning { color: var(--warning); }
.block { display: block; }
.text-success { color: var(--success); }
.text-sm { font-size: 12.5px; }
.text-center { text-align: center; }
.text-xs { font-size: 11px; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }

.flex-wrap { flex-wrap: wrap; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }

/* Карточка записи — 5 визуальных статусов (спека): ожидает/подтверждён/
   пришёл/не пришёл/отменён — status «scheduled» разделяется на первые два
   отдельным булевым confirmed (см. eventVisualStatus() в appointments.js),
   сам enum статуса не трогали (это была бы логика, не стиль). */
.cal-event { position: absolute; z-index: 2; left: 5px; right: 5px; display: grid; align-content: center; gap: 2px; overflow: hidden; padding: 4px 8px; border-left: 3px solid currentColor; border-radius: 6px; cursor: pointer; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.cal-event:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cal-event__name { display: flex; align-items: center; gap: 3px; color: var(--ink); font-size: 11px; font-weight: 600; line-height: 1.3; }
.cal-event__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-event__meta { color: var(--ink-soft); font-size: 10px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event--waiting { color: var(--blue); background: var(--blue-soft); }
.cal-event--confirmed { color: var(--purple); background: var(--purple-soft); }
.cal-event--arrived { color: var(--success); background: var(--success-soft); }
.cal-event--no_show { color: var(--danger); background: var(--danger-soft); }
.cal-event--cancelled { color: var(--appt-cancelled); background: var(--surface-subtle); text-decoration: line-through; opacity: .75; }

/* Этап 82, T1.01 — запись, открытая по ссылке из уведомления: подсвечена на 2 секунды. */

.cal-event.is-focus { box-shadow: 0 0 0 2px var(--ink); z-index: 4; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.slot-chip { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--accent-strong); background: var(--accent-faint); font-size: 12px; transition: all var(--fast) var(--ease); }
.slot-chip:hover, .slot-chip.is-selected { color: var(--on-primary); border-color: var(--ink); background: var(--accent); }
/* Этап 60, п.2 — слоты сгруппированы по дням (окно записи, панель переноса). */
.slot-day-group + .slot-day-group { margin-top: 10px; }
.slot-day-group__title { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.slot-more-link { display: inline-flex; align-items: center; margin-top: 8px; background: transparent; border: 0; padding: 4px 0; font-size: 12px; }

/* ===== Телефон (≤768 px): раскладка страниц, зоны нажатия, листы. Каркас (меню, шапка, капсула) — shell.css. ===== */

@media (max-width: 768px) {

    /* Этап 104, T3.32 — под значками «Активность / Порядок / Фильтры (N)» короткие подписи; «Вид: Доска / Список» и «Скачать список (Excel)»
       с телефона ушли в лист «⋯» вверху страницы (у всех ролей), в строке инструментов их нет. */

    .board-toolbar__short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 600; line-height: 1.2; }

    /* --- Кнопки/поля — минимум 44px и 16px, чтобы iOS не зумил при фокусе --- */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 44px; }
    .btn-icon { width: 44px; height: 44px; }
    .input, .select, .textarea { min-height: 44px; font-size: 16px; }
    .textarea { min-height: 96px; }

    /* ===== Этап 56-fix, раздел 2а, п.7 — ОДИН блок мобильных токенов зоны
       нажатия: на < 768px ЛЮБОЙ интерактивный элемент ≥ 44×44px. Значение —
       именно box (высота/ширина самого кликабельного элемента), не иконка
       внутри: где уместно, иконка/текст остаются визуально прежнего размера,
       у элемента просто больше отступы/min-height. Прошёлся по всем
       компонентам сайта (не только по находке тестировщика в шапке/вкладках).
       .btn/.btn-icon уже ≥44px (правила выше, этап 21) — здесь то, что мимо
       них: свои неймспейсы (.tabs__item, .segmented и т.п.) и бесклассовые
       кнопки (колокольчик, поиск в шапке).
       Ⓐ Кнопки/переключатели с фиксированной высотой меньше 44 */
    .checkbox, .radio { min-height: 44px; }
    .card-menu__item { min-height: 44px; }
    .dropdown-item { min-height: 44px; }
    .tabs__item { min-height: 44px; }
    .segmented button, .segmented a { min-height: 44px; }
    .choice span { min-height: 44px; }

    .slot-chip { min-height: 44px; }
    .slot-more-link { min-height: 44px; }

    /* Ⓔ Ссылка-CTA внутри текста баннера («Пополнить», «Оформить тариф» и
       т.п.) — по буквe WCAG 2.5.5 ссылка внутри предложения освобождена от
       44px, но это фактически единственное действие баннера, не «ссылка в
       тексте для справки» — даём реальную зону нажатия тем же приёмом
       (padding + компенсирующий отрицательный margin), саму строку баннера
       визуально почти не меняет. Скоуп — .notice и .balance-hero (та же
       ситуация — единственное действие абзаца, найдено при сплошном проходе
       по экранам, этап 56-fix), не все .link сайта (в других местах —
       таблицы/списки — так плотно не нужно). */
    .notice .link, .balance-hero .link { display: inline-block; padding: 15px 4px; margin: -15px -4px; }

    /* Этап 87, T2.09 — «Изменить» в строке про отправленный код и ссылки внутри подсказок: зона нажатия 44 px без сдвига текста. */
    .guest-card__subtitle .link-button, .verify-hint .link, .register-consent .link { display: inline-block; padding: 15px 4px; margin: -15px -4px; }
    /* Кнопка «Настройки» в карточке проекта («Мои проекты») — оформлена как
       .link (второстепенное действие в ряду кнопок), но это не ссылка внутри
       предложения, а самостоятельное действие — тот же приём. !important — в
       разметке у кнопки инлайновый style="padding:0" (чтобы на десктопе не
       было вида кнопки), иначе его не перебить (найдено при сплошном проходе
       по экранам, этап 56-fix). */
    .project-card__footer .link { display: inline-block !important; padding: 13px 6px !important; margin: -13px -6px; }

    /* .btn-icon.btn-sm (34×34, напр. «⋯» на карточке лида) специфичнее
       одноклассового .btn-icon чуть выше — без отдельного правила проигрывал бы */
    .btn-icon.btn-sm { width: 44px; height: 44px; }
    /* Ⓒ Маленькие «крестики»/точечные кнопки — тап-зона больше визуального
       квадрата за счёт отрицательных отступов, сама иконка размер не меняет */
    .notice__close { width: 44px; height: 44px; margin: -14px -16px -14px 4px; }
    /* Этап 69.E — «+» в шапке колонки: квадрат 24px остался, зона нажатия 44px за счёт невидимой подложки. */
    .kanban-column__add { position: relative; }
    .kanban-column__add::after { content: ''; position: absolute; inset: -10px; }
    .filter-chip button { width: 32px; height: 32px; margin: -8px -8px -8px 0; }
    /* Ⓓ .switch — компактный пилюлеобразный тумблер того же вида, что у
       iOS/Android (24px — общепринятое исключение для самой пилюли), но зона
       нажатия вокруг нужна не меньше 44px — расширяем прозрачным ::before,
       саму пилюлю визуально не трогаем */
    .switch { position: relative; }
    .switch:before { content: ''; position: absolute; inset: -10px -6px; }

    /* --- Формы в одну колонку --- */
    .detail-grid { grid-template-columns: 1fr; }
    .card--narrow { max-width: none; }

    /* --- Этап 56, раздел 2а, п.5 — шапка страницы: одно главное действие
         круглой кнопкой «+» 48px, второстепенные — под «⋯» в листе снизу. --- */

    .page-fab { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; justify-content: center; }
    .page-fab span { display: none; }
    .page-fab svg { width: 20px; height: 20px; }

    /* --- Фильтры — выезжающий снизу лист вместо строки (этап 21, п.2) --- */

    .filters {
        position: fixed; inset: auto 0 0 0; z-index: calc(var(--z-modal) + 1);
        flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 0;
        max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
        padding: 18px 17px calc(18px + env(safe-area-inset-bottom, 0));
        border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); box-shadow: var(--shadow-float);
        transform: translateY(100%); transition: transform var(--normal) var(--ease);
    }
    .filters.is-open { transform: none; }
    .filters:not(.is-open) { visibility: hidden; }
    .filter, .filter.search { min-width: 0; flex: none; }
    .filter-actions { flex-wrap: wrap; }

    /* Этап 56-fix — на тач-экране тап по карточке лида оставляет :hover
       «залипшим» (обычное поведение мобильных браузеров) до следующего тапа
       мимо; transform:translateY(-2px) у .lead-card:hover при этом создаёт
       новый containing block для position:fixed-потомков — «Переместить в
       этап» (теперь лист снизу, см. .card-menu__list ниже) считал координаты
       от карточки, а не от экрана. hover как взаимодействие на телефоне и
       так не имеет смысла — просто гасим сам подъём карточки. */
    .lead-card:hover { transform: none; }

    /* --- AI-сотрудник: вкладки «Настройки | Проверить AI» вместо двух
       колонок сразу (этап 21, п.5) --- */
    .tabs.ai-layout__tabs { display: flex; margin-bottom: 14px; }
    .is-hidden-mobile { display: none; }
    .ai-sandbox__messages { max-height: calc(100vh - var(--topbar-h) - 230px); }

    /* --- Модалки и попапы записи (тот же .modal/.modal-overlay) — нижние листы --- */
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal { width: 100%; max-width: 100%; max-height: 86vh; border-radius: var(--r-xl) var(--r-xl) 0 0; animation: sheet-in var(--normal) var(--ease); }
    .modal--sm { width: 100%; }

    /* --- Боковая панель лида — на весь экран, липкие вкладки, поле ввода
       прижато книзу (этап 21, п.2). Полную «шапку в одну строку» не делаем —
       риск сломать уже отлаженные поля важнее выигрыша по высоте, весь
       контент и так доступен прокруткой внутри панели, ничего не теряется. --- */
    .panel-overlay { background: var(--surface); }
    .panel { width: 100vw; min-width: 0; border-left: 0; }
    .panel__close { width: auto; padding: 0 10px 0 4px; }
    .panel__close svg { flex-shrink: 0; }

    /* Этап 89, T3.11 — полоса 148px справа нужна только под «Назад» и «⋯» рядом с первой строкой (аватар + имя): остальные поля
       карточки клиента — на всю ширину. Карточка записи (.record-panel) осталась как была. */

    .panel .tabs { position: sticky; top: 0; z-index: 3; background: var(--surface); margin: 0 -17px; padding: 0 17px; }
    .chat__input { position: sticky; bottom: 0; z-index: 2; background: var(--surface); margin: 14px -17px 0; padding: 14px 17px calc(14px + env(safe-area-inset-bottom, 0)); }
    /* Этап 69.E — «Проверить AI» на телефоне: поле ввода 44px, иконки-кнопки не сжимаются (были 31×44 и 38px). */
    .chat__input .input { min-height: 44px; }
    .chat__input .btn-icon { flex: 0 0 44px; }
    /* Поле «Проверить AI» лежит на странице (не в листе): липнет НАД нижней навигацией, а не под ней. */
    .chat__input { bottom: calc(56px + env(safe-area-inset-bottom, 0)); padding-bottom: 14px; }
    .panel .chat__input { bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0)); }

    /* --- Таблица лидов → карточки-строки (этап 21, п.2); .table-responsive — opt-in,
       остальные таблицы сайта продолжают просто скроллиться внутри .table-wrap. --- */
    .table-responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    .table-responsive, .table-responsive tbody, .table-responsive tr, .table-responsive td { display: block; width: 100%; }
    .table-responsive { min-width: 0; border-spacing: 0; }
    .table-responsive tbody tr { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
    .table-responsive tbody tr:last-child { margin-bottom: 0; }
    .table-responsive td { padding: 6px 0; border: 0; }
    .table-responsive td:before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ink-faint); font-size: 11px; font-weight: 600; }
    .table-responsive td:empty { display: none; }

}

/* --- «Выйти» — красным, внизу, отдельно --- */

@keyframes sheet-in { from { transform: translateY(24px); opacity: .7; } to { transform: none; opacity: 1; } }

/* ===== Обучающий режим (этап 22) =====
   .tour-backdrop — прозрачный на вид, но перехватывает клики по всей странице
   (в т.ч. под «вырезом» — спека прямо просит, чтобы элемент под подсветкой не
   нажимался мимо кнопок тура); само затемнение с «вырезом» рисует не он, а
   box-shadow у .tour-highlight (классический приём: огромный spread вокруг
   рамки красит всё, кроме самой рамки). Z-index — выше самого высокого токена
   (--z-toast: 120), отдельного токена не заводили: это разовый оверлей. */
.tour-backdrop { position: fixed; inset: 0; z-index: 199; background: transparent; }
.tour-highlight { position: fixed; z-index: 200; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(22,22,22,.6); pointer-events: none; transition: top var(--fast) var(--ease), left var(--fast) var(--ease), width var(--fast) var(--ease), height var(--fast) var(--ease); }
.tour-card { position: fixed; z-index: 201; width: 300px; max-width: calc(100vw - 24px); padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-float); animation: pop-in var(--normal) var(--ease); }
.tour-card__counter { margin-bottom: 6px; color: var(--accent-strong); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.tour-card__title { margin-bottom: 6px; font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.tour-card__body { margin-bottom: 14px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
.tour-card__actions { display: flex; align-items: center; gap: 8px; }
.tour-card__spacer { flex: 1; }
@media (max-width: 768px) {
    .tour-card--docked {
        top: auto !important; left: 0 !important; right: 0; bottom: 0;
        width: 100%; max-width: none; border-radius: var(--r-xl) var(--r-xl) 0 0;
        padding: 16px 17px calc(16px + env(safe-area-inset-bottom, 0));
        animation: sheet-in var(--normal) var(--ease);
    }
}

/* ===== Модель AI (этап 33, п.8) ===== */

.ai-model-list { display: flex; flex-direction: column; gap: 8px; }
.ai-model-option { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.ai-model-option.is-selected { border-color: var(--ink); background: var(--accent-soft); }
.ai-model-option__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ai-model-option__name { font-weight: 650; font-size: 13.5px; }
.ai-model-option__tech { margin-right: auto; color: var(--ink-faint); font-size: 11px; }
.ai-model-option__price { overflow-wrap: anywhere; }
.ai-model-option__dots { font-size: 11px; color: var(--ink-faint); letter-spacing: .02em; }
.ai-model-option__desc { margin: 4px 0 0; font-size: 12px; color: var(--ink-soft); }
.ai-model-option__price { margin: 4px 0 0; font-size: 11px; color: var(--ink-faint); }

/* ===== «Мои проекты» (этап 32, п.3) ===== */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.project-card { display: flex; flex-direction: column; gap: 8px; }
.project-card__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.project-card__meta { color: var(--ink-faint); font-size: 12px; }
.project-card__channels { display: flex; flex-wrap: wrap; gap: 4px; }
.project-card__footer { margin-top: 6px; }
.project-card--current { border-color: var(--ink); }
/* Этап 88, T2.28 — название проекта — ссылка (у открытого на главную, у другого переключает проект); «⋯» и «Подключить» — зона нажатия ≥ 44 px. */
.project-card__name { color: inherit; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
a.project-card__name:hover, .project-card__name--button:hover { color: var(--accent-strong); }
.project-card__name--button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.project-card__more { min-width: 44px; min-height: 44px; }
.project-card__link-button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; min-height: 44px; }
a.project-card__name { display: inline-flex; align-items: center; min-height: 44px; }
.project-card__channels a.link { display: inline-flex; align-items: center; min-height: 44px; }
.project-card .dropdown-item { min-height: 44px; text-decoration: none; }
.archived-projects > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink-soft); }
.archived-projects__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.archived-projects__list li { padding: 8px 0; border-top: 1px solid var(--line); }
.wizard-exit { width: 100%; }

.wizard-exit .link, .wizard-exit button.link { display: inline-flex; align-items: center; min-height: 44px; }

/* ===== «Тариф» (этап 40) ===== */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.plan-card { display: flex; flex-direction: column; gap: 4px; }
.plan-card__title { font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.plan-card__price { font-size: 20px; font-weight: 700; }
.plan-card__for { color: var(--ink-faint); font-size: 12px; }
.plan-card__projects { font-size: 12px; margin-bottom: 6px; }
.plan-card--current { border-color: var(--ink); }
@media (max-width: 640px) {
    .plans-grid { grid-template-columns: 1fr; }
}

/* ===== Раздел «Баланс» (этап 31, п.9-10) ===== */
.balance-hero { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.balance-hero__amount { font-size: 40px; font-weight: 700; letter-spacing: -.05em; }
.balance-hero__kzt { color: var(--ink-faint); font-size: 15px; }
.balance-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.balance-metric { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.balance-metric__value { font-size: 21px; font-weight: 700; letter-spacing: -.04em; }
.balance-metric__label { margin-top: 4px; color: var(--ink-faint); font-size: 11px; }
@media (max-width: 720px) { .balance-metric-grid { grid-template-columns: 1fr; } }

/* --- Столбиковая диаграмма расхода за 30 дней, CSS-only (тот же приём, что в панели платформы) --- */
.balance-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; overflow-x: auto; }
.balance-bars__col { flex: 1; min-width: 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.balance-bars__bar { width: 100%; max-width: 16px; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent); }
.balance-bars__label { font-size: 8px; color: var(--ink-faint); white-space: nowrap; }

/* --- Модалка пополнения: чипы сумм --- */
.topup-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.topup-chip { padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: var(--surface); font-size: 13px; font-weight: 600; cursor: pointer; }
.topup-chip.is-active { border-color: var(--ink); background: var(--accent-soft); color: var(--accent-strong); }

/* ===== Этап 62.6 — общий модуль переписки (public/js/thread.js +
   partials/thread.blade.php): раздели тели дат, «Загрузить ещё», пилюля
   «Новые сообщения», подпись автора у AI/менеджера, статус «прочитано»,
   поле ответа с автовысотой. Сами пузыри (.chat/.chat-message*) — уже
   были в дизайн-системе с этапа 57, переиспользуются как есть. ===== */
.thread-skeleton { display: grid; gap: 10px; padding: 6px 0; }
.thread__load-more { display: flex; justify-content: center; padding: 4px 0 10px; }
.thread__day-sep { text-align: center; margin: 10px 0 4px; color: var(--ink-faint); font-size: 11px; font-weight: 600; }
.chat-message__author { margin-bottom: 3px; font-size: 10.5px; font-weight: 700; opacity: .75; }
.thread-status--read { color: var(--accent-strong); }
.thread__new-pill { align-self: center; margin: 6px auto 0; padding: 7px 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; box-shadow: var(--shadow-float); cursor: pointer; }
.thread__composer { margin-top: 10px; }
.thread__ai-hint { margin: 0 0 8px; color: var(--ink-faint); font-size: 11px; }
/* Этап 92, T3.23 — «Кто отвечает клиенту»: одна полоса над полем ответа (карточка на доске и Чаты). Кнопка 44 px; на узком экране
   текст переносится (полоса в одну-две строки), поле ответа не перекрыто. */
.reply-owner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-subtle); }
.reply-owner--staff { background: var(--accent-faint); border-color: var(--accent-soft); }
.reply-owner__text { min-width: 0; flex: 1 1 auto; }
.reply-owner__title { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.reply-owner__reason, .reply-owner__silent { margin-top: 2px; color: var(--ink-faint); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.reply-owner__silent { color: var(--warning); }
.reply-owner .thread__ai-hint { margin: 2px 0 0; font-size: 11.5px; line-height: 1.4; }
.reply-owner__btn { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
.reply-owner__btn.is-busy { opacity: .6; }
@media (max-width: 480px) {
    .reply-owner { gap: 8px; padding: 8px 10px; }
    .reply-owner__btn { padding: 0 12px; font-size: 13px; }
}
/* Этап 80 — Instagram: предупреждение об окне 24 часа над полем ответа и причина ошибки под сообщением. */
.thread__ig-window { margin: 0 0 8px; line-height: 1.4; }
.thread__ig-window .notice__body { font-size: 12.5px; }
.chat-message__error { margin-top: 3px; color: var(--danger); font-size: 11px; line-height: 1.35; }
.thread__textarea { resize: none; min-height: 40px; max-height: 120px; line-height: 1.4; padding-top: 10px; padding-bottom: 10px; font-family: inherit; }
/* Этап 80 (микроправка) — поле ответа на телефоне: поле на всю ширину отдельной строкой, кнопки (скрепка и «Отправить») — строкой под ним;
   подсказка AI и предупреждение об окне 24 часа Instagram — отдельными строками над полем, текст переносится, не обрезается. */
@media (max-width: 768px) {
    .thread__composer .chat__input { flex-wrap: wrap; row-gap: 8px; }
    .thread__composer .chat__input .thread__textarea { order: -1; flex: 1 1 100%; width: 100%; min-width: 0; }
    .thread__composer .chat__input .btn-primary { margin-left: auto; min-height: 44px; }
    /* Этап 104, T3.38 — кнопка отправки на телефоне: круглая, 44 px, только значок (подпись «Отправить» остаётся для чтения с экрана);
       скрепка «Файлы» слева — тоже значком 44 px (см. .thread__attach выше). */
    .thread__composer .chat__input .thread__send { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; gap: 0; }
    .thread__send-label { display: none; }
    .thread__send svg { width: 18px; height: 18px; }
    .thread__composer .thread__ai-hint,
    .thread__composer .thread__ig-window { display: block; width: 100%; box-sizing: border-box; }
    .thread__composer .thread__ig-window { display: flex; }
    .thread__composer .thread__ai-hint { white-space: normal; overflow: visible; text-overflow: clip; }
    .thread__ig-window .notice__body { overflow-wrap: anywhere; }
}

/* ===========================================================================
   Ночной прогон 2, этап 63.2 (часть B) — «Медиа-библиотека» (/knowledge/media):
   полоска использования, сетка карточек, форма (боковая панель на десктопе,
   лист снизу на телефоне — тот же общий механизм public/js/sheets.js, класс
   .media-form-panel добавлен в его PANEL_SELECTOR), зона загрузки файлов.
   =========================================================================== */
.media-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.media-page__header p { margin: 4px 0 0; max-width: 640px; color: var(--ink-faint); font-size: 13px; }

.media-usage { margin-bottom: 20px; }
.media-usage__bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-subtle); overflow: hidden; }
.media-usage__fill { height: 100%; border-radius: var(--r-pill); background: var(--accent-gradient); transition: width var(--normal) var(--ease); }
.media-usage__text { margin-top: 6px; color: var(--ink-faint); font-size: 12.5px; }

.media-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; }
.media-empty h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.media-empty > p { margin: 0; color: var(--ink-faint); font-size: 13px; }
.media-empty__examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 6px; }
.media-empty__example { min-width: 160px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-subtle); text-align: left; }
.media-empty__example strong { display: block; font-size: 13px; }
.media-empty__example span { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 11.5px; font-style: italic; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.media-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: opacity var(--normal) var(--ease); }
.media-card--inactive { opacity: .55; }
.media-card__cover { height: 130px; background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.media-card__mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; width: 100%; height: 100%; }
.media-card__mosaic span { display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--surface); }
.media-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.media-card__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.media-card__title { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.media-card__desc { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.media-card__trigger { margin: 0; color: var(--ink-faint); font-size: 12px; font-style: italic; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.media-card__trigger span { font-style: italic; }
.media-card__files { font-size: 12px; color: var(--ink-soft); }
.media-card__stats { font-size: 11.5px; color: var(--ink-faint); }
.media-card__footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }

/* --- Форма записи: боковая панель на десктопе --- */
.media-form-overlay { position: fixed; z-index: var(--z-panel-backdrop); inset: 0; background: var(--scrim); display: flex; justify-content: flex-end; animation: fade-in var(--normal) var(--ease); }
.media-form-panel { position: relative; z-index: var(--z-panel); width: min(440px, 100vw); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-float); animation: panel-in var(--normal) var(--ease); display: flex; flex-direction: column; }
.media-form-panel__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.media-form-panel__head strong { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.media-form-panel__body { padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0)); }
/* Правка к этапу 63 — «Сохранить» внизу формы, под зоной файлов; «Удалить запись» серым слева. */
.media-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.media-form-footer__delete { color: var(--ink-faint); }
.media-form-footer__delete:hover { color: var(--danger); }

.media-upload { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.media-upload__title { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.media-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink-faint); font-size: 12.5px; text-align: center; cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.media-dropzone svg { width: 22px; height: 22px; }
.media-dropzone:hover, .media-dropzone.is-over { border-color: var(--ink); background: var(--accent-faint); color: var(--accent-strong); }
.media-upload__errors { margin-top: 8px; }
.media-upload__errors p { margin: 2px 0; color: var(--danger); font-size: 12px; }
.media-upload__list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.media-upload__row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-subtle); cursor: grab; }
.media-upload__row--pending { cursor: default; opacity: .8; }
.media-upload__thumb { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; }
.media-upload__icon { width: 32px; height: 32px; display: grid; place-items: center; font-size: 17px; flex: 0 0 auto; }
.media-upload__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.media-upload__size { flex: 0 0 auto; color: var(--ink-faint); font-size: 11px; }
.media-upload__remove { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); }
.media-upload__remove:hover { background: var(--danger-soft); color: var(--danger); }
.media-upload__remove svg { width: 14px; height: 14px; }
.media-upload__progress { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.media-upload__progress > div { height: 100%; background: var(--accent); transition: width 120ms linear; }

/* --- «Отправить клиенту…» (поиск переписки) --- */
.media-send-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.media-send-list__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 13px; text-align: left; }
.media-send-list__item.is-selected { border-color: var(--ink); background: var(--accent-faint); }

/* ===== Этап 104, T3.37 — «Файлы из медиа-библиотеки» в поле ответа: скрепка с подписью и сетка карточек с картинками ===== */
.thread__attach { flex: 0 0 auto; gap: 6px; }
.thread__attach svg { width: 18px; height: 18px; flex: 0 0 auto; }
.modal--media-pick { max-width: 560px; }
.media-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; padding: 2px; }
.media-pick__card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.media-pick__card.is-selected { border-color: var(--ink); background: var(--accent-faint); box-shadow: 0 0 0 1px var(--ink); }
.media-pick__thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); background: var(--canvas); }
.media-pick__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-pick__thumb-icon { display: inline-flex; color: var(--ink-faint); }
.media-pick__thumb-icon svg { width: 28px; height: 28px; }
.media-pick__title { font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.media-pick__count { color: var(--ink-faint); font-size: 11.5px; }
.media-pick__empty { display: grid; gap: 10px; justify-items: start; padding: 4px 0; }
.media-pick__empty p { margin: 0; }
.media-pick__ai-note { margin: 6px 0 0; color: var(--ink-faint); font-size: 12px; line-height: 1.4; }
@media (max-width: 768px) {
    .thread__attach { width: 44px; min-width: 44px; height: 44px; padding: 0; }
    .thread__attach-label { display: none; }
    .media-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 38vh; }
    .media-pick__empty .btn { min-height: 44px; }
}

@media (max-width: 768px) {
    /* Форма записи — лист снизу вместо боковой панели (раздел 2а/спека 63.2). */
    .media-form-overlay { align-items: flex-end; }
    .media-form-panel { width: 100%; height: auto; max-height: 90dvh; border-left: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; animation: sheet-in var(--normal) var(--ease); }
    .media-grid { grid-template-columns: 1fr; }
    .media-page__header { flex-direction: column; }
    .media-page__header .page-fab { align-self: flex-end; }
}

/* ===========================================================================
   Ночной прогон 2, этап 63.4/63.5 (часть B) — вложения медиа-библиотеки в
   ленте переписки (public/js/thread.js + resources/views/partials/thread.blade.php):
   миниатюры фото (до 3 + «+N»), карточки остальных файлов, «не доставлено ·
   Повторить». Используется и «Чатами», и панелью лида (общий partial).
   =========================================================================== */
.thread-media { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.thread-media__images { display: flex; gap: 4px; }
.thread-media__thumb { position: relative; width: 84px; height: 84px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-subtle); flex: 0 0 auto; }
.thread-media__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thread-media__thumb-more { position: absolute; inset: 0; display: grid; place-items: center; background: var(--scrim); color: #fff; font-size: 15px; font-weight: 600; }
.thread-media__file { display: flex; align-items: center; gap: 8px; min-width: 200px; max-width: 260px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-subtle); }
.thread-media__file-icon { font-size: 18px; flex: 0 0 auto; }
.thread-media__file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.thread-media__file-size { flex: 0 0 auto; color: var(--ink-faint); font-size: 11px; }
.thread-media__failed { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--danger); }
.thread-media__failed button { border: 0; background: transparent; color: var(--danger); font-weight: 600; text-decoration: underline; padding: 0; min-height: 28px; }

/* ===== Этап 69.3 — лист «Шаблоны» воронки ===== */
.tpl-sheet { width: min(560px, 100%); }
.tpl-list { display: flex; flex-direction: column; gap: 8px; }
.tpl-card { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 44px; padding: 12px 14px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 14px); cursor: pointer; }
.tpl-card:hover { background: var(--surface-subtle); }
.tpl-card__title { font-size: 15px; font-weight: 600; }
.tpl-card__chain { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
.tpl-own { margin-top: 20px; }
.tpl-own__title { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.tpl-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 4px; }
.tpl-stages { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; }
.tpl-stage { padding: 9px 0; border-bottom: 1px solid var(--line); }
.tpl-stage:last-child { border-bottom: 0; }
.tpl-stage__name { font-size: 14px; font-weight: 600; }
.tpl-stage__hint { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 768px) { .tpl-stages { max-height: 42vh; } }

/* ===== Этап 83, T4.05 — окно отмены записи (одно для «Записей» и «Моих записей», public/js/booking.js) ===== */
.cancel-dialog { display: block; }
.cancel-dialog__reasons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cancel-dialog__reason { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; }
.cancel-dialog__reason:hover { background: var(--surface-subtle); }
.cancel-dialog__reason.is-selected { border-color: var(--ink); background: var(--accent-faint); box-shadow: 0 0 0 1px var(--ink) inset; }
.cancel-dialog__reason-title { font-size: 14px; font-weight: 600; }
.cancel-dialog__reason-hint { font-size: 12px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
.cancel-dialog__client { margin-top: 4px; }
.cancel-dialog__client-title { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.cancel-dialog__bubble { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px 12px 4px 12px; background: var(--surface); color: var(--ink); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.cancel-dialog__send { margin-top: 8px; }
.cancel-dialog__note { padding: 10px 12px; border-radius: var(--r-sm); background: var(--warning-soft); color: var(--ink); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.cancel-dialog .btn-danger:not(:disabled) { color: #fff; border-color: var(--danger); background: var(--danger); }
.cancel-dialog .btn-danger:not(:disabled):hover { background: #9E2424; }
.cancel-dialog .btn-danger:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 768px) {
    .cancel-dialog__footer { flex-direction: column-reverse; }
    .cancel-dialog__footer .btn { width: 100%; min-height: 48px; }
    .cancel-dialog__reason { min-height: 60px; }
    .cancel-dialog__send { min-height: 44px; }
}
.my-appt-card__cancel { margin-top: 8px; }
@media (max-width: 768px) { .my-appt-card__cancel { min-height: 44px; } }

/* ===== Этап 83, T5.03 — серый значок «тест» у записей из тестового чата AI ===== */
.badge-test { display: inline-block; flex: 0 0 auto; margin-left: 4px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-subtle); color: var(--ink-faint); font-size: 10px; font-weight: 600; line-height: 16px; vertical-align: middle; white-space: nowrap; }
.cal-event .badge-test { background: rgba(255, 255, 255, .7); color: var(--ink-soft); }

/* ===== Этап 83, T5.01 — окно подключения WhatsApp: причина ошибки, «Получить новый QR» ===== */
.wa-problem { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--danger-soft); color: var(--ink); }
.wa-problem__icon { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--danger); color: #fff; font-size: 13px; font-weight: 700; }
.wa-problem__text { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.wa-number__reason { overflow-wrap: anywhere; }
@media (max-width: 768px) {
    .wa-modal__footer { flex-direction: column; }
    .wa-modal__footer .btn { width: 100%; min-height: 48px; }
}

/* ===== Этап 85 — каркас: левое меню, меню аккаунта, шторка «Проекты», «Помощь» =====
   T1.11: блок проекта под логотипом, 4 пункта + «Настройки», меню аккаунта в подвале (список открывается вверх).
   T1.12: на телефоне — название проекта в шапке (кнопка у владельца), плитка «Тариф и баланс», шторка «Проекты».
   Планшет (769–960 px) и свёрнутое меню: под значками подписи 10 px, у блоков проекта и аккаунта — только аватар. */

.help-mobile-only { display: none; }
@media (max-width: 768px) {
    .help-mobile-only { display: block; }
    .help-desktop-only { display: none; }
    .profile-help-link .link { display: inline-flex; align-items: center; min-height: 44px; }
}
.profile-help-link { margin: 4px 0 0; font-size: 14px; }

/* ===== Этап 85, T8.15 — «Тариф и баланс»: шапка с итогом, вкладки, чипы пополнения ===== */
.billing-header__summary { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.billing-header__summary .money-kzt { white-space: normal; }
.topup-chip .money-kzt { margin-left: 4px; }
@media (max-width: 768px) {
    .topup-chip { min-height: 44px; }
    .billing-tabs .tabs__item { flex: 1; justify-content: center; }
}
.balance-hero__note { margin: 6px 0 0; color: var(--ink-faint); font-size: 12.5px; }
.balance-byproject__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.balance-byproject__row:first-of-type { border-top: 0; }
.balance-byproject__row .money-kzt { white-space: normal; }
@media (max-width: 768px) {
    .balance-metric-grid { grid-template-columns: 1fr 1fr; }
    .balance-metric-grid .balance-metric:last-child { grid-column: 1 / -1; }
}

/* ===== Этап 85, T2.14 — страница отключённого проекта: другие проекты владельца ===== */
.deactivated-projects { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.deactivated-projects__title { margin-bottom: 6px; color: var(--ink-faint); font-size: 12px; font-weight: 600; }
.deactivated-projects__row { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; }
.deactivated-projects__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.deactivated-projects__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

/* Этап 85 — подписи кнопок заявки длиннее обычных («Оформить «Стандарт» — 14 990 ₸/мес», «Продлить «Стандарт» в WhatsApp»): переносятся на вторую строку. */
.plan-card .btn, .frozen-banner__actions .btn { white-space: normal; text-align: center; padding-top: 7px; padding-bottom: 7px; line-height: 1.25; }
@media (max-width: 768px) { .balance-details-toggle { display: inline-flex; align-items: center; min-height: 44px; } }

/* Этап 88, T1.15 — плашка смены проекта в другой вкладке (вместо перезагрузки страницы): сверху, кнопки переносятся на новую строку. */
.project-switch-bar { position: sticky; top: 0; z-index: calc(var(--z-modal, 1000) - 1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--warning-soft); color: var(--warning); font-size: 13px; }
.project-switch-bar__text { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.project-switch-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.project-switch-bar .btn { min-height: 44px; white-space: normal; text-align: center; }

/* ===== Этап 89, T3.10 — переписка в карточке клиента открывается на последнем сообщении =====
   Раньше лента (.chat__messages) росла без предела, и threadScrollToBottom, плашка «Новые сообщения» и подгрузка старых
   не работали. Теперь вкладка «Переписка» — блок высотой «экран минус вкладки»: внутри лента между шапкой вкладок и полем
   ответа прокручивается САМА, поле ответа прижато книзу. Вкладки липкие (на компьютере и на телефоне); sales.js при открытии
   переписки прокручивает панель так, что вкладки стоят у верхнего края, — лента и поле ответа занимают весь экран, шапка
   карточки остаётся выше (прокрутка панели вверх). Страницу «Чаты» это не меняет (этап 111: она оформлена в pages/chats.css). */
.panel .tabs { position: sticky; top: 0; z-index: 3; background: var(--surface); }

.panel .chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.panel .chat__messages { flex: 1 1 0; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; }
.panel .thread__composer, .panel .thread__new-pill { flex: 0 0 auto; }

/* ===== Этап 89, T3.11 — карточка клиента на телефоне: вкладки не шире экрана, списки не обрезаются ===== */
@media (max-width: 768px) {

    .panel .tabs { margin-left: 0; margin-right: 0; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .panel .tabs::-webkit-scrollbar { display: none; }
    .panel .tabs__item { flex: 0 0 auto; padding: 0 10px; }

}
@media (max-width: 400px) {
    .panel .detail-grid { grid-template-columns: 1fr; }
    /* 360 px: все четыре вкладки карточки помещаются в строку без внутренней прокрутки. */
    .panel .tabs { gap: 0; padding-left: 8px; padding-right: 8px; }
    .panel .tabs__item { padding: 0 8px; font-size: 12.5px; }
}

/* ===== Этап 89, T3.16/T2.24 — пустые экраны доски и «Списка», предложение перенести базу клиентов ===== */

.sales-empty__inner { width: 100%; max-width: 520px; margin: 0 auto; }

.import-offer { max-width: 460px; margin: 20px auto 0; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; text-align: left; }
.import-offer__text { max-width: none !important; margin: 0 !important; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.import-offer__warn { font-size: 12.5px; }
.import-offer__btn { justify-self: start; min-height: 44px; }
@media (max-width: 768px) {

    .import-offer__btn { width: 100%; justify-content: center; }
}

/* ===== Этап 90, T3.35 / T1.16 — страница «Сегодня»: «Что сделать сейчас», «Требует внимания сейчас», «Итоги за период» ===== */

.reason { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }

.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:hover { background: var(--surface-tint); }

/* ===== Этап 90, T3.33/T3.34 — Чаты: вкладки «Ждут ответа · Все · Непрочитанные · Мои», строка с причиной ожидания, лист «⋯» ===== */
.card-menu__item--row { display: flex; align-items: center; gap: 8px; }
.card-menu__item--row .card-menu__value { margin-left: auto; color: var(--ink-faint); font-size: 12px; text-align: right; }
.card-menu__chev { color: var(--ink-faint); }
.card-menu__item--back { font-weight: 600; color: var(--ink); }
.card-menu__item:disabled { opacity: .45; cursor: default; }
.card-menu__note { margin: 4px 8px 8px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 768px) {
    .card-menu__item--row { min-height: 48px; }
}

[data-chats-badge][hidden] { display: none !important; }

/* ===== Этап 91, T4.07 — окно «Записать клиента» (одно на весь продукт, public/js/booking.js) ===== */
.booking-dialog { width: min(560px, 100%); }

.booking-dialog__fixed { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-subtle); font-size: 14px; font-weight: 600; }
.booking-dialog__fixed-text { overflow-wrap: anywhere; }
.booking-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: transparent; font-size: 13px; }

.booking-slots__other { display: flex; gap: 8px; margin-top: 6px; }
.booking-slots__other .input { flex: 1 1 0; min-width: 0; }
.booking-slots__note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.booking-dialog__client { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--ink); border-radius: var(--r-md); background: var(--accent-faint); }
.booking-dialog__client-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.booking-dialog__suggest { margin-top: 6px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.booking-dialog__suggest-item { display: block; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; overflow-wrap: anywhere; }
.booking-dialog__suggest-item:last-child { border-bottom: 0; }
.booking-dialog__suggest-item:hover { background: var(--surface-subtle); }
.booking-dialog__suggest-item--new { color: var(--accent-strong); font-weight: 600; }
.booking-dialog__suggest-empty { margin: 0; padding: 8px 12px; font-size: 13px; color: var(--ink-soft); }
.booking-dialog__new { display: flex; flex-direction: column; gap: 8px; }
.booking-dialog__match { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.booking-dialog__match--found { color: var(--success); font-weight: 600; }
.booking-dialog__match .link { margin-left: 6px; font-weight: 500; }
.booking-dialog__dup { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--warning-soft); color: var(--ink); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.booking-dialog__dup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.booking-dialog__after { margin-bottom: 12px; }
.booking-dialog__note { margin: 0 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.booking-dialog__note--warn { color: var(--ink); }
.booking-dialog__submit { min-width: 0; max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 768px) {
    .booking-dialog__footer { flex-direction: column-reverse; }
    .booking-dialog__footer .btn { width: 100%; min-height: 48px; }
    .booking-link { min-height: 44px; }
    .booking-dialog__dup-actions .btn { flex: 1 1 100%; min-height: 44px; }
    .booking-slots__other .input { min-height: 44px; }
    .booking-dialog__suggest-item { min-height: 48px; }
}

/* Этап 91, T4.10 — серая строка о последствиях под рядом кнопок статуса. */
.status-hint { margin: 8px 0 0; min-height: 18px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }

/* ===== Этап 91, T4.12 — «Настройки → Сообщения клиентам» ===== */
.client-messages { max-width: none; padding-bottom: 76px; }   /* этап 141: 760 снято */
.client-messages__lead { margin: 0 0 14px; }
.client-messages__sample { max-width: 460px; margin-bottom: 18px; }
.client-messages__note { margin: -4px 0 14px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-subtle); color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.client-messages__group { margin-top: 24px; }
.client-messages__muted { margin: 0; color: var(--ink-faint); font-size: 13.5px; }
.client-messages__bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; margin: 22px -4px 0; padding: 12px 4px; background: linear-gradient(to top, var(--canvas) 70%, transparent); }
.client-msg { margin-bottom: 14px; }
.client-msg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.client-msg__title { margin: 0; font-size: 15px; font-weight: 650; }
.client-msg__toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); text-align: right; }
.client-msg__hint { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.client-msg__inserts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.client-msg__insert { min-height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 12.5px; cursor: pointer; }
.client-msg__insert:hover { background: var(--surface-subtle); color: var(--ink); }
.client-msg__help { margin: 8px 0 12px; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); overflow-wrap: anywhere; }
.client-msg__preview-title { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.client-msg__bubble { max-width: 520px; }
.client-msg__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; align-items: center; }
.client-msg__links .link { min-height: 32px; font-size: 13px; }
@media (max-width: 768px) {
    .client-messages { padding-bottom: 88px; }
    .client-msg__head { flex-direction: column; align-items: flex-start; }
    .client-msg__toggle { text-align: left; }
    .client-msg__insert { min-height: 44px; }
    .client-msg__links .link { min-height: 44px; display: inline-flex; align-items: center; }
    .client-messages__bar { margin: 18px 0 0; }
    .client-messages__bar .btn { width: 100%; min-height: 48px; }
}

/* ===== Этап 91, T4.27 — «Мои записи»: «Мой день» (полоса дат, лента записей со свободными окнами) ===== */
.my-page { min-width: 0; max-width: 100%; }

.my-days { display: flex; gap: 8px; margin: 0 0 16px; padding: 2px 0 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; max-width: 100%; }
.my-day { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 64px; min-height: 68px; padding: 6px 4px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; scroll-snap-align: start; }
.my-day__label { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.my-day__num { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.my-day__dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.my-day__dot.is-on { background: var(--accent); }
.my-day.is-active { border-color: transparent; background: var(--accent-gradient); color: var(--on-primary); }
.my-day.is-active .my-day__label { color: rgba(255,255,255,.85); }
.my-day.is-active .my-day__dot.is-on { background: #fff; }
.my-feed { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.my-feed__row { min-width: 0; }
.my-feed__off { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-subtle); color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.my-free { padding: 8px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink-faint); font-size: 13px; text-align: center; }
.my-cancelled { margin-top: 6px; }
.my-cancelled__toggle { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.my-cancelled .flex-col { margin-top: 6px; }
@media (max-width: 768px) { .my-day { width: 60px; } }

/* ===== Этап 91, T4.30 — клиент без переписки: метка «Напоминание не придёт» и «Ссылка для клиента» ===== */
.reminder-warn { padding: 10px 12px; border-radius: var(--r-sm); background: var(--warning-soft); }
.reminder-warn__text { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.reminder-warn__text:last-child { margin-bottom: 0; }
.reminder-warn__hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.invite-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.invite-dialog__note { margin: 10px 0 0; }
@media (max-width: 768px) { .invite-dialog__actions .btn { flex: 1 1 100%; min-height: 48px; justify-content: center; } }

/* Этап 91 — кнопки-ссылки внутри новых окон и экранов записи: без рамки браузера. */
.booking-dialog button.link, .cancel-dialog button.link, .client-messages button.link, .status-hint button.link, .reminder-warn button.link,
.booking-slots button.link { border: 0; padding: 0; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.booking-dialog__match .link { margin-left: 6px; min-height: 28px; }

/* Этап 91, T4.12 — на телефоне полоса «Сохранить изменения» стоит над нижней навигацией, а переключатель нажимается всей строкой ≥ 44 px. */
@media (max-width: 768px) {
    .client-messages__bar { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    .client-messages { padding-bottom: 150px; }
    .client-msg__toggle { min-height: 44px; position: relative; }
    .client-msg__toggle .switch input { inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); }
}
.reminder-warn .btn { width: auto; }

/* Статус «Отвечает AI / вы / имя» — совпадает с полосой над полем ответа; своего действия нет, нажатие открывает «Переписку». */

.panel--lead .phone-duplicate { margin-top: 8px; margin-bottom: 0; }
.panel--lead .phone-duplicate__open { min-height: 32px; }

/* ----- Раскладка на компьютере: шапка, вкладки и переписка — на одном экране, без прокрутки панели (T3.26) ----- */
@media (min-width: 769px) {
    .panel--lead { overflow: hidden; display: flex; flex-direction: column; }

}

/* ----- Телефон: «Назад» и «⋯» в первой строке обычным потоком, строка 3 — иконки, без горизонтальной прокрутки ----- */
@media (max-width: 768px) {

    .panel--lead .phone-duplicate__open { min-height: 44px; padding: 0 8px; }
}

/* ----- «Следующий шаг»: активный шаг одной строкой и форма с быстрыми вариантами (T3.29) ----- */

.lead-step__btn { min-height: 32px; padding: 0 10px; font-size: 12.5px; }

@media (max-width: 768px) {
    .lead-step__btn { min-height: 44px; }

}

/* ----- «Записи» клиента: строки-ссылки со стрелкой, отменённые свёрнуты, «Записать снова» (T3.25, T4.08) ----- */

.appt-row__arrow { flex: 0 0 auto; color: var(--ink-faint); font-size: 16px; }

.appt-cancelled summary { min-height: 32px; display: flex; align-items: center; color: var(--ink-soft); font-size: 13px; cursor: pointer; }
@media (max-width: 768px) {

    .appt-cancelled summary { min-height: 44px; }

}

/* ----- Этап 92, T4.08 — окно «Записать клиента»: «Как в прошлый раз» и подтверждение клиенту ----- */
.booking-dialog__last { margin-top: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-subtle); font-size: 13px; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; overflow-wrap: anywhere; }
.booking-dialog__last .booking-link { font-weight: 600; }
.booking-dialog__confirm { display: grid; gap: 6px; margin-bottom: 12px; }
.booking-dialog__check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 500; cursor: pointer; }
.booking-dialog__check input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }
.booking-dialog__check.is-disabled { color: var(--ink-faint); cursor: not-allowed; }
.booking-dialog__confirm-note { margin: 0 0 0 30px; }
.booking-dialog__bubble { margin-left: 30px; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--accent-faint); border: 1px solid var(--accent-soft); }
.booking-dialog__bubble-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.booking-dialog__confirm .booking-link { justify-self: start; margin-left: 30px; }
@media (max-width: 768px) { .booking-dialog__bubble, .booking-dialog__confirm-note, .booking-dialog__confirm .booking-link { margin-left: 0; } }
.card-menu__item--book { color: var(--accent-strong); font-weight: 600; }

/* ----- Этап 92, T3.28 — «Новый клиент»: крупные имя и телефон, три кнопки на всю ширину ----- */
.create-modal { width: min(480px, 100%); }
.create-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.create-modal__head .modal__title { margin-bottom: 15px; }
.create-modal__close { flex: 0 0 auto; margin: -6px -8px 0 0; color: var(--ink-soft); }
.create-modal__main { display: grid; gap: 12px; margin-bottom: 8px; }
.create-modal__main .field { margin-bottom: 0; }
.create-modal__input { min-height: 48px; font-size: 16px; }

.create-modal__extra { display: grid; gap: 12px; margin-bottom: 12px; }
.create-modal__extra .field { margin-bottom: 0; }
.create-modal__actions { display: grid; gap: 8px; margin-top: 16px; }
.create-modal__btn { width: 100%; min-height: 48px; justify-content: center; }
.create-modal__plain { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--accent-strong); cursor: pointer; }
.create-modal__plain:disabled, .create-modal__btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 768px) {
    /* На телефоне окно на весь экран: имя и телефон сверху, три кнопки прижаты к низу — видны без прокрутки. */
    .create-modal { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; display: flex; flex-direction: column; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0)); }
    .create-modal form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    .create-modal__actions { margin-top: auto; padding-top: 16px; }
}

/* ----- Этап 92, T3.30 — «В архив»: окно, плашка у архивной карточки, страница «Клиенты в архиве» ----- */
.archive-dialog { width: min(520px, 100%); }
.archive-dialog__text { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.archive-dialog__warn { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--danger-soft); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.archive-dialog__warn-title { font-weight: 700; color: var(--danger); }
.archive-dialog__list { margin: 6px 0 0; padding-left: 18px; }
.archive-dialog__more { margin-top: 4px; color: var(--ink-soft); }
.archive-dialog__dup { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--warning-soft); font-size: 13px; line-height: 1.5; }
.archive-dialog .btn-danger:not(:disabled) { color: #fff; border-color: var(--danger); background: var(--danger); }
.archive-dialog .modal__footer .btn { min-height: 44px; }
.archived-note { margin-bottom: 10px; }
.archived-note__restore { min-height: 32px; font-weight: 700; }
.card-menu__item.is-disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; }

/* Архивная карточка — только просмотр: ни действий, ни правок полей. */

.panel--lead .is-archived .stage-lock { pointer-events: none; }
.archived-table__action { text-align: right; white-space: nowrap; }
.archived-table .table tbody tr { cursor: default; }
.archived-cards { display: none; }

.archived-card__restore { width: 100%; min-height: 44px; justify-content: center; }
@media (max-width: 768px) {
    .archived-table { display: none; }
    .archived-cards { display: block; }

    .archived-note__restore { min-height: 44px; padding: 0 8px; }

}

.archived-strip { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 13.5px; }
.archived-strip svg { flex: 0 0 auto; width: 18px; height: 18px; }

/* ===== Этап 93 — «Записи → Настройка записи» (T4.18–T4.24) ===== */
.appointments-tabs { margin-top: -8px; margin-bottom: 18px; }
.setup-page { display: grid; gap: 16px; }
.setup-page .card + .card { margin-top: 0; }
.setup-page button.link, .setup-dialog button.link, .setup-extract button.link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.setup-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.setup-card__title { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.setup-card__hint { margin-top: 10px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.5; }
.setup-saved { color: var(--success); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.is-muted { opacity: .6; }
.setup-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 16px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-subtle); }
.setup-empty__title { font-size: 17px; font-weight: 500; }
.setup-empty__text { max-width: 420px; color: var(--ink-soft); font-size: 13.5px; }
.setup-empty__link { min-height: 36px; font-size: 13.5px; }
.setup-services td { vertical-align: top; }
.setup-services .input, .setup-services .select { min-width: 0; width: 100%; }

.setup-row-actions { min-width: 130px; }
.setup-row-actions__inner { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.setup-add { margin-top: 12px; }
.setup-form { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-subtle); }
.setup-form__title { font-size: 15px; font-weight: 600; }
.setup-form__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.setup-form__grid--dates { grid-template-columns: 1fr 1fr; }
.setup-form__grid .field, .setup-form .field { margin-bottom: 0; }
.setup-form__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.setup-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.setup-spec { display: grid; align-content: start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.setup-spec--new { grid-column: 1 / -1; }
.setup-spec.is-muted { background: var(--surface-subtle); }
.setup-spec__head { display: flex; align-items: center; gap: 10px; }
.setup-spec__names { display: grid; flex: 1 1 auto; gap: 4px; min-width: 0; }
.setup-spec__name { font-weight: 600; }
.setup-spec__position { font-size: 13px; color: var(--ink-soft); }
.setup-spec__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.setup-spec__label { color: var(--ink-soft); font-size: 12.5px; font-weight: 600; }
.setup-spec__block { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.setup-spec__line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.setup-spec__edit { display: grid; gap: 12px; }
.setup-spec__step { max-width: 200px; }
.setup-spec__muted { color: var(--ink-faint); font-size: 12.5px; }
.setup-spec__hidden, .setup-spec__note { padding: 8px 10px; border-radius: var(--r-xs); background: var(--warning-soft); color: var(--ink-soft); font-size: 12.5px; }
.setup-spec__login { font-size: 13px; }
.work-schedule { display: grid; gap: 10px; }
.work-schedule__days { display: grid; grid-template-columns: repeat(7, minmax(0, 46px)); gap: 4px; }
.work-schedule__day { min-height: 38px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); color: var(--ink-soft); font-size: 13px; font-weight: 600; cursor: pointer; }
.work-schedule__day.is-on { border-color: var(--ink); background: var(--accent-soft); color: var(--accent-strong); }
.work-schedule__hours { display: flex; align-items: center; gap: 8px; }
.work-schedule__time { width: 120px; min-width: 0; }
.setup-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.setup-chip { min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-soft); font-size: 13px; font-weight: 600; cursor: pointer; }
.setup-chip.is-on { border-color: var(--ink); background: var(--accent-soft); color: var(--accent-strong); }
.setup-daysoff { display: grid; gap: 4px; font-size: 13.5px; }
.setup-daysoff li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setup-daysoff--past { color: var(--ink-faint); margin-top: 4px; }
.setup-affected { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface-subtle); font-size: 13px; }
.setup-affected--warn { margin-top: 14px; border-color: var(--line); background: var(--warning-soft); }
.setup-affected__title { font-weight: 600; }
.setup-affected ul { display: grid; gap: 4px; margin: 6px 0; }
.setup-affected li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setup-company { display: grid; gap: 10px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.setup-company__label { font-weight: 600; }
.setup-company__ai { color: var(--ink-soft); font-size: 13.5px; }
.setup-schedule { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 10px; }
.setup-schedule__scroll { justify-self: stretch; min-width: 0; max-width: 100%; }
.setup-schedule__scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-xs); } /* position: relative — скрытые подписи (.sr-only) внутри таблицы не растягивают страницу вправо (этап 95: замечено при проверке 390 px) */
.setup-schedule__table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
.setup-schedule__table th, .setup-schedule__table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.setup-schedule__table thead th { color: var(--ink-faint); font-size: 12px; font-weight: 600; background: var(--surface-subtle); }
.setup-schedule__table tbody tr:last-child th, .setup-schedule__table tbody tr:last-child td { border-bottom: 0; }
.setup-schedule__name { text-align: left !important; font-weight: 600; }
.setup-schedule__cell { min-width: 54px; min-height: 40px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); color: var(--ink-faint); font-size: 12.5px; cursor: pointer; }
.setup-schedule__cell.is-on { border-color: var(--ink); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.setup-schedule__hours { display: flex; align-items: center; gap: 6px; }
.setup-schedule__hours .input { width: 104px; min-width: 0; padding-left: 8px; padding-right: 8px; }
.setup-daysoff-all { margin-top: 16px; display: grid; gap: 6px; }
.setup-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 16px -20px -20px; padding: 12px 20px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--surface); }
.setup-savebar__hint { color: var(--warning); font-size: 12.5px; font-weight: 600; }
.setup-dialog__text { margin-bottom: 10px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.setup-dialog__text--advice { color: var(--ink); font-weight: 600; }
.setup-dialog__footer { justify-content: flex-end; }
.setup-extract { width: min(860px, 100%); }
.setup-extract__guess, .setup-extract__empty { margin-bottom: 10px; padding: 8px 10px; border-radius: var(--r-xs); background: var(--warning-soft); color: var(--ink-soft); font-size: 12.5px; }
.setup-extract__wrap { max-height: 52vh; overflow: auto; }
.setup-extract__table .input, .setup-extract__table .select { min-width: 0; width: 100%; }
.setup-extract__table td { vertical-align: top; }
.setup-extract__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.setup-badge { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; }
.setup-badge--new { background: var(--success-soft); color: var(--success); }
.setup-badge--changed { background: var(--warning-soft); color: var(--warning); }
.setup-badge--same { background: var(--surface-subtle); color: var(--ink-faint); }
.setup-badge--missing { background: var(--danger-soft); color: var(--danger); }
.setup-extract__pair { margin-top: 6px; }
.setup-extract__pair-label { display: block; margin-bottom: 3px; color: var(--ink-faint); font-size: 11.5px; font-weight: 600; }
.setup-extract__row--same { opacity: .65; }
.setup-extract__guessed { background: var(--warning-soft); }
.setup-extract__guess-note { display: block; margin-top: 3px; color: var(--warning); font-size: 11.5px; }
.setup-extract__hide-note { margin-left: 6px; color: var(--ink-faint); font-size: 12px; }
@media (max-width: 768px) {
    .appointments-tabs { margin-top: 0; }
    .setup-form__grid, .setup-form__grid--dates { grid-template-columns: 1fr; }
    .setup-specs { grid-template-columns: 1fr; }
    .work-schedule__days { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .work-schedule__day, .setup-chip { min-height: 44px; }
    .work-schedule__time { width: 100%; }
    .work-schedule__hours { display: grid; grid-template-columns: 1fr auto 1fr; }
    .setup-row-actions__inner { justify-content: space-between; }
    .setup-services td, .setup-extract__table td { padding-top: 10px; height: auto; } /* этап 95: у карточки услуги строка «AI говорит клиентам» и предупреждение выше 52 px */
    .setup-schedule > .btn { justify-self: stretch; max-width: 100%; height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; white-space: normal; }
    .setup-card .link, .setup-spec .link { display: inline-flex; align-items: center; min-height: 44px; }

    .setup-spec__head .btn-icon, .setup-row-actions .btn-icon { width: 44px; height: 44px; }
    .setup-page .switch::before { content: ''; position: absolute; inset: -10px -6px; }
    .setup-schedule__cell { min-width: 56px; min-height: 44px; }
    .setup-schedule__table input.input { min-height: 44px; }
    .setup-savebar { margin: 16px -16px -16px; padding: 12px 16px; }
    .setup-savebar .btn { min-height: 44px; }
    .setup-dialog__footer .btn, .setup-extract .modal__footer .btn { min-height: 44px; }
    .setup-extract__wrap { max-height: none; }
}

.setup-warning { margin-bottom: 14px; font-size: 13px; line-height: 1.5; }
.setup-warning__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.setup-warning__note { margin-top: 6px; font-weight: 600; }
@media (max-width: 768px) { .setup-warning__actions .btn { min-height: 44px; } }

/* ===== Этап 93, T4.24 — окно «{Имя} не работает» ===== */
.dayoff-dialog { width: min(520px, 100%); }
.dayoff-dialog__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.dayoff-dialog__other { margin-top: 10px; }
.dayoff-dialog__existing { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-xs); background: var(--surface-subtle); font-size: 13px; }
.dayoff-dialog__existing-title { margin-bottom: 4px; color: var(--ink-faint); font-size: 12px; font-weight: 600; }
.dayoff-dialog__existing-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dayoff-dialog__count { margin-bottom: 8px; font-weight: 600; }
.dayoff-dialog__list { display: grid; gap: 8px; }
.dayoff-dialog__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-xs); font-size: 13.5px; }
.dayoff-dialog__actions { display: inline-flex; gap: 6px; }

@media (max-width: 768px) {
    .dayoff-dialog__dates { grid-template-columns: 1fr; }
    .dayoff-dialog__actions { width: 100%; }
    .dayoff-dialog__actions .btn { flex: 1 1 0; min-height: 44px; }
    .dayoff-dialog .setup-chip, .dayoff-dialog .modal__footer .btn { min-height: 44px; }

}

/* ===== Этап 93, T4.13 — «Сообщения клиентам»: группа «В переписке» ===== */
.client-msg__field { margin-top: 16px; }
.client-msg__field:first-of-type { margin-top: 12px; }
.client-msg__hours { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; color: var(--ink-soft); font-size: 13.5px; }
@media (max-width: 768px) { .client-msg__hours .select { min-height: 44px; } }

/* Этап 93, T4.14 — переключатель «Русский | Қазақша» на «Сообщениях клиентам» */
.client-messages__lang { display: grid; gap: 8px; justify-items: start; margin-bottom: 16px; }
.client-messages__kk-toggle { min-height: 44px; }
@media (max-width: 768px) { .client-messages__lang .segmented button { min-height: 44px; } }

/* ===== Этап 93, T4.29 — медиа-библиотека: «+ Добавить» открывает выбор файлов, форма «файлы → название → когда отправлять» ===== */
.media-add-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.media-upload__types { margin-top: 8px; }
.media-upload__empty { margin-top: 8px; color: var(--warning); }
.media-form__more { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; min-height: 32px; }
.media-upload { margin-bottom: 18px; }
.media-send-list__item.is-disabled { opacity: .55; cursor: not-allowed; }
.media-send-list__note { display: block; color: var(--ink-faint); font-size: 11.5px; }
@media (max-width: 768px) {
    .media-form__more { min-height: 44px; }
    .media-upload__remove { width: 44px; height: 44px; }
    .media-send-list__item { min-height: 44px; }
}
@media (max-width: 768px) {
    .client-msg__hint .link, .client-msg__field .field__label .link, .client-msg__help .link { display: inline-block; padding: 14px 4px; margin: -14px -4px; }
    .setup-card__hint .link, .setup-company__ai .link { display: inline-block; padding: 14px 4px; margin: -14px -4px; }
}

/* ===== Этап 95, T5.23 — лист «Исправить ответ AI» (кнопка «Ответ неверный» с этапа 122 — в меню «⋯» у ответа AI, pages/thread.css) ===== */
[data-message-id].is-highlighted .chat-message__bubble { outline: 2px solid var(--ink); outline-offset: 2px; transition: outline-color 1s var(--ease); }

.ai-fix { width: min(620px, 100%); }
.ai-fix__who { margin: -6px 0 12px; color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.ai-fix__section { margin-top: 16px; }
.ai-fix__label { margin-bottom: 6px; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; }
.ai-fix__bubble { padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 10px; }
.ai-fix__bubble--client { background: var(--surface-subtle); color: var(--ink); }
.ai-fix__bubble--ai { background: var(--accent-soft); color: var(--accent-strong); }
.ai-fix__bubble--new { background: var(--success-soft); color: var(--ink); }
.ai-fix__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-fix__chips .setup-chip { min-height: 44px; }
.ai-fix__status { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; }
.ai-fix__status--wrong { color: var(--danger); }
.ai-fix__status--fixed { color: var(--success); }
.ai-fix__muted { margin: 6px 0 0; color: var(--ink-faint); font-size: 12.5px; line-height: 1.45; }
.ai-fix__error { margin: 0 0 8px; color: var(--danger); font-size: 13px; }
.ai-fix__block { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-subtle); }
.ai-fix__source { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.ai-fix__source-title { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ai-fix__source-text { margin-top: 3px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ai-fix__source-link { display: inline-flex; align-items: center; margin-top: 6px; font-size: 13px; }
.ai-fix__links-all { display: flex; flex-direction: column; gap: 2px; }
.ai-fix__says { margin: 6px 0; font-size: 13px; overflow-wrap: anywhere; }
.ai-fix__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; align-items: end; }
.ai-fix__fields .field { margin-bottom: 0; align-content: end; }
.ai-fix__fields .input { height: 44px; }
.ai-fix__service-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ai-fix__switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; }
.ai-fix__compare { display: grid; gap: 4px; }
.ai-fix__check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
.ai-fix__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ai-fix__wide { margin-top: 8px; }
.ai-fix__footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 768px) {
    .ai-fix__fields { grid-template-columns: 1fr; }
    .ai-fix__actions .btn, .ai-fix__wide { width: 100%; justify-content: center; min-height: 44px; }
    .ai-fix .modal__footer .btn { width: 100%; }
    .ai-fix__source-link { min-height: 44px; }
}
.ai-sandbox__note--ask { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--accent-faint); color: var(--accent-strong); font-size: 12.5px; }
@media (max-width: 768px) { .ai-sandbox__note--ask .btn { min-height: 44px; } }

/* ===== Этап 95, T5.26 — «Журнал ответов AI» ===== */
.ai-journal__tab-test { display: none; }
.ai-journal__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.ai-journal__filter { display: inline-flex; align-items: center; text-decoration: none; }
.ai-journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ai-journal__row { padding: 14px 16px; }
.ai-journal__meta { margin-bottom: 8px; color: var(--ink-soft); font-size: 12.5px; overflow-wrap: anywhere; }
.ai-journal__text { margin-top: 4px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.ai-journal__who { color: var(--ink-faint); font-weight: 600; }
.ai-journal__answer.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ai-journal__more { margin-top: 2px; font-size: 12.5px; }
.ai-journal__actions { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
.ai-journal__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.ai-journal__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ai-journal__pager { display: flex; gap: 8px; margin-top: 14px; }
@media (max-width: 768px) {
    .ai-journal__tab-test { display: block; }
    .ai-journal__buttons { margin-left: 0; width: 100%; }
    .ai-journal__buttons .btn, .ai-journal__pager .btn, .ai-journal__more { min-height: 44px; }
    .ai-journal__filter { min-height: 44px; }
}

/* ===== Этап 95, T5.27 — «AI говорит клиентам: …» под услугой, предупреждение о расхождении цен ===== */
.setup-services__says { margin-top: 6px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.setup-services__warn { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--warning-soft); color: var(--warning); font-size: 12.5px; line-height: 1.4; }
.setup-services__hint { display: block; margin-top: 4px; color: var(--ink-faint); font-size: 11.5px; line-height: 1.35; }
@media (max-width: 768px) { .setup-services__warn .btn { min-height: 44px; } }

/* ===== Этап 95, T5.28 — строка «Часы работы: … — изменить ↗» сверху «Информации» ===== */
.knowledge-hours { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }

/* ===== Этап 95, T5.31 — переключатель «AI отправляет эти файлы клиентам» вверху медиа-библиотеки ===== */
.media-ai-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-subtle); }
.media-ai-switch__text { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.media-ai-switch__hint { color: var(--ink-faint); font-size: 12.5px; line-height: 1.4; }

/* ===== Этап 96, T6.02–T6.06 — «Настройки → Сотрудники»: список сверху, окна «Новый сотрудник», «Готово», подтверждения ===== */
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.team-table tbody + tbody { border-top: 1px solid var(--line); }
.team-table td { height: auto; }
.team-table td .text-xs { line-height: 1.4; }
.team-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.team-actions__link, .team-actions__remove { min-height: 32px; font-size: 13px; text-align: left; }
.team-actions__form { display: inline; margin: 0; }
.team-actions__more { display: none; min-width: 44px; min-height: 44px; font-size: 20px; line-height: 1; }
.team-edit { padding: 6px 0 4px; }
.team-edit__footer { display: flex; gap: 8px; margin-top: 12px; }
.team-card-note { margin: 8px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.team-add { width: min(480px, 100%); }
.team-add__login, .team-add__password, .team-add__schedule-line { margin: 0 0 14px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.team-add__specialist { margin-bottom: 4px; }
.team-add__submit { margin-top: 6px; }
.team-add__cancel { margin-top: 4px; }
.team-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-role { position: relative; display: grid; align-content: start; gap: 4px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.team-role.is-on { border-color: var(--ink); background: var(--accent-soft); }
.team-role:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.team-role__title { font-size: 14px; font-weight: 600; color: var(--ink); }
.team-role__text { color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; }
.team-ready { width: min(480px, 100%); }
.team-ready__text { margin-bottom: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-subtle); color: var(--ink); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }
.team-ready__warn { margin: 0 0 6px; color: var(--danger); font-size: 13px; font-weight: 600; }
.team-ready__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.team-dialog__text { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.team-dialog .btn-danger:not(:disabled) { color: #fff; border-color: var(--danger); background: var(--danger); }
.team-dialog .btn-danger:not(:disabled):hover { background: #9E2424; }
@media (max-width: 768px) {
    .team-head .btn { width: 100%; justify-content: center; min-height: 44px; }
    .team-table tbody { margin-bottom: 10px; }
    .team-table tbody + tbody { border-top: 0; }
    .team-table tbody tr { margin-bottom: 0; }
    .team-table tbody tr + tr { margin-top: 6px; }
    .team-actions__link, .team-actions__pw, .team-actions__form { display: none; }
    .team-actions__remove { min-height: 44px; display: inline-flex; align-items: center; }
    .team-actions__more { display: inline-flex; align-items: center; justify-content: center; }
    .team-actions { justify-content: flex-end; }
    .team-actions-cell { padding-top: 0; }
    .team-actions-cell:before { display: none; }
    .team-roles { grid-template-columns: 1fr; }
    .team-role { min-height: 56px; }
    .team-add .btn, .team-ready .btn, .team-dialog .btn, .team-edit .btn { min-height: 44px; }
    .team-add .link-button, .team-ready .link-button { min-height: 44px; display: inline-flex; align-items: center; }
    .team-more .card-menu__item { min-height: 48px; font-size: 15px; }
}

/* ===== Этап 96, T6.07/T6.08 — «Когда переводить сюда»: многострочное поле, «Сохранено ✓»; воронка внешней CRM с условиями ===== */
.funnel-static__row--hint { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; }
.funnel-static__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.funnel-hintbox--static .funnel-hint { padding-left: 0; }
.funnel-hint__text { resize: none; overflow: hidden; line-height: 1.4; padding-top: 8px; padding-bottom: 8px; min-height: 38px; }
.funnel-saved { margin-left: 6px; color: var(--ink-faint); font-size: 12px; font-weight: 400; white-space: nowrap; }
.funnel-intro__line { cursor: pointer; list-style: none; line-height: 1.5; }
.funnel-intro__line::-webkit-details-marker { display: none; }
.funnel-intro__line .funnel-link { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.funnel-intro__more { margin-top: 6px; }
.funnel-saved--row { flex: 0 0 auto; }
.funnel-auto__title .funnel-saved { margin-left: 8px; }
@media (max-width: 768px) {
    .funnel-intro__line { display: flex; align-items: center; flex-wrap: wrap; min-height: 44px; }
    .funnel-hint__text { min-height: 44px; font-size: 16px; }
}
.funnel-ai-move { margin-bottom: 12px; }
.funnel-ai-move__row { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-subtle); }
.funnel-ai-move__off { margin-top: 8px; }
@media (max-width: 768px) { .funnel-ai-move__off .link-button { min-height: 44px; display: inline-flex; align-items: center; } }
.tpl-stages { list-style: decimal; padding-left: 22px; }
.tpl-stages .tpl-stage::marker { color: var(--ink-faint); font-size: 13px; }
.tpl-change { margin-top: 12px; line-height: 1.45; }
.tpl-change strong { font-weight: 650; }
@media (max-width: 768px) { .tpl-back, .tpl-card { min-height: 44px; } .tpl-sheet .modal__footer .btn { min-height: 44px; } }

/* ===== Этап 96, T6.15/T6.16 — вкладка «CRM»: выбор «Где вы ведёте сделки», карточка «Состояние», мастер подключения ===== */
.crm-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.crm-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.crm-mode.is-current { border-color: var(--ink); background: var(--accent-soft); }
.crm-mode__title { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-mode__text { margin: 0; flex: 1; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.crm-state--ok { border-color: var(--line); background: var(--success-soft, #eefaf2); }
.crm-state--error { border-color: var(--line); background: var(--danger-soft); }
.crm-state__line { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.crm-state__title { margin: 0 0 10px; color: var(--danger); font-size: 15px; font-weight: 650; line-height: 1.4; }
.crm-state__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.crm-state__foot { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.crm-dialog__text { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.crm-event { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.crm-flow__back { display: inline-flex; align-items: center; margin-top: 10px; }
.crm-flow__url { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
@media (max-width: 768px) {
    .crm-modes { grid-template-columns: 1fr; }
    .crm-mode .btn, .crm-state__actions .btn, .crm-dialog .modal__footer .btn, [data-crm-unfinished] .btn { min-height: 44px; }
    .crm-state__actions .btn, .crm-mode .btn { width: 100%; justify-content: center; }
    .crm-state__foot .link-button, .crm-flow__back, .crm-state__actions .link-button { min-height: 44px; display: inline-flex; align-items: center; }
    .crm-state .input, [data-crm-wizard] .input, [data-crm-wizard] .select { min-height: 44px; font-size: 16px; }
}

/* ===== Этап 96, T6.18 — «Данные проекта»: короткая форма «О проекте», серая карточка «Связанные расписания» ===== */
.project-about__actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.card--subtle { background: var(--surface-subtle); }
.project-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
@media (max-width: 768px) { .project-about__actions .btn { width: 100%; min-height: 44px; } .project-links .link, [data-project-link="notifications"] .link { display: inline-block; padding: 8px 0; } }
.funnel-ai-move__row { cursor: pointer; }

/* ===== Этап 97 — удаление данных, скачивание архива, закрытие аккаунта ===== */
.project-export__btn { min-height: 44px; }
@media (max-width: 768px) { .project-export__btn { width: 100%; } }
/* Этап 104, T5.20 — Instagram: «Перед подключением» над кнопкой и мелкая ссылка «Отключить Instagram совсем» под ней. */
.ig-prep { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-subtle); }
.ig-prep__title { margin: 0 0 4px; font-size: 13px; font-weight: 650; }
.ig-prep__list { margin: 0; padding-left: 18px; list-style: disc; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ig-prep__list li + li { margin-top: 4px; }
.ig-disconnect-link { display: block; min-height: 44px; margin: 6px auto 0; padding: 12px 8px; border: 0; background: none; color: var(--ink-faint); font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ig-disconnect-link:hover { color: var(--danger); }
.ig-deletion__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ig-deletion__actions .btn { min-height: 44px; }
.ig-erase__block { margin: 0 0 12px; }
.ig-erase__label { font-size: 12px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.ig-erase__text { margin: 0; font-size: 14px; line-height: 1.5; }
.ig-erase__check { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; min-height: 44px; font-size: 14px; cursor: pointer; }
.ig-erase__check input { width: 20px; height: 20px; flex: 0 0 auto; }
@media (max-width: 768px) { .ig-deletion__actions { flex-direction: column; } .ig-deletion__actions .btn, .ig-deletion__actions > div { width: 100%; } }
.erase-dialog { max-width: 520px; }
.erase-dialog__block { margin: 0 0 12px; }
.erase-dialog__label { font-size: 12px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.erase-dialog__list { margin: 0; padding-left: 18px; list-style: disc; font-size: 14px; line-height: 1.55; }
.erase-dialog__cancel { color: var(--danger); }
.erase-dialog__muted { margin: 4px 0 0; font-size: 13px; color: var(--ink-faint); line-height: 1.45; }
.erase-dialog__check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 14px; line-height: 1.45; cursor: pointer; padding-top: 10px; }
.erase-dialog__check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.erase-dialog__edit { padding: 12px 0; min-height: 44px; }
.close-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.close-projects__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line, #e6e8f0); }
.close-projects__row:first-child { border-top: 0; }
.close-projects__name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.close-projects__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.close-projects__check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 14px; }
.close-projects__check input { width: 20px; height: 20px; }
.close-list { margin: 0; padding-left: 20px; list-style: disc; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.close-retention { display: grid; gap: 10px; margin-bottom: 16px; }

.close-submit, .close-account-btn { min-height: 44px; }
@media (max-width: 768px) {
    .close-projects__row { flex-direction: column; align-items: stretch; }
    .close-projects__actions { justify-content: space-between; }
    .close-projects__actions > div, .close-projects__actions .btn { width: 100%; }
    .close-submit, .close-account-btn { width: 100%; }
}
/* Длинный бейдж «Отключён по запросу на удаление данных (дд.мм)» переносится и не вылезает за карточку Instagram. */
#instagram-card .channel-head { flex-wrap: wrap; }
#instagram-card .channel-head .badge { white-space: normal; max-width: 100%; text-align: left; line-height: 1.25; padding: 5px 10px; }

/* этап 116: зона нажатия ≥ 44 px у переключателей на телефоне. Вкладки — 44 (как в прототипе), сегменты — 40 + невидимое расширение
   зоны до 48 по высоте контейнера (вид не меняется). */
@media (max-width: 767.98px) {
    .tabs__item, .tabs [role="tab"] { min-height: 44px; }
    .segmented button, .segmented a, .segmented [role="tab"] { min-height: 40px; }
    .segmented button::after, .segmented a::after, .segmented [role="tab"]::after { content: ""; position: absolute; inset: -4px -1px; }
}

/* ===== Этап 126 — поле «Телефон WhatsApp» со страной (partials/phone-field.blade.php): гостевые страницы, профиль, панель ===== */
.nx-phone { display: flex; align-items: stretch; min-width: 0; }
.nx-phone__cc { position: relative; flex: none; display: inline-flex; align-items: center; }
.nx-phone__cc select {
    appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; margin: 0;
    min-height: var(--control-h, 44px); height: 100%; padding: 0 30px 0 12px; color: var(--ink);
    border-radius: var(--rounded-pill) 0 0 var(--rounded-pill); background: var(--surface-subtle); border: 1px solid var(--line-strong); border-right: 0;
    font: 500 15px/1 var(--font-text); font-variant-numeric: tabular-nums;
}
.nx-phone__cc select:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 1px; }
.nx-phone__cc select:disabled { opacity: .6; cursor: default; }
.nx-phone__cc .nx-icon { position: absolute; right: 10px; pointer-events: none; --nx-size: 14px; color: var(--ink-soft); }
.nx-phone .nx-phone__input { flex: 1; height: auto; min-height: var(--control-h, 44px); min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; font-variant-numeric: tabular-nums; }
.nx-phone .nx-phone__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--danger); }
.ux-verified { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-height: var(--control-h, 44px); }
.ux-verified__v { font: 500 15px/1.3 var(--font-text); overflow-wrap: anywhere; }
.ux-verified .badge .nx-icon { --nx-size: 14px; }
.nx-hint-warn { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--rounded-md, 12px); background: #FCF1D2; color: #5C4100; font: 400 14px/1.45 var(--font-text); }
.nx-hint-warn > .nx-icon { --nx-size: 18px; flex: none; margin-top: 1px; color: #9A6B00; }
/* фокус — одним кольцом вокруг всей группы «страна + номер» */
.nx-phone { border-radius: var(--rounded-pill); transition: box-shadow var(--fast) var(--ease-hover); }
.nx-phone:focus-within { box-shadow: 0 0 0 4px rgb(227 244 80 / .75); }
.nx-phone .nx-phone__input:focus, .nx-phone .nx-phone__input:focus-visible { box-shadow: none; }
.nx-phone .nx-phone__cc select:focus-visible { outline: none; border-color: var(--ink); }
.ux-verified .link { min-height: 32px; }
@media (max-width: 767.98px) { .ux-verified .link { min-height: 44px; display: inline-flex; align-items: center; } }
.mz-pf-card .field__label small { font-size: inherit; font-weight: 400; }