/* ==========================================================================
   Inbox — UX wave 2: column proportions on wide screens.
   NOT linked from index.html yet (per task scope) — orchestrator decides
   whether/where to add <link rel="stylesheet" href="css/ux_inbox.css">
   after style.css and analytics_*.css.

   Problem observed: .ib-messenger (style.css ~1711) uses a fixed
   `300px 1fr 290px` grid. On wide monitors (>1600px) the center thread
   column stretches to fill all remaining space, bubbles end up reading
   across a huge line length and the list/context sidebars look
   disproportionately narrow next to it — the "розмазаний" widescreen
   effect mentioned in the task. Bubbles already cap at 72% width but
   that's still very wide in absolute px once the column itself is huge.
   ========================================================================== */

/* Обгортка всього розділу — та сама роль, що .cal-page в календарі.
   .ib-messenger нижче вже центрується сам, але ЗАГОЛОВОК розділу лишався поза
   будь-яким обмеженням і розтягувався на весь монітор: підпис висів окремо
   ліворуч, а месенджер під ним стояв по центру. Тепер шапка й сітка мають
   спільну ширину, тож вони вирівняні. */
.ib-page{ max-width: 1560px; margin: 0 auto; }

/* Мітка на чипі-фільтрі платформи. З'являється ТІЛЬКИ коли дві мережі ділять
   один логотип (особистий LinkedIn і сторінка компанії) — інакше два
   однакові кружечки поспіль неможливо розрізнити. Решта чипів лишаються
   чистими іконками, без зайвого тексту. */
.ib-plat-tag{
  margin-left: 5px; font: 700 var(--fs-10)/1 var(--sans);  color: var(--text-mute);}
.ib-plat-btn.active .ib-plat-tag{ color: var(--text); }

/* ── Режим «Коментарі»: одна колонка ──────────────────────────────────────
   style.css уже ховає чат і контекст у цьому режимі й намагається розтягнути
   список: `.ib-mode-comments .ib-col-list{ flex: 1 }`. Але .ib-col-list — це
   елемент ГРІДА, а не флексу, тож `flex` там не діє взагалі: сітка й далі
   резервувала `300px 1fr` (а з відкритим контекстом — три колонки) під
   панелі, яких на екрані немає. Через це список коментарів лишався вузьким
   стовпчиком ліворуч, а праворуч зяяла порожнеча на пів екрана.

   Ширину обмежуємо явно: гілка коментарів — це читання, а не таблиця, і
   рядок на 1500 пікселів читати незручно. */
.ib-messenger.ib-mode-comments{
  grid-template-columns: minmax(0, 920px);
  justify-content: center;
}
/* Панель керування тягнути слідом за колонкою НЕ треба: перемикач
   «Директи / Коментарі» на всю ширину виглядає як дві велетенські вкладки, а
   не як компактний тумблер. Широкою лишається тільки стрічка коментарів. */
.ib-mode-comments .ib-list-toolbar{ max-width: 470px; }

@media (min-width: 1400px){
  .ib-messenger{
    max-width: 1560px;
    margin: 0 auto;
    grid-template-columns: 320px minmax(0, 760px) 320px;
    justify-content: center;
  }
  .ib-messenger:not(.ib-ctx-open){
    grid-template-columns: 320px minmax(0, 900px);
  }
}

/* ── ціль на час відповіді і «сховати оброблені» ─────────────────────── */
.ib-hide-handled { margin-left: 8px; }
.ib-hide-handled.active { background: var(--accent-wash-3); color: var(--accent-hi); }

/* Позначка часу, а не рамка на весь рядок: рядок уже несе непрочитане,
   активність і мережу — четверта заливка зробила б список строкатим. */
.ib-sla-soon { color: var(--warn); }
.ib-sla-overdue { color: var(--danger); }
.ib-chat-row.sla-overdue { border-left: 2px solid var(--danger); }
.ib-chat-row.sla-soon { border-left: 2px solid var(--warn); }