/* Хриса везде одна — плавающая кнопка и окно входа (задача 1827, круг 2).
 *
 * ЧТО ЭТО. На главной вход Хрисы v2 стоит прямо на первом экране (задачи
 * 1807/1815/1823). На остальных 218 страницах первого экрана с ним нет, а
 * гость обязан получить ТОТ ЖЕ вход — поле, ответ документом, голос, файлы,
 * память по согласию. Здесь: кнопка в углу и окно, в котором лежит тот же
 * блок `.vhod-blok`, что и на главной, знак в знак.
 *
 * ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ СТРОКИ В style2.css. Стили самого входа живут
 * в assets/css/vhod.css и приезжают ЛЕНИВО, по первому нажатию кнопки: 40 КБ
 * таблицы и 57 КБ скрипта не должны лежать в критическом пути 218 страниц,
 * которые открывают ради текста. В этом файле — только кнопка и коробка окна,
 * меньше двух килобайт, и они нужны сразу.
 *
 * ТАП-ЦЕЛЬ 56 px. Норма WCAG — 44 px; кнопка вызова стоит в углу, где палец
 * приходит по касательной, поэтому взята с запасом. Тем же порогом её меряет
 * щуп страниц (П8): «кнопки не меньше 44 px».
 */

/* ============================================================
   К1 «МАРКА-КНОПКА» (задача 2060, вариант К1 по слову владельца 15.09;
   в бой вывезена задачей 2190).

   ЧТО БЫЛО ДО. Плавающая кнопка была ШИРОКОЙ ПЛАШКОЙ «А · Спросить Хрису ·
   точка»: `position: fixed` висел на самой кнопке, а подпись лежала ВНУТРИ
   неё, поэтому ширина кнопки зависела от длины слова — и на скрине владельца
   15.09 18:01 плашка наезжала на текст страницы.

   ЧТО СТАЛО. В углу закреплён пустой `.hrisa-ugol` размером ровно с круг
   56 px; подпись висит от него влево `position: absolute` и на размер кнопки
   не влияет НИКОГДА. Сама кнопка — круг с одной маркой «А», без текста.

   ГРАНИЦА ЭТОГО КРУГА — ТОЛЬКО КНОПКА. Окно входа живёт в редакции 2109/2165
   (шапка-полоса, «Открыть отдельно», полный экран на телефоне) и здесь не
   тронуто ни правилом: строки окна начинаются ниже, с раздела «окно входа»,
   и они те же, что были до этой правки.
   ============================================================ */

/* ---------- цвета марки: ТОЛЬКО переменными тем (задача 2060) ----------
 *
 * Слово владельца 15.09: «ночь — золотая марка на графите с тонким золотым
 * кольцом; день — графитовая марка на сливочном с графитовым кольцом».
 * Ни один из этих четырёх цветов здесь не написан числом: графит и сливочный
 * — это `--bg` дня и ночи, золото — `--accent` ночи, графитовая марка —
 * `--text` дня. Правка палитры витрины (style2.css) доходит до кнопки сама,
 * а «hardcoded — красная» из границ постановки не нарушено.
 *
 * Свои числа заведены ровно у одного цвета — живой точки «на связи»: зелёного
 * в палитре витрины нет вовсе, и раньше он стоял прямо в правиле кнопки
 * (`background: #2e9e5b`). Теперь он объявлен парой значений в блоках тем, по
 * одному на тему, — то есть переменной темы, а не числом в компоненте.
 */
:root {
  --hrisa-marka: var(--text);       /* день — графитовая марка и кольцо */
  --hrisa-fon:   var(--bg);         /* день — сливочный круг */
  --hrisa-tochka: #2E9E5B;
}

[data-theme="dark"] {
  --hrisa-marka: var(--accent);     /* ночь — золотая марка и кольцо */
  --hrisa-tochka: #3FBF74;          /* на графите тёмная зелень не читается */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --hrisa-marka: var(--accent);
    --hrisa-tochka: #3FBF74;
  }
}

/* ---------- угол с кнопкой ---------- */
.hrisa-ugol {
  position: fixed;
  right: 16px;
  /* 16 px от правого и нижнего края — с учётом полосы браузера на телефоне
     (env(safe-area-inset-bottom)), липкой полосы действия (--mcta-h) и полосы
     уведомления о куках (--cknote-h ставит cookie-notice.js, пока она видна).
     Любой из трёх может не быть — тогда 0px. */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)
               + var(--mcta-h, 0px) + var(--cknote-h, 0px));
  z-index: 70;                 /* .mcta-bar живёт на 60 */
  width: 56px;
  height: 56px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

/* Кнопку показывает hrisa-vsyudu.js — после первого скролла или через 3 с.
   Без скриптов она не появляется вовсе, и это намеренно: окно входа без
   скриптов не открывается, а мёртвая кнопка в углу хуже её отсутствия. */
.hrisa-ugol--vidna { opacity: 1; visibility: visible; transform: none; }

/* Пока человек печатает в любой форме страницы, угол уходит совсем.
   Правило стоит ПОСЛЕ `--vidna` намеренно: вес селекторов равен, и при обоих
   классах сразу побеждает нижний — то есть тишина. */
.hrisa-ugol--tiho { opacity: 0; visibility: hidden; transform: translateY(8px); }

/* ---------- чистая зона угла на телефоне (П3 постановки) ------
 * Подвал уже держит снизу место под липкую полосу действия
 * (`.pdv-bottom { padding-bottom: calc(var(--mcta-h) + 16px + ...) }`),
 * но угол сам занимает 56 px кнопки плюс 16 px отступа, и на 390 px его круг
 * ложился на последние слова подвала. Страница отдаёт углу его зону на
 * мобильной полосе (до 899 px — там живёт полоса действия): 56 + 16 px угла
 * плюс полоса о cookie, пока она видна (--cknote-h). Правило стоит на
 * `body:has(.hrisa-ugol)`: главная, где плавающего угла нет, ничего не
 * получает; старый браузер без `:has()` — прежнее поведение подвала, ничего
 * не ломается. Цветов здесь нет ни одного — только размеры.
 */
@media (max-width: 899px) {
  body:has(.hrisa-ugol) {
    padding-bottom: calc(56px + 16px + var(--cknote-h, 0px));
  }
}

/* ---------- сама кнопка: круг 56 px, марка внутри, текста нет ---------- */
.hrisa-knopka {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  /* КОЛЬЦО 2 px И ТЕНЬ 0 2px 8px — замечания ворот вкуса (15.09). Круг залит
     цветом фона темы, то есть тем же цветом, что страница под ним, и держат
     его форму только кольцо с тенью: на кольце 1,5 px и тени 0 1px 4px такой
     круг терялся на светлой секции. Тень при этом осталась минимальной —
     прежняя, плашечная, была 0 6px 24px плюс 0 10px 30px при наведении. */
  border: 2px solid var(--hrisa-marka);     /* тонкое кольцо по теме */
  border-radius: 50%;
  background: var(--hrisa-fon);
  color: var(--hrisa-marka);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: transform .18s ease;
}

.hrisa-knopka:hover { transform: translateY(-1px); }

/* Марка и крест лежат в ОДНОЙ клетке сетки: подмена знака при открытии окна
   не двигает ни кнопку, ни её тап-цель. */
.hrisa-knopka__znak {
  grid-area: 1 / 1;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--hrisa-marka);
}

.hrisa-knopka__krest {
  grid-area: 1 / 1;
  position: relative;
  display: none;
  width: 18px;
  height: 18px;
}

.hrisa-knopka__krest::before,
.hrisa-knopka__krest::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--hrisa-marka);
}

.hrisa-knopka__krest::before { transform: rotate(45deg); }
.hrisa-knopka__krest::after  { transform: rotate(-45deg); }

html.hrisa-otkryto .hrisa-knopka__znak   { display: none; }
html.hrisa-otkryto .hrisa-knopka__krest  { display: block; }
html.hrisa-otkryto .hrisa-knopka__tochka { display: none; }

/* Живая точка «на связи» — 8 px у края круга: гость видит, что за кнопкой не
   форма обратной связи, а работающий вход. Ободок цветом круга отделяет её от
   кольца, иначе на графите точка сливалась бы с золотом. */
.hrisa-knopka__tochka {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hrisa-tochka);
  box-shadow: 0 0 0 2px var(--hrisa-fon);
}

/* ---------- подпись: два текста — телефон и ПК (пункт 2 постановки) --------
 * На столе — при наведении и при фокусе с клавиатуры, слева от круга, тихо.
 * На телефоне (`hover: none`) наведения не бывает: там подпись показывает
 * скрипт один раз при первом появлении кнопки на 3 секунды и больше в этой
 * вкладке не повторяет.
 */
.hrisa-podskaz {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s;
}

@media (hover: hover) {
  .hrisa-ugol:hover .hrisa-podskaz,
  .hrisa-ugol:focus-within .hrisa-podskaz { opacity: 1; visibility: visible; }
}

.hrisa-podskaz--vidna { opacity: 1; visibility: visible; }

/* Два текста одной подписи: на телефоне при первом появлении — короткий
   вопрос, на столе при наведении — с именем помощника. Оба текста приходят из
   разметки (словарь сборщика HRISA_PODSKAZ), выбор между ними — чистый CSS по
   тому, умеет ли устройство наведение. */
.hrisa-podskaz__pk { display: none; }

@media (hover: hover) {
  .hrisa-podskaz__telefon { display: none; }
  .hrisa-podskaz__pk { display: inline; }
}

/* При открытом окне подписи нет ни на столе, ни на телефоне: знак уже
   сменился на крест, и «Спросить Хрису» рядом с ним читалось бы как ложь. */
html.hrisa-otkryto .hrisa-podskaz { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hrisa-ugol, .hrisa-knopka, .hrisa-podskaz { transition: none; }
  .hrisa-knopka:hover { transform: none; }
}

/* ---------- ОДИН КРЕСТ НА ЭКРАН (канон Н1) ----------
 * Кнопка угла при открытом окне «становится закрыть» (пункт 3), а у окна
 * редакции 2109 есть СВОЙ крестик в шапке-полосе и «Свернуть» в нижней
 * плашке. Два креста той же силы на одном экране канон запрещает, и делим их
 * по ширине:
 *
 *   · ТЕЛЕФОН (до 699.98 px): окно 2109 — ПОЛНЫЙ ЭКРАН, и угол под ним
 *     оказался бы за кромкой листа. Здесь угол уходит совсем, а закрывают
 *     окно его собственные крестик, «Свернуть» и жест вниз.
 *   · СТОЛ (от 700 px): окно стоит по центру и правого угла не достаёт —
 *     кнопка остаётся на месте и честно превращается в крест.
 *
 * Клавиатура выхода не теряет ни там, ни там: Esc закрывает окно всегда.
 */
@media (max-width: 699.98px) {
  html.hrisa-otkryto .hrisa-ugol { opacity: 0; visibility: hidden; }
}

@media (min-width: 700px) {
  html.hrisa-otkryto .hrisa-ugol { z-index: 90; }  /* окно живёт на 80 */
}

/* СТРАНИЦА ЗА ОКНОМ НЕ ПРЫГАЕТ (пункт 4 постановки). Замок прокрутки убирает
   полосу браузера, и на столе страница дёргалась вправо на её ширину — шапка
   витрины липкая, она ехала вместе со всем. Ширину полосы меряет скрипт ДО
   замка и кладёт в `--hrisa-polosa`; на телефоне полосы нет, значение 0px, и
   правило ничего не делает. */
html.hrisa-otkryto { padding-right: var(--hrisa-polosa, 0px); }

/* ---------- окно входа ---------- */

.hrisa-okno[hidden] { display: none; }

.hrisa-okno {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hrisa-okno__korob {
  position: relative;
  width: min(760px, 100%);
  /* 2109, П3: было 88vh — окно на ПК поднималось почти до шапки сайта и
     выглядело как отдельный сайт. Потолок 70 % держит над окном полосу
     страницы: видно, где гость, и что окно можно закрыть. */
  max-height: min(70vh, 780px);
  overflow: auto;
  /* Низ коробки поднят на высоту полосы уведомления о куках (--cknote-h её
     ставит cookie-notice.js, пока полоса видна). Без этого на 390 px полоса
     ложилась поверх подсказок и строки «Отвечает ИИ» — поймано кадром
     kadry-hrisa/hrisa-light-diagnostika.png первой редакции: поле видно,
     подсказок нет. Полосы нет — переменной нет, отступ обычный. */
  padding: 3.2rem 1rem calc(1rem + var(--cknote-h, 0px));
  border-radius: 18px 18px 0 0;
  background: var(--bg, #fff);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .3);
}

@media (min-width: 700px) {
  .hrisa-okno { align-items: center; padding: 2rem 1rem; }
  .hrisa-okno__korob {
    border-radius: 18px;
    padding: 3.4rem 1.4rem calc(1.4rem + var(--cknote-h, 0px));
  }
}

.hrisa-okno__zag {
  position: absolute;
  top: .9rem;
  left: 1.1rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #111);
}

.hrisa-okno__zakryt {
  position: absolute;
  top: .5rem;
  right: .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line, #d8d8d8);
  border-radius: 12px;
  background: transparent;
  color: var(--text, #111);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

/* Пока не приехала таблица входа, коробка не должна выглядеть сломанной:
   поле и лента получают минимальную высоту и рамку. vhod.css перекроет. */
.hrisa-okno .vhod-blok { min-height: 220px; }

html.hrisa-otkryto, body.hrisa-otkryto { overflow: hidden; }

/* ============================================================
   2109, П3: ШАПКА-ПОЛОСА, «СВЕРНУТЬ» И ПОЛНЫЙ ЭКРАН НА ТЕЛЕФОНЕ.

   Жалоба владельца (файл 2109, п.3 и П3): на телефоне 390 px окно стояло
   НИЖНЕЙ ПОЛОВИНОЙ ЭКРАНА. Корень — в двух числах: коробка росла по
   содержимому (min-height 220 px у блока входа), а лента внутри была
   ограничена 46 vh из vhod.css. На 390 px это давало чат в нижней трети и
   мёртвый верх окна.

   ЧТО СДЕЛАНО. На телефоне окно — один полный экран (100 dvh с откатом на
   100 vh), вход растянут на него решёткой из /chat/ (гибкая колонка, лента
   забирает остаток) — тот же приём, что .ekran--chat в vhod.css, чтобы
   обе страницы вели себя одинаково. Шапка — настоящая полоса с именем
   «Хриса — вход агентства», крестиком и кнопкой «Открыть отдельно»
   (П4/П11); внизу — плашка с «Свернуть». Жест вниз по шапке и сама полоса
   обслуживаются hrisa-vsyudu.js.

   ВАЖНО ДЛЯ СБОРОЧНОГО ШТАМПА. На страницах лежат четыре версии этого
   файла (1827, 1834, 1847, 1950) — правила равного веса берётся ПОСЛЕДНЯЯ.
   Новый файл обязан ехать ПОСЛЕДНИМ штампом (?v=2109), иначе телефонные
   правила проиграют старым (урок круга 1884 о лаге версий стилей).
   ============================================================ */

/* ---------- шапка-полоса (все экраны; на ПК тот же вид, что был) ---------- */

/* Полоса ложится в верхнюю зону коробки, где раньше стояли два абсолютных
   узла. Вес 0-2-0 у этих правил перебивает их прежние position:absolute
   (0-1-0) даже в старых версиях файла — порядок штампов здесь не страшен. */
.hrisa-okno__shapka {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .9rem 1.1rem 0 1.1rem;
}
.hrisa-okno__shapka .hrisa-okno__zag {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hrisa-okno__shapka .hrisa-okno__zakryt {
  position: static;
  flex: 0 0 auto;
}
/* П4/П11: «открыть отдельно» — та страница /chat/ (задача 2045) в новой
   вкладке. Разговор туда приносит сам vhod.js (ключ и переписка в общем
   хранилище домена) — здесь только дверь с подписью. */
.hrisa-okno__otdelno {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .7rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  /* Золото для ТЕКСТА, а не для заливки: --accent на светлом даёт 3.1:1
     (замер контролёра, круг 5 переделки), домовой токен --accent-tekst
     заведён именно под читаемое золото — 5.7:1 на белом, 9.3:1 на тёмном. */
  color: var(--accent-tekst, #856108);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.hrisa-okno__otdelno:hover, .hrisa-okno__otdelno:focus-visible { text-decoration: underline; }

/* Дверь живёт в двух местах — в шапке (ПК) и в нижней плашке (телефон),
   узел клонирует скрипт (hrisa-vsyudu.js). Видим всегда РОВНО ОДИН.
   На ПК плашки нет, значит работает шапкин экземпляр. */
.hrisa-okno__otdelno--niz { display: none; }

/* Нижняя плашка с «Свернуть» нужна только на телефоне: на ПК есть крестик
   и Esc, а окно и так не во весь экран. Правило стоит ДО телефонного блока,
   чтобы блок его честно перебивал (порядок в файле решает при равном весе). */
.hrisa-okno__niz { display: none; }

/* ---------- телефон: полный экран ---------- */

@media (max-width: 699.98px) {

  /* Полоса уведомления о куках (--cknote-h ставит cookie-notice.js, пока
     видна) снимается с высоты окна: иначе плашка легла бы поверх «Свернуть»
     — та же беда, что ловили на 390 px до подъёма коробки. Полосы нет —
     переменной нет, окно во весь экран. */
  .hrisa-okno { align-items: stretch; padding: 0 0 var(--cknote-h, 0px); }

  .hrisa-okno__korob {
    width: 100%;
    max-height: none;
    height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 3.6rem 1rem 0;
    border-radius: 0;
    box-shadow: none;
    /* Плавное возвращение после жеста вниз; класс --tianem (ставит скрипт)
       его снимает, чтобы палец вёл коробку без лага. */
    transition: transform .2s ease;
  }
  .hrisa-okno__korob--tianem { transition: none; }

  .hrisa-okno__shapka {
    top: 0; left: 0; right: 0;
    height: 3.6rem;
    align-items: center;
    padding: 0 .5rem 0 1rem;
    background: var(--bg, #fff);
    border-bottom: 1px solid var(--line, #d8d8d8);
    /* Жест вниз ведёт шапка: касание в ней не должно тратиться на прокрутку
       страницы — прокручивать здесь нечего, а шторку палец ждёт именно тут. */
    touch-action: none;
  }
  /* Захват для жеста вниз — примета системной шторки: узкая полоска сверху
     по центру. Тап-цель жеста — вся шапка (скрипт), полоска только знак. */
  .hrisa-okno__zakhvat {
    position: absolute;
    top: .3rem; left: 50%;
    width: 44px; height: 4px;
    margin-left: -22px;
    border-radius: 2px;
    background: var(--line, #d8d8d8);
  }
  .hrisa-okno__shapka .hrisa-okno__zag { font-size: .95rem; }

  /* Вход растягивается на весь остаток окна: лента забирает всё, что не
     взяли шапка, поле и низ. Решётка — из /chat/ (.ekran--chat, vhod.css),
     чтобы окно и страница вели себя одинаково. */
  .hrisa-okno .vhod-blok {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-bottom: 0;
  }
  /* Пустой разговор: поле не липнет к шапке, а стоит по центру экрана —
     так окно встречает гостя, как встречала старая карточка по центру
     витрины. С первым ответом (класс --dialog) центр уходит: лента сверху,
     поле снизу. */
  .hrisa-okno .vhod-blok:not(.vhod-blok--dialog) { justify-content: center; }
  .hrisa-okno .vhod-blok--dialog .vhod-lenta-obertka {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
  }
  .hrisa-okno .vhod-lenta {
    max-height: none;
    height: 100%;
  }
  /* Карточки согласия, памяти, возврата и заявки — в потоке колонки: встали —
     лента отдала им место, ушли — вернули. Страница от этого не растёт:
     расти здесь некуда, окно фиксированной высоты. */
  .hrisa-okno .vhod-karta { flex: 0 0 auto; }

  /* ---------- нижняя плашка со «Свернуть» и «Открыть отдельно» ---------- */
  .hrisa-okno__niz {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .3rem 1rem calc(.3rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line, #d8d8d8);
    background: var(--bg, #fff);
  }
  /* Шапкина дверь на телефоне спрятана: на 390 px на неё пришлось бы резать
     имя «Хриса — вход агентства» (эллипсис на скрине первого круга), а гость
     держит эту дверь в пальце снизу — вместе со «Свернуть». */
  .hrisa-okno__otdelno--shapka { display: none; }
  .hrisa-okno__otdelno--niz { display: inline-flex; }
  .hrisa-okno__svernut {
    min-height: 44px;
    min-width: 132px;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-2, #555);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
  }
  .hrisa-okno__svernut:active { background: color-mix(in srgb, var(--accent, #966a32) 12%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .hrisa-okno__korob { transition: none; }
}