/* Floating radio player */
        .radio-player { position: fixed; right: 1rem; bottom: 1.25rem; z-index: 60; }

        /* Mini now-playing pill (always visible) */
        .radio-nowplaying {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #ffffff;
            color: #0f172a;
            border-radius: 9999px;
            padding: 6px 10px;
            box-shadow: 0 8px 30px rgba(2,6,23,0.08);
            margin-right: 10px;
            margin-bottom: 6px;
            font-family: inherit;
            transform-origin: right bottom;
            transition: opacity .18s ease, transform .18s ease;
            max-width: 320px;
            overflow: hidden;
            white-space: nowrap;
        }
        .radio-nowplaying.show { opacity: 1; transform: translateY(0); }
        .radio-nowplaying .rnp-logo { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; }
        .radio-nowplaying .rnp-title { font-weight: 700; font-size: 12px; line-height: 1; color: #0f172a; }
        .radio-nowplaying .rnp-sub { font-size: 11px; color: #374151; line-height: 1; opacity: .9; }
        @media (max-width:640px) {
            .radio-nowplaying { max-width: 220px; padding:6px 8px; gap:6px; }
            .radio-nowplaying .rnp-logo { width:28px; height:28px; }
            .radio-nowplaying .rnp-title { font-size:11px; }
            .radio-nowplaying .rnp-sub { font-size:10px; }
        }

        /* radio-btn inside mini pill: smaller / inline */
        .radio-nowplaying .radio-btn {
            width:36px; height:36px; padding:0.25rem; margin-left:6px; box-shadow:none; background:transparent; color:inherit;
            display:flex; align-items:center; justify-content:center; border-radius:9999px;
        }
        .radio-nowplaying .radio-btn .icon svg { width:16px; height:16px; stroke:currentColor; fill:none; }
        /* pause icon becomes white when player is in playing state (modal/open)
           - target svg + path/rect to override inline attributes, use !important for reliability */
        .radio-nowplaying .radio-btn.is-playing .icon.icon-pause svg,
        .radio-nowplaying .radio-btn.is-playing .icon.icon-pause rect,
        .radio-nowplaying .radio-btn.is-playing .icon.icon-pause path,
        .radio-btn.is-playing .icon.icon-pause svg,
        .radio-btn.is-playing .icon.icon-pause rect,
        .radio-btn.is-playing .icon.icon-pause path {
            stroke: #ffffff !important; /* white bars */
            fill: #ffffff !important;
            color: #ffffff !important;
        }
        .radio-nowplaying .radio-badge { display:none; }
        .radio-nowplaying .radio-btn.is-playing::after { display:none; }

        .radio-btn {
            display: inline-grid; grid-auto-flow: column; gap: .5rem; align-items: center;
            width: 56px; height: 56px; border-radius: 9999px; border: 0; cursor: pointer;
            background: linear-gradient(180deg,#ef4444 0%,#dc2626 100%);
            color: white; box-shadow: 0 8px 24px rgba(2,6,23,0.16); padding: 0.5rem; position: relative;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
        }
        .radio-btn:active { transform: translateY(1px) scale(.995); }
        .radio-btn .radio-badge { position: absolute; bottom: -8px; right: -8px; background: #0f172a; color: #fff; font-size: 9px; padding: 2px 4px; border-radius: 999px; box-shadow: 0 6px 18px rgba(2,6,23,0.12); }
        .radio-btn.is-playing { background: linear-gradient(180deg,#059669 0%,#057a5a 100%); box-shadow: 0 14px 36px rgba(2,6,23,0.20); }
        .radio-btn .icon { display: block; }
        .radio-btn .icon svg { display: block; }
        .radio-btn .icon.icon-pause { display: none; }
        .radio-btn.is-playing .icon.icon-play { display: none; }
        .radio-btn.is-playing .icon.icon-pause { display: block; }

        /* small pulsing ring when playing */
        .radio-btn.is-playing::after {
            content: ""; position: absolute; inset: -10px; border-radius: 9999px;
            background: radial-gradient(circle at center, rgba(5,150,105,0.14), rgba(5,150,105,0));
            animation: radio-pulse 1.6s ease-out infinite;
            pointer-events: none;
        }

        /* ---- CALL 112 (uses same pill styling as radio-nowplaying) ---- */
        /* call pill inherits .radio-nowplaying; tweak button color and hover */
        .call-nowplaying { /* minor spacing tweak if needed */ }
        .call-nowplaying .rnp-title { color: #0f172a; }
        .call-nowplaying .rnp-sub { color: #6b7280; font-weight:700; }
        .call-nowplaying .call-btn {
            /* small inline circular call button (overrides transparent default) */
            background: linear-gradient(180deg,#10b981 0%,#059669 100%);
            color: #ffffff; box-shadow: 0 8px 22px rgba(2,6,23,0.12);
            width:36px; height:36px; padding:0.25rem; display:flex; align-items:center; justify-content:center; border-radius:9999px; border: 2px solid rgba(0,0,0,0.08);
        }
        .call-nowplaying .call-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(2,6,23,0.18); }
        .call-nowplaying .call-btn .icon-phone { stroke: #fff; }

        .report-nowplaying {
            text-decoration: none;
            border: 1px solid rgba(220,38,38,0.18);
        }
        .report-nowplaying .rnp-title { color: #b91c1c; }
        .report-nowplaying .rnp-sub { color: #6b7280; font-weight: 600; }
        .report-nowplaying .report-arrow {
            width: 36px;
            height: 36px;
            margin-left: 6px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg,#ef4444 0%,#dc2626 100%);
            color: #ffffff;
            box-shadow: 0 8px 22px rgba(2,6,23,0.12);
            flex: 0 0 auto;
        }
        .report-nowplaying .icon-external {
            width: 20px;
            height: 20px;
            display: block;
            overflow: visible;
        }
        .report-nowplaying:hover .report-arrow { transform: translateY(-1px); }

        /* ensure pills wrap nicely on very small screens */
        @media (max-width:420px) { .rp-stack { gap:6px; } .radio-nowplaying { padding:6px 8px; } }

        @keyframes radio-pulse { 0% { transform: scale(.85); opacity: .9 } 70% { transform: scale(1.25); opacity: 0 } 100% { transform: scale(1.45); opacity: 0 } }

        @media (max-width: 640px) { .radio-player { right: .5rem; bottom: .75rem; } .radio-btn { width:48px; height:48px; } }

        /* iframe viewport: crop external page so only the player widget shows */
        .iframe-viewport { overflow: hidden; position: relative; }
        #radio-iframe { transition: transform .28s ease; will-change: transform; }
        /* desktop: nudge iframe up and scale so widget occupies modal */
        @media (min-width: 641px) {
            #radio-iframe { width:1200px; height:1200px; transform: translateY(-20%) scale(0.92); }
        }
        /* tablet / mobile: smaller translate/scale */
        @media (max-width: 640px) {
            #radio-iframe { width:900px; height:900px; transform: translateY(-12%) scale(0.78); }
        }

        /* Local visualizer inside modal */
        /* Radio visualizer: show on a white pill (matches mini pill style) */
        #radio-visual { position:relative; display:none; align-items:center; justify-content:center; flex-direction:row; padding:8px 14px; background: #ffffff; border-radius: 999px; box-shadow: 0 12px 30px rgba(2,6,23,0.12); color: #0f172a; max-width:420px; width:auto; margin:0 auto; }
        #radio-visual .rv-left { flex: 0 0 auto; display:flex; align-items:center; justify-content:center; }
        #radio-visual .rv-left img { height:56px; width:auto; border-radius:8px;  padding:4px; }
        #radio-visual .rv-right { display:flex; flex-direction:column; align-items:center; gap:8px; color: #0f172a; }
        #radio-visual .rv-right .rv-label { font-weight:700; font-size:14px; color:inherit; }
        @media (max-width:640px) { #radio-visual { padding:8px 12px; gap:8px; border-radius:18px; max-width:320px; } #radio-visual .rv-left img { height:40px; } }
        @media (max-width:640px) {
            #radio-visual { flex-direction:column; gap:12px; padding:8px; }
            #radio-visual .rv-left img { height:40px; }
            #radio-visual .rv-right .rv-label { font-size:13px; }
        }
        .visualizer { display:flex; gap:6px; align-items:flex-end; }
        .visualizer .bar { width:6px; height:36px; background: linear-gradient(180deg,#06b6d4,#059669); border-radius:4px; transform-origin: bottom center; opacity:0.85; transform: scaleY(0.25); transition: transform .12s linear; }
        .visualizer .bar.b1 { animation:vu .9s ease-in-out infinite; animation-delay:0ms; }
        .visualizer .bar.b2 { animation:vu .95s ease-in-out infinite; animation-delay:60ms; }
        .visualizer .bar.b3 { animation:vu .85s ease-in-out infinite; animation-delay:120ms; }
        .visualizer .bar.b4 { animation:vu 1.05s ease-in-out infinite; animation-delay:30ms; }
        .visualizer .bar.b5 { animation:vu .8s ease-in-out infinite; animation-delay:90ms; }
        .visualizer .bar.b6 { animation:vu 1s ease-in-out infinite; animation-delay:150ms; }
        .visualizer .bar.b7 { animation:vu .92s ease-in-out infinite; animation-delay:45ms; }
        .visualizer .bar.b8 { animation:vu .88s ease-in-out infinite; animation-delay:75ms; }
        .visualizer .bar.b9 { animation:vu .96s ease-in-out infinite; animation-delay:110ms; }
        .visualizer .bar.b10 { animation:vu .86s ease-in-out infinite; animation-delay:30ms; }
        @keyframes vu { 0% { transform: scaleY(.25); } 50% { transform: scaleY(1); } 100% { transform: scaleY(.25); } }
        #radio-visual.is-playing .bar { opacity:1; }
        #radio-visual:not(.is-playing) .bar { opacity:0.35; transform: scaleY(.25); animation-play-state:paused; }