/* ==========================================================================
   Support — left column (chat list) in reference style (gambl.bet/support).
   Adapted to our bento visual language: our tokens (Inter, --card-bg,
   --border, --text-strong/muted), 16–18px radii, tabular-nums for dates.
   Все селекторы скоупятся в .admin-main + .sc-left чтобы не задевать
   легаси-стили других .chat-card на mac-варианте.
   ========================================================================== */

.admin-main .sc-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 12px;
  min-height: 0;
  background: var(--card-bg);
  /* Legacy .support-left режет overflow-x: hidden — из-за этого правое
     скругление активной карточки не видно. Переопределяем на visible,
     а .sc-list оставляем скроллящимся вертикально с достаточным правым
     padding, чтобы правое скругление помещалось. */
  overflow-x: visible !important;
}

/* --- Head: "Active chats" (кнопка Presets переехала в шапку чата) ------ */
.admin-main .sc-left .sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 0;
}
.admin-main .sc-left .sc-title {
  margin: 0;
  font: 600 15px/1.2 var(--font-ui);
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
/* --- Search: pill с иконкой лупы справа --------------------------------- */
.admin-main .sc-left .sc-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.admin-main .sc-left .sc-search__input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-strong);
  border-radius: 14px;
  padding: 10px 42px 10px 14px;
  font: 500 13.5px/1.2 var(--font-ui);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-main .sc-left .sc-search__input:focus-visible {
  border-color: var(--accent);
  background: var(--card-bg);
}
.admin-main .sc-left .sc-search__input::-webkit-search-cancel-button { display: none; }
.admin-main .sc-left .sc-search__input::placeholder { color: var(--text-muted); }
.admin-main .sc-left .sc-search__icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--text-muted);
  pointer-events: none;
}
.admin-main .sc-left .sc-search__icon svg { width: 15px; height: 15px; }

/* --- Chat list --------------------------------------------------------- */
.admin-main .sc-left .sc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px 8px 4px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  scrollbar-width: thin;
  /* Небольшой запас справа под скроллбар и правое скругление активной карточки. */
  margin-right: -4px;
}
.admin-main .sc-left .sc-list::-webkit-scrollbar { width: 6px; }
.admin-main .sc-left .sc-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* --- Chat card (1:1 форма эталона) ------------------------------------- */
/* !important чтобы перекрыть легаси .chat-card из tokens-reset.css и
   shell-structure.css (там задан border-radius, background, transform). */
.admin-main .sc-left .sc-chat {
  appearance: none;
  width: 100%;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 16px !important;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  color: var(--text-strong);
  min-height: 68px;
  margin-bottom: 0 !important;
  transform: none !important;
}
.admin-main .sc-left .sc-chat:hover {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  transform: none !important;
}
.admin-main .sc-left .sc-chat.is-active {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
/* Аватар — 48x48 (круг задаётся самим mammothAvatarHTML через SVG). */
.admin-main .sc-left .sc-chat__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  user-select: none;
}
.admin-main .sc-left .sc-chat__avatar > svg,
.admin-main .sc-left .sc-chat__avatar > .mammoth-avatar {
  width: 100%;
  height: 100%;
  display: block;
}

.admin-main .sc-left .sc-chat__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-main .sc-left .sc-chat__row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.admin-main .sc-left .sc-chat__name {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 13.5px/1.2 var(--font-ui);
  color: var(--text-strong);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-main .sc-left .sc-chat__meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-main .sc-left .sc-chat__time {
  font: 500 10px/1 var(--font-ui);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-main .sc-left .sc-chat__unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font: 700 10px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}

/* Дата (и счётчик непрочитанных) стоят у правого края НА УРОВНЕ второй строки
   превью: строка — flex с прижатием по низу, а само превью держит высоту в две
   строки, поэтому дата не подскакивает к первой строке на коротких превью. */
.admin-main .sc-left .sc-chat__row2 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
/* Превью — две строки: текст занимает ширину карточки, обрезка по 2-й строке. */
.admin-main .sc-left .sc-chat__preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px; /* 2 × 16.2px строки */
  font: 500 12px/1.35 var(--font-ui);
  color: var(--text-muted);
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  letter-spacing: -0.005em;
}
.admin-main .sc-left .sc-chat__meta--bottom { padding-bottom: 2px; }
.admin-main .sc-left .sc-chat__sender {
  color: var(--accent);
  font-weight: 600;
}

/* --- Row-1 meta: флаг страны + пилл депозитов ------------------------- */
/* Пилл — тот же .cps-chip.cps-deposits, что в шапке открытого чата, поэтому
   здесь только раскладка: ничего не сжимается и не переносится. */
.admin-main .sc-left .sc-chat__flag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.admin-main .sc-left .sc-chat__flag .flag-ic { width: 18px; height: 13px; }
.admin-main .sc-left .sc-chat__dep {
  flex: 0 0 auto;
  max-width: none;
  cursor: inherit;
}

/* --- Skeleton --------------------------------------------------------- */
.admin-main .sc-left .sc-chat-skel {
  height: 68px;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--bg-surface), var(--card-bg), var(--bg-surface));
  background-size: 200% 100%;
  animation: sc-shimmer 1.4s linear infinite;
  border: 1px solid var(--border);
}
@keyframes sc-shimmer {
  from { background-position: 0 0; }
  to   { background-position: -200% 0; }
}

/* --- Empty state ------------------------------------------------------ */
.admin-main .sc-left .empty,
.admin-main .sc-left .chat-mode-empty {
  padding: 20px 16px;
  color: var(--text-muted);
  text-align: center;
  font: 500 13px/1.4 var(--font-ui);
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .admin-main .sc-left * { animation: none !important; transition: none !important; }
}

/* --- Right pane top: chat-top + chat-substrip = один блок --------------
   Убираем разделитель между «аватар/имя» и «страна/баланс/промо/домен»,
   чтобы визуально это был один блок. */
.admin-main .support-shell .chat-top {
  border-bottom: 0 !important;
}
.admin-main .support-shell .chat-substrip {
  border-top: 0 !important;
  /* Плавный переход, тот же padding-left что у chat-top, без верхнего
     разделителя — блок читается как продолжение шапки. */
  padding-top: 0 !important;
}

/* ─── Message actions: 3-точечная кнопка на каждом пузыре ───────────────
   Реализация как в эталоне gambl: ellipsis-кнопка в правом верхнем углу
   пузыря сообщения, полупрозрачная в покое, темнеет на hover. Работает
   для сообщений ОБОИХ сторон (is-admin и is-user). */
.admin-main .support-shell .message-row {
  position: relative;
}
.admin-main .support-shell .msg-more {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: absolute;
  top: 6px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  color: var(--text-muted);
  /* Всегда видно (эталон gambl показывает 3-точки постоянно, не по hover). */
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-main .support-shell .msg-more svg { width: 14px; height: 14px; }
.admin-main .support-shell .msg-more:hover,
.admin-main .support-shell .msg-more.is-open,
.admin-main .support-shell .msg-more:focus-visible {
  background: var(--bg-surface);
  color: var(--text-strong);
}
/* Дополнительное пространство справа, чтобы 3-точки не наезжали на текст. */
.admin-main .support-shell .message-row.is-admin > p[data-msg-body],
.admin-main .support-shell .message-row.is-user > p[data-msg-body] {
  padding-right: 28px;
}
/* У user-сообщений (без "User" подписи сверху) 3-точки могут перекрыть первую
   строку — добавляем небольшой top padding у тела на всякий случай. */
.admin-main .support-shell .message-row.is-user > p[data-msg-body] {
  padding-top: 2px;
}
/* Время сообщения — вынесем в отдельную строку под контентом с чётким отступом,
   как в эталоне gambl (внутри пузыря, снизу, чуть мутнее). */
.admin-main .support-shell .message-row > small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font: 500 11px/1.2 var(--font-ui);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.admin-main .support-shell .message-row > small .msg-meta-time { min-width: 0; }
.admin-main .support-shell .message-row > small .msg-meta-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Popover меню (Edit / Delete) — единый для всех message actions. */
body > .msg-menu-popover {
  z-index: 1000;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  max-width: 220px;
  box-sizing: border-box;
  animation: msgMenuIn 0.14s ease-out;
}
@keyframes msgMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
body > .msg-menu-popover .msg-menu__item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-strong);
  font: 500 13.5px/1 var(--font-ui);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.12s ease;
}
body > .msg-menu-popover .msg-menu__item svg { width: 15px; height: 15px; color: var(--text-muted); }
body > .msg-menu-popover .msg-menu__item:hover { background: var(--bg-surface); }
body > .msg-menu-popover .msg-menu__item:hover svg { color: var(--accent); }
body > .msg-menu-popover .msg-menu__item--danger { color: var(--red); }
body > .msg-menu-popover .msg-menu__item--danger svg { color: var(--red); }
body > .msg-menu-popover .msg-menu__item--danger:hover { background: var(--red-bg); }
body > .msg-menu-popover .msg-menu__item--danger:hover svg { color: var(--red); }

/* Inline-редактор внутри пузыря (заменяет <p data-msg-body>). */
.admin-main .support-shell .msg-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0;
}
.admin-main .support-shell .msg-edit__area {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-strong);
  font: 500 14px/1.4 var(--font-ui);
  resize: vertical;
  outline: none;
}
.admin-main .support-shell .msg-edit__area:focus-visible {
  border-color: var(--accent);
  background: var(--card-bg);
}
.admin-main .support-shell .msg-edit__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.admin-main .support-shell .msg-edit__btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-strong);
  padding: 6px 12px;
  border-radius: 999px;
  font: 600 12.5px/1 var(--font-ui);
  cursor: pointer;
}
.admin-main .support-shell .msg-edit__btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.admin-main .support-shell .msg-edit__btn--ghost:hover { background: var(--bg-surface); color: var(--text-strong); }
.admin-main .support-shell .msg-edit__btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.admin-main .support-shell .msg-edit__btn--primary:hover { background: var(--accent-hover); }

/* --- Chat toolbar transfer toggle (Human / AI Assistant) ------------------
   Compact segmented pill inside the chat header that replaces the old
   "Transfer to operator" button. The active segment is the chat's current
   mode; clicking the other segment flips ai_mode. Scoped to
   .chat-transfer-toggle so it does NOT touch the sidebar seg-control or the
   domain-editor seg-control. */
.admin-main .chat-transfer-toggle.support-mode-tabs--pill {
  display: inline-flex;
}
.admin-main .chat-transfer-toggle.support-mode-tabs--pill .seg-control--pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.18);
}
html:not([data-theme="dark"]) .admin-main .chat-transfer-toggle.support-mode-tabs--pill .seg-control--pill {
  background: var(--bg-surface);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04);
}
.admin-main .chat-transfer-toggle.support-mode-tabs--pill .seg-control--pill .seg-btn {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 600 12.5px/1 var(--font-ui);
  letter-spacing: -0.005em;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.admin-main .chat-transfer-toggle.support-mode-tabs--pill .seg-control--pill .seg-btn:hover:not(.is-active) {
  color: var(--text-strong);
}
.admin-main .chat-transfer-toggle.support-mode-tabs--pill .seg-control--pill .seg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.admin-main .chat-transfer-toggle.support-mode-tabs--pill .seg-control--pill .seg-btn.is-active {
  background: #3a4148;
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
  cursor: default;
}
html:not([data-theme="dark"]) .admin-main .chat-transfer-toggle.support-mode-tabs--pill .seg-control--pill .seg-btn.is-active {
  background: var(--card-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.admin-main .chat-transfer-toggle.support-mode-tabs--pill .seg-control--pill .seg-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Desktop only (≤1024px keeps the compact mobile toolbar from support-mobile).
   The base admin-new shell never set flex on .chat-actions (only the legacy
   .mac-window-content did), so its two inline children aligned by baseline →
   the Select pill sat ~4px off the toggle. Center them, and match the Select
   pill to the transfer toggle's track exactly (same 36px height, pill radius,
   recessed surface + inset shadow) so the two controls read as one matched
   set on the same baseline. */
@media (min-width: 1025px) {
  .admin-main .support-shell .chat-top .chat-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .admin-main .support-shell .chat-top .chat-actions .chat-action-pill {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    gap: 6px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid var(--border) !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.18) !important;
    color: var(--text-strong) !important;
    font: 600 12.5px/1 var(--font-ui) !important;
  }
  html:not([data-theme="dark"]) .admin-main .support-shell .chat-top .chat-actions .chat-action-pill {
    background: var(--bg-surface) !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04) !important;
  }
  .admin-main .support-shell .chat-top .chat-actions .chat-action-pill svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* --- Mobile ----------------------------------------------------------- */
@media (max-width: 768px) {
  .admin-main .sc-left { padding: 12px 10px; }
  .admin-main .sc-left .sc-chat { padding: 8px !important; min-height: 60px; }
  .admin-main .sc-left .sc-chat__avatar { width: 42px; height: 42px; font-size: 15px; }
}

/* ==========================================================================
   Presets: пилюля в шапке чата + боковая панель справа
   --------------------------------------------------------------------------
   Раскладка правого крыла после переезда контролов:
     строка 1 (.chat-top)      — аватар/имя … [AI | Human] [Presets]
     строка 2 (.chat-substrip) — страна/баланс/промо/домен …………… [Select]
   Клик по Presets раскрывает третью колонку .support-shell: чат ужимается,
   панель встаёт вплотную к правому краю. Ниже 1025px колонки нет — панель
   ложится оверлеем поверх переписки.
   ========================================================================== */

.admin-main .support-shell .chat-action-pill--presets {
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-main .support-shell .chat-action-pill--presets:hover {
  border-color: var(--border-hover) !important;
}
.admin-main .support-shell .chat-action-pill--presets:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.admin-main .support-shell .chat-action-pill--presets.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
  color: var(--text-strong) !important;
}

/* --- Строка 2: чипы слева, Select прижат вправо ------------------------ */
.admin-main .support-shell .chat-substrip {
  flex-wrap: nowrap;
  justify-content: space-between;
}
.admin-main .support-shell .chat-substrip__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
/* Чат не выбран → renderPeerStats() пуст: гасим всю подстроку вместе с
   Select, выбирать в ней нечего (раньше это делал .chat-substrip:empty). */
.admin-main .support-shell .chat-substrip:has(> [data-chat-stats]:empty) {
  padding: 0 !important;
  border: 0 !important;
}
.admin-main .support-shell .chat-substrip:has(> [data-chat-stats]:empty) > * {
  display: none !important;
}

@media (min-width: 1025px) {
  .admin-main .support-shell .chat-substrip .chat-action-pill--select {
    flex: 0 0 auto;
    height: 28px;
    min-height: 28px;
    padding: 0 12px;
    gap: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.18);
    color: var(--text-strong);
    font: 600 11.5px/1 var(--font-ui);
    cursor: pointer;
    transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  html:not([data-theme="dark"]) .admin-main .support-shell .chat-substrip .chat-action-pill--select {
    background: var(--bg-surface);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04);
  }
  .admin-main .support-shell .chat-substrip .chat-action-pill--select:hover {
    border-color: var(--border-hover);
  }
  .admin-main .support-shell .chat-substrip .chat-action-pill--select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .admin-main .support-shell .chat-substrip .chat-action-pill--select svg {
    width: 13px;
    height: 13px;
  }
}

/* --- Панель пресетов ----------------------------------------------------
   Колонкой панель встаёт только там, где после неё переписке остаётся живая
   ширина (≥1400px окна). На более узких экранах она ложится оверлеем внутри
   .support-shell — иначе чат сжимался до ~150px и пузыри резались. */
@media (min-width: 1400px) {
  .admin-main .support-shell.has-presets,
  .admin-main .support-shell.support-desk.has-presets {
    /* Первая колонка — та же 330px, что в .support-desk: панель забирает
       место только у переписки, список чатов не дёргается. */
    grid-template-columns: 330px minmax(0, 1fr) 340px;
  }
}

@media (min-width: 1025px) and (max-width: 1399px) {
  .admin-main .support-shell.has-presets { position: relative; }
  .admin-main .support-presets-pane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    z-index: 5;
    box-shadow: -18px 0 60px rgba(0, 0, 0, 0.35);
  }
}

.admin-main .support-presets-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: var(--card-bg);
  border-left: 1px solid var(--border);
  color: var(--text-strong);
  overflow: hidden;
  animation: sc-presets-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes sc-presets-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

.admin-main .support-presets-pane > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
}
.admin-main .support-presets-pane > header strong {
  font: 600 15px/1.2 var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.admin-main .support-presets-pane > header .icon-btn {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.admin-main .support-presets-pane > header .icon-btn:hover {
  background: var(--bg-surface);
  color: var(--text-strong);
}
.admin-main .support-presets-pane > header .icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-main .support-presets-pane .support-template-list {
  padding: 12px;
  align-content: start;
  overflow-y: auto;
}
.admin-main .support-presets-pane .support-template-row {
  border-radius: 12px;
  cursor: pointer;
}
.admin-main .support-presets-pane .support-template-row:hover {
  border-color: var(--border-hover);
}
.admin-main .support-presets-pane .support-template-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.admin-main .support-presets-pane .support-template-row i {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 0;
  color: var(--text-muted);
}
.admin-main .support-presets-pane .support-template-row i svg {
  width: 15px;
  height: 15px;
}
.admin-main .support-presets-pane .preset-picker-create-section {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 8px;
}
.admin-main .support-presets-pane .preset-picker-inline-form {
  display: grid;
  gap: 8px;
}

.admin-main .support-presets-pane > footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}
.admin-main .support-presets-pane > footer .btn {
  flex: 1 1 auto;
  justify-content: center;
}

/* Ниже 1025px третьей колонки нет — панель работает выезжающим оверлеем,
   чтобы ресайз окна с открытой панелью не ломал двухколоночную сетку. */
@media (max-width: 1024px) {
  .admin-main .support-presets-pane {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 100vw);
    z-index: 941;
    box-shadow: -18px 0 60px rgba(0, 0, 0, 0.45);
  }
  /* Подстрока на мобиле остаётся одной строкой с горизонтальным скроллом (как
     до переезда Select), но скроллятся теперь ТОЛЬКО чипы: сам Select стоит
     вне прокрутки, поэтому под ним ничего не проезжает.
     html-префикс поднимает специфичность над support-mobile.css, который
     объявляет overflow на .chat-substrip позже по каскаду. */
  html .admin-main .support-shell .chat-substrip {
    overflow: visible !important;
  }
  .admin-main .support-shell .chat-substrip__stats {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
  }
  .admin-main .support-shell .chat-substrip__stats::-webkit-scrollbar {
    display: none !important;
  }
  /* Обрезанный чип уходит в затухание, а не режется по живому. */
  .admin-main .support-shell .chat-substrip__stats {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }
  .admin-main .support-shell .chat-substrip .chat-action-pill--select {
    flex: 0 0 auto !important;
    margin-left: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-main .support-presets-pane { animation: none; }
}

/* --- Пресеты: секции-группы, карточки и редактор ------------------------
   Один и тот же список живёт в двух поверхностях — боковой панели и мобильной
   модалке, — поэтому селекторы покрывают обе. */
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group {
  display: grid;
  gap: 6px;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group + .preset-group {
  margin-top: 6px;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 2px;
  font: 600 10.5px/1.4 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group__title > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.admin-main .support-presets-pane, .support-preset-modal) .preset {
  padding: 10px 10px 10px 12px;
  border-radius: 12px !important;
  /* Карточка — приподнятая строка на подложке панели. Базовый .preset красится
     в var(--bg) (= фон панели в светлой теме) и терялся бы на ней. */
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset:hover {
  border-color: var(--border-hover) !important;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) :is(.preset-edit, .preset-delete) {
  width: 28px;
  height: 28px;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) :is(.preset-edit, .preset-delete) svg {
  width: 15px;
  height: 15px;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset .preset-main strong {
  font: 600 13px/1.35 var(--font-ui);
  color: var(--text-strong);
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset .preset-main small {
  font: 500 11.5px/1.4 var(--font-ui);
  color: var(--text-muted);
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset .preset-main:focus-visible,
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-edit:focus-visible,
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-delete:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
/* Правка/удаление всегда на месте — приглушены в покое, набирают контраст на
   наведении и при фокусе с клавиатуры. */
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset .preset-actions {
  opacity: 0.5;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset:hover .preset-actions,
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset:focus-within .preset-actions {
  opacity: 1;
}

:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder {
  padding: 12px;
  border-radius: 12px !important;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder-textarea {
  min-height: 110px !important;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder .form-actions {
  border-top: 0;
  padding-top: 4px;
  margin-top: 0;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder .form-actions .btn {
  flex: 1 1 0;
  justify-content: center;
}

/* В модалке нет предка .support-desk, откуда карточка берёт свою раскладку —
   повторяем её здесь, иначе кнопки уезжают под текст. */
.support-preset-modal .preset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.support-preset-modal .preset .preset-main {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.support-preset-modal .preset :is(strong, small) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-preset-modal .preset-actions { display: flex; gap: 4px; }

/* --- Подвал поверхности: два действия в ряд, «Закрыть» отдельной строкой -- */
:is(.admin-main .support-presets-pane, .support-preset-modal) > footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) > footer .btn {
  min-height: 38px;
  padding: 0 12px;
  gap: 6px;
  border-radius: 10px !important;
  font: 600 12.5px/1 var(--font-ui) !important;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) > footer .btn svg {
  width: 15px;
  height: 15px;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) > footer .preset-footer__close {
  grid-column: 1 / -1;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) > footer .preset-footer__close:hover {
  color: var(--text-strong) !important;
  border-color: var(--border-hover) !important;
}

/* --- Заголовок группы: счётчик + удаление (пресеты при этом остаются) ----- */
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group__del {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms ease, background 150ms ease;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group__del svg {
  width: 14px;
  height: 14px;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group:hover .preset-group__del,
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group__del:focus-visible {
  opacity: 1;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group__del:hover {
  background: color-mix(in srgb, var(--red, #ff6b6b) 14%, transparent);
  color: var(--red, #ff6b6b);
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group__empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  font: 500 11.5px/1.45 var(--font-ui);
  color: var(--text-muted);
  text-align: center;
}

/* --- Редактор: поля крупнее, с фокус-кольцом акцента --------------------- */
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder {
  gap: 14px;
  padding: 14px !important;
  border-radius: 14px !important;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder-field {
  gap: 0;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder-label {
  font: 600 12.5px/1.3 var(--font-ui);
  color: var(--text-strong);
  letter-spacing: -0.005em;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder-hint {
  margin: 3px 0 8px;
  font: 500 11px/1.45 var(--font-ui);
  color: var(--text-muted);
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder :is(.input, .textarea) {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  color: var(--text-strong) !important;
  font: 500 13px/1.35 var(--font-ui) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder .textarea {
  height: auto;
  min-height: 128px !important;
  max-height: 260px;
  padding: 10px 12px;
  line-height: 1.55 !important;
  resize: vertical;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder :is(.input, .textarea):hover {
  border-color: var(--border-hover) !important;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder :is(.input, .textarea):focus,
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder :is(.input, .textarea):focus-visible {
  outline: none;
  border-color: var(--accent) !important;
  background: var(--card-bg) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder ::placeholder {
  color: var(--text-muted);
}
/* Селект группы отрисован общим дропдауном админки — подгоняем его триггер
   под соседние поля (высота, радиус, кольцо фокуса). */
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder .dd-trigger {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  font: 500 13px/1.35 var(--font-ui);
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-builder .dd-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* --- Ручной порядок пресетов: ручки, секции-приёмники --------------------
   Ручка живёт отдельной колонкой слева: тащить можно только за неё, поэтому
   клик по самой карточке остался тем, чем был, — вставкой текста в ответ. */
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-groups {
  display: grid;
  gap: 12px;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group__items {
  display: grid;
  gap: 6px;
  border-radius: 12px;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group + .preset-group {
  margin-top: 0;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-left: 4px;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group__title {
  margin-left: 4px;
  gap: 6px;
}

:is(.admin-main .support-presets-pane, .support-preset-modal) .sort-grip {
  flex: 0 0 auto;
  width: 20px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  /* В покое ручка приглушена, но видна: аффорданс «это можно двигать» должен
     читаться без наведения. */
  opacity: 0.4;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms ease, background 150ms ease;
}
/* Заголовок уже раздаёт `> span` растяжку под имя группы — ручке (и её
   невидимой заглушке у «Без группы») это не нужно, иначе имя уезжает вправо. */
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group__title > .sort-grip {
  flex: 0 0 auto;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .sort-grip svg {
  width: 16px;
  height: 16px;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset:hover .preset-grip,
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset:focus-within .preset-grip,
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset-group:hover .preset-group__grip {
  opacity: 1;
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .sort-grip:hover {
  background: color-mix(in srgb, var(--text-strong) 9%, transparent);
  color: var(--text-strong);
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .sort-grip:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Группа-приёмник подсвечивается на время жеста — видно, в какую секцию
   пресет уедет, ещё до того, как его отпустили. */
:is(.admin-main .support-presets-pane, .support-preset-modal) [data-group-items].is-drop-target {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
:is(.admin-main .support-presets-pane, .support-preset-modal) .preset.is-sorting {
  display: none;
}
/* Подпись пустой группы уступает место вылета, но не исчезает: скрытие меняло
   бы высоту приёмника прямо во время жеста. */
:is(.admin-main .support-presets-pane, .support-preset-modal) [data-group-items].is-drop-target .preset-group__empty {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  :is(.admin-main .support-presets-pane, .support-preset-modal) .sort-grip { transition: none; }
}