/* messendzhery frontend (Tasks 2.10-2.13).
   Б24-подобная админка — тёмная шапка, две колонки 25%/75%, плашки tenant'ов. */

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", Roboto, sans-serif;
  font-size: 14px;
  color: #222;
  background: #f5f5f5;
}
.hidden { display: none !important; }

/* ── Login overlay ───────────────────────────────────────── */
.mz-login {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.mz-login-form {
  background: white;
  padding: 32px;
  border-radius: 8px;
  min-width: 320px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.mz-login-form h2 { margin: 0 0 16px; }
.mz-login-form label { display: block; margin: 8px 0; font-size: 13px; color: #455A64; }
.mz-login-form input {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
.mz-login-form button {
  width: 100%;
  padding: 10px;
  margin-top: 12px;
  background: #2C3E50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.mz-login-error { color: #c00; font-size: 13px; margin-top: 8px; min-height: 18px; }

/* ── App layout ──────────────────────────────────────────── */
.mz-app { display: flex; flex-direction: column; height: 100vh; }

.mz-header {
  background: #2C3E50;
  color: white;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.mz-header-title { font-weight: 600; white-space: nowrap; }

.mz-filter { display: flex; gap: 4px; }
.mz-tenant-filter {
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.mz-tenant-filter:hover { background: rgba(255, 255, 255, 0.1); }
.mz-tenant-filter.active { background: rgba(255, 255, 255, 0.2); border-color: white; }
/* `.current` — индикатор «открытый диалог идёт в эту компанию». Ставится
   автоматически при выборе контакта (highlightTenantInHeader), не зависит от
   фильтра. Цветная обводка по бренду tenant + лёгкий фон. */
.mz-tenant-filter.current {
  border-width: 2px;
  padding: 3px 11px; /* компенсируем рост бордера */
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset;
}
.mz-tenant-filter.current[data-tenant="avangard"] { border-color: #66BB6A; background: rgba(46, 125, 50, 0.45); }
.mz-tenant-filter.current[data-tenant="armada"]   { border-color: #FFB74D; background: rgba(245, 124, 0, 0.45); }
.mz-tenant-filter.current[data-tenant="artur"]    { border-color: #64B5F6; background: rgba(21, 101, 192, 0.45); }

.mz-search {
  flex: 1;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 13px;
  max-width: 400px;
  outline: none;
}
.mz-search::placeholder { color: rgba(255, 255, 255, 0.6); }

/* Чекбокс «Архив» — переключение видимости bx24-only контактов. */
.mz-archive-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.mz-archive-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }

.mz-presence {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.mz-presence-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.mz-presence-dot.online { background: #4CAF50; }
.mz-presence-dot.offline { background: #c00; }
.mz-presence button {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.mz-presence button:hover { color: white; }
.mz-setup-link {
  color: #ccc;
  text-decoration: none;
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid #555;
  border-radius: 4px;
  white-space: nowrap;
}
.mz-setup-link:hover { color: white; border-color: #888; }

/* ── Main grid ──────────────────────────────────────────── */
.mz-main {
  flex: 1;
  display: grid;
  grid-template-columns: var(--mz-dialog-col-width, 25%) 1fr;
  overflow: hidden;
  position: relative;
}
/* Когда открыта карточка контакта (todo/047) — добавляется третья колонка справа.
   JS toggle класса .with-panel на .mz-main по клику ⋮ в шапке чата. */
.mz-main.with-panel { grid-template-columns: var(--mz-dialog-col-width, 25%) 1fr 300px; }

/* Карточка контакта — узкая колонка справа от ленты сообщений. */
.mz-contact-panel {
  background: #fff;
  border-left: 1px solid #ddd;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mz-contact-panel.hidden { display: none; }
.mz-contact-panel-header {
  padding: 12px 14px;
  border-bottom: 1px solid #f0f2f5;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 600;
}
.mz-contact-panel-close {
  background: none; border: none; cursor: pointer; font-size: 16px;
  color: #57606a; padding: 0 4px;
}
.mz-contact-panel-close:hover { color: #1f2328; }
.mz-contact-panel-body { padding: 12px 14px; }
.mz-contact-field { margin-bottom: 10px; }
.mz-contact-field label {
  display: block;
  color: #6e7681; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.4px; margin-bottom: 4px;
}
.mz-contact-field input,
.mz-contact-field textarea {
  width: 100%; padding: 6px 8px; box-sizing: border-box;
  border: 1px solid #d0d7de; border-radius: 4px;
  font-size: 13px; font-family: inherit; resize: vertical;
  background: #fff; color: #1f2328; color-scheme: light;
}
.mz-contact-channels {
  list-style: none; padding: 0; margin: 0;
  font-family: 'SF Mono', Consolas, monospace; font-size: 12px;
}
.mz-contact-channels li {
  padding: 5px 0; border-top: 1px solid #f0f2f5;
  display: grid; grid-template-columns: 18px 1fr; gap: 6px;
  color: #455a64;
}
.mz-contact-channels li:first-child { border-top: none; }
.mz-contact-sync {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #57606a;
  background: #ddf4ff; border-left: 3px solid #0969da;
  padding: 6px 10px; border-radius: 4px;
  margin: 8px 0;
}
.mz-contact-sync.hidden { display: none; }
.mz-contact-actions { display: flex; gap: 6px; margin-top: 10px; }
.mz-contact-actions button {
  padding: 8px 24px; border: none; border-radius: 4px;
  cursor: pointer; font-size: 14px;
  background: #2C3E50; color: #fff;
}
.mz-contact-actions button:hover:not(:disabled) { background: #1a2733; }
.mz-contact-actions button:disabled { background: #888; cursor: wait; }
.mz-contact-status {
  margin-top: 8px; font-size: 12px;
  min-height: 16px; line-height: 1.4;
}
.mz-contact-status.success { color: #1a7f37; }
.mz-contact-status.error { color: #cf222e; }

/* Заметка контакта (вариант D): жёлтая pinned-плашка между шапкой и лентой.
   Показывается только когда у currentContact.notes есть значение. */
.mz-chat-note {
  background: #fff8c5;
  border-bottom: 1px solid #f0c000;
  padding: 6px 14px;
  font-size: 13px;
  color: #6e3a00;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.mz-chat-note.hidden { display: none; }
.mz-chat-note-icon { font-size: 14px; flex-shrink: 0; }
.mz-chat-note-text { flex: 1; min-width: 0; }

/* Кнопка ⋮ в шапке чата — справа от имени (flex: 1 на name тянет имя влево). */
.mz-contact-menu-btn {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: #57606a; padding: 0 6px;
  flex-shrink: 0;
}
.mz-contact-menu-btn:hover { color: #1f2328; }
.mz-contact-menu-btn.hidden { display: none; }

@media (max-width: 900px) {
  /* На узких экранах — overlay на всю ширину вместо колонки. */
  .mz-main.with-panel { grid-template-columns: var(--mz-dialog-col-width, 40%) 1fr; }
  .mz-main.with-panel .mz-contact-panel {
    position: absolute; top: 0; right: 0; height: 100%;
    width: 90%; max-width: 320px; z-index: 50;
    box-shadow: -4px 0 16px rgba(0,0,0,0.15);
  }
}

/* ── Dialogs (left column) ──────────────────────────────── */
.mz-dialog-list {
  background: white;
  overflow-y: auto;
  border-right: 1px solid #ddd;
}
.mz-dialog-list ul { list-style: none; padding: 0; margin: 0; }
.mz-dialog-list li {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.mz-dialog-list li:hover { background: #f0f8ff; }
/* Активный (открытый сейчас) диалог — серый фон #f0f2f5 (WhatsApp Web) +
   приглушённая голубая рамка для дополнительного акцента. */
.mz-dialog-list li.active {
  background: #f0f2f5;
  box-shadow: inset 0 0 0 2px #B3D4EF;
  border-radius: 6px;
}

/* Непрочитанные диалоги — только синий бейдж справа (определён ниже как .badge).
   Без фона, без полосы слева, без bold — выделение убрано по запросу пользователя. */
.mz-dialog-list li { position: relative; }

/* Typing-индикатор у диалога (Task 2.12). */
.mz-dialog-typing {
  margin-top: 4px;
  font-size: 12px;
  color: #1565C0;
  font-style: italic;
}

/* Presence-counter в header — сколько других менеджеров онлайн (Task 2.12). */
.mz-presence-online {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(76, 175, 80, 0.25);
  padding: 2px 8px;
  border-radius: 10px;
}
.mz-presence-online:empty { display: none; }

.mz-dialog-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  gap: 8px;
}
.mz-dialog-name > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.mz-dialog-name .badge {
  background: #2196F3;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}
.mz-dialog-preview {
  color: #666;
  font-size: 13px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mz-dialog-meta {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  align-items: center;
  font-size: 11px;
  color: #607D8B;
}
.mz-dialog-source {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  color: white;
  background: #888;
}
.mz-dialog-source.avangard { background: #2E7D32; }
.mz-dialog-source.armada { background: #F57C00; }
.mz-dialog-source.artur { background: #1565C0; }

/* Drag-ручка между списком диалогов и чатом. Тянешь — ширина; dblclick — авто. */
.mz-dialog-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--mz-dialog-col-width, 25%);
  width: 6px;
  margin-left: -3px;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.15s;
}
.mz-dialog-resizer:hover,
.mz-dialog-resizer:active {
  background: #2196F3;
  opacity: 0.5;
}

/* ── Chat (right column) ────────────────────────────────── */
.mz-chat {
  display: flex;
  flex-direction: column;
  /* WhatsApp-style фон ленты переписки — бежевый. */
  background: #EFEAE2;
  overflow: hidden;
}
.mz-chat-header {
  padding: 12px 16px;
  border-bottom: 1px solid #d1d7db;
  background: #F0F2F5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mz-chat-header-name {
  flex: 1;
  min-width: 0;
}
.mz-chat-empty { color: #999; }

/* Архивная подсказка в шапке диалога — простая бледная плашка вместо старых
   канальных пил (фильтр по мессенджеру переехал в глобальную шапку). */
.mz-chat-channels {
  padding: 4px 16px;
  min-height: 0;
}
.mz-chat-channels:empty { display: none; }
.mz-chat-channel-archive-hint {
  display: inline-block;
  font-size: 11px;
  color: #888;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 3px;
}

/* Глобальный source-фильтр в шапке (3 круглые иконки рядом с ФИО менеджера). */
.mz-source-filter {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: 4px;
}
.mz-source-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.12s, transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.mz-source-btn img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.mz-source-btn:hover { opacity: 1; transform: scale(1.08); }
.mz-source-btn.active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 2px #fff;
}
.mz-source-btn[data-source="whatsapp"].active { border-color: #25D366; }
.mz-source-btn[data-source="telegram"].active { border-color: #229ED9; }
.mz-source-btn[data-source="max"].active      { border-color: #6B4EFF; }

/* Сессия транспорта отвалилась (disconnected/error/logged_out/login_required) —
   подсвечиваем иконку красной пульсирующей рамкой. Бьёт .active обводку (это и
   нужно — broken важнее, чем выбранный фильтр). */
.mz-source-btn.mz-broken {
  opacity: 1;
  border-color: #d32f2f;
  animation: mz-pulse-broken 1.5s ease-out infinite;
}
@keyframes mz-pulse-broken {
  0%   { box-shadow: 0 0 0 0    rgba(211, 47, 47, 0.75); }
  70%  { box-shadow: 0 0 0 10px rgba(211, 47, 47, 0); }
  100% { box-shadow: 0 0 0 0    rgba(211, 47, 47, 0); }
}

/* Cold-send block в поиске («Написать новому в WA/TG/MAX»). */
.mz-cold-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid #ddd;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, border-color 0.12s, opacity 0.12s;
}
.mz-cold-send-btn img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.mz-cold-send-btn:hover:not(:disabled) { transform: scale(1.08); border-color: #2196F3; }
.mz-cold-send-btn[data-source="whatsapp"]:hover:not(:disabled) { border-color: #25D366; }
.mz-cold-send-btn[data-source="telegram"]:hover:not(:disabled) { border-color: #229ED9; }
.mz-cold-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(80%);
}

@media (max-width: 520px) {
  .mz-source-btn { width: 28px; height: 28px; }
  .mz-source-btn img { width: 20px; height: 20px; }
  .mz-source-filter { gap: 4px; }
}

.mz-chat-timeline {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Цепочка user-select:text для всех потомков-сообщений — защита от любого
   * каскадного user-select:none (Яндекс/Edge иногда имеют особенности
   * при display:flex). !important перебивает родителей. */
  -webkit-user-select: text !important;
  user-select: text !important;
}
.mz-chat-timeline *,
.mz-msg-row,
.mz-msg-row * {
  -webkit-user-select: text !important;
  user-select: text !important;
}
/* Исключения — на кнопках, иконках, разделителях текст выделять не надо. */
.mz-msg-ctx, .mz-msg-ctx *,
.mz-unread-divider,
.mz-source-icon-wrap, .mz-source-icon {
  -webkit-user-select: none !important;
  user-select: none !important;
}

.mz-msg {
  max-width: 70%;
  padding: 6px 9px 8px;
  border-radius: 7.5px;
  word-wrap: break-word;
  /* Менеджер должен мочь выделить произвольный отрезок текста мышью и скопировать.
     !important — защита от каскада (cursor:context-menu, родительские flex). */
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: text;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}
.mz-msg.in {
  /* WhatsApp incoming — белый пузырь. */
  background: #FFFFFF;
}
.mz-msg.out {
  /* WhatsApp outgoing — фирменный светло-зелёный. */
  background: #D9FDD3;
}
/* Непрочитанные входящие — светло-жёлтый фон + тонкий контур.
 * Снимается через class-mutation когда сообщение попадает в viewport ≥500ms
 * (IntersectionObserver в app.js) с CSS-transition 600ms — мягкое затухание. */
.mz-msg.in.unread {
  background: #fffae6;
  border-color: #ffe566;
  transition: background 600ms ease, border-color 600ms ease;
}

/* TG-style разделитель «Непрочитанные сообщения» между прочитанными
 * и непрочитанными в ленте чата. Вставляется один раз перед первым
 * сообщением с id > last_read_msg_id. */
.mz-unread-divider {
  align-self: center;
  background: rgba(33, 150, 243, 0.15);
  color: #1565C0;
  padding: 4px 14px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin: 8px 0;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
/* Плашка «✓✓ Просмотрено: X, Y и ещё N» (todo/079) — рендерится в renderTimeline
 * после сообщения у которого last_read_msg_id какого-то менеджера (кроме viewer'а)
 * совпадает с id этого сообщения. По стилю — компактная inline-метка, не пузырёк,
 * выровнена вправо (как «ушло» в WhatsApp), мелкий шрифт серого цвета. */
.mz-msg-read-receipts {
  align-self: flex-end;
  max-width: 80%;
  margin: -2px 8px 6px 0;
  padding: 1px 8px;
  font-size: 11px;
  color: #4FC3F7;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

/* Контейнер-row для пузырька + source-иконки с торца (вариант L 22.05.2026).
   Стандартный мессенджер-паттерн: иконка автора на ВНЕШНЕМ торце (далеко от центра):
     in:  иконка СЛЕВА (у левого края экрана), пузырёк справа от иконки
     out: пузырёк слева, иконка СПРАВА (у правого края экрана)
   DOM-порядок (из JS): [iconWrap, msg].
     in (row + justify-start):        visual [icon, msg], прижато ВЛЕВО.
     out (row-reverse + justify-start): visual [msg, icon], прижато ВПРАВО. */
.mz-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  justify-content: flex-start;
}
.mz-msg-row.in  { flex-direction: row; }
.mz-msg-row.out { flex-direction: row-reverse; }
.mz-msg-meta {
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.mz-msg-channel {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  color: white;
  background: #888;
}
.mz-msg-channel.avangard { background: #2E7D32; }
.mz-msg-channel.armada   { background: #F57C00; }
.mz-msg-channel.artur    { background: #1565C0; }
/* Цвет по source (приоритет над tenant — стоят ниже, побеждают одинаковую специфичность).
   Применяется к бейджу источника на каждом сообщении (in и out) + в поиске. */
.mz-msg-channel.whatsapp { background: #25D366; }  /* WhatsApp green */
.mz-msg-channel.telegram { background: #229ED9; }  /* Telegram blue */
.mz-msg-channel.max      { background: #FF8800; }  /* MAX orange */
.mz-msg-channel.bx24     { background: #607D8B; }  /* Archive grey */
.mz-msg-channel.system   { background: #7C3AED; }  /* Системные — фиолетовый (не зелёный от tenant) */

/* PNG-иконка источника (brand-логотип из /apps/logos/) + tenant-notification dot. */
.mz-source-icon-wrap {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
}
.mz-source-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
/* Принадлежность к компании больше не рисуется точкой на иконке сообщения —
   она подсвечивается на соответствующей кнопке в шапке (.mz-tenant-filter.current). */
.mz-msg-text {
  white-space: pre-wrap;
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: text;
}
.mz-msg-voice {
  -webkit-user-select: text !important;
  user-select: text !important;
}
/* Звонок (todo/040) — компактная плашка вместо полноценного пузыря.
   Bubble получает класс .call: убираем фон, делаем компактнее.
   Иконка 📞/📹 в начале + текст вроде «Пропущенный звонок» / «Входящий · 1:23». */
.mz-msg.call {
  background: transparent !important;
  box-shadow: none;
  border: 1px dashed #d0d0d0;
  padding: 6px 10px;
  font-size: 13px;
  color: #555;
  max-width: max-content;
}
.mz-msg.call.in { border-color: #d0d0d0; }
.mz-msg.call.out { border-color: #c5e0c8; }
.mz-msg-call { display: inline-block; }
.mz-msg-voice {
  background: #f0f0f0;
  padding: 6px;
  border-radius: 4px;
  margin-top: 4px;
  font-style: italic;
  font-size: 13px;
  color: #555;
}
.mz-msg-time {
  font-size: 11px;
  color: #667781;
  margin-top: 2px;
  text-align: right;
}
.mz-msg.failed { opacity: 0.6; border: 1px solid #c00; }

/* ── Composer ───────────────────────────────────────────── */
.mz-composer {
  border-top: 1px solid #d1d7db;
  padding: 10px 12px;
  background: #F0F2F5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mz-composer-from {
  margin-left: auto;
  font-size: 12px;
  color: #666;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mz-composer-from select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 12px;
  background: white;
}
.mz-composer textarea {
  resize: vertical;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  min-height: 60px;
  outline: none;
}
.mz-composer textarea:focus { border-color: #1565C0; }
/* Placeholder бледнее браузерного дефолта (~0.54) — подсказка не отвлекает. */
.mz-composer textarea::placeholder { color: rgba(0, 0, 0, 0.33); }
.mz-composer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mz-composer button {
  background: #2C3E50;
  color: white;
  padding: 8px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.mz-composer button:hover { background: #1a2733; }
.mz-composer button:disabled { background: #888; cursor: wait; }
.mz-composer #mz-composer-attach {
  background: #455A64;
  padding: 8px 14px;
}
.mz-composer #mz-composer-attach:hover:not(:disabled) { background: #2C3E50; }
.mz-composer #mz-composer-ai-draft {
  background: #455A64;
  padding: 8px 14px;
}
.mz-composer #mz-composer-ai-draft:hover:not(:disabled) { background: #2C3E50; }
.mz-composer #mz-composer-ai-draft:disabled { background: #888; cursor: wait; }

/* Превью прикреплённого файла над textarea. */
.mz-composer-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #ECEFF1;
  border-radius: 4px;
  font-size: 13px;
}
.mz-att-icon { font-size: 18px; }
.mz-att-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-att-size { color: #607D8B; font-size: 12px; }
.mz-att-remove {
  background: transparent !important;
  color: #607D8B !important;
  padding: 2px 8px !important;
  font-size: 16px !important;
  border-radius: 50% !important;
}
.mz-att-remove:hover { background: rgba(0,0,0,0.05) !important; color: #c00 !important; }

/* Медиа в timeline — картинки/видео/audio/файлы. */
.mz-msg-media {
  margin: 4px 0;
}
.mz-msg-media img,
.mz-msg-media video {
  max-width: 420px;
  max-height: 520px;
  border-radius: 6px;
  display: block;
  object-fit: contain;
  cursor: pointer;
}
/* Сохранённый поворот на 90°/270° (todo/075). CSS transform не меняет
   layout bounding box — поэтому задаём фиксированный квадратный размер +
   object-fit:contain. Так оригинальное фото вписывается в квадрат с
   сохранением пропорций, а после rotate квадрат остаётся квадратом и не
   выезжает за пределы пузыря. */
.mz-msg-media img.mz-msg-photo--rotated {
  /* НЕ задаём width/height — пусть фото сохраняет свои natural-пропорции
     (как обычная не-повёрнутая миниатюра). После CSS rotate визуально получим
     landscape из portrait, но layout-блок остаётся portrait — это норма для
     CSS transform. Чтобы фото визуально не вылезло из пузыря, ограничиваем
     меньшим из max (420 у обычной) — поворот 90° "переключает" роли w/h. */
  max-width: 380px;
  max-height: 380px;
  transition: transform 0.15s ease;
}
.mz-msg-media audio {
  width: 280px;
  display: block;
}

/* Voice-плеер «как Б24»: круглая ▶ + waveform (50 bars). Плоский, без капсулы. */
.mz-voice-wrap {
  /* контейнер плеера + actions под ним */
  display: block;
}
.mz-voice-player {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  min-width: 280px;
  max-width: 460px;
}
.mz-voice-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #2196F3;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: background 0.15s, transform 0.08s;
}
.mz-voice-btn:hover { background: #1976D2; }
.mz-voice-btn:active { transform: scale(0.94); }
.mz-voice-btn:disabled { background: #b0bec5; cursor: not-allowed; }
.mz-voice-player.playing .mz-voice-btn { background: #1565C0; }

.mz-voice-wave {
  flex: 1 1 auto;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.mz-voice-bar {
  flex: 0 0 3px;
  background: #90CAF9;
  border-radius: 1px;
  min-height: 4px;
  transition: background 0.08s;
}
.mz-voice-bar.played { background: #1565C0; }
.mz-voice-player.playing .mz-voice-bar.played { background: #0D47A1; }

.mz-voice-actions {
  margin-top: 2px;
  padding-left: 42px;  /* отступ под круглой кнопкой ▶ */
  display: flex;
  gap: 14px;
  font-size: 12px;
}
.mz-voice-action {
  color: #1565C0;
  text-decoration: none;
}
.mz-voice-action:hover { text-decoration: underline; }
.mz-msg-media a[download],
.mz-msg-file-link {
  display: inline-block;
  padding: 6px 10px;
  background: #f0f0f0;
  border-radius: 4px;
  color: #1565C0;
  text-decoration: none;
}
.mz-msg-media a[download]:hover,
.mz-msg-file-link:hover { background: #e3f2fd; }

/* Reply-bar над composer — показывает на какое сообщение идёт ответ. */
.mz-composer-reply { margin: 4px 0; }
.mz-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f0f7ff;
  border-left: 3px solid #1565C0;
  border-radius: 0 4px 4px 0;
}
.mz-reply-icon { flex: 0 0 auto; color: #1565C0; font-size: 16px; }
.mz-reply-body { flex: 1 1 auto; overflow: hidden; min-width: 0; }
.mz-reply-who { font-size: 11px; font-weight: 600; color: #1565C0; }
.mz-reply-text {
  font-size: 12px; color: #455A64;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mz-reply-cancel {
  flex: 0 0 auto; background: transparent; border: none;
  font-size: 14px; color: #607D8B; cursor: pointer;
  padding: 4px 6px; border-radius: 3px;
}
.mz-reply-cancel:hover { background: rgba(0,0,0,0.08); color: #c00; }

/* Reply-bar внутри пузыря — компактная цитата оригинала (TG/WA-style).
   Появляется над media/text если у сообщения есть reply_to_msg_id.
   Кликается → scroll к оригиналу + flash жёлтым. */
.mz-msg-reply-bar {
  background: rgba(255, 255, 255, 0.5);
  border-left: 3px solid #1565C0;
  padding: 4px 8px;
  margin-bottom: 4px;
  border-radius: 0 4px 4px 0;
  font-size: 11px;
  line-height: 1.3;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.15s;
}
.mz-msg-reply-bar:hover { background: rgba(255, 255, 255, 0.85); }
.mz-msg.out .mz-msg-reply-bar { background: rgba(255, 255, 255, 0.55); border-left-color: #2E7D32; }
.mz-msg-reply-who { font-weight: 600; color: #1565C0; font-size: 11px; }
.mz-msg.out .mz-msg-reply-who { color: #2E7D32; }
.mz-msg-reply-text {
  color: #455A64; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mz-msg-reply-bar-stub .mz-msg-reply-text { font-style: italic; color: #607D8B; }

/* Flash оригинала при клике reply-bar — выделяет пузырь куда переходим. */
.mz-msg-flash { animation: mz-msg-flash-anim 1.2s ease-out; }
@keyframes mz-msg-flash-anim {
  0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.8); background-color: #fff59d; }
  60%  { box-shadow: 0 0 0 6px rgba(255, 193, 7, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); background-color: inherit; }
}

/* Flash при появлении composer-reply-bar после клика «Ответить» — менеджеру
   сразу видно что reply-bar появился (раньше терялся внизу длинного timeline). */
.mz-reply-flash .mz-reply-bar {
  animation: mz-reply-flash-anim 1.2s ease-out;
}
@keyframes mz-reply-flash-anim {
  0%   { background: #ffeb3b; box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.8); }
  50%  { background: #fff59d; box-shadow: 0 0 0 6px rgba(255, 193, 7, 0); }
  100% { background: #f0f7ff; box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* Placeholder для медиа без media_ref (legacy WA/Avito без файла или
   новый TG voice/document до того как добавим download). Менеджер видит
   что было медиа, не пустой блок. */
.mz-msg-media-placeholder {
  display: inline-block;
  padding: 6px 10px;
  margin: 4px 0;
  background: #fff4e6;
  border: 1px dashed #f0ad4e;
  border-radius: 4px;
  color: #8a5a00;
  font-size: 12px;
  font-style: italic;
}

/* PDF inline preview через <embed>. Браузер сам рисует first page + controls. */
.mz-msg-pdf {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mz-msg-pdf-title {
  font-size: 12px;
  color: #1565C0;
  text-decoration: none;
  padding: 4px 6px;
  background: #f0f0f0;
  border-radius: 4px;
  align-self: flex-start;
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mz-msg-pdf-title:hover { background: #e3f2fd; }
.mz-msg-pdf embed {
  width: 420px;
  height: 520px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
}
@media (max-width: 640px) {
  .mz-msg-pdf embed { width: 100%; height: 360px; }
}

/* Плашка «архивный контакт» — показывается вместо composer'а
   когда у контакта только bx24-канал (импортированная история). */
.mz-composer-archive-notice {
  margin: 12px 16px;
  padding: 12px 14px;
  background: #fff8e1;
  border: 1px solid #ffd54f;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #5d4037;
}
.mz-composer-archive-notice code {
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* ── Search results ─────────────────────────────────────── */
.mz-search-results {
  position: absolute;
  top: 8px;
  right: 16px;
  width: 400px;
  max-height: 70vh;
  background: white;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow-y: auto;
  padding: 16px;
  z-index: 100;
}
.mz-search-results h3 { margin: 0 0 12px; font-size: 14px; }
.mz-search-results ul { list-style: none; padding: 0; margin: 0; }
.mz-search-results li {
  padding: 8px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: 13px;
}
.mz-search-results li:hover { background: #f0f8ff; }
.mz-search-results li:last-child { border-bottom: none; }

/* ── Кнопка «← список» (мобильный режим) ─────────────────── */
.mz-chat-back {
  display: none;
  background: #455A64;
  color: white;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.mz-chat-back:hover { background: #2C3E50; }

/* ── D.1 — Кнопка «↑ Загрузить старее» для MAX ──────────── */
.mz-load-older {
  display: block;
  margin: 6px 12px 0;
  padding: 6px 12px;
  background: #ECEFF1;
  color: #37474F;
  border: 1px solid #CFD8DC;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  align-self: flex-start;
}
.mz-load-older:hover:not([disabled]) { background: #CFD8DC; }
.mz-load-older[disabled] { opacity: 0.6; cursor: wait; }
.mz-load-older.hidden { display: none; }

/* B.5 — индикатор «X печатает…» в шапке открытого диалога */
.mz-chat-typing {
  font-size: 11px;
  color: #2E7D32;
  font-style: italic;
  margin-top: 2px;
  font-weight: normal;
  animation: mz-typing-pulse 1.4s ease-in-out infinite;
}
@keyframes mz-typing-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

/* ── Адаптив ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mz-main { grid-template-columns: var(--mz-dialog-col-width, 40%) 1fr; }
  .mz-search { max-width: 200px; }
  .mz-header { flex-wrap: wrap; row-gap: 6px; }
}
@media (max-width: 520px) {
  .mz-main { grid-template-columns: 1fr !important; }
  .mz-dialog-resizer { display: none; }
  .mz-chat { display: none; }
  .mz-chat.open { display: flex; }
  .mz-dialog-list.hidden-on-mobile { display: none; }
  /* На мобильном — кнопка «← список» внутри чата (поверх timeline). */
  .mz-chat.open .mz-chat-back { display: block; }
  /* Шапка тоньше — компактнее на телефоне. */
  .mz-header { padding: 6px 10px; gap: 8px; font-size: 13px; }
  .mz-header-title { font-size: 14px; }
  .mz-tenant-filter { padding: 3px 8px; font-size: 12px; }
  .mz-search { max-width: 100%; flex-basis: 100%; order: 99; }
  .mz-presence { margin-left: auto; }
  .mz-presence button { padding: 3px 8px; font-size: 11px; }
  /* На мобильном картинки/видео занимают полную ширину. */
  .mz-msg-media img, .mz-msg-media video { max-width: 100%; }
  .mz-msg { max-width: 88%; }
}

/* ===== B.2 — Merge UI ============================================== */

/* Чекбокс в каждой строке диалога. Layout — flex, чтобы текст рядом с чекбоксом. */
.mz-dialog-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.mz-dialog-check {
  margin-top: 4px;
  cursor: pointer;
}

/* Аватарка контакта в списке диалогов (как в WhatsApp) — пастельный круг
   с силуэтом более насыщенного оттенка того же цвета. Цвет берётся
   детерминированно из id контакта (pickAvatarColor в app.js). */
.mz-dialog-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.mz-dialog-avatar svg {
  width: 22px;
  height: 22px;
  display: block;
}
.mz-dialog-body {
  flex: 1;
  min-width: 0;  /* чтобы текст в .mz-dialog-name мог обрезаться без расширения li */
}
.mz-dialog-list li.mz-selected {
  background: #e3f2fd;
  border-left: 3px solid #1976d2;
}

/* Чекбоксы скрыты по умолчанию — появляются только когда у UL.mz-dialog-list
 * активен класс .merge-mode (включается кнопкой «Дубли»). В обычном режиме
 * клик по диалогу открывает чат; в merge-mode — toggle выбора (логика в app.js).
 * Для merge-режима оставляем место под чекбокс и подсвечиваем шапку. */
.mz-dialog-list .mz-dialog-check { display: none; }
.mz-dialog-list.merge-mode .mz-dialog-check {
  display: inline-block;
  margin-right: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Плавающая панель внизу с действиями merge. */
.mz-merge-bar {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #1976d2;
  color: #fff;
  padding: 10px 18px;
  border-radius: 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  z-index: 100;
}
.mz-merge-bar.hidden { display: none; }
.mz-merge-bar-count { font-weight: 500; }
.mz-merge-bar-action,
.mz-merge-bar-cancel {
  padding: 6px 14px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-size: 13px;
}
.mz-merge-bar-action {
  background: #fff;
  color: #1976d2;
  font-weight: 500;
}
.mz-merge-bar-action[disabled] {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
}
.mz-merge-bar-cancel {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Модалка выбора primary'а. */
.mz-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.mz-modal {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  max-width: 520px;
  width: calc(100% - 40px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.mz-modal h3 { margin: 0 0 8px; font-size: 18px; }
.mz-modal-help { color: #666; font-size: 13px; margin: 0 0 16px; }
.mz-modal-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
}
.mz-modal-option:hover { background: #f5f5f5; }
.mz-modal-option input[type="radio"] { margin-top: 3px; }
.mz-modal-error {
  color: #d32f2f;
  font-size: 13px;
  min-height: 18px;
  margin: 8px 0;
}
.mz-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}
.mz-modal-cancel,
.mz-modal-confirm {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
}
.mz-modal-cancel { background: #eee; }
.mz-modal-confirm {
  background: #1976d2;
  color: #fff;
}
.mz-modal-confirm[disabled] {
  background: #999;
  cursor: not-allowed;
}

/* ===== Контекстное меню сообщения (Edit/Delete) ===================== */

/* cursor:text унаследован от .mz-msg — даёт менеджеру понимание что текст
   можно выделить мышью. ПКМ-меню доступно по правому клику (стандартный
   браузерный жест), визуально подсказывать курсором не нужно. */

/* Windows 11-style context menu — закруглённые углы 8px, мягкая тень,
   светлая acrylic-подложка, компактные row'ы как в Win 11 File Explorer. */
.mz-msg-ctx {
  position: fixed;
  background: #f9f9f9;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  padding: 4px;
  min-width: 200px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mz-msg-ctx button {
  background: transparent;
  border: none;
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1f1f1f;
  /* Явный font-family на кнопке — браузер не наследует от родителя
     для form-controls (button/input/textarea) по дефолту. */
  font-family: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  transition: background 0.08s;
}
.mz-msg-ctx button:hover:not([disabled]) {
  background: rgba(0, 0, 0, 0.06);
}
.mz-msg-ctx button:active:not([disabled]) {
  background: rgba(0, 0, 0, 0.1);
}
.mz-msg-ctx button[disabled] {
  color: #aaa;
  cursor: not-allowed;
}
.mz-msg-ctx .hint {
  font-size: 11px;
  color: #888;
  margin-left: auto;
  font-weight: normal;
  font-family: inherit;
}
/* Опасная кнопка Удалить — красный текст, разделитель сверху отделяет от безопасных. */
.mz-msg-ctx button.mz-msg-ctx-delete {
  color: #c50f1f;
  margin-top: 5px;
  position: relative;
}
.mz-msg-ctx button.mz-msg-ctx-delete::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: -3px;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}
.mz-msg-ctx button.mz-msg-ctx-delete:hover:not([disabled]) {
  background: rgba(197, 15, 31, 0.08);
}
.mz-msg-ctx button.mz-msg-ctx-delete[disabled] {
  color: #aaa;
}

/* ─── Lightbox для фото (23.05.2026) ─── */
.mz-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.mz-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.mz-lightbox-img {
  max-width: 95vw;
  max-height: 90vh;
  transform-origin: center center;
  transition: transform 0.15s ease;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
}
.mz-lightbox-img:active {
  cursor: grabbing;
}
.mz-lightbox-toolbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
  border-radius: 8px;
  z-index: 10000;
}
.mz-lightbox-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.mz-lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.mz-lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
}
.mz-lightbox-btn.hidden { display: none !important; }
/* SVG-иконки в toolbar — вертикально/горизонтально центрировать. */
.mz-lightbox-btn svg { display: block; }

/* ===== OCR-панель «распознать текст» (todo/110) ===== */
.mz-ocr-panel {
  position: fixed;
  top: 16px;
  right: 16px;
  /* Ширина подгоняется под самую широкую строку (fit-content), в пределах
     [360px .. почти вся ширина экрана]. Высоту НЕ ограничиваем — окно растёт
     под весь текст, без полос прокрутки (см. .mz-ocr-text). */
  width: fit-content;
  min-width: 360px;
  max-width: calc(100vw - 32px);
  background: #1e1e1e;
  color: #f1f1f1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mz-ocr-panel.hidden { display: none !important; }
.mz-ocr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mz-ocr-title { font-size: 14px; font-weight: 600; }
.mz-ocr-x {
  background: transparent;
  border: none;
  color: #bbb;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.mz-ocr-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.mz-ocr-body { padding: 12px; display: flex; flex-direction: column; }
.mz-ocr-status { font-size: 13px; color: #bbb; padding: 8px 2px; }
.mz-ocr-status.hidden { display: none; }
/* Прыгающие точки «Распознаю …» (как индикатор «печатает» в Telegram).
   Анимация — на JS (rAF, см. startOcrDots в core.js): меняет translateY у точек.
   НЕ CSS @keyframes — на ПК с prefers-reduced-motion=reduce браузер их глушит. */
.mz-ocr-dots { display: inline-flex; gap: 5px; align-items: center; height: 10px; }
.mz-ocr-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #9aa0a6; display: inline-block;
  transform-origin: center;
  will-change: transform, opacity;
}
.mz-ocr-text {
  /* div (не textarea): высота по контенту, БЕЗ скролла. Ширина панели = по
     самой широкой строке (max-content). pre-wrap сохраняет переносы строк и
     переносит только строки шире экрана (max-width панели) — без горизонтального
     скролла. overflow-wrap:anywhere рвёт сверхдлинные токены (ICCID, VIN). */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
  background: #2a2a2a;
  color: #f1f1f1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 8px 10px;
  font: 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.mz-ocr-text:focus { outline: none; }
.mz-ocr-text.hidden { display: none; }
.mz-ocr-foot {
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
}
.mz-ocr-copy {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mz-ocr-copy:hover { background: #1d4ed8; }
.mz-ocr-copy:disabled { background: #444; color: #888; cursor: default; }
@media (max-width: 600px) {
  .mz-ocr-panel { top: auto; bottom: 0; right: 0; left: 0; width: auto; max-width: none; border-radius: 12px 12px 0 0; }
}
/* Отступ сверху для cropper-рамки чтобы она не лезла под toolbar (~10мм). */
.mz-lightbox .cropper-container {
  margin-top: 60px;
}

/* Marching ants — анимированный GIF из Jcrop (как в taxiCRM). GIF сам
   анимируется браузером, prefers-reduced-motion=reduce его НЕ блокирует
   (это правило только для CSS animation, не для GIF). 329 байт.
   Cropper.js по дефолту даёт solid #39f outline у .cropper-view-box —
   убираем его и кладём GIF-pattern по 4 граням вьюбокса. */
.mz-lightbox .cropper-view-box {
  outline: none !important;
  /* Marching ants рисуются JS на canvas-overlay (см. core.js startMarchingAnts).
     Edge при reduced-motion не перерисовывает background-image при rAF
     обновлении backgroundPosition. Canvas-paint всегда работает. */
}
/* Cropper.js по дефолту рисует 4 синих .cropper-line вдоль граней — они
   перекрывают marching-ants на view-box. Делаем их прозрачными. */
.mz-lightbox .cropper-line {
  background-color: transparent !important;
}
/* 8 drag-handles — стиль как в Jcrop (тёмный квадрат с белой обводкой). */
.mz-lightbox .cropper-point {
  background-color: #333 !important;
  border: 1px solid #fff !important;
  border-radius: 2px !important;
  opacity: 1 !important;
  width: 9px !important;
  height: 9px !important;
}

/* ─── Lasso selection для своих сообщений (групповое удаление) ─── */
.mz-selection-box {
  position: fixed;
  background: rgba(33, 150, 243, 0.18);
  border: 1px solid #2196F3;
  pointer-events: none;
  z-index: 9000;
}
.mz-msg.out.selected {
  outline: 2px solid #2196F3;
  outline-offset: 2px;
  box-shadow: 0 2px 6px rgba(33, 150, 243, 0.35);
}
.mz-bulk-toolbar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #2C3E50;
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-size: 13px;
}
.mz-bulk-toolbar button {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.mz-bulk-toolbar button:hover { background: rgba(255,255,255,0.25); }
.mz-bulk-toolbar .mz-bulk-delete { background: #c62828; border-color: #c62828; }
.mz-bulk-toolbar .mz-bulk-delete:hover { background: #b71c1c; }

/* ── Mic button (todo/046, голосовой ввод) ───────────────────────────
   Только UI и состояния — реальная запись и POST на /api/transcribe в 047.
   3 состояния через data-state: idle / recording / processing.
   Свайчинг иконок: idle → SVG-микрофон, recording → SVG-стоп с пульсацией,
   processing → CSS-spinner. */
.mz-composer .mic-btn {
  /* Тот же серый тон что у «📎 Файл» — нейтральная вспомогательная кнопка. */
  background: #455A64;
  color: #fff;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s;
}
.mz-composer .mic-btn:hover:not(:disabled) { background: #2C3E50; }
.mz-composer .mic-btn:disabled {
  background: #b0bec5;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Видимость иконок по состоянию — показываем ровно одну. */
.mic-btn .mic-icon-idle,
.mic-btn .mic-icon-stop,
.mic-btn .mic-icon-spinner { display: none; }
.mic-btn[data-state="idle"]       .mic-icon-idle    { display: inline-block; }
.mic-btn[data-state="recording"]  .mic-icon-stop    { display: inline-block; }
.mic-btn[data-state="processing"] .mic-icon-spinner { display: inline-block; }

/* recording — красный пульс по фону + красный цвет иконки-стопа. */
.mic-btn[data-state="recording"] {
  background: #d32f2f;
  animation: mic-pulse 1.5s ease-out infinite;
}
.mic-btn[data-state="recording"]:hover:not(:disabled) { background: #b71c1c; }
@keyframes mic-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(211, 47, 47, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(211, 47, 47, 0); }
  100% { box-shadow: 0 0 0 0    rgba(211, 47, 47, 0); }
}

/* processing — мягкий синий + crude-spinner (border-trick). */
.mic-btn[data-state="processing"] { background: #1565C0; cursor: wait; }
.mic-icon-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mic-spin 0.8s linear infinite;
}
@keyframes mic-spin {
  to { transform: rotate(360deg); }
}

/* Таймер записи — моноширинный, показывается только при recording через JS
   (hidden-атрибут снимается / ставится). Inline-стиль рядом с кнопкой. */
.mic-timer {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
  color: #d32f2f;
  font-weight: 600;
  min-width: 44px;
  text-align: center;
  align-self: center;
}

/* VU-meter — горизонтальная полоска громкости рядом с таймером. JS
   обновляет CSS-переменную --mic-vu (0..1) на родительском span,
   inner span растягивается по ширине. Показывается только при recording. */
.mic-vu {
  align-self: center;
  display: inline-block;
  width: 40px;
  height: 4px;
  background: rgba(211, 47, 47, 0.18);
  border-radius: 2px;
  overflow: hidden;
  --mic-vu: 0;
}
.mic-vu > span {
  display: block;
  height: 100%;
  width: calc(var(--mic-vu) * 100%);
  background: #d32f2f;
  border-radius: 2px;
  transition: width 80ms linear;
}

/* Toast «✓ распознано» — короткое уведомление поверх composer, fade 1.5с. */
.mic-toast {
  position: absolute;
  bottom: 56px;
  right: 12px;
  background: rgba(46, 125, 50, 0.95);
  color: #fff;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 200ms ease;
}
.mic-toast[data-visible="true"] { opacity: 1; }

/* Mobile: кнопка mic поджимается, как «📎 Файл», чтобы не ломать ряд actions. */
@media (max-width: 640px) {
  .mz-composer .mic-btn { padding: 6px 8px; }
  .mic-timer { font-size: 12px; min-width: 40px; }
  .mic-vu { width: 28px; }
}

/* ── Режимы ИИ-оператора (todo/057): тумблеры в шапке + pending-bubble ── */

/* Базовый тумблер «Р/П/А» — компактные кнопки-пилюли с активным состоянием. */
.mz-ai-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 2px;
  font-size: 11px;
  gap: 0;
  flex-shrink: 0;
}
.mz-ai-toggle button {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 14px;
  cursor: pointer;
  color: #555;
  font-weight: 500;
  transition: background 0.15s;
  font-family: inherit;
}
.mz-ai-toggle button:not(.active):hover { background: #f0f2f5; }
.mz-ai-toggle button.active { background: #2C3E50; color: #fff; }

/* Маленький tiny-тумблер (Р/П/А одной буквой) — рядом с именем контакта. */
.mz-ai-toggle.tiny {
  border-radius: 10px;
  padding: 1px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}
.mz-ai-toggle.tiny button {
  padding: 1px 5px;
  font-size: 9px;
  line-height: 12px;
  border-radius: 9px;
  min-width: 16px;
  font-weight: 600;
}
.mz-ai-toggle.tiny button.active { background: #1976d2; color: #fff; }

/* Скрытие — общее для всех элементов блока. */
.mz-ai-toggle.hidden,
.mz-ai-badge.hidden,
.mz-ai-reset.hidden,
.mz-ai-label.hidden { display: none; }

/* ⚙ значок: оранжевый pill — режим у контакта отличается от глобального. */
.mz-ai-badge {
  background: #fff3e0;
  color: #e65100;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
  border: 1px solid #ffb74d;
  line-height: 14px;
  flex-shrink: 0;
  cursor: default;
}

/* ↺ кнопка сброса override — серая, минимальная. */
.mz-ai-reset {
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  padding: 1px 6px;
  color: #555;
  flex-shrink: 0;
  font-family: inherit;
}
.mz-ai-reset:hover { background: #f0f2f5; }

/* Ярлычок «ГЛОБАЛ:» перед большим тумблером. */
.mz-ai-label {
  font-size: 10px;
  color: #555;
  opacity: 0.7;
  margin-right: 2px;
  flex-shrink: 0;
}

/* Pending-bubble черновика ИИ — выровнен вправо, бежевый с dashed border. */
.mz-ai-draft-bubble {
  background: #fff8e1;
  border: 1px dashed #ffb74d;
  align-self: flex-end;
  max-width: 75%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  position: relative;
  box-shadow: 0 2px 6px rgba(239, 108, 0, 0.2);
  /* Bubble встаёт в .mz-chat-timeline, который flex-column —
     align-self: flex-end даёт ему «как outgoing» позицию справа. */
  margin: 4px 0;
}
.mz-ai-draft-bubble .mz-ai-draft-role {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #e65100;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mz-ai-draft-bubble .mz-ai-draft-text {
  color: #424242;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.mz-ai-draft-bubble .mz-ai-draft-actions {
  margin-top: 6px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.mz-ai-draft-bubble .mz-ai-draft-actions button {
  background: #fff;
  border: 1px solid #ffb74d;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  color: #e65100;
  font-family: inherit;
}
.mz-ai-draft-bubble .mz-ai-draft-actions button:hover { background: #ffe0b2; }
.mz-ai-draft-bubble .mz-ai-draft-actions button.primary {
  background: #ef6c00;
  border-color: #ef6c00;
  color: #fff;
}
.mz-ai-draft-bubble .mz-ai-draft-actions button.primary:hover { background: #e65100; }
.mz-ai-draft-bubble .mz-ai-draft-actions button.danger {
  color: #c62828;
  border-color: #ef9a9a;
}

/* Countdown в Автомат-режиме — горизонтальный progress-bar + текст. */
.mz-ai-countdown {
  margin-top: 6px;
  height: 4px;
  background: #ffe0b2;
  border-radius: 2px;
  overflow: hidden;
}
.mz-ai-countdown.hidden { display: none; }
.mz-ai-countdown-bar {
  height: 100%;
  background: #ef6c00;
  width: 100%;
  transition: width 0.2s linear;
}
.mz-ai-countdown-text {
  font-size: 10px;
  color: #ef6c00;
  margin-top: 2px;
}
.mz-ai-countdown-text.hidden { display: none; }

/* Mobile: tiny-тумблер совсем мелкий, большой ужимается. */
@media (max-width: 640px) {
  .mz-ai-toggle.tiny button { padding: 1px 3px; font-size: 8px; min-width: 14px; }
  .mz-ai-toggle button { padding: 3px 7px; font-size: 10px; }
  .mz-ai-label { display: none; }
}

/* ===== ПКМ-меню на контактах sidebar (todo/062) — единый стиль с .mz-msg-ctx ===== */
.mz-ctx-menu {
  position: fixed;
  background: #f9f9f9;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  z-index: 1000;
  min-width: 200px;
  padding: 4px;
  font-size: 13px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 1px;
  -webkit-user-select: none;
  user-select: none;
}
.mz-ctx-item {
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #1f1f1f;
  white-space: nowrap;
  transition: background 0.08s;
}
.mz-ctx-item:hover { background: rgba(0, 0, 0, 0.06); }
.mz-ctx-item:active { background: rgba(0, 0, 0, 0.1); }
.mz-ctx-item.highlight {
  background: #fff8e1;
  color: #ef6c00;
  font-weight: 500;
}
.mz-ctx-item.highlight:hover { background: #ffe0b2; }
.mz-ctx-item.danger { color: #c50f1f; }
.mz-ctx-item.danger:hover { background: rgba(197, 15, 31, 0.08); }
.mz-ctx-sep {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 4px 8px;
}
/* Значок закреплённого контакта в списке (перед именем). */
.mz-dialog-name .mz-pin {
  font-size: 11px;
  margin-right: 3px;
  flex: 0 0 auto;
}

/* ── Per-msg read-индикатор: 👁 N + tooltip «Просмотрено: …» ──
   Старая плашка .mz-msg-read-receipts больше НЕ используется —
   её заменил per-msg индикатор в строке timestamp. На каждом
   входящем msg, если другие менеджеры (не текущий viewer) видели
   его — серым шрифтом «👁 N» справа от 'ЧЧ:ММ'. Hover → ФИО. */
.mz-reads-eye {
  margin-left: 6px;
  color: #16a34a;
  font-size: 13px;
  font-weight: bold;
  cursor: help;
  vertical-align: middle;
}

/* Dev-mode: #id прижат к левому краю bubble, time остаётся справа.
   Включить: localStorage.setItem('mz_dev_mode','1') в DevTools, потом F5.
   Выключить: localStorage.removeItem('mz_dev_mode') + F5. */
.mz-msg-time--dev {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.mz-msg-time--dev .mz-msg-time-text {
  margin-left: auto;
}
.mz-msg-devid {
  color: #999;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Универсальная кнопка «📋» — мини-иконка копирования. Используется и в bubble
   (#id рядом с timestamp), и в карточке контакта (channel_id). */
.mz-copy-btn {
  border: none;
  background: transparent;
  padding: 0 4px;
  margin: 0;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  color: #777;
  border-radius: 3px;
  -webkit-user-select: none;
  user-select: none;
}
.mz-copy-btn:hover {
  background: rgba(0,0,0,0.06);
  color: #111;
}
.mz-copy-btn svg {
  display: block;
  width: 13px;
  height: 13px;
}
/* Текстовый ID контакта мелкой строкой под ФИО (admin-only) — не мешает раскладке
   шапки, выглядит как ненавязчивая подпись «id 12345». */
.mz-contact-id-line {
  display: block;
  margin-top: 2px;
  padding: 0;
  font-size: 10px;
  color: #999;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.mz-contact-id-line:hover { color: #444; background: rgba(0,0,0,0.04); }
/* Текстовый ID сообщения вместо иконки 📋 рядом с timestamp (admin-only).
   Размер совпадает с timestamp, цвет приглушённый. */
.mz-copy-msg-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  color: #999;
}
.mz-copy-ok {
  font-size: 13px;
  color: #16a34a;
  font-weight: bold;
}
/* Кнопка «⌗ обрезать» (автообрезка документа) в footer фото-пузыря, рядом с id. */
.mz-autocrop-btn {
  border: none;
  background: transparent;
  padding: 0 4px;
  margin: 0 2px 0 0;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  color: #999;
  border-radius: 3px;
  -webkit-user-select: none;
  user-select: none;
}
.mz-autocrop-btn:hover { background: rgba(0,0,0,0.06); color: #111; }
.mz-autocrop-btn:disabled { cursor: default; opacity: 0.6; }
#mz-contact-channels-list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Скрываем lightbox-img И cropper-canvas пока идёт rotateTo + setCanvasData
   (≤50мс). Без этого: между сбросом img.style.transform='' и Cropper.ready
   фото мелькает без поворота. Класс ставится ДО сброса transform. */
.mz-crop-initializing .mz-lightbox-img,
.mz-crop-initializing .cropper-container { opacity: 0; }