/* HDF Audio Player — dezenter Floating Button (Variante A: Rot) */

.hdf-ap {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99998;
    height: 56px;
    background: #db0840;
    border-radius: 28px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    box-shadow: 0 4px 18px rgba(219, 8, 64, 0.35);
    font-family: inherit;
    box-sizing: border-box;
    transition: width 0.22s ease, padding 0.22s ease, box-shadow 0.22s ease;
    will-change: width;
}

.hdf-ap[data-state="collapsed"] {
    width: 56px;
    padding: 0;
}

.hdf-ap[data-state="expanded"] {
    width: auto;
    padding: 0 6px;
}

.hdf-ap__slot {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, transform 0.08s ease;
}

.hdf-ap__slot svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    pointer-events: none;
}

/* Im collapsed state nimmt der Playpause-Button den gesamten Circle ein */
.hdf-ap[data-state="collapsed"] .hdf-ap__slot--playpause {
    width: 56px;
    height: 56px;
    position: relative;
    background: transparent;
}

.hdf-ap[data-state="collapsed"] .hdf-ap__slot--playpause svg {
    width: 22px;
    height: 22px;
}

/* Im expanded state sind Play/Pause und Next leicht hervorgehoben */
.hdf-ap[data-state="expanded"] .hdf-ap__slot--playpause,
.hdf-ap[data-state="expanded"] .hdf-ap__slot--next {
    background: rgba(255, 255, 255, 0.15);
}

.hdf-ap[data-state="expanded"] .hdf-ap__slot--close {
    width: 36px;
    height: 36px;
}

.hdf-ap[data-state="expanded"] .hdf-ap__slot--close svg {
    width: 14px;
    height: 14px;
}

/* Next + Close nur im expanded state sichtbar */
.hdf-ap[data-state="collapsed"] .hdf-ap__slot--next,
.hdf-ap[data-state="collapsed"] .hdf-ap__slot--close {
    display: none;
}

/* Hover + Focus */
.hdf-ap__slot:hover {
    background: rgba(255, 255, 255, 0.28);
}

.hdf-ap[data-state="collapsed"] .hdf-ap__slot--playpause:hover {
    background: rgba(255, 255, 255, 0.15);
}

.hdf-ap__slot:active {
    transform: scale(0.94);
}

.hdf-ap__slot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Icon Toggle: Collapsed = Musik-Note, Expanded = Play oder Pause */
.hdf-ap__icon { display: none; }
.hdf-ap[data-state="collapsed"] .hdf-ap__icon--note { display: block; }
.hdf-ap[data-state="expanded"]:not(.is-playing) .hdf-ap__icon--play { display: block; }
.hdf-ap[data-state="expanded"].is-playing .hdf-ap__icon--pause { display: block; }

/* Pulse-Punkt (Musik läuft), nur im collapsed state */
.hdf-ap__pulse {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
    display: none;
    box-sizing: border-box;
}

.hdf-ap[data-state="collapsed"].is-playing .hdf-ap__pulse {
    display: block;
}

/* Aufmerksamkeits-Animation, wenn Autoplay geblockt wurde */
@keyframes hdf-ap-attention {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

.hdf-ap.was-blocked[data-state="collapsed"] {
    animation: hdf-ap-attention 1.4s ease-in-out 3;
}

/* Mobile-Anpassung */
@media (max-width: 600px) {
    .hdf-ap {
        bottom: 25px;
        left: 20px;
    }
}

/* Reduced motion respektieren */
@media (prefers-reduced-motion: reduce) {
    .hdf-ap,
    .hdf-ap__slot {
        transition: none;
    }
    .hdf-ap.was-blocked[data-state="collapsed"] {
        animation: none;
    }
}