/* ClientsChat — ОДЕЖДА ДВИЖКА ДОСКИ: рама бесконечного холста и стеклянный тулбар инструментов.
 *
 * 🔴 ОДНА декларация на продукт (канон `guest-call-parity`, CLIE-1848·B): эти классы рисует
 * `ccboard.js` (`window.CcBoard`), а грузят его ВСЕ ТРИ страницы, где живёт доска беседы —
 * основной клиент (`index.html`, после style.css), окно онлайн-чата на чужом сайте
 * (`wchat/room.js`, лениво) и гостевая страница встречи `/j/` (`guest.html`, ревью #1907:
 * доска гостя — рама этого же движка, `#ccBoardSheet > .cc-schema`). `?v=` у всех трёх —
 * одно число. В `style.css` этих правил больше нет — второй копии не заводить.
 *
 * Цвета — только токены продукта (`--bg`, `--text`, `--muted`, `--line`, `--panel`,
 * `--panel-2`, `--primary`). Окно чата, где токены другие (`--cc-*`), ставит МОСТ на своей
 * раме — своей палитры у доски нет (канон theme-contrast: обе темы одинаково читаемы).
 */

/* ═══════════════════ Рама холста — «Схема» задач, доска беседы, цепочка автоматизаций ═══════════════════ */
.cc-schema { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; background: var(--bg); }
/* n8n: точечная сетка живёт на ВЬЮПОРТЕ — background-position/size ей задаёт apply() из трансформа,
   поэтому она ЕДЕТ и МАСШТАБИРУЕТСЯ вместе с графом (как canvas figma/miro/n8n), а не висит статично. */
.cc-schema-vp { position: absolute; inset: 0; overflow: hidden; cursor: grab;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 13%, transparent) 1.4px, transparent 1.6px);
  background-size: 26px 26px; background-position: 0 0; }
.cc-schema-vp.panning { cursor: grabbing; }
.cc-schema-vp.linking { cursor: crosshair; }
.cc-schema-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; z-index: 1; }
.cc-schema-gl { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* ── n8n/miro/figma: МИНИ-КАРТА (обзор графа + рамка вьюпорта; клик/перетаскивание = навигация) ── */
.cc-schema-map { position: absolute; top: 14px; right: 14px; z-index: 9; border-radius: 12px; overflow: hidden; padding: 0; line-height: 0;
  background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 24px 44px -26px rgba(0,0,0,.55); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); }
.cc-schema-map canvas { display: block; cursor: pointer; border-radius: 12px; }
/* ── стеклянный тулбар ── */
.cc-schema-tools { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10;
  width: max-content; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 3px; padding: 5px; border-radius: 13px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 80%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.5); }
.cc-sch-btn { flex: none; height: 32px; min-width: 32px; width: auto; margin: 0; padding: 0 10px; border: none; background: transparent; color: var(--muted); border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
  white-space: nowrap; transition: background .1s, color .1s; }
.cc-sch-btn .ic { flex: none; width: 16px; height: 16px; }
.cc-sch-btn:hover { background: var(--panel-2); color: var(--text); }
.cc-sch-btn:disabled { opacity: .34; pointer-events: none; }   /* ↶/↷ когда стек пуст */
.cc-sch-btn.primary { color: #fff; background: var(--primary); }
.cc-sch-btn.primary:hover { filter: brightness(1.07); }
.cc-sch-zoom { min-width: 46px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.cc-sch-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
.cc-sch-btn.on { color: var(--text); background: color-mix(in srgb, var(--primary) 15%, transparent); }

/* ═══════════════════ Инструменты доски: те же .cc-sch-btn + активный инструмент и палитра ═══════════════════ */
.cc-schema-tools.brd-tools{flex-wrap:wrap;max-width:min(96%,980px);row-gap:4px}
.cc-sch-btn.brd-t{padding:6px;min-width:30px;justify-content:center}
.cc-sch-btn.brd-t.on{background:var(--primary,var(--cm-5b77f5, #5b77f5));color:#fff}
.cc-sch-btn.brd-t svg.ic{width:16px;height:16px}
.cc-sch-btn.brd-t.off{opacity:.38;pointer-events:none}
.brd-sw{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(127,127,127,.5);cursor:pointer;padding:0;flex:none}
.brd-sw.on{outline:2px solid var(--primary,var(--cm-5b77f5, #5b77f5));outline-offset:2px}
.brd-sw.auto{background:linear-gradient(135deg,#111 0 50%,#fff 50% 100%)}
.brd-wbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px}
.brd-wbtn i{display:block;background:currentColor;border-radius:9px}
/* Курсор инструмента — у ВЬЮПОРТА: у него свой `cursor: grab`, и правило на раме он перекрывал,
   то есть перо и ластик показывали «руку». */
.cc-schema.tool-draw .cc-schema-vp{cursor:crosshair}
.cc-schema.tool-pan .cc-schema-vp{cursor:grab}
.cc-schema.tool-eraser .cc-schema-vp{cursor:cell}
.cc-schema.tool-place .cc-schema-vp{cursor:copy}
.cc-schema.tool-pan .cc-schema-vp.panning{cursor:grabbing}
/* Узко (телефон, окно чата на сайте): тулбар — ОДНА строка с прокруткой пальцем, а не три ряда
   поверх холста. */
@media (max-width:640px){
  .cc-schema-tools.brd-tools{left:0;right:0;top:8px;transform:none;width:auto;max-width:none;
    margin:0 8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;row-gap:0;
    touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:12px}
  .cc-schema-tools.brd-tools::-webkit-scrollbar{display:none}
}
/* Палец толще мыши: кнопки инструментов растут до 36px (зона нажатия, канон tap-target). */
@media (pointer:coarse){
  .cc-sch-btn.brd-t{min-width:36px;height:36px}
}