/* 热点问题展示模块样式 */

/* 热点问题区域基本样式 */
#hotQuestionsSection {
    background-color: #f8fafc;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

/* 标题区域样式 */
#hotQuestionsSection h3 {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    margin: 0 0 0.5rem 0;
}

/* 年龄性别显示样式 */
#hotQuestionsAgeGender {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

/* 横向滚动容器样式 */
#hotQuestionsSection .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* 美化滚动条 */
#hotQuestionsSection .overflow-x-auto::-webkit-scrollbar {
    height: 4px;
}

#hotQuestionsSection .overflow-x-auto::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 2px;
}

#hotQuestionsSection .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

#hotQuestionsSection .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 问题列表样式 - 横向滚动 */
#hotQuestionsList {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 按钮容器样式 */
#hotQuestionsSection .text-right {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* 查看更多/收起按钮样式 */
#viewMoreQuestionsBtn,
#viewLessQuestionsBtn {
    font-size: 0.75rem;
    color: #7b4dff;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 按钮悬停样式 */
#viewMoreQuestionsBtn:hover,
#viewLessQuestionsBtn:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* 展开/收起动画 */
#hotQuestionsList li.hidden {
    display: none;
}

/* 脉冲动画（用于首次访问引导） */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 首次访问时标题的脉冲效果 */
#hotQuestionsSection[data-first-visit="true"] h3 {
    animation: pulse 2s ease-in-out infinite;
}

/* 淡入效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 热点问题区域的淡入动画 */
#hotQuestionsSection {
    animation: fadeIn 0.3s ease-out;
}

/* 响应式设计 */
@media (max-width: 640px) {
    #hotQuestionsSection {
        padding: 0.5rem;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    #hotQuestionsSection {
        background-color: #1f2937;
    }
    
    #hotQuestionsList li {
        color: #d1d5db;
        background-color: #334155;
        border-color: #475569;
    }
    
    #hotQuestionsList li:hover {
        color: #a78bfa;
        background-color: #475569;
        border-color: #64748b;
    }
    
    #hotQuestionsAgeGender {
        color: #9ca3af;
    }
    
    #hotQuestionsSection .overflow-x-auto::-webkit-scrollbar {
        background: #334155;
    }
    
    #hotQuestionsSection .overflow-x-auto::-webkit-scrollbar-thumb {
        background: #475569;
    }
}