/**
 * 滑块验证码组件样式
 *
 * 设计参考项目现有 modal 模式（lottery.css 的 .result-modal）：
 *   - fixed inset:0 + backdrop-filter:blur 高斯模糊遮罩
 *   - 居中卡片 + slideUp 进入动画
 *   - 主色 #3b82f6，与登录页玻璃拟态风格保持一致
 *
 * 容器结构：
 *   .slider-mask            全屏遮罩
 *     .slider-card          居中卡片
 *       .slider-header       标题栏 + 关闭按钮
 *       .slider-puzzle-wrap  拼图区域（背景图 + 缺口 + 滑块图）
 *       .slider-track        滑动轨道
 *         .slider-handle      滑块手柄
 *       .slider-tip          提示文字
 */

/* === 全屏遮罩 === */
.slider-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;  /* 高于现有 modal(2000) 与聊天遮罩 */
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* 显示状态：由 JS 控制 display + opacity */
.slider-mask.show {
    display: flex;
    opacity: 1;
}

/* === 卡片容器 === */
/* 卡片宽度需大于 拼图区320 + padding48 = 368px，否则拼图区溢出右侧无法居中 */
.slider-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 24px 24px 20px;
    width: 380px;
    max-width: 92vw;
    box-sizing: border-box;  /* 确保 padding 计入宽度，避免溢出 */
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.18);
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.slider-mask.show .slider-card {
    transform: translateY(0);
    opacity: 1;
}

/* === 标题栏 === */
.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.slider-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.3px;
}

.slider-close {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.slider-close:hover {
    background: rgba(244, 63, 94, 0.12);
    color: #e11d48;
    transform: rotate(90deg);
}

/* === 拼图区域 === */
.slider-puzzle-wrap {
    position: relative;
    width: 320px;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;  /* 加载占位色 */
    margin: 0 auto 14px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.slider-bg-img,
.slider-slider-img {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;  /* 不抢拖动事件，事件挂在轨道上 */
}

/* 背景图兜底约束：即使 JS 缩放逻辑未执行，也保证图片不溢出容器被裁剪 */
.slider-bg-img {
    max-width: 100%;
    height: auto;
}

.slider-slider-img {
    left: 0;  /* 由 JS 控制位置 */
    width: 44px;   /* 默认尺寸兜底，实际由 JS 按缩放比动态设置 */
    height: 44px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    transition: left 0.2s cubic-bezier(0.16, 1, 0.3, 1);  /* 释放时平滑回弹/吸附 */
}

/* 加载中状态 */
.slider-puzzle-wrap.loading::after {
    content: '加载中...';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 13px;
}

/* === 滑动轨道 === */
.slider-track {
    position: relative;
    width: 300px;
    height: 44px;
    background: rgba(241, 245, 249, 0.8);
    border-radius: 22px;
    margin: 0 auto 12px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* 轨道提示文字（初始时显示，拖动时隐藏） */
.slider-track-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.slider-track.dragging .slider-track-text {
    opacity: 0;
}

/* === 滑块手柄 === */
.slider-handle {
    position: absolute;
    top: 0;
    left: 0;  /* 由 JS 控制 */
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
    transition: background 0.2s ease, box-shadow 0.2s ease;
    touch-action: none;  /* 阻止触屏滚动，让 touchmove 全权交给 JS */
}

.slider-handle:active,
.slider-handle.dragging {
    cursor: grabbing;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 5px 14px rgba(59, 130, 246, 0.5);
}

/* === 失败抖动动画 === */
.slider-card.shake {
    animation: sliderShake 0.4s ease;
}

@keyframes sliderShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* === 成功状态 === */
.slider-handle.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}

/* === 底部提示 === */
.slider-tip {
    text-align: center;
    font-size: 12px;
    color: #64748b;
    min-height: 18px;
    line-height: 1.5;
}

.slider-tip.error {
    color: #dc2626;
}

.slider-tip.success {
    color: #059669;
}

/* === 移动端适配 === */
@media (max-width: 420px) {
    .slider-card {
        width: 100%;
        padding: 20px 16px 16px;
        border-radius: 18px;
    }
    .slider-puzzle-wrap,
    .slider-track {
        width: 100%;
        max-width: 320px;
    }
}