/* ============================================================================
   YAZME 2026 | ШАПКА — специфика и адаптив
   Основные токены и компоненты — в yazme-theme.css
   ========================================================================== */

.yz-header__center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    max-width: 46vw;
}

.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;
}

/* ---------- Мобильный адаптив ---------- */
@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; }
    .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%; }

    /* Кнопка установки на телефоне видна всегда, кроме установленного приложения */
    body:not(.yz-standalone):not(.yz-pwa-installed) .yz-install-btn { display: inline-flex; }
}
@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; } /* остаётся только знак */
}

/* ---------- Легаси-мост ---------- */
#header-player-wrap.hidden { display: none !important; }
body.brc-audio-active #header-player-wrap { display: flex !important; }
body.brc-audio-active #header-player-progress-track { display: block !important; }

/* ВАЖНО: у .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; } }