/* A single persistent control surface shared by all station layouts. */
:root{--player-height:110px;--player-bg:#15233b;--player-border:#506ca5;--player-accent:#a8bdff;--player-button-text:#102043;--player-muted:#becde5}
body[data-layout=magazine]{--player-bg:#fff;--player-border:#94b0dd;--player-accent:#215bc4;--player-button-text:#fff;--player-muted:#526780}
body[data-layout=essencial]{--player-bg:#1c2f30;--player-border:#628d87;--player-accent:#a1e4dc;--player-button-text:#123430;--player-muted:#b8d4d0}
body[data-layout=vibrante]{--player-bg:#2b1c41;--player-border:#9c6ac0;--player-accent:#ffd3a0;--player-button-text:#3b2248;--player-muted:#dcc7ed}
body[data-layout]{padding-bottom:calc(var(--player-height) + 24px)}
html{scroll-padding-bottom:calc(var(--player-height) + 24px)}
[data-layout] .hero-inner{grid-template-columns:minmax(0,1fr);padding-top:8px}
[data-layout] .hero-copy h2{max-width:800px;padding-right:0}
[data-layout] .hero .now-track{margin-bottom:22px}
[data-layout=essencial] .hero-copy h2{max-width:none}
[data-layout] .message-compose{gap:16px;border-radius:8px}
[data-layout] .message-compose b{width:auto;height:auto;border-radius:6px;padding:9px 13px;flex-shrink:0;font-size:11px;font-weight:650}

body[data-layout] .bottom-player{display:grid;grid-template-columns:minmax(160px,1fr) auto minmax(120px,.85fr) minmax(155px,210px);gap:22px;align-items:center;position:fixed;inset:auto 0 0;z-index:30;min-height:96px;padding:16px max(24px,calc((100vw - 1380px)/2));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));color:var(--ink);background:var(--player-bg);border-top:2px solid var(--player-border);box-shadow:0 -6px 30px #0004;isolation:isolate}
body[data-layout] .bottom-player .bottom-track{display:flex;width:auto;max-width:none;min-width:0;gap:12px;align-items:center;flex:initial}
body[data-layout] .bottom-player .bottom-track img{width:52px;height:52px;border-radius:8px;flex-shrink:0}
body[data-layout] .bottom-player .bottom-track>div{min-width:0;flex:1}
body[data-layout] .bottom-player .player-caption{font-size:8px;letter-spacing:1.3px;color:var(--player-muted);display:block;margin-bottom:3px}
body[data-layout] .bottom-player .bottom-track strong{font-size:14px;max-width:none;line-height:1.35}
body[data-layout] .bottom-player .bottom-track span{font-size:11px;margin-top:3px;color:var(--player-muted)}
body[data-layout] .bottom-player .bottom-controls{display:block;flex:initial;min-width:0}
[data-layout] #listen-toggle{display:flex;align-items:center;justify-content:center;gap:12px;min-width:165px;min-height:56px;border-radius:10px;border:1px solid transparent;background:var(--player-accent);color:var(--player-button-text);padding:13px 20px;font-size:14px;font-weight:750;line-height:1.25;box-shadow:0 3px 0 #0002;cursor:pointer}
[data-layout] #listen-toggle:hover{filter:brightness(1.08)}
[data-layout] #listen-toggle:focus-visible{outline:3px solid var(--player-accent);outline-offset:5px}
.play-symbol{width:18px;height:20px;display:grid;place-items:center;flex-shrink:0}
.play-symbol:before{content:"";width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid currentColor;margin-left:3px}
.bottom-player[data-state=playing] .play-symbol:before,.bottom-player[data-state=connecting] #listen-toggle[aria-pressed=true] .play-symbol:before{width:5px;height:18px;border:0;background:currentColor;box-shadow:9px 0 currentColor;margin-left:-6px}
body[data-layout] .bottom-player .player-monitor{min-width:0}
.player-connection{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--player-muted);white-space:nowrap}
.player-connection #connection-label{overflow:hidden;text-overflow:ellipsis}
.connection-dot{width:7px;height:7px;flex-shrink:0;background:#8a9aad;border-radius:50%}
.bottom-player[data-state=playing] .connection-dot{background:#68e6b5;box-shadow:0 0 0 3px #68e6b512}
body[data-layout=magazine] .bottom-player[data-state=playing] .connection-dot{background:#16825e}
.bottom-player[data-state=connecting] .connection-dot{background:#ffce86}
.bottom-player[data-state=error] .connection-dot,.bottom-player[data-state=unavailable] .connection-dot{background:#ee8b9c}
.player-time{color:var(--player-muted)}
body[data-layout] .bottom-player #listen-time{font:9px Consolas,monospace;margin-left:auto;color:var(--player-muted)}
body[data-layout] .bottom-player .play-animation{display:flex;max-height:18px;gap:3px;margin-top:8px;justify-content:flex-start}
body[data-layout] .bottom-player .play-animation .bar{background:var(--player-accent)!important;max-width:4px;min-width:2px}
body[data-layout] .bottom-player .volume-controls{display:flex;gap:9px;align-items:center;width:auto;min-width:0}
body[data-layout] .bottom-player .volume-controls label{color:var(--player-muted);font-size:10px}
body[data-layout] .bottom-player .volume-controls input{display:block;accent-color:var(--player-accent);width:100%;min-width:40px;height:36px;cursor:pointer}
body[data-layout] .bottom-player .icon-button{min-width:36px;min-height:44px;color:var(--player-muted);background:none;font-size:22px}
body[data-layout] .bottom-player #favorite[aria-pressed=true]{color:#ed86b3}
body[data-layout] #toast{bottom:calc(var(--player-height) + 16px)}
@media(max-width:1100px){
  body[data-layout] .bottom-player{grid-template-columns:minmax(160px,1fr) auto minmax(145px,195px);gap:18px;padding:14px 24px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  body[data-layout] .bottom-player .player-monitor{display:none}
}
@media(max-width:760px){
  body[data-layout] .bottom-player{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"track controls" "status volume";gap:10px 16px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));min-height:118px}
  body[data-layout] .bottom-player .bottom-track{grid-area:track;gap:9px}
  body[data-layout] .bottom-player .bottom-track img{width:42px;height:42px}
  body[data-layout] .bottom-player .bottom-track strong{font-size:12px}
  body[data-layout] .bottom-player .bottom-track span{font-size:10px}
  body[data-layout] .bottom-player .player-caption{font-size:7px;letter-spacing:.8px}
  body[data-layout] .bottom-player #favorite{display:none}
  body[data-layout] .bottom-player .bottom-controls{grid-area:controls}
  [data-layout] #listen-toggle{min-width:126px;min-height:48px;padding:11px 13px;gap:9px;font-size:12px;border-radius:8px}
  body[data-layout] .bottom-player .player-monitor{grid-area:status;display:block}
  body[data-layout] .bottom-player .player-connection{font-size:9px}
  body[data-layout] .bottom-player #listen-time,body[data-layout] .bottom-player .play-animation{display:none}
  body[data-layout] .bottom-player .volume-controls{grid-area:volume;gap:7px;max-width:180px}
  body[data-layout] .bottom-player .volume-controls label{font-size:9px}
  body[data-layout] .bottom-player .volume-controls input{height:24px;min-width:45px}
  body[data-layout] .bottom-player #share{display:none}
  [data-layout] .message-compose{flex-wrap:wrap;align-items:flex-start;padding:12px}
  [data-layout] .message-compose b{margin-left:auto;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.bottom-player .bar{animation:none!important}}