:root { --bg: #0f1216; --panel: #171b21; --panel2: #1d222a; --line: #2a313c; --text: #e6e9ee; --muted: #8b95a3; --accent: #4f9cf9; --accent2: #3b82f6; --ok: #34d399; --warn: #fbbf24; --err: #f87171; --radius: 10px; } /* светлая тема — переключается кнопкой (data-theme="light" на ) */ :root[data-theme="light"] { --bg: #f5f7fa; --panel: #ffffff; --panel2: #eef1f6; --line: #d9dfe7; --text: #1a2029; --muted: #5f6b7a; --accent: #2563eb; --accent2: #2563eb; --ok: #0f9d6b; --warn: #b45309; --err: #dc2626; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--panel2); padding: 1px 6px; border-radius: 6px; } /* topbar — одинаковая в обеих темах: светлый холодный градиент, на нём синий логотип читается (контраст 4.3); поэтому цвета здесь фиксированные, а не из переменных темы */ .topbar { display: flex; align-items: center; gap: 18px; padding: 0 20px; height: 56px; background: linear-gradient(180deg, #eef4ff 0%, #dbe7ff 100%); border-bottom: 1px solid #c3d4f2; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; } .brandmark { flex: none; display: block; } .brand .bname { color: #12203a; font-weight: 700; } .brand .bsub { color: #5b6b86; font-weight: 500; font-size: 12px; align-self: flex-end; margin-bottom: 3px; } .env-badge { font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 2px 9px; border-radius: 6px; } .env-badge.env-dev { background: rgba(251,191,36,.18); color: var(--warn); } .env-badge.env-prod { background: rgba(248,113,113,.18); color: var(--err); } .topbar .env-badge.env-dev { background: rgba(180,83,9,.14); color: #8a4a06; } .topbar .env-badge.env-prod { background: rgba(185,28,28,.12); color: #b91c1c; } .topbar.env-dev { box-shadow: inset 0 -2px 0 rgba(180,83,9,.45); } .topbar.env-prod { box-shadow: inset 0 -2px 0 rgba(185,28,28,.4); } .topbar nav a { color: #5b6b86; margin-right: 14px; } .topbar nav a:hover { color: #12203a; text-decoration: none; } .spacer { flex: 1; } .who { color: #5b6b86; font-size: 13px; text-align: right; } .who small { display: block; color: #1d4ed8; font-size: 11px; } .theme-toggle { background: transparent; border: 1px solid #b9cbeb; color: #5b6b86; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; font-size: 15px; line-height: 1; margin-right: 12px; } .theme-toggle:hover { color: #12203a; border-color: #2563eb; } .topbar .btn-ghost { color: #5b6b86; border-color: #b9cbeb; } .topbar .btn-ghost:hover { color: #12203a; border-color: #2563eb; } /* адаптив: тянется под ширину экрана (проценты), с потолком чтобы на ультравайде строки не были бесконечными; на узких — почти во всю ширину */ .wrap { width: 100%; max-width: min(2100px, 94vw); margin: 0 auto; padding: 24px clamp(16px, 2vw, 32px) 60px; } .crumbs { color: var(--muted); font-size: 13px; margin-bottom: 8px; } .page-head { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 20px; } .page-head h1 { margin: 0; font-size: 24px; } /* правка витринного имени клиента прямо в шапке карточки */ .page-head .name-edit { align-items: center; gap: 8px; } .page-head .name-edit input { font: inherit; font-size: 20px; padding: 3px 8px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; } .page-head .err { color: var(--err); font-size: 12px; } h2 { font-size: 17px; margin: 28px 0 12px; } section { margin-top: 8px; } .muted { color: var(--muted); } .small { font-size: 12px; } .num { text-align: right; } .neg { color: var(--err); } /* buttons */ .btn { background: var(--accent2); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font-size: 15px; cursor: pointer; } .btn:hover { background: var(--accent); } .btn-ghost { color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; font-size: 13px; } .btn-ghost:hover { color: var(--text); text-decoration: none; border-color: var(--accent); } /* tables */ .grid { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .grid th, .grid td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); } .grid th { background: var(--panel2); color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; } .grid tr:last-child td { border-bottom: 0; } .grid tbody tr:hover { background: var(--panel2); } /* cards */ .cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 8px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; min-width: 160px; } .card-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; } .card-value { font-size: 22px; font-weight: 700; margin-top: 4px; } .card.mini-card { min-width: 120px; padding: 10px 14px; } .card.mini-card .card-value { font-size: 18px; } /* Обзор клиента: заголовок секции + раскрытие тарифа */ .ov-h3 { margin: 18px 0 6px; font-size: 15px; } .plan-more { margin-top: 8px; } .plan-more > summary { cursor: pointer; color: var(--muted); font-size: 12px; } .plan-more > summary:hover { color: var(--text); } table.plan-tiers { margin-top: 6px; border-collapse: collapse; font-size: 12px; } table.plan-tiers th, table.plan-tiers td { padding: 3px 10px 3px 0; text-align: left; } table.plan-tiers th { color: var(--muted); font-weight: 500; } table.plan-tiers td.num, table.plan-tiers th.num { text-align: right; } /* badges */ .badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--panel2); color: var(--muted); text-transform: uppercase; letter-spacing: .02em; } .badge.transfer { background: rgba(52,211,153,.15); color: var(--ok); } .badge.reject { background: rgba(248,113,113,.15); color: var(--err); } .badge.err { background: rgba(248,113,113,.15); color: var(--err); } .badge.warn { background: rgba(251,191,36,.15); color: var(--warn); } .badge.used { background: rgba(251,191,36,.15); color: var(--warn); cursor: help; text-transform: none; } .empty { color: var(--muted); padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius); } .alert { padding: 10px 14px; border-radius: 8px; margin: 10px 0; } .alert.error { background: rgba(248,113,113,.12); color: var(--err); border: 1px solid rgba(248,113,113,.3); } /* --- редактор скриптов --- */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; } .tab { padding: 8px 14px; font-size: 14px; color: var(--muted); cursor: pointer; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; } .tab.on { color: var(--text); background: var(--panel); border-color: var(--line); margin-bottom: -1px; } .tab.disabled { opacity: .5; cursor: default; } .tab .tabn { font-size: 11px; color: var(--muted); background: var(--panel2); border-radius: 20px; padding: 0 6px; margin-left: 2px; } .tab.on .tabn { color: var(--accent); } /* панели вкладок клиента */ .tabpane { display: none; } .tabpane.on { display: block; } /* подменю внутри вкладки (напр. Настройки: Маршруты/Календари/Справочники/Точки) */ .subtabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); } .subtab { padding: 6px 12px; font-size: 13px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; } .subtab:hover { color: var(--text); } .subtab.on { color: var(--text); border-bottom-color: var(--accent); } .subpane { display: none; } .subpane.on { display: block; } .pane-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; } .grid tr.row-muted td { color: var(--muted); } .grid tr.row-muted strong { font-weight: 500; } .sec { margin-bottom: 22px; } .sec h3 { font-size: 15px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .field { margin-bottom: 14px; } .flabel { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 5px; } .tag { font-size: 11px; padding: 1px 7px; border-radius: 20px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); } .tag.full { background: rgba(79,156,249,.12); color: var(--accent); border-color: rgba(79,156,249,.3); } .tag.staff { background: rgba(251,191,36,.12); color: var(--warn); border-color: rgba(251,191,36,.3); } .tag.comm { background: rgba(52,211,153,.12); color: var(--ok); border-color: rgba(52,211,153,.3); } .inp2 { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 14px; box-sizing: border-box; font-family: inherit; } .inp2:focus { outline: none; border-color: var(--accent); } textarea.inp2 { min-height: 46px; resize: vertical; } .frow { display: flex; align-items: flex-start; gap: 8px; } .spk { flex: none; width: 32px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--accent); cursor: pointer; } .spk:hover { border-color: var(--accent); } .spk.playing { color: var(--ok); } .listrow { margin-bottom: 6px; } .card2 { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; background: var(--panel); } .card2 .chead { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; } .card2 .cf { margin: 4px 0; } .card2 .flab { margin-bottom: 1px; } .ro { color: var(--muted); font-size: 12px; } .kvprev { display: flex; flex-wrap: wrap; gap: 4px; } .subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .issues { margin-top: 12px; } .issue { padding: 7px 12px; border-radius: 8px; margin-bottom: 6px; font-size: 13px; } .issue.error { background: rgba(248,113,113,.12); color: var(--err); } .issue.warning { background: rgba(251,191,36,.12); color: var(--warn); } .issue.ok { background: rgba(52,211,153,.12); color: var(--ok); } .yamlarea { width: 100%; min-height: 420px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; color: var(--text); font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 1.6; box-sizing: border-box; } .toast { position: static; margin: 8px 0; } .adv-wrap { border-top: 1px dashed var(--line); padding-top: 10px; } .adv-toggle { color: var(--muted); font-size: 13px; cursor: pointer; user-select: none; } /* --- редактор v2 (аккордеон) --- */ /* шапка редактора липнет к верху: кнопки «Сохранить/Опубликовать» видны на любой прокрутке */ .ed-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; margin: 0 0 12px; padding: 10px 0 8px; background: var(--bg); border-bottom: 1px solid var(--line); } .ed-actions .grow, .chead .grow { flex: 1; } /* кнопка требует внимания: несохранённые правки (черновик) / неопубликованный черновик */ .ed-actions .attn { border-color: var(--warn); box-shadow: 0 0 0 2px rgba(251,191,36,.5); } .ed-actions .btn-ghost.attn { color: var(--warn); } .status-pill { font-size: 12px; padding: 3px 10px; border-radius: 20px; background: rgba(251,191,36,.15); color: var(--warn); } .status-pill.pub { background: rgba(52,211,153,.15); color: var(--ok); } .acc { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--panel); overflow: hidden; } .acc > summary { padding: 12px 16px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } .acc > summary::before { content: "▸"; color: var(--muted); font-size: 12px; } .acc[open] > summary::before { content: "▾"; } .acc > summary::-webkit-details-marker { display: none; } .acc-body { padding: 4px 16px 14px; border-top: 1px solid var(--line); } .acc.sub { border-style: dashed; margin: 10px 0 4px; background: var(--bg); } .acc.sub > summary { font-size: 13px; font-weight: 500; color: var(--muted); padding: 8px 12px; } .acc.sub > summary .subhint { font-weight: 400; opacity: .75; } /* метка важности на заголовке секции (порядок задаёт группу, крупных блоков нет) */ .secbadge { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 20px; letter-spacing: .01em; margin-left: 2px; } .secbadge.ok { background: rgba(52,211,153,.15); color: var(--ok); } .secbadge.todo { background: rgba(248,113,113,.15); color: var(--err); } .secbadge.rec { background: rgba(251,191,36,.15); color: var(--warn); } .secbadge.opt { background: var(--panel2); color: var(--muted); font-weight: 500; } .secbadge.pro { background: rgba(201,162,39,.14); color: #b78a12; font-weight: 600; } :root:not([data-theme="light"]) .secbadge.pro { color: #e6c34d; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .secbadge.pro { color: #e6c34d; } } .fld { margin: 12px 0; } .fld.dev { opacity: .6; } .flab { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 4px; } .fhelp { font-size: 12px; color: var(--muted); margin: -1px 0 5px; opacity: .85; } .fhelp.price-note { color: var(--warn); opacity: 1; font-weight: 500; } .row { display: flex; align-items: flex-start; gap: 8px; } .inp { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 14px; box-sizing: border-box; font-family: inherit; } .inp:focus { outline: none; border-color: var(--accent); } textarea.inp { resize: vertical; } .inp.sel, .inp.num { max-width: 340px; } .inp.rng { max-width: 220px; } .rngval { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); min-width: 34px; font-size: 13px; padding-top: 6px; } .chk { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); } .mini { font-size: 12px; color: var(--muted); padding-top: 6px; } .deflt { display: inline-block; font-size: 12px; color: var(--muted); margin-top: 3px; } /* дефолтный пул reaction-поля: серые чипы-плейсхолдеры (не значения, а «что будет, если пусто») */ .defpool { margin: 5px 0 2px; display: flex; flex-direction: column; gap: 4px; } .defrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; } .deftitle { font-size: 11px; color: var(--muted); margin-right: 2px; } .defchip { font-size: 11px; padding: 1px 7px; border-radius: 20px; background: var(--panel2); color: var(--muted); border: 1px dashed var(--line); } .defnote { font-size: 11px; color: var(--muted); font-style: italic; } .defstar { color: var(--accent); font-weight: 700; font-style: normal; } /* reaction-поле: переключатель «Стандартные / Свои» */ .rc { display: flex; flex-direction: column; gap: 3px; } .rc-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; width: max-content; } .rc-opt input { margin: 0; } .rc-std, .rc-own { margin: 2px 0 4px 22px; } .tag.gx { background: rgba(79,156,249,.10); color: var(--accent); border-color: rgba(79,156,249,.3); align-self: flex-start; } .spk { flex: none; width: 32px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--accent); cursor: pointer; } .spk:hover { border-color: var(--accent); } .spk.on { color: var(--ok); } /* обёртка «фраза + 🔊»: её ставит инжектор (editor-form.js) там, где редактор нарисовал поле без своей кнопки — поле тянется, кнопка прижата справа от него */ .pfwrap { display: flex; align-items: flex-start; gap: 6px; width: 100%; } .pfwrap > .pf { flex: 1 1 auto; min-width: 0; } .pfwrap > .spk { width: 30px; height: 30px; padding: 0; font-size: 13px; } /* ── Компактный редизайн полей ─────────────────────────────────────────── */ /* сетка секции: короткие поля пакуются в ряд, длинные — на всю ширину. max-width — форма не растягивается на весь монитор (иначе enum/поля уезжают по горизонтали) */ .secgrid { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: flex-start; max-width: 1040px; } .secgrid > .fld { flex: 1 1 100%; margin: 8px 0; } /* длинные/по умолчанию — свой ряд */ .secgrid > .fld.ftxt { flex: 1 1 300px; } /* текст — средний */ .secgrid > .fld.fenum { flex: 1 1 300px; } /* выбор */ .secgrid > .fld.fnum { flex: 0 1 330px; } /* число: инпут узкий, но длинной метке (nowrap) нужен простор — иначе перенос и разнобой */ .secgrid > .fld.frange { flex: 1 1 340px; } /* слайдер — всегда просторнее (ползунок+значение+подпись) */ /* короткие поля: метка СЛЕВА, контрол справа сужен под значение (compact-редизайн, п.2). flex-wrap — чтобы подсказка «по умолчанию…» падала ПОД контрол, а не жала его в ряду */ .fld.short { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } /* метку НЕ переносим (nowrap) и не даём ужиматься — иначе часть полей уходит в «метка сверху», и поля в ряду не выравниваются. Контрол (.row) ужимается сам. */ .fld.short > .flab { flex: 0 0 auto; white-space: nowrap; font-size: 12px; margin-bottom: 0; } /* у ползунка нет текстовой базовой линии (браузер берёт низ блока) — подпись уезжала под полосу. Для слайдера выравниваем по центру: метка ровно напротив шкалы. */ .fld.short.frange { align-items: center; } .fld.short.frange > .row { align-items: center; } .fld.short.frange .rngval { padding-top: 0; } .fld.short > .row { flex: 1 1 auto; min-width: 0; } .fld.short > .deflt { flex: 1 1 100%; margin-top: 1px; } /* «по умолчанию…» — своей строкой под полем */ .fld.short .inp, .fld.short .inp.sel { width: 100%; max-width: 440px; } /* enum не во весь монитор */ .fld.short .inp.num { flex: 0 0 auto; width: 72px; } /* число — маленький инпут, метка забирает остаток */ .fld.short .inp.rng { width: 100%; min-width: 160px; max-width: 260px; } /* ползунок: просторный, но не во всю строку */ /* настройки-объекты (голос/движки/живость): НЕ пакуем всё в одну строку — макс ~2 в ряд */ .mapf .mapbody.secgrid { max-width: 820px; row-gap: 10px; } .mapf .mapbody.secgrid > .fld.ftxt, .mapf .mapbody.secgrid > .fld.fenum { flex: 1 1 340px; } .mapf .mapbody.secgrid > .fld.frange { flex: 1 1 100%; } /* слайдер — своя строка, полный простор */ /* булево: галочка ПЕРЕД названием, вся строка кликабельна */ .boolfld { margin: 4px 0; } .boolrow { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; padding: 6px 0; color: var(--text); } .boolrow input[type=checkbox] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; } .boollab { font-size: 14px; } /* пояснение под значком «?» (тултип по наведению) */ .qhelp { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 600; cursor: help; flex: none; } .qhelp:hover, .qhelp:focus { color: var(--accent); border-color: var(--accent); outline: none; } .qtip { position: fixed; z-index: 9999; max-width: 340px; max-height: 70vh; overflow-y: auto; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 13px; line-height: 1.45; box-shadow: 0 6px 20px rgba(0,0,0,.35); display: none; } .tag.beta { background: rgba(52,211,153,.12); color: var(--ok); border-color: rgba(52,211,153,.35); } /* компактный тулбар пауза/акцент для фразовых полей (.pf) — всплывает у поля в фокусе */ .pftb { position: fixed; z-index: 9998; display: none; gap: 3px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.3); } .pftb button { border: 0; background: transparent; color: var(--text); font-size: 12px; padding: 4px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .pftb button:hover { background: var(--accent); color: #fff; } /* списки как теги (стиль A — мягкие акцентные) */ .tagbox { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .tagchip { display: inline-flex; align-items: center; background: color-mix(in srgb, var(--accent) 13%, transparent); border-radius: 8px; padding: 2px 3px 2px 10px; } .tagchip .litem { background: transparent; border: 0; color: var(--accent); font-size: 13px; font-weight: 500; padding: 4px 2px; min-width: 22px; font-family: inherit; } .tagchip .litem:focus { outline: none; } .tagx { border: 0; background: transparent; color: var(--accent); opacity: .5; cursor: pointer; font-size: 14px; line-height: 1; width: 18px; height: 18px; border-radius: 5px; } .tagx:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 22%, transparent); } .tagspk { border: 0; background: transparent; color: var(--accent); opacity: .6; cursor: pointer; font-size: 12px; width: 18px; } .tagspk:hover { opacity: 1; } .tagadd { border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 8px; padding: 4px 11px; font-size: 13px; cursor: pointer; } .tagadd:hover { border-color: var(--accent); color: var(--accent); } .tagadd .plus { font-weight: 600; } /* fb-редакторы, СПИСКИ СЛОВ (варианты вопроса, переспрос, ключевые слова, триггеры мета-интентов, примеры фраз, синонимы точек, stt) — теги в строку (стиль A). Скоуп .fb-taglist — key-value списки (schedule/автозаполнение) остаются столбиком. */ .fb-list.fb-taglist { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 7px; } .fb-taglist .fb-lrow { display: inline-flex; width: auto; align-items: center; gap: 0; background: color-mix(in srgb, var(--accent) 13%, transparent); border-radius: 8px; padding: 2px 3px 2px 10px; } .fb-taglist .fb-lrow .fb-litem { width: auto; min-width: 22px; background: transparent; border: 0; box-shadow: none; color: var(--accent); font-weight: 500; font-size: 13px; padding: 4px 2px; } .fb-taglist .fb-lrow .fb-litem:focus { outline: none; } .fb-taglist .fb-lrow .fb-x { border: 0; background: transparent; color: var(--accent); opacity: .5; cursor: pointer; font-size: 14px; line-height: 1; width: 18px; height: 18px; border-radius: 5px; padding: 0; } .fb-taglist .fb-lrow .fb-x:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 22%, transparent); } .fb-taglist .fb-lrow .fb-spk { border: 0; background: transparent; color: var(--accent); opacity: .6; width: 18px; font-size: 12px; } .fb-taglist .fb-lrow .fb-spk:hover { opacity: 1; } .fb-taglist > .fb-chip { border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 8px; padding: 4px 11px; font-size: 13px; cursor: pointer; } .fb-taglist > .fb-chip:hover { border-color: var(--accent); color: var(--accent); } .chip { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel2); color: var(--muted); cursor: pointer; } .chip:hover { border-color: var(--accent); color: var(--accent); } .x { flex: none; width: 28px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; } .x:hover { color: var(--err); border-color: var(--err); } .lrow { margin-bottom: 6px; } .card2 { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg); } .chead { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 6px; } .cf { margin: 6px 0; } .cf.ro { color: var(--muted); font-size: 12px; } /* компактная карточка (точки перевода): без заголовка, поля в ряд, × в углу */ .card2-compact { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; padding: 8px 30px 8px 10px; } .card2-compact .cf { margin: 0; } .card2-compact .cf .flab { font-size: 12px; } .card2-compact .chk { margin: 0; } .cardx { position: absolute; top: 4px; right: 6px; } /* карточка без заголовка (FAQ): шапки нет — «×» в углу, поля начинаются сразу */ .card2-headless { position: relative; padding-right: 42px; } .mapf .mapbody { border-left: 2px solid var(--line); padding-left: 12px; margin-top: 4px; } /* блок-строка (фон/клавиатура): галочка называет блок, её громкость — рядом, без рамки и ярлыка. Фиксированная колонка под галочкой держит ползунки соседних строк на одной вертикали. */ .mapinline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin: 2px 0; } .mapinline > .fld { margin: 0; } .mapinline > .boolfld { flex: 0 0 auto; min-width: 210px; } .mapinline > .boolfld .boolrow { padding: 3px 0; } .mapinline > .fld.frange { flex: 0 1 300px; } .devbox { font-size: 13px; color: var(--muted); background: var(--panel2); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; } .tag { font-size: 11px; padding: 1px 7px; border-radius: 20px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); } .tag.req { color: var(--accent); } .tag.coin { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border-radius: 50%; border: 1px solid #b17d0a; font-size: 10px; font-weight: 800; line-height: 1; color: #7a4d05; background: radial-gradient(circle at 34% 28%, #ffe9a8 0%, #f6c243 46%, #d69412 100%); box-shadow: 0 1px 1.5px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.35); vertical-align: middle; text-shadow: 0 1px 0 rgba(255,255,255,.35); } .tag.staff { background: rgba(251,191,36,.12); color: var(--warn); border-color: rgba(251,191,36,.3); } .tag.dev { background: rgba(139,149,163,.15); color: var(--muted); } /* мелкая приподнятая сноска («профи») — не тег */ .fnote { font-size: 9px; line-height: 1; vertical-align: super; color: var(--muted); margin-left: 3px; font-weight: 600; cursor: help; } .fnote.pro { color: #b78a12; } /* «нужен ИИ» — отдельный цвет: не совпадает ни с подписью поля, ни с золотой сноской «профи». Когда выбран тариф БЕЗ ИИ (data-ai-tier="0" на body, ставит editor-ui.js), сноска становится предупреждающей: поле правится, но на этом тарифе движок его не читает. */ /* «с ИИ» — та же формулировка, что в названии тарифа. На тарифе «Без ИИ» чип гаснет вместе с самим блоком (.ai-off), чтобы автор видел: поле есть, но на этом тарифе не работает. */ .tag.ai { background: rgba(111,91,214,.12); color: #6f5bd6; border-color: rgba(111,91,214,.35); white-space: nowrap; } /* «без ИИ» рядом с тарифом ломался на две строки */ /* цвет «ИИ» постоянный — он опознаёт тему, а не состояние: что поле сейчас не работает, видно по погашенному блоку (.ai-off), а не по перекрашенному чипу */ .ai-off > .flab, .ai-off > label { opacity: .75; } .ai-off .inp, .ai-off .inp2, .ai-off textarea, .ai-off input, .ai-off select { opacity: .55; cursor: not-allowed; } :root:not([data-theme="light"]) .fnote.pro { color: #e6c34d; } :root:not([data-theme="light"]) .tag.ai { color: #a99cf0; border-color: rgba(169,156,240,.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fnote.pro { color: #e6c34d; } } /* под-заголовок внутри блока-подгруппы (вертикальная полоса) */ .sublab { font-size: 13px; font-weight: 600; color: var(--text); margin: 12px 0 2px; } /* платное поле: стоимость в одну строку с полем */ .secgrid > .pricewrap { flex: 1 1 100%; margin: 8px 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .pricewrap > .fld { margin: 0; flex: 0 1 auto; } .price-note { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; } .issues { margin: 8px 0; } .issue { padding: 7px 12px; border-radius: 8px; margin-bottom: 6px; font-size: 13px; } .issue.error { background: rgba(248,113,113,.12); color: var(--err); } .issue.warning { background: rgba(251,191,36,.12); color: var(--warn); } .issue.ok { background: rgba(52,211,153,.12); color: var(--ok); } /* login */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 32px; width: 340px; display: flex; flex-direction: column; gap: 12px; } .login-card h1 { font-size: 20px; margin: 0; } .login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); } .login-card input { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 15px; } .login-card input:focus { outline: none; border-color: var(--accent); } .login-card .btn { margin-top: 6px; } /* ── Редактор «Сбор заявки» (дерево flow + карточки полей) ─────────────────── */ .fb-root { margin-top: 6px; } .fb-steps { display: flex; flex-direction: column; gap: 8px; } .fb-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 0; } .fb-add > span { font-size: 12px; color: var(--muted); } .fb-chip { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel2); color: var(--muted); cursor: pointer; } .fb-chip:hover { border-color: var(--accent); color: var(--accent); } .fb-step { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; } .fb-step.fb-select { border-color: rgba(79,156,249,.4); } .fb-step.fb-finish { border-color: rgba(52,211,153,.35); } .fb-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--panel2); } .fb-grip { cursor: grab; color: var(--muted); font-size: 12px; letter-spacing: -2px; } .fb-ico { font-size: 14px; color: var(--accent); } .fb-title { font-size: 13px; font-weight: 600; } .fb-grow { flex: 1; } .fb-mini { font-size: 10px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--muted); cursor: pointer; } .fb-mini:hover { color: var(--accent); border-color: var(--accent); } .fb-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; } .fb-x:hover { color: var(--err); } .fb-stepbody { padding: 10px 12px; } .fb-note { font-size: 12px; color: var(--muted); background: var(--panel2); border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; } .fb-card { display: flex; flex-direction: column; gap: 8px; } .fb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fb-cell { display: flex; flex-direction: column; } .fb-lab { font-size: 12px; color: var(--muted); margin-bottom: 3px; } .fb-help { font-size: 11px; color: var(--muted); opacity: .85; margin-bottom: 4px; } .fb-in { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--text); font-size: 13px; font-family: inherit; } .fb-in:focus { outline: none; border-color: var(--accent); } textarea.fb-in { resize: vertical; } .fb-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .fb-sub { border: 1px dashed var(--line); border-radius: 8px; background: var(--bg); } .fb-sub > summary { font-size: 12px; font-weight: 500; color: var(--muted); padding: 6px 10px; cursor: pointer; list-style: none; } .fb-sub > summary::-webkit-details-marker { display: none; } .fb-sub > summary::before { content: "▸ "; color: var(--muted); } .fb-sub[open] > summary::before { content: "▾ "; } .fb-subbody { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; } .fb-list { display: flex; flex-direction: column; gap: 5px; } .fb-lrow { display: flex; align-items: center; gap: 6px; } .fb-spk { border: 1px solid var(--line); background: var(--panel2); border-radius: 6px; cursor: pointer; padding: 3px 6px; font-size: 12px; } .fb-spk.on { border-color: var(--accent); } .fb-values { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); } .fb-seg { display: flex; gap: 14px; margin: 4px 0 8px; } .fb-vt { width: 100%; border-collapse: collapse; font-size: 13px; } .fb-vt th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 500; padding: 2px 4px; } .fb-vt td { padding: 2px 4px; } .fb-vval { max-width: 180px; } /* вложенные ветки — отступ + акцентная линия слева */ .fb-branches { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .fb-branch { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 10px; background: var(--bg); } .fb-bhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .fb-bid { max-width: 150px; } .fb-blabel { flex: 1; } .fb-branch .fb-steps { margin-top: 8px; padding-left: 8px; border-left: 1px dashed var(--line); } /* ── Составные редакторы (schedules и пр.) ─────────────────────────────────── */ .fb-sec { font-size: 14px; font-weight: 600; margin: 18px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); } /* черта РАЗДЕЛЯЕТ блоки, поэтому у первого её нет: над ним и так граница тела секции */ .fb-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .sc-arrow { color: var(--muted); } .sc-day { max-width: 200px; } .sc-time { max-width: 160px; } /* сворачивание шага дерева */ .fb-caret { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px; } .fb-step.fb-collapsed > .fb-head .fb-caret { transform: rotate(-90deg); } .fb-step.fb-collapsed > .fb-stepbody { display: none; } /* сворачивание ветки развилки — прячем синонимы и вложенные шаги, шапка (значение → название) видна */ .fb-branch.fb-collapsed > .fb-bhead .fb-caret { transform: rotate(-90deg); } .fb-branch.fb-collapsed > .fb-bbody { display: none; } .fb-bbody { padding-top: 6px; } .fb-bwhen { margin: 4px 0 8px; } .fb-bsummary { font-size: 13px; color: var(--text); font-weight: 500; } .fb-branch.fb-else { border-left-color: var(--muted); } .fb-branch.fb-else > .fb-bhead .fb-bsummary { color: var(--muted); font-style: italic; } /* мета-интенты: бейджи и приглушённые (наследуемые) карточки */ .fb-tagi { font-size: 11px; padding: 1px 8px; border-radius: 20px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); margin-left: 4px; } .fb-tagi.cust { color: var(--accent); border-color: rgba(79,156,249,.4); } .fb-tagi.chg { color: var(--ok); border-color: rgba(52,211,153,.4); } .fb-tagi.sys { color: var(--warn); border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); } /* read-only значения системного мета-интента */ .fb-sysmi { border-left: 2px solid rgba(251,191,36,.5); } .fb-ro { font-size: 14px; color: var(--text); padding: 3px 0 8px; } /* системный список (триггеры/примеры) — вид редактора, но неизменяем */ .fb-ro-list .fb-litem[readonly] { background: var(--panel2); color: var(--muted); cursor: default; } .fb-ro-list .fb-litem[readonly]:focus { outline: none; } .fb-ro.mini { font-size: 12px; color: var(--muted); } /* строка поля в confirm-шаге (поле → как зачитать → когда) */ .fb-citem { display: flex; align-items: center; gap: 6px; } .fb-citem .fb-ckey { flex: 0 0 170px; } .fb-citem .fb-cas { flex: 1 1 auto; } .fb-citem .fb-cwhen { flex: 0 0 155px; } .fb-step.fb-inherited { opacity: .7; } .fb-step.fb-inherited .fb-head { background: transparent; } /* шапка редактора: клиент (read-only) + тариф */ .top-meta { display: flex; gap: 24px; flex-wrap: wrap; margin: 6px 0 14px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } .top-meta .tm { display: flex; flex-direction: column; gap: 4px; } .top-meta .tm-ro { font-size: 14px; font-weight: 600; color: var(--text); font-family: var(--mono, monospace); } .top-meta .tm-row { display: flex; align-items: center; gap: 10px; } .top-meta .tm-rate { font-size: 12px; color: var(--muted); white-space: nowrap; } /* выбор отдела/точки в карточке перевода — просторнее */ .cf-wide .inp.sel { min-width: 300px; width: auto; } /* ── Виджет «Приветствие и прощания» (условные фразы) ─────────────────────── */ .ph-cat { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: var(--panel); } .ph-catlabel { font-size: 14px; font-weight: 600; margin-bottom: 6px; } /* в разделе «Скрипт разговора» заголовок даёт h3 — свой заголовок категории не дублируем */ #ph-greeting .ph-catlabel, #ph-silence_goodbye .ph-catlabel { display: none; } /* «Прощание после тишины»: заголовок даёт наш .sublab, поэтому убираем рамку-коробку ph-cat (иначе двойная рамка: коробка + поле внутри) */ #ph-silence_goodbye .ph-cat { border: 0; padding: 0; margin: 4px 0 0; background: transparent; } .ph-vars { display: flex; flex-direction: column; gap: 10px; } .ph-var { padding-left: 0; } /* общий конструктор условий (conditions.js) — фразы и ветки */ .cond-group { margin-bottom: 4px; } .cond-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .cond-if { font-size: 12px; color: var(--muted); min-width: 26px; } .cond-c { max-width: 200px; } .cond-yn { max-width: 90px; } .cond-eq { color: var(--muted); } .cond-row > [data-cond-ctrl] { display: inline-flex; gap: 6px; align-items: center; flex-wrap: nowrap; } .cond-and { font-size: 12px; margin: 2px 0 0 26px; padding: 1px 8px; } .ph-varbody { display: flex; align-items: flex-start; gap: 6px; } .ph-varbody textarea { flex: 1; } .ph-deflabel { font-size: 12px; color: var(--accent); font-weight: 500; } .ph-cat .fb-chip { margin-top: 8px; } /* Примечание, которое касается ТОЛЬКО тарифа без ИИ (напр. «проверка нескольких полей»): тариф ведёт body[data-ai-tier] (editor-ui.js), поэтому показ — чистым CSS, без ветки в JS. */ .fb-ai-warn{display:none} body[data-ai-tier="0"] .fb-ai-warn{display:block} /* ── карточка клиента: полоса состояния, тариф, гистограмма, диалог ── */ .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; } .card-value.sm { font-size: 15px; line-height: 1.3; } .card-btn { text-align: left; font: inherit; cursor: pointer; } .card-btn:hover { border-color: var(--accent); } .plan-details { margin: 0 0 16px; padding: 14px 16px; } .plan-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 14px; } table.plain { width: 100%; border-collapse: collapse; font-size: 13px; } table.plain td { padding: 4px 0; border-bottom: 1px solid var(--line); } .ov-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin-bottom: 14px; } .ov-chart, .ov-outcomes { padding: 12px 14px; } .spark { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: 10px; } .spark-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .spark-bar { background: var(--accent2); border-radius: 3px 3px 0 0; min-height: 2px; } .spark-day { font-size: 11px; color: var(--muted); text-align: center; margin-top: 4px; } .cell-clip { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-sm { padding: 2px 8px; font-size: 12px; } .summary-card { padding: 12px 14px; } .dialog { display: flex; flex-direction: column; gap: 6px; } .turn { display: grid; grid-template-columns: 52px 62px 1fr; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .turn.bot { background: var(--panel2); } .turn-t { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .turn-who { color: var(--muted); font-size: 12px; } .topup-form { padding: 12px 14px; margin-bottom: 12px; } .topup-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .topup-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .topup-row label.grow { flex: 1; min-width: 200px; } .topup-row input { font: inherit; padding: 6px 8px; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; } .err { color: var(--err); } /* ---- тест скрипта в чате (страница /scenarios//test) ---- */ .testgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; } .testgrid .panel { padding: 12px; } .chatbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .feed { min-height: 320px; max-height: 56vh; overflow-y: auto; padding: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; } .feed .msg { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); max-width: 82%; } .feed .msg.user { margin-left: auto; background: var(--panel2); } .feed .msg.err { border-color: var(--err); color: var(--err); max-width: 100%; } .feed .who { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .feed .txt { white-space: pre-wrap; } .feed .why { margin-top: 6px; font-size: 12px; color: var(--muted); } .feed .why summary { cursor: pointer; } .extmark { margin-top: 4px; font-size: 11px; color: var(--muted); } .ext-missing { color: var(--warn, #d08c00); } .sayrow, .saverow { display: flex; gap: 8px; margin-top: 10px; } .sayrow .inp, .saverow .inp { flex: 1; } .sumrow { margin: 4px 0; } .vd { font-weight: 600; margin-top: 6px; } .vd-ok { color: var(--ok, #3aa76d); } .vd-err { color: var(--err); } .vd-line { font-size: 12px; color: var(--muted); } .vd-line.warn { color: var(--warn, #d08c00); } @media (max-width: 900px) { .testgrid { grid-template-columns: 1fr; } }