/* Оформление CRM.
   Адаптивно: на телефоне одна колонка, на широком экране список слева,
   переписка справа (ТЗ №1, раздел 10). Сборки нет, файл правится руками. */

:root {
  --фон:        #f5f6f8;
  --карточка:   #ffffff;
  --текст:      #1f2933;
  --приглушён:  #6b7785;
  --линия:      #dfe3e8;
  --свой:       #2f6f4f;
  --тревога:    #b4453a;
}

* { box-sizing: border-box; }

/* Страница НИКОГДА не шире экрана.
   Достаточно одной длинной строки — имени файла, адреса объявления,
   несжимаемой колонки — чтобы всё содержимое уехало вбок и появилась
   горизонтальная прокрутка: на телефоне половина страницы оказывается
   за краем, и до кнопок не добраться. Поэтому запрет стоит на самом
   верху, а не по месту: чинить каждый случай по отдельности здесь
   бесполезно, они появляются снова. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
/* clip режет так же, но не делает страницу отдельной прокручиваемой
   областью: с hidden на html и body Safari на iPhone при открытии
   клавиатуры прокручивает не туда (26.10.2026). Старый Safari clip не
   знает и остаётся на hidden. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

body {
  margin: 0;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--текст);
  background: var(--фон);
  -webkit-text-size-adjust: 100%;
}

/* Длинные слова переносим, а не выпихиваем за край: имена файлов и
   адреса пробелов не содержат. */
body { word-break: break-word; overflow-wrap: anywhere; }   /* первое — для Safari до 15.4 */

/* ---------- Шапка ---------- */

.шапка {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem;
  padding-top: calc(.6rem + env(safe-area-inset-top));
  background: var(--карточка);
  border-bottom: 1px solid var(--линия);
  position: -webkit-sticky;   /* Safari до 13 знает только с приставкой */
  position: sticky;
  top: 0;
  z-index: 10;
}

.шапка nav { display: flex; gap: .25rem; flex-wrap: wrap; }

.шапка nav a {
  padding: .35rem .7rem;
  border-radius: 6px;
  color: var(--текст);
  text-decoration: none;
}

.шапка nav a.тек { background: var(--текст); color: #fff; }
.шапка nav a:hover:not(.тек) { background: var(--фон); }

.кто { display: flex; gap: .75rem; align-items: center; color: var(--приглушён); font-size: .9rem; }
.кто a { color: var(--приглушён); }

main { padding: 1rem; max-width: 1200px; margin: 0 auto; }

h1 { font-size: 1.25rem; margin: 0 0 1rem; }

.пусто { color: var(--приглушён); max-width: 46ch; }

.сводка {
  display: grid;
  grid-template-columns: auto auto;
  gap: .25rem 1rem;
  justify-content: start;
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
}

.сводка dt { color: var(--приглушён); }
.сводка dd { margin: 0; font-variant-numeric: tabular-nums; }

/* В узкой колонке инбокса подпись и значение рядом не помещаются: подписи
   ломались по слогам («Месседж/ер», «Пише/м с/номер/а»). Ставим друг под
   другом. */
.нутро-контакта .сводка {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.нутро-контакта .сводка dt { font-size: .8rem; margin-top: .6rem; overflow-wrap: normal; }
.нутро-контакта .сводка dt:first-child { margin-top: 0; }
.нутро-контакта .сводка dd { overflow-wrap: anywhere; }

/* ---------- Вход ---------- */

.вход-страница {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 1rem;
}

.вход {
  width: min(100%, 22rem);
  display: grid;
  gap: .75rem;
  padding: 1.5rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 12px;
}

.вход h1 { text-align: center; margin: 0 0 .5rem; }

.вход label { display: grid; gap: .25rem; font-size: .9rem; color: var(--приглушён); }

input, button, textarea, select {
  font: inherit;
  padding: .6rem .7rem;
  border: 1px solid var(--линия);
  border-radius: 8px;
  background: #fff;
  color: var(--текст);
}

button {
  background: var(--текст);
  color: #fff;
  border-color: var(--текст);
  cursor: pointer;
}

button:hover { opacity: .9; }
button[disabled] { opacity: .5; cursor: default; }

/* Кнопка рядом с полем: не спорит с главной кнопкой формы. */
button.второстепенная {
  background: transparent;
  color: var(--текст);
  border-color: var(--линия);
  white-space: nowrap;
}

.ошибка {
  margin: 0;
  padding: .6rem .7rem;
  border-radius: 8px;
  background: #fdecea;
  color: var(--тревога);
  font-size: .9rem;
}

/* ---------- Широкий экран: список слева, переписка справа ---------- */

@media (min-width: 60rem) {
  .две-колонки {
    display: grid;
    grid-template-columns: 22rem 1fr;
    gap: 1rem;
    align-items: start;
  }
}

/* ---------- Лента на разбор ---------- */

.заголовок-раздела {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

/* Отборы («новые», «ждут ответа», «все», «архив») стоят строкой.
   На телефоне строка НЕ помещается — и это надо предусмотреть, иначе
   выходит то, что заказчик и увидел: флексбокс ужимает каждый ярлык до
   ширины буквы, и слово «новые» встаёт столбиком из пяти букв.

   Лечение из двух частей: переносим строку целиком (wrap) и запрещаем
   ужимать сами ярлыки (nowrap + shrink: 0). Тогда они просто встают в два
   ряда — как и положено. */
.переключатель {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  font-size: .9rem;
}

.переключатель a {
  padding: .25rem .6rem;
  border-radius: 6px;
  color: var(--приглушён);
  text-decoration: none;
  border: 1px solid var(--линия);
  background: var(--карточка);
  white-space: nowrap;
  flex: 0 0 auto;
}

.переключатель a.тек { background: var(--текст); color: #fff; border-color: var(--текст); }

/* minmax(0, 1fr), а НЕ просто 1fr.
   Ячейка сетки по умолчанию не даёт себя сжать уже своего содержимого, и
   одна строка с длинным неразрывным текстом растягивает весь список шире
   экрана — уезжает вся страница. Так и вышло, когда в задачах появились
   раскрывающиеся записи журнала в одну строку (28.09.2026). */
.лента {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
}

.лента .строка a {
  display: block;
  padding: .7rem .9rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.лента .строка a:hover { border-color: var(--приглушён); }

.лента .непрочитан a { border-left: 3px solid var(--свой); }

.лента .верх { display: flex; justify-content: space-between; gap: .5rem 1rem; }
.лента .имя { font-weight: 600; }
.лента .время { color: var(--приглушён); font-size: .85rem; white-space: nowrap; }
.лента .время.след-контакт { color: #4a5563; font-weight: 600; }
.лента .даты { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 1rem; }

.лента .объявление,
.шапка-чата .объявление { color: var(--приглушён); font-size: .85rem; margin-top: .1rem; }

/* Ссылка на профиль стоит рядом с именем, но спорить с ним за внимание не
   должна: имя — заголовок, профиль — приписка мелким. */
/* Каналы переписки с одним человеком: узкие кнопки «MAX 88-17 · 2».
   Слить такие разговоры нельзя — у клиента это тоже разные окна. */
.чей-номер .канал {
  display: inline-block;
  padding: .12rem .5rem;
  margin-right: .3rem;
  font-size: .8rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--текст);
  border: 1px solid var(--линия);
  border-radius: 999px;
}
.чей-номер .канал.сейчас { background: var(--карточка); font-weight: 600; }
.чей-номер .канал.новое { font-weight: 700; }
.чей-номер .канал.плохо { border-color: #c0392b; color: #c0392b; }
.чей-номер .канал.новый { border-style: dashed; color: var(--приглушён); }

/* Галочки доставки у своих реплик: ✓ доставлено, ✓✓ прочитано. */
.реплика .галочки { margin-left: .3rem; letter-spacing: -.12em; }
.реплика .галочки.прочитано { color: #2e86de; }
.реплика .галочки.не-ушло { color: #c0392b; letter-spacing: 0; font-weight: 700; }

/* Номер, которому мессенджер запретил отправку. */
.ярлык.тревога { background: #c0392b; color: #fff; border-color: #c0392b; }

/* В списке один человек — одна строка; сколько у него ещё каналов. */
.лента .ещё-каналы { color: var(--приглушён); }
.лента .ещё-каналы.новое { color: var(--текст); font-weight: 600; }

/* Выключенное поле ответа: номер не отправляет. Видно сразу, что писать
   отсюда нельзя, и в самом поле написано почему. */
.написать textarea:disabled,
.написать button:disabled,
.написать .скрепка:disabled {
  background: var(--карточка);
  color: var(--приглушён);
  cursor: not-allowed;
}
.написать textarea:disabled::placeholder { color: #c0392b; }
.чей-номер .беда { color: #c0392b; margin-left: .2rem; }

/* Номер заблокирован на отправку — предупреждаем прямо в строке «пишем с». */
.чей-номер.плохо { border-color: #c0392b; }

.шапка-чата h1 .имя-в-мессенджере {
  font-size: .78rem; font-weight: normal; color: var(--приглушён);
  margin-left: .35rem; vertical-align: middle;
}

.шапка-чата h1 .профиль {
  font-size: .78rem; font-weight: normal; margin-left: .5rem;
  white-space: nowrap; vertical-align: middle;
}

.лента .отрывок { margin-top: .35rem; }
.лента .мы { color: var(--приглушён); }

/* Нижняя строка карточки: телефон, проект, статус, город, стиль,
   менеджер. Шесть полей в ряд БЕЗ переноса растягивали карточку шире
   экрана телефона — потому и уезжала вся страница. Переносим. */
.лента .низ, .шапка-чата .низ {
  margin-top: .4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  font-size: .8rem;
  color: var(--приглушён);
  min-width: 0;
}

/* Верхняя строка тоже: длинное имя и дата рядом не помещаются. */
.лента .верх { flex-wrap: wrap; min-width: 0; }
.лента .имя { min-width: 0; }

.лента .нет-карточки { color: var(--тревога); }
.лента .в-очереди-метка { color: var(--свой); }

/* Не ушедшее. Красным и жирным — это не состояние переписки, а поломка,
   которую надо разобрать: отправить заново или писать другим каналом.
   Заказчик просил видеть такое «как новое непрочитанное» (28.09.2026). */
.лента .не-ушло-метка { color: #c0392b; font-weight: 600; }

/* «Сменить» рядом с клиентом: неброско, это редкое действие. */
.сменить-клиента { font-size: .85rem; color: var(--приглушён); margin-left: .5rem; }

/* ---------- Экран чата ---------- */

.назад { margin: 0 0 .75rem; font-size: .9rem; }
.назад a { color: var(--приглушён); }

.шапка-чата h1 { margin: 0; }

.полоса-клиента {
  margin: .75rem 0;
  padding: .5rem .75rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 8px;
  font-size: .9rem;
}

.полоса-клиента.нет { color: var(--приглушён); }

/* С какого нашего номера идёт переписка.
   Рабочих номеров несколько, и без этой строки непонятно, в каком телефоне
   проверять. Неброско: это справка, а не часть разговора. */
.чей-номер {
  margin: .5rem 0 .25rem;
  font-size: .82rem;
  color: var(--приглушён);
}
.чей-номер strong { color: var(--текст); font-weight: 600; }
.пояснение { color: var(--приглушён); font-size: .85rem; }

.переписка {
  display: grid;
  gap: .4rem;
  margin-top: 1rem;
  /* Реплики жмутся к началу, а не растягиваются на всю высоту.
     Колонка разговора теперь выше содержимого, и без этого сетка делила
     свободное место между строками: короткая реплика превращалась в пузырь
     в пол-экрана с пустотой внутри. */
  align-content: start;
}

.плашка-дня {
  justify-self: center;
  margin: .75rem 0 .25rem;
  padding: .15rem .6rem;
  font-size: .8rem;
  color: var(--приглушён);
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 999px;
}

.реплика {
  max-width: min(80%, 34rem);
  padding: .5rem .7rem;
  border-radius: 12px;
  background: var(--карточка);
  border: 1px solid var(--линия);
}

.реплика.своя { justify-self: end; background: #e8f1ec; border-color: #cfe0d6; }
.реплика.чужая { justify-self: start; }
.реплика .время { font-size: .75rem; color: var(--приглушён); text-align: right; margin-top: .2rem; }
.реплика .пометка { color: var(--приглушён); font-style: italic; }

/* ---------- Очередь и поле ответа ---------- */

.реплика.в-очереди { background: #fff8e6; border-color: #e8d9a8; border-style: dashed; }
.реплика.в-очереди .время { font-style: italic; }

/* НЕ УШЕДШЕЕ — НЕ ПОХОЖЕ НА ОЧЕРЕДЬ.
   Жёлтая пунктирная плашка значит «сейчас уйдёт», и вчерашний сбой в ней
   читается как свежее сообщение: заказчик так и сказал — «висят ниже, как
   будто бы они новые». Красная рамка и приглушённый текст говорят другое:
   это не ждёт отправки, это лежит. */
.реплика.в-очереди.не-ушло {
  background: none;
  border-color: #c0392b;
  border-style: solid;
  opacity: .75;
}
.реплика.в-очереди.не-ушло .время { color: #c0392b; font-style: normal; }

.действия-очереди { display: flex; gap: .75rem; margin-top: .3rem; }
.действия-очереди .крестик { color: #c0392b; }

.ссылка {
  background: none;
  border: none;
  padding: 0;
  color: var(--приглушён);
  font-size: .75rem;
  text-decoration: underline;
  cursor: pointer;
}

.уведомление {
  margin: .75rem 0 0;
  padding: .5rem .75rem;
  background: #e8f1ec;
  border: 1px solid #cfe0d6;
  border-radius: 8px;
  font-size: .9rem;
}

.автоответ {
  margin: 0 0 .6rem;
  padding: .5rem .75rem;
  background: #eef4fb;
  border: 1px solid #c5d8ee;
  border-radius: 8px;
  font-size: .9rem;
}
.автоответ .кому { color: var(--приглушён); font-size: .8rem; }
.автоответ .текст-подсказки { margin: .25rem 0 .4rem; white-space: pre-wrap; }
.автоответ button { margin-right: .4rem; }
.автоответ.лимит { background: #fdf3e7; border-color: #f0d3ad; }

.написать {
  margin-top: 1rem;
  padding: .75rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
}

.написать textarea { width: 100%; resize: vertical; }

.под-полем {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: .5rem;
}

.под-полем .счётчик { margin-right: auto; color: var(--приглушён); font-size: .85rem; }
.под-полем .немедленно { font-size: .85rem; color: var(--приглушён); }
.написать .пояснение { margin: .5rem 0 0; }

/* ---------- Карточки, списки, формы ---------- */

.кнопка {
  display: inline-block;
  padding: .4rem .8rem;
  background: var(--текст);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: .9rem;
  white-space: nowrap;
}

.кнопка:hover { opacity: .9; }

/* «Открыть разговор» — зелёная, «Написать в …» — тёмная: в карточке они
   стоят столбиком одна под другой и сливались (заказчик, 06.10.2026). */
.кнопка.открыть-разговор { background: var(--свой); }

h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }

.предупреждение {
  margin: .75rem 0;
  padding: .6rem .8rem;
  background: #fdf3e3;
  border: 1px solid #e8d3a8;
  border-radius: 8px;
  font-size: .9rem;
}

.карточка-форма {
  display: grid;
  gap: .75rem;
  padding: 1rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
  max-width: 34rem;
}

.карточка-форма label { display: grid; gap: .25rem; font-size: .9rem; color: var(--приглушён); }
.карточка-форма button { justify-self: start; }

.карточка-форма fieldset {
  display: grid;
  gap: .5rem;
  border: 1px solid var(--линия);
  border-radius: 8px;
  padding: .75rem;
}

.карточка-форма legend { font-size: .85rem; color: var(--приглушён); padding: 0 .3rem; }

.строка-формы {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: .75rem 0;
}

.строка-формы input[name="q"] { flex: 1 1 16rem; }

/* Галочки проектов: в ряд, переносом, а не столбиком в пол-экрана. */
fieldset.проекты { margin: 0; }
.галочки {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin-bottom: .35rem;
}
.галочка {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  white-space: nowrap;
}
.галочка input { width: auto; margin: 0; }
.галочка.все-статусы { font-weight: 600; padding-right: .9rem; border-right: 1px solid var(--линия); }
/* «показать просроченные» слева, «с кем работал сегодня» справа. */
.ссылки-вида { display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }

/* Отбор клиентов: строка полей, под ней полоса статусов галочками.
   Выпадающим списком «все, кроме отказа и пассивных» не выберешь — там
   либо один статус, либо все скопом. Полосой, потому что статусов
   десяток: вперемешку с полями они бы потерялись. */
.отбор-клиентов,
.отбор-задач { margin: .75rem 0; }
.отбор-клиентов .строка-формы,
.отбор-задач .строка-формы { margin: 0 0 .4rem; }
.статусы-отбор {
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 8px;
  padding: .45rem .6rem;
  margin: 0;
}

/* Правка материала прямо в списке: неброско, чтобы не спорить со ссылкой. */
details.правка { margin-top: .4rem; }
details.правка > summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--приглушён);
}
details.правка .карточка-форма { margin-top: .4rem; }

/* Дата и время рядом: время короче, чтобы дата не ужималась. */
.пара-полей { display: flex; gap: .4rem; }
.пара-полей input[type="date"] { flex: 1 1 9rem; min-width: 0; }
.пара-полей input[type="time"] { flex: 0 0 6.5rem; }
.строка-формы input[type="time"] { flex: 0 0 6.5rem; }
.в-строку { display: flex; gap: .3rem; align-items: center; font-size: .9rem; color: var(--приглушён); }

.список { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.список li { padding: .4rem .6rem; background: var(--карточка); border: 1px solid var(--линия); border-radius: 8px; }
.список li.сделана { opacity: .5; text-decoration: line-through; }
.встроенная { display: inline; }

.журнал { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .5rem; }
.журнал li { padding: .6rem .8rem; background: var(--карточка); border: 1px solid var(--линия); border-radius: 8px; }
.журнал .верх { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--приглушён); }

/* Служебная отметка CRM — строкой, а не карточкой.
   «Звонок из CRM через АТС» и «Отправлены файлы: …» говорят лишь, что
   действие состоялось. Рассказ менеджера весит больше, и раньше он тонул
   среди них: служебных записей почти половина. Прятать совсем нельзя — по
   ним видно, что человеку звонили и что ему ушло, — поэтому не убираем, а
   ужимаем: без рамки и подложки, мельче, приглушённо. */
.журнал li.служебная {
  padding: .15rem .8rem .15rem .55rem;
  background: none;
  border: none;
  border-left: 2px solid var(--линия);
  border-radius: 0;
  font-size: .82rem;
  color: var(--приглушён);
}
/* Верхняя строка служебной записи уходит в тот же ряд, что и текст:
   отдельной строкой на «сообщение · 14:20 · CRM» уходит вдвое больше
   места, чем на саму отметку. */
.журнал li.служебная .верх {
  display: inline-flex;
  font-size: .78rem;
  gap: .5rem;
  margin-right: .5rem;
}
.журнал li.служебная .верх + div { display: inline; }
.журнал li.служебная .пояснение { display: inline; margin-left: .4rem; }

.активный { color: var(--свой); font-weight: 600; }
/* «Активный» в списках клиентов и задач — зелёной плашкой: это первое,
   что нужно увидеть перед звонком (заказчик, 06.10.2026). */
.метка-активный {
  display: inline-block;
  padding: .05rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--свой);
  background: #eef5f1;
  border: 1px solid #cfe0d6;
  border-radius: 999px;
  white-space: nowrap;
}
.лента .имя .метка-активный { margin-left: .5rem; vertical-align: middle; }
/* Проект в нижней строке — на своём месте после телефона, а не у правого
   края: без проекта строка начиналась слева, с проектом — справа, и
   список выглядел вразнобой. */
.лента .низ .ярлык { margin-left: 0; }
.лента .просрочена a { border-left: 3px solid var(--тревога); }

/* ЗАДАЧИ: имя, стиль, проект, срок.
   Заказчик (28.09.2026) разбирал эту строку по частям: «активный» — справа
   от имени, проект — под именем, время крупно и жирным, дата мелко. */
.лента .имя .активный {
  margin-left: .5rem;
  font-size: .8rem;
  vertical-align: middle;
}

/* Проект отдельной строкой под именем: это не подпись к имени, а вторая
   половина ответа на «кому звоню». */
.лента .проект-задачи {
  margin-top: .1rem;
  font-size: .9rem;
  color: var(--приглушён);
}

/* Город в нижней строке задачи: тот же размер, что у статуса и менеджера,
   но чёрный и жирный. Вся строка нарочно приглушена — это приписки; город
   же читают наравне с именем, и в общем сером он терялся. */
.лента .задача .низ .город { font-weight: 700; color: var(--текст); }
.лента .задача .низ .звонок-атс,
.лента .задача .ещё-задачи .звонок-атс { color: #b45309; }

/* Остальные задачи того же человека — строкой под именем: карточка на
   клиента одна, а не по задаче. */
.лента .задача .ещё-задачи {
  list-style: none;
  margin: .35rem 0 0;
  padding: .3rem 0 0;
  border-top: 1px dashed var(--линия);
  font-size: .85rem;
  color: var(--приглушён);
}
.лента .задача .ещё-задачи li { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.лента .задача .ещё-задачи .когда { font-variant-numeric: tabular-nums; color: var(--текст); }
.лента .задача .ещё-задачи .что { color: var(--текст); }
.лента .задача .ещё-задачи li.просрочена .когда { color: var(--тревога); }
.лента .задача .ещё-задачи .ссылка { font-size: .85rem; }

/* СТРОКА ЗАДАЧИ СОБРАНА ИЗ ДВУХ ЧАСТЕЙ.
   Слева — ссылка в карточку, справа — срок и кнопка действия. Раньше в
   ссылку было завёрнуто всё подряд; кнопку внутрь ссылки не положить —
   ни по разметке, ни по смыслу: нажатие должно звонить, а не открывать
   карточку (заказчик, 28.09.2026). */
.лента .задача .строка-задачи {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .7rem .9rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
}
.лента .задача.просрочена .строка-задачи { border-left: 3px solid var(--тревога); }
.лента .задача .строка-задачи:hover { border-color: var(--приглушён); }

/* Ссылки внутри строки задачи — обычные ссылки, а не карточки: общее
   правило «.лента .строка a» делает из любой ссылки плашку во всю ширину,
   и кнопка «Написать» без этого сброса растянулась бы на всю строку. */
.лента .задача a {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.лента .задача .главное { flex: 1 1 auto; min-width: 0; }

/* Строка раскрывается по нажатию — курсор должен об этом говорить. */
.лента .задача .строка-задачи { cursor: pointer; }
.лента .задача.раскрыта .строка-задачи {
  border-color: var(--текст);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ПОСЛЕДНИЕ ПЕРЕГОВОРЫ ПОД СТРОКОЙ.
   Каждая запись — одна строка мелким: дата, вид, суть. Длинное обрезается
   многоточием, а не разворачивается на три строки: заказчик просил, чтобы
   раскрытая строка выросла не больше чем вдвое (28.09.2026). Кому нужны
   подробности, тот откроет карточку. */
/* min-width и overflow — чтобы раскрытое НЕ РАСПИРАЛО строку.
   Внутри лежат записи в одну строку без переносов, и без этих двух свойств
   они задают ширину всему списку: на мониторе уезжает страница, на
   телефоне — подавно. */
.лента .задача,
.лента .задача .строка-задачи,
.лента .задача .правое { min-width: 0; }

.лента .задача .журнал-задачи {
  min-width: 0;
  overflow: hidden;
  padding: .45rem .9rem .55rem;
  background: var(--фон);
  border: 1px solid var(--текст);
  border-top: none;
  border-radius: 0 0 10px 10px;
}
.лента .задача .журнал-задачи .запись {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  font-size: .78rem;
  line-height: 1.45;
  min-width: 0;
}
.лента .задача .журнал-задачи .когда {
  flex: 0 0 auto;
  color: var(--приглушён);
  font-variant-numeric: tabular-nums;
}
.лента .задача .журнал-задачи .вид {
  flex: 0 0 auto;
  color: var(--приглушён);
}
/* Суть — в одну строку, с многоточием: столбик из переносов съел бы всю
   экономию места, ради которой список и раскрывается. */
.лента .задача .журнал-задачи .суть {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.лента .задача .журнал-задачи .пусто { color: var(--приглушён); }

/* Сводка в списке задач (владелец, эскиз «да» 15.10.2026): зелёная строка
   «Сегодня» — с клиентом сегодня уже было действие; в раскрытом — прошлые
   дни строкой на день и последний отчёт. Цвет части — итог. */
.часть-дня { display: inline-block; padding: 0 .5rem; border-radius: 999px; background: #eef0f3; color: #3d4752; font-size: .78rem; line-height: 1.6; }
.часть-дня.ок { background: #e3f1e8; color: #1f4d36; }
.часть-дня.нет { background: #fbe9e7; color: #8a2f26; }
.часть-дня.кл { background: #e5eefa; color: #1d4f91; }
.часть-дня.вх { background: #fdeedd; color: #8a4510; }
.сегодня-было { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; margin-top: .4rem; padding: .3rem .6rem;
  border-radius: 8px; background: #e3f1e8; border: 1px solid #9cc9ad; color: #1f4d36; font-size: .82rem; }
.сегодня-было .часть-дня { background: #fff; }
.сегодня-было .в { color: #2f6f4f; font-size: .78rem; }
.лента .задача .журнал-задачи .день-задачи { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .35rem; padding: .1rem 0; }
.лента .задача .журнал-задачи .день-задачи .когда { min-width: 2.6rem; font-size: .78rem; }
.лента .задача .журнал-задачи .день-задачи .части { display: flex; flex-wrap: wrap; gap: .2rem .35rem; min-width: 0; }
.лента .задача .журнал-задачи .отчёт-задачи { display: flex; gap: .5rem; align-items: baseline; font-size: .78rem; line-height: 1.45; min-width: 0; margin-top: .2rem; }
.лента .задача .журнал-задачи .отчёт-задачи .суть { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.лента .задача .низ-журнала {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  margin-top: .45rem;
}
.лента .задача .низ-журнала .ещё { font-size: .78rem; color: var(--приглушён); }
/* Перенос — в правый угол: слева «уйти отсюда», справа «сделать отсюда». */
.лента .задача .низ-журнала .справа { margin-left: auto; }

/* НЕОБРАБОТАННЫЕ: ТА ЖЕ КАРТОЧКА, ДРУГОЙ ЦВЕТ.
   Заказчик (29.09.2026): «вывод клиентов адаптируем под вкладку задач,
   чтобы соответствовал вкладке, но только выделяем другим цветом, чтобы
   было видно, что необходимо обработать». Поэтому разметка та же, а
   отличается левая грань и подложка — глазу не надо переучиваться. */
.лента .задача.необработан .строка-задачи,
.лента .строка.необработан > a {
  border-left: 4px solid #d98324;
  background: #fff8ef;
}
.лента .задача.необработан.раскрыта .строка-задачи { border-color: #d98324; }
.лента .задача.необработан .журнал-задачи {
  border-color: #d98324;
  background: #fffaf3;
}

/* В списке клиентов та же мысль коротким ярлыком у имени. */
.лента .метка-необработан {
  margin-left: .5rem;
  padding: .05rem .4rem;
  font-size: .72rem;
  font-weight: 600;
  vertical-align: middle;
  color: #8a4a00;
  background: #ffe8cc;
  border-radius: 999px;
}

.заголовок-необработанных,
.заголовок-задач-дня { margin: 1.2rem 0 .3rem; font-size: 1rem; }
.заголовок-необработанных .сколько {
  padding: .05rem .45rem;
  font-size: .8rem;
  color: #8a4a00;
  background: #ffe8cc;
  border-radius: 999px;
}

/* Галочка «показывать необработанных» стоит своей полосой: она не из того
   же набора, что статусы, и запоминается иначе — точнее, не запоминается. */
.отбор-необработанных { margin-bottom: .4rem; }

/* Сколько новых людей написано сегодня с каждого номера. Советуемый
   выделен — чтобы решение читалось, а не вычислялось. */
.новых-сегодня .номер-счёт { white-space: nowrap; }
.новых-сегодня .номер-счёт.советуем { color: var(--текст); font-weight: 600; }

/* ПОЛОСА ТРЕВОГИ. Красная, во всю ширину, выше всего содержимого — её
   нельзя пролистать мимо. Загорается, когда отправка перестаёт уходить
   (заказчик, 29.09.2026: «должно висеть у всех сверху видимым»). */
.полоса-тревоги {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  margin: 0 0 .8rem;
  padding: .6rem .9rem;
  font-weight: 600;
  color: #fff;
  background: #c0392b;
  border-radius: 10px;
}
.полоса-тревоги a { color: #fff; }

/* Окно переноса задачи. Устроено как окно звонка — одно на страницу. */
dialog.окно-переноса {
  width: min(26rem, 92vw);
  padding: 1.1rem;
  color: var(--текст);
  background: var(--фон);
  border: 1px solid var(--линия);
  border-radius: 12px;
}
dialog.окно-переноса::backdrop { background: rgba(0, 0, 0, .45); }
dialog.окно-переноса h2 { margin: 0 0 .3rem; font-size: 1.1rem; }
dialog.окно-переноса .кого {
  margin: 0 0 .8rem;
  font-size: .9rem;
  color: var(--приглушён);
}
dialog.окно-переноса .быстрый-перенос { margin-bottom: .8rem; }
dialog.окно-переноса .текст-задачи { display: block; margin-bottom: .8rem; font-size: .9rem; }
dialog.окно-переноса .текст-задачи textarea { display: block; width: 100%; margin-top: .25rem; resize: vertical; }
dialog.окно-переноса .звонок-в-окне { display: block; margin: .6rem 0 .8rem; font-size: .9rem; }
dialog.окно-переноса .кнопки-окна {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .9rem;
  margin-top: 1rem;
}
dialog.окно-переноса .удалить-задачу { margin-right: auto; color: var(--тревога); }

.лента .задача .правое {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
}

/* Действие — то же по размеру, что и было в строке описания: заказчик
   просил перенести его вправо, а не сделать крупнее. */
.лента .задача .дело {
  display: inline-block;
  padding: .25rem .6rem;
  font: inherit;
  font-size: .85rem;
  white-space: nowrap;
  color: var(--текст);
  background: var(--фон);
  border: 1px solid var(--линия);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.лента .задача a.дело:hover,
.лента .задача button.дело:hover { border-color: var(--текст); }

/* Нечем воспользоваться: переписки нет или телефона нет. Кнопка остаётся
   на месте — по ней видно, что надо сделать, — но нажать её нельзя. */
.лента .задача .дело.нельзя {
  color: var(--приглушён);
  border-style: dashed;
  cursor: not-allowed;
}
/* Задача своими словами: не кнопка, рамка ни к чему. */
.лента .задача .дело.просто {
  padding: 0;
  border: none;
  background: none;
  color: var(--приглушён);
  white-space: normal;
  text-align: right;
  max-width: 12rem;
}

/* Срок столбиком: время сверху крупно, дата под ним мельче втрое.
   Список почти всегда открыт на сегодня, и дата в каждой строке одна и та
   же — читают время. */
.лента .срок {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  white-space: nowrap;
}
.лента .срок .час { font-size: 1.35rem; font-weight: 700; }
/* Времени нет — «в течение дня» не должно занимать место крупной цифры. */
.лента .срок .час.без-часа {
  font-size: .85rem;
  font-weight: 500;
  color: var(--приглушён);
}
.лента .срок .день { font-size: .68rem; color: var(--приглушён); }

/* ---------- Настройки ---------- */

h3 { font-size: .95rem; margin: 1rem 0 .4rem; }

.справочники {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}

/* ---------- Библиотека ---------- */

.верх-строки { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }

.ярлык {
  margin-left: auto;
  padding: .05rem .5rem;
  font-size: .75rem;
  color: var(--приглушён);
  background: var(--фон);
  border: 1px solid var(--линия);
  border-radius: 999px;
  white-space: nowrap;
}

.ярлык.общий { color: var(--свой); border-color: #cfe0d6; background: #eef5f1; }

/* ---------- инбокс как мессенджер: список, разговор, собеседник ---------- */

/* Три колонки на широком экране, одна на узком.
   Высота считается от окна: прокручиваться должны колонки по отдельности,
   а не страница целиком — иначе список уезжает вместе с перепиской. */
/* Колонкам обязателен minmax(0, …): по умолчанию колонка сетки не уже
   своего содержимого, и одно длинное имя растягивает всю раскладку за
   край экрана. Это не придирка — именно так вся страница и уезжала вбок. */
/* ---------- Мессенджер: раскладка и оформление под Telegram ----------

   Почему чужая раскладка. Заказчик работает в мессенджерах целыми днями, и
   знакомое расположение стоит дороже оригинальности: привычка к списку
   слева, ленте справа и стрелке «назад» на телефоне уже есть, и
   переучиваться ради нашего вкуса незачем.

   Переписка НЕ тянет страницу вниз: у неё своя высота — примерно с экран
   телефона — и своя прокрутка внутри. Так и в самом мессенджере: страница
   стоит, едет лента. */

.мессенджер {
  /* Палитра Telegram, светлая тема. Держим переменными и только здесь:
     остальная CRM своего вида не меняет — это раздел переписки, а не новая
     шкура для всей системы. */
  --тг-синий:      #3390ec;
  --тг-фон:        #ffffff;
  --тг-фон-ленты:  #dce9f5;
  --тг-своё:       #eeffde;
  --тг-чужое:      #ffffff;
  --тг-край:       #e6ecf0;
  --тг-текст:      #0f1419;
  --тг-тихо:       #707579;
  --тг-наведение:  #f4f4f5;

  /* Высота окна — примерно с экран телефона (768 точек).
     Раньше высота равнялась содержимому, и страница уезжала на несколько
     экранов: до поля ответа приходилось докручивать. */
  --высота-окна: 48rem;

  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr) minmax(0, 18rem);
  gap: .5rem;
  align-items: stretch;
  height: var(--высота-окна);
  max-width: 100%;
}

.мессенджер.без-разговора { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
.мессенджер:not(.с-контактом) { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }

.колонка-список,
.колонка-разговор,
.колонка-контакт {
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--тг-фон);
  border: 1px solid var(--тг-край);
  border-radius: 10px;
}

.колонка-список { padding: .25rem; }
.колонка-контакт { padding: .5rem; position: relative; }

/* ---- список разговоров ---- */

.колонка-список .разговоры { display: block; margin: 0; padding: 0; }
.колонка-список .разговоры .строка { margin: 0; list-style: none; }

.колонка-список .разговоры .строка a {
  display: block;
  padding: .5rem .6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--тг-текст);
  text-decoration: none;
}
.колонка-список .разговоры .строка a:hover { background: var(--тг-наведение); }

/* Выбранный — синей заливкой во всю строку. Всё внутри становится белым:
   приглушённый серый на синем не читается. */
.колонка-список .разговоры li.открыт a,
.колонка-список .разговоры li.открыт a:hover { background: var(--тг-синий); }
.колонка-список .разговоры li.открыт a,
.колонка-список .разговоры li.открыт a * { color: #fff !important; }
.колонка-список .разговоры li.открыт { outline: 0; }

.колонка-список .разговоры .имя { font-weight: 600; font-size: .95rem; }
.колонка-список .разговоры .время { font-size: .75rem; color: var(--тг-тихо); }
.колонка-список .разговоры .отрывок {
  color: var(--тг-тихо);
  font-size: .87rem;
  margin-top: .1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.колонка-список .разговоры .низ { font-size: .75rem; color: var(--тг-тихо); }

/* Непрочитанный — точкой у имени, а не цветной подложкой: подложка спорит
   с синей заливкой выбранного. */
/* НЕПРОЧИТАННЫЙ — ЗАЛИВКОЙ ВСЕЙ КАРТОЧКИ.
   Точка у имени была незаметна (заказчик, 10.10.2026: «очень не видные
   отметки непрочитанных»). Теперь: голубой фон, полоса слева, жирное имя и
   текст. Выбранная строка по-прежнему синяя: открытый разговор уже читается. */
.колонка-список .разговоры .непрочитан:not(.открыт) a {
  background: #dcebff;
  box-shadow: inset 4px 0 0 var(--тг-синий);
  padding-left: .85rem;
}
.колонка-список .разговоры .непрочитан:not(.открыт) a:hover { background: #cfe3fb; }
.колонка-список .разговоры .непрочитан .имя { font-weight: 700; }
.колонка-список .разговоры .непрочитан .имя::after {
  content: '';
  display: inline-block;
  width: .7rem; height: .7rem;
  margin-left: .4rem;
  border-radius: 50%;
  background: var(--тг-синий);
  vertical-align: middle;
}
.колонка-список .разговоры .непрочитан .отрывок { color: var(--тг-текст); font-weight: 600; }
.колонка-список .разговоры .непрочитан .время { color: var(--тг-синий); font-weight: 600; }

/* «Ждёт ответа» — просто справка, что последнее слово не наше. Красным оно
   читалось как «не прочитано» и не гасло после чтения. */
.колонка-список .разговоры .нет-карточки { color: var(--тг-тихо); }
.колонка-список .разговоры li.открыт .имя::after { background: #fff; }

/* ---- сам разговор ---- */

.колонка-разговор {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--тг-фон-ленты);
  overflow: hidden;           /* прокручивается лента внутри, а не колонка */
}

.колонка-разговор .шапка-чата,
.колонка-разговор .полоса-клиента,
.колонка-разговор .назад {
  flex: 0 0 auto;
  background: var(--тг-фон);
  margin: 0;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--тг-край);
  border-radius: 0;
}
.колонка-разговор .шапка-чата h1 { font-size: 1.05rem; }

.колонка-разговор .переписка {
  flex: 1 1 auto;
  /* Телефонное правило «.переписка { min-height: 45vh }» писано для
     страницы чата Авито, где прокручивается вся страница. Здесь колонка
     фиксированной высоты режет лишнее, и лента, не умеющая ужаться,
     выталкивала поле ответа и «Отправить» под обрез (01.10.2026). */
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  margin: 0;
  padding: .75rem;
}

.колонка-разговор .написать {
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--тг-край);
  border-radius: 0;
  background: var(--тг-фон);
}

/* Пузыри: свой светло-зелёный, чужой белый, оба без рамки. */
.колонка-разговор .реплика {
  border: 0;
  box-shadow: 0 1px 1px rgba(16, 35, 47, .12);
  max-width: min(78%, 34rem);
}
.колонка-разговор .реплика.своя { background: var(--тг-своё); border-radius: 12px 12px 4px 12px; }
.колонка-разговор .реплика.чужая { background: var(--тг-чужое); border-radius: 12px 12px 12px 4px; }
.колонка-разговор .реплика .время { color: var(--тг-тихо); }
.колонка-разговор .плашка-дня { background: rgba(0, 0, 0, .18); color: #fff; border: 0; }

/* ---- карточка собеседника ---- */

.свернуть-контакт {
  position: absolute;
  top: .35rem; left: .35rem;
  width: 1.6rem; height: 1.6rem;
  padding: 0;
  line-height: 1;
  font-size: 1.1rem;
  color: var(--тг-тихо);
  background: var(--тг-фон);
  border: 1px solid var(--тг-край);
  border-radius: 50%;
  cursor: pointer;
}
.свернуть-контакт:hover { background: var(--тг-наведение); }
.колонка-контакт .нутро-контакта { padding-top: 1.6rem; }

/* Свёрнутая колонка остаётся полоской со стрелкой: совсем убирать нельзя,
   про неё забудут. */
.мессенджер.с-контактом.карточка-свёрнута {
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr) 2.4rem;
}
.колонка-контакт.свёрнута { padding: .35rem; overflow: hidden; }
.колонка-контакт.свёрнута .нутро-контакта { display: none; }
.колонка-контакт.свёрнута .свернуть-контакт { position: static; }

.колонка-контакт h2 { margin-top: .2rem; font-size: 1rem; }
.колонка-контакт h3 { font-size: .9rem; margin: .8rem 0 .3rem; }

.пусто-разговор { margin: auto; text-align: center; color: var(--тг-тихо); }

.назад-к-списку { display: none; }

/* ---------- Телефон: один столбец и переходы, как в мессенджере ----------

   Список — первый экран, разговор — второй, из него стрелка назад.
   Переключает адрес, а не скрипт: есть «?чат=N» — показываем разговор.
   Поэтому кнопка «назад» браузера ведёт себя правильно, а без JS ничего
   не ломается. */
@media (max-width: 78rem) {
  .мессенджер,
  .мессенджер.без-разговора,
  .мессенджер:not(.с-контактом),
  .мессенджер.с-контактом.карточка-свёрнута {
    display: block;
    grid-template-columns: none;
    height: calc(100vh - 8rem);
    min-height: 26rem;
  }

  .колонка-список,
  .колонка-разговор { height: 100%; margin: 0; }

  /* Открыт разговор — списка не видно, и наоборот. */
  .мессенджер.есть-разговор .колонка-список { display: none; }
  .мессенджер:not(.есть-разговор) .колонка-разговор { display: none; }

  .назад-к-списку {
    display: block;
    flex: 0 0 auto;
    padding: .5rem .75rem;
    background: var(--тг-фон);
    border-bottom: 1px solid var(--тг-край);
    color: var(--тг-синий);
    text-decoration: none;
    font-size: .95rem;
  }

  /* Карточка собеседника на телефоне идёт под разговором обычной
     прокруткой: вклинивать её колонкой некуда. */
  .колонка-контакт { height: auto; margin-top: .5rem; }
  .мессенджер:not(.есть-разговор) .колонка-контакт { display: none; }
  .свернуть-контакт { display: none; }
  .колонка-контакт .нутро-контакта { padding-top: 0; }
}

/* Вложения к сообщению. */
.вложения { margin: .4rem 0; }
.вложения > summary { cursor: pointer; font-size: .9rem; color: var(--приглушён); }
.вложения .галочки { margin: .4rem 0; }
.прочие-материалы > summary {
  cursor: pointer; font-size: .85rem; color: var(--приглушён); margin-top: .4rem;
}
.свой-файл { display: block; margin-top: .5rem; font-size: .9rem; }
.вложение { font-size: .85rem; opacity: .85; margin-top: .2rem; }

/* Странички: номера в ряд, текущая без ссылки. */
.странички {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  margin: .5rem 0;
  font-size: .9rem;
}
.странички a,
.странички .тек {
  padding: .15rem .5rem;
  border: 1px solid var(--линия);
  border-radius: 6px;
  text-decoration: none;
}
.странички .тек { background: var(--текст); color: #fff; border-color: var(--текст); }
.странички .пропуск { color: var(--приглушён); border: 0; }

/* Телефон в списке клиентов: цифры не должны переноситься посреди номера. */
.телефон { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Цена объявления в шапке чата: она важнее остального в этой строке. */
.цена { font-weight: 600; }

details {
  margin: .75rem 0;
  padding: .5rem .75rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
}

summary { cursor: pointer; font-size: .9rem; color: var(--свой); }
details .карточка-форма { margin-top: .75rem; border: none; padding: 0; background: none; }

/* ---------- Быстрые фразы в чате ---------- */

.фразы { position: relative; margin-bottom: .5rem; }
.фразы input { width: 100%; }

#список-фраз {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  /* В потоке страницы, а не поверх: плавающий список обрезался рамкой
     колонки и закрывал соседние блоки (заказчик, 10.10.2026). */
  max-height: min(24rem, 50vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

#список-фраз li { padding: .5rem .7rem; cursor: pointer; border-bottom: 1px solid var(--линия); }
#список-фраз li:last-child { border-bottom: none; }
#список-фраз li:hover { background: var(--фон); }
#список-фраз li div { color: var(--приглушён); font-size: .85rem; margin-top: .2rem; }

/* ---------- Совпадения карточек ---------- */

.пара {
  margin: .75rem 0;
  padding: .75rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
}

.пара .телефон { font-weight: 600; font-variant-numeric: tabular-nums; }

.пара .две-карточки {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: .5rem 0;
}

/* ---------- Полоса аккаунтов мессенджеров ---------- */

.аккаунты-полоса {
  list-style: none;
  margin: .75rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.аккаунты-полоса li {
  padding: .35rem .7rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-left: 3px solid var(--линия);
  border-radius: 8px;
  font-size: .85rem;
}

.аккаунты-полоса .состояние-ok { border-left-color: var(--свой); }
.аккаунты-полоса .состояние-need_login,
.аккаунты-полоса .состояние-blocked { border-left-color: var(--тревога); }

/* ---------- Обработанность диалогов ---------- */

/* Кнопка стоит справа от имени и объявления, а не над ними: отдельная
   строка сверху отодвигала бы переписку вниз на каждом экране. */
.шапка-чата {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.шапка-текст { min-width: 0; }

.действие-обработан {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-left: auto;
}

.лента .новый a { border-left: 3px solid var(--свой); background: #f7fbf9; }
.лента .новый .имя::before { content: '● '; color: var(--свой); }

.обработан { color: var(--приглушён); font-size: .8rem; }

.значок {
  margin-left: .4rem;
  padding: 0 .35rem;
  min-width: 1.1rem;
  display: inline-block;
  text-align: center;
  font-size: .75rem;
  line-height: 1.1rem;
  border-radius: 999px;
  background: var(--тревога);
  color: #fff;
}

.шапка nav a.тек .значок { background: #fff; color: var(--текст); }

/* ---------- Карточка клиента: на ноутбуке в две колонки ---------- */

/* Карточка писалась под телефон, одним столбцом. На ноутбуке она уезжала
   на три экрана вниз, и половина ширины при этом пустовала. Слева — кто
   это, справа — что с ним делали; ниже 64rem всё складывается обратно. */
.карточка-клиента { display: grid; gap: 1rem; align-items: start; }
/* На телефоне колонка не шире экрана. Без этого дорожка грида росла до
   самой широкой несжимаемой строки внутри, и правый край карточки срезало
   (16.10.2026: строки мессенджеров «идёт проверка» — 440 точек на экране
   в 390). Списки внутри — тоже сетки, им то же правило. */
.карточка-клиента,
.карточка-клиента .список { grid-template-columns: minmax(0, 1fr); }

/* Порог намеренно низкий. На ноутбуке 1366×768 с укрупнённым шрифтом
   Windows (125–150 %) окно в CSS-пикселях выходит около 900–1090 — то
   есть по меркам вёрстки это «планшет», и при пороге в 64rem карточка
   осталась бы одностолбцовой ровно там, где на неё и жалуются. */
@media (min-width: 58rem) {
  .карточка-клиента {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: 1rem 1.25rem;
  }
  .карточка-клиента .карточка-форма { max-width: none; }
  .карточка-клиента > div > :first-child { margin-top: 0; }
}

@media (min-width: 64rem) {
  .карточка-клиента {
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    gap: 1rem 1.5rem;
  }
  /* Формы внутри колонок больше не жмутся к 34rem: ширину задаёт колонка,
     и поля тянутся по ней. */
  .карточка-клиента .карточка-форма { max-width: none; }
  /* Первый заголовок в колонке не отбиваем сверху: колонки начинаются
     вровень, а лишний отступ это ломает. */
  .карточка-клиента > div > :first-child { margin-top: 0; }
}

/* Поля внутри карточки должны СЖИМАТЬСЯ под свою колонку.
   Ячейка грида по умолчанию не уже своего содержимого (min-width: auto),
   а у полей ввода своя природная ширина. Без этих трёх правил поля
   распирали дорожки и вылезали за белый прямоугольник формы — справа их
   просто срезало краем страницы. */
.карточка-клиента .карточка-форма > *,
.карточка-клиента .карточка-форма label { min-width: 0; }

.карточка-клиента .карточка-форма input,
.карточка-клиента .карточка-форма select,
.карточка-клиента .карточка-форма textarea { width: 100%; max-width: 100%; }

/* Пара полей в одной строке («проект и пакет», «дата и время») делит
   ширину пополам, а не растёт по содержимому. */
.карточка-клиента .пара-полей { min-width: 0; }
.карточка-клиента .пара-полей > * { flex: 1 1 0; min-width: 0; }
.карточка-клиента .пара-полей input[type="time"] { flex: 0 0 7rem; }

/* Правка в две дорожки, когда ширина позволяет: «Имя» и «Город» рядом,
   а не друг под другом. */
@media (min-width: 68rem) {
  .карточка-клиента { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); }
  .карточка-клиента .карточка-форма { grid-template-columns: 1fr 1fr; }
  .карточка-клиента .карточка-форма > button,
  .карточка-клиента .карточка-форма > fieldset { grid-column: 1 / -1; }
  /* Поле из двух половинок («проект и пакет») в половине ширины
     становится совсем тесным — обе подписи обрезаются. Такому полю
     отдаём строку целиком. */
  .карточка-клиента .карточка-форма > label:has(.пара-полей) { grid-column: 1 / -1; }
  .карточка-клиента .карточка-форма > .комментарий-клиента { grid-column: 1 / -1; }
}
/* Комментарий — одна-две строки, растягивать вниз незачем. */
.комментарий-клиента textarea { resize: none; min-height: 0; line-height: 1.35; }

/* ---------- Быстрый отчёт ---------- */

/* Чаще всего в карточку заходят сказать одно слово: «не дозвонился».
   Полная запись просит вид, текст, файлы и следующий контакт — ради
   одного слова это шесть движений, и запись просто не делается. */
.быстрый-отчёт {
  display: grid;
  gap: .5rem;
  padding: .75rem;
  margin: .5rem 0 1rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
}

.быстрый-отчёт .заготовки { display: flex; flex-wrap: wrap; gap: .4rem; }

.быстрый-отчёт .ярлык-кнопка {
  padding: .3rem .7rem;
  font-size: .85rem;
  line-height: 1.3;
  background: var(--фон);
  color: var(--текст);
  border: 1px solid var(--линия);
  border-radius: 999px;
  cursor: pointer;
}

.быстрый-отчёт .ярлык-кнопка:hover { border-color: var(--главный); color: var(--главный); }

/* Заготовка — это выбор, а не кнопка отправки. Сам переключатель прячем,
   вид держит подпись: так строка остаётся полосой ярлыков, а не рядом
   кружков с текстом. */
.быстрый-отчёт .выбор-заготовки {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.быстрый-отчёт .выбор-заготовки:checked + .ярлык-кнопка {
  background: var(--главный, #2563eb);
  border-color: var(--главный, #2563eb);
  color: #fff;
}
/* Обводка при переходе клавишей: без неё выбор с клавиатуры невидим. */
.быстрый-отчёт .выбор-заготовки:focus-visible + .ярлык-кнопка {
  outline: 2px solid var(--главный, #2563eb);
  outline-offset: 2px;
}
.быстрый-отчёт .ярлык-кнопка { display: inline-block; user-select: none; }

.быстрый-отчёт .пара-полей { display: flex; gap: .4rem; }
.быстрый-отчёт .пара-полей input { flex: 1 1 auto; min-width: 0; }
.быстрый-отчёт .пояснение { font-size: .8rem; }

/* Пояснение про роли: свёрнуто по умолчанию — читают его один раз,
   а место в списке людей занимало бы постоянно. */
.пояснение-роли { margin: 0 0 .75rem; }
.пояснение-роли summary { cursor: pointer; color: var(--ссылка, #2563eb); font-size: .9rem; }
.пояснение-роли dl { margin: .5rem 0; }
.пояснение-роли p { font-size: .85rem; color: var(--приглушён); margin: .5rem 0 0; }

/* ---------- Отчёт о контакте: статус и следующий шаг ---------- */

/* Статус спрашивается вместе с отчётом и стоит ПЕРЕД заготовками:
   сначала «как теперь дела», потом «что было». Иначе кнопка нажимается
   раньше, чем взгляд доходит до поля, и браузер ругается на пустое. */
.статус-после {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin: 0;
  font-size: .9rem;
}
.статус-после select { min-width: 12rem; }

/* К какому звонку отчёт — ярлыками первой строкой формы, с подписью ряда
   слева. Списком внизу формы его не находили (заказчик, 06.10.2026). */
.звонки-отчёта { align-items: center; padding-bottom: .5rem; border-bottom: 1px dashed var(--линия); }
.подпись-ряда { font-size: .8rem; color: var(--приглушён); margin-right: .2rem; }
/* Разговор без отчёта — тёплым цветом, пока не выбран. */
.быстрый-отчёт .ярлык-кнопка.нужен-отчёт { background: #fff8e6; border-color: #e0b955; }
.разговор-без-отчёта {
  margin: 0;
  padding: .3rem .6rem;
  background: #fff8e6;
  border: 1px solid #e8d9a8;
  border-radius: 8px;
  font-size: .85rem;
}

/* Задачи в карточке: срок и дело слева, действия справа, одной строкой. */
.задачи-карточки li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; }
.задачи-карточки .суть { flex: 1 1 12rem; }
.задачи-карточки .действия { display: flex; gap: .6rem; white-space: nowrap; }
.задачи-карточки li > .пояснение { flex: 1 1 100%; }
.задачи-карточки li.просрочена { border-left: 3px solid var(--тревога); }
.задачи-карточки li.просрочена b { color: var(--тревога); }

/* Свёрнутое под задачами и историей — ссылкой, а не кнопкой: нужно реже. */
.под-задачами { display: flex; flex-direction: column; gap: .3rem; margin: .3rem 0 1rem; }
.под-задачами details,
details.давние-записи,
.журнал details.правка:not([open]) { margin: 0; padding: 0; background: none; border: none; }
.журнал details.правка:not([open]) { margin-top: .2rem; }
.под-задачами summary,
.давние-записи summary { cursor: pointer; font-size: .88rem; color: var(--ссылка, #2563eb); width: max-content; }
.сделанные-задачи summary { color: var(--приглушён); }
.новая-задача[open] { padding: .6rem .75rem; background: var(--карточка); border: 1px solid var(--линия); border-radius: 10px; }
.новая-задача[open] summary { margin-bottom: .4rem; }

/* Вопрос о следующей задаче виден сразу после отчёта и отличается фоном:
   это не часть журнала, а вопрос, на который ждут ответа. */
.следующий-шаг {
  margin: .75rem 0;
  padding: .6rem .75rem;
  background: #f2f8ff;
  border: 1px solid #cfe2f5;
  border-radius: 10px;
}
.следующий-шаг .итог-отчёта { margin: 0 0 .5rem; font-size: .9rem; }
.следующий-шаг .строка-формы { flex-wrap: wrap; gap: .4rem; }

/* Срок задачи одной строкой: день, время, примечание, кнопка.
   Одинаково в обеих формах — и в вопросе после отчёта, и в постановке
   внизу карточки.

   Раньше здесь не было никакого ряда вовсе: строчка с временем и кнопкой
   лежала в обычном блоке, поля текли как текст, и «не нужно» уезжало на
   свою строку, а время вставало за кнопкой. Выглядело сломанным, потому
   что и было сломано: ряд задавался только внутри .быстрый-отчёт, а этот
   блок лежит в другом месте разметки. */
.срок-задачи {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
}
.срок-задачи .поле-день { flex: 0 0 9.5rem; min-width: 0; }
.срок-задачи .поле-время { flex: 0 0 5rem; min-width: 0; text-align: center; }
/* Примечание забирает остаток строки и ужимается первым: кнопке и ссылке
   «не нужно» ужиматься некуда — они и так по своей ширине. */
.срок-задачи .поле-примечания { flex: 1 1 12rem; min-width: 7rem; }
.срок-задачи button,
.срок-задачи .ссылка { flex: 0 0 auto; white-space: nowrap; }

/* На узком экране примечание встаёт своей строкой целиком: ужимать его до
   трёх видимых букв ради того, чтобы всё влезло в ряд, — хуже переноса. */
@media (max-width: 30rem) {
  .срок-задачи .поле-примечания { flex: 1 1 100%; }
}

/* ЭКРАН РАЗГОВОРА НА ТЕЛЕФОНЕ.
   Заказчик (27.09.2026) прислал снимок: служебные блоки съели экран, самой
   переписки видно одну строку. Правило простое — на узком экране главное
   это переписка и поле ответа, всё остальное ужимается или прячется. */
@media (max-width: 40rem) {
  /* Пояснения, которые в каждом чате одинаковы. */
  .пояснение-отправки { display: none; }
  .шапка-чата .объявление { font-size: .78rem; }
  .шапка-чата h1 { font-size: 1.05rem; }

  /* Переписка занимает экран, а не полоску между блоками. */
  .переписка { min-height: 45vh; }

  /* Кнопки разговора — в одну строку и мелко. */
  .действие-обработан { margin: .3rem 0; }
  .действие-обработан button { padding: .3rem .7rem; font-size: .85rem; }

  /* Поле ответа: две строки, как просил заказчик. */
  .написать textarea { min-height: 3.6rem; }
  .написать .под-полем { gap: .4rem; }
}

/* Поиск фраз и скрепка — в одной строке: отдельная строка «Приложить файл»
   съедала высоту в каждом чате, а файл прикладывают редко. */
.строка-вставки { display: flex; align-items: flex-start; gap: .4rem; }
.строка-вставки .фразы { flex: 1 1 auto; min-width: 0; }
.строка-вставки .скрепка {
  flex: 0 0 auto;
  padding: .45rem .7rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--текст);
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 8px;
}
.строка-вставки .скрепка.есть { border-color: var(--текст); font-weight: 600; }

/* Окно выбора файлов: одинаково удобно на телефоне и на ноутбуке. */
dialog.вложения {
  width: min(34rem, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  padding: .9rem;
  border: 1px solid var(--линия);
  border-radius: 10px;
  color: var(--текст);
  background: var(--фон);
}
dialog.вложения::backdrop { background: rgba(0, 0, 0, .45); }
dialog.вложения .заголовок-окна {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .6rem;
}
dialog.вложения .закрыть {
  padding: .2rem .55rem; cursor: pointer; line-height: 1; font-size: 1rem;
  color: var(--приглушён);
  border: 1px solid var(--линия); border-radius: 8px; background: var(--карточка);
}

/* Низ окна вложений: слева сколько выбрано, справа кнопка, которой выбор
   и заканчивают. Раньше окно закрывалось только неприметным «Готово» в
   шапке, и его не находили (заказчик, 29.09.2026). */
dialog.вложения .низ-окна {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .9rem;
  padding-top: .7rem;
  border-top: 1px solid var(--линия);
}
dialog.вложения .выбрано { font-size: .85rem; color: var(--приглушён); }
dialog.вложения .приложить { padding: .45rem 1.1rem; }
/* Выбрано хоть что-то — кнопка становится главной на вид, а не только
   по названию. */
dialog.вложения .приложить.есть { background: var(--свой); border-color: var(--свой); }

/* Листание дней: стрелки по краям диапазона.
   Стоят в одной строке с заголовком «Задачи» — это главный отбор
   страницы, и ради него не стоит опускать глаза ниже. */
.листалка {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}
.листалка .стрелка {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Размер пальца, а не размер знака: листать будут с телефона, и
     промахиваться по стрелке в пол-сантиметра — обычное дело. */
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .4rem;
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  color: var(--текст);
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 8px;
}
.листалка .стрелка:hover { background: var(--линия); }
.листалка input[type="date"] { min-width: 0; }

/* ОТБОРЫ ЗАДАЧ — ОДНА ПОЛОСА ОДНОЙ ВЫСОТЫ.
   Кнопка «Показать» была заметно выше выпадающих списков: у всех полей
   одинаковые отступы, но браузер рисует select по своим меркам, и padding
   сходится не всегда. Поэтому здесь высота задана прямо, а вертикальные
   отступы сняты — тогда сходятся и списки, и кнопка, и поля дат, и
   стрелки (заказчик, 28.09.2026). */
.заголовок-задач { margin: 0 0 .6rem; }

.отбор-задач .строка-формы { align-items: center; }

/* Дни уезжают вправо, к краю полосы. При нехватке ширины строка
   переносится, и они встают под отборами — на телефоне иначе никак. */
.отбор-задач .листалка { margin-left: auto; }

.отбор-задач .строка-формы select,
.отбор-задач .строка-формы button,
.отбор-задач .строка-формы input[type="date"],
.отбор-задач .листалка .стрелка {
  height: 2.25rem;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

/* Стрелки — чёрные, как «Показать»: это тоже действие, а не подпись.
   Ширину держим прежнюю — пальцем на телефоне метятся в площадь, а не
   в знак. */
.отбор-задач .листалка .стрелка {
  font-size: 1.05rem;
  color: #fff;
  background: var(--текст);
  border-color: var(--текст);
}
.отбор-задач .листалка .стрелка:hover { background: var(--текст); opacity: .9; }

.статус-записи { color: var(--приглушён); }

/* Подробности контакта — поле в несколько строк: сюда пишут, о чём
   договорились, а не одно слово. Одно слово даёт заготовка выше. */
.быстрый-отчёт .подробности { display: block; margin: 0; }
.быстрый-отчёт .подробности textarea { width: 100%; resize: vertical; }
.быстрый-отчёт .под-отчётом {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-top: 0;
}

/* ---------- Объявление на экране первого письма ---------- */

/* Стоит над формой: первое сообщение почти всегда начинается с «вы писали
   по объявлению…», и ссылка нужна до того, как начали печатать. */
.объявление-к-письму {
  margin: .75rem 0;
  padding: .6rem .75rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
}
.объявление-к-письму .строка-ссылки {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  margin: .3rem 0;
}
/* Адрес длинный: на узком экране он должен переноситься, а не расталкивать
   страницу вбок. */
.объявление-к-письму .строка-ссылки a {
  word-break: break-all;
  font-size: .85rem;
}
.объявление-к-письму .цена { color: var(--приглушён); font-size: .9rem; }

/* ---------- Мелочи узкого экрана ----------

   Общее правило, которое стоило отдельной поломки: если ряд из ярлыков
   или кнопок может не поместиться, ему мало flex-wrap. Нужно ещё
   запретить ужимать сами ярлыки — иначе флексбокс не переносит их, а
   сдавливает до ширины буквы, и слово встаёт столбиком. */
.шапка nav a,
.заготовки .ярлык-кнопка,
.под-отчётом button,
.строка-формы button { white-space: nowrap; }

.заготовки .ярлык-кнопка { flex: 0 0 auto; }

/* Кнопка «Добавить контакт» стоит в том же ряду, что и отборы: пусть
   переносится целиком, а не сдавливается. */
.переключатель .кнопка { white-space: nowrap; flex: 0 0 auto; }

/* ---------- Звонилка ---------- */

/* Узкой колонкой по центру: это не таблица и не лента, а телефон.
   Растянутая на весь экран клавиатура выглядит нелепо и попадать по ней
   труднее — цифры разъезжаются к краям. */
.звонилка {
  max-width: 22rem;
  margin: 1rem 0;
}

.звонилка .набор {
  width: 100%;
  font-size: 1.6rem;
  letter-spacing: .05em;
  text-align: center;
  padding: .5rem;
}

.звонилка .клавиши {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: .75rem 0;
}

/* Крупные: пальцем на телефоне в мелкое не попасть, а звонят чаще всего
   именно с телефона. */
.звонилка .клавиша {
  padding: .9rem 0;
  font-size: 1.3rem;
  background: var(--карточка);
  color: var(--текст);
  border: 1px solid var(--линия);
  border-radius: 10px;
  cursor: pointer;
}
.звонилка .клавиша:hover { background: var(--фон); border-color: var(--главный); }
.звонилка .клавиша:active { transform: translateY(1px); }

.звонилка .под-набором {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
}

.звонилка .кнопка-звонка {
  flex: 1 1 100%;
  padding: .7rem;
  font-size: 1rem;
}
.звонилка .кнопка-звонка[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Окно подтверждения звонка ---------- */

.окно-звонка {
  max-width: 26rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--линия);
  border-radius: 12px;
  background: var(--карточка);
  color: var(--текст);
}
.окно-звонка::backdrop { background: rgba(0, 0, 0, .35); }
.окно-звонка h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.окно-звонка p { margin: .4rem 0; }
.окно-звонка .кому { font-size: 1.05rem; }

/* Кнопки в углу, «Звонить» — крупная и справа: отмена должна быть
   неудобнее подтверждения, но не спрятана. */
.окно-звонка .кнопки-окна {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 1rem;
}
.окно-звонка .кнопка-звонка { padding: .6rem 1.2rem; font-size: 1rem; }

/* ---------- Полоса клиента над перепиской ----------

   Кнопки здесь строчные (`inline-block`) и с полями — их коробка выше
   строки текста, и на узком экране она наезжала на соседние строки:
   «Создать карточку» перекрывало слова «Карточки нет». Строчная раскладка
   этого не лечит в принципе — переносится строка, а не коробка.

   Делаем полосу флексом: кнопки становятся отдельными элементами, ряд
   переносится целиком, наезжать нечему. */
.полоса-клиента {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  align-items: center;
}

/* Кнопке в полосе не даём ни растягиваться, ни сжиматься: сжатая кнопка
   складывает надпись столбиком по букве — уже проходили с отборами. */
.полоса-клиента .кнопка { flex: 0 0 auto; }

/* «Обработан» и «В архив» — тем же порядком: ряд переносится, кнопки
   остаются целыми. */
.действие-обработан { flex-wrap: wrap; }
.действие-обработан button,
.действие-обработан .ссылка { white-space: nowrap; }

/* ---------- Настройки: сводка и свёрнутые разделы ----------

   Страница была одним длинным полотном: всё развёрнуто, редкое вперемешку
   с ежедневным. Смотрят тут каждый день на одно — жив ли агент, жива ли
   АТС, — а правят раз в месяц. Поэтому сверху сводка состояния, ниже
   разделы, свёрнутые по умолчанию. */

.сводка-настроек {
  list-style: none;
  margin: .75rem 0 1.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .5rem;
}

.сводка-настроек li {
  padding: .5rem .7rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-left: 3px solid var(--линия);
  border-radius: 8px;
}
.сводка-настроек strong { display: block; font-size: .85rem; color: var(--приглушён); font-weight: 600; }
.сводка-настроек span { font-size: .95rem; }

/* Цветом — только состояние связи: зелёное и красное здесь означают
   «работает» и «нет», а не «хорошо» и «плохо» вообще. */
.сводка-настроек .хорошо { border-left-color: #3a9a5c; }
.сводка-настроек .плохо { border-left-color: #c0392b; }
.сводка-настроек .внимание { border-left-color: #d29b22; }

.раздел-настроек {
  margin: .5rem 0;
  padding: .25rem .75rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
}

/* Заголовок раздела — сам по себе кнопка. Стрелку браузера оставляем:
   по ней сразу видно, что блок раскрывается. */
.раздел-настроек > summary {
  cursor: pointer;
  padding: .5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .75rem;
  align-items: baseline;
}
.раздел-настроек > summary .имя-раздела { font-size: 1.05rem; font-weight: 600; }
.раздел-настроек > summary:hover .имя-раздела { color: var(--главный); }
.раздел-настроек[open] > summary { border-bottom: 1px solid var(--линия); margin-bottom: .5rem; }

/* Внутренние заголовки мельче: раздел уже назван в своей шапке. */
.раздел-настроек h3 { font-size: .95rem; margin: 1rem 0 .4rem; }

/* Цифра в шапке раздела: сколько там всего. По ней видно, есть ли смысл
   раскрывать, не раскрывая. */
.счёт-раздела {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0 .35rem;
  font-size: .8rem;
  text-align: center;
  color: var(--приглушён);
  background: var(--фон);
  border: 1px solid var(--линия);
  border-radius: 999px;
}

/* «Звонок от CRM» над списками задач и клиентов (заказчик, 07.10.2026):
   клиент, по которому только что звонила АТС, — первым и заметно. */
.заголовок-звонка-crm { margin: 1rem 0 .4rem; font-size: 1rem; }
.лента.звонок-crm li a { border-left: 3px solid var(--свой); background: #f2f8f4; }

/* «В архив» / «Обработан» — справа вверху шапки, рядом с именем, а не
   отдельной строкой под ним (заказчик, 10.10.2026). */
.шапка-чата { flex-wrap: nowrap; }
.шапка-чата .шапка-текст { flex: 1 1 auto; }
.шапка-чата .действие-обработан {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  flex-wrap: nowrap;
}

/* Фильтры «Клиентов» и «Задач» свёрнуты по умолчанию (заказчик, 10.10.2026). */
.фильтры-свёрнутые { margin: .5rem 0; }
.фильтры-свёрнутые > summary {
  cursor: pointer;
  padding: .45rem .75rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 8px;
  color: var(--приглушён);
  font-size: .9rem;
  list-style: none;
}
.фильтры-свёрнутые > summary::-webkit-details-marker { display: none; }
.фильтры-свёрнутые > summary::before { content: "▸ "; }
.фильтры-свёрнутые[open] > summary::before { content: "▾ "; }
.фильтры-свёрнутые[open] > summary { margin-bottom: .5rem; }

/* Быстрые кнопки над «Фильтрами»: Все / Активные / Активные и общаются
   (владелец, 28.10.2026). На телефоне — одной строкой, переносом при нехватке. */
.быстрые-отборы { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.быстрые-отборы .быстрый {
  padding: .4rem .8rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 999px;
  color: var(--текст);
  text-decoration: none;
  font-size: .9rem;
  white-space: nowrap;
}
.быстрые-отборы .быстрый.выбран { background: var(--свой); border-color: var(--свой); color: #fff; }
.быстрые-отборы .сколько { opacity: .7; margin-left: .15rem; }

/* «Мой аккаунт»: библиотека, уведомления, обновить, выйти — крупными
   строками, чтобы попадать пальцем (заказчик, 10.10.2026). */
.мой-аккаунт {
  display: flex;
  flex-direction: column;
  margin: .75rem 0 1rem;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
  overflow: hidden;
}
.мой-аккаунт .кто-вы { padding: .6rem .9rem; color: var(--приглушён); font-size: .9rem; border-bottom: 1px solid var(--линия); }
.мой-аккаунт a { padding: .75rem .9rem; border-bottom: 1px solid var(--линия); text-decoration: none; }
.мой-аккаунт a:last-child { border-bottom: 0; }
.мой-аккаунт a .пояснение { display: block; font-size: .8rem; margin: .1rem 0 0; }

/* Карточка клиента: имя с городом и карандашом в шапке, статус и стиль в строку (11.10.2026) */
.шапка-клиента { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.шапка-клиента h1 { margin: 0; }
.город-клиента { color: var(--приглушён); }
.карандаш { background: none; border: 0; padding: 0 .3rem; font-size: 1.2rem; color: var(--приглушён); cursor: pointer; margin-left: auto; }
.правка-имени { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; margin: 0 0 1rem; }
.правка-имени[hidden] { display: none; }
.правка-имени label { flex: 1 1 10rem; margin: 0; }
.пара-селектов { margin: 0; }
.пара-селектов label { flex: 1 1 0; min-width: 0; }
.пара-селектов select { width: 100%; }

/* Справка по вкладке: кнопка «?» в шапке карточки (11.10.2026) */
.вопрос { background: none; border: 1px solid var(--линия); border-radius: 50%; width: 1.4rem; height: 1.4rem; padding: 0; font-size: .8rem; color: var(--приглушён); cursor: pointer; margin-left: auto; }
.вопрос + .карандаш { margin-left: 0; }
/* Карандаш — за именем и городом, время у клиента — после него (20.10.2026) */
.шапка-клиента .карандаш { margin-left: 0; }
.время-клиента { color: var(--приглушён); font-size: .85rem; }
.время-клиента b { color: var(--текст); font-size: 1.25rem; font-weight: 700; margin-left: .2rem; font-variant-numeric: tabular-nums; }
.справка-вкладки { background: var(--карточка); border: 1px solid var(--линия); border-radius: 10px; padding: .6rem .9rem; margin: 0 0 1rem; font-size: .9rem; color: var(--приглушён); }
.справка-вкладки[hidden] { display: none; }
.справка-вкладки p { margin: .2rem 0; }

/* Задачи: заголовок, «?» и переключение дней в одной строке (11.10.2026) */
.шапка-задач { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; }
.шапка-задач h1 { margin: 0; }
.шапка-задач .вопрос { margin-left: 0; }
.листалка-шапки { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-weight: 600; white-space: nowrap; }
.листалка-шапки .стрелка { font-size: 1.6rem; line-height: 1; padding: 0 .4rem; text-decoration: none; }
h1 .вопрос { margin-left: .4rem; vertical-align: middle; }
/* Задачи: стрелки дней — крупные кнопки под палец (11.10.2026) */
.листалка-шапки { gap: .4rem; }
.листалка-шапки .стрелка { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 2.6rem; padding: 0 .9rem; font-size: 1.5rem; background: var(--карточка); border: 1px solid var(--линия); border-radius: 10px; color: inherit; }
.листалка-шапки .стрелка:active { background: #e6eaf0; }
.листалка-шапки .период { font-size: 1.25rem; font-weight: 700; }

/* Карточка клиента: «Источник» и «Сохранить» в одной строке (11.10.2026) */
.строка-источника { display: flex; gap: .5rem; align-items: flex-end; }
.строка-источника label { flex: 1 1 auto; min-width: 0; margin: 0; }
.строка-источника select { width: 100%; }
.строка-источника button { flex: 0 0 auto; height: 2.6rem; margin: 0; }

/* Поля не вылезают за форму на любых страницах (write.php: «Куда пишем», сообщение) — 11.10.2026 */
.карточка-форма > *, .карточка-форма label { min-width: 0; }
.карточка-форма input, .карточка-форма select, .карточка-форма textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.карточка-форма input[type="checkbox"], .карточка-форма input[type="radio"] { width: auto; }
.карточка-форма .пояснение { overflow-wrap: anywhere; }

/* Заголовок раздела с кнопкой справа (11.10.2026) */
.заголовок-с-кнопкой { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.заголовок-с-кнопкой h2 { margin: 0; }
.заголовок-с-кнопкой form { margin: 0; }

/* Шапка чата: имя-ссылка, ряд кнопок, объявление, мелкая строка аккаунта (11.10.2026) */
.шапка-чата h1 a.имя-карточка { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--приглушён); }
.шапка-чата .ссылки-шапки { display: flex; flex-wrap: wrap; gap: .4rem; margin: .45rem 0 .1rem; }
.шапка-чата .чип { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--линия); border-radius: 999px; background: var(--карточка); font-size: .85rem; text-decoration: none; white-space: nowrap; }
.шапка-чата .объявление { margin-top: .4rem; }
.шапка-чата .низ { margin-top: .3rem; }

/* Шапка чата — компактно: объявление и профиль в одну строку (11.10.2026) */
.шапка-чата .строка-объявления { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-top: .15rem; }
.шапка-чата .объявление-текст { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.шапка-чата .профиль-авито { flex: 0 0 auto; white-space: nowrap; }
.шапка-чата .низ { margin-top: .1rem; }
/* «обработан …» и «вернуть в ленту» — столбиком вплотную, вторая — отдельной строкой справа (11.10.2026) */
.шапка-чата .действие-обработан { gap: .05rem; align-self: flex-start; }
.шапка-чата .действие-обработан .обработан { line-height: 1.2; }
.шапка-чата .действие-обработан button.ссылка { padding: .35rem 0; line-height: 1.2; }
/* Заголовок объявления — целиком, с переносом, без «…» (11.10.2026) */
.шапка-чата .объявление-текст { overflow: visible; text-overflow: clip; white-space: normal; }
.шапка-чата .строка-объявления { align-items: flex-start; }
/* Шапка чата: сетка — имя и «обработан» в первой строке, остальное на всю ширину (11.10.2026) */
.шапка-чата { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; }
.шапка-чата .шапка-текст { display: contents; }
.шапка-чата h1 { grid-column: 1; grid-row: 1; }
.шапка-чата .действие-обработан { grid-column: 2; grid-row: 1; }
.шапка-чата .строка-объявления, .шапка-чата .низ { grid-column: 1 / -1; }
.шапка-чата .объявление-текст { flex: 1 1 auto; }
.шапка-чата .объявление .цена { white-space: nowrap; }

/* Почтовые ящики: таблица прав менеджеров (11.10.2026) */
.права-ящика { border-collapse: collapse; margin: .4rem 0; }
.права-ящика th, .права-ящика td { text-align: left; padding: .25rem .8rem .25rem 0; font-size: .9rem; }
.права-ящика input[type="checkbox"] { width: auto; }

/* Проигрыватель голосового в переписке (11.10.2026) */
.переписка .голосовое { display: block; width: 100%; max-width: 18rem; height: 2.4rem; margin: 0 0 .3rem; }

/* ---------- Старый Safari (iPad на iOS 12, заказчик, 12.10.2026) ----------
   Там нет <dialog>: окно — неизвестный элемент, и без этих правил его
   содержимое стояло прямо на странице. showModal/close ему даёт сценарий
   «совместимость» в layout.php, здесь — как окно выглядит. */
dialog:not([open]) { display: none; }
/* Ширина «по содержимому» — правилом без класса, чтобы ширина, заданная
   самому окну (окно переноса, вложения), его перебивала. */
dialog { width: -webkit-fit-content; width: fit-content; }
.старый-браузер dialog[open] {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1001;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
}
.старый-браузер .фон-окна {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .45);
}

/* Фото в переписке (Telegram, 12.10.2026): по нажатию открывается целиком. */
.переписка .фото-реплики { display: block; margin: 0 0 .3rem; }
.переписка .фото-реплики img { display: block; max-width: 100%; width: 16rem; height: auto; border-radius: 8px; }

/* Сколько всего под отбором клиентов (13.10.2026) */
.найдено-всего { margin: .4rem 0 .6rem; }

/* Звонок: подвкладки «Набрать / Входящие» и список входящих (13.10.2026) */
.подвкладки { display: flex; gap: .4rem; margin: 0 0 .8rem; }
.подвкладки a, .отборы-входящих a {
  padding: .3rem .8rem; border: 1px solid var(--линия); border-radius: 999px;
  color: var(--текст); text-decoration: none; background: var(--карточка);
}
.подвкладки a.тек, .отборы-входящих a.тек { background: var(--текст); border-color: var(--текст); color: #fff; }
.отборы-входящих { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; font-size: .9rem; }
.список.входящие li { padding: .45rem .7rem; background: var(--карточка); border: 1px solid var(--линия); border-radius: 8px; }
.список.входящие li.пропущен { border-left: 4px solid var(--тревога); }
.список.входящие .пропущенный { color: var(--тревога); }
.ярлык.билайн { background: #fff3c4; color: #6b5300; }

/* Ночное ИИ-резюме в карточке и в раскрытой задаче (13.10.2026) */
.сводка-ии { margin: 0 0 .9rem; padding: .6rem .8rem; background: #f6f4fb; border: 1px solid #e2dcf0; border-radius: 10px; font-size: .92rem; }
.сводка-ии .заголовок-сводки { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.сводка-ии p { margin: .35rem 0 0; }
.сводка-ии .подсказка-стадии { color: var(--свой); font-weight: 600; }
.сводка-ии details { margin-top: .4rem; }
.сводка-ии .дни-сводки { margin: .3rem 0 0; padding-left: 1rem; }
.сводка-ии .дни-сводки li { margin: .2rem 0; }
.журнал-задачи .сводка-ии-строка { background: #f6f4fb; border-radius: 6px; }
.журнал-задачи .сводка-ии-строка .суть { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Полоса дозвона, итоги звонков, лента по дням (13.10.2026) */
.полоса-дозвона { margin: 0 0 .9rem; padding: .6rem .8rem; background: var(--карточка); border: 1px solid var(--линия); border-radius: 10px; }
.полоса-дозвона .точки { font-size: 1.25rem; letter-spacing: .1em; line-height: 1.2; }
.полоса-дозвона .итоги-полосы { font-size: .9rem; color: var(--приглушён); }
.полоса-дозвона .кто-ждёт { font-size: .9rem; margin-top: .2rem; }
.итог-звонка { margin-top: .5rem; padding: .45rem .55rem; background: #fff8e1; border: 1px solid #f0e0a8; border-radius: 8px; }
.итог-звонка .кому { display: block; font-size: .88rem; margin-bottom: .3rem; }
.кнопки-итога { display: flex; flex-wrap: wrap; gap: .35rem; }
.кнопки-итога button { padding: .35rem .7rem; font-size: .9rem; }
.вне-crm { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: flex-start; margin-top: .55rem; }
.вне-crm details { min-width: 0; }
.вне-crm summary { cursor: pointer; padding: .25rem .7rem; border: 1px solid var(--линия); border-radius: 999px; background: var(--фон); list-style: none; }
.вне-crm details[open] { flex-basis: 100%; }
.вне-crm details[open] .кнопки-итога { margin-top: .4rem; }
.лента-дней .день-ленты { border-bottom: 1px solid var(--линия); }
.лента-дней summary { display: flex; gap: .6rem; padding: .45rem 0; cursor: pointer; list-style: none; }
.лента-дней .дата-дня { flex: 0 0 3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.лента-дней .сводка-дня { flex: 1 1 auto; min-width: 0; font-size: .92rem; }
.лента-дней .события-дня { margin: 0 0 .5rem 3.6rem; padding: 0; list-style: none; font-size: .88rem; }
.лента-дней .события-дня li { margin: .15rem 0; }
.лента-дней .время-события { color: var(--приглушён); font-variant-numeric: tabular-nums; }
.старый-журнал { margin-top: 1rem; }
.старый-журнал > summary { cursor: pointer; color: var(--приглушён); font-size: .9rem; }
.журнал-задачи .полоса-строка .суть { letter-spacing: .05em; }

/* Факты, алгоритм дозвона и чек-лист разговора (14.10.2026) */
.факты-клиента, .алгоритм-дозвона { margin: 0 0 .9rem; padding: .6rem .8rem; background: var(--карточка); border: 1px solid var(--линия); border-radius: 10px; font-size: .92rem; }
.факты-клиента .заголовок-сводки, .алгоритм-дозвона .заголовок-сводки { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.факты-клиента p, .алгоритм-дозвона p { margin: .3rem 0 0; }
.строка-фактов { font-weight: 600; }
.цитата-клиента { color: var(--текст); font-style: italic; }
.подсказка-стадии-блок, .предложение-алгоритма { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-top: .45rem; padding: .35rem .5rem; background: #eef6ff; border: 1px solid #cfe2fb; border-radius: 8px; }
.предложение-алгоритма { background: #fff8e1; border-color: #f0e0a8; }
.подсказка-стадии-блок form, .предложение-алгоритма form { display: inline; }
.подсказка-стадии-блок button, .предложение-алгоритма button { padding: .3rem .65rem; font-size: .88rem; }
.шаги-цикла { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.шаги-цикла .шаг { padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--линия); font-size: .85rem; background: var(--фон); }
.шаги-цикла .шаг-готов { background: #e6f4ea; border-color: #b7dfc2; }
.шаги-цикла .шаг-сегодня { background: #fff3c4; border-color: #e6c75a; font-weight: 600; }
.шаги-цикла .шаг-пропущен { background: #fde8e6; border-color: #f0b8b3; }
.типовое-сообщение { margin-top: .5rem; }
.типовое-сообщение summary { cursor: pointer; color: var(--главный, #2563eb); }
.типовое-сообщение textarea { width: 100%; margin: .35rem 0; }
.варианты-текста { display: flex; gap: .6rem; }
.ссылка-форма { margin-top: .5rem; }
.ссылка-форма button { background: none; border: none; padding: 0; color: var(--приглушён); text-decoration: underline; cursor: pointer; font-size: .85rem; }
.чек-лист { margin: .5rem 0; display: grid; gap: .35rem; }
.чек-ряд { display: flex; flex-wrap: wrap; gap: .3rem .35rem; align-items: center; }
.чек-ряд .подпись-ряда { flex: 0 0 5.2rem; font-size: .8rem; color: var(--приглушён); }
.чек-ряд input[type="text"], .чек-ряд input:not([type]) { flex: 1 1 12rem; min-width: 0; }
.чек-даты { gap: .4rem .9rem; }
.чек-факты > summary { cursor: pointer; font-size: .9rem; }
.быстрый-отчёт .чек-пункт { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.быстрый-отчёт .чек-пункт:checked + .ярлык-кнопка { background: var(--главный, #2563eb); border-color: var(--главный, #2563eb); color: #fff; }
.быстрый-отчёт .чек-пункт:focus-visible + .ярлык-кнопка { outline: 2px solid var(--главный, #2563eb); outline-offset: 2px; }

/* Подсказки алгоритма на «Задачах» */
.подсказки-алгоритма { margin: 0 0 1rem; padding: .5rem .8rem; background: #fffdf3; border: 1px solid #f0e0a8; border-radius: 10px; }
.подсказки-алгоритма summary { cursor: pointer; }
.подсказки-алгоритма h3 { margin: .7rem 0 .2rem; font-size: .95rem; }
.предложение-строка { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--линия); }
.предложение-строка form { display: inline; }
.предложение-строка button { padding: .25rem .6rem; font-size: .85rem; }
.предупреждение-авито { margin: .3rem 0 0; padding: .35rem .5rem; background: #fff3c4; border: 1px solid #e6c75a; border-radius: 8px; font-size: .88rem; }
.пропущенный-клиента { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; margin: 0 0 .8rem; padding: .5rem .7rem; background: #fde8e6; border: 1px solid #f0b8b3; border-radius: 10px; }
.пропущенный-клиента form { display: inline; }
.пропущенный-клиента button { padding: .3rem .65rem; font-size: .88rem; }

/* Проверка 14.10.2026: «Вне CRM» без вложенной рамки, плашка пропущенного — над колонками */
.вне-crm details { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }
.вне-crm summary { display: inline-block; font-size: .88rem; }
.пропущенный-клиента { margin-top: .2rem; }
.пропущенный-клиента b { flex: 1 1 14rem; }
.подсказки-алгоритма h3 form { margin-left: .5rem; vertical-align: middle; }
.подсказки-алгоритма h3 button { padding: .25rem .6rem; font-size: .85rem; font-weight: normal; }

/* Приоритетный мессенджер — звёздочка (14.10.2026) */
.звезда-форма { margin: 0; display: inline; }
.звезда { background: none; border: 0; padding: .2rem .45rem; font-size: 1.5rem; line-height: 1; color: #c9ced6; cursor: pointer; min-width: 2.6rem; min-height: 2.6rem; }
.звезда.включена { color: #f5a300; }
.приоритет-чип { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: #fff4d6; border: 1px solid #f1d38a; color: #7a5200; font-size: .85rem; white-space: nowrap; }
.верх-строки .звезда-форма { margin-left: auto; order: 2; }

/* Проверка под iPad на iOS 12 (14.10.2026) */
.приоритет-чип[hidden] { display: none; }
.вне-crm summary::-webkit-details-marker, .лента-дней summary::-webkit-details-marker { display: none; }

/* Мессенджеры в карточке: одна строка на мессенджер (14.10.2026) */
.список li.мес-строка { display: flex; align-items: center; flex-wrap: nowrap; gap: .4rem; padding: .15rem .5rem; }
/* Название и метка сжимаются последними, но сжимаются — с многоточием. */
.мес-строка > strong, .мес-строка .ярлык { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.мес-строка .мес-детали { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.мес-строка .звезда-форма { margin-left: auto; }
.мес-строка .мес-детали + .звезда-форма { margin-left: 0; }
.мес-строка .звезда { min-width: 0; min-height: 0; padding: .1rem .3rem; font-size: 1.35rem; }
.мес-строка .мес-написать { padding: .3rem .6rem; font-size: .88rem; white-space: nowrap; }
.мес-строка .ярлык { white-space: nowrap; }

/* Чек-лист отчёта, упрощённый (14.10.2026) */
.чек-заголовок { font-size: .85rem; color: var(--приглушён); margin: .2rem 0 .3rem; }
.итог-сетка { display: grid; grid-template-columns: 1fr 1fr; grid-gap: .4rem; gap: .4rem; }
.итог-сетка .ярлык-кнопка { display: block; text-align: center; padding: .65rem .4rem; font-size: 1rem; border-radius: 10px; }
.чек-условие { margin-top: .5rem; }
.чек-условие[hidden] { display: none; }
.чек-группа { margin-top: .5rem; border-top: 1px solid var(--линия); padding-top: .4rem; }
.чек-группа > summary { cursor: pointer; font-size: .95rem; padding: .3rem 0; }
.чек-счёт { color: var(--главный, #2563eb); font-weight: 600; }
.чек-выяснили { border-top: 1px solid var(--линия); }
.чек-пункты { display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem 0 .2rem; }
.чек-строка { margin: .4rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.чек-строка .подпись-ряда { flex: 0 0 100%; font-size: .8rem; color: var(--приглушён); }
.чек-строка .чек-пункты { padding: 0; }
.чек-строка select { flex: 0 0 auto; width: 9rem; }
.чек-строка input[name="чек_бюджет_точно"] { flex: 1 1 8rem; min-width: 0; }
.чек-скидка { margin-top: .5rem; width: 100%; }
.чек-лист details.чек-группа { background: none; border: 0; border-top: 1px solid var(--линия); border-radius: 0; box-shadow: none; padding: .35rem 0 0; margin: .5rem 0 0; }
.чек-лист details.чек-группа > summary { padding: .35rem 0; }
.чек-лист details.чек-группа details.чек-группа { margin-top: .2rem; padding-top: .2rem; }
.чек-условие .в-строку { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.чек-условие .в-строку input, .чек-условие .в-строку select { flex: 1 1 8rem; min-width: 0; }

/* Вопрос про звонок — над колонками карточки, чек-лист скрывается при «Не дозвонился» (14.10.2026) */
.итог-звонка.итог-наверху { margin: 0 0 .8rem; }
.чек-лист[hidden] { display: none; }

/* Плашка «Звонки — чем кончились?» (14.10.2026): широкий экран — все кнопки сразу,
   узкий — по шагам: «Дозвонился → / Не дозвонился / Сбросил», затем причина. */
.звонки-итог { margin: 0 0 1rem; }
.звонки-итог h2 { font-size: 1rem; margin: .2rem 0 .4rem; }
.звонок-итог { background: #fff8e1; border: 1px solid #f0e0a8; border-radius: 10px; padding: .5rem .7rem; margin: 0 0 .4rem; }
.звонок-итог-верх { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.звонок-итог-верх a { font-weight: 600; }
.звонок-итог-кнопки { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.звонок-итог-кнопки button { padding: .4rem .8rem; border-radius: 999px; font-size: .92rem; white-space: nowrap;
  background: #fff; color: inherit; border: 1px solid #cfd5dc; }
.звонок-итог-кнопки button.главная { background: #1f2933; border-color: #1f2933; color: #fff; }
.звонок-итог-кнопки button.ссылка { border: 0; background: none; text-decoration: underline; padding: .4rem .3rem; }
.звонок-итог .на-широком { display: none; }
.звонок-итог .причина { display: none; }
.звонок-итог.шаг2 .причина { display: inline-block; }
.звонок-итог.шаг2 .итог-разговор, .звонок-итог.шаг2 .итог-шаг2, .звонок-итог.шаг2 button[value="dropped"] { display: none; }
/* Отмеченный итог (23.10.2026): «Отмечено: … · Изменить», кнопки — по «Изменить». */
.звонок-итог .итог-метка, .звонок-итог .итог-изменить { display: none; }
.звонок-итог.отмечен { background: #f4f6f8; border-color: #dde2e7; }
.звонок-итог.отмечен .итог-метка { display: inline; }
.звонок-итог.отмечен .итог-изменить { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .88rem;
  background: #fff; color: inherit; border: 1px solid #cfd5dc; }
.звонок-итог.отмечен .итог-изменить.ссылка { border: 0; background: none; text-decoration: underline; padding: 0; }
.звонок-итог.отмечен .звонок-итог-кнопки { display: none; }
.звонок-итог.отмечен.правка .звонок-итог-кнопки { display: flex; }
.звонок-итог.отмечен.правка .итог-изменить { display: none; }
@media (min-width: 48rem) {
  .звонок-итог .на-узком { display: none !important; }
  .звонок-итог .на-широком { display: inline; }
  .звонок-итог .причина { display: inline-block; }
  .звонок-итог .итог-назад { display: none !important; }
}

/* «О клиенте» — правая колонка карточки (14.10.2026) */
.о-клиенте { background: var(--карточка); border: 1px solid var(--линия); border-radius: 10px; padding: .5rem .75rem; margin: 0 0 1rem; }
.о-ряд { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; padding: .2rem 0; }
.о-статус { background: #fff4d6; border: 1px solid #f1d38a; color: #7a5200; border-radius: 999px; padding: .1rem .6rem; font-weight: 600; }
.о-суть { line-height: 1.45; padding: .4rem 0; margin: .2rem 0; border-top: 1px solid var(--линия); border-bottom: 1px solid var(--линия); }
.о-суть .пояснение { font-size: .78rem; }
.о-дни { margin: .2rem 0; }
.о-дни summary { cursor: pointer; font-size: .88rem; }
.о-дни ul { margin: .3rem 0 0; padding-left: 1rem; font-size: .9rem; }
.о-счёт { font-size: .82rem; background: #f1f3f5; border-radius: 6px; padding: .1rem .45rem; }
.о-плохо { background: #fde8e6; color: #9b1c1c; }

/* ===== Карточка клиента, вариант 3 (14.10.2026) ===== */
/* Левая часть: контакты строкой с комментарием, «＋ контакт», Авито среди мессенджеров, объявление строкой */
.контакты-список li.контакт-строка { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; padding: .25rem .6rem; }
.контакт-знак { width: 1.2rem; text-align: center; }
.контакт-строка .телефон, .контакт-строка > span:nth-child(2) { font-weight: 600; }
.контакт-заметка { flex: 1 1 6rem; min-width: 0; color: var(--приглушён); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.контакт-строка form.встроенная button.ссылка { font-size: .85rem; }
.контакт-правка { display: inline; border: 0; background: none; padding: 0; margin: 0; box-shadow: none; }
.контакт-правка > summary { list-style: none; cursor: pointer; color: #9aa1a9; padding: 0 .2rem; }
.контакт-правка > summary::-webkit-details-marker { display: none; }
.контакт-правка[open] { flex-basis: 100%; }
.контакт-правка form { margin-top: .3rem; }
.контакт-новый { border: 0; background: none; padding: 0; margin: -.2rem 0 .9rem; box-shadow: none; }
.контакт-новый > summary { cursor: pointer; color: var(--главный, #2563eb); font-size: .9rem; list-style: none; }
.контакт-новый > summary::-webkit-details-marker { display: none; }
.контакт-ввод { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; padding: .45rem; border: 1px dashed var(--линия); border-radius: 8px; background: var(--карточка); }
.контакт-ввод select { flex: 0 0 auto; }
.контакт-ввод input { flex: 1 1 9rem; min-width: 0; }
.звезда-место { margin-left: auto; width: 1.9rem; }
.мес-строка .ждёт { color: #15803d; }
.объявление-строка { margin: -.1rem 0 1rem; padding: .35rem .6rem; font-size: .9rem; background: var(--карточка); border: 1px solid var(--линия); border-radius: 8px; line-height: 1.5; }

/* Правая часть: «О клиенте» */
.о-клиенте { padding: .65rem .85rem; border-radius: 12px; }
.о-статус { background: #e8eefc; border-color: #c7d5f7; color: #1e3a8a; }
.о-факты { color: #374151; }
.о-суть { font-size: 1rem; line-height: 1.5; border: 0; padding: .35rem 0; margin: .25rem 0; }
.о-сигналы { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .45rem; }
.о-сигналы span { font-size: .88rem; padding: .15rem .55rem; border-radius: 8px; background: #f3f4f6; }
.о-сигналы .о-плохо { background: #fde8e6; color: #9b1c1c; font-weight: 600; }
.о-контакты { border-top: 1px solid var(--линия); padding-top: .35rem; }
.о-контакт { display: flex; align-items: baseline; gap: .5rem; padding: .12rem 0; font-size: .93rem; }
.о-когда { flex: 0 0 auto; min-width: 6.4rem; color: var(--приглушён); font-size: .84rem; }
.ист-знак { flex: 0 0 1.2rem; width: 1.2rem; text-align: center; font-weight: 700; }
.ист-знак.ок { color: #15803d; } .ист-знак.нет { color: #b91c1c; } .ист-знак.мы { color: #2563eb; }
.ист-знак.кл { color: #7c3aed; } .ист-знак.вх { color: #c2410c; } .ист-знак.нейтр { color: #6b7280; }

/* «Дальше» */
.дальше { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; background: #eef6ff; border: 1px solid #cfe2fb; border-radius: 12px; padding: .55rem .8rem; margin: 0 0 1rem; }
.дальше > b { font-size: 1.02rem; }
.дальше > b.просрочено { color: #b91c1c; }
/* Дата и дело по алгоритму нажимаются прямо в строке (владелец, 28.10.2026). */
.дальше-быстро { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.дальше-быстро b { font-size: 1.02rem; }
.правка-даты { position: relative; display: inline-block; cursor: pointer; border-bottom: 1px dashed currentColor; }
.правка-даты input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.правка-дела { font: inherit; font-weight: 700; color: inherit; background: transparent; border: 0; border-bottom: 1px dashed currentColor;
  border-radius: 0; padding: 0; margin: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
.кнопка-сделано { background: #15803d; border-color: #15803d; color: #fff; border-radius: 999px; padding: .35rem .8rem; }
.перенести-быстро { border: 0; background: none; padding: 0; margin: 0; box-shadow: none; }
.перенести-быстро > summary { list-style: none; cursor: pointer; padding: .32rem .8rem; border: 1px solid #cfd5dc; border-radius: 999px; background: #fff; font-size: .92rem; }
.перенести-быстро > summary::-webkit-details-marker { display: none; }
.перенести-быстро[open] { flex-basis: 100%; }
.перенести-варианты { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .4rem; }
.перенести-варианты button:not(.ссылка) { padding: .3rem .75rem; border-radius: 999px; background: #fff; color: inherit; border: 1px solid #cfd5dc; }

/* Отчёт */
.отчёт3 .отчёт-шапка { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .2rem; }
.отчёт3 .отчёт-шапка button.ссылка { font-size: .85rem; }
.отчёт3 .отчёт-подпись { font-size: .82rem; color: var(--приглушён); margin: .55rem 0 .3rem; }
.отчёт3 fieldset.чек-лист { border: 0; padding: 0; margin: 0; min-width: 0; }
.отчёт3 .итог-сетка { grid-template-columns: 1fr 1fr 1fr; }
.отчёт3 .следующий { align-items: center; }
.отчёт3 .шаг-своя-дата { width: auto; padding: .25rem .4rem; }
/* Задача уже стоит — строкой, кнопки шага под «поставить ещё» (20.10.2026) */
.отчёт3 .шаг-уже-стоит { margin: 0 0 .3rem; }
.отчёт3 .шаг-ещё > summary { cursor: pointer; color: var(--приглушён); font-size: .85rem; margin: 0 0 .4rem; }
.отчёт3 .под-отчётом { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.отчёт3 .статус-после[hidden] { display: none; }
@media (max-width: 40rem) { .отчёт3 .итог-сетка { grid-template-columns: 1fr 1fr; } }

/* История по дням */
.история { margin-bottom: 1.2rem; }
.ист-день { font-weight: 600; font-size: .9rem; color: #374151; margin: .8rem 0 .25rem; padding-bottom: .15rem; border-bottom: 1px solid var(--линия); }
.ист-соб { display: flex; align-items: baseline; gap: .45rem; padding: .2rem 0; font-size: .95rem; line-height: 1.4; }
.ист-время { flex: 0 0 2.9rem; color: var(--приглушён); font-size: .84rem; }
.ист-текст { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.ист-отчёт .ист-текст { background: var(--карточка); border-left: 3px solid var(--главный, #2563eb); border-radius: 4px; padding: .15rem .5rem; }
.ист-текст .правка { margin-top: .2rem; }
/* История: отчёт — три строки, нажатие раскрывает целиком */
.ист-отчёт .ист-кратко { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.ист-отчёт.раскрыт .ист-кратко { display: block; -webkit-line-clamp: unset; }
/* Короткая история по дням в «О клиенте» */
.о-контакт .о-когда { min-width: 4.2rem; }
.о-части { flex: 1 1 auto; min-width: 0; }
.о-разд { color: #c0c6cd; margin: 0 .35rem; }
.о-часть.ок { color: #15803d; } .о-часть.нет { color: #b91c1c; } .о-часть.мы { color: #1d4ed8; }
.о-часть.кл { color: #6d28d9; } .о-часть.вх { color: #c2410c; } .о-часть.нейтр { color: #374151; }
/* Объявление — внутри блока карточки; зелёная «Открыть» шире чёрных, строка той же высоты */
.карточка-форма .объявление-строка { margin: .7rem 0 0; padding: .45rem 0 0; border: 0; border-top: 1px solid var(--линия); border-radius: 0; background: none; }
.мес-строка .мес-написать { min-width: 5.6rem; text-align: center; }
.мес-строка .мес-написать.открыть-разговор { min-width: 8.5rem; font-weight: 600; }
.карточка-форма .объявление-строка { grid-column: 1 / -1; flex-basis: 100%; width: 100%; }
/* «Сейчас» и короткая история: каждая часть дня — своей строкой, цвета спокойные */
.о-сейчас { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .3rem; margin: .25rem 0 .5rem; font-size: .93rem; color: #374151; }
.о-сейчас .о-плохо { background: #fde8e6; color: #9b1c1c; font-weight: 600; padding: .05rem .45rem; border-radius: 6px; }
.о-сейчас .о-хорошо { color: #15803d; }
.о-части .о-часть { display: block; }
.о-часть.нет, .о-часть.мы, .о-часть.кл, .о-часть.вх, .о-часть.нейтр { color: #374151; }
.о-часть.ок { color: #15803d; }
.о-контакт { padding: .25rem 0; border-bottom: 1px solid #f1f3f5; }
.о-контакт:last-child { border-bottom: 0; }
/* Перенос: кнопка в «Дальше» и окно (14.10.2026) */
.кнопка-перенести { padding: .32rem .85rem; border: 1px solid #cfd5dc; border-radius: 999px; background: #fff; color: inherit; font-size: .92rem; }
a.кнопка-перенести { display: inline-block; text-decoration: none; }
.перенос-когда { display: grid; grid-gap: .4rem; gap: .4rem; margin: .4rem 0 .7rem; }
.перенос-когда .быстрый-перенос { margin: 0; }
.окно-переноса .быстрый-перенос .ярлык-кнопка { padding: .45rem .8rem; font-size: .95rem; }
.окно-переноса .быстрый-перенос .ярлык-кнопка.выбран { background: var(--главный, #2563eb); border-color: var(--главный, #2563eb); color: #fff; }
.окно-переноса .кого { margin-top: 0; color: var(--приглушён); }
.окно-переноса .быстрый-перенос .ярлык-кнопка:not(.выбран) { background: #fff; color: inherit; border: 1px solid #cfd5dc; }
.окно-переноса .быстрый-перенос .ярлык-кнопка { border-radius: 999px; }
.окно-переноса .срок-задачи { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .5rem; }
/* Подсказка статуса в отчёте и справка (14.10.2026) */
.статус-предложение { margin: .6rem 0 0; padding: .45rem .65rem; background: #eef6ff; border: 1px solid #cfe2fb; border-radius: 8px; font-size: .92rem; }
.статус-описание { flex-basis: 100%; white-space: pre-line; font-size: .84rem; margin-top: .1rem; }
.статус-описание[hidden], .статус-предложение[hidden] { display: none; }
.описание-статуса { border: 0; background: none; padding: 0; margin: .2rem 0 0; box-shadow: none; }
.описание-статуса textarea { width: 100%; }
/* Плашка звонков: текущий звонок зелёный; «Перезвонить ▸» с выбором времени (14.10.2026) */
.звонок-итог.звонок-сейчас { background: #e3f6e8; border-color: #8fd3a3; box-shadow: 0 0 0 2px #bfe8cb; }
.звонок-итог.звонок-сейчас .звонок-итог-верх a { font-size: 1.08rem; color: #14532d; }
.звонок-итог .перезвон-когда { display: none; align-items: center; gap: .35rem; flex-wrap: wrap; }
.звонок-итог .итог-назад { display: none; }
.звонок-итог.шаг3 .перезвон-когда { display: flex; }
.звонок-итог.шаг2 .итог-назад, .звонок-итог.шаг3 .итог-назад { display: inline-block !important; }
.звонок-итог.шаг3 .итог-разговор, .звонок-итог.шаг3 .итог-шаг2, .звонок-итог.шаг3 .итог-шаг3,
.звонок-итог.шаг3 .причина, .звонок-итог.шаг3 button[value="dropped"] { display: none !important; }
.звонок-итог.шаг2 .итог-шаг3 { display: none; }
/* «Что: Позвонить / Написать» в окне задачи (14.10.2026) */
.окно-переноса .что-задачи { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .8rem; }
.окно-переноса .что-задачи .ярлык-кнопка { padding: .45rem .9rem; font-size: .95rem; border-radius: 999px; background: #fff; color: inherit; border: 1px solid #cfd5dc; }
.окно-переноса .что-задачи .ярлык-кнопка.выбран { background: var(--главный, #2563eb); border-color: var(--главный, #2563eb); color: #fff; }
/* Позвонить с другой линии (14.10.2026) */
.кнопка-линии { font-size: 1rem; padding: 0 .3rem; text-decoration: none; }
dialog.окно-линии { width: min(22rem, 92vw); padding: 1.1rem; border: 1px solid #cfd5dc; border-radius: 12px; background: #fff; color: var(--текст); }
dialog.окно-линии::backdrop { background: rgba(0, 0, 0, .45); }
dialog.окно-линии h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
dialog.окно-линии .линии { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .8rem; }
dialog.окно-линии .линия-выбор { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left;
  padding: .6rem .8rem; background: #fff; color: inherit; border: 1px solid #cfd5dc; border-radius: 10px; }
dialog.окно-линии .линия-выбор:hover { border-color: var(--главный, #2563eb); }
dialog.окно-линии .линия-выбор:disabled { opacity: .55; }
dialog.окно-линии .кнопки-окна { display: flex; justify-content: flex-end; }

/* Окно первого сообщения в карточке (18.10.2026) */
dialog.окно-первого { width: min(30rem, 94vw); padding: 1.1rem; border: 1px solid #cfd5dc; border-radius: 12px; background: #fff; color: var(--текст); }
dialog.окно-первого::backdrop { background: rgba(0, 0, 0, .45); }
dialog.окно-первого h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
dialog.окно-первого label { display: block; margin-bottom: .7rem; font-size: .9rem; }
dialog.окно-первого select,
dialog.окно-первого textarea { display: block; width: 100%; margin-top: .25rem; }
dialog.окно-первого textarea { resize: vertical; font-size: 1rem; }
dialog.окно-первого .уже-общаемся p { margin: 0 0 .6rem; }
dialog.окно-первого .кнопки-окна { display: flex; align-items: center; justify-content: flex-end; gap: .9rem; margin-top: .6rem; flex-wrap: wrap; }
dialog.окно-первого .отправить-первое { padding: .55rem 1.3rem; }

/* Кнопка «Сообщить о проблеме» и «Мои обращения» (18.10.2026, эскиз «Офиса») */
/* Не плавает: обычная строка в конце страницы, справа (Владелец, 18.10.2026). */
.низ-стр {
  display: flex; justify-content: flex-end;
  max-width: 1200px; margin: 0 auto;
  padding: 0 1rem calc(.75rem + env(safe-area-inset-bottom));
}
.кнопка-проблемы {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border-radius: 2rem;
  border: 1px solid var(--линия); background: var(--карточка); color: var(--текст);
  font-weight: 600; font-size: .85rem;
}
.кнопка-проблемы i { width: .6rem; height: .6rem; border-radius: 50%; background: #b45309; display: inline-block; }
dialog.окно-проблемы { width: min(30rem, 94vw); padding: 1.1rem; border: 1px solid #cfd5dc; border-radius: 12px; background: #fff; color: var(--текст); }
dialog.окно-проблемы::backdrop { background: rgba(0, 0, 0, .45); }
dialog.окно-проблемы h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
dialog.окно-проблемы label { display: block; margin-bottom: .8rem; font-weight: 600; font-size: .9rem; }
dialog.окно-проблемы textarea { display: block; width: 100%; margin-top: .25rem; resize: vertical; font: inherit; font-weight: 400; }
dialog.окно-проблемы input[type=file] { display: block; margin: .3rem 0 .2rem; font-weight: 400; max-width: 100%; }
dialog.окно-проблемы .пояснение { font-weight: 400; }
dialog.окно-проблемы .совсем { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; }
dialog.окно-проблемы .совсем input { width: auto; margin-top: .2rem; accent-color: #b91c1c; }
dialog.окно-проблемы .само { font-size: .82rem; color: var(--приглушён); background: #f1f3f5; border-radius: 8px; padding: .5rem .7rem; }
dialog.окно-проблемы .итог-проблемы { margin: .8rem 0 0; padding: .55rem .75rem; border-radius: 8px; font-size: .9rem; }
dialog.окно-проблемы .итог-проблемы.принято { border-left: 4px solid #15803d; background: #dcfce7; }
dialog.окно-проблемы .итог-проблемы.ошибка { border-left: 4px solid #b91c1c; background: #fee2e2; color: #7f1d1d; }
dialog.окно-проблемы .кнопки-окна { display: flex; align-items: center; justify-content: flex-end; gap: .9rem; margin-top: 1rem; flex-wrap: wrap; }
dialog.окно-проблемы .мои-обращения { margin-right: auto; font-size: .9rem; }
dialog.окно-проблемы .отправить-проблему { padding: .55rem 1.2rem; }

.обращения { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.обращение { border: 1px solid var(--линия); border-left: 4px solid #2563eb; border-radius: 8px; background: var(--карточка); padding: .5rem .7rem; min-width: 0; }
.обращение.статус-fixed { border-left-color: #15803d; }
.обращение.статус-not_bug, .обращение.статус-wish { border-left-color: var(--линия); }
.обращение .строка-1 { display: flex; gap: .4rem; align-items: center; min-width: 0; }
.обращение .строка-1 b { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.обращение .номер { flex: none; color: var(--приглушён); font-size: .85rem; font-variant-numeric: tabular-nums; }
.обращение .метка-статуса { flex: none; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: .4rem; background: #f1f3f5; }
.обращение.статус-new .метка-статуса { background: #fef3c7; color: #b45309; }
.обращение.статус-sent .метка-статуса { background: #dbeafe; color: #1d4ed8; }
.обращение.статус-taken .метка-статуса { background: #e0e7ff; color: #3730a3; }
.обращение.статус-fixed .метка-статуса { background: #dcfce7; color: #15803d; }
.обращение .строка-2 { font-size: .82rem; color: var(--приглушён); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Скрипт общения (18.10.2026) ---------- */

/* Подсказка шага: в разговоре над полем ответа и в карточке. */
.по-скрипту {
  margin: 0 0 .6rem; padding: .5rem .75rem; background: var(--карточка);
  border: 1px solid var(--линия); border-left: 4px solid var(--свой); border-radius: 8px;
  font-size: .9rem; display: grid; gap: .35rem;
}
.по-скрипту.вид-call { border-left-color: #2c5d8f; }
.по-скрипту.вид-set { border-left-color: #7a5a12; }
.по-скрипту.вид-reminder, .по-скрипту.вид-конец { border-left-color: var(--приглушён); }
.где-скрипт { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: center; font-size: .78rem; color: var(--приглушён); }
.где-скрипт .точки { display: inline-flex; gap: 3px; }
.где-скрипт .точки i { width: 7px; height: 7px; border-radius: 50%; background: var(--линия); display: inline-block; }
.где-скрипт .точки i.было { background: var(--свой); }
.где-скрипт .точки i.сейчас { background: #2c5d8f; box-shadow: 0 0 0 2px #e7eff8; }
.по-скрипту .почему { font-size: .82rem; color: var(--приглушён); }
.по-скрипту .почему .ссылка { font-size: .82rem; margin-left: .35rem; }
.ряд-скрипта { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.по-скрипту button, .по-скрипту .кнопка {
  background: var(--карточка); color: var(--текст); border: 1px solid var(--линия);
  border-radius: 8px; padding: .3rem .7rem; font-size: .88rem;
}
.по-скрипту button.главная, .по-скрипту .кнопка.главная { background: var(--свой); border-color: var(--свой); color: #fff; }
.по-скрипту button.звонить, .по-скрипту .кнопка.звонить { background: #2c5d8f; border-color: #2c5d8f; color: #fff; }
.по-скрипту button.опасная { color: var(--тревога); border-color: #e6bdb8; }
.по-скрипту button.ссылка { border: none; background: none; padding: 0; color: var(--приглушён); font-size: .8rem; }
.по-скрипту form.встроенная { display: inline; margin: 0; }
.текст-шага {
  background: #f6faf7; border: 1px dashed #cfe0d6; border-radius: 6px;
  padding: .35rem .55rem; font-size: .86rem; max-height: 7.5rem; overflow-y: auto;
}
.файл-шага { display: block; color: var(--приглушён); font-size: .8rem; }
.по-скрипту .отступление {
  background: #fbecea; border: 1px solid #e6bdb8; border-radius: 8px; padding: .45rem .6rem;
  display: grid; gap: .4rem; font-size: .86rem;
}
.по-скрипту .отступление b { color: var(--тревога); }
.по-скрипту .отступление select { max-width: 100%; }
.по-скрипту .отступление[hidden] { display: none; }
.подробнее-скрипт summary { cursor: pointer; color: var(--приглушён); font-size: .8rem; }
.подробнее-скрипт[open] { display: grid; gap: .35rem; }
.подробнее-скрипт[open] summary { margin-bottom: .1rem; }
.другой-шаг select { max-width: 100%; min-width: 0; flex: 0 1 auto; }
/* В разговоре — одна строка: шаг, что сделать, главная кнопка. */
.по-скрипту.в-чате { padding: .35rem .6rem; gap: .2rem; }
.строка-скрипта { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.шаг-кратко { font-size: .72rem; color: var(--приглушён); white-space: nowrap; border: 1px solid var(--линия); border-radius: 999px; padding: 0 .4rem; }
.строка-скрипта .главное { flex: 1 1 12rem; min-width: 0; font-size: .88rem; }
.по-скрипту.в-чате .подробнее-скрипт summary { font-size: .75rem; }
/* В разговоре подсказка не должна съедать экран: текст шага — короче. */
form.написать .по-скрипту .текст-шага { max-height: 4.5rem; }

/* Библиотека: вкладки «Материалы и фразы» / «Скрипты общения». */
.вкладки-библиотеки { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--линия); margin: 0 0 1rem; }
.вкладки-библиотеки a { padding: .35rem .8rem; color: var(--приглушён); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.вкладки-библиотеки a.тек { color: var(--текст); border-bottom-color: var(--текст); font-weight: 600; }

/* Страница скрипта: шаги слева, правка шага справа. */
.выбор-скрипта { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .4rem; }
.выбор-скрипта select { max-width: 100%; }
.кнопки-скрипта { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.редактор-скрипта { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; margin-top: .8rem; }
@media (max-width: 860px) { .редактор-скрипта { grid-template-columns: minmax(0, 1fr); } }
.шаги-скрипта .шаги { list-style: none; margin: 0; padding: 0; }
.шаги-скрипта .шаг { position: relative; padding: 0 0 .7rem 2.4rem; }
.шаги-скрипта .шаг::before { content: ""; position: absolute; left: .85rem; top: 1.7rem; bottom: 0; width: 2px; background: var(--линия); }
.шаги-скрипта .шаг:last-child::before { display: none; }
.шаги-скрипта .номер {
  position: absolute; left: 0; top: .2rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem;
  background: var(--карточка); border: 2px solid var(--свой); color: var(--свой);
}
.шаги-скрипта .вид-call .номер { border-color: #2c5d8f; color: #2c5d8f; }
.шаги-скрипта .вид-set .номер { border-color: #7a5a12; color: #7a5a12; }
.шаги-скрипта .вид-reminder .номер { border-color: var(--приглушён); color: var(--приглушён); border-style: dashed; }
.шаги-скрипта .плашка {
  display: grid; gap: .25rem; background: var(--карточка); border: 1px solid var(--линия); border-radius: 10px;
  padding: .5rem .7rem; color: inherit; text-decoration: none;
}
.шаги-скрипта .выбран .плашка { border-color: var(--свой); box-shadow: 0 0 0 2px #e8f1ec; }
.шаги-скрипта .верх { display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: baseline; }
.шаги-скрипта .суть { font-size: .85rem; color: var(--приглушён); }
.шаги-скрипта .пропуск { font-size: .78rem; color: #8a6d00; }
.шаги-скрипта .переходы { display: flex; flex-wrap: wrap; gap: .2rem .3rem; }
.шаги-скрипта .переход { font-size: .76rem; border: 1px solid var(--линия); border-radius: 999px; padding: 0 .5rem; background: var(--фон); }
.шаги-скрипта .переход b { color: var(--свой); }
.тип { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 0 .35rem; font-weight: 600; background: #e8f1ec; color: var(--свой); }
.тип.тип-call { background: #e7eff8; color: #2c5d8f; }
.тип.тип-set { background: #f8f1e1; color: #7a5a12; }
.тип.тип-reminder { background: #eef0f3; color: var(--приглушён); }
.добавить-шаг { margin-left: 2.4rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .88rem; color: var(--приглушён); }
.конец-скрипта { margin: .6rem 0 0 2.4rem; font-size: .85rem; color: var(--приглушён); }
.правка-шага { background: var(--карточка); border: 1px solid var(--линия); border-radius: 12px; padding: .8rem; min-width: 0; }
.правка-шага fieldset { border: none; padding: 0; margin: 0; display: grid; gap: .8rem; min-width: 0; }
.правка-шага label { display: grid; gap: .2rem; font-size: .85rem; }
.правка-шага input:not([type=checkbox]):not([type=radio]), .правка-шага textarea, .правка-шага select { width: 100%; max-width: 100%; }
.заголовок-правки { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.заголовок-правки h2 { margin: 0; font-size: 1.05rem; }
.заголовок-правки .ссылка { font-size: 1.1rem; text-decoration: none; padding: 0 .3rem; }
.поле-правки { display: grid; gap: .35rem; }
.имя-поля { font-size: .78rem; font-weight: 600; color: var(--приглушён); }
.выбор-вида { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.выбор-вида label, .правка-шага label.галочка, .правка-шага label.убрать { display: flex; gap: .35rem; align-items: center; }
.состав { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.состав li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .5rem; align-items: start; border: 1px solid var(--линия); border-radius: 8px; padding: .4rem .5rem; background: #fbfcfd; font-size: .86rem; }
.правка-шага .состав input.порядок { width: 3.2rem; }
.вид-предмета { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--приглушён); }
.что-предмет { min-width: 0; }
.добавить-предмет { display: grid; gap: .5rem; }
.добавить-предмет[open] { padding: .5rem; border: 1px dashed var(--линия); border-radius: 8px; }
.добавить-предмет summary { cursor: pointer; font-size: .88rem; }
.переходы-правка { display: grid; gap: .35rem; }
.переход-правка { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; border: 1px solid var(--линия); border-radius: 8px; padding: .35rem .45rem; font-size: .85rem; }
.переход-правка.новый { border-style: dashed; }
.переход-правка .дней { display: flex; gap: .25rem; align-items: center; white-space: nowrap; color: var(--приглушён); font-size: .8rem; }
.правка-шага .переход-правка .дней input { width: 3.4rem; }
.переход-правка > select:first-child { flex: 1 1 9rem; width: auto; }
.переход-правка > select:nth-child(2) { flex: 1 1 9rem; width: auto; }
.переход-правка .дней[hidden] { display: none; }
.переход-правка .куда { flex: 1 1 100%; display: flex; gap: .35rem; align-items: center; min-width: 0; }
.переход-правка .куда select { flex: 1 1 auto; width: auto; min-width: 0; }
.переход-правка .стрелка { color: var(--приглушён); }
.низ-правки { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; align-items: center; margin-top: .8rem; }
.низ-правки .опасная { margin-right: auto; color: var(--тревога); }
.низ-правки .кнопка { background: transparent; color: var(--текст); border: 1px solid var(--линия); }
.название-скрипта { display: grid; gap: .5rem; margin-top: .6rem; }
.слова-скрипта { margin-top: 1.2rem; background: var(--карточка); border: 1px solid var(--линия); border-radius: 12px; padding: .8rem; display: grid; gap: .5rem; }
.слова-скрипта h2 { margin: 0; font-size: 1rem; }
.слова-скрипта fieldset { border: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; min-width: 0; }
@media (max-width: 760px) { .слова-скрипта fieldset { grid-template-columns: minmax(0, 1fr); } }
.слова-скрипта label { display: grid; gap: .2rem; font-size: .85rem; font-weight: 600; }
.слова-скрипта textarea { width: 100%; font-weight: 400; }
.слова-скрипта button { justify-self: start; }

/* Сообщения: больше места под переписку (Владелец, 19.10.2026, по эскизу).
   Отборы — в строке заголовка: на широком экране кнопками, на узком
   выпадающим списком. «Добавить контакт» — «+» в строке поиска. Шапка
   разговора — одна строка: стрелка, имя, «навсегда», «В архив». */
.заголовок-сообщений { flex-wrap: nowrap; align-items: center; }
.заголовок-сообщений h1 { margin: 0; flex: 0 0 auto; }
.заголовок-сообщений .отборы-строкой { flex-wrap: nowrap; justify-content: flex-end; min-width: 0; font-size: .85rem; }
.заголовок-сообщений .отборы-строкой a { padding: .2rem .55rem; }
.отборы-списком { display: none; padding: .35rem .6rem; font-size: .9rem; max-width: 60%; }
/* С «активные» и «общаются» строка длиннее — списком уже до 60rem (31.10.2026). */
@media (max-width: 60rem) {
  .заголовок-сообщений .отборы-строкой { display: none; }
  .отборы-списком { display: block; }
}
.поиск-сообщений input[name="q"] { flex: 1 1 8rem; min-width: 0; }
.поиск-сообщений .добавить-контакт {
  background: var(--карточка); color: var(--текст); border: 1px solid var(--линия);
  font-size: 1.25rem; line-height: 1; padding: .55rem .95rem;
}

.назад-стрелка { display: none; }
@media (max-width: 78rem) {
  .назад-стрелка {
    display: inline-block; margin-right: .45rem; padding: 0 .2rem;
    color: var(--тг-синий); text-decoration: none; font-weight: 400;
  }
}
.колонка-разговор .шапка-чата { align-items: center; }
.колонка-разговор .шапка-чата h1 {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-bottom: 2px;
}
.шапка-чата .действие-обработан.в-строку { flex-direction: row; align-items: center; gap: .75rem; margin: 0; align-self: center; }

/* Панель собеседника в «Сообщениях» (Владелец, 20.10.2026, эскиз): без имени
   и мессенджера — они над перепиской; проект, пакет, комментарий, задача. */
.нутро-контакта .панель-кто { display: flex; flex-direction: column; gap: .2rem; color: var(--приглушён); font-size: .9rem; }
.нутро-контакта .позвонить-строкой { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin: 0; }
.нутро-контакта .позвонить-строкой .телефон { color: var(--текст); }
.нутро-контакта .время-клиента { margin: .5rem 0; }
.нутро-контакта .панель-метки { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.нутро-контакта .метка, .нутро-контакта .метка-статус { font-size: .85rem; padding: .1rem .55rem; border-radius: 999px; background: #f1f4f8; }
.нутро-контакта .метка-статус { background: #e6eefc; color: #1f4aa8; }
.нутро-контакта .панель-комментарий { background: #fff4dc; border-radius: 8px; padding: .5rem .65rem; font-size: .9rem; margin: .5rem 0; overflow-wrap: anywhere; }
.нутро-контакта .панель-строка { margin: .5rem 0; font-size: .9rem; }
/* Активный клиент — имя в шапке переписки зелёным (как стиль «активный»). */
.имя-карточка.активный { color: var(--свой); }

/* Шарики переписки и звонков (владелец, эскиз 21.10.2026; 22.10 — в одну
   строку): слева мессенджер (второй — строкой ниже, третий рядом с ним, под
   звонками), звонки правее с одного и
   того же места на всех карточках — колонка мессенджера постоянной ширины
   (до 10 шариков с промежутками дней); синий — наше, зелёный — клиента;
   сегодня — на жёлтом. На узком экране звонки уходят под мессенджеры. */
.шарики { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: .25rem 1rem; align-items: start; margin-top: .4rem; }
.строка-шариков, .шарики-звонки { display: flex; align-items: center; gap: .4rem; min-height: 1.4rem; min-width: 0; }
@media (max-width: 30rem) { .шарики { grid-template-columns: minmax(0, 1fr); } .шарики-звонки:empty { display: none; } }
.канал-шариков { flex: none; width: 2.3rem; text-align: center; font-size: .68rem; font-weight: 700; line-height: 1; padding: .2rem 0;
  border: 1.5px solid #6b7785; border-radius: 5px; color: #4a5562; }
.ряд-шариков { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; }
.шарик { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.шарик.наш { background: #2f6fd6; }
.шарик.клиента { background: #1fa45a; }
.шарик.сбой { background: #fff; border: 2px solid #b4453a; }
.между-днями { width: 7px; flex: none; }
.сегодня-шарики { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; background: #ffe9a3; border-radius: 999px; padding: 3px 6px; }
.трубка { display: inline-flex; align-items: center; gap: 1px; flex: none; }
.трубка svg { width: 15px; height: 15px; }
.трубка.нет { color: #b4453a; }
.трубка.ок { color: #2f6f4f; }
.трубка.пропущен { color: #c2410c; }
.трубка.неизв { color: #9aa4ae; }
.трубка b { font-size: .75rem; font-weight: 600; color: #2f6f4f; margin: 0 3px 0 1px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* «Одним взглядом» (владелец, 27.10.2026): кто кого ждёт цветной точкой,
   последние дни столбиками — шарики сообщений и трубки звонков, как в
   списке клиентов, — и три строки: клиент последний раз, мы, звонки. */
.взгляд { background: var(--карточка); border: 1px solid var(--линия); border-radius: 12px; padding: .75rem .9rem; margin: 0 0 1rem;
  display: flex; flex-direction: column; gap: .7rem; }
.взгляд-фраза { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: 1.12rem; line-height: 1.35; }
.взгляд-фраза .кнопка { font-size: .95rem; }
.взгляд-точка { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #9aa4ae; }
.взгляд-точка.зелёный { background: #1fa45a; }
.взгляд-точка.жёлтый { background: #e0a100; }
.взгляд-точка.красный { background: #c8372d; }
.взгляд-дни { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .35rem; align-items: end; }
.взгляд-день { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .3rem .15rem; border-radius: 8px; min-width: 0; }
.взгляд-день.сегодня { background: #ffe9a3; }
.взгляд-значки { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 3px; max-width: 5.2rem; }
.взгляд-ещё { font-size: .72rem; color: var(--приглушён); }
.взгляд-подпись { font-size: .8rem; color: var(--приглушён); white-space: nowrap; }
.взгляд-строки { display: flex; flex-direction: column; gap: .2rem; font-size: .95rem; line-height: 1.4; border-top: 1px solid var(--линия); padding-top: .55rem; }
.о-суть.свёрнуто { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.скрипт-свёрнут { margin: 0 0 1rem; }
.скрипт-свёрнут > summary { cursor: pointer; font-size: .92rem; color: var(--приглушён); padding: .3rem 0; }
.скрипт-свёрнут[open] > summary { margin-bottom: .4rem; }

/* Почта — канал переписки (29.10.2026): тема над текстом письма, тема
   строкой над полем ответа, вложения ссылками, письмо целиком. */
.реплика .тема-письма { font-weight: 600; margin-bottom: .25rem; }
.написать .тема-письма-поле { width: 100%; margin-bottom: .35rem; }
.реплика .вложение a { word-break: break-all; }
.реплика .целиком { margin-top: .3rem; font-size: .85rem; }
.письмо-шапка { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0 0 1rem; color: var(--приглушён); }
.письмо-шапка dd { margin: 0; word-break: break-word; }
.письмо-текст { background: var(--карточка); border: 1px solid var(--линия); border-radius: 12px; padding: .9rem 1rem;
  margin-top: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.письмо-форма textarea { width: 100%; resize: vertical; }
.письмо-форма input[type=text], .письмо-форма input[type=email], .письмо-форма select { width: 100%; }
/* Вкладка «Почта»: тема письма в строке списка, ярлык непрочитанных. */
.разговоры .тема-в-списке { font-weight: 600; margin-right: .3rem; }
.разговоры .ярлык-новых { background: var(--свой); color: #fff; border-radius: 999px; padding: 0 .45rem; font-weight: 600; }

/* «Сообщения» и «Почта» — два заголовка в шапке «Сообщений» (30.10.2026):
   текущий чёрный, второй серый, нажатием переключает. */
.два-заголовка { display: flex; gap: 1rem; align-items: baseline; }
.два-заголовка a { color: var(--приглушён); text-decoration: none; white-space: nowrap; }
.два-заголовка a.тек { color: var(--текст); }
.два-заголовка .значок { font-size: .75rem; vertical-align: middle; }