/* ==========================================================================
   Página pública da rádio — o que o ouvinte vê.
   As cores da marca vêm de --brand / --brand-accent, definidas inline por
   tenant no layout, então cada rádio tem a própria identidade.
   ========================================================================== */

/* O fundo é declarado duas vezes de propósito. A primeira regra é a garantia:
   cor sólida que todo navegador entende. A segunda enfeita com o brilho da cor
   da rádio, mas depende de color-mix() — e onde ela não existe (Safari antigo,
   Firefox anterior ao 113) a declaração inteira é descartada. Sem a primeira,
   o descarte deixaria a página sem fundo. */
.radio-page {
    min-height: 100vh;
    /* Em telas de celular 100vh não considera a barra do navegador; dvh sim,
       e onde não houver suporte a linha é ignorada e vale a de cima. */
    min-height: 100dvh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
    .radio-page {
        background:
            radial-gradient(1200px 600px at 50% -15%,
                color-mix(in srgb, var(--brand) 28%, transparent), transparent 70%),
            var(--bg);
    }
}

.radio-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 26px;
    border-bottom: 1px solid var(--border-soft);
}
.radio-header .brand-logo {
    width: 42px; height: 42px;
    border-radius: 11px;
    object-fit: cover;
    background: var(--bg-elev-2);
}
.radio-header .brand-fallback {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: grid; place-items: center;
    font-size: 20px;
    background: linear-gradient(135deg, var(--brand), var(--brand-accent));
}
.radio-header h1 { margin: 0; font-size: 1.1rem; }
.radio-header .tagline { font-size: .82rem; color: var(--text-muted); }
.radio-header .spacer { flex: 1; }

.listeners-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 20px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    font-size: .82rem;
    color: var(--text-muted);
}
.listeners-pill .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* --------------------------------------------------------------------------
   Player
   -------------------------------------------------------------------------- */
.player-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 20px;
}

.player-card {
    width: 100%;
    max-width: 620px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 32px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.artwork {
    width: 168px;
    height: 168px;
    margin: 0 auto 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--brand), var(--brand-accent));
    display: grid;
    place-items: center;
    font-size: 62px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
    transition: transform .4s ease;
}

@supports (box-shadow: 0 0 0 color-mix(in srgb, red 50%, transparent)) {
    .artwork {
        box-shadow: 0 14px 40px color-mix(in srgb, var(--brand) 32%, transparent);
    }
}
#player.is-playing .artwork { animation: breathe 5s ease-in-out infinite; }
@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}
#player.em-comercial .artwork {
    background: linear-gradient(135deg, var(--warning), #ff8b4a);
    animation: none;
}

.track-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 11px;
}

.track-title {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
    word-break: break-word;
}
.track-artist {
    color: var(--text-muted);
    font-size: 1rem;
    min-height: 1.5em;
}

/* O álbum é contexto, não identidade: menor e mais discreto que o artista.
   Só aparece quando existe — vinhetas e comerciais não têm álbum, e uma linha
   vazia ali faria a ficha parecer quebrada. */
.track-album {
    color: var(--text-dim);
    font-size: .85rem;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A folga acima da barra fica aqui, e não presa ao artista ou ao álbum:
   assim ela não some quando o álbum está oculto. */
.progress-row {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 11px;
    font-size: .76rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    margin-bottom: 22px;
}
.progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-elev-2);
    border-radius: 20px;
    overflow: hidden;
}
.progress-bar > span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--brand), var(--brand-accent));
    border-radius: 20px;
    transition: width .25s linear;
}

.player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 18px;
}

.btn-play {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, var(--brand), var(--brand-accent));
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
    transition: transform .15s, filter .15s;
    /* Alvo de toque confortável no celular. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@supports (box-shadow: 0 0 0 color-mix(in srgb, red 50%, transparent)) {
    .btn-play {
        box-shadow: 0 8px 26px color-mix(in srgb, var(--brand) 38%, transparent);
    }
}
.btn-play:hover  { transform: scale(1.06); filter: brightness(1.1); }
.btn-play:active { transform: scale(.97); }

.btn-skip {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elev-2);
    color: var(--text-muted);
    font-size: 17px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-skip:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.btn-skip:disabled { opacity: .32; cursor: not-allowed; }

.volume-row {
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 230px;
    margin: 0 auto;
    color: var(--text-dim);
}
.volume-row input[type=range] {
    flex: 1;
    accent-color: var(--brand);
    cursor: pointer;
}

.player-status {
    font-size: .84rem;
    color: var(--text-dim);
    min-height: 1.4em;
    margin-top: 14px;
}
.player-status.error { color: var(--danger); }

/* --------------------------------------------------------------------------
   Últimas tocadas
   -------------------------------------------------------------------------- */
.history {
    max-width: 620px;
    margin: 0 auto 40px;
    padding: 0 20px;
    width: 100%;
}
.history h2 {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.history ul { list-style: none; margin: 0; padding: 0; }
.history li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    border-bottom: 1px solid var(--border-soft);
}
.history li:hover { background: var(--bg-elev); }
.history .h-time   { color: var(--text-dim); font-size: .78rem; font-variant-numeric: tabular-nums; }
.history .h-title  { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history .h-artist { color: var(--text-muted); margin-left: auto; font-size: .82rem; white-space: nowrap; }

.radio-footer {
    text-align: center;
    padding: 22px;
    font-size: .78rem;
    color: var(--text-dim);
    border-top: 1px solid var(--border-soft);
}

@media (max-width: 560px) {
    .player-card { padding: 24px 18px; border-radius: 18px; }
    .artwork { width: 132px; height: 132px; font-size: 48px; }
    .track-title { font-size: 1.2rem; }
    .history .h-artist { display: none; }
}