@charset "utf-8";
/* CSS Document */

<style>
    /* 容器：适配不同屏幕 */
    #voice-player-bar {
        background: #ffffff;
        padding: 15px;
        border-radius: 12px;
        margin: 20px 0;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .player-controls {
        display: flex;
        flex-wrap: wrap; /* 手机端自动换行 */
        align-items: center;
        gap: 12px;
    }

    /* 按钮样式优化：更适合手指点击 */
    .player-controls button {
        padding: 8px 16px;
        border: none;
        background: #007bff;
        color: white;
        border-radius: 20px;
        cursor: pointer;
        font-weight: 500;
        flex: 0 1 auto;
        min-width: 80px;
    }

    .player-controls button:active {
        transform: scale(0.95);
    }

    .setting-group {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #666;
    }

    /* 下拉框美化 */
    #voice-select-mini {
        padding: 6px;
        border-radius: 6px;
        border: 1px solid #ccc;
        max-width: 200px;
        outline: none;
    }

    /* 手机端特定调整 */
    @media (max-width: 600px) {
        .player-controls {
            justify-content: space-between;
        }
        #voice-select-mini {
            max-width: 100%;
            flex: 1 1 100%; /* 手机上选择框占一行 */
        }
        .setting-group {
            flex: 1 1 100%;
        }
    }
</style>

<div id="voice-player-bar">
    <div class="player-controls">
        <button onclick="toggleSpeak()" id="play-btn">▶ 播放</button>
        <button onclick="stopSpeak()" style="background: #6c757d;">⏹ 停止</button>
        
        <select id="voice-select-mini"></select>

        <div class="setting-group">
            <span>语速</span>
            <input type="range" id="rate-mini" min="0.5" max="2" value="1" step="0.1" onchange="updateRateDisplay(this.value)">
            <span id="rate-num">1</span>x
        </div>
    </div>
</div>