:root {
  --abcp-bg: #333333;
  --abcp-radius: 8px;

  --abcp-title-size: 18px;
  --abcp-title-color: #dddddd;

  --abcp-btn-bg: #7d1f1f;
  --abcp-btn-text: #ffffff;
  --abcp-btn-fs: 14px;

  --abcp-btn-hover-bg: #a62828;
  --abcp-btn-hover-text: #ffffff;

  --abcp-btn-active-bg: #c93c3c;
  --abcp-btn-active-text: #ffffff;

  --abcp-play-size: 40px;
  --abcp-play-bg: #7d1f1f;

  --abcp-icon-size: 18px;
  --abcp-play-icon: #ffffff;

  --abcp-play-hover-bg: #a62828;
  --abcp-play-hover-icon: #ffffff;

  --abcp-play-active-bg: #c93c3c;
  --abcp-play-active-icon: #ffffff;

  --abcp-play-pressed-bg: #5a0f0f;
  --abcp-play-pressed-icon: #ffffff;

  --abcp-seek-bg: #555555;
  --abcp-seek-thumb: #ffffff;
  --abcp-seek-thumb-hover: #dddddd;

  --abcp-time-size: 14px;
  --abcp-time-color: #cccccc;
}

/* Player */
.abcp-player{
  background: var(--abcp-bg);
  padding:20px;
  border-radius: var(--abcp-radius);
  color:#eee;
  width: 100%;
  max-width:480px;
  font-family:system-ui,Inter,-apple-system,BlinkMacSystemFont;
  margin-bottom:20px;
}

.abcp-title{
  font-size: var(--abcp-title-size);
  color: var(--abcp-title-color);
  margin-bottom:10px;
  opacity:0.9;
}

.abcp-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* A/B Buttons */
.abcp-ab-buttons{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}

.abcp-ab-btn{
  flex:1;
  padding:10px 0;
  border-radius: var(--abcp-radius);
  border:1px solid #333;
  background: var(--abcp-btn-bg);
  color: var(--abcp-btn-text);
  cursor:pointer;
  font-size: var(--abcp-btn-fs);
  transition:0.2s;
  text-align:center;
}

.abcp-ab-btn.active{
  background: var(--abcp-btn-active-bg);
  color: var(--abcp-btn-active-text);
  border-color: var(--abcp-btn-active-bg);
  font-weight:600;
}

.abcp-ab-btn:hover{
  background: var(--abcp-btn-hover-bg);
  color: var(--abcp-btn-hover-text);
}

/* Main Row */
.abcp-main{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Play Button */
.abcp-play{
  width: var(--abcp-play-size);
  height: var(--abcp-play-size);
  border-radius:50%;
  border:none;
  background: var(--abcp-play-bg);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.2s;
}

/* SVG Icon */
.abcp-player .abcp-play svg{
    width: var(--abcp-icon-size) !important;
    height: var(--abcp-icon-size) !important;
    min-width: var(--abcp-icon-size) !important;
    min-height: var(--abcp-icon-size) !important;
    fill: var(--abcp-play-icon) !important;
    flex-shrink:0 !important;
    display:block !important;
}

/* Hover */
.abcp-play:hover{
  background: var(--abcp-play-hover-bg);
}
.abcp-play:hover svg{
  fill: var(--abcp-play-hover-icon);
}

/* Active (Playing) */
.abcp-play.is-playing{
  background: var(--abcp-play-active-bg) !important;
}
.abcp-play.is-playing svg{
  fill: var(--abcp-play-active-icon) !important;
}

/* Pressed */
.abcp-play:active:not(.is-playing),
.abcp-play:focus:not(.is-playing),
.abcp-play:focus-visible:not(.is-playing){
  background: var(--abcp-play-pressed-bg) !important;
  outline:none !important;
  box-shadow:none !important;
}
.abcp-play:active:not(.is-playing) svg,
.abcp-play:focus:not(.is-playing) svg,
.abcp-play:focus-visible:not(.is-playing) svg{
  fill: var(--abcp-play-pressed-icon) !important;
}

/* Seek Bar */
.abcp-seek{
  flex:1;
  height:4px;
  background: var(--abcp-seek-bg);
  border-radius:2px;
  appearance:none;
}

.abcp-seek::-webkit-slider-thumb{
  appearance:none;
  width:12px;
  height:12px;
  background: var(--abcp-seek-thumb);
  border-radius:50%;
  transition:0.2s;
}
.abcp-seek::-webkit-slider-thumb:hover{
  background: var(--abcp-seek-thumb-hover);
}

/* Time */
.abcp-time{
  font-size: var(--abcp-time-size);
  color: var(--abcp-time-color);
  min-width:80px;
  text-align:right;
}

/* Fix flex overflow for time + seek bar */
.abcp-main {
    min-width: 0;
}

.abcp-time {
    min-width: 0;
    flex-shrink: 1;
}

/* Text Color Fix */
.abcp-player,
.abcp-player * {
    color: inherit;
}

.abcp-player .abcp-title {
    color: var(--abcp-title-color);
}

.abcp-player .abcp-time {
    color: var(--abcp-time-color);
}

.abcp-player .abcp-ab-btn.active {
    color: var(--abcp-btn-active-text);
}

/* Iframe base reset (admin preview) */
html, body {
    margin: 0;
    padding: 0;
    background: transparent !important;
}

/* Admin Settings preview wrapper */
#abcp-live-preview-wrapper {
    margin-top: 20px;
    max-width: 520px;
}

#abcp-live-preview-iframe {
    width: 100%;
    height: 260px;
    border: none;
    border-radius: 12px;
    background: transparent !important;
}

/* -----------------------------------------
   Responsive (Mobile < 480px)
----------------------------------------- */
@media (max-width: 480px) {

  /* 播放器整体缩进更紧凑 */
  .abcp-player {
    padding: 14px;
  }

  /* A/B 按钮在窄屏下更紧凑 */
  .abcp-ab-buttons {
    gap: 6px;
  }

  .abcp-ab-btn {
    padding: 8px 0;
    font-size: calc(var(--abcp-btn-fs) - 2px);
  }

  /* 主行：播放按钮 + 进度条 + 时间 */
  .abcp-main {
    gap: 8px;
  }

  /* 播放按钮缩小一点 */
  .abcp-play {
    width: calc(var(--abcp-play-size) * 0.8);
    height: calc(var(--abcp-play-size) * 0.8);
  }

  /* 图标也跟着缩小 */
  .abcp-player .abcp-play svg {
    width: calc(var(--abcp-icon-size) * 0.8) !important;
    height: calc(var(--abcp-icon-size) * 0.8) !important;
  }

  /* 时间文本缩小一点 */
  .abcp-time {
    font-size: calc(var(--abcp-time-size) - 2px);
    min-width: 60px;
  }

  /* 标题缩小一点 */
  .abcp-title {
    font-size: calc(var(--abcp-title-size) - 2px);
  }
}

/* Fix: prevent overflow on narrow screens */
.abcp-main {
    flex-wrap: nowrap;
    min-width: 0; /* 关键：允许子元素缩小 */
}

.abcp-seek {
    min-width: 0; /* 关键：允许进度条在窄屏下缩小 */
}

@media (max-width: 420px) {
    .abcp-main {
        flex-wrap: wrap;
    }

    .abcp-time {
        width: 100%;
        text-align: right;
        margin-top: 6px;
    }
}