/* Гібрид: склейка нового меню кіта зі старим шелом.
   Живе на платформі, а не в киті — це не компонент, а рівно ті кілька
   правил, якими нове меню сідає в стару розкладку. Коли платформа перейде
   на новий шел цілком, файл зникає.

   Порядок підключення: після znohub-ui-lite.css. */

:root {
    /* Старе меню було рівно 240px, і від цього числа залежить відступ
       контенту: .responsive-content { max-width: calc(100% - 240px) }.
       Зводимо сайдбар до тієї самої ширини — і жоден рядок new_style.css
       чіпати не треба. */
    --ui-sidebar-width: 240px;
}

/* Легасі-шел тримає власну модель скролу (body { overflow: hidden } у
   style.css) і скролить .responsive-wrapper. Сайдбар і таб-бар прибиті до
   viewport, тож їм на це начхати — .ui-shell на body НЕ додаємо, інакше
   зламався б скрол усіх старих сторінок. */
/* ---- Відступи сторінки ----
   Один блок замість трьох розкиданих правил. Стандарт: 56 зверху, 24 з
   боків, 120 знизу.
   .secondary перелічена скрізь окремо не заради краси: new_style.css:4878
   обнуляє їй падинг селектором із двох класів (вага 0,2,0), і коротший
   запис програє йому вагою, а не порядком. Контейнер тут ще й скролер
   (overflow-y: auto у style.css), тож без падинга низ контенту не просто
   накритий — до нього нема як докрутити. */
.responsive-content { padding: 56px 24px 120px; }

/* Сторінки з банером-шапкою (курс, заняття, результати, вчитель): банер іде
   від краю до краю, тому верх і боки лишаються за ним самим — інакше він
   перетворюється на врізаний прямокутник, чого ця розкладка не передбачає.
   Від системи вони беруть лише низ, щоб контент не впирався в таб-бар. */
.responsive-content.secondary { padding: 0 0 120px; }
/* ...а бічний відступ їм дає внутрішній контейнер — той самий і в банері, і
   в тілі сторінки. Прирівнюємо його до тих самих 24, інакше сторінка з
   банером стоїть на 16 (а ширше за 1244 — на 40), і краї контенту стрибають
   при переході між розділами. Три класи, бо легасі задає цей падинг двічі,
   базово й на ≤1244, і обидва рази одним класом. */
.responsive-content.secondary .wr-course-container { padding-inline: 24px; }

/* Телефон: боки 16 замість 24 — на 375 два рази по 24 забирають чверть
   рядка. Брейкпойнт 640 — той самий, яким кіт відділяє телефон від
   планшета (.ui-card.row, .ai-fab). Обидва селектори повторені зі своєю
   вагою: коротший запис програв би правилам вище, а не порядком. */
@media screen and (max-width: 640px) {
    .responsive-content { padding-inline: 16px; }
    .responsive-content.secondary .wr-course-container { padding-inline: 16px; }
}

/* Сторінка з кнопкою «назад» починається вище: рядок навігації сам дає
   повітря, і 56 над ним читались як діра. Гачок — сама кнопка (привид із
   шевроном ліворуч), тож в'юсі не треба нести про це окремий клас.
   Лише від 1024: нижче верх диктує фіксована панель, а не дизайн.
   :not(.secondary) обов'язковий: :has() важить своїм найважчим аргументом
   (тут 4 класи), і без нього це правило перебило б нульовий верх сторінок
   із банером. */
@media screen and (min-width: 1024px) {
    .responsive-content:not(.secondary):has(.ui-btn.ghost > .ui-icon.i-chevron-left) {
        padding-top: 16px; }
}

/* Фон сторінки — той самий, що в новому шелі: сірий щабель, на якому
   картки читаються як підняті. У новому шелі його дає .ui-app, тут її
   немає, тож фарбуємо обидві частини явно — і меню, і полотно під
   контентом, щоб шва по межі 240px не було.

   Специфічність не випадкова: style.css має body.light > .responsive-wrapper
   (0,2,1), і простий .responsive-wrapper (0,1,0) програв би йому попри
   пізніший порядок. Три селектори покривають усі стани body, які фарбує
   легасі (light / auth / home) плюс базовий. */
.ui-sidebar { background: var(--ui-surface-page); }
.responsive-wrapper,
body.light > .responsive-wrapper,
body.auth > .responsive-wrapper { background: var(--ui-surface-page); }

/* Верхня панель у новому шелі — sticky, і там це працює, бо .ui-app не флекс.
   Тут вона потрапляє в флекс-рядок легасі (.responsive-main) і забирає в
   контенту півширини. Виводимо з потоку: для прибитої зверху панелі fixed
   і так природніше, а легасі .wr-header, яку вона замінює, теж була поза
   потоком. */
@media screen and (max-width: 1023px) {
    .ui-appbar { position: fixed; top: 0; left: 0; right: 0; }
    /* Верх диктує фіксована панель, а не дизайн: 56 її висоти + 16 повітря.
       Кнопка «назад» тут нічого не змінює — ті самі 16 вже всередині 72. */
    .responsive-content { padding-top: 72px; }
    /* Сторінка з банером — рівно висота панелі, без повітря: банер іде від
       краю до краю і має стояти впритул до неї, інакше між ними лишається
       смуга тла сторінки. Повітря всередині блакитного дає власний падинг
       банера (24 зверху). */
    .responsive-content.secondary { padding-top: 56px; }
    /* Низ: стандартні 120 плюс безпечна зона — таб-бар (61) вони покривають
       із запасом. Де є плаваюча кнопка помічника, треба більше: вона стоїть
       на 76 і має 48 висоти, тобто верхній край на 124 від низу екрана;
       136 дає ще 12. Через :has(), а не всім підряд: помічник підключається
       лише на сторінках із контекстом курсу, і решта не має платити зайвою
       порожнечею. Той самий прийом уже вживається в new_style.css —
       body:has(.ui-quiz-actions.bar).
       .error-content має власний контейнер із 40px — менше за бар. */
    .responsive-content,
    .responsive-content.secondary,
    .error-content { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
    body:has(.ai-fab) .responsive-content,
    body:has(.ai-fab) .responsive-content.secondary,
    body:has(.ai-fab) .error-content { padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
}

/* Плаваюча кнопка помічника стояла на bottom: 16/24 — тобто просто поверх
   таб-бара: z-index у неї 90 проти 40, тож вона не ховалась під баром, а
   накривала його кнопки. Піднімаємо над баром (61px + запас).
   Брейкпойнт саме 1023, а не 640, як у власних мобільних правилах .ai-fab:
   бар зʼявляється з 1023, і в проміжку 641-1023 кнопка лежала на ньому теж. */
@media screen and (max-width: 1023px) {
    .ai-fab,
    .ai-chat { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    /* Панель чату має власну висоту (min(78vh, 560px) у new_style), і після
       підйому низу на 76 її верх на коротких екранах ліз під фіксовану шапку.
       Стеля замість зміни height: у звичайних розмірах вона не спрацьовує
       взагалі, а на низькому екрані обрізає рівно стільки, скільки треба.
       72 = 56 шапки + 16 повітря. */
    .ai-chat {
        max-height: calc(100dvh - 76px - 72px - env(safe-area-inset-bottom, 0px));
    }
}

/* Легасі-попапи мають z-index: 11, а кітовий лист «Ще» — 95. Тобто будь-який
   старий попап, відкритий на мобільному, ховається ПІД листом навігації.
   Піднімаємо до рівня кітових модалок, але тільки відкритий: закриті
   лишаються зі своїм порядком, щоб не переставити стек там, де його ніхто
   не чіпав.
   ВАЖЛИВО: це рятує від перекриття, але НЕ від змішування двох механізмів.
   Якщо кітовий data-modal-open відкриває легасі-попап, а закриває його
   легасі-хрестик, у стеку драйвера лишається привид: далі не закривається
   вже нічого, і body назавжди лишається з .ui-lock. Саме тому вікно серії
   переведене на .ui-modal, а не підперте цим правилом. */
.wr-popup.active { z-index: 100; }

/* Вікно серії: кітова оболонка .ui-modal, але коробка всередині — легасі.
   .ui-modal-escape (підложка «клік повз вікно») лежить absolute із z-index: 0,
   а кітова .ui-modal-box піднімається над нею через position: relative +
   z-index: 1. Легасі .wr-popup-container не позиційований узагалі, тож
   підложка малювалась ПОВЕРХ нього — і клік по самому вікну його закривав.
   Даємо контейнеру той самий підйом. */
.ui-modal > .wr-popup-container { position: relative; z-index: 1; }

/* Шрифт на всю сторінку, а не лише на кітові блоки.
   Чому !important, хоч це й груба зброя: style.css ставить Open Sans
   УНІВЕРСАЛЬНИМ селектором `* { font-family: ... }`, тобто кожному елементу
   напряму — успадкування від body не спрацьовує взагалі. Перебити його
   таким самим `*` замало: ще 21 правило в style.css задає Open Sans через
   класи (.test-info>h1, .default-button.pr-a>p і подібні), і вони виграють
   специфічністю. Лишати їх — це мішана типографіка в двох десятках місць.
   Правило живе в тимчасовому файлі гібрида й зникне разом із ним, коли
   платформа перейде на новий шел цілком. */
*, *::before, *::after { font-family: var(--ui-font) !important; }

/* Чипи віх у вікні серії. Легасі-правило дає жовтий тінт і оливковий текст
   (rgba(253,218,15,.22) / #6E5C00) — вони підбиралися під жовту монету.
   Монета тепер синя, і жовта плашка під нею читається як чужа. Беремо
   акцентні ролі кіта: заразом чип темується разом з рештою.
   Тут, а не в new_style.css: гібрид не чіпає легасі-файли. */
.streak-win-coin { background: var(--ui-tint-accent); color: var(--ui-text-accent); }

/* Кружечок іконки заморозки. Кіт малює .ui-icon-circle сірим на сірому —
   у вікні серії ця іконка була акцентною плашкою, і втрачати акцент не
   треба: лишаємо синій квадрат легасі, але гліф тепер із пака кіта. */
.streak-win-freeze-label > .ui-icon-circle {
    width: 28px; height: 28px; flex: none;
    border-radius: 8px; background: var(--ui-fill-accent); }
.streak-win-freeze-label > .ui-icon-circle > .ui-icon::before { background: var(--ui-text-on-accent); }

/* Кіт-сторінка в легасі-колонці. .responsive-content — флекс-колонка з
   align-items: center (style.css:1648), тож .ui-main-content (max-width
   --ui-content-width, margin: 0 auto) без явної ширини стискається до
   вмісту. У новому шелі її батько — блок .ui-main, і ширина береться сама.
   Легасі для того самого тримав width: 100% на .max-content. Перша така
   сторінка — «Тести ЗНО / НМТ». */
.responsive-content > .ui-main-content { width: 100%; }

/* Смуга прокрутки на дотикових екранах.

   style.css:11 задає ::-webkit-scrollbar { width: 8px } глобально — і в
   кабінеті прокручується не вікно, а внутрішня колонка .responsive-content,
   тож ці 8px на телефоні зʼїдають ширину контенту й малюють синю смугу
   поверх картки. На дотику вона не потрібна взагалі: там скрол пальцем, а
   системна смуга й так накладна й зникає сама.

   Гейт саме (pointer: coarse), а не ширина: вузьке вікно на десктопі —
   це миша, і там смуга лишається робочим елементом керування. */
@media (pointer: coarse) {
    ::-webkit-scrollbar { width: 0; height: 0; }
    * { scrollbar-width: none; }
}