/* ═══════════════════════════════════════════
   SHARED PLAYER STYLES — Floating Widget + Mini Bar
   Used by index.html and all article pages
   ═══════════════════════════════════════════ */

/* Ensure --accent-glow is available on all pages */
:root {
  --accent-glow: rgba(0, 255, 170, 0.25);
}

/* ── Player Floating Widget ── */
.player-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  width: 420px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--border);
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.5s var(--ease-out-expo), opacity 0.35s ease;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(10,10,10,0.96);
}

.player-widget.open {
  transform: translateY(0);
  opacity: 1;
}

/* ── Header bar ── */
.pw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  cursor: grab;
  user-select: none;
}
.pw-header:active { cursor: grabbing; }
.pw-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex; align-items: center; gap: 0.35rem;
}
.pw-label::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 6px var(--accent-glow);
}
.pw-label.playing::before { animation: pw-dot 1.2s ease-in-out infinite; }
@keyframes pw-dot {
  0%,100%{box-shadow:0 0 4px var(--accent-glow)}
  50%{box-shadow:0 0 14px var(--accent),0 0 20px var(--accent-glow)}
}
.pw-hdr-actions { display:flex; gap:0.35rem; }
.pw-hdr-btn {
  width:22px; height:22px; border:1px solid var(--border); border-radius:50%;
  background:rgba(255,255,255,0.03); color:var(--fg-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all 0.25s var(--ease-out-expo); font-size:0.5rem; font-family:var(--font-mono);
}
.pw-hdr-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.pw-hdr-btn.close-btn:hover { border-color:var(--hot); color:var(--hot); background:var(--hot-dim); }

/* ── Body ── */
.pw-body {
  padding: 0.8rem 0.85rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  max-height: 520px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.pw-body::-webkit-scrollbar { width:3px; }
.pw-body::-webkit-scrollbar-track { background:transparent; }
.pw-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:2px; }

/* ── Top row: art + info ── */
.pw-top-row { display:flex; gap:0.7rem; align-items:center; }
.pw-art {
  width:80px; height:80px; border-radius:12px; overflow:hidden; flex-shrink:0;
  border:1px solid var(--border); position:relative;
}
.pw-art canvas { width:100%; height:100%; display:block; }
.pw-info { flex:1; min-width:0; }
.pw-title {
  font-family:var(--font-display); font-size:1.15rem; font-weight:700;
  line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pw-artist {
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--fg-muted); margin-top:0.15rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Progress ── */
.pw-progress-wrap { display:flex; flex-direction:column; gap:0.25rem; }
.pw-progress {
  width:100%; height:3px; background:rgba(255,255,255,0.07); border-radius:2px;
  cursor:pointer; position:relative; transition:height 0.2s;
}
.pw-progress:hover { height:5px; }
.pw-progress-fill {
  position:absolute; top:0; left:0; height:100%; background:var(--accent);
  border-radius:2px; box-shadow:0 0 5px var(--accent-glow);
}
.pw-progress-fill::after {
  content:''; position:absolute; right:-4px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  opacity:0; transition:opacity 0.2s;
}
.pw-progress:hover .pw-progress-fill::after { opacity:1; }
.pw-times {
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:0.55rem; color:var(--fg-muted);
}

/* ── Controls row ── */
.pw-ctrls { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.pw-ctrl-main { display:flex; align-items:center; gap:0.9rem; justify-self:center; }
.pw-modes { justify-self:start; }
.pw-vol { justify-self:end; }
.pw-ctrl-btn {
  background:none; border:none; color:var(--fg-muted); cursor:pointer;
  transition:color 0.25s; display:flex; align-items:center; justify-content:center;
}
.pw-ctrl-btn:hover { color:var(--fg); }
.pw-ctrl-btn svg { width:16px; height:16px; }
.pw-play {
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--fg);
  background:transparent; color:var(--fg); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.3s var(--ease-out-expo);
}
.pw-play:hover {
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-dim); box-shadow:0 0 20px var(--accent-dim);
}
.pw-play:active { transform:scale(0.92); border-color:var(--hot); color:var(--hot); background:var(--hot-dim); }
.pw-play svg { width:18px; height:18px; }

/* ── Mode buttons ── */
.pw-modes { display:flex; gap:0.3rem; }
.pw-mode-btn {
  width:24px; height:24px; border:1px solid var(--border); border-radius:50%;
  background:rgba(255,255,255,0.02); color:var(--fg-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.25s var(--ease-out-expo); font-size:0.55rem; padding:0;
}
.pw-mode-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.pw-mode-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.pw-mode-btn svg { width:12px; height:12px; }

/* ── Volume ── */
.pw-vol { display:flex; align-items:center; gap:0.4rem; }
.pw-vol-icon {
  color:var(--fg-muted); cursor:pointer; display:flex; align-items:center;
  transition:color 0.25s; flex-shrink:0;
}
.pw-vol-icon:hover { color:var(--accent); }
.pw-vol-icon svg { width:14px; height:14px; }
.pw-vol-slider {
  -webkit-appearance:none; appearance:none; width:60px; height:3px;
  background:rgba(255,255,255,0.07); border-radius:2px; outline:none; cursor:pointer;
}
.pw-vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:10px; height:10px; border-radius:50%;
  background:var(--fg); cursor:pointer; transition:background 0.25s;
}
.pw-vol-slider::-webkit-slider-thumb:hover { background:var(--accent); }
.pw-vol-slider::-moz-range-thumb {
  width:10px; height:10px; border-radius:50%; background:var(--fg); border:none; cursor:pointer;
}

/* ── Playlist ── */
.pw-pl-header {
  font-family:var(--font-mono); font-size:0.55rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--fg-muted);
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border); padding-top:0.5rem; margin-top:0.1rem;
}
.pw-pl-list { display:flex; flex-direction:column; gap:0.2rem; max-height:140px; overflow-y:auto; }
.pw-pl-item {
  display:flex; align-items:center; gap:0.5rem; padding:0.35rem 0.55rem;
  border-radius:8px; cursor:pointer; transition:all 0.25s var(--ease-out-expo);
  border:1px solid transparent;
}
.pw-pl-item:hover { background:rgba(255,255,255,0.04); border-color:var(--border); }
.pw-pl-item.active { background:var(--accent-dim); border-color:rgba(0,255,170,0.2); }
.pw-pl-idx { font-family:var(--font-mono); font-size:0.5rem; color:var(--fg-muted); width:16px; text-align:center; flex-shrink:0; }
.pw-pl-item.active .pw-pl-idx { color:var(--accent); }
.pw-pl-info { flex:1; min-width:0; }
.pw-pl-name {
  font-family:var(--font-ui); font-size:0.68rem; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pw-pl-item.active .pw-pl-name { color:var(--accent); }
.pw-pl-artist {
  font-family:var(--font-mono); font-size:0.52rem; color:var(--fg-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pw-pl-dur { font-family:var(--font-mono); font-size:0.5rem; color:var(--fg-muted); flex-shrink:0; }
.pw-pl-bars { display:none; gap:1.5px; align-items:flex-end; height:10px; flex-shrink:0; }
.pw-pl-item.active .pw-pl-bars { display:flex; }
.pw-pl-item.active .pw-pl-dur { display:none; }
.pw-pl-bars span {
  width:2px; background:var(--accent); border-radius:1px;
  animation:pl-bar-anim 0.8s ease-in-out infinite;
}
.pw-pl-bars span:nth-child(1){height:5px;animation-delay:0s}
.pw-pl-bars span:nth-child(2){height:10px;animation-delay:0.15s}
.pw-pl-bars span:nth-child(3){height:6px;animation-delay:0.3s}
.pw-pl-bars span:nth-child(4){height:8px;animation-delay:0.45s}
@keyframes pl-bar-anim { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }

/* ═══════════════════════════════════════════
   MINI PLAYER BAR — Minimized State
   ═══════════════════════════════════════════ */
.mini-player {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 998;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10,10,10,0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.7rem 0 0.5rem;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  transition: all 0.3s var(--ease-out-expo);
}
.mini-player.show { display: flex; }
.mini-player:hover {
  border-color: rgba(0,255,170,0.3);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 1px var(--accent-dim);
}
.mini-player .mp-art {
  width: 36px; height: 36px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); flex-shrink: 0;
}
.mini-player .mp-art canvas { width:100%; height:100%; display:block; }
.mini-player .mp-info { flex:0 1 auto; min-width:0; max-width:180px; }
.mini-player .mp-title {
  font-family:var(--font-ui); font-size:0.72rem; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2;
  color:var(--fg);
}
.mini-player .mp-artist {
  font-family:var(--font-mono); font-size:0.5rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--fg-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mini-player .mp-play {
  width:32px; height:32px; border-radius:50%; border:1.5px solid var(--fg);
  background:transparent; color:var(--fg); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all 0.25s var(--ease-out-expo);
}
.mini-player .mp-play:hover {
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-dim); box-shadow:0 0 16px var(--accent-dim);
}
.mini-player .mp-play svg { width:14px; height:14px; }

/* ═══════════════════════════════════════════
   FLOATING TRIGGER BUTTON — Article pages only
   Shows when widget & mini bar are both hidden
   ═══════════════════════════════════════════ */
.player-trigger {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 997;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(10,10,10,0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  transition: all 0.3s var(--ease-out-expo);
  animation: trigger-pulse 3s ease-in-out infinite;
}
.player-trigger:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 20px var(--accent-dim);
  transform: scale(1.08);
}
.player-trigger:active { transform: scale(0.95); }
.player-trigger svg { width: 20px; height: 20px; }
@keyframes trigger-pulse {
  0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
  50% { box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 12px var(--accent-glow); }
}

/* Mobile */
@media (max-width: 500px) {
  .player-widget {
    width: calc(100vw - 0.8rem); right:0.4rem; bottom:0.4rem;
    border-radius:14px;
  }
  .pw-body { max-height:400px; }
  .player-widget.open { transform:translateY(0); }
  .mini-player { right:0.4rem; bottom:0.4rem; height:46px; border-radius:12px; }
  .mini-player .mp-art { width:30px; height:30px; }
  .mini-player .mp-info { max-width:130px; }
  .player-trigger { right:0.4rem; bottom:0.4rem; width:42px; height:42px; }
}