/* Keep volume in the existing time row, with no extra card or badge. */
.audio-player.has-volume-controls .audio-times { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 9px; min-height: 44px; }
.audio-player.has-volume-controls .audio-sample-label { justify-self: center; }
.audio-volume-controls { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.audio-player .audio-volume-controls button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--audio-muted); cursor: pointer; }
.audio-player .audio-volume-controls button svg { width: 16px; height: 16px; pointer-events: none; }
.audio-player .audio-volume-controls button:hover { background: #f78a4610; color: var(--audio-accent); }
.audio-player .audio-volume-controls button:focus-visible, .audio-player .audio-volume-controls input:focus-visible { outline: 2px solid var(--audio-accent); outline-offset: 2px; }
:is(#app-screen, #demo-dialog) .audio-player .audio-volume-controls input[type=range] { display: block; flex: 0 0 64px; width: 64px; height: 44px; min-height: 44px; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; accent-color: var(--audio-accent); -webkit-appearance: none; appearance: none; cursor: pointer; }
.audio-volume-controls input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: var(--audio-wave); }
.audio-volume-controls input::-moz-range-track { height: 2px; border-radius: 2px; background: var(--audio-wave); }
.audio-volume-controls input::-webkit-slider-thumb { height: 9px; width: 9px; margin-top: -3.5px; border: 0; border-radius: 50%; background: var(--audio-accent); -webkit-appearance: none; }
.audio-volume-controls input::-moz-range-thumb { height: 9px; width: 9px; border: 0; border-radius: 50%; background: var(--audio-accent); }
@container sample-player (max-width: 360px) {
  .audio-player.has-volume-controls .audio-sample-label { display: none; }
  .audio-player.has-volume-controls .audio-times { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .audio-volume-controls { justify-self: end; }
  :is(#app-screen, #demo-dialog) .audio-player .audio-volume-controls input[type=range] { width: 54px; flex-basis: 54px; }
}