/* Stable minimum width so the transport cluster doesn't reflow */
.transport-zone {
    min-width: 180px;
}

/* Narrow (< 600px): lay the transport root horizontally (controls beside
   timestamp) so it fits on one line next to VolumeControls. Scoped to the
   root .transport-zone stack so the nested controls stack is untouched. */
@media (max-width: 599.98px) {
    .transport-zone {
        flex-direction: row !important;
        align-items: center;
    }
}