/**
 * Static Audio Player - Front-end Styles
 */

/* ── Full Player ────────────────────────────────────── */
.sap-player{font-family:inherit;border-radius:12px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;max-width:600px;}
.sap-player--compact{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;}
.sap-player--compact .sap-cover{width:48px;height:48px;border-radius:6px;flex-shrink:0;}
.sap-player--compact .sap-controls{flex:1;}
.sap-player--compact .sap-tracklist{display:none;}

/* Sticky = bottom bar: horizontal, small cover, no tracklist panel */
.sap-player--sticky{position:fixed;bottom:0;left:0;right:0;z-index:9999;max-width:100%;border-radius:0;border:none;border-top:1px solid #e5e7eb;box-shadow:0 -4px 20px rgba(0,0,0,.08);display:flex;align-items:center;gap:12px;padding:8px 16px;}
.sap-player--sticky .sap-cover{width:48px;height:48px;border-radius:6px;flex-shrink:0;aspect-ratio:auto;}
.sap-player--sticky .sap-controls{flex:1;padding:0;}
.sap-player--sticky .sap-tracklist{display:none;}
.sap-player--sticky .sap-waveform{display:none;}

/* Cover */
.sap-cover{position:relative;aspect-ratio:1;background:#f4f4f5;overflow:hidden;}
.sap-cover__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.sap-player:hover .sap-cover__img{transform:scale(1.02);}
.sap-cover__placeholder{display:flex;align-items:center;justify-content:center;height:100%;font-size:48px;color:#d1d5db;}

/* Controls */
.sap-controls{padding:16px 20px;}

.sap-now-playing{margin-bottom:8px;}
.sap-now-playing__title{font-size:1rem;font-weight:700;color:#18181b;line-height:1.3;}
.sap-now-playing__artist{font-size:.8125rem;color:#6b7280;}

/* Waveform */
.sap-waveform{position:relative;height:48px;margin:8px 0;cursor:pointer;border-radius:4px;overflow:hidden;}
.sap-waveform__canvas{width:100%;height:100%;display:block;}
.sap-waveform__progress{position:absolute;inset:0;background:var(--sap-accent,#2563eb);mix-blend-mode:multiply;opacity:.3;transform-origin:left;transform:scaleX(0);}

/* Progress bar */
.sap-progress{display:flex;align-items:center;gap:8px;margin:6px 0;}
.sap-time{font-size:.75rem;color:#9ca3af;font-variant-numeric:tabular-nums;min-width:32px;}
.sap-progress__bar{flex:1;height:4px;background:#e5e7eb;border-radius:2px;cursor:pointer;position:relative;}
.sap-progress__fill{height:100%;background:var(--sap-accent,#2563eb);border-radius:2px;width:0;transition:width .1s linear;}
.sap-progress__handle{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--sap-accent,#2563eb);top:50%;transform:translate(-50%,-50%);left:0;cursor:grab;opacity:0;transition:opacity .15s;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.sap-progress:hover .sap-progress__handle{opacity:1;}

/* Buttons */
.sap-buttons{display:flex;align-items:center;gap:4px;margin-top:4px;}
.sap-btn{background:none;border:none;cursor:pointer;font-size:18px;color:#6b7280;padding:6px;border-radius:6px;transition:color .15s,background .15s;line-height:1;}
.sap-btn:hover{color:#18181b;background:#f4f4f5;}
.sap-btn--play{font-size:28px;color:var(--sap-accent,#2563eb);width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.sap-btn--play:hover{color:var(--sap-accent,#2563eb);background:rgba(37,99,235,.08);}
.sap-btn.sap-active{color:var(--sap-accent,#2563eb);}

/* Volume */
.sap-volume{display:flex;align-items:center;gap:4px;margin-left:auto;}
.sap-volume__slider{width:80px;height:4px;accent-color:var(--sap-accent,#2563eb);cursor:pointer;}

/* Tracklist */
.sap-tracklist{border-top:1px solid #e5e7eb;max-height:300px;overflow-y:auto;}
.sap-tracklist__item{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;transition:background .1s;font-size:.875rem;}
.sap-tracklist__item:hover{background:#f9fafb;}
.sap-tracklist__item--active{background:#eff6ff;}
.sap-tracklist__item--active .sap-tracklist__title{color:var(--sap-accent,#2563eb);font-weight:600;}
.sap-tracklist__item--playing .sap-tracklist__num{color:var(--sap-accent,#2563eb);}
.sap-tracklist__num{width:24px;text-align:center;color:#9ca3af;font-size:.75rem;flex-shrink:0;}
.sap-tracklist__info{flex:1;min-width:0;}
.sap-tracklist__title{color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sap-tracklist__artist{color:#9ca3af;font-size:.75rem;}
.sap-tracklist__duration{color:#9ca3af;font-size:.75rem;flex-shrink:0;}
.sap-tracklist__dl{color:#9ca3af;text-decoration:none;font-size:14px;flex-shrink:0;padding:4px;}
.sap-tracklist__dl:hover{color:var(--sap-accent,#2563eb);}

/* ── Grid ───────────────────────────────────────────── */
.sap-grid{display:grid;grid-template-columns:repeat(var(--sap-cols,3),1fr);gap:16px;}

.sap-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;transition:box-shadow .15s,transform .15s;}
.sap-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-2px);}

.sap-card__cover{position:relative;aspect-ratio:1;background:#f4f4f5;overflow:hidden;}
.sap-card__cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.sap-card:hover .sap-card__cover img{transform:scale(1.05);}
.sap-card__placeholder{display:flex;align-items:center;justify-content:center;height:100%;font-size:36px;color:#d1d5db;}
.sap-card__play-overlay{position:absolute;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;border:none;cursor:pointer;opacity:0;transition:opacity .2s;}
.sap-card:hover .sap-card__play-overlay{opacity:1;}

.sap-card__info{padding:12px 14px 8px;}
.sap-card__title{font-size:.9375rem;font-weight:700;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sap-card__artist{font-size:.8125rem;color:#6b7280;margin-top:2px;}
.sap-card__meta{font-size:.75rem;color:#9ca3af;margin-top:4px;}
.sap-card__meta span{margin-right:4px;}

.sap-card__actions{display:flex;gap:4px;padding:4px 14px 12px;}
.sap-card__btn{color:#9ca3af;text-decoration:none;font-size:16px;padding:4px;border-radius:4px;transition:color .1s;}
.sap-card__btn:hover{color:var(--sap-accent,#2563eb);}

.sap-card--playing{border-color:var(--sap-accent,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.1);}

/* ── Mini Player (for grid mode) ────────────────────── */
.sap-mini{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#18181b;color:#fff;border-radius:12px;padding:8px 12px;display:flex;align-items:center;gap:10px;z-index:9999;box-shadow:0 8px 32px rgba(0,0,0,.2);max-width:420px;width:90%;animation:sapSlideUp .3s ease;}
/* display:flex above would defeat the hidden attribute — keep it winning */
.sap-mini[hidden]{display:none;}
.sap-notice{font-size:.875rem;color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:10px 14px;}
@keyframes sapSlideUp{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}

.sap-mini__cover{width:40px;height:40px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#27272a;}
.sap-mini__cover img{width:100%;height:100%;object-fit:cover;}
.sap-mini__info{flex:1;min-width:0;}
.sap-mini__title{font-size:.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sap-mini__artist{font-size:.6875rem;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sap-mini__progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.1);border-radius:0 0 12px 12px;overflow:hidden;}
.sap-mini__fill{height:100%;background:var(--sap-accent,#2563eb);width:0;transition:width .2s linear;}
.sap-mini__btn{background:none;border:none;color:#fff;cursor:pointer;font-size:16px;padding:4px;opacity:.7;transition:opacity .1s;}
.sap-mini__btn:hover{opacity:1;}
.sap-mini__btn--play{font-size:22px;opacity:1;}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:600px){
  .sap-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .sap-volume__slider{display:none;}
  .sap-mini{max-width:calc(100% - 24px);}
}

@media(max-width:380px){
  .sap-grid{grid-template-columns:1fr;}
}