/* ══════════════════════════════════════════════════════════════════
   Раздел «Новые клиенты» (#/leads) — только то, чего нет в style.css.

   Зачем отдельный файл: шапка карточки «Очередь» кладёт в .card-ctrls
   ЧЕТЫРЕ чипа сортировки плюс кнопку «Фильтр» (~500 px), а поле ввода
   чата — textarea и ДВЕ кнопки. Ни один другой экран панели столько в
   эти контейнеры не кладёт: .card-hd в style.css это
   `display:flex; justify-content:space-between` без flex-wrap и в
   медиазапрос ≤820 не входит, а .chat-input в chat.css — flex без wrap
   с textarea flex:1 (интринсик ~195 px). На телефоне 390 px шапка
   требовала ~620 px: появлялась горизонтальная прокрутка ВСЕЙ страницы,
   кнопка «Фильтр» уезжала за экран, а в диалоге «Отправить» вылезала за
   правый край. SPEC §10.3 требует, чтобы раздел жил при ширине ≤820.

   Правила намеренно НЕ глобальные: .leads-card и .leads-chat —
   собственные классы раздела (public/leads.js, renderLeadQueue и
   renderLeadChat). Трогать .card-hd всей панели ради одного экрана
   нельзя — это поехавшая вёрстка у клиентов, финансов и кампаний.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {
  /* Шапка карточки очереди: заголовок отдельной строкой, чипы — под ним */
  .leads-card .card-hd {
    flex-wrap: wrap;
    gap: 8px;
  }
  .leads-card .card-ctrls {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  /* Чип сортировки не должен рваться по слову посреди «По приоритету» */
  .leads-card .card-ctrls .chip,
  .leads-card .card-ctrls .ctrl-btn {
    white-space: nowrap;
  }
  /* Виды очереди (Очередь/Отложенные/…) — тот же случай, 5 кнопок в ряд */
  #lead-views .period-bar,
  #lead-views-box .period-bar {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* Поле ввода диалога: textarea на всю ширину, кнопки под ним.
     min-width:0 обязателен — у flex-элемента min-width:auto, и textarea
     отказывается сжиматься ниже своего интринсика, распирая строку. */
  .leads-chat .chat-input {
    flex-wrap: wrap;
  }
  .leads-chat .chat-input textarea {
    min-width: 0;
    flex: 1 1 100%;
  }
  .leads-chat .chat-input .btn {
    flex: 1 1 auto;
  }
  /* Шапка экрана диалога: «← К очереди», заголовок и две кнопки */
  .leads-chat .chatview-hd {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ═════ Пересылка сообщения пачке лидов (23.09.2026) ═════
   Правила намеренно привязаны к .leads-chat и .fwd-*: чат клиентов в разделе
   «Сообщения» использует ту же chat.css, и общий селектор поехал бы и там. */

/* Кнопка на своём сообщении, в строке со временем */
.leads-chat .chat-msg .cm-fwd{
  margin-left:8px;padding:0;border:none;background:none;cursor:pointer;
  font:inherit;font-size:10px;color:inherit;opacity:.75;text-decoration:underline
}
.leads-chat .chat-msg .cm-fwd:hover{opacity:1}

/* Пересылаемое сообщение — превью в шапке модалки */
.fwd-preview{
  max-height:96px;overflow-y:auto;padding:8px 10px;border-radius:8px;
  background:var(--border-light,#f1f2f6);font-size:12.5px;line-height:1.35;
  white-space:pre-wrap;word-break:break-word;color:var(--text-2,#4b5563)
}
.fwd-att{font-weight:600;color:var(--primary,#4f46e5)}

/* Список получателей. user-select:none обязателен: без него протяжка с
   зажатой мышью выделяет текст строк вместо выбора людей. */
.fwd-list{
  max-height:46vh;min-height:120px;overflow-y:auto;border:1px solid var(--border,#e6e8ec);
  border-radius:10px;user-select:none;-webkit-user-select:none
}
.fwd-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;
  border-bottom:1px solid var(--border-light,#f1f2f6)
}
.fwd-row:last-child{border-bottom:none}
.fwd-row:hover{background:#fafbff}
.fwd-row.on{background:var(--primary-bg,#eef1ff)}
.fwd-box{
  flex-shrink:0;width:18px;height:18px;border:1.5px solid var(--border,#d7dae0);
  border-radius:5px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;color:#fff;background:#fff
}
.fwd-row.on .fwd-box{background:var(--primary,#4f46e5);border-color:var(--primary,#4f46e5)}
.fwd-main{flex:1;min-width:0}
.fwd-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fwd-sub{font-size:11px;color:var(--text-3,#8a8f98);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fwd-count{margin-right:auto;font-size:12.5px;color:var(--text-3,#8a8f98)}