/* Оформление чата веб-версии. Значения сняты с референса quiz.shredybot.com:
   палитра, радиусы, тени, размеры — один в один, чтобы страница читалась как
   мессенджер, а не как форма. Цвета вынесены в переменные: тёмную тему сейчас
   не делаем, но переключается она одним блоком.

   Мобайл-фёрст, без max-width (референс на десктопе просто растягивается —
   трафик рекламный, то есть мобильный). */

:root {
  --bg: #edf6ff;
  --bubble-bot: #cae8fd;
  --bubble-bot-fg: #000a1f;
  --bubble-me: #3a83f2;
  --bubble-me-fg: #fff;
  --accent: #44a9f1;
  --accent-shadow: rgba(68, 169, 241, 0.25);
  --chip: #59b0ee;
  --chip-fg: #fff;
  /* Кнопки нижней панели (reply-клавиатура) — тот же синий, что у чипов ленты
     (решение владельца 05.08.2026; в референсе они были белые). Две клавиатуры
     остаются различимы формой: у панели радиус 14px, у чипов — 8px. */
  --btn: var(--chip);
  --btn-fg: var(--chip-fg);
  --muted: #a8abba;
  --online: #43ee3f;
  --typing: #555;
  --rule: rgba(0, 0, 0, 0.12);
}

* { box-sizing: border-box; }

/* Высота приложения — по ВИДИМОЙ части экрана (--app-h считает app.js по
   visualViewport). Без неё на iPhone при открытой клавиатуре поле ввода
   оказывается под ней: WebKit не сжимает layout-вьюпорт, а мета-подсказка
   interactive-widget=resizes-content работает только в Chrome под Android.
   overflow: hidden — чтобы страница не проматывалась целиком: прокручивается
   только лента внутри. */
html, body { height: 100%; overflow: hidden; }
/* Три высоты подряд — каскад от простого к точному, каждая следующая
   перебивает предыдущую там, где браузер её понимает:
   100%    — старые браузеры (= layout-вьюпорт, влезает под тулбары);
   100svh  — «малый вьюпорт»: высота ПРИ ПОКАЗАННЫХ панелях браузера. Именно
             её не хватало: visualViewport на iOS не вычитает нижний тулбар
             Chrome (он лежит поверх страницы), и строка ввода уезжала под него;
   --app-h — ставится из JS ТОЛЬКО когда открыта клавиатура (см. app.js). */
#root { height: 100%; height: 100svh; height: var(--app-h, 100svh); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--bubble-bot-fg);
  font-size: 15px;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  /* Тап по кнопке не должен подсвечиваться серым прямоугольником в мобильном
     Safari/Chrome — у нас своя реакция на нажатие (схлопывание тени). */
  -webkit-tap-highlight-color: transparent;
}

#root { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- шапка */
.hdr {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.hdr__logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.hdr__name { font-weight: 600; }
.hdr__status { display: flex; align-items: center; font-size: 12px; color: #9ea7a8; }
.hdr__dot {
  width: 6px; height: 6px; margin-right: 6px;
  border-radius: 50%; background: var(--online);
}

/* ----------------------------------------------------------------- лента */
.feed {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  /* min-height: 0 обязателен: у флекс-элемента по умолчанию min-height: auto,
     он отказывается ужиматься меньше содержимого — и при короткой видимой
     области (клавиатура) выдавливал нижнюю панель за экран. */
  min-height: 0;
  overflow: auto;
  padding: 16px 0;
  /* Инерционный скролл на iOS. */
  -webkit-overflow-scrolling: touch;
}
.feed__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 20px;
}
/* Разговор прижат к низу, пока сообщений мало (как в мессенджере). */
.feed__inner > :first-child { margin-top: auto; }

.date {
  text-align: center;
  margin: 24px 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

/* Появление сообщения: высота 0 → измеренная (её проставляет app.js). */
.msg {
  width: fit-content;
  max-width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.3s ease, opacity 0.9s ease;
  will-change: height, opacity;
}
.msg--me { margin-left: auto; }
/* Восстановленная из localStorage лента показывается без анимации. */
.msg--instant { transition: none; }

.bubble {
  padding: 8px 10px;
  margin-top: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 4px 14px 14px 14px;
  background: var(--bubble-bot);
  color: var(--bubble-bot-fg);
}
.msg--me .bubble {
  margin-left: auto;
  border-radius: 14px 14px 4px 14px;
  background: var(--bubble-me);
  color: var(--bubble-me-fg);
}
/* Смена говорящего — чуть больший отступ. */
.msg--turn .bubble { margin-top: 8px; }

/* Каретка на время набора (app.js::typeOut вешает класс). Псевдоэлемент, а не
   узел в тексте: не попадает в текстовые узлы, которые печатает движок. */
.bubble--typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  opacity: 0.8;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.bubble a { color: inherit; text-decoration: underline; }
.msg--me .bubble a { color: #fff; }
.bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

/* Медиа-пузырь: без фона и паддинга — картинка сама себе пузырь. */
.bubble--media { padding: 0; background: transparent; }
/* Ограничение по ВЫСОТЕ, а не только по ширине (05.08.2026): ролики курса
   сняты вертикально (9:16), и при ширине 320px вырастали почти на 570px —
   на телефоне помещался один кадр, а вопрос и кнопки уезжали за экран.
   width/height: auto обязательны: с `width: 100%` браузер держал бы коробку
   320px и вписывал в неё кадр с чёрными полями вместо честного уменьшения.
   Вторая `max-width` с min() — для браузеров, которые её знают (остальные
   пропустят строку как некорректную и останутся на 320px). */
.media-img, .media-video {
  display: block;
  width: auto;
  height: auto;
  max-width: 320px;
  max-width: min(320px, 100%);
  /* 50vh: на 667px-экране это 333px, и под роликом ещё остаётся место на
     вопрос и кнопки (шапка 56 + «печатает» 18 + панель ~112 ≈ 186px). */
  max-height: 50vh;
  margin-top: 4px;
  border-radius: 4px 14px 14px 14px;
  background: var(--bubble-bot);
}
/* Тап по кадру ставит ролик на паузу и возвращает панель (app.js::mediaNode). */
.media-video { cursor: pointer; }
/* Кружок (video_note): квадратный кадр, обрезанный в круг. Сторону считаем
   через min(), иначе max-height превратил бы круг в эллипс (object-fit: cover
   кропает кадр, но сама коробка обязана остаться квадратной). */
.media-video--round {
  width: 240px;
  height: 240px;
  width: min(240px, 70vw, 36vh);
  height: min(240px, 70vw, 36vh);
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 50%;
}
.media-audio { width: 260px; max-width: 100%; margin-top: 4px; }

/* Карточка файла (PDF-трекеры, рационы). */
.media-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-top: 4px;
  border-radius: 4px 14px 14px 14px;
  background: var(--bubble-bot);
  color: var(--bubble-bot-fg);
  text-decoration: none;
  font-weight: 500;
}
.media-file__icon {
  width: 50px; height: 50px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 50%; font-size: 22px;
}
.media-file__name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.media-file__size { font-size: 14px; font-weight: 400; color: #6b7280; }

/* Чипы (inline-клавиатура) — прямо в ленте под сообщением. */
.chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
  width: 100%;
}
.chip {
  height: 44px;
  padding: 0 12px;
  border: 0;
  outline: 0;
  border-radius: 8px;
  background: var(--chip);
  color: var(--chip-fg);
  font: inherit;
  font-size: 14px;
  min-width: calc((100% - 4px) / 2);
  flex: 1 1;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 2px 2px 4px 0 var(--accent-shadow);
  transition: 0.3s;
}
.chip:active { box-shadow: none; }

/* Подсказка «продолжай здесь» после возврата с оплаты (app.js). */
@keyframes nudge {
  0%, 100% { transform: none; }
  25%, 75% { transform: translateY(-4px); }
  50%      { transform: none; }
}
.nudge { animation: nudge 0.9s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .nudge { animation: none; } }
.chip--link { text-decoration: none; display: flex; align-items: center; justify-content: center; }

.typing {
  color: var(--typing);
  font-size: 12px;
  padding-left: 5px;
  margin-top: 10px;
  height: 18px;
}
/* Пустой индикатор места не занимает (05.08.2026): полоса в 28px висела над
   кнопками всегда и читалась как лишняя «шапка» панели. */
.typing:empty { height: 0; margin-top: 0; }

/* --------------------------------------------------------- нижняя панель */
/* Панель — тоже колонка: если кнопок много, а места мало (открыта клавиатура),
   ужимается и прокручивается БЛОК КНОПОК, а строка ввода остаётся на виду
   всегда. Ради этого .form разрешено сжиматься (flex: 0 1 auto). */
.form {
  position: relative;
  padding: 8px 20px;
  /* Полоска-индикатор дома на iPhone (в standalone-режиме) не должна лежать
     на поле ввода. Без safe-area значение равно нулю — в браузере ничего
     не меняется. */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
}
.buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Отбивка от строки ввода: без неё кнопки садятся на поле вплотную, а их
     тень (2px 2px 4px) ложится поверх верхнего края пилюли ввода. */
  margin-bottom: 8px;
}
/* Скрытую панель гасим ЯВНО: авторский `display: flex` перебивает UA-правило
   `[hidden] { display: none }`, и пустой контейнер оставлял бы свои 8px. */
.buttons[hidden] { display: none; }
.btn {
  height: 44px;
  padding: 0 12px;
  border: 0;
  outline: 0;
  border-radius: 14px;
  background: var(--btn);
  color: var(--btn-fg);
  font: inherit;
  min-width: calc((100% - 8px) / 2);
  flex: 1 1;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 2px 2px 4px 0 var(--accent-shadow);
  transition: 0.3s;
}
.btn:active { box-shadow: none; }
.btn--long { min-width: 100%; }

.textform { display: flex; align-items: center; height: 44px; gap: 13px; flex: 0 0 auto; }
.textform__input {
  height: 44px;
  min-width: 0;
  flex: 1 1;
  padding: 0 18px;
  border: 1px solid var(--muted);
  border-radius: 22px;
  outline: 0;
  font: inherit;
  /* 16px не даёт мобильному Safari зумить страницу при фокусе. */
  font-size: 16px;
  background: #fff;
  transition: 0.3s;
  box-shadow: 2px 2px 4px var(--accent-shadow);
}
.textform__input:focus { border-color: var(--accent); }
.textform__input:disabled { opacity: 0.5; }
.textform__send {
  display: flex; align-items: center; justify-content: center;
  height: 44px; width: 44px; flex-shrink: 0;
  border: none; outline: 0; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: 0.3s;
}
.textform__send:disabled { opacity: 0.5; cursor: default; }
.textform__send svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------ всплывашка */
.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  max-width: calc(100% - 40px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(0, 10, 31, 0.88);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 100;
}
.toast--on { opacity: 1; }

/* Плашка обрыва связи. */
.offline {
  display: none;
  padding: 6px 20px;
  background: #ffe8e8;
  color: #a11;
  font-size: 13px;
  text-align: center;
  flex-shrink: 0;
}
.offline--on { display: block; }

@media (prefers-reduced-motion: reduce) {
  .msg { transition: none; }
  .btn, .chip, .textform__input { transition: none; }
  /* Набор в этом режиме выключен (app.js::reduceMotion) — гасим и каретку. */
  .bubble--typing::after { animation: none; opacity: 0; }
}