/* Blog Audio Reader Styles v2.4.0 */
:root {
    --bar-primary-color: #00c853;
    --bar-background-color: rgba(0, 200, 83, 0.1);
    --bar-highlight-color: rgba(0, 200, 83, 0.2);
    --bar-button-size: 50px;
    --bar-base-height: 5px;
    --bar-wave-speed: 1s;
}

#audio-reader-wrapper {
    margin: 2em 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#audio-reader-wrapper.disabled .modern-audio-player {
    opacity: 0.5;
    pointer-events: none;
}

.modern-audio-player {
    max-width: 800px;
    margin: 0 auto;
    background: var(--bar-background-color);
    border: 1px solid var(--bar-highlight-color);
    border-radius: 16px;
    box-shadow: 0 8px 25px -5px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.player-content {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    gap: 15px;
}

.player-info { flex: 1; min-width: 150px; }
.player-title { font-weight: 600; font-size: 1.1em; color: var(--bar-primary-color); }
.player-status { font-size: 0.9em; opacity: 0.7; }

.player-visualizer { display: flex; align-items: center; justify-content: center; gap: 4px; height: 50px; flex: 2; min-width: 150px; }
.player-visualizer .bar { width: 5px; background-color: var(--bar-primary-color); border-radius: 3px; transition: height 0.2s ease; height: var(--bar-base-height); }
.player-visualizer .bar:nth-child(2n) { height: calc(var(--bar-base-height) * 2); }
.player-visualizer .bar:nth-child(3n) { height: calc(var(--bar-base-height) * 3); }
.player-visualizer .bar:nth-child(4n) { height: calc(var(--bar-base-height) * 4); }
.player-visualizer .bar:nth-child(5n) { height: calc(var(--bar-base-height) * 2.5); }

@keyframes wave {
    0%, 100% { transform: scaleY(0.6); opacity: 0.6; }
    50% { transform: scaleY(1); opacity: 1; }
}
#audio-reader-wrapper.playing .player-visualizer .bar { animation: wave var(--bar-wave-speed) ease-in-out infinite alternate; transform-origin: bottom; }
#audio-reader-wrapper.playing .player-visualizer .bar:nth-child(2) { animation-delay: 0.1s; }
#audio-reader-wrapper.playing .player-visualizer .bar:nth-child(3) { animation-delay: 0.2s; }
#audio-reader-wrapper.playing .player-visualizer .bar:nth-child(4) { animation-delay: 0.3s; }

.control-btn {
    background-color: var(--bar-primary-color);
    border: none;
    border-radius: 50%;
    width: var(--bar-button-size);
    height: var(--bar-button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.control-btn:hover { transform: scale(1.05); }
.control-btn svg { width: 45%; height: 45%; fill: currentColor; }
.toggle-btn .pause-icon { display: none; }
#audio-reader-wrapper.playing .toggle-btn .play-icon { display: none; }
#audio-reader-wrapper.playing .toggle-btn .pause-icon { display: block; }

.bar-word-highlight {
    background-color: var(--bar-highlight-color);
    padding: 2px 0;
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.bar-floating-btn {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 1000;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bar-primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
}
.bar-floating-btn.visible { opacity: 1; transform: translateY(0); visibility: visible; }
.bar-floating-btn:hover { transform: translateY(-3px) scale(1.05); }
.bar-floating-btn svg { width: 28px; height: 28px; fill: currentColor; }
.bar-floating-btn .pause-icon { display: none; }
.bar-floating-btn.playing .play-icon { display: none; }
.bar-floating-btn.playing .pause-icon { display: block; }

@media (max-width: 768px) {
    .player-content { flex-wrap: wrap; }
    .player-info { order: 1; flex-basis: 100%; text-align: center; }
    .player-visualizer { order: 3; flex-basis: 100%; height: 40px; }
    .control-btn { order: 2; margin: 0 auto; }
}