/* ============================================================
   PLAYER.CSS
   Unified persistent Audio Player (music + ambient combined into
   one widget). Never re-rendered on route change.
   ============================================================ */

#audio-player-root{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:60;
}

.audio-player{ position:relative; }

/* ---------- mini bar (always visible) ---------- */
.audio-mini-bar{
  display:flex;align-items:center;gap:12px;
  background:var(--white);
  border-radius:var(--radius-pill);
  padding:8px 10px 8px 8px;
  box-shadow:var(--shadow-sm);
  max-width:min(90vw,320px);
}
.audio-play-btn{
  width:40px;height:40px;flex:0 0 auto;
  border-radius:50%;border:none;cursor:pointer;
  background:var(--ink);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  transition:transform .2s var(--ease-bounce), background .2s, opacity .2s;
}
.audio-play-btn:hover{transform:scale(1.08);background:var(--mint-deep);}
.audio-play-btn:disabled{opacity:0.4;cursor:default;transform:none;background:var(--ink);}
.audio-info{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1;}
.audio-info strong{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.audio-info span{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.audio-expand-btn{
  width:32px;height:32px;flex:0 0 auto;
  border-radius:50%;border:none;cursor:pointer;
  background:var(--bg-soft);color:var(--ink);
  font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ease-bounce), background .2s;
}
.audio-expand-btn:hover{transform:scale(1.08) rotate(20deg);}

@media(max-width:640px){
  #audio-player-root{left:12px;bottom:12px;}
  .audio-info{display:none;}
}

/* ---------- expandable panel (music + ambient together) ---------- */
.audio-panel{
  position:absolute;
  left:0;bottom:56px;
  width:240px;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow);
  padding:16px;
  display:none;
  flex-direction:column;
  gap:16px;
  max-height:min(70vh,420px);
  overflow-y:auto;
}
.audio-panel.open{display:flex;}

.audio-panel-section + .audio-panel-section{
  padding-top:14px;
  border-top:1px solid rgba(51,54,59,0.08);
}
.audio-panel-heading{
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--ink-soft);margin-bottom:10px;
}

.audio-track-select{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.audio-track-btn{
  text-align:left;
  background:var(--bg-soft);border:1.5px solid transparent;border-radius:10px;
  padding:7px 10px;font-size:12.5px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:.2s var(--ease-bounce);
}
.audio-track-btn:hover{border-color:rgba(51,54,59,0.15);}
.audio-track-btn.active{background:var(--mint);border-color:var(--mint-deep);}

.audio-credit{
  margin:8px 0 0;font-size:11px;color:var(--ink-soft);line-height:1.4;
}
.audio-credit a{color:var(--mint-deep);font-weight:600;text-decoration:underline;}
.audio-credit a:hover{color:var(--ink);}

.audio-row{display:flex;align-items:center;gap:10px;}
.audio-row label{font-size:12.5px;font-weight:600;flex:0 0 50px;color:var(--ink-soft);}
.audio-row input[type="range"]{flex:1;accent-color:var(--mint-deep);cursor:pointer;}

.ambient-row{ padding:10px 0; }
.ambient-row + .ambient-row{ border-top:1px solid rgba(51,54,59,0.06); }

.ambient-row-top{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.ambient-icon{ font-size:15px; flex:0 0 auto; }
.ambient-label{ font-size:13px; font-weight:700; flex:1; }
.ambient-status{
  font-size:11px; font-weight:600; color:var(--ink-soft);
  padding:2px 8px; border-radius:999px; background:var(--bg-soft);
}
.ambient-row.is-playing .ambient-status{ background:var(--mint); color:#1F4A3A; }

.ambient-row-controls{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.ambient-btn{
  border:1.5px solid rgba(51,54,59,0.12);
  background:var(--bg-soft);
  border-radius:999px;
  padding:6px 12px;
  font-size:12px; font-weight:700;
  cursor:pointer;
  transition:.2s var(--ease-bounce);
  flex:0 0 auto;
}
.ambient-btn:hover:not(:disabled){ transform:translateY(-1px); }
.ambient-btn:disabled{ opacity:0.4; cursor:default; transform:none; }
.ambient-play-btn:not(:disabled):hover{ border-color:var(--mint-deep); }
.ambient-row.is-playing .ambient-play-btn{ background:var(--mint); border-color:var(--mint-deep); color:#1F4A3A; }
.ambient-stop-btn:not(:disabled):hover{ border-color:var(--coral-deep); }

.ambient-volume{ flex:1; min-width:70px; width:100%; accent-color:var(--sky-deep); cursor:pointer; }