/* ============================================================
   Чаты риелтора — оформление.
   Без внешних шрифтов и CDN: системный шрифт телефона.
   Светлая и тёмная тема, безопасные зоны iOS, крупные тапы (>=44px).
   ============================================================ */

:root {
  --bg:        #f6f7f9;
  --bg-elev:   #ffffff;
  --bg-sunk:   #eceef2;
  --text:      #13161b;
  --text-dim:  #6b7280;
  --line:      #dfe3e9;
  --accent:    #1f6feb;
  --accent-ink:#ffffff;
  --mine:      #1f6feb;
  --mine-ink:  #ffffff;
  --theirs:    #ffffff;
  --theirs-ink:#13161b;
  --ok:        #12a150;
  --warn:      #d28100;
  --bad:       #d1293d;
  --danger:    #d1293d;
  --ping:      #7c4dde;           /* «на пинг»: пора напомнить о себе */
  --agreed:    #0e8f8a;           /* «договорились»: показ согласован, ждём дату */
  --shadow:    0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --radius:    14px;
  --tap:       44px;              /* минимальный тапабельный размер */
  --safe-t:    env(safe-area-inset-top, 0px);
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --safe-l:    env(safe-area-inset-left, 0px);
  --safe-r:    env(safe-area-inset-right, 0px);
  --kb:        0px;               /* высота экранной клавиатуры, считает app.js */
  --vv-top:    0px;               /* iOS сдвинул видимую часть вниз при клавиатуре — app.js */

  /* Категории чата (D3): у каждой свой цвет. Контраст текста тега на его фоне
     (цвет 13 % поверх карточки) — не ниже 4.5:1; проверено в обеих темах:
     ждёт 5.1 · пинг 5.7 · холодный 5.5 · замолчал 6.2 · договорились 6.0 ·
     телефон 5.9 · созвонились 5.7 · назначено 5.1 · отказ 5.2 · завершён 11.4.
     «Созвонились» — оливковый, не зелёный: рядом с «дал телефон» ΔE2000 = 22.8
     (светлая) и 22.2 (тёмная); было 10.2 и 15.7 — два зелёных путались. */
  --st-we_owe_answer:   #9a4a05;  --st-we_owe_answer-bg:   #f2e7de;
  --st-ping_due:        #6d28d9;  --st-ping_due-bg:        #ece3fa;
  --st-never_contacted: #1d4ed8;  --st-never_contacted-bg: #e2e8fa;
  --st-client_silent:   #475569;  --st-client_silent-bg:   #e7e9ec;
  --st-agreed:          #155e75;  --st-agreed-bg:          #e1eaed;
  --st-phone_given:     #166534;  --st-phone_given-bg:     #e1ebe5;
  --st-called:          #665a00;  --st-called-bg:          #ebeade;
  --st-scheduled:       #a21caf;  --st-scheduled-bg:       #f3e1f5;
  --st-refused:         #b91c1c;  --st-refused-bg:         #f6e1e1;
  --st-done:            #1f2937;  --st-done-bg:            #e2e3e5;
  /* «собственник» (v9, 26.09) — заметно, тег залитый: белый на #9f1239 — 8.0,
     текст #9f1239 на фоне страницы — 7.5 */
  --st-owner_msg:       #9f1239;  --st-owner_msg-bg:       #9f1239;  --st-owner_msg-ink: #ffffff;
  /* «брак» (оператор 28.09: «красным») — тег залитый, чтобы не путать с «отказом» (красный
     текст на бледном): белый на #d92020 — 5.0; текст #d92020 на фоне страницы — 4.7, на
     карточке/шапке — 5.0; ΔE2000 заливки к фону «отказа» — 42.9, к «собственнику» — 17.5 */
  --st-junk:            #d92020;  --st-junk-bg:            #d92020;  --st-junk-ink:      #ffffff;
  /* «Мои клиенты» (оператор 28.09: «пометка… заметно в общем интерфейсе») — золотой: чип
     «мой» залит, белый на #a16207 — 4.9; текст #a16207 на фоне страницы — 4.6, на карточке — 4.9.
     Номер клиента «из звонка» — тег #92400e на #fef3c7 — 6.4. */
  --own:                #a16207;  --own-ink:               #ffffff;
  --src-call:           #92400e;  --src-call-bg:           #fef3c7;
}

:root { color-scheme: light; }

/* Тёмная тема — по атрибуту, а не по настройке телефона: по умолчанию тёмная,
   светлая — кнопкой в шапке (оператор 26.09; web/theme.js, web/app.js: toggleTheme). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #14161a;
  --bg-elev:   #1c1f25;
  --bg-sunk:   #0f1114;
  --text:      #e9edf3;
  --text-dim:  #98a1ae;
  --line:      #2a2f37;
  --accent:    #3b82f6;
  --accent-ink:#ffffff;
  --mine:      #2563eb;
  --mine-ink:  #ffffff;
  --theirs:    #242832;
  --theirs-ink:#e9edf3;
  --ok:        #34d07f;
  --warn:      #f0b429;
  --bad:       #f36b7f;
  --danger:    #f36b7f;
  --ping:      #a98bf5;
  --agreed:    #3fd0c8;
  --shadow:    0 1px 2px rgba(0, 0, 0, .4);

  /* тёмная тема: ждёт 6.9 · пинг 5.3 · холодный 6.8 · замолчал 4.9 ·
     договорились 7.6 · телефон 7.8 · созвонились 6.1 · назначено 4.8 · отказ 6.3 · завершён 9.3 */
  --st-we_owe_answer:   #fbbf24;  --st-we_owe_answer-bg:   #403925;
  --st-ping_due:        #b69cfb;  --st-ping_due-bg:        #353347;
  --st-never_contacted: #7dd3fc;  --st-never_contacted-bg: #2c3c47;
  --st-client_silent:   #94a3b8;  --st-client_silent-bg:   #2f343d;
  --st-agreed:          #5eead4;  --st-agreed-bg:          #273f41;
  --st-phone_given:     #86efac;  --st-phone_given-bg:     #2d403b;
  --st-called:          #a8c418;  --st-called-bg:          #323923;
  --st-scheduled:       #f472b6;  --st-scheduled-bg:       #3f2c3c;
  --st-refused:         #fca5a5;  --st-refused-bg:         #403439;
  --st-done:            #f3f4f6;  --st-done-bg:            #3e4146;
  /* «собственник»: #1f1115 на #fda4af — 9.7, текст #fda4af на фоне страницы — 9.6 */
  --st-owner_msg:       #fda4af;  --st-owner_msg-bg:       #fda4af;  --st-owner_msg-ink: #1f1115;
  /* «брак»: #1b0707 на #f25555 — 5.8; текст #f25555 на фоне страницы — 5.4, на карточке/шапке —
     4.9; ΔE2000 к «отказу» (#fca5a5) — 18.1, к «собственнику» — 19.4 */
  --st-junk:            #f25555;  --st-junk-bg:            #f25555;  --st-junk-ink:      #1b0707;
  /* «мой»: #1c1500 на #facc15 — 11.9; текст #facc15 на фоне страницы — 11.8, на карточке — 10.8;
     «из звонка»: #fde68a на #3b3320 — 10.0 */
  --own:                #facc15;  --own-ink:               #1c1500;
  --src-call:           #fde68a;  --src-call-bg:           #3b3320;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;                  /* D5: высота без адресной строки браузера */
  overscroll-behavior-y: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

h1, h2 { margin: 0; font-size: 18px; font-weight: 650; }
p  { margin: 0 0 10px; }
ul { margin: 0; padding: 0; list-style: none; }
b  { font-weight: 650; }

.muted  { color: var(--text-dim); }
.small  { font-size: 13px; line-height: 1.35; }
.center { text-align: center; }
[hidden] { display: none !important; }

/* ---------- экраны ---------- */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}

/* Экраны с полем ввода — ровно в видимой части над клавиатурой (D5): снизу
   поднимаемся на её высоту, сверху — на сдвиг, который делает iOS (иначе шапка
   уезжала за верх экрана). Значения считает app.js: trackKeyboard. */
.screen--thread,
.screen--login { top: var(--vv-top, 0px); bottom: var(--kb, 0px); }
/* 11.10 вечер: клавиатура открыта на iPhone — экран с полем в координатах документа ровно в видимой части
   (app.js: trackKeyboard, --vv-page-top = visualViewport.pageTop, --vv-h = visualViewport.height). Окно не
   прокручиваем сами: iOS 26 рисует position: fixed не там, куда указывает visualViewport, а absolute от документа
   стоит там, куда поставили, как бы iOS ни прокрутила окно к полю. */
body[data-vvabs="1"] .screen--thread,
body[data-vvabs="1"] .screen--login { position: absolute; top: var(--vv-page-top, 0px); bottom: auto; height: var(--vv-h, 100%); }

.scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px calc(18px + var(--safe-b));
}

/* ---------- верхняя панель ---------- */
.topbar {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  padding-top: var(--safe-t);
  flex: 0 0 auto;
}

.topbar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 4px 8px;
}

.topbar__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 6px;
}

.topbar__who { flex: 1; min-width: 0; padding-left: 2px; }
.topbar__who .topbar__title { padding-left: 0; font-size: 17px; }
.screen--chats .topbar__who { padding-left: 6px; }
.topbar__key { color: var(--accent, #4f8cff); font-weight: 600; }
/* «Передать ▾» (#showToggle, .showbar) — одна кнопка у любого ключа (владелец 07.10: «Назначить» и
   «Передать» — одно и то же). Прежние правила «владельцу — Назначить, сотруднику — свой ряд
   Передать (.chatactions__btn--handover/.handoverbar)» убраны вместе с той разметкой. */

.topbar__sub {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iconbtn {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
}
.iconbtn:active { background: var(--bg-sunk); }

/* с открытой клавиатурой места мало: отдаём переписке высоту шапки */
body[data-kb="1"] .topbar--thread .topbar__row { min-height: 40px; padding-top: 0; padding-bottom: 0; }
body[data-kb="1"] .topbar--thread .topbar__sub  { display: none; }
body[data-kb="1"] .scroll--msgs { padding-top: 4px; }
/* Панель объекта целиком съедала треть экрана над клавиатурой (снимки 25.09):
   пока пишут — только свёрнутая строка объекта, без условий и полосы значков (29.09:
   .objecthead — весь объект, раньше .object__flat/.object__addr — те же цена и адрес);
   «Назначить» скрыт, если это не сам комментарий назначения (kbin=show, ниже). */
body[data-kb="1"] .object { padding-top: 6px; padding-bottom: 6px; }
body[data-kb="1"] .object__terms,
/* Только в чате (08.10, владелец: «в показе через раз нет „Перенести“ и „Отменить“»): правило было
   общим, и на экране показа/карточки клиента при залипшем data-kb="1" (клавиатура закрылась, а
   visualViewport ещё не вернулся; фокус остался в скрытом поле чата) пропадали ВСЕ плитки .iconbar —
   звонки, «Подтв.», «Чат», «Перенести/Перезвонить/Отменить», «Добавить» заметку. */
body[data-kb="1"][data-screen="thread"] .iconbar,
body[data-kb="1"]:not([data-kbin="show"]) .chatactions__btn--assign,
body[data-kb="1"]:not([data-kbin="show"]) .chatactions__btn--itog,
body[data-kb="1"]:not([data-kbin="show"]) .showbar { display: none; }
/* Клавиатура — ради комментария к назначению (28.09): полоса назначения остаётся, прячем
   панель объекта и поле ответа — места над клавиатурой мало. */
body[data-kbin="show"] .object,
body[data-kbin="show"] .composer { display: none; }

/* ---------- индикатор связи ---------- */
.status {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: var(--tap);          /* по ней тапают, чтобы обновить — размер как у кнопки */
  padding: 7px 14px 8px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 12.5px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.status--inline { width: auto; min-height: 0; padding: 0 8px; }
.status__text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «· чатов X из Y»: загрузилось не всё — жёлтым, заметно (D2) */
.status__count { flex: 0 0 auto; margin-left: -3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.status__count.is-partial { color: var(--st-we_owe_answer); font-weight: 650; }
/* Не все загружено или строка не влезла (390 px): счётчик — второй строкой,
   под текстом (отступ = точка 9 px + зазор 7 px); «обновлено …» не обрезается. */
#statusBar { flex-wrap: wrap; row-gap: 1px; }
.status--two .status__count { flex: 0 0 calc(100% - 16px); margin-left: 16px; overflow: hidden; text-overflow: ellipsis; }

/* Энергия (08.10): бесконечных анимаций нет — не дольше минуты (дольше ждать запросу не дают таймауты;
   зависшая плашка не крутит GPU часами), в фоне — на паузе (html.is-bg, app.js: energyHidden). */
html.is-bg *, html.is-bg *::before, html.is-bg *::after { animation-play-state: paused !important; }
.iconbtn--refresh.is-busy .ico { animation: spin 0.9s linear 60; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .iconbtn--refresh.is-busy .ico { animation: none; opacity: .5; } }

.status__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-dim);
}
.status__dot.is-online  { background: var(--ok); }
.status__dot.is-sync    { background: var(--accent); animation: pulse 1s ease-in-out 60; }
.status__dot.is-offline { background: var(--text-dim); }
.status__dot.is-error   { background: var(--bad); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .status__dot.is-sync { animation: none; } }

/* ---------- список чатов ---------- */
.chats { display: flex; flex-direction: column; gap: 8px; }

/* «Потяните, чтобы обновить» (D2): высоту задаёт палец (app.js: initPullToRefresh) */
.scroll--chats { overscroll-behavior-y: contain; }
.ptr {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13px;
  transition: height .15s ease;
}
.ptr.is-ready { color: var(--accent); font-weight: 600; }

.chat {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 11px 13px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.chat:active { background: var(--bg-sunk); }

.chat__ava {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-sunk);
  color: var(--text-dim);
  font-weight: 650;
  font-size: 16px;
}
.chat.is-unread .chat__ava { background: var(--accent); color: var(--accent-ink); }

.chat__body { flex: 1; min-width: 0; }

.chat__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.chat__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat__time { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); }

/* Новое назначение сотруднику (27.09): заметный чип до первого открытия чата. */
.chat__new {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .02em;
}

/* «Мои клиенты» (28.09): свой чип «мой» золотом рядом с именем и золотое кольцо аватара —
   видно, что клиента ведёт сам владелец, в любом списке и фильтре. */
.chat__mine {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--own);
  color: var(--own-ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .02em;
}
.chat.is-mine .chat__ava { box-shadow: 0 0 0 2px var(--own); }

/* Чей ход (D1): по умолчанию слово за клиентом — строка яркая, ждут нас.
   Последнее живое слово наше (.is-ours) — приглушена, с «Вы: » в начале. */
.chat__last {
  margin-top: 3px;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat.is-ours .chat__name { font-weight: 500; color: var(--text-dim); }
.chat.is-ours .chat__last { color: var(--text-dim); }
.chat.is-ours:not(.is-unread) .chat__ava { opacity: .7; }
.chat__you { font-weight: 600; }
/* Новое назначение ярче «чей ход»: аватар акцентом, имя не приглушено (27.09). */
.chat.is-new .chat__ava { background: var(--accent); color: var(--accent-ink); opacity: 1; }
.chat.is-new .chat__name { font-weight: 650; color: var(--text); }

.chat__badge {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 650;
  display: grid;
  place-items: center;
}

.tag {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 600;
}
.tag--new  { background: rgba(31, 111, 235, .14); color: var(--accent); }
.tag--lead { background: rgba(18, 161, 80, .16);  color: var(--ok); }
.tag--wait { background: rgba(210, 129, 0, .16);  color: var(--warn); }

/* Категории (D3): цвет тега, точка фильтра и подпись в шапке чата — одного цвета. */
.tag--we_owe_answer   { color: var(--st-we_owe_answer);   background: var(--st-we_owe_answer-bg); }
.tag--ping_due        { color: var(--st-ping_due);        background: var(--st-ping_due-bg); }
.tag--never_contacted { color: var(--st-never_contacted); background: var(--st-never_contacted-bg); }
.tag--client_silent   { color: var(--st-client_silent);   background: var(--st-client_silent-bg); }
.tag--agreed          { color: var(--st-agreed);          background: var(--st-agreed-bg); }
/* «Договорились?» (08.10): цвет «договорились» (тот же контраст), пунктирная рамка — не подтверждено */
.tag--agreed_maybe    { color: var(--st-agreed);          background: var(--st-agreed-bg);
                        box-shadow: inset 0 0 0 1px currentColor; border-radius: 6px; }
.tag--phone_given     { color: var(--st-phone_given);     background: var(--st-phone_given-bg); }
.tag--called          { color: var(--st-called);          background: var(--st-called-bg); }
.tag--scheduled       { color: var(--st-scheduled);       background: var(--st-scheduled-bg); }
.tag--refused         { color: var(--st-refused);         background: var(--st-refused-bg); }
.tag--done            { color: var(--st-done);            background: var(--st-done-bg); }
.tag--owner_msg       { color: var(--st-owner_msg-ink);   background: var(--st-owner_msg-bg); font-weight: 700; }
.tag--junk            { color: var(--st-junk-ink);        background: var(--st-junk-bg);      font-weight: 700; }
/* «Общее» у владельца (28.09): кто ведёт чат — после категории, «[на пинг] [ведёт Алёна]». */
.tag--who             { color: var(--text);               background: var(--bg-sunk);         font-weight: 600; }

.dot--we_owe_answer   { background: var(--st-we_owe_answer); }
.dot--ping_due        { background: var(--st-ping_due); }
.dot--never_contacted { background: var(--st-never_contacted); }
.dot--client_silent   { background: var(--st-client_silent); }
.dot--agreed          { background: var(--st-agreed); }
.dot--agreed_maybe    { background: transparent; box-shadow: inset 0 0 0 2px var(--st-agreed); }
.dot--phone_given     { background: var(--st-phone_given); }
.dot--called          { background: var(--st-called); }
.dot--scheduled       { background: var(--st-scheduled); }
.dot--refused         { background: var(--st-refused); }
.dot--done            { background: var(--st-done); }
.dot--owner_msg       { background: var(--st-owner_msg); }
.dot--junk            { background: var(--st-junk); }
.dot--archive         { background: var(--st-done); opacity: .55; }   /* архив: 7 дней тишины */

/* Категория в шапке чата: кнопка «Категория ▾» (C5; с 28.09 — у любого ключа), до ответа
   сервера о правах — подпись threadSub. Цвет у обоих — цвет категории, как у тега в списке. */
.topbar__sub.st--we_owe_answer, .catbtn.st--we_owe_answer      { color: var(--st-we_owe_answer); }
.topbar__sub.st--ping_due, .catbtn.st--ping_due                { color: var(--st-ping_due); }
.topbar__sub.st--never_contacted, .catbtn.st--never_contacted  { color: var(--st-never_contacted); }
.topbar__sub.st--client_silent, .catbtn.st--client_silent      { color: var(--st-client_silent); }
.topbar__sub.st--agreed, .catbtn.st--agreed                    { color: var(--st-agreed); }
.topbar__sub.st--agreed_maybe, .catbtn.st--agreed_maybe        { color: var(--st-agreed); }
.topbar__sub.st--phone_given, .catbtn.st--phone_given          { color: var(--st-phone_given); }
.topbar__sub.st--called, .catbtn.st--called                    { color: var(--st-called); }
.topbar__sub.st--scheduled, .catbtn.st--scheduled              { color: var(--st-scheduled); }
.topbar__sub.st--refused, .catbtn.st--refused                  { color: var(--st-refused); }
.topbar__sub.st--done, .catbtn.st--done                        { color: var(--st-done); }
.topbar__sub.st--owner_msg, .catbtn.st--owner_msg              { color: var(--st-owner_msg); }
.topbar__sub.st--junk, .catbtn.st--junk                        { color: var(--st-junk); }

.empty { padding: 40px 20px; text-align: center; color: var(--text-dim); }
.empty__btn { margin-top: 14px; }        /* «Повторить», когда чат не открылся без связи */

/* ---------- переписка ---------- */
.scroll--msgs { display: flex; flex-direction: column; background: var(--bg); }
.msgs { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }

.day {
  align-self: center;
  margin: 12px 0 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--text-dim);
  font-size: 12px;
}

.msg {
  max-width: 82%;
  padding: 8px 12px 6px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: 15.5px;
}

.msg--client {
  align-self: flex-start;
  background: var(--theirs);
  color: var(--theirs-ink);
  border-bottom-left-radius: 5px;
}

.msg--me {
  align-self: flex-end;
  background: var(--mine);
  color: var(--mine-ink);
  border-bottom-right-radius: 5px;
}

/* строка под сообщением: время и значок доставки */
.msg__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1;
}

.msg__time { opacity: .72; }

/* значок ровно по высоте времени — не крупнее */
.msg__state {
  display: inline-flex;
  align-items: center;
  opacity: .85;
}
.ico-state { display: block; height: 11px; }

/* две галочки заметнее одной: прочитано — это хорошая новость */
.msg--me .msg__state[aria-label="клиент прочитал"] { opacity: 1; }

/* ответ не ушёл: значок и повтор читаются на красном пузыре */
.msg--failed .msg__state { opacity: 1; }

.msg__retry {
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  cursor: pointer;
}
.msg__retry:disabled { opacity: .5; }

/* холостой режим: не значок, а прямая фраза — иначе её легко не заметить */
.msg__dry {
  display: block;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .22);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}

/* «[appCall]» — звонок через Avito: словами, итог звонка из журнала строкой ниже */
.msg--call { font-weight: 600; }
/* служебная отметка (07.10): только у нас, клиенту не уходит — плашка по центру, не пузырь */
.msg--note {
  align-self: center;
  max-width: 92%;
  background: var(--src-call-bg);
  color: var(--src-call);
  border: 1px dashed currentColor;
  box-shadow: none;
  font-size: 13.5px;
  text-align: center;
}
.msg__note-tag { display: block; font-size: 11px; opacity: .75; margin-top: 2px; }
.msg__call {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  opacity: .8;
}

.msg--pending { opacity: .62; }
.msg--failed  { background: var(--bad); color: #fff; }

/* ---------- поле ответа ---------- */
.composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px calc(8px + var(--safe-b));
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
}

.composer__input {
  flex: 1;
  min-height: var(--tap);
  max-height: 140px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;            /* 16px — иначе iOS зумит страницу при фокусе */
  line-height: 1.35;
  resize: none;
}
.composer__input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.composer__send {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.composer__send:disabled { opacity: .45; }

/* Скрепка (E1): слева от поля ввода, размер тапа как у отправки */
.composer__attach {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  margin-right: -4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.composer__attach:active { background: var(--bg-sunk); color: var(--accent); }
.composer__file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- вход ---------- */
.screen--login { justify-content: center; }

.login {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 24px 20px calc(24px + var(--safe-b));
}

.login__logo {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: var(--accent);
  position: relative;
}
.login__logo::after {
  content: "";
  position: absolute;
  inset: 17px 15px 20px;
  border: 3px solid #fff;
  border-radius: 8px 8px 8px 2px;
}

.login__title { text-align: center; font-size: 22px; margin-bottom: 4px; }

.form { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }

.field { display: block; }
.field__label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-dim); }

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* поле ключа доступа + кнопка «Вставить» */
.keyrow { display: flex; gap: 8px; }

.input--key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}

.btn--paste { flex: 0 0 auto; padding: 11px 14px; font-weight: 600; white-space: nowrap; }

@media (max-width: 359px) {
  .keyrow { flex-direction: column; }
  .btn--paste { width: 100%; }
}

.error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(209, 41, 61, .12);
  color: var(--bad);
  font-size: 14px;
}

/* ---------- кнопки ---------- */
.btn {
  min-height: var(--tap);
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn:active { opacity: .8; }
.btn:disabled { opacity: .5; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--danger  { background: transparent; border-color: var(--danger); color: var(--danger); }
/* «🔔 Напоминания» вкл/выкл (план CALGRID §2, 29.09) — состояние кнопки-выключателя. */
.btn.is-on { border-color: var(--st-phone_given); color: var(--st-phone_given); }
.btn--big     { width: 100%; min-height: 50px; font-size: 16.5px; }

/* ---------- карточки настроек ---------- */
.card {
  margin-bottom: 12px;
  padding: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
}
.card__row--stack { align-items: center; }
.card__key { font-size: 14px; color: var(--text-dim); }
.card > .card__key { color: var(--text); font-weight: 650; margin-bottom: 6px; }
.card__row--stack .card__key { color: var(--text); font-weight: 600; margin-bottom: 3px; }
.card__val { font-size: 14px; font-weight: 600; text-align: right; }
.version { margin-top: 18px; }

/* ---------- подсказка iOS ---------- */
.ios-hint {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  padding-bottom: calc(12px + var(--safe-b));
}

.ios-hint__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  max-height: 86dvh;
  overflow-y: auto;
  padding: 20px 18px 18px;
  border-radius: 18px;
  background: var(--bg-elev);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}

.ios-hint__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ios-hint h2 { margin-bottom: 8px; padding-right: 38px; }
.steps { margin: 12px 0 14px; padding-left: 22px; font-size: 14.5px; }
.steps li { margin-bottom: 8px; }
.steps--card { margin: 8px 0 10px; font-size: 14px; line-height: 1.4; }
.steps--card li { margin-bottom: 7px; }
.ios-hint .btn { width: 100%; margin-top: 4px; }

/* ---------- всплывающее сообщение ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + var(--safe-b) + var(--kb, 0px));
  transform: translateX(-50%);
  z-index: 60;
  /* max-content: без него left:50% оставлял тосту полэкрана, и фраза
     «Слишком часто. Подождите N с…» вставала столбиком в три строки */
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 11px 16px;
  border-radius: 12px;
  background: rgba(20, 22, 26, .94);
  color: #fff;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  pointer-events: none;           /* нажатия проходят к тому, что под ним */
}
/* «Записал как прямой клиента · Отменить» (аудит 09.10 №6): у тоста с действием кнопка нажимается */
.toast.has-act { pointer-events: auto; }
.toast__act {
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: #8ab4ff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* В чате внизу — последнее сообщение (у неотправленного там время и
   «Повторить») и поле ввода: тост — сверху, поверх шапки, а не на них. */
body[data-screen="thread"] .toast {
  top: calc(var(--vv-top, 0px) + var(--safe-t) + 6px);
  bottom: auto;
}

/* ---------- иконки (CSS и встроенный svg, файлов не тянем) ---------- */
.ico { display: block; }

.ico-back, .ico-send, .ico-share {
  display: inline-block;
  position: relative;
  width: 22px;
  height: 22px;
}

/* стрелка назад */
.ico-back::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-left: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: rotate(45deg);
}
/* та же стрелка, зеркалом — «вперёд» (листание месяца/недели/дня, web/app.js: calNavNext) */
.ico-back--fwd::before { transform: rotate(225deg); left: 4px; }

/* самолётик отправки */
.ico-send::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  border: 7px solid transparent;
  border-left: 13px solid currentColor;
  border-right: 0;
}

/* iOS «Поделиться»: квадрат со стрелкой вверх */
.ico-share {
  width: 16px;
  height: 18px;
  margin: 0 4px;
  vertical-align: -3px;
  color: var(--accent);
}
.ico-share::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 16px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 3px;
}
.ico-share::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 0;
  width: 3px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 34%, 100% 100%, 0 100%, 0 34%);
}

/* ---------- крупные экраны: не растягиваем строки на весь планшет ---------- */
@media (min-width: 620px) {
  .scroll   { padding-left: max(14px, calc(50% - 320px)); padding-right: max(14px, calc(50% - 320px)); }
  .topbar__row { max-width: 668px; margin: 0 auto; width: 100%; }
  .status   { max-width: 668px; margin: 0 auto; }
  .composer { padding-left: max(10px, calc(50% - 324px)); padding-right: max(10px, calc(50% - 324px)); }
  .msg      { max-width: 68%; }
}

/* ---------- очень узкие экраны (iPhone SE, 375px и уже) ---------- */
@media (max-width: 374px) {
  .chat { padding: 10px; gap: 10px; }
  .chat__ava { width: 38px; height: 38px; font-size: 15px; }
  .topbar__title { font-size: 17px; }
}

/* ---------- фильтры по категориям и объект в карточке ---------- */

/* Полоса фильтров прокручивается вбок: категорий до семи, на телефон в
   один ряд они не помещаются. Полосу прокрутки прячем - она тут лишний шум. */
.chips {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  /* Палец должен попадать с первого раза - минимум 32px по высоте. */
  min-height: 32px;
}
.chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.chip__n {
  font-size: 12px;
  opacity: .75;
  font-variant-numeric: tabular-nums;
}
.chip__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
/* на синей «включённой» кнопке точку обводим, чтобы цвет категории читался */
.chip.is-on .chip__dot { box-shadow: 0 0 0 1.5px var(--accent-ink); }
/* «👤 Назначено ▾» (владелец, 27.09): длинное имя не раздувает полосу фильтров. */
.chip--who .chip__txt { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wholist { padding-top: 8px; }

/* По какой квартире пишут - строкой над последним сообщением. */
.chat__item {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat__tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* Повторный клиент — бледная плашка: заметна, но не спорит с категорией.
   Не длиннее двух строк: переносится, а не режется многоточием в одну —
   иначе «вёл …» в конце не видно (проверка 25.09: 4 из 4 срезаны). */
.chat__repeat {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 3px;
  padding: 1px 8px;
  border-radius: 8px;
  background: var(--bg-sunk);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Фрагмент переписки, где нашёлся текстовый запрос (оператор 29.09, блок «В переписке») —
   курсивом, чтобы не путать с текстом последнего сообщения (.chat__last). */
.chat__hit {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 12.5px;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Разделитель списка — «В переписке» (29.09): чаты, найденные сервером по тексту сообщений,
   а не по имени/адресу/цене (уже показаны выше без разделителя). */
.chatlist__sec {
  padding: 6px 16px 4px;
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* «По клиенту» (07.10): заголовок квартиры над её чатами — адрес как есть, без капса. */
.chatlist__sec--flat {
  padding: 10px 16px 4px;
  color: var(--text);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  border-top: 1px solid var(--line);
}
.chatlist__sec--flat:first-child { border-top: 0; }

/* ---------- объект над перепиской ----------
   Свёрнутая полоса под шапкой на всю ширину (оператор 29.09: «перегруз интерфейса
   получился» — раньше пять строк, теперь строка + полоса значков):
     120 000 ₽ · 2к, 51 м² · 1-я Магистральная 25 ⌄
     [📞 Клиенту] [Telegram] [WhatsApp] [↗ Отправить] [ЦИАН] [📞 Собственнику] [🏠 2] [📝]  */
.object {
  padding: 10px 16px 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  line-height: 1.3;
}
/* Свёрнутая строка объекта + стрелка разворота условий и заметок (оператор 29.09). */
.objecthead {
  display: flex;
  align-items: center;
  gap: 4px;
}
.objecthead__line {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}
a.objecthead__line:visited { color: var(--text); }
.objecthead__toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, color .15s ease;
}
.objecthead__toggle:active { background: var(--bg-sunk); }
.objecthead.is-open .objecthead__toggle { transform: rotate(180deg); color: var(--text); }

.object__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;              /* палец попадает с первого раза */
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.object__btn:visited { color: var(--accent); }
.object__btn--call {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.object__btn--call:visited { color: var(--accent-ink); }

.object__term { white-space: nowrap; }
/* Превью последней заметки внутри развёрнутых условий (оператор 29.09: «раскрывает
   условия… и заметки») — тап открывает то же окно, что и значок «📝» в полосе ниже. */
.object__notes {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.object__notes.is-empty { color: var(--text-dim); }
.object__notes-ico { flex: 0 0 auto; }
.object__notes-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «повторный · писал 20.09 по … · вёл …» над шапкой объекта; тап — прошлый чат. */
.object__repeat {
  /* 29.09 (оператор: «интерфейс… нелепо выглядит»): тонкой строкой без рамки и заливки — не спорит
     с кнопками полосы значков ниже; длинное «вёл …» — многоточием в одну строку. */
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
button.object__repeat { cursor: pointer; }
button.object__repeat::after { content: " ›"; color: var(--accent); }
.object__terms {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---------- «📅 Показ» / «📞 Перезвонить» / «👤 Назначить ▾» — один ряд (оператор 29.09:
   «перегруз интерфейса получился», раньше две отдельные полосы над полем ввода) ----------
   .chatactions__cal — display: contents: calAdd/callAdd физически внутри своего
   #calBar (тот же id, что paintCalBar прячет целиком при !c), но визуально в одном ряду
   с «Назначить» — тремя кнопками, а не двумя полосами. Список сотрудников (#showList)
   разворачивается ниже, в .showbar, как раньше. */
.chatactions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;              /* одна строка (оператор 29.09: «перегруз») — на 360–412 px тоже */
  gap: 0 2px;
  min-height: 44px;
  padding: 4px 12px 4px 4px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.chatactions[hidden] { display: none; }
.chatactions__cal { display: contents; }
.chatactions__cal[hidden] { display: none; }
.chatactions__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.chatactions__btn--assign { margin-left: auto; min-width: 0; }
/* Уже назначен — вместо слова «Назначить» имя того, кто ведёт («👤 ✓ Марина ▾»): строка не переносится. */
#showToggle:has(.chatactions__assignstate:not([hidden])) .chatactions__assignlabel { display: none; }
/* «Передать» (сотрудник, 30.09) — тот же правый край ряда, что у «Назначить» владельца. */
/* Ближайший показ этого чата — тонкой полосой под панелью объекта (аудит 09.10 №2: чипом в ряду действий он
   становился «📅 сег…» и выталкивал «Передать» за край на 390/360 px); тап — показ. */
.nextshow {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 6px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--st-scheduled-bg);
  color: var(--st-scheduled);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.nextshow:active { filter: brightness(.95); }
body[data-kb="1"] .nextshow { display: none; }   /* пишут ответ — место переписке, как у «Показ / Перезвонить» */
/* Кому уже назначен показ — коротко на самой кнопке «Назначить», зелёным. */
.chatactions__assignstate {
  max-width: 30vw;
  color: var(--ok);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatactions__arrow { color: var(--text-dim); transition: transform .18s ease; }
/* Ведёт сотрудник (08.10) — та же кнопка зелёной «таблеткой» с его именем, как в CRM. */
#showToggle.is-held { border-radius: 999px; background: rgba(18, 161, 80, .14); color: var(--ok); }
#showToggle.is-held .ico, #showToggle.is-held .chatactions__arrow { color: inherit; }
#showToggle[aria-expanded="true"] .chatactions__arrow { transform: rotate(180deg); }
@media (min-width: 620px) {
  .chatactions { padding-left: max(4px, calc(50% - 332px)); padding-right: max(12px, calc(50% - 320px)); }
}

/* Выбор сотрудника — как выбор страны при регистрации: поиск сверху и
   прокручиваемый список. Высота ограничена: видно ~5 строк, остальное
   прокруткой, и сразу понятно, что список длиннее экрана. Полоса и граница —
   на самом .picker (единственный ребёнок .showbar): пусто, пока список закрыт. */
.picker {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.picker__search {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;               /* меньше 16px — iOS зумит страницу при фокусе */
  -webkit-appearance: none;
  appearance: none;
}
.picker__search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.picker__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 4px;
  max-height: 232px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;  /* прокрутка списка не тащит за собой чат */
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.picker__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.picker__item:hover, .picker__item:focus { background: var(--bg-sunk); outline: none; }
.picker__item:active { background: var(--bg-sunk); }
.picker__item + .picker__item { margin-top: 2px; }
.picker__item--test { color: var(--accent); font-weight: 600; }
/* «Мои клиенты» в списках назначения и фильтре (28.09) — тем же золотом, что чип «мой». */
.picker__item--mine { color: var(--own); font-weight: 650; }
.picker__item--mine .picker__hint { color: var(--own); opacity: .85; }
.picker__item--own { color: var(--own); }          /* «Мои клиенты (Иван)» второго владельца */
/* Комментарий при назначении (28.09): над поиском, 16px — иначе iOS увеличивает страницу. */
.picker__comment {
  display: block;
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}
.picker__comment:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.picker__comment::placeholder { color: var(--text-dim); }
.picker__item--suggested { font-weight: 600; }
.picker__item--suggested .picker__hint { color: var(--agreed); }
.picker__hint { color: var(--text-dim); font-size: 12.5px; font-weight: 400; }
.picker__empty { padding: 12px; color: var(--text-dim); font-size: 13.5px; }
/* «Назначить клиента полностью» / «Отправить только этот чат» (оператор 30.09): два сегмента над
   поиском, выбранный — цветом акцента; строка-пояснение под ними. Только у клиента с 2+ чатами. */
.picker__scoperow { display: flex; gap: 6px; }
.picker__scopebtn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.2;
}
.picker__scopebtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.picker__scopehint { margin: 6px 0 8px; color: var(--text-dim); font-size: 12.5px; }
/* «Открепить квартиру» (07.10) — ссылкой в строке «Квартиру ведёт …», не третьим сегментом. */
.picker__scopelink {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- широкий экран: всё по одной колонке ----------
   Стоит В КОНЦЕ файла намеренно: базовые правила .object/.picker объявлены
   выше, и ранний @media они бы перебили своими отступами. Края — те же, что у
   пузырей сообщений (.scroll: 50% − 320px). Без этого на компьютере панель
   объекта и «Назначить показ» прилипали к левому краю окна, а стрелка улетала
   к правому (скрин оператора 22.09). «Назначить ▾» — теперь кнопка в .chatactions
   (29.09), у неё отступ уже общий с «Показ»/«Перезвонить» (правило — у .chatactions). */
@media (min-width: 620px) {
  .object, .chips, .picker {
    padding-left: max(16px, calc(50% - 320px));
    padding-right: max(16px, calc(50% - 320px));
  }
}

/* ---------- бета: метка у заголовка «Чаты», в потоке, ничего не перекрывает ---------- */
.stagepill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
  letter-spacing: .2px;
}
.stagepill[role="button"] { cursor: pointer; }

/* запасной путь беты: ссылка на основное приложение (настройки, экран входа) */
.prodlink { color: var(--accent); font-weight: 650; text-decoration: underline; }
.prodcard .prodlink { display: inline-block; margin-top: 8px; min-height: 24px; }
.prodnote { margin-top: 18px; }

/* ---------- вложения в переписке ---------- */
.msg--media { padding: 4px; }
.msg--media .msg__meta { padding: 2px 6px 0; }
.msg__photo { display: block; line-height: 0; }
/* Фото: пузырь по размеру снимка, тонкая рамка, время и галочки поверх
   картинки в полупрозрачной плашке — как в Telegram/WhatsApp. */
.msg--image { position: relative; padding: 3px; width: max-content; }
.msg--image .msg__photo img { min-width: 150px; min-height: 96px; border-radius: 13px; }
.msg--image .msg__meta {
  position: absolute;
  right: 9px;
  bottom: 9px;
  margin: 0;
  padding: 3px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .46);
  color: #fff;
}
.msg--image .msg__meta .msg__who,
.msg--image .msg__meta .msg__time { color: #fff; opacity: .95; }
.msg__photo img {
  display: block;
  /* Без процентов: в пузыре «по содержимому» max-width в % браузер при расчёте
     ширины не учитывает, и пузырь растягивался под полный размер снимка —
     справа оставалось пустое синее поле (оператор 26.09). */
  max-width: min(260px, 68vw);
  max-height: 320px;
  width: auto;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  background: var(--bg-sunk);
}
/* Своё фото без превью (HEIC с Android без аппаратного HEVC) — заглушка
   «фото отправляется» вместо слова «[фото]», пока Avito не пришлёт ссылки (E1). */
.msg__photo--wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(220px, 60vw);
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
  border: 1px dashed rgba(255, 255, 255, .55);
  line-height: 1.2;
  text-align: center;
}
/* Файл не открылся (только называется .jpg — «файл не распознан»; ссылка Avito
   протухла — «фото не загрузилось»): рамка сплошная, без «пульса» ожидания.
   У входящего пузыря (светлый фон) — рамка и фон по теме, а не белые. */
.msg__photo--broken { border-style: solid; }
.msg--client .msg__photo--wait {
  background: var(--bg-sunk);
  border-color: var(--line);
  color: var(--text-dim);
}
.msg__photo-ico { opacity: .9; }
.msg__photo-cap { font-size: 12.5px; font-weight: 600; padding: 0 10px; }
.msg--pending .msg__photo--wait .msg__photo-ico { animation: pulse 1.4s ease-in-out 40; }
@media (prefers-reduced-motion: reduce) { .msg--pending .msg__photo--wait .msg__photo-ico { animation: none; } }
.msg .msg__photo--broken .msg__photo-ico { animation: none; }   /* после «пульса»: перебивает его */
.msg__voice { display: block; width: min(260px, 70vw); height: 40px; }
.msg__file { display: inline-block; padding: 6px 8px; color: inherit; text-decoration: underline; }

/* Ещё на телефоне, до сервера не дошло (нет связи) — жёлтая стрелка; уйдёт само. */
.msg__state--queued { color: #f5b301; opacity: 1; }
.composer__send--queued { background: #e0a100; }

/* Кто отправил наше сообщение (владелец / бот / Яша…) — только у полного ключа. */
.msg__who { font-size: 11px; opacity: .72; margin-right: 6px; letter-spacing: .01em; }

/* ---------- категория чата вручную (C5) ----------
   Вместо подписи под именем — кнопка «договорились ▾» у любого ключа (28.09: сотрудник
   тоже меняет категорию в своих чатах); какая из двух видна, решает web/app.js:
   paintCategory (атрибут hidden). «вручную» — категория выбрана руками и держится до
   нового сообщения клиента. */
.catbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 26px;
  margin: -3px 0 -3px -6px;       /* зона нажатия больше, текст на месте подписи */
  padding: 3px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.catbtn:active, .catbtn[aria-expanded="true"] { background: var(--bg-sunk); }
.catbtn__label { overflow: hidden; text-overflow: ellipsis; }
.catbtn__manual {
  flex: 0 0 auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}
.catbtn__arrow { flex: 0 0 auto; transition: transform .18s ease; }
/* «ждёт 12 мин» (владелец 09.10): сколько клиент ждёт ответа — жёлтым, дольше 15 мин — красным (web/app.js: waitEl) */
.catbtn__wait, .tag--waitt {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--st-we_owe_answer-bg);
  color: var(--st-we_owe_answer);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.catbtn__wait { padding: 0 6px; font-size: 11.5px; }
.tag--waitt { margin-left: 4px; }
.catbtn__wait.is-late, .tag--waitt.is-late { background: var(--st-refused-bg); color: var(--st-refused); }
.catbtn[aria-expanded="true"] .catbtn__arrow { transform: rotate(180deg); }
body[data-kb="1"] .topbar--thread .catbtn { display: none; }
.catlist {
  padding: 0 16px 10px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
}
.catlist .picker__list { margin-top: 0; max-height: min(560px, 70dvh); }
/* «👤 Назначено»: высота как у «Назначить» в чате — сотрудников станет больше (оператор 28.09). */
.wholist .picker__list { max-height: 232px; }
/* «брак» в выборе категории — последним, за чертой и красным (28.09). */
.picker__item--junk { color: var(--st-junk); font-weight: 600; border-top: 1px solid var(--line);
                      border-radius: 0 0 8px 8px; }
.picker__item + .picker__item--junk { margin-top: 6px; }
/* «Общее» в «👤 Назначено» — первым, за ним черта перед сотрудниками (28.09). */
.picker__item--all { font-weight: 700; border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0;
                     margin-bottom: 6px; }
.picker__item[aria-selected="true"] { color: var(--accent); font-weight: 700; }
.tag--manual { margin-left: 4px; background: transparent; color: var(--text-dim); font-weight: 500; }
@media (min-width: 620px) {
  .catlist { padding-left: max(16px, calc(50% - 320px)); padding-right: max(16px, calc(50% - 320px)); }
}

/* ---------- закреп чатов сверху (оператор 28.09) ----------
   В шапке чата — «📌 Закрепить» в строке имени, справа, прямо над категорией (в строке
   категории на 390 px он обрезал бы её подпись); длинное имя сжимается многоточием, кнопка —
   нет. В списке — булавка перед временем и чуть заметнее рамка; долгое нажатие на строку —
   меню (строка поверх затемнения). */
.threadhead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.threadhead .topbar__title { flex: 1 1 auto; min-width: 0; }
.pinbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  margin: -3px 0;                 /* зона нажатия больше, строка той же высоты */
  padding: 2px 9px 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.pinbtn__ico { font-size: 12px; filter: grayscale(1); opacity: .75; }
.pinbtn.is-on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.pinbtn.is-on .pinbtn__ico { filter: none; opacity: 1; }
.pinbtn:active { background: var(--bg-sunk); }
body[data-kb="1"] .topbar--thread .pinbtn { display: none; }
/* «Снять» (владелец 08.10) — последняя плитка полосы значков чата (.contactbar__btn--take, стили — у .iconbar),
   только владельцу; меню — #ownerSheet (web/app.js: takeSheetOpen). */
.takesheet__owner.is-on { border-color: var(--danger); color: var(--danger); }

/* долгое нажатие — наше меню, а не выделение текста и не системная выноска iOS */
.chat { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.chat__pin { flex: 0 0 auto; font-size: 12.5px; line-height: 1; align-self: center; }
.chat.is-pinned { border-color: rgba(59, 130, 246, .55); }
.chip--main { font-weight: 600; }

.ctxmenu { position: fixed; inset: 0; z-index: 55; }
.ctxmenu__back { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
/* строка, по которой держали палец, — над затемнением (как в мессенджерах) */
.chat.is-menu { position: relative; z-index: 56; box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.ctxmenu__box {
  position: absolute;
  z-index: 57;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.ctxmenu__title {
  padding: 6px 12px 4px;
  color: var(--text-dim);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctxmenu__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.ctxmenu__item:active, .ctxmenu__item:focus-visible { background: var(--bg-sunk); outline: none; }
.ctxmenu__hint { padding: 2px 12px 6px; color: var(--text-dim); font-size: 12px; }

/* ---------- системные настройки (только полный ключ, H5) ----------
   Незаметно: мелкая серая строка в самом низу «Настроек». */
.syslink {
  display: block;
  margin: 6px auto 0;
  padding: 10px 12px;
  min-height: var(--tap);
  background: none;
  border: 0;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  opacity: .75;
  cursor: pointer;
}
body[data-scope="agent"] .syslink,
body[data-scope="agent"] .sys { display: none !important; }
.sys { margin-top: 6px; }
.sys__item {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.sys__body { margin-top: 8px; }
.sys__info { white-space: pre-line; margin: 0 0 8px; }
.sys__list { list-style: none; margin: 0 0 10px; padding: 0; }
.sys__proxy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.sys__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 6px 0; }
.sys__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys__why { font-size: 12px; line-height: 1.3; color: var(--text-dim); overflow-wrap: anywhere; }
.sys__st { flex: 0 0 auto; font-size: 12.5px; color: var(--text-dim); }
.sys__proxy--alive  .sys__st { color: var(--ok); }
.sys__proxy--banned .sys__st { color: var(--bad); }
.sys__proxy--dead   .sys__st { color: var(--warn); }
.sys__del {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
}
.sys__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-sunk);
  color: var(--text);
  font: 16px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;  /* <16px — iOS зумит при фокусе */
  resize: vertical;
}
.sys__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sys__sess { flex-wrap: wrap; padding-bottom: 8px; }
.sys__sess .sys__main { flex: 1 1 100%; padding-bottom: 2px; }
.sys__devs { list-style: none; margin: 4px 0 0; padding: 0; }
.sys__more {
  flex: 0 0 auto; border: 1px solid var(--line); background: transparent; color: var(--text);
  border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.sys__more:disabled { opacity: .45; cursor: default; }
.sys__out { color: var(--bad); }
.sys__row .btn { flex: 1 1 auto; padding: 10px 12px; font-size: 14px; }
.sys__log { margin-top: 12px; }
.sys__log pre {
  max-height: 320px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 10px;
  background: var(--bg-sunk);
  border-radius: 10px;
  color: var(--text);
  font: 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Кнопка темы: в тёмной показываем солнце (включить светлую), в светлой — луну. */
.iconbtn--theme .ico--moon { display: none; }
:root[data-theme="light"] .iconbtn--theme .ico--sun { display: none; }
:root[data-theme="light"] .iconbtn--theme .ico--moon { display: inline; }

/* ---------- копия прода (26.09): метка у «Чаты», полоса под каждой шапкой, без ввода ---------- */
:root { --copy: #6d28d9; --copy-ink: #ffffff; --copy-text: #6d28d9; }
:root[data-theme="dark"] { --copy: #7c3aed; --copy-ink: #ffffff; --copy-text: #c4b5fd; }
.copypill {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 3px 0 1px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--copy);
  color: var(--copy-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-prodcopy .topbar { box-shadow: inset 0 -3px 0 var(--copy); }
/* Песочница (27.09): поле ввода и действия работают; полоса-напоминание над вводом и
   под шапкой списка — «клиентам ничего не уходит». */
.copynote { display: none; }
body.is-prodcopy .copynote {
  display: block;
  margin: 0;
  padding: 6px 16px;
  border-top: 2px solid var(--copy);
  background: var(--bg-elev);
  color: var(--copy-text);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
body.is-prodcopy .copynote--list { border-top: 0; border-bottom: 2px solid var(--copy); }
body[data-kb="1"] .copynote { padding-top: 3px; padding-bottom: 3px; }

/* «Вышла новая версия — Обновить» (оператор 28.09): тонкая полоса под шапкой, пока телефон не
   обновился сам (web/app.js: paintUpdateBar, body.has-update). Пишут текст — не мешает. */
.updbar { display: none; }
body.has-update .updbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 6px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  /* --mine, а не --accent: белый на нём 4.6 (светлая) и 5.2 (тёмная); на --accent тёмной — 3.7 */
  background: var(--mine);
  color: var(--mine-ink);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.25;
  cursor: pointer;
}
.updbar__act { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
body.has-update .updbar:active { filter: brightness(.92); }
body[data-kb="1"] .updbar { display: none !important; }
/* «Смотреть как» сотрудника песочницы: все / Яша / Настя / … — одной строкой под полосой. */
.viewas[hidden] { display: none; }
.viewas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 13.5px;
}
.viewas__sel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--copy);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
/* Кнопки проверки владельца в песочнице: тестовое сообщение клиента и тестовый звонок. */
.sandboxbar { display: none; }
body.is-sandbox-owner .sandboxbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 6px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
body.is-sandbox-owner[data-kb="1"] .sandboxbar { display: none; }
.sandboxbar__btn {
  flex: 0 1 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--copy);
  border-radius: 999px;
  background: none;
  color: var(--copy-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.sandboxbar__btn:disabled { opacity: .5; }
/* Исход звонка из чата — маленький выбор рядом с кнопкой, не confirm(). */
.sandboxbar__pick { display: inline-flex; gap: 6px; }
.sandboxbar__pick[hidden] { display: none; }
.sandboxbar__btn--sub {
  min-height: 30px;
  padding: 0 10px;
  background: var(--copy);
  color: var(--copy-ink);
  font-size: 13px;
}
@media (min-width: 620px) {
  body.is-sandbox-owner .sandboxbar {
    padding-left: max(16px, calc(50% - 320px));
    padding-right: max(16px, calc(50% - 320px));
  }
}
.seg {
  display: flex;
  margin: 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.seg__btn {
  flex: 1 1 0;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 0;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.seg__btn + .seg__btn { border-left: 1px solid var(--line); }
.seg__btn.is-on { background: var(--accent); color: var(--accent-ink); }
.seg__btn--copy.is-on { background: var(--copy); color: var(--copy-ink); }
.seg__btn:disabled { opacity: .45; cursor: default; }
.dbcard .btn { width: 100%; margin-top: 10px; }
.dbprog { height: 4px; margin-top: 10px; border-radius: 2px; background: var(--line); overflow: hidden; }
.dbprog > i { display: block; height: 100%; width: 5%; background: var(--copy); transition: width .4s ease; }

/* Ссылка в пузыре (28.09): видна как ссылка и не рвёт ширину пузыря длинным адресом */
.msg__link { color: inherit; text-decoration: underline; overflow-wrap: anywhere; word-break: break-word; }

/* ============================================================
   Нижняя навигация «Чаты · CRM · Календарь» (оператор 29.09: «перегруз интерфейса получился…
   срм вида не вижу») — «📊 Клиенты» и «📅» были кнопками в шапке списка чатов (тесно на 390 px,
   и раздел не был на виду по умолчанию); теперь три постоянных раздела снизу на телефоне и
   сверху на компьютере. Элементы — те же id (toChats — новый, toLeads/toCal — старые из шапки,
   те же обработчики bindLeads()/bindCal()), просто в общем <nav>; подсветка активной — чисто
   CSS по body[data-screen], без своего JS. Внутри чата (thread) не показываем — там поле ввода. */
.tabbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  padding-bottom: var(--safe-b);
}
.tabbar__btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.tabbar__btn[hidden] { display: none; }
.tabbar__ico { font-size: 20px; line-height: 1; }
body[data-kb="1"] .tabbar { display: none; }   /* открытая клавиатура (поиск и т.п.) — не мешаем */
body[data-screen="chats"] .tabbar,
body[data-screen="leads"] .tabbar,
body[data-screen="lead"] .tabbar,
body[data-screen="cal"] .tabbar,
body[data-screen="calev"] .tabbar,
body[data-screen="calconn"] .tabbar { display: flex; }
body[data-screen="chats"] .tabbar [data-tab="chats"],
body[data-screen="leads"] .tabbar [data-tab="leads"],
body[data-screen="lead"] .tabbar [data-tab="leads"],
body[data-screen="cal"] .tabbar [data-tab="cal"],
body[data-screen="calev"] .tabbar [data-tab="cal"],
body[data-screen="calconn"] .tabbar [data-tab="cal"] { color: var(--accent); }
/* Экраны под нижней навигацией — прокрутка не должна прятать последнюю строку за полосой. */
body[data-screen="chats"] #chatsScroll,
body[data-screen="leads"] #leadsScroll,
body[data-screen="lead"] #leadScroll,
body[data-screen="cal"] #calScroll,
body[data-screen="calev"] #calEvScroll,
body[data-screen="calconn"] .scroll--calconn {
  padding-bottom: calc(18px + var(--safe-b) + 52px);
}
/* Компьютер (≥900 px, как остальные широкие разметки приложения) — та же навигация тремя
   вкладками, но сверху: .tabbar — не в разметке экрана (общий на все, .screen — position:
   fixed; inset:0, каждый сам на весь вьюпорт), поэтому кладём полосу простым fixed сверху
   и подвигаем сами экраны вниз на её высоту (45px = 44px кнопки + 1px рамки), а не снизу,
   как на телефоне — снизу отступ экранам возвращаем. */
@media (min-width: 900px) {
  .tabbar {
    top: 0;
    bottom: auto;
    padding-bottom: 0;
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }
  .tabbar__btn { flex-direction: row; gap: 6px; min-height: 44px; }
  body[data-screen="chats"] .screen--chats,
  body[data-screen="leads"] .screen--leads,
  body[data-screen="lead"] .screen--lead,
  body[data-screen="cal"] .screen--cal,
  body[data-screen="calev"] .screen--calev,
  body[data-screen="calconn"] .screen--calconn {
    top: 45px;
  }
  body[data-screen="chats"] #chatsScroll,
  body[data-screen="leads"] #leadsScroll,
  body[data-screen="lead"] #leadScroll,
  body[data-screen="cal"] #calScroll,
  body[data-screen="calev"] #calEvScroll,
  body[data-screen="calconn"] .scroll--calconn {
    padding-bottom: 18px;
  }
}

/* поиск, «Активные / Все / В архиве», фильтры с числами */
.leadbar {
  flex: 0 0 auto;
  padding: 8px 12px 0;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
}
.leadbar__search {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;               /* меньше 16px — iOS зумит страницу при фокусе */
  -webkit-appearance: none;
  appearance: none;
}
.leadbar__search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.seg--leads { margin: 0; }
.seg--leads .seg__btn { min-height: 38px; padding: 6px 6px; font-size: 14px; white-space: nowrap; }
.seg__n { margin-left: 5px; font-size: 12px; font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; }
.chips.chips--leads { padding: 8px 0; background: transparent; border-bottom: 0; }
.chip--lead .chip__txt { max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leadpick { padding: 0 0 10px; }
.leadpick .picker__list { margin-top: 0; max-height: min(420px, 55dvh); }

.leadnote {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--st-we_owe_answer-bg);
  color: var(--st-we_owe_answer);
  font-size: 13.5px;
}
.leadnote--bad { background: var(--st-refused-bg); color: var(--st-refused); }
/* «Ещё N нераспределённых лидов с этим номером. Назначить все?» (07.10) */
.leadoffer__txt { margin: 0 0 8px; }
.leadoffer__btns { display: flex; flex-wrap: wrap; gap: 8px; }
/* «Также передать ещё N?» (08.10): кого именно — списком с галочками (web/app.js: offerMates, leadOfferEl) */
.matessheet__list { list-style: none; margin: 0 0 12px; padding: 0; max-height: 50vh; overflow-y: auto; }
.matessheet__item + .matessheet__item { border-top: 1px solid var(--line); }
.matessheet__row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; }
.matessheet__row input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.matessheet__txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* источник и статус лида — пилюли цветами категорий */
.lsrc {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.lsrc--chat   { color: var(--st-ping_due);        background: var(--st-ping_due-bg); }
.lsrc--call   { color: var(--st-called);          background: var(--st-called-bg); }
.lsrc--tg     { color: var(--st-agreed);          background: var(--st-agreed-bg); }
.lsrc--manual { color: var(--st-client_silent);   background: var(--st-client_silent-bg); }

/* телефон: карточки */
.lcards { display: flex; flex-direction: column; gap: 8px; }
.lcard {
  padding: 11px 13px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.lcard:active { background: var(--bg-sunk); }
.lcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lcard.is-off { border-style: dashed; box-shadow: none; }      /* не в активных бота */
.lcard__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lcard__lid { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.lcard__at {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lcard__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 6px; }
.lcard__name { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.lcard__phone { font-size: 14px; font-variant-numeric: tabular-nums; }
.lcard__obj {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcard__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.lcard__tags .tag, .lcard__tags .cst { margin-top: 0; }
.lcard__last {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.lcard__phone.is-dim, .lcell.is-dim, .lhead__phone.is-dim { color: var(--text-dim); }

/* компьютер: таблица */
.ltable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 13.5px;
}
.ltable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ltable thead th:first-child { border-top-left-radius: var(--radius); }
.ltable thead th:last-child { border-top-right-radius: var(--radius); }
.ltable td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow: hidden;
}
.ltable tbody tr:last-child td { border-bottom: 0; }
.lrow { cursor: pointer; }
.lrow:hover td, .lrow:focus td { background: var(--bg-sunk); }
.lrow:focus { outline: none; }
.lrow:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.lrow.is-off .c-lid .lcell { color: var(--text-dim); }
.lcell, .lsub, .llast__at { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsub { margin-top: 3px; color: var(--text-dim); font-size: 12px; }
/* Ширины — под 1280 px: дата «28.09 16:40», «📞 Звонок Avito», «Показ состоялся» целиком. */
.c-lid { width: 58px; font-weight: 700; font-variant-numeric: tabular-nums; }
.c-at { width: 106px; font-variant-numeric: tabular-nums; }
.c-src { width: 138px; }
.c-name { width: 11%; }
.c-phone { width: 144px; font-variant-numeric: tabular-nums; }
.c-obj { width: 15%; }
.c-agent { width: 120px; }
.c-status { width: 150px; }
.llast__at { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.llast__what {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* карточка клиента */
.lead { display: flex; flex-direction: column; gap: 12px; }
.lhead, .lsec {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lhead { padding: 14px; }
.lhead__name { font-size: 20px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.lhead__line { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 14.5px; }
.lhead__phone {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.lhead__obj { color: var(--text-dim); overflow-wrap: anywhere; }
.lhead__flags, .lhead__state { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lhead__state .tag, .lhead__flags .tag { margin-top: 0; }
.lhead__times { margin-top: 8px; color: var(--text-dim); font-size: 12.5px; }
.lhead__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
button.object__btn { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lassign { margin-top: 12px; }
.lassign__list { margin-top: 8px; max-height: 280px; }
.lassign__comment { margin-top: 8px; margin-bottom: 0; }

.lgrid__main, .lgrid__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lgrid { display: flex; flex-direction: column; gap: 12px; }
.lsec { padding: 12px 14px 14px; }
.lsec__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 10px; font-size: 15px; }
.lsec__note { color: var(--text-dim); font-size: 12px; font-weight: 500; }
.lfields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px 14px;
  margin: 0;
}
.lf { min-width: 0; }
.lf--wide { grid-column: 1 / -1; }
.lf__k { color: var(--text-dim); font-size: 11.5px; line-height: 1.3; }
.lf__v { margin: 1px 0 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; }
.lf__link {
  display: block;
  overflow: hidden;
  color: var(--accent);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.llist { display: flex; flex-direction: column; gap: 10px; }
.llist__item + .llist__item { padding-top: 10px; border-top: 1px solid var(--line); }
.llist__main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.llist__main .tag { margin-top: 0; }
.llist__name { overflow-wrap: anywhere; }
.llist__sub { margin-top: 3px; color: var(--text-dim); font-size: 13px; overflow-wrap: anywhere; }
.llist__sub.is-ok, .llist__main.is-ok { color: var(--st-phone_given); }
.llist__item--chat .object__btn { margin-top: 8px; }
.llist__item.is-clickable { cursor: pointer; }        /* история показов (план CALGRID §3, 29.09) */
.llist__item.is-clickable:active { opacity: .7; }

/* «История» — вертикальная лента */
.ltime { position: relative; margin: 0; padding: 0 0 0 20px; list-style: none; }
.ltime::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 1px;
  background: var(--line);
}
.ltime__item { position: relative; padding: 0 0 13px; }
.ltime__item:last-child { padding-bottom: 0; }
.ltime__dot {
  position: absolute;
  left: -20px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 0 3px var(--bg-elev);
}
.ltime__item--create .ltime__dot  { background: var(--accent); }
.ltime__item--assign .ltime__dot  { background: var(--st-scheduled); }
.ltime__item--show .ltime__dot    { background: var(--st-agreed); }
.ltime__item--deal .ltime__dot    { background: var(--ok); }
.ltime__item--refuse .ltime__dot,
.ltime__item--warn .ltime__dot    { background: var(--bad); }
.ltime__item--status .ltime__dot  { background: var(--st-we_owe_answer); }
.ltime__item--contact .ltime__dot { background: var(--st-called); }
.ltime__item--archive .ltime__dot { background: var(--st-client_silent); }
.ltime__item--note .ltime__dot    { background: var(--own); }      /* комментарий (28.09) */
.ltime__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ltime__at { color: var(--text-dim); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ltime__src {
  padding: 0 6px;
  border-radius: 6px;
  background: var(--bg-sunk);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
}
.ltime__src--both { color: var(--accent); }
.ltime__what { margin-top: 2px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.ltime__item.is-minor .ltime__what { color: var(--text-dim); font-size: 12.5px; }
.ltime__item.is-minor .ltime__dot { left: -18px; top: 4px; width: 8px; height: 8px; }

/* компьютер (≥ 900 px): шире колонка, поиск и вкладки в одну строку, карточка в две колонки */
@media (min-width: 900px) {
  .screen--leads .topbar__row, .screen--lead .topbar__row { max-width: 1240px; }
  .leadbar { padding-left: max(16px, calc(50% - 620px)); padding-right: max(16px, calc(50% - 620px)); }
  .leadbar__search { flex: 1 1 auto; max-width: 440px; }
  .seg--leads { flex: 0 0 auto; }
  .seg--leads .seg__btn { padding: 6px 16px; }
  .leadpick .picker__list { max-width: 440px; }
  .scroll--leads, .scroll--lead {
    padding-left: max(16px, calc(50% - 620px));
    padding-right: max(16px, calc(50% - 620px));
  }
  .lgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
    .lassign__list { max-width: 440px; }
}

/* ============================================================
   28.09 — «📊 Клиенты»: «Период ▾», «В чате ▾», статусы; кнопки связи с клиентом (оператор)
   ============================================================ */
/* «Связались» — вместо «Квалифицирован» и «Готов смотреть» бота (service/leads.py: SHOWN_STATUS):
   цвет «созвонились» — клиент уже на связи. */
/* Пять фильтров в строку 390 px не входят — переносом, а не прокруткой вбок: «Период» и «В чате»
   видны сразу. */
.chips.chips--leads { flex-wrap: wrap; overflow-x: visible; }
/* «В чате» — стадия общения с сотрудником, цветом фишки категории (tag--<категория>) */
.c-chat { width: 112px; }
/* Колонке «Последнее событие» место: «Клиент» и «Объект» чуть уже, раздел на больших экранах шире. */
.c-name { width: 10%; }
.c-obj { width: 13%; }
@media (min-width: 900px) {
  .screen--leads .topbar__row { max-width: 1400px; }
  .leadbar, .scroll--leads { padding-left: max(16px, calc(50% - 700px)); padding-right: max(16px, calc(50% - 700px)); }
}
.c-chat .tag, .lhead__state .tag, .lcard__tags .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis;
                                                      white-space: nowrap; vertical-align: middle; }
.c-chat .tag { margin-top: 0; }

/* Кнопки связи (оператор 28.09: «если есть номер — все эти кнопки должны гореть активными»):
   Telegram · Позвонить · WhatsApp одной строкой на 390 px, касание 44 px; нет номера (и ника) —
   серая, не нажимается, но видна. Шапка чата — под номером клиента, карточка «Клиенты» — под
   статусами. */
.contactbar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.contactbar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--accent);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.contactbar__btn:visited { color: var(--accent); }
.contactbar__btn:active { background: var(--bg-sunk); }
.contactbar__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.contactbar__btn svg { flex: 0 0 auto; }
.contactbar__txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contactbar__btn.is-off { color: var(--text-dim); opacity: .5; cursor: default; pointer-events: none; }
.lhead .contactbar { margin-top: 12px; }
/* пишут ответ (клавиатура) — панель объекта компактная: без кнопок связи, как без прочих кнопок */
body[data-kb="1"] .contactbar { display: none; }

/* ---------- полоса значков панели объекта (оператор 29.09) ----------
   «Перегруз интерфейса получился» — Telegram/Позвонить/WhatsApp, ЦИАН, собственник, «Клиенты
   по квартире» и заметки были четырьмя отдельными строками; теперь один ряд компактных
   кнопок-значков (те же .contactbar__btn — стиль общий), прокрутка вбок, если не влезает,
   без сжатия колонок (в отличие от .contactbar — там сетка на равные доли).
   08.10 (владелец, уточнение: «без самого белого ползунка прокрутки») — ряд листается вбок как раньше,
   но без полосы прокрутки; листается только сам ряд, страницу не тянет (overscroll-behavior-x). */
.iconbar {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin-top: 8px;
  padding-bottom: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.iconbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* 29.09 (оператор: «надо красиво как-то сделать… оно нелепо как-то выглядит»): кнопки одинаковые —
   одна ширина и высота, линейная иконка сверху цветом акцента, короткая подпись снизу, спокойная
   рамка темы; «ЦИАН», «4 клиента», «Заметки» — тоже с иконкой (не текст/эмодзи). */
.iconbar .contactbar__btn {
  /* Не уже 84px, длинная подпись раздвигает плитку: на 76px «Собственнику» и «Перезвонить»
     резались в «Собствен…»/«Перезвон…» (29.09) */
  flex: 0 0 auto;
  min-width: 84px;
  max-width: 120px;
  min-height: 54px;
  gap: 4px;
  padding: 6px 8px 5px;
  position: relative;
  background: var(--bg);
  border-color: var(--line);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}
.iconbar .contactbar__btn:visited { color: var(--text); }
.iconbar .contactbar__btn svg { width: 20px; height: 20px; color: var(--accent); }
.iconbar .contactbar__txt { max-width: 104px; color: var(--text); }   /* плитка растёт по подписи до 120px */
/* «из CRM» (аудит 09.10 №5): номер клиента есть только у лида в CRM — маленькая пометка в углу плитки «Клиенту» */
.contactbar__btn .contactbar__hint {
  position: absolute;
  top: 3px;
  right: 4px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--bg-sunk);
  color: var(--text-dim);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 14px;
}
/* Кружок с числом заметок на значке «📝» — угол плитки, вместо пустой точки (paintNotesBar,
   оператор 30.09). */
.contactbar__btn .notebadge {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font-size: 10px;
  border-width: 1px;
}
/* «Клиенту» — три состояния (оператор 29.09): настоящий номер клиента (переписка/лид) — синяя,
   только подменный (временный) номер Avito, до появления настоящего, — жёлтая (is-temp); номера
   нет вовсе — кнопки вообще нет (iconBarEl не рисует). */
.iconbar .contactbar__btn--client,
.iconbar .contactbar__btn--client:visited { border-color: var(--accent); color: var(--accent); }
.iconbar .contactbar__btn--client svg { color: var(--accent); }
.iconbar .contactbar__btn.is-temp,
.iconbar .contactbar__btn.is-temp:visited { border-color: var(--warn); color: var(--warn); }
.iconbar .contactbar__btn.is-temp svg { color: var(--warn); }
.iconbar .contactbar__btn.is-temp .contactbar__txt { color: var(--warn); }   /* номер через Avito — запасной (30.09) */
/* «ЦИАН» красноватая — оригинал снят собственником (сверка агентства, оператор 30.09); отклонение
   модерацией и восстановление под новым объявлением остаются/снова синими (--accent, по умолчанию). */
.iconbar .contactbar__btn--cian.is-stale,
.iconbar .contactbar__btn--cian.is-stale:visited { border-color: var(--bad); color: var(--bad); }
.iconbar .contactbar__btn--cian.is-stale svg { color: var(--bad); }
.iconbar .contactbar__btn--cian.is-stale .contactbar__txt { color: var(--bad); }
/* Контакты собственника (владелец 08.10; web/app.js: relistTiles): номер оригинала — прежняя жёлтая
   «Собственнику» (.is-temp), без своих стилей; номера нет — плитки нет. v116 (владелец: «Новое объявление — это
   так же, как и ЦИАН, только оранжевым цветом»): квартиру выставили заново — обычные плитки ряда, только
   ТЁМНО-ОРАНЖЕВЫЕ (.contactbar__btn--relist): «ЦИАН»/«Авито» — ссылка, «Агенту»/«Собств.» — трубка; подписей вне
   кнопок нет. Контраст: #c2410c на белом — 5.2; #fb923c на #14161a — 8.0. */
:root { --relist: #c2410c; --relist-bg: #fff7ed; }
:root[data-theme="dark"] { --relist: #fb923c; --relist-bg: #2a1a0e; }
.contactbar__btn--relist,
.contactbar__btn--relist:visited,
.iconbar .contactbar__btn--relist,
.iconbar .contactbar__btn--relist:visited { border-color: var(--relist); color: var(--relist); }
.contactbar__btn--relist svg,
.iconbar .contactbar__btn--relist svg { color: var(--relist); }
.contactbar__btn--relist .contactbar__txt,
.iconbar .contactbar__btn--relist .contactbar__txt { color: var(--relist); }
/* «Прямые номера» (владелец 09.10, web/app.js: directTile): номер, записанный сотрудником в заметках, — СИНЯЯ
   трубка «Клиенту прямой» / «Собств. прямой» / «Агенту прямой» сразу за «Клиенту» / «Собственнику». */
.iconbar .contactbar__btn--direct,
.iconbar .contactbar__btn--direct:visited { border-color: var(--accent); color: var(--accent); }
.iconbar .contactbar__btn--direct svg,
.iconbar .contactbar__btn--direct .contactbar__txt { color: var(--accent); }
/* Поле «Прямые номера» в окне заметок (web/app.js: directBlockEl) — компактно, от 320 px без прокрутки вбок. */
.direct {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elev);
  min-width: 0;
}
.direct__title { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.direct__row { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; min-width: 0; }
.direct__lbl { flex: 0 0 auto; width: 104px; font-size: 13px; color: var(--text-dim); }
.direct__seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.direct__opt {
  min-height: 32px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
}
.direct__opt.is-on { background: var(--accent); color: var(--accent-ink); }
.direct__in {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;            /* iOS не увеличивает страницу при фокусе */
}
.direct__clr, .direct__chip {
  flex: 0 0 auto;
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
}
.direct__ask { margin: 2px 0 6px; padding: 6px 8px; border-radius: 8px; background: var(--bg-sunk); }
.direct__askq { display: block; margin: 0 0 4px; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.direct__askopts { display: flex; flex-wrap: wrap; gap: 6px; }
.direct__chip { color: var(--accent); border-color: var(--accent); }
.direct__chip--no { color: var(--text-dim); border-color: var(--line); }
.direct__save {
  display: block;
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 360px) { .direct__lbl { width: 92px; } .direct__opt { padding: 0 5px; } }
/* «💰 Комиссия сверху» (владелец 08.10): компактная строка над кнопками шапки чата, карточки CRM и показа;
   тап — пояснение под ней. Строка списка чатов — короткий чип «💰 сверху». */
.feenote { margin-top: 8px; }
.feenote__line {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--relist);
  border-radius: 10px;
  background: var(--relist-bg);
  color: var(--relist);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.feenote__detail { padding: 4px 10px 0; color: var(--text-dim); font-size: 12px; line-height: 1.35; }
body[data-kb="1"] .object .feenote { display: none; }   /* пишут ответ — как полоса значков */
.chat__fee {
  flex: 0 0 auto;
  padding: 0 6px;
  border: 1px solid var(--relist);
  border-radius: 999px;
  color: var(--relist);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}
/* пишут ответ клиенту — полоса уходит, как остальные кнопки объекта (правило — у .object__terms) */
@media (min-width: 620px) {
  .iconbar { padding-left: max(0px, calc(50% - 320px - 16px)); padding-right: max(0px, calc(50% - 320px - 16px)); }
}
/* «↗ Отправить карточку» (оператор 28.09) — четвёртая кнопка строки связи; пока фото квартиры
   готовятся к отправке — полоска прогресса по низу кнопки (web/app.js: paintShareBtn). */
.contactbar__btn--share.is-loading {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: var(--p, 0%) 3px;
}
/* Запасной путь «Отправить карточку» (файлами поделиться нельзя, оператор 29.09: «именно прям
   фотки, а не ссылками») — текст карточки и миниатюры фото со «Скачать все» (shareFallback). */
.sharesheet {
  position: fixed;
  inset: 0;
  z-index: 58;                      /* под тостом «Скопировано» (60) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 16px calc(16px + var(--safe-b));
  background: rgba(0, 0, 0, .45);
}
.sharesheet__box {
  width: 100%;
  max-width: 520px;
  max-height: 85dvh;
  overflow: auto;
  padding: 12px 14px 14px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.sharesheet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sharesheet__title { font-size: 16px; font-weight: 700; }
.sharesheet__close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}
.sharesheet__text {
  margin: 6px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
}
.sharesheet__copy { width: 100%; }
/* Меню «Отправить» (оператор 30.09): В Telegram альбомом / Поделиться… */
.sharesheet__menu { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.sharesheet__menuitem { width: 100%; }
.sharesheet__menuitem:disabled { opacity: .5; cursor: default; }
.sharesheet__menuitem.is-done { opacity: .6; }                      /* эта часть уже ушла */
.sharesheet__hint { margin: 2px 0 8px; color: var(--text-dim); font-size: 13px; line-height: 1.35; }
.sharesheet__note { margin: 12px 0 6px; color: var(--text-dim); font-size: 13px; }
.sharesheet__download { width: 100%; }
.sharesheet__photos { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sharesheet__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-sunk);
}
.sharesheet__tmp { position: fixed; top: 0; left: -9999px; opacity: 0; }
@media (min-width: 900px) { .sharesheet { align-items: center; } }
/* компьютер: строка связи в карточке клиента — не на всю ширину карточки */
@media (min-width: 900px) { .lhead .contactbar { max-width: 560px; } }

/* ---------- «Договорились» держится (оператор 28.09) ----------
   «Клиент, с которым договорились, не должен пропадать… помечалось, что вы с этим клиентом уже
   договорились, но он написал новое сообщение и ждёт ответа». Плашка над перепиской — цветом
   категории «договорились» (та же пара, что у тега: #155e75 на #e1eaed — 5.95, #5eead4 на
   #273f41 — 7.6); вторая строка — цветом «ждёт ответа» или «отказа» на том же фоне плашки:
   светлая — #9a4a05 — 5.1, #b91c1c — 5.3; тёмная — #fbbf24 — 6.7, #fca5a5 — 5.9. Время — без
   прозрачности (с .85 в светлой было 4.35). В списке вторая метка — обычный тег своей категории. */
.agreedbar {
  flex: 0 0 auto;
  padding: 7px 16px 8px;
  background: var(--st-agreed-bg);
  color: var(--st-agreed);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.3;
}
.agreedbar__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.agreedbar__title { font-weight: 700; }
.agreedbar__when { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.agreedbar__also { margin-top: 3px; font-weight: 650; }
.agreedbar__also.st--we_owe_answer { color: var(--st-we_owe_answer); }
.agreedbar__also.st--refused       { color: var(--st-refused); }
/* «✓ Ответ не нужен» (09.10 вечер): кнопка в строке «ждёт ответа»; снятая — приглушённая строка и «Вернуть» */
.agreedbar__also--row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.agreedbar__also--done { font-weight: 600; }        /* цвет плашки «договорились» — контраст тот же */
.agreedbar__nowait,
.agreedbar__undo {
  margin-left: auto; padding: 3px 10px; min-height: 30px;
  font: inherit; font-size: 13px; font-weight: 700;
  color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 8px; cursor: pointer;
}
.agreedbar__undo { font-weight: 600; }
.tag--also { margin-left: 4px; }
/* «🤝 Договорились? — время не подтверждено» + «✅ Подтвердить» (08.10) */
.agreedbar--maybe { background: var(--bg-sunk); }
/* 11.10 (владелец: «кнопка прыгает и криво расположена»): кнопка уезжала на отдельную строку, а
   выравнивание по базовой линии сдвигало её вниз — теперь текст слева (переносится сам), кнопка справа
   по центру строки, всегда на одном месте. То же у строки «ждёт ответа» с «✓ Ответ не нужен». */
.agreedbar--maybe .agreedbar__head,
.agreedbar__also--row { flex-wrap: nowrap; align-items: center; gap: 8px; }
.agreedbar--maybe .agreedbar__title,
.agreedbar__also--row > span { flex: 1 1 auto; min-width: 0; }
.agreedbar__confirm,
.agreedbar__nowait,
.agreedbar__undo { flex: 0 0 auto; white-space: nowrap; }
.agreedbar__confirm {
  margin-left: auto; padding: 4px 10px; min-height: 30px;
  font: inherit; font-size: 13px; font-weight: 700;
  color: var(--st-agreed); background: var(--st-agreed-bg);
  border: 1px solid currentColor; border-radius: 8px; cursor: pointer;
}
/* CRM: вторая метка внутри тега «в чате: договорились? · ждёт ответа» */
.tag__also.st--we_owe_answer { color: var(--st-we_owe_answer); font-weight: 700; }
.tag__also.st--refused       { color: var(--st-refused);       font-weight: 700; }
body[data-kb="1"] .agreedbar { padding-top: 3px; padding-bottom: 3px; }
body[data-kb="1"] .agreedbar__when,
body[data-kb="1"] .agreedbar__also { display: none; }
@media (min-width: 620px) {
  .agreedbar { padding-left: max(16px, calc(50% - 320px)); padding-right: max(16px, calc(50% - 320px)); }
}

/* ---------- владелец написал в чате сотрудника (оператор 28.09) ----------
   «Сообщения, которые владелец отправляет в их чат, уже должны для них помечаться выделенным
   цветом». Пузырь — янтарный (цвет владельца, как «мой» у «Мои клиенты»), с обводкой: заметно
   среди синих «наших», но не кричит. Контраст: светлая — текст #78350f на #fef3c7 — 8.2, время
   (.85) — 5.6, обводка #b45309 к фону страницы — 4.7; тёмная — #fde68a на #3f3212 — 10.1, время —
   7.7, обводка #ca8a04 к фону — 6.2. ΔE2000 заливки к синему «нашему» — 60 / 51. Отказ отправки
   (красный) сильнее. У первого такого пузыря — пояснение «Написал владелец вместо вас». */
:root { --owner-msg: #fef3c7; --owner-msg-ink: #78350f; --owner-msg-line: #b45309; }
:root[data-theme="dark"] { --owner-msg: #3f3212; --owner-msg-ink: #fde68a; --owner-msg-line: #ca8a04; }
.msg--owner:not(.msg--failed) {
  background: var(--owner-msg);
  color: var(--owner-msg-ink);
  box-shadow: inset 0 0 0 1.5px var(--owner-msg-line), var(--shadow);
}
.msg--owner .msg__time { opacity: .85; }
.msg--owner .msg__who { opacity: 1; font-weight: 700; }
.msg__owner {
  display: block;
  margin-bottom: 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: normal;
}
.msg--image .msg__owner { padding: 3px 8px 2px; margin-bottom: 0; }

/* ---------- поиск по чатам (оператор 28.09) ----------
   «Вставить ссылку, написать адрес, написать цену, написать имя — находились клиенты». Значок —
   первым в полосе фишек (в шапке у владельца рядом с «📊 Клиенты» на 390 px обрезалось «Чаты
   бета»), раскрывает поле над фишками; пока в нём есть запрос, фишки и «👤» спрятаны — ищем по
   всем чатам. Поле — как поиск «Клиентов» (16 px: iOS не зумит при фокусе). Метка
   «архив» у найденных в архиве — цвет «завершён» (#1f2937 на #e2e3e5 — 11.4; #f3f4f6 на
   #3e4146 — 9.3); значок открытого поиска — акцент на --bg-sunk (4.0 / 5.1, для значка ≥ 3). */
.chatsearch {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
}
.chatsearch__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.chatsearch__input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.chatsearch__input::-webkit-search-cancel-button { display: none; }   /* свой ✕ рядом */
.chatsearch__close {
  flex: 0 0 auto;
  width: var(--tap);
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}
.chatsearch__close:active { background: var(--bg-sunk); }
.chipsbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
}
.chipsbar .chips { flex: 1 1 auto; min-width: 0; padding-left: 6px; border-bottom: 0; }
.chipsbar__search {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 34px;
  margin-left: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.chipsbar__search:active,
.chipsbar__search[aria-expanded="true"] { color: var(--accent); background: var(--bg-sunk); border-color: var(--accent); }
body.is-searching .chipsbar,
body.is-searching #whoList { display: none; }
.tag--arch { margin-left: 4px; color: var(--st-done); background: var(--st-done-bg); }

/* ---------- «Клиенты по квартире» (оператор 29.09) ----------
   «Чтобы можно было перейти на одну квартиру и смотреть всех клиентов по этой квартире» —
   плашка вместо фишек (та же полоса, что у поиска), полоса слева акцентом — не спутать с
   обычным списком. Кнопка-источник — «🏠 N» в полосе значков шапки чата (.contactbar__btn--house,
   renderObjectPanel: objectIconBar, видна только при N > 1) и в карточке клиента (leadChatsSec,
   тот же leadBtn/.object__btn, что «💬 Открыть чат»). */
.itemfilterbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
.itemfilterbar__txt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; }
.itemfilterbar__close {
  flex: 0 0 auto;
  width: var(--tap);
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}
.itemfilterbar__close:active { background: var(--bg-sunk); }
body.is-itemfilter .chipsbar,
body.is-itemfilter #whoList { display: none; }
@media (min-width: 620px) {
  .chatsearch { padding-left: max(12px, calc(50% - 320px)); padding-right: max(12px, calc(50% - 320px)); }
}

/* ---------- «Брак» с причиной (оператор 29.09) ----------
   Выбор причины — в том же списке «Категория ▾»: сверху «← Брак — причина:» (вернуться к
   категориям), дальше причины цветом «брака» (#d92020 на карточке — 5.0, #f25555 — 4.9). */
.picker__item--back { color: var(--text-dim); font-weight: 650; border-bottom: 1px solid var(--line);
                      border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.picker__item--why { color: var(--st-junk); font-weight: 600; }
.picker__item--why[aria-selected="true"] { color: var(--st-junk); font-weight: 750; }


/* ============================================================
   «📅 Календарь» — показы и напоминания (оператор 27–28.09)
   Любому ключу. Цвета — переменные темы и категорий (контраст проверен, D3): своих цветов
   раздел не заводит — светлая и тёмная темы работают сами. На телефоне — списком, не сеткой.
   ============================================================ */
/* «В телефон» (подписка ICS, web/app.js: showCalConnect) — в шапке «Календаря». «📊 Клиенты»
   и «📅» ушли из шапки списка чатов в нижнюю навигацию (.tabbar, оператор 29.09: «перегруз
   интерфейса получился») — прежние .leadsbtn/.calbtn и их компенсация тесноты на 390 px не нужны. */
.calconnbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.calconnbtn:active { background: var(--bg-sunk); }
@media (max-width: 359px) {
  .calconnbtn__txt { display: none; }
}

/* «📅 Показ» / «📞 Перезвонить» — .chatactions__cal (29.09, .chatactions__* — выше);
   пишут ответ клиенту (не комментарий назначения) — обе кнопки уходят из ряда, «Назначить»
   остаётся: как раньше «Назначить лид» не пряталась, когда пряталась «Назначить показ». */
body[data-kb="1"] .chatactions__cal { display: none; }

/* Окно «Назначить показ» / «Перенести показ» — у верхнего края: клавиатура его не закрывает. */
.calsheet {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--vv-top, 0px) + var(--safe-t) + 12px) 12px 12px;
}
.calsheet[hidden] { display: none; }
.calsheet__back { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.calsheet__box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - var(--kb, 0px) - 24px);
  overflow-y: auto;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: var(--bg-elev);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.calsheet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calsheet__title { font-size: 18px; }
.calsheet__close {
  width: var(--tap);
  height: var(--tap);
  margin: -8px -8px -8px 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.calsheet__who { margin: 2px 0 12px; color: var(--text-dim); font-size: 14px; overflow-wrap: anywhere; }
.calsheet__field { display: block; margin-bottom: 10px; }
.calsheet__label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }
.calsheet__when {
  /* Дата/время у Safari iOS и Chrome — flex-поле (UA: inline-flex; align-items: center);
     display: block снимал центровку, и «7 октября, 3:00» прилипало к верху (оператор 07.10). */
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 17px;               /* меньше 16px — iOS зумит страницу при фокусе */
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
}
.calsheet__when::-webkit-date-and-time-value { margin: 0; text-align: left; }   /* iOS: слева, как у других полей */
.calsheet__when:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.calsheet__note { margin-bottom: 10px; }
.calsheet__hint { margin: 0 0 12px; color: var(--text-dim); font-size: 13px; line-height: 1.35; }

/* Список по дням */
.scroll--cal, .scroll--calev, .scroll--calconn { padding-top: 12px; }
.chips.chips--cal { flex: 0 0 auto; }
.calhint {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* подключён — одной строкой без рамки: место — показам */
.calhint.is-ok { padding: 0 2px; border: 0; background: transparent; }
.calhint__main { font-size: 14.5px; font-weight: 650; }
.calhint.is-ok .calhint__main { color: var(--st-phone_given); font-size: 13px; font-weight: 600; }
.calhint__sub { color: var(--text-dim); font-size: 12.5px; }
.caldays { display: flex; flex-direction: column; gap: 14px; }
.calday__title {
  margin: 0 0 6px 2px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 650;
  text-transform: none;
}
.calday__list { display: flex; flex-direction: column; gap: 8px; }
.calday__none { margin: 0 0 0 2px; color: var(--text-dim); font-size: 14px; }
.calrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px 11px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.calrow:active { background: var(--bg-sunk); }
.calrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calrow.is-past { opacity: .6; box-shadow: none; }
.calrow__time {
  flex: 0 0 auto;
  min-width: 52px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.calrow__body { flex: 1 1 auto; min-width: 0; }
.calrow__addr { font-size: 15.5px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.calrow__who { margin-top: 2px; color: var(--text-dim); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.calrow__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.calrow__tags .tag { margin-top: 0; }
.calrow__go { flex: 0 0 auto; align-self: center; color: var(--text-dim); font-size: 22px; line-height: 1; }
.calmore { width: 100%; margin-top: 14px; }

/* Показ */
.calev { display: flex; flex-direction: column; gap: 12px; }
.calev__when { color: var(--st-scheduled); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calev__head.is-cancelled .calev__when { color: var(--text-dim); text-decoration: line-through; }
.calev__addr { margin-top: 2px; }
.calev__client { margin-top: 10px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
/* Плитки показа (задача 4, оператор 29.09: старые кнопки — звонилки, «подтвердил», «Чат»,
   «В календарь телефона», «Перенести», «Перезвонить» — в тот же дизайн, что iconBarEl шапки
   чата, действия те же); .iconbar — общие стили ряда/плитки. */
.calev__tiles { margin-top: 10px; }
.calev__actions .iconbar { margin-top: 0; }
.calev__remind {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-sunk);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.35;
}
/* график напоминаний: «накануне 19:00 — напомнить клиенту ✓», «10:00 — …», «15:00 — набрать…» */
.calplan__head { font-weight: 650; margin-bottom: 4px; }
.calplan { display: flex; flex-direction: column; gap: 3px; }
.calplan__item { display: flex; align-items: baseline; gap: 8px; }
.calplan__at { flex: 0 0 auto; min-width: 6.6em; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.calplan__what { flex: 1 1 auto; min-width: 0; }
.calplan__ok { flex: 0 0 auto; color: var(--st-phone_given); font-weight: 650; }
.calplan__bad { flex: 0 0 auto; color: var(--danger); font-weight: 650; white-space: nowrap; }
.calplan__item.is-sent .calplan__what { color: var(--text-dim); }
.calplan__item.is-skip .calplan__what { color: var(--text-dim); text-decoration: line-through; }
.calplan__how { margin-top: 6px; color: var(--text-dim); font-size: 12.5px; }
/* «Прислать тестовое напоминание» (оператор 30.09) — показы владельца без сотрудника. */
.calev__remind .calbtn--test { margin-top: 8px; display: block; width: 100%; }
/* «Клиент/Собственник подтвердил» — плитка подсвечена зелёным, как раньше строка .calev__ok. */
.iconbar .contactbar__btn.is-on,
.iconbar .contactbar__btn.is-on:visited {
  border-color: transparent;
  background: var(--st-phone_given-bg);
  color: var(--st-phone_given);
}
.iconbar .contactbar__btn.is-on svg { color: var(--st-phone_given); }
.calev__text { margin: 0 0 10px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.calev__text.is-dim { color: var(--text-dim); font-size: 13px; }
.calev__owner.is-wait { border-color: var(--st-we_owe_answer); }
.calev__owner.is-wait .lsec__title { color: var(--st-we_owe_answer); }
.calev__note-edit { margin-bottom: 0; }
/* «Отменить показ» — плитка красным, как раньше .calev__cancel. */
.iconbar .contactbar__btn.calev__cancel,
.iconbar .contactbar__btn.calev__cancel:visited { color: var(--danger); }
.iconbar .contactbar__btn.calev__cancel svg { color: var(--danger); }

/* Календарь в телефоне (оператор 29.09: экран «Подключить календарь» переделан — фраза сверху,
   три способа кнопками вместо простыни шагов, сырая ссылка спрятана; docs/CODE_MAP.md). */
.calconn { display: flex; flex-direction: column; gap: 12px; }
.calconn .calhint { margin: 4px 0 0; cursor: default; }
.calconn__seg { margin: 0; }        /* переиспользуется формой CalDAV внутри способа 2 */
.calconn__lead { margin: 0; font-size: 15.5px; font-weight: 650; line-height: 1.35; }
.calconn__link {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  font: 12.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

/* Три способа — крупные кнопки (значок + заголовок), под каждой одна строка «что будет»,
   у iPhone/Android ещё подсказка про будильник. CalDAV — та же кнопка, раскрывает форму. */
.calconn__methods { display: flex; flex-direction: column; gap: 12px; }
.calmethod { display: flex; flex-direction: column; gap: 4px; }
.calmethod__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.calmethod__btn:active { background: var(--bg-sunk); }
.calmethod__btn[aria-expanded="true"] { border-color: var(--accent); }
.calmethod__ico { flex: 0 0 auto; color: var(--accent); }
.calmethod__title { flex: 1 1 auto; min-width: 0; }
.calmethod__arrow { flex: 0 0 auto; color: var(--text-dim); transition: transform .15s; }
.calmethod__btn[aria-expanded="true"] .calmethod__arrow { transform: rotate(180deg); }
.calmethod__sub { margin: 0; padding: 0 4px; color: var(--text-dim); font-size: 13px; line-height: 1.35; }
.calmethod__hint { margin: 2px 0 0; padding: 0 4px; color: var(--text-dim); font-size: 12.5px; line-height: 1.35; }
.calmethod__body {
  margin-top: 2px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

/* «Способы подключения» / «Свернуть способы» — показываются, когда уже подключено. */
.calconn__moretoggle {
  align-self: flex-start;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* «Для других программ ▾» — раскрывает сырую личную ссылку (оператор 29.09: «а че это за
   ссылка» — с порога она не нужна, три способа выше её не требуют). */
.calconn__disclose {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.calconn__disclose .calmethod__ico { color: var(--text-dim); }
.calconn__disclose span { flex: 1 1 auto; }
.calconn__disclose-arrow { flex: 0 0 auto; color: var(--text-dim); transition: transform .15s; }
.calconn__disclose[aria-expanded="true"] .calconn__disclose-arrow { transform: rotate(180deg); }

@media (min-width: 900px) {
  .scroll--cal, .scroll--calev, .scroll--calconn {
    padding-left: max(16px, calc(50% - 360px));
    padding-right: max(16px, calc(50% - 360px));
  }
  .chips--cal { padding-left: max(12px, calc(50% - 360px)); padding-right: max(12px, calc(50% - 360px)); }
}

/* ============================================================
   Настоящий календарь: Месяц/День/Неделя (оператор 29.09: «нажимаешь на отдельные дни…
   бронировать показы… прям как в Google Календаре»). web/app.js: renderCalScreen, renderCalMonth,
   renderCalGrid, calPickOpen. «Неделя» — только широкий экран (calview__wide, CAL_WIDE).
   ============================================================ */
.seg--calview { margin: 8px 0 0; }
.seg--calview .seg__btn { min-height: 38px; padding: 6px 6px; font-size: 13.5px; white-space: nowrap; }
.calview__wide { display: none; }
@media (min-width: 900px) { .calview__wide { display: block; } }

.calnav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 2px 2px;
}
.calnav[hidden] { display: none; }
.calnav__title {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.calnav__prev, .calnav__next { flex: 0 0 auto; }
.calnav__add { flex: 0 0 auto; min-height: 38px; padding: 0 12px; white-space: nowrap; }

/* ---------- Месяц ---------- */
.calmonth[hidden] { display: none; }
.calmonth__wd {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 4px 0 6px;
}
.calmonth__wd span {
  text-align: center;
  font-size: 11px;
  font-weight: 650;
  color: var(--text-dim);
  text-transform: uppercase;
}
.calmonth__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(50px, auto);
  gap: 4px;
}
.calday-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 50px;
  padding: 5px 2px 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.calday-cell:active { background: var(--bg-sunk); }
.calday-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calday-cell.is-out { opacity: .4; }
.calday-cell.is-today { border-color: var(--accent); }
.calday-cell.is-selected { background: var(--accent); color: var(--accent-ink); }
.calday-cell__n { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.calday-cell__badges { display: flex; align-items: center; gap: 2px; min-height: 16px; }
.calday-cell__badge {
  min-width: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--st-scheduled-bg);
  color: var(--st-scheduled);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.calday-cell__badge--call { background: var(--st-we_owe_answer-bg); color: var(--st-we_owe_answer); }
.calday-cell.is-selected .calday-cell__badge { background: rgba(255, 255, 255, .28); color: inherit; }

/* ---------- День / Неделя: шкала часов 8:00–23:00 ---------- */
.calgrid-wrap[hidden] { display: none; }
.calgrid { display: flex; }
.calgrid__scale { flex: 0 0 auto; width: 40px; position: relative; }
.calgrid__hour {
  position: absolute;
  left: 0;
  right: 6px;
  transform: translateY(-6px);
  font-size: 10.5px;
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.calgrid__cols { flex: 1 1 auto; display: flex; min-width: 0; }
.calgrid__colhead {
  display: flex;
  padding-left: 40px;
  gap: 0;
}
.calgrid__colhead-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 2px 0 6px;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-dim);
  cursor: pointer;
}
.calgrid__colhead-cell.is-today { color: var(--accent); }
.calgrid__col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-left: 1px solid var(--line);
  /* линии часов — шаг 52px = CAL_HOUR_PX (web/app.js); поменяли один — поменять и другой */
  background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 52px);
}
.calgrid__col.is-today { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.calgrid__now {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--danger);
  z-index: 2;
}
.calblk {
  position: absolute;
  box-sizing: border-box;
  min-height: 18px;
  padding: 2px 5px;
  overflow: hidden;
  border: 2px solid var(--bg);       /* зазор между колонками при наложении — не margin (ширина в %) */
  border-radius: 7px;
  background: var(--st-scheduled-bg);
  color: var(--st-scheduled);
  font: inherit;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.calblk--call { background: var(--st-we_owe_answer-bg); color: var(--st-we_owe_answer); }
.calblk__time { font-weight: 700; white-space: nowrap; }
.calblk__addr { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calblk__outcome { opacity: .8; font-weight: 500; white-space: nowrap; }        /* «Как прошёл показ?», §3 */
.calblk.is-past { opacity: .55; }
.calblk.is-cancelled { text-decoration: line-through; opacity: .5; }
.calblk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* «Назначить показ» поиском клиента из календаря (оператор 29.09: «выбор клиента поиском по своим
   чатам и клиентам»); окно — те же .calsheet, что «Назначить/Перенести показ». */
.calpick__input {
  width: 100%;
  min-height: 44px;
  margin: 2px 0 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;         /* меньше 16px — iOS зумит страницу при фокусе */
  -webkit-appearance: none;
  appearance: none;
}
.calpick__input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.calpick__list { display: flex; flex-direction: column; gap: 6px; max-height: min(360px, 50dvh); overflow-y: auto; }
.calpick__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.calpick__item:active { background: var(--bg-sunk); }
.calpick__name { font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.calpick__sub { color: var(--text-dim); font-size: 12.5px; overflow-wrap: anywhere; }
.calpick__empty { padding: 8px 2px; color: var(--text-dim); font-size: 13.5px; }

@media (min-width: 900px) {
  .calgrid__scale { width: 48px; }
  .calgrid__colhead { padding-left: 48px; }
}

/* «📞 Перезвонить…»: через 30 мин / 1 ч / 2 ч, завтра в 10:00, своё время (план CALGRID §2,
   29.09) — тот же .calsheet, список вариантов кнопками в столбик. */
.callopts { display: flex; flex-direction: column; gap: 8px; }
.callopt {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.callopt:active { background: var(--bg-sunk); }
.callcustom { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.callcustom[hidden] { display: none; }

/* ============================================================
   «📝 Заметки» по клиенту (оператор 29.09) — значок в полосе объекта, раздел в карточке и
   показе, окно. Отдельная строка «Заметки по клиенту» убрана (см. .iconbar ниже).
   ============================================================ */
.notes { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.notes__item { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.notes__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.notes__at { color: var(--text-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.notes__text { font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes__del {
  min-height: 28px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--danger);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.notes__none { color: var(--text-dim); font-size: 14px; }
/* в окне — лента прокручивается, поле и кнопка всегда видны */
.notesheet .notes { max-height: min(42dvh, 360px); overflow-y: auto; overscroll-behavior: contain; }
.notes-sec .notes { margin-bottom: 8px; }

/* ============================================================
   CRM v2 (оператор 29.09): «срм щас очень неудобно как-то выглядит, неюзабельно вообще»; «иконки
   надо как-то постильнее сделать»; «нет кнопок перевода по стадиям». Доска по стадиям: телефон —
   вкладки стадий со счётчиками и одна колонка на экран с листанием вбок; компьютер — колонки рядом,
   перетаскивание. Карточка клиента — компактная шапка, лента, «Подробнее». Иконки — линейные SVG.
   Цвета — переменные темы (категории чата), обе темы.
   ============================================================ */
.ico { flex: 0 0 auto; display: block; }
.tabbar__ico { display: inline-flex; height: 24px; align-items: center; }
.tabbar__ico .ico { width: 23px; height: 23px; }
.chatactions__btn .ico { display: inline-block; vertical-align: -3px; }

/* цвет стадии: --sc — текст/точка, --sc-bg — заливка пилюли */
.st-new       { --sc: var(--st-we_owe_answer);   --sc-bg: var(--st-we_owe_answer-bg); }
.st-work      { --sc: var(--st-never_contacted); --sc-bg: var(--st-never_contacted-bg); }
.st-show_set  { --sc: var(--st-scheduled);       --sc-bg: var(--st-scheduled-bg); }
.st-show_done { --sc: var(--st-agreed);          --sc-bg: var(--st-agreed-bg); }
.st-deal      { --sc: var(--st-phone_given);     --sc-bg: var(--st-phone_given-bg); }
.st-picking   { --sc: var(--st-called);          --sc-bg: var(--st-called-bg); }
.st-inactual  { --sc: var(--st-client_silent);    --sc-bg: var(--st-client_silent-bg); }   /* 06.10 */
.st-refused   { --sc: var(--st-refused);         --sc-bg: var(--st-refused-bg); }
.st-junk      { --sc: var(--st-junk);            --sc-bg: var(--st-refused-bg); }
.st-owner     { --sc: var(--st-owner_msg);       --sc-bg: var(--st-refused-bg); }   /* 07.10 */
/* «Это собственник. Удалить объявление?» (07.10, web/app.js: ownerSheetOpen) */
.ownersheet__body { display: flex; flex-direction: column; gap: 10px; }
.ownersheet__obj { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ownersheet__addr { font-weight: 600; }
.ownersheet__id { color: var(--accent, inherit); }
.ownersheet__body .lst__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cbtn--owner { color: var(--st-owner_msg); }
.cst {
  display: inline-block;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--sc-bg, var(--bg-sunk));
  color: var(--sc, var(--text));
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* шапка раздела: «Доска | Список» значками */
.seg--icons { flex: 0 0 auto; margin: 0; border-radius: 10px; }
.seg--icons .seg__btn {
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 34px;
  padding: 0;
  color: var(--text-dim);
}
.seg--icons .seg__btn.is-on { color: var(--accent-ink); }

/* поиск + фильтры одной строкой */
.screen--leads .leadbar { padding: 8px 12px 0; }
.crmfilters {
  display: flex;
  gap: 6px;
  padding: 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.crmfilters::-webkit-scrollbar { display: none; }
/* «Сегодня новых: Соня 15 · Яша 12 · не назначено 3» (владелец 08.10) — одна строка над фильтрами;
   имя — кнопка-фильтр «новые сегодня у него», выбранное — зелёным, как кнопка «Ведёт». */
.crmtoday {
  display: flex;
  align-items: baseline;
  gap: 2px 4px;
  margin: 0;
  padding: 6px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  font-size: 13.5px;
  color: var(--text-dim);
}
.crmtoday::-webkit-scrollbar { display: none; }
.crmtoday__t { flex: 0 0 auto; }
.crmtoday__sep { flex: 0 0 auto; }
.crmtoday__n { font-weight: 700; color: var(--text); }
.crmtoday__who {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.crmtoday__who.is-on { background: rgba(18, 161, 80, .14); color: var(--ok); }
.crmtoday__who.is-on .crmtoday__n { color: inherit; }
.crmchip { gap: 6px; font-weight: 600; color: var(--text); }
.crmchip .ico { color: var(--text-dim); }
.crmchip.is-on .ico { color: inherit; }
.crmchip--warn .ico { color: var(--warn); }
.crmchip__n {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.crmchip.is-on .crmchip__n { background: rgba(255, 255, 255, .22); color: inherit; }
.crmsearch { display: flex; align-items: center; gap: 8px; }
.crmsearch .leadbar__search { flex: 1 1 auto; min-width: 0; }
.crmmorebtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.crmmorebtn .ico { color: var(--text-dim); }
.crmmorebtn.is-on { border-color: var(--accent); color: var(--accent); }
.crmmorebtn.is-on .ico { color: var(--accent); }
.crmmorebtn__n {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}
.crmmore { display: flex; flex-direction: column; gap: 6px; padding: 0 0 8px; }
.crmmore[hidden] { display: none; }
.crmmore .seg { margin: 0; }
.crmmore .chips--leads { padding: 0; }

/* телефон: вкладки стадий */
.crmtabs {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.crmtabs::-webkit-scrollbar { display: none; }
.crmtab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.crmtab::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sc);
}
.crmtab__n { color: var(--text-dim); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.crmtab.is-empty { color: var(--text-dim); }
.crmtab.is-empty::before { opacity: .45; }
.crmtab.is-on { background: var(--sc-bg); border-color: var(--sc); color: var(--sc); }
.crmtab.is-on .crmtab__n { color: var(--sc); }

/* доска: одна колонка на экран, листание вбок (scroll-snap) */
.screen--leads.is-board .scroll--leads {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
body[data-screen="leads"] .screen--leads.is-board #leadsScroll { padding-bottom: 0; }
.screen--leads.is-board .leadnote { margin: 8px 12px 0; }
.crmboard {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.crmboard::-webkit-scrollbar { display: none; }
.crmboard[hidden] { display: none; }
.crmcol {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.crmcol__head { display: none; }
.crmcol__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px calc(18px + var(--safe-b) + 52px);
}
.crmcol__empty { margin: 24px 0; color: var(--text-dim); font-size: 14px; text-align: center; }

/* карточка на доске: имя, короткий объект, шаг (метки «нет шага» нет с 08.10), кружок ответственного */
.ccard {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.ccard:active { background: var(--bg-sunk); }
.ccard:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ccard.is-off { border-style: dashed; box-shadow: none; }
.ccard.is-drag { opacity: .4; }
.ccard__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ccard__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ccard__flag {
  flex: 0 0 auto;
  padding: 0 6px;
  border: 1px solid var(--warn);
  border-radius: 6px;
  color: var(--warn);
  font-size: 11.5px;
  font-weight: 650;
}
.ccard__stale { flex: 0 0 auto; display: inline-flex; color: var(--text-dim); }
.ccard__obj {
  color: var(--text-dim);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* откуда клиент (💬 чат / 📞 звонок) и категория чата — оператор 07.10 */
.ccard__src { flex: 0 0 auto; margin-right: -3px; font-size: 14px; line-height: 1; }
.ccard__chat { display: flex; min-width: 0; }
.ccard__chat .tag { margin-top: 1px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard__foot { display: flex; align-items: center; gap: 6px; min-height: 32px; }
.ccard__acts { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* кружок ответственного */
.cwho {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--st-never_contacted-bg);
  color: var(--st-never_contacted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}
.cwho.is-none { background: transparent; border: 1.5px dashed var(--line); }
.cwho.is-mine { background: var(--own); color: var(--own-ink); }
.cwho--big { width: 30px; height: 30px; font-size: 14px; }

/* строка шага */
.cstep {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 13.5px;
}
.cstep__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cstep.is-ok .ico { color: var(--accent); }
.cstep.is-warn { color: var(--warn); font-weight: 650; }
.cstep.is-late { color: var(--bad); font-weight: 650; }
.cstep.is-dim { color: var(--text-dim); }
.cstep.is-link { cursor: pointer; }
.cstep__go { margin-left: auto; color: var(--text-dim); font-size: 18px; }

/* кнопки CRM */
.cbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.cbtn:active { background: var(--bg-sunk); }
.cbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cbtn .ico { color: var(--accent); }
.cbtn--main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cbtn--main .ico { color: inherit; }
.cbtn.is-on { border-color: var(--accent); color: var(--accent); }
.cbtn--icon { width: 34px; min-height: 32px; padding: 0; border-radius: 9px; }
.cbtn--move { min-height: 32px; padding: 0 4px 0 8px; gap: 2px; border-color: transparent; background: none;
              color: var(--text-dim); font-size: 13px; }
.cbtn--ghost { border-color: transparent; background: none; color: var(--accent); }
.chead__pass { margin-left: auto; padding-right: 6px; }
.chead__pass .ico { color: inherit; }
.cbtn--move .ico { color: var(--text-dim); }
.cbtn--small { min-height: 30px; padding: 0 10px; font-size: 13px; }
/* Кружок-счётчик заметок (оператор 30.09: «горело число, кружок обведённый и внутри циферка 1, 2
   или 3») — общая разметка (noteBadgeEl, web/app.js) на кнопке «Заметки» везде: тут — в строке
   рядом с подписью, на плитке .contactbar__btn (шапка чата, показ) — угол сверху справа. */
.notebadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1.5px solid var(--accent-ink);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.notebadge[hidden] { display: none; }
.cacts { display: flex; flex-wrap: wrap; gap: 6px; }

/* карточка клиента */
.chead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.chead__top { display: flex; align-items: flex-start; gap: 10px; }
.chead__name { flex: 1 1 auto; min-width: 0; font-size: 20px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cstage {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 60%;
  min-height: 34px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--sc);
  border-radius: 999px;
  background: var(--sc-bg);
  color: var(--sc);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.cstage__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chead__meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.chead__agent { font-weight: 600; white-space: nowrap; }
.chead__agent.is-dim { color: var(--text-dim); font-weight: 500; }
.chead__src { margin-left: auto; color: var(--text-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chead .iconbar { margin-top: 0; padding-left: 0; padding-right: 0; }
.chead__obj { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.chead__obj .ico { color: var(--text-dim); }
.chead__objtxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chead__objlink { margin-left: auto; color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.chead__step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg);
}
.chead__step .cstep { font-size: 14.5px; flex-basis: 100%; }
.cacts--main .cbtn { flex: 1 1 0; }
.cdup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px dashed var(--warn);
  border-radius: 12px;
  color: var(--text);
  font-size: 13.5px;
}
.cdup > .ico { color: var(--warn); }
.cdup__txt { flex: 1 1 160px; }
.lassign-slot .lassign { margin-top: 0; }
.cmore {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cmore__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px;
  color: var(--text-dim);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.cmore__sum::-webkit-details-marker { display: none; }
.cmore[open] .cmore__sum .ico { transform: rotate(180deg); }
.cmore__body { display: flex; flex-direction: column; gap: 10px; padding: 0 10px 10px; }
.cmore__body .lsec { box-shadow: none; }
.linkbtn {
  margin-top: 8px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ltime__item--stage .ltime__dot { background: var(--accent); }
.ltime__item--outcome .ltime__dot { background: var(--st-agreed); }
.ltime__item--call .ltime__dot { background: var(--st-called); }
.llist__item--chat .cacts { margin-top: 8px; }
.contactbar__btn .ico { color: inherit; }
.object__notes-ico { display: inline-flex; color: var(--text-dim); }

/* окно «Стадия ▾» */
.stagelist { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.stagelist__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.stagelist__btn.is-on { border-color: var(--sc); background: var(--sc-bg); color: var(--sc); }
.stagelist__btn .ico { margin-left: auto; color: var(--text-dim); }
.stagelist__btn.is-on .ico { color: var(--sc); }
.stagelist__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--sc); }
.stagelist__txt { flex: 1 1 auto; }
.stagelist__reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 4px 6px 32px; }
.stagelist__ask { color: var(--text-dim); font-size: 13px; }
.stagelist__reason { color: var(--text); }

/* список (второй вид) */
.lcard .cstep { margin-top: 6px; }
.c-chat { width: 150px; }
.c-src { width: 118px; }
.c-phone { width: 134px; }
.c-status { width: 132px; }
.c-chat .cstep { font-size: 13px; }

/* компьютер: колонки рядом, перетаскивание */
@media (min-width: 900px) {
  .screen--leads .leadbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .crmsearch { flex: 0 1 480px; }
  .crmfilters { flex: 1 1 auto; }
  .crmmore { flex: 1 1 100%; }
  .crmtabs { display: none !important; }
  .screen--leads.is-board .scroll--leads {
    padding: 12px max(16px, calc(50% - 700px));
  }
  .crmboard {
    gap: 10px;
    scroll-snap-type: none;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .crmboard::-webkit-scrollbar { display: block; height: 8px; }
  .crmboard::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
  .crmcol {
    flex: 0 0 236px;
    width: 236px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-sunk);
    transition: box-shadow .12s ease;
  }
  .crmcol__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 6px;
  }
  .crmcol__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sc); }
  .crmcol__title { flex: 1 1 auto; font-size: 14px; font-weight: 700; }
  .crmcol__n { color: var(--text-dim); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .crmcol__body { padding: 4px 8px 10px; }
  .crmcol__empty { margin: 10px 0; font-size: 13px; }
  .crmboard.is-dragging .crmcol { box-shadow: inset 0 0 0 1px var(--line); }
  .crmcol.is-over { box-shadow: inset 0 0 0 2px var(--sc) !important; background: var(--sc-bg); }
  .ccard { cursor: grab; }
  .ccard:active { cursor: grabbing; }
  .ccard__name { font-size: 14.5px; }
  .ccard__obj, .cstep { font-size: 13px; }
  .scroll--lead .lead { max-width: 760px; margin: 0 auto; }
}

/* ============================================================
   «Объявления» (владельцы, оператор 01.10): снять насовсем / на время, вернуть из списка.
   Как карточка клиента и календарь: .lsec-секции, object__btn, подтверждение — .sharesheet.
   web/app.js: showListings, renderListings.
   ============================================================ */
.scroll--listings { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.lst__look { margin: 8px 2px 0; line-height: 1.35; overflow-wrap: anywhere; }
.lst__look.is-bad { color: var(--bad); }
.lst__acts { margin-top: 10px; }
.lst__acts.is-off .object__btn { opacity: .45; }
.lst__label { margin: 10px 0 6px; color: var(--text-dim); font-size: 12.5px; font-weight: 600; }
.lst__label:first-child { margin-top: 2px; }
.lst__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lst__row .object__btn { min-height: 40px; min-width: 56px; }
.lst__custom { display: inline-flex; align-items: center; gap: 4px; }
.lst__hours {
  width: 76px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;                 /* меньше 16px — iOS увеличивает страницу при вводе */
  font-variant-numeric: tabular-nums;
}
.lst__hours:focus, .lst__search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.lst__search { width: 100%; min-height: 40px; }
.lst__items { list-style: none; margin: 10px 0 0; padding: 0; }
.lst__item { padding: 10px 0; border-top: 1px solid var(--line); }
.lst__item:first-child { border-top: 0; padding-top: 2px; }
.lst__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lst__name { min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.lst__name a { color: inherit; text-decoration: none; }
.lst__state { flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
.lst__state--ok   { background: rgba(18, 161, 80, .16); color: var(--ok); }
.lst__state--wait { background: rgba(210, 129, 0, .16); color: var(--warn); }
.lst__state--bad  { background: rgba(209, 41, 61, .14); color: var(--bad); }
.lst__meta { margin-top: 3px; color: var(--text-dim); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.lst__err { margin-top: 3px; color: var(--bad); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.lst__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lst__btns:empty { display: none; }
.lst__empty { padding: 18px 8px 6px; }
.lst__original { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0 4px; font-size: 14px; line-height: 1.4; }
.lst__original[hidden] { display: none; }
.lst__original input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; }
@media (min-width: 900px) {
  .scroll--listings {
    padding-left: max(16px, calc(50% - 360px));
    padding-right: max(16px, calc(50% - 360px));
  }
}

/* Строка хода работы (владелец 07.10: «нажимаю „Обновить“ — ничего не видно») — web/app.js:
   progress/progressDone/progressFail. Поверх шапки, под вырезом экрана; нажатия не перехватывает. */
.progbar[hidden] { display: none; }
.progbar {
  position: fixed;
  z-index: 60;
  top: calc(var(--safe-t) + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: min(360px, calc(100vw - 32px));
  padding: 7px 12px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}
.progbar__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «Нет связи · Повторить» (08.10): плашка с кнопкой нажимается и не уходит сама. */
.progbar.has-retry { pointer-events: auto; }
.progbar__retry {
  align-self: flex-start;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-sunk);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.progbar__track { position: relative; height: 3px; overflow: hidden; border-radius: 2px; background: var(--bg-sunk); }
.progbar__fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 2px;
                 background: var(--accent); transition: width .25s ease; }
/* бегущая полоса — сдвигом (transform, на видеокарте), а не left: left пересчитывал раскладку каждый кадр */
.progbar.is-indet .progbar__fill { width: 35%; animation: progbar-run 1.1s ease-in-out 60; }
.progbar.is-done { color: var(--ok); }
.progbar.is-done .progbar__fill { background: var(--ok); }
.progbar.is-error { color: var(--bad); }
.progbar.is-error .progbar__fill { background: var(--bad); }
@keyframes progbar-run { from { transform: translateX(-100%); } to { transform: translateX(286%); } }
@media (prefers-reduced-motion: reduce) {
  .progbar.is-indet .progbar__fill { width: 100%; animation: none; opacity: .5; }
}

/* Карточка CRM (владелец 07.10): «Показ»/«Перезвонить» — слева (жёлтый треугольник «нет шага» выведен из
   оборота 08.10; .cstep--mark остался без пользователей); справа — «Передать ▾» и «Перенести ▾». */
.cstep--mark { flex: 0 0 auto; justify-content: center; width: 34px; min-height: 32px; gap: 0; }
.ccard__steps { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.ccard__pass { color: var(--accent); }
.ccard__pass .ico { color: inherit; }
.lcard__foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.lcard__foot .cstep { margin-top: 0; }
.lcard__foot .ccard__pass { margin-left: auto; }
.c-agent .ccard__pass { min-height: 26px; margin-top: 2px; padding-left: 0; }
/* Кто ведёт (владелец 08.10): вместо «Передать ▾» — имя сотрудника зелёной «таблеткой» того же размера;
   тап открывает тот же выбор «Передать». Не назначен — прежняя «Передать». */
.cbtn.is-held { border-color: transparent; border-radius: 999px; background: rgba(18, 161, 80, .14);
                color: var(--ok); font-weight: 650; }
.cbtn.is-held .ico { color: inherit; }
.cbtn.is-held .cbtn__txt { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-agent .ccard__pass.is-held { padding-left: 8px; }
.passsheet__body .lassign { margin-top: 4px; }
.lassign__scope { margin-bottom: 4px; }

/* Строки за краем экрана не раскладываются и не рисуются, пока до них не докрутили (владелец 07.10:
   долго открывается список чатов, «Объявления» тормозят при прокрутке). Браузер без
   content-visibility просто рисует всё, как раньше. */
.chats > li, .lst__item { content-visibility: auto; contain-intrinsic-size: auto 84px; }
/* Строка с открытым меню закрепа поднята над затемнением (.chat.is-menu, z-index) — ей сдерживание
   (оно замыкает z-index внутри строки) не нужно. */
.chats > li:has(.is-menu) { content-visibility: visible; }
/* Строка уходит из списка (передали другому, 09.10, app.js: chatRowsLeave): сжимается до нуля, margin -8px
   съедает gap списка (.chats) — строки ниже поднимаются плавно, экран не прыгает. Высота задаётся из JS. */
.chats > li.is-leaving { overflow: hidden; pointer-events: none; opacity: 0; content-visibility: visible;
  transition: height .18s ease, margin-top .18s ease, opacity .12s ease; }
@media (prefers-reduced-motion: reduce) { .chats > li.is-leaving { transition: none; } }

/* Номер клиента «#1170» (владелец 07.10: номер лида почти везде — по нему ищут) — маленький серый
   рядом с именем: доска, карточка клиента, строка и шапка чата. Кнопка — тап копирует (lidTagEl). */
.lidnum { flex: 0 0 auto; font-size: 12px; font-weight: 500; color: var(--text-dim); white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: 0; }
button.lidnum { background: none; border: 0; padding: 2px 4px; margin: -2px 0; border-radius: 6px; cursor: copy;
  font-family: inherit; line-height: inherit; vertical-align: baseline; }
button.lidnum:active { background: var(--surface-2, rgba(127, 127, 127, .15)); }
.topbar__title .lidnum { font-size: 13px; }

/* ---------- «История действий» (владелец 07.10) и свой период «С … По …» ---------- */
.hist__filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.hist__who { display: flex; flex-direction: column; gap: 4px; }
.hist__lbl { font-size: 13px; font-weight: 650; color: var(--text); }
.hist__per { flex-wrap: wrap; }
.hist__types { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px 10px;
  margin: 0; background: var(--bg-elev); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hist__types legend { padding: 0 4px; }
.hist__chk { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14px; cursor: pointer; }
.hist__chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.hist__all { flex-basis: 100%; font-weight: 600; }
.hist__note { margin: 4px 2px 8px; }
.hist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hist__row { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px;
  overflow-wrap: anywhere; }
.hist__row.is-link { cursor: pointer; }
.hist__row.is-link:active, .hist__row.is-link:focus { background: var(--bg-sunk); outline: none; }
.hist__row--auto { border-style: dashed; }
.hist__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12px; color: var(--text-dim); }
.hist__at { font-variant-numeric: tabular-nums; }
.hist__actor { font-weight: 650; color: var(--text); }
.hist__tag { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--bg-sunk); }
.hist__row--auto .hist__tag { color: var(--ping); }
.hist__text { margin-top: 3px; font-size: 15px; line-height: 1.35; }
.hist__meta { margin-top: 2px; }
.hist__more { width: 100%; margin-top: 10px; }
.prange { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.prange__f { display: flex; flex-direction: column; gap: 3px; flex: 1 1 150px; min-width: 0; }
.prange__l { font-size: 12px; color: var(--text-dim); }
.prange__i { width: 100%; min-width: 0; }
.prange__note { flex-basis: 100%; color: var(--bad); }
.picker__item--custom { flex-wrap: wrap; }

/* ---------- 08.10 (владелец): дата лида, «ещё по другой квартире», «Яша?» ----------
   Дата лида — серым справа в строке объекта (строка чатов, карточка доски): высота строки не растёт,
   объект обрезается многоточием (iPhone 375 px). */
.objwhen { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.objwhen__obj { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leadwhen { flex: 0 0 auto; margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--text-dim);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
/* «удалена» (владелец 08.10, только визуал): оригинал на ЦИАН снят — маленькая серо-красная таблетка в строке
   объекта (чаты, «Клиенты», шапка карточки). 16 px по высоте — не выше строки; не сжимается и не переносится,
   режется адрес (objwhen__obj), а не она: на 320 px без горизонтальной прокрутки. */
.cgone { flex: 0 0 auto; display: inline-block; padding: 0 6px; border: 1px solid rgba(209, 41, 61, .35);
  border-radius: 999px; background: rgba(209, 41, 61, .08); color: var(--danger); font-size: 10.5px;
  font-weight: 600; line-height: 14px; white-space: nowrap; letter-spacing: .01em; }
/* 09.10: в списке чатов «удалена» — обычная метка в ряду меток, в конце (после «назначено»). */
.tag.tag--gone { background: rgba(209, 41, 61, .14); color: var(--danger); }
/* «📞 ещё квартира» вместо «дубль?»: не предупреждение, а подсказка — спокойным цветом. */
.ccard__flag { border-color: var(--line); color: var(--text-dim); }
.cdup { flex-direction: column; align-items: stretch; border-color: var(--line); }
.cdup__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cdup__link { flex: 1 1 160px; min-width: 0; padding: 2px 0; background: none; border: 0; color: inherit;
  font: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
/* Никто не ведёт, а квартира/клиент уже за сотрудником — «Яша?» пунктирной зелёной таблеткой. */
.cbtn.is-suggest, #showToggle.is-suggest { border: 1px dashed var(--ok); border-radius: 999px; color: var(--ok);
  background: rgba(18, 161, 80, .06); }
#showToggle.is-suggest .chatactions__assignstate { color: inherit; }
.cbtn.is-suggest .ico, #showToggle.is-suggest .ico, #showToggle.is-suggest .chatactions__arrow { color: inherit; }
.cbtn.is-suggest .cbtn__txt { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lassign__suggest { display: flex; width: 100%; justify-content: center; margin: 2px 0 4px; border-color: transparent;
  border-radius: 999px; background: rgba(18, 161, 80, .14); color: var(--ok); font-weight: 600; }

/* «Скорость загрузки» (владельцы, 08.10): web/app.js renderSpeed; строки — как у «Истории действий». */
.speed__h { margin: 16px 2px 6px; font-size: 13px; font-weight: 650; color: var(--text-dim); }
.speed__slow { color: var(--danger); font-weight: 650; }
.speed__ok { color: var(--ok); }
.speed__phases { margin-top: 3px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---------- «Объекты» в поиске чатов (владелец 08.10) ----------
   Фишка «Объекты» в строке поиска (нажата — только квартиры), блок под найденными чатами, карточка объекта
   (#/object/<номер>). Статус Avito — те же цвета, что метки экрана «Объявления» (.lst__state--*). */
.chatsearch__mode {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.chatsearch__mode.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.objfind { padding: 4px 0 16px; }
.objfind__title {
  margin: 0;
  padding: 10px 4px 4px;
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-top: 1px solid var(--line);
}
.objfind__note { margin: 0; padding: 10px 4px; color: var(--text-dim); font-size: 14px; }
.objfind__list, .objcard__chatlist { list-style: none; margin: 0; padding: 0; }
.objrow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.objrow:active { background: var(--bg-sunk); }
.objrow__img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-sunk);
}
.objrow__img--none { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.objrow__body { flex: 1 1 auto; min-width: 0; }
.objrow__addr { font-weight: 650; overflow-wrap: anywhere; }
.objrow__facts { margin-top: 2px; font-size: 13.5px; color: var(--text-dim); }
.objrow__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
.objrow__phone { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.objtag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.objtag--ok   { background: rgba(18, 161, 80, .16); color: var(--ok); }
.objtag--wait { background: rgba(210, 129, 0, .16); color: var(--warn); }
.objtag--bad  { background: rgba(209, 41, 61, .14); color: var(--bad); }
.scroll--object { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; padding-bottom: 24px; }
.objcard {
  padding: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.objcard__img {
  display: block;
  width: 100%;
  max-height: 240px;
  margin-bottom: 10px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-sunk);
}
.objcard__addr { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.objcard__facts { margin-top: 4px; font-size: 15px; }
.objcard__muted { margin-top: 4px; font-size: 13.5px; color: var(--text-dim); overflow-wrap: anywhere; }
.objcard__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.objcard__row .objcard__muted { margin-top: 0; }
.objcard__link { color: var(--accent); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.objcard__link:active { text-decoration: underline; }
.objcard__owners { margin-top: 12px; }
.objcard__lst { margin-top: 10px; }
.objchat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.objchat:active { background: var(--bg-sunk); }
.objchat__name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.objchat__no { color: var(--text-dim); font-size: 13px; }
.objchat__at { color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }

/* ---------- 08.10 viewport: iPhone 15 Pro Max «экран плывёт», CRM «меньше экрана» ----------
   Владелец 08.10. Окно приложения никогда не прокручивается вбок: всё, что шире экрана (длинная
   ссылка, широкая строка), раньше расширяло страницу — iOS давал её сдвигать пальцем («плывёт»)
   и мог ужать масштаб под ширину содержимого (CRM «меньше, чем должна»). Теперь лишнее срезается
   по краю экрана; листаемые вбок ряды (.crmboard, .chips, вкладки) прокручиваются внутри себя.
   Пара к JS (web/app.js: viewportFor/viewportGuard/viewportSettle, ResizeObserver доски CRM). */
html {
  -webkit-text-size-adjust: 100%;    /* iOS в альбомной ориентации иначе раздувает текст */
  touch-action: manipulation;        /* двойное касание не приближает страницу (щипок — можно) */
  overflow-x: hidden;                /* запасной вариант для браузеров без overflow: clip */
}
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;                  /* без отдельной области прокрутки — sticky и fixed не ломаются */
}
@supports not (height: 100dvh) {
  html, body { height: -webkit-fill-available; }
}
body { overflow-wrap: break-word; }  /* длинное слово/ссылка переносится, а не раздвигает экран */
.screen {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-x: clip;
}
.scroll { min-width: 0; max-width: 100%; }

/* ---------- 08.10 без прокрутки вбок (владелец: «во всех меню, где что-то листается вниз, оно и листается
   вбок, где не должно» — на всех устройствах) ----------
   Причина: у области с overflow-y: auto браузер считает и overflow-x равным auto — любой элемент шире
   (длинная ссылка/номер, отрицательные поля, ряд без переноса) давал всей области ездить вбок. Теперь у
   каждой вертикальной прокрутки вбок — hidden, прокрутка не передаётся окну (overscroll-behavior: contain),
   в списках без вложенных лент палец ведёт только вниз-вверх (touch-action: pan-y). Намеренно листаемые
   вбок ряды — .iconbar (плитки чата/показа/карточки), .chips (фильтры чатов, «Период» истории), .crmfilters,
   .crmtoday, .crmtabs, .crmboard (колонки CRM на телефоне) — листаются только внутри себя, не шире экрана и
   без полосы прокрутки. Таблица CRM на компьютере
   (≥ 900 px) по-прежнему может прокручиваться вбок. */
html, body { overscroll-behavior-x: none; }
.scroll,
.ios-hint__card,
.picker__list,
.matessheet__list,
.sharesheet__box,
.calsheet__box,
.calpick__list,
.notesheet .notes,
.crmcol__body,
.sys__log pre {
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.scroll--msgs,
.scroll--chats,
.ios-hint__card,
.picker__list,
.matessheet__list,
.calpick__list,
.notesheet .notes { touch-action: pan-y; touch-action: pan-y pinch-zoom; }   /* щипок — где браузер умеет */
@media (min-width: 900px) {
  .scroll--leads { overflow-x: auto; }
}
.chips,
.crmfilters,
.crmtoday,
.crmtabs,
.crmboard {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
}
/* ряды фишек — без белого ползунка прокрутки (доска CRM на компьютере свой тонкий ползунок оставляет) */
.chips,
.crmfilters,
.crmtoday,
.crmtabs { scrollbar-width: none; -ms-overflow-style: none; }
.chips::-webkit-scrollbar,
.crmfilters::-webkit-scrollbar,
.crmtoday::-webkit-scrollbar,
.crmtabs::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- 09.10 доска CRM снова листается вбок с любого места (владелец, v119: «Когда листаешь вбок — должно
   листаться вбок (доска по стадиям). Внутри карточек при этом листаться вбок ничего не должно.») ----------
   Причина (правка 08.10 выше): у колонки .crmcol__body стоял overscroll-behavior: contain — по обеим осям. Колонка —
   вертикальная прокрутка (overflow-y: auto, overflow-x: hidden), и горизонтальный жест, начатый на карточке или
   колонке, упирался в неё и не передавался доске: доска листалась только с узких щелей между колонками.
   Теперь: колонка держит в себе только вертикаль (overscroll-behavior-y: contain), вбок жест уходит доске
   (overscroll-behavior-x: auto); ни у доски, ни у колонки, ни у карточки нет touch-action: pan-y; внутри карточки
   ничего не листается вбок — она не шире колонки и срезает лишнее, а ряды кнопок (и .iconbar/.chips, если
   окажутся на карточке) — переносом, без своей прокрутки, чтобы не забирать жест у доски. */
.crmboard,
.crmcol,
.crmcol__body,
.ccard { touch-action: manipulation; }   /* = pan-x pan-y pinch-zoom: вбок — доске, вниз — колонке */
.crmcol__body {
  overscroll-behavior-x: auto;           /* вбок — доске */
  overscroll-behavior-y: contain;        /* вниз-вверх — только колонка, страница не тянется */
}
.ccard { min-width: 0; max-width: 100%; overflow-x: clip; }
.ccard__top,
.ccard__foot { min-width: 0; max-width: 100%; }
.crmboard .iconbar,
.crmboard .chips {
  flex-wrap: wrap;
  overflow: hidden;
  overflow: clip;
  overscroll-behavior: auto;
  touch-action: manipulation;
}

/* Ряд «Показ / Перезвонить / Передать» на 320–359 px не влезал и срезался справа — плотнее. */
.chatactions { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
@media (max-width: 359px) {
  .chatactions__btn { gap: 4px; padding: 0 5px; font-size: 13.5px; }
}

/* «Снять» — последняя плитка ряда чата, только владельцу (web/app.js: iconBarEl o.take); клиент отмечен
   «собственником» — рамка красная (.is-owner). */
.iconbar .contactbar__btn--take,
.iconbar .contactbar__btn--take:visited,
.iconbar .contactbar__btn--take svg,
.iconbar .contactbar__btn--take .contactbar__txt { color: var(--danger); }
.iconbar .contactbar__btn--take.is-owner { border-color: var(--danger); }

/* Поля ввода на сенсорных экранах — не меньше 16px: иначе iOS приближает страницу при фокусе и
   после клавиатуры не отдаляет. Прежде так было у «Смотреть как» (.viewas__sel, 14px). */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]),
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
  .calsheet__when { font-size: 17px !important; }
}

/* CRM: строка активных фильтров с «Сбросить» (владелец 08.10: «CRM показывает никого» — фильтры были, но
   не видны); список пуст из-за фильтров — заметнее (is-none). web/app.js: renderLeadsActive. */
.crmactive {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding: 6px 8px 6px 10px;
  border-radius: 10px;
  background: rgba(127, 127, 127, .10);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.3;
}
.crmactive[hidden] { display: none; }
.crmactive__txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.crmactive__reset { flex: 0 0 auto; }
.crmactive.is-none { background: var(--st-refused-bg); color: var(--st-refused); font-weight: 600; }

/* «Частые ответы сотрудников» (владелец 08.10): окно поверх CRM, web/app.js: rpRender/rpCard. */
.rpsheet__box { max-width: 640px; display: flex; flex-direction: column; gap: 6px; padding-bottom: 0; }
.rpsheet__days { margin: 2px 0 4px; }
.rpsheet__days .seg__btn { min-height: 36px; padding: 4px 10px; font-size: 14px; }
.rpsheet__sum { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.rpsheet__staff, .rpsheet__note { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.35; }
.rpsheet__state { margin: 10px 0; color: var(--text-dim); }
.rpsheet__state.is-err { color: var(--st-refused); }
.rpsheet__list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.rpsheet__foot {
  position: sticky;
  bottom: 0;
  margin: 6px -14px 0;
  padding: 10px 14px 14px;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
}
.rpsheet__copy { width: 100%; }
.rpsheet__copy:disabled { opacity: .5; cursor: default; }
.rpcard { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.rpcard.is-on { border-color: var(--accent); }
.rpcard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rpcard__pick { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-dim); cursor: pointer; min-height: 32px; }
.rpcard__pick input { width: 18px; height: 18px; margin: 0; }
.rpcard__intent { padding: 2px 8px; border-radius: 999px; background: var(--bg-sunk); font-size: 12.5px; font-weight: 600; }
.rpcard__n { margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.rpcard__phr { display: flex; gap: 6px; align-items: baseline; font-size: 14px; line-height: 1.4; padding: 2px 0; color: var(--text-dim); }
.rpcard__phr.is-main { color: var(--text); }
.rpcard__txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; -webkit-user-select: text; user-select: text; }
.rpcard__x { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); }
.rpcard__meta { margin-top: 4px; font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }

/* ---------- «Шаблоны» быстрых ответов v2 (владелец 08.10 вечер, web/app.js: tplOpen, tplSug*, tplPick*) ----------
   Кнопка — рядом со скрепкой; меню — лист СНИЗУ на всю ширину (ручка, свайп вниз, до 75% высоты), внутри
   листается только вниз: фишки категорий переносятся, длинные слова рвутся, сетки — minmax(0, 1fr).
   Над полем ввода — полоска подсказок (до 2 карточек + «⋯»). Цвета — токены темы (светлая/тёмная). */
.composer__tpl { margin-right: -6px; }

/* Владелец 09.10 (v119): «кнопки вот тут надо влево сместить» — на iPhone левая карточка срезалась слева
   («…ых🙂 Далее согласуем время»), правая «📅 Время показа» уходила за правый край. Причина: в WebKit
   содержимое <button> лежит во внутреннем блоке, который центрируется и берёт ширину текста одной строкой
   (flex 1 1 0 у самой кнопки этого не ограничивал) — длинный текст вылезал из карточки в обе стороны.
   Теперь: сетка ровно на ширину поля ввода (те же поля, что у .composer; вырезы экрана — поля .screen),
   две колонки minmax(0, 1fr), карточка и её текст — блоки шириной 100% колонки, текст — 2 строки. */
.tplsug {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 6px;
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 10px 0;
  background: var(--bg-elev); border-top: 1px solid var(--line); overflow: hidden; overflow: clip;
}
.tplsug[hidden] { display: none; }
.tplsug:not([hidden]) + .composer { border-top: 0; }
.tplsug__card {
  display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden;
  min-height: 44px; margin: 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.3; text-align: left;
  white-space: normal; cursor: pointer;
}
.tplsug__card:only-child { grid-column: 1 / -1; }   /* одна подсказка — на всю ширину */
.tplsug__card:active { background: var(--bg-sunk); }
.tplsug__card--pick { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.tplsug__txt {
  display: block; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  width: 100%; max-width: 100%; min-width: 0; overflow: hidden; white-space: normal; overflow-wrap: anywhere;
  word-break: break-word; text-align: left;
}
@media (min-width: 620px) {   /* как у .composer на крупных экранах — карточки над полем, а не по краям планшета */
  .tplsug { padding-left: max(10px, calc(50% - 324px)); padding-right: max(10px, calc(50% - 324px)); }
}
.tplsug__more {
  flex: 0 0 auto; width: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  color: var(--text-dim); font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}

.tplsheet { position: fixed; inset: 0; z-index: 56; display: flex; flex-direction: column; justify-content: flex-end; }
.tplsheet[hidden] { display: none; }
.tplsheet__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.tplsheet__box {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto var(--kb, 0px);
  max-height: 75vh;
  max-height: min(75dvh, calc(100dvh - var(--kb, 0px) - var(--vv-top, 0px) - var(--safe-t) - 12px));
  padding-bottom: var(--safe-b); overflow: hidden; border-radius: 18px 18px 0 0;
  background: var(--bg-elev); color: var(--text); box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
  transition: transform .2s ease-out; animation: tplsheet-up .22s ease-out;
}
@keyframes tplsheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tplsheet__box { animation: none; transition: none; } }
.tplsheet__grip { flex: 0 0 auto; padding: 6px 16px 2px; touch-action: none; }
.tplsheet__handle { display: block; width: 40px; height: 5px; margin: 0 auto 2px; border-radius: 3px; background: var(--line); }
.tplsheet__head { display: flex; align-items: center; gap: 8px; min-height: var(--tap); }
.tplsheet__title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tplsheet__back {
  flex: 0 0 auto; min-height: var(--tap); margin: -8px 0 -8px -6px; padding: 0 6px;
  border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
}
.tplsheet__back[hidden] { display: none; }
.tplsheet__scroll {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 14px;
}
.tplsheet__scroll > * { min-width: 0; }
.tplsheet__now { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tplsheet__now[hidden], .tplsheet__cats[hidden], .tplsheet__cats:empty { display: none; }
.tplsheet__now .tpl__title { white-space: normal; overflow-wrap: anywhere; }
.tplsheet__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl__cat { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.tpl__cat.is-dim:not(.is-on) { opacity: .55; }
.tplsheet__body { display: flex; flex-direction: column; gap: 8px; }
.tpl__label { font-size: 13px; font-weight: 600; color: var(--text-dim); overflow-wrap: anywhere; }
.tpl__quote { margin: 0; font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }
.tpl__pickbtn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: var(--tap);
  padding: 10px 12px; border: 1px solid var(--accent); border-radius: 12px; background: var(--bg); color: var(--accent);
  font: inherit; font-size: 15px; font-weight: 600; text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
.tpl__pickbtn:active { background: var(--bg-sunk); }
.tpl__pickwhy { font-size: 12px; font-weight: 400; color: var(--text-dim); }

/* Календарик: дни 7 × 2 недели, время — 4 в ряд; занятое и прошедшее — серое и не нажимается. */
.tplcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tplcal__dow { text-align: center; font-size: 12px; color: var(--text-dim); }
.tplcal__day, .tplcal__time {
  min-width: 0; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  color: var(--text); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.tplcal__day.is-today { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.tplcal__day.is-on, .tplcal__time.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tplcal__day:disabled, .tplcal__time:disabled { background: var(--bg-sunk); color: var(--text-dim); opacity: .45; cursor: default; }
.tplcal__times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tplcal__preview {
  padding: 10px 12px; border-radius: 12px; background: var(--bg-sunk); font-size: 15px; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.tplcal__preview.is-empty { color: var(--text-dim); font-size: 13.5px; }
.tplcal__acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tplcal__acts .btn { width: 100%; white-space: normal; }

.tpl__item { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.tpl__item.is-off { opacity: .6; }
.tpl__text {
  display: block; width: 100%; padding: 10px 12px 6px; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 15px; line-height: 1.35; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
  cursor: pointer;
}
.tpl__text:disabled { color: var(--text-dim); font-style: italic; cursor: default; }
.tpl__text:not(:disabled):active { background: var(--bg-sunk); }
.tpl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 6px 6px 12px; min-height: 36px; }
.tpl__title { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl__why { flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--warn); overflow-wrap: anywhere; }
.tpl__alt, .tpl__send {
  flex: 0 0 auto; min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-elev); color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.tpl__send { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.tpl__send:disabled { opacity: .4; cursor: default; }
.tpl__edit, .tpl__add { margin-top: 4px; }
.tpl__who { display: flex; align-items: center; gap: 8px; }
.tpl__whosel {
  flex: 1; min-width: 0; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 15px;
}
.tpl__vars {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: sticky; top: -4px; z-index: 1;
  padding: 6px 0; background: var(--bg-elev);
}
.tpl__var { min-height: 30px; padding: 4px 9px; font-size: 12.5px; color: var(--text); }
.tpl__form { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.tpl__ttl, .tpl__vtext {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-elev); color: var(--text); font: inherit; font-size: 16px;   /* 16px — iOS не зумит */
}
.tpl__vtext { flex: 1 1 auto; min-width: 0; resize: vertical; line-height: 1.35; }
.tpl__ttl:focus, .tpl__vtext:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.tpl__vrow { display: flex; gap: 6px; align-items: flex-start; }
.tpl__vdel {
  flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent;
  color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer;
}
.tpl__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tpl__small { min-height: 36px; padding: 6px 12px; font-size: 14px; }

/* ---------- «Звонки» CRM (владелец 09.10, web/app.js: showCrmCalls/ccRow) ----------
   Списки без прокрутки вбок (правило владельца): фишки переносятся строками, длинный текст — по словам. */
.cc__filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.cc__days { align-self: flex-start; }
.chips.cc__chips { flex-wrap: wrap; overflow-x: visible; padding: 0; background: transparent; border-bottom: 0; }
.chip.chip--bad:not(.is-on) { color: var(--bad); border-color: var(--bad); }
.cc__who { display: flex; flex-direction: column; gap: 4px; }
.cc__lbl { font-size: 13px; font-weight: 650; color: var(--text); }
.cc__note { margin: 4px 2px 8px; }
.cc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cc__row { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere;
  min-width: 0; }
.cc__row.is-bad { border-left: 3px solid var(--bad); }
.cc__head { padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.cc__head:active, .cc__head:focus { background: var(--bg-sunk); outline: none; border-radius: 12px; }
.cc__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cc__phone { font-weight: 650; font-size: 15px; font-variant-numeric: tabular-nums; }
.cc__badge { padding: 1px 8px; border-radius: 999px; background: var(--bg-sunk); color: var(--text-dim); font-size: 12px; }
.cc__badge--rep { background: var(--st-we_owe_answer-bg, var(--bg-sunk)); color: var(--st-we_owe_answer, var(--warn));
  font-weight: 600; }
.cc__at { margin-left: auto; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cc__flat { font-size: 14px; line-height: 1.35; }
.cc__res { font-size: 13px; color: var(--ok); }
.cc__res.is-miss { color: var(--text-dim); }
.cc__wholine, .cc__act { font-size: 13px; line-height: 1.35; }
.cc__k, .cc__dim { color: var(--text-dim); }
.cc__name { font-weight: 650; }
.cc__bad { color: var(--bad); font-weight: 600; }
.cc__ok { color: var(--text-dim); }
.cc__more-box { border-top: 1px solid var(--line); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.cc__calls { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cc__call { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; }
.cc__call .cc__at { margin-left: 0; }
.cc__cflat { flex: 1 1 10em; min-width: 0; }
.cc__cres { color: var(--ok); }
.cc__call.is-miss .cc__cres { color: var(--text-dim); }
.cc__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cc__btns .btn { flex: 1 1 auto; text-align: center; text-decoration: none; }
.cc__more { width: 100%; margin-top: 10px; }
/* «Клиенты ⇄ Звонки» (09.10): кнопка на месте заголовка, на обоих экранах в одной точке — тап туда и обратно.
   Владельцу заголовок «CRM» не нужен — его место занимает кнопка (.has-switch). */
.crmswitch { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent);
  font: inherit; font-size: 14px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.crmswitch span { overflow: hidden; text-overflow: ellipsis; }
.crmswitch:active { background: var(--accent); color: var(--accent-ink); }
.topbar__who.has-switch .topbar__title { display: none; }
.topbar__who.has-switch .topbar__sub { margin-top: 1px; }
.cc__when { font-size: 13px; font-weight: 650; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cc__when.is-recent { color: var(--accent); }
.cc__flat { font-weight: 600; }
.cc__row.is-new { animation: ccNew 8s ease-out 1; }
@keyframes ccNew { 0%, 30% { background: var(--st-never_contacted-bg, var(--bg-sunk)); } 100% { background: var(--bg-elev); } }
@media (prefers-reduced-motion: reduce) { .cc__row.is-new { animation: none; outline: 2px solid var(--accent); } }
/* шапка CRM на узком телефоне: кнопка «Звонки» + «Доска | Список» + три значка — значкам чуть уже */
@media (max-width: 380px) { .screen--leads .topbar__row > .iconbtn { width: 36px; } .crmswitch { padding: 0 9px; } }

/* ===== «Подборка» (владелец 09.10, web/app.js: блок «Подборка») — начало блока =====
   Плитка — обычная плитка полосы значков (горизонтальная прокрутка без полосы — .iconbar). Лист — тот же
   .tplsheet, что «Шаблоны»; карточки — фото слева, текст справа, кнопки «Скопировать» / «В чат». */
.pdbsheet { z-index: 57; }
.pdb__crit { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pdb__src { margin: 0; font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }
.pdb__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.pdb__field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pdb__flabel { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdb__chips > .pdb__flabel { align-self: center; margin-right: 2px; }
.pdb__input {
  width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums;
}
.pdb__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pdb__list { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.pdb__card {
  display: flex; gap: 10px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg);
}
.pdb__pic {
  flex: 0 0 96px; width: 96px; height: 96px; overflow: hidden; border-radius: 10px; background: var(--bg-sunk);
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
}
.pdb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdb__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pdb__addr { font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.pdb__addr { color: var(--accent); }
.pdb__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.pdb__km { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.pdb__km.is-unknown { font-weight: 600; color: var(--text-dim); }
.pdb__place { font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.pdb__anchor { margin: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.pdb__price { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pdb__flat, .pdb__why { font-size: 12.5px; color: var(--text-dim); overflow-wrap: anywhere; }
.pdb__why { color: var(--text); }
.pdb__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* 11.10: «Прикрепить объявление №…» — только владелец (web/app.js: pdbAttachNumber) */
.pdb__attachno { display: flex; gap: 6px; margin: 0 0 10px; }
.pdb__attachno-in { flex: 1; min-width: 0; font-size: 16px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line, #3a3f4b); background: transparent; color: inherit; }
.pdb__btn { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
.pdb__btn--main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pdb__all { width: 100%; }
.pdb__note { margin: 0; }
@media (max-width: 360px) { .pdb__pic { flex-basis: 76px; width: 76px; height: 76px; } }
/* Плитка по лучшей оценке: зелёная — есть подходящие, жёлтая — только частично, серая и неактивная — нечего. */
.iconbar .contactbar__btn--podborka.is-green { border-color: var(--ok); }
.iconbar .contactbar__btn--podborka.is-green svg, .iconbar .contactbar__btn--podborka.is-green .contactbar__txt { color: var(--ok); }
.iconbar .contactbar__btn--podborka.is-yellow { border-color: var(--warn); }
.iconbar .contactbar__btn--podborka.is-yellow svg, .iconbar .contactbar__btn--podborka.is-yellow .contactbar__txt { color: var(--warn); }
.iconbar .contactbar__btn--podborka.is-none,
.iconbar .contactbar__btn--podborka:disabled { opacity: .45; cursor: default; background: var(--bg-sunk); }
.iconbar .contactbar__btn--podborka.is-none svg, .iconbar .contactbar__btn--podborka.is-none .contactbar__txt { color: var(--text-dim); }
.pdb__grade {
  align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; border: 1px solid currentColor;
}
.pdb__grade--green { color: var(--ok); }
.pdb__grade--yellow { color: var(--warn); }
.pdb__factors { display: flex; flex-wrap: wrap; gap: 4px; }
.pdb__factor { padding: 1px 6px; border-radius: 6px; font-size: 12px; background: var(--bg-sunk); color: var(--text); overflow-wrap: anywhere; }
.pdb__factor.is-part { color: var(--warn); }
/* 10.10: три направления — подпись направления и заголовки разделов */
.pdb__sect { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.pdb__dir { align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--accent); overflow-wrap: anywhere; }
.pdb__card--dir { border-color: var(--accent); }
/* ===== «Подборка» — конец блока ===== */

/* ===== Показы 09.10: итог, «Слился», «Напомнить клиенту», одна сетка времени, сделка, итоги владельцу ===== */
/* «Как прошёл показ?» без отметки — заметной карточкой под шапкой показа */
.calev__outcome.is-ask { border: 2px solid var(--warn); border-radius: 14px; background: var(--bg-elev); }
.calev__outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.calev__outcomes .callopt { min-height: 48px; white-space: normal; }
.calev__outcome--drop .lsec__title { color: var(--st-refused); }
.calev__drop { display: flex; flex-direction: column; gap: 8px; }
.calev__drop .callopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.calev__drop .callopt { min-height: 44px; white-space: normal; line-height: 1.2; }
.calev__dropnote { width: 100%; min-height: 44px; box-sizing: border-box; }
.callopt--back { color: var(--text-dim); }
.calblk__outcome.is-ask { color: var(--warn); font-weight: 700; }
/* полоса показа в чате: показ/итог + «Напомнить клиенту» одной строкой */
.nextshowrow { display: flex; align-items: stretch; min-width: 0; }
.nextshowrow .nextshow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nextshowrow .nextshow.is-ask { background: var(--bg-elev); color: var(--warn); }
/* 10.10: время показа не обрезается никогда — сжимается кнопка «Напомнить», а не «📅 Показ сегодня 20:32 ›» */
.nextshowrow .nextshow:not(.is-ask) { flex: 1 0 auto; }
.nextshowrow .nextshow__remind { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nextshow__remind {
  flex: 0 0 auto; min-height: 34px; padding: 6px 12px; border: 0; border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line); background: var(--st-scheduled-bg); color: var(--accent);
  font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap; cursor: pointer;
}
.nextshow__remind[hidden] { display: none; }
body[data-kb="1"] .nextshowrow { display: none; }
/* «Назначить показ»: сетка 14 дней вместо пустого поля даты */
.calsheet__grid { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
.calsheet__other { display: block; margin: 0 0 10px; padding: 6px 0; border: 0; background: none;
  color: var(--accent); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.calsheet__other[hidden], .calsheet__write[hidden] { display: none; }
.calsheet__write { width: 100%; margin-bottom: 8px; white-space: normal; }
.calsheet__only { width: 100%; white-space: normal; }
/* «Сделка: аренда … · комиссия …» — строка с правкой на месте */
.deal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0; font-size: 14px; }
.deal__lbl { font-weight: 700; }
.deal__sep { color: var(--text-dim); }
.deal__ok { color: var(--ok); font-weight: 700; }
.deal__part { min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--text); font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.deal__part.is-unknown { border-style: dashed; color: var(--warn); }
.deal__inp { width: 9.5em; min-height: 40px; font-size: 16px; }
.deal__save { min-height: 40px; min-width: 44px; }
/* «Итоги: сделки и сливы» в «Истории действий» владельца */
.hist__sum { padding: 10px 12px; }
.hist__sumhead { font-weight: 700; cursor: pointer; min-height: 32px; overflow-wrap: anywhere; }
.hist__sumdays { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.hist__sumtitle { margin: 10px 0 4px; font-size: 15px; }
.hist__sumline { margin: 0 0 4px; overflow-wrap: anywhere; }
.hist__sumsub { margin-top: 6px; color: var(--text-dim); font-size: 13px; }
.hist__sumrow { padding: 2px 0; font-size: 14px; overflow-wrap: anywhere; }
.hist__sumwhy { color: var(--text-dim); }
/* ===== Показы 09.10 — конец блока ===== */

/* Анкета клиента (владелец 09.10, service/client_profile.py; web/app.js: profileChipsEl) — фишки
   «💰 до 150 тыс · 👨‍👩‍👧 семья с ребёнком · 🐈 кот». 10.10 (проверка на 390 px: «с 15.10» и «долгосрок» уходили
   за край, прокрутки никто не замечал): не влезло — перенос на следующую строку, фишка целиком (не рвётся).
   Тап — правка на месте (.cprof--edit). */
.cprof {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  white-space: nowrap;
}
.cprof::-webkit-scrollbar { display: none; }
.cprof__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  cursor: pointer;
}
.cprof__chip.is-manual { box-shadow: inset 0 0 0 1px var(--accent); }
.cprof--edit { flex-wrap: wrap; align-items: center; white-space: normal; overflow: visible; }
.cprof__name { font-size: 12.5px; color: var(--text-dim); }
.cprof__input {
  flex: 1 1 140px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-size: 16px;             /* iOS не приближает поле */
}
.cprof__btn {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.cprof__btn--ok { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cprof__quote { flex-basis: 100%; color: var(--text-dim); font-size: 12px; white-space: normal; }
body[data-kb="1"] .object .cprof:not(.cprof--edit) { display: none; }   /* пишут ответ — как полоса значков */
/* «Анкета клиента» — конец блока */

/* «Итог ▾» (владелец 10.10, вариант Б) — в ряду «Показ / Перезвонить / Итог / Передать». Лид закрыт (отказ / брак /
   завершён / собственник руками) — кнопка цветом этой категории. Чтобы четыре кнопки влезли в 360–430 px: при
   видимом «Итог» иконки ряда прячутся, имя ведущего на «Передать» короче, на ≤380 px — плотнее. */
.chatactions__btn--itog { gap: 4px; }
.chatactions__btn--itog.is-closed { border-radius: 999px; background: var(--bg); }
.chatactions__btn--itog.st--refused { color: var(--st-refused); }
.chatactions__btn--itog.st--junk { color: var(--st-junk); }
.chatactions__btn--itog.st--done { color: var(--st-done); }
.chatactions__btn--itog.st--owner_msg { color: var(--st-owner_msg); }
.chatactions__btn--itog.is-closed .chatactions__arrow { color: inherit; }
#itogToggle[aria-expanded="true"] .chatactions__arrow { transform: rotate(180deg); }
.picker__item--tip { color: var(--text-dim); font-size: 13px; cursor: default; border-top: 1px solid var(--line); }
@media (max-width: 430px) {
  .chatactions:has(#itogToggle:not([hidden])) .chatactions__btn .ico { display: none; }
  .chatactions:has(#itogToggle:not([hidden])) .chatactions__assignstate { max-width: 22vw; }
}
@media (max-width: 380px) {
  .chatactions:has(#itogToggle:not([hidden])) .chatactions__btn { gap: 4px; padding: 0 5px; font-size: 13.5px; }
  .chatactions:has(#itogToggle:not([hidden])) .chatactions__assignstate { max-width: 18vw; }
}
/* 10.10: ряд значков чата шире экрана — правый край гаснет, пока есть что листать (web/app.js: iconbarEdge) */
.iconbar.is-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

/* Выключатели новых функций (11.10, app.js: featPaintAdmin) — «✓ включено / ✕ выключено», переносом строк */
.feat__who { margin-top: 8px; width: 100%; max-width: 320px; }
.feat__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.feat__btn { min-height: 36px; padding: 6px 10px; font-size: 13.5px; }
.feat__btn.is-off { color: var(--danger); border-color: var(--danger); opacity: .9; }

/* ---------- Компактный экран чата (владелец 11.10: «интерфейс громоздко выглядит… уменьшить хотя бы на
   10–15 %») ----------
   Только обвязка переписки: шапка, плашка «договорились», панель объекта, ряд действий, подсказки, поле.
   Ничего не убрано: плитки связи — та же форма, ниже (46 px вместо 54), пустая строка заметок не
   рисуется (вход — плитка «Заметки»), «Договорились?» — одной строкой. Текст сообщений — тех же размеров.
   Отступы слева/справа не трогаем (их задают правила для широких экранов) — только сверху/снизу. */
.topbar--thread .topbar__row { min-height: 46px; padding-top: 2px; padding-bottom: 2px; }

.agreedbar { padding-top: 4px; padding-bottom: 5px; font-size: 13px; }
.agreedbar__also { margin-top: 1px; }
.agreedbar--maybe .agreedbar__title { flex: 0 0 auto; white-space: nowrap; }
.agreedbar__sub {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; opacity: .75;
}
.agreedbar__confirm,
.agreedbar__nowait,
.agreedbar__undo { min-height: 32px; padding-top: 2px; padding-bottom: 2px; font-size: 12.5px; }
@media (max-width: 400px) { .agreedbar__sub { display: none; } }   /* телефон: «🤝 Договорились?  [✓ Подтвердить]» */
/* «✅ Вы договорились с клиентом  сегодня в 12:41» — одной строкой; «Ждёт ответа — …  [✓ Ответ не нужен]» — одной */
.agreedbar__head { flex-wrap: nowrap; }
.agreedbar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agreedbar__when { flex: 0 0 auto; white-space: nowrap; }
.agreedbar__also--row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.object { padding-top: 6px; padding-bottom: 8px; }
.object__repeat { margin-bottom: 0; font-size: 12px; line-height: 1.3; }
.objecthead__toggle { height: 28px; }
.object__terms { margin-top: 1px; font-size: 12.5px; line-height: 1.3; }
.object .cprof { margin-top: 4px; }
.object__notes { margin-top: 5px; padding: 5px 9px; }
.object .feenote { margin-top: 5px; }
.object .feenote__line { padding-top: 4px; padding-bottom: 4px; }
.object .iconbar { margin-top: 6px; gap: 5px; }
/* плитки — та же форма «значок над подписью» (владелец 08.10: не «таблетки»), только ниже: 46 px вместо 54 */
.object .iconbar .contactbar__btn { min-height: 46px; gap: 2px; padding-top: 4px; padding-bottom: 4px; }
.object .iconbar .contactbar__btn svg { width: 18px; height: 18px; }
/* 11.10 вечер (владелец, Android 412 px: «Отправить» срезана у края): плитки шапки чата делят ширину поровну и
   видны только целыми — до 4 плиток растягиваются на всю ширину, больше — ровно 4 на экране, остальные листаются
   вбок и встают целыми (scroll-snap); подпись не рвётся на середине — многоточием. Форма прежняя («значок над
   подписью», владелец 08.10), высота 46 px. В карточке CRM и показе — как было (там свой ряд). */
.object .iconbar { scroll-snap-type: none; }
.object .iconbar .contactbar__btn { flex: 0 0 calc((100% - 15px) / 4); min-width: 0; max-width: none; }

.object .iconbar .contactbar__btn { padding-left: 3px; padding-right: 3px; font-size: 10.5px; letter-spacing: -0.1px; }
.object .iconbar .contactbar__txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object .iconbar.is-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 10px), transparent);
}
@media (max-width: 380px) {
  .object .iconbar .contactbar__btn { padding-left: 2px; padding-right: 2px; font-size: 10px; letter-spacing: -0.2px; }
}

.chatactions { min-height: 40px; padding-top: 0; padding-bottom: 0; }
.chatactions__btn { min-height: 40px; padding: 0 6px; gap: 5px; font-size: 14px; }

.tplsug { padding-top: 5px; }
.tplsug__card { min-height: 40px; padding: 4px 9px; line-height: 1.25; }

.composer { padding-top: 6px; padding-bottom: calc(6px + var(--safe-b)); }

/* «Итог лида» — раздел «Категория ▾» (11.10): подпись группы, не пункт */
.picker__item--group {
  cursor: default; pointer-events: none; min-height: 0;
  padding-top: 10px; padding-bottom: 4px; margin-top: 4px;
  border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim);
}

/* 11.10 вечер (владелец, Android: «Договорились?» и строкой ниже «По переписке — отказ» — две строки и сами себе
   противоречат): отказ по переписке — в той же строке, приглушённо-красным, обрезается многоточием (целиком — в
   подсказке); справа одно действие. */
.agreedbar__why {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--st-refused); font-weight: 650;
}
.agreedbar--refused .agreedbar__title { flex: 0 0 auto; }

/* Версия приложения рядом с именем на экране чатов (11.10) — мелко, приглушённо */
.topbar__ver { font-size: 11px; font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums; }

/* «Наверх» в списке чатов (11.10) — круглая кнопка справа над нижней панелью; на экране чата и при клавиатуре не видна */
.totop {
  position: fixed; right: 16px; bottom: calc(76px + var(--safe-b, 0px)); z-index: 45;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); cursor: pointer;
}
.totop[hidden] { display: none; }
body[data-kb="1"] .totop { display: none; }