/* usj.cc-inspired UI; keep Twikoo data and native interactions. */
#twikoo { color:var(--color-text); font-family:inherit; }
#twikoo .tk-submit {
  background:var(--color-bg); border:1px solid var(--color-border);
  border-radius:6px; padding:0; font-size:14px; box-shadow:none;
}
#twikoo .tk-submit .tk-avatar { display:none !important; }
#twikoo .tk-submit .tk-col { min-width:0; }
#twikoo .tk-meta-input { display:flex; flex-direction:row; gap:0; margin:0; padding:10px 5px 0; }
#twikoo .tk-meta-input .el-input { flex:1 1 0; min-width:0; margin:0; }
#twikoo .tk-submit .el-input-group__prepend { display:none; }
#twikoo .tk-submit .el-input__inner,
#twikoo .tk-submit .el-textarea__inner {
  background:transparent; color:var(--color-text); border:2px solid transparent;
  border-radius:3px; box-shadow:none; font-family:inherit;
}
#twikoo .tk-submit .el-input__inner { height:38px; padding:6px 5px; line-height:22px; font-size:14px; }
#twikoo .tk-submit .el-input__inner:focus,
#twikoo .tk-submit .el-textarea__inner:focus { border-color:var(--color-line); }
#twikoo .tk-submit input::placeholder,
#twikoo .tk-submit textarea::placeholder { color:#888; }
#twikoo .tk-input { margin:2px 0 0; width:100%; }
#twikoo .tk-submit .el-textarea__inner {
  padding:10px; min-height:72px !important; height:72px; line-height:1.6; font-size:15px; resize:vertical;
}
#twikoo .tk-submit .el-input__count { display:none; }
#twikoo .tk-submit .tk-row.actions {
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  margin:0; padding:5px 10px 10px 5px;
}
#twikoo .tk-row-actions-start { flex:1; min-width:0; display:flex; align-items:center; gap:4px; }
#twikoo .tk-submit .tk-send {
  height:30px; margin:0; padding:0 12px; border:0; border-radius:4px;
  background:#020617; color:#fff; font-weight:400; line-height:30px; font-family:inherit; font-size:13px;
}
#twikoo .tk-submit .tk-send:hover:not(:disabled) { opacity:.85; }
#twikoo .tk-submit .tk-send:disabled { background:#020617; color:#fff; opacity:.55; }
#twikoo .tk-submit-action-icon { color:#888; }
#twikoo .tk-submit .tk-preview { border:0; background:transparent; padding:6px; color:#888; font-size:12px; }
#twikoo .tk-comments { margin-top:10px; font-size:14px; }
#twikoo .tk-comments-title { font-size:13px; font-weight:400; margin:14px 0 8px; color:var(--color-text-muted); }
#twikoo .tk-comment { border:0; padding:10px 0; margin:0; }
#twikoo .tk-comment > .tk-avatar { width:32px; height:32px; border-radius:50%; margin-right:8px; flex-shrink:0; }
#twikoo .tk-comment > .tk-avatar .tk-avatar-img { width:32px; height:32px; border-radius:50%; }
#twikoo .tk-comment .tk-main { min-width:0; flex:1; }
#twikoo .tk-comment .tk-nick { color:var(--color-text); font-size:13px; font-weight:400; }
#twikoo .tk-comment .tk-time, #twikoo .tk-comment .tk-time time { color:var(--color-text-muted); font:400 12px/1.5 inherit; font-family:inherit; font-size:12px; }
#twikoo .tk-comment .tk-content { color:var(--color-text); font-size:15px; line-height:1.7; margin:6px 0; overflow-wrap:anywhere; }
#twikoo .tk-comment .tk-content p { margin:0 0 6px; }
#twikoo .tk-comment .tk-extras { display:none; }
#twikoo .tk-comment .tk-action { color:var(--color-text-muted); font-size:12px; }
#twikoo .tk-comment .tk-action-link { color:inherit; }
#twikoo .tk-comment .tk-children { border:0; margin:8px 0 0; padding:0; }
#twikoo .tk-footer { display:none; }
#twikoo .tk-comments-no { color:var(--color-text-muted); font-size:14px; }
#twikoo .tk-cancel { font-size:12px; }
.tk-divider { display:flex; align-items:center; gap:16px; height:20px; margin-bottom:24px; }
.tk-divider::before,.tk-divider::after { content:''; flex:1; border-top:1px solid var(--color-line); }
.tk-divider > span { width:12px; height:12px; border:2px solid var(--color-line); border-radius:50%; box-sizing:border-box; }
.comment-load-status { min-height:24px; margin:0 0 12px; color:var(--color-text-muted); font-size:13px; }
.comment-load-status[hidden] { display:none; }
.comment-load-status button { margin-left:8px; color:var(--color-text); text-decoration:underline; cursor:pointer; }

/* Keep the reference toolbar and comment actions compact on mobile. */
#twikoo .tk-row-actions-start { flex:0 1 auto; order:0; }
#twikoo .tk-submit .tk-preview { order:1; margin:0 0 0 4px; }
#twikoo .tk-submit .tk-send { order:3; margin-left:auto; }
#twikoo .tk-comment .tk-main { display:flex; flex-direction:column; }
#twikoo .tk-comment .tk-main > .tk-row { display:contents; }
#twikoo .tk-comment .tk-meta { order:0; }
#twikoo .tk-comment .tk-content { order:1; }
#twikoo .tk-comment .tk-action { order:2; align-self:flex-start; margin:0 0 6px; }
#twikoo .tk-comment .tk-replies { order:4; }
#twikoo .tk-comment .tk-action-link { color:#999 !important; font-size:12px; margin:0 12px 0 0; }
#twikoo .tk-comment .tk-action-link:nth-child(2) { display:none; }
#twikoo .tk-comment .tk-action-icon { display:none; }
#twikoo .tk-comment .tk-action-link:first-child::before { content:'赞同 '; }
#twikoo .tk-comment .tk-action-link:last-child::before { content:'回复'; }
#twikoo .tk-comments-title .tk-icon, #twikoo .tk-sort-item { color:#999; }
#twikoo .tk-sort-item.__active { color:var(--color-text); }

/* Extra emoji packs: keep inactive packs hidden without touching the shown state. */
#twikoo .OwO .OwO-items:not(.OwO-items-show) { display: none !important; }

/* Align the refresh icon with the sort row: the icons sit in the same inline wrapper as the
   sort buttons, so centre that wrapper instead of fighting the baseline. */
#twikoo .tk-comments-title > span:last-child { display: inline-flex; align-items: center; }
/* The management entry is for the owner only: keep it off every reader-facing comment area. */
.comment-section:not(.comment-section--admin) #twikoo .tk-comments-title .tk-icon.__comments:last-child { display: none !important; }

/* 读者侧自动加载（2026-09-20）：刷新图标由 JS 打标隐藏，分页器不再出现 */
#twikoo .tk-icon.__comments.tka-refresh { display: none !important; }
.comment-section:not(.comment-section--admin) #twikoo .tk-pagination { display: none !important; }

/* 去卡顿(2026-09-20)：Twikoo 的淡入/过渡在手机上显得一顿一顿，直接关掉 */
#twikoo .tk-fade-in { animation: none !important; }
#twikoo .tk-comments-container, #twikoo .tk-comment, #twikoo .tk-submit { transition: none !important; }