/* ==========================================================================
   AI 挂件样式
   --------------------------------------------------------------------------
   明暗模式适配：
     站点在 <html> 上加 .dark 类（见 setting-utils.js: classList.add("dark")），
     并在 :root.dark 中重定义主题变量。

     本文件定义一组 --ai-* 局部变量：
       1. 默认值 = 亮色（与首次上线那版的硬编码完全一致，外观零变化）
       2. html.dark 覆盖 = 暗色
       3. 所有规则只引用变量，不再出现硬编码颜色

   关于系统暗色：刻意不做 @media (prefers-color-scheme: dark) 兜底。
     站点自身已处理 system 模式 —— 当系统主题变化时它会把 .dark 同步到
     <html> 上，所以本挂件跟随 html.dark 即可。
     若额外加 @media 兜底，会在"用户手动选了亮色但系统是暗色"时错误地
     套用暗色变量（这正是之前的 bug）。
     参考：站点亮色 = <html> 无 .dark 类；不存在 .light 类。
   ========================================================================== */

/* ---------- 亮色（默认）----------
   这些值刻意与"首次上线那版"的硬编码完全一致，保证亮色外观零变化。 */
.ai-chat-panel,
.ai-chat-fab,
.ai-chat-overlay {
	--ai-fg: inherit;
	--ai-fg-dim: inherit;
	--ai-fg-faint: inherit;

	--ai-bg: var(--card-bg, #fff);
	--ai-bg-soft: rgba(0, 0, 0, .045);
	--ai-bg-soft2: rgba(0, 0, 0, .05);
	--ai-bg-strong: rgba(0, 0, 0, .08);

	--ai-border: rgba(0, 0, 0, .07);
	--ai-border-strong: rgba(0, 0, 0, .12);

	--ai-side-bg: linear-gradient(170deg, #fdf2f8 0%, #fef9ee 55%, #f0f7ff 100%);
	--ai-head-bg: linear-gradient(90deg, #fdf2f8, #eff6ff);
	--ai-glass: rgba(255, 255, 255, .75);
	--ai-glass-hover: rgba(255, 255, 255, .95);
	--ai-glass-soft: rgba(255, 255, 255, .6);
	--ai-glass-mid: rgba(255, 255, 255, .7);

	--ai-user-bubble: linear-gradient(135deg, #fce7f3, #ede9fe);
	--ai-user-fg: #3f3350;

	--ai-accent: #818cf8;
	--ai-accent-soft: rgba(129, 140, 248, .45);
	--ai-link: #5b62d8;
	--ai-code-bg: rgba(0, 0, 0, .07);
	--ai-pre-bg: rgba(0, 0, 0, .055);

	--ai-think-bg: rgba(0, 0, 0, .04);
	--ai-think-fg: rgba(0, 0, 0, .6);

	--ai-danger-bg: rgba(239, 68, 68, .12);
	--ai-danger-fg: #b91c1c;

	--ai-shadow: 0 24px 60px rgba(0, 0, 0, .22);
	--ai-shadow-fab: 0 6px 20px rgba(129, 140, 248, .4);
	--ai-shadow-fab-drag: 0 10px 28px rgba(129, 140, 248, .55);
	--ai-drag-ring: rgba(255, 255, 255, .65);
	--ai-hint-bg: rgba(0, 0, 0, .55);
	--ai-hint-fg: #fff;
	--ai-overlay-bg: rgba(0, 0, 0, .18);
	/* 原始版本用 opacity 控制弱化文字，这里沿用以便完全还原 */
	--ai-dim-opacity: .75;
	--ai-faint-opacity: .5;
}


/* ---------- 鏆楄壊 ---------- */
html.dark .ai-chat-panel,
html.dark .ai-chat-fab,
html.dark .ai-chat-overlay,
[data-theme="dark"] .ai-chat-panel,
[data-theme="dark"] .ai-chat-fab,
[data-theme="dark"] .ai-chat-overlay {
	--ai-fg: #e8e8ea;
	--ai-fg-dim: rgba(232, 232, 234, .68);
	--ai-fg-faint: rgba(232, 232, 234, .48);

	--ai-bg: var(--card-bg, #23232a);
	--ai-bg-soft: rgba(255, 255, 255, .06);
	--ai-bg-soft2: rgba(255, 255, 255, .09);
	--ai-bg-strong: rgba(255, 255, 255, .13);

	--ai-border: rgba(255, 255, 255, .11);
	--ai-border-strong: rgba(255, 255, 255, .18);

	--ai-side-bg: linear-gradient(170deg, #2a2333 0%, #2b2a24 55%, #1f2530 100%);
	--ai-head-bg: linear-gradient(90deg, #2a2333, #1f2530);
	--ai-glass: rgba(255, 255, 255, .06);
	--ai-glass-hover: rgba(255, 255, 255, .12);
	--ai-glass-soft: rgba(255, 255, 255, .05);
	--ai-glass-mid: rgba(255, 255, 255, .07);

	--ai-user-bubble: linear-gradient(135deg, #4a3a52, #3b3555);
	--ai-user-fg: #f3e8ff;

	--ai-accent: #a5b4fc;
	--ai-accent-soft: rgba(165, 180, 252, .5);
	--ai-link: #a5b4fc;
	--ai-code-bg: rgba(255, 255, 255, .12);
	--ai-pre-bg: rgba(255, 255, 255, .07);

	--ai-think-bg: rgba(255, 255, 255, .05);
	--ai-think-fg: rgba(232, 232, 234, .68);

	--ai-danger-bg: rgba(239, 68, 68, .18);
	--ai-danger-fg: #fca5a5;

	--ai-shadow: 0 24px 60px rgba(0, 0, 0, .55);
	--ai-shadow-fab: 0 6px 20px rgba(99, 102, 241, .45);
	--ai-shadow-fab-drag: 0 10px 28px rgba(99, 102, 241, .6);
	--ai-drag-ring: rgba(199, 210, 254, .7);
	--ai-hint-bg: rgba(255, 255, 255, .18);
	--ai-hint-fg: #f4f4f5;
	--ai-overlay-bg: rgba(0, 0, 0, .45);
	--ai-dim-opacity: 1;
	--ai-faint-opacity: .6;
}

/* ==========================================================================
   鎮诞鐞?   ========================================================================== */
.ai-chat-fab {
	position: fixed;
	left: auto; right: 1rem; bottom: 8.5rem;
	z-index: 1001;
	width: 3rem; height: 3rem;
	display: grid; place-items: center;
	border: none; border-radius: 9999px;
	cursor: grab;
	touch-action: none;
	user-select: none; -webkit-user-select: none;
	color: #fff;
	background: linear-gradient(135deg, #7dd3fc, var(--ai-accent));
	box-shadow: var(--ai-shadow-fab);
	transition: transform .2s ease, box-shadow .2s ease;
}
.ai-chat-fab:hover { transform: translateY(-2px) scale(1.05); }
.ai-chat-fab:active { cursor: grabbing; }
.ai-chat-fab.is-dragging {
	transition: none;
	transform: scale(1.08);
	box-shadow: var(--ai-shadow-fab-drag);
	cursor: grabbing;
}
.ai-chat-fab.is-dragging::after {
	content: ""; position: absolute; inset: -6px;
	border-radius: 9999px;
	border: 2px dashed var(--ai-drag-ring);
}
.ai-chat-fab__hint {
	position: absolute; bottom: -1.15rem; left: 50%;
	transform: translateX(-50%);
	font-size: .58rem; line-height: 1;
	padding: .16rem .34rem; border-radius: .3rem;
	background: var(--ai-hint-bg); color: var(--ai-hint-fg);
	white-space: nowrap; opacity: 0; pointer-events: none;
	transition: opacity .25s ease;
	backdrop-filter: blur(4px);
}
.ai-chat-fab:hover .ai-chat-fab__hint { opacity: 1; }

.ai-chat-overlay { position: fixed; inset: 0; z-index: 1002; background: var(--ai-overlay-bg); }

/* ==========================================================================
   闈㈡澘
   ========================================================================== */
.ai-chat-panel {
	position: fixed; right: 1rem; bottom: 1rem;
	z-index: 1003;
	width: min(56rem, calc(100vw - 2rem));
	height: min(38rem, calc(100vh - 5rem));
	display: grid; grid-template-columns: 15rem 1fr;
	overflow: hidden; border-radius: 1rem;
	background: var(--ai-bg);
	border: 1px solid var(--ai-border);
	box-shadow: var(--ai-shadow);
	color: var(--ai-fg);
	animation: ai-pop .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes ai-pop {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* ---------- 宸︽爮 ---------- */
.ai-chat-side {
	display: flex; flex-direction: column; gap: .75rem;
	padding: .9rem .8rem;
	background: var(--ai-side-bg);
	border-right: 1px solid var(--ai-border);
	min-height: 0;
}
.ai-chat-side__head { display: flex; align-items: center; gap: .55rem; }
.ai-chat-avatar {
	width: 2.25rem; height: 2.25rem; flex: none;
	display: grid; place-items: center;
	border-radius: 9999px; color: #fff;
	background: linear-gradient(135deg, #f9a8d4, #c4b5fd);
}
.ai-chat-side__meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ai-chat-side__meta strong { font-size: .875rem; }
.ai-chat-side__meta span { font-size: .7rem; opacity: var(--ai-faint-opacity, .55); }

.ai-chat-btn {
	display: flex; align-items: center; justify-content: center; gap: .4rem;
	padding: .5rem .75rem; font-size: .8rem; cursor: pointer;
	border-radius: .6rem;
	border: 1px solid var(--ai-border);
	background: var(--ai-glass);
	color: var(--ai-fg);
	transition: background .15s ease;
}
.ai-chat-btn:hover { background: var(--ai-glass-hover); }

.ai-chat-modes {
	display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
	padding: .2rem; border-radius: .6rem;
	background: var(--ai-bg-soft2);
}
.ai-chat-mode {
	padding: .35rem .5rem; font-size: .78rem; cursor: pointer;
	border: none; border-radius: .45rem;
	background: transparent; color: var(--ai-fg-dim);
	transition: background .15s ease, color .15s ease;
}
.ai-chat-mode.is-active {
	background: var(--ai-bg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	font-weight: 600;
	color: var(--ai-fg);
}
.ai-chat-mode:disabled { opacity: .42; cursor: not-allowed; }

.ai-chat-side__section { display: flex; flex-direction: column; gap: .35rem; min-height: 0; }
.ai-chat-side__section--grow { flex: 1; }
.ai-chat-label {
	font-size: .62rem; letter-spacing: .09em; text-transform: uppercase;
	opacity: var(--ai-faint-opacity, .5);
}
.ai-chat-threads { display: flex; flex-direction: column; gap: .2rem; overflow-y: auto; min-height: 0; }
.ai-chat-thread {
	padding: .4rem .5rem; font-size: .78rem; text-align: left; cursor: pointer;
	border: none; border-radius: .45rem; background: transparent; color: var(--ai-fg-dim);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: background .15s ease;
}
.ai-chat-thread:hover { background: var(--ai-bg-soft2); }
.ai-chat-thread.is-active { background: var(--ai-bg-strong); font-weight: 600; color: var(--ai-fg); }

.ai-chat-ctx {
	font-size: .72rem; line-height: 1.4;
	opacity: var(--ai-dim-opacity, 1);
	padding: .5rem .55rem; border-radius: .5rem;
	background: var(--ai-glass-soft);
	border: 1px solid var(--ai-bg-soft2);
	overflow: hidden;
}
.ai-chat-ctx span { font-weight: 600; }

.ai-chat-side__foot { margin-top: auto; }
.ai-chat-quota {
	font-size: .7rem; padding: .45rem .55rem; border-radius: .5rem;
	background: var(--ai-glass-mid);
	border: 1px solid var(--ai-bg-soft2);
}

/* ---------- 鍙虫爮 ---------- */
.ai-chat-main {
	display: flex; flex-direction: column;
	min-width: 0; min-height: 0;
	background: var(--ai-bg);
}
.ai-chat-main__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: .8rem 1rem;
	border-bottom: 1px solid var(--ai-border);
	background: var(--ai-head-bg);
}
.ai-chat-main__title { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.ai-chat-icon-btn {
	display: grid; place-items: center; width: 2rem; height: 2rem;
	border: none; border-radius: .5rem; cursor: pointer;
	background: transparent; color: var(--ai-fg); opacity: .6;
	transition: background .15s ease, opacity .15s ease;
}
.ai-chat-icon-btn:hover { background: var(--ai-bg-soft2); opacity: 1; }

.ai-chat-log {
	flex: 1; min-height: 0; overflow-y: auto;
	padding: 1rem; display: flex; flex-direction: column; gap: .9rem;
}
.ai-chat-row { display: flex; gap: .55rem; align-items: flex-start; }
.ai-chat-row--user { flex-direction: row-reverse; }
.ai-chat-row__avatar {
	width: 1.9rem; height: 1.9rem; flex: none;
	display: grid; place-items: center;
	border-radius: 9999px; font-size: .75rem; color: #fff;
	background: linear-gradient(135deg, #f9a8d4, #c4b5fd);
}
.ai-chat-row--user .ai-chat-row__avatar { background: linear-gradient(135deg, #93c5fd, #a5b4fc); }

.ai-chat-bubble {
	max-width: min(34rem, 78%);
	padding: .6rem .8rem; border-radius: .9rem;
	font-size: .85rem; line-height: 1.65;
	white-space: pre-wrap; word-break: break-word;
	background: var(--ai-bg-soft);
	color: var(--ai-fg);
}
.ai-chat-row--user .ai-chat-bubble {
	background: var(--ai-user-bubble);
	color: var(--ai-user-fg);
}
.ai-chat-bubble--error { background: var(--ai-danger-bg); color: var(--ai-danger-fg); }

.ai-chat-typing { display: inline-flex; gap: 3px; align-items: center; }
.ai-chat-typing i {
	width: 5px; height: 5px; border-radius: 9999px;
	background: currentColor; opacity: .45;
	animation: ai-blink 1.2s infinite;
}
.ai-chat-typing i:nth-child(2) { animation-delay: .15s; }
.ai-chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-blink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- 鎬濊€冨潡 ---------- */
.ai-chat-think {
	margin-bottom: .5rem; padding: .45rem .6rem;
	border-radius: .55rem;
	background: var(--ai-think-bg);
	border-left: 3px solid var(--ai-accent-soft);
	font-size: .76rem; line-height: 1.55;
	color: var(--ai-think-fg);
}
.ai-chat-think__head { display: flex; align-items: center; gap: .35rem; font-weight: 600; opacity: .85; }
.ai-chat-think.is-done .ai-chat-think__head { cursor: pointer; user-select: none; }
.ai-chat-think.is-done .ai-chat-think__head:hover { opacity: 1; }
.ai-chat-think__arrow { display: inline-block; width: .8em; }
.ai-chat-think__dot {
	width: .45rem; height: .45rem; border-radius: 9999px;
	background: var(--ai-accent);
	animation: ai-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-pulse {
	0%,100% { opacity: .3; transform: scale(.85); }
	50%     { opacity: 1;  transform: scale(1); }
}
.ai-chat-think__body {
	margin-top: .35rem; max-height: 12rem; overflow-y: auto;
	white-space: pre-wrap; word-break: break-word;
	opacity: .9;
}

/* ==========================================================================
   Markdown 娓叉煋
   ========================================================================== */
.ai-chat-answer { white-space: pre-wrap; word-break: break-word; }
.ai-md { white-space: normal; }
.ai-md > *:first-child { margin-top: 0; }
.ai-md > *:last-child { margin-bottom: 0; }
.ai-md p { margin: .45rem 0; white-space: pre-wrap; }
.ai-md-h { font-size: .98em; margin: .6rem 0 .35rem; font-weight: 700; line-height: 1.35; }
.ai-md-h:first-child { font-size: 1.02em; }
.ai-md-list { margin: .35rem 0; padding-left: 1.15rem; }
.ai-md-list li { margin: .16rem 0; }
.ai-md ul.ai-md-list { list-style: disc; }
.ai-md ol.ai-md-list { list-style: decimal; }

.ai-md-code {
	padding: .08em .34em; border-radius: .28rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em;
	background: var(--ai-code-bg);
	color: var(--ai-fg);
}
.ai-md-pre {
	margin: .5rem 0; padding: .6rem .75rem;
	border-radius: .55rem; overflow-x: auto;
	background: var(--ai-pre-bg);
	border: 1px solid var(--ai-border);
}
.ai-md-pre code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .8rem; line-height: 1.55;
	white-space: pre; background: none; padding: 0;
	color: var(--ai-fg);
}
.ai-md-quote {
	margin: .5rem 0; padding: .35rem .7rem;
	border-left: 3px solid var(--ai-accent-soft);
	background: var(--ai-think-bg);
	border-radius: .3rem;
	white-space: pre-wrap;
	color: var(--ai-fg-dim);
}
.ai-md-hr { margin: .7rem 0; border: none; border-top: 1px solid var(--ai-border-strong); }
.ai-md a { color: var(--ai-link); text-decoration: underline; text-underline-offset: 2px; }
.ai-md-tablewrap { margin: .5rem 0; overflow-x: auto; }
.ai-md-table { border-collapse: collapse; font-size: .8rem; min-width: 100%; }
.ai-md-table th, .ai-md-table td {
	border: 1px solid var(--ai-border-strong);
	padding: .3rem .55rem; text-align: left;
}
.ai-md-table th { background: var(--ai-bg-soft2); font-weight: 600; }
.ai-md-img { max-width: 100%; border-radius: .4rem; margin: .3rem 0; }

/* ==========================================================================
   杈撳叆鍖?   ========================================================================== */
.ai-chat-composer { padding: .75rem 1rem 1rem; border-top: 1px solid var(--ai-border); }
.ai-chat-input-wrap {
	display: flex; align-items: flex-end; gap: .5rem;
	padding: .45rem .45rem .45rem .7rem;
	border-radius: .75rem;
	border: 1px solid var(--ai-border-strong);
	background: var(--ai-bg);
	transition: border-color .15s ease;
}
.ai-chat-input-wrap:focus-within { border-color: var(--ai-accent-soft); }
.ai-chat-input {
	flex: 1; min-height: 2rem; max-height: 8rem; resize: none;
	border: none; outline: none; background: transparent;
	color: var(--ai-fg);
	font: inherit; font-size: .85rem; line-height: 1.5;
	padding: .25rem 0;
}
.ai-chat-input::placeholder { color: var(--ai-fg-faint); }
.ai-chat-send {
	flex: none; padding: .45rem 1rem;
	font-size: .82rem; font-weight: 600;
	border: none; border-radius: .6rem; cursor: pointer;
	color: #fff;
	background: var(--ai-accent);
	transition: opacity .15s ease;
}
.ai-chat-send:disabled { opacity: .5; cursor: not-allowed; }
.ai-chat-send.is-stop { background: #ef4444; }
.ai-chat-composer__foot {
	display: flex; justify-content: space-between;
	margin-top: .4rem; font-size: .68rem;
	opacity: var(--ai-faint-opacity, .5);
}

/* ---------- 婊氬姩鏉★紙鏆楄壊涓嬫洿鍗忚皟锛?---------- */
.ai-chat-log::-webkit-scrollbar,
.ai-chat-threads::-webkit-scrollbar,
.ai-chat-think__body::-webkit-scrollbar,
.ai-md-pre::-webkit-scrollbar,
.ai-md-tablewrap::-webkit-scrollbar { width: 8px; height: 8px; }
.ai-chat-log::-webkit-scrollbar-thumb,
.ai-chat-threads::-webkit-scrollbar-thumb,
.ai-chat-think__body::-webkit-scrollbar-thumb,
.ai-md-pre::-webkit-scrollbar-thumb,
.ai-md-tablewrap::-webkit-scrollbar-thumb {
	background: var(--ai-border-strong);
	border-radius: 9999px;
}
.ai-chat-log::-webkit-scrollbar-track,
.ai-chat-threads::-webkit-scrollbar-track,
.ai-chat-think__body::-webkit-scrollbar-track,
.ai-md-pre::-webkit-scrollbar-track,
.ai-md-tablewrap::-webkit-scrollbar-track { background: transparent; }

/* ---------- 鍝嶅簲寮?---------- */
@media (max-width: 768px) {
	.ai-chat-panel {
		grid-template-columns: 1fr;
		right: .5rem; left: .5rem; bottom: .5rem;
		width: auto; height: min(80vh, 34rem);
	}
	.ai-chat-side { display: none; }
}