/* 08_inbox.css — частина style.css, винесена без перестановки правил.
   Повідомлення: три колонки, режими, коментарі за постами, теги,
   шаблони, прев'ю поста, банер незавершеного налаштування.
   Порядок підключення в index.html повторює порядок частин:
   каскад від розділення не змінився (перевірено побайтно). */
/* ── Inbox (classic 3-column messenger) ──────────────────────────────── */
.ib-chip.active{ border-color: transparent; color: var(--on-brand); background: var(--brand-ink); }

.ib-messenger{
  display: grid; grid-template-columns: 300px 1fr 290px; gap: var(--sp-14);
  height: calc(100vh - var(--topbar-h) - 130px); min-height: 460px;
}
.ib-messenger:not(.ib-ctx-open){ grid-template-columns: 300px 1fr; }
.ib-messenger:not(.ib-ctx-open) .ib-col-context{ display: none; }

.ib-col{
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden;
}

/* Left: chat list */
.ib-list-toolbar{ display: flex; flex-direction: column; gap: var(--sp-8); padding: 12px 12px 10px; border-bottom: 1px solid var(--border-soft); flex: none; }

/* Segmented control: Всі | Ліди | Ескалації — one full-width pill track */
.ib-seg{
  display: flex; gap: var(--sp-2); padding: 3px;
  background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 999px;
}
.ib-seg-btn{
  flex: 1; padding: 6px 4px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-dim);
  font: 600 var(--fs-12)/1 var(--sans); white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ib-seg-btn:hover{ color: var(--text); }
.ib-seg-btn.active{ background: var(--elevated); color: var(--text); box-shadow: var(--shadow-1); }

/* Platforms + refresh on one compact row */
.ib-toolbar-row{ display: flex; align-items: center; gap: var(--sp-8); }
.ib-plat{ display: flex; gap: var(--sp-4); flex: 1; min-width: 0; }
.ib-plat-btn{
  padding: 5px 9px; border-radius: var(--ctl-radius-sm); cursor: pointer;
  background: transparent; border: 1px solid var(--border-soft); color: var(--text-dim);
  font: 600 var(--fs-12)/1 var(--sans);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ib-plat-btn:hover{ color: var(--text); border-color: var(--border); }
.ib-plat-btn.active{ background: var(--elevated); border-color: var(--border); color: var(--text); }
.ib-poll-btn{
  margin-left: auto; width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ctl-radius-sm); border: 1px solid var(--border-soft); background: transparent;
  color: var(--text-dim); font-size:  var(--fs-15); cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
.ib-poll-btn:hover{ color: var(--text); border-color: var(--border); transform: rotate(90deg); }
.ib-poll-btn:disabled{ opacity: .5; cursor: default; }
.ib-chats{ flex: 1; overflow-y: auto; padding: 6px; }
.ib-chats .empty-state, .ib-chats .empty{ margin: 20px 10px; }

.ib-chat-row{
  display: flex; align-items: center; gap: var(--sp-10); padding: 10px 8px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--t-fast) var(--ease);
}
.ib-chat-row:hover{ background: var(--bg-soft); }
.ib-chat-row.active{ background: var(--grad-brand-soft); }
.ib-chat-row.unread .ib-chat-preview{ color: var(--text); font-weight: 600; }
.ib-avatar{
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: #fff; font: 700 var(--fs-14)/1 var(--sans);
  object-fit: cover;
}
.ib-avatar-net{ display: inline-flex; align-items: center; justify-content: center; background: var(--bg-soft); border: 1px solid var(--border-soft); }
.ib-avatar-net .net-ico{ width: 22px; height: 22px; }
.ib-chat-row-main{ min-width: 0; flex: 1; }
.ib-chat-row-top{ display: flex; align-items: center; gap: var(--sp-6); margin-bottom: 2px; }
.ib-chat-name{ font: 700 var(--fs-13)/1.3 var(--sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-chat-kind{ font-size:  var(--fs-11); flex: none; }
.ib-chat-provider-badge{ font-size:  var(--fs-10); padding: 1px 6px; height: auto; flex: none; }
.ib-chat-row-bottom{ display: flex; align-items: center; gap: var(--sp-6); }
.ib-chat-preview{ font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ib-chat-badges{ display: flex; gap: 3px; flex: none; font-size:  var(--fs-12); }
.ib-chat-row-right{ flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-4); }
.ib-chat-time{ font: 500 var(--fs-10)/1 var(--mono); color: var(--text-mute); }
.ib-unread-count{
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--brand-ink); color: var(--on-brand); font: 700 var(--fs-10)/17px var(--mono); text-align: center;
}

/* Center: thread */
.ib-col-chat{ position: relative; }
.ib-chat-empty{ flex: 1; display: flex; align-items: center; justify-content: center; }
.ib-chat-active{ display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ib-chat-header{
  display: flex; align-items: center; gap: var(--sp-10); padding: 12px 14px; flex: none;
  border-bottom: 1px solid var(--border-soft);
}
.ib-back-btn{ display: none; }
.ib-chat-header-info{ display: flex; align-items: center; gap: var(--sp-10); flex: 1; min-width: 0; }
.ib-chat-header-main{ min-width: 0; }
.ib-chat-header-name{ font: 700 var(--fs-14)/1.3 var(--sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-chat-header-sub{ font: 500 var(--fs-11)/1.4 var(--sans); color: var(--text-mute); }
.ib-info-btn{ flex: none; }

.ib-bubbles{ flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: var(--sp-4); }
.ib-bubble-row{ display: flex; margin-bottom: 8px; }
.ib-bubble-row.us{ justify-content: flex-end; }
.ib-bubble{ max-width: 72%; padding: 9px 13px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.ib-bubble-them{ background: var(--elevated); border: 1px solid var(--border-soft); color: var(--text); border-bottom-left-radius: 3px; }
.ib-bubble-us{ background: var(--brand-ink); color: var(--on-brand); border-bottom-right-radius: 3px; }
.ib-bubble-text{ font: 500 var(--fs-13)/1.5 var(--sans); }
.ib-bubble-time{ font: 500 var(--fs-10)/1.4 var(--mono); color: var(--text-mute); margin-top: 4px; }

.ib-sys-insert{
  align-self: center; max-width: 88%; text-align: center; margin: 4px auto 10px;
  font: 600 var(--fs-12)/1.5 var(--sans); padding: 8px 14px; border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; justify-content: center;
}
.ib-sys-escalated{ color: var(--warn); background: rgba(245,185,66,.10); border: 1px solid rgba(245,185,66,.28); }
.ib-sys-skipped{ color: var(--text-mute); background: var(--bg-soft); border: 1px solid var(--border-soft); }
.ib-sys-pending{ color: var(--info); background: rgba(91,157,255,.10); border: 1px solid rgba(91,157,255,.28); }
.ib-appr-actions{ display: inline-flex; gap: var(--sp-8); }

/* ── Бренд-логотипи соцмереж (SocialOS.Net) ───────────────────────────── */
.net-ico{ display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: none; line-height: 0; }
.net-ico svg{ width: 100%; height: 100%; display: block; }
/* Невідомий провайдер — обведений глобус (див. GENERIC у ui.js), тому колір,
   а не font-size, як було за часів емодзі. */
.net-ico.net-generic{ color: var(--text-mute); }
.net-tag{ display: inline-flex; align-items: center; gap: var(--sp-6); font: 700 var(--fs-10)/1 var(--sans); letter-spacing: .04em;padding: 3px 8px 3px 5px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border-soft); color: var(--text-dim); }
.net-tag .net-tag-lbl{ position: relative; top: .5px; }

/* ── Inbox: перемикач режимів Директи/Коментарі ───────────────────────── */
/* 🛑 СТИЛІ РЕЖИМІВ ВИДАЛЕНО РАЗОМ ІЗ РЕЖИМАМИ. `.ib-mode-toggle`,
   `.ib-mode-btn` і його активний стан описували сегмент «Директи /
   Коментарі», якого більше немає: черга одна, джерело — чип. Останнє
   правило до того ж фарбувало активний режим бурштином, тобто було
   ще одним місцем, де акцент діставався вибору. */
/* Лого-чипи платформ трохи щільніші під SVG */
#ibProviderChips .ib-plat-btn{ display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 5px 8px; }
/* Ліди/Ескалації — лише для директів */

/* ── Inbox: коментарі за постами ──────────────────────────────────────── */
.ib-comments{ flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: var(--sp-12); }
/* У режимі коментарів список займає всю ширину, чат/контекст ховаємо */
.ib-cmt-thread{ border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--panel, #14141a); overflow: hidden; }
.ib-cmt-post{ display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); }
.ib-cmt-post-cap{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-cmt-post-link{ color: var(--text-mute); text-decoration: none; font-size:  var(--fs-15); }
.ib-cmt-list{ display: flex; flex-direction: column; }
.ib-cmt{ padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.ib-cmt:last-child{ border-bottom: 0; }
.ib-cmt.unread{ background: var(--accent-t-wash-1); }
.ib-cmt-head{ display: flex; align-items: baseline; gap: var(--sp-8); margin-bottom: 3px; }
.ib-cmt-author{ font: 700 var(--fs-12)/1.3 var(--sans); color: var(--text); }
.ib-cmt-time{ font: 500 var(--fs-10)/1 var(--mono); color: var(--text-mute); }
.ib-cmt-text{ font: 400 var(--fs-13)/1.5 var(--sans); color: var(--text-dim); white-space: pre-wrap; word-break: break-word; }
.ib-cmt-reply{ margin-top: 6px; padding: 6px 10px; background: var(--accent-t-wash-2); border-left: 2px solid var(--brand-ink); border-radius: var(--radius-xs); font: 500 var(--fs-12)/1.45 var(--sans); color: var(--text-dim); }
.ib-cmt-pending{ margin-top: 6px; font: 600 var(--fs-11)/1.4 var(--sans); color: var(--info, #5b9dff); }
.ib-cmt-actions{ display: flex; gap: var(--sp-6); margin-top: 8px; flex-wrap: wrap; }
.ib-cmt-replybox{ margin-top: 8px; display: flex; flex-direction: column; gap: var(--sp-6); }
.ib-cmt-input{ min-height: 46px; }

.ib-composer{ flex: none; padding: 12px 14px; border-top: 1px solid var(--border-soft); }
.ib-composer-input{ width: 100%; resize: vertical; min-height: 56px; }
.ib-composer-input:disabled{ opacity: .5; cursor: not-allowed; }
.ib-composer-hint{ font: 500 var(--fs-11)/1.4 var(--sans); color: var(--text-mute); margin-top: 6px; }
.ib-gen-status{ font: 600 var(--fs-11)/1.4 var(--mono); color: var(--text-mute); min-height: 0; }
.ib-gen-status:empty{ display: none; }
.ib-gen-error{ color: var(--danger); }
.ib-actions-row{ display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; margin-top: 8px; }

/* Right: context panel */
.ib-col-context{ padding: 0; }
.ib-context-scroll{ flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.ib-ctx-section{ display: flex; flex-direction: column; gap: var(--sp-8); }
.ib-ctx-title{ font: 700 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); }
.ib-ctx-actions-row{ display: flex; flex-direction: column; gap: var(--sp-8); align-items: stretch; }
.ib-ctx-lead{ margin-top: 4px; }
.ib-ctx-lead-card{ padding: 12px; }
.ib-lead-form{ display: flex; flex-direction: column; gap: var(--sp-8); margin-top: 8px; }
.ib-brief-summary{ font: 500 var(--fs-12)/1.55 var(--sans); color: var(--text-dim); overflow-wrap: anywhere; }
.ib-brief-meta{ font: 500 var(--fs-10)/1.4 var(--mono); color: var(--text-mute); }
.ib-notes-input{ width: 100%; min-height: 90px; resize: vertical; }
.ib-notes-hint{ font: 500 var(--fs-11)/1.4 var(--mono); color: var(--text-mute); min-height: 14px; }

.ib-ctx-backdrop{ display: none; }

@media (max-width: 900px){
  .ib-messenger{ display: block; height: auto; }
  .ib-col-list, .ib-col-chat{ display: none; height: calc(100vh - var(--topbar-h) - 96px); }
  .ib-messenger:not(.ib-mobile-chat-open) .ib-col-list{ display: flex; }
  .ib-messenger.ib-mobile-chat-open .ib-col-chat{ display: flex; }
  .ib-back-btn{ display: inline-flex; }

  .ib-col-context{
    position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: min(340px, 88vw);
    z-index: 51; transform: translateX(100%); transition: transform var(--t-med) var(--ease);
    box-shadow: var(--shadow-pop); border-radius: 0; display: flex !important;
  }
  .ib-messenger:not(.ib-ctx-open) .ib-col-context{ display: flex !important; }
  .ib-messenger.ib-ctx-open .ib-col-context{ transform: translateX(0); }
  .ib-messenger.ib-ctx-open .ib-ctx-backdrop{
    display: block; position: fixed; top: var(--topbar-h); right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,.5); z-index: 50;
  }
}

@media (max-width: 640px){
  .ib-list-toolbar{ padding: 10px; }
}

/* Ліди — lead dossier card in the right panel; also used standalone. */
.lead-card{
  background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.lead-contact{ display: flex; align-items: center; gap: var(--sp-8); margin: 0 0 4px; }
.lead-contact code{ font: 600 var(--fs-12)/1.4 var(--mono); color: var(--text); background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-xs); padding: 2px 7px; overflow-wrap: anywhere; }
.lead-copy-btn{ flex: none; padding: 2px 8px; }
.lead-note{ font: 500 var(--fs-13)/1.5 var(--sans); color: var(--text-dim); overflow-wrap: anywhere; margin-bottom: 8px; }
.lead-status-chips{ display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.ib-lead-status-chip{ font-size:  var(--fs-11); height: 28px; padding: 0 11px; }
.ib-lead-status-chip.active{ border-color: transparent; color: var(--on-brand); background: var(--brand-ink); }

/* ── 24h reply-window indicator (ib-win-*) — dm-only, informational,
   never disables the composer. ─────────────────────────────────────────── */
.ib-win-row{
  font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text-dim);
  background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.ib-win-row.ib-win-warn{ color: var(--warn); background: rgba(245,185,66,.10); border-color: rgba(245,185,66,.28); }
.ib-win-row.ib-win-danger{ color: var(--danger); background: rgba(var(--danger-rgb),.10); border-color: rgba(var(--danger-rgb),.28); }
.ib-win-row.ib-win-closed{ color: var(--text-mute); }
.ib-win-flag-warn{ color: var(--warn); }
.ib-win-flag-closed{ color: var(--text-mute); }

/* chat-list preview row: tag chips (first 2), kept small so they never push
   the timestamp/unread-count column off the row. */
.ib-chat-tags{ display: flex; gap: var(--sp-4); flex: none; overflow: hidden; }
.ib-chat-tag{
  font: 600 var(--fs-10)/1.4 var(--mono); color: var(--text-mute); background: var(--bg-soft);
  border: 1px solid var(--border-soft); border-radius: var(--radius-xs); padding: 1px 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56px; flex: none;
}

/* ── Tags (right panel, ib-tag-*) ─────────────────────────────────────── */
.ib-ctx-tags{ margin-top: 10px; }
.ib-tag-row{ display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; }
.ib-tag-chip{ display: inline-flex; align-items: center; gap: 5px; padding-right: 6px; }
.ib-tag-remove{ border: none; background: none; color: inherit; cursor: pointer; font-size:  var(--fs-10); line-height: 1; padding: 0; opacity: .65; }
.ib-tag-remove:hover{ opacity: 1; }
.ib-tag-add-btn{ font-size:  var(--fs-11); }
.ib-tag-input-wrap{ margin-top: 8px; display: flex; flex-direction: column; gap: var(--sp-6); }
.ib-tag-input{ width: 100%; box-sizing: border-box; }
.ib-tag-presets{ display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.ib-tag-preset{ font-size:  var(--fs-11); }

/* ── Templates quick-insert (right panel, ib-tpl-*) ──────────────────────
   Sourced from Manager's reply-template library (manager.js mg-tpl-*). ─── */
.ib-tpl-list{ display: flex; flex-direction: column; gap: var(--sp-6); align-items: stretch; }
.ib-tpl-btn{ text-align: left; justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-tpl-hint{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-mute); }

/* ── Post preview (right panel, ib-post-*) — comment conversations only ── */
.ib-post-loading{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-mute); }
.ib-post-fallback{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-mute); }
.ib-post-media{ max-width: 100%; border-radius: var(--radius-sm); display: block; margin-top: 4px; }
.ib-post-caption{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-dim); overflow-wrap: anywhere; margin-top: 6px; }
.ib-post-caption-clamped{ cursor: pointer; }
.ib-post-link{ font: 600 var(--fs-11)/1 var(--mono); color: var(--link); text-decoration: none; margin-top: 4px; display: inline-block; }
.ib-post-link:hover{ text-decoration: underline; }

/* ── Onboarding: persistent "setup incomplete" banner ────────────────────
   Inserted by onboarding.js right after <header class="topbar"> — normal
   document flow (not fixed/overlay), so it just pushes .shell down and
   needs no z-index coordination with the drawer/scrim/modal layers. */
.onb-banner{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
  padding: 9px 20px; background: rgba(245,185,66,.10); border-bottom: 1px solid rgba(245,185,66,.28);
  animation: fadein var(--t-med) var(--ease);
}
.onb-banner-text{ font: 700 var(--fs-12)/1.4 var(--sans); color: var(--warn); }
.onb-banner-actions{ display: flex; gap: var(--sp-8); flex: none; }
@media (max-width: 640px){
  .onb-banner{ padding: 9px 12px; flex-wrap: wrap; }
}

/* ── Onboarding: step status icons, install/login/token action bodies ───── */
.onb-step-status.ok{ color: var(--ok); }
.onb-step-status.bad{ color: var(--danger); }
.onb-step-status.opt{ color: var(--text-mute); }

.onb-spin{
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: spin .7s linear infinite; vertical-align: -1px; margin-right: 3px;
}
.onb-gen-status.onb-status-ok{ color: var(--ok); }

.onb-progress{ margin-top: 8px; height: 5px; border-radius: var(--radius-xs); background: var(--bg-soft); overflow: hidden; }
.onb-progress-bar{ height: 100%; background: var(--accent); transition: width var(--t-med) var(--ease); }

.onb-hint{
  margin-top: 8px; font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-dim);
  background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 8px 10px;
}

/* ── Update banner (app.js UpdateBanner) — same "normal document flow,
   right after the topbar" idiom as .onb-banner, just an info tint instead
   of a warning one. Inserted as .onb-banner's neighbor when that one is
   also present, so both stack cleanly under the topbar. ─────────────────── */
.upd-banner{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
  padding: 9px 20px; background: rgba(91,157,255,.10); border-bottom: 1px solid rgba(91,157,255,.28);
  animation: fadein var(--t-med) var(--ease);
}
.upd-banner-text{ font: 700 var(--fs-12)/1.4 var(--sans); color: var(--info); }
.upd-banner-actions{ display: flex; align-items: center; gap: var(--sp-8); flex: none; }
.upd-banner-close{ width: 28px; height: 28px; }
@media (max-width: 640px){
  .upd-banner{ padding: 9px 12px; flex-wrap: wrap; }
}

/* ── Brand view (brand.js) — company/persona forms reuse .modal-field/
   .modal-label/.lib-name-input/.modal-textarea; cards below are new. ────── */
.brand-process-row{ display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; margin-bottom: 14px; }
.brand-process-badge{ color: var(--warn); border-color: rgba(245,185,66,.3); background: rgba(245,185,66,.08); }
.brand-run-panel{ margin-bottom: 20px; }

.brand-card{
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 18px 20px; margin-bottom: 16px;
}
.brand-card-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); margin-bottom: 14px; }
.brand-card-title{ font: 700 var(--fs-14)/1.3 var(--sans); }
.brand-hint{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-mute); margin: -6px 0 14px; }
.brand-save-hint{ font: 700 var(--fs-11)/1 var(--sans); color: var(--text-mute); }
.brand-save-hint.on{ color: var(--ok); }
.brand-updated{ font: 500 var(--fs-11)/1 var(--sans); color: var(--text-mute); margin-left: auto; }

.brand-dropzone{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-8);
  padding: 30px 16px; border-radius: var(--radius); border: 1.5px dashed var(--border);
  background: var(--bg-soft); text-align: center; cursor: pointer; transition: var(--t-fast) var(--ease);
}
.brand-dropzone:hover, .brand-dropzone.drag-over{ border-color: var(--accent); background: var(--panel-2); }
.brand-dropzone.busy{ opacity: .6; pointer-events: none; }
.brand-dropzone .bdz-icon{ font-size:  var(--fs-24); opacity: .8; }
.brand-dropzone .bdz-text{ font: 700 var(--fs-13)/1.4 var(--sans); color: var(--text-dim); }
.brand-dropzone .bdz-sub{ font: 500 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); margin-top: -4px; }

.brand-file-list{ display: grid; gap: var(--sp-8); margin-top: 14px; }
.brand-file-row{
  display: flex; align-items: center; gap: var(--sp-10); padding: 9px 12px;
  border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--border-soft);
}
.brand-file-ic{ font-size: 16px; flex: none; }
.brand-file-body{ flex: 1; min-width: 0; }
.brand-file-name{ font: 600 var(--fs-12)/1.3 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.brand-file-meta{ font: 500 var(--fs-11)/1.3 var(--mono); color: var(--text-mute); margin-top: 2px; }
.brand-file-actions{ flex: none; display: flex; gap: var(--sp-6); }

.brand-ctx-list{ display: grid; gap: var(--sp-8); }
.brand-ctx-item{
  border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--border-soft);
  overflow: hidden;
}
.brand-ctx-head{ display: flex; align-items: center; gap: var(--sp-10); padding: 10px 12px; cursor: pointer; }
.brand-ctx-arrow{ flex: none; color: var(--text-mute); font-size:  var(--fs-11); }
.brand-ctx-name{ flex: 1; font: 600 var(--fs-12)/1.3 var(--sans); overflow-wrap: anywhere; }
.brand-ctx-meta{ font: 500 var(--fs-11)/1.3 var(--mono); color: var(--text-mute); flex: none; }
.brand-ctx-body{ padding: 0 12px 12px; }
.brand-ctx-textarea{
  width: 100%; min-height: 220px; resize: vertical; background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 10px 12px; font: 500 var(--fs-12)/1.55 var(--mono);
}
.brand-ctx-textarea:focus{ outline: none; border-color: var(--accent); }

/* ── Manager view (manager.js) — goal/instructions/files card, reuses
   .brand-card/.brand-hint/.brand-save-hint/.pw-chip-row/.chip/.brand-file-*/
   .brand-dropzone/.modal-textarea/.lib-name-input; only the two rules below
   are new. ───────────────────────────────────────────────────────────── */
.mg-goal-custom-wrap{ margin-top: 10px; }
.mg-instr-textarea{ width: 100%; min-height: 110px; margin-bottom: 12px; }


/* Панель фільтрів. Сегмент режиму пішов (одна черга), натомість фільтрів
   стало три: «Показати», «Мережа», «Джерело».

   🛑 Кнопка оновлення НЕ на власному рядку. Так уже було до сегмента, і
   тоді ж записали чому: рядок коштує 40px висоти заради іконки 32px. Вона
   стоїть на одній лінії з останнім чипом.

   Три чипи в колонці 320px в один ряд не стають — «Джерело: директи й
   коменти» саме по собі ширше за третину. Тому колонка, але остання лінія
   ділиться з кнопкою. */
.ib-list-toolbar{ display:flex; flex-direction:column; gap:var(--sp-8); padding:10px }
.ib-filter-row{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap:6px; align-items:center }
.ib-filter-row .ui-sel{ width:100%; grid-column: 1 / -1 }
/* Останній чип поступається місцем кнопці на своїй лінії. */
.ib-filter-row .ui-sel:last-of-type{ grid-column: 1 }
.ib-filter-row .ib-poll-btn{ grid-column: 2; flex:0 0 auto }

/* ═══ НІЧНА ЗМІНА ════════════════════════════════════════════════════════
   Права половина до вибору розмови. Було «Обери чат зі списку» — інструкція
   до списку ліворуч на пів найширшого екрана застосунку.

   Головне тут — число «чекають вас»: воно єдине означає РОБОТУ, і тому
   єдине світиться. Решта два — звіт, а не завдання. Бурштин на екрані
   один, і він тут: ціни на цьому екрані немає, тож акцент дістається
   тому, що вимагає дії. */
.ns{ display:flex; flex-direction:column; gap:22px; padding:34px; max-width:520px; margin:auto }
.ns-head{ display:flex; flex-direction:column; gap:4px }
.ns-head b{ font-size:19px; font-weight:700; color:var(--text) }
.ns-head span{ font-size: var(--fs-13); color:var(--text-mute) }

.ns-nums{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.ns-n{
  display:flex; flex-direction:column; gap:var(--sp-2); padding:14px;
  border-radius:var(--radius-md); background:var(--fill-1);
}
.ns-n b{ font-size:30px; line-height:1; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums }
.ns-n span{ font-size: var(--fs-11); color:var(--text-mute); line-height:1.3 }
.ns-n-wait b{ color:var(--brand-ink) }
.ns-n-wait{ background:var(--fill-2) }

/* Межа — не попередження, тому без --danger. Це обіцянка, і читатись вона
   має спокійно: людина мусить піти звідси заспокоєною, а не насторожена. */
.ns-limit{ padding:16px 18px; border-radius:var(--radius-md); background:var(--fill-0) }
.ns-limit-h{ display:flex; align-items:center; gap:var(--sp-8); font-size: var(--fs-13); font-weight:600; color:var(--text) }
.ns-limit ul{ margin:10px 0 14px; padding-left:18px; display:flex; flex-direction:column; gap:5px }
.ns-limit li{ font-size: var(--fs-13); color:var(--text-dim) }
.ns-limit .ns-go{ width:100% }

@media (max-width:900px){
  .ns{ padding:20px }
  .ns-nums{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px }
  .ns-n b{ font-size: var(--fs-24) }
}

/* ── ХТО ВІДПОВІВ: ФОРМА, А НЕ КОЛІР ────────────────────────────────────
   Сесія 4: «заповнена плитка "М" — відповіла система, обведена "В" —
   відповіли ви; колір лишається вільним для тривоги».

   Саме тому обидві плитки нейтральні: якби авторство фарбувалось, на
   цьому екрані не лишилось би кольору для того єдиного, заради чого він
   тут потрібен, — для ескалації. Різницю несе заливка проти обведення,
   і вона читається на відстані, з якої літеру ще не видно. */
.ib-by{
  flex: none; width: 18px; height: 18px; border-radius: var(--radius-xs);
  display: grid; place-items: center;
  font: 700 var(--fs-10)/1 var(--sans);
}
.ib-by-sys{ background: var(--fill-3); color: var(--text); }
.ib-by-me{ background: transparent; color: var(--text-mute); box-shadow: inset 0 0 0 1px var(--border-hover); }

/* ── ЕСКАЛАЦІЯ ──────────────────────────────────────────────────────────
   Була одним значком серед п'яти однакових у нижньому рядку — тобто
   найважливіший стан розділу виглядав як решта міток. Тепер слово у
   верхньому рядку плюс лінія по лівому краю всієї розмови: видно з
   відстані й не конкурує з бурштином, бо бурштину тут немає взагалі. */
.ib-esc{
  flex: none; margin-left: auto;
  font: 600 var(--fs-10)/1 var(--sans); color: var(--danger);
  padding: 3px 6px; border-radius: var(--radius-xs);
  background: var(--btn-danger-bg);
}
.ib-chat-row:has(.ib-esc){ box-shadow: inset 2px 0 0 var(--danger); }

/* Час відповіді — щоденний доказ, що система працює. Моноширинний, бо
   це показання; під часом останнього повідомлення, бо відповідає на
   інше питання («як швидко»), ніж воно («коли»). */
.ib-rmin{ font: 600 var(--fs-10)/1 var(--mono); color: var(--text-dim); }

/* Мітка джерела: значок і слово поруч. Слово тихе — воно потрібне, щоб
   рядок можна було ПРОЧИТАТИ, а не щоб на нього дивились. */
.ib-chat-kind{ display: inline-flex; align-items: center; gap: 4px; flex: none }
.ib-kind-w{ font: 500 var(--fs-10)/1 var(--sans); color: var(--text-mute) }
@media (max-width: 560px){
  /* На телефоні рядок і так тісний — лишається значок, слово йде в title. */
  .ib-kind-w{ display: none }
}