/* A navegação troca só o palco. Este painel e o áudio pertencem à moldura. */
.bip-radio-dock {
    position: fixed;
    z-index: 1190;
    bottom: max(22px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(540px, calc(100% - 40px));
    min-height: 68px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 22px;
    background: linear-gradient(135deg, #272d3e, #1c2230);
    color: #f8f9fd;
    box-shadow: 0 14px 40px rgba(18, 24, 38, .2), 0 2px 8px rgba(18, 24, 38, .12);
    color-scheme: dark;
    font-family: inherit;
    isolation: isolate;
}

.bip-radio-dock[hidden], .bip-radio-dock [hidden] { display: none !important; }
.bip-radio-dock svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.bip-radio-dock__cover {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(circle at 15% 10%, #6b65a6, transparent 70%), #3b5873;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}
.bip-radio-dock__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bip-radio-dock__info { flex: 1; min-width: 0; }
.bip-radio-dock__title {
    margin: 0 0 5px;
    color: #f8f9fd;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bip-radio-dock__status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #afb6c8;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bip-radio-dock__status::before {
    content: '';
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9299aa;
}
.bip-radio-dock.is-playing .bip-radio-dock__status::before { background: #81d7b7; }
.bip-radio-dock__controls, .bip-radio-dock__volume { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.bip-radio-dock__button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #b8bfd0;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.bip-radio-dock__button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.bip-radio-dock__button:disabled { opacity: .3; cursor: default; }
.bip-radio-dock button:focus-visible, .bip-radio-dock a:focus-visible, .bip-radio-dock input:focus-visible {
    outline: 2px solid #b3c4ff;
    outline-offset: 3px;
}
.bip-radio-dock__play { width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .07); }
.bip-radio-dock__play svg { width: 22px; height: 22px; stroke-width: 2.2; }
.bip-radio-dock__volume input { width: 54px; height: 4px; margin: 0; accent-color: #bcc9ee; cursor: pointer; }
.bip-radio-dock__volume .bip-radio-dock__button { width: 24px; }
.bip-radio-dock__collapse { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.bip-radio-dock.is-collapsed {
    left: auto;
    right: max(20px, env(safe-area-inset-right));
    transform: none;
    gap: 8px;
    width: auto;
    min-height: 56px;
    padding: 8px;
    border-radius: 20px;
}
.bip-radio-dock.is-collapsed .bip-radio-dock__cover { flex-basis: 38px; width: 38px; height: 38px; border-radius: 12px; }
.bip-radio-dock.is-collapsed .bip-radio-dock__info,
.bip-radio-dock.is-collapsed .bip-radio-dock__volume,
.bip-radio-dock.is-collapsed .bip-radio-dock__collapse,
.bip-radio-dock.is-collapsed [data-vk-radio-prev],
.bip-radio-dock.is-collapsed [data-vk-radio-next] { display: none; }
.bip-radio-dock__expand:hover img { opacity: .3; }
.bip-radio-dock__expand:hover svg { z-index: 1; }
.bip-radio-dock svg.is-loading { animation: bip-radio-dock-loading 1s linear infinite; }
@keyframes bip-radio-dock-loading { to { transform: rotate(360deg); } }
@media (max-width: 599px) {
    .bip-radio-dock { gap: 7px; width: calc(100% - 24px); min-height: 62px; padding: 8px 10px; bottom: calc(76px + env(safe-area-inset-bottom)); border-radius: 19px; }
    .bip-radio-dock__cover { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; }
    .bip-radio-dock__volume { display: none; }
    .bip-radio-dock.is-collapsed { right: 12px; }
}
/* RECOLHIDO NO COMPUTADOR (15/10/26, o dono, com print do tocador escondido atrás da bolinha do chat flutuante:
   *"só coloca o áudio para o outro lado"*). Com margem livre à esquerda (a partir de 1512 px a margem passa dos
   102 px do tocador sem encostar no cartão do perfil), ele mora no canto ESQUERDO. Mais estreito, o canto esquerdo é
   do cartão do perfil e dos ícones do menu: fica à direita, AO LADO da bolinha, e a doca das janelas do chat abre o
   espaço dele. Sem o chat flutuante (celular, ou a /mensagens no palco), volta ao canto de sempre. */
@media (min-width: 861px) and (max-width: 1511.98px) {
    body.bip-chatf-ligado .bip-radio-dock.is-collapsed { right: calc(22px + 58px + 12px); }
    body.bip-chatf-ligado:has(.bip-radio-dock.is-collapsed:not([hidden])) .bip-chatf__doca {
        right: calc(22px + 58px + 12px + 102px + 12px);
    }
}
@media (min-width: 1512px) {
    .bip-radio-dock.is-collapsed { left: max(20px, env(safe-area-inset-left)); right: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .bip-radio-dock svg.is-loading { animation: none; }
    .bip-radio-dock__button { transition: none; }
}