/* demo.css — стили публичного демо /try-sensim (сессия S8, PLAN.md;
 * переработка 2026-09-01 по приказу пользователя).
 * Каркас (shell/рельс/бургер/скрим) и токены — общие с приложением, из
 * theme.css. Здесь — только специфика демо: экраны, хром, тур, чипы.
 * Демо — статичная страница-презентация: всё, что не демо-элемент, инертно
 * (pointer-events: none), а пока активна подсказка/плашка — клики вне неё
 * глушит полноэкранный слой .demo-tour-dim.
 * Правила темы: текст — var(--text-*), стекло — rgb(var(--glass-tint) / α). */

body.demo-body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font);
    color: var(--text-1);
}
body.demo-body *, body.demo-body *::before, body.demo-body *::after { box-sizing: border-box; }
#demo-tour-root, #demo-tour-root * { box-sizing: border-box; }

/* Атрибут hidden на элементах с авторским display (напр. .btn{display:inline-flex}
   из theme.css) НЕ скрывает — авторские стили бьют UA-правило [hidden].
   В демо скрытие всегда явное (баг 2026-09-01: «Завершить демо» и «Назад»
   на первом шаге были видны всегда). */
body.demo-body [hidden] { display: none !important; }

/* ── Инертность витрины: рельс и содержимое статистики не нажимаются ── */
body.demo-body .rail .rail-item,
body.demo-body .rail .rail-logo { pointer-events: none; }
/* Скролл остаётся: контейнер .view-scroll принимает события, дети — нет */
#demo-screen-stats .view-sheet { pointer-events: none; }

/* ── Пролистывание карточек тура (сцена дерева): контент скользит
   в направлении перехода, сама карточка неподвижна (2026-09-05) ── */
.demo-tour-tip-inner.demo-slide-out-l { animation: demoSlideOutL .14s var(--ease-in-out, ease) both; }
.demo-tour-tip-inner.demo-slide-out-r { animation: demoSlideOutR .14s var(--ease-in-out, ease) both; }
.demo-tour-tip-inner.demo-slide-in-r { animation: demoSlideInR .18s var(--ease-out, ease) both; }
.demo-tour-tip-inner.demo-slide-in-l { animation: demoSlideInL .18s var(--ease-out, ease) both; }
@keyframes demoSlideOutL { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-14px); } }
@keyframes demoSlideOutR { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(14px); } }
@keyframes demoSlideInR { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes demoSlideInL { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
#demo-tour-root.reduced .demo-tour-tip-inner { animation: none !important; }

/* ── Плавающий хром демо (бейдж + шаги) ────────────────── */
.demo-chrome {
    position: fixed; top: 12px; right: 14px; z-index: 800;
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    background: rgb(var(--glass-tint) / .62);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid rgb(var(--glass-tint) / .7);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(13,71,161,.14), var(--glass-highlight);
}
.demo-badge {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--brand-ink);
    background: rgb(var(--glass-tint) / .6);
    border: 1px solid rgb(var(--glass-tint) / .8);
    padding: 3px 9px; border-radius: 999px;
}
.demo-steps { display: flex; gap: 2px; }
.demo-step {
    font: inherit; border: none; background: transparent; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    font-size: .78rem; color: var(--text-3); font-weight: 600;
    padding: 5px 9px; border-radius: 999px;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.demo-step::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-3); opacity: .45;
    transition: all var(--dur-fast) var(--ease-out);
}
.demo-step:hover { color: var(--text-1); }
.demo-step.active { color: var(--brand-ink); background: rgb(var(--glass-tint) / .55); }
.demo-step.active::before { background: var(--brand-600); opacity: 1; box-shadow: 0 0 0 3px rgba(21,101,216,.18); }
.demo-step.done { color: var(--green); }
.demo-step.done::before { background: var(--green); opacity: 1; }

/* ── Экраны (внутри shell-main полной версии) ──────────── */
.demo-screen { height: 100%; overflow-y: auto; padding: 18px 22px 60px; }
.demo-screen[hidden] { display: none; }
/* Статистика: свой скролл внутри .view-scroll (как у приложения).
   ВАЖНО: display:flex на ID перекрывает .demo-screen[hidden] по специфичности,
   поэтому скрытие экрана требует правила с тем же ID (баг 2026-09-01:
   «К ассистенту» не переключал экран — статистика оставалась видимой). */
#demo-screen-stats { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
#demo-screen-stats[hidden] { display: none; }
#demo-screen-stats #view-stats { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#demo-screen-stats .view-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 60px; }
.demo-screen-head { text-align: center; margin: 14px 0 22px; }
.demo-screen-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.demo-screen-sub { color: var(--text-2); font-size: .92rem; margin-top: 6px; }
.demo-screen-sub .demo-real {
    color: var(--brand-ink); font-weight: 600;
    border-bottom: 1px dashed rgb(var(--glass-tint) / .9);
}

/* ── Экран дерева: живая демонстрация (рендерер приложения) ── */
#demo-screen-tree { display: flex; flex-direction: column; overflow: hidden; }
#demo-screen-tree[hidden] { display: none; }
.demo-tree-wrap { flex: 1; min-height: 0; max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 6px; }
.demo-tree-stage {
    position: relative; height: 100%; min-height: 320px;
    border-radius: 18px; overflow: hidden;
}
.demo-tree-stage svg { width: 100%; height: 100%; display: block; font-family: inherit; }
/* Витрина инертна: клики по дереву в демо не работают (маршрут ведёт тур) */
#demo-screen-tree .demo-tree-stage { pointer-events: none; }

/* ── Док карточки тура на сцене дерева (приказ 2026-10-01) ──
   Карточка больше не перекрывает дерево: сцена уступает ей место.
   Класс demo-tour-dock на <html> ставит demoTour, пока идёт сценарий
   с fixedPos (сцена дерева). Классический min-width/max-width — НЕ детект
   мобильной версии, а границы компоновки дока (синхронны с константами
   в demoTour._place и demoTree._fixedCardPos — менять вместе). */
/* Мобильная компоновка (≤560): разделённый экран — дерево сверху, панель
   карточек снизу; резерв снизу = высота текущей карточки (+ зазоры),
   её публикует demoTour в --demo-tour-panel-h. */
@media (max-width: 560px) {
    html.demo-tour-dock #demo-screen-tree { padding-bottom: 12px; }
    html.demo-tour-dock #demo-screen-tree .demo-tree-wrap {
        margin-bottom: var(--demo-tour-panel-h, 0px);
    }
}
/* Шапка экрана дерева в мобильном доке — компактнее: высота — дереву. */
@media (max-width: 560px) {
    html.demo-tour-dock #demo-screen-tree .demo-screen-head { margin: 40px 0 8px; }
    html.demo-tour-dock #demo-screen-tree .demo-screen-sub { font-size: .85rem; margin-top: 4px; }
}
/* Широкий десктоп (≥1160): боковой док — полоса справа под карточку
   (420px + зазоры), карточку позиционирует demoTree._fixedCardPos. */
@media (min-width: 1160px) {
    html.demo-tour-dock #demo-screen-tree .demo-tree-wrap { padding-right: 452px; }
}
/* В доке сцена может стать ниже обычного минимума — не выталкивать её. */
html.demo-tour-dock #demo-screen-tree .demo-tree-stage { min-height: 0; }

/* ── Экран чата ────────────────────────────────────────── */
.demo-chat-wrap { max-width: 860px; margin: 0 auto; }
.demo-chat-shell {
    height: min(560px, 62vh);
    display: flex; flex-direction: column;
    border-radius: 22px; overflow: hidden;
}
.demo-chat-shell > div { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.demo-chat-shell .quikchat-input-area { display: none; } /* ввод в демо — через чипы сценария */
.demo-chips {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin-top: 16px;
}
.demo-chip {
    font: inherit; font-size: .88rem; font-weight: 600;
    color: var(--brand-ink);
    background: rgb(var(--glass-tint) / .5);
    border: 1px solid rgb(var(--glass-tint) / .75);
    border-radius: 999px; padding: 10px 18px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(13,71,161,.08), var(--glass-highlight);
    transition: all var(--dur-fast) var(--ease-out);
}
.demo-chip:hover:not(:disabled) {
    background: rgb(var(--glass-tint) / .72);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(13,71,161,.14), var(--glass-highlight);
}
.demo-chip:disabled { opacity: .45; cursor: not-allowed; }
.demo-chip.done {
    opacity: .75; color: var(--green);
    border-color: rgba(22,163,74,.35);
}
.demo-chip.done::before { content: '✓ '; }
.demo-chips-note {
    text-align: center; color: var(--text-3); font-size: .78rem; margin-top: 12px;
}
.demo-finish-wrap { text-align: center; margin-top: 18px; }
.demo-progress .quikchat-message-content { font-variant-numeric: tabular-nums; }

/* ── Финальный экран ───────────────────────────────────── */
.demo-final-card {
    max-width: 620px; margin: 8vh auto 0;
    text-align: center; padding: 46px 40px 38px;
    background: rgb(var(--glass-tint) / .5);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid rgb(var(--glass-tint) / .65);
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(13,71,161,.16), var(--glass-highlight);
    animation: demo-card-in 320ms var(--ease-out) both;
}
@keyframes demo-card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.demo-final-card h2 { font-size: 1.55rem; letter-spacing: -.02em; margin-bottom: 10px; }
.demo-final-card p { color: var(--text-2); font-size: .95rem; line-height: 1.6; margin-bottom: 26px; }
.demo-final-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.demo-cta {
    display: inline-block; font-size: 1rem; font-weight: 650;
    padding: 13px 28px; border-radius: 14px; text-decoration: none;
    color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    box-shadow: 0 6px 18px rgba(21,101,216,.34), inset 0 1px 0 rgba(255,255,255,.24);
    transition: all var(--dur-fast) var(--ease-out);
}
.demo-cta:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(21,101,216,.42), inset 0 1px 0 rgba(255,255,255,.24); }

/* ── Тур: оверлей, дим-бары, spotlight-рамка, подсказка ── */
#demo-tour-root { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
#demo-tour-root[aria-hidden="true"] { display: none; }
/* Затемнение — ОДИН SVG-слой на весь экран с «дырой» evenodd вокруг цели
   (2026-09-16): единая поверхность исключает просветы/наложения на стыках
   (4 дим-бара с CSS-переходами расходились и отставали от цели на скролле).
   box-shadow 100vmax не используем: он вырождался в круг и оставлял
   незатемнённую дугу в дальнем углу больших экранов, 2026-09-01.
   Дыра скруглена под border-radius спот-рамки — затемнение прилегает вплотную.
   Геометрию ставит JS (скролл/ресайз — мгновенно, смена шага — rAF-перелёт),
   поэтому переходы left/top/width/height убраны и здесь, и у спота.
   Только визуал: клики вне плашки глушит capture-обработчик demoTour,
   скролл при этом свободный. */
.demo-tour-dimsvg {
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
    transition: opacity 200ms;
}
.demo-tour-dim-path { fill: rgba(10, 22, 44, .55); }
#demo-tour-root:not(.dim) .demo-tour-dimsvg { opacity: 0; }
/* Spotlight-рамка над целью (только контур; в режиме плашки — мягкое кольцо). */
.demo-tour-spot {
    position: fixed; border-radius: 16px; opacity: 0; pointer-events: none;
    transition: opacity 200ms;
}
#demo-tour-root.dim .demo-tour-spot.on-target {
    outline: 2px solid rgba(92, 156, 236, .65);
    outline-offset: 0;
}
#demo-tour-root:not(.dim) .demo-tour-spot {
    box-shadow: 0 0 0 3px rgba(21, 101, 216, .45), 0 0 24px rgba(21, 101, 216, .25);
}
.demo-tour-tip {
    position: fixed;
    padding: 18px 20px 14px;
    background: rgb(var(--glass-tint) / .82);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid rgb(var(--glass-tint) / .8);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(10, 22, 44, .35), var(--glass-highlight);
    pointer-events: auto;
    animation: demo-tip-in 240ms var(--ease-out) both;
}
@keyframes demo-tip-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#demo-tour-root.reduced .demo-tour-tip,
#demo-tour-root.reduced .demo-tour-spot,
#demo-tour-root.reduced .demo-tour-dimsvg { animation: none; transition: none; }
.demo-tour-title { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.demo-tour-text { font-size: .88rem; line-height: 1.6; color: var(--text-2); }
.demo-tour-text b { color: var(--text-1); }
.demo-tour-text a { color: var(--brand-link); font-weight: 600; }
.demo-tour-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
/* Карточки сценария с fixedPos (сцена дерева) — единый размер на весь
   прогон (высоту ставит demoTour): кнопка «Далее» не смещается. */
.demo-tour-tip.fixed-size { box-sizing: border-box; }
.demo-tour-tip.fixed-size .demo-tour-tip-inner { display: flex; flex-direction: column; height: 100%; }
.demo-tour-tip.fixed-size .demo-tour-text { flex: 1; min-height: 0; }
.demo-tour-dots { display: flex; gap: 5px; margin: 0 auto; }

/* Узкий экран (≤560): карточка компактнее — в разделённой компоновке сцены
   дерева (нижний док) дереву достаётся больше высоты (приказ 2026-10-01). */
@media (max-width: 560px) {
    .demo-tour-tip { padding: 14px 16px 12px; }
    .demo-tour-title { margin-bottom: 4px; }
    .demo-tour-text { line-height: 1.5; }
    .demo-tour-foot { margin-top: 10px; }
}
.demo-tour-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-3); opacity: .35;
    transition: all var(--dur-fast) var(--ease-out);
}
.demo-tour-dot.active { background: var(--brand-600); opacity: 1; transform: scale(1.25); }
.demo-tour-dot.done { background: var(--brand-400); opacity: .8; }

/* Переключатель темы в intro-плашке (сегмент .llm-seg — как в Настройках) */
.demo-theme-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgb(var(--glass-tint) / .35);
}
.demo-theme-label { font-size: .8rem; font-weight: 600; color: var(--text-3); }
.demo-theme-seg .llm-seg-btn { padding: 6px 14px; font-size: .8rem; }

/* ── Мобильная версия (портрет/тач — как в приложении) ── */
@media (orientation: portrait), (hover: none) and (pointer: coarse) {
    .demo-chrome { top: calc(10px + env(safe-area-inset-top)); right: 10px; gap: 6px; padding: 5px 8px; }
    /* Шаги — только точки (текст скрыт): иначе пилюля перекрывает бургер слева */
    .demo-step { font-size: 0; padding: 5px 4px; gap: 0; }
    .demo-step::before { width: 7px; height: 7px; }
    .demo-badge { font-size: .6rem; padding: 2px 7px; }
    .demo-screen { padding: 12px 12px 48px; }
    /* Статистика — «простыня» как в приложении (паддинги у .view-sheet из theme.css) */
    #demo-screen-stats .view-scroll { padding: 0; }
    /* заголовок — ниже плавающих бургера и хрома */
    #demo-screen-stats .page-head { padding-top: 46px; }
    .demo-screen-head { margin: 44px 0 16px; } /* отступ под бургер */
    .demo-screen-title { font-size: 1.2rem; }
    .demo-chat-shell { height: min(520px, 58vh); }
    .demo-final-card { margin-top: 4vh; padding: 32px 22px 28px; }
    .demo-theme-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .demo-tour-tip, .demo-final-card { animation: none; }
    .demo-tour-spot, .demo-tour-dimsvg { transition: none; }
    .demo-chip, .demo-cta, .demo-step { transition: none; }
}