/* Twikoo 主题适配版 - 基于暖色调配色 */
.twikoo {
  position: relative;
}

.twikoo svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ========== 颜色变量覆盖（继承主题根变量） ========== */
.twikoo {
  --tk-primary: var(--color-primary, #d46b5e);
  --tk-primary-light: var(--color-primary-light, #e08d82);
  --tk-primary-bg: var(--color-primary-bg, #faf3f0);
  --tk-primary-dark: var(--color-primary-dark, #b85548);
  --tk-text: var(--color-text, #2c2b28);
  --tk-text-secondary: var(--color-text-secondary, #5e5b56);
  --tk-text-muted: var(--color-text-muted, #9a9690);
  --tk-bg: var(--color-bg, #faf8f5);
  --tk-bg-white: var(--color-bg-white, #ffffff);
  --tk-border: var(--color-border, #e6e2da);
  --tk-border-light: var(--color-border-light, #f0ece6);
  --tk-shadow: var(--color-shadow, rgba(0, 0, 0, 0.04));
  --tk-shadow-hover: var(--color-shadow-hover, rgba(0, 0, 0, 0.08));
  --tk-success: var(--color-success, #8a9b6e);
  --tk-warning: var(--color-warning, #e2a14f);
  --tk-error: var(--color-error, #c96a5e);
}
/* ========== 隐藏点赞按钮（第一个操作按钮） ========== */
.tk-action .tk-action-link:first-child {
  display: none !important;
}

/* ========== 回复按钮默认隐藏，悬停时显示 ========== */
.tk-action {
  justify-content: flex-start;
}

/* 回复按钮默认透明且不可见 */
.tk-action .tk-action-link {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 鼠标悬停在评论主区域时显示回复按钮 */
.tk-main:hover .tk-action .tk-action-link {
  opacity: 1;
  visibility: visible;
}

/* 确保回复按钮容器也有悬停效果（兼容性） */
.tk-comment:hover .tk-action .tk-action-link {
  opacity: 1;
  visibility: visible;
}
/* 移动端：回复按钮始终显示 */
@media (max-width: 768px) {
  .tk-action .tk-action-link {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ========== 全局样式覆盖 ========== */
.twikoo .el-input__inner,
.twikoo .el-textarea__inner {
  color: var(--tk-text);
  background-color: var(--tk-bg-white);
  border-color: var(--tk-border);
}

.twikoo .el-input__inner:hover,
.twikoo .el-textarea__inner:hover {
  border-color: var(--tk-text-muted);
}

.twikoo .el-input__inner:focus,
.twikoo .el-textarea__inner:focus {
  border-color: var(--tk-primary);
}

.twikoo .el-input-group__append,
.twikoo .el-input-group__prepend {
  color: var(--tk-text);
  background-color: var(--tk-bg);
  border-color: var(--tk-border);
}

/* 按钮样式 */
.twikoo .el-button:not(.el-button--primary):not(.el-button--text) {
  color: var(--tk-text);
  background-color: var(--tk-bg);
  border-color: var(--tk-border);
}

.twikoo .el-button:not(.el-button--primary):not(.el-button--text):active,
.twikoo .el-button:not(.el-button--primary):not(.el-button--text):focus,
.twikoo .el-button:not(.el-button--primary):not(.el-button--text):hover {
  color: var(--tk-primary);
  background-color: var(--tk-primary-bg);
  border-color: var(--tk-primary-light);
}

/* 主要按钮 */
.twikoo .el-button--primary {
  background-color: var(--tk-primary);
  border-color: var(--tk-primary);
}

.twikoo .el-button--primary:focus,
.twikoo .el-button--primary:hover {
  background-color: var(--tk-primary-light);
  border-color: var(--tk-primary-light);
}

.twikoo .el-button--primary:active {
  background-color: var(--tk-primary-dark);
  border-color: var(--tk-primary-dark);
}

.twikoo .el-button--primary.is-disabled,
.twikoo .el-button--primary.is-disabled:active,
.twikoo .el-button--primary.is-disabled:focus,
.twikoo .el-button--primary.is-disabled:hover {
  background-color: var(--tk-primary-light);
  border-color: var(--tk-primary-light);
  opacity: 0.6;
}

/* ========== 评论区域样式 ========== */
.tk-expand {
  width: 100%;
  cursor: pointer;
  padding: 0.75em;
  text-align: center;
  transition: all 0.5s;
  color: var(--tk-text-muted);
}

.tk-expand:hover {
  background-color: var(--tk-bg-hover, rgba(212, 107, 94, 0.05));
}

.tk-expand:active {
  background-color: var(--tk-primary-bg);
}

.tk-content img {
  max-width: 300px;
  max-height: 300px;
  vertical-align: middle;
  border-radius: 8px;
}

.tk-owo-emotion,
.twikoo .OwO-item img {
  width: 3em;
  height: auto;
}

/* ========== 评论操作按钮 ========== */
.tk-action-link {
  color: var(--tk-text-muted);
}

.tk-action-link:hover {
  color: var(--tk-primary);
}

.tk-action-icon {
  color: var(--tk-primary);
}

/* ========== 评论卡片样式 ========== */
.tk-comment {
  margin-top: 1.25rem;
  padding-bottom: 1rem;

}

.tk-nick-link:hover {
  color: var(--tk-primary);
}

/* 标签样式 */
.tk-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  border-radius: 4px;
  background-color: var(--tk-bg);
}

.tk-tag-green {
  background-color: rgba(138, 155, 110, 0.15);
  border: 1px solid rgba(138, 155, 110, 0.4);
  color: var(--tk-success);
}

.tk-tag-yellow {
  background-color: rgba(226, 161, 79, 0.15);
  border: 1px solid rgba(226, 161, 79, 0.4);
  color: var(--tk-warning);
}

.tk-tag-red {
  background-color: rgba(201, 106, 94, 0.15);
  border: 1px solid rgba(201, 106, 94, 0.4);
  color: var(--tk-error);
}

.tk-tag-blue {
  background-color: var(--tk-primary-bg);
  border: 1px solid var(--tk-primary-light);
  color: var(--tk-primary);
}

.tk-time {
  color: var(--tk-text-muted);
  font-size: 0.875rem;
}

/* 评论内容 */
.tk-content {
  margin-top: 0.5rem;
  overflow: hidden;
  max-height: 500px;
  position: relative;
  line-height: 1.6;
  color: var(--tk-text-secondary);
}

.tk-replies {
  margin-top: 0.75rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--tk-border-light);
}

/* ========== 评论框样式 ========== */
.tk-submit {
  margin-top: 1.5rem;
  background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--color-shadow);
    padding: 20px 40px;
    margin-bottom: 1.5rem;
}

.tk-meta-input .el-input .el-input-group__prepend {
  background-color: var(--tk-bg);
  color: var(--tk-text);
  border-color: var(--tk-border);
}

.tk-error-message {
  color: var(--tk-error);
}

/* ========== 分页样式 ========== */
.tk-pagination-pager {
  width: 2em;
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  color: var(--tk-text-secondary);
}

.tk-pagination-pager:hover {
  background-color: var(--tk-primary-bg);
  color: var(--tk-primary);
}

.tk-pagination-pager.__current {
  background-color: var(--tk-primary);
  color: #fff;
  pointer-events: none;
}

/* ========== 管理员面板样式 ========== */
.tk-admin {
  background-color: rgba(0, 0, 0, 0.92);
}

.tk-admin .el-input__inner,
.tk-admin .el-textarea__inner {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.tk-admin .el-input-group__append,
.tk-admin .el-input-group__prepend {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.tk-admin-warn {
  background-color: rgba(226, 161, 79, 0.15);
  border-left-color: var(--tk-warning);
  color: var(--tk-warning);
}

/* ========== 头像样式 ========== */
.tk-avatar {
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--tk-primary-bg);
}

.tk-avatar.tk-has-avatar {
  background-color: var(--tk-bg);
}

.tk-avatar-img {
  object-fit: cover;
}

/* ========== 扩展信息样式 ========== */
.tk-extras {
  font-size: 0.875rem;
  color: var(--tk-text-muted);
}

.tk-extra {
  display: inline-flex;
  align-items: center;
  margin-right: 0.875rem;
}

/* ========== 代码高亮容器 ========== */
.twikoo .tk-content pre,
.twikoo .tk-preview-container pre {
  background-color: var(--tk-bg);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}

.twikoo div.code-toolbar>.toolbar>.toolbar-item>button {
  background-color: var(--tk-bg-white);
  border: 1px solid var(--tk-border);
  color: var(--tk-text);
  border-radius: 4px;
}

.twikoo div.code-toolbar>.toolbar>.toolbar-item>button:hover {
  background-color: var(--tk-primary);
  color: #fff;
  border-color: var(--tk-primary);
}

/* ========== 加载动画 ========== */
.twikoo .el-loading-mask {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.twikoo .el-loading-spinner .circular .path {
  stroke: var(--tk-primary);
}

/* ========== 脚注样式 ========== */
.tk-footer {
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  color: var(--tk-text-muted);
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tk-border-light);
}

/* ========== 响应式调整 ========== */
@media screen and (max-width: 768px) {
  .tk-meta-input {
    flex-direction: column;
  }
  
  .tk-meta-input .el-input + .el-input {
    margin-left: 0;
    margin-top: 0.5rem;
  }
  
  .tk-row.actions {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .tk-replies {
    padding-left: 0.75rem;
  }
}

.tk-icon.__comments {color: var(--tk-primary);}