/* ============================================================
   AuraBeats – Music Player  |  style.css
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  --clr-bg:            #060606;
  --clr-card:          rgba(255,255,255,0.04);
  --clr-border:        rgba(220,38,38,0.18);
  --clr-accent:        #ef4444;
  --clr-cyan:          #f87171;
  --clr-pink:          #dc2626;
  --clr-text:          #fef2f2;
  --clr-sub:           #a0807f;
  --grad-progress:     linear-gradient(90deg,#dc2626,#f87171);
  --grad-play:         linear-gradient(135deg,#b91c1c 0%,#ef4444 100%);
  --radius-card:       24px;
  --radius-pill:       999px;
  --shadow-card:       0 24px 60px rgba(0,0,0,0.75);
  --shadow-glow:       0 0 48px rgba(220,38,38,0.35);
  --tr-fast:           0.2s ease;
  --tr-med:            0.35s ease;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Outfit',sans-serif;
  background:var(--clr-bg);
  color:var(--clr-text);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  position:relative;
}

/* ---------- Background Blobs ---------- */
.bg-blob {
  position:fixed; border-radius:50%;
  filter:blur(90px); opacity:0.35;
  pointer-events:none; z-index:0;
  animation:blobDrift 18s ease-in-out infinite alternate;
}
.blob-1 { width:500px;height:500px; background:radial-gradient(circle,#991b1b,transparent 70%); top:-150px;left:-150px; }
.blob-2 { width:420px;height:420px; background:radial-gradient(circle,#7f1d1d,transparent 70%); bottom:-120px;right:-120px; animation-delay:-6s; }
.blob-3 { width:300px;height:300px; background:radial-gradient(circle,#b91c1c,transparent 70%); top:50%;left:50%; animation-delay:-12s; animation-name:blobDrift3; }

@keyframes blobDrift {
  0%   { transform:translate(0,0) scale(1); }
  50%  { transform:translate(40px,-40px) scale(1.1); }
  100% { transform:translate(-30px,30px) scale(0.95); }
}
@keyframes blobDrift3 {
  0%   { transform:translate(-50%,-50%) scale(1); }
  50%  { transform:translate(-45%,-55%) scale(1.15); }
  100% { transform:translate(-55%,-45%) scale(0.9); }
}

/* ---------- Glass Utility ---------- */
.glass {
  background:var(--clr-card);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.app-wrapper {
  position:relative; z-index:1;
  display:flex; gap:20px;
  width:100%; max-width:900px;
  padding:20px;
  align-items:stretch;
}

/* ============================================================
   PLAYER PANEL
   ============================================================ */
.player-panel {
  flex:0 0 360px;
  padding:36px 28px 28px;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  transition:box-shadow var(--tr-med);
}
.player-panel:hover { box-shadow:var(--shadow-glow),var(--shadow-card); }

/* Now Playing Badge */
.now-playing-badge {
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:2px;
  color:var(--clr-accent); text-transform:uppercase;
}
.dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--clr-accent);
  box-shadow:0 0 8px rgba(239,68,68,0.8);
  animation:dotPulse 1.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.5);opacity:0.5;}
}

/* Album Art */
.album-art-wrapper { position:relative; width:220px; height:220px; }
.album-art-ring {
  position:absolute; inset:-10px; border-radius:50%;
  background:conic-gradient(from 0deg,#7f1d1d,#ef4444,#f87171,#b91c1c,#7f1d1d);
  animation:ringRotate 6s linear infinite;
  opacity:0; transition:opacity var(--tr-med);
}
body.is-playing .album-art-ring { opacity:0.8; }
@keyframes ringRotate { to{transform:rotate(360deg);} }

.album-art-container {
  position:absolute; inset:0; border-radius:50%;
  overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,0.6);
  background:#1a1a2e;
}
.album-art-container img {
  width:100%; height:100%;
  object-fit:cover; border-radius:50%;
  transition:filter 0.4s ease;
}
body.is-playing #albumArt { animation:discSpin 12s linear infinite; filter:saturate(1.1) brightness(1.05); }
@keyframes discSpin { to{transform:rotate(360deg);} }

#visualizerCanvas { position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode:screen; }
.disc-shadow {
  position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
  width:180px; height:20px;
  background:rgba(0,0,0,0.5); border-radius:50%; filter:blur(10px);
}

/* Song Info */
.song-info { text-align:center; width:100%; }
.song-title {
  font-size:1.35rem; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:280px; margin-bottom:4px; letter-spacing:-0.3px;
}
.song-artist { font-size:0.9rem; color:var(--clr-sub); }

/* Progress */
.progress-section { width:100%; }
.progress-bar-wrapper { cursor:pointer; padding:8px 0; position:relative; }
.progress-bar-bg {
  width:100%; height:5px;
  background:rgba(255,255,255,0.12);
  border-radius:var(--radius-pill); position:relative; overflow:visible;
}
.progress-bar-fill {
  height:100%; border-radius:var(--radius-pill);
  background:var(--grad-progress); width:0%;
  transition:width 0.1s linear;
  box-shadow:0 0 8px rgba(239,68,68,0.6);
}
.progress-thumb {
  position:absolute; top:50%; left:0%;
  transform:translate(-50%,-50%) scale(0);
  width:14px; height:14px; border-radius:50%;
  background:#ef4444; box-shadow:0 0 12px rgba(239,68,68,0.9);
  transition:transform var(--tr-fast),left 0.1s linear;
  pointer-events:none;
}
.progress-bar-wrapper:hover .progress-thumb { transform:translate(-50%,-50%) scale(1); }
.time-row { display:flex; justify-content:space-between; font-size:0.78rem; color:var(--clr-sub); margin-top:4px; }

/* Control Buttons */
.controls-row { display:flex; align-items:center; gap:12px; }
.ctrl-btn {
  background:none; border:none; cursor:pointer;
  color:var(--clr-sub); font-size:1rem;
  border-radius:50%; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  transition:color var(--tr-fast),background var(--tr-fast),transform var(--tr-fast);
}
.ctrl-btn:hover { color:var(--clr-text); background:rgba(255,255,255,0.08); transform:scale(1.1); }
.ctrl-btn:active { transform:scale(0.92); }
.ctrl-btn.active { color:var(--clr-accent); }
.prev-next { font-size:1.25rem; color:var(--clr-text); }
.play-btn {
  width:62px; height:62px; font-size:1.3rem;
  background:var(--grad-play); color:#fff;
  box-shadow:0 4px 24px rgba(185,28,28,0.6);
  transition:box-shadow var(--tr-fast),transform var(--tr-fast);
}
.play-btn:hover { color:#fff; box-shadow:0 6px 36px rgba(239,68,68,0.85); transform:scale(1.08); }
.play-btn:active { transform:scale(0.93); }

/* Volume */
.volume-row { display:flex; align-items:center; gap:10px; width:100%; }
.volume-icon { color:var(--clr-sub); font-size:1rem; width:36px; height:36px; }
.volume-slider-wrapper { flex:1; }

input[type="range"] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px;
  background:rgba(255,255,255,0.12);
  border-radius:var(--radius-pill); outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:var(--clr-accent); cursor:pointer;
  box-shadow:0 0 8px rgba(239,68,68,0.75);
  transition:transform var(--tr-fast);
}
input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.3); }
input[type="range"]::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:var(--clr-accent); cursor:pointer; border:none;
}
.volume-percent { font-size:0.75rem; color:var(--clr-sub); min-width:34px; text-align:right; }

/* ============================================================
   PLAYLIST PANEL
   ============================================================ */
.playlist-panel {
  flex:1; display:flex; flex-direction:column; gap:16px;
  padding:28px 24px;
  height: 630px;                /* maintain consistent shape */
  overflow: hidden;
}
.playlist-header { display:flex; align-items:center; justify-content:space-between; }
.playlist-header h2 { font-size:1.05rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.playlist-header h2 i { color:var(--clr-accent); text-shadow:0 0 12px rgba(239,68,68,0.6); }
.track-count {
  font-size:0.75rem; color:var(--clr-sub);
  background:rgba(255,255,255,0.07);
  padding:3px 10px; border-radius:var(--radius-pill);
}

/* Search */
.playlist-search-wrapper {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-pill); padding:8px 16px;
}
.playlist-search-wrapper i { color:var(--clr-sub); font-size:0.85rem; }
.playlist-search-wrapper input {
  background:none; border:none; outline:none;
  color:var(--clr-text); font-family:'Outfit',sans-serif; font-size:0.9rem; width:100%;
}
.playlist-search-wrapper input::placeholder { color:var(--clr-sub); }

/* List */
.playlist-list {
  list-style:none; overflow-y:auto; flex:1;
  min-height:0;
  display:flex; flex-direction:column; gap:4px; padding-right:4px;
}
.playlist-list::-webkit-scrollbar { width:5px; }
.playlist-list::-webkit-scrollbar-track { background:rgba(255,255,255,0.02); border-radius:var(--radius-pill); }
.playlist-list::-webkit-scrollbar-thumb { background:rgba(239,68,68,0.4); border-radius:var(--radius-pill); }
.playlist-list::-webkit-scrollbar-thumb:hover { background:rgba(239,68,68,0.7); }

/* Playlist Item */
.playlist-item {
  display:flex; align-items:center; gap:14px;
  padding:10px 14px; border-radius:14px;
  cursor:pointer; position:relative; overflow:hidden;
  transition:background var(--tr-fast),transform var(--tr-fast);
  animation:fadeInUp 0.3s ease both;
}
.playlist-item::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(220,38,38,0.14),transparent);
  opacity:0; transition:opacity var(--tr-fast);
}
.playlist-item:hover { background:rgba(239,68,68,0.07); transform:translateX(4px); }
.playlist-item:hover::before { opacity:1; }
.playlist-item.active { background:rgba(185,28,28,0.18); border:1px solid rgba(239,68,68,0.35); }
.playlist-item.active::before { opacity:1; }

.item-thumb { width:46px; height:46px; border-radius:10px; object-fit:cover; flex-shrink:0; background:#1a1a2e; box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.item-info { flex:1; min-width:0; }
.item-title { font-size:0.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-artist { font-size:0.78rem; color:var(--clr-sub); margin-top:2px; }
.item-duration { font-size:0.78rem; color:var(--clr-sub); flex-shrink:0; }

/* Playing indicator bars */
.item-playing-indicator { display:flex; align-items:flex-end; gap:2px; height:18px; opacity:0; flex-shrink:0; transition:opacity var(--tr-fast); }
.playlist-item.active .item-playing-indicator { opacity:1; }
.indicator-bar { width:3px; border-radius:2px; background:var(--clr-accent); box-shadow:0 0 6px rgba(239,68,68,0.7); }
.indicator-bar:nth-child(1){ height:60%; animation:barAnim 0.8s ease-in-out infinite; }
.indicator-bar:nth-child(2){ height:100%; animation:barAnim 0.8s ease-in-out infinite 0.15s; }
.indicator-bar:nth-child(3){ height:40%; animation:barAnim 0.8s ease-in-out infinite 0.3s; }
@keyframes barAnim { 0%,100%{transform:scaleY(1);} 50%{transform:scaleY(0.35);} }
body:not(.is-playing) .indicator-bar { animation-play-state:paused; }

/* Remove button on local songs */
.remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.25);
  font-size: 0.85rem;
  width: 32px; height: 32px; /* slightly larger hit area */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 5; /* ensure it's above other item content */
  pointer-events: auto;
  opacity: 0.3; /* visible but subtle by default */
  transition: opacity var(--tr-fast), color var(--tr-fast), background var(--tr-fast);
}
.playlist-item:hover .remove-btn { opacity: 1; }
.remove-btn:hover {
  color: var(--clr-accent);
  background: rgba(239,68,68,0.15);
}

.no-results { text-align:center; color:var(--clr-sub); font-size:0.9rem; padding:24px 0; }

/* ---------- Drop Zone ---------- */
.drop-zone {
  border: 2px dashed rgba(239,68,68,0.35);
  border-radius: 14px;
  padding: 14px 12px;
  cursor: pointer;
  transition: border-color var(--tr-fast), background var(--tr-fast);
  text-align: center;
  flex-shrink: 0;
}
.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--clr-accent);
  background: rgba(239,68,68,0.07);
}
.drop-zone-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.drop-icon {
  font-size: 1.3rem;
  color: var(--clr-accent);
  opacity: 0.85;
}
.drop-text {
  font-size: 0.82rem;
  color: var(--clr-sub);
  line-height: 1.5;
}
.drop-sub { font-size: 0.78rem; }
.browse-label {
  color: var(--clr-accent);
  cursor: pointer;
  pointer-events: all;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--tr-fast);
}
.browse-label:hover { text-decoration-color: var(--clr-accent); }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:780px) {
  .app-wrapper { flex-direction:column; align-items:center; padding:16px; gap:16px; }
  .player-panel { flex:none; width:100%; max-width:400px; padding:28px 20px 22px; }
  .playlist-panel { width:100%; max-width:500px; max-height:400px; }
}
@media (max-width:420px) {
  .album-art-wrapper { width:180px; height:180px; }
  .controls-row { gap:8px; }
  .play-btn { width:54px; height:54px; font-size:1.1rem; }
}

@keyframes fadeInUp {
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}