/* Radio Song Log — Player Styles (dark theme) */

.rsl-player {
    --rsl-bg:        #1a1a2e;
    --rsl-surface:   #16213e;
    --rsl-border:    rgba(255,255,255,.08);
    --rsl-accent:    #e94560;
    --rsl-text:      #f0f0f0;
    --rsl-muted:     rgba(240,240,240,.55);
    --rsl-radius:    12px;
    --rsl-art-size:  120px;

    background:    var(--rsl-bg);
    border-radius: var(--rsl-radius);
    overflow:      hidden;
    font-family:   inherit;
    color:         var(--rsl-text);
    max-width:     720px;
    margin:        0 auto;
    box-shadow:    0 8px 32px rgba(0,0,0,.4);
}

/* ── Hero ── */
.rsl-player__hero {
    display:     flex;
    align-items: center;
    gap:         20px;
    padding:     28px 28px 24px;
    background:  var(--rsl-surface);
    flex-wrap:   wrap;
}

/* Album art */
.rsl-player__art-wrap {
    flex-shrink: 0;
    position:    relative;
}

.rsl-player__art {
    width:         var(--rsl-art-size);
    height:        var(--rsl-art-size);
    border-radius: 8px;
    object-fit:    cover;
    background:    #0f3460;
    display:       block;
    transition:    opacity .3s;
}

/* Meta */
.rsl-player__meta {
    flex:     1;
    min-width: 0;
}

.rsl-player__live-badge {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    font-size:   11px;
    font-weight: 700;
    letter-spacing: .1em;
    color:       var(--rsl-accent);
    margin-bottom: 4px;
}

.rsl-player__live-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--rsl-accent);
    animation:     rsl-pulse 1.4s ease-in-out infinite;
}

@keyframes rsl-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.85); }
}

.rsl-player__station {
    font-size:   13px;
    color:       var(--rsl-muted);
    margin-bottom: 10px;
}

.rsl-player__now-label {
    font-size:   11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:       var(--rsl-muted);
    margin-bottom: 4px;
}

.rsl-player__title {
    font-size:   20px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    transition:  opacity .3s;
}

.rsl-player__artist {
    font-size:   14px;
    color:       var(--rsl-muted);
    margin-top:  4px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    transition:  opacity .3s;
}

/* Controls */
.rsl-player__controls {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    flex-shrink:    0;
}

.rsl-player__play-btn {
    width:           64px;
    height:          64px;
    border-radius:   50%;
    border:          none;
    background:      var(--rsl-accent);
    color:           #fff;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .2s, transform .15s;
    flex-shrink:     0;
    box-shadow:      0 4px 16px rgba(233,69,96,.4);
}

.rsl-player__play-btn:hover  { background: #ff6b81; transform: scale(1.05); }
.rsl-player__play-btn:active { transform: scale(.97); }

.rsl-player__play-btn svg {
    width:  26px;
    height: 26px;
    fill:   currentColor;
}

/* Volume */
.rsl-player__volume {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.rsl-vol-icon {
    width:  16px;
    height: 16px;
    fill:   var(--rsl-muted);
    flex-shrink: 0;
}

.rsl-player__vol-slider {
    -webkit-appearance: none;
    width:        80px;
    height:       3px;
    border-radius: 2px;
    background:   var(--rsl-border);
    outline:      none;
    cursor:       pointer;
}

.rsl-player__vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:  12px;
    height: 12px;
    border-radius: 50%;
    background:   var(--rsl-accent);
    cursor:       pointer;
}

.rsl-player__vol-slider::-moz-range-thumb {
    width:  12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background:   var(--rsl-accent);
    cursor:       pointer;
}

/* ── Recently Played ── */
.rsl-player__history {
    padding: 0 28px 24px;
}

.rsl-player__history-title {
    font-size:   11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:       var(--rsl-muted);
    margin:      0 0 12px;
    padding-top: 20px;
    border-top:  1px solid var(--rsl-border);
}

.rsl-player__history-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        2px;
}

.rsl-player__history-item {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     8px 10px;
    border-radius: 8px;
    transition:  background .15s;
}

.rsl-player__history-item:hover {
    background: rgba(255,255,255,.05);
}

.rsl-player__history-art {
    width:         48px;
    height:        48px;
    border-radius: 6px;
    object-fit:    cover;
    flex-shrink:   0;
    background:    #0f3460;
    display:       block;
}

.rsl-player__history-art--placeholder {
    background:  #0f3460;
    position:    relative;
}

.rsl-player__history-art--placeholder::after {
    content:  '♪';
    position: absolute;
    inset:    0;
    display:  flex;
    align-items:     center;
    justify-content: center;
    font-size: 18px;
    color:     rgba(255,255,255,.25);
}

.rsl-player__history-info {
    flex:      1;
    min-width: 0;
    display:   flex;
    flex-direction: column;
    gap:       2px;
}

.rsl-player__history-track {
    font-size:   14px;
    font-weight: 600;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.rsl-player__history-artist {
    font-size: 12px;
    color:     var(--rsl-muted);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.rsl-player__history-time {
    font-size:   11px;
    color:       var(--rsl-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Playing state indicator on hero ── */
.rsl-player--playing .rsl-player__art {
    box-shadow: 0 0 0 3px var(--rsl-accent);
}

/* ── Responsive ── */
@media ( max-width: 600px ) {

    /* Switch hero to a two-column grid:
       Left  30% → album art (spans both rows)
       Right 70% → meta text (row 1) + controls (row 2)
       This keeps the play button in the right column at all
       viewport widths instead of dropping below the hero. */
    .rsl-player__hero {
        display:               grid;
        grid-template-columns: 30% 1fr;
        grid-template-rows:    1fr auto;
        grid-template-areas:
            "art meta"
            "art controls";
        gap:     0 16px;
        padding: 16px;
        align-items: start;
    }

    .rsl-player__art-wrap {
        grid-area:  art;
        align-self: start;
    }

    /* Let the art fill its 30% column exactly, square */
    .rsl-player .rsl-player__art {
        width:        100%;
        height:       auto;
        aspect-ratio: 1 / 1;
        border-radius: 6px;
    }

    .rsl-player__meta {
        grid-area:  meta;
        align-self: start;
        min-width:  0;
    }

    /* Allow title and artist to wrap rather than truncate */
    .rsl-player__title {
        white-space: normal;
        font-size:   clamp(14px, 4.5vw, 20px);
    }

    .rsl-player__artist {
        white-space: normal;
    }

    .rsl-player__station {
        margin-bottom: 6px;
    }

    /* Controls sit below meta text, still in the right column */
    .rsl-player__controls {
        grid-area:       controls;
        flex-direction:  row;
        justify-content: flex-start;
        align-items:     center;
        gap:             12px;
        padding-top:     10px;
        width:           auto;
    }

    .rsl-player__play-btn {
        width:  48px;
        height: 48px;
        flex-shrink: 0;
    }

    .rsl-player__play-btn svg {
        width:  20px;
        height: 20px;
    }

    /* Volume slider expands to fill available space */
    .rsl-player__volume {
        flex: 1;
        min-width: 0;
    }

    .rsl-player__vol-slider {
        width: 100%;
    }

    /* History list tighter on small screens */
    .rsl-player__history {
        padding: 0 14px 18px;
    }

    .rsl-player__history-art,
    .rsl-player__history-art--placeholder {
        width:  40px;
        height: 40px;
    }
}

/* Very narrow (under 360px) — shrink text slightly more */
@media ( max-width: 360px ) {
    .rsl-player__live-badge,
    .rsl-player__now-label {
        font-size: 10px;
    }

    .rsl-player__title {
        font-size: clamp(13px, 4vw, 16px);
    }

    .rsl-player__artist {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */

.rsl-player--light {
    --rsl-bg:      #ffffff;
    --rsl-surface: #f5f5f7;
    --rsl-border:  rgba(0,0,0,.09);
    --rsl-accent:  #e94560;
    --rsl-text:    #1a1a2e;
    --rsl-muted:   rgba(26,26,46,.5);
    box-shadow:    0 4px 24px rgba(0,0,0,.1);
}

.rsl-player--light .rsl-player__art {
    background: #dde3ef;
}

.rsl-player--light .rsl-player__history-art,
.rsl-player--light .rsl-player__history-art--placeholder {
    background: #dde3ef;
}

.rsl-player--light .rsl-player__history-art--placeholder::after {
    color: rgba(0,0,0,.2);
}

.rsl-player--light .rsl-player__history-item:hover {
    background: rgba(0,0,0,.04);
}

.rsl-player--light .rsl-vol-icon {
    fill: var(--rsl-muted);
}

.rsl-player--light .rsl-player__vol-slider {
    background: rgba(0,0,0,.12);
}