/* 精简后的 style.css - 仅包含基础布局和动画 */

/* 基础布局样式 */
body {
    background-color: #f5f7fb;
    color: #333;
    padding: 0;
    margin: 0;
    max-width: 800px;
    margin: 0 auto;
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: 20px;
    position: relative; /* 添加相对定位，用于绝对定位子元素 */
}

/* 纵向进度条样式 */
.vertical-progress-container {
    position: fixed; /* 固定在屏幕上 */
    left: 50%; /* 居中定位 */
    margin-left: -410px; /* 基于800px宽度的main-content，向左偏移出main-content的左边缘 */
    top: 140px; /* 与header底部对齐 */
    bottom: 20px; /* 距离底部留出空间 */
    height: auto; /* 自动计算高度 */
    width: 4px;
    border-radius: 4px;
    background-color: #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 90;
}

.vertical-progress-bar {
    position: absolute;
    top: 0; /* 改为从顶部开始 */
    width: 100%;
    background-color: #4CAF50;
    border-radius: 4px;
    transition: height 0.3s ease, background-color 0.5s ease;
}

.vertical-progress-label {
    position: absolute;
    bottom: auto; /* 移除底部固定位置 */
    left: 6px; /* 稍微增加左偏移，确保不会被进度条遮挡 */
    font-size: 10px;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 1px 3px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(-50%); /* 垂直居中对齐 */
    transition: top 0.3s ease, opacity 0.3s ease; /* 平滑过渡效果包括透明度 */
    opacity: 0; /* 默认隐藏 */
    pointer-events: none; /* 确保不会干扰鼠标事件 */
}

/* 当用户交互时显示标签 */
.vertical-progress-label.active {
    opacity: 1; /* 显示标签 */
}

/* 动画样式 */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* 进度条闪烁效果 */
@keyframes alertPulse {
    0% { box-shadow: 0 0 0 rgba(255, 0, 0, 0.7); }
    50% { box-shadow: 0 0 15px rgba(255, 0, 0, 0.9); }
    100% { box-shadow: 0 0 0 rgba(255, 0, 0, 0.7); }
}

.countdown-alert {
    animation: alertPulse 1.5s infinite;
    border-radius: 3px;
}

/* 响应式设计 */
@media (max-width: 820px) {
    /* 窄屏幕时调整进度条位置 */
    .vertical-progress-container {
        left: 0; /* 在窄屏幕上贴近左边缘 */
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 120px;
        padding-bottom: 15px;
    }
    
    /* 在移动设备上调整进度条位置 */
    .vertical-progress-container {
        top: 120px; /* 与移动设备上的header底部对齐 */
        left: 0; /* 在移动设备上贴近左边缘 */
        margin-left: 0;
    }
}