/* ===== AUDIO (Glass) ===== */
#nsAudioDock{
  position: fixed;
  right: max(16px, 2vw, env(safe-area-inset-right));
  bottom: max(16px, 2vh, env(safe-area-inset-bottom));
  width: var(--ap-w);
  max-width: min(92vw, 420px);

  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-rows: auto auto;
  gap: 10px 12px;
  align-items: center;

  padding: var(--ap-pad);
  color: var(--ap-txt);
  background: var(--ap-bg);
  -webkit-backdrop-filter: blur(var(--ap-blur)) saturate(160%);
  backdrop-filter: blur(var(--ap-blur)) saturate(160%);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  box-shadow: 0 0 14px var(--ap-glow);

  z-index: 2147483600;
  user-select: none;
  opacity: 0;
  transition: opacity 0.6s ease;

  transform: scale(var(--ap-scale));
  transform-origin: bottom right;
}

#apPlay{
  grid-row:1 / span 2;
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ap-border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  cursor:pointer;
}
#apPlay svg{ width:18px;height:18px;fill:#fff;display:block; }

#apTitle{
  font: 500 12px/1.1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans";
  letter-spacing:.06em;color:var(--ap-sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

#apBarWrap{ grid-column:2 / 4; display:grid; gap:8px; }
#apBar{ position:relative; height:4px; border-radius:999px; background: rgba(255,255,255,.06); cursor:pointer; }
#apBarFill{ position:absolute; inset:0 auto 0 0; width:0%; border-radius:999px;
  background: linear-gradient(90deg, rgba(190,245,255,0.85), rgba(255,255,255,0.85));
}
#apKnob{ position:absolute; top:50%; left:0%; transform:translate(-50%,-50%); width:12px;height:12px;border-radius:50%; pointer-events:none;
  background:#fff; box-shadow:0 0 12px rgba(160,235,255,0.95);
}

#apTimes{
  display:inline-flex; align-items:center; gap:10px;
  font: 500 11px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans";
  color: var(--ap-sub);
}

#apVolWrap{ display:inline-flex; align-items:center; gap:10px; }
#apVolBtn{ width:34px;height:34px;border-radius:10px; display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ap-border); background: rgba(255,255,255,.02); cursor:pointer;
}
#apVolBtn svg{ width:16px;height:16px;fill:#fff; }

#apVol{
  -webkit-appearance:none; appearance:none;
  width:110px; height:4px; border-radius:999px;
  background: rgba(255,255,255,.18);
  cursor:pointer;
}
#apVol::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:10px;height:10px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px rgba(160,235,255,0.95);
}
#apVol::-moz-range-thumb{
  width:14px;height:14px;border:none;border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px rgba(160,235,255,0.95);
}

/* ===== SP縦 ===== */
@media (max-width: 640px){
  :root{
    --ap-w: 180px;
    --ap-pad: 6px;
    --ap-scale: 0.8;
  }

  #nsAudioDock{
    grid-template-columns:38px 1fr;
    gap:6px 8px;
    max-width:92vw;
  }

  #apBarWrap{ grid-column: 2 / 3; }
  #apVolWrap{ display:none !important; }

  #apPlay{ width:36px; height:36px; }
  #apPlay svg{ width:14px; height:14px; }
  #apTitle{ font-size:8px; letter-spacing:.05em; }
  #apTimes{ font-size:7px; }
  #apKnob{ width:8px; height:8px; }
}

/* ===== SP横（Landscape）===== */
@media (orientation: landscape) and (max-height: 520px){
  :root{
    --ap-w: 200px;
    --ap-pad: 8px;
    --ap-scale: 0.70;
  }

  #nsAudioDock{
    grid-template-columns:38px 1fr;
    gap:6px 8px;
    max-width: min(70vw, 260px);
  }

  #apBarWrap{ grid-column: 2 / 3; }
  #apVolWrap{ display:none !important; }
}