* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #f2f4f8; color: #1c2433; }
.hidden { display: none !important; }

/* login */
.login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #101728; }
.login-box { background: #fff; padding: 40px; border-radius: 14px; width: 340px; text-align: center; }
.login-box h1 { margin-bottom: 4px; }
.login-box p { color: #7a8499; margin-bottom: 20px; font-size: 14px; }
.login-box input { width: 100%; padding: 11px; border: 1px solid #d6dbe6; border-radius: 8px; margin-bottom: 12px; font-size: 15px; }
.error { color: #d33; font-size: 13px; margin-top: 10px; }

/* layout */
#app { display: flex; min-height: 100vh; }
.sidebar { width: 210px; background: #101728; color: #cfd6e4; display: flex; flex-direction: column; padding: 18px 10px; position: fixed; top:0; bottom:0; }
.logo { font-size: 19px; font-weight: 700; color: #fff; padding: 0 12px 18px; }
.nav-item { display: block; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14.5px; margin-bottom: 3px; }
.nav-item:hover { background: #1d2740; }
.nav-item.active { background: #2e6bff; color: #fff; }
.side-user { margin-top: auto; border-top: 1px solid #1d2740; padding-top: 8px; }
.side-user #side-user-name { font-size: 12px; color: #8b93a7; padding: 4px 12px 6px; }
.logout { color: #8b93a7; }
main { flex: 1; margin-left: 210px; padding: 26px 30px; }
h2 { margin-bottom: 18px; }

/* controls */
.btn { padding: 9px 15px; border: 1px solid #d6dbe6; background: #fff; border-radius: 8px; cursor: pointer; font-size: 14px; }
.btn:hover { background: #eef1f7; }
.btn.primary { background: #2e6bff; border-color: #2e6bff; color: #fff; }
.btn.primary:hover { background: #1f57e0; }
.btn.danger { color: #d33; }
.inline-input, select, textarea { padding: 9px 11px; border: 1px solid #d6dbe6; border-radius: 8px; font-size: 14px; background:#fff; }
.inline-input.wide, textarea { width: 100%; margin-bottom: 10px; }
textarea { resize: vertical; font-family: inherit; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-head h2 { margin: 0; flex: 1; }
.spacer { flex: 1; }

/* cards & tables */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.card { background: #fff; border-radius: 12px; padding: 20px; }
.card.clickable { cursor: pointer; transition: .12s; }
.card.clickable:hover { box-shadow: 0 2px 10px rgba(16,23,40,.08); transform: translateY(-1px); }
.card .num { font-size: 30px; font-weight: 700; }
.card .lbl { color: #7a8499; font-size: 13px; margin-top: 4px; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 11px 14px; font-size: 14px; border-bottom: 1px solid #eef1f7; }
th { background: #f8fafc; color: #7a8499; font-weight: 600; font-size: 12.5px; text-transform: uppercase; }
.pill { display: inline-block; background: #e8eefc; color: #2e6bff; border-radius: 20px; padding: 2px 9px; font-size: 12px; margin: 1px; }
.pill.gray { background: #eef1f7; color: #667; }
.pill .x { cursor: pointer; margin-left: 4px; opacity: .6; }
.status-active { color: #12a150; font-weight: 600; }
.status-off { color: #99a; }
.panel { background: #fff; border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.row { display: flex; gap: 30px; margin: 10px 0 16px; }
.row label { font-size: 13px; color: #556; display: block; margin-bottom: 6px; }
.tag-picker .pill { cursor: pointer; user-select: none; }
.tag-picker .pill.on { background: #2e6bff; color: #fff; }
.progress { height: 6px; background: #eef1f7; border-radius: 4px; overflow: hidden; width: 140px; }
.progress i { display: block; height: 100%; background: #2e6bff; }

/* editor */
.editor-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.editor-wrap { display: flex; gap: 0; height: calc(100vh - 130px); background: #fff; border-radius: 12px; overflow: hidden; position: relative; }
.palette { width: 170px; border-right: 1px solid #eef1f7; padding: 14px 10px; }
.palette-title { font-size: 12px; text-transform: uppercase; color: #7a8499; margin-bottom: 10px; }
.palette-item { padding: 9px 10px; border: 1px solid #d6dbe6; border-radius: 8px; margin-bottom: 8px; cursor: pointer; font-size: 13.5px; background: #f8fafc; }
.palette-item:hover { border-color: #2e6bff; }
.palette-hint { font-size: 11.5px; color: #99a3b5; margin-top: 14px; line-height: 1.5; }
#drawflow { flex: 1; position: relative; background-image: radial-gradient(#dde3ee 1px, transparent 1px); background-size: 22px 22px; overscroll-behavior: none; }
#drawflow.grabbing, #drawflow.grabbing * { cursor: grab !important; }
.props { width: 300px; border-left: 1px solid #eef1f7; padding: 16px; overflow-y: auto; }
.props h3 { font-size: 15px; margin-bottom: 12px; }
.props label { font-size: 12.5px; color: #556; display: block; margin: 10px 0 4px; }
.props input, .props select, .props textarea { width: 100%; }
.props .btn { margin-top: 12px; }
.btn-row-item { display: flex; gap: 6px; margin-bottom: 6px; }
.btn-row-item input { flex: 1; }
.btn-row-item .p-btn-url { flex: 1.4; min-width: 0; }  /* URL длиннее текста кнопки */

/* загрузчик картинки */
.img-drop { border: 2px dashed #cfd6e4; border-radius: 10px; padding: 12px; text-align: center;
  cursor: pointer; transition: .15s; background: #fafbfe; outline: none; }
.img-drop:hover, .img-drop:focus { border-color: #2e6bff; background: #f4f7ff; }
.img-drop.drag { border-color: #2e6bff; background: #eaf0ff; }
.img-drop-inner { position: relative; display: inline-block; min-height: 20px; }
.img-drop-empty { color: #99a3b5; font-size: 13px; }
.img-preview { max-width: 100%; max-height: 150px; border-radius: 8px; display: block; margin: 0 auto; }
.img-remove { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: #d33; color: #fff; cursor: pointer; font-size: 12px; line-height: 22px; padding: 0; }
.img-drop-hint { font-size: 12px; color: #7a8499; margin-top: 8px; }
.img-pick { color: #2e6bff; text-decoration: underline; }

/* список вложений */
#media-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.media-item { display: flex; gap: 10px; align-items: center; border: 1px solid #e3e8f0; border-radius: 10px; padding: 8px; background: #fff; }
.media-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.media-thumb.icon { display: flex; align-items: center; justify-content: center; background: #f0f3f8; font-size: 22px; }
.media-mid { flex: 1; min-width: 0; }
.media-mid select { width: 100%; margin-bottom: 4px; }
.media-name { font-size: 11px; color: #7a8499; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-ord { display: flex; flex-direction: column; gap: 3px; }
.media-ord .btn { padding: 3px 7px; font-size: 12px; }

/* drawflow overrides */
.drawflow .drawflow-node { background: #fff; border: 2px solid #d6dbe6; border-radius: 10px; padding: 0; width: auto; min-width: 200px; max-width: 340px; font-size: 13px; }
.drawflow .drawflow-node.selected { border-color: #2e6bff !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(46,107,255,.18); }
.drawflow .drawflow-node .df-title { font-weight: 700; padding: 8px 12px 2px; }
.drawflow .drawflow-node .df-sub { padding: 0 12px 8px; color: #7a8499; font-size: 12px; white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.drawflow .drawflow-node.expanded { max-width: 460px; }
.drawflow .drawflow-node.expanded .df-sub { display: block; -webkit-line-clamp: unset; overflow: visible; }
.df-toggle { display: block; padding: 0 12px 8px; color: #2e6bff; font-size: 11.5px; cursor: pointer; user-select: none; }
.df-toggle:hover { text-decoration: underline; }
.drawflow .drawflow-node .df-ports { padding: 0 12px 8px; color: #2e6bff; font-size: 11px; }
.drawflow .connection .main-path { stroke: #2e6bff; stroke-width: 3px; }
.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { background: #fff; border: 2px solid #2e6bff; height: 14px; width: 14px; }
.drawflow .drawflow-node.start { border-color: #12a150; }
.drawflow .drawflow-node.message { border-color: #2e6bff; }
.drawflow .drawflow-node.delay { border-color: #e8a13c; }
.drawflow .drawflow-node.condition { border-color: #9a5df0; }
.drawflow .drawflow-node.action { border-color: #e05c9a; }
.drawflow .drawflow-node.language { border-color: #39b0d2; }
.drawflow .drawflow-node.filter { border-color: #7a8499; }
.drawflow .drawflow-node.note { border-color: #e8a13c; background: #fff8ec; border-style: dashed; }
.drawflow .drawflow-node.note .df-sub { color: #8a6d3b; }
.drawflow .drawflow-node.multi-sel { box-shadow: 0 0 0 3px rgba(46,107,255,.35); }

/* дашборд */
.dash-filters { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.df-item { display: flex; flex-direction: column; gap: 4px; }
.df-item label { font-size: 11px; text-transform: uppercase; color: #7a8499; }
.df-item select, .df-item input { min-width: 140px; }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart-box { padding: 16px 18px; min-width: 0; overflow: hidden; }
.chart-box.wide { grid-column: 1 / -1; }
/* фиксированная высота обязательна: иначе Chart.js с maintainAspectRatio:false
   бесконечно растит canvas и вешает страницу */
.chart-wrap { position: relative; height: 220px; width: 100%; }
.chart-wrap.tall { height: 300px; }
.chart-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.chart-box h3 { font-size: 14px; margin-bottom: 12px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chart-head h3 { margin: 0; }
.chart-toggle { display: flex; gap: 4px; }
.btn.tiny { padding: 4px 10px; font-size: 12px; }
.btn.tiny.active { background: #2e6bff; color: #fff; border-color: #2e6bff; }
@media (max-width: 1100px) { .chart-grid { grid-template-columns: 1fr; } }

/* превью сообщения на карточке */
/* Превью вложений: одиночная картинка — крупно, во всю ширину карточки,
   как в других конструкторах. По ней шаг узнают быстрее, чем по тексту. */
.df-media { display: grid; gap: 4px; padding: 8px 10px 2px; }
.df-media.one { grid-template-columns: 1fr; }
.df-media.two { grid-template-columns: 1fr 1fr; }
.df-media.many { grid-template-columns: repeat(3, 1fr); }
.df-media-thumb { width: 100%; border-radius: 8px; object-fit: cover; border: 1px solid #e3e8f0;
  background: #f4f6fb;
  /* тянуть надо блок, а не картинку: без этого браузер начинает своё
     перетаскивание изображения, и карточка остаётся на месте. pointer-events
     отдаёт нажатие самой карточке — картинка тут только для глаз. */
  -webkit-user-drag: none; user-select: none; pointer-events: none; }
.df-media.one .df-media-thumb { height: 150px; }
.df-media.two .df-media-thumb { height: 100px; }
.df-media.many .df-media-thumb { height: 64px; }
/* не-картинки (аудио, файл, кружок) — та же плитка, но со значком по центру */
.df-media-thumb.icon { display: flex; align-items: center; justify-content: center;
  font-size: 22px; }
.df-media-thumb.icon { display: inline-flex; align-items: center; justify-content: center; background: #f0f3f8; font-size: 20px; }
.df-media-more { font-size: 11px; color: #7a8499; }
.df-sub.empty { color: #c3c9d6; font-style: italic; }
.df-btns { padding: 2px 12px 6px; display: flex; flex-direction: column; gap: 4px; }
/* отступы по 26px с обеих сторон — место под кружок с номером порта. Подпись
   стоит по центру, и без запаса длинная надпись наезжала бы на номер (а в
   правосторонних языках — с другой стороны). */
.df-btn { background: #eef3ff; border: 1px solid #d3e0ff; color: #2e6bff; border-radius: 8px;
  padding: 5px 26px; font-size: 12px; text-align: center; position: relative;
  min-height: 15px; }
.df-btn.url { color: #556; background: #f4f6fa; border-color: #e0e5ee; }
.df-btn-port { position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  background: #2e6bff; color: #fff; border-radius: 50%; width: 15px; height: 15px;
  font-size: 9.5px; line-height: 15px; font-weight: 700; }

/* подсказка-плашка */
.hint-box { margin-top: 12px; padding: 10px 12px; background: #f4f7ff; border: 1px solid #dbe6ff;
  border-radius: 8px; font-size: 12px; color: #556; line-height: 1.6; }
.hint-box code { background: #fff; border: 1px solid #d6dbe6; border-radius: 4px; padding: 1px 5px; font-size: 11.5px; color: #2e6bff; }

/* deep-link модалка */
.dl-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 480px; max-width: 94vw; background: #fff; border-radius: 14px; padding: 22px; z-index: 902;
  box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.dl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dl-param { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.dl-param .dl-k { width: 130px; }
.dl-param .dl-v { flex: 1; }
.dl-result { display: flex; gap: 8px; margin-top: 6px; }

/* рамка выделения */
.marquee-box { position: fixed; border: 1.5px dashed #2e6bff; background: rgba(46,107,255,.08);
  z-index: 950; pointer-events: none; border-radius: 4px; }

/* подписанные порты */
.drawflow .drawflow-node .output.port-labeled,
.drawflow .drawflow-node .output.port-yes,
.drawflow .drawflow-node .output.port-no {
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; color: #2e6bff;
  width: 17px; height: 17px; background: #fff;
}
.drawflow .drawflow-node .output.port-next { color: #7a8499; border-color: #99a3b5; }
.drawflow .drawflow-node .output.port-btn { border-color: #2e6bff; background: #eef3ff; }
.drawflow .drawflow-node .output.port-yes { color: #12a150; border-color: #12a150; background: #e9f9f0; }
.drawflow .drawflow-node .output.port-no { color: #d33; border-color: #d33; background: #fdeeee; }

/* статистика на карточках воронки */
.node-stat-badge { position: absolute; top: -10px; right: -10px; background: #e05c5c; color: #fff;
  border-radius: 20px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; z-index: 5;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.node-clicks { padding: 4px 12px 8px; font-size: 11px; color: #556; border-top: 1px dashed #e3e8f0; }

/* AI-чат воронки */
.ai-chat { position: fixed; right: 20px; bottom: 20px; width: 380px; max-width: 92vw; height: 480px;
  background: #fff; border-radius: 14px; z-index: 850; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.22); border: 1px solid #e3e8f0; }
.ai-chat-head { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid #eef1f7; }
.ai-chat-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f8fafc; }
.aim { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.aim.user { align-self: flex-end; background: #2e6bff; color: #fff; border-bottom-right-radius: 4px; }
.aim.assistant { align-self: flex-start; background: #fff; border: 1px solid #e3e8f0; border-bottom-left-radius: 4px; }
.aim.typing { color: #99a3b5; font-style: italic; }
.ai-chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #eef1f7; align-items: flex-end; }
.ai-chat-input textarea { flex: 1; padding: 8px 10px; border: 1px solid #d6dbe6; border-radius: 8px; font-family: inherit; font-size: 13px; resize: none; }

/* панель «Шаги» */
.steps-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw;
  background: #fff; z-index: 800; box-shadow: -8px 0 30px rgba(0,0,0,.15);
  padding: 16px; overflow-y: auto; }
.steps-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.step-row { padding: 10px 0; border-bottom: 1px solid #f0f3f8; }
.step-row.entry { background: #f8fafc; margin: 0 -16px; padding: 10px 16px; }
.step-label { font-size: 13px; margin-bottom: 6px; }
.step-bar { height: 8px; background: #eef1f7; border-radius: 4px; overflow: hidden; margin-bottom: 5px; }
.step-bar i { display: block; height: 100%; background: #2e6bff; }
.step-nums { display: flex; justify-content: space-between; align-items: baseline; }
.step-count { font-weight: 700; font-size: 15px; }
.step-pct { font-size: 11.5px; color: #7a8499; }

/* конструктор анализа */
.an-step { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.an-step select { padding: 8px 10px; border: 1px solid #d6dbe6; border-radius: 8px; background: #fff; font-size: 13px; }
.an-step-num { width: 24px; height: 24px; border-radius: 50%; background: #2e6bff; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* вкладки экрана бота */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid #e3e8f0; }
.tab { padding: 10px 16px; cursor: pointer; font-size: 14px; color: #556; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab:hover { color: #1c2433; }
.tab.active { color: #2e6bff; border-bottom-color: #2e6bff; font-weight: 600; }

/* живой чат */
.chat-overlay { position: fixed; inset: 0; background: rgba(16,23,40,.35); z-index: 900; }
.chat-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 860px; max-width: 96vw;
  background: #fff; z-index: 901; display: flex; box-shadow: -8px 0 30px rgba(0,0,0,.15); }
.chat-conv { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #eef1f7; }
.chat-name { font-weight: 700; font-size: 16px; }
.chat-username { color: #2e6bff; font-size: 13px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 18px; background: #f2f4f8; display: flex; flex-direction: column; gap: 10px; }
.chat-empty { color: #99a3b5; text-align: center; margin-top: 30px; }
.msg { display: flex; flex-direction: column; max-width: 75%; }
.msg.in { align-self: flex-start; align-items: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.msg-bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.msg.in .msg-bubble { background: #fff; border: 1px solid #e3e8f0; border-bottom-left-radius: 4px; }
.msg.out .msg-bubble { background: #2e6bff; color: #fff; border-bottom-right-radius: 4px; }
.msg.out.op .msg-bubble { background: #12a150; }
.msg-meta { font-size: 11px; color: #99a3b5; margin-top: 3px; }
/* вложения в чате оператора */
.chat-attachments { display: flex; gap: 8px; padding: 8px 12px; flex-wrap: wrap;
  border-top: 1px solid #eef1f7; background: #fafbfe; }
.chat-att { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e3e8f0;
  border-radius: 8px; padding: 4px 6px; font-size: 11.5px; color: #556; }
.chat-att img { width: 32px; height: 32px; object-fit: cover; border-radius: 5px; }
.chat-att .ca-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: #f0f3f8; border-radius: 5px; font-size: 16px; }
.chat-att .ca-del { border: none; background: none; color: #d33; cursor: pointer; font-size: 12px; padding: 0 2px; }
.chat-attach-btn { padding: 9px 11px; font-size: 16px; line-height: 1; }
.chat-drawer.drop-hint { outline: 3px dashed #2e6bff; outline-offset: -6px; }

.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #eef1f7; align-items: flex-end; }
.chat-input textarea { flex: 1; padding: 9px 11px; border: 1px solid #d6dbe6; border-radius: 8px; font-family: inherit; font-size: 14px; resize: none; }
.chat-side { width: 290px; border-left: 1px solid #eef1f7; padding: 16px; overflow-y: auto; background: #fbfcfe; }
.chat-info-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #f0f3f8; }
.chat-info-row span { color: #7a8499; }
.chat-info-row b { text-align: right; }
.chat-actions { margin-top: 16px; }
.chat-block { margin-bottom: 18px; }
.chat-block > label { font-size: 12px; text-transform: uppercase; color: #7a8499; display: block; margin-bottom: 6px; }
.chat-btn-row { display: flex; gap: 6px; }
.chat-pause-state { font-size: 13px; margin-bottom: 6px; color: #556; }

/* конструктор сегментов */
.seg-head { display: flex; gap: 20px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.seg-match, .seg-24h { font-size: 13px; color: #556; display: flex; align-items: center; gap: 6px; }
.seg-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.seg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg-row .seg-field { min-width: 190px; }
.seg-row .seg-op { min-width: 130px; }
.seg-row .seg-value { min-width: 150px; }
.seg-row .seg-del { padding: 6px 10px; }
.seg-empty { color: #99a3b5; font-size: 13px; padding: 6px 0; }
.seg-actions { display: flex; align-items: center; gap: 12px; }
.seg-count { font-size: 13px; color: #2e6bff; font-weight: 600; }
.list-meta { font-size: 13px; color: #556; margin-bottom: 8px; }

/* editor subbar (боты) */
.editor-subbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px 12px; background: #fff; border-radius: 10px; }
.subbar-label { font-size: 13px; color: #556; }
.hint-inline { font-size: 12px; color: #7a8499; max-width: 340px; }

/* всплывашка «скопировано/вставлено» */
.editor-flash { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #101728; color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: .2s; z-index: 999; }
.editor-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* просмотр логов */
.log-view { background: #0f1626; color: #cfd6e4; border-radius: 12px; padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55;
  height: calc(100vh - 260px); overflow: auto; white-space: pre-wrap; word-break: break-word; }
.log-view .log-err { color: #ff8080; }
.log-view .log-warn { color: #ffc46b; }


/* ---------- UX редактора: магнит, крупные порты, dnd из палитры ---------- */
.palette-item { cursor: grab; user-select: none; }
.palette-item:active { cursor: grabbing; }

/* карточка-цель, пока тянешь связь */
.drawflow-node.magnet-target {
  outline: 3px solid #4c8dff;
  outline-offset: 2px;
  border-radius: 10px;
}
.drawflow-node.magnet-target .inputs .input {
  transform: scale(1.5);
  background: #4c8dff;
}

/* порты крупнее и с большой зоной попадания */
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
  width: 16px; height: 16px;
  transition: transform .12s ease, background .12s ease;
}
.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover {
  transform: scale(1.45);
  background: #4c8dff;
}
/* невидимая «подушка» вокруг порта — попадать проще */
.drawflow .drawflow-node .input::after,
.drawflow .drawflow-node .output::after {
  content: ''; position: absolute; inset: -8px;
}

/* массовые действия с аудиторией */
.bulk-actions {
  margin-left: 14px; display: inline-flex; gap: 6px; align-items: center;
  font-size: 13px; color: #667;
}
.bulk-actions select { max-width: 140px; }
.btn.danger:hover { background: #d33; color: #fff; border-color: #d33; }

/* ---------- карточка рассылки ---------- */
.bc-detail {
  position: fixed; top: 4vh; left: 50%; transform: translateX(-50%);
  width: min(1000px, 94vw); max-height: 92vh; overflow: auto;
  background: #fff; border-radius: 14px; z-index: 60;
  box-shadow: 0 20px 60px rgba(20,25,45,.28);
}
.bc-detail-head {
  position: sticky; top: 0; background: #fff; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #eef0f5; font-size: 16px;
}
.bc-detail-body { padding: 18px 20px 24px; }
.bc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .bc-grid { grid-template-columns: 1fr; } }
.bc-section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: #8a93a6; margin-bottom: 8px;
}
.bc-preview {
  border: 1px solid #eef0f5; border-radius: 12px; padding: 12px; background: #fafbfd;
}
.bc-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.45; }
.bc-media { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bc-media-item { width: 96px; font-size: 11px; color: #7a8499; text-align: center; }
.bc-media-item span { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-hint { font-size: 12px; color: #8a93a6; margin-top: 6px; }
.bc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bc-stat {
  background: #f6f8fc; border-radius: 10px; padding: 10px 8px; text-align: center;
}
.bc-stat span { display: block; font-size: 20px; font-weight: 600; }
.bc-stat label { font-size: 11px; color: #8a93a6; }
.bc-stat.bad span { color: #d33; }
.bc-cond {
  display: inline-block; background: #eef2fb; color: #3a4a6b;
  border-radius: 6px; padding: 3px 8px; font-size: 12px; margin: 0 4px 4px 0;
}

/* ---------- матрица прав в «Команде» ---------- */
.perm-presets { margin: 6px 0 10px; font-size: 13px; color: #7a8499; }
.perm-presets .btn { margin-left: 4px; }
.perm-matrix { border: 1px solid #eef0f5; border-radius: 10px; overflow: hidden; }
.perm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 14px; border-bottom: 1px solid #f2f4f8;
}
.perm-row:last-child { border-bottom: none; }
.perm-row:nth-child(odd) { background: #fbfcfe; }
.perm-name { display: flex; flex-direction: column; }
.perm-name span { font-size: 12px; color: #8a93a6; margin-top: 2px; }
.perm-levels { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.perm-opt {
  padding: 5px 12px; border: 1px solid #dfe3ec; border-radius: 8px;
  font-size: 13px; cursor: pointer; user-select: none; background: #fff;
  white-space: nowrap;
}
.perm-opt input { display: none; }
.perm-opt.on { background: #2f6bff; border-color: #2f6bff; color: #fff; }
@media (max-width: 700px) {
  .perm-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.pill.danger-pill { background: #ffe9e9; color: #c22; }

/* ---------- Google Таблицы ---------- */
.sheets-state { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .sheets-state { grid-template-columns: 1fr; } }
.sheets-ok { color: #2a8; font-weight: 600; }
.sheets-off { color: #d33; }
.sheets-mail { font-size: 13px; color: #7a8499; margin-top: 6px; line-height: 1.6; }
.sheets-mail code {
  background: #f2f4f8; padding: 3px 6px; border-radius: 6px;
  font-size: 12px; user-select: all;
}
.sheets-err {
  margin-top: 6px; font-size: 12px; color: #d33; background: #fff2f2;
  border-radius: 8px; padding: 8px 10px; white-space: pre-wrap;
}
.sheets-counts { margin-top: 8px; }
.sheets-list { display: grid; gap: 6px; margin-top: 6px; }
.sheets-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px;
  border: 1px solid #eef0f5; border-radius: 10px; cursor: pointer; background: #fff;
}
.sheets-item:hover { border-color: #cdd6ea; }
.sheets-item span { display: flex; flex-direction: column; font-size: 14px; }
.sheets-item i { font-style: normal; font-size: 12px; color: #8a93a6; margin-top: 2px; }
.sheets-inline-status { margin-left: 10px; font-size: 13px; }
.sheets-preview { margin-top: 16px; overflow-x: auto; }
.sheets-preview table { font-size: 12px; margin-top: 6px; }
.sheets-preview td, .sheets-preview th { white-space: nowrap; }


/* ---------- узкие экраны: планшет и телефон ----------
   Сайдбар складывается в горизонтальное меню сверху, таблицы скроллятся,
   контент занимает всю ширину. Редактор воронок остаётся десктопным. */
@media (max-width: 900px) {
  #app { display: block; }
  .sidebar { position: static; width: 100%; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 4px; padding: 8px 10px; }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; min-width: 0; }
  .sidebar .nav-item { padding: 7px 10px; font-size: 13px; margin-bottom: 0; white-space: nowrap; }
  .logo { padding: 0 8px; font-size: 16px; }
  .side-user { margin-top: 0; border-top: none; padding-top: 0; display: flex; align-items: center; gap: 2px; }
  .side-user #side-user-name { display: none; }
  main { margin-left: 0; padding: 14px 12px; }
  .page-head { flex-wrap: wrap; }
  .page-head h2 { flex-basis: 100%; }
  /* таблица шире экрана — скроллим её, а не всю страницу */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .editor-toolbar { flex-wrap: wrap; }
  .chat-drawer { width: 100vw; }
  .chat-side { display: none; }  /* на телефоне — только переписка */
}

/* быстрые кнопки языков в панели свойств блока «Язык» */
.lang-quick { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 3px; }
.lang-quick .pill { cursor: pointer; user-select: none; }
.lang-quick .pill:hover { background: #2e6bff; color: #fff; }

/* рассылка в ленте чата — визуально отличается от личных сообщений бота */
.msg.out.bc .msg-bubble { background: #fff6e8; border: 1px solid #f0dcbd; color: #6b5636; }

/* кнопки в панели свойств: две строки на кнопку */
.btn-row { border: 1px solid #eef1f7; border-radius: 8px; padding: 6px; margin-bottom: 8px; background: #fafbfe; }
.btn-row .btn-row-item { margin-bottom: 4px; }
.btn-row .btn-row-item:last-child { margin-bottom: 0; }
.btn-row .p-btn-style { flex: 0 0 auto; max-width: 42%; }
.btn-off { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #7a8499; white-space: nowrap; }
.btn-off input { width: auto; }

/* вид кнопки на карточке — как её увидит подписчик */
.df-btn.st-primary { background: #2e6bff; border-color: #2e6bff; color: #fff; }
.df-btn.st-success { background: #12a150; border-color: #12a150; color: #fff; }
.df-btn.st-danger { background: #d33; border-color: #d33; color: #fff; }
.df-btn.st-off { opacity: .45; text-decoration: line-through; }

/* меню блоков при протягивании связи в пустое место */
.link-menu { position: fixed; z-index: 950; background: #fff; border: 1px solid #d6dbe6;
  border-radius: 10px; box-shadow: 0 10px 30px rgba(16,23,40,.18); padding: 6px; min-width: 190px; }
.link-menu-head { font-size: 11px; text-transform: uppercase; color: #7a8499; padding: 4px 8px 6px; }
.link-menu-item { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.link-menu-item:hover { background: #eef3ff; color: #2e6bff; }

/* пометка на карточке: текст уходит раньше вложения */
.df-order { padding: 2px 12px 0; font-size: 10.5px; color: #e8a13c; font-weight: 600; }

/* кнопки в форме рассылки */
.bc-buttons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.bc-btn-row { border: 1px solid #e3e8f0; border-radius: 10px; padding: 8px; background: #fafbfe; }
.bc-btn-row .row1, .bc-btn-row .row2 { display: flex; gap: 6px; align-items: center; }
.bc-btn-row .row1 { margin-bottom: 6px; }
.bc-btn-row input, .bc-btn-row select { min-width: 0; }
.bc-btn-row .bc-label { flex: 1; }
.bc-btn-row .bc-action { flex: 1; }
.bc-btn-row .bc-kind { flex: 0 0 128px; }

/* визуальный редактор текста */
.rt { border: 1px solid #d6dbe6; border-radius: 8px; background: #fff; overflow: hidden; }
.rt-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 5px 6px; background: #f8fafc; border-bottom: 1px solid #eef1f7; }
.rt-btn { min-width: 28px; height: 26px; padding: 0 7px; border: 1px solid transparent; background: none;
  border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; color: #1c2433; }
.rt-btn:hover { background: #e8eefc; border-color: #d3e0ff; color: #2e6bff; }
/* включённое оформление видно на кнопке: иначе непонятно, что его надо выключить */
.rt-btn.on { background: #2e6bff; border-color: #2e6bff; color: #fff; }
.rt-btn.on:hover { background: #1f56db; color: #fff; }
.rt-btn code { font-size: 11px; }
.rt-area { min-height: 120px; max-height: 320px; overflow-y: auto; padding: 10px 12px;
  font-size: 14px; line-height: 1.5; outline: none; word-break: break-word; }
.rt-area:empty::before { content: 'Текст сообщения…'; color: #99a3b5; }
.rt-area a { color: #2e6bff; }
.rt-area code { background: #f0f3f8; border-radius: 4px; padding: 1px 4px; font-size: 13px; }
.rt-area .tg-spoiler { background: #444; color: transparent; border-radius: 3px; }
.rt-area .tg-spoiler:hover { color: inherit; background: #e8eefc; }
.props .rt-area { min-height: 90px; }

/* конструктор условий в узкой панели свойств — в столбик */
.props .seg-row { flex-wrap: wrap; gap: 4px; }
.props .seg-row .seg-field, .props .seg-row .seg-op, .props .seg-row .seg-value { min-width: 0; width: 100%; }
.props .seg-head { flex-wrap: wrap; gap: 6px; }

/* вход через Telegram на экране логина */
.tg-login { margin-top: 16px; }
.tg-or { position: relative; color: #99a3b5; font-size: 12px; margin-bottom: 12px; }
.tg-or::before, .tg-or::after { content: ''; position: absolute; top: 50%; width: 38%;
  height: 1px; background: #e3e8f0; }
.tg-or::before { left: 0; }
.tg-or::after { right: 0; }
#tg-login-widget { display: flex; justify-content: center; }
#tg-link-modal { text-align: left; }
#tg-link-widget { display: flex; justify-content: center; margin-top: 10px; }

/* заголовок и пояснение над отдельной таблицей (цепочки в списке воронок) */
.list-title { margin: 22px 0 4px; font-size: 15px; }
.list-note { margin: 0 0 10px; font-size: 12.5px; color: #7a8499; max-width: 620px; }

/* условия про момент срабатывания: дни недели пилюлями и сноска про пояс */
.seg-days { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg-day { cursor: pointer; user-select: none; }
.seg-day.on { background: #2e6bff; border-color: #2e6bff; color: #fff; }
.seg-dash { color: #7a8499; padding: 0 2px; }
.seg-tz { margin: 8px 0 2px; font-size: 12.5px; color: #7a8499; }

/* превью загруженных скриншотов воронки в AI-сборке */
.ai-screens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ai-screen { position: relative; width: 150px; }
.ai-screen img { width: 150px; height: 100px; object-fit: cover;
  border: 1px solid #e3e8f2; border-radius: 8px; background: #f8fafc; }
.ai-screen-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; background: #e14b4b; color: #fff; font-size: 12px; line-height: 20px;
  text-align: center; cursor: pointer; }
.ai-screen-name { font-size: 11px; color: #7a8499; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* номер шага на карточке сообщения — тот же, что колонка Step N в выгрузке */
.df-step { float: right; font-size: 11px; font-weight: 600; color: #2e6bff;
  background: #eef3ff; border-radius: 10px; padding: 1px 7px; margin-left: 6px; }
.df-step:empty { display: none; }
.df-step.over { color: #a05a00; background: #fff3e0; }
.step-no { display: inline-block; min-width: 18px; margin-right: 6px; padding: 0 5px;
  font-size: 11px; font-weight: 600; text-align: center; color: #2e6bff;
  background: #eef3ff; border-radius: 9px; }
.step-no.over { color: #a05a00; background: #fff3e0; }

/* ---------- языки, которые пишутся справа налево (арабский, иврит) ----------
   unicode-bidi: plaintext определяет направление для каждой строки отдельно,
   поэтому смешанный текст — арабский рядом с латиницей — не переворачивается
   целиком. text-align: start прижимает строку к нужному краю. */
.rt-area,
.drawflow .drawflow-node .df-sub,
.df-order,
.msg-bubble,
.seg-value,
#p-note,
#ai-spec {
  unicode-bidi: plaintext;
  text-align: start;
}
/* У подписи кнопки выравнивание своё — по центру, как на настоящей кнопке
   Telegram. Направление всё равно определяется по содержимому, поэтому
   арабский внутри читается справа налево. */
.drawflow .drawflow-node .df-btn { unicode-bidi: plaintext; }