/* mibl_live_bar.css — the live radio bar's styles, moved out of mibl_live_bar.php (audit P1 #9, 2026-10-02).
   ~4.3 KB of inline <style> re-sent byte-identical with every page view; no PHP was interpolated into it.
   Loaded from the position the inline block had, so the cascade is unchanged. */
.mlive{--mlive-accent:#00d4ff;--mlive-accent-rgb:0,212,255;
  position:fixed;z-index:9985;display:flex;align-items:center;gap:11px;
  background:linear-gradient(135deg,rgba(13,13,32,.92),rgba(20,16,40,.92));
  border:1px solid rgba(var(--mlive-accent-rgb),.30);border-radius:16px;padding:9px 12px;
  box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset,0 0 26px rgba(var(--mlive-accent-rgb),.14);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif;color:#eef0ff;
  transform:translateY(160%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s,border-color .6s,box-shadow .6s;will-change:transform}
.mlive.show{transform:translateY(0);opacity:1}
/* The bar is emitted with the `hidden` attribute and the JS lifts it when there is something to say —
   but display:flex above outranks the UA's [hidden]{display:none}, so the "hidden" bar was still in
   the tab order (Tab reached #mlivePlay / #mliveX) and still a landmark region on every page. */
.mlive[hidden]{display:none !important}
.mlive::before{content:'';position:absolute;top:0;left:12px;right:12px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--mlive-accent-rgb),.6),rgba(167,139,250,.4),transparent);transition:background .6s}
/* desktop: floating bottom corner */
.mlive{bottom:18px;width:330px;max-width:calc(100vw - 32px)}
html[dir="rtl"] .mlive,.mlive[data-rtl="1"]{left:18px;right:auto}
html:not([dir="rtl"]) .mlive,.mlive:not([data-rtl="1"]){right:18px}
/* mobile: full-width strip above the bottom nav */
.mlive.mlive--mobile{left:8px;right:8px;width:auto;max-width:none;z-index:45;
  bottom:calc(60px + env(safe-area-inset-bottom));border-radius:15px;padding:8px 10px;gap:10px}
/* lift page content so the docked mobile bar never hides the footer */
body.mlive-pad{padding-bottom:calc(128px + env(safe-area-inset-bottom)) !important}
.mlive-play{flex:none;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;color:#04121f;
  background:linear-gradient(135deg,var(--mlive-accent),#a78bfa);
  box-shadow:0 6px 18px rgba(var(--mlive-accent-rgb),.45),0 0 0 5px rgba(var(--mlive-accent-rgb),.12);
  transition:transform .15s cubic-bezier(.16,1,.3,1),background .6s,box-shadow .6s}
.mlive-play:active{transform:scale(.92)}
.mlive-cov{flex:none;width:42px;height:42px;border-radius:10px;object-fit:cover;background:#11112a;
  border:1px solid rgba(255,255,255,.10);box-shadow:0 3px 10px rgba(0,0,0,.4)}
.mlive-meta{min-width:0;flex:1;line-height:1.25}
.mlive-badge{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;
  letter-spacing:1px;color:#ff5a78;text-transform:uppercase}
.mlive-badge .dot{width:7px;height:7px;border-radius:50%;background:#ff4d6d;
  box-shadow:0 0 0 0 rgba(255,77,109,.7);animation:mliveDot 1.8s infinite}
@keyframes mliveDot{70%{box-shadow:0 0 0 7px rgba(255,77,109,0)}100%{box-shadow:0 0 0 0 rgba(255,77,109,0)}}
.mlive-title{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.mlive-artist{font-size:11px;color:#9aa3b6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* live equaliser — animates only while playing */
.mlive-eq{flex:none;display:flex;align-items:flex-end;gap:2px;height:18px;width:20px;opacity:.35}
.mlive.playing .mlive-eq{opacity:1}
.mlive-eq i{width:3px;height:30%;border-radius:2px;background:linear-gradient(180deg,var(--mlive-accent),#a78bfa);transition:background .6s}
.mlive.playing .mlive-eq i{animation:mliveEq .9s ease-in-out infinite}
.mlive-eq i:nth-child(2){animation-delay:.18s}.mlive-eq i:nth-child(3){animation-delay:.36s}.mlive-eq i:nth-child(4){animation-delay:.54s}
@keyframes mliveEq{0%,100%{height:25%}50%{height:100%}}
.mlive-x{flex:none;width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.06);color:#9aa3b6;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.mlive-x:hover{background:rgba(255,255,255,.14);color:#fff}
@media (prefers-reduced-motion:reduce){
  .mlive{transition:opacity .3s}.mlive-badge .dot,.mlive.playing .mlive-eq i{animation:none}
}