/* ============================================================
   THE BOT CONSOLE — ДИАЛОГИ (P10C)
   ------------------------------------------------------------
   Эталонный рабочий экран. Приоритет здесь не красота, а скорость:
   за этим экраном оператор проводит смену целиком.

   Из этого следуют три правила, которым подчинено всё ниже.

   1. Больше всего места — открытому диалогу. Список и контекст
      имеют фиксированную ширину, растёт только переписка.
   2. Цвет означает ровно одно. Electric blue — выбор, фокус, ИИ и
      главное действие. Ожидание и просрочка живут на своих
      семантических токенах и не спорят с ним за внимание.
   3. Ambient-движения на экране нет. Двигается только то, что
      человек сам вызвал, плюс Live Core в оболочке.
   ============================================================ */

/* ------------------------------------------------------------
   РАСКЛАДКА
   Три слоя: список, диалог, контекст. Ширины подобраны по
   реальному содержимому: в списке помещается канал, имя и время
   в одну строку, в контексте — самая длинная подпись.
   ------------------------------------------------------------ */
/* Панель раньше жила колонкой шириной 1000px по центру страницы —
   для документов это верно, для рабочего экрана диалогов нет: место
   съедалось полями, а композер уходил под нижний край. В Console
   рабочая область занимает окно целиком и прокруткой управляет сама
   лента сообщений.

   AI-CP1-UI-FIX1: раньше эти два правила были безусловными на
   body.cs-on, то есть действовали на ЛЮБОЙ вкладке, не только на
   «Диалогах» — .cs-workspace глушил внешнюю прокрутку (shared-ui/
   shell.css задаёт ей overflow:auto), а .admin-main терял обычный
   max-width/margin и получал фиксированную высоту. Для #chats-tab
   это верно: у него своя внутренняя flex-раскладка и собственная
   прокручиваемая лента сообщений (см. ниже). Но для остальных
   вкладок (Организации, AI Control Center, и в первую очередь
   новую вкладку Control Plane, где контента больше высоты экрана)
   внешней прокрутки не оставалось совсем — контент обрезался по
   низу и не прокручивался. :has() здесь — тот же приём, что уже
   используется в admin.css для #chats-tab, а не новый паттерн. */
body.cs-on:has(#chats-tab:not(.hidden)) .cs-workspace { overflow: hidden; }
body.cs-on:has(#chats-tab:not(.hidden)) .admin-main {
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 0;
}
body.cs-on #chats-tab {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  min-height: 0;
}
/* Заголовок и пояснение съедали высоту, которая нужна переписке:
   где находится оператор, уже написано в Topbar оболочки. */
body.cs-on #chats-tab > h1,
body.cs-on #chats-tab > .chats-hint { display: none; }

body.cs-on .admin-chat-frame {
  height: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 300px;
  /* Without an explicit row track, the grid's single implicit row sizes
     to "auto" (its content's natural height) regardless of the
     min-height:0 already set on .chat-panel/.chat-view/.chat-messages
     below (operator-dashboard/dashboard.css) -- that min-height:0 only
     stops a track from refusing to shrink BELOW content size, it can't
     stop an auto track from growing TO content size in the first place.
     A long conversation then pushed this frame's own height (and with
     it .admin-chat-frame's own overflow:hidden clip line) down past the
     viewport instead of staying put while .chat-messages scrolled
     internally -- the reported bug. minmax(0, 1fr) gives the row the
     same definite, frame-bound height the pre-Console flex layout
     always had, restoring exactly that internal-scroll chain (same
     effect min-height:0 already has along the flex axis at the ≤768px
     breakpoint below, where .admin-chat-frame reverts to display:flex). */
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  background: var(--bg);
}
body.cs-on .admin-chat-frame > .sidebar {
  width: auto;
  min-width: 0;
  background: var(--surface);
}
body.cs-on .admin-chat-frame > .chat-panel {
  border-right: 1px solid var(--border);
  background: var(--bg);
}

/* ------------------------------------------------------------
   СПИСОК ДИАЛОГОВ
   Иерархия сверху вниз: сначала «ждёт ли ответа», потом кто и по
   какому каналу, и только затем текст. Всё сразу показывать
   нельзя — получится ёлка из значков.
   ------------------------------------------------------------ */
body.cs-on .conversation-list-toggle {
  display: flex;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
body.cs-on .list-view-btn {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
}
body.cs-on .list-view-btn:hover { background: var(--surface-alt); color: var(--ink); }
body.cs-on .list-view-btn.active {
  background: var(--accent-wash);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
/* TGMAX-IMPL-1: компактный фильтр по каналу рядом с «Активные / Архив» (тот же ряд, без лишней высоты) */
body.cs-on .list-channel-filter {
  flex: 0 1 auto;
  width: 112px;
  max-width: 40%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
}
body.cs-on .conversation-list-empty {
  padding: 18px 16px;
  color: var(--ink-muted);
  font-size: 13px;
}

body.cs-on .conversation-item {
  position: relative;
  padding: 11px 14px 11px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease);
}
body.cs-on .conversation-item:hover { background: var(--surface-alt); }
/* Выбранная строка помечена и цветом, и полосой слева: на длинном
   списке одной заливки мало, чтобы найти её взглядом. */
body.cs-on .conversation-item.active {
  background: var(--accent-wash);
  box-shadow: inset 3px 0 0 var(--accent);
}
body.cs-on .conversation-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
body.cs-on .conversation-visitor {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.cs-on .conversation-timestamp {
  order: 2;
  flex: none;
  font-size: 11px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
body.cs-on .conversation-preview {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Канал. Три реальных канала различаются оттенком, но не
   превращают список в радугу: заливка приглушена, читается подпись. */
body.cs-on .channel-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.cs-on .channel-tag-widget   { color: var(--accent);     border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
body.cs-on .channel-tag-avito    { color: var(--success);    border-color: color-mix(in srgb, var(--success) 34%, transparent); }
body.cs-on .channel-tag-telegram { color: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-soft) 34%, transparent); }

body.cs-on .conversation-online-dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}
body.cs-on .conversation-online-dot.online { background: var(--success); }
body.cs-on .conversation-id-tag {
  font-size: 10.5px;
  color: var(--ink-faint);
  font-weight: 500;
}
body.cs-on .conversation-repeat-tag {
  flex: none;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 600;
}

/* ОЖИДАНИЕ и ПРОСРОЧКА — разная семантика, разные токены.
   Просрочка заметна, но строку не заливает: оператор должен видеть
   её боковой полосой, а читать по-прежнему текст. */
body.cs-on .conversation-unanswered-badge,
body.cs-on .conversation-autoresponse-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 650;
}
body.cs-on .unanswered-badge-waiting { background: var(--surface-alt); color: var(--ink-muted); }
body.cs-on .unanswered-badge-overdue { background: var(--warning-wash); color: var(--warning-ink); }
body.cs-on .conversation-item-overdue {
  background: transparent;
  box-shadow: inset 3px 0 0 var(--warning);
}
body.cs-on .conversation-item-overdue:hover { background: var(--surface-alt); }
body.cs-on .conversation-item-overdue.active {
  background: var(--accent-wash);
  box-shadow: inset 3px 0 0 var(--warning), inset 6px 0 0 -3px var(--accent);
}
body.cs-on .autoresponse-badge-draft    { background: var(--accent-wash); color: var(--accent); }
body.cs-on .autoresponse-badge-countdown{ background: var(--warning-wash); color: var(--warning-ink); }

body.cs-on .org-chat-group-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
body.cs-on .org-chat-group-header:hover { color: var(--ink); }
body.cs-on .org-chat-group-count { margin-left: auto; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-faint); }

/* ------------------------------------------------------------
   ОТКРЫТЫЙ ДИАЛОГ
   ------------------------------------------------------------ */
body.cs-on .chat-view { background: var(--bg); }

/* Шапка диалога: только то, что реально помогает отвечать. */
body.cs-on .visitor-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
}
body.cs-on .visitor-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
}
body.cs-on .visitor-online-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-strong);
}
body.cs-on .visitor-online-badge.online .dot,
body.cs-on .visitor-online-badge.is-online .dot { background: var(--success); }
body.cs-on .visitor-repeat-badge {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
}
body.cs-on .visitor-device { color: var(--ink-faint); font-size: 11.5px; }
body.cs-on .visitor-page-link {
  color: var(--accent);
  font-size: 11.5px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.cs-on .visitor-info-actions { margin-left: auto; display: flex; gap: 6px; }

/* Лента. Плотнее, чем в чате посетителя: здесь читают помногу и
   подолгу, а не общаются. Свечения у пузырей нет намеренно. */
body.cs-on .chat-messages {
  padding: 16px 18px;
  background: var(--bg);
}
body.cs-on .chat-message {
  position: relative;
  max-width: 76%;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body.cs-on .chat-message-visitor {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}
body.cs-on .chat-message-operator {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--ink);
}
body.cs-on .chat-message-author {
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
body.cs-on .chat-message-deleted { opacity: 0.55; font-style: italic; }
body.cs-on .chat-message-actions { display: flex; gap: 6px; margin-top: 5px; }
body.cs-on .chat-message-actions button {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-faint);
  font-size: 10.5px;
}
body.cs-on .chat-message-actions button:hover { color: var(--ink); border-color: var(--border-strong); }
body.cs-on .chat-message-attachment img,
body.cs-on .chat-message img { max-width: 100%; border-radius: var(--radius-sm); }

/* TB-PCC2 Phase B §N: platform-admin-only attribution badge -- only ever
   populated when the logged-in role is "admin" (see dashboard.js), never
   shown to an owner/operator regardless of CSS (the underlying fetch
   itself is 403'd for them server-side). */
body.cs-on .ai-attribution-badge { margin-top: 4px; }
body.cs-on .ai-attribution-tag {
  font: inherit;
  font-size: 10.5px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
}
body.cs-on .ai-attribution-tag:hover { color: var(--ink); border-color: var(--border-strong); }
body.cs-on .ai-attribution-details { margin-top: 4px; font-size: 11px; color: var(--ink-faint); }
body.cs-on .ai-attribution-details.hidden { display: none; }

/* ------------------------------------------------------------
   ЧЕРНОВИК ИИ
   Это НЕ отдельное сообщение и не отправленный ответ: черновик
   лежит в поле ответа, и оператор правит его на месте — так
   работает продукт. Поэтому карточка обрамляет композер, а не
   заменяет его: workflow остаётся прежним, меняется только то,
   как ясно он подписан.
   ------------------------------------------------------------ */
body.cs-on .cw-composer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
body.cs-on .cw-draft-head {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 0;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--accent);
}
body.cs-on .cw-composer[data-draft="1"] .cw-draft-head { display: flex; }
body.cs-on .cw-composer[data-draft="1"] {
  background:
    linear-gradient(180deg, var(--accent-wash) 0%, transparent 64px),
    var(--surface);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
body.cs-on .cw-draft-mark {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* Спокойный отклик рядом с композером, пока идёт настоящая
   генерация. Второго большого индикатора здесь нет: главный —
   Live Core в оболочке. */
body.cs-on .cw-thinking {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 8px 18px 0;
  font-size: 11.5px;
  color: var(--ink-muted);
}
body.cs-on .cw-composer[data-thinking="1"] .cw-thinking { display: flex; }
body.cs-on .cw-composer[data-thinking="1"] .cw-draft-head { display: none; }
body.cs-on .cw-thinking-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: cw-pulse 1.4s ease-in-out infinite;
}
@keyframes cw-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ------------------------------------------------------------
   АВТООТПРАВКА
   Самое срочное состояние экрана: оператор должен за секунду
   понять, что ответ уйдёт сам, сколько осталось и как отменить.
   Поэтому «Отменить» — заливная кнопка, а не текстовая ссылка.
   ------------------------------------------------------------ */
body.cs-on .autosend-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid var(--warning-edge);
  background: var(--warning-wash);
  color: var(--warning-ink);
  font-size: 13px;
  font-weight: 600;
}
body.cs-on .autosend-banner.hidden { display: none; }
body.cs-on #admin-autosend-timer { font-variant-numeric: tabular-nums; font-size: 15px; }
body.cs-on .autosend-banner button {
  padding: 5px 12px;
  border: 1px solid var(--warning-edge);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--warning-ink);
  font-size: 12px;
  font-weight: 650;
}
body.cs-on #admin-autosend-cancel-btn {
  margin-left: auto;
  background: var(--warning-ink);
  color: var(--surface);
  border-color: transparent;
}

/* ------------------------------------------------------------
   КОМПОЗЕР
   ------------------------------------------------------------ */
body.cs-on .canned-picker {
  display: flex;
  gap: 8px;
  padding: 10px 18px 0;
  background: transparent;
  border: none;
}
body.cs-on .canned-picker select { flex: 1; max-width: 240px; }
/* Вторичные действия композера — контурные. Заливку получает только
   отправка: если синим залито всё, экран перестаёт подсказывать,
   что здесь главное. */
body.cs-on .canned-picker button {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 600;
}
body.cs-on .canned-picker button:hover { color: var(--ink); border-color: var(--accent); }
/* «Предложить ответ» — обращение к THE BOT, поэтому фирменный синий
   здесь уместен, но контуром, а не заливкой. */
body.cs-on #admin-ai-suggest-btn {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
body.cs-on #admin-ai-suggest-btn:hover { background: var(--accent-wash); color: var(--accent); }
body.cs-on .reply-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 18px 14px;
  background: transparent;
  border: none;
}
body.cs-on .reply-form textarea {
  flex: 1;
  min-height: 40px;
  max-height: 180px;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.5;
  resize: none;
}
body.cs-on .reply-form button[type="submit"] {
  padding: 0 16px;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 650;
}
body.cs-on .reply-form button[type="submit"]:hover:not(:disabled) { background: var(--accent-soft); }
/* Короткий отклик на подтверждённую отправку — один импульс, не поле. */
body.cs-on .reply-form.cw-sent button[type="submit"] { animation: cw-sent 0.5s ease-out 1; }
@keyframes cw-sent {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

/* ------------------------------------------------------------
   ПАНЕЛЬ КОНТЕКСТА
   Собрана только из данных, которые продукт действительно даёт.
   ------------------------------------------------------------ */
body.cs-on .cw-context {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  background: var(--surface);
  border-left: 1px solid var(--border);
}
body.cs-on .cw-context-group { border-bottom: 1px solid var(--border); padding: 12px 14px; }
body.cs-on .cw-context-title {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
body.cs-on .cw-context .visitor-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 0;
  border: none;
  background: transparent;
}
body.cs-on .cw-context .visitor-info-actions { margin-left: 0; width: 100%; }
body.cs-on .cw-context .visitor-page-link { max-width: 100%; }
body.cs-on .cw-context .autoresponse-control {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12.5px;
}
body.cs-on .cw-context-empty { padding: 16px 14px; color: var(--ink-faint); font-size: 12.5px; }

/* Строка с кнопкой контекста. На широком экране панель открыта
   постоянно, поэтому строки нет вовсе. */
body.cs-on .cw-chat-bar { display: none; }
body.cs-on .cw-context-toggle {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font-size: 11.5px;
}

/* ------------------------------------------------------------
   ПУСТЫЕ СОСТОЯНИЯ
   Рабочий текст, без маркетинга. Сфера здесь заметно тише, чем
   на первом экране лендинга.
   ------------------------------------------------------------ */
body.cs-on .chat-placeholder {
  flex-direction: column;
  gap: 14px;
  color: var(--ink-faint);
  font-size: 13.5px;
  text-align: center;
}
body.cs-on .chat-placeholder::before {
  content: "";
  width: 64px; height: 64px;
  background: url("/widget/core-ring-48.webp") center / contain no-repeat;
  opacity: 0.35;
}
body.cs-on .cw-list-empty {
  padding: 28px 18px;
  color: var(--ink-faint);
  font-size: 13px;
  text-align: center;
}

/* ------------------------------------------------------------
   ПЛАНШЕТ. Контекст уходит в выдвижную панель: диалог не должен
   сужаться ради постоянно открытой второстепенной колонки.
   ------------------------------------------------------------ */
@media (max-width: 1280px) and (min-width: 769px) {
  body.cs-on .admin-chat-frame { grid-template-columns: 292px minmax(0, 1fr); }
  body.cs-on .cw-chat-bar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 18px 0;
  }
  body.cs-on .cw-context {
    position: fixed;
    z-index: 70;
    top: 56px; right: 0; bottom: 0;
    width: 300px;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: -8px 0 30px var(--shadow-color);
  }
  body.cs-on.cw-context-open .cw-context { transform: translateX(0); }
  body.cs-on .chat-message { max-width: 82%; }
}

/* Телефон: master/detail уже существует в базовом стиле на 768px
   и проверен — здесь только вид, поведение не трогаем. */
@media (max-width: 768px) {
  /* Панель раньше жила колонкой шириной 1000px по центру страницы —
   для документов это верно, для рабочего экрана диалогов нет: место
   съедалось полями, а композер уходил под нижний край. В Console
   рабочая область занимает окно целиком и прокруткой управляет сама
   лента сообщений.

   AI-CP1-UI-FIX1: те же два правила, что и в базовом стиле выше —
   та же правка, см. комментарий там. */
body.cs-on:has(#chats-tab:not(.hidden)) .cs-workspace { overflow: hidden; }
body.cs-on:has(#chats-tab:not(.hidden)) .admin-main {
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 0;
}
body.cs-on #chats-tab { height: calc(100vh - 56px); }
  body.cs-on .admin-chat-frame { display: flex; flex-direction: column; }
  body.cs-on .cw-context {
    position: fixed;
    z-index: 70;
    inset: auto 0 0 0;
    max-height: 72vh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: 0 -8px 30px var(--shadow-color);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  body.cs-on.cw-context-open .cw-context { transform: translateY(0); }
  body.cs-on .cw-chat-bar { display: flex; justify-content: flex-end; padding: 6px 12px 0; }
  body.cs-on .chat-message { max-width: 88%; }
  body.cs-on .chat-mobile-header {
    padding: 8px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  body.cs-on .reply-form { padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
  body.cs-on .canned-picker { padding: 10px 12px 0; }
  body.cs-on .visitor-info { padding: 10px 12px; }
}

body.cs-on .cw-scrim {
  position: fixed;
  z-index: 69;
  inset: 0;
  background: rgba(4, 8, 16, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
body.cs-on.cw-context-open .cw-scrim { opacity: 1; pointer-events: auto; }
@media (min-width: 1281px) { body.cs-on .cw-scrim { display: none; } }

@media (prefers-reduced-motion: reduce) {
  body.cs-on .cw-thinking-dot,
  body.cs-on .reply-form.cw-sent button[type="submit"] { animation: none !important; }
  body.cs-on .cw-thinking-dot { opacity: 1; }
  body.cs-on .cw-context, body.cs-on .cw-scrim { transition: none; }
}