/*
 * Twikoo v2 主题覆盖样式（Sakurairo 风格）
 * 适配 twikoo@2.0.x 前端（.tk-input__inner / .tk-button--primary 等新类名）。
 * 在 twikoo 内置样式之后加载，用于覆盖默认样式并跟随站点主题色。
 */

/* 主题变量：定义主色、背景、边框、正文和次要文字颜色 */
.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 {
  color: var(--tk-text);
}
.twikoo,
.twikoo * {
  border-color: var(--tk-border);
}

/* 强调色文本 */
.twikoo .tk-comments-title,
.twikoo .tk-action-link,
.twikoo .tk-action-icon,
.twikoo .tk-expand,
.twikoo .tk-nick-link:hover,
.twikoo .tk-login-msg a,
.twikoo .tk-panel-logout,
.twikoo .tk-sort-item.__active,
.twikoo .tk-sort-item:hover {
  color: var(--tk-accent);
}

/* 次要排序/搜索项 */
.twikoo .tk-sort-item {
  color: var(--tk-muted);
}

/* 输入框：底色 / 边框 / 文字 */
.twikoo .tk-input__inner,
.twikoo .tk-textarea__inner,
.twikoo .tk-input-group__prepend,
.twikoo .tk-input-group__append,
.twikoo .tk-preview-container,
.twikoo .OwO .OwO-body {
  background-color: var(--tk-bg);
  border-color: var(--tk-border);
  color: var(--tk-text);
}

/* 输入框 hover / focus */
.twikoo .tk-input__inner:hover {
  border-color: color-mix(in oklch, var(--tk-accent) 55%, var(--tk-border) 45%);
}
.twikoo .tk-input__inner:focus {
  border-color: var(--tk-accent);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--tk-accent) 20%, transparent);
}
.twikoo .tk-input__inner::placeholder,
.twikoo .tk-textarea__inner::placeholder {
  color: color-mix(in oklch, var(--tk-muted) 75%, var(--tk-bg) 25%);
}

/* 标签：跟随主题色 */
.twikoo .tk-tag-green,
.twikoo .tk-tag-blue {
  color: var(--tk-accent);
  background-color: var(--tk-accent-soft);
  border-color: transparent;
}

/* 次级按钮 */
.twikoo .tk-button:not(.tk-button--primary):not(.tk-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 .tk-button:not(.tk-button--primary):not(.tk-button--text):hover,
.twikoo .tk-button:not(.tk-button--primary):not(.tk-button--text):focus {
  border-color: var(--tk-accent);
  color: var(--tk-accent);
}

/* 主按钮基础态：主题主色 */
.twikoo .tk-button--primary {
  background-color: var(--tk-accent);
  border-color: var(--tk-accent);
  color: #fff;
}
.twikoo .tk-button--primary:hover,
.twikoo .tk-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%);
  color: #fff;
}

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

/* 加载指示器 */
.twikoo .tk-comments-container {
  position: relative;
}

/* ============ Sakurairo 风格评论区 ============ */

/* 提交区：卡片化 */
.twikoo .tk-submit {
  background: color-mix(in oklch, var(--page-bg) 45%, var(--tk-bg));
  border: 1px solid var(--tk-border);
  border-radius: 16px;
  padding: 12px;
}

/* 昵称/邮箱/网址输入框：胶囊圆角 */
.twikoo .tk-meta-input .tk-input__inner {
  border-radius: 9999px;
}

/* 评论文本框：大圆角 */
.twikoo .tk-textarea .tk-input__inner,
.twikoo .tk-textarea__inner {
  border-radius: 14px;
  padding: 12px 14px;
  min-height: 110px;
}

/* 发送按钮：渐变胶囊（Sakurairo 标志性样式） */
.twikoo .tk-submit .tk-button--primary {
  border-radius: 9999px;
  padding: 10px 28px;
  border: none;
  background: linear-gradient(
    135deg,
    var(--primary),
    oklch(0.68 0.17 calc(var(--hue) - 35))
  );
  box-shadow: 0 4px 14px color-mix(in oklch, var(--primary) 35%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.twikoo .tk-submit .tk-button--primary:hover,
.twikoo .tk-submit .tk-button--primary:focus {
  background: linear-gradient(
    135deg,
    var(--primary),
    oklch(0.68 0.17 calc(var(--hue) - 35))
  );
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in oklch, var(--primary) 45%, transparent);
}

/* 评论标题加粗 */
.twikoo .tk-comments-title {
  font-weight: 700;
}

/* 头像：圆形 + 主色描边（v2 默认是 5px 圆角方块） */
.twikoo .tk-avatar {
  border-radius: 50%;
}
.twikoo .tk-avatar .tk-avatar-img,
.twikoo .tk-avatar .tk-avatar-img img,
.twikoo .tk-avatar img.tk-avatar-img {
  border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--primary) 40%, transparent);
}

/* 评论条目：气泡式（Sakurairo 标志性样式） */
.twikoo .tk-comment .tk-main {
  position: relative;
  background: color-mix(in oklch, var(--page-bg) 50%, var(--tk-bg));
  border-radius: 4px 16px 16px 16px;
  padding: 10px 14px;
}
/* 气泡指向头像的小尾巴 */
.twikoo .tk-comment .tk-main::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -5.5px;
  width: 11px;
  height: 11px;
  background: inherit;
  transform: rotate(45deg);
  border-left: 1px solid var(--tk-border);
  border-bottom: 1px solid var(--tk-border);
  border-bottom-left-radius: 2px;
}

/* 昵称加粗、meta 行弱化 */
.twikoo .tk-nick {
  font-weight: 600;
}
.twikoo .tk-meta {
  font-size: 0.85rem;
  color: var(--tk-muted);
}
.twikoo .tk-meta .tk-nick,
.twikoo .tk-meta .tk-nick-link {
  font-size: 1rem;
  color: var(--tk-text);
}

/* 评论正文行高 */
.twikoo .tk-content {
  line-height: 1.75;
}

/* 表情图片限制大小 */
.twikoo .tk-content img,
.twikoo .tk-owo-emotion,
.twikoo .OwO-item img {
  max-height: 4.5rem;
  vertical-align: text-bottom;
  border-radius: 6px;
}

/* 子回复：更浅的气泡 */
.twikoo .tk-replies .tk-comment .tk-main {
  background: color-mix(in oklch, var(--page-bg) 30%, var(--tk-bg));
}

/* OwO 表情面板：圆角 + 阴影 */
.twikoo .OwO .OwO-body {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ============================================================
 * Sakurairo 交互复刻：聚焦提示气泡 + QQ 头像预览
 * ============================================================ */

/* 提示气泡：聚焦输入框时在其上方弹出黑色气泡 */
.twikoo .tk-meta-input .tk-input {
  position: relative;
}
.twikoo .tk-meta-input .tk-input::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 13px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 30;
}
.twikoo .tk-meta-input .tk-input:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.twikoo .tk-meta-input .tk-input::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: rgba(0, 0, 0, 0.78);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 30;
  pointer-events: none;
}
.twikoo .tk-meta-input .tk-input:focus-within::before {
  opacity: 1;
}

/* Sakurairo 布局：昵称/邮箱/网址行在评论框下方
   （DOM 已由 JS 移动，order 作为兜底排序） */
.twikoo .tk-submit .tk-meta-input {
  order: 2;
  margin-top: 0.5rem;
}
.twikoo .tk-submit .tk-textarea {
  order: 1;
}
.twikoo .tk-submit .tk-row.actions {
  order: 3;
}

/* ============================================================
 * OS / 浏览器彩色标识（Sakurairo 风格：图标和文字跟随品牌色）
 * ============================================================ */
.twikoo .tk-extra.cmt-os-windows { color: #4f9cf5; }
.twikoo .tk-extra.cmt-os-apple   { color: #aab7c4; }
.twikoo .tk-extra.cmt-os-android { color: #3ddc84; }
.twikoo .tk-extra.cmt-os-linux   { color: #f9bc00; }
.twikoo .tk-extra.cmt-br-chrome  { color: #3b82f6; }
.twikoo .tk-extra.cmt-br-edge    { color: #00a4ef; }
.twikoo .tk-extra.cmt-br-firefox { color: #ff7139; }
.twikoo .tk-extra.cmt-br-safari  { color: #0fb5ee; }
.twikoo .tk-extra[class*="cmt-"] .tk-icon svg {
  fill: currentColor;
}

/* 窄屏适配 */
@media (max-width: 767px) {
  .twikoo .tk-meta-input .tk-input::after {
    white-space: normal;
    max-width: 62vw;
    text-align: center;
  }
  /* 手机端：昵称/邮箱/网址占满一行（Sakurairo 同款堆叠） */
  .twikoo .tk-meta-input {
    flex-direction: column;
  }
  .twikoo .tk-meta-input .tk-input {
    width: 100%;
    margin-left: 0;
  }
}