/*comments*/
ol.comment-list li {
    display: grid;
}

.comment-children {
    order: 1;
}

.cancel-comment-reply {
    display: inline-block;
    font-weight: 300;
    font-size: 12px;
}

.cancel-comment-reply a {
    color: #717171;
}

.reply-submit {
    width: 100%;
}

.reply-submit button {
    width: 150px; /* 调整按钮宽度 */
    padding: 12px 20px; /* 调整内边距 */
    float: right;
    background: var(--bs-main); /* 使用主题主色 */
    color: #fff;
    border: none;
    border-radius: 25px; /* 更大的圆角，使其看起来像胶囊按钮 */
    font-size: 16px; /* 字号 */
    font-weight: bold; /* 加粗字体 */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
    box-shadow: 0 4px 6px rgba(var(--bs-main-rgb), 0.2); /* 按钮阴影 */
}

.reply-submit button:hover {
    background-color: #a04a30; /* 鼠标悬停时颜色变深 */
    transform: translateY(-2px); /* 向上轻微浮动 */
    box-shadow: 0 6px 8px rgba(var(--bs-main-rgb), 0.3); /* 鼠标悬停时阴影增强 */
}

.reply-submit button:active {
    transform: translateY(0); /* 点击时恢复原位 */
    box-shadow: 0 2px 4px rgba(var(--bs-main-rgb), 0.2); /* 点击时阴影减弱 */
}

.reply-text {
    margin-top: 10px;
}

.reply-text textarea {
    width: 100%;
    height: 150px;
    background-color: #f8f8f8; /* 浅色模式背景色，可以更亮 */
    border: 1px solid #e0e0e0; /* 边框 */
    padding: 15px; /* 调整内边距 */
    font-size: 15px; /* 调整字号 */
    color: #333; /* 文字颜色 */
    border-radius: 8px; /* 圆角 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); /* 内部阴影，增加立体感 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
}

.reply-text textarea:focus {
    border-color: var(--bs-main); /* 聚焦时边框颜色 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 8px rgba(var(--bs-main-rgb), 0.3); /* 聚焦时外部阴影 */
    outline: none; /* 移除默认聚焦轮廓 */
}

.dark .reply-text textarea {
    background-color: #2b2b2b; /* 黑暗模式背景色 */
    color: #c9c9c9; /* 黑暗模式文字颜色 */
    border: 1px solid #444; /* 黑暗模式边框 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); /* 黑暗模式内部阴影 */
}

.dark .reply-text textarea:focus {
    border-color: var(--bs-main); /* 黑暗模式聚焦时边框颜色 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 8px rgba(var(--bs-main-rgb), 0.3); /* 黑暗模式聚焦时外部阴影 */
}

#response {
    font-size: 16px;
    margin-bottom: 15px;
    display: inline-block;
}

.response-input {
    position: relative;
}

element.style {}

@media (max-width: 992px) {
    .response-input {
        width: 100%;
        margin: 0px 0px 5px 0px;
    }
}

.response-input i {
    position: absolute;
    top: 15px;
    left: 28px;
    color: #333;
}

.dark .response-input i {
    color: #c9c9c9;
}

.response-input input {
    width: 100%;
    background-color: #f8f8f8; /* 浅色模式背景色 */
    border: 1px solid #e0e0e0; /* 边框 */
    padding: 15px 5px 15px 40px; /* 调整内边距，左侧留出图标位置 */
    font-size: 15px; /* 调整字号 */
    color: #333;
    border-radius: 8px; /* 圆角 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); /* 内部阴影 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
    margin-bottom: 10px; /* 增加输入框之间的间距 */
}

.response-input input:focus {
    border-color: var(--bs-main); /* 聚焦时边框颜色 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 8px rgba(var(--bs-main-rgb), 0.3); /* 聚焦时外部阴影 */
    outline: none;
}

.dark .response-input input {
    background-color: #2b2b2b; /* 黑暗模式背景色 */
    color: #c9c9c9;
    border: 1px solid #444; /* 黑暗模式边框 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); /* 黑暗模式内部阴影 */
}

.dark .response-input input:focus {
    border-color: var(--bs-main); /* 黑暗模式聚焦时边框颜色 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 8px rgba(var(--bs-main-rgb), 0.3); /* 黑暗模式聚焦时外部阴影 */
}

.comment-list img.avatar {
    border-radius: 50%;
    width: 70px;
}

.comment-author {
    display: flex;
}

.comment-author .fn {
    font-size: 16px;
    font-weight: inherit;
    font-style: normal;
    margin-left: 15px;
    margin-top: 10px;
}

.comment-meta {
    margin-top: -35px;
    margin-left: 85px;
}

.comment-meta a {
    color: #717171;
}

.comment-content {
    font-size: 16px;
    margin-left: 85px;
    margin-top: 10px;
}

.comment-reply {
    margin-left: 85px;
    padding-bottom: 40px;
}

.comment-reply a {
    color: #333;
    font-weight: 300;
    border-bottom: 1px solid #606060;
    font-size: 13px;
}

ol.comment-list ol.comment-list {
    padding-left: 20px;
}

ol.comment-list ol.comment-list ol.comment-list ol.comment-list {
    padding-left: unset;
}