/* mobile-music-player.css — 紧凑音乐播放器共享组件样式（SPA 端 /music-m 二级工具栏 + story 端二级工具栏共用）
   由 music-player-toolbar.js 渲染的 .music-toolbar-player 使用；story 端从 toolbar.css 删除原副本后统一走本文件 */

/* ===== 组件根布局：grid（播放按钮 | 控制行） + 进度条 =====
   组件自包含统一视觉（边框/圆角/阴影/背景），两端宿主容器（story .mobile-toolbar__secondary /
   移动端 #mobileSecondaryToolbar）在音乐内容时让位去装饰，保证 /music-m 与 /story-m 播放器外观一致 */
.music-toolbar-player {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  row-gap: 5px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  width: 100%;
  box-sizing: border-box;
}

/* story 端：二级栏容器含紧凑播放器时高度自适应 + 让位（容器去装饰，播放器组件自带外观）
   （双 class 提高特异性，确保在 story-mobile.css（后加载）的 .mobile-toolbar__secondary 之上生效） */
.mobile-toolbar__secondary.mobile-toolbar__secondary--music {
  height: auto;
  padding: 0;
  align-items: stretch;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 移动端：二级栏容器处于音乐播放器状态时让位去装饰（组件自带边框/圆角/阴影） */
.mobile-secondary-toolbar.is-music-player {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 控制行 */
.music-toolbar-player .mobile-toolbar__secondary--music-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.music-toolbar-player .mobile-toolbar__secondary-item {
  width: 40px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--text-1);
  cursor: pointer;
  font-size: 16px;
  font-weight: var(--fw-medium, 500);
  flex-shrink: 0;
  transition: background var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}
.music-toolbar-player .mobile-toolbar__secondary-item:active {
  background: var(--bg-3);
}
.music-toolbar-player .mobile-toolbar__secondary-item:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.music-toolbar-player .mobile-toolbar__secondary-item .universe-icon {
  font-size: 20px;
  display: inline-flex;
}

/* 播放按钮（主按钮，圆形，grid 跨两行） */
.music-toolbar-player > .mobile-toolbar__secondary-item--play {
  grid-row: 1 / 3;
  margin-right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--bg-1);
  flex-shrink: 0;
  align-self: center;
}
.music-toolbar-player > .mobile-toolbar__secondary-item--play .universe-icon {
  font-size: 24px;
}
.music-toolbar-player > .mobile-toolbar__secondary-item--play:active {
  background: var(--primary);
  opacity: 0.85;
}

/* 歌名跑马灯 */
.music-toolbar-player .music-name-display {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.music-toolbar-player .music-name-display__text {
  display: inline-block;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}
.music-toolbar-player .music-name-display.is-scrolling .music-name-display__text {
  animation: marquee-scroll 24s linear forwards;
}

/* 进度条 */
.music-toolbar-player .music-progress-wrapper {
  position: relative;
  height: 5px;
  width: 100%;
  margin-bottom: 6px;
  background-color: var(--line-3);
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  grid-column: 2;
}
.music-toolbar-player .music-progress-bar {
  height: 100%;
  background-color: var(--primary);
  border-radius: 2px;
  position: relative;
  transition: width 0.1s linear;
}
.music-toolbar-player .music-progress-thumb {
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--primary);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(255, 131, 131, 0.3);
}
.music-toolbar-player .music-progress-range {
  display: none;
}