/* A retractable audio shelf. The handle remains reachable at the screen edge. */
.audio-dock {
    position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 950; width: min(372px, calc(100vw - 36px)); display: grid;
    grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center;
    transform: translateX(calc(100% - 12px)); transition: transform .45s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.audio-dock.is-open { transform: translateX(0); }
.audio-handle, .audio-panel {
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(28,28,30,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.5);
    backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
}
.audio-handle { border-radius: 16px; width: 30px; height: 48px; display: grid; place-items: center; padding: 0; cursor: pointer; pointer-events: auto; }
.audio-handle-dots { display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.audio-handle-dots i { width: 3px; height: 3px; border-radius: 50%; background: #e6ebf2; }
.audio-handle:hover { background-color: rgba(58,58,60,.85); }
.audio-handle:focus-visible { outline-offset: -4px; }
.audio-panel {
    padding: 17px 23px 16px; border-radius: 28px; color: white;
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .28s ease, visibility 0s .6s;
}
.audio-dock.is-open .audio-panel { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.audio-panel-top { display: flex; align-items: center; justify-content: space-between; margin: -5px -9px 8px 0; color: #a1a1a6; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; }
.audio-icon-button { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 0; color: white; background: transparent; cursor: pointer; position: relative; }
.audio-icon-button:hover { background: rgba(255,255,255,.1); }
.audio-icon-button .icon { width: 17px; height: 17px; opacity: .9; }
.audio-track { display: flex; align-items: center; gap: 15px; }
.audio-cover {
    width: 57px; height: 57px; border-radius: 15px; flex-shrink: 0; display: grid; place-items: center;
    background: linear-gradient(145deg, #2997ff, #5e5ce6 55%, #bf5af2); border: 0;
    box-shadow: inset 0 1px 0 #ffffff13;
}
.audio-title { font-size: 1.125rem; letter-spacing: -.03em; font-weight: 500; line-height: 1.4; color: #fff; }
.audio-artist { font-size: .8125rem; color: #a1a1a6; margin-top: 2px; }
.audio-equalizer { display: flex; align-items: center; gap: 3px; height: 22px; pointer-events: none; }
.audio-equalizer i { width: 3px; height: 8px; border-radius: 3px; background: #edf3ff; transform-origin: center; }
.audio-equalizer i:nth-child(2) { height: 17px; }
.audio-equalizer i:nth-child(3) { height: 22px; }
.audio-equalizer i:nth-child(4) { height: 12px; }
.is-playing .audio-equalizer i { animation: audio-wave .85s ease-in-out infinite alternate; }
.is-playing .audio-equalizer i:nth-child(2) { animation-delay: -.4s; }
.is-playing .audio-equalizer i:nth-child(3) { animation-delay: -.65s; }
.is-playing .audio-equalizer i:nth-child(4) { animation-delay: -.2s; }
@keyframes audio-wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.audio-timeline { margin-top: 19px; }
.audio-range { --fill: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; touch-action: none; }
.audio-range::-webkit-slider-runnable-track { height: 4px; border-radius: 5px; background: linear-gradient(to right, #f2f5f9 var(--fill), #ffffff35 var(--fill)); }
.audio-range::-moz-range-track { height: 4px; border-radius: 5px; background: #ffffff35; }
.audio-range::-moz-range-progress { background: #f2f5f9; height: 4px; border-radius: 5px; }
.audio-range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: white; margin-top: -3px; box-shadow: 0 2px 5px #0003; }
.audio-range::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: white; box-shadow: 0 2px 5px #0003; }
.audio-range:disabled { cursor: default; opacity: .4; }
.audio-times { display: flex; justify-content: space-between; font-size: .75rem; color: #8e8e93; line-height: 1.5; font-variant-numeric: tabular-nums; }
.audio-transport { display: flex; align-items: center; justify-content: center; gap: 30px; padding-top: 10px; }
.audio-play { border: 0; width: 56px; height: 56px; display: grid; place-items: center; background: #f6f8fb; border-radius: 50%; cursor: pointer; transition: scale .2s; box-shadow: 0 3px 12px #0002; }
.audio-play:hover { scale: 1.06; }
.audio-play:active { scale: .95; }
.audio-play img { width: 23px; height: 23px; filter: none; }
.audio-skip { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 0; background: transparent; color: #e7ebf2; cursor: pointer; border-radius: 50%; }
.audio-skip:hover { background: #ffffff0e; }
.audio-skip .icon { display: block; width: 30px; height: 30px; max-width: none; }
.audio-skip:disabled { opacity: .5; cursor: default; }
.audio-volume { display: flex; align-items: center; gap: 5px; margin: 12px -9px -5px; }
.audio-volume .audio-range { flex: 1; min-width: 0; --fill: 30%; }
.audio-repeat { font-size: 1.6rem; color: #c4ceda; margin-left: 3px; }
.audio-repeat[aria-pressed="true"] { background: #ffffff12; color: #fff; }
.audio-repeat .icon { width: 21px; height: 21px; }
@media (max-width: 480px) {
    .audio-dock { bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); width: min(362px, calc(100vw - 32px)); grid-template-columns: 30px minmax(0, 1fr); gap: 8px; transform: translateX(calc(100% - 14px)); }
    .audio-dock.is-open { transform: translateX(0); }
    .audio-handle { width: 30px; height: 48px; }
    .audio-panel { padding-inline: 17px; border-radius: 24px; }
    .audio-transport { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .audio-dock, .audio-panel, .audio-play { transition: none; }
    .audio-equalizer i { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .audio-handle, .audio-panel { background: #1c222c; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #8d96a5; }
}
@media print { .audio-dock { display: none; } }

/* ---- Galaxy cover art ---- */
.audio-cover { position: relative; overflow: hidden; background: #0b0b1a; box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
.audio-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transition: transform 8s linear; }   /* zoom in so the galaxy fills the small square */
.is-playing .audio-cover img { transform: scale(1.5) rotate(6deg); }          /* slow drift while playing */
.audio-cover .audio-equalizer { position: absolute; left: 7px; bottom: 6px; height: 12px; gap: 2px; opacity: 0; transition: opacity .3s; }
.audio-cover .audio-equalizer i { width: 2px; height: 5px; }
.audio-cover .audio-equalizer i:nth-child(2) { height: 10px; }
.audio-cover .audio-equalizer i:nth-child(3) { height: 12px; }
.audio-cover .audio-equalizer i:nth-child(4) { height: 7px; }
.is-playing .audio-cover .audio-equalizer { opacity: .95; }

/* ---- Crisp inline icons ---- */
.ap-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; flex-shrink: 0; }
.ap-fill { fill: currentColor; stroke: none; }
.audio-skip { color: #f5f5f7; }
.audio-icon-button { color: #e5e5ea; }
.audio-icon-button .ap-i { width: 19px; height: 19px; }
.audio-play { color: #000; }
.audio-play .ap-i { width: 24px; height: 24px; }
.audio-play .ap-play-i { transform: translateX(1px); }                          /* optical centring */
.audio-play .ap-pause-i, .is-playing .audio-play .ap-play-i { display: none; }
.is-playing .audio-play .ap-pause-i { display: block; }
#audioMute .ap-vol-off, #audioMute[aria-pressed="true"] .ap-vol-on { display: none; }
#audioMute[aria-pressed="true"] .ap-vol-off { display: block; }
.audio-repeat .ap-i { width: 20px; height: 20px; }

/* ---- Skip back/forward 10: Material Symbols icons ---- */
.audio-skip { position: relative; width: 52px; height: 52px; }
.audio-skip .ap-ms { width: 40px; height: 40px; shape-rendering: geometricPrecision; fill: currentColor; display: block;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
#audioBack:active .ap-ms { transform: rotate(-20deg); }
#audioForward:active .ap-ms { transform: rotate(20deg); }