/* ===== оболочка «Аврора»: разделы в сайдбаре, вкладки в шапке, поиск ⌘K, нижняя панель ===== */
.nav-group { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); padding: 14px 12px 6px; }
.title-box { display: grid; gap: 1px; min-width: 0; flex: none; max-width: 300px; }
.title-box h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb { color: var(--text-faint); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.crumb:empty { display: none; }
/* вкладки в одну строку: не помещаются — листаются, а не переносятся */
.sec-tabs { display: flex; gap: 4px; flex-wrap: nowrap; margin-left: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sec-tabs::-webkit-scrollbar { display: none; }
.sec-tabs button { flex: none; white-space: nowrap; padding: 7px 13px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  background: transparent; border: 1px solid transparent; color: var(--text-dim); }
.sec-tabs button:hover { color: var(--text); background: var(--panel-2); border-color: transparent; }
.sec-tabs button.on { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.cmdk-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 12px;
  border-radius: 10px; background: var(--panel); border: 1px solid var(--border); color: var(--text-faint); font-size: 13px; }
.theme-btn { margin-left: auto; width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border-radius: 10px; background: var(--panel); border: 1px solid var(--border); color: var(--text-dim); }
.theme-btn:hover { color: var(--text); background: var(--panel); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn + .cmdk-btn { margin-left: 0; }
.cmdk-btn:hover { color: var(--text); border-color: var(--border-2); background: var(--panel); }
.cmdk-btn kbd { font: 600 11px "IBM Plex Mono", ui-monospace, monospace; padding: 2px 6px; border-radius: 6px;
  background: var(--panel-3); color: var(--text-dim); }
#cmdk { position: fixed; inset: 0; z-index: 80; display: none; place-items: start center; padding: 12vh 16px 0;
  background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#cmdk.open { display: grid; }
.cmdk-box { width: min(560px, 100%); border-radius: 20px; overflow: hidden; background: var(--glass-strong);
  backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--glass-border); box-shadow: 0 30px 80px rgba(0,0,0,.45); animation: cmdkIn .18s cubic-bezier(.2,.8,.3,1) backwards; }
#cmdk .cmdk-box input { width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--glass-border); border-radius: 0;
  background: transparent; padding: 16px 18px; font-size: 15.5px; color: var(--text); box-shadow: none; }
.cmdk-list { max-height: min(50vh, 420px); overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 12px; border-radius: 10px;
  cursor: pointer; color: var(--text-dim); font-weight: 600; }
.cmdk-item small { margin-left: auto; color: var(--text-faint); font-size: 12px; font-weight: 600; }
.cmdk-item.sel { background: var(--accent-soft); color: var(--text); }
.cmdk-empty { padding: 18px; color: var(--text-faint); }
@keyframes cmdkIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.bottom-bar { display: none; }
@media (prefers-reduced-motion: reduce) { .cmdk-box { animation: none; } }

/* layout: сайдбар + контент */
#main { display: none; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
#side {
  background: var(--glass); border-right: 1px solid var(--glass-border);
  padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
/* бренд: значок-реплика + «Chatter Squad» (Squad — сиянием), под ним кто вошёл */
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px; margin: -2px 0 8px; min-width: 0;
  border-radius: 12px; color: inherit; text-decoration: none; transition: background .15s; }
.brand:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
.brand:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.brand-mark { transition: transform .2s cubic-bezier(.2,.8,.3,1.3); }
@media (prefers-reduced-motion: reduce) { .brand-mark { transition: none; } }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center;
  color: var(--on-accent); background: var(--aurora-grad);
  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.28);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-t { display: grid; gap: 1px; min-width: 0; line-height: 1.15; }
.brand-t b { font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.brand-t b i { font-style: normal; background: var(--aurora-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-t small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }

/* переключатель ботов: карточка текущего бота + всплывающий список */
.bot-sw { position: relative; }
.bs-cur {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 8px; text-align: left;
  border-radius: 14px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  transition: border-color .15s, background .15s;
}
.bs-cur:hover, .bs-cur[aria-expanded="true"] { border-color: var(--border-2); background: var(--panel-3); }
.bs-cur:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.bs-av {
  width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font: 800 14px "Manrope", system-ui, sans-serif; color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.bs-av.t2 { background: color-mix(in srgb, var(--sky) 18%, var(--panel-3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky) 38%, transparent); }
.bs-av.t3 { background: color-mix(in srgb, var(--violet) 18%, var(--panel-3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 38%, transparent); }
.bs-av.t4 { background: color-mix(in srgb, var(--pos) 15%, var(--panel-3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pos) 35%, transparent); }
.bs-tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.bs-tx b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-tx small { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-tx small span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bs-tx small .bs-warn { color: var(--neg-text); font-weight: 600; }
.bs-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.bs-dot.on { background: var(--pos); box-shadow: 0 0 8px color-mix(in srgb, var(--pos) 70%, transparent); }
.bs-dot.err { background: var(--neg); box-shadow: 0 0 8px color-mix(in srgb, var(--neg) 55%, transparent); }
.bs-chev { width: 16px; height: 16px; flex: none; color: var(--text-faint); }
.bs-pop {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); padding: 6px;
  border-radius: 14px; border: 1px solid var(--border-2); background: var(--panel); box-shadow: var(--shadow);
  animation: bsIn .14s ease-out backwards;
}
.bs-pop[hidden] { display: none; }
.bs-h { padding: 6px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.bs-list { display: grid; gap: 2px; max-height: min(360px, 55vh); overflow-y: auto; }
.bs-it {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; text-align: left; min-height: 44px;
  border: 0; border-radius: 10px; background: transparent; color: var(--text);
}
.bs-it:hover, .bs-it:focus-visible { background: var(--panel-3); outline: none; }
.bs-it.on { background: var(--accent-soft); }
.bs-it .bs-av { width: 28px; height: 28px; border-radius: 9px; font-size: 12.5px; }
.bs-ok { width: 16px; height: 16px; flex: none; color: var(--accent-text); }
.bs-new {
  width: 100%; margin-top: 6px; min-height: 40px; border-radius: 10px; font-weight: 700;
  border: 1px dashed var(--border-2); background: transparent; color: var(--accent-text);
}
.bs-new:hover, .bs-new:focus-visible { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); outline: none; }
@keyframes bsIn { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .bs-pop { animation: none; } }
.side-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; flex: 1; }
.side-nav button {
  display: flex; align-items: center; gap: 11px; text-align: left; width: 100%;
  background: transparent; border-color: transparent; color: var(--muted);
  font-weight: 600; padding: 9px 12px; border-radius: 10px; font-size: 13.5px;
}
.side-nav button:hover { color: var(--text); background: var(--panel2); border-color: transparent; }
.side-nav button.primary {
  background: var(--accent-soft); color: var(--accent-text); box-shadow: none; border-color: transparent;
}
.side-nav button .ico { width: 19px; height: 19px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; color: currentColor; }
.side-nav button .ico svg { width: 18px; height: 18px; stroke: currentColor;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-nav button.primary .ico { color: var(--accent); }
#side .stat {
  color: var(--muted); font-size: 13px; padding: 12px 12px 10px;
  border-top: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
#content { min-width: 0; }
#topbar { display: flex; align-items: center; gap: 12px; padding: 20px 26px 0;
          max-width: 1280px; margin: 0 auto; }
#topbar h1 { font-size: 20px; margin: 0; font-weight: 700; letter-spacing: -.01em; }

.wrap { display: grid; grid-template-columns: 340px 1fr; gap: 20px;
        padding: 20px 26px 26px; max-width: 1280px; margin: 0 auto; }
.wrap.with-map { grid-template-columns: 325px 210px 1fr; }
/* список шагов воронки — только во вкладке «Шаги»; в остальных редактор на всю ширину */
.wrap.only-editor { grid-template-columns: 1fr; }
.wrap.only-editor #stepsCol, .wrap.only-editor #miniMap { display: none; }
/* grid-элементы должны сжиматься ниже своего контента, иначе трек раздувается
   под max-content и появляется горизонтальный скролл на узких экранах */
#content { min-width: 0; }
.wrap > *, .u-grid2 > *, .bc-grid > *, .dstat-grid > *, .editor-col { min-width: 0; }

/* editor */
#editor { background: var(--panel); border: 1px solid var(--border);
          border-radius: 16px; padding: 24px; align-self: start; box-shadow: var(--shadow); }
#editor .placeholder { color: var(--muted); text-align: center; padding: 64px 0; }