/* comments.css */

/* Butterfly 风格评论样式 */
:root {
    --butterfly-theme-color: #49b1f5;
    --butterfly-input-bg: #f5f5f5;
    --butterfly-border-radius: 8px;
    --butterfly-shadow: 0 8px 16px -4px rgba(2, 4, 7, .1);
}

/* 评论区容器 */
.comments-section {
    margin: 2rem auto;
    /* 1140 相当于col */
    max-width: 100%;   
}

/* 评论表单卡片 */
.comment-form-card {
    background: #fff;
    border-radius: var(--butterfly-border-radius);
    box-shadow: var(--butterfly-shadow);
    margin-bottom: 2rem;
    padding: 1.5rem;
}

/* 评论表单样式 */
.comment-form {
    position: relative;
}

/* 输入框通用样式 */
.comment-form .form-control {
    border: none;
    background-color: var(--butterfly-input-bg);
    border-radius: var(--butterfly-border-radius);
    padding: 0.8rem 1rem;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.comment-form .form-control:focus {
    background-color: #fff;
    box-shadow: 0 0 0 2px var(--butterfly-theme-color);
}

/* 评论框特殊样式 */
.comment-form textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* 个人信息输入区 */
.comment-info-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

/* 提交按钮 */
.comment-submit-btn {
    background: var(--butterfly-theme-color);
    color: #fff;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: var(--butterfly-border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
}

.comment-submit-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* 验证码区域 */
.captcha-field {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.captcha-field img {
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
}

/* 评论列表样式 */
.comment-list {
    margin-top: 2rem;
}

.comment-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: #fff;
    border-radius: var(--butterfly-border-radius);
    box-shadow: var(--butterfly-shadow);
    transition: all 0.3s ease;
}

.comment-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--butterfly-shadow);
}

/* 头像样式 */
.comment-avatar {
    flex-shrink: 0;
}

.comment-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.comment-avatar img:hover {
    transform: rotate(360deg);
}

/* 评论内容区 */
.comment-content {
    flex: 1;
}

.comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.comment-author {
    font-weight: 600;
    color: var(--butterfly-theme-color);
}

.comment-date {
    color: #999;
    font-size: 0.9rem;
}

/* 回复和点赞按钮 */
.comment-actions {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.comment-reply-btn,
.comment-like-btn {
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.3s ease;
}

.comment-reply-btn:hover,
.comment-like-btn:hover {
    color: var(--butterfly-theme-color);
}

/* 回复区域 */
.comment-item.reply {
    margin-left: 3rem;
    background: #f8f9fa;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .comment-info-inputs {
        grid-template-columns: 1fr;
    }
    
    .comment-item.reply {
        margin-left: 1.5rem;
    }
    
    .comment-form {
        padding: 1rem;
    }
}




/* 目标：PrismJS 代码块中的 code 标签 */
 pre[class*="language-"] code[class*="language-"] {
    /* ... 原有样式 ... */
    white-space: pre-wrap !important; /* 使用 !important 提高优先级 */
    word-wrap: break-word !important; /* 使用 !important 提高优先级 */
    overflow-wrap: break-word !important; /* 现代浏览器推荐使用 overflow-wrap */
}

/* 目标：PrismJS 代码块中的 pre 标签 (再次确认) */
pre[class*="language-"] {
     /* ... 原有样式 ... */
     white-space: pre-wrap !important; /* 确保 pre 也应用 */
     word-wrap: break-word !important;
     overflow-wrap: break-word !important;
     overflow-x: auto !important; /* 确保滚动条可用 */
}