/* SafeWave 4.0 Sprint 4/5 — Player + Mobile Experience
   Presentation layer only. Existing player IDs and playback logic are preserved. */

:root{--v4-player-h:92px}

/* Persistent desktop player */
.v4-player{
  min-height:var(--v4-player-h);
  padding:12px clamp(16px,2.5vw,34px);
  grid-template-columns:minmax(220px,.8fr) minmax(360px,1.35fr) minmax(190px,.65fr);
  gap:clamp(18px,3vw,48px);
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(6,15,24,.92);
  backdrop-filter:blur(28px) saturate(140%);
  box-shadow:0 -18px 55px rgba(0,0,0,.25);
}
.v4-playing-track{gap:12px}
.v4-playing-track .player-cover{
  width:62px;height:62px;flex:0 0 62px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}
.v4-player-copy{min-width:0}
.v4-player-copy strong,.v4-player-copy small{
  display:block;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v4-player-copy strong{font-size:15px;color:#f1f6f8}
.v4-player-copy small{margin-top:4px;color:#7e919f}
.v4-playing-track #favoriteCurrent{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.025)
}
.v4-transport{min-width:0}
.v4-transport .transport-buttons{margin-bottom:7px}
.v4-transport .transport-buttons button:not(.main-play){
  width:38px;height:38px;border-radius:50%;
}
.v4-transport .main-play{
  width:50px;height:50px;border:0;background:#f2faf9;color:#05121a;
}
.v4-transport .waveform-timeline{gap:10px}
.v4-transport .waveform-timeline>span{
  min-width:36px;color:#738795;font-size:10px;font-variant-numeric:tabular-nums;
}
.v4-transport .waveform-wrap{
  height:30px;border-radius:9px;background:rgba(255,255,255,.025);cursor:pointer;
}
.v4-player-tools{justify-self:end;gap:8px}
.v4-player-tools>button{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.025)
}
.v4-player-tools #volume{width:90px}
.v4-player #openQueue{position:relative}
.v4-player #queueCount{
  position:absolute;right:-3px;top:-5px;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;background:#39e0d0;color:#04131a;
  font-size:8px
}
.v4-player .collapse-player{
  top:-15px;width:32px;height:20px;border-radius:10px 10px 0 0;
  border:1px solid rgba(255,255,255,.08);border-bottom:0;background:rgba(6,15,24,.95);
}

/* Full-screen / mobile Now Playing */
.v4-now-playing{
  background:#06101a;
  backdrop-filter:blur(35px);
}
.v4-now-playing .fullscreen-bg{opacity:.2;filter:blur(80px) saturate(110%)}
.v4-now-playing-content{
  width:min(1080px,calc(100vw - 48px));
  display:grid;grid-template-columns:minmax(300px,500px) minmax(300px,1fr);
  gap:clamp(45px,7vw,100px);align-items:center;
}
.v4-now-playing .fullscreen-art{
  width:100%;max-width:500px;aspect-ratio:1;border-radius:30px;
  box-shadow:0 35px 100px rgba(0,0,0,.48);
}
.v4-now-playing-copy{min-width:0}
.v4-now-playing-copy h2{
  margin:10px 0 7px;font-size:clamp(48px,6vw,82px);
  line-height:.94;letter-spacing:-.06em
}
.v4-now-playing-copy>p:not(.v4-now-playing-hint){color:#91a4b2;font-size:18px}
.v4-now-playing .full-timeline{margin-top:40px}
.v4-now-playing .full-timeline input{accent-color:#39e0d0}
.v4-now-playing .full-controls{margin-top:26px;gap:18px}
.v4-now-playing .full-controls button{
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:#fff;font-size:24px
}
.v4-now-playing .full-controls #fullPlay{
  width:70px;height:70px;border:0;background:#f1faf8;color:#05121a;font-size:25px
}
.v4-now-playing-hint{margin-top:28px!important;color:#536a79!important;font-size:11px!important}
.v4-now-playing .fullscreen-close{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.1);
  background:rgba(7,17,27,.55);z-index:4
}

/* Mobile navigation polish */
.mobile-bottom-nav{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(6,15,24,.94)!important;
  backdrop-filter:blur(24px) saturate(140%);
}
.mobile-bottom-nav a{min-height:58px}
.mobile-bottom-nav a span{font-size:18px}
.mobile-bottom-nav a small{font-size:9px;letter-spacing:.02em}

/* Make fixed UI safe around modern phone home indicators. */
@supports(padding:max(0px)){
  .v4-player{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .mobile-bottom-nav{padding-bottom:env(safe-area-inset-bottom)}
}

/* Tablet */
@media(max-width:980px){
  :root{--v4-player-h:86px}
  .v4-player{
    grid-template-columns:minmax(190px,.8fr) minmax(300px,1.2fr) auto;
    gap:16px;padding-left:14px;padding-right:14px
  }
  .v4-player-tools #volume,.v4-player-tools #volumeBtn{display:none}
  .v4-playing-track .player-cover{width:56px;height:56px;flex-basis:56px}
  .v4-now-playing-content{grid-template-columns:minmax(260px,420px) minmax(260px,1fr)}
}

/* Phone */
@media(max-width:760px){
  :root{--v4-player-h:72px}
  body{padding-bottom:calc(132px + env(safe-area-inset-bottom,0px))!important}

  .v4-player{
    min-height:72px;height:72px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;padding:8px 12px;
    bottom:calc(58px + env(safe-area-inset-bottom,0px));
    border-radius:0;
  }
  .v4-player .collapse-player{display:none}
  .v4-playing-track{min-width:0;gap:9px}
  .v4-playing-track .player-cover{width:52px;height:52px;flex-basis:52px;border-radius:11px}
  .v4-player-copy strong,.v4-player-copy small{max-width:min(34vw,180px)}
  .v4-player-copy strong{font-size:13px}
  .v4-player-copy small{font-size:10px}
  .v4-playing-track #favoriteCurrent{display:none}

  .v4-transport{width:auto}
  .v4-transport .transport-buttons{margin:0;gap:3px}
  .v4-transport .transport-buttons #shuffleBtn,
  .v4-transport .transport-buttons #prevBtn,
  .v4-transport .transport-buttons #repeatBtn{display:none}
  .v4-transport .transport-buttons #nextBtn{
    display:grid;width:40px;height:40px;font-size:24px
  }
  .v4-transport .main-play{width:46px;height:46px}
  .v4-transport .timeline{display:none}
  .v4-player-tools{display:none}
  .mobile-bottom-nav{bottom:0!important;min-height:58px}
  .mobile-bottom-nav a{padding-top:6px;padding-bottom:5px}

  .v4-now-playing{padding:28px 20px max(28px,env(safe-area-inset-bottom))}
  .v4-now-playing-content{
    width:min(100%,520px);height:100%;display:flex;flex-direction:column;
    justify-content:center;gap:24px
  }
  .v4-now-playing .fullscreen-art{
    width:min(76vw,390px);max-height:42vh;align-self:center;border-radius:24px
  }
  .v4-now-playing-copy{width:100%;text-align:left}
  .v4-now-playing-copy h2{font-size:clamp(38px,11vw,58px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v4-now-playing-copy>p:not(.v4-now-playing-hint){font-size:14px}
  .v4-now-playing .full-timeline{margin-top:25px}
  .v4-now-playing .full-controls{justify-content:center;margin-top:20px}
  .v4-now-playing .full-controls button{width:50px;height:50px}
  .v4-now-playing .full-controls #fullPlay{width:66px;height:66px}
  .v4-now-playing-hint{text-align:center}
  .v4-now-playing .fullscreen-close{
    position:absolute;top:max(14px,env(safe-area-inset-top));right:16px
  }

  /* General v4 mobile spacing consistency */
  .aurora-v2-hero,.v4-discovery-hero{scroll-margin-top:64px}
  .queue-drawer{max-width:100vw}
  .command-box{width:calc(100vw - 24px)}
  button,a,input,select{touch-action:manipulation}
}

/* Small phones */
@media(max-width:430px){
  .v4-player{padding-left:9px;padding-right:9px}
  .v4-playing-track .player-cover{width:48px;height:48px;flex-basis:48px}
  .v4-player-copy strong,.v4-player-copy small{max-width:30vw}
  .v4-transport .transport-buttons #nextBtn{width:36px}
  .v4-transport .main-play{width:43px;height:43px}
  .mobile-bottom-nav a small{font-size:8px}
  .v4-now-playing .fullscreen-art{width:min(82vw,350px)}
}

/* Landscape phones: keep controls reachable without giant artwork. */
@media(max-height:520px) and (orientation:landscape){
  .v4-now-playing{overflow:auto;padding:18px 28px}
  .v4-now-playing-content{
    width:min(920px,100%);display:grid;grid-template-columns:minmax(220px,38vh) 1fr;
    height:auto;min-height:calc(100vh - 36px);gap:35px
  }
  .v4-now-playing .fullscreen-art{width:38vh;max-height:72vh}
  .v4-now-playing-copy h2{font-size:40px}
  .v4-now-playing .full-timeline{margin-top:18px}
  .v4-now-playing-hint{display:none}
}

/* Reduced-motion accessibility */
@media(prefers-reduced-motion:reduce){
  .v4-player *, .v4-now-playing *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}