/* ==================================================================
 * 评论区样式 —— 移植自 Joe 主题（https://github.com/HaoOuBa/Joe，ISC 许可）
 * 版权归原作者所有。此处仅提取评论相关规则，并做了三处适配：
 *   1. CSS 变量限定在 .joe_comment 作用域内
 *   2. 夜间模式跟随 Fluid 的 data-user-color-scheme
 *   3. 补上 Joe 依赖其全局 normalize 的列表重置
 * ================================================================== */

/* Joe 原本靠 normalize.css 的全局 reset 去掉列表符号，这里只对评论区补上。
   注意只重置 list-style —— 不能动 padding/margin，否则会盖掉 Joe 自己的间距规则 */
.joe_comment ol,
.joe_comment ul {
  list-style: none;
}

/* Joe 评论模块的 CSS 变量 —— 作用域限定在 .joe_comment 内，
   既不与 Fluid 的变量冲突，也不会外溢影响其他页面 */
.joe_comment {
  --theme: #409eff;
  --background: #fff;
  --background-grey: #f5f5f5;
  --back-trn-85: rgba(255, 255, 255, .85);
  --back-trn-6: rgba(255, 255, 255, .6);
  --main: #303133;
  --routine: #606266;
  --minor: #909399;
  --seat: #c0c4cc;
  --classA: #dcdfe6;
  --classB: #e4e7ed;
  --classC: #ebeef5;
  --classD: #f2f6fc;
  --radius-wrap: 8px;
  --radius-inner: 4px;
  --text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, .22);
  --back-line-color-left: var(--theme);
  --back-line-color-right: #05D1D3;
  --back-line: linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3);
  --back-line-right: linear-gradient(to right, var(--back-line-color-left), var(--back-line-color-right));
  --back-line-bottom: linear-gradient(to bottom, var(--back-line-color-left), var(--back-line-color-right));
  --border-line-bottom: linear-gradient(to bottom, var(--back-line-color-left), var(--back-line-color-right));
  --transition: .1s;
}

/* 深色模式：Joe 原本用 html[data-night=night]，这里跟随 Fluid 的配色属性 */
html[data-user-color-scheme='dark'] .joe_comment {
  --theme: #54b5db;
  --background: #232323;
  --back-line-color-left: var(--theme);
  --back-line-color-right: #6a80e3;
  --back-line-right: linear-gradient(to right, var(--back-line-color-left), var(--back-line-color-right));
  --back-trn-85: rgba(35, 35, 35, .85);
  --back-trn-6: rgba(35, 35, 35, .6);
  --main: #999;
  --routine: #888;
  --minor: #777;
  --seat: #666;
  --classA: #515253;
  --classB: #454545;
  --classC: #414243;
  --classD: #303030;
  --text-shadow: none;
  --box-shadow: none;
}

.joe_comment .joe_pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}
.joe_comment .joe_pagination li{margin-left:5px}
.joe_comment .joe_pagination li.active a{background:var(--back-line-right);color:#fff;font-weight:500}
.joe_comment .joe_pagination li a{display:flex;align-items:center;height:32px;color:var(--main);padding:0 15px;background:var(--background);border-radius:2px;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.joe_comment .joe_pagination li a:hover{background:var(--back-line-right);color:#fff}
.joe_comment .joe_pagination li a:hover .icon{fill:#fff}
.joe_comment .joe_pagination li a .icon{width:12px;height:12px;fill:var(--routine)}
.joe_comment .joe_pagination li a .icon-next{transform:rotate(180deg)}
.joe_comment{background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:15px}
.joe_comment__title{font-weight:500;text-align:center;font-size:24px;color:var(--main);text-shadow:var(--text-shadow);border-bottom:1px solid var(--classC);margin-bottom:15px;padding-bottom:15px}
.joe_comment__close{display:flex;align-items:center;justify-content:center;color:var(--routine)}
.joe_comment__close-icon{fill:var(--routine);margin-right:5px}
.joe_comment__respond-type{display:flex;align-items:center;justify-content:flex-end}
.joe_comment__respond-type .item{background:var(--classD);padding:0 15px;height:32px;color:var(--main);border:none}
.joe_comment__respond-type .item:first-child{border-top-left-radius:var(--radius-inner)}
.joe_comment__respond-type .item:last-child{border-top-right-radius:var(--radius-inner)}
.joe_comment__respond-type .item.active{color:#fff;background:var(--back-line-right)}
.joe_comment__respond-form{border-radius:6px 0 6px 6px;background:var(--classD)}
.joe_comment__respond-form .head{display:flex;align-items:center;border-bottom:1px solid var(--classA)}
.joe_comment__respond-form .head .list{flex:1}
.joe_comment__respond-form .head .list input{width:100%;border:none;background:rgba(0,0,0,0);padding:0 15px;height:40px;color:var(--routine)}
.joe_comment__respond-form .head .list:nth-child(2){position:relative}
.joe_comment__respond-form .head .list:nth-child(2)::after,.joe_comment__respond-form .head .list:nth-child(2)::before{content:"";position:absolute;top:50%;transform:translateY(-50%);width:1px;height:15px;background:var(--classA)}
.joe_comment__respond-form .body{padding:15px}
.joe_comment__respond-form .body .text{width:100%;height:200px;border:none;resize:none;vertical-align:middle;color:var(--routine);background:rgba(0,0,0,0)}
.joe_comment__respond-form .body .draw{position:relative;width:100%}
.joe_comment__respond-form .body .draw .line{display:flex;align-items:center;position:absolute;top:10px;left:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.joe_comment__respond-form .body .draw .line li{cursor:pointer;margin-right:10px;color:var(--main);transition:color .35s}
.joe_comment__respond-form .body .draw .line li.active{color:var(--theme)}
.joe_comment__respond-form .body .draw .color{display:flex;align-items:center;position:absolute;bottom:10px;left:10px}
.joe_comment__respond-form .body .draw .color li{width:20px;height:20px;border-radius:50%;margin:0 5px;cursor:pointer;transition:box-shadow .35s}
.joe_comment__respond-form .body .draw .color li.active{box-shadow:0 4px 10px rgba(0,0,0,.35)}
.joe_comment__respond-form .body .draw .color li:nth-child(1){background:#303133}
.joe_comment__respond-form .body .draw .color li:nth-child(2){background:#67c23a}
.joe_comment__respond-form .body .draw .color li:nth-child(3){background:#e6a23c}
.joe_comment__respond-form .body .draw .color li:nth-child(4){background:#f56c6c}
.joe_comment__respond-form .body .draw .icon{position:absolute;right:10px;cursor:pointer;fill:var(--minor);-webkit-user-select:none;-moz-user-select:none;user-select:none}
.joe_comment__respond-form .body .draw .icon-undo{top:10px}
.joe_comment__respond-form .body .draw .icon-animate{bottom:10px}
.joe_comment__respond-form .body .draw canvas{background:var(--background);border-radius:var(--radius-inner)}
.joe_comment__respond-form .foot{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 15px 15px}
.joe_comment__respond-form .foot .owo{min-height:32px;padding-top:3px}
.joe_comment__respond-form .foot .owo .seat{text-align:center;color:var(--routine);height:26px;line-height:26px;background:var(--background);opacity:.85;border-radius:13px;width:70px}
.joe_comment__respond-form .foot .submit{white-space:nowrap}
.joe_comment__respond-form .foot .submit .cancle{display:none;color:var(--main);cursor:pointer;margin-right:10px;transition:color .35s}
.joe_comment__respond-form .foot .submit .cancle:hover{color:var(--theme)}
.joe_comment__respond-form .foot .submit button{border-radius:3px;height:32px;padding:0 15px;border:none;background:var(--back-line-right);color:#fff;font-size:14px}
.joe_comment__respond-form .foot .submit button:hover{animation:5s ease-in-out 0s infinite normal none running shaked}
.joe_comment .comment-list{padding-top:15px}
.joe_comment .comment-list__item-contain .term{display:flex;margin-bottom:15px}
.joe_comment .comment-list__item-contain .term .avatar{width:48px;height:48px;border-radius:50%;margin-right:15px;padding:3px;border:1px solid var(--classD);-o-object-fit:cover;object-fit:cover}
.joe_comment .comment-list__item-contain .term .content{min-width:0;flex:1;border-bottom:1px solid var(--classC);padding-bottom:15px}
.joe_comment .comment-list__item-contain .term .content .user{display:flex;align-items:center;margin-bottom:8px;line-height:20px;color:var(--main)}
.joe_comment .comment-list__item-contain .term .content .user .author{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px}
.joe_comment .comment-list__item-contain .term .content .user .author a{color:#409eff}
.joe_comment .comment-list__item-contain .term .content .user .owner{flex-shrink:0;background:var(--back-line-right);color:#fff;padding:0 5px;border-radius:2px;font-style:normal}
.joe_comment .comment-list__item-contain .term .content .user .agent{margin-left:auto;font-size:12px;color:var(--minor)}
.joe_comment .comment-list__item-contain .term .content .user .agent .icon{margin-right:5px}
.joe_comment .comment-list__item-contain .term .content .user .waiting{color:#e6a23c;font-style:normal}
.joe_comment .comment-list__item-contain .term .content .substance{width:100%;background:var(--classD);padding:12px 15px;border-radius:0 var(--radius-inner) var(--radius-inner) 10px;color:var(--main);margin-bottom:8px;word-break:break-word;line-height:24px}
.joe_comment .comment-list__item-contain .term .content .substance .parent{color:#388bff;margin-bottom:5px;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:500}
.joe_comment .comment-list__item-contain .term .content .substance .owo_image{height:22px}
.joe_comment .comment-list__item-contain .term .content .substance .draw_image{max-width:100%}
.joe_comment .comment-list__item-contain .term .content .handle{display:flex;align-items:center;color:var(--minor)}
.joe_comment .comment-list__item-contain .term .content .handle .date{margin-right:10px}
.joe_comment .comment-list__item-contain .term .content .handle .reply{display:flex;align-items:center;color:var(--main);font-size:13px;cursor:pointer;transition:color .35s}
.joe_comment .comment-list__item-contain .term .content .handle .reply .icon{margin-right:5px}
.joe_comment .comment-list__item-contain .term .content .handle .reply:hover{color:var(--theme)}
.joe_comment .comment-list__item-contain .term .content .handle .reply:hover .icon{fill:var(--theme)}
.joe_comment .comment-list__item-children{padding-left:63px}
.joe_comment .comment-list__item-children .comment-list__item-children{padding-left:0}
.joe_comment .comment-list__item .joe_comment__respond{margin-left:63px;margin-bottom:15px;animation:showComment .5s}
.joe_comment .comment-list .comment-list{padding-top:0}
.joe_comment .joe_pagination{padding-top:0}
.joe_owo__contain{position:relative}
.joe_owo__contain .seat{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}
.joe_owo__contain .box{width:100%;display:none;background:var(--background);border-radius:var(--radius-inner);overflow:hidden;margin-top:15px}
.joe_owo__contain .box .scroll{display:none;max-height:200px;overflow-y:auto;overscroll-behavior:none;padding:5px}
.joe_owo__contain .box .scroll .item{text-align:center;width:5.5555555556%;display:inline-block;padding:5px;cursor:pointer;border-radius:var(--radius-inner);transition:background .25s}
.joe_owo__contain .box .scroll .item img{max-width:100%;max-height:100%}
.joe_owo__contain .box .scroll .item:hover{background:var(--classD)}
.joe_owo__contain .box .scroll:nth-child(4) .item{color:var(--routine);width:20%}
.joe_owo__contain .box .bar{display:flex;align-items:center;border-top:1px solid var(--classC)}
.joe_owo__contain .box .bar .item{line-height:30px;padding:0 10px;cursor:pointer;color:var(--routine);transition:background .25s,color .25s}
.joe_owo__contain .box .bar .item.active{color:#fff;background:var(--back-line-right)}
@keyframes wobble-bottom{16.65%{transform:skew(-12deg)}33.3%{transform:skew(10deg)}49.95%{transform:skew(-6deg)}66.6%{transform:skew(4deg)}83.25%{transform:skew(-2deg)}100%{transform:skew(0)}}
@keyframes showComment{0%{opacity:0;transform:scale(0.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(0.9)}100%{opacity:1;transform:scale(1)}}
@keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}
@keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}
@keyframes list_thumbnail_loading{0%{transform:scale(0.85)}100%{transform:scale(1)}}
@keyframes list_title_loading{0%{width:80%}100%{width:95%}}
@keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}
@keyframes profile-color-modes-illu-anim{0%{stroke:#666}}
@keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;animation-timing-function:ease-out}to{opacity:1}}
@keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;animation-timing-function:ease-in}to{opacity:0}}
@keyframes shaked{2%{transform:translateY(1.5px) rotate(1.5deg)}4%{transform:translateY(-1.5px) rotate(-0.5deg)}6%{transform:translateY(1.5px) rotate(-1.5deg)}8%{transform:translateY(-1.5px) rotate(-1.5deg)}10%{transform:translateY(2.5px) rotate(1.5deg)}12%{transform:translateY(-0.5px) rotate(1.5deg)}14%{transform:translateY(-1.5px) rotate(1.5deg)}16%{transform:translateY(-0.5px) rotate(-1.5deg)}18%{transform:translateY(0.5px) rotate(-1.5deg)}20%{transform:translateY(-1.5px) rotate(2.5deg)}22%{transform:translateY(0.5px) rotate(-1.5deg)}24%{transform:translateY(1.5px) rotate(1.5deg)}26%{transform:translateY(0.5px) rotate(0.5deg)}28%{transform:translateY(0.5px) rotate(1.5deg)}30%{transform:translateY(-0.5px) rotate(2.5deg)}32%,34%{transform:translateY(1.5px) rotate(-0.5deg)}36%{transform:translateY(-1.5px) rotate(2.5deg)}38%{transform:translateY(1.5px) rotate(-1.5deg)}40%{transform:translateY(-0.5px) rotate(2.5deg)}42%{transform:translateY(2.5px) rotate(-1.5deg)}44%{transform:translateY(1.5px) rotate(0.5deg)}46%{transform:translateY(-1.5px) rotate(2.5deg)}48%{transform:translateY(-0.5px) rotate(0.5deg)}50%{transform:translateY(0.5px) rotate(0.5deg)}52%{transform:translateY(2.5px) rotate(2.5deg)}54%{transform:translateY(-1.5px) rotate(1.5deg)}56%{transform:translateY(2.5px) rotate(2.5deg)}58%{transform:translateY(0.5px) rotate(2.5deg)}60%{transform:translateY(2.5px) rotate(2.5deg)}62%{transform:translateY(-0.5px) rotate(2.5deg)}64%{transform:translateY(-0.5px) rotate(1.5deg)}66%{transform:translateY(1.5px) rotate(-0.5deg)}68%{transform:translateY(-1.5px) rotate(-0.5deg)}70%{transform:translateY(1.5px) rotate(0.5deg)}72%{transform:translateY(2.5px) rotate(1.5deg)}74%{transform:translateY(-0.5px) rotate(0.5deg)}76%{transform:translateY(-0.5px) rotate(2.5deg)}78%{transform:translateY(-0.5px) rotate(1.5deg)}80%{transform:translateY(1.5px) rotate(1.5deg)}82%{transform:translateY(-0.5px) rotate(0.5deg)}84%{transform:translateY(1.5px) rotate(2.5deg)}86%{transform:translateY(-1.5px) rotate(-1.5deg)}88%{transform:translateY(-0.5px) rotate(2.5deg)}90%{transform:translateY(2.5px) rotate(-0.5deg)}92%{transform:translateY(0.5px) rotate(-0.5deg)}94%{transform:translateY(2.5px) rotate(0.5deg)}96%{transform:translateY(-0.5px) rotate(1.5deg)}98%{transform:translateY(-1.5px) rotate(-0.5deg)}0%,100%{transform:translate(0px) rotate(0deg)}}
@keyframes overdue{0%{-webkit-clip-path:circle(0 at 0 0);clip-path:circle(0 at 0 0)}100%{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}
@keyframes progress-active{0%{opacity:.3;width:0}to{opacity:0;width:100%}}
@keyframes lamp-background{0%,24.9%{background-color:#54b5db}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,to{background-color:#fdba2c}}
@keyframes lamp-front{0%{transform:scaleX(0);background-color:#da4733}24.9%{transform:scaleX(0.5);background-color:#da4733}25%{transform:scaleX(0);background-color:#3b78e7}49.9%{transform:scaleX(0.5);background-color:#3b78e7}50%{transform:scaleX(0);background-color:#fdba2c}74.9%{transform:scaleX(0.5);background-color:#fdba2c}75%{transform:scaleX(0);background-color:#409eff}to{transform:scaleX(0.5);background-color:#409eff}}
@keyframes showHeaderTitle{0%{opacity:.25;transform:scale(0.25)}100%{opacity:1;transform:scale(1)}}
@keyframes move-forever{0%{transform:translate3d(-90px, 0, 0)}to{transform:translate3d(85px, 0, 0)}}
@keyframes swingIconSet{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}