#commentTextarea {
    outline: none;
    border: none;
    resize: none;
    width: 100%;
    padding: 15px
}

#nav-tabContent #nav-comment .comment-pane {
    border: 2px solid var(--bs-border-color);
    border-radius: 2px;
}

.comment-button-group {
    padding: 10px;
}

.commentsContainer {
    color: var(--bs-body-color);
}

/* 干掉 markdown 语法导致的样式不一样 */
.comment-container h1,
.comment-container h2,
.comment-container h3,
.comment-container h4,
.comment-container h5,
.comment-container h6,
.comment-container strong {
    font-size: 1em;
    font-weight: normal;
    margin: 5px 0;
    padding: 0 0;
    line-height: 1.75;
    color: var(--bs-emphasis-color);
}

#commentsContainer img, #repliesModal img {
    width: 35px;
    height: 35px;
    border-radius: 35px;
}

.header {
    height: 30px;
    background-color: var(--bs-dark);
}

.cursor {
    cursor: pointer;
}

/* 导航栏被选中的按钮样式 */
.disabled-button {
    background-color: var(--bs-border-color);
}

.disabled-button :hover {
    background-color: var(--bs-border-color);
}

.reply-textarea {
    border: 2px solid var(--bs-secondary-bg);
    outline: none;
    border-radius: 1px;
    resize: none;
    width: 100%;
}

.nick {
    color: var(--bs-secondary-color);
    font-size: 14px;
}

.time {
    color: var(--bs-tertiary-color);
    font-size: 12px;
}

.reply-key-word {
    color: var(--bs-primary);
}

/* 评论区 */
.comment-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 15px;
    margin-top: 40px;
}

/* 列表部分 */
.comments-list,
.replies-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 列表项部分 */
.comment-item,
.reply-item {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* 评论部分添加分割线 */
.comment-item {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bs-border-color);
}

/* 头像部分 CSS */
.comment-avatar-container,
.reply-avatar-container {
    display: flex;
    flex: 0 0 0;
    /* 宽度根据内容设置 */
    width: 40px;
    height: 40px;
    /* 确保图片不会超出容器范围 */
}

.comment-avatar-container img,
.reply-avatar-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    /* 裁剪而非变形来适配容器 */
}

.reply-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 评论细节部分 CSS */
.comment-details,
.reply-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 0;
    width: 0;
    /* 占据剩余的空间 */
    gap: 10px;
}

/* 用户信息 */
.comment-header,
.reply-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

/* 评论 / 回复作者链接样式 */

.replied-author-link,
.reply-author-link,
.comment-author-link {
    text-decoration: none;
}

/* 评论 / 回复作者昵称样式 */
.comment-author,
.reply-author,
.replied-author {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    font-size: 14px;
    font-weight: 500;
}

/* 日期样式 */
.comment-date,
.reply-date {
    font-size: 12px;
    /* 日期的字体大小稍小 */
    color: var(--bs-tertiary-color);
    /* 日期颜色 */
}

.comment-body, .reply-body {
    width: 100%;
}

/* 评论内容样式 */
.comment-content,
.reply-content {
    color: var(--bs-body-color);
    /* 评论和回复内容的颜色 */
    font-size: 14px;
    /* 内容的字体大小 */
    line-height: 1.5;
    /* 行高，提高可读性 */
}
/* 修复样式错乱的问题... */
#commentsContainer pre code {
    overflow-x: scroll;
}

#commentsContainer pre {
    margin: 1em 0;
}

/* 评论交互部分 */
.comment-actions,
.reply-actions {
    display: flex;
    gap: 20px;
    /* 为操作项之间提供一些间隙 */
    align-items: center;
}

/* 调整交互部分图标大小 */
.comment-actions .bi-caret-up,
.comment-actions .bi-caret-up-fill,
.reply-actions .bi-caret-up,
.reply-actions .bi-caret-up-fill {
    font-size: 1.5em;
}

/* 交互按钮部分 CSS，去除默认 CSS 样式 */
.comment-actions>button,
.reply-actions>button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

/* 鼠标悬停和聚焦时的样式 */
.comment-actions>button:hover,
.reply-actions>button:hover,
.comment-actions>button:focus,
.reply-actions>button:focus {
    background: none;
    color: var(--bs-primary);
    outline: none;
}

.action-like,
.action-reply {
    display: flex;
    align-items: center;
    /* 垂直居中图标和文字 */
    gap: 5px;
    /* 在图标和计数器之间提供一些空间 */
    cursor: pointer;
    /* 鼠标悬停时显示指针，增加交互感 */
}

.action-like span,
.action-reply span {
    font-size: 13px;
    /* 操作按钮的字体大小 */
    color: var(--bs-body-color);
    /* 按钮文本颜色 */
}