/* ===== Плавающие виджеты: бутылка с онлайном + кнопка «вверх» ===== */

.vk-float {
    --vk-gap: 16px;
    position: fixed;
    right: calc(var(--vk-gap) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--vk-gap) + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
    font-family: Inter, system-ui, sans-serif;
}

/* ---------- Бутылка ---------- */

.vk-bottle {
    position: relative;
    font-size: 16px;               /* все размеры внутри в em — бутылка масштабируется одной цифрой */
    width: 17.5em;
    aspect-ratio: 260 / 80;
    pointer-events: auto;
    filter: drop-shadow(0 .5em 1em rgba(0, 0, 0, .55)) drop-shadow(0 0 .9em rgba(43, 144, 254, .18));
    transform-origin: 100% 50%;
    animation: vk-bottle-in .7s cubic-bezier(.2, .9, .3, 1.2) both;
}

.vk-bottle[hidden] { display: none; }

.vk-bottle.is-closing {
    animation: vk-bottle-out .35s ease-in forwards;
}

.vk-bottle__glass {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.vk-bottle__wave {
    animation: vk-wave 3.2s ease-in-out infinite alternate;
}

/* «LIVE» на горлышке */
.vk-bottle__live {
    position: absolute;
    left: 8.2%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: .3em;
    font-size: .56em;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    white-space: nowrap;
}

.vk-dot {
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: #4ce892;
    box-shadow: 0 0 0 0 rgba(76, 232, 146, .7);
    animation: vk-pulse 1.8s ease-out infinite;
    flex: none;
}

/* Этикетка */
.vk-bottle__label {
    position: absolute;
    left: 40.8%;
    width: 53.8%;
    top: 17.5%;
    height: 65%;
    box-sizing: border-box;
    padding: 0 .6em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .2em;
    border-radius: .45em;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 45%),
        #121a29;
    border: 1px solid rgba(121, 205, 253, .45);
    box-shadow: inset 0 0 0 2px #121a29, inset 0 0 0 3px rgba(43, 144, 254, .25);
    color: #fff;
}

.vk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4em;
    line-height: 1.15;
}

.vk-row__name {
    display: flex;
    align-items: center;
    gap: .35em;
    font-size: .7em;
    font-weight: 500;
    color: #9fb0cf;
    white-space: nowrap;
}

.vk-row__name svg {
    width: .95em;
    height: .95em;
    flex: none;
    color: #41c6ff;
}

.vk-row__value {
    font-size: .95em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: color .4s ease;
}

.vk-row--playing .vk-row__value {
    font-size: .82em;
    color: #cfe4ff;
}

.vk-row__value.is-up   { color: #4ce892; }
.vk-row__value.is-down { color: #ff8a6b; }

/* Крестик */
.vk-bottle__close {
    position: absolute;
    top: -.55em;
    right: -.45em;
    width: 1.75em;
    height: 1.75em;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    -webkit-tap-highlight-color: transparent;
}

.vk-bottle__close span {
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #212f44;
    border: 1px solid #475774;
    color: #cfd8e8;
    transition: background-color .2s, color .2s, border-color .2s;
}

.vk-bottle__close svg { width: .6em; height: .6em; }

.vk-bottle__close:hover span,
.vk-bottle__close:focus-visible span {
    background: #2b90fe;
    border-color: #79cdfd;
    color: #fff;
}

.vk-bottle__close:focus-visible { outline: none; }
.vk-bottle__close:focus-visible span { box-shadow: 0 0 0 2px #0c111c, 0 0 0 4px #41c6ff; }

/* ---------- Кнопка «вверх» ---------- */

.vk-up {
    --vk-progress: 0;
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: none;
    display: grid;
    place-items: center;
    color: #fff;
    background: #121a29;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translateY(12px) scale(.85);
    transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.vk-up.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* кольцо прогресса прокрутки */
.vk-up__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.vk-up__ring circle { fill: none; stroke-width: 3; }
.vk-up__track { stroke: #212f44; }
.vk-up__bar {
    stroke: url(#vk-up-grad);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--vk-progress) * 100);
    transition: stroke-dashoffset .15s linear;
}

.vk-up__arrow {
    position: relative;
    width: 18px;
    height: 18px;
    color: #41c6ff;
    transition: color .2s, transform .2s;
}

.vk-up:hover,
.vk-up:focus-visible {
    background: linear-gradient(180deg, #41c6ff, #1a64fc);
}

.vk-up:hover .vk-up__arrow,
.vk-up:focus-visible .vk-up__arrow {
    color: #fff;
    transform: translateY(-2px);
}

.vk-up:focus-visible { outline: 2px solid #41c6ff; outline-offset: 3px; }

/* ---------- Анимации ---------- */

@keyframes vk-bottle-in {
    from { opacity: 0; transform: translateX(40%) rotate(-6deg); }
    to   { opacity: 1; transform: none; }
}

@keyframes vk-bottle-out {
    to { opacity: 0; transform: translateX(30%) scale(.9); }
}

@keyframes vk-wave {
    from { transform: translateX(0); }
    to   { transform: translateX(-26px); }
}

@keyframes vk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(76, 232, 146, .7); }
    70%  { box-shadow: 0 0 0 .45em rgba(76, 232, 146, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 232, 146, 0); }
}

/* ---------- Мобильная версия ---------- */

@media (max-width: 767px) {
    .vk-float {
        --vk-gap: 10px;
        gap: 8px;
    }

    .vk-bottle { font-size: 12.5px; }   /* ≈ 220 × 67 px */

    .vk-bottle__live span { display: none; }   /* на узком горлышке оставляем только точку */
    .vk-row__name { font-size: .78em; }
    .vk-row__value { font-size: 1.02em; }
    .vk-row--playing .vk-row__value { font-size: .9em; }

    .vk-bottle__close {
        /* видимый кружок маленький, а зона нажатия — побольше */
        width: 2.6em;
        height: 2.6em;
        top: -1em;
        right: -.9em;
    }

    .vk-bottle__close span { width: 1.6em; height: 1.6em; }
    .vk-bottle__close svg { width: .7em; height: .7em; }

    .vk-up {
        width: 40px;
        height: 40px;
    }

    .vk-up__arrow { width: 16px; height: 16px; }
}

@media (max-width: 360px) {
    .vk-bottle { font-size: 11.5px; }
}

@media (hover: none) {
    .vk-up:hover { background: #121a29; }
    .vk-up:hover .vk-up__arrow { color: #41c6ff; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vk-bottle,
    .vk-bottle.is-closing,
    .vk-bottle__wave,
    .vk-dot { animation: none; }
    .vk-up,
    .vk-up__bar,
    .vk-row__value { transition: none; }
}