/* ============================================================================
   YAZME 2026 | ШАПКА — концепт «ЛИНЗА»
   Основные токены и компоненты — в yazme-theme.css (этот файл подключается ПОСЛЕ
   и намеренно переопределяет базовые правила .yz-header / .yz-hbtn).

   Идея: полоса во всю ширину без плотного фона — только стекло (backdrop-filter).
   В покое кромки нет вовсе. При скролле (body.yz-scrolled, класс ставит
   includes/header.php) стекло плотнеет, шапка сжимается и снизу зажигается
   тонкая световая линия с акцентом по центру.

   ОТКАТ: вернуть старый файл из git — разметка header.php с ним совместима,
   кроме капсулы контекста (.yz-ctx), которая без стилей просто станет текстом.
   ========================================================================== */

/* ---------- 1. СТЕКЛО ПОЛОСЫ ---------- */
.yz-header {
    /* фолбэк для браузеров без color-mix (Safari < 16.2, старый Chrome) */
    background: var(--yz-glass);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    border-bottom: 0;                 /* линию заменила световая кромка ниже */
    transition: height 0.45s var(--yz-ease),
                background 0.45s var(--yz-ease),
                box-shadow 0.45s var(--yz-ease);
}
/* contain:paint здесь НЕЛЬЗЯ: он обрезает всё, что выходит за пределы шапки,
   и выпадашка уведомлений (position:absolute, top:100%) просто исчезает. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
    /* два слоя: сверху — блик «света на кромке», под ним — само стекло */
    .yz-header {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 58%),
            linear-gradient(180deg,
                color-mix(in srgb, var(--yz-bg) 62%, transparent),
                color-mix(in srgb, var(--yz-bg) 34%, transparent));
    }
    body.yz-scrolled .yz-header {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 58%),
            linear-gradient(180deg,
                color-mix(in srgb, var(--yz-bg) 88%, transparent),
                color-mix(in srgb, var(--yz-bg) 68%, transparent));
    }
}

/* Верхний блик вшит прямо в градиент фона (см. @supports выше): отдельный
   ::before-слой перекрывал бы текст логотипа — у непозиционированных детей
   шапки нет способа встать над ним без лишнего z-index-салата. */

/* световая кромка снизу — появляется только когда под шапку заехал контент */
.yz-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent,
        var(--yz-border-strong) 12%,
        var(--yz-accent-line) 50%,
        var(--yz-border-strong) 88%,
        transparent);
    opacity: 0;
    transition: opacity 0.45s var(--yz-ease);
}
body.yz-scrolled .yz-header {
    height: calc(52px + var(--safe-top));
    box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0.9);
}
body.yz-scrolled .yz-header::after { opacity: 1; }

/* ---------- 2. КАПСУЛА КОНТЕКСТА (центр) ---------- */
.yz-header__center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    max-width: 46vw;
}
.yz-ctx {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    max-width: 100%;
    border-radius: var(--yz-r-pill);
    border: 1px solid var(--yz-border-strong);
    background: color-mix(in srgb, var(--yz-surface) 55%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    font-family: var(--yz-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--yz-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: transform 0.22s var(--yz-spring), color 0.2s, border-color 0.2s;
}
.yz-ctx:hover { color: var(--yz-text); border-color: var(--yz-accent-line); }
.yz-ctx:active { transform: scale(0.95); }
.yz-ctx b { color: var(--yz-text); font-weight: 700; }
.yz-ctx__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--yz-accent);
    box-shadow: 0 0 10px var(--yz-accent);
}

/* ---------- 3. КНОПКИ ШАПКИ ПОД СТЕКЛО ---------- */
/* на стекле «плитки» из surface выглядят инородно: фон появляется только на hover */
.yz-header .yz-hbtn {
    background: transparent;
    border-color: transparent;
}
.yz-header .yz-hbtn:hover {
    background: color-mix(in srgb, var(--yz-text) 9%, transparent);
    border-color: var(--yz-border);
}
.yz-header .yz-hbtn .notif-badge { border-color: transparent; }

.yz-header .hmp-btn--close { color: var(--yz-muted); }
.yz-header .hmp-btn--close:hover { color: var(--yz-danger); background: rgba(229, 72, 77, 0.12); }

/* Страницы с обложкой могут делать шапку прозрачной */
body.yz-header-transparent .yz-header {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent);
    border-bottom-color: transparent;
}
/* [cloud-fix 2026-08-19] В светлой теме текст шапки тёмный (токены) — тёмный скрим
   делал его нечитаемым над обложкой. Светлый скрим решает то же самое честно. */
html[data-yz-theme="cloud"] body.yz-header-transparent .yz-header {
    background: linear-gradient(180deg, rgba(244, 242, 236, 0.72), transparent);
}
body.yz-header-transparent .yz-header::after { opacity: 0; }

/* ---------- 4. МОБИЛЬНЫЙ АДАПТИВ ---------- */
@media (max-width: 768px) {
    .yz-header { height: calc(54px + var(--safe-top)); padding-left: max(10px, var(--safe-left)); padding-right: max(10px, var(--safe-right)); gap: 8px; }
    body.yz-scrolled .yz-header { height: calc(48px + var(--safe-top)); }
    .yz-logo__word { font-size: 15px; }
    .yz-logo__mark { width: 31px; height: 31px; border-radius: 10px; }
    .yz-hbtn { width: 38px; height: 38px; border-radius: 12px; }

    /* ФИКС «не влазиет»: центр больше НЕ абсолютный (наезжал на кнопку App и логотип),
       а обычный flex-элемент между боками — наложения физически невозможны */
    .yz-header__center {
        position: static;
        transform: none;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        justify-content: center;
    }
    .yz-header__side { flex-shrink: 0; }
    .yz-header .hmp-info { display: none; } /* на телефоне мини-плеер = обложка + кнопки */
    .yz-header .header-mini-player { padding: 4px; gap: 4px; max-width: 100%; }

    /* Кнопка установки на телефоне видна всегда, кроме установленного приложения.
       26.08.2026: было body:not(...), стало html:not(...). Классы на body ставил
       скрипт из низа страницы — то есть после отрисовки шапки, и у человека с
       установленным приложением кнопка вспыхивала и пропадала при каждом
       обновлении. Теперь тот же класс ставится в <head> на <html>, до первой
       отрисовки (yz_pwa_head в includes/yz_boot_client.php). Классы на body
       по-прежнему ставятся тоже — специально ради правил, которые их ждут. */
    html:not(.yz-standalone):not(.yz-pwa-installed) .yz-install-btn { display: inline-flex; }
}
/* Внутри установленного приложения кнопка не нужна вовсе — и это единственная
   проверка, которая работает без JavaScript. Страховка на случай, когда
   localStorage недоступен или скрипт не доехал. */
@media (display-mode: standalone) {
    .yz-install-btn { display: none !important; }
}
@media (max-width: 640px) {
    /* капсула контекста на узком экране только мешает логотипу и кнопкам */
    .yz-header__center { display: none; }
}
@media (max-width: 480px) {
    /* Компактная кнопка App: только иконка — гарантированно помещается */
    .yz-install-btn { width: 38px; height: 38px; padding: 0; gap: 0; justify-content: center; border-radius: 12px; }
    .yz-install-btn .yz-install-btn__label { display: none; }
    .yz-install-btn svg { width: 16px; height: 16px; }
}
@media (max-width: 400px) {
    .yz-logo__word { display: none; } /* остаётся только знак */
}

/* ---------- 5. ДОСТУПНОСТЬ ---------- */
@media (prefers-reduced-motion: reduce) {
    .yz-header, .yz-header::after, .yz-ctx { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .yz-header, .yz-ctx {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--yz-glass-strong);
    }
}

/* ---------- 6. ВЫПАДАШКА УВЕДОМЛЕНИЙ ---------- */
/* ВАЖНО: у .yz-header стоит backdrop-filter — он делает шапку containing block
   для fixed-потомков, из-за чего «фиксированная» шторка проваливалась и была не видна.
   Поэтому выпадашка позиционируется АБСОЛЮТНО относительно самой шапки. */
.yz-header .notif-dropdown { z-index: 2147483200; }

@media (max-width: 600px) {
    .yz-header .notification-wrapper { position: static; }
    .yz-header .notif-dropdown {
        position: absolute;            /* якорь — сама шапка (она sticky) */
        top: calc(100% + 8px);
        left: 8px;
        right: 8px;
        width: auto;
        max-height: min(68vh, 520px);
        border-radius: var(--yz-r-lg);
        animation: yzDropIn 0.28s var(--yz-ease);
        box-shadow: var(--yz-shadow-lg);
    }
}
@keyframes yzDropIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes yzSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }