/* Read-aloud (text-to-speech) player bar and in-article word highlighting - pairs with js/read-aloud-player.js. Used by test.php. */
.player {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 10px 30px;
    border-radius: 12px;
    /* box-shadow: 0 8px 20px rgba(0,0,0,0.15); */
    width: 100%;
    max-width: 400px;
    margin: 10px;
    transition: box-shadow 0.2s ease;
}

/* Only ever applied once read-aloud has actually
   started AND the reader has scrolled past the
   player's normal spot in the article - someone
   who never presses play never sees a floating bar
   at all. .player-placeholder holds the player's
   original spot open (same height) so switching to
   fixed doesn't yank the article up; the matching
   padding-bottom on body (added/removed alongside)
   keeps the very end of the page - comments, footer -
   from ever being permanently stuck under the bar. */
.player.player-sticky {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    margin: 0;
    width: calc(100% - 24px);
    z-index: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.player-placeholder {
    width: 100%;
    max-width: 400px;
    margin: 10px auto;
}

.controls {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.playbtn {
    border: none;
    background: none;
    font-size: 34px;
    cursor: pointer;
    color: #333;
}

.slider-container {
    width: 100%;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

input[type="range"] {
    flex: 1;
    /* background: #000; */
}

/* Read-aloud word highlighting: each word in the
   article body gets wrapped in .tts-word by JS below;
   .tts-highlight marks the one currently being spoken. */
.tts-word {
    border-radius: 3px;
    transition: background-color 0.12s ease;
}
.tts-highlight {
    background-color: #ffe066;
    color: #141414 !important;
    box-shadow: 0 0 0 2px #ffe066;
}