/* Оболочка «площадка → аккаунт → раздел».
   Телефон (до 900 px): площадки в нижней панели, аккаунт — кнопкой в шапке, разделы — листаемыми чипсами.
   Сайт (от 900 px): площадки слева с аккаунтами под активной, разделы — вкладками, справа «Расписание сегодня».
   Цвета — токены из style.css, поэтому тёмная тема работает так же, как раньше. */

/* атрибут hidden всегда прячет: иначе display:flex у блоков (например, превью вложения) его перебивал */
[hidden] { display: none !important; }

svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.shell .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.shell .dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.shell .dot.off { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.shell .dot.none { display: none; }

/* ---------- левое меню (сайт) ---------- */
.side { display: none; }
.side-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; padding: 4px 10px 10px; }
.side-brand .logo { width: 28px; height: 28px; border-radius: 8px; background: var(--btn); color: var(--btn-text); display: grid; place-items: center; font-size: 14px; }
.side-group { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); padding: 14px 10px 4px; }
.side-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; text-decoration: none; }
.side-item:hover { background: var(--bg); }
.side-item.on { background: var(--chip-bg); color: var(--chip-text); font-weight: 600; }
.side-item .t, .side-acc .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item .count { font-size: 12px; color: var(--hint); font-weight: 400; font-variant-numeric: tabular-nums; }
.side-acc { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 6px 10px 6px 36px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.side-acc:hover { background: var(--bg); }
.side-acc.on { color: var(--chip-text); font-weight: 600; background: var(--chip-bg); }
.side-acc.add { color: var(--hint); }
.side-acc svg.i { width: 16px; height: 16px; margin-left: -4px; }
.side-acc .pl { font-size: 11px; color: var(--hint); font-weight: 400; }
.side-spacer { flex: 1; }
.side-me { display: flex; align-items: center; gap: 10px; padding: 10px; margin-top: 8px; border-top: 1px solid var(--border); font-size: 13px; }
.side-me .av { width: 30px; height: 30px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-text); display: grid; place-items: center; font-weight: 700; flex: none; }
.side-me .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.side-me .who .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-me .who .r { color: var(--hint); font-size: 12px; }
.side-me .out { color: var(--hint); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; }
.side-me .out:hover { background: var(--bg); color: var(--text); }

/* ---------- шапка аккаунта ---------- */
.main { min-width: 0; }
.pane-head { position: sticky; top: 0; z-index: 6; background: var(--card); border-bottom: 1px solid var(--border);
  padding: calc(10px + var(--safe-top)) 14px 0; display: flex; flex-direction: column; gap: 8px; }
.head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-switch { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 40px; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-align: left; }
.acc-switch .acc-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-switch .chev { width: 18px; height: 18px; color: var(--hint); }
.acc-switch.static { cursor: default; }
.acc-switch.static .chev { display: none; }
.state-pill { display: none; font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.state-pill.on { background: var(--ok-bg); color: var(--ok); }
.state-pill.off { background: var(--warn-bg); color: var(--warn); }
.head-sub { display: none; color: var(--hint); font-size: 13px; }
.head-actions { display: flex; gap: 8px; }
.head-actions .btn { gap: 6px; min-height: 40px; }
.head-actions .btn svg.i { width: 16px; height: 16px; }
.head-actions .btn.secondary span { display: none; }   /* на телефоне — только значки «пауза/обновить» */
.head-actions .btn.primary span { display: none; }
.head-actions .btn { padding: 8px 10px; }
.pane-head .status { font-size: 13px; }
.pane-head .status[hidden] { display: none; }

/* разделы: чипсы на телефоне */
.sec-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.sec-tabs::-webkit-scrollbar { display: none; }
.sec-tabs[hidden] { display: none; }
.sec { flex: none; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 13px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; min-height: 34px; display: inline-flex; align-items: center; }
.sec.on { background: var(--btn); border-color: var(--btn); color: var(--btn-text); font-weight: 600; }

/* ---------- содержимое ---------- */
.pane-body { display: block; }
.shell #app { max-width: 640px; }
.pane-hint { font-size: 13px; color: var(--hint); margin: 0 2px 10px; line-height: 1.45; }
.soon-box h3 { margin: 0 0 8px; font-size: 16px; }
.soon-box p { margin: 0 0 8px; line-height: 1.5; }
.studio-pane { background: transparent; }
.studio-pane .card:first-child, .studio-pane > .notice:first-child { margin-top: 0; }
.studio select { width: auto; }
.ana-switch { display: flex; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 12px; width: max-content; max-width: 100%; }
.ana-switch[hidden] { display: none; }
.ana-switch button { border: 0; background: none; border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 13px; color: var(--hint); cursor: pointer; min-height: 34px; }
.ana-switch button.on { background: var(--chip-bg); color: var(--chip-text); font-weight: 600; }

.today { display: none; }

/* ---------- нижняя панель (телефон) ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; background: var(--card); border-top: 1px solid var(--border);
  padding: 4px 4px calc(4px + var(--safe-bottom)); }
.bottom-nav button { flex: 1; min-width: 0; min-height: 52px; border: 0; background: none; color: var(--hint); font: inherit; font-size: 11px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.bottom-nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav button.on { color: var(--link); font-weight: 700; }

/* ---------- лист выбора аккаунта ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 30; background: rgba(15, 23, 42, .4); display: flex; align-items: flex-end; }
.sheet-wrap[hidden] { display: none; }
.sheet { width: 100%; max-height: 80vh; overflow: auto; background: var(--card); border-radius: 18px 18px 0 0; padding: 14px 10px calc(14px + var(--safe-bottom)); }
.sheet-title { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); padding: 4px 10px 8px; }
.sheet .side-acc { padding-left: 12px; min-height: 46px; font-size: 15px; }

/* ---------- сайт ---------- */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .shell:not([hidden]) { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
  .side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow: auto;
    background: var(--card); border-right: 1px solid var(--border); padding: calc(14px + var(--safe-top)) 10px 10px; }
  .bottom-nav { display: none; }
  .pane-head { padding: 16px 24px 0; gap: 10px; }
  .acc-switch { flex: 0 1 auto; border: 0; background: none; padding: 0; font-size: 20px; min-height: 0; cursor: default; }
  .acc-switch .chev { display: none; }
  .state-pill { display: inline-block; }
  .head-sub { display: inline; }
  .head-actions { margin-left: auto; }
  .head-actions .btn span { display: inline !important; }
  .head-actions .btn { padding: 8px 14px; }
  .sec-tabs { gap: 2px; padding-bottom: 0; margin: 0; padding-left: 0; padding-right: 0; }
  .sec { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 12px; min-height: 42px; color: var(--hint); font-size: 14px; }
  .sec:hover { color: var(--text); }
  .sec.on { background: none; color: var(--link); border-bottom-color: var(--link); }
  .pane-head .status { margin-top: -4px; }
  .pane-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 24px 40px; align-items: start; }
  .pane-body:has(.today:not([hidden])) { grid-template-columns: minmax(0, 1fr) 280px; }
  .shell #app { padding: 0; max-width: 820px; margin: 0; }
  .shell #app:has(.studio-pane:not([hidden])) { max-width: 1120px; }
  .today:not([hidden]) { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 130px;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-card); }
  .today h3 { margin: 0; font-size: 14px; }
  .today .slots { display: flex; flex-wrap: wrap; gap: 6px; }
  .today .slot { font-size: 12px; padding: 4px 8px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
  .today .slot.used { background: var(--chip-bg); color: var(--chip-text); border-color: transparent; font-weight: 600; }
  .today .kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--hint); }
  .today .kv b { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
  .toast { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
  .sheet-wrap { align-items: center; justify-content: center; }
  .sheet { max-width: 420px; border-radius: 16px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .pane-body:has(.today:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .today:not([hidden]) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .shell * { transition: none !important; } }

/* ---------- раздел «Чат-бот» ---------- */
.side-item .count.new { background: var(--btn); color: var(--btn-text); border-radius: 999px; padding: 1px 7px; font-weight: 700; }
#botPane { display: flex; flex-direction: column; gap: 12px; }
.bot-notice { background: var(--warn-bg); color: var(--warn); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.bot-step { display: flex; flex-direction: column; gap: 10px; }
.bot-step-head { display: flex; align-items: center; gap: 10px; }
.bot-step-head h3 { margin: 0; font-size: 16px; }
.bot-step-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 14px;
  background: var(--chip-bg); color: var(--chip-text); }
.bot-step.done .bot-step-n { background: var(--ok-bg); color: var(--ok); }
.bot-step p { margin: 0; }
.bot-ok { font-size: 14px; line-height: 1.5; }
.bot-ok a { color: var(--link); }
.bot-howto { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.bot-howto a { color: var(--link); }
.bot-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bot-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.bot-stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.bot-stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.bot-stat span { font-size: 12px; color: var(--hint); }
.bot-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bot-toolbar .pane-hint { margin: 0; flex: 1; min-width: 200px; }
.bot-camp.off { opacity: .6; }
.bot-camp-title { font-weight: 600; font-size: 15px; margin: 4px 0 2px; overflow-wrap: anywhere; }
.bot-camp-stats { font-size: 13px; color: var(--hint); }
.bot-lead-line { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.bot-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); }
.bot-badge.ok { background: var(--ok-bg); color: var(--ok); }
.bot-editor { display: flex; flex-direction: column; gap: 12px; }
.bot-editor h3 { margin: 0; font-size: 16px; }
.bot-editor .section-title { margin: 8px 0 0; }
.bot-field { display: flex; flex-direction: column; gap: 4px; }
.bot-field .field-label { font-size: 13px; font-weight: 600; }
.bot-field .file-hint { margin: 0 2px; }
.bot-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.bot-toggle input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--btn); flex: none; }
.bot-toggle span { display: flex; flex-direction: column; gap: 1px; }
.bot-toggle small { color: var(--hint); font-size: 12px; }
.bot-back { align-self: flex-start; }
.bot-status { width: auto; padding: 6px 10px; font-size: 13px; }
.bot-toolbar .btn, .bot-actions .btn, .bot-step .btn { width: auto; }

/* ---------- Люди (CRM) — только администратор ---------- */
.crm-stats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; }
.crm-stat { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 96px; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.crm-stat b { font-size: 20px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.crm-stat span { font-size: 12px; color: var(--hint); }
.crm-stat.on { border-color: var(--link); background: var(--chip-bg); }
.crm-filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.crm-filters input[type=search] { grid-column: 1 / -1; width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-height: 44px; }
.crm-filters select { min-height: 44px; background: var(--card); font-size: 14px; }
.crm-list { display: flex; flex-direction: column; gap: 8px; }
.crm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.crm-row:hover { border-color: var(--link); }
.crm-row:focus-visible, .crm-stat:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.crm-av { width: 38px; height: 38px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-text); display: grid; place-items: center; font-weight: 700; flex: none; }
.crm-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.crm-name { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.crm-meta { display: block; color: var(--hint); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.crm-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); white-space: nowrap; }
.crm-badge.ok { background: var(--ok-bg); color: var(--ok); }
.crm-badge.warn { background: var(--warn-bg); color: var(--warn); }
.crm-badge.bad { background: var(--danger-bg); color: var(--danger); }
.crm-badge.gray { background: var(--bg); color: var(--hint); border: 1px solid var(--border); }
.crm-chev { color: var(--hint); font-size: 22px; flex: none; }

.crm-drawer-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 30; }
.crm-drawer { position: fixed; left: 0; right: 0; bottom: 0; top: 6vh; z-index: 31; background: var(--bg); border-radius: 18px 18px 0 0;
  overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 -8px 32px rgba(15, 23, 42, .2); }
.crm-drawer-head { position: sticky; top: 0; z-index: 2; display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px;
  background: var(--card); border-bottom: 1px solid var(--border); }
.crm-drawer-head h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.crm-x { margin-left: auto; flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--hint); font-size: 26px; cursor: pointer; border-radius: 10px; }
.crm-drawer-body { padding: 12px 12px calc(32px + var(--safe-bottom)); }
.crm-blk { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.crm-blk h3 { margin: 0 0 10px; font-size: 15px; }
.crm-fld { display: block; margin-bottom: 10px; }
.crm-fld > span { display: block; font-size: 12px; font-weight: 600; color: var(--hint); margin-bottom: 4px; }
.crm-fld input[type=date], .crm-fld input[type=email] { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; min-height: 44px; }
.crm-row3 { display: grid; grid-template-columns: 1fr; gap: 0 8px; }
.crm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.crm-actions .btn { width: auto; min-height: 44px; padding: 10px 16px; }
.crm-toggles { display: flex; flex-direction: column; }
.crm-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--border); cursor: pointer; }
.crm-toggle:first-child { border-top: 0; }
.crm-toggle .t { font-size: 14px; }
.crm-toggle input { width: 22px; height: 22px; margin: 0; accent-color: var(--ok); flex: none; }
.crm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.crm-tag { display: inline-flex; align-items: center; gap: 2px; background: var(--chip-bg); color: var(--chip-text); padding: 2px 4px 2px 10px; border-radius: 999px; font-size: 13px; }
.crm-tag button { border: 0; background: none; color: inherit; font-size: 16px; min-width: 28px; min-height: 28px; cursor: pointer; }
.crm-note { border-top: 1px solid var(--border); padding: 8px 0; font-size: 14px; }
.crm-note small, .crm-ev small { display: block; color: var(--hint); font-size: 12px; }
.crm-note-t { white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-del { float: right; border: 0; background: none; color: var(--hint); min-width: 36px; min-height: 36px; cursor: pointer; }
.crm-ev { font-size: 13px; padding: 6px 0; border-top: 1px solid var(--border); }
.crm-genpw { background: var(--warn-bg); border: 1px dashed var(--warn); border-radius: 10px; padding: 10px; margin-top: 8px; font-size: 14px; }
.crm-genpw code { font-size: 16px; font-weight: 700; user-select: all; }
@media (min-width: 900px) {
  .crm-filters { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .crm-filters input[type=search] { grid-column: auto; }
  .crm-drawer { left: auto; top: 0; width: min(520px, 100%); border-radius: 0; box-shadow: -8px 0 32px rgba(15, 23, 42, .18); }
  .crm-row3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- чат-бот: подключение бота, сценарии, мастер ---------- */
.bot-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); margin-bottom: 12px; }
.bot-seg button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--hint); padding: 8px 14px; border-radius: 8px; cursor: pointer; min-height: 36px; }
.bot-seg button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-card); }
.bot-nsteps { list-style: none; counter-reset: ns; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bot-nsteps li { counter-increment: ns; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.bot-nsteps li::before { content: counter(ns); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.bot-conn { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.bot-conn-av { width: 44px; height: 44px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-text); display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; }
.bot-conn b { display: block; } .bot-conn small { color: var(--hint); font-size: 13px; }
.bot-trig { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bot-funnel { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--hint); margin-top: 4px; }
.bot-funnel b { color: var(--text); font-variant-numeric: tabular-nums; }
.bot-h { margin: 6px 0 12px; font-size: 17px; }
.bot-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.bot-tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font: inherit; cursor: pointer; min-height: 110px; }
.bot-tpl:hover { border-color: var(--link); }
.bot-tpl b { font-size: 15px; } .bot-tpl small { color: var(--hint); font-size: 13px; line-height: 1.4; }
.bot-wiz { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.bot-wiz-form { min-width: 0; }
.bot-wiz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bot-wiz-head h3 { margin: 0; }
.bot-wiz-steps { display: flex; gap: 6px; margin: 10px 0 6px; overflow-x: auto; scrollbar-width: none; }
.bot-wiz-steps button { flex: none; border: 1px solid var(--border); background: var(--card); color: var(--hint); font: inherit; font-size: 13px; font-weight: 600;
  border-radius: 999px; padding: 7px 13px; cursor: pointer; min-height: 36px; }
.bot-wiz-steps button.on { background: var(--btn); border-color: var(--btn); color: var(--btn-text); }
.bot-wiz-steps button.done { color: var(--text); }
.bot-wiz-form .bot-toggle { margin: 8px 0; }
.bot-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 6px; }
.bot-var { border: 1px dashed var(--border); background: var(--bg); color: var(--link); font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 8px; cursor: pointer; min-height: 32px; }
.bot-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) { .bot-row2 { grid-template-columns: 1fr; } }
.bot-wiz-nav { position: sticky; bottom: calc(64px + var(--safe-bottom)); background: var(--card); padding: 10px 0 2px; margin-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.bot-wiz-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pv-phone { width: min(320px, 100%); border-radius: 34px; background: #0B1530; padding: 8px; box-shadow: 0 20px 40px -18px rgba(11, 21, 48, .45); }
.pv-top { background: var(--card); border-radius: 27px 27px 0 0; padding: 12px 14px 8px; text-align: center; border-bottom: 1px solid var(--border); }
.pv-top b { display: block; font-size: 13px; } .pv-top small { font-size: 11px; color: var(--hint); }
.pv-chat { background: var(--bg); border-radius: 0 0 27px 27px; padding: 12px 10px 18px; display: flex; flex-direction: column; gap: 6px; min-height: 360px; max-height: 560px; overflow-y: auto; }
.pv-msg { max-width: 88%; align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 8px 10px;
  font-size: 13px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 5px; }
.pv-msg.me { align-self: flex-end; background: var(--btn); color: var(--btn-text); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.pv-btn { display: block; text-align: center; font-weight: 600; color: var(--link); background: var(--bg); border-radius: 8px; padding: 6px; font-size: 12.5px; white-space: normal; }
.pv-note { align-self: center; font-size: 11px; color: var(--hint); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; text-align: center; }
@media (min-width: 1100px) {
  .bot-wiz { grid-template-columns: minmax(0, 1fr) 340px; }
  .bot-wiz-preview { position: sticky; top: 130px; }
  .bot-wiz-nav { bottom: 0; }
}
@media (min-width: 900px) { .bot-wiz-nav { bottom: 0; } }
.bot-menu-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.bot-menu-item { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.bot-menu-tools { display: flex; gap: 6px; }
.bot-menu-tools .btn { width: auto; }
.pv-chat-kb { border-radius: 0; min-height: 260px; }
.pv-kb { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; background: var(--card); border-radius: 0 0 27px 27px; border-top: 1px solid var(--border); }
.pv-kb span { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 4px; text-align: center; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-kb span:last-child:nth-child(odd) { grid-column: span 2; }
.pv-kb-empty { display: block; text-align: center; color: var(--hint); font-size: 12px; padding: 12px; }
.bot-fun { margin-bottom: 10px; }
.bot-fun h3 { margin: 0 0 8px; font-size: 15px; }
.bot-fun-row { display: grid; grid-template-columns: minmax(110px, 150px) 1fr 44px 40px; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
.bot-fun-l { color: var(--hint); }
.bot-fun-bar { height: 10px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.bot-fun-bar i { display: block; height: 100%; background: var(--btn); border-radius: 6px; }
.bot-fun-row b { text-align: right; font-variant-numeric: tabular-nums; }
.bot-fun-row small { color: var(--hint); font-variant-numeric: tabular-nums; }
#tab-bot .bot-seg { margin-bottom: 12px; }
.bot-field select + select, .bot-field select + input { margin-top: 6px; }
.bot-ai-ask { display: flex; gap: 6px; width: min(320px, 100%); }
.bot-ai-ask input { flex: 1; min-width: 0; }
.bot-ai-ask .btn { width: auto; min-height: 44px; padding: 10px 14px; }
.bot-code { display: block; padding: 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; overflow-wrap: anywhere; user-select: all; margin: 8px 0; }
.bot-notice { background: var(--warn-bg); color: var(--text); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.bot-field input[type=color] { width: 100%; height: 44px; padding: 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); }
/* ИИ-помощник */
.as-wrap { display: flex; flex-direction: column; gap: 10px; }
.as-log { display: flex; flex-direction: column; gap: 10px; min-height: 280px; max-height: calc(100vh - 360px); overflow-y: auto; padding: 4px 2px; }
.as-m { align-self: flex-start; max-width: 92%; background: var(--bg); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 10px 12px;
  font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 8px; }
.as-m.me { align-self: flex-end; background: var(--btn); color: var(--btn-text); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.as-wait { color: var(--hint); }
.as-hints { display: flex; flex-wrap: wrap; gap: 8px; }
.as-hint { border: 1px dashed var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 13.5px; text-align: left; padding: 9px 12px; border-radius: 12px; cursor: pointer; }
.as-hint:hover { border-color: var(--link); }
.as-card { background: var(--card); border: 1px solid var(--link); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; white-space: pre-wrap; }
.as-card.applied { border-color: var(--ok); } .as-card.discarded { opacity: .6; border-color: var(--border); }
.as-line { font-size: 13px; color: var(--text); }
.as-card .bot-actions { margin: 6px 0 0; }
.as-card .bot-badge { align-self: flex-start; }
.as-bar { display: flex; gap: 8px; align-items: flex-end; }
.as-bar textarea { flex: 1; min-height: 48px; }
.as-bar .btn { width: auto; min-height: 48px; padding: 10px 16px; }
.bot-export { flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.bot-export .file-hint { flex-basis: 100%; margin: 0; }
.bot-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.bot-tags .crm-tag { padding: 2px 4px 2px 10px; }
.bot-tag-input { width: 120px !important; min-height: 32px; padding: 4px 10px !important; font-size: 13px !important; border-radius: 999px !important; }
.bot-tag-filter { margin-bottom: 12px; max-width: 360px; }
.pv-cmds { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 14px; background: var(--card); border-radius: 0 0 27px 27px; border-top: 1px solid var(--border); font-size: 12.5px; }
.pv-cmds span { padding: 6px 4px; border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-cmds span:last-child { border-bottom: 0; }