/* ============================================================
   Player-Leiste – gemeinsame Leiste am unteren Rand für AudioPlayer (Schwebend) und VideoPlayer2 (Mini),
   wie die Mini-Player von Podcast-Apps und YouTube: Fortschrittslinie oben, Bild bzw. kleines Video, Titel und
   zweite Zeile, Sprünge, Abspielen, Schließen. Beide Player verwenden dieselben Klassen, damit sie gleich aussehen.
   Farben aus den Design Tokens, dadurch hell und dunkel.

   CSS-Variablen:
     --oo-player-leiste-hoehe   Höhe der Leiste, Standard 4rem
     --oo-player-leiste-akzent  Farbe des Fortschritts, Standard --oo-primary
   ============================================================ */

.oo-player-leiste {
    --oo-player-leiste-hoehe: 4rem;
    --oo-player-leiste-bild: 2.75rem;

    position: relative;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    gap: var(--oo-space-1);
    height: var(--oo-player-leiste-hoehe);
    padding: 0 var(--oo-space-2) env(safe-area-inset-bottom) var(--oo-space-2);
    border-top: 1px solid var(--oo-color-border);
    background: var(--oo-color-surface);
    color: var(--oo-color-text);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.08);
}

.oo-player-leiste__fortschritt {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: color-mix(in srgb, var(--oo-color-text) 18%, transparent);
    pointer-events: none;
}

.oo-player-leiste__fuellung {
    height: 100%;
    background: var(--oo-player-leiste-akzent, var(--oo-primary));
    transform-origin: left center;
    transform: scaleX(0);
}

/* Bild und Text: ein Tipp darauf vergrößert den Player */
.oo-player-leiste__info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--oo-space-3);
    padding: var(--oo-space-1);
    border: 0;
    border-radius: var(--oo-radius-md);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.oo-player-leiste__bild {
    flex: 0 0 auto;
    width: var(--oo-player-leiste-bild);
    height: var(--oo-player-leiste-bild);
    border-radius: var(--oo-radius-md);
    object-fit: cover;
    background: var(--oo-color-background);
}

/* Platz für das kleine Video (16:9, gleich hoch wie ein Cover); das Video selbst legt der VideoPlayer2 darüber */
.oo-player-leiste__bild--video {
    width: calc(var(--oo-player-leiste-bild) * 16 / 9);
    background: #000;
}

.oo-player-leiste__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.oo-player-leiste__titel {
    font-weight: 600;
}

.oo-player-leiste__unter {
    font-size: var(--oo-font-size-sm);
    color: var(--oo-color-text-subtle);
}

.oo-player-leiste__btn {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--oo-radius-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--oo-transition, 150ms ease), transform 120ms ease;
}

.oo-player-leiste__btn:hover {
    background: color-mix(in srgb, var(--oo-color-text) 9%, transparent);
}

.oo-player-leiste__btn:active {
    transform: scale(0.94);
}

.oo-player-leiste__btn .oo-icon {
    font-size: 1.5rem;
}

.oo-player-leiste__btn:focus-visible,
.oo-player-leiste__info:focus-visible {
    outline: 2px solid var(--oo-player-leiste-akzent, var(--oo-primary));
    outline-offset: 2px;
}

/* Nur ab Tablet-Breite (Sprung zurück); am Handy bleiben Abspielen, Sprung vor und Schließen */
.oo-player-leiste__btn--breit {
    display: none;
}

@media (min-width: 40rem) {
    .oo-player-leiste__btn--breit {
        display: inline-grid;
    }
}