.AudioDock {
    --AudioProgress: 0%;
    backdrop-filter: blur(18px);
    background: rgba(8, 13, 20, .76);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    bottom: max(14px, env(safe-area-inset-bottom));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
    color: #f5f7fb;
    left: 50%;
    overflow: hidden;
    position: fixed;
    transform: translateX(-50%);
    width: min(350px, calc(100vw - 28px));
    z-index: 5;
}

.AudioProgressWrap {
    align-items: center;
    display: flex;
    height: 18px;
    padding: 8px 14px 6px;
}

.AudioProgress,
.AudioVolume {
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin: 0;
}

.AudioProgress {
    height: 4px;
    width: 100%;
}

.AudioProgress::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, rgba(155, 128, 255, .85) var(--AudioProgress), rgba(255, 255, 255, .16) var(--AudioProgress));
    border-radius: 999px;
    height: 4px;
}

.AudioProgress::-moz-range-track { background: rgba(255,255,255,.16); border-radius: 999px; height: 4px; }
.AudioProgress::-moz-range-progress { background: rgba(155,128,255,.85); border-radius: 999px; height: 4px; }
.AudioProgress::-webkit-slider-thumb { appearance: none; background: #eeeaff; border: 0; border-radius: 50%; height: 10px; margin-top: -3px; width: 10px; }
.AudioProgress::-moz-range-thumb { background: #eeeaff; border: 0; border-radius: 50%; height: 10px; width: 10px; }

.AudioDockInner { padding: 3px 14px 12px; }
.AudioMeta { min-width: 0; }
.AudioEyebrow { color: rgba(255,255,255,.52); font-size: 9px; font-weight: 700; letter-spacing: .15em; line-height: 1; text-transform: uppercase; }
.AudioTitle { font-size: 13px; font-weight: 650; line-height: 1.4; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.AudioControlRow { align-items: center; display: flex; gap: 7px; margin-top: 8px; }
.AudioButton { align-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; color: inherit; cursor: pointer; display: inline-flex; flex: 0 0 36px; height: 36px; justify-content: center; padding: 0; width: 36px; }
.AudioButton:hover { background: rgba(255,255,255,.12); }
.AudioButton svg { fill: currentColor; height: 15px; width: 15px; }
.AudioButton:focus-visible, .AudioProgress:focus-visible, .AudioVolume:focus-visible { outline: 2px solid #b5a3ff; outline-offset: 2px; }
.AudioButton:disabled, .AudioProgress:disabled, .AudioVolume:disabled { cursor: not-allowed; opacity: .42; }
.AudioVolume { height: 28px; min-width: 52px; width: 74px; }
.AudioVolume::-webkit-slider-runnable-track { background: rgba(255,255,255,.22); border-radius: 99px; height: 3px; }
.AudioVolume::-moz-range-track { background: rgba(255,255,255,.22); border-radius: 99px; height: 3px; }
.AudioVolume::-webkit-slider-thumb { appearance: none; background: rgba(255,255,255,.85); border-radius: 50%; height: 9px; margin-top: -3px; width: 9px; }
.AudioVolume::-moz-range-thumb { background: rgba(255,255,255,.85); border: 0; border-radius: 50%; height: 9px; width: 9px; }
.AudioTime { color: rgba(255,255,255,.5); font-size: 10px; font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.AudioDock[data-state="error"] { opacity: .72; }

@media (max-width: 390px) {
    .AudioDock { width: calc(100vw - 20px); }
    .AudioVolume { width: 60px; }
}

@media (max-height: 700px) {
    .AudioDock { bottom: auto; left: auto; margin: 18px auto max(14px, env(safe-area-inset-bottom)); position: relative; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .AudioDock, .AudioButton { transition: none; }
}