/**
 * AI 图片放大（工具页）
 *
 * 页面骨架全部复用 tools.css 里的 .xat-*：container / xat-head / xat-title /
 * xat-notice / xat-layout / xat-side / xat-panel / xat-panel-title / xat-btn /
 * xat-btn-primary / xat-btn-ghost / xat-btn-block / xat-hint，所以这一份只写
 * 这个工具自己的东西（拖拽区、队列、对比滑块、进度、KV 表）。
 *
 * 站内约定：不用 backdrop-filter，不画边框线，块与块靠底色和间距区分。
 * 加载方式见 functions.php 的 xianer_page_styles()，版本号走 filemtime。
 */

/*
 * 按钮统一走「半透明底」，不铺实色卡片。
 *
 * 和图片处理工具（tool-edit.css 的 --xe-*）是同一套数值，两个工具页并排放
 * 才像一家人：站内主色是黑白，实色底（白卡 / 黑块）在深色模式下会变成一块块
 * 亮斑；换成半透明叠加层之后，不管底下是页面底还是半透明面板，深浅都自动跟着
 * 走，只用三档浓度区分 常态 / 悬停 / 选中。
 */
.xu-page {
	padding: 8px 0 40px;

	--xu-fill: rgba(0, 0, 0, 0.045);
	--xu-fill-h: rgba(0, 0, 0, 0.085);
	--xu-fill-on: rgba(0, 0, 0, 0.18);
}

html.dark .xu-page {
	--xu-fill: rgba(255, 255, 255, 0.08);
	--xu-fill-h: rgba(255, 255, 255, 0.15);
	--xu-fill-on: rgba(255, 255, 255, 0.3);
}

/* 下面好几个块是 display:flex，类选择器会盖掉浏览器对 [hidden] 的默认 display:none，
   不补这一条，没完成的图也会挂一条空工具栏 / 空按钮。 */
.xu-page [hidden] {
	display: none !important;
}

/* ---------- 通用按钮：半透明，不铺实色 ---------- */

/*
 * tools.css 里的 .xat-btn 是实色的（主按钮铺 --pc-accent 蓝，次要按钮铺 --bg 白），
 * 那是给电商风工具页用的。这里全部换成半透明叠加：
 *   次要按钮平时全透明，悬停才浮一层；主按钮常驻一层浅底，悬停再加浓。
 *
 * 选择器写到 `.xat-btn.xat-btn-xxx` 这个长度，是为了压过 tools.css 里
 * `.dark .xat-btn-primary { color:#111116 }` 那条 —— 深色下 --ink 已经是浅色，
 * 让它继续给出黑字就是深底黑字，看不清。
 */
.xu-page .xat-btn {
	border-radius: var(--radius-sm);
	font-family: inherit;
	transition: background 0.18s var(--ease), color 0.18s var(--ease),
		opacity 0.18s var(--ease);
}

.xu-page .xat-btn.xat-btn-ghost {
	background: transparent;
	color: var(--text);
}

.xu-page .xat-btn.xat-btn-ghost:hover:not(:disabled) {
	background: var(--xu-fill-h);
	color: var(--ink);
}

.xu-page .xat-btn.xat-btn-primary {
	background: var(--xu-fill);
	color: var(--ink);
	font-weight: 600;
	/* tools.css 给主按钮挂了 filter: brightness(1.05)，半透明底上会连字一起提亮 */
	filter: none;
}

.xu-page .xat-btn.xat-btn-primary:hover:not(:disabled) {
	background: var(--xu-fill-on);
	filter: none;
}

.xu-page .xat-btn:disabled {
	opacity: 0.38;
}

/* 媒体库「加载更多」也是按钮，同一套 */
.xu-page .xat-loadmore {
	background: var(--xu-fill);
	color: var(--text);
	transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.xu-page .xat-loadmore:hover {
	background: var(--xu-fill-h);
	color: var(--ink);
}

/* ---------- 顶部状态胶囊 ---------- */

.xu-status {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: -4px 0 20px;
}

.xu-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--xu-fill);
	color: var(--text);
}

.xu-chip i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--muted);
	flex: 0 0 auto;
}

.xu-chip.is-ok i {
	background: var(--ok);
}

.xu-chip.is-warn i {
	background: #d97706;
}

/*
 * 第一颗胶囊是按钮：点一下才开始下 23 MB 的运行时和模型，不点就一直不动。
 * 只补 button 需要重置的那几项，配色沿用 .xu-chip。
 */
.xu-chip-btn {
	border: none;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.xu-chip-btn:hover:not(:disabled) {
	background: var(--xu-fill-h);
	color: var(--ink);
}

.xu-chip-btn:disabled {
	cursor: default;
}

/* 加载中：小圆点换成一圈转的环，比静态文字更能说明「在动」 */
.xu-chip-btn.is-loading i {
	background: transparent;
	border: 1.5px solid currentColor;
	border-top-color: transparent;
	box-sizing: border-box;
	animation: xu-spin 0.7s linear infinite;
}

@keyframes xu-spin {
	to {
		transform: rotate(360deg);
	}
}

/* 「还没加载，先点我」：没点就点开始的时候脉冲三下 */
.xu-chip-btn.is-attn {
	animation: xu-attn 0.8s ease-in-out 3;
}

@keyframes xu-attn {
	0%,
	100% {
		box-shadow: 0 0 0 0 var(--xu-fill-h);
	}

	50% {
		box-shadow: 0 0 0 4px var(--xu-fill-on);
	}
}

/* ---------- 拖拽 / 选择 ---------- */

.xu-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 24px 12px;
	border-radius: var(--radius-sm);
	background: var(--xu-fill);
	text-align: center;
	cursor: pointer;
	transition: background 0.18s var(--ease);
}

.xu-drop:hover,
.xu-drop.is-over {
	background: var(--xu-fill-h);
}

.xu-drop-ico {
	font-size: 20px;
	line-height: 1;
	opacity: 0.8;
}

.xu-drop-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}

.xu-drop-hint {
	font-size: 12px;
	color: var(--muted);
}

/* ---------- 分段选择（输出格式） ---------- */

.xu-seg {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: var(--radius-sm);
	background: var(--xu-fill);
}

.xu-seg-btn {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	color: var(--text);
	font-size: 12.5px;
	font-family: inherit;
	padding: 6px 0;
	border-radius: 7px;
	cursor: pointer;
	transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.xu-seg-btn.active {
	background: var(--xu-fill-on);
	color: var(--ink);
	font-weight: 700;
}

/* ---------- 图片来源切换（本地 / 媒体库 / 链接） ---------- */

.xu-src-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.xu-src-head .xat-panel-title {
	margin: 0;
}

.xu-src-tabs {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 8px;
	background: var(--xu-fill);
	flex: 0 0 auto;
}

.xu-src-tab {
	border: none;
	background: transparent;
	color: var(--muted);
	font-family: inherit;
	font-size: 12px;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.xu-src-tab.active {
	background: var(--xu-fill-on);
	color: var(--ink);
	font-weight: 700;
}

/* 三个来源一次只露一个；用 class 而不是 [hidden]，免得和 .xu-page [hidden] 打架 */
.xu-src-pane {
	display: none;
}

.xu-src-pane.active {
	display: block;
}

/* ---------- 媒体库 ----------
 * 骨架直接用壁纸裁剪工具那套（.xat-search / .xat-medialist / .xat-media /
 * .xat-loadmore，都在 tools.css 里），这里只把默认的「1:1 裁切网格」改成
 * 「3 列等比瀑布流」：壁纸基本是竖图，裁成方块看不出构图，也不好判断转完值不值。
 *
 * 列是 JS 建的（见 app.js 的 mediaCols），「加载更多」只往列尾追加，
 * 已经在看的图不会被重新排版跳位置；这里不用 CSS 多列 —— 浏览器会为了
 * 平衡列高把已显示的图挪到别的列去。
 */
#xu-mlist {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	max-height: 330px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

#xu-mlist .masonry-col {
	flex: 1;
	min-width: 0;
}

#xu-mlist .xat-media {
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 0 6px;
	border-radius: 7px;
	background: var(--xu-fill-h);
}

#xu-mlist .xat-media img {
	position: static;
	width: 100%;
	height: auto;
	transition: transform 0.24s var(--ease), opacity 0.16s var(--ease);
}

#xu-mlist .xat-media.is-loading {
	pointer-events: none;
}

#xu-mlist .xat-media.is-loading img {
	opacity: 0.4;
}

/* ---------- 链接载入 ---------- */

/* 输入框和按钮用 .xat-linkrow / .xat-url，桌面端按钮窄一点才不挤输入框 */
.xu-src-pane[data-pane='link'] .xat-btn {
	flex: 0 0 auto;
	padding-left: 13px;
	padding-right: 13px;
}

/* ---------- 水印开关 ---------- */

.xu-wm-opt {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--muted);
	cursor: pointer;
}

.xu-wm-opt input {
	margin: 0;
	flex: 0 0 auto;
}

/* ---------- 队列 ---------- */

.xu-q-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.xu-q-head .xat-panel-title {
	margin: 0;
}

.xu-count {
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
	margin-left: 6px;
}

.xu-list {
	max-height: 320px;
	overflow: auto;
	overscroll-behavior: contain;
}

.xu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background 0.16s var(--ease);
	/* 队列上限 100 张，视口外的条目跳过布局和绘制；
	   56px 是 42 缩略图 + 上下 7px 内边距估出来的行高 */
	content-visibility: auto;
	contain-intrinsic-size: auto 56px;
}

.xu-item + .xu-item {
	margin-top: 2px;
}

.xu-item:hover {
	background: var(--xu-fill);
}

.xu-item.is-active {
	background: var(--xu-fill-h);
}

.xu-thumb {
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 8px;
	overflow: hidden;
	background: var(--xu-fill);
}

.xu-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.xu-info {
	flex: 1;
	min-width: 0;
}

.xu-name {
	font-size: 13px;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.xu-sub {
	font-size: 11.5px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 1px;
}

.xu-badge {
	flex: 0 0 auto;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--xu-fill-h);
	color: var(--muted);
	white-space: nowrap;
}

.xu-badge.is-run {
	background: rgba(108, 140, 255, 0.16);
	color: #3454c4;
}

.xu-badge.is-done {
	background: rgba(18, 161, 80, 0.14);
	color: var(--ok);
}

.xu-badge.is-err {
	background: rgba(192, 57, 43, 0.14);
	color: var(--danger);
}

.dark .xu-badge.is-run {
	background: rgba(140, 165, 255, 0.18);
	color: #a9bcff;
}

.xu-x {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.16s var(--ease), background 0.16s var(--ease);
}

.xu-item:hover .xu-x,
.xu-item.is-active .xu-x {
	opacity: 1;
}

.xu-x:hover {
	background: var(--xu-fill-h);
	color: var(--ink);
}

.xu-empty {
	text-align: center;
	padding: 54px 10px 58px;
	color: var(--muted);
}

.xu-empty span {
	display: block;
	font-size: 24px;
	line-height: 1;
	margin-bottom: 8px;
	opacity: 0.7;
}

.xu-empty p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.7;
}

/* ---------- 结果对比 ---------- */

/* 完成后会滚到这里；吸顶导航高度是 var(--header-offset)，留一点余量 */
#xu-result {
	scroll-margin-top: calc(var(--header-offset, 74px) + 12px);
}

.xu-res-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.xu-res-head .xat-panel-title {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xu-res-meta {
	font-size: 12px;
	color: var(--muted);
	text-align: right;
	flex: 0 0 auto;
}

.xu-compare {
	position: relative;
	/* 收缩到图片实际宽度：滑块按百分比算才对得上，竖图也不会把整页撑成一条 */
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	border-radius: var(--radius);
	overflow: hidden;
	background: #0b0b0c;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.xu-compare img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 74vh;
}

.xu-before {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 50%;
	overflow: hidden;
}

.xu-before img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: auto;
	max-width: none;
	max-height: none;
}

.xu-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: rgba(255, 255, 255, 0.92);
	cursor: ew-resize;
	transform: translateX(-1px);
}

.xu-handle span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.xu-handle span::before,
.xu-handle span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -4px;
	border: 4px solid transparent;
}

.xu-handle span::before {
	left: 7px;
	border-right-color: #111;
}

.xu-handle span::after {
	right: 7px;
	border-left-color: #111;
}

.xu-tag {
	position: absolute;
	top: 10px;
	font-size: 11.5px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	pointer-events: none;
}

.xu-tag-l {
	left: 10px;
}

.xu-tag-r {
	right: 10px;
}

.xu-res-act {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.xu-res-act .xat-btn {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------- 会员权益 ---------- */

/* 金色是站里 VIP 的既定色（--gold / --gold-text），别另起一套 */
.xu-vip-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 5px;
	background: rgba(201, 148, 46, 0.14);
	color: var(--gold-text);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
	vertical-align: 1px;
}

.xu-vip-tag.is-on {
	background: var(--gold);
	color: #fff;
}

.xu-up-link {
	color: var(--gold-text);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

.xu-up-link:hover {
	color: var(--gold);
}

.xu-lock-txt {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--muted);
}

/* ---------- 右栏：进度 / 汇总 / 环境 ---------- */

.xu-prog-num {
	font-size: 12.5px;
	color: var(--muted);
	margin-bottom: 8px;
}

.xu-prog-num b {
	font-size: 18px;
	line-height: 1;
	color: var(--text);
	font-weight: 700;
	margin-right: 2px;
}

.xu-prog-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--xu-fill-h);
	overflow: hidden;
}

.xu-prog-bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--brand);
	transition: width 0.25s var(--ease);
}

.dark .xu-prog-bar i {
	background: #e6e6ea;
}

.xu-prog-txt {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--muted);
	min-height: 19px;
}

.xu-sum {
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--muted);
	margin-bottom: 10px;
}

.xu-sum b {
	color: var(--text);
	font-weight: 600;
}

.xu-kv {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 7px 10px;
	margin: 0;
	font-size: 12.5px;
}

.xu-kv dt {
	color: var(--muted);
	white-space: nowrap;
}

.xu-kv dd {
	margin: 0;
	text-align: right;
	color: var(--text);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* tools.css 给的是 260px 1fr 260px，但 1fr 的下限是 min-content ——
   队列里来一个长文件名，整列就被撑破（手机上尤其明显：视口 390，内容 505，
   整页横向滚）。换成 minmax(0,1fr) 让列宽可以真的压下去，靠 .xu-info 的
   min-width:0 + 省略号来收。 */
.xu-page .xat-layout {
	grid-template-columns: 260px minmax(0, 1fr) 260px;
}

.xu-page .xat-side,
.xu-page .xu-main {
	min-width: 0;
}

/* ---------- 轻提示 ---------- */

.xu-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translate(-50%, 12px);
	max-width: 78vw;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	box-shadow: var(--shadow-md);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
	z-index: 1200;
}

.xu-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

.dark .xu-toast {
	background: #e6e6ea;
	color: #111116;
}

/* ---------- 小屏 ---------- */

@media (max-width: 900px) {
	.xu-page .xat-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.xu-list {
		max-height: none;
	}

	.xu-compare img,
	.xu-before img {
		max-height: 62vh;
	}

	/* 单栏下横向空间够了，媒体库不再压着 330px 的小窗口滚 */
	#xu-mlist {
		max-height: none;
	}
}

@media (max-width: 480px) {
	.xu-status {
		margin-bottom: 16px;
	}

	/* 窄屏只留「引擎状态」和「队列数」，中间那两个是固定说明，省掉换行 */
	.xu-status .xu-chip:nth-child(2),
	.xu-status .xu-chip:nth-child(3) {
		display: none;
	}

	.xu-res-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.xu-res-meta {
		text-align: left;
	}

	/* 三个按钮挤一行时「复制到剪贴板」会把「新标签打开」顶下去，
	   干脆排成「主按钮独占一行 + 两个次要按钮并排」 */
	.xu-res-act {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.xu-res-act > *:first-child {
		grid-column: 1 / -1;
	}

	.xu-res-act .xat-btn {
		width: 100%;
	}
}