/* ======================== twikoo 美化（Firefly 主题色覆盖版） ====================== */
/* 
 * 基于 Firefly 主题的 Twikoo 样式
 * 颜色完全由第一段变量驱动，不再依赖 liushen-* 颜色体系
 */

/* ===== 核心变量：从 Firefly 主题继承 ===== */
.twikoo {
  --tk-accent: var(--primary);
  --tk-bg: var(--card-bg);
  --tk-border: var(--line-divider);
  --tk-text: color-mix(in oklch, var(--card-bg) 12%, #000 88%);
  --tk-muted: color-mix(in oklch, var(--card-bg) 35%, #666 65%);
  --tk-accent-soft: color-mix(in oklch, var(--primary) 18%, transparent);
}

.dark .twikoo {
  --tk-text: color-mix(in oklch, var(--card-bg) 12%, #fff 88%);
  --tk-muted: color-mix(in oklch, var(--card-bg) 45%, #c0c4cc 55%);
}

/* ===== 基础文字与边框 ===== */
.twikoo,
.twikoo * {
  border-color: var(--tk-border);
}

.twikoo {
  color: var(--tk-text);
}

/* ===== 强调色元素 ===== */
.twikoo .tk-comments-title,
.twikoo .tk-action-link,
.twikoo .tk-action-icon,
.twikoo .tk-icon.__comments,
.twikoo .tk-sort-select,
.twikoo .tk-nick-link:hover,
.twikoo .tk-expand,
.twikoo .tk-login-msg a,
.twikoo .tk-panel-logout {
  color: var(--tk-accent);
}

/* ===== 主色高亮元素 ===== */
.twikoo .tk-tag-blue,
.twikoo .tk-pagination-pager.__current,
.twikoo .el-button--primary,
.twikoo .el-button--primary.is-plain:focus,
.twikoo .el-button--primary.is-plain:hover {
  background-color: var(--tk-accent);
  border-color: var(--tk-accent);
  color: #fff;
}

/* 蓝色标签 */
.twikoo .tk-tag-blue {
  color: var(--tk-accent);
  background-color: var(--tk-accent-soft);
}

/* ===== 表单与面板 ===== */
.twikoo .tk-sort-select,
.twikoo .el-input__inner,
.twikoo .el-textarea__inner,
.twikoo .el-input-group__append,
.twikoo .el-input-group__prepend,
.twikoo .OwO .OwO-body,
.twikoo .tk-preview-container {
  background-color: var(--tk-bg);
  border-color: var(--tk-border);
  color: var(--tk-text);
}

/* Hover / Focus */
.twikoo .el-input__inner:hover,
.twikoo .el-textarea__inner:hover,
.twikoo .tk-sort-select:hover {
  border-color: color-mix(in oklch, var(--tk-accent) 55%, var(--tk-border) 45%);
}

.twikoo .el-input__inner:focus,
.twikoo .el-textarea__inner:focus,
.twikoo .tk-sort-select:focus {
  border-color: var(--tk-accent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--tk-accent) 20%, transparent);
}

/* ===== 排序按钮 ===== */
.twikoo .tk-comments-sort .tk-sort-item {
  color: var(--tk-muted);
}

.twikoo .tk-comments-sort .tk-sort-item:hover,
.twikoo .tk-comments-sort .tk-sort-item:focus-visible,
.twikoo .tk-comments-sort .tk-sort-item.__active {
  color: var(--tk-accent);
}

/* ===== 次级按钮 ===== */
.twikoo .el-button:not(.el-button--primary):not(.el-button--text) {
  background-color: color-mix(in oklch, var(--tk-bg) 90%, var(--tk-accent) 10%);
  border-color: var(--tk-border);
  color: var(--tk-text);
}

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

/* ===== 次要信息 ===== */
.twikoo .tk-extras,
.twikoo .tk-footer,
.twikoo .tk-extra-text,
.twikoo .tk-action-count {
  color: var(--tk-muted);
}

/* ===== 加载指示器 ===== */
.twikoo .tk-loading-spinner .path,
.twikoo .el-loading-spinner .path,
.twikoo .el-loading-spinner i,
.twikoo .el-loading-spinner .el-loading-text {
  stroke: var(--tk-accent);
  color: var(--tk-accent);
}

/* ===== 头像 ===== */
.twikoo .tk-avatar .tk-avatar-img {
  color: color-mix(in oklch, var(--tk-accent) 58%, var(--tk-muted) 42%);
}

.twikoo .tk-avatar .tk-avatar-img svg,
.twikoo .tk-avatar .tk-avatar-img svg path {
  fill: currentColor;
}

/* ===== 禁用态 ===== */
.twikoo .el-input.is-disabled .el-input__inner,
.twikoo .el-textarea.is-disabled .el-textarea__inner {
  background-color: color-mix(in oklch, var(--tk-bg) 88%, var(--tk-border) 12%);
  border-color: var(--tk-border);
  color: color-mix(in oklch, var(--tk-text) 55%, var(--tk-bg) 45%);
}

/* ===== 占位符 ===== */
.twikoo .el-input__inner::placeholder,
.twikoo .el-textarea__inner::placeholder {
  color: color-mix(in oklch, var(--tk-muted) 75%, var(--tk-bg) 25%);
}

/* ===== 输入组前后缀 ===== */
.twikoo .el-input-group__append,
.twikoo .el-input-group__prepend {
  background-color: color-mix(in oklch, var(--tk-bg) 90%, var(--tk-accent) 10%);
  color: var(--tk-muted);
}

/* ===== 主按钮状态 ===== */
.twikoo .el-button--primary {
  background-color: var(--tk-accent);
  border-color: var(--tk-accent);
  color: #fff;
}

.twikoo .el-button--primary:hover,
.twikoo .el-button--primary:focus {
  background-color: color-mix(in oklch, var(--tk-accent) 88%, #fff 12%);
  border-color: color-mix(in oklch, var(--tk-accent) 88%, #fff 12%);
}

.twikoo .el-button--primary:active,
.twikoo .el-button--primary.is-active {
  background-color: color-mix(in oklch, var(--tk-accent) 86%, #000 14%);
  border-color: color-mix(in oklch, var(--tk-accent) 86%, #000 14%);
}

.twikoo .el-button--primary.is-disabled,
.twikoo .el-button--primary.is-disabled:hover,
.twikoo .el-button--primary.is-disabled:focus,
.twikoo .el-button--primary.is-disabled:active {
  color: color-mix(in oklch, #fff 70%, transparent);
  background-color: color-mix(in oklch, var(--tk-accent) 55%, transparent);
  border-color: color-mix(in oklch, var(--tk-accent) 55%, transparent);
}

/* ===== 其他语义按钮 ===== */
.twikoo .el-button--success,
.twikoo .el-button--warning,
.twikoo .el-button--danger,
.twikoo .el-button--info {
  color: var(--tk-text);
  background-color: color-mix(in oklch, var(--tk-bg) 88%, var(--tk-accent) 12%);
  border-color: color-mix(in oklch, var(--tk-border) 72%, var(--tk-accent) 28%);
}

.twikoo .el-button--success:hover,
.twikoo .el-button--warning:hover,
.twikoo .el-button--danger:hover,
.twikoo .el-button--info:hover,
.twikoo .el-button--success:focus,
.twikoo .el-button--warning:focus,
.twikoo .el-button--danger:focus,
.twikoo .el-button--info:focus {
  color: var(--tk-accent);
  border-color: var(--tk-accent);
  background-color: color-mix(in oklch, var(--tk-bg) 84%, var(--tk-accent) 16%);
}

/* ===== 全屏透明模式（Firefly 原生支持） ===== */
body.wallpaper-transparent .twikoo {
  --tk-bg: var(--card-bg-transparent);
  --tk-border: color-mix(in oklch, var(--line-divider) 70%, transparent 30%);
  --tk-text: color-mix(in oklch, var(--card-bg) 8%, #000 92%);
  --tk-muted: color-mix(in oklch, var(--card-bg) 28%, #666 72%);
}

:root.dark body.wallpaper-transparent .twikoo {
  --tk-text: color-mix(in oklch, var(--card-bg) 8%, #fff 92%);
  --tk-muted: color-mix(in oklch, var(--card-bg) 40%, #c0c4cc 60%);
}

body.wallpaper-transparent .twikoo .el-input__inner,
body.wallpaper-transparent .twikoo .el-textarea__inner,
body.wallpaper-transparent .twikoo .el-input-group__append,
body.wallpaper-transparent .twikoo .el-input-group__prepend,
body.wallpaper-transparent .twikoo .tk-sort-select,
body.wallpaper-transparent .twikoo .tk-preview-container,
body.wallpaper-transparent .twikoo .OwO .OwO-body {
  background-color: var(--tk-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ======================== 以下为第二段原始布局与结构（颜色已移除） ====================== */

/* 隐藏评论者头像 */
#twikoo .tk-comments .tk-submit .tk-avatar.tk-has-avatar {
  display: none;
}

/* 表情和按钮栏 */
#twikoo .tk-comments .tk-submit .tk-row.actions {
  margin-bottom: 0;
  margin-left: 0;
}

/* 信息与输入框间距 */
.tk-main .tk-submit .tk-col .tk-meta-input,
#twikoo .tk-comments .tk-submit .tk-col .tk-meta-input {
  margin-bottom: 16px;
}

/* 提交按钮高度 */
.tk-row.actions button.el-button {
  height: 32px;
}

/* 图片自适应 */
.tk-main .tk-content img {
  max-width: 100%;
  height: auto;
}

/* 圆角 */
:root {
  --liushen-radius: 12px;
}

.tk-meta-input input {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.tk-meta-input div {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.tk-input.el-textarea textarea {
  border-radius: 12px;
  min-height: 150px !important;
  height: auto;
}

/* 移动端隐藏预览按钮 */
@media screen and (max-width: 420px) {
  .tk-main .tk-submit .tk-row.actions button.el-button.tk-preview {
    display: none;
  }
}

/* 评论大框 */
.twikoo .tk-comments-container > .tk-comment,
.twikoo .tk-comments .tk-submit {
  padding: 20px;
  margin-top: 0px;
  margin-bottom: 20px;
  border-radius: var(--liushen-radius);
  background: var(--tk-bg);
  transition: .3s;
}

/* 浅色模式阴影 */
[data-theme=light] 
.twikoo .tk-comments-container > .tk-comment,
.twikoo .tk-comments .tk-submit {
  box-shadow: var(--card-box-shadow);
}

[data-theme=light] 
.twikoo .tk-comments-container > .tk-comment:hover,
.twikoo .tk-comments .tk-submit:hover {
  box-shadow: var(--card-hover-box-shadow);
}

/* 深色模式边框 */
[data-theme=dark] 
.twikoo .tk-comments-container > .tk-comment,
.twikoo .tk-comments .tk-submit {
  border: 1px solid var(--tk-border);
}

/* 设备信息 */
.twikoo .tk-extra {
  border-radius: var(--liushen-radius);
  background: var(--tk-bg);
  padding: 0.4rem;
  margin-bottom: 1rem;
  transition: .3s;
}

[data-theme=light] .twikoo .tk-extra {
  box-shadow: var(--card-box-shadow);
}

[data-theme=light] .twikoo .tk-extra:hover {
  box-shadow: var(--card-hover-box-shadow);
}

[data-theme=dark] .twikoo .tk-extra {
  border: 1px solid var(--tk-border);
}

/* 加载更多按钮 */
.twikoo .tk-expand {
  border-radius: var(--liushen-radius);
}

[data-theme=light] .twikoo .tk-expand {
  box-shadow: var(--card-box-shadow);
}

[data-theme=light] .twikoo .tk-expand:hover {
  box-shadow: var(--card-hover-box-shadow);
  background-color: var(--tk-accent-soft);
}

[data-theme=dark] .twikoo .tk-expand:hover {
  background-color: var(--tk-accent);
}

[data-theme=dark] .twikoo .tk-expand {
  border: 1px solid var(--tk-border);
}

/* 移动端隐藏设备信息 */
@media screen and (max-width: 570px) {
  .tk-main .tk-extras {
    display: none;
  }
}

/* 按钮圆角 */
.tk-row.actions button.el-button {
  border-radius: 12px !important;
}