/* components.css — Buttons, chips, badges, modals, player bar */

/* Ghost badges */
.gt{display:inline-block;padding:2px 7px;border-radius:999px;font-size:.65rem;font-family:'JetBrains Mono',monospace;margin-left:5px;vertical-align:middle}
.gt-r{background:var(--gold-dim);color:var(--gold)}
.gt-q{background:var(--pink-dim);color:var(--pink)}
.gt-v{background:var(--red-dim);color:var(--red)}
.gt-d{background:var(--purple-dim);color:var(--purple)}

/* Ghost filter chips */
.gc{padding:5px 10px;border-radius:999px;border:1px solid;cursor:pointer;font-size:.72rem;font-family:'JetBrains Mono',monospace;transition:all .2s;background:transparent}
.gc:hover{transform:scale(1.05)}
.gc.a{font-weight:700}
.gc-a{border-color:var(--text-ghost);color:var(--text-dim)}.gc-a.a{background:rgba(255,255,255,.08);color:var(--text)}
.gc-r{border-color:var(--gold);color:var(--gold)}.gc-r.a{background:var(--gold-dim)}
.gc-q{border-color:var(--pink);color:var(--pink)}.gc-q.a{background:var(--pink-dim)}
.gc-v{border-color:var(--red);color:var(--red)}.gc-v.a{background:var(--red-dim)}
.gc-d{border-color:var(--purple);color:var(--purple)}.gc-d.a{background:var(--purple-dim)}

/* Year chips */
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--glass-border);background:transparent;color:var(--text-dim);cursor:pointer;font:inherit;font-size:.78rem;transition:all .2s;white-space:nowrap}
.chip:hover{background:rgba(255,255,255,.06);color:var(--text)}
.chip.active{background:linear-gradient(135deg,rgba(57,255,20,.12),rgba(0,245,255,.08));border-color:rgba(57,255,20,.25);color:var(--text);box-shadow:0 0 18px var(--green-glow)}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.gf{display:flex;gap:5px;flex-wrap:wrap}

/* Spotify connect button */
.spot-btn{padding:10px 20px;border-radius:999px;border:none;background:linear-gradient(135deg,#1DB954,#1ed760);color:#000;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s;font-family:inherit;display:flex;align-items:center;gap:7px}
.spot-btn:hover{transform:scale(1.05);box-shadow:0 0 20px rgba(29,185,84,.3)}
.spot-connected{background:linear-gradient(135deg,rgba(29,185,84,.2),rgba(29,185,84,.1));border:1px solid rgba(29,185,84,.3);color:var(--spotify)}
.spot-btn svg{width:18px;height:18px;flex-shrink:0}

/* Presentation mode button */
.pres-btn{padding:8px 16px;border-radius:14px;border:1px solid var(--glass-border);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;font:inherit;font-size:.78rem;transition:all .2s}
.pres-btn:hover{background:rgba(255,255,255,.08)}
.pres-btn.active{background:linear-gradient(135deg,rgba(57,255,20,.15),rgba(0,245,255,.1));border-color:var(--green);color:var(--green);animation:pulseGreen 2s ease infinite}

/* Motion toggle */
.motion-btn{padding:8px 14px;border-radius:14px;border:1px solid var(--glass-border);background:rgba(255,255,255,.04);color:var(--text-dim);cursor:pointer;font:inherit;font-size:.76rem;transition:all .2s}
.motion-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);backdrop-filter:blur(0px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;transition:all .4s}
.modal-overlay.open{display:flex;animation:modalBgIn .5s ease forwards}
.modal{
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid var(--glass-border);border-radius:24px;
  max-width:520px;width:100%;max-height:90vh;overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:modalSupernova .6s cubic-bezier(.16,1,.3,1);
}
.modal-head{padding:24px 24px 0;display:flex;justify-content:space-between;align-items:start}
.modal-close{background:rgba(255,255,255,.1);border:none;color:var(--text);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all .2s}
.modal-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.modal-body{padding:20px 24px 24px}
.modal-song{font-size:1.3rem;font-weight:700;margin-bottom:4px}
.modal-artist{color:var(--cyan);font-size:1rem;margin-bottom:4px}
.modal-album{color:var(--text-dim);font-size:.88rem;margin-bottom:16px}
.modal-embed{border-radius:12px;overflow:hidden;margin-bottom:16px}
.modal-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.modal-meta-item{background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;padding:10px 14px}
.modal-meta-item .mk{font-size:.65rem;color:var(--text-ghost);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.modal-meta-item .mv{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700}
.modal-ghost{padding:4px 10px;border-radius:999px;font-size:.68rem;font-family:'JetBrains Mono',monospace;font-weight:700;display:inline-block;margin-bottom:14px;border:1px solid}

/* Play button inside modal */
.modal-play-btn{
  width:100%;padding:12px;border-radius:14px;border:none;
  background:linear-gradient(135deg,var(--spotify),#1ed760);
  color:#000;font-weight:700;font-size:.9rem;cursor:pointer;
  transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:12px;
}
.modal-play-btn:hover{transform:scale(1.02);box-shadow:0 0 20px rgba(29,185,84,.3)}
.modal-play-btn:disabled{opacity:.4;cursor:default;transform:none}

/* Presentation narration */
.pres-nar{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  max-width:680px;width:calc(100% - 32px);
  background:rgba(0,0,0,.9);border:1px solid var(--green);border-radius:16px;
  padding:16px 20px;font-family:'JetBrains Mono',monospace;font-size:.88rem;
  color:var(--green);line-height:1.6;z-index:150;
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.pres-nar.show{opacity:1}
.pres-prog{position:fixed;top:4px;left:0;height:3px;background:var(--green);z-index:300;transition:width .4s ease}

/* Tooltip shared */
.tip{
  position:fixed;z-index:500;pointer-events:none;
  background:rgba(8,8,16,.95);border:1px solid var(--glass-border);border-radius:10px;
  padding:8px 12px;font-size:.78rem;font-family:'JetBrains Mono',monospace;
  color:var(--text);backdrop-filter:blur(12px);
  opacity:0;transition:opacity .15s;white-space:nowrap;
}
.tip.show{opacity:1}

/* Mobile hamburger */
.hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;padding:8px;cursor:pointer;
}
.hamburger span{display:block;width:22px;height:2px;background:var(--text-dim);border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
@media(max-width:900px){.hamburger{display:flex}}

/* Drawer */
.drawer{
  position:fixed;top:0;right:-300px;width:280px;height:100vh;
  background:rgba(8,8,16,.97);backdrop-filter:blur(24px);
  border-left:1px solid var(--glass-border);z-index:400;
  transition:right .35s cubic-bezier(.16,1,.3,1);
  padding:24px 20px;overflow-y:auto;
}
.drawer.open{right:0}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:390;display:none}
.drawer-overlay.show{display:block}
.drawer-toc{margin-top:48px;display:flex;flex-direction:column;gap:4px}
.drawer-toc a{padding:10px 14px;border-radius:12px;color:var(--text-dim);font-size:.88rem;transition:all .2s;display:flex;align-items:center;gap:10px}
.drawer-toc a:hover,.drawer-toc a.act{background:var(--glass2);color:var(--text)}
.drawer-toc a.act{border-left:3px solid var(--green);padding-left:11px}
.drawer-close{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.1);border:none;color:var(--text);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}

/* ── Spotify sticky player bar ── */
#player-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(8,8,16,.97);backdrop-filter:blur(24px);
  border-top:1px solid var(--glass-border);
  z-index:300;
  display:none;
  flex-direction:column;
  animation:playerSlideUp .4s ease;
}
#player-bar.active{display:flex}
.player-progress-wrap{height:3px;background:rgba(255,255,255,.06);cursor:pointer;position:relative}
.player-progress{height:100%;background:linear-gradient(90deg,var(--green),var(--cyan));width:0%;transition:width .5s linear;pointer-events:none}
.player-inner{display:flex;align-items:center;gap:16px;padding:10px 20px}
.player-art{width:46px;height:46px;border-radius:8px;background:var(--surface2);overflow:hidden;flex-shrink:0}
.player-art img{width:100%;height:100%;object-fit:cover}
.player-art.spinning img{animation:albumSpin 8s linear infinite}
.player-info{flex:1;min-width:0}
.player-track{font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-artist{font-size:.74rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
.p-btn{
  background:none;border:none;color:var(--text-dim);
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;transition:all .2s;
}
.p-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.p-btn.play{background:var(--green);color:#000;font-size:1.2rem}
.p-btn.play:hover{background:#5fff30;box-shadow:0 0 20px rgba(57,255,20,.4)}
.player-vol{display:flex;align-items:center;gap:8px;flex-shrink:0}
.player-vol input[type=range]{
  width:80px;accent-color:var(--green);cursor:pointer;
}
#waveformCanvas{width:120px;height:38px;flex-shrink:0}
@media(max-width:600px){
  .player-vol,#waveformCanvas{display:none}
  .player-inner{gap:10px;padding:10px 14px}
}