/* ============================================================================
   ВЕЩЬ ДОБРА / FABRIQA — СЛОЙ «ПЕРЕПИСКИ»
   ----------------------------------------------------------------------------
   Дополнение к слою оформления v9. Вставлять ПОСЛЕ него.

   ЗАЧЕМ ТРИ КОЛОНКИ, А НЕ СТРАНИЦА НА КАНАЛ
   ---------------------------------------------------------------------------
   Смысл сведения каналов — перестать проверять семь мест. Если Instagram,
   WhatsApp и три почты станут отдельными разделами, семь мест вернутся,
   только внутри панели. Поэтому канал здесь — ФИЛЬТР одной ленты, а не
   раздел. Раскрывающийся пункт меню показывает каналы со счётчиками
   и «проваливает» в ту же ленту с наложенным фильтром.

   Раскладка «список ↔ содержимое» (Nielsen Norman называет её
   list-detail / split view) выигрывает у «список → отдельная страница»
   именно на разборе очереди: адрес не меняется, прокрутка списка не
   теряется, следующее письмо открывается стрелкой вниз. Цена перехода
   между письмами должна быть нулевой — иначе разбор входящих
   превращается в навигацию.

   ЯЗЫК
   ---------------------------------------------------------------------------
   Перевод нужен в обе стороны, и это разные задачи:
   · Входящее — показываем СРАЗУ переведённым, оригинал под мелкой ссылкой.
     Так делают Intercom и Crisp: глазу не приходится выбирать, куда смотреть.
   · Исходящее — вы пишете на своём языке, но перед отправкой обязаны увидеть,
     ЧТО именно уйдёт клиенту. Отправка вслепую по машинному переводу —
     самый быстрый способ потерять доверие в переписке на чужом языке.
   · Язык определяется автоматически и подписывается: «сербский, уверенно» /
     «сербский?» — если распознавание не уверено, это надо показать,
     а не молча перевести.
   ========================================================================= */

/* --------------------------------------------------------------------------
   0. РАЗМЕР ВСТРОЕННЫХ ИКОНОК.
   У инлайнового <svg> без width/height размер по умолчанию — 300×150.
   В кнопке это незаметно (там размер задан), а в подписи, вкладке или
   заголовке иконка вырастает во весь блок. Поэтому перечисляем все места,
   где иконка вставляется в текст.
   -------------------------------------------------------------------------- */
.composer .lbl svg,
.seg button svg,
.thread-head .sub svg,
.sla svg, .lang-tag svg,
.hint svg, .callout .hint svg,
.day-sep svg, .panel-row svg,
.band-head a svg, .nav-sub a svg { width: 14px; height: 14px; flex: 0 0 auto; }
.orig-flag svg { width: 13px; height: 13px; }
/* Иконка в строке текста или в ячейке таблицы. */
.ico-inline { display: inline-flex; align-items: center; }
.ico-inline svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   1. ОБОЛОЧКА СТРАНИЦЫ. Три колонки, каждая прокручивается сама.
   -------------------------------------------------------------------------- */
.content.inbox-page {
  padding: 0;
  max-width: none;
  height: calc(100vh - var(--header-h));
  gap: 0;
}
.inbox {
  display: grid;
  grid-template-columns: 384px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
}
.inbox.with-panel { grid-template-columns: 384px minmax(0, 1fr) 300px; }
@media (max-width: 1500px) { .inbox.with-panel { grid-template-columns: 360px minmax(0,1fr); } .inbox-panel { display: none; } }
@media (max-width: 1100px) { .inbox { grid-template-columns: 1fr; } .inbox-thread { display: none; } }

/* --------------------------------------------------------------------------
   2. ЛЕНТА ДИАЛОГОВ
   -------------------------------------------------------------------------- */
.inbox-list {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border-soft);
  background: var(--surface);
}
.inbox-list-head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface);
}
.inbox-list-head .row { display: flex; align-items: center; gap: var(--space-2); }
.inbox-list-scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; }

/* Разделитель дня — «когда пришло» должно читаться без вглядывания в часы. */
.day-sep {
  position: sticky; top: 0; z-index: 1;
  padding: 8px var(--space-4) 6px;
  font: 500 10.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-soft);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.thr {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 12px;
  padding: 13px var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  position: relative;
  transition: background var(--dur-1) var(--ease);
}
.thr:hover { background: var(--surface-hover); }
.thr.active { background: var(--teal-tint); }
.thr.active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--teal);
}
/* Непрочитанное — вес шрифта и точка, не только цвет. */
.thr.unread .thr-name { font-weight: 600; }
.thr.unread .thr-snippet { color: var(--fg-muted); }
.thr.unread .thr-time::after {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); margin-left: 7px; vertical-align: middle;
}

.thr-ava { position: relative; width: 38px; height: 38px; }
.thr-ava .ini {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 13px var(--font-head); color: #fff;
  background: var(--brand-grad);
}
.thr-ava .ini.c2 { background: linear-gradient(135deg, var(--indigo-bright), var(--indigo)); }
.thr-ava .ini.c3 { background: linear-gradient(135deg, var(--coral-bright), var(--coral)); }
.thr-ava .ini.c4 { background: linear-gradient(135deg, var(--amber-bright), var(--amber)); }
/* Значок канала на аватаре: канал опознаётся ФОРМОЙ иконки,
   цвет — второй, необязательный признак. */
.ch-badge {
  position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(16,42,58,.2);
}
.ch-badge svg { width: 11px; height: 11px; }
.ch-mail   { color: var(--indigo-ink); }
.ch-wa     { color: var(--teal-ink); }
.ch-ig     { color: var(--coral-ink); }
.ch-tg     { color: var(--teal-ink); }
.ch-vb     { color: var(--indigo-ink); }

.thr-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.thr-top { display: flex; align-items: baseline; gap: 8px; }
.thr-name {
  font: 500 13.5px/1.3 var(--font-body); color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.thr-time { font: 400 11.5px var(--font-body); color: var(--fg-soft); white-space: nowrap;
            font-variant-numeric: tabular-nums; }
.thr-subj { font: 500 12.5px/1.35 var(--font-body); color: var(--fg-muted);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thr-snippet {
  font: 400 12.5px/1.4 var(--font-body); color: var(--fg-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.thr-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* Метка «не отвечено N» — главная ценность общей ленты.
   Это не украшение: это то, ради чего каналы и сводят вместе. */
.sla {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px;
  border-radius: var(--r-pill); font: 600 11px var(--font-body);
  background: var(--surface-2); color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.sla.warn { background: var(--amber-tint); color: var(--amber-ink); }
.sla.late { background: var(--coral-tint); color: var(--coral-ink); }
.sla svg { width: 11px; height: 11px; }

.lang-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border-radius: var(--r-xs); font: 600 10px var(--font-body); letter-spacing: .04em;
  background: var(--surface-2); color: var(--fg-soft); text-transform: uppercase;
}
.lang-tag.guess::after { content: "?"; margin-left: 1px; }

.assignee {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 600 9px var(--font-head); color: #fff;
  background: var(--indigo);
}
.assignee.me { background: var(--teal); }
.assignee.none { background: transparent; color: var(--fg-faint);
  box-shadow: inset 0 0 0 1px var(--border-strong); }

/* --------------------------------------------------------------------------
   3. ПЕРЕПИСКА
   -------------------------------------------------------------------------- */
.inbox-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.thread-head {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.thread-head h2 { font: 600 15px/1.25 var(--font-head); margin: 0; letter-spacing: -.015em; }
/* Одна строка: если подзаголовок переносится, шапка вырастает и аватар
   с кнопками начинают «плавать» по вертикали. */
.thread-head .sub {
  font: 400 12px var(--font-body); color: var(--fg-soft);
  /* flex-direction обязателен: базовый .sub в слое v9 — колонка,
     без этого «WhatsApp», телефон и метка языка встают друг под друга. */
  display: flex; flex-direction: row; gap: 7px; align-items: center;
  flex-wrap: nowrap; white-space: nowrap; overflow: hidden; margin-top: 3px;
}
.thread-head { min-height: 60px; flex-wrap: nowrap; }
.thread-head > div { min-width: 0; }
.thread-head .sub .hint { font-size: 11.5px; }
.thread-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}

.msg { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; max-width: 760px; }
.msg.out { grid-template-columns: minmax(0,1fr) 30px; margin-left: auto; }
.msg.out .msg-ava { order: 2; }
.msg-ava {
  width: 30px; height: 30px; border-radius: 50%; align-self: flex-end;
  display: grid; place-items: center; font: 600 11px var(--font-head); color: #fff;
  background: var(--brand-grad);
}
.msg.out .msg-ava { background: linear-gradient(135deg, var(--indigo-bright), var(--indigo)); }

.bubble {
  background: var(--surface);
  border-radius: var(--r) var(--r) var(--r) 4px;
  padding: var(--space-4);
  box-shadow: var(--shadow-sm), var(--highlight);
  min-width: 0;
}
.msg.out .bubble {
  background: var(--teal-tint);
  border-radius: var(--r) var(--r) 4px var(--r);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 16%, transparent);
}
.bubble-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.bubble-who { font: 600 12.5px var(--font-body); color: var(--fg); }
.bubble-when { font: 400 11.5px var(--font-body); color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.bubble-text { font-size: 14px; line-height: 1.6; color: var(--fg); }
.bubble-text p { margin: 0 0 10px; }
.bubble-text p:last-child { margin-bottom: 0; }

/* Оригинал: свёрнут по умолчанию, разворачивается на месте.
   <details>/<summary> — без JS и доступно с клавиатуры. */
.orig { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 9px; }
.orig > summary {
  list-style: none; cursor: pointer;
  font: 400 11.5px/1.3 var(--font-body); color: var(--fg-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.orig > summary::-webkit-details-marker { display: none; }
.orig > summary::after {
  content: "показать"; color: var(--teal-ink); font-weight: 500;
  border-bottom: 1px dashed color-mix(in srgb, var(--teal) 45%, transparent);
}
.orig[open] > summary::after { content: "скрыть"; }
.orig > summary:hover::after { color: var(--teal-deep); }
.orig-text {
  margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: var(--fg-muted);
  padding-left: 10px; border-left: 2px solid var(--border);
}
.orig-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 11px var(--font-body); color: var(--fg-soft);
}
.orig-flag svg { width: 12px; height: 12px; }

.attach {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 12px;
  border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 12.5px; color: var(--fg-muted);
}
.attach svg { width: 15px; height: 15px; color: var(--fg-soft); }

/* Системная отметка в ленте: смена канала, назначение, слияние контактов. */
.sys-note {
  align-self: center; max-width: 620px;
  font: 400 11.5px/1.4 var(--font-body); color: var(--fg-soft);
  background: var(--surface-2); border-radius: var(--r-pill);
  padding: 5px 12px; text-align: center;
}

/* --------------------------------------------------------------------------
   4. ПОЛЕ ОТВЕТА. Ключевая деталь: до отправки видно, что уйдёт клиенту.
   -------------------------------------------------------------------------- */
.composer {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  padding: var(--space-3) var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.composer-tabs { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.composer-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 1200px) { .composer-body { grid-template-columns: 1fr; } }

.composer-pane { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.composer-pane .lbl {
  font: 500 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-soft); display: flex; align-items: center; gap: 6px;
}
.composer textarea {
  min-height: 92px !important; resize: vertical;
  font-size: 13.5px !important; line-height: 1.55;
}
/* Предпросмотр перевода — не поле ввода: его нельзя править случайно,
   но можно поправить осознанно кнопкой «Исправить перевод». */
.composer-preview {
  min-height: 92px; padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--teal-tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 18%, transparent);
  font-size: 13.5px; line-height: 1.55; color: var(--fg);
}
.composer-preview:empty::before { content: "Здесь появится текст, который уйдёт клиенту"; color: var(--fg-soft); }
.composer-foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.composer-foot .grow { flex: 1; }

/* Внутренняя заметка — жёлтая, как стикер: её видит только команда. */
.composer.note-mode .composer-body { grid-template-columns: 1fr; }
.composer.note-mode textarea {
  background: var(--amber-tint) !important;
  border-color: color-mix(in srgb, var(--amber) 35%, transparent) !important;
}

/* --------------------------------------------------------------------------
   5. ПРАВАЯ ПАНЕЛЬ — КАРТОЧКА СОБЕСЕДНИКА
   -------------------------------------------------------------------------- */
.inbox-panel {
  border-left: 1px solid var(--border-soft);
  background: var(--surface);
  overflow-y: auto; min-height: 0;
  padding: var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.panel-sec { display: flex; flex-direction: column; gap: 10px; }
.panel-sec > .t {
  font: 500 10.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-soft);
}
.panel-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.panel-row .k { color: var(--fg-soft); font-size: 12.5px; }
.panel-row .v { color: var(--fg); font-weight: 500; text-align: right; min-width: 0; }
/* Один человек = один контакт, даже если пишет с пяти каналов.
   Иначе история дробится и «мы это уже обсуждали» теряется. */
.panel-ch { display: flex; flex-direction: column; gap: 6px; }
.panel-ch a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--fg-muted);
  transition: background var(--dur-1) var(--ease);
}
.panel-ch a:hover { background: var(--surface-2); color: var(--fg); }
.panel-ch svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   6. ПОДМЕНЮ КАНАЛОВ В БОКОВОЙ ПАНЕЛИ
   -------------------------------------------------------------------------- */
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; }
.nav-sub a {
  min-height: 32px; padding: 5px 11px 5px 38px;
  font-size: 13px; border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 9px;
  color: var(--fg-muted);
  position: relative;
}
.nav-sub a::before { display: none; }
.nav-sub a svg { width: 15px; height: 15px; opacity: .85; }
.nav-sub a:hover { background: var(--panel-hover); color: var(--fg); }
.nav-sub a.active { background: var(--panel-active-bg); color: var(--panel-active-fg); font-weight: 500; }
.nav-sub .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-cnt {
  font: 600 11px var(--font-body); font-variant-numeric: tabular-nums;
  color: var(--fg-soft); background: var(--surface-2);
  border-radius: var(--r-pill); padding: 1px 7px; min-width: 20px; text-align: center;
}
.nav-cnt.hot { background: var(--coral-tint); color: var(--coral-ink); }
.nav-sub-title {
  padding: 8px 11px 4px 38px;
  font: 500 10px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-faint);
}
.nav-caret { margin-left: auto; transition: transform var(--dur-2) var(--ease); opacity: .6; }
.nav-caret svg { width: 14px; height: 14px; }
.nav-group.open .nav-caret { transform: rotate(90deg); }
.nav-group:not(.open) + .nav-sub { display: none; }

/* --------------------------------------------------------------------------
   7. СВОДКА ВХОДЯЩИХ НА ГЛАВНОЙ
   Главная отвечает на один вопрос: «что пришло и на что не ответили».
   Не список всех писем — список того, что горит.
   -------------------------------------------------------------------------- */
.ch-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.ch-tile {
  display: flex; align-items: center; gap: 11px;
  padding: var(--space-4);
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--highlight);
  cursor: pointer;
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.ch-tile:hover { box-shadow: var(--shadow), var(--highlight); transform: translateY(-2px); }
.ch-tile .n { font: 600 20px/1 var(--font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ch-tile .l { font: 400 12px/1.3 var(--font-body); color: var(--fg-soft); margin-top: 3px; }
.ch-tile .l b { color: var(--coral-ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ch-tile:hover { transform: none; }
}