deepdrft/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css

/* Geometry, positioning, and animation only.
   Colour, surface, and elevation come from MudBlazor theme props. */

/* Fixed dock to the viewport bottom */
.player-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding: 0;
    margin: 0;
}

.player-fixed {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding: 0;
    margin: 0;
}

::deep .player-inner-container {
    padding: 0 0.75rem 0.75rem 0.75rem;
}

/* The visible surface is a MudPaper; scoped CSS only sets geometry + a hairline accent */
::deep .player-surface {
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-primary);
    overflow: hidden;
    margin-bottom: 1rem;
}

/* Minimize / close cluster, pinned top-right of the surface */
::deep .player-surface .player-window-controls {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* PLAYER-BAR play-chip override (Phase 18, T3). PlayStateIcon's chip defaults to the solid
   --deepdrft-play-chip (moss-green in dark) used on release heroes and Cut track rows. On the
   player dock that solid green reads too hot, so here — and only here — swap to the
   translucent --deepdrft-play-chip-soft (same green, much less opaque).
   The glyph stays --mud-palette-primary (green on the soft translucent wash), giving the
   preferred green-on-green look on the player bar in dark mode. */
::deep .player-surface .icon-container {
    background-color: var(--deepdrft-play-chip-soft);
}

::deep .player-surface .icon-container .mud-icon-button {
    color: var(--mud-palette-primary);
}

/* Theater Mode "now showing" band (Phase 20 §5/§7). Sits above the transport layout inside the
   player surface and lets the bar grow taller to carry the hidden release's identity. The band only
   renders when Theater is ON, so this geometry is gated by render-inclusion, not a CSS flag — when
   Theater is OFF the player bar is byte-for-byte its non-Theater self.
   Colour/surface come from the bar's themed --deepdrft-page-* aliases; no new token, no dark override. */
::deep .now-showing {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--deepdrft-page-text-muted);
    min-width: 0;
}

/* Fixed cover box — the reused .deepdrft-track-detail-cover-art / -placeholder idioms are height:100%,
   so the band supplies the square frame they fill. */
::deep .now-showing-cover {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
}

::deep .now-showing-cover-art,
::deep .now-showing-cover-placeholder {
    width: 100%;
}

::deep .now-showing-cover-placeholder .mud-icon-root {
    font-size: 24px;
}

::deep .now-showing-title-link {
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
}

::deep .now-showing-title {
    color: var(--deepdrft-page-text);
}

::deep .now-showing-share {
    flex: 0 0 auto;
}

/* Minimized floating dock — positioning + hover only; colour from MudFab */
.minimized-dock {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1300;
}

.minimized-dock:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .minimized-dock {
        bottom: 15px;
        right: 15px;
    }

    ::deep .player-surface {
        margin-bottom: 0.5rem;
    }
}

/* Unified responsive player layout — CSS Grid with named areas redefined per breakpoint.
   The metadata (meta-zone) detaches from the waveform (seek-zone) in the mid band, which a
   flex order-swap can't express, so each of the four zones is placed by grid-area and the three
   shapes are pure template-area swaps — no runtime breakpoint subscription. min-width:0 on the
   shrinkable centre zones lets the title truncate and the waveform shrink instead of overflowing. */
.player-layout {
    display: grid;
    align-items: center;
    gap: 8px;
    /*padding-right: 2.5rem; !* clear the abs-positioned PlayerWindowControls *!*/
}

::deep .transport-zone { grid-area: transport; }
::deep .meta-zone      { grid-area: meta; min-width: 0; }
::deep .seek-zone      { grid-area: waveform; min-width: 0; }
::deep .volume-zone    { grid-area: volume; }

/* Wide (>= 900px): single row — transport and volume flank the centre column; the metadata
   sits directly under the waveform (transport/volume span both rows, centred). */
@media (min-width: 900px) {
    .player-layout {
        grid-template-columns: auto minmax(360px, 1fr) auto;
        grid-template-areas:
            "transport waveform volume"
            "transport meta     .";
    }
}

/* Mid (600–900px): metadata rides the top row between transport and volume; the waveform gets
   the whole bottom row to itself rather than being squeezed beside the metadata. */
@media (min-width: 600px) and (max-width: 899.98px) {
    .player-layout {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "transport meta     volume"
            "waveform  waveform waveform";
    }
}

/* Narrow (< 600px): transport + volume share the top row; waveform then metadata stack full-width
   below — the most compressed shape. */
@media (min-width: 420px) and (max-width: 599.98px) {
    .player-layout {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "transport .        volume"
            "waveform  waveform waveform"
            "meta      meta     meta";
    }
}

/* Very Narrow (< 400px): transport + volume share the top row; waveform then metadata stack full-width
   below — the most compressed shape. */
@media (max-width: 419.98px) {
    .player-layout {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "transport .        volume"
            "waveform  waveform waveform"
            "meta      meta     meta";
    }
}