/* ════════════════════════════════════════════════════════════════════════
   NOCTURNA MINI PLAYER v3 — design premium, clean, "desktop app"
   --------------------------------------------------------------------------
   • Capa PARADA (sem rotação). Neon roxo suave, glass refinado, blur leve,
     sombras modernas, tipografia/spacing premium, microinterações discretas.
   • Botão "Atualizar transmissão" (resync) no lugar do antigo "GRAVADO".
   • Escopado em .nmp-* — também injetado dentro da janela Document PiP.
════════════════════════════════════════════════════════════════════════ */

:root{
  --nmp-accent:#b49cff;          /* roxo neon suave */
  --nmp-accent-strong:#9a6bff;
  --nmp-accent-deep:#6a3fc0;
  --nmp-green:#54e0a3;
  --nmp-text:#f1edfb;
  --nmp-muted:rgba(241,237,251,.56);
  --nmp-muted-2:rgba(241,237,251,.34);
  --nmp-line:rgba(255,255,255,.07);
  --nmp-line-2:rgba(180,156,255,.16);
}

#nmpHost{ position:fixed; left:-99999px; top:0; width:1px; height:1px; overflow:hidden; pointer-events:none; }
body.nmp-pip-body{ margin:0; background:#0a0712; overflow:hidden; }

/* ─────────────────────────── Card ─────────────────────────── */
.nmp-pip{
  position:relative; width:100%; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:20px 22px;
  font-family:"Syne", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--nmp-text); overflow:hidden; user-select:none;
  /* sem backdrop-filter: dentro da janela PiP não há nada atrás para desfocar,
     então blur só gastaria GPU. O gradiente sólido mantém o visual de vidro. */
  background:
    radial-gradient(140% 120% at 100% -20%, rgba(180,156,255,.12), transparent 55%),
    linear-gradient(165deg, #171126, #0c0916);
  contain:layout style paint;     /* isola reflow/repaint do card */
}
/* hairline de luz no topo (bem sutil) */
.nmp-pip::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(180,156,255,.5), transparent);
  opacity:.6;
}

/* ─────────────────────────── Topo: capa + meta ─────────────────────────── */
.nmp-pip__top{ display:flex; gap:16px; align-items:center; min-width:0; }

.nmp-cover{ position:relative; flex:0 0 auto; width:74px; height:74px; }
.nmp-cover::after{ /* glow estático suave atrás da capa (sem animação) */
  content:""; position:absolute; inset:-8px; border-radius:20px; z-index:-1;
  background:radial-gradient(60% 60% at 50% 40%, rgba(154,107,255,.30), transparent 70%);
  filter:blur(6px);
}
.nmp-cover__img{
  width:100%; height:100%; object-fit:cover; border-radius:15px; display:block;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  background:#160e2a;
}

.nmp-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }

/* status "AO VIVO" com equalizer fino e discreto */
.nmp-live{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-family:"Share Tech Mono", monospace; font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--nmp-green); }
.nmp-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:11px; }
.nmp-eq i{ width:2px; height:3px; border-radius:1px; background:var(--nmp-green); opacity:.85; transform-origin:bottom;
  animation:nmpEq 1s ease-in-out infinite; animation-play-state:paused; }
.nmp-eq i:nth-child(2){ animation-delay:.2s } .nmp-eq i:nth-child(3){ animation-delay:.4s }
.nmp-pip.is-playing .nmp-eq i{ animation-play-state:running; }
.nmp-pip:not(.is-playing) .nmp-eq i{ height:3px; opacity:.4; }

.nmp-title{ font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; }
.nmp-title.is-scroll > span{ display:inline-block; padding-left:100%; animation:nmpMarquee 13s linear infinite; will-change:transform; }
.nmp-dj{ font-size:13.5px; font-weight:500; color:var(--nmp-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nmp-dj b{ color:var(--nmp-accent); font-weight:600; }

/* ─────────────────────────── Botão Atualizar (resync) ─────────────────────────── */
.nmp-refresh{
  position:absolute; top:16px; right:16px; z-index:5;
  width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--nmp-muted); cursor:pointer;
  border:1px solid var(--nmp-line); background:rgba(255,255,255,.035);
  transition:color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.nmp-refresh svg{ width:15px; height:15px; transition:transform .2s ease; }
.nmp-refresh:hover{ color:var(--nmp-text); background:rgba(180,156,255,.14); border-color:var(--nmp-line-2); }
.nmp-refresh:active{ transform:scale(.92); }
.nmp-refresh.is-syncing{ color:var(--nmp-accent); border-color:var(--nmp-line-2); pointer-events:none; }
.nmp-refresh.is-syncing svg{ animation:nmpSpin .8s linear infinite; }
.nmp-refresh.is-done{ color:var(--nmp-green); border-color:rgba(84,224,163,.4); background:rgba(84,224,163,.12); }

/* tooltip elegante */
.nmp-tip::after{
  content:attr(data-tip); position:absolute; top:calc(100% + 8px); right:0; white-space:nowrap;
  font-family:"Share Tech Mono", monospace; font-size:10.5px; letter-spacing:.4px; color:var(--nmp-text);
  padding:6px 10px; border-radius:8px; border:1px solid var(--nmp-line);
  background:rgba(16,11,28,.96); box-shadow:0 8px 22px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-3px); pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.nmp-tip:hover::after{ opacity:1; transform:translateY(0); }

/* ─────────────────────────── Controles ─────────────────────────── */
.nmp-ctrl{ display:flex; align-items:center; gap:15px; }
.nmp-play{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; border:none;
  background:linear-gradient(150deg, var(--nmp-accent-strong), var(--nmp-accent-deep));
  box-shadow:0 6px 18px rgba(106,63,192,.35);
  transition:transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .25s ease, filter .2s ease;
}
.nmp-play svg{ width:19px; height:19px; margin-left:1px; }
.nmp-play:hover{ transform:scale(1.06); box-shadow:0 10px 26px rgba(106,63,192,.5); }
.nmp-play:active{ transform:scale(.95); }
.nmp-play.is-loading svg{ display:none; }
.nmp-play.is-loading::after{ content:""; width:17px; height:17px; border-radius:50%; border:2.5px solid rgba(255,255,255,.25); border-top-color:#fff; animation:nmpSpin .7s linear infinite; }

.nmp-vol{ flex:1; display:flex; align-items:center; gap:10px; min-width:0; }
.nmp-vol__icon{ flex:0 0 auto; width:19px; height:19px; color:var(--nmp-muted); cursor:pointer; transition:color .18s ease; }
.nmp-vol__icon:hover{ color:var(--nmp-text); }
.nmp-vol__range{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px; cursor:pointer; outline:none;
  background:linear-gradient(90deg, var(--nmp-accent) var(--nmp-vol,80%), rgba(255,255,255,.12) var(--nmp-vol,80%));
  transition:height .15s ease;
}
.nmp-vol:hover .nmp-vol__range{ height:5px; }
.nmp-vol__range::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 3px rgba(180,156,255,.22); transition:transform .15s ease, box-shadow .2s ease; }
.nmp-vol__range::-webkit-slider-thumb:hover{ transform:scale(1.15); box-shadow:0 0 0 4px rgba(180,156,255,.28); }
.nmp-vol__range::-moz-range-thumb{ width:13px; height:13px; border:none; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(180,156,255,.22); }

/* ─────────────────────────── Rodapé ─────────────────────────── */
.nmp-foot{ display:flex; align-items:center; gap:10px; padding-top:2px;
  font-family:"Share Tech Mono", monospace; font-size:10px; letter-spacing:.6px; color:var(--nmp-muted-2); }
.nmp-conn{ display:inline-flex; align-items:center; gap:7px; transition:color .25s ease; }
.nmp-conn__dot{ width:6px; height:6px; border-radius:50%; background:var(--nmp-muted-2); transition:background .25s ease, box-shadow .25s ease; }
.nmp-conn.is-live{ color:var(--nmp-muted); } .nmp-conn.is-live .nmp-conn__dot{ background:var(--nmp-green); box-shadow:0 0 7px rgba(84,224,163,.7); }
.nmp-conn.is-buffer{ color:var(--nmp-accent); } .nmp-conn.is-buffer .nmp-conn__dot{ background:var(--nmp-accent); box-shadow:0 0 7px rgba(180,156,255,.7); animation:nmpPulse 1s ease infinite; }
.nmp-conn.is-down .nmp-conn__dot{ background:#ff6b81; box-shadow:0 0 7px rgba(255,107,129,.7); }
.nmp-foot__spacer{ flex:1; }
.nmp-bitrate{ color:var(--nmp-muted-2); }

/* ─────────────────────────── Launcher + toasts (na página) ─────────────────────────── */
#nmpLauncher{ position:fixed; right:20px; bottom:96px; z-index:2147483000; display:none; align-items:center; gap:8px;
  padding:10px 15px; border-radius:12px; cursor:pointer; font-family:"Share Tech Mono", monospace; font-size:11px; letter-spacing:.8px; color:#fff;
  border:1px solid var(--nmp-line-2); background:linear-gradient(150deg, var(--nmp-accent-strong), var(--nmp-accent-deep));
  box-shadow:0 12px 30px rgba(106,63,192,.32); transition:transform .18s ease, box-shadow .25s ease; }
#nmpLauncher.is-shown{ display:inline-flex; }
#nmpLauncher:hover{ transform:translateY(-1px); box-shadow:0 16px 38px rgba(106,63,192,.45); }
#nmpLauncher svg{ width:15px; height:15px; }
#nmpToasts{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:2147483001; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.nmp-toast{ font-family:"Share Tech Mono", monospace; font-size:12px; color:var(--nmp-text); padding:9px 16px; border-radius:11px;
  border:1px solid var(--nmp-line); background:rgba(16,11,28,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.5); display:flex; align-items:center; gap:9px; animation:nmpToastIn .3s ease; }
.nmp-toast__dot{ width:7px; height:7px; border-radius:50%; background:var(--nmp-accent); box-shadow:0 0 8px var(--nmp-accent); }

/* ─────────────────────────── Animações (discretas) ─────────────────────────── */
@keyframes nmpEq{ 0%,100%{ transform:scaleY(.45);} 50%{ transform:scaleY(1.6);} }
@keyframes nmpSpin{ to{ transform:rotate(360deg);} }
@keyframes nmpPulse{ 0%,100%{ opacity:1;} 50%{ opacity:.4;} }
@keyframes nmpMarquee{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-100%);} }
@keyframes nmpToastIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

@media (max-width:1023px), (pointer:coarse){ #nmpLauncher, #nmpToasts{ display:none !important; } }
@media (prefers-reduced-motion: reduce){
  .nmp-eq i{ animation:none !important; } .nmp-refresh.is-syncing svg{ animation:none !important; }
  .nmp-title.is-scroll > span{ animation:none !important; padding-left:0 !important; }
}