/* css-miniplayer.css v7 — compacto, fixo, sem overlap */

/* ── Container principal ── */
#miniRodape{
  position:fixed;
  bottom:6px;
  left:50%;
  transform:translateX(-50%);
  width:95%;
  max-width:520px;
  z-index:50;
  display:none;
  border-radius:14px;
  padding:1.5px;
  background:linear-gradient(135deg,#0ff,#0af,#0fa,#0ff);
  background-size:300% 300%;
  animation:miniGrad 5s linear infinite;
  box-shadow:0 0 20px rgba(0,255,255,.3);
}
@keyframes miniGrad{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ── Glass interno — altura fixa e compacta ── */
.mini-glass{
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:13px;
  background:rgba(5,8,15,.93);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:6px 10px;
  height:62px;        /* altura fixa — nunca cresce, nunca encolhe */
  overflow:hidden;
  box-sizing:border-box;
}

/* ── Capa / EQ ── */
.mini-capa{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,#0ff,#0af);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 10px rgba(0,255,255,.4);
}
.mini-capa svg{width:18px;height:18px;fill:#05080f}
.mini-eq{
  display:flex;align-items:flex-end;justify-content:center;
  gap:2px;height:18px;
}
.mini-eq span{
  width:3px;border-radius:2px;background:#05080f;
  animation:eqDanca .9s ease-in-out infinite;
}
.mini-eq span:nth-child(1){animation-delay:0s;height:40%}
.mini-eq span:nth-child(2){animation-delay:.2s;height:70%}
.mini-eq span:nth-child(3){animation-delay:.4s;height:100%}
.mini-eq span:nth-child(4){animation-delay:.1s;height:60%}
.mini-eq span:nth-child(5){animation-delay:.3s;height:80%}
@keyframes eqDanca{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.mini-eq.parado span{animation-play-state:paused}

/* ── Meio: nome + barra + tempo — tudo junto e compacto ── */
.mini-meio{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0px;
  overflow:hidden;
}
.mini-nome{
  font-family:'Orbitron','Outfit',monospace;
  font-size:10px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 0 8px rgba(0,255,255,.5);
  margin-bottom:2px;
  line-height:1.2;
}

/* ── Barra de progresso ── */
.mini-linha{
  position:relative;
  height:36px;          /* area de toque invisivel generosa (dedao) */
  display:flex;
  align-items:center;
  touch-action:none;
  margin:0 -10px;       /* estende lateralmente alem da barra visual */
  padding:0 10px;
  cursor:pointer;
}
.mini-linha::before{    /* trilho visual */
  content:'';
  position:absolute;
  left:10px;right:10px;
  height:4px;
  top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.15);
  border-radius:2px;
  pointer-events:none;
}
.mini-preenche{
  position:absolute;
  left:10px;
  height:4px;
  top:50%;transform:translateY(-50%);
  width:0%;
  max-width:calc(100% - 20px);
  background:linear-gradient(90deg,#0ff,#0fa);
  border-radius:2px;
  box-shadow:0 0 5px #0ff;
  pointer-events:none;
}
.mini-bola{
  position:absolute;
  top:50%;left:0%;
  width:13px;height:13px;   /* tamanho fixo, nao cresce */
  border-radius:50%;
  background:#0ff;
  box-shadow:0 0 8px #0ff;
  transform:translate(-50%,-50%);
  pointer-events:none;
  transition:left .08s linear;
}
.mini-linha.arrastando .mini-bola{
  transition:none;
  box-shadow:0 0 16px #0ff, 0 0 4px #fff;
}

/* ── Relógio ── */
.mini-tempo{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:rgba(255,255,255,.5);
  font-family:'Outfit',monospace;
  margin-top:0px;
  line-height:1;
  padding:0 1px;
}

/* ── Botões ── */
.mini-acoes{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.mini-controle{
  width:32px;height:32px;
  border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
  border:1px solid rgba(255,255,255,.1);
}
.mini-controle svg{width:14px;height:14px;fill:currentColor}
.mini-controle:active{transform:scale(.88)}
.mini-controle.principal{
  width:38px;height:38px;
  background:linear-gradient(135deg,rgba(0,255,255,.25),rgba(0,170,255,.25));
  color:#fff;
  border-color:rgba(0,255,255,.4);
  box-shadow:0 0 14px rgba(0,255,255,.3);
}
.mini-controle.principal svg{width:16px;height:16px}

/* ── Empurra o input pra cima para nao ficar atras do player ── */
body.com-player .input-area,
body.com-player #inputArea,
body.com-player .rodape-chat,
body.com-player form:last-of-type{
  padding-bottom:78px !important;
}

/* Like / Dislike */
.mini-like, .mini-dislike{
  width:28px;height:28px;
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.35);
  transition:color .2s, transform .15s;
}
.mini-like svg, .mini-dislike svg{width:14px;height:14px;fill:currentColor}
.mini-like:active{transform:scale(1.3);color:#0ff;}
.mini-dislike:active{transform:scale(1.3);color:#f44;}