/* MP3 在线裁剪工具 - CSS 样式 */

/* 波形图容器样式 */
#waveform {
    position: relative;
}

/* WaveSurfer.js 7.x 使用 Shadow DOM，需要用 ::part() 穿透 */
/* 选区容器样式 */
#waveform ::part(region) {
    z-index: 10;
}

/* 选区手柄样式 - 使用 ::part() 伪元素穿透 Shadow DOM */
#waveform ::part(region-handle) {
    width: 6px !important;
    background-color: #ff5722 !important;
    cursor: col-resize !important;
    z-index: 20 !important;
    border:0 !important;
}
#waveform ::part(region-handle)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 24px;
    background-color: #ff5722;
    border-radius: 4px;
}
/* 手柄悬停效果 */
#waveform ::part(region-handle):hover {
    background-color: #DC2626 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8) !important;
}

/* 选区内容样式 */
#waveform ::part(region-content) {
    background-color: rgba(99, 102, 241, 0.3) !important;
}

/* 波形图加载动画 */
#waveform-container.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* 音频信息卡片动画 */
#audio-info {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 淡入淡出设置区域动画 */
#fade-settings {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 导出按钮动画 */
#export-buttons {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 播放按钮脉冲效果 */
#play-pause-btn {
    position: relative;
    overflow: hidden;
}

#play-pause-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

#play-pause-btn:active::after {
    width: 100px;
    height: 100px;
}

/* 输入框聚焦效果 */
#fade-in:focus,
#fade-out:focus,
#audio-url:focus {
    outline: none;
    ring: 2px;
    ring-color: #3B82F6;
    border-color: #3B82F6;
}

/* 响应式优化 */
@media (max-width: 640px) {
    #waveform {
        min-height: 100px;
    }
    
    #play-pause-btn {
        width: 48px;
        height: 48px;
    }
    
    #stop-btn {
        width: 40px;
        height: 40px;
    }
}