/* Stoner Bot Control Center: Now Playing card on Home (v3.1.154; bigger look v3.1.155). See js/now-playing.js. */
#screen .sb-np-card{display:flex;flex-direction:column;gap:16px}
#screen .sb-np-card>p{margin:0}

/* The song playing now: a panel with the cover blurred behind it */
.sb-np-current{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:22px 18px 16px;border-radius:20px;background:rgba(12,10,19,.55);border:1px solid rgba(214,192,246,.12)}
.sb-np-backdrop{position:absolute;inset:-30%;z-index:-2;pointer-events:none}
.sb-np-backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(34px) saturate(1.5);opacity:.62;transform:translateZ(0)}
.sb-np-current::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(10,8,16,.18) 0%,rgba(10,8,16,.48) 55%,rgba(10,8,16,.78) 100%)}
.sb-np-now{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;color:inherit;text-decoration:none;text-align:center;-webkit-tap-highlight-color:transparent}
a.sb-np-now:active .sb-np-cover-hero{transform:scale(.97)}
a.sb-np-now:active{opacity:.85}

.sb-np-cover{flex:none;display:grid;place-items:center;overflow:hidden;background:rgba(179,136,235,.12);border:1px solid rgba(214,192,246,.13);color:#c6a0f4}
.sb-np-cover img{width:100%;height:100%;object-fit:cover;display:block}
.sb-np-cover-hero{width:min(232px,72%);aspect-ratio:1;border-radius:18px;font-size:64px;border-color:rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04);transition:transform .25s ease}
.sb-np-current[data-state="paused"] .sb-np-cover-hero{transform:scale(.9);filter:saturate(.75)}
.sb-np-cover-idle{width:64px;height:64px;border-radius:13px;font-size:24px;opacity:.55;filter:saturate(.6)}

.sb-np-now-text{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;max-width:100%}
.sb-np-status{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#d9bdfb;margin-bottom:4px}
.sb-np-source{font-weight:650;letter-spacing:.4px;text-transform:none;font-size:11px;color:#b9adc8}
.sb-np-eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.sb-np-eq i{display:block;width:3px;height:100%;border-radius:2px;background:#b388eb;transform-origin:bottom;animation:sb-np-eq 1s ease-in-out infinite}
.sb-np-eq i:nth-child(2){animation-delay:-.4s}
.sb-np-eq i:nth-child(3){animation-delay:-.7s}
.sb-np-current[data-state="paused"] .sb-np-eq i{animation:none;transform:scaleY(.35);background:#8f7aa8}
.sb-np-current[data-state="paused"] .sb-np-status{color:#e8c98a}
@keyframes sb-np-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.sb-np-title{font-size:22px;font-weight:780;letter-spacing:-.55px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.sb-np-artist{font-size:16px;font-weight:600;color:#e2d2f7;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sb-np-progress{display:flex;flex-direction:column;gap:7px}
.sb-np-bar{position:relative;height:5px;border-radius:5px;background:rgba(255,255,255,.14);overflow:hidden}
.sb-np-fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#9668cc,#c9a5f7);border-radius:5px;transition:transform 1s linear}
.sb-np-card[data-state="paused"] .sb-np-fill{background:#8f7aa8}
.sb-np-times{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:#c4b9d1;font-variant-numeric:tabular-nums}
.sb-np-meta{display:block;text-align:center;font-size:12px;color:#c4b9d1;line-height:1.45;overflow-wrap:anywhere}

/* Nothing playing */
.sb-np-idle{display:flex;align-items:center;gap:14px}
.sb-np-idle-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.sb-np-idle-title{margin:0;font-size:16px;font-weight:700;letter-spacing:-.3px}
.sb-np-idle-note{font-size:12px;color:#a9a2b8;line-height:1.5;overflow-wrap:anywhere}

.sb-np-error{color:#e8b0b0!important;font-size:12px!important}

@media(max-width:350px){.sb-np-current{padding:18px 14px 14px}.sb-np-title{font-size:20px}.sb-np-artist{font-size:15px}}
@media(prefers-reduced-motion:reduce){.sb-np-fill,.sb-np-cover-hero{transition:none}.sb-np-eq i{animation:none;transform:scaleY(.6)}}

/* Big ⇄ compact (v3.1.156): the button in the panel's top-right corner */
#screen .sb-np-size{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;margin:0;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(10,8,16,.42);color:#eadcfb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent}
#screen .sb-np-size svg{width:18px;height:18px}
#screen .sb-np-size:active{transform:scale(.92);background:rgba(179,136,235,.22)}
.sb-np-current[data-size="small"]{padding:14px 14px 12px;gap:12px}
.sb-np-current[data-size="small"] .sb-np-now{flex-direction:row;align-items:center;gap:14px;text-align:left;padding-right:36px}
.sb-np-current[data-size="small"] .sb-np-cover-hero{width:84px;border-radius:13px;font-size:30px;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.sb-np-current[data-size="small"][data-state="paused"] .sb-np-cover-hero{transform:scale(.94)}
.sb-np-current[data-size="small"] .sb-np-now-text{align-items:flex-start;flex:1;gap:3px}
.sb-np-current[data-size="small"] .sb-np-status{margin-bottom:2px}
.sb-np-current[data-size="small"] .sb-np-title{font-size:17px;letter-spacing:-.35px}
.sb-np-current[data-size="small"] .sb-np-artist{font-size:14px}
.sb-np-current[data-size="small"] .sb-np-meta{text-align:left;font-size:11px}
/* The artwork and song name glide between the two looks */
.sb-np-cover-hero{view-transition-name:sb-np-art}
.sb-np-now-text{view-transition-name:sb-np-text}
::view-transition-group(sb-np-art),::view-transition-group(sb-np-text){animation-duration:.32s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
.sb-np-current[data-size="small"] .sb-np-now{padding-right:40px}
.sb-np-current[data-size="small"] .sb-np-status{flex-wrap:wrap;row-gap:2px;max-width:100%}
@media(max-width:400px){.sb-np-current[data-size="small"] .sb-np-source{display:none}}

/* Slides in when Jockie joins voice and out when it leaves (v3.1.159) */
.sb-np-wrap{display:grid;grid-template-rows:1fr;opacity:1;transform:none;transition:grid-template-rows .34s cubic-bezier(.3,.7,.2,1),opacity .28s ease,transform .34s cubic-bezier(.3,.7,.2,1)}
.sb-np-wrap{grid-template-columns:minmax(0,1fr)}
.sb-np-inner{min-height:0;min-width:0}
.sb-np-wrap[data-anim="in"],.sb-np-wrap[data-anim="out"]{grid-template-rows:0fr;opacity:0;transform:translateY(-8px)}
.sb-np-wrap[data-anim] .sb-np-inner{overflow:hidden}
@media(prefers-reduced-motion:reduce){.sb-np-wrap{transition:none}}
.sb-np-cover-bot{border-radius:50%;opacity:1;filter:none}