/* A ficha da rádio acompanha a identidade da prévia de perfil. */
.radio-peek {
    --radio-paper: var(--surface, #fff);
    --radio-ink: #252934;
    --radio-muted: #737c8e;
    --radio-line: #e9edf3;
    position: fixed;
    inset: auto;
    z-index: 12000;
    width: min(356px, calc(100vw - 32px));
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    color: var(--radio-ink);
    font-family: var(--font, system-ui, sans-serif);
    text-align: left;
    perspective: 1100px;
    isolation: isolate;
}

:root:not([data-theme="light"]) .radio-peek {
    --radio-paper: #1e232d;
    --radio-ink: #f1f3f8;
    --radio-muted: #a5afc1;
    --radio-line: #333b4a;
}

.radio-peek[hidden] { display: none !important; }
.radio-peek::backdrop { background: transparent; pointer-events: none; }
.radio-peek__paper {
    max-height: var(--radio-peek-height, calc(100dvh - 80px));
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border: 1px solid var(--radio-line);
    border-radius: 24px;
    background: var(--radio-paper);
    box-shadow: 0 22px 60px rgba(22, 38, 68, .2), 0 3px 12px rgba(22, 38, 68, .06);
    transform-origin: 35% 0;
}
.radio-peek.is-visible .radio-peek__paper { animation: radio-peek-unfold 420ms cubic-bezier(.2, .8, .2, 1) both; }
.radio-peek a { text-decoration: none; }
.radio-peek a:focus-visible { outline: 3px solid var(--accent, #4f86d6); outline-offset: 3px; }
.radio-peek__cover {
    position: relative;
    height: 122px;
    overflow: hidden;
    background: radial-gradient(ellipse at 12% 110%, rgba(44, 222, 207, .8), transparent 60%),
                radial-gradient(ellipse at 78% -30%, rgba(180, 121, 247, .8), transparent 68%),
                linear-gradient(120deg, #123a68, #3b4fa4 55%, #26294e);
    color: #fff;
}
.radio-peek__cover::before {
    content: "";
    position: absolute;
    width: 174px;
    height: 174px;
    right: -12px;
    top: -28px;
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .2) 0 8%, transparent 9% 16%, rgba(255, 255, 255, .09) 17% 18%, transparent 19% 30%, rgba(255, 255, 255, .07) 31% 32%, transparent 33%);
    box-shadow: 0 0 0 17px rgba(255, 255, 255, .05), 0 0 0 36px rgba(255, 255, 255, .03);
}
.radio-peek__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10, 22, 49, .17), transparent 65%);
    pointer-events: none;
}
.radio-peek__label { position: absolute; top: 20px; left: 22px; font-size: 9px; font-weight: 650; letter-spacing: .16em; opacity: .83; }
.radio-peek__wave { position: absolute; left: 24px; top: 48px; width: 200px; height: 48px; opacity: .42; }
.radio-peek__status {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(15, 32, 51, .65);
    backdrop-filter: blur(12px);
    font-size: 10px;
    font-weight: 650;
    z-index: 1;
}
.radio-peek__status::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #b7c6df; }
.radio-peek__status[data-state="playing"]::before { background: #79eab5; box-shadow: 0 0 0 3px rgba(121, 234, 181, .14); }
.radio-peek__status[data-state="loading"]::before { background: #ffe2a8; }
.radio-peek__status[data-state="error"]::before { background: #ffb1b9; }
.radio-peek__body { position: relative; padding: 0 22px 20px; }
.radio-peek__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.radio-peek__logo {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 82px;
    height: 82px;
    margin-top: -36px;
    border: 4px solid var(--radio-paper);
    border-radius: 26px;
    background: #fff;
    color: #608fd0;
    box-shadow: 0 5px 16px rgba(12, 23, 42, .13);
    overflow: hidden;
}
.radio-peek__logo > svg { width: 32px; height: 32px; }
.radio-peek__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; }
.radio-peek__brand { display: inline-flex; align-items: center; gap: 5px; padding-bottom: 7px; color: var(--radio-muted); font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.radio-peek__brand svg { width: 13px; height: 13px; color: var(--accent, #4f86d6); }
.radio-peek__name { margin: 14px 0 0; color: var(--radio-ink); font-size: 19px; font-weight: 750; letter-spacing: -.5px; line-height: 1.3; overflow-wrap: anywhere; }
.radio-peek__meta { display: flex; align-items: center; gap: 6px; margin: 9px 0 0; color: var(--radio-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.radio-peek__meta svg { width: 13px; height: 13px; flex-shrink: 0; }
.radio-peek__genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.radio-peek__genre { max-width: 100%; padding: 4px 9px; border: 1px solid var(--radio-line); border-radius: 999px; background: var(--accent-soft, #f1f5fb); color: var(--accent, #4f86d6); font-size: 10px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-peek__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 17px 0 16px; padding: 13px 0; border-top: 1px solid var(--radio-line); border-bottom: 1px solid var(--radio-line); }
.radio-peek__stat { display: flex; flex-direction: column; text-align: center; min-width: 0; }
.radio-peek__stat + .radio-peek__stat { border-left: 1px solid var(--radio-line); }
.radio-peek__stat dt { order: 2; color: var(--radio-muted); font-size: 10px; }
.radio-peek__stat dd { margin: 0 0 4px; color: var(--radio-ink); font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.radio-peek__actions { display: flex; gap: 9px; }
.radio-peek__button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1; min-width: 0; min-height: 41px; padding: 8px 10px; border: 1px solid var(--radio-line); border-radius: 13px; color: var(--radio-ink); background: var(--radio-paper); font-size: 12px; font-weight: 650; transition: background 180ms, box-shadow 180ms, transform 180ms; }
.radio-peek__button svg { width: 15px; height: 15px; flex-shrink: 0; }
.radio-peek__button:hover { transform: translateY(-1px); background: var(--accent-soft, #f1f5fb); }
.radio-peek__button--primary { border-color: transparent; color: var(--accent, #4f86d6); background: var(--accent-soft, #eef3fb); }
.radio-peek__button--primary:hover { box-shadow: 0 4px 13px var(--accent-soft, rgba(79, 134, 214, .15)); }
.radio-peek__note { margin: 13px 0 0; color: var(--radio-muted); font-size: 10px; line-height: 1.5; text-align: center; }
.radio-peek__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@keyframes radio-peek-unfold {
    from { opacity: 0; transform: translateY(9px) rotateX(-7deg) scale(.97); }
    to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .radio-peek *, .bip-vk-bar__titulo { animation: none !important; transition: none !important; }
    .radio-peek__button:hover { transform: none; }
}