/* === 智能胶囊容器 (Smart Capsule v5.4 - Ghost Fix) === */
.capsule-wrapper {
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    z-index: 9999;

    /* 🛡️ 终极保险：没有 active 类时强制隐藏，防止幽灵胶囊 */
    opacity: 0;
    pointer-events: none;

    background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: #ffffff;
    padding: 10px 20px;
    border-radius: 50px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(102, 126, 234, 0.4);

    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    white-space: nowrap;
    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 12px;

    transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.2s ease,
        background 0.3s ease;

    user-select: none;
    -webkit-user-select: none;
}

.capsule-wrapper.active {
    top: 90px;
    opacity: 1;
    pointer-events: auto;
}

@media (hover: hover) {
    .capsule-wrapper:hover {
        transform: translateX(-50%) scale(1.03);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2),
            0 0 30px rgba(102, 126, 234, 0.6);
    }
}

.capsule-wrapper.warm-theme {
    background: linear-gradient(135deg, rgba(255, 154, 158, 0.95) 0%, rgba(254, 207, 239, 0.95) 100%);
    color: #333333;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(255, 154, 158, 0.4);
}

.capsule-wrapper.success-theme {
    background: linear-gradient(135deg, rgba(66, 230, 149, 0.95) 0%, rgba(59, 178, 184, 0.95) 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(66, 230, 149, 0.4);
}

.capsule-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.capsule-icon {
    font-size: 16px;
    line-height: 1;
}

/* 移除关闭按钮 - 所有平台统一不显示 */
.capsule-close {
    display: none;
}

@media (max-width: 768px) {
    .capsule-wrapper {
        /* 强制不换行，防止内容溢出 */
        white-space: nowrap;

        /* 调整位置，避免遮挡 */
        top: -50px;

        /* ✅ 移动端适配：缩小尺寸，更精致 */
        padding: 8px 16px;
        gap: 6px;
        font-size: 13px;
        min-height: 36px;
        border-radius: 20px;

        /* 增强背景不透明度，防止透出下面的怪东西 */
        background: rgba(102, 126, 234, 0.98);
        backdrop-filter: none;
        /* 移动端性能优化，有时磨砂会导致渲染错误 */

        /* 更轻盈的阴影 */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12),
            0 0 15px rgba(102, 126, 234, 0.3);

        /* 确保层级最高 */
        z-index: 10000 !important;

        /* 限制最大宽度 */
        max-width: 85vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .capsule-wrapper.active {
        top: 16px;
        opacity: 1;
        pointer-events: auto;
        /* 距离顶部留出一点空间 */
    }

    .capsule-icon {
        font-size: 14px;
    }
}

/* === Phase 2: 智能定位高亮动画 (v2.0 - 伪元素重构版) === */
/* 核心原理：使用 ::after 伪元素承载光晕，元素本身完全不修改，杜绝闪回 */

/* 光晕动画 - 自然呼吸：平滑起伏，不断气 */
@keyframes glow-pulse {
    0% {
        opacity: 0;
        box-shadow:
            0 0 0 0 rgba(102, 126, 234, 0),
            0 0 0 0 rgba(155, 93, 229, 0);
    }

    10% {
        opacity: 1;
        box-shadow:
            0 0 15px 6px rgba(102, 126, 234, 0.75),
            0 0 8px 3px rgba(155, 93, 229, 0.5);
    }

    30% {
        opacity: 0.5;
        box-shadow:
            0 0 8px 3px rgba(102, 126, 234, 0.4),
            0 0 4px 1px rgba(155, 93, 229, 0.25);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 16px 6px rgba(102, 126, 234, 0.8),
            0 0 9px 3px rgba(155, 93, 229, 0.55);
    }

    70% {
        opacity: 0.4;
        box-shadow:
            0 0 6px 2px rgba(102, 126, 234, 0.3),
            0 0 3px 1px rgba(155, 93, 229, 0.2);
    }

    85% {
        opacity: 0.2;
        box-shadow:
            0 0 4px 1px rgba(102, 126, 234, 0.15),
            0 0 2px 0px rgba(155, 93, 229, 0.1);
    }

    100% {
        opacity: 0;
        box-shadow:
            0 0 0 0 rgba(102, 126, 234, 0),
            0 0 0 0 rgba(155, 93, 229, 0);
    }
}

/* 高亮基础样式 - 仅设置相对定位，完全不修改 transform/box-shadow */
.message-item.highlight-flash,
.comment-item.highlight-flash {
    position: relative;
    z-index: 10;
}

/* 伪元素光晕层 - 所有动画效果都在这里 */
.message-item.highlight-flash::after,
.comment-item.highlight-flash::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 12px;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    animation: glow-pulse 4.5s ease-in-out;
}

/* 嵌套评论：缩小光晕范围 */
.comment-item--nested.highlight-flash::after {
    inset: -4px;
    border-radius: 8px;
}

/* === 移动端优化 === */
@media (max-width: 768px) {

    /* 移动端使用相同的伪元素方案，无需特殊处理 */
    .message-item.highlight-flash::after,
    .comment-item.highlight-flash::after {
        /* 稍微减小光晕范围，适配小屏幕 */
        inset: -4px;
    }
}