/* =========================================================
   CONTROLS
========================================================= */

#controls {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 500;

    padding:
        0
        max(20px, env(safe-area-inset-right))
        max(10px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));

    transition:
        opacity .28s var(--ease),
        transform .28s var(--ease);

}


#controls.hidden {

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(14px);

}


/* =========================================================
   PROGRESS
========================================================= */

.progress-area {

    width: 100%;

    height: 14px;

    display: flex;

    align-items: center;

    cursor: pointer;

    touch-action: none;

    margin-bottom: -2px;

    position: relative;

}


/* =========================================================
   SCRUBBING THUMBNAIL PREVIEW
========================================================= */

#scrub-preview {

    position: absolute;

    bottom: 26px;

    transform:
        translateX(-50%);

    z-index: 50;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    pointer-events: none;

    opacity: 1;

    transition: opacity .12s ease;

}


#scrub-preview.hidden {

    opacity: 0;

    pointer-events: none;

}


#scrub-canvas {

    width: 128px;

    height: 72px;

    border-radius: 6px;

    background: #111;

    border:
        2px solid rgba(255,255,255,.85);

    box-shadow:
        0 6px 20px rgba(0,0,0,.5);

}


#scrub-time-label {

    padding: 2px 8px;

    border-radius: 4px;

    background: rgba(0,0,0,.8);

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    font-variant-numeric: tabular-nums;

}


.progress-track {

    position: relative;

    width: 100%;

    height: 3px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.22);

    transition: height .18s var(--ease);

}


.progress-area:hover
.progress-track {

    height: 5px;

}


.progress-buffer {

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 0;

    border-radius: inherit;

    background:
        rgba(255,255,255,.36);

    transition: width .2s linear;

}


.progress-played {

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 0;

    border-radius: inherit;

    background:
        var(--red);

}


.progress-dot {

    position: absolute;

    top: 50%;

    left: 0;

    width: 12px;

    height: 12px;

    transform:
        translate(-50%, -50%)
        scale(0);

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 8px
        rgba(229,9,20,.65),
        0 0 0 3px rgba(0,0,0,.15);

    transition:
        transform .18s var(--ease);

}


.progress-area:hover
.progress-dot,
.progress-area:active
.progress-dot {

    transform:
        translate(-50%, -50%)
        scale(1);

}


/* =========================================================
   CONTROL ROW
========================================================= */

.control-row {

    height: 40px;

    margin-top: 10px;

    display: flex;

    align-items: center;

    gap: 4px;

    max-width: 100%;

    /*
     * Safety valve: if the real available
     * width is ever narrower than the sum
     * of the icons (a busy landscape bar,
     * a long duration, a viewport-size
     * miscalculation, etc.), the row
     * scrolls internally instead of
     * clipping icons off the edge of the
     * screen. Every control stays reachable
     * no matter what.
     */

    overflow-x: auto;

    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    -ms-overflow-style: none;

}


.control-row::-webkit-scrollbar {

    display: none;

    height: 0;

    width: 0;

}


/* =========================================================
   BOTTOM ROW (series links only)

   "Episodes" opens the same episode
   list used from Settings, "Next
   Episode" jumps immediately - a
   lighter-weight alternative to the
   removed main-bar icon button, kept
   as text links per the reference
   layout so the primary control row
   stays uncluttered.
========================================================= */

.bottom-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 8px;

    font-size: 13px;

    font-weight: 600;

    color: rgba(255,255,255,.85);

}


.bottom-row.hidden {

    display: none;

}


.bottom-link {

    display: flex;

    align-items: center;

    gap: 6px;

    background: none;

    border: 0;

    color: inherit;

    font: inherit;

    cursor: pointer;

    padding: 4px 2px;

}


.bottom-link svg {

    width: 16px;

    height: 16px;

}


.bottom-link:active {

    opacity: .6;

}


.bottom-link.hidden {

    display: none;

}



#top-bar-episode.tappable {

    cursor: pointer;

}


#top-bar-episode.tappable:hover {

    opacity: .8;

}


/* =========================================================
   ICON BUTTON
========================================================= */

.control-btn {

    width: 36px;

    height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 0;

    outline: none;

    background: transparent;

    color: rgba(255,255,255,.92);

    cursor: pointer;

    border-radius: 50%;

    flex-shrink: 0;

    transition:
        background .18s var(--ease),
        color .18s var(--ease),
        transform .12s var(--ease);

}


.control-btn:hover {

    background:
        rgba(255,255,255,.1);

    color: #fff;

}


.control-btn:active {

    transform: scale(.9);

    background:
        rgba(255,255,255,.16);

}


.control-btn:focus-visible {

    outline:
        2px solid rgba(255,255,255,.55);

    outline-offset: 2px;

}


/*
 * Generic hidden-state helper for
 * control buttons and settings rows
 * that only appear conditionally
 * (Next Episode, Episodes row) - kept
 * local to these components so it
 * can't clash with #top-bar.hidden /
 * #controls.hidden / .settings-*.hidden,
 * which each need their own transition.
 */

.control-btn.hidden {

    display: none;

}


.settings-row.hidden {

    display: none;

}


/* =========================================================
   SVG ICON
========================================================= */

.control-btn svg {

    width: 20px;

    height: 20px;

    transition:
        opacity .18s ease;

}


.control-btn:active svg {

    opacity: .8;

}


/* =========================================================
   PLAY

   Deliberately NOT a filled/colored
   circle - a persistent red disc here
   would be the exact "heavy box/circle
   background" the rest of the icon set
   was redesigned to avoid. It stays
   visually identical to every other
   control-btn; only its size is
   slightly larger for emphasis.
========================================================= */

.play-btn {

    width: 40px;

    height: 40px;

}


.play-btn svg {

    width: 20px;

    height: 20px;

}


/* =========================================================
   VOLUME
========================================================= */

.volume-wrapper {

    position: relative;

    display: flex;

    align-items: center;

}


.volume-slider {

    width: 0;

    height: 3px;

    opacity: 0;

    margin-left: 0;

    accent-color: var(--red);

    cursor: pointer;

    pointer-events: none;

    transition:
        width .2s var(--ease),
        opacity .2s var(--ease),
        margin-left .2s var(--ease);

}


.volume-wrapper:hover
.volume-slider,
.volume-wrapper:focus-within
.volume-slider {

    width: 72px;

    opacity: 1;

    margin-left: 6px;

    pointer-events: auto;

}


/* =========================================================
   TIME
========================================================= */

.time {

    color: rgba(255,255,255,.92);

    font-size: 12.5px;

    font-variant-numeric: tabular-nums;

    letter-spacing: .2px;

    white-space: nowrap;

    margin-left: 6px;

    flex-shrink: 0;

}


.time-separator {

    color: rgba(255,255,255,.4);

    padding: 0 3px;

}


/* =========================================================
   SPACER
========================================================= */

.controls-spacer {

    flex: 1 0 12px;

}