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

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

* { box-sizing: border-box; }

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

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 { overflow-wrap: anywhere; }

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

.шапка {
  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: 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; }

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

.вход-страница {
  display: grid;
  place-items: center;
  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;
}

.переключатель { display: flex; gap: .25rem; font-size: .9rem; }

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

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

.лента { list-style: none; margin: 0; padding: 0; display: grid; 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: var(--приглушён); font-size: .85rem; margin-top: .1rem; }

.лента .отрывок { 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(--тревога); }

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

.назад { 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(--приглушён); }
.пояснение { color: var(--приглушён); font-size: .85rem; }

.переписка { display: grid; gap: .4rem; margin-top: 1rem; }

.плашка-дня {
  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; }

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

.ссылка {
  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-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; }

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; }

/* Правка материала прямо в списке: неброско, чтобы не спорить со ссылкой. */
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(--приглушён); }

.активный { color: var(--свой); font-weight: 600; }
.лента .просрочена a { border-left: 3px solid 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, …): по умолчанию колонка сетки не уже
   своего содержимого, и одно длинное имя растягивает всю раскладку за
   край экрана. Это не придирка — именно так вся страница и уезжала вбок. */
.мессенджер {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) minmax(0, 17rem);
  gap: .75rem;
  align-items: start;
  height: calc(100vh - 11rem);
  min-height: 26rem;
  max-width: 100%;
}
.мессенджер.без-разговора { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }

.колонка-список,
.колонка-разговор,
.колонка-контакт {
  height: 100%;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 10px;
  padding: .5rem;
}
.колонка-разговор { display: flex; flex-direction: column; }
.колонка-разговор .переписка { flex: 1 1 auto; overflow-y: auto; }
.колонка-разговор .написать { flex: 0 0 auto; }
.колонка-контакт h2 { margin-top: .2rem; font-size: 1rem; }
.колонка-контакт h3 { font-size: .9rem; margin: .8rem 0 .3rem; }

/* Открытая строка списка — видно, где стоишь. */
.разговоры li.открыт { outline: 2px solid var(--текст); outline-offset: -2px; }
.разговоры .строка { margin-bottom: .3rem; }

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

/* На узком экране колонки становятся одна под другой, и прокрутка
   возвращается странице: три полосы прокрутки на телефоне невыносимы. */
/* Три колонки требуют места. Порог поднят до 78rem: на планшете и узком
   ноутбуке они сжимались до нечитаемых полосок, а карточка собеседника
   уезжала за край. */
@media (max-width: 78rem) {
  .мессенджер,
  .мессенджер.без-разговора {
    display: block;
    height: auto;
  }
  .колонка-список,
  .колонка-разговор,
  .колонка-контакт {
    height: auto;
    overflow: visible;
    margin-bottom: .75rem;
  }
  .колонка-разговор .переписка { overflow: visible; }
}

/* Вложения к сообщению. */
.вложения { 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;
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  max-height: 18rem;
  overflow-y: auto;
  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(--текст); }