/* 心声页面专用样式 - 公主风白浅粉设计 */

/* 为心声模态框添加闪光动画 */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* 心声按钮增强 */
#chat-mind-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#chat-mind-btn:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 12px rgba(255,133,166,0.4));
}

#chat-mind-btn:active {
    transform: scale(0.95);
}

#chat-mind-heart {
    filter: drop-shadow(0 2px 4px rgba(255,133,166,0.2));
}

/* 心声模态框全局样式优化 */
.emoji-mgmt-modal {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(20px);
    }
}

/* 心声内容容器动画 */
.emoji-mgmt-content {
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* 滚动条美化 */
.emoji-mgmt-content > div::-webkit-scrollbar {
    width: 6px;
}

.emoji-mgmt-content > div::-webkit-scrollbar-track {
    background: rgba(255, 240, 245, 0.3);
    border-radius: 10px;
}

.emoji-mgmt-content > div::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffd5e0, #ffabc0);
    border-radius: 10px;
    transition: background 0.3s;
}

.emoji-mgmt-content > div::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffabc0, #ff85a6);
}

/* 移动端优化 */
@media (max-width: 768px) {
    /* 移动端时禁用某些hover效果，使用触摸反馈 */
    .emoji-mgmt-content {
        touch-action: pan-y;
    }
    
    /* 移动端滚动条更细 */
    .emoji-mgmt-content > div::-webkit-scrollbar {
        width: 4px;
    }
    
    /* 移动端模态框留更多边距 */
    .emoji-mgmt-modal {
        padding: 10px;
    }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
    /* 心声按钮在小屏幕时稍微小一点 */
    #chat-mind-btn {
        width: 36px;
        height: 36px;
    }
    
    #chat-mind-heart {
        width: 20px;
        height: 20px;
    }
}

/* 横屏优化 */
@media (max-height: 600px) and (orientation: landscape) {
    .emoji-mgmt-content {
        max-height: 95vh !important;
    }
}