/* ============================================================================
   YAZME 2026 | ДИЗАЙН-СИСТЕМА — ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ
   ----------------------------------------------------------------------------
   Три темы:
     • amber  — «Янтарь» (флагман): тёплый графит + терракота (как book/coin/мессенджер)
     • cloud  — «Cloud Dancer»: премиальная белая (Pantone 2026)
     • midnight — «Полночь»: чёрно-синяя ночь + шампань-золото (люкс)
   Переключение: html[data-yz-theme="amber|cloud|midnight"], управляет assets/js/yz-theme.js
   Режим «auto» = светлая/тёмная по системной теме телефона.
   Файл подключается ПОСЛЕ style.css и переопределяет легаси-переменные (мост).
   ========================================================================== */

/* ---------- БАЗОВЫЕ ТОКЕНЫ (общие для всех тем) ---------- */
:root {
    --yz-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --yz-font-display: 'Unbounded', 'Inter', sans-serif;

    --yz-r-sm: 10px;
    --yz-r-md: 16px;
    --yz-r-lg: 22px;
    --yz-r-xl: 28px;
    --yz-r-pill: 999px;

    --yz-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --yz-spring: cubic-bezier(0.34, 1.45, 0.5, 1);

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* Бейджи тарифов (фирменные градиенты 2026) */
    --yz-badge-plus: linear-gradient(135deg, #7fb2ff 0%, #4a7dff 55%, #2f55e0 100%);
    --yz-badge-plus-glow: rgba(74, 125, 255, 0.45);
    --yz-badge-premium: linear-gradient(135deg, #ffe08a 0%, #e8b54a 48%, #c98a2e 100%);
    --yz-badge-premium-glow: rgba(232, 181, 74, 0.5);
    --yz-badge-ultra: linear-gradient(135deg, #ff7ad9 0%, #b06bff 40%, #5d8bff 78%, #35d0c8 100%);
    --yz-badge-ultra-glow: rgba(176, 107, 255, 0.5);
}

/* ---------- ТЕМА: ЯНТАРЬ (флагман, по умолчанию) ---------- */
:root, html[data-yz-theme="amber"] {
    color-scheme: dark;
    --yz-bg: #262624;
    --yz-bg-deep: #1d1c1a;
    --yz-surface: #30302e;
    --yz-surface-2: #3a3936;
    --yz-overlay: rgba(22, 21, 19, 0.72);
    --yz-glass: rgba(38, 37, 34, 0.78);
    --yz-glass-strong: rgba(29, 28, 26, 0.88);

    --yz-text: #faf9f5;
    --yz-dim: #b9b4a7;
    --yz-muted: #8d8878;

    --yz-border: rgba(250, 249, 245, 0.08);
    --yz-border-strong: rgba(250, 249, 245, 0.17);

    --yz-accent: #d97757;
    --yz-accent-hi: #e88a68;
    --yz-accent-deep: #b05730;
    --yz-accent-soft: rgba(217, 119, 87, 0.14);
    --yz-accent-line: rgba(217, 119, 87, 0.42);
    --yz-grad: linear-gradient(135deg, #e2885f 0%, #d97757 45%, #b3552e 100%);
    --yz-accent-glow: 0 8px 26px rgba(217, 119, 87, 0.35);

    --yz-gold: #e2b13c;
    --yz-danger: #e5484d;
    --yz-success: #58a76b;
    --yz-info: #4c8dff;

    --yz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
    --yz-shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
    --yz-shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.65);
    --yz-bg-glow: none;
    --yz-theme-color: #1d1c1a; /* для <meta theme-color> */
}

/* ---------- ТЕМА: CLOUD DANCER (белая, Pantone 2026) ---------- */
html[data-yz-theme="cloud"] {
    color-scheme: light;
    --yz-bg: #f4f2ec;
    --yz-bg-deep: #ebe8e0;
    --yz-surface: #ffffff;
    --yz-surface-2: #faf9f4;
    --yz-overlay: rgba(52, 48, 40, 0.42);
    --yz-glass: rgba(255, 255, 255, 0.82);
    --yz-glass-strong: rgba(255, 255, 255, 0.92);

    --yz-text: #232019;
    --yz-dim: #6e695d;
    --yz-muted: #9a9384;

    --yz-border: rgba(35, 32, 25, 0.09);
    --yz-border-strong: rgba(35, 32, 25, 0.18);

    --yz-accent: #c96543;
    --yz-accent-hi: #dd7a56;
    --yz-accent-deep: #a54c2b;
    --yz-accent-soft: rgba(201, 101, 67, 0.12);
    --yz-accent-line: rgba(201, 101, 67, 0.4);
    --yz-grad: linear-gradient(135deg, #e2885f 0%, #d0684a 50%, #b3552e 100%);
    --yz-accent-glow: 0 8px 24px rgba(201, 101, 67, 0.28);

    --yz-gold: #c2922a;
    --yz-danger: #d9363e;
    --yz-success: #3f8d54;
    --yz-info: #2f6fe0;

    --yz-shadow-sm: 0 2px 8px rgba(60, 50, 35, 0.08);
    --yz-shadow-md: 0 10px 30px -12px rgba(60, 50, 35, 0.16);
    --yz-shadow-lg: 0 24px 60px -18px rgba(60, 50, 35, 0.22);
    --yz-bg-glow: none;
    --yz-theme-color: #f4f2ec;
}

/* ---------- ТЕМА: ПОЛНОЧЬ (глубокая чёрно-синяя ночь + шампань-золото) ---------- */
html[data-yz-theme="midnight"] {
    color-scheme: dark;
    --yz-bg: #101319;
    --yz-bg-deep: #0a0d12;
    --yz-surface: #171b23;
    --yz-surface-2: #1e232e;
    --yz-overlay: rgba(5, 7, 11, 0.74);
    --yz-glass: rgba(16, 19, 25, 0.8);
    --yz-glass-strong: rgba(10, 13, 18, 0.92);

    --yz-text: #f2f0e9;
    --yz-dim: #a8aab4;
    --yz-muted: #6f7280;

    --yz-border: rgba(242, 240, 233, 0.08);
    --yz-border-strong: rgba(242, 240, 233, 0.17);

    --yz-accent: #e0b45c;
    --yz-accent-hi: #f0c979;
    --yz-accent-deep: #b8893a;
    --yz-accent-soft: rgba(224, 180, 92, 0.13);
    --yz-accent-line: rgba(224, 180, 92, 0.42);
    --yz-grad: linear-gradient(135deg, #f0c979 0%, #e0b45c 45%, #b8893a 100%);
    --yz-accent-glow: 0 8px 26px rgba(224, 180, 92, 0.3);

    --yz-gold: #e0b45c;
    --yz-danger: #ff5d6c;
    --yz-success: #43c284;
    --yz-info: #5b8def;

    --yz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --yz-shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
    --yz-shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
    --yz-bg-glow: none;
    --yz-theme-color: #0a0d12;
}

/* ============================================================================
   МОСТ СОВМЕСТИМОСТИ — легаси-переменные всего сайта следуют за темой
   ========================================================================== */
:root, html[data-yz-theme] {
    --bg-base: var(--yz-bg);
    --bg-main: var(--yz-bg);
    --bg-deep: var(--yz-bg-deep);
    --bg-glow: var(--yz-bg-glow);
    --surface: var(--yz-surface);
    --surface-2: var(--yz-surface-2);
    --card-bg: var(--yz-surface);
    --panel-bg: var(--yz-surface);
    --bg-panel: var(--yz-surface);
    --glass-bg: var(--yz-glass);
    --glass-strong: var(--yz-glass-strong);
    --overlay-bg: var(--yz-overlay);
    --border: var(--yz-border);
    --border-light: var(--yz-border);
    --border-strong: var(--yz-border-strong);
    --glass-border: var(--yz-border);
    --text: var(--yz-text);
    --text-primary: var(--yz-text);
    --text-secondary: var(--yz-dim);
    --text-muted: var(--yz-muted);
    --dim: var(--yz-dim);
    --muted: var(--yz-muted);
    --accent: var(--yz-accent);
    --accent-primary: var(--yz-accent);
    --accent-hover: var(--yz-accent-hi);
    --accent-hi: var(--yz-accent-hi);
    --accent-soft: var(--yz-accent-soft);
    --accent-line: var(--yz-accent-line);
    --danger: var(--yz-danger);
    --success: var(--yz-success);
    --gold: var(--yz-gold);
    --info: var(--yz-info);
    --user-bubble: var(--yz-accent-soft);
    --modal-bg: var(--yz-surface);
    --input-bg: var(--yz-surface-2);
    --btn-secondary-bg: var(--yz-surface-2);
    --btn-secondary-hover: var(--yz-border-strong);
    --shadow-sm: var(--yz-shadow-sm);
    --shadow-md: var(--yz-shadow-md);
    --shadow-lg: var(--yz-shadow-lg);
}
/* Легаси-классы тем больше не переопределяют палитру: */
html.dark-theme, body.dark-theme,
html.oled-theme, body.oled-theme {
    --bg-base: var(--yz-bg);
    --bg-main: var(--yz-bg);
    --surface: var(--yz-surface);
    --bg-panel: var(--yz-surface);
    --border-light: var(--yz-border);
    --glass-border: var(--yz-border);
    --text-primary: var(--yz-text);
    --text-secondary: var(--yz-dim);
    --accent: var(--yz-accent);
    --accent-primary: var(--yz-accent);
    --accent-hover: var(--yz-accent-hi);
    --user-bubble: var(--yz-accent-soft);
    --modal-bg: var(--yz-surface);
    --input-bg: var(--yz-surface-2);
    --btn-secondary-bg: var(--yz-surface-2);
    --btn-secondary-hover: var(--yz-border-strong);
}

/* ---------- БАЗА ---------- */
html { background: var(--yz-bg-deep); }
body {
    background: var(--yz-bg);
    background-image: var(--yz-bg-glow);
    color: var(--yz-text);
    font-family: var(--yz-font-ui);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}
::selection { background: var(--yz-accent-soft); }

/* ============================================================================
   ЕДИНАЯ ШАПКА 2026
   ========================================================================== */
.yz-header {
    position: sticky;
    top: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: calc(58px + var(--safe-top));
    /* Единый цвет с фоном страницы + контент шапки не шире 1160px на ПК */
    padding: var(--safe-top) max(14px, var(--safe-right), calc((100% - 1160px) / 2)) 0 max(14px, var(--safe-left), calc((100% - 1160px) / 2));
    background: var(--yz-bg);
    border-bottom: 1px solid var(--yz-border);
}
.yz-header__side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.yz-header__side--right { justify-content: flex-end; }

/* Логотип */
.yz-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
}
.yz-logo__mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--yz-grad);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: var(--yz-accent-glow);
    flex: 0 0 auto;
}
.yz-logo__mark svg { width: 19px; height: 19px; display: block; }
.yz-logo__word {
    font-family: var(--yz-font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.04em;
    color: var(--yz-text);
    line-height: 1;
}
.yz-logo__word em { font-style: normal; color: var(--yz-accent); }
.yz-logo:active .yz-logo__mark { transform: scale(0.93); }
.yz-logo__mark { transition: transform 0.25s var(--yz-spring), box-shadow 0.25s; }

/* Круглая кнопка шапки */
.yz-hbtn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    border: 1px solid var(--yz-border);
    background: var(--yz-surface);
    color: var(--yz-dim);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.22s var(--yz-spring), background 0.2s, color 0.2s, border-color 0.2s;
    flex: 0 0 auto;
}
.yz-hbtn svg { width: 19px; height: 19px; }
.yz-hbtn:hover { color: var(--yz-text); border-color: var(--yz-border-strong); }
.yz-hbtn:active { transform: scale(0.9); }
.yz-hbtn .notif-badge,
.yz-hbtn .yz-hbtn__dot {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--yz-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--yz-bg);
}
.yz-hbtn .notif-badge.hidden { display: none; }

/* Кнопка «Установить приложение» */
.yz-install-btn {
    display: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--yz-r-pill);
    border: 1px solid var(--yz-accent-line);
    background: var(--yz-accent-soft);
    color: var(--yz-accent-hi);
    font-family: var(--yz-font-ui);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s var(--yz-spring);
}
.yz-install-btn:active { transform: scale(0.94); }
.yz-install-btn svg { width: 14px; height: 14px; }
body.pwa-ready .yz-install-btn { display: inline-flex; }

/* Мини-плеер в шапке */
.yz-header .header-mini-player {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(46vw, 380px);
    height: 42px;
    padding: 4px 6px 4px 4px;
    border-radius: var(--yz-r-pill);
    border: 1px solid var(--yz-border);
    background: var(--yz-surface);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.25s;
}
.yz-header .header-mini-player:hover { border-color: var(--yz-accent-line); box-shadow: var(--yz-accent-glow); }
.yz-header .header-mini-player.hidden { display: none; }
.yz-header .hmp-cover {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--yz-grad);
    background-size: cover !important;
    background-position: center !important;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    animation: yzSpin 12s linear infinite;
    animation-play-state: paused;
}
body.brc-audio-active .yz-header .hmp-cover { animation-play-state: running; }
@keyframes yzSpin { to { transform: rotate(360deg); } }
.yz-header .hmp-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.yz-header .hmp-title { font-size: 12px; font-weight: 700; color: var(--yz-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-header .hmp-artist { font-size: 11px; color: var(--yz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-header .hmp-controls { display: flex; align-items: center; gap: 2px; }
.yz-header .hmp-btn {
    width: 30px; height: 30px;
    border: none; background: transparent;
    color: var(--yz-dim);
    border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer; font-size: 12px;
    transition: background 0.15s, color 0.15s, transform 0.2s var(--yz-spring);
}
.yz-header .hmp-btn:hover { background: var(--yz-accent-soft); color: var(--yz-accent-hi); }
.yz-header .hmp-btn:active { transform: scale(0.85); }
.yz-header .hmp-progress-track {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: transparent;
    cursor: pointer;
}
.yz-header .hmp-progress-track.hidden { display: none; }
.yz-header .hmp-progress-fill { height: 100%; width: 0%; background: var(--yz-grad); border-radius: 2px; transition: width 0.25s linear; }

/* Выпадашка уведомлений — под токены */
.yz-header .notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(92vw, 380px);
    max-height: 70vh;
    overflow: auto;
    background: var(--yz-glass-strong);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid var(--yz-border-strong);
    border-radius: var(--yz-r-lg);
    box-shadow: var(--yz-shadow-lg);
    z-index: 6000;
    animation: yzPopIn 0.22s var(--yz-ease);
}
@keyframes yzPopIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.yz-header .notif-dropdown.hidden { display: none; }
.yz-header .notif-header { padding: 14px 16px 10px; font-weight: 800; font-size: 14px; color: var(--yz-text); border-bottom: 1px solid var(--yz-border); }
.yz-header .notif-empty-box { padding: 34px 20px; text-align: center; color: var(--yz-muted); }
.yz-header .notif-empty-icon { width: 34px; height: 34px; margin-bottom: 10px; opacity: 0.6; }
.yz-header .notif-empty-text { font-size: 13px; line-height: 1.5; margin: 0; }

/* Попап выбора темы */
.yz-theme-pop {
    position: fixed;
    z-index: 7000;
    width: 250px;
    padding: 8px;
    background: var(--yz-glass-strong);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid var(--yz-border-strong);
    border-radius: var(--yz-r-lg);
    box-shadow: var(--yz-shadow-lg);
    animation: yzPopIn 0.22s var(--yz-ease);
}
.yz-theme-pop.hidden { display: none; }
.yz-theme-pop__title { padding: 8px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yz-muted); }
.yz-theme-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: var(--yz-r-md);
    color: var(--yz-text);
    font-family: var(--yz-font-ui);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}
.yz-theme-opt:hover { background: var(--yz-accent-soft); }
.yz-theme-opt.active { background: var(--yz-accent-soft); }
.yz-theme-opt.active::after {
    content: '';
    margin-left: auto;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--yz-accent);
    box-shadow: 0 0 10px var(--yz-accent);
}
.yz-theme-opt__swatch {
    width: 26px; height: 26px;
    border-radius: 9px;
    border: 1px solid var(--yz-border-strong);
    flex: 0 0 auto;
}
.yz-theme-opt__swatch--auto { background: conic-gradient(#262624 0 50%, #f4f2ec 50% 100%); }
.yz-theme-opt__swatch--amber { background: linear-gradient(135deg, #262624 55%, #d97757 55%); }
.yz-theme-opt__swatch--cloud { background: linear-gradient(135deg, #f4f2ec 55%, #d0684a 55%); }
.yz-theme-opt__swatch--midnight { background: linear-gradient(135deg, #101319 55%, #e0b45c 55%); }

/* ============================================================================
   БЕЙДЖИ ТАРИФОВ 2026 — везде, где есть имя
   ========================================================================== */
.yz-badge {
    --b-grad: var(--yz-badge-premium);
    --b-glow: var(--yz-badge-premium-glow);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--b-grad);
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    box-shadow: 0 2px 10px var(--b-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.25s var(--yz-spring), box-shadow 0.25s;
    overflow: hidden;
    isolation: isolate;
}
.yz-badge:hover { transform: scale(1.12) rotate(-4deg); box-shadow: 0 4px 16px var(--b-glow), inset 0 1px 0 rgba(255,255,255,0.35); }
.yz-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.55) 48%, transparent 62%);
    transform: translateX(-110%);
    animation: yzBadgeShine 4.2s var(--yz-ease) infinite;
}
@keyframes yzBadgeShine {
    0%, 62% { transform: translateX(-110%); }
    78%, 100% { transform: translateX(110%); }
}
.yz-badge--plus { --b-grad: var(--yz-badge-plus); --b-glow: var(--yz-badge-plus-glow); }
.yz-badge--premium { --b-grad: var(--yz-badge-premium); --b-glow: var(--yz-badge-premium-glow); }
.yz-badge--ultra { --b-grad: var(--yz-badge-ultra); --b-glow: var(--yz-badge-ultra-glow); background-size: 160% 160%; animation: yzUltraFlow 6s ease infinite; }
@keyframes yzUltraFlow {
    0%, 100% { background-position: 0% 30%; }
    50% { background-position: 100% 70%; }
}
.yz-badge--custom { --b-grad: linear-gradient(135deg, var(--b-c1, #d97757), var(--b-c2, #b05730)); }

/* Размеры */
.yz-badge--mini { width: 16px; height: 16px; font-size: 8px; }
.yz-badge--feed { width: 18px; height: 18px; font-size: 9px; }
.yz-badge--profile { width: 26px; height: 26px; font-size: 12px; margin-left: 8px; }
.yz-badge i { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }

/* ============================================================================
   ОБЩИЕ КОМПОНЕНТЫ 2026
   ========================================================================== */
.yz-card {
    background: var(--yz-surface);
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-r-lg);
    box-shadow: var(--yz-shadow-sm);
}
.yz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--yz-r-md);
    border: none;
    background: var(--yz-grad);
    color: #fff;
    font-family: var(--yz-font-ui);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.22s var(--yz-spring), box-shadow 0.25s, filter 0.2s;
    box-shadow: var(--yz-accent-glow);
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
}
.yz-btn:hover { filter: brightness(1.06); }
.yz-btn:active { transform: scale(0.96); }
.yz-btn--ghost {
    background: var(--yz-surface);
    color: var(--yz-text);
    border: 1px solid var(--yz-border-strong);
    box-shadow: none;
}
.yz-btn--ghost:hover { border-color: var(--yz-accent-line); color: var(--yz-accent-hi); filter: none; }
.yz-btn--soft { background: var(--yz-accent-soft); color: var(--yz-accent-hi); box-shadow: none; }
.yz-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--yz-r-pill);
    border: 1px solid var(--yz-border);
    background: var(--yz-surface);
    color: var(--yz-dim);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s var(--yz-ease);
    text-decoration: none;
}
.yz-chip:hover { border-color: var(--yz-border-strong); color: var(--yz-text); }
.yz-chip.active {
    background: var(--yz-accent-soft);
    border-color: var(--yz-accent-line);
    color: var(--yz-accent-hi);
}
.yz-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--yz-surface-2);
    border-radius: var(--yz-r-md);
}
.yz-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--yz-border), transparent);
    animation: yzSkel 1.4s infinite;
}
@keyframes yzSkel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Тост «Продолжить музыку» */
.yz-resume-chip {
    position: fixed;
    left: 50%;
    bottom: calc(96px + var(--safe-bottom));
    transform: translateX(-50%) translateY(20px);
    z-index: 99990;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 12px;
    border-radius: var(--yz-r-pill);
    background: var(--yz-glass-strong);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--yz-accent-line);
    color: var(--yz-text);
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--yz-shadow-lg), var(--yz-accent-glow);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.35s var(--yz-spring);
}
.yz-resume-chip.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.yz-resume-chip__play {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--yz-grad);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    flex: 0 0 auto;
}

/* Скроллбары */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--yz-border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--yz-muted); }

/* Уменьшенное движение */
@media (prefers-reduced-motion: reduce) {
    .yz-badge::after, .yz-badge--ultra, .yz-header .hmp-cover { animation: none !important; }
    * { transition-duration: 0.01ms !important; }
}

/* ============================================================
   ИИ-ПЕРСОНЫ | Значок «ИИ-персона» — общесайтовый.
   Шиммер-градиент фиолет→терракот, читается в любой теме.
   ============================================================ */
.yz-ai-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: #fff !important; background: linear-gradient(120deg, #7c5cff, #d97757 85%);
    background-size: 180% 180%; animation: yzAiShimmer 4s ease infinite;
    box-shadow: 0 2px 12px -4px rgba(124, 92, 255, .8);
    white-space: nowrap; vertical-align: middle; line-height: 1.4;
}
.yz-ai-badge i { font-size: 9px; }
.yz-ai-badge.sm { padding: 2px 7px; font-size: 9px; }
@keyframes yzAiShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .yz-ai-badge { animation: none; } }

/* ============================================================
   ИИ-ПЕРСОНА НА ПРОФИЛЕ | маленький круглый значок + плашка книги
   ============================================================ */
/* Маленький круглый значок ИИ рядом с именем (замена большой плашке) */
.yz-ai-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; margin-left: 8px;
    vertical-align: middle; color: #fff; font-size: 10px;
    background: linear-gradient(135deg, #7c5cff, #d97757);
    box-shadow: 0 2px 10px -2px rgba(124, 92, 255, .8);
    background-size: 180% 180%; animation: yzAiShimmer 4s ease infinite;
    cursor: help; flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) { .yz-ai-dot { animation: none; } }

/* Плашка «Из книги» — стеклянная, с градиентной обводкой */
#yz-ai-persona-bar { margin-top: 12px; }
.yz-ai-from-book {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 16px; text-decoration: none;
    max-width: 320px; position: relative;
    background:
        linear-gradient(var(--yz-surface, #30302e), var(--yz-surface, #30302e)) padding-box,
        linear-gradient(130deg, rgba(124,92,255,.7), rgba(217,119,87,.6)) border-box;
    border: 1.5px solid transparent;
    transition: transform .25s var(--yz-spring, ease), box-shadow .25s;
}
.yz-ai-from-book:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(124,92,255,.7); }
.yz-ai-from-book__ic {
    width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
    display: grid; place-items: center; color: #fff; font-size: 15px;
    background: linear-gradient(135deg, #7c5cff, #d97757);
}
.yz-ai-from-book__tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.yz-ai-from-book__tx b { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--yz-muted, #a68bff); font-weight: 800; }
.yz-ai-from-book__tx span { font-size: 14px; font-weight: 700; color: var(--yz-text, #faf9f5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yz-ai-from-book__go { color: var(--yz-muted, #8d8878); font-size: 12px; margin-left: auto; transition: transform .25s; }
.yz-ai-from-book:hover .yz-ai-from-book__go { transform: translateX(3px); color: var(--yz-accent, #d97757); }