/* ---------- Обращения (helpdesk) ---------- */

/* Список */
.tk-table td { vertical-align: middle; }
.tk-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tk-subj { line-height: 1.3; }
.tk-subj.unread > div:first-child { font-weight: 700; }
.tk-preview { color: var(--muted); font-size: 12px; margin-top: 2px; max-width: 520px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-filter { width: auto; padding: 6px 10px; font-size: 13px; }

/* SLA-бейдж */
.sla-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sla-badge.ok { background: #e7f6ec; color: #14713a; }
.sla-badge.warn { background: #fef6e0; color: #b3730a; }
.sla-badge.bad { background: var(--danger-light); color: var(--danger); }
.sla-badge.paused { background: #eef1f5; color: var(--muted); }
[data-theme="dark"] .sla-badge.ok { background: rgba(52,209,122,.16); color: #6fdea4; }
[data-theme="dark"] .sla-badge.warn { background: rgba(251,191,36,.16); color: #f0cf7c; }
[data-theme="dark"] .sla-badge.paused { background: #232b36; }

/* Карточка: три колонки */
.tk-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.tk-col-left, .tk-col-right { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--nav-h) + 16px); }
.tk-col-center { min-width: 0; }
/* Свёртка правой панели: остаётся только шеврон, переписке достаётся ширина. */
.tk-props-toggle { align-self: flex-end; width: 26px; height: 26px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--border); border-radius: 6px; background: var(--card);
  color: var(--muted); cursor: pointer; }
.tk-props-toggle:hover { color: var(--primary); border-color: var(--primary); }
.tk-grid.tk-props-collapsed { grid-template-columns: 280px minmax(0, 1fr) 34px; }
.tk-grid.tk-props-collapsed .tk-col-right > :not(.tk-props-toggle) { display: none; }
.tk-grid.tk-props-collapsed .tk-props-toggle { transform: rotate(180deg); }
@media (max-width: 1280px) { .tk-grid { grid-template-columns: 1fr; } .tk-col-left, .tk-col-right { position: static; }
  .tk-props-toggle { display: none; }
  .tk-grid.tk-props-collapsed { grid-template-columns: 1fr; }
  .tk-grid.tk-props-collapsed .tk-col-right > :not(.tk-props-toggle) { display: revert; } }

.tk-client .tk-name { font-size: 15px; font-weight: 700; }
.tk-cp { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.tk-cp-name { font-weight: 600; }

/* Лента переписки */
.tk-thread { display: flex; flex-direction: column; gap: 12px; }
.tk-msg { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--card); box-shadow: var(--shadow); position: relative; }
/* Статус доставки — иконка в правом нижнем углу пузыря, подробности в title.
   Подвал и ряд цитаты отдают углу место, чтобы иконка не садилась на кнопки. */
.tk-status { position: absolute; right: 10px; bottom: 8px; display: inline-flex; color: var(--muted); }
.tk-status.ok { color: var(--success); }
.tk-status.read { color: var(--primary); }
.tk-status.bad { color: var(--danger); }
.tk-status.sched { color: var(--primary); }
.tk-status .st2 { display: inline-flex; margin-left: -9px; }
.tk-msg-foot, .tk-quote-row { padding-right: 26px; }
/* Показ внешних картинок — кнопка-иконка в правом верхнем углу письма. */
.tk-msg-html { position: relative; }
.mail-imgs-btn { position: absolute; top: 0; right: 0; z-index: 2; display: inline-flex; align-items: center;
  justify-content: center; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--muted); cursor: pointer; opacity: .85; }
.mail-imgs-btn:hover { opacity: 1; color: var(--primary); border-color: var(--primary); }
/* Блок, «пустой» из-за скрытых внешних картинок: место не занимает, пока
   оператор не нажал «показать» (класс снимает showImages). */
.mail-html .mail-blank-hidden { display: none; }
.tk-msg.in { border-left: 3px solid var(--primary); }
.tk-msg.out { background: #f2f8ff; border-left: 3px solid #9ec7f5; }
.tk-msg.note { background: #fff8db; border-left: 3px solid #f0c000; }
.tk-msg.failed { border-color: var(--danger); }
.tk-msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 8px; }
.tk-msg-head .muted { color: var(--muted); }
.tk-time { color: var(--muted); font-size: 12px; margin-left: auto; }
.tk-msg-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.5; }
.tk-msg-cc { margin-top: 8px; font-size: 12px; color: var(--muted); }
/* Вложения — списком по одному в строке. Имя письма длинное, в ряд из
   «таблеток» оно не помещается и ломается пополам вместе с размером. */
.tk-attachments { display: flex; flex-direction: column; gap: 2px; align-items: stretch; margin-top: 10px; }
.tk-attach-title { font-size: 12px; margin-bottom: 2px; }
.tk-attach-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tk-attach { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border: 1px solid transparent;
  border-radius: 7px; font-size: 13px; min-width: 0; max-width: 100%; }
/* Имя жмётся и обрезается многоточием, остальное держит свою ширину: иначе
   строка «57 КБ» переносится по слогам, а это выглядит как поломка. */
.tk-attach .att-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-attach .att-size,
.tk-attach .att-why,
.tk-attach .ic-wrap { flex: 0 0 auto; white-space: nowrap; }
.tk-attach .att-size { font-size: 12px; }
.tk-delivery { color: var(--success); display: inline-flex; }
.tk-delivery.bad { color: var(--danger); font-size: 12px; }
.tk-quote-toggle { margin-top: 8px; background: none; border: none; color: var(--primary); cursor: pointer;
  font-size: 12.5px; padding: 0; font-family: inherit; }
.tk-quoted { margin-top: 8px; padding: 10px; background: #f6f8fa; border-left: 3px solid var(--border-strong);
  color: var(--muted); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; }
[data-theme="dark"] .tk-msg.out { background: rgba(74,158,255,.10); }
[data-theme="dark"] .tk-msg.note { background: rgba(251,191,36,.12); }
[data-theme="dark"] .tk-quoted { background: #232b36; }

.tk-sys { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted);
  padding: 4px 8px; }
.tk-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px;
  background: #fef6e0; color: #8a5a00; font-size: 13px; margin-bottom: 12px; }
[data-theme="dark"] .tk-banner { background: rgba(251,191,36,.14); color: #f0cf7c; }

/* Композер */
.tk-composer { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  padding: 12px 14px; box-shadow: var(--shadow); }
.tk-composer.note-mode { background: #fffdf2; border-color: #f0c000; }
[data-theme="dark"] .tk-composer.note-mode { background: rgba(251,191,36,.08); }
.tk-tabs { display: inline-flex; gap: 2px; background: #eef1f5; border-radius: 8px; padding: 3px; margin-bottom: 10px; }
.tk-tab { border: none; background: none; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--muted); font-family: inherit; }
.tk-tab.active { background: #fff; color: var(--primary); font-weight: 600; box-shadow: var(--shadow); }
[data-theme="dark"] .tk-tabs { background: #232b36; }
[data-theme="dark"] .tk-tab.active { background: var(--card); }
.tk-input { width: 100%; min-height: 110px; resize: vertical; }
.tk-cc-row { margin-bottom: 8px; }
.tk-composer-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tk-send-status { width: auto; }
.tk-closed-note { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--muted); font-size: 13px; flex-wrap: wrap; }

/* Свойства и SLA */
.tk-sla-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.tk-sla-row:first-of-type { border-top: none; }
.tk-sla-total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; }
.tk-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 12px;
  background: var(--primary-light); color: var(--primary); font-size: 12.5px; font-weight: 600; }
.tk-tag button { border: none; background: none; color: inherit; cursor: pointer; font-size: 14px; padding: 0; line-height: 1; }
.tk-tag-input { width: 90px; padding: 3px 8px; font-size: 12.5px; }
/* Полноэкранная форма обращения */
.tf-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .tf-modes { grid-template-columns: 1fr; } }
.tf-mode { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer;
  font-family: inherit; font-size: 14px; color: inherit; }
.tf-mode:hover { border-color: var(--border-strong); }
.tf-mode.active { border-color: var(--primary); background: var(--primary-light); }
.tf-mode-ic { color: var(--muted); flex-shrink: 0; display: flex; margin-top: 1px; }
.tf-mode.active .tf-mode-ic { color: var(--primary); }
.tf-mode-title { display: block; font-weight: 600; }
.tf-mode-hint { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.tf-hint { color: var(--muted); font-size: 12.5px; margin-top: -6px; }
/* .grid-2 в styles.css не схлопывается на узких экранах — внутри формы это критично */
/* До 1200px левый сайдбар (232px) ещё виден, а .entity-grid ещё двухколоночный —
   на ячейку .grid-2 остаётся ~170px, и поля становятся нечитаемыми. */
@media (max-width: 1200px) { .entity-main .grid-2 { grid-template-columns: 1fr; } }
.tf-static { padding: 8px 0; font-weight: 600; }
.tf-info { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-top: 1px solid var(--border); font-size: 13px; }
.tf-info:first-of-type { border-top: none; }

.tk-events { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.tk-event { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tk-event .tk-time { margin-left: 0; min-width: 118px; }

/* ---------- Форма обращения: мастер создания ---------- */
/* Шаги живут в левом сайдбаре; в свёрнутом режиме прячем — там только иконки. */
.tf-steps { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px 10px; }
#app-sidebar.collapsed .tf-steps { display: none; }
.tf-step { display: flex; gap: 10px; padding: 8px 6px; border-radius: 8px; }
.tf-step-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
  background: #eef0f3; color: var(--muted); border: 1px solid var(--border); }
.tf-step-body { display: flex; flex-direction: column; min-width: 0; }
.tf-step-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.tf-step-hint { font-size: 11.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.tf-step.active { background: var(--primary-light); }
.tf-step.active .tf-step-num { background: var(--primary); color: #fff; border-color: var(--primary); }
.tf-step.active .tf-step-title { color: var(--primary); }
.tf-step.done .tf-step-num { background: var(--success-light); color: var(--success); border-color: transparent; }
.tf-step.done .tf-step-title { color: var(--text); }

/* Бейдж автосохранённого черновика в шапке. */
.tf-draft { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  color: var(--success); background: var(--success-light); padding: 3px 9px; border-radius: 12px; }

/* Кнопки под текстом сообщения (шаблоны). */
.tf-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -4px; }

/* Превью выбранного клиента: аватар, имя, адрес, ссылка на контрагента. */
.tf-client { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 2px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.tf-client-name { font-weight: 600; font-size: 13.5px; }
.tf-client-mail { font-size: 12px; color: var(--muted); }
.tf-client-cp { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; padding: 4px 9px; border-radius: 6px; background: var(--card); border: 1px solid var(--border); }

/* Строка проверки адреса: зелёная, красная или нейтральная. */
.tf-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 8px; color: var(--muted); }
.tf-check.good { color: var(--success); }
.tf-check.bad { color: var(--danger); }

/* Цепочка «что произойдёт после создания». */
.tf-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.tf-flow-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; min-width: 128px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.tf-flow-label { font-size: 11.5px; color: var(--muted); }
.tf-flow-value { font-size: 13px; font-weight: 600; }
.tf-flow-arrow { display: flex; align-items: center; color: var(--border-strong); }

/* Срок первого ответа и итог создания. */
.tf-sla { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 7px 0; }
.tf-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.4;
  color: var(--primary-dark); background: var(--primary-light); border-radius: 8px; padding: 10px 12px; }
[data-theme="dark"] .tf-note { color: var(--text); }

/* Список шаблонов ответа в модалке. */
.tf-tpl-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.tf-tpl { text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); cursor: pointer; font: inherit; color: inherit; }
.tf-tpl:hover { border-color: var(--primary); background: var(--primary-light); }
.tf-tpl-body { font-size: 12px; color: var(--muted); margin-top: 4px; white-space: pre-wrap; }

/* ---------- Загрузка всей переписки: прогресс в строке ящика ---------- */
.mi-line { margin-top: 6px; }
.mi-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; margin-bottom: 4px; max-width: 420px; }
.mi-bar > span { display: block; height: 100%; background: var(--primary); transition: width .4s ease; }
.mi-text { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--muted); }

/* ---------- Безопасность письма: опасные вложения и ссылки ---------- */
/* Опасное вложение должно быть видно раньше, чем оператор его откроет. */
.tk-attach.att-warn { background: var(--warn-light); color: var(--warn); border-color: transparent; }
.tk-attach.att-danger { background: var(--danger-light); color: var(--danger); border-color: transparent; font-weight: 600; }
.att-why { font-size: 11px; text-transform: lowercase; opacity: .85; }

/* Ссылки письма: настоящий адрес и объяснение, чем он подозрителен. */
.tk-links { margin-top: 8px; font-size: 12.5px; }
.tk-links > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--muted); list-style: none; }
.tk-links > summary::-webkit-details-marker { display: none; }
/* Сводка ссылок — спокойным серым даже при подозрительных: красным кричат
   сами строки-причины внутри (details при риске и так раскрыт). */
.tk-links.risky > summary { color: var(--muted); font-weight: 500; }
.tk-links.risky > summary .ic-wrap { color: var(--danger); }
.tk-link { padding: 6px 8px; margin-top: 4px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); }
.tk-link.bad { background: var(--danger-light); border-color: transparent; }
.tk-link-url { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; word-break: break-all; }
.tk-link-why { font-size: 11.5px; color: var(--danger); margin-top: 2px; }
/* Сомнительная подлинность отправителя — заметно, но не крикливо. */
.tk-sender-warn { display: flex; align-items: center; gap: 6px; margin: 6px 0 8px; padding: 6px 10px;
  border-radius: 6px; background: var(--danger-light); color: var(--danger); font-size: 12.5px; }

/* ---------- Письмо в исходном оформлении ---------- */
/* Разметка письма чужая, поэтому её держим в рамке: white-space сбрасываем
   (иначе переносы HTML удваиваются), ширину ограничиваем — рассылки любят
   таблицы на 800 пикселей, которые иначе растянут карточку. */
.tk-msg-html { white-space: normal; overflow-x: auto; }
.mail-html { font-size: 14px; line-height: 1.5; max-width: 100%; }
.mail-html img { max-width: 100%; height: auto; }
/* Плотная типографика письма, как в plain-тексте: браузерные поля абзацев
   давали «отступ + разделитель + отступ» ≈ три пустые строки на месте одной.
   Весь воздух между абзацами — только от .mail-gap (одна пустая строка). */
.mail-html p, .mail-html div { margin: 0; }
.mail-html table { border-collapse: collapse; max-width: 100%; }
.mail-html td, .mail-html th { padding: 4px 8px; vertical-align: top; }
.mail-html blockquote { margin: 6px 0 6px 12px; padding-left: 10px; border-left: 2px solid var(--border); color: var(--muted); }
.mail-html pre { white-space: pre-wrap; word-break: break-word; }
.mail-html h1, .mail-html h2, .mail-html h3 { font-size: 1.05em; margin: 8px 0 4px; }

/* Ссылка выглядит ссылкой, но ведёт через подтверждение адреса. */
.mail-link { color: var(--primary); text-decoration: underline; cursor: pointer; }
.mail-link-dead { color: var(--muted); text-decoration: line-through; }

/* Скрытая картинка — понятный плейсхолдер, а не «сломанный квадрат»:
   пунктир, иконка картинки по центру и курсор-рука (показ по клику).
   Атрибуты width/height письма гасим !important — гигантский баннер не должен
   занимать пол-экрана серым полем. */
.mail-img-blocked, .mail-img-missing {
  min-width: 84px; min-height: 56px;
  width: auto !important; height: 56px !important; max-width: 100%;
  border: 1px dashed var(--border); border-radius: 6px;
  background: var(--bg-soft, rgba(127,127,127,.08))
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>')
    no-repeat center;
}
.mail-img-blocked { cursor: pointer; }
.mail-img-blocked:hover { border-color: var(--primary); }
.mail-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; font-size: 12.5px;
  background: var(--bg-soft, rgba(127,127,127,.08)); border: 1px solid var(--border);
}
.mail-bar.muted { color: var(--muted); }

/* ---------- Данные, разобранные из подписи письма ---------- */
.sig-block { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.sig-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }

/* ---------- Вложения: чип как ссылка ---------- */
/* Чип с сохранённым файлом — это ссылка, и вести себя должен как ссылка:
   курсор, подсветка при наведении. Несохранённый остаётся спокойным текстом,
   чтобы по нему не пытались щёлкать. */
a.tk-attach { text-decoration: none; cursor: pointer; }
/* Имя — синим и с подчёркиванием при наведении: строка должна читаться как
   ссылка, иначе по ней просто не щёлкают. Пометки об опасности цвет строки
   переопределяют ниже — там важнее предупреждение. */
a.tk-attach .att-name { color: var(--primary); }
a.tk-attach:hover { border-color: var(--border); background: var(--bg-soft, rgba(127,127,127,.08)); }
a.tk-attach:hover .att-name { text-decoration: underline; }
/* Файла у нас нет — пунктир вместо ссылки: видно, что в письме что-то было,
   и видно, что щёлкать не по чему. */
.tk-attach.att-empty { opacity: .7; cursor: default; border-style: dashed; border-color: var(--border); }
a.tk-attach.att-warn .att-name, a.tk-attach.att-danger .att-name { color: inherit; }
/* «Скачать» появляется только у файлов, которые щелчок открывает во вкладке. */
.tk-attach-act {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--muted); text-decoration: none;
  padding: 3px 7px; border: 1px solid var(--border); border-radius: 6px; white-space: nowrap;
}
.tk-attach-act:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- Карточка клиента в обращении ---------- */
.tk-client-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-client-head h3 { margin: 0; }
.tk-position { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tk-phone { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.tk-phone .muted { font-size: 11.5px; min-width: 30px; }
.tk-phone a { text-decoration: none; }
/* Подсказка из подписи — намеренно неяркая: это предположение сервиса,
   а не проверенные данные, и выглядеть как факт она не должна. */
.tk-sig-hint {
  margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--border);
  border-radius: 8px; font-size: 12.5px; color: var(--muted);
}
.tk-sig-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.tk-sig-hint > div:not(.tk-sig-head) { color: var(--text, inherit); }

/* Подвал письма: файлы слева, переключатель вида справа. Раньше переключатель
   стоял между текстом и вложениями и разрывал письмо пополам. */
.tk-msg-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
.tk-msg-foot .tk-attachments { margin: 0; }
.tk-msg-foot .tk-quote-toggle { margin: 0; white-space: nowrap; }

/* ---------- Копии в письме и в форме ответа ---------- */
.tk-copies { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 12px; }
.tk-copies-label { color: var(--muted); }
.tk-copies-addr {
  padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-soft, rgba(127,127,127,.08)); word-break: break-all;
}
/* Скрытая копия выделена намеренно: это получатель, о котором остальные не
   знают, и ответ «всем» его раскрывает. */
.tk-copies.hidden .tk-copies-addr { border-style: dashed; }
.tk-copies.hidden .tk-copies-label { color: var(--danger, #c0392b); }

.tk-cc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.tk-cc-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  padding: 2px 4px 2px 8px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-soft, rgba(127,127,127,.08));
}
.tk-cc-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; padding: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
}
.tk-cc-x:hover { background: var(--danger, #c0392b); color: #fff; }
.tk-cc-clear { border: none; background: none; color: var(--muted); font-size: 11.5px; cursor: pointer; text-decoration: underline; }
.tk-cc-clear:hover { color: var(--danger, #c0392b); }

/* ---------- Вложения в форме ответа ---------- */
/* Файлы стоят под текстом и над кнопками — там, где оператор их и ищет глазами
   перед нажатием «Отправить». Полоса хода нужна не для красоты: счёт на 8 МБ
   уходит десятки секунд, и без неё форма выглядит зависшей. */
.tk-files { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.tk-file { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 4px 3px 9px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-soft, rgba(127,127,127,.08)); font-size: 12.5px; overflow: hidden; }
.tk-file-name { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--primary); text-decoration: none; }
a.tk-file-name:hover { text-decoration: underline; }
.tk-file-size { font-size: 11.5px; white-space: nowrap; }
.tk-file.warn { background: var(--warn-light); border-color: transparent; color: var(--warn); }
.tk-file.warn .tk-file-name { color: inherit; }
.tk-file.uploading { opacity: .8; }
.tk-file-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: transparent; }
.tk-file-bar > span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .15s linear; }
.tk-files-sum { font-size: 11.5px; margin-left: 4px; }
/* Файл можно перетащить прямо в форму — самый короткий путь из папки «Загрузки». */
.tk-composer.drop { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* Обещали файл, а файла нет. Предупреждение, а не запрет: цвет предостерегающий,
   но не аварийный — ошибка тут возможна, и отправить всё равно можно. */
.tk-warn-bar { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 10px;
  border-radius: 6px; background: var(--warn-light); color: var(--warn); font-size: 12.5px; }

/* ---------- Кнопка отправки: основное действие + варианты ---------- */
.tk-composer-foot .spacer { flex: 1; }
.tk-send-split { display: inline-flex; }
.tk-send-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tk-send-more { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 8px; padding-right: 8px;
  border-left: 1px solid rgba(255,255,255,.35); display: inline-flex; align-items: center; }
/* Вторая строка пункта меню: «уйдёт 28.08.2026, 09:00», номер следующего
   обращения. Без неё оператор выбирает вслепую. */
.dd-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dropdown-menu button:disabled { opacity: .55; cursor: default; }
.dropdown-menu button:disabled:hover { background: none; }
.tk-queue { font-size: 12px; }

/* ---------- Отложенная отправка в ленте ---------- */
/* Запланированное письмо помечено пунктиром: текст оператор уже написал,
   а клиент его ещё не видел — спутать эти два состояния нельзя. */
.tk-msg.scheduled { border-style: dashed; border-left-style: solid; }
.tk-msg.canceled { opacity: .65; }
.tk-sched { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px;
  padding: 6px 10px; border-radius: 6px; background: var(--warn-light); color: var(--warn); font-size: 12.5px; }
.tk-sched .spacer { flex: 1; }
.tk-sched-badge { font-weight: 600; }

/* ---------- Кандидаты на объединение ---------- */
.tk-mc-head { display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; font-size: 12.5px; color: var(--muted); }
.tk-mc-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; margin-bottom: 12px; }
.tk-mc { text-align: left; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); cursor: pointer; font: inherit; color: inherit; }
.tk-mc:hover { border-color: var(--primary); background: var(--primary-light); }
.tk-mc.active { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 2px var(--primary-light); }
.tk-mc-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tk-mc-subj { font-weight: 600; font-size: 13.5px; margin-top: 2px; }
.tk-mc-who { font-size: 12px; margin-top: 2px; }
/* Основание — обязательная часть строки: объединение необратимо, и без ответа
   «почему предложено» список проверять не станут.
   СИЛА основания видна цветом и весом шрифта. Пока все основания рисовались
   одинаковым синим значком, «тот же номер заказа» (точная привязка к делу)
   читался как «похожая тема» (совпадает у половины переписки клиента), и
   оператор соглашался с первым предложением не глядя. */
.tk-mc-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.tk-mc-r { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: 4px; font-size: 12px; font-weight: 600; }
.tk-mc-r.strong { background: var(--success-light); color: var(--success); box-shadow: inset 0 0 0 1px currentColor; }
.tk-mc-r.medium { background: var(--primary-light); color: var(--primary); }
.tk-mc-r.weak { background: #eef0f3; color: var(--muted); font-weight: 500; }
[data-theme="dark"] .tk-mc-r.weak { background: #2a323d; color: var(--muted); }
.tk-mc-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.tk-mc-prev { margin-top: 4px; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* По каким признакам текущего обращения вообще идёт поиск: без этого список
   выглядит как «сервис что-то нашёл», а не как ответ на понятный вопрос. */
.tk-mc-basis { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; font-size: 12px; color: var(--muted); }
.tk-mc-basis .k { color: var(--text); font-weight: 600; }
.tk-mc-target { font-size: 13px; margin-top: 8px; }

/* ---------- Инструменты таблиц (table-tools.js) ---------- */
.tt-table th.tt-th { position: relative; user-select: none; }
.tt-grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; }
.tt-grip:hover, .tt-grip:active { background: var(--primary); opacity: .35; }
.tt-table th.tt-dragging { opacity: .45; }
.tt-table th.tt-drop { box-shadow: inset 3px 0 0 var(--primary); }
.tt-hidden { display: none; }
.tt-scroll { overflow-x: auto; overflow-y: hidden; height: 12px; }
.tt-scroll-inner { height: 1px; }
.tt-panning { cursor: grabbing; user-select: none; }
.tt-menu { position: fixed; z-index: 1000; }

/* Выравнивание колонки с чекбоксами: одинаковая ширина в шапке и строках. */
.tk-table th.chk, .tk-table td.chk { width: 34px; min-width: 34px; text-align: center; padding-left: 8px; padding-right: 4px; }
.tk-table th.chk input, .tk-table td.chk input { vertical-align: middle; margin: 0; }

/* ---------- Свои списки и чекбокс-наборы модалок ---------- */
.tk-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.tk-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-size: 13px; }
.tk-check input { margin: 0; }
.tk-myviews { display: flex; flex-direction: column; gap: 6px; }
.tk-myview-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.tk-myview-row .spacer { flex: 1; }

/* ---------- Контекстное меню (context-menu.js) ---------- */
.app-ctx { position: fixed; z-index: 1200; min-width: 220px; }
.app-ctx .ctx-ic { display: inline-flex; margin-right: 8px; color: var(--muted); vertical-align: -2px; }
.app-ctx button { display: flex; align-items: center; width: 100%; }

/* Полоса приоритета — тенью: не занимает место, шапка и строки ровные. */
.tk-table tbody tr { box-shadow: inset 3px 0 0 var(--pri, transparent); }
/* Страховка от пустых блоков писем, переживших чистку (динамическая вставка). */
.mail-html div:empty:not(.mail-gap), .mail-html p:empty:not(.mail-gap) { display: none; }
/* Разделитель абзацев после чистки пустот: ровно одна «пустая строка»,
   какими бы отступами ни было надуто исходное письмо. */
.mail-html .mail-gap { height: .9em; margin: 0; padding: 0; }

/* Фиксированная сетка колонок: ширины подчиняются colgroup в обе стороны. */
.tt-table.tt-fixed { table-layout: fixed; width: 100%; }
.tt-table.tt-fixed th, .tt-table.tt-fixed td { overflow: hidden; }
/* Верхний скролл-дублёр — тонкий и незаметный, пока не нужен. */
.tt-scroll { height: 10px; }
.tt-scroll::-webkit-scrollbar { height: 8px; }
.tt-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.tt-scroll::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] .tt-scroll::-webkit-scrollbar-thumb { background: var(--border); }

/* Карточка выбранной организации в форме клиента: ссылка, ИНН, домен. */
.tk-org-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; }
.tk-org-card .spacer { flex: 1; }
.tk-org-name { font-weight: 600; }

/* Ряд «Показать цитируемый текст» + «Показать как текст» — одна строка. */
.tk-quote-row { display: flex; align-items: center; gap: 10px; }
.tk-quote-row .spacer { flex: 1; }
.tk-quote-row .tk-quote-toggle { margin-top: 8px; }

/* Списки в письме — без браузерных вертикальных полей: воздух даёт только
   .mail-gap, иначе после перечня запчастей зияло две-три строки. */
.mail-html ol, .mail-html ul { margin-top: 0; margin-bottom: 0; }
.mail-html li { margin: 0; }

/* Свёрнутая пересылка внутри письма: «•••», клик разворачивает. */
.mail-quote { margin-top: 10px; }
.mail-quote > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; color: var(--muted); font-size: 12.5px; user-select: none; }
.mail-quote > summary::-webkit-details-marker { display: none; }
.mail-quote-dots { display: inline-block; padding: 1px 10px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-soft, rgba(127,127,127,.08)); letter-spacing: 2px;
  font-weight: 700; line-height: 1.4; }
.mail-quote > summary:hover .mail-quote-dots { border-color: var(--primary); color: var(--primary); }
.mail-quote[open] > summary .mail-quote-hint { visibility: hidden; }
.mail-quote-body { margin-top: 8px; padding-left: 12px; border-left: 3px solid var(--border); }
/* Скрытая внешняя картинка не отображается вовсе до «Показать изображения». */
.mail-img-hidden { display: none !important; }