@charset "UTF-8";
/* ============================================================
   TechLight · 二开评论插件（e/zhb1190/pl）浅色适配
   ------------------------------------------------------------
   加载顺序：插件自带 comment.css → style.css → content.css → 本文件
   本文件用高特异性选择器覆盖插件 .m_* 样式，不改变插件 DOM 与逻辑。
   主要节点：
     #infocommentarea.commentbox
       #comment-form > .m_comt-title / .m_comt / .m_comt-box / .m_comt-ctrl
       #postcomments > #comments > li.m_comment > .m_c-avatar/.m_c-main
       .ecomment / .ecommentauthor / p.ecommenttext / .m_c-meta
   ============================================================ */

.tl-comments #infocommentarea,
#infocommentarea.commentbox{
  width:100%;max-width:100%;margin:0;padding:0;background:transparent;
  border:0;box-shadow:none;color:var(--text);font-family:var(--sans);
  font-size:13.5px;line-height:1.8;
}
.tl-comments #infocommentarea *,
#infocommentarea.commentbox *{box-sizing:border-box}

/* ---------- 评论标题栏 ---------- */
#infocommentarea #comment-form{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:16px 18px;margin:0 0 22px;box-shadow:var(--shadow);
}
#infocommentarea .m_comt-title{
  border:0;border-bottom:1px solid var(--line);background:transparent;
  padding:0 0 12px;margin:0 0 14px;min-height:0;height:auto;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
#infocommentarea .m_comt-title::after{content:"";display:block;clear:both}
#infocommentarea .m_comt-avatar{margin:0 10px 0 0}
#infocommentarea .m_comt-avatar img.m_avatar{
  width:38px;height:38px;border-radius:7px;border:1px solid var(--line);
  background:var(--surface2);padding:2px;
}
#infocommentarea .m_comt-author{
  font-family:var(--mono);font-size:12px;letter-spacing:1px;
  color:var(--text);font-weight:600;float:none;
}
#infocommentarea .m_comt-author span::before{
  content:"// ";color:var(--accent);font-weight:400;
}
#infocommentarea a.m_switch-author{
  color:var(--text3);font-size:11px!important;margin-left:10px;
  font-family:var(--mono);border-bottom:1px dashed var(--line2);
}
#infocommentarea a.m_switch-author:hover,
#infocommentarea a#cancel-comment-reply-link:hover{color:var(--accent)}
#infocommentarea a#cancel-comment-reply-link{
  color:var(--text3);font-size:11px;font-family:var(--mono);
  margin-left:auto;float:none;
}

/* ---------- 输入框 ---------- */
#infocommentarea .m_comt,
#infocommentarea .m_comt-box{background:transparent;border:0;padding:0;margin:0}
#infocommentarea textarea.m_comt-area,
#infocommentarea textarea.m_input-block-level,
#infocommentarea input.m_ipt,
#infocommentarea input[type="text"],
#infocommentarea input[type="password"]{
  background:var(--surface2);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:6px;
  padding:9px 12px;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.7;
  box-shadow:none;
  outline:0;
  transition:border-color .15s,box-shadow .15s;
  width:100%;
}
#infocommentarea textarea.m_comt-area{
  min-height:92px;resize:vertical;display:block;font-family:var(--sans);
}
#infocommentarea textarea:focus,
#infocommentarea input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
#infocommentarea textarea::placeholder,
#infocommentarea input::placeholder{color:var(--text3)}
#infocommentarea .m_comt-ctrl{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:11px;padding:0;border:0;background:transparent;min-height:0;
}
#infocommentarea .m_comt-tips{
  display:flex;align-items:center;gap:8px;float:none;margin:0;
  font-size:11.5px;color:var(--text3);
}
#infocommentarea .m_comt-tips input#key{width:84px!important;padding:6px 9px;font-family:var(--mono)}
#infocommentarea .m_comt-tips img#wyzm{
  border:1px solid var(--line);border-radius:4px;height:30px!important;
  margin:0!important;background:var(--surface);
}
#infocommentarea button.m_btn,
#infocommentarea button.m_btn-primary,
#infocommentarea input[type="submit"].m_btn{
  background:var(--accent);color:#fff;
  border:1px solid var(--accent);border-radius:6px;
  padding:8px 18px;font-family:var(--sans);font-size:13px;font-weight:600;
  text-shadow:none;box-shadow:none;cursor:pointer;float:none;margin:0 0 0 auto;
  line-height:1.5;
}
#infocommentarea button.m_btn:hover{filter:brightness(1.08);color:#fff}
#infocommentarea .m_btn i.m_fa{margin-right:5px}
#infocommentarea .m_comt-comterinfo{margin-top:12px;padding:0;border:0;background:transparent}
#infocommentarea .m_comt-comterinfo ul,
#infocommentarea .m_comt-comterinfo li{
  list-style:none;margin:0;padding:0;border:0;background:transparent;
}
#infocommentarea li.m_form-inline{display:flex;align-items:center;gap:10px;margin:8px 0!important;float:none}
#infocommentarea li.m_form-inline input.m_ipt{width:190px}
#infocommentarea li.m_form-inline input.m_chkbox{width:auto}
#infocommentarea .m_help-inline,
#infocommentarea span.m_help-inline{font-size:11px;color:var(--text3);font-family:var(--mono)}
#infocommentarea .m_muted,
#infocommentarea .m_muted a{color:var(--text3)}

/* ---------- 评论列表 ---------- */
#infocommentarea #postcomments,
#infocommentarea #comments{
  margin:0;padding:0;list-style:none;background:transparent;border:0;
}
#infocommentarea #postcomments > h3,
#infocommentarea #comments > h3,
.tl-comments .m_base-tit{
  font-family:var(--mono);font-size:12px;letter-spacing:1.5px;color:var(--text);
  border-bottom:1px solid var(--line);padding-bottom:9px;margin:0 0 8px;font-weight:600;
}
#infocommentarea ul.m_commentlist,
#infocommentarea ol.m_commentlist{list-style:none;padding:0;margin:0}
#infocommentarea li.m_comment{
  list-style:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 16px;
  margin:0 0 10px;
  position:relative;
  clear:both;
  min-height:0;
  float:none;
}
#infocommentarea li.m_comment:hover{border-color:var(--line2)}
/* 插件输出的 HTML 里 .m_c-main 被套在 .m_c-avatar 内部（少了一个闭合 div），
   所以不能给 .m_c-avatar 固定宽度，否则正文被挤成一条竖线。
   改成 flex 行：头像定宽、正文自适应。 */
#infocommentarea .m_c-avatar{
  float:none;width:auto;margin:0;
  display:flex;align-items:flex-start;gap:12px;
}
#infocommentarea .m_c-avatar img{
  /* 插件原文是 .m_c-avatar .m_avatar{position:absolute}，
     绝对定位会脱离 flex 流、直接压在正文上，这里必须还原为普通流内元素 */
  position:static;
  flex:0 0 36px;
  width:36px;height:36px;border-radius:7px;border:1px solid var(--line);
  background:var(--surface2);padding:2px;
  object-fit:cover;
}
#infocommentarea .m_c-main{
  flex:1 1 auto;min-width:0;
  margin:0;padding:0;background:transparent;border:0;
  color:var(--text);font-size:13.5px;line-height:1.85;overflow:visible;
}
#infocommentarea .m_c-main::before,
#infocommentarea .m_c-main::after{display:none;content:none;border:0}
#infocommentarea .m_c-meta{
  margin:0 0 7px;padding:0;border:0;background:transparent;
  font-family:var(--mono);font-size:11px;color:var(--text3);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
#infocommentarea .m_c-author,
#infocommentarea .m_c-author a{color:var(--text);font-size:12px;font-weight:600;font-family:var(--sans)}
#infocommentarea .m_c-author a:hover{color:var(--accent)}
#infocommentarea a.m_url{color:var(--accent)}
#infocommentarea p.ecommenttext,
#infocommentarea .m_c-main p{
  margin:0 0 .5em;color:var(--text2);font-size:13.5px;line-height:1.85;
}
#infocommentarea p.ecommenttext:last-child{margin-bottom:0}
/* 引用回复 */
#infocommentarea .ecomment{
  background:var(--surface2);
  border:1px solid var(--line);
  border-left:3px solid var(--accent2);
  border-radius:0 6px 6px 0;
  padding:9px 12px;margin:0 0 9px;
  color:var(--text2);font-size:12.5px;
}
#infocommentarea span.ecommentauthor{
  display:block;font-family:var(--mono);font-size:10.5px;
  color:var(--accent2);letter-spacing:.5px;margin-bottom:3px;
}
#infocommentarea .ecomment p.ecommenttext{margin:0;font-size:12.5px}
/* 表情 / 小图标 */
#infocommentarea .m_c-main p img,
#infocommentarea .ecomment img{
  max-width:100%;height:auto;border:0;padding:0;border-radius:4px;background:transparent;
  vertical-align:middle;
}
#infocommentarea .m_d_comment div.m_muted{color:var(--text3);font-size:11px;font-family:var(--mono)}

/* ---------- 分页 ---------- */
#infocommentarea .m_commentnav,
#infocommentarea .pagination,
#infocommentarea .pagination2{
  margin:16px 0 0;padding:0;border:0;background:transparent;text-align:left;
  font-family:var(--mono);font-size:11px;
}
#infocommentarea .m_commentnav ul,
#infocommentarea .pagination ul{list-style:none;padding:0;margin:0;box-shadow:none}
#infocommentarea .m_commentnav a,
#infocommentarea .m_commentnav .m_current,
#infocommentarea .m_commentnav .m_page-numbers,
#infocommentarea .pagination ul > li > a,
#infocommentarea .pagination ul > li > span{
  display:inline-block;padding:4px 10px;margin:0 4px 4px 0;
  border:1px solid var(--line);border-radius:5px;
  background:var(--surface);color:var(--text2)!important;
  font-family:var(--mono);font-size:11px;text-decoration:none;
}
#infocommentarea .m_commentnav a:hover,
#infocommentarea .pagination ul > li > a:hover{border-color:var(--accent);color:var(--accent)!important}
#infocommentarea .m_commentnav .m_current,
#infocommentarea .pagination ul > .active > a,
#infocommentarea .pagination ul > .active > span{
  background:var(--accent);border-color:var(--accent);color:#fff!important;
}

/* ---------- 深色主题下评论区 ---------- */
body.tl-dark #infocommentarea li.m_comment,
body.tl-dark #infocommentarea #comment-form{box-shadow:none}
body.tl-dark #infocommentarea .m_c-avatar img,
body.tl-dark #infocommentarea .m_comt-avatar img.m_avatar{filter:brightness(.88)}

/* ---------- 响应式 ---------- */
@media(max-width:600px){
  #infocommentarea #comment-form{padding:13px}
  #infocommentarea .m_comt-ctrl{flex-direction:column;align-items:stretch}
  #infocommentarea button.m_btn{margin:0;width:100%}
  #infocommentarea .m_comt-tips{flex-wrap:wrap}
  #infocommentarea li.m_form-inline{flex-wrap:wrap}
  #infocommentarea li.m_form-inline input.m_ipt{width:100%}
  #infocommentarea .m_c-avatar{gap:9px}
  #infocommentarea .m_c-avatar img{flex:0 0 30px;width:30px;height:30px}
}