/* 评论区 —— 极简风格（扁平、无渐变、无阴影、无炫技动效，主色 #409eff 克制使用） */

/* 头部 */
.xu5-comments-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 0 8px;
   background: transparent;
   border-bottom: 1px solid #eee;
}

.xu5-comments-title {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 15px;
   font-weight: 600;
   color: #1a1a1a;
}

.xu5-comments-title .comments-count {
   font-size: 0.7em;
   font-weight: 500;
   color: #888;
   background: #f2f3f5;
   padding: 3px 10px;
   border-radius: 4px;
}

.comment-sort-select {
   padding: 6px 12px;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   background: #fff;
   color: #555;
   font-size: 14px;
   cursor: pointer;
   transition: border-color 0.15s;
}

.comment-sort-select:hover,
.comment-sort-select:focus {
   outline: none;
   border-color: #409eff;
}

/* 加载更多 */
.xu5-load-more-comments {
   text-align: center;
   padding: 10px 0;
   border-top: 1px solid #eee;
   background: transparent;
}

.xu5-load-more-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 22px;
   background: #fff;
   border: 1px solid #409eff;
   border-radius: 4px;
   color: #409eff;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
}

.xu5-load-more-btn:hover {
   background: #409eff;
   color: #fff;
}

.xu5-load-more-btn .btn-count {
   font-size: 12px;
   opacity: 0.75;
}

/* 列表去点 */
.xu5-tutorial-comments ul,
.xu5-tutorial-comments ol,
.xu5-tutorial-comments li,
.xu5-tutorial-comments .comment-list {
   list-style: none !important;
   margin: 0;
   padding: 0;
}

/* 评论项 */
.xu5-tutorial-comments .xu5-comment-item {
   padding: 8px 10px 8px 40px;
   position: relative;
   transition: border-color 0.15s;
   margin-bottom: 6px;
   background: #fff;
   border-radius: 4px;
   border: 1px solid #e8e8e8;
   list-style: none !important;
}

.xu5-tutorial-comments .xu5-comment-item:hover {
   border-color: #d8d8d8;
}

.xu5-tutorial-comments .xu5-comment-item:last-child {
   margin-bottom: 0;
}

/* 楼层号由 JS 写入 .floor-number */
.xu5-tutorial-comments .floor-number {
   position: absolute;
   left: 8px;
   top: 8px;
   font-size: 11px;
   font-weight: 600;
   color: #409eff;
   background: #f0f6ff;
   width: 24px;
   height: 24px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.xu5-tutorial-comments .children .floor-number {
   display: none !important;
}

/* 作者评论 */
.xu5-tutorial-comments .bypostauthor.xu5-comment-item {
   border-color: #d9ecff;
   background: #f7faff;
}

.xu5-tutorial-comments .bypostauthor.xu5-comment-item > .floor-number {
   background: #409eff;
   color: #fff;
}

.xu5-tutorial-comments .bypostauthor .xu5-comment-author::after {
   content: '作者';
   display: inline-block;
   margin-left: 4px;
   background: #409eff;
   color: #fff;
   font-size: 10px;
   padding: 0 5px;
   border-radius: 3px;
   font-weight: 500;
   line-height: 1.5;
   vertical-align: middle;
}

/* 评论头部 */
.xu5-tutorial-comments .xu5-comment-header {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   margin-bottom: 2px;
   gap: 6px;
}

.xu5-tutorial-comments .xu5-comment-author {
   font-weight: 600;
   font-size: 13px;
   color: #1a1a1a;
}

.xu5-tutorial-comments .xu5-comment-date {
   color: #999;
   font-size: 12px;
   font-weight: 400;
}

.xu5-tutorial-comments .xu5-comment-await {
   color: #e6a23c;
   font-size: 12px;
   font-weight: 500;
}

/* 评论内容 */
.xu5-tutorial-comments .xu5-comment-content {
   margin: 0;
}

.xu5-tutorial-comments .xu5-comment-content p {
   margin: 0;
   font-size: 13px;
   line-height: 1.5;
   color: #333;
   font-weight: 400;
}

.xu5-tutorial-comments .xu5-comment-content p + p {
   margin-top: 4px;
}

/* 回复按钮 - 收到信息行右侧 */
.xu5-tutorial-comments .xu5-comment-reply {
   display: inline-flex;
   align-items: baseline;
   margin-left: auto;
   color: #409eff;
   text-decoration: none;
   font-size: 12px;
   font-weight: 500;
   line-height: 1;
}

.xu5-tutorial-comments .xu5-comment-reply a {
   color: inherit;
   text-decoration: none;
}

.xu5-tutorial-comments .xu5-comment-reply:hover,
.xu5-tutorial-comments .xu5-comment-reply a:hover {
   color: #337ecc;
   text-decoration: underline;
}

/* 嵌套评论 */
.xu5-tutorial-comments .children {
   margin: 6px 0 0;
   padding: 0;
   position: relative;
   list-style: none !important;
}

.xu5-tutorial-comments .children .children {
   margin-left: 0 !important;
}

.xu5-tutorial-comments .children .xu5-comment-item {
   background: #f7f8fa;
   border-radius: 4px;
   margin-bottom: 4px;
   border: 1px solid #eef0f2;
   position: relative;
   list-style: none !important;
   padding: 6px 8px;
}

.xu5-tutorial-comments .children .xu5-comment-item:hover {
   border-color: #e4e7ed;
}

.xu5-tutorial-comments .children .xu5-comment-item:last-child {
   margin-bottom: 0;
}

/* 回复标记 */
.xu5-tutorial-comments .xu5-reply-to {
   color: #409eff;
   font-size: 12px;
   font-weight: 500;
}

.xu5-tutorial-comments .xu5-reply-to .reply-name {
   color: #409eff;
}

/* 评论表单 - 紧凑 */
.xu5-tutorial-comments form.comment-form {
   background: transparent;
   padding: 12px 0 0;
   border-top: none;
   position: relative;
   margin-top: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.xu5-tutorial-comments form.comment-form .comment-reply-title,
.xu5-tutorial-comments .comment-reply-title,
#reply-title {
   display: none;
}

.xu5-tutorial-comments #reply-title:has(#cancel-comment-reply-link[style*="display:inline"]),
.xu5-tutorial-comments #reply-title:has(#cancel-comment-reply-link[style*="display: inline"]) {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   width: 100%;
   margin: 0;
   font-size: 13px;
   font-weight: 600;
   color: #333;
}

.xu5-tutorial-comments form.comment-form .comment-form-comment {
   position: relative;
   width: 100%;
}

.xu5-tutorial-comments form.comment-form textarea {
   padding-bottom: 28px;
   min-height: 64px;
   resize: vertical;
   transition: min-height 0.15s;
}

.xu5-tutorial-comments form.comment-form textarea.is-expanded,
.xu5-tutorial-comments form.comment-form textarea:focus {
   min-height: 120px;
}

.xu5-tutorial-comments .char-counter {
   position: absolute;
   bottom: 8px;
   right: 10px;
   font-size: 12px;
   color: #aaa;
   pointer-events: none;
}

.xu5-tutorial-comments .char-counter.warning {
   color: #e6a23c;
}

.xu5-tutorial-comments .char-counter.error {
   color: #f56c6c;
}

.xu5-tutorial-comments form.comment-form label {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.xu5-tutorial-comments form.comment-form input:not([type="hidden"]):not([type="submit"]),
.xu5-tutorial-comments form.comment-form textarea {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   margin-bottom: 0;
   font-size: 14px;
   font-family: inherit;
   background: #fff;
   transition: border-color 0.15s;
   box-sizing: border-box;
}

.xu5-tutorial-comments form.comment-form input:focus,
.xu5-tutorial-comments form.comment-form textarea:focus {
   outline: none;
   border-color: #409eff;
}

.xu5-tutorial-comments form.comment-form input[type="submit"] {
   width: auto;
   background: #409eff;
   color: #fff;
   border: none;
   padding: 8px 18px;
   border-radius: 4px;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   transition: background 0.15s;
}

.xu5-tutorial-comments form.comment-form input[type="submit"]:hover {
   background: #337ecc;
}

/* 提示信息 */
.xu5-tutorial-comments .comment-notes,
.xu5-tutorial-comments .logged-in-as {
   width: 100%;
   background: none;
   border: none;
   border-radius: 0;
   padding: 0;
   font-size: 12px;
   color: #999;
}

.xu5-tutorial-comments .logged-in-as a {
   color: #409eff;
   text-decoration: none;
}

.xu5-tutorial-comments .logged-in-as a:hover {
   text-decoration: underline;
}

.xu5-tutorial-comments .required {
   color: #f56c6c;
}

.xu5-tutorial-comments form.comment-form > p {
   width: 100%;
   margin: 0;
}

.xu5-tutorial-comments form.comment-form > p.form-submit {
   text-align: right;
}

.xu5-tutorial-comments form.comment-form > p.comment-form-author,
.xu5-tutorial-comments form.comment-form > p.comment-form-email {
   width: calc(50% - 7px);
   flex: 0 0 calc(50% - 7px);
}

/* Toast 提示框 */
#comment-toast {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #303133;
   color: #fff;
   padding: 18px 40px;
   border-radius: 8px;
   font-size: 1.1rem;
   z-index: 9999;
   transition: opacity 0.3s;
   width: auto;
   max-width: 90vw;
   text-align: center;
}

/* 移动端 */
@media (max-width: 768px) {
   .xu5-tutorial-comments {
      margin: 16px 0;
      border-radius: 8px;
   }

   .xu5-comments-header {
      flex-direction: row;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
   }

   .xu5-tutorial-comments .floor-number {
      display: none !important;
   }

   .xu5-tutorial-comments .xu5-comment-item {
      padding: 8px 10px;
   }

   .xu5-tutorial-comments .xu5-comment-header {
      gap: 4px;
   }

   .xu5-tutorial-comments .xu5-comment-date {
      font-size: 11px;
   }

   .xu5-tutorial-comments form.comment-form {
      padding: 10px 0 0;
   }

   .xu5-tutorial-comments form.comment-form > p.comment-form-author,
   .xu5-tutorial-comments form.comment-form > p.comment-form-email {
      width: 100%;
      flex: 0 0 100%;
   }
}

@media (max-width: 500px) {
   #comment-toast {
      font-size: 1rem !important;
      padding: 12px 8vw !important;
      border-radius: 8px !important;
      max-width: 94vw !important;
   }
}