/* ============================================================
   ИНТЕРФЕЙС ПОСЕТИТЕЛЯ.
   Верх: знак + «Robot Control», справа язык — как в панели владельца.
   Центр: чат — только слова робота (слева, белые карточки) и посетителя
          (справа, светло-синие), листается.
   Низ: кнопка-микрофон на матовом стекле — чат виден за ней.
   Значения — из tokens.css (общие с панелью владельца).
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: var(--w-normal) var(--t-md)/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
.sr { position: absolute; width: 0; height: 0; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* цвета реплик */
:root {
  --robot-bg:  #FFFFFF;   /* робот — белая карточка с тонкой рамкой, как карточки панели владельца */
  --robot-ink: var(--ink);
  --robot-line: var(--line);
  --me-bg:     #E6EEFF;   /* посетитель — мягкий оттенок фирменного синего */
  --me-ink:    #0A2A66;
  --me-line:   #CFDDFB;
  --mic-bg:    var(--accent);        /* кнопка — тот же синий, что у действий в панели владельца */
  --mic-hover: var(--accent-hover);
  --talk-h:    150px;     /* высота зоны микрофона (над ней заканчивается чат) */
}

.app { position: relative; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }   /* круг размытия у кнопки не должен раздувать страницу — листается только чат */

/* ── верхняя панель = .statusbar панели владельца ── */
/* размеры — один в один с .statusbar / .statusbar__brand / .statusbar__title панели владельца */
.bar {
  flex: 0 0 auto; height: calc(52px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--s-4) 0 var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--surface); border-bottom: 1px solid var(--line); white-space: nowrap;
  position: relative; z-index: 5;
}
.bar__brand { width: 30px; height: 30px; flex: 0 0 30px; margin-right: -6px; }   /* как в панели: знак ближе к тексту */
.bar__title { font-size: var(--t-lg); font-weight: var(--w-bold); letter-spacing: -.2px; }

/* язык — как кнопка «РУ» в доке панели владельца: значок сверху, код под ним */
.lang { position: relative; margin-left: auto; }
/* капсула как «Робот · Подключён» панели владельца: глобус · код · стрелка, всё по одной оси */
.lang__btn {
  height: 36px; padding: 0 10px 0 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-2);
  transition: background var(--fast), border-color var(--fast), color var(--fast), transform 90ms ease;
}
.lang__btn > * { display: block; flex: none; }
.lang__btn svg { width: 18px; height: 18px; }
/* код языка: строка = высоте значка — центр букв совпадает с центром глобуса (замерено по пикселям) */
.lang__code {
  height: 18px; line-height: 18px; font-size: 13px; font-weight: var(--w-bold);
  letter-spacing: .02em; color: var(--ink);
}
.lang__chev { width: 14px !important; height: 14px !important; color: var(--ink-3); transition: transform var(--fast); }
.lang__btn:hover { background: var(--surface-sunk); border-color: var(--line-strong); }
.lang__btn:active { transform: scale(.97); }
.lang__btn[aria-expanded="true"] { background: var(--surface-sunk); border-color: var(--line-strong); }
.lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }

/* меню — как .rail__langmenu панели владельца: сбоку от кнопки, на одной линии с ней,
   стрелка указывает на кнопку. Кнопка у правого края экрана — поэтому меню слева от неё. */
.lang__menu {
  position: absolute; right: calc(100% + 12px); top: -4px; z-index: 30; min-width: 160px;   /* первая строка — вровень с кнопкой */
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: var(--s-1); display: grid; gap: 2px;
  animation: menuIn var(--fast) ease-out;
}
@keyframes menuIn { from { opacity: 0; transform: translateX(4px); } }
.lang__menu::before {
  content: ""; position: absolute; right: -6px; top: 17px; width: 10px; height: 10px;   /* на центр кнопки: 4 + 36/2 − 5 */
  background: var(--surface); border-right: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong);
  transform: rotate(45deg);
}
.lang__menu button {
  height: 40px; padding: 0 var(--s-4) 0 var(--s-3); border-radius: var(--r-sm);
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--ink); text-align: left; font-size: var(--t-sm);
}
.lang__menu button:hover { background: var(--surface-sunk); }
.lang__menu button[aria-pressed="true"] { color: var(--accent); font-weight: var(--w-bold); }
.mchk { width: 16px; height: 16px; flex: 0 0 16px; color: var(--accent); visibility: hidden; }
.lang__menu button[aria-pressed="true"] .mchk { visibility: visible; }

/* ── чат: листается под стеклом микрофона ── */
.chat {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
}
/* полосы прокрутки нет совсем — чат листается пальцем, колесом, тачпадом */
.chat { scrollbar-width: none; -ms-overflow-style: none; }
.chat::-webkit-scrollbar { display: none; width: 0; height: 0; }
.chat__list {
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: var(--s-5) var(--s-4) calc(var(--talk-h) + var(--s-4) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 3px;
}
.bubble {
  max-width: 80%; padding: 10px 14px; font-size: 1rem; line-height: 1.45;   /* rem — крупный шрифт телефона увеличивает и чат */
  border-radius: 12px; word-wrap: break-word; white-space: pre-wrap;
  animation: rise 180ms ease-out;
}
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
.bubble--robot { align-self: flex-start; background: var(--robot-bg); color: var(--robot-ink); border: 1px solid var(--robot-line); border-bottom-left-radius: 4px; }
.bubble--me    { align-self: flex-end;   background: var(--me-bg);    color: var(--me-ink);    border: 1px solid var(--me-line);    border-bottom-right-radius: 4px; }
/* подряд от одного собеседника — одна группа, как в Telegram/iMessage: плотно, внутренний край
   прямой (малые углы), «хвостик» только у первого; сменился собеседник — больше воздуха */
.bubble--robot + .bubble--robot { border-top-left-radius: 4px; }
.bubble--me + .bubble--me       { border-top-right-radius: 4px; }
.bubble--robot + .bubble--me, .bubble--me + .bubble--robot { margin-top: 10px; }
.bubble--cut::after { content: " …"; }
/* робот думает — три точки на месте будущего ответа */
.bubble--typing { display: inline-flex; align-items: center; gap: 5px; height: 42px; padding: 0 16px; }
.bubble--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); opacity: .3; animation: typing 1.2s ease-in-out infinite; }
.bubble--typing i:nth-child(2) { animation-delay: .15s; }
.bubble--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: .9; transform: translateY(-2px); } }

/* ── состояние: короткое сообщение в ленте, со стороны робота ──
   Размер, шрифт, отступы и углы — как у обычных сообщений; отличают его только
   мягкий цвет и маленький значок. Цвета — статусные цвета панели владельца (tokens.css). */
.stat {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  max-width: 80%; margin-top: 10px; padding: 10px 14px;
  border-radius: 12px; border-bottom-left-radius: 4px;
  font-size: 1rem; line-height: 1.45; font-weight: var(--w-normal);
  border: 1px solid; animation: rise 180ms ease-out;
}
.stat + .stat { margin-top: 0; border-top-left-radius: 4px; }   /* подряд — одна группа, как сообщения */
.stat + .bubble { margin-top: 10px; }
/* обычный (не жирный) текст — оттенки чуть темнее, чтобы читался на мягком фоне (контраст ≥ 4.5) */
.stat svg { flex: none; width: 16px; height: 16px; }
.stat b { font-weight: inherit; }
.stat[data-tone="warn"]   { background: var(--warn-soft);    border-color: var(--warn-line); color: var(--warn); }
.stat[data-tone="danger"] { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 22%, var(--danger-soft)); color: var(--danger-hover); }
.stat[data-tone="ok"]     { background: var(--ok-soft);      border-color: color-mix(in srgb, var(--ok) 22%, var(--ok-soft)); color: color-mix(in srgb, var(--ok) 65%, var(--ink)); }
.stat[data-tone="idle"]   { background: var(--surface-sunk); border-color: var(--line); color: var(--ink-2); }
.stat[data-live] svg { animation: spin 1s linear infinite; }
/* состояние сменилось — остаётся просто слово */
.stat[data-icon="wait"]:not([data-live]) svg { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ── микрофон поверх чата: размытие только вокруг самой кнопки ──
   Сама полоса прозрачна и касаний не ловит — чат рядом с кнопкой
   виден целиком и листается пальцем. */
.talk {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-3);
  padding: 0 var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  pointer-events: none;
}
.talk__btn { pointer-events: auto; }
.talk__wrap { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
/* матовый круг вокруг кнопки: сильное размытие, края мягко растворяются */
.talk__wrap::before {
  content: ""; position: absolute; inset: -30px; border-radius: 50%; z-index: -1;
  background: rgba(244, 246, 250, .55);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%);
          mask-image: radial-gradient(circle, #000 55%, transparent 72%);
}
.talk__btn {
  position: relative; width: 88px; height: 88px; border-radius: 50%;
  background: var(--mic-bg); color: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(11, 18, 32, .18);
  transition: transform var(--fast), background var(--fast), box-shadow var(--fast);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.talk__btn svg { width: 36px; height: 36px; pointer-events: none; }
@media (hover: hover) { .talk__btn:hover { background: var(--mic-hover); } }   /* на телефоне «залипшего» наведения нет */
.talk__lock { display: none; }
/* слушаем: кнопка красная, вместо микрофона — полоски, которые двигаются в такт голосу */
.talk[data-mode="holding"] .talk__btn { background: var(--danger); transform: scale(1.03); }
.talk__bars { display: none; align-items: center; gap: 4px; height: 28px; }
.talk__bars i { width: 4px; height: 28px; border-radius: 2px; background: #fff; transform: scaleY(.18); }
.talk[data-mode="holding"] .talk__mic { display: none; }
.talk[data-mode="holding"] .talk__bars { display: flex; }
/* последние 5 секунд из 20 — маленькая цифра над кнопкой */
.talk__left {
  min-height: 1.5rem; font-size: 1.125rem; line-height: 1.5rem; font-weight: var(--w-bold);
  color: var(--danger); font-variant-numeric: tabular-nums;
}
/* говорить нельзя — кнопка тихая: серый круг с замком */
.talk[data-mode="busy"] .talk__btn { background: var(--surface-sunk); color: var(--ink-3); border: 1px solid var(--line); box-shadow: none; }
.talk[data-mode="busy"] .talk__mic { display: none; }
.talk[data-mode="busy"] .talk__lock { display: block; width: 30px; height: 30px; }

/* ── адаптация ── */
@media (min-width: 641px) { .bubble { max-width: 70%; } }
@media (max-width: 360px) {
  .bar { padding-left: var(--s-4); gap: var(--s-2); }
  .bar__title { font-size: 17px; }
  .bar__brand { width: 26px; height: 26px; flex-basis: 26px; }
  .bubble { max-width: 86%; font-size: .9375rem; }
  .stat { font-size: .9375rem; }
}
@media (max-height: 600px) {                      /* телефон боком */
  :root { --talk-h: 124px; }
  .talk { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .talk__wrap { width: 90px; height: 90px; }
  .talk__btn { width: 76px; height: 76px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── «уменьшить движение» в настройках телефона: всё стоит ── */
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; }
  .bubble--typing i { opacity: .6; }
  .talk__bars i { transform: none !important; }  /* полоски стоят «лесенкой» */
  .talk__bars i:nth-child(1), .talk__bars i:nth-child(5) { height: 8px; }
  .talk__bars i:nth-child(2), .talk__bars i:nth-child(4) { height: 16px; }
  .talk__bars i:nth-child(3) { height: 24px; }
}

/* фокус с клавиатуры — видимый, как в панели владельца */
.talk__btn:focus-visible, .lang__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }