/* The Site's floating radio: a glass button that opens a draggable mini player (like the Financials calculator). */
.radio-float-btn, .radio-float {
    background: color-mix(in srgb, rgba(12, 12, 16, 0.78) 80%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: #fff;
}
.radio-float-btn {
    position: fixed; left: 1.1rem; right: auto; bottom: 1.1rem; z-index: 9990;
    width: 3rem; height: 3rem; border-radius: var(--rf-radius-lg, var(--radius-md, 1rem));
    display: grid; place-items: center; cursor: pointer;
}
.radio-float-btn:hover { border-color: var(--radio-accent, #2ee59d); }
.radio-float-btn .rf-dot {
    position: absolute; top: .45rem; right: .45rem; width: 9px; height: 9px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.45); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
.radio-float-btn.is-live .rf-dot { background: var(--radio-accent, #2ee59d); animation: rfPulse 1.6s ease-in-out infinite; }
.radio-float-btn.is-playing { border-color: var(--radio-accent, #2ee59d); }
/* The Auto-DJ is on air: the little LED goes green (the button itself keeps the Site's look). */
.radio-float-btn.is-autodj .rf-dot {
    background: #2ee59d; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 8px 2px rgba(46, 229, 157, 0.75);
    animation: rfPulse 1.6s ease-in-out infinite;
}
@keyframes rfPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.radio-float {
    position: fixed; z-index: 9991; width: min(19rem, calc(100vw - 1.5rem));
    border-radius: var(--rf-radius-xl, var(--radius-lg, 1.1rem)); padding: .6rem; touch-action: none; outline: none;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.radio-float[hidden] { display: none; }
.rf-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: grab; padding: .1rem .3rem .5rem; user-select: none; }
.rf-head:active { cursor: grabbing; }
.rf-title { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.rf-title span.rf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-badge {
    flex: none; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
    border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.07);
}
.rf-badge.is-live { border-color: color-mix(in srgb, var(--radio-accent, #2ee59d) 55%, transparent); color: var(--radio-accent, #2ee59d); }
.rf-x { background: none; border: 0; color: rgba(255, 255, 255, 0.6); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.rf-x:hover { color: #fff; }
.rf-body { display: flex; align-items: center; gap: .65rem; }
.rf-cover { width: 46px; height: 46px; border-radius: var(--rf-radius, 12px); object-fit: cover; flex: none; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); display: grid; place-items: center; font-size: 20px; }
.rf-meta { min-width: 0; flex: 1; }
.rf-now { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-sub { font-size: 11px; opacity: .65; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-controls { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.rf-play {
    flex: none; padding: .5rem 1rem; border-radius: var(--rf-radius, var(--radius-md, .8rem)); cursor: pointer; font-weight: 700; font-size: 13px; font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.18); background: var(--radio-accent, #2ee59d); color: #0b0c0f;
}
.rf-play:disabled { opacity: .6; cursor: default; }
.rf-vol { flex: 1; min-width: 0; accent-color: var(--radio-accent, #2ee59d); }
.rf-links { display: flex; gap: .5rem; margin-top: .55rem; font-size: 11px; }
.rf-links a { color: rgba(255, 255, 255, 0.75); text-decoration: underline; }
.rf-links a:hover { color: #fff; }

/* The Night zine look is all square corners and capitals: the floating player follows it. */
body.look-zine .radio-float-btn, body.look-zine .radio-float, body.look-zine .rf-play, body.look-zine .rf-cover, body.look-zine .rf-badge { border-radius: 0; }
body.look-zine .rf-play, body.look-zine .rf-badge { text-transform: uppercase; letter-spacing: 0.08em; }