/* =====================================================================
   ESAForum — Floating Radio Player Widget
   Created by ESAGAMES HOSTING SHIELD SRL
   Uses theme.css custom properties (--primary, --surface, etc.)
   ===================================================================== */

/* ── Root widget container (always in DOM when JS runs) ── */
#esa-radio {
    position: fixed;
    bottom: 80px; /* above cookie bar */
    left: 18px;
    z-index: 120;
    font-family: inherit;
    display: flex;
    flex-direction: column-reverse; /* panel above button */
    align-items: flex-start;
    gap: 8px;
    /* The wrapper is only a positioning frame. It reserves layout space for the
       collapsed panel too, so its empty area must NEVER intercept clicks over
       page content (topic rows) behind it. Only the visible controls below
       re-enable pointer events. */
    pointer-events: none;
}

/* ── Collapsed toggle button ── */
#esa-radio-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(var(--primary-rgb), .5);
    background: var(--surface-2);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow, 0 4px 24px rgba(0,0,0,.5));
    transition: border-color .2s, box-shadow .2s, transform .15s;
    position: relative;
    flex-shrink: 0;
    pointer-events: auto; /* re-enable clicks on the launcher (wrapper is none) */
}
#esa-radio-toggle:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .18), var(--shadow, 0 4px 24px rgba(0,0,0,.5));
    transform: scale(1.07);
}
#esa-radio-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* Pulse ring when playing */
#esa-radio-toggle::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(var(--primary-rgb), .55);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .3s;
}
#esa-radio.is-playing #esa-radio-toggle::after {
    animation: radio-pulse 2s ease-in-out infinite;
}
@keyframes radio-pulse {
    0%, 100% { opacity: 0;   transform: scale(.9);  }
    50%       { opacity: .7; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    #esa-radio.is-playing #esa-radio-toggle::after { animation: none; opacity: 0; }
}

/* ── Expanded panel ── */
#esa-radio-panel {
    min-width: 240px;
    max-width: 280px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow, 0 8px 32px rgba(0,0,0,.55));
    overflow: hidden;
    transform-origin: bottom left;
    transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s cubic-bezier(.4,0,.2,1);
}
#esa-radio-panel[hidden] {
    /* override hidden for CSS transition — JS sets this */
    display: block !important;
    transform: scale(.88) translateY(8px);
    opacity: 0;
    pointer-events: none;
}
#esa-radio-panel.panel-open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Panel header bar */
.radio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px 9px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    gap: 8px;
}
.radio-header-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.radio-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.radio-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* LIVE indicator */
.radio-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(var(--primary-rgb), .15);
    border: 1px solid rgba(var(--primary-rgb), .35);
    color: var(--primary, #2f6bff);
    opacity: .35;
    transition: opacity .3s, background .3s, color .3s;
}
.radio-live::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary, #2f6bff);
    flex-shrink: 0;
    transition: background .3s;
}
.is-playing .radio-live {
    opacity: 1;
    background: rgba(46, 230, 166, .15);
    border-color: rgba(46, 230, 166, .4);
    color: var(--green, #2ee6a6);
}
.is-playing .radio-live::before {
    background: var(--green, #2ee6a6);
    animation: live-blink 1.1s ease-in-out infinite alternate;
}
@keyframes live-blink {
    from { opacity: 1; }
    to   { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
    .is-playing .radio-live::before { animation: none; }
}

/* Close button */
#esa-radio-close {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}
#esa-radio-close:hover {
    color: var(--text);
    background: rgba(255,255,255,.07);
}
#esa-radio-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Station name */
.radio-station-wrap {
    padding: 10px 14px 4px;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#esa-radio-station-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Status label (buffering / tap to play / offline) */
#esa-radio-status {
    font-size: 11px;
    color: var(--text-dim);
    padding: 0 14px 6px;
    min-height: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
}
#esa-radio-status.status-error {
    color: #ff4d6d;
}
#esa-radio-status.status-buffering {
    color: var(--primary, #2f6bff);
}
.radio-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(var(--primary-rgb), .3);
    border-top-color: var(--primary, #2f6bff);
    border-radius: 50%;
    animation: radio-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes radio-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .radio-spinner { animation: none; border-color: var(--primary, #2f6bff); }
}

/* Controls row */
.radio-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 14px 10px;
}

/* Base icon button */
.radio-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
    flex-shrink: 0;
}
.radio-btn:hover {
    background: rgba(255,255,255,.07);
    color: var(--text);
    border-color: rgba(var(--primary-rgb), .4);
    transform: scale(1.08);
}
.radio-btn:active {
    transform: scale(.94);
}
.radio-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.radio-btn:disabled {
    opacity: .35;
    cursor: default;
    transform: none;
}

/* Play/Pause — slightly larger + accent */
#esa-radio-playpause {
    width: 40px;
    height: 40px;
    font-size: 17px;
    border-color: rgba(var(--primary-rgb), .5);
    background: rgba(var(--primary-rgb), .12);
    color: var(--primary, #2f6bff);
}
#esa-radio-playpause:hover {
    background: rgba(var(--primary-rgb), .22);
    border-color: var(--primary);
    color: #fff;
}

/* Volume row */
.radio-volume-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 12px;
}
.radio-vol-icon {
    font-size: 13px;
    color: var(--text-dim);
    flex-shrink: 0;
    user-select: none;
}
#esa-radio-volume {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border, rgba(255,255,255,.12));
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    accent-color: var(--primary, #2f6bff);
    transition: background .2s;
}
#esa-radio-volume:hover {
    background: rgba(var(--primary-rgb), .25);
}
#esa-radio-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--primary, #2f6bff);
    box-shadow: 0 0 6px rgba(var(--primary-rgb), .5);
    transition: transform .15s;
}
#esa-radio-volume:hover::-webkit-slider-thumb {
    transform: scale(1.25);
}
#esa-radio-volume::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: none;
    background: var(--primary, #2f6bff);
    box-shadow: 0 0 6px rgba(var(--primary-rgb), .5);
    transition: transform .15s;
}
#esa-radio-volume:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ── Phone overrides ── */
@media (max-width: 480px) {
    #esa-radio {
        bottom: 68px;
        left: 10px;
        gap: 6px;
    }
    #esa-radio-toggle {
        width: 42px;
        height: 42px;
        font-size: 19px;
    }
    #esa-radio-panel {
        min-width: 210px;
        max-width: 240px;
    }
    .radio-header {
        padding: 8px 10px 8px 12px;
    }
    .radio-station-wrap {
        padding: 8px 12px 3px;
    }
    #esa-radio-status {
        padding: 0 12px 5px;
    }
    .radio-controls {
        padding: 4px 12px 9px;
        gap: 5px;
    }
    .radio-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    #esa-radio-playpause {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
    .radio-volume-row {
        padding: 0 12px 10px;
    }
    #esa-radio-station-name {
        font-size: 13px;
    }
}