/* Таблетка «VIP заканчивается» — правый низ, НАД кнопкой чата.
   Замеры живой темы (2026-07-17): сайдбар — position:fixed, x=0, w=256, вся
   высота, z-index:100; кнопка чата — 50x50 при right/bottom:15px, z-index:10050.
   Левый низ занимать НЕЛЬЗЯ: там сайдбар, он перекрывает таблетку, а поднять
   z-index значит накрыть навигацию. Правый низ свободен, чат обходим по вертикали.
   z-index 90: ниже сайдбара (на мобильном он раскрывается поверх — так и надо)
   и ниже модалок темы (popup_modal = 9998), выше контента.
   Вёрстку не двигает (fixed), экран не занимает: узкая полоса в углу. */
.vrp {
    position: fixed;
    right: 16px;
    bottom: 78px;                /* кнопка чата: 50px + 15px снизу = до 65px */
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 360px;
    padding: 10px 12px;
    border: 1px solid var(--span-10, rgba(118,171,41,.1));
    border-left: 3px solid var(--span, #76ab29);
    border-radius: var(--br-10, 10px);
    background: var(--card, #1f1f28);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    font-family: inherit;
    animation: vrpIn .22s ease;
}
@keyframes vrpIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* <use> в flex схлопывается без intrinsic width — нужен явный flex-basis */
.vrp__icon { width: 18px; height: 18px; flex: 0 0 18px; fill: var(--span, #76ab29); }

.vrp__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vrp__text b {
    font-size: var(--font-size-s, 12px);
    font-weight: var(--font-weight-7, 700);
    color: var(--text-default, #fff);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.vrp__text span {
    font-size: var(--font-size-xs, 10px);
    color: var(--text-secondary, #9fa2b9);
    line-height: 1.35;
}

.vrp__btn {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: var(--br-8, 8px);
    background: var(--span, #76ab29);
    color: #fff;
    font-size: var(--font-size-xs, 10px);
    font-weight: var(--font-weight-7, 700);
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-ease-2, all .2s ease);
}
.vrp__btn:hover { filter: brightness(1.12); color: #fff; text-decoration: none; }

.vrp__close {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--br-6, 6px);
    background: transparent;
    cursor: pointer;
    transition: var(--transition-ease-2, all .2s ease);
}
.vrp__close svg { width: 9px; height: 9px; flex: 0 0 9px; fill: var(--text-secondary, #9fa2b9); }
.vrp__close:hover { background: var(--transparent-10-w, rgba(255,255,255,.1)); }
.vrp__close:hover svg { fill: var(--text-default, #fff); }

@media (max-width: 560px) {
    /* На мобильном сайдбар скрыт (w=0), чат — 45x45 при отступах 10px (до 55px).
       Растягиваем по ширине над чатом. */
    .vrp { left: 10px; right: 10px; bottom: 65px; max-width: none; padding: 9px 10px; }
    .vrp__text span { display: none; }
}