@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/golos-text-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/golos-text-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Токены: те же имена, что у общих стилей, — их правила перекрашиваются сами ── */
.potok {
  --sunken: #f2f5fa;
  --surface: #ffffff;
  --line: #e0e6ef;
  --line-soft: #eaeef5;
  --wash: #f6f8fc;
  --current: #38cdf3;
  --potok-font: "Golos Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --potok-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --potok-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow: 0 1px 2px rgba(14, 23, 38, 0.04), 0 14px 30px -16px rgba(22, 46, 96, 0.2);
  --potok-shadow-1: 0 1px 1px rgba(14, 23, 38, 0.04), 0 2px 6px -2px rgba(14, 23, 38, 0.07);
  --potok-shadow-3: 0 2px 4px rgba(14, 23, 38, 0.05), 0 30px 60px -28px rgba(22, 46, 96, 0.34);
  --potok-glow: 0 12px 28px -12px rgba(47, 111, 235, 0.75);
  font-family: var(--potok-font);
  background: var(--sunken);
  -webkit-font-smoothing: antialiased;
}
/* Свет на фоне: два мягких пятна — синий бренда и «ток» */
.potok::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(56, 205, 243, 0.12), transparent 62%),
    radial-gradient(900px 560px at 18% -14%, rgba(47, 111, 235, 0.09), transparent 60%);
}
.potok h1 { font-weight: 700; letter-spacing: -0.026em; text-wrap: balance; }
.potok h2 { letter-spacing: -0.01em; }

/* ── Кнопки: все — таблетки; цвет остаётся у варианта (опасная, «Открыть в MAX» и др.) ── */
.potok button, .potok .btn {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  transition: transform 120ms var(--potok-ease), box-shadow 220ms var(--potok-ease), background 220ms var(--potok-ease), border-color 220ms var(--potok-ease);
}
.potok button:active, .potok .btn:active { transform: scale(0.97); }
/* Главная — только кнопка без варианта и без роли: синяя таблетка с бликом и свечением. Кнопки с ролью
   (вкладки «ИИ-помощник», «Шаблоны», «JSON» у конструктора чат-бота) — не главные: прежде они
   становились синими таблетками, а текст невыбранных почти пропадал (обход чат-ботов 01.11.2026).
   :where — чтобы правило не стало сильнее частных («Выйти» в меню, примеры ИИ-помощника) */
.potok a[class="btn"], .potok a[class="btn small"], .potok .btn.beam, .potok button:not([class]):where(:not([role])), .potok button[class="small"] {
  border-color: transparent;
  background: linear-gradient(180deg, #4a85f3 0%, #2f6feb 52%, #2963dd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(10, 40, 120, 0.25), 0 1px 2px rgba(14, 23, 38, 0.14), var(--potok-glow);
}
.potok a[class="btn"]:hover, .potok a[class="btn small"]:hover, .potok .btn.beam:hover, .potok button:not([class]):where(:not([role])):hover, .potok button[class="small"]:hover {
  background: linear-gradient(180deg, #5590f6 0%, #3576ef 52%, #2b66e0 100%);
}
.potok .btn.off, .potok button.off { border-color: var(--line); box-shadow: var(--potok-shadow-1); }
.potok .btn.off:hover, .potok button.off:hover { border-color: #ccd6e5; box-shadow: var(--shadow); }
.potok .me button, .potok .me button:hover { background: none; box-shadow: none; border-radius: 8px; }
.potok .ag-examples button, .potok .ag-examples button:hover { background: var(--surface); color: var(--fg); border-color: var(--line); box-shadow: var(--potok-shadow-1); border-radius: 14px; }
.potok .btn .fx, .potok button .fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: -1; }
.potok .ripple {
  position: absolute;
  left: var(--rx);
  top: var(--ry);
  width: var(--rs);
  height: var(--rs);
  margin: calc(var(--rs) / -2) 0 0 calc(var(--rs) / -2);
  border-radius: 50%;
  background: #fff;
  opacity: 0.32;
  transform: scale(0);
  animation: potok-ripple 620ms var(--potok-ease) forwards;
}
.potok .btn.off .ripple, .potok button.off .ripple { background: var(--brand); opacity: 0.16; }
@keyframes potok-ripple { to { transform: scale(1); opacity: 0; } }

/* ── Поверхности: панели белые, тень по роли, линия тише ── */
.potok .card, .potok .block, .potok .rows > li, .potok table.props, .potok .desk-panel, .potok .desk-attention, .potok .desk-gauges {
  border-color: var(--line-soft);
  box-shadow: var(--shadow);
}
.potok .card, .potok .block { border-radius: 20px; }
.potok .rows > li { border-radius: 16px; }
.potok .desk-panel, .potok .desk-attention, .potok .desk-gauges { border-radius: 22px; }
.potok .empty { border-radius: 20px; border-color: #d3dbe7; }
.potok .pill { padding: 0.1rem 0.6rem; }

/* Поля: мягкая подложка, при вводе — свечение */
.potok .block input[type=text], .potok .block input[type=url], .potok .block input:not([type]), .potok .bot-add-form input[type=password], .potok .block select, .potok .block textarea {
  border-color: #cfd7e3;
  border-radius: 12px;
  background-color: var(--wash);
  transition: border-color 220ms var(--potok-ease), box-shadow 220ms var(--potok-ease), background 220ms var(--potok-ease);
}
.potok .block input:focus, .potok .block select:focus, .potok .block textarea:focus {
  outline: none;
  border-color: #8fb1f5;
  background-color: var(--surface);
  box-shadow: 0 0 0 4px rgba(47, 111, 235, 0.14), 0 6px 18px -10px rgba(47, 111, 235, 0.6);
}
/* Поля любого вида и вне панелей .block — числа, время, даты, поля «Постов» (обход внутренних
   экранов 01.11.2026: они оставались белыми с тёмной рамкой). :where — чтобы своё оформление
   поиска, отбора и конструктора оставалось сильнее общего правила. */
.potok main input:where([type=text]), .potok main input:where([type=url]), .potok main input:where([type=email]), .potok main input:where([type=tel]), .potok main input:where([type=number]), .potok main input:where([type=time]), .potok main input:where([type=date]), .potok main input:where([type=datetime-local]), .potok main input:where([type=password]), .potok main input:where(:not([type])), .potok main select, .potok main textarea {
  border-color: #cfd7e3;
  border-radius: 12px;
  background-color: var(--wash);
}
.potok main input:where([type=text]):focus, .potok main input:where([type=url]):focus, .potok main input:where([type=email]):focus, .potok main input:where([type=tel]):focus, .potok main input:where([type=number]):focus, .potok main input:where([type=time]):focus, .potok main input:where([type=date]):focus, .potok main input:where([type=datetime-local]):focus, .potok main input:where([type=password]):focus, .potok main input:where(:not([type])):focus, .potok main select:focus, .potok main textarea:focus {
  outline: none;
  border-color: #8fb1f5;
  background-color: var(--surface);
  box-shadow: 0 0 0 4px rgba(47, 111, 235, 0.14);
}
/* Списки — своей стрелкой: без appearance: none Safari рисует серую системную плашку и не слушает рамку */
.potok main select:where(:not([multiple])) { padding-right: 2.3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2398a3b5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 0.75rem; -webkit-appearance: none; appearance: none; }
/* Невидимая кнопка «Сохранить» под Enter (правила копии, редактор сценария чат-бота): правило кнопок «Потока»
   (position: relative) вытаскивало её на вид — синей чертой или пустым местом над формой */
.potok button.invisible-button, .potok button.second-button { position: absolute; }
/* Вкладки — прямоугольные, как задумано: черта выбранной снизу; закругление «Потока» гнуло её концы */
.potok button[role="tab"] { border-radius: 0; }
/* Переключатели «Уведомлений» и «Комментариев» — как переключатель «Потока» */
.potok .nt-toggle span[aria-hidden] { background: #d0d8e4; box-shadow: inset 0 1px 2px rgba(14, 23, 38, 0.16); transition: background 220ms var(--potok-ease); }
.potok .nt-toggle span[aria-hidden]::after { box-shadow: 0 1px 3px rgba(14, 23, 38, 0.3); transition: transform 360ms var(--potok-spring); }
.potok .nt-toggle input:checked + span[aria-hidden] { background: linear-gradient(135deg, #2f6feb, #38cdf3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 14px -8px rgba(47, 111, 235, 0.9); }
.potok .nt-toggle input:disabled + span[aria-hidden] { opacity: 0.55; }
.potok .nt-toggle input:focus-visible + span[aria-hidden] { outline: 2px solid var(--brand); outline-offset: 3px; }
/* «Правила копии» и «Расписание»: каждый раздел — своей панелью, «Сохранить» — стеклянной полосой внизу, как у карточки маршрута */
.potok form.block.rules-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.potok form.block.rules-screen > fieldset { display: flow-root; min-width: 0; margin: 0; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--line-soft); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.potok form.block.rules-screen > fieldset > legend + * { clear: both; }
.potok form.block.rules-screen > fieldset > * + * { margin-top: 0.7rem; }
/* Число и время у «Расписания» — как прочие поля: прежнее правило .block input[type=…] сильнее общего */
.potok .block input[type=time], .potok .block input[type=number] { border-color: #cfd7e3; border-radius: 12px; background-color: var(--wash); }
.potok .block input[type=time]:focus, .potok .block input[type=number]:focus { outline: none; border-color: #8fb1f5; background-color: var(--surface); box-shadow: 0 0 0 4px rgba(47, 111, 235, 0.14); }
.potok form.block.rules-screen > fieldset > legend { float: left; width: 100%; margin: 0 0 0.2rem; padding: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
.potok form.block.rules-screen > fieldset > legend::after { display: none; }
.potok form.block.rules-screen > .form-bar:last-child { margin: 0; padding: 0.55rem 0.55rem 0.55rem 1.1rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.93); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--potok-shadow-3); }
.potok .block fieldset.rule-row { border-color: var(--line-soft); border-radius: 16px; background: var(--wash); }
.potok .block fieldset.rule-row.new { border-color: #cbd5e4; background: rgba(255, 255, 255, 0.7); }
@media (max-width: 45.99rem) {
  .potok form.block.rules-screen > fieldset { padding: 1rem 0.9rem 1.05rem; border-radius: 18px; }
}

/* ── Каркас: стеклянное меню, верхняя строка и нижняя панель телефона ── */
.potok .topbar { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(16px) saturate(1.2); border-bottom-color: var(--line-soft); }
/* Нижняя панель — стеклом только там, где она внизу: на компьютере меню лежит в боковой колонке без подложки */
.potok.mini .tabs { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(18px) saturate(1.3); border-top-color: var(--line-soft); }
.potok .brand { font-weight: 700; letter-spacing: -0.02em; }
.potok .brand-mark { position: relative; display: block; width: 28px; height: 28px; flex: 0 0 auto; }
.potok .brand-mark > svg { position: absolute; inset: 0; transition: opacity 0.5s; }
.potok .brand-mark > canvas { position: absolute; left: -12px; top: -12px; width: 52px; height: 52px; }
.potok .brand-mark.live > svg { opacity: 0; }
.potok .ava { background: linear-gradient(140deg, #4f8bff, #2f6feb 60%, #6a4cff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.potok .tabs a b { background: #e5484d; box-shadow: 0 4px 10px -4px rgba(229, 72, 77, 0.8); }
@media (max-width: 51.99rem) {
  .potok .tabs { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(18px) saturate(1.3); border-top-color: var(--line-soft); }
  .potok .tabs a.here { box-shadow: none; color: var(--brand-ink); }
  .potok .tabs a.here::before { content: ""; position: absolute; top: 0.2rem; left: 50%; width: 3.3rem; height: 2rem; transform: translateX(-50%); border-radius: 999px; background: var(--brand-soft); z-index: -1; }
}
.potok.mini .tabs a.here { color: var(--brand-ink); }
.potok.mini .tabs a.here::before { content: ""; position: absolute; top: 0.2rem; left: 50%; width: 3.3rem; height: 2rem; transform: translateX(-50%); border-radius: 999px; background: var(--brand-soft); z-index: -1; }
@media (min-width: 52rem) {
  .potok:not(.mini) .side { background: rgba(255, 255, 255, 0.66); backdrop-filter: blur(18px) saturate(1.2); border-right-color: var(--line-soft); }
  .potok:not(.mini) .side .brand { padding: 1.15rem 1.1rem 1rem; gap: 0.75rem; font-size: 1.1rem; }
  .potok:not(.mini) .side .brand-mark { width: 36px; height: 36px; }
  .potok:not(.mini) .side .brand-mark > svg { width: 36px; height: 36px; }
  .potok:not(.mini) .side .brand-mark > canvas { left: -14px; top: -14px; width: 64px; height: 64px; }
  .potok:not(.mini) .tabs a { border-radius: 12px; color: #344155; transition: background 220ms var(--potok-ease), color 220ms var(--potok-ease); }
  .potok:not(.mini) .tabs a:hover { background: rgba(14, 23, 38, 0.04); }
  .potok:not(.mini) .tabs a svg { color: #98a3b5; transition: color 220ms var(--potok-ease); }
  .potok:not(.mini) .tabs a.here { background: var(--surface); color: var(--brand-ink); box-shadow: var(--potok-shadow-1); view-transition-name: potok-here; }
  .potok:not(.mini) .tabs a.here svg { color: var(--brand); }
  /* Заголовки групп меню — строчными: прописные «ПЕРЕСЫЛКА» читаются как ярлык, а не как подпись */
  .potok:not(.mini) .tabs-group { color: #98a3b5; text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 600; }
  .potok:not(.mini) .side .me { border-top-color: var(--line-soft); }
}

/* ── Огонёк со следом по контуру: SVG поверх рамки, длины следа — из скрипта ── */
.potok .beam { position: relative; }
.potok .beam-svg { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; z-index: 2; }
.potok .beam-svg rect { fill: none; stroke-linecap: round; animation: potok-beam var(--beam-t, 6s) linear infinite; }
.potok .beam-svg .b-glow { stroke: var(--current); stroke-width: 7; opacity: 0.42; filter: blur(3.5px); }
.potok .beam-svg .b-tail { stroke: var(--brand); stroke-width: 1.6; opacity: 0.3; }
.potok .beam-svg .b-mid { stroke: var(--current); stroke-width: 2; opacity: 0.8; }
.potok .beam-svg .b-head { stroke: #fff; stroke-width: 2.6; }
.potok .btn .beam-svg .b-tail { stroke: #c9eeff; opacity: 0.55; }
.potok .btn .beam-svg .b-glow { opacity: 0.6; }
@keyframes potok-beam { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: calc(var(--len) - var(--p)); } }

/* Свет под курсором */
.potok .lit { position: relative; isolation: isolate; }
.potok .lit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, -400px) var(--my, -400px), rgba(56, 205, 243, 0.12), rgba(47, 111, 235, 0.05) 38%, transparent 66%);
  opacity: 0;
  transition: opacity 0.35s var(--potok-ease);
  pointer-events: none;
}
.potok .lit:hover::before { opacity: 1; }
.potok .bump { display: inline-block; animation: potok-bump 520ms var(--potok-spring); }
@keyframes potok-bump { 35% { transform: translateY(-5px) scale(1.06); color: var(--brand); } }

/* ── «Обзор»: стол в «Потоке» ── */
.potok .desk > * { animation: potok-rise 520ms var(--potok-ease) backwards; }
.potok .desk > :nth-child(2) { animation-delay: 55ms; }
.potok .desk > :nth-child(3) { animation-delay: 110ms; }
.potok .desk > :nth-child(4) { animation-delay: 165ms; }
.potok .desk > :nth-child(5) { animation-delay: 220ms; }
.potok .desk > :nth-child(6) { animation-delay: 275ms; }
@keyframes potok-rise { from { opacity: 0; transform: translateY(10px); } }
/* Шапка стола держит прибитую к низу полосу «Создать маршрут». Сдвиг шапки делает её опорой
   для прибитого: полоса стояла вверху, пока шла анимация, и прыгала вниз (владелец 01.11.2026).
   Шапка только проявляется — прозрачность опорой для прибитого не делает. */
.potok .desk > .desk-head { animation-name: potok-fade; }
@keyframes potok-fade { from { opacity: 0; } }
.potok .desk h1 { font-size: 2.2rem; font-weight: 700; }
.potok .desk-lead { color: #344155; }
.potok .desk-state.is-ok .desk-lamp { animation: potok-breathe 3.2s ease-in-out infinite; }
@keyframes potok-breathe { 50% { filter: drop-shadow(0 0 10px rgba(15, 122, 78, 0.35)); } }
.potok .desk-attention, .potok .desk-gauges { background: var(--surface); }
.potok .desk-alert-body { border-radius: 16px; }
.potok .desk-gauge-value b { font-size: 2.6rem; font-weight: 700; }
.potok .desk-strip { gap: 4px; height: 0.5rem; }
.potok .desk-strip i { border-radius: 999px; transform-origin: left; animation: potok-grow 600ms var(--potok-ease) backwards 200ms; }
.potok .desk-strip i:nth-child(2) { animation-delay: 270ms; }
.potok .desk-strip i:nth-child(3) { animation-delay: 340ms; }
.potok .desk-strip i:nth-child(4) { animation-delay: 410ms; }
.potok .desk-strip i:nth-child(5) { animation-delay: 480ms; }
.potok .desk-strip i:nth-child(n+6) { animation-delay: 550ms; }
.potok .desk-split { height: 0.5rem; border-radius: 999px; }
.potok .desk-split i { transform-origin: left; animation: potok-grow 700ms var(--potok-ease) backwards 240ms; }
@keyframes potok-grow { from { transform: scaleX(0); } }
.potok .desk-foot { border-top-color: var(--line); }

/* Значок площадки плиткой */
.potok-glyph { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: 0 0 auto; border-radius: 0.6rem; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px -6px rgba(14, 23, 38, 0.5); }
.potok-glyph svg { width: 1.1rem; height: 1.1rem; }
.potok-glyph b { font-size: 0.9rem; }
.potok-glyph.p-telegram { background: linear-gradient(150deg, #37b4ee, #1c8fd0); }
.potok-glyph.p-max { background: linear-gradient(140deg, #2f86ff, #5b55ff 55%, #8b40f3); }
.potok-glyph.p-vk { background: linear-gradient(150deg, #2c86ff, #0a68e6); }
.potok-glyph.p-ok { background: linear-gradient(150deg, #ffa53a, #ee8208); }

/* ── Маршруты проводами ── */
.potok .flow-panel { padding: 0.95rem 0.6rem 0.55rem; }
.potok .flow-panel > .desk-panel-head { padding: 0 0.55rem; }
.potok .flow-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, 0.8fr) minmax(0, 1fr) 7rem; gap: 0 1rem; padding: 0.55rem 0.8rem 0.15rem; color: #98a3b5; font-size: 0.78rem; font-weight: 600; }
.potok .flow-cols span:last-child { text-align: right; }
.potok .flow-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
.potok .flow-group { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, 0.8fr) minmax(0, 1fr) 7rem; gap: 0.35rem 1rem; align-items: center; padding: 0.55rem 0.7rem; border-radius: 18px; transition: background 220ms var(--potok-ease); }
.potok .flow-group:hover { background: var(--wash); }
.potok .flow-src { grid-column: 1; grid-row: 1; }
.potok .flow-dst { grid-column: 3; }
.potok .flow-meta { grid-column: 4; display: grid; justify-items: end; text-align: right; line-height: 1.15; font-variant-numeric: tabular-nums; }
.potok .flow-meta b { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.potok .flow-meta small { color: var(--muted); font-size: 0.76rem; }
.potok .flow-meta small.is-bad { color: var(--bad); font-weight: 600; }
.potok .flow-off { color: #98a3b5; font-size: 0.85rem; font-weight: 600; }
@media (min-width: 46rem) {
  .potok .flow-group.n2 .flow-src { grid-row: 1 / span 2; }
  .potok .flow-group.n3 .flow-src { grid-row: 1 / span 3; }
  .potok .flow-group.n4 .flow-src { grid-row: 1 / span 4; }
  .potok .flow-group.n5 .flow-src { grid-row: 1 / span 5; }
  .potok .flow-group.n6 .flow-src { grid-row: 1 / span 6; }
}
.potok .flow-chip { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.65rem; min-width: 0; padding: 0.45rem 0.75rem 0.45rem 0.45rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--potok-shadow-1); color: inherit; text-decoration: none; transition: box-shadow 220ms var(--potok-ease), border-color 220ms var(--potok-ease), transform 220ms var(--potok-ease); }
.potok a.flow-chip:hover { border-color: #c9d5e8; box-shadow: var(--shadow); transform: translateY(-1px); }
.potok .flow-chip-text { display: grid; min-width: 0; line-height: 1.3; }
.potok .flow-chip-text b { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.potok .flow-chip-text small { color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.potok .flow-dst.is-off { opacity: 0.62; }
.potok .flow-chip.hit { animation: potok-hit 900ms var(--potok-ease); }
@keyframes potok-hit {
  0% { box-shadow: var(--potok-shadow-1), 0 0 0 0 rgba(56, 205, 243, 0.55); border-color: #9fdcf3; }
  100% { box-shadow: var(--potok-shadow-1), 0 0 0 12px rgba(56, 205, 243, 0); }
}
/* Провода выше подсветки строки, ниже самих чатов */
.potok .potok-wires { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity 220ms var(--potok-ease); }
.potok .potok-wires path { fill: none; stroke-linecap: round; }
.potok .potok-wires .w-base { stroke: #d5dde9; stroke-width: 2; }
.potok .potok-wires .w-live { stroke-width: 2.4; }
.potok .potok-wires .w-glow { stroke-width: 8; opacity: 0.2; filter: blur(3px); }
.potok .potok-wires .w-flow { stroke: #8fe6ff; stroke-width: 2.8; stroke-dasharray: 30px 640px; opacity: 0.9; filter: drop-shadow(0 0 3px rgba(56, 205, 243, 0.9)); animation: potok-flow 5s linear infinite; }
@keyframes potok-flow { from { stroke-dashoffset: 30px; } to { stroke-dashoffset: -640px; } }
.potok .potok-wires .w-bad { stroke: #e5484d; stroke-width: 2; stroke-dasharray: 2 6; }
.potok .potok-wires .w-off { stroke: #c9d1dd; stroke-width: 2; stroke-dasharray: 1 7; }
.potok .potok-wires .w-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: potok-draw 1100ms var(--potok-ease) var(--d, 0ms) forwards; }
@keyframes potok-draw { to { stroke-dashoffset: 0; } }
.potok .potok-wires .arrow { fill: #c3ccd9; }
.potok .potok-wires .arrow.live { fill: var(--brand); }
.potok .potok-wires .arrow, .potok .potok-wires .w-flow { transition: opacity 0.5s var(--potok-ease); }
.potok .potok-wires.drawing .arrow, .potok .potok-wires.drawing .w-flow { opacity: 0; }
.potok .potok-wires .pulse-glow { fill: var(--current); opacity: 0.5; filter: blur(3px); }
.potok .potok-wires .pulse-core { fill: #fff; stroke: var(--brand); stroke-width: 1.6; }
.potok .potok-wires .pulse-trail { fill: var(--current); }
.potok .flow-groups:hover .flow-group:not(:hover) .potok-wires { opacity: 0.4; }
.potok .flow-group:hover .potok-wires .w-live { stroke-width: 3.2; }
.potok .flow-group:hover .potok-wires .w-glow { opacity: 0.38; }
.potok .wire-mark { position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 3; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem 0.15rem 0.35rem; border: 1px solid #f6c9cb; border-radius: 999px; background: var(--surface); box-shadow: var(--potok-shadow-1); color: var(--bad); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.potok .wire-mark svg { width: 0.95rem; height: 0.95rem; }
@media (max-width: 45.99rem) {
  .potok .flow-cols { display: none; }
  .potok .flow-group { grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 0.45rem 0.6rem; padding: 0.55rem 0.35rem; }
  .potok .flow-src { grid-column: 1 / -1; }
  .potok .flow-dst { grid-column: 2; }
  .potok .flow-meta { grid-column: 3; }
  .potok .wire-mark { display: none; }
}

/* ── «Маршруты»: дерево проводов от источника, переключатель в строке (этап 3) ── */
.potok .potok-glyph.big { width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; }
.potok .potok-glyph.big svg { width: 1.4rem; height: 1.4rem; }
.potok .potok-lead { max-width: 46rem; margin: -0.2rem 0 1.1rem; color: var(--muted); }
.potok .potok-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 0 0 1.1rem; animation: potok-rise 420ms var(--potok-ease) backwards; }
.potok .potok-search { position: relative; flex: 1 1 15rem; max-width: 24rem; }
.potok .potok-search svg { position: absolute; left: 0.95rem; top: 50%; width: 1.05rem; height: 1.05rem; transform: translateY(-50%); color: #8a95a8; pointer-events: none; }
.potok .potok-search input { width: 100%; min-height: 2.6rem; padding: 0.5rem 1rem 0.5rem 2.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--potok-shadow-1); color: var(--fg); font: inherit; appearance: none; transition: border-color 220ms var(--potok-ease), box-shadow 220ms var(--potok-ease); }
.potok .potok-search input:focus { outline: none; border-color: #8fb1f5; box-shadow: 0 0 0 4px rgba(47, 111, 235, 0.14), 0 6px 18px -10px rgba(47, 111, 235, 0.6); }
.potok .potok-seg { position: relative; display: inline-flex; gap: 0.1rem; padding: 0.22rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--potok-shadow-1); }
.potok .potok-seg-btn { z-index: 1; display: inline-flex; align-items: center; min-height: 0; padding: 0.42rem 0.85rem; border: 0; background: none; box-shadow: none; color: var(--muted); font-size: 0.88rem; white-space: nowrap; }
.potok .potok-seg-btn:hover { background: none; color: var(--fg); }
.potok .potok-seg-btn[aria-pressed="true"] { color: var(--fg); }
.potok .potok-seg-btn span { margin-left: 0.4rem; color: #98a3b5; font-variant-numeric: tabular-nums; }
.potok .potok-seg-btn[data-value="bad"] span:not(:empty) { color: var(--bad); }
.potok .potok-seg-ind { position: absolute; top: 0.22rem; bottom: 0.22rem; left: var(--seg-x, 0.22rem); width: var(--seg-w, 0); border-radius: 999px; background: #edf2fc; box-shadow: inset 0 0 0 1px #d6e2fa; transition: left 360ms var(--potok-spring), width 360ms var(--potok-spring); }
.potok .potok-routes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.potok .potok-rset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.potok .potok-rset + .potok-rset, .potok .potok-rset + .potok-rgroup { margin-top: 0.6rem; }
/* Окно «Настроить группу» и «В группу…» — во всю ширину строки, как у прежнего списка (.row-actions) */
.potok .potok-rset-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem; padding: 0 0.2rem; }
.potok .potok-rset-head h2 { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.08rem; }
.potok .potok-rset-head .group-sign { width: 1.3rem; height: 1.3rem; color: var(--brand); }
.potok .potok-rset-tools { margin-left: auto; }
.potok .potok-tag { display: inline-flex; align-items: center; padding: 0.12rem 0.62rem; border-radius: 999px; background: #eef2f8; color: var(--muted); font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.potok .potok-rgroup { position: relative; padding: 1rem 1.1rem 0.85rem; border: 1px solid var(--line-soft); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); animation: potok-rise 520ms var(--potok-ease) backwards; }
.potok .potok-rgroup:nth-child(2) { animation-delay: 70ms; }
.potok .potok-rgroup:nth-child(3) { animation-delay: 140ms; }
.potok .potok-rgroup:nth-child(n+4) { animation-delay: 210ms; }
/* Список, пришедший после переключения, встаёт на место без появления */
.potok .potok-routes.settled .potok-rgroup { animation: none; }
.potok .potok-rgroup-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.45rem; }
.potok .potok-rsrc { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.potok .potok-rsrc .flow-chip-text b { font-size: 1rem; }
/* Названия чатов в списке — до двух строк, а не обрезкой: по ним маршрут и узнают */
.potok .potok-rsrc .flow-chip-text b, .potok .potok-rrow .flow-chip-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.25; }
.potok .potok-rgroup-head .potok-tag { margin-left: auto; }
.potok .potok-rrows { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.potok .potok-rrow { display: grid; grid-template-columns: 2.75rem minmax(0, 17rem) minmax(0, 1fr) auto; align-items: center; gap: 0.2rem 0.9rem; min-height: 3.7rem; padding: 0.3rem 0.5rem 0.3rem 0; border-radius: 14px; transition: background 220ms var(--potok-ease); }
.potok .potok-rrow:hover { background: var(--wash); }
.potok .potok-rrow-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.potok .potok-rrow-cover:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.potok .potok-rrow > .flow-chip { grid-column: 2; pointer-events: none; }
.potok .potok-rrow:hover > .flow-chip { border-color: #c9d5e8; box-shadow: var(--shadow); }
.potok .flow-dst.is-bad { border-color: #f1c7c9; }
.potok .potok-rrow-state { grid-column: 3; display: grid; gap: 0.1rem; min-width: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.35; }
.potok .potok-rrow-state > b { overflow: hidden; color: var(--fg); font-size: 0.92rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.potok .potok-rrow-state .is-bad { color: var(--bad); font-weight: 600; }
.potok .potok-rrow-state .is-warn { color: var(--warn); font-weight: 600; }
.potok .potok-rrow-state .pill { justify-self: start; }
.potok .potok-rrow.is-off .potok-rrow-state { color: #8a95a8; }
.potok .potok-rrow-switch { grid-column: 4; position: relative; z-index: 3; display: flex; margin: 0; }
.potok .potok-switch { display: inline-block; flex: 0 0 auto; width: 2.9rem; height: 1.7rem; min-height: 0; padding: 0; border: 0; background: #d0d8e4; box-shadow: inset 0 1px 2px rgba(14, 23, 38, 0.16); cursor: pointer; }
.potok .potok-switch:hover { background: #c4cdda; }
.potok .potok-switch::before { content: ""; position: absolute; inset: -0.55rem -0.35rem; }
.potok .potok-switch::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(14, 23, 38, 0.3); transition: transform 360ms var(--potok-spring); }
.potok .potok-switch[aria-checked="true"], .potok .potok-check:checked + .potok-switch { background: linear-gradient(135deg, #2f6feb, #38cdf3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 14px -8px rgba(47, 111, 235, 0.9); }
.potok .potok-switch[aria-checked="true"]::after, .potok .potok-check:checked + .potok-switch::after { transform: translateX(1.2rem); }
.potok .potok-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.potok .potok-switch[aria-busy="true"] { cursor: progress; }
.potok .potok-rgroup-foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.4rem; padding-left: 3.65rem; }
.potok .potok-radd { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0.35rem 0.95rem 0.35rem 0.75rem; border: 1px dashed #b8c7e2; border-radius: 12px; background: rgba(255, 255, 255, 0.7); color: var(--brand-ink); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: border-color 220ms var(--potok-ease), background 220ms var(--potok-ease); }
.potok .potok-radd::before { content: "+"; font-size: 1.1rem; line-height: 1; }
.potok .potok-radd:hover { border-color: var(--brand); background: var(--brand-soft); }
.potok .potok-wires .w-new { stroke: #b8c7e2; stroke-width: 1.6; stroke-dasharray: 3 5; }
.potok .potok-wires .w-heal { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: potok-draw 900ms var(--potok-ease) forwards; }
.potok .potok-filter-empty { margin: 0; padding: 1.4rem; border: 1px dashed #d3dbe7; border-radius: 20px; color: var(--muted); text-align: center; }
.potok .potok-toasts { position: fixed; left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); z-index: 80; display: grid; justify-items: center; width: min(34rem, calc(100vw - 2rem)); transform: translateX(-50%); pointer-events: none; }
.potok .potok-toast { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0.6rem 0.6rem 1rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--potok-shadow-3); color: var(--fg); font-size: 0.92rem; line-height: 1.35; pointer-events: auto; -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); animation: potok-toast-in 380ms var(--potok-spring); }
.potok .potok-toast::before { content: ""; flex: 0 0 auto; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--current); box-shadow: 0 0 0 4px rgba(56, 205, 243, 0.18); }
.potok .potok-toast.is-off::before { background: #98a3b5; box-shadow: 0 0 0 4px rgba(152, 163, 181, 0.2); }
.potok .potok-toast.is-bad::before { background: var(--bad); box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.14); }
.potok .potok-toast.leaving { animation: potok-toast-out 220ms var(--potok-ease) forwards; }
.potok .potok-toast-undo { flex: 0 0 auto; min-height: 2.25rem; padding: 0.35rem 0.95rem; border: 1px solid #d6e2fa; background: var(--brand-soft); box-shadow: none; color: var(--brand-ink); font-size: 0.88rem; }
.potok .potok-toast-undo:hover { border-color: var(--brand); background: var(--brand-soft); }
@keyframes potok-toast-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes potok-toast-out { to { opacity: 0; transform: translateY(10px); } }
@media (max-width: 51.99rem) {
  .potok .potok-toasts { top: calc(4.1rem + env(safe-area-inset-top, 0px)); bottom: auto; }
  @keyframes potok-toast-in { from { opacity: 0; transform: translateY(-14px) scale(0.97); } }
}
.potok.mini .potok-toasts { top: calc(0.75rem + env(safe-area-inset-top, 0px)); bottom: auto; }
@media (max-width: 45.99rem) {
  .potok .potok-toolbar { gap: 0.6rem; }
  .potok .potok-search { flex-basis: 100%; max-width: none; }
  .potok .potok-seg { display: flex; width: 100%; }
  .potok .potok-seg-btn { flex: 1 1 auto; justify-content: center; padding: 0.42rem 0.5rem; font-size: 0.84rem; }
  .potok .potok-seg-btn span { margin-left: 0.3rem; }
  .potok .potok-rgroup { padding: 0.85rem 0.8rem 0.7rem; border-radius: 18px; }
  .potok .potok-rrow { grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0.3rem 0.6rem; padding: 0.35rem 0.25rem 0.4rem 0; }
  .potok .potok-rrow > .flow-chip { grid-column: 2; grid-row: 1; }
  .potok .potok-rrow-switch { grid-column: 3; grid-row: 1; }
  .potok .potok-rrow-state { grid-column: 2 / -1; grid-row: 2; }
  .potok .potok-rgroup-foot { gap: 0.5rem; padding-left: 3.1rem; }
  .potok .potok-radd { padding: 0.3rem 0.7rem 0.3rem 0.55rem; font-size: 0.84rem; }
}

/* ── Карточка маршрута: провод между чатами, пример копии, панель «Сохранить» (этап 4) ── */
.potok .potok-card-head { position: relative; display: grid; gap: 1rem; margin: 0.2rem 0 1.1rem; padding: 1.15rem 1.25rem 1rem; border: 1px solid var(--line-soft); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); animation: potok-rise 520ms var(--potok-ease) backwards; }
.potok .potok-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.potok .potok-card-title h1 { flex: 1 1 16rem; min-width: 0; margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.8rem); overflow-wrap: anywhere; }
.potok .potok-card-switch { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.potok .potok-card-state { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.potok .potok-card-state.is-ok { color: var(--ok); }
.potok .potok-card-state.is-bad { color: var(--bad); }
.potok .potok-card-state.is-half { color: var(--warn); }
.potok .potok-card-path { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(3.5rem, 7rem) minmax(0, 1fr); align-items: center; }
.potok .potok-card-path > .flow-src { grid-column: 1; }
.potok .potok-card-path > .flow-dst { grid-column: 3; }
.potok .potok-card-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; color: var(--muted); font-size: 0.92rem; }
.potok .potok-card-summary .btn { margin-left: auto; }
.potok .potok-card-day { min-width: 0; }
/* Точка — в начале фразы: на узком экране она не остаётся одна на строке */
.potok .potok-dot { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.55rem; vertical-align: 0.05em; border-radius: 50%; background: var(--current); box-shadow: 0 0 0 4px rgba(56, 205, 243, 0.18); }
.potok .potok-dot.is-bad { background: var(--bad); box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.14); }
.potok .potok-dot.is-off { background: #98a3b5; box-shadow: 0 0 0 4px rgba(152, 163, 181, 0.2); }
.potok .potok-dot.is-half { background: var(--warn); box-shadow: 0 0 0 4px rgba(163, 86, 0, 0.14); }
/* Форма: каждый раздел — своя панель; оболочка формы — без вида, поля — прежними стилями .block */
.potok form.potok-card-form.block { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0 0 1.25rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* Раздел — блоком, а не сеткой: в сетке Safari не пускает заголовок раздела (legend) в поток,
   и тот садился на верхнюю рамку панели (обход внутренних экранов 01.11.2026). Отступы — полями. */
.potok .potok-card-form > fieldset { display: flow-root; min-width: 0; margin: 0; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--line-soft); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.potok .potok-card-form > fieldset > legend + * { clear: both; }
.potok .potok-card-form > fieldset > * + * { margin-top: 0.7rem; }
.potok .potok-card-form > fieldset > legend { float: left; width: 100%; margin: 0 0 0.2rem; padding: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
.potok .potok-card-form input, .potok .potok-card-form textarea, .potok .potok-card-form select { scroll-margin-bottom: 7rem; }
/* Пример копии: «пузырь» в окне чата приёмника и проверка на своём тексте */
.potok .potok-preview { position: relative; display: grid; gap: 0.8rem; padding: 1rem; border: 1px solid var(--line-soft); border-radius: 22px; background: var(--surface); box-shadow: var(--potok-shadow-3); }
.potok .potok-preview-head { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.potok .potok-preview-head .flow-chip-text b { font-size: 0.95rem; }
.potok .potok-glyph.small { width: 1.6rem; height: 1.6rem; border-radius: 0.5rem; }
.potok .potok-glyph.small svg { width: 0.95rem; height: 0.95rem; }
.potok .potok-chat { min-height: 5.5rem; padding: 0.9rem 0.8rem; border: 1px solid #e3eaf5; border-radius: 16px; background: linear-gradient(160deg, #e9f0fb, #f6f8fd); }
.potok .potok-bubble .sample-body { max-width: 100%; padding: 0.65rem 0.85rem 0.7rem; border-radius: 16px 16px 16px 6px; background: var(--surface); box-shadow: 0 1px 1px rgba(14, 23, 38, 0.05), 0 6px 16px -10px rgba(14, 23, 38, 0.35); line-height: 1.45; overflow-wrap: anywhere; animation: potok-bubble 320ms var(--potok-ease); }
.potok .potok-bubble .sample-body a { color: var(--brand); }
.potok .potok-bubble .sample-body.potok-skipped { opacity: 0.55; text-decoration: line-through; text-decoration-color: rgba(179, 38, 30, 0.55); }
.potok .potok-bubble .notice { margin: 0 0 0.5rem; }
@keyframes potok-bubble { from { opacity: 0.55; transform: translateY(3px); } }
.potok .potok-verdicts:empty { display: none; }
.potok .potok-verdict { margin: 0; padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.9rem; line-height: 1.4; }
.potok .potok-verdict.is-ok { background: var(--ok-soft); color: var(--ok-ink); }
.potok .potok-verdict.is-bad { background: var(--bad-soft); color: var(--bad); }
.potok .potok-verdict.is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.potok .potok-tester { display: grid; gap: 0.3rem; }
.potok .potok-tester-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; font-weight: 600; }
/* «Сохранить» — панель внизу формы: прилипает к низу окна, говорит о несохранённом */
.potok form.potok-card-form > .form-bar.potok-savebar { position: sticky; bottom: calc(var(--bottom-bar) + 0.75rem); z-index: 30; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.6rem; margin: 0; padding: 0.55rem 0.55rem 0.55rem 1.1rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.93); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--potok-shadow-3); transition: border-color 220ms var(--potok-ease), box-shadow 220ms var(--potok-ease), transform 260ms var(--potok-ease), opacity 200ms var(--potok-ease); }
.potok .potok-savebar-note { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 0.9rem; }
.potok form.potok-card-form.dirty > .form-bar.potok-savebar { border-color: #9fbdf6; box-shadow: var(--potok-shadow-3), 0 0 0 4px rgba(47, 111, 235, 0.12); }
.potok form.potok-card-form.dirty .potok-savebar-note { color: var(--brand-ink); font-weight: 600; }
@media (min-width: 64rem) {
  .potok form.potok-card-form.block { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); column-gap: 1.25rem; align-items: start; }
  .potok .potok-card-form > * { grid-column: 1; }
  /* Ниже прилипшей полосы «← Маршруты» */
  .potok .potok-card-form > .potok-preview { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: 4rem; }
}
@media (max-width: 51.99rem) {
  .potok form.potok-card-form.typing > .form-bar.potok-savebar { opacity: 0; transform: translateY(calc(100% + var(--bottom-bar) + 1rem)); pointer-events: none; }
  .potok .potok-savebar-note { font-size: 0.84rem; }
}
@media (max-width: 45.99rem) {
  .potok .potok-card-head { padding: 1rem 0.9rem 0.9rem; border-radius: 18px; }
  .potok .potok-card-path { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .potok .potok-card-path > .flow-dst { grid-column: 1; margin-left: 2.6rem; }
  .potok .potok-card-summary .btn { margin-left: 0; }
  .potok .potok-card-form > fieldset { padding: 1rem 0.9rem 1.05rem; border-radius: 18px; }
}

/* ── Новый маршрут: «Откуда» и «Куда» карточками, провод между ними (этап 5) ── */
/* Раскладка — по ширине самой формы, а не окна: рядом с меню форма уже окна */
.potok .potok-builder { container: potok-builder / inline-size; margin: 0 0 1.5rem; }
.potok .potok-builder-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.potok .potok-pick { min-width: 0; margin: 0; padding: 1rem 1rem 1.05rem; border: 1px solid var(--line-soft); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); animation: potok-rise 520ms var(--potok-ease) backwards; }
.potok .potok-pick[data-side="dst"] { animation-delay: 70ms; }
.potok .potok-pick > legend { float: left; width: 100%; margin: 0 0 0.15rem; padding: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.potok .potok-pick-lead { clear: both; margin: 0 0 0.8rem; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.potok .potok-pick-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.potok .potok-pick-item { position: relative; display: flex; align-items: center; gap: 0.7rem; min-width: 0; margin: 0; padding: 0.55rem 0.75rem 0.55rem 0.55rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color 220ms var(--potok-ease), box-shadow 220ms var(--potok-ease), background 220ms var(--potok-ease); }
.potok .potok-pick-item:hover { border-color: #c4d3ea; box-shadow: var(--shadow); }
.potok .potok-pick-item:has(:checked) { border-color: var(--brand); background: linear-gradient(180deg, #ffffff, #f3f7ff); box-shadow: 0 0 0 4px rgba(47, 111, 235, 0.12), var(--potok-shadow-1); }
.potok .potok-pick-item:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.potok .potok-pick-item:has(:disabled) { border-style: dashed; background: var(--wash); box-shadow: none; cursor: not-allowed; }
/* Сам переключатель не виден, но в порядке клавиши Tab и стрелок: выбор — вся карточка */
.potok .potok-pick-input { position: absolute; top: 50%; left: 1.2rem; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.potok .potok-pick-item .flow-chip-text { flex: 1 1 auto; }
.potok .potok-pick-item .flow-chip-text b, .potok .potok-end .flow-chip-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.25; }
.potok .potok-pick-input:disabled ~ .potok-glyph, .potok .potok-pick-input:disabled ~ .flow-chip-text b { opacity: 0.5; }
.potok .potok-pick-why { color: var(--muted); font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.potok .potok-pick-why.is-bad { color: var(--warn); }
.potok .potok-pick-why[hidden] { display: none; }
.potok .potok-tick { position: relative; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border: 1.5px solid #c9d3e2; border-radius: 50%; transition: background 220ms var(--potok-ease), border-color 220ms var(--potok-ease), transform 360ms var(--potok-spring); }
.potok .potok-tick::after { content: ""; position: absolute; left: 50%; top: 45%; width: 0.32rem; height: 0.62rem; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: transform 260ms var(--potok-spring); }
.potok .potok-pick-input:checked ~ .potok-tick { border-color: var(--brand); background: var(--brand); transform: scale(1.08); }
.potok .potok-pick-input:checked ~ .potok-tick::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.potok .potok-pick-input:disabled ~ .potok-tick { visibility: hidden; }
/* Сцена: провод от выбранного источника к выбранному приёмнику и «Создать маршрут» */
.potok .potok-stage { container: potok-stage / inline-size; display: grid; gap: 0.95rem; min-width: 0; padding: 1.1rem 1.1rem 1.15rem; border: 1px solid var(--line-soft); border-radius: 22px; background: var(--surface); box-shadow: var(--potok-shadow-3); animation: potok-rise 520ms var(--potok-ease) backwards 140ms; }
.potok .potok-stage > h2 { margin: 0; font-size: 1.08rem; font-weight: 700; }
.potok .potok-stage-path { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.3rem; padding: 0.2rem 0; }
.potok .potok-stage-path > [data-end="dst"] { margin-left: 3.1rem; }
.potok .potok-end.is-empty { border-style: dashed; border-color: #c9d3e2; background: rgba(255, 255, 255, 0.7); box-shadow: none; }
.potok .potok-end.is-empty b { color: var(--muted); }
.potok .potok-glyph.is-empty { border: 1.5px dashed #b8c7e2; background: var(--wash); box-shadow: none; }
.potok .potok-stage-line { margin: 0; color: #344155; font-size: 0.92rem; line-height: 1.45; overflow-wrap: anywhere; }
.potok .potok-opt { display: flex; align-items: center; gap: 0.9rem; margin: 0; padding: 0.7rem 0.85rem; border-radius: 14px; background: var(--wash); cursor: pointer; }
.potok .potok-opt-text { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.potok .potok-opt-text b { font-size: 0.95rem; font-weight: 600; }
.potok .potok-opt-text small { color: var(--muted); font-size: 0.82rem; }
.potok .potok-check { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.potok span.potok-switch { position: relative; border-radius: 999px; transition: background 220ms var(--potok-ease); }
.potok .potok-check:focus-visible + .potok-switch { outline: 2px solid var(--brand); outline-offset: 3px; }
.potok .potok-stage-actions { display: grid; gap: 0.5rem; }
.potok .potok-stage-actions .btn { width: 100%; text-align: center; }
/* «Создать маршрут» зажигается, когда выбраны оба чата: огонька по контуру нет, пока создавать нечего */
.potok .potok-stage-actions .btn.beam:disabled { opacity: 0.55; box-shadow: none; cursor: not-allowed; }
.potok .potok-stage-actions .btn.beam:disabled .beam-svg { display: none; }
@container potok-stage (min-width: 30rem) {
  .potok .potok-stage-path { grid-template-columns: minmax(0, 1fr) minmax(3rem, 6rem) minmax(0, 1fr); align-items: center; }
  .potok .potok-stage-path > [data-end="dst"] { grid-column: 3; margin-left: 0; }
  .potok .potok-stage-actions { display: flex; flex-wrap: wrap; align-items: center; }
  .potok .potok-stage-actions .btn { width: auto; }
}
@container potok-builder (min-width: 40rem) {
  .potok .potok-builder-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .potok .potok-stage { grid-column: 1 / -1; }
}
/* Широкая форма — сцена между списками, как в концепте; по ходу документа она последняя — после выбора обоих */
@container potok-builder (min-width: 58rem) {
  .potok .potok-builder-grid { grid-template-columns: minmax(0, 1fr) minmax(16rem, 18.5rem) minmax(0, 1fr); }
  .potok .potok-pick[data-side="src"] { grid-column: 1; grid-row: 1; }
  .potok .potok-pick[data-side="dst"] { grid-column: 3; grid-row: 1; }
  .potok .potok-stage { grid-column: 2; grid-row: 1; position: sticky; top: 4rem; }
}
@media (max-width: 45.99rem) {
  .potok .potok-pick, .potok .potok-stage { padding: 0.9rem 0.8rem 0.95rem; border-radius: 18px; }
}

/* ── «Мои чаты»: карточки сеткой, отбор по площадке (этап 6) ── */
.potok .potok-chats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; align-items: stretch; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.potok .potok-chat { position: relative; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; padding: 1.05rem 1.1rem 1.1rem; border: 1px solid var(--line-soft); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); scroll-margin: 5rem 0 6rem; animation: potok-rise 520ms var(--potok-ease) backwards; transition: border-color 220ms var(--potok-ease), box-shadow 220ms var(--potok-ease); }
.potok .potok-chat:nth-child(2) { animation-delay: 60ms; }
.potok .potok-chat:nth-child(3) { animation-delay: 120ms; }
.potok .potok-chat:nth-child(n+4) { animation-delay: 180ms; }
.potok .potok-chat.is-bad { border-color: #f1c7c9; }
.potok .potok-chat.is-warn { border-color: #efd9ad; }
.potok .potok-chat.is-off { background: #fbfcfe; }
/* Переход из маршрута или «Обзора» (#chat-номер) — карточка подсвечена */
.potok .potok-chat:target { border-color: #9fbdf6; box-shadow: 0 0 0 4px rgba(47, 111, 235, 0.14), var(--shadow); }
.potok .potok-chat-head { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; }
.potok .potok-chat-head .flow-chip-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 1.02rem; white-space: normal; line-height: 1.25; }
.potok .potok-chat.is-off .potok-chat-head .potok-glyph { opacity: 0.6; }
/* Аудитория — главное число карточки: крупно и слева, а не мелко в углу, как в прежнем списке */
.potok .potok-chat .chat-audience { display: flex; flex-wrap: wrap; align-items: baseline; justify-items: start; gap: 0.1rem 0.5rem; text-align: left; font-size: 0.88rem; line-height: 1.2; }
.potok .potok-chat .chat-audience b { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.potok .potok-chat.is-off .chat-audience b { color: #8a95a8; }
/* Мини-график подписчиков за 30 дней (TZ-61) — справа от числа, как в концепте; открывается слева направо */
.potok .potok-chat-num { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; min-width: 0; }
/* Общие стили не дают числу сжиматься — здесь можно: длинная подпись уходит под число, график остаётся в карточке */
.potok .potok-chat-num .chat-audience { flex: 1 1 auto; min-width: 0; }
.potok .potok-trend { flex: none; display: block; width: 112px; height: 36px; overflow: visible; animation: potok-trend-in 900ms var(--potok-ease) 200ms backwards; }
.potok .potok-trend-area { fill: rgba(47, 111, 235, 0.12); }
.potok .potok-trend-line { fill: none; stroke: #2f6feb; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.potok .potok-trend-end { fill: #fff; stroke: #2f6feb; stroke-width: 2; }
.potok .potok-trend.is-fall .potok-trend-area { fill: rgba(138, 149, 168, 0.14); }
.potok .potok-trend.is-fall .potok-trend-line, .potok .potok-trend.is-fall .potok-trend-end { stroke: #8a95a8; }
.potok .potok-chat.is-off .potok-trend { opacity: 0.5; }
@keyframes potok-trend-in { from { clip-path: inset(-4px 100% -4px -4px); } to { clip-path: inset(-4px -4px -4px -4px); } }
.potok .potok-chat-bot { display: flex; align-items: center; margin: 0; padding: 0.55rem 0.75rem; border-radius: 12px; background: var(--wash); color: #344155; font-size: 0.88rem; line-height: 1.35; }
.potok .potok-chat .chat-problem { margin: 0; border-radius: 14px; }
.potok .potok-chat-move { color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.potok .potok-chat .chat-tools { margin: 0; }
.potok .potok-chat .row-actions { margin-top: auto; padding-top: 0.2rem; }
@media (max-width: 45.99rem) {
  .potok .potok-chat { padding: 0.95rem 0.9rem 1rem; border-radius: 18px; }
  .potok .potok-trend { width: 96px; height: 32px; }
}

/* ── «Доставка»: строки раскрываются, ошибки раскрыты сразу, новые встают сверху (этап 6) ── */
.potok .potok-feed-seg { flex: 0 0 auto; }
.potok a.potok-seg-btn { border-radius: 999px; text-decoration: none; }
.potok a.potok-seg-btn[aria-current="page"] { background: #edf2fc; box-shadow: inset 0 0 0 1px #d6e2fa; color: var(--fg); }
/* min-width: 0 — иначе поле растягивает отбор до самого длинного имени маршрута, и на телефоне оно уходило за край */
.potok .potok-feed-route { display: flex; flex: 1 1 15rem; align-items: center; gap: 0.5rem; min-width: 0; max-width: 24rem; margin: 0; }
/* Своя стрелка: без appearance: none Safari рисует поле серой системной плашкой и не слушает рамку */
.potok .potok-feed-route select { flex: 1 1 auto; min-width: 0; min-height: 2.6rem; padding: 0.45rem 2.4rem 0.45rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2398a3b5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.95rem center / 0.75rem; box-shadow: var(--potok-shadow-1); color: var(--fg); font: inherit; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; }
.potok .potok-feed-route select:focus-visible { outline: none; border-color: #8fb1f5; box-shadow: 0 0 0 4px rgba(47, 111, 235, 0.14); }
.potok .potok-feed > .day { margin: 1.1rem 0 0.5rem; color: var(--muted); font-size: 0.86rem; font-weight: 650; letter-spacing: 0; }
.potok .potok-feed > .day:first-child { margin-top: 0.2rem; }
.potok .potok-feed-list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.potok .potok-drow { border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface); box-shadow: var(--potok-shadow-1); transition: border-color 220ms var(--potok-ease), box-shadow 220ms var(--potok-ease); }
.potok .potok-drow:hover { border-color: #d3dceb; box-shadow: var(--shadow); }
.potok .potok-drow.is-bad { border-color: #f3d0d2; }
.potok .potok-drow.is-warn { border-color: #f0dfbd; }
.potok .potok-drow-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 0.75rem; min-height: 3.2rem; padding: 0.5rem 0.9rem 0.5rem 0.85rem; border-radius: inherit; cursor: pointer; list-style: none; }
.potok .potok-drow-main::-webkit-details-marker { display: none; }
.potok .potok-drow-main:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Лампа исхода: та же форма, что у «Требует внимания» — круг у доставки, ромб у пропуска, восьмиугольник у отказа */
.potok .potok-drow-lamp { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--current); box-shadow: 0 0 0 4px rgba(56, 205, 243, 0.16); }
.potok .potok-drow.is-warn .potok-drow-lamp { border-radius: 2px; background: var(--warn); box-shadow: 0 0 0 4px rgba(163, 86, 0, 0.12); transform: rotate(45deg) scale(0.9); }
.potok .potok-drow.is-bad .potok-drow-lamp { border-radius: 3px; background: var(--bad); box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.12); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.potok .potok-drow-what { display: grid; min-width: 0; line-height: 1.3; }
.potok .potok-drow-what b { font-size: 0.93rem; font-weight: 600; }
.potok .potok-drow.is-bad .potok-drow-what b { color: var(--bad); }
.potok .potok-drow.is-warn .potok-drow-what b { color: var(--warn-ink, var(--warn)); }
.potok .potok-drow-what small { overflow: hidden; color: var(--muted); font-size: 0.82rem; white-space: nowrap; text-overflow: ellipsis; }
.potok .potok-drow-path { display: inline-flex; align-items: center; gap: 0.3rem; }
.potok .potok-drow-arrow { width: 0.9rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #b8c7e2, var(--brand)); }
.potok .potok-drow-time { min-width: 2.6rem; color: var(--muted); font-size: 0.86rem; font-variant-numeric: tabular-nums; text-align: right; }
.potok .potok-drow-main::after { content: ""; width: 0.45rem; height: 0.45rem; margin-left: -0.3rem; border: solid #98a3b5; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform 260ms var(--potok-ease); }
.potok .potok-drow details[open] > .potok-drow-main::after { transform: rotate(225deg) translate(-2px, -2px); }
.potok .potok-drow-detail { display: grid; gap: 0.55rem; padding: 0 0.9rem 0.8rem 2.3rem; color: #344155; font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.potok .potok-drow-detail p { margin: 0; }
.potok .potok-drow-detail .row-actions { margin: 0; }
.potok .potok-drow details[open] .potok-drow-detail { animation: potok-open 260ms var(--potok-ease); }
@keyframes potok-open { from { opacity: 0; transform: translateY(-4px); } }
/* Новая запись живой ленты — въезжает сверху и коротко светится */
.potok .potok-drow.arrive { animation: potok-arrive 1400ms var(--potok-ease); }
@keyframes potok-arrive {
  0% { opacity: 0; transform: translateY(-8px); box-shadow: 0 0 0 0 rgba(56, 205, 243, 0.5), var(--potok-shadow-1); border-color: #9fdcf3; }
  30% { opacity: 1; transform: none; }
  100% { box-shadow: 0 0 0 10px rgba(56, 205, 243, 0), var(--potok-shadow-1); }
}
@media (max-width: 45.99rem) {
  .potok .potok-feed-route { flex-basis: 100%; max-width: none; }
  .potok .potok-drow-main { gap: 0.55rem; padding: 0.5rem 0.7rem 0.5rem 0.75rem; }
  .potok .potok-drow-path .potok-glyph.small { width: 1.35rem; height: 1.35rem; border-radius: 0.45rem; }
  .potok .potok-drow-detail { padding: 0 0.75rem 0.75rem 0.75rem; }
}

/* ── ИИ-помощник: поле — как у Claude (agent-screen.ts, agentMarkup с potok) ──
   Владелец 01.11.2026: «отправить текст не как в Claude, статистика не видна при прокрутке». Одна рамка,
   закреплённая внизу экрана: текст растёт под набранное (assistant.js), под ним — остаток запаса строкой
   и круглая стрелка «Отправить»; пока поле пустое, стрелка серая */
.potok .ag-composer { gap: 0.2rem; padding: 0.45rem 0.5rem 0.5rem 0.85rem; border-radius: 24px; box-shadow: 0 1px 2px rgba(14, 23, 38, 0.06), 0 12px 30px -16px rgba(22, 46, 96, 0.4); }
.potok .ag-composer:focus-within { border-color: #8fb1f5; box-shadow: 0 0 0 4px rgba(47, 111, 235, 0.12), 0 12px 30px -16px rgba(22, 46, 96, 0.4); }
.potok .ag-composer textarea { min-height: 2.4rem; max-height: 40vh; padding: 0.45rem 0.15rem 0.2rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 1rem; line-height: 1.45; resize: none; }
.potok .ag-composer textarea:focus { border-color: transparent; background: transparent; box-shadow: none; outline: none; }
.potok .ag-composer .ag-field-bottom { gap: 0.6rem; }
.potok .ag-usage-line { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.potok .ag-send { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; min-height: 0; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(180deg, #4a85f3 0%, #2f6feb 60%, #2963dd 100%); box-shadow: 0 6px 14px -8px rgba(47, 111, 235, 0.9); color: #fff; }
.potok .ag-send svg { width: 1.2rem; height: 1.2rem; }
.potok .ag-send:disabled { background: #d5dce8; box-shadow: none; color: #fff; cursor: default; }

/* ── «Обзор»: живые копии (web/potok/index.ts, initLiveCopies) ──
   Новая копия: по проводу бежит свет, приёмник вспыхивает, число за сегодня коротко подпрыгивает */
.potok .flow-meta b.bump, .potok [data-copies-today].bump { display: inline-block; animation: potok-bump 700ms var(--potok-spring); }
@keyframes potok-bump { 35% { transform: scale(1.22); color: var(--brand); } }

/* ── «Найти и сделать» по Ctrl K (web/potok/index.ts, initSearch) ──
   Как у Raycast: кнопка под знаком в меню компьютера и значок в верхней строке телефона; окно — поле
   и список действий, маршрутов, чатов и разделов, выбранный — подсвечен */
.potok .potok-search-trigger { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 2.5rem; margin: 0.15rem 0 0.7rem; padding: 0 0.55rem 0 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--potok-shadow-1); color: var(--muted); font: inherit; font-size: 0.9rem; font-weight: 500; transition: border-color 200ms var(--potok-ease), box-shadow 200ms var(--potok-ease); }
.potok .potok-search-trigger:hover { border-color: #cdd7e6; box-shadow: var(--shadow); }
.potok .potok-search-trigger svg { width: 1.1rem; height: 1.1rem; flex: none; }
.potok .potok-search-trigger span { flex: 1; text-align: left; }
.potok .potok-search-icon { display: none; }
.potok .potok-search-trigger kbd, .potok .potok-palette kbd, .potok .potok-palette-esc { display: inline-grid; place-items: center; min-width: 1.5rem; min-height: 0; height: 1.45rem; padding: 0 0.35rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); box-shadow: none; color: var(--muted); font: 600 0.72rem/1 var(--potok-font); }
.potok .potok-palette-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(14, 23, 38, 0.28); backdrop-filter: blur(3px); animation: potok-fade 200ms var(--potok-ease) both; }
.potok .potok-palette { position: fixed; z-index: 95; left: 50%; top: 14vh; display: flex; flex-direction: column; width: min(40rem, calc(100vw - 2rem)); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 22px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 40px 90px -30px rgba(14, 23, 38, 0.55), 0 0 0 1px rgba(14, 23, 38, 0.04); backdrop-filter: blur(20px) saturate(1.3); transform: translateX(-50%); animation: potok-palette-in 300ms var(--potok-spring) both; }
.potok .potok-palette-input { display: flex; align-items: center; gap: 0.75rem; padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--line-soft); }
.potok .potok-palette-input > svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--brand); }
.potok .potok-palette-input input { flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--fg); font: inherit; font-size: 1.1rem; }
.potok .potok-palette-input input:focus { outline: none; box-shadow: none; }
.potok .potok-palette-esc { cursor: pointer; }
.potok .potok-palette-esc-x { display: none; }
.potok .potok-palette-list { max-height: min(52vh, 26rem); overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem; }
.potok .potok-palette-group { padding: 0.6rem 0.75rem 0.25rem; color: var(--muted); font-size: 0.78rem; font-weight: 650; }
.potok .potok-palette-item { display: flex; align-items: center; gap: 0.75rem; min-height: 2.9rem; padding: 0.35rem 0.75rem; border-radius: 12px; color: var(--fg); font-size: 0.95rem; text-decoration: none; }
.potok .potok-palette-ico { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: none; border-radius: 9px; background: var(--wash); color: var(--brand); }
.potok .potok-palette-ico > svg { width: 1.1rem; height: 1.1rem; }
.potok .potok-palette-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.potok .potok-palette-item small { flex: none; max-width: 45%; overflow: hidden; color: var(--muted); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.potok .potok-palette-item mark { background: none; color: var(--brand-ink); font-weight: 700; }
.potok .potok-palette-item[aria-selected="true"] { background: linear-gradient(90deg, var(--brand-soft), rgba(233, 240, 255, 0.4)); }
.potok .potok-palette-item[aria-selected="true"] .potok-palette-ico { background: var(--surface); box-shadow: var(--potok-shadow-1); }
.potok .potok-palette-empty { margin: 0; padding: 1.6rem; color: var(--muted); text-align: center; }
.potok .potok-palette-foot { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1.1rem; border-top: 1px solid var(--line-soft); background: rgba(246, 248, 252, 0.8); color: var(--muted); font-size: 0.78rem; }
.potok .potok-palette-foot span { display: inline-flex; align-items: center; gap: 0.35rem; }
.potok .potok-palette-foot .potok-palette-brand { margin-right: auto; color: var(--fg); font-weight: 650; }
@keyframes potok-palette-in { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.97); } }
@keyframes potok-fade { from { opacity: 0; } }
/* Телефон: значок поиска — в верхней строке перед кружком аккаунта; окно — у верхнего края, чтобы список
   не ушёл под клавиатуру (высота — по видимой части окна, скрипт), строка — название, под ним пояснение */
@media (max-width: 51.99rem) {
  /* Боковое меню на телефоне — нижняя полоса, и кнопка из него встала бы над верхней строкой */
  .potok .potok-search-trigger { display: none; }
  .potok .potok-search-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; min-height: 0; margin-left: auto; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--potok-shadow-1); color: var(--fg); }
  .potok .potok-search-icon svg { width: 1.2rem; height: 1.2rem; }
  .potok .topbar .potok-search-icon + .ava { margin-left: 0; }
  .potok .potok-palette { top: calc(env(safe-area-inset-top, 0px) + 0.5rem); width: calc(100vw - 1rem); border-radius: 20px; }
  .potok .potok-palette-list { max-height: calc(var(--potok-view, 100dvh) - 6.5rem - env(safe-area-inset-top, 0px)); }
  .potok .potok-palette-foot { display: none; }
  .potok .potok-palette-esc { width: 2.25rem; height: 2.25rem; padding: 0; border-bottom-width: 1px; border-radius: 10px; color: var(--fg); }
  .potok .potok-palette-esc-key { display: none; }
  .potok .potok-palette-esc-x { display: block; width: 1.15rem; height: 1.15rem; }
  .potok .potok-palette-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.7rem; align-items: center; }
  .potok .potok-palette-ico { grid-row: span 2; }
  .potok .potok-palette-item small { max-width: none; }
}

/* ── Касание схемы конструктора (web/builder/canvas.ts, touchPans) ──
   Палец листает схему и с карточки; карточку переносят, задержав на ней палец, — она «приподнимается».
   Долгое касание не выделяет текст карточки и не зовёт меню iPhone: тут палец держат ради переноса */
.potok .cb-canvas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Увеличение «приподнятой» — в записи сдвига карточки (canvas.ts, set): отдельное свойство scale браузер
   применял до сдвига, и дальняя от начала схемы карточка съезжала от своих связей (владелец 01.11.2026).
   Плавно растёт, пока палец стоит (lifting); повёл — карточка идёт за ним без запаздывания */
.potok .cb-card.lifted { z-index: 3; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent), 0 26px 46px -18px rgba(20, 22, 30, 0.55); transition: box-shadow 200ms var(--potok-ease); }
.potok .cb-card.lifted.lifting { transition: transform 200ms var(--potok-spring), box-shadow 200ms var(--potok-ease); }
/* Кнопка ИИ-помощника над схемой — только на телефоне (ниже) */
.potok .potok-ai-fab { display: none; }

/* ── Панель шага конструктора (web/builder/panel.ts) ──
   Владелец 01.11.2026: «не понял, как работать с „и“ и „или“». Между условиями ветки — слово связки,
   выбор связки — переключателем над ними (joinerChoice); на карточке схемы — то же слово между строками */
.potok .cb-element[data-joiner] { position: relative; margin-top: 0.95rem; }
.potok .cb-element[data-joiner]::before { content: attr(data-joiner); position: absolute; left: 50%; top: -1.33rem; transform: translateX(-50%); padding: 0.06rem 0.65rem; border: 1px solid color-mix(in srgb, var(--cb-condition) 38%, var(--line)); border-radius: 999px; background: var(--surface); color: var(--cb-condition); font-size: 0.74rem; font-weight: 700; line-height: 1.4; }
.potok .cb-branch-conditions li[data-joiner]::before { content: attr(data-joiner); justify-self: start; margin-bottom: 0.15rem; padding: 0 0.42rem; border-radius: 999px; background: color-mix(in srgb, var(--cb-condition) 13%, transparent); color: var(--cb-condition); font-size: 0.68rem; font-weight: 700; line-height: 1.45; }
.potok .cb-joiner { display: grid; gap: 0.35rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.potok .cb-joiner > legend { padding: 0; margin-bottom: 0.35rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.potok .cb-joiner-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.22rem; border-radius: 12px; background: var(--wash); }
.potok .cb-joiner-option { position: relative; display: grid; justify-items: center; gap: 0.05rem; padding: 0.42rem 0.5rem; border-radius: 9px; color: var(--muted); font-size: 0.82rem; line-height: 1.25; text-align: center; cursor: pointer; transition: background-color 200ms var(--potok-ease), color 200ms var(--potok-ease), box-shadow 200ms var(--potok-ease); }
.potok .cb-joiner-option > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.potok .cb-joiner-option > b { color: var(--fg); font-size: 0.95rem; }
.potok .cb-joiner-option:has(> input:checked) { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(14, 23, 38, 0.12), 0 4px 12px -6px rgba(47, 111, 235, 0.45); }
.potok .cb-joiner-option:has(> input:checked) > b { color: var(--brand); }
.potok .cb-joiner-option:has(> input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Имена переменных — кнопками под полем (panel.ts, nameChips): системный список iPhone во встроенном
   браузере MAX улетал к верху экрана */
.potok .cb-name-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.1rem; }
.potok .cb-name-chips[hidden] { display: none; }
.potok .cb-name-chip { min-height: 2.1rem; padding: 0.2rem 0.75rem; border: 1px solid #c9d8fb; border-radius: 999px; background: #e9f0ff; box-shadow: none; color: #1f4fbf; font: 600 0.85rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.potok .cb-name-chip:hover { border-color: #1f4fbf; background: #e9f0ff; }
/* Мини-приложение MAX: страница конструктора на две точки выше окна — скрипт держит её на точку ниже верха */
.potok.potok-hold-top { padding-bottom: 2px; }
/* Поле текста растёт под текст (скрипт): тянуть его за угол незачем */
.potok .cb-panel textarea.cb-grows { resize: none; }
/* «?» стоит в правом верхнем углу поля — подпись не заходит под него (у флажка «Наоборот… НЕ так» буквы были под значком) */
.potok .cb-field:has(> .cb-hint) > label { padding-right: 1.9rem; }
/* Кнопки оформления текста сообщения (Ж, К, Ч, З, ссылка) — без класса, и правило главной кнопки красило
   их синими таблетками (обход 01.11.2026): они — спокойные, как в прежнем виде */
.potok .cb-format > button:not([class]) { border-color: transparent; background: var(--sunken); color: var(--fg); box-shadow: none; }
.potok .cb-format > button:not([class]):hover { background: #e3e8f2; }
/* Касание строки ветки или кнопки на схеме открыло шаг на этом месте — оно ненадолго подсвечено */
.potok .cb-revealed { animation: potok-revealed 1600ms var(--potok-ease); }
@keyframes potok-revealed { from { background-color: color-mix(in srgb, var(--brand) 8%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 42%, transparent); } }
/* iPhone увеличивает страницу, когда открывается поле со шрифтом мельче 16 точек, и назад сам не
   возвращает (владелец 01.11.2026: «увеличения интерфейса при редактировании блока»; поля конструктора
   были в 13–14,7). На сенсорном экране поля ввода — не мельче 16 */
@media (pointer: coarse) {
  .potok textarea, .potok select, .potok input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]) { font-size: 16px; }
  /* «?» — кружок в 21 точку, пальцем по нему не попасть: место для касания шире самого значка */
  .potok .cb-hint > summary { position: relative; }
  .potok .cb-hint > summary::after { content: ""; position: absolute; inset: -0.55rem -0.55rem -0.2rem; }
  /* Кнопки над текстом сообщения — под палец; подсказка про стрелки и Esc у списка переменных — для клавиатуры, на телефоне её нет */
  .potok .cb-format > button { height: 2.25rem; min-width: 2.25rem; }
  .potok .cb-subst-tip { display: none; }
}

/* ── Конструктор чат-бота на телефоне: рабочее место во весь экран ──
   Владелец 01.11.2026: «мало места, сверху сообщение, которое не закрыть, прокрутка сложная; снизу
   панель — прокрутка внутри, наверх не подняться». Было: холст ниже края экрана и под нижним меню
   (палитру не видно), под ним — помощник со своей прокруткой, а холст забирает касания себе — листать
   страницу можно было только за шапку. Стало: страница не листается, холст занимает всё место между
   полосой кнопок и нижним меню, помощник и карточка шага — листами снизу поверх холста. */
@media (max-width: 51.99rem) {
  /* Страница — ровно видимая часть экрана (100dvh, не 100vh: в Safari тот выше видимой части при
     открытой адресной строке), запас снизу — ровно под нижнее меню (обычный 5rem — на 20px больше).
     Верхняя строка берёт свою высоту, рабочее место — остальное: без замеров скриптом, и шрифт,
     догрузившийся позже, раскладку не сдвинет. В мини-приложении MAX верхней строки нет — место холсту */
  .potok .page:has(> main > .cb) { display: flex; flex-direction: column; height: 100dvh; min-height: 0; padding-bottom: var(--bottom-bar); }
  .potok .page:has(> main > .cb) > .topbar { flex: none; }
  /* width: у main поля auto (центровка) — в колонке это «по содержимому», и строка кнопок раздвинула бы экран */
  .potok main:has(> .cb) { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-height: 22rem; padding-top: 0.5rem; padding-bottom: 0.5rem; overflow: hidden; }
  /* У полосы конструктора своя «←» к списку сценариев */
  .potok main:has(> .cb) > .crumbbar { display: none; }
  .potok main:has(> .cb) > .notice, .potok main:has(> .cb) > .potok-fold-wrap { flex: none; margin: 0 0 0.5rem; }
  .potok main:has(> .cb) > .cb { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
  .potok .cb > * { flex: none; }
  .potok .cb > .cb-work { flex: 1 1 auto; min-height: 0; display: flex; }
  .potok .cb-workspace { flex: 1 1 auto; height: auto; min-height: 12rem; border-radius: 18px; }
  /* Полоса: название — одной строкой, отметки — одной строкой с прокруткой, кнопки — одной строкой */
  .potok .cb-bar { gap: 0.45rem; padding: 0.5rem 0.55rem; border-radius: 18px; }
  .potok .cb-bar-left { width: 100%; }
  .potok .cb-bar-left > div { flex: 1; min-width: 0; }
  .potok .cb-heading { overflow: hidden; font-size: 0.98rem; white-space: nowrap; text-overflow: ellipsis; }
  .potok .cb-subtitle { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .potok .cb-subtitle > * { flex: none; }
  .potok .cb-bar-right { scrollbar-width: none; }
  /* Что не влезло — уходит под мягкий край справа (видно, что строку можно сдвинуть); запас справа —
     чтобы в конце прокрутки последнее не оставалось под краем */
  .potok .cb-subtitle, .potok .cb-bar-right { padding-right: 1.4rem; -webkit-mask-image: linear-gradient(to left, transparent, #000 1.4rem); mask-image: linear-gradient(to left, transparent, #000 1.4rem); }
  /* Строка кнопок прокручивается — и обрезает всё за своими краями, свечение «Сохранить» тоже
     (под кнопкой был виден прямоугольник). Строка раздвинута до краёв полосы, кнопки — на прежнем
     месте, а свечение — короче: ниже полосы строку не опустить, она перехватывала бы касания холста */
  .potok .cb-bar-right { --potok-glow: 0 6px 14px -7px rgba(47, 111, 235, 0.7); width: calc(100% + 1.1rem); margin: -0.3rem -0.55rem -0.5rem; padding: 0.3rem 1.95rem 0.5rem 0.55rem; }
  /* В строке отметок первым — то, по чему нужно действовать (ошибки, изменения), имя бота — последним */
  .potok .cb-subtitle > .cb-errors, .potok .cb-subtitle > .cb-changes { order: -1; }
  .potok .cb-subtitle > .cb-bot { order: 1; }
  /* Палитра «Добавить» — стеклянная полоса над нижним краем холста, на виду */
  .potok .cb-palette { bottom: 0.6rem; border-radius: 18px; background: rgba(255, 255, 255, 0.9); box-shadow: var(--potok-shadow-3); scrollbar-width: none; }
  /* ИИ-помощник — круглой кнопкой справа от «Добавить», под большим пальцем (владелец 01.11.2026: «как
     догадаться, что вызов ИИ справа — нужно пролистнуть полосу»). В полосе кнопок его на телефоне нет:
     кнопка скрипта нажимает прежнюю. Синий в голубой — второй цвет «Потока»: не спутать с «Сохранить» */
  .potok .cb-bar-right > .cb-helper-button { display: none; }
  /* «Отдалить» и «Приблизить» — тоже: на телефоне схему масштабируют щипком, и теперь с любого места,
     хоть с карточки; освободившееся место показывает следующие кнопки полосы («Переменные» и дальше) */
  .potok .cb-bar-right [aria-label="Отдалить"], .potok .cb-bar-right [aria-label="Приблизить"] { display: none; }
  .potok .potok-ai-fab { position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 4; display: grid; place-items: center; width: 3.3rem; height: 3.3rem; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(140deg, #3d7cf2 0%, #2f6feb 46%, #1fa4e6 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(10, 40, 120, 0.25), 0 1px 2px rgba(14, 23, 38, 0.14), 0 10px 22px -10px rgba(47, 111, 235, 0.85); animation: potok-fab-in 520ms var(--potok-spring); }
  .potok .potok-ai-fab svg { width: 1.45rem; height: 1.45rem; }
  .potok .potok-ai-fab:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
  .potok .cb-workspace:has(> .potok-ai-fab) .cb-palette { left: 0.6rem; transform: none; max-width: calc(100% - 1.2rem - 3.3rem - 0.5rem); }
  /* Помощник (ИИ-помощник, шаблоны, JSON) — листом снизу поверх холста; под ним затемнение: нажатие по нему закрывает лист.
     Лист въезжает с пружиной и уезжает вниз (а не пропадает): display ждёт конец перехода — где браузер
     этого не умеет, вторая строка transition отбрасывается и лист просто исчезает, как раньше */
  .potok .cb-helper { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: min(82dvh, 46rem); max-height: none; border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -18px 50px -18px rgba(22, 46, 96, 0.45); overscroll-behavior: contain; animation: potok-sheet 380ms var(--potok-spring); transition: transform 260ms var(--potok-ease); transition: transform 260ms var(--potok-ease), display 260ms allow-discrete; }
  .potok .cb[data-helper="collapsed"] .cb-helper { transform: translateY(100%); }
  /* Затемнение есть всегда, но видно только при открытом листе (помощник или карточка шага) — так оно
     и появляется, и гаснет плавно; пока лист тянут вниз, гаснет вслед за пальцем (--potok-pull, скрипт).
     Над листом карточки от холста виден лишь обрезок полосы — затемнение честнее, и нажатие по нему закрывает лист */
  .potok .cb::before { content: ""; position: fixed; inset: 0; z-index: 65; background: rgba(14, 23, 38, 0.34); opacity: 0; visibility: hidden; transition: opacity 240ms var(--potok-ease), visibility 0s linear 240ms; }
  .potok .cb[data-helper="shown"]::before, .potok .cb:has(.cb-panel:not([hidden]))::before { opacity: calc(1 - var(--potok-pull, 0)); visibility: visible; transition: opacity 260ms var(--potok-ease); }
  /* Ручка листа и «свернуть» — вниз, а не вбок. За шапку лист тянут вниз, чтобы закрыть (скрипт):
     вертикальное движение по ней — скрипту, вбок — вкладкам */
  .potok .cb-helper-head, .potok .cb-panel-head { -webkit-user-select: none; user-select: none; }
  .potok .cb-helper-head { position: relative; padding-top: 0.95rem; touch-action: pan-x; }
  .potok .cb-helper-head::before, .potok .cb-panel-head::before { content: ""; position: absolute; left: 50%; top: 0.4rem; width: 2.4rem; height: 0.28rem; margin-left: -1.2rem; border-radius: 999px; background: #d3dbe7; }
  .potok .cb-helper-head > .cb-icon-button:last-child .cb-icon { transform: rotate(90deg); }
  .potok .cb-helper-feed, .potok .cb-helper-section, .potok .cb-panel-body { overscroll-behavior: contain; }
  /* Карточка шага — листом снизу, выше прежнего: полям нужно место; холст над ней виден. Уезжает вниз так же, как помощник */
  .potok .cb-panel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 70; width: auto; max-height: 80dvh; border-bottom: 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -18px 50px -18px rgba(22, 46, 96, 0.45); animation: potok-sheet 380ms var(--potok-spring); transition: transform 260ms var(--potok-ease); transition: transform 260ms var(--potok-ease), display 260ms allow-discrete; }
  .potok .cb-panel[hidden] { transform: translateY(100%); }
  /* Пока в листе печатают, лист — почти во весь экран: над клавиатурой полю остаётся больше места */
  .potok .cb-panel:has(textarea:focus), .potok .cb-panel:has(input[type=text]:focus), .potok .cb-panel:has(input[type=number]:focus) { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 0.75rem); }
  .potok .cb-panel-head { position: relative; padding-top: 1rem; touch-action: pan-x; }
  /* Вложенные рамки съедали ширину: ветки → ветка → условия → условие, полю оставалось две трети экрана.
     Список внутри элемента — без своей рамки (подпись остаётся заголовком), отступы листа — уже */
  .potok .cb-panel-body { padding-left: 0.85rem; padding-right: 0.85rem; }
  .potok .cb-panel .cb-element .cb-list { padding: 0; border: 0; }
  /* Плашка над схемой — в две строки; нажатие раскрывает, «×» убирает (скрипт). Обрезан текст внутри,
     а не сама плашка: иначе в её нижнем отступе видна верхушка третьей строки */
  .potok .potok-fold-wrap { position: relative; }
  .potok .potok-fold-wrap > .notice { margin: 0; padding-right: 2.6rem; cursor: pointer; }
  .potok .potok-fold-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .potok .potok-fold-wrap > .notice[aria-expanded="true"] > .potok-fold-text { display: block; }
  .potok .potok-fold-wrap > .notice:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .potok .potok-fold-close { position: absolute; top: 0.3rem; right: 0.3rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; min-height: 0; padding: 0; border: 0; background: rgba(255, 255, 255, 0.6); color: inherit; font-size: 1.2rem; line-height: 1; }
}
@keyframes potok-sheet { from { transform: translateY(100%); } }
@keyframes potok-fab-in { from { opacity: 0; transform: scale(0.5); } }

/* Самопроверка на телефоне (?potok-diag): плашка поверх страницы, под шапкой */
.potok .potok-diag { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 4.2rem); left: 0.5rem; right: 0.5rem; z-index: 95; margin: 0; padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--potok-shadow-3); color: var(--fg); font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }

/* ── Вход (этап 7, концепт — экран «Вход»): слева знак, заголовок и действие, справа сцена с
   предметами задач сервиса. Меню и верхней строки у входа нет — страница во весь экран ── */
.potok .shell:has(.potok-login) { display: block; }
.potok .shell:has(.potok-login) > .side { display: none; }
.potok .shell:has(.potok-login) .topbar { display: none; }
.potok .page:has(.potok-login) { min-height: 0; padding-bottom: 0; }
.potok main:has(> .potok-login) { max-width: none; margin: 0; padding: 0; }
.potok .potok-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.potok .potok-login-main { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.4rem; padding: 3rem clamp(1.5rem, 6vw, 6rem); }
.potok .potok-login-main > * { width: 100%; max-width: 34rem; margin: 0; }
/* Скрытая форма входа из MAX и пустая строка разбора не занимают места между блоками (форму скрипт отправляет и скрытой) */
.potok .potok-login-main > [data-miniapp-login] { display: none; }
.potok .potok-login-main > [data-miniapp-diag]:empty { display: none; }
.potok .potok-login-brand { display: flex; align-items: center; gap: 0.65rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.potok .potok-login-brand svg { width: 34px; height: 34px; }
.potok .potok-login h1 { font-size: 2.5rem; line-height: 1.08; letter-spacing: -0.03em; }
.potok .potok-login-lead { color: var(--muted-deep); font-size: 1.06rem; line-height: 1.55; }
.potok .potok-login-main a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.potok .potok-login-main button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Кнопки площадок — плитками во всю колонку, как в концепте: MAX — переливом со светом по контуру, Telegram — светлая */
.potok .potok-login-choice { display: grid; gap: 0.75rem; max-width: 26rem; }
.potok .potok-login-choice form { margin: 0; }
.potok .potok-login-choice .login-btn { justify-content: flex-start; gap: 0.75rem; min-height: 3.5rem; padding: 0 1.35rem; border-radius: 18px; font-size: 1rem; font-weight: 600; }
.potok .potok-login-choice .login-btn svg { width: 22px; height: 22px; }
.potok .potok-login-choice .login-btn .potok-login-go { width: 18px; height: 18px; margin-left: auto; opacity: 0.7; transition: transform 220ms var(--potok-ease); }
.potok .potok-login-choice .login-btn:hover .potok-login-go { transform: translateX(3px); }
.potok .potok-login-choice .login-btn.open-max { background: linear-gradient(120deg, #2b7bff 0%, #5a54ff 55%, #8a3ff2 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 30px -14px rgba(106, 76, 255, 0.9); }
.potok .potok-login-choice .login-btn.open-tg { border: 1px solid #cfe7f6; background: var(--surface); color: #0b6fa3; box-shadow: var(--potok-shadow-1); }
.potok .potok-login-choice .login-btn.open-tg:hover { border-color: #a9d6f1; background: #f1f9ff; }
.potok .potok-login-notes { display: grid; gap: 0.35rem; color: var(--muted); font-size: 0.9rem; }
.potok .potok-login-notes p { margin: 0; }
/* Сцена: пока объёмная грузится (и без WebGL) — крупный знак; подпись предмета под курсором ставит скрипт */
.potok .potok-login-stage { position: relative; min-height: 35rem; overflow: hidden; }
.potok .potok-login-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.potok .potok-login-fallback { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity 0.6s; }
.potok .potok-login-fallback svg { display: block; width: 12.5rem; height: 12.5rem; filter: drop-shadow(0 30px 40px rgba(30, 60, 140, 0.25)); }
.potok .potok-login-stage.live .potok-login-fallback { opacity: 0; }
.potok .potok-login-label { position: absolute; left: var(--lx, 0); top: var(--ly, 0); z-index: 1; transform: translate(-50%, -140%); padding: 0.375rem 0.75rem; border-radius: 999px; background: rgba(14, 23, 38, 0.86); color: #fff; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s var(--potok-ease); }
.potok .potok-login-label.show { opacity: 1; }
/* Ожидание: карточка с огоньком — состояние запроса, код плитками, три шага */
.potok .potok-login-card { display: grid; gap: 1.1rem; padding: 1.35rem; border: 1px solid var(--line-soft); border-radius: 24px; background: var(--surface); box-shadow: var(--potok-shadow-3); }
.potok .potok-login-state { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; line-height: 1.35; }
.potok .potok-login-status { min-width: 0; }
.potok .potok-login-left { margin-left: auto; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.potok .potok-login-dot { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border: 2.4px solid var(--brand-soft); border-top-color: var(--brand); border-radius: 50%; animation: potok-login-spin 0.9s linear infinite; }
@keyframes potok-login-spin { to { transform: rotate(360deg); } }
.potok .potok-login-state[data-login-state="ok"] { color: var(--ok-ink); }
.potok .potok-login-state[data-login-state="gone"] { color: var(--bad); }
.potok .potok-login-state[data-login-state="offline"] { color: var(--warn-ink); }
.potok .potok-login-state:not([data-login-state="wait"]) .potok-login-dot { width: 0.7rem; height: 0.7rem; border: 0; background: currentColor; animation: none; }
.potok .potok-login-state[data-login-state="gone"] ~ * { opacity: 0.45; pointer-events: none; }
.potok .potok-login-code { display: grid; justify-items: start; gap: 0.5rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--wash); }
.potok .potok-login-code-label { color: var(--muted); font-size: 0.85rem; font-weight: 500; }
.potok .potok-login-code .quiet { font-size: 0.85rem; line-height: 1.45; }
.potok .potok-digits { display: flex; gap: 0.5rem; perspective: 600px; }
.potok .potok-digits b { display: grid; place-items: center; width: 2.9rem; height: 3.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--potok-shadow-1); font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; animation: potok-digit 520ms var(--potok-spring) both; }
.potok .potok-digits b:nth-child(2) { animation-delay: 90ms; }
.potok .potok-digits b:nth-child(3) { animation-delay: 180ms; }
.potok .potok-digits b:nth-child(4) { animation-delay: 270ms; }
@keyframes potok-digit { from { opacity: 0; transform: translateY(14px) rotateX(70deg); } }
.potok .potok-login-steps { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; counter-reset: potok-step; }
.potok .potok-login-steps > li { display: flex; align-items: flex-start; gap: 0.75rem; color: #344155; font-size: 0.95rem; line-height: 1.45; counter-increment: potok-step; }
.potok .potok-login-steps > li::before { content: counter(potok-step); flex: 0 0 auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-size: 0.8rem; font-weight: 700; }
.potok .potok-login-steps > li > div { min-width: 0; padding-top: 0.05rem; }
.potok .potok-login-open { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
.potok .potok-login-open .btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.potok .potok-login-open .btn svg { width: 20px; height: 20px; }
/* Другой аккаунт: QR-код той же ссылки и «Скопировать ссылку» — модули тёмные на белом, тихая зона в самом рисунке */
.potok .potok-login-qr { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.85rem; padding: 0.7rem; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--wash); }
.potok .potok-qr { flex: 0 0 auto; width: 8.5rem; height: 8.5rem; overflow: hidden; border-radius: 12px; box-shadow: var(--potok-shadow-1); }
.potok .potok-login-other { display: grid; justify-items: start; gap: 0.6rem; min-width: 0; }
.potok .potok-login-other p { margin: 0; color: var(--muted-deep); font-size: 0.85rem; line-height: 1.45; }
.potok .potok-login-check { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
@media (max-width: 51.99rem) {
  .potok .potok-login { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .potok .potok-login-stage { order: -1; min-height: 0; height: min(42vh, 20rem); }
  .potok .potok-login:not([data-step="choose"]) .potok-login-stage { display: none; }
  .potok .potok-login[data-step="choose"] .potok-login-brand { display: none; }
  .potok .potok-login-main { justify-content: flex-start; gap: 1.15rem; padding: 1.25rem 1rem 2.5rem; }
  .potok .potok-login h1 { font-size: 2rem; }
  .potok .potok-login-card { padding: 1.1rem; border-radius: 20px; }
  /* Узко для кода и подписи рядом: подпись вставала столбиком в слово — код над ней */
  .potok .potok-login-qr { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .potok .potok-qr { width: 7.5rem; height: 7.5rem; }
}

/* ── Переходы между страницами: экран перетекает, активный пункт меню переезжает ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: potok-vt-out 200ms var(--potok-ease, ease) both; }
::view-transition-new(root) { animation: potok-vt-in 340ms var(--potok-ease, ease) both; }
::view-transition-group(potok-here) { animation-duration: 380ms; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes potok-vt-out { to { opacity: 0; } }
@keyframes potok-vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .potok *, .potok *::before, .potok *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .potok .beam-svg, .potok .potok-wires .w-flow { display: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}