/* Встраиваемые блоки демо «Сигнал» (для iframe на странице /demo) */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font-body); background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; padding: 0; }

/* ── окно браузера для веб-панели ── */
.bw { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.bw-bar { flex-shrink: 0; height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.bw-dots { display: flex; gap: 7px; }
.bw-dots i { width: 12px; height: 12px; border-radius: 999px; }
.bw-dots i:nth-child(1){ background:#ff5f57; } .bw-dots i:nth-child(2){ background:#febc2e; } .bw-dots i:nth-child(3){ background:#28c840; }
.bw-url { flex: 1; max-width: 420px; height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }
.bw-url svg { width: 12px; height: 12px; color: var(--green); }
.bw-body { flex: 1; min-height: 0; }
.bw-body #root { height: 100%; }
/* во встроенном пульте боковая ссылка «назад в демо» не нужна */
.bw-body .wa-back { display: none; }

/* ── встроенный спокойный режим: телефон + компактный переключатель сценариев ── */
.emb-calm { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px; }
.emb-sc { display: flex; align-items: center; gap: 5px; padding: 5px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.emb-sc button { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12.5px; font-weight: 650; color: var(--text-2); padding: 8px 13px; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.emb-sc button:hover { color: var(--text); }
.emb-sc button .d { width: 8px; height: 8px; border-radius: 999px; background: var(--text-3); }
.emb-sc button .d.green { background: var(--green); } .emb-sc button .d.deviation { background: var(--amber); } .emb-sc button .d.problem { background: var(--red); }
.emb-sc button.on { color: var(--text); background: var(--soft-fill); border-color: var(--line-2); }
/* во встроенном демо возвращаем рамку устройства (медиа-запрос 860px её убирает, т.к. iframe узкий) */
.emb-calm { padding: 4px; }
.emb-calm .cx-device { margin: 0; width: 390px; max-width: 100%; border-radius: 46px; border: 1px solid var(--line-2); background: #05080f; padding: 12px; box-shadow: 0 40px 90px -50px rgba(0,0,0,.85); }
.emb-calm .cx-screen { border-radius: 36px; border: 1px solid var(--line); height: 788px; }