/* ==============================================
media‑unit.css
功能：公共组件、绘本speak-text朗读标记、音视频浮窗播放器
清理：移除导航相关：.nav-page-container / .nav-divider
============================================== */

.wrap{
  width:100%;
  background:#222;
  color:#fff;
  padding:20px;
}
/*【原有】可点击朗读文本标记 */
.speak-text{
  cursor:pointer;
}
.speak-text:hover{
  text-decoration:underline;
}
/*【新增】播放按钮playing状态样式，供#globalPlayBtn使用 */
#globalPlayBtn.playing{
    background-color:#c82333;
    color:#fff;
}
.vocab-line{
  margin:0.6rem 0;
}
/* --------歌曲列表布局 -------- */
.song-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 12px;
}
.song-item{
    display: flex;
    gap: 6px;
    align-items: center;
}
.highlight-row{
    background:rgba(255,221,0,0.18);
}
@media (max-width:720px){
    .song-list{
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width:480px){
    .song-list{
        grid-template-columns: repeat(1,1fr);
    }
}
/* =========统一音视频浮窗mediaFloatWrap========= */
#mediaFloatWrap{
    position: fixed;
    right:16px;
    bottom:16px;
    width: min(640px,95vw);
    min-width:300px;
    z-index:9999;
    border:none;
    box-shadow:0 4px 14px rgba(0,0,0,0.45);
    border-radius:6px;
    overflow:hidden;
    background:#000;
    display:none;
}
#mediaDragBar{
    height:24px;
    background:rgba(40,40,40,0.85);
    cursor:move;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 8px;
    color:#fff;
    font-size:12px;
    user-select:none;
}
#mediaCloseBtn{
    background:#e53935;
    color:#fff;
    border:none;
    border-radius:3px;
    padding:2px 6px;
    cursor:pointer;
}
#mainVideo{
    width:100%;
    display:block;
}
#mainAudio{
    width:100%;
    display:block;
}
/* index主页零散audio‑trigger生成播放器（保留兼容旧标记） */
.mini-audio-player {
    margin:6px 0 10px 1em;
}
.mini-audio-player audio {
    height:32px;
}
#floatPlayerWrap {
  position: fixed; /* 关键！fixed悬浮在视口，脱离文档流，成为弹窗 */
  left: 20px;
  top: 120px;
  width: 720px;
  background: #111;
  border: 1px solid #666;
  border-radius: 6px;
  padding:8px;
  z-index: 9999; /* 很高层级，盖在页面内容上方，防止被其他元素盖住 */
  display: none; /* 默认隐藏，JS里设block才显示 */
}
#floatPlayerDragBar {
  padding:6px;
  background:#3a2610;
  color:#fff;
  cursor:move;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
#floatPlayerDragBar button {
  background:#c33;
  color:white;
  border:none;
  padding:2px 8px;
  cursor:pointer;
}
#playerVideo {
  width:100%;
  display:block;
}
.highlight-row {
  background-color:#444 !important;
}