/* Композер цепочки (карточки, подстановки, предпросмотр, тест диалога) стилизован
   через .chm-scope, а не через #chm-section-messages: та же разметка стоит и в
   Рассылках ЛС, где карточка шага называется иначе. Класс вешается на саму
   карточку шага «Сообщения» в обоих шаблонах. */
/* ==========================================================================
   Чат-рассылки — only what this page adds to the shared module chrome.

   Everything structural (.dm-section-card, .dm-workflow-nav, .dm-account-card,
   .dm-message-item, .dm-summary-card, .dm-badge, .dm-switch, .dm-segmented …)
   comes from pages/automation/mass-dm.css, which base.html loads on every page.
   Nothing from there is restated here: a second copy of a component is how two
   pages that are supposed to look identical start drifting apart.
   ========================================================================== */

/* Five steps, not the base rule's four — without this the nav lays out in four
   columns and the fifth button wraps onto a row of its own. */
.dm-workflow-nav-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Field grids. The three-column one is the pace row (delay range / hour / day),
   the two-column one is every pair of related fields under it. */
.cm-page .dm-grid-2,
.cm-page .dm-grid-3 { display: grid; gap: 0.6rem; }
.cm-page .dm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-page .dm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* A from–to pair reading as one control rather than two inputs that happen to be
   adjacent — the dash carries the meaning, so it must not wrap away from them. */
.cm-page .dm-range-pair { display: flex; align-items: center; gap: 0.4rem; }
.cm-page .dm-range-pair > span { flex: 0 0 auto; color: var(--color-text-faint); }
.cm-page .dm-range-pair .dm-input { min-width: 0; }
.cm-page .dm-input.is-narrow { max-width: 5.5rem; flex: 0 0 auto; }

.cm-page .dm-toggle-list { display: flex; flex-direction: column; }

/* The Telegram preview. Deliberately not a phone mock-up like Рассылки ЛС': a
   group message has no chrome worth drawing, and the useful question here is only
   "what text actually goes out after the variants are rolled". */
.cm-page .dm-phone {
  position: sticky; top: 4rem; align-self: start;
  border: 1px solid var(--color-border); border-radius: 16px;
  background: var(--color-surface-muted); overflow: hidden;
}
.cm-page .dm-phone-head {
  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 0.72rem; font-weight: 750;
}
.cm-page .dm-phone-body {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.8rem; max-height: 26rem; overflow-y: auto;
}
.cm-page .dm-phone-bubble {
  padding: 0.55rem 0.7rem; border-radius: 14px 14px 14px 4px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  font-size: 0.78rem; white-space: pre-wrap; word-break: break-word;
}

/* Launch confirmation. Its own modal rather than the shared one because the
   confirmation checkbox is load-bearing here — the submit button is disabled until
   it is ticked, and no other modal in the panel works that way. */
.dm-modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 1rem;
  background: rgba(16, 24, 40, .45); backdrop-filter: blur(2px);
}
.dm-modal-backdrop.hidden { display: none; }
.dm-modal {
  width: min(34rem, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 20px; box-shadow: var(--shadow-lg, 0 24px 60px rgba(22, 32, 51, .16));
}
.dm-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1rem; border-bottom: 1px solid var(--color-border);
}
.dm-modal-head h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 650; }
.dm-modal-head p { margin: 0.25rem 0 0; color: var(--color-text-muted); font-size: 0.75rem; }
.dm-modal-body { padding: 1rem; }
.dm-modal-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
  padding: 0.85rem 1rem; border-top: 1px solid var(--color-border);
}
.dm-confirm-row {
  display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.85rem;
  padding: 0.75rem; border-radius: 12px; background: var(--color-warning-bg);
  color: var(--color-warning-text); font-size: 0.75rem; cursor: pointer;
}
.dm-confirm-row input { margin-top: 0.15rem; flex: 0 0 auto; }

.cm-page .dm-log-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem;
}
.cm-page .dm-log-head p { margin: 0.2rem 0 0; color: var(--color-text-muted); font-size: 0.72rem; }

@media (max-width: 1180px) {
  .cm-page .dm-phone { position: static; }
}
@media (max-width: 960px) {
  .cm-page .dm-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .dm-workflow-nav-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-page .dm-grid-2,
  .cm-page .dm-grid-3 { grid-template-columns: 1fr; }
}

/* ---- reference parity: pieces the shared chrome has no component for ---- */

/* Three sources, not the base rule's two columns. */
.cm-page .dm-segmented.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The AI mode is a licensed extra; its radio is disabled, and the label has to look it. */
.cm-page .dm-segment.is-disabled { opacity: .5; cursor: not-allowed; }

.cm-page .dm-add-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cm-page .dm-add-bar .dm-add-btn { flex: 1 1 8rem; }

/* Removable chip: the chat list is edited here, not only in the textarea, so each
   chip carries its own delete the way the mockup's does. */
.cm-page .dm-chip.is-removable { display: inline-flex; align-items: center; gap: 0.3rem; padding-right: 0.35rem; }
.cm-page .dm-chip-remove {
  display: grid; place-items: center; width: 1.05rem; height: 1.05rem; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; line-height: 1;
  background: var(--color-surface); color: var(--color-text-faint); font-size: 0.85rem;
}
.cm-page .dm-chip-remove:hover { background: var(--color-danger-bg); color: var(--color-danger); }

/* Тот же отступ, что .dm-summary-body .role-launch-fab даёт кнопке запуска на всех
   остальных страницах. Здесь форма запуска этот класс не носит (у модуля своя модалка
   подтверждения), поэтому правило её не цепляло и кнопка прилипала к списку проверок. */
.cm-page .dm-summary-body [data-live-region="module-launch"] { margin-top: 0.55rem; }

/* ==========================================================================
   Шаг 3 — редактор цепочки сообщений.
   Всё внутри .chm-scope, все значения — токены, поэтому тёмная тема
   работает без единого повторного объявления.
   ========================================================================== */

.chm-scope .chm-composer { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.chm-scope .chm-composer-main { min-width: 0; }

/* ---------- Переключатель режима первого сообщения ---------- */
.chm-scope .chm-mode-block {
  padding: 13px; margin-bottom: 13px;
  border: 1px solid var(--color-border); border-radius: 15px;
  background: var(--color-surface-muted);
}
.chm-scope .chm-mode-top { margin-bottom: 10px; }
.chm-scope .chm-mode-top strong { display: block; font-size: 13px; }
.chm-scope .chm-mode-top span { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: 11px; line-height: 1.4; }

/* ---------- Карточка сообщения ---------- */
.chm-scope .chm-message-list { display: grid; gap: 11px; }
.chm-scope .chm-message {
  overflow: hidden;
  border: 1px solid var(--color-border); border-radius: 15px;
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast) var(--ease);
}
.chm-scope .chm-message:hover { border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border)); }
.chm-scope .chm-message.is-dragging { opacity: .45; }
/* Карточка, которую только что добавили или у которой сменили формат: список
   перестраивается целиком, и без вспышки непонятно, куда смотреть. */
.chm-scope .chm-message.is-fresh { animation: chmAdded .8s var(--ease); }
@keyframes chmAdded {
  from { box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 18%, transparent); transform: translateY(4px); }
  to { box-shadow: var(--shadow-sm); transform: none; }
}

.chm-scope .chm-message-head {
  padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--color-border); background: var(--color-surface-muted);
}
.chm-scope .chm-message-meta { display: flex; align-items: center; gap: 9px; min-width: 0; }
.chm-scope .chm-grip { color: var(--color-text-faint); cursor: grab; user-select: none; }
.chm-scope .chm-grip:active { cursor: grabbing; }
.chm-scope .chm-message-index {
  width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 8px; background: var(--color-primary-bg); color: var(--color-primary);
  font-size: 11px; font-weight: 800;
}
.chm-scope .chm-message-title { font-size: 12px; font-weight: 700; }
.chm-scope .chm-message-sub { margin-top: 2px; color: var(--color-text-faint); font-size: 9px; }
.chm-scope .chm-type-pill {
  display: inline-flex; align-items: center; margin-left: 5px; padding: 3px 7px;
  border-radius: 999px; background: var(--color-surface); color: var(--color-text-muted);
  font-size: 9px; font-weight: 700;
}
.chm-scope .chm-type-pill.is-ai { background: var(--color-primary-bg); color: var(--color-primary); }

.chm-scope .chm-head-actions { display: flex; gap: 5px; }
.chm-scope .chm-icon-btn {
  width: 29px; height: 29px; display: grid; place-items: center;
  border: 1px solid var(--color-border); border-radius: 9px;
  background: var(--color-surface); color: var(--color-text-muted); cursor: pointer;
  transition: color var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease);
}
.chm-scope .chm-icon-btn svg { width: 14px; height: 14px; }
.chm-scope .chm-icon-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.chm-scope .chm-icon-btn.is-danger:hover { color: var(--color-danger); border-color: var(--color-danger); }
.chm-scope .chm-icon-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.chm-scope .chm-message-body { padding: 12px; display: grid; gap: 10px; }

/* ---------- Поле текста с подстановками ---------- */
.chm-scope .chm-smart-field { display: grid; gap: 7px; }
.chm-scope .chm-smart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chm-scope .chm-smart-head .dm-label { margin: 0; }
.chm-scope .chm-smart-head small { color: var(--color-text-faint); font-size: 9px; }
.chm-scope .chm-smart-editor {
  min-height: 104px; padding: 10px 11px;
  border: 1px solid var(--color-border); border-radius: 11px;
  background: var(--color-surface); color: var(--color-text);
  font-size: 12px; line-height: 1.55; outline: none;
  white-space: pre-wrap; word-break: break-word;
  transition: border-color var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
}
.chm-scope .chm-smart-editor:hover { border-color: var(--color-text-faint); }
.chm-scope .chm-smart-editor:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.chm-scope .chm-smart-editor:empty::before {
  content: attr(data-placeholder); color: var(--color-text-faint); pointer-events: none;
}
/* Подстановка выглядит цельной плашкой и выделяется целиком: половина «{group_» в
   тексте не значит ничего, поэтому и стереть её можно только целиком. */
.chm-scope .chm-smart-token {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: 6px; background: var(--color-primary-bg); color: var(--color-primary);
  font-size: 10px; font-weight: 700; line-height: 1.35; white-space: nowrap;
  vertical-align: baseline; user-select: all;
}
.chm-scope .chm-smart-token::before { content: "✦"; font-size: 8px; opacity: .8; }

.chm-scope .chm-auto-data {
  display: grid; gap: 7px; padding: 9px 10px;
  border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface-muted);
}
.chm-scope .chm-auto-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chm-scope .chm-auto-head strong { font-size: 10px; }
.chm-scope .chm-auto-head span { color: var(--color-text-faint); font-size: 9px; }
.chm-scope .chm-auto-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chm-scope .chm-auto-btn {
  min-height: 48px; padding: 7px 8px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  border: 1px solid var(--color-border); border-radius: 9px;
  background: var(--color-surface); color: var(--color-text);
  transition: border-color var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease), transform var(--transition-fast) var(--ease);
}
.chm-scope .chm-auto-btn:hover { border-color: var(--color-primary); background: var(--color-primary-bg); transform: translateY(-1px); }
.chm-scope .chm-auto-btn strong { display: block; font-size: 10px; line-height: 1.2; }
.chm-scope .chm-auto-btn > span {
  display: block; margin-top: 3px; color: var(--color-text-faint); font-size: 8px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chm-scope .chm-auto-icon {
  display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 5px;
  border-radius: 5px; background: var(--color-primary-bg); color: var(--color-primary);
  font-size: 9px; vertical-align: -3px;
}
.chm-scope .chm-smart-note { display: flex; align-items: flex-start; gap: 6px; color: var(--color-text-faint); font-size: 9px; line-height: 1.4; }
.chm-scope .chm-smart-note svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; }

/* ---------- Смена формата сообщения ---------- */
.chm-scope .chm-tools { padding: 10px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-muted); }
.chm-scope .chm-tools-title { margin-bottom: 7px; color: var(--color-text-faint); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.chm-scope .chm-tools-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chm-scope .chm-tool {
  min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 9px;
  background: var(--color-surface); color: var(--color-text-muted); font-size: 10px; font-weight: 700;
  transition: color var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}
.chm-scope .chm-tool svg { width: 14px; height: 14px; }
.chm-scope .chm-tool:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); }
.chm-scope .chm-tool.is-primary { border-color: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-primary); background: var(--color-primary-bg); }

/* ---------- Вложение ---------- */
.chm-scope .chm-attachment {
  display: flex; align-items: center; gap: 10px; padding: 11px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 34%, transparent);
  border-radius: 11px; background: var(--color-primary-bg);
}
.chm-scope .chm-attachment:hover { border-color: var(--color-primary); }
.chm-scope .chm-attachment.is-filled { border-style: solid; }
.chm-scope .chm-attach-icon {
  width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 10px; background: var(--color-surface); color: var(--color-primary);
}
.chm-scope .chm-attach-icon svg { width: 18px; height: 18px; }
.chm-scope .chm-attach-copy { flex: 1; min-width: 0; }
.chm-scope .chm-attach-copy strong { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chm-scope .chm-attach-copy span { display: block; margin-top: 2px; color: var(--color-text-faint); font-size: 9px; }
.chm-scope .chm-attach-thumb { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; }

/* ---------- Опрос, стикер, пауза ---------- */
.chm-scope .chm-poll-options { display: grid; gap: 6px; }
.chm-scope .chm-poll-option { display: flex; align-items: center; gap: 6px; }
.chm-scope .chm-poll-remove {
  width: 32px; height: 38px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 9px;
  background: var(--color-surface); color: var(--color-danger);
}
.chm-scope .chm-add-option {
  min-height: 32px; padding: 0 10px; justify-self: start; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 9px;
  background: var(--color-surface); color: var(--color-primary); font-size: 10px; font-weight: 700;
}
.chm-scope .chm-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chm-scope .chm-delay { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: 10px; }
.chm-scope .chm-delay .dm-input { width: 66px; min-height: 32px; padding: 5px 7px; }
.chm-scope .chm-check { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-muted); font-size: 10px; }

/* ---------- Бриф для ИИ ---------- */
.chm-scope .chm-ai-editor {
  display: grid; gap: 11px; padding: 13px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: 13px; background: var(--color-primary-bg);
}
.chm-scope .chm-ai-note { display: flex; align-items: flex-start; gap: 9px; color: var(--color-text-muted); font-size: 10px; line-height: 1.45; }
.chm-scope .chm-ai-note strong { display: block; margin-bottom: 2px; color: var(--color-text); font-size: 11px; }
.chm-scope .chm-ai-note-icon {
  width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 8px; background: var(--color-primary); color: #fff;
}
.chm-scope .chm-ai-note-icon svg { width: 13px; height: 13px; }
.chm-scope .chm-ai-lock {
  padding: 9px 10px; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface); color: var(--color-text-faint); font-size: 9px; line-height: 1.4;
}
.chm-scope .chm-tone-field { display: grid; gap: 7px; }
.chm-scope .chm-tone-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chm-scope .chm-tone-label-row .dm-label { margin: 0; }
.chm-scope .chm-tone-label-row small { color: var(--color-text-faint); font-size: 9px; }
.chm-scope .chm-tone-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.chm-scope .chm-tone-card {
  position: relative; min-height: 74px; padding: 10px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface); color: var(--color-text);
  transition: transform var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
}
.chm-scope .chm-tone-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--color-primary) 42%, transparent); box-shadow: var(--shadow-sm); }
.chm-scope .chm-tone-card.is-active {
  border-color: var(--color-primary); background: var(--color-primary-bg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.chm-scope .chm-tone-card.is-active::after {
  content: "✓"; position: absolute; right: 8px; top: 8px;
  width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 9px; font-weight: 800;
}
.chm-scope .chm-tone-icon { display: block; margin-bottom: 7px; color: var(--color-text-muted); }
.chm-scope .chm-tone-icon svg { width: 17px; height: 17px; }
/* Выбранная карточка подсвечивает и иконку: без этого она оставалась серой и
   выпадала из выделения, которое несёт вся остальная карточка. */
.chm-scope .chm-tone-card.is-active .chm-tone-icon { color: var(--color-primary); }
.chm-scope .chm-tone-card strong { display: block; padding-right: 18px; font-size: 10px; line-height: 1.15; }
.chm-scope .chm-tone-card > span:last-child { display: block; margin-top: 4px; color: var(--color-text-faint); font-size: 9px; line-height: 1.3; }

/* ---------- Кнопка добавления ---------- */
.chm-scope .chm-add-message {
  width: 100%; margin-top: 12px; min-height: 62px; padding: 10px 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 44%, transparent);
  border-radius: 15px; background: var(--color-primary-bg); color: var(--color-primary);
  transition: transform var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
}
.chm-scope .chm-add-message:hover { transform: translateY(-1px); border-style: solid; border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.chm-scope .chm-add-plus {
  width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 11px; background: var(--color-primary); color: #fff; font-size: 22px; line-height: 1;
}
.chm-scope .chm-add-copy { text-align: left; }
.chm-scope .chm-add-copy strong { display: block; font-size: 12px; }
.chm-scope .chm-add-copy span { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: 9px; font-weight: 500; }
.chm-scope .chm-add-next {
  margin-left: auto; padding: 5px 8px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-faint); font-size: 9px; font-weight: 700;
}

/* ---------- Предпросмотр ---------- */
.chm-scope .chm-preview {
  align-self: start; position: sticky; top: 20px; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: 17px;
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.chm-scope .chm-preview-head {
  padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--color-border);
}
.chm-scope .chm-preview-title { min-width: 0; }
.chm-scope .chm-preview-title strong { display: block; font-size: 11px; font-weight: 800; }
.chm-scope .chm-preview-title span { display: block; margin-top: 2px; color: var(--color-text-faint); font-size: 9px; line-height: 1.35; }
.chm-scope .chm-preview-title span.is-stale { color: var(--color-warning); font-weight: 700; }
.chm-scope .chm-preview-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 7px;
  border-bottom: 1px solid var(--color-border); background: var(--color-surface-muted);
}
.chm-scope .chm-preview-tab {
  min-height: 32px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--color-text-muted); font-size: 10px; font-weight: 800;
  transition: background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease);
}
.chm-scope .chm-preview-tab.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }

.chm-scope .chm-tg-top {
  min-height: 46px; padding: 8px 10px; display: flex; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--color-border); background: var(--color-surface);
}
.chm-scope .chm-tg-avatar {
  width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 800;
}
.chm-scope .chm-tg-contact { flex: 1; min-width: 0; }
.chm-scope .chm-tg-contact strong { display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chm-scope .chm-tg-contact span { display: block; margin-top: 1px; color: var(--color-accent); font-size: 9px; }
.chm-scope .chm-tg-reset {
  padding: 4px 7px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  cursor: pointer; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-text-muted); font-size: 9px; font-weight: 700;
}
.chm-scope .chm-tg-reset svg { width: 11px; height: 11px; flex: 0 0 auto; }
.chm-scope .chm-tg-reset:hover,
.chm-scope .chm-tg-reset.needs-reset { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); }

.chm-scope .chm-tg {
  min-height: 340px; max-height: 480px; overflow-y: auto; padding: 13px;
  background: var(--color-surface-muted);
}
.chm-scope .chm-tg-date,
.chm-scope .chm-tg-flow,
.chm-scope .chm-tg-system {
  width: max-content; max-width: 88%; margin: 0 auto 10px; padding: 4px 8px;
  border-radius: 999px; background: var(--color-surface); color: var(--color-text-muted);
  font-size: 9px; text-align: center;
}
.chm-scope .chm-tg-flow, .chm-scope .chm-tg-system { margin-block: 7px; }
.chm-scope .chm-tg-bubble {
  max-width: 88%; margin-bottom: 8px; padding: 8px 10px 6px;
  border-radius: 12px 12px 12px 4px; background: var(--color-surface);
  box-shadow: var(--shadow-sm); font-size: 10px; line-height: 1.42;
  white-space: pre-line; word-break: break-word;
}
.chm-scope .chm-tg-bubble.is-bot { margin-right: auto; }
.chm-scope .chm-tg-bubble.is-user {
  margin-left: auto; border-radius: 12px 12px 4px 12px;
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
}
.chm-scope .chm-tg-bubble.is-new { animation: chmBubblePop .25s var(--ease); }
@keyframes chmBubblePop {
  from { opacity: 0; transform: translateY(5px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.chm-scope .chm-tg-time { display: block; margin-top: 5px; color: var(--color-text-faint); font-size: 8px; text-align: right; }
.chm-scope .chm-tg-media {
  height: 90px; margin-bottom: 7px; overflow: hidden; display: grid; place-items: center;
  border-radius: 8px; background: var(--color-primary); color: #fff;
}
.chm-scope .chm-tg-media img { width: 100%; height: 100%; object-fit: cover; }
.chm-scope .chm-tg-sticker { font-size: 36px; line-height: 1.1; }
.chm-scope .chm-tg-poll { display: grid; gap: 4px; margin-top: 6px; }
.chm-scope .chm-tg-option { padding: 4px 6px; border-radius: 6px; background: var(--color-surface-muted); color: var(--color-text-muted); }

.chm-scope .chm-tg-typing {
  width: max-content; margin: 4px auto 8px 0; padding: 8px 10px; display: flex; gap: 3px;
  border-radius: 12px 12px 12px 4px; background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.chm-scope .chm-tg-typing i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-faint);
  animation: chmTypingDot .9s infinite ease-in-out;
}
.chm-scope .chm-tg-typing i:nth-child(2) { animation-delay: .12s; }
.chm-scope .chm-tg-typing i:nth-child(3) { animation-delay: .24s; }
@keyframes chmTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.chm-scope .chm-test-compose {
  padding: 9px; display: flex; align-items: flex-end; gap: 7px;
  border-top: 1px solid var(--color-border); background: var(--color-surface);
}
.chm-scope .chm-test-input {
  flex: 1; min-width: 0; min-height: 38px; max-height: 88px; padding: 9px 11px; resize: none;
  border: 1px solid var(--color-border); border-radius: 13px;
  background: var(--color-surface-muted); color: var(--color-text);
  font-size: 10px; line-height: 1.35; outline: none;
}
.chm-scope .chm-test-input:focus {
  border-color: var(--color-primary); background: var(--color-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.chm-scope .chm-test-send {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 12px; background: var(--color-primary); color: #fff;
}
.chm-scope .chm-test-send:disabled { opacity: .45; cursor: not-allowed; }
.chm-scope .chm-test-send svg { width: 17px; height: 17px; }
.chm-scope .chm-test-help {
  padding: 8px 10px; border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted); color: var(--color-text-faint);
  font-size: 9px; line-height: 1.4;
}
.chm-scope .chm-test-help strong { color: var(--color-text); }

@media (max-width: 1180px) {
  .chm-scope .chm-tone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .chm-scope .chm-composer { grid-template-columns: 1fr; }
  .chm-scope .chm-preview { position: static; max-width: 560px; }
}
@media (max-width: 620px) {
  .chm-scope .chm-auto-row { grid-template-columns: 1fr; }
  .chm-scope .chm-options { align-items: flex-start; flex-direction: column; }
  .chm-scope .chm-add-next { display: none; }
  .chm-scope .chm-tools-row { display: grid; grid-template-columns: 1fr 1fr; }
  .chm-scope .chm-tool { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .chm-scope .chm-message.is-fresh,
  .chm-scope .chm-tg-bubble.is-new,
  .chm-scope .chm-tg-typing i { animation: none; }
}

/* Строка «распознано / не распознано» под списком чатов. Красной становится только
   когда что-то действительно отброшено — постоянный цвет превратил бы её в фон. */
.cm-page [data-chm-targets-note]:empty { display: none; }
.cm-page [data-chm-targets-note].is-bad { color: var(--color-danger-text); }