/* ═══════════════════════════════════════════════════════════════════════
   livebot.css — «Живой бот»: самопечатающийся Telegram-чат в герое
   boty-страниц. Заменяет статичную hero-картинку живой демонстрацией бота.
   Токенизировано; акцент = var(--accent) (фиолет, направление «Боты»).
   Без-JS/​reduced-motion → показывает финальный диалог целиком (фолбэк в HTML).
   ═══════════════════════════════════════════════════════════════════════ */

.livebot{width:100%;max-width:400px;margin-inline:auto}
.lb-frame{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 60px -32px rgba(6,29,41,.34),0 2px 8px -4px rgba(6,29,41,.12);
  display:flex;flex-direction:column;height:470px;
}

/* ── шапка чата ── */
.lb-head{display:flex;align-items:center;gap:11px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--bg)}
.lb-ava{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-weight:800;font-size:16px;letter-spacing:-.02em}
.lb-ava svg{width:22px;height:22px}
/* монограмма бизнеса (у каждого бота своя) */
.lb-ava.a1{background:linear-gradient(135deg,#8A6BE5,#6D49CE)}
.lb-ava.a2{background:linear-gradient(135deg,#A78BFA,#7C5CE0)}
.lb-ava.a3{background:linear-gradient(135deg,#7A93F5,#5064D8)}
.lb-ava.a4{background:linear-gradient(135deg,#6E86F0,#4A63E0)}
.lb-name{font-weight:700;font-size:14px;color:var(--ink);line-height:1.1}
.lb-status{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:5px;margin-top:2px}
.lb-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:lbPulse 2.4s ease-out infinite}
@keyframes lbPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}
  70%,100%{box-shadow:0 0 0 7px transparent}}

/* ── тело чата ── */
.lb-body{position:relative;padding:16px 14px;display:flex;flex-direction:column;gap:9px;
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--ink-3) 45%,transparent) transparent;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb,var(--accent) 6%,transparent), transparent 60%),
    var(--bg-2)}
.lb-body::-webkit-scrollbar{width:6px}
.lb-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-3) 45%,transparent);border-radius:var(--r-sm)}
.lb-body::-webkit-scrollbar-track{background:transparent}
.lb-row{display:flex;max-width:100%}
.lb-row.me{justify-content:flex-end}
.lb-msg{max-width:82%;padding:9px 13px;border-radius:var(--r-md);font-size:14px;line-height:1.4;
  color:var(--ink);position:relative}
.lb-row.bot .lb-msg{background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:6px}
.lb-row.me  .lb-msg{background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px}
.lb-msg b{font-weight:700}
.lb-msg s{color:var(--ink-3);text-decoration:line-through}
.lb-row.me .lb-msg s{color:color-mix(in srgb,var(--accent-ink) 65%,transparent)}
.lb-time{font-size:10px;opacity:.6;margin-left:8px;vertical-align:baseline}
.lb-row.me .lb-time{color:color-mix(in srgb,var(--accent-ink) 85%,transparent)}
.lb-tick{font-size:10px;margin-left:3px;opacity:.9}

/* ── кнопочное меню (кнопочный бот!) ── */
.lb-kbd{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px;max-width:88%}
.lb-btn{font:inherit;font-size:13px;font-weight:600;color:var(--accent);cursor:default;
  background:var(--bg);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  border-radius:var(--r-sm);padding:8px 13px;transition:background .2s,color .2s,transform .2s}
.lb-btn.tapped{background:var(--accent);color:var(--accent-ink);transform:scale(.96)}

/* ── индикатор «печатает»: АБСОЛЮТНЫЙ (вне потока) → не двигает layout, ноль джанка ── */
.lb-tip{position:absolute;left:14px;display:inline-flex;gap:4px;padding:11px 14px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);border-bottom-left-radius:6px;
  opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.lb-tip.on{opacity:1;transform:none}
/* 🔴 27.08: анимация только под .on. Сам .lb-tip живёт с opacity:0 почти всё время,
   а три точки в нём крутились бесконечно и невидимо — на /boty/* это были 3 из 4
   реально работавших бесконечных анимаций страницы. Наблюдатель из ui.js их не
   ловит: он смотрит на видимость в окне, а не на прозрачность. */
.lb-tip i{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.lb-tip.on i{animation:lbDot 1s infinite}
.lb-tip i:nth-child(2){animation-delay:.15s}
.lb-tip i:nth-child(3){animation-delay:.3s}
@keyframes lbDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.lb-tip{display:none}}

/* ── фейковое поле ввода (реализм) ── */
.lb-input{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--line);background:var(--bg)}
.lb-field{flex:1;font-size:13px;color:var(--ink-3);background:var(--bg-2);border-radius:var(--r-pill);padding:9px 15px}
.lb-send{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink)}
.lb-send svg{width:17px;height:17px}

/* ── появление сообщений (только когда JS ведёт анимацию) ── */
.livebot.lb-animated .lb-row,
.livebot.lb-animated .lb-kbd,
.livebot.lb-animated .lb-typing{opacity:0;transform:translateY(8px)}
.livebot.lb-animated .lb-row.in,
.livebot.lb-animated .lb-kbd.in,
.livebot.lb-animated .lb-typing.in{opacity:1;transform:none;transition:opacity .32s ease,transform .32s cubic-bezier(.34,1.4,.5,1)}

@media (prefers-reduced-motion:reduce){
  .lb-status::before{animation:none}
  .lb-typing i{animation:none;opacity:.5}
  .livebot.lb-animated .lb-row,.livebot.lb-animated .lb-kbd{opacity:1;transform:none}
}

/* мобильные версии — превью видно и на телефоне (только эти страницы) */
@media(max-width:860px){
  .phero .process-visual{display:block!important;margin-top:clamp(22px,6vw,38px)}
}

/* ── граница бота: реплика, где он отказывается и переводит на человека ──
   Заведено Ф 26.08.2026 для героя /boty/ai-bazovye/. Отказ должен быть виден,
   а не вычитываться: рамка реплики — цветом направления, под ней подпись.
   Зеркалит блок 12 библиотеки (.nd-row.stop / .nd-flag в blocks.css). */
.lb-row.bot.stop .lb-msg{border-color:var(--accent)}
.lb-flag{display:block;margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--line);
  font-family:var(--f-mono,monospace);font-size:11px;line-height:1.35;
  letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}

/* подпись под чатом: диалог вымышленный, цена нашей работы — нет */
.lb-dis{max-width:400px;margin:12px auto 0;font-size:12.5px;line-height:1.5;
  color:var(--ink-2);text-align:left}