/* ==================================================================
 * Rathinavani 90.8 — floating Spotify player
 *
 * Spotify green (#1DB954) stays as-is: it is their brand mark and the
 * widget has to read as a Spotify player. Everything around it uses the
 * site's own surfaces, borders and type.
 *
 * Sits at z-index 9997 — under the enquiry modal (10000) and the other
 * floating buttons (9998/9999), so it can never cover them.
 * ================================================================== */

.rv-host {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 9997;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.rv-host > * { pointer-events: auto; }
.rv-host .rv-panel[aria-hidden="true"] { pointer-events: none; }

/* Dragged past the halfway line — flip the panel's anchor so it stays on screen */
.rv-host.is-right { align-items: flex-end; }
.rv-host.is-right .rv-panel { left: auto; right: 0; transform-origin: bottom right; }
.rv-host.is-below .rv-panel {
    bottom: auto; top: calc(100% + 12px);
    transform-origin: top left; transform: translateY(-14px) scale(.97);
}
.rv-host.is-below.is-right .rv-panel { transform-origin: top right; }
.rv-host.is-below.is-open .rv-panel { transform: none; }

/* ══ LAUNCHER ══════════════════════════════════════════════════ */
.rv-btn {
    order: 2;
    display: inline-flex; align-items: center; gap: 11px;
    height: 54px; padding: 0 20px 0 8px;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, .18);
    background: #0b0b0f;
    color: #fff;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none; user-select: none;
    box-shadow: 0 14px 34px rgba(2, 6, 23, .42);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), box-shadow .34s ease, border-color .3s ease, background .3s ease;
}
.rv-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(2, 6, 23, .55); border-color: #1DB954; }
.rv-btn:focus-visible { outline: 2px solid #1DB954; outline-offset: 3px; }
.rv-host.is-open .rv-btn { background: #131318; }

.rv-mark { flex: 0 0 auto; width: 38px; height: 38px; display: block; }
.rv-mark svg { width: 100%; height: 100%; display: block; }
.rv-mark--sm { width: 30px; height: 30px; }
.rv-mark--big { width: 54px; height: 54px; margin: 0 auto 13px; }

.rv-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; text-align: left; }
.rv-label b { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.rv-label small { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #1DB954; }

/* Equaliser — only animates while the panel is open */
.rv-eq { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; margin-left: 2px; }
.rv-eq i {
    width: 2.5px; height: 5px; border-radius: 2px; background: #1DB954;
    animation: rv-eq 1.05s ease-in-out infinite; animation-play-state: paused;
}
.rv-eq i:nth-child(2) { animation-delay: .18s; }
.rv-eq i:nth-child(3) { animation-delay: .36s; }
.rv-eq i:nth-child(4) { animation-delay: .54s; }
.rv-host.is-open .rv-eq i { animation-play-state: running; }
@keyframes rv-eq { 0%, 100% { height: 4px } 50% { height: 15px } }

/* Drag handle */
.rv-grip { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2.5px; margin-left: 3px; opacity: .42; transition: opacity .25s ease; }
.rv-grip i { display: block; width: 12px; height: 1.5px; border-radius: 2px; background: currentColor; }
.rv-btn:hover .rv-grip, .rv-bar:hover .rv-grip { opacity: .9; }

.rv-host.is-dragging, .rv-host.is-dragging * { cursor: grabbing !important; }
.rv-host.is-dragging .rv-btn, .rv-host.is-dragging .rv-panel { transition: none !important; }
.rv-host.is-dragging .rv-btn { transform: none !important; box-shadow: 0 24px 54px rgba(2, 6, 23, .6); }

/* ══ PANEL ═════════════════════════════════════════════════════ */
.rv-panel {
    position: absolute; left: 0; bottom: calc(100% + 12px);
    width: min(392px, calc(100vw - 36px));
    max-height: min(620px, calc(100vh - 130px));
    overflow: hidden auto;
    background: #0b0b0f;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(2, 6, 23, .6);
    color: #e9edf5;
    opacity: 0; visibility: hidden;
    transform: translateY(14px) scale(.97);
    transform-origin: bottom left;
    transition: opacity .32s ease, transform .42s cubic-bezier(.22, 1, .36, 1), visibility .32s;
}
.rv-host.is-open .rv-panel { opacity: 1; visibility: visible; transform: none; }

.rv-bar {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
    cursor: grab; touch-action: none;
    -webkit-user-select: none; user-select: none;
}
.rv-bar .rv-out, .rv-bar .rv-min { cursor: pointer; }
.rv-bt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rv-bt b { font-family: 'Sora', sans-serif; font-size: 14.5px; font-weight: 800; letter-spacing: -.012em; color: #fff; }
.rv-bt small { font-size: 11.4px; color: rgba(226, 232, 240, .55); }

.rv-out, .rv-min {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; line-height: 1;
    border: 1px solid rgba(148, 163, 184, .24);
    background: transparent; color: rgba(226, 232, 240, .66);
    font-size: 15px; text-decoration: none;
    transition: border-color .26s ease, color .26s ease;
}
.rv-out:hover { border-color: #1DB954; color: #1DB954; }
.rv-min:hover { border-color: #fff; color: #fff; }
.rv-out:focus-visible, .rv-min:focus-visible { outline: 2px solid #1DB954; outline-offset: 2px; }

/* Show switcher */
.rv-chips { display: flex; gap: 6px; padding: 12px 14px 0; }
.rv-chip {
    flex: 1; min-width: 0;
    padding: 10px 8px; border-radius: 9px;
    font-size: 12.4px; font-weight: 600; line-height: 1.3; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border: 1px solid rgba(148, 163, 184, .24);
    background: transparent; color: rgba(226, 232, 240, .66);
    cursor: pointer;
    transition: color .26s ease, border-color .26s ease, background .26s ease;
}
.rv-chip:hover { color: #fff; border-color: rgba(148, 163, 184, .42); }
.rv-chip.is-on { background: #fff; border-color: #fff; color: #0b0b0f; font-weight: 700; }
.rv-chip:focus-visible { outline: 2px solid #1DB954; outline-offset: 2px; }

.rv-player { position: relative; margin: 12px 14px 0; border-radius: 12px; overflow: hidden; background: #131318; min-height: 90px; }
.rv-player iframe { display: block; width: 100%; border: 0; border-radius: 12px; }
.rv-player iframe[hidden] { display: none; }

/* Blocked-embed fallback */
.rv-fall { padding: 26px 20px; text-align: center; background: linear-gradient(160deg, #121218, #0b0b0f); }
.rv-fall b { display: block; font-family: 'Sora', sans-serif; font-size: 15.5px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.rv-fall p { max-width: 40ch; margin: 0 auto 14px; font-size: 13.2px; line-height: 1.6; color: rgba(226, 232, 240, .62); }
.rv-links { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.rv-links a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 13px; border-radius: 9999px; text-decoration: none;
    border: 1px solid rgba(148, 163, 184, .24);
    color: #e9edf5; font-size: 12.2px; font-weight: 600;
    transition: border-color .24s ease, color .24s ease;
}
.rv-links a:hover { border-color: #1DB954; color: #1DB954; }

.rv-note { margin: 12px 14px 16px; font-size: 11.8px; line-height: 1.6; color: rgba(226, 232, 240, .46); }

/* ══ RESPONSIVE ════════════════════════════════════════════════
   Until it is dragged, the widget spans the width on small screens and
   sits above the Enquire pill (bottom 32px + 45px tall) so the two do
   not overlap. Once dragged, the inline position wins. */
@media (max-width: 760px) {
    .rv-host:not(.is-moved) { left: 10px; right: 10px; bottom: 90px; align-items: stretch; }
    .rv-host:not(.is-moved) .rv-panel { left: 0; right: 0; width: auto; }
    .rv-btn { height: 48px; padding: 0 16px 0 6px; align-self: flex-start; }
    .rv-label small { display: none; }
    .rv-panel { width: 100%; }
    .rv-player iframe { height: 232px; }
}

@media (prefers-reduced-motion: reduce) {
    .rv-eq i { animation: none; height: 9px; }
    .rv-btn, .rv-panel, .rv-chip, .rv-out, .rv-min, .rv-links a { transition: none; }
}