/*
 * Twikoo 评论组件主题样式（Firefly）
 * 在 twikoo 运行时样式之后加载（见 Twikoo.astro 中 data-twikoo-css 的置顶逻辑），
 * 覆盖默认样式并跟随站点设计：语义变量、扁平卡片、圆角、焦点环、过渡动画。
 * 依赖站点变量：--primary、--card-bg、--btn-regular-bg、--line-divider、--radius-* 等。
 */

/* ===== 基础 ===== */
.twikoo {
	--tk-accent: var(--primary);
	--tk-bg: var(--card-bg);
	--tk-input-bg: var(--btn-regular-bg);
	--tk-border: var(--line-divider);
	--tk-text: var(--deep-text);
	--tk-muted: var(--content-meta);
	--tk-accent-soft: color-mix(in oklch, var(--primary) 18%, transparent);
	--tk-radius: 0.5rem;
	--tk-radius-panel: 0.75rem;
	--tk-font: var(--font-sans, inherit);

	font-family: var(--tk-font);
	color: var(--tk-text);
	line-height: 1.75;
}

/* 全局边框与文字跟随主题（站点变量 --deep-text/--content-meta 随主题自动切换） */
.twikoo,
.twikoo * {
	border-color: var(--tk-border);
}

/* 交互元素统一过渡（与站点 --duration-normal 一致） */
.twikoo .el-button,
.twikoo .el-input__inner,
.twikoo .el-textarea__inner,
.twikoo .tk-sort-item,
.twikoo .tk-pagination-pager,
.twikoo .tk-nick-link,
.twikoo .tk-action-link,
.twikoo .tk-action-icon,
.twikoo .tk-avatar,
.twikoo .OwO .OwO-item,
.twikoo .tk-comment {
	transition:
		color var(--duration-normal, 150ms) var(--ease-standard, ease),
		background-color var(--duration-normal, 150ms) var(--ease-standard, ease),
		border-color var(--duration-normal, 150ms) var(--ease-standard, ease),
		box-shadow var(--duration-normal, 150ms) var(--ease-standard, ease);
}

/* ===== 标题与计数 ===== */
/* 标题行：最左侧显示评论计数，最右侧是排序/搜索/刷新/管理入口。 */
.twikoo .tk-comments-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--tk-text);
}

/* 评论计数（“共 N 条评论”）：跟随标题，弱化为次级文字。 */
.twikoo .tk-comments-count {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0.125rem 0.65rem;
	border: 1px solid var(--tk-border);
	border-radius: var(--radius-full, 9999px);
	background: var(--tk-input-bg);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--tk-text);
	white-space: nowrap;
}

/* ===== Firefly editorial layout ===== */
.twikoo .tk-comments-container { padding-top: 0.25rem; }

/* 评论搜索行：由标题行右上角的搜索图标开关（Twikoo 1.7.19 内置），
   输入框与搜索按钮复用站点统一的输入框/主按钮样式。 */
.twikoo .tk-comments-search {
	margin-bottom: 0.75rem;
}

/* 刷新/管理入口（齿轮）图标：跟随主题色，放大点击区域。 */
.twikoo .tk-comments-actions .tk-icon.__comments {
	width: 1rem;
	height: 1rem;
	padding: 0.3rem;
	box-sizing: content-box;
	color: var(--tk-muted);
}

.twikoo .tk-comments-actions .tk-icon.__comments:hover {
	color: var(--tk-accent);
	background: var(--tk-accent-soft);
	border-radius: var(--tk-radius);
}

/* 评论发送区不重复显示用户头像，保留输入与登录信息布局。 */
.twikoo .tk-submit .tk-avatar,
.twikoo .tk-submit .tk-avatar-img,
.twikoo .tk-form .tk-avatar,
.twikoo .tk-form .tk-avatar-img {
	display: none;
}

/* 输入框：灰色柔和底色（同站内搜索框）。底部预留空间容纳内嵌的表情/图片按钮。 */
.twikoo .tk-submit .el-textarea__inner {
	min-height: 7.5rem !important;
	padding: 0.9rem 1rem 3.1rem;
	line-height: 1.75;
	background: var(--btn-regular-bg);
	border: 1px solid var(--line-divider);
	box-shadow: none;
}

/*
 * 提交表单：网格布局。
 * 第一行：评论输入框（跨全列），表情/图片按钮沉入输入框内部左下角；
 * 第二行：[昵称/邮箱/网址] [取消/预览/发送] 同行，各列按比例伸缩铺满整行，
 * 不留空余（预览/发送按钮随可用宽度自动加长）。
 * 回复表单多一个取消按钮；主表单无取消按钮，需收掉空列才能铺满。
 * 嵌套回复表单比主表单窄（受头像列与内边距挤压），通过容器查询在窄表单下
 * 自动把昵称/邮箱/网址换到独立一行，避免输入框被压扁。
 */
.twikoo .tk-comments,
.twikoo .tk-main {
	container-type: inline-size;
}

.twikoo .tk-submit {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(4.5rem, 0.5fr) minmax(4.5rem, 0.5fr) minmax(4.5rem, 0.5fr);
	grid-template-areas:
		"input input input input"
		"meta b1 b2 b3";
	row-gap: 0.75rem;
	column-gap: 0.75rem;
	align-items: center;
	position: relative;
	overflow: visible;
	box-shadow: none;
}

/* 主表单（未处于回复状态，无取消按钮）：去掉空列，三个区域铺满整行。 */
.twikoo .tk-submit:not(:has(.tk-cancel)) {
	grid-template-columns: minmax(0, 3fr) minmax(4.5rem, 0.5fr) minmax(4.5rem, 0.5fr);
	grid-template-areas:
		"input input input"
		"meta b2 b3";
}

/* 窄表单（嵌套回复表单 / 窄视口主表单）：评论输入框、昵称/邮箱/网址输入框、
   各操作按钮自上而下各占一整行，按钮加宽铺满，整个表单合为一个完整矩形。 */
@container (max-width: 620px) {
	.twikoo .tk-submit {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"input"
			"meta"
			"b1"
			"b2"
			"b3";
	}

	.twikoo .tk-submit:not(:has(.tk-cancel)) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"input"
			"meta"
			"b2"
			"b3";
	}

	.twikoo .tk-submit .tk-meta-input {
		flex-direction: column;
	}
}

/* 解包结构层（tk-row / tk-col），让其中的输入框、按钮直接成为网格项。 */
.twikoo .tk-submit > .tk-row,
.twikoo .tk-submit .tk-col {
	display: contents;
}

/* 网格布局下按钮间距由 column-gap 统一控制，消除 Element 相邻按钮的额外左边距。 */
.twikoo .tk-submit .el-button + .el-button {
	margin-left: 0;
}

.twikoo .tk-submit > .tk-row.actions {
	display: contents;
}

.twikoo .tk-submit .tk-input.el-textarea { grid-area: input; }
.twikoo .tk-submit .tk-meta-input { grid-area: meta; margin: 0; min-width: 0; }
.twikoo .tk-submit .tk-cancel,
.twikoo .tk-submit .tk-preview,
.twikoo .tk-submit .tk-send {
	grid-area: b1;
	width: 100%;
	min-width: 0;
	justify-content: center;
	text-align: center;
}

.twikoo .tk-submit .tk-preview { grid-area: b2; }
.twikoo .tk-submit .tk-send { grid-area: b3; }

/* Markdown 入口隐藏，图片和表情按钮留在输入框左下方工具栏。 */
.twikoo .tk-submit-action-icon.__markdown {
	display: none !important;
}

/*
 * 工具栏（表情 + 图片）：与输入框共用同一网格区域，沉入输入框内部左下角。
 * 输入框已预留底部内边距，文字不会与图标重叠；容器空白处点击穿透到输入框。
 */
.twikoo .tk-submit .tk-row-actions-start {
	grid-area: input;
	align-self: end;
	justify-self: start;
	z-index: 2;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.25rem;
	min-width: 0;
	padding: 0 0.5rem 0.45rem 0.55rem;
	pointer-events: none;
}

.twikoo .tk-submit .tk-row-actions-start > * {
	pointer-events: auto;
}

/*
 * 表情/图片按钮：放大图标与点击区。
 * Twikoo 默认 width: 1.25em 定宽，在 Tailwind 的 border-box 下扣除内边距后
 * 图标实际不足 9px，这里改为由图标自身尺寸决定按钮宽度。
 * 注意：OwO 表情数据异步加载完成后会用 .OwO-logo + .OwO-body 重写表情按钮
 * 内容，届时 SVG 不再是按钮的直接子元素，需同时覆盖两种结构。
 */
.twikoo .tk-row-actions-start .tk-submit-action-icon {
	color: var(--tk-muted);
	background: transparent;
	border: 0;
	border-radius: var(--tk-radius);
	line-height: 1;
	width: auto;
	margin: 0;
	padding: 0.5rem;
}

.twikoo .tk-row-actions-start .tk-submit-action-icon > svg,
.twikoo .tk-row-actions-start .tk-submit-action-icon .OwO-logo > svg {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

/*
 * OwO 初始化后图标被 .OwO-logo 包裹（默认 display: flex，宽高自适应），
 * 面板开关事件绑定在 logo 上。将按钮改为固定尺寸的 flex 容器
 * （1.375rem 图标 + 0.5rem×2 内边距 = 2.375rem，与图片按钮一致），
 * logo 铺满整个按钮使点击区覆盖完整；初始化前后按钮尺寸不变。
 */
.twikoo .tk-row-actions-start .tk-submit-action-icon.OwO {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 2.375rem;
	height: 2.375rem;
}

.twikoo .tk-row-actions-start .tk-submit-action-icon .OwO-logo {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.twikoo .tk-row-actions-start .tk-submit-action-icon:hover,
.twikoo .tk-row-actions-start .tk-submit-action-icon:focus-visible {
	color: var(--tk-accent);
	background: var(--tk-accent-soft);
}

.twikoo .tk-meta-input .el-input__inner {
	background: var(--btn-regular-bg);
}

/* 三个访客信息输入框均分元信息区域，避免输入节点被网格压缩。 */
.twikoo .tk-submit .tk-meta-input {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	gap: 0.5rem;
	width: 100%;
}

.twikoo .tk-submit .tk-meta-input > * {
	flex: 1 1 0;
	min-width: 0;
}

/* 收紧输入组标签（昵称/邮箱/网址）内边距，为同行布局下的输入框争取宽度。 */
.twikoo .tk-meta-input .el-input .el-input-group__prepend {
	padding: 0 0.6rem;
}

/* 预览区：跨全列，位于操作行下方。 */
.twikoo .tk-submit .tk-preview-container {
	grid-column: 1 / -1;
	grid-row: auto;
	margin: 0;
}

.twikoo .tk-send,
.twikoo .tk-preview,
.twikoo .tk-cancel {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.twikoo .tk-send {
	position: relative;
	z-index: 5;
}

/* 评论头信息行（昵称/标签/时间/管理操作）：横向 flex 排列，间距由 gap 统一。 */
.twikoo .tk-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* 管理员操作（显示/隐藏/置顶）紧跟在发送时间右侧。 */
.twikoo .tk-meta .tk-actions {
	order: 2;
}

.twikoo .tk-meta .tk-time {
	order: 1;
}

/* 表态（赞/踩/回复）与删除等操作按钮：确保可见并跟随主题。 */
.twikoo .tk-action,
.twikoo .tk-actions {
	display: flex !important;
	align-items: center;
	gap: 0.25rem;
}

.twikoo .tk-action > button.tk-action-link,
.twikoo .tk-actions > button {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	min-height: 1.75rem;
	margin-left: 0.15rem;
	color: var(--tk-muted);
	background: transparent;
	border: 0;
	border-radius: var(--radius-full, 9999px);
	padding: 0.25rem 0.45rem;
}

.twikoo .tk-action > button.tk-action-link:hover,
.twikoo .tk-action > button.tk-action-link:focus-visible,
.twikoo .tk-actions > button:hover,
.twikoo .tk-actions > button:focus-visible {
	color: var(--tk-accent);
	background: var(--tk-accent-soft);
}

/* 操作图标：保留 Twikoo 原始切换逻辑（常显图标常显、固体图标 hover/已表态才显示），只跟随主题色。 */
.twikoo .tk-action-link .tk-action-icon,
.twikoo .tk-action-link svg {
	color: currentColor;
	fill: currentColor;
	height: 1em;
	width: 1em;
	line-height: 0;
	vertical-align: -0.125em;
}

.twikoo .tk-action-link:hover svg {
	color: var(--tk-accent);
}

/* 所有评论和回复头像使用相同尺寸。 */
.twikoo .tk-avatar,
.twikoo .tk-comment .tk-avatar,
.twikoo .tk-replies .tk-avatar,
.twikoo .tk-comment .tk-submit .tk-avatar {
	width: 2.5rem !important;
	height: 2.5rem !important;
	min-width: 2.5rem;
	min-height: 2.5rem;
	margin-right: 1rem;
}

.twikoo .tk-avatar .tk-avatar-img,
.twikoo .tk-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 地址、系统、浏览器元信息：带圆角的矩形徽章，留足内边距避免文字拥挤。 */
.twikoo .tk-extras .tk-extra {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.65rem;
	border: 1px solid var(--line-divider);
	border-radius: calc(var(--tk-radius) + 0.25rem);
	background: transparent;
}

.twikoo .tk-extras .tk-extra:hover {
	border-color: color-mix(in oklch, var(--tk-accent) 45%, var(--line-divider));
}

.twikoo .tk-extras {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

/* 表情层脱离普通布局层，避免被输入区、评论项或父级裁切。 */
.twikoo .tk-submit,
.twikoo .tk-row-actions-start,
.twikoo .OwO,
.twikoo .OwO.OwO-open {
	overflow: visible !important;
}

/* 表情按钮自身作为面板定位锚点。 */
.twikoo .tk-submit .tk-submit-action-icon.OwO {
	position: relative;
}

/* 表情面板：不强制 display，展开与否由 Twikoo 自身控制（默认收起），这里只负责定位与样式。
   面板自表情按钮上方弹出（评论卡片允许溢出，不会被裁切）。
   层级约定：表情面板 2100（高于 Element 弹出层 2000+），管理面板浮层 2200（见下方管理面板一节）。 */
.twikoo .OwO .OwO-body {
	position: absolute !important;
	top: auto !important;
	bottom: calc(100% + 0.5rem) !important;
	left: 0 !important;
	right: auto !important;
	width: min(31.25rem, calc(100vw - 2.5rem));
	max-width: none;
	z-index: 2100 !important;
	background: var(--card-bg) !important;
	color: var(--tk-text);
	border: 1px solid var(--tk-border);
	border-radius: var(--tk-radius-panel);
	box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
}

/* 带侧栏的中等宽度视口：主栏起始位置较靠右，收紧面板宽度避免溢出视口右缘。 */
@media (min-width: 768px) and (max-width: 900px) {
	.twikoo .OwO .OwO-body {
		width: min(31.25rem, calc(100vw - 22rem));
	}
}

.twikoo .OwO .OwO-items {
	max-height: 15.625rem;
	overflow-y: auto;
}

/* 输入框与元信息输入统一为灰色（参考站内搜索框的柔和底色）。 */
.twikoo .tk-submit textarea.el-textarea__inner,
.twikoo .tk-submit .tk-input textarea.el-textarea__inner,
.twikoo .tk-meta-input .el-input__inner {
	background: var(--btn-regular-bg) !important;
	border-color: var(--line-divider);
}

.twikoo .tk-comment {
	margin-block: 0.75rem;
	padding: 1rem;
}

/* 回复评论：头像左侧与父评论"位置"等元信息区左侧对齐。
   （.tk-replies 位于 .tk-main 内，左边缘已与父评论内容列对齐；
   去掉回复自身的左内边距，使头像恰好落在该对齐线上） */
.twikoo .tk-replies .tk-comment {
	margin-left: 0;
	padding-left: 0;
}

.twikoo .tk-content { font-size: 0.95rem; }

/* ===== 排序栏 ===== */
.twikoo .tk-comments-sort {
	gap: 0.25rem;
	padding: 0.25rem;
	border-radius: var(--tk-radius-panel);
}

.twikoo .tk-sort-item {
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-full, 9999px);
	color: var(--tk-muted);
	font-size: 0.875rem;
}

.twikoo .tk-sort-item:hover {
	color: var(--tk-accent);
	background-color: var(--tk-accent-soft);
}

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

.twikoo .tk-sort-item.__active {
	color: var(--tk-accent);
	background-color: var(--tk-accent-soft);
	font-weight: 600;
}

/* ===== 表单与输入框 ===== */
.twikoo .el-input__inner,
.twikoo .el-textarea__inner {
	background-color: transparent;
	border: 1px solid var(--tk-border);
	border-radius: var(--tk-radius);
	color: var(--tk-text);
}

.twikoo .el-textarea__inner {
	border-radius: var(--tk-radius);
}

/* 输入组（昵称/邮箱/网址）：标签与输入框合并为一个圆角整体 */
.twikoo .el-input-group__append,
.twikoo .el-input-group__prepend {
	background-color: transparent;
	border: 1px solid var(--tk-border);
	color: var(--tk-muted);
	font-size: 0.875rem;
	white-space: nowrap;
}

.twikoo .el-input-group__prepend {
	border-right: none;
	border-radius: var(--tk-radius) 0 0 var(--tk-radius);
}

.twikoo .el-input-group__append {
	border-left: none;
	border-radius: 0 var(--tk-radius) var(--tk-radius) 0;
}

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

/* 焦点态：边框 + 主题色外发光（对应全站 focus-visible 约定） */
.twikoo .el-input__inner:focus,
.twikoo .el-textarea__inner:focus,
.twikoo .el-input__inner:focus-visible,
.twikoo .el-textarea__inner:focus-visible {
	border-color: var(--tk-accent);
	box-shadow: 0 0 0 2px color-mix(in oklch, var(--tk-accent) 20%, transparent);
	outline: none;
}

/* 组内输入框去掉独立焦点环，由整个组统一呈现；圆角只保留在输入框外侧 */
.twikoo .el-input-group .el-input__inner {
	border-radius: 0;
}

.twikoo .el-input-group--prepend .el-input__inner {
	border-radius: 0 var(--tk-radius) var(--tk-radius) 0;
}

.twikoo .el-input-group--append .el-input__inner {
	border-radius: var(--tk-radius) 0 0 var(--tk-radius);
}

.twikoo .el-input-group--prepend.el-input-group--append .el-input__inner {
	border-radius: 0;
}

.twikoo .el-input-group .el-input__inner:focus,
.twikoo .el-input-group .el-input__inner:focus-visible {
	box-shadow: none;
}

/* 悬停/聚焦时整个输入组一起高亮 */
.twikoo .el-input-group:hover .el-input-group__prepend,
.twikoo .el-input-group:hover .el-input-group__append {
	border-color: color-mix(in oklch, var(--tk-accent) 55%, var(--tk-border) 45%);
}

.twikoo .el-input-group:focus-within {
	border-radius: var(--tk-radius);
	box-shadow: 0 0 0 2px color-mix(in oklch, var(--tk-accent) 20%, transparent);
}

.twikoo .el-input-group:focus-within .el-input-group__prepend,
.twikoo .el-input-group:focus-within .el-input-group__append,
.twikoo .el-input-group:focus-within .el-input__inner {
	border-color: var(--tk-accent);
}

.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 默认纯红）：使用站点的 caution 语义色 */
.twikoo .tk-error-message {
	color: var(--admonitions-color-caution, #c45656);
	font-size: 0.8125rem;
}

/* ===== 按钮 ===== */
.twikoo .el-button {
	border-radius: var(--tk-radius);
}

/*
 * 输入组后置按钮（管理面板登录按钮）：左侧方角 + 去掉左边框，
 * 与前面的输入框拼接为一个整体，避免圆角造成的割裂感。
 */
.twikoo .el-input-group__append .el-button {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: 0;
}

.twikoo .el-button--text {
	color: var(--tk-accent);
	background: transparent;
	border: none;
}

.twikoo .el-button--text:hover {
	color: color-mix(in oklch, var(--tk-accent) 80%, #000 20%);
	background-color: transparent;
}

.twikoo .el-button:not(.el-button--primary):not(.el-button--text) {
	background-color: var(--btn-regular-bg);
	border: 1px solid 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);
	background-color: var(--btn-regular-bg-hover);
}

.twikoo .el-button--primary {
	background-color: var(--tk-accent);
	border-color: var(--tk-accent);
	color: #fff;
	font-weight: 500;
}

.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%);
}

/* ===== 评论项 ===== */
.twikoo .tk-comment {
	border-radius: var(--tk-radius);
}

/* 头像不加圆环，仅保留圆形裁切与占位底色。 */
.twikoo .tk-avatar {
	border-radius: var(--radius-full, 9999px);
	overflow: hidden;
	background-color: var(--tk-input-bg);
}

.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 .tk-nick-link {
	color: var(--tk-text);
	font-weight: 600;
}

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

.twikoo .tk-time,
.twikoo .tk-extras,
.twikoo .tk-footer,
.twikoo .tk-extra-text,
.twikoo .tk-action-count {
	color: var(--tk-muted);
	font-size: 0.8125rem;
}

.twikoo .tk-action-link,
.twikoo .tk-action-icon {
	color: var(--tk-muted);
}

.twikoo .tk-action-link:hover,
.twikoo .tk-action-icon:hover {
	color: var(--tk-accent);
}

.twikoo .tk-action-count.__active {
	color: var(--tk-accent);
}

/* 回复内容 */
.twikoo .tk-content {
	color: var(--tk-text);
}

/*
 * OwO 表情：Tailwind preflight 把 img 重置为块级元素，
 * 导致表情独占一行。恢复行内排列，跟随文字换行；
 * 主动换行（空行/段落）仍按正常文档流处理。
 */
.twikoo .tk-content .tk-owo-emotion,
.twikoo .tk-preview-container .tk-owo-emotion {
	display: inline-block;
	vertical-align: text-bottom;
}

/*
 * ===== 评论与预览中的 Markdown 排版 =====
 * Twikoo 用 marked 将评论渲染为标准 HTML（标题/列表/表格/代码块等），
 * Tailwind preflight 移除了这些元素的浏览器默认样式，导致预览和评论里的
 * Markdown 结构“平铺”不可辨。这里补齐基础排版，作用于评论区（.tk-content）
 * 与预览区（.tk-preview-container）两处，风格对齐站点正文。
 */
.twikoo .tk-content :is(h1, h2, h3, h4, h5, h6),
.twikoo .tk-preview-container :is(h1, h2, h3, h4, h5, h6) {
	margin: 1em 0 0.4em;
	font-weight: 700;
	line-height: 1.4;
}

.twikoo .tk-content h1,
.twikoo .tk-preview-container h1 {
	font-size: 1.4em;
}

.twikoo .tk-content h2,
.twikoo .tk-preview-container h2 {
	font-size: 1.25em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid var(--line-divider);
}

.twikoo .tk-content h3,
.twikoo .tk-preview-container h3 {
	font-size: 1.1em;
}

.twikoo .tk-content :is(h4, h5, h6),
.twikoo .tk-preview-container :is(h4, h5, h6) {
	font-size: 1em;
}

.twikoo .tk-content p,
.twikoo .tk-preview-container p {
	margin: 0.5em 0;
}

/* 首尾元素不产生多余间距（评论内容包在一层 span 里，预览是直接子元素）。 */
.twikoo .tk-content > span > :first-child,
.twikoo .tk-preview-container > :first-child {
	margin-top: 0;
}

.twikoo .tk-content > span > :last-child,
.twikoo .tk-preview-container > :last-child {
	margin-bottom: 0;
}

.twikoo .tk-content :is(ul, ol),
.twikoo .tk-preview-container :is(ul, ol) {
	margin: 0.5em 0;
	padding-left: 1.5em;
}

.twikoo .tk-content ul,
.twikoo .tk-preview-container ul {
	list-style: disc;
}

.twikoo .tk-content ol,
.twikoo .tk-preview-container ol {
	list-style: decimal;
}

.twikoo .tk-content li,
.twikoo .tk-preview-container li {
	margin: 0.25em 0;
}

.twikoo .tk-content table,
.twikoo .tk-preview-container table {
	margin: 0.75em 0;
	max-width: 100%;
	border-collapse: collapse;
}

.twikoo .tk-content :is(th, td),
.twikoo .tk-preview-container :is(th, td) {
	padding: 0.35em 0.75em;
	border: 1px solid var(--line-divider);
}

.twikoo .tk-content th,
.twikoo .tk-preview-container th {
	background: var(--btn-regular-bg);
	font-weight: 600;
}

.twikoo .tk-content hr,
.twikoo .tk-preview-container hr {
	margin: 1em 0;
	border: 0;
	border-top: 1px solid var(--line-divider);
}

.twikoo .tk-content a,
.twikoo .tk-preview-container a {
	color: var(--tk-accent);
}

.twikoo .tk-content a:hover,
.twikoo .tk-preview-container a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25rem;
}

.twikoo .tk-content :is(strong, b),
.twikoo .tk-preview-container :is(strong, b) {
	font-weight: 700;
}

.twikoo .tk-content :is(em, i),
.twikoo .tk-preview-container :is(em, i) {
	font-style: italic;
}

.twikoo .tk-content del,
.twikoo .tk-preview-container del {
	color: var(--tk-muted);
}

.twikoo .tk-content img,
.twikoo .tk-preview-container img {
	border-radius: var(--tk-radius);
}

/* 行内代码：柔和底色小圆角；等宽字体与站内代码一致。 */
.twikoo .tk-content :not(pre) > code,
.twikoo .tk-preview-container :not(pre) > code {
	padding: 0.15em 0.4em;
	border-radius: 0.25rem;
	background: var(--btn-regular-bg);
	font-size: 0.875em;
	font-family: var(
		--font-code,
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Monaco,
		Consolas,
		"Liberation Mono",
		"Courier New",
		monospace
	);
}

/* 代码块：整块底色 + 横向滚动（Twikoo 高亮关闭时仅有裸 pre）。 */
.twikoo .tk-content pre,
.twikoo .tk-preview-container pre {
	margin: 0.75em 0;
	padding: 0.75rem 1rem;
	background: var(--btn-regular-bg);
	border-radius: var(--tk-radius);
	overflow-x: auto;
}

.twikoo .tk-content pre code,
.twikoo .tk-preview-container pre code {
	padding: 0;
	border-radius: 0;
	background: transparent;
	font-size: inherit;
}

.twikoo .tk-content blockquote,
.twikoo .tk-preview-container blockquote {
	border-left: 3px solid var(--tk-accent);
	background-color: var(--tk-input-bg);
	border-radius: 0 var(--tk-radius) var(--tk-radius) 0;
	padding: 0.5rem 0.75rem;
	color: var(--tk-muted);
	margin: 0.5rem 0;
}

/*
 * 展开/收起按钮（长评论折叠、回复列表折叠）：
 * 覆盖 Twikoo 的全宽文本条样式，改为与排序/操作按钮一致的小胶囊按钮。
 */
.twikoo .tk-expand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	margin: 0.35rem 0 0;
	padding: 0.3rem 1.1rem;
	font-size: 0.8125rem;
	color: var(--tk-muted);
	background: transparent;
	border: 1px solid var(--line-divider);
	border-radius: var(--radius-full, 9999px);
	transition:
		color var(--duration-normal, 150ms) var(--ease-standard, ease),
		background-color var(--duration-normal, 150ms) var(--ease-standard, ease),
		border-color var(--duration-normal, 150ms) var(--ease-standard, ease);
}

.twikoo .tk-expand:hover,
.twikoo .tk-expand:active {
	color: var(--tk-accent);
	background: var(--tk-accent-soft);
	border-color: color-mix(in oklch, var(--tk-accent) 45%, var(--line-divider));
}

/* 标签（管理员等） */
.twikoo .tk-tag,
.twikoo .tk-tag-blue {
	border-radius: var(--radius-full, 9999px);
	padding: 0.125rem 0.625rem;
	font-size: 0.75rem;
	line-height: 1.5;
}

.twikoo .tk-tag-blue {
	color: var(--tk-accent);
	background-color: var(--tk-accent-soft);
	border-color: transparent;
}

/* ===== 表情面板 OwO（面板本体样式见上方“表情面板”一节） ===== */
.twikoo .OwO .OwO-item:hover {
	background-color: var(--tk-accent-soft);
	border-radius: var(--radius-sm, 0.25rem);
}

.twikoo .OwO .OwO-bar {
	border-bottom-color: var(--tk-border);
}

/* ===== 预览区 ===== */
.twikoo .tk-preview-container {
	background-color: var(--tk-bg);
	border: 1px solid var(--tk-border);
	border-radius: var(--tk-radius-panel);
	padding: 1rem;
}

/* ===== 分页 ===== */
.twikoo .tk-pagination-pager {
	border-radius: var(--radius-full, 9999px);
	color: var(--tk-muted);
}

.twikoo .tk-pagination-pager:hover {
	color: var(--tk-accent);
	background-color: var(--tk-accent-soft);
}

.twikoo .tk-pagination-pager.__current {
	background-color: var(--tk-accent);
	border-color: var(--tk-accent);
	color: #fff;
	font-weight: 600;
}

.twikoo .tk-pagination-pager.__current:hover {
	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-login-msg a {
	color: var(--tk-accent);
	text-decoration: underline;
	text-decoration-style: dashed;
	text-decoration-color: var(--link-underline, var(--tk-accent));
	text-underline-offset: 0.25rem;
}

.twikoo .tk-login-msg a:hover {
	text-decoration-color: var(--link-hover, var(--tk-accent));
}

.twikoo .tk-panel-logout {
	color: var(--tk-accent);
}

/* ===== 加载指示器 ===== */
.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-comments-container {
	position: relative;
}

.twikoo .el-loading-mask {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.twikoo .el-loading-spinner {
	position: static;
	top: auto;
	margin-top: 0;
	width: auto;
}

/* ===== 懒加载骨架屏（twikoo 初始化前显示） ===== */
.twikoo-skeleton {
	padding: 0.25rem 0;
	pointer-events: none;
}

.twikoo-skeleton-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.twikoo-skeleton-avatar {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-full, 9999px);
	background-color: var(--btn-regular-bg);
}

.twikoo-skeleton-line {
	height: 0.875rem;
	border-radius: var(--radius-full, 9999px);
	background: linear-gradient(
		90deg,
		var(--btn-regular-bg) 25%,
		color-mix(in oklch, var(--btn-regular-bg) 60%, var(--primary) 40%) 37%,
		var(--btn-regular-bg) 63%
	);
	background-size: 400% 100%;
	animation: twikoo-skeleton-shimmer 1.4s var(--ease-standard, ease) infinite;
}

@keyframes twikoo-skeleton-shimmer {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.twikoo-skeleton-line {
		animation: none;
	}

	.twikoo .el-button,
	.twikoo .el-input__inner,
	.twikoo .el-textarea__inner,
	.twikoo .tk-sort-item,
	.twikoo .tk-pagination-pager,
	.twikoo .tk-nick-link,
	.twikoo .tk-action-link,
	.twikoo .tk-action-icon,
	.twikoo .tk-avatar,
	.twikoo .OwO .OwO-item,
	.twikoo .tk-comment {
		transition: none;
	}
}

/* ===== 移动端适配 ===== */
@media (max-width: 767px) {
	.twikoo .tk-comments-title {
		font-size: 1rem;
	}

	.twikoo .tk-comment {
		padding: 0.8rem;
	}

	/* 窄屏表单的堆叠布局由上方容器查询统一处理（主表单宽度必然小于 620px）。 */
}

/* ===== 全屏透明模式：玻璃拟态 ===== */
body.wallpaper-transparent .twikoo {
	--tk-bg: var(--card-bg-transparent);
	--tk-input-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-preview-container,
body.wallpaper-transparent .twikoo .OwO .OwO-body {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* ===== 管理面板 ===== */
/*
 * 管理面板浮层覆盖整个评论区。工具栏（z-index: 2）、表情面板（z-index: 2100）
 * 与 Element 弹出层（内联 z-index 2000+）都与管理面板同属 .comment-shell 的
 * 层叠上下文（container-type: inline-size 不产生层叠上下文），
 * 必须给浮层更高的层级，否则表情/图片按钮会穿透遮挡管理面板。
 */
.twikoo .tk-admin-container {
	z-index: 2200;
}

/* 管理面板使用独立的黑色工作区，明确重置 Twikoo 默认深色文字。 */
.twikoo .tk-admin,
.twikoo .tk-admin .tk-panel {
	background: #000;
	color: #f5f5f5;
}

.twikoo .tk-admin .tk-panel-title,
.twikoo .tk-admin .tk-admin-comment-item,
.twikoo .tk-admin .tk-admin-comment-meta,
.twikoo .tk-admin .tk-admin-comment-item .tk-content,
.twikoo .tk-admin .tk-admin-comment-item .tk-content * {
	color: #f5f5f5;
}

.twikoo .tk-admin .tk-admin-comment-meta,
.twikoo .tk-admin .tk-admin-comment-item .tk-time,
.twikoo .tk-admin .tk-admin-comment-item .tk-extra-text {
	color: #bdbdbd;
}

/*
 * 管理面板内的表单控件：黑色工作区上使用浅色文字。
 * 站点级规则（.twikoo .el-input__inner 等）会带进来深色主题文字（--tk-text），
 * 落在纯黑背景上无法辨认，这里按管理面板语境统一改为浅色。
 */
.twikoo .tk-admin .el-input__inner,
.twikoo .tk-admin .el-textarea__inner {
	background-color: rgb(255 255 255 / 8%);
	border-color: rgb(255 255 255 / 28%);
	color: #f5f5f5;
}

.twikoo .tk-admin .el-input__inner::placeholder,
.twikoo .tk-admin .el-textarea__inner::placeholder {
	color: rgb(255 255 255 / 45%);
}

.twikoo .tk-admin .el-input__inner:hover,
.twikoo .tk-admin .el-textarea__inner:hover {
	border-color: rgb(255 255 255 / 45%);
}

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

.twikoo .tk-admin .el-input.is-disabled .el-input__inner,
.twikoo .tk-admin .el-textarea.is-disabled .el-textarea__inner {
	background-color: rgb(255 255 255 / 4%);
	border-color: rgb(255 255 255 / 18%);
	color: rgb(255 255 255 / 55%);
}

/* 输入组标签（如登录表单的“密码”）与后置按钮容器。 */
.twikoo .tk-admin .el-input-group__prepend,
.twikoo .tk-admin .el-input-group__append {
	background-color: rgb(255 255 255 / 8%);
	border-color: rgb(255 255 255 / 28%);
	color: #e0e0e0;
}

/* 密码框的显隐切换图标。 */
.twikoo .tk-admin .el-input__suffix {
	color: #bdbdbd;
}

/* 原生控件（导入页的文件选择框、配置页下拉框选项等）。 */
.twikoo .tk-admin input[type="file"] {
	color: #bdbdbd;
}

/* 普通按钮：黑色工作区内改为半透明白底的次级按钮。 */
.twikoo .tk-admin .el-button:not(.el-button--primary):not(.el-button--text) {
	background-color: rgb(255 255 255 / 12%);
	border-color: rgb(255 255 255 / 30%);
	color: #f5f5f5;
}

.twikoo .tk-admin .el-button:not(.el-button--primary):not(.el-button--text):hover,
.twikoo .tk-admin .el-button:not(.el-button--primary):not(.el-button--text):focus {
	background-color: rgb(255 255 255 / 20%);
	border-color: rgb(255 255 255 / 45%);
	color: #fff;
}

/* 文字按钮（显示/隐藏/置顶/删除等）：黑色工作区内悬停不向黑色混合，保持主题色亮度。 */
.twikoo .tk-admin .el-button--text:hover {
	color: var(--tk-accent);
}

/* 评论管理分页：浅色文字（当前页保持主题色底 + 白字）。 */
.twikoo .tk-admin .tk-pagination-pager,
.twikoo .tk-admin .tk-pagination-options {
	color: #e0e0e0;
}

.twikoo .tk-admin .tk-pagination-pager.__current {
	color: #fff;
}

/* 管理页不需要关键字筛选，隐藏整个筛选行避免遮挡表情面板。 */
.twikoo .tk-admin .tk-admin-comment-filter {
	display: none;
}

/* 表情按钮的定位锚点与面板层级见上方“表情面板”一节（锚点 z 序 2100）。 */
.twikoo .tk-comment .tk-submit,
.twikoo .tk-comment .OwO,
.twikoo .tk-admin .tk-admin-comment-item {
	overflow: visible;
}