/* Audio Waveform Player 样式 */
/* 基础容器（支持暗色主题变量） */
.audio-waveform-player {
    width: 100%;
    max-width: 100%;
    margin: 12px 0;
    padding: 10px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Dark Theme Tokens（可被外层覆盖） */
    --awp-bg: #0f1115;
    --awp-surface: #20242d; /* 深灰背景 */
    --awp-border: #252a36;
    --awp-text: #ffffff;
    --awp-muted: #a1a6b0;
    --awp-accent: #4cc9f0;    /* 青蓝高亮 */
    --awp-accent-2: #9b87f5;  /* 次级高亮 */
    --awp-wave: #5b6474;      /* 未播放波形（深灰上更明显） */
    --awp-wave-progress: #86e1ff; /* 已播放波形 */
    --awp-cursor: #ff6b6b;    /* 进度线 */
    /* 强制去除任何主题可能带来的卡片背景/圆角/阴影 */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 0 !important;
}

/* 头部区域 */
/* 旧头部样式删除，改为紧凑布局 */

/* 波形容器 */
/* 波形容器（紧凑模式） */
.awp-waveform-container { position: relative; margin: 0; }
.awp-waveform { position: relative; overflow: hidden; margin: 0; padding: 0; background: transparent; border: 0; }
/* 去掉波形图的背景元素与阴影，保持纯净的参考样式 */
.awp-waveform canvas {
    width: 100%;
    display: block;
    cursor: pointer;
    background: transparent !important; /* 移除底色 */
    border-radius: 10px;
    box-shadow: none !important;       /* 移除内外阴影边框 */
}

/* WaveSurfer 波形样式 */
.awp-waveform wave {
    border-radius: 8px;
}

.awp-waveform wave canvas {
    border-radius: 8px;
    background: transparent !important; /* Wavesurfer 内部 canvas 同样去底色 */
    box-shadow: none !important;
}

/* 时长标签已不强制显示，若需要可单独开启 */

/* 控制区域 */
/* 底部控制区移除 */

.awp-bpm {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* 右侧仅保留下载按钮（在紧凑布局里更醒目） */
.awp-download-strong { display: inline-flex; align-items: center; gap: 6px; background: #111; color: #fff; border: 0; border-radius: 18px; height: 32px; padding: 0 10px; cursor: pointer; }
.awp-download-strong:hover { background: #000; }

/* 加载状态 */
.awp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    color: #666;
    font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .audio-waveform-player { margin: 6px 0; padding: 10px; }
}

/* 波形进度指示器 */
.awp-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    transition: width 0.1s ease;
}

/* 时间显示 */
.awp-time-display {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #666;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
}

/* 紧凑列表布局 */
.audio-waveform-player.awp-compact { background: transparent !important; box-shadow: none !important; border-bottom: 1px solid var(--awp-border); padding: 10px 0; border-radius: 0 !important; color: var(--awp-text); }
.audio-waveform-player.awp-compact .awp-row { display: grid; grid-template-columns: minmax(160px, 240px) 1fr auto; align-items: center; gap: 12px; }
.audio-waveform-player.awp-compact .awp-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.audio-waveform-player.awp-compact .awp-play-button { width: 34px; height: 34px; aspect-ratio: 1 / 1; flex: 0 0 34px; align-self: center; line-height: 0; border-radius: 50%; background: linear-gradient(180deg,#1d2230,#151a27); border: 1px solid rgba(255,255,255,0.08); display: inline-flex; align-items: center; justify-content: center; color: var(--awp-text); cursor:pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06); }
.audio-waveform-player.awp-compact .awp-play-button:hover { border-color: rgba(76,201,240,0.6); box-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 0 0 3px rgba(76,201,240,0.12) inset; }
.audio-waveform-player.awp-compact .awp-play-button svg { color: var(--awp-text); }
.audio-waveform-player.awp-compact .awp-title {
    margin: 0;
    font-size: 14px; /* 减小字号，贴近参考样式 */
    font-weight: 640;
    color: var(--awp-text) !important;
    max-width: 100%;
    white-space: normal;          /* 允许在信息区块内自动换行 */
    word-break: break-word;       /* 超长单词/URL 也可换行 */
    overflow: visible;            /* 不截断 */
    text-overflow: clip;          /* 移除省略号 */
    line-height: 1.25;
    letter-spacing: 0.2px;
}
.audio-waveform-player.awp-compact .awp-center { height: 48px; }
.audio-waveform-player.awp-compact .awp-right { display: flex; align-items: center; gap: 8px; }

/* 下载图标按钮（紧凑） */
.awp-download-icon { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(180deg,#1c2432,#131a25); display: inline-flex; align-items: center; justify-content: center; color: #eaf2ff; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06); }
.awp-download-icon::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 60%, transparent 65%); pointer-events: none; }
.awp-download-icon svg { width: 18px; height: 18px; color: inherit; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45)); }
.awp-download-icon:hover { border-color: rgba(134,225,255,0.7); color: #9fe6ff; box-shadow: 0 3px 10px rgba(0,0,0,0.6), 0 0 0 3px rgba(134,225,255,0.12) inset; transform: translateY(-1px); }

/* 胶囊按钮（图标 + 下载文字） */
.awp-download-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg,#1c2432,#131a25); color: #eaf2ff; font-size: 13px; font-weight: 600; letter-spacing: .2px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06); }
.awp-download-pill svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45)); }
.awp-download-pill:hover { border-color: rgba(134,225,255,0.7); color: #c8eaff; box-shadow: 0 3px 10px rgba(0,0,0,0.6), 0 0 0 3px rgba(134,225,255,0.12) inset; transform: translateY(-1px); }

/* 标题前的细色条（与参考风格一致） */
.audio-waveform-player.awp-compact .awp-info {
    position: relative;
    padding-left: 10px;
    min-width: 0; /* 允许内部内容在网格列中正确收缩/换行 */
}
.audio-waveform-player.awp-compact .awp-info:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 2px; background: linear-gradient(180deg,var(--awp-accent),var(--awp-accent-2)); }