#waifu-toggle {
	background-color: #fa0;
	border-radius: 5px;
	bottom: 66px;
	color: #fff;
	cursor: pointer;
	font-size: 12px;
	left: 0;
	margin-left: -100px;
	padding: 5px 2px 5px 5px;
	position: fixed;
	transition: margin-left 1s;
	width: 60px;
	writing-mode: vertical-rl;
}

#waifu-toggle.waifu-toggle-active {
	margin-left: -50px;
}

#waifu-toggle.waifu-toggle-active:hover {
	margin-left: -30px;
}

/* ===== 看板娘隐藏后的召唤按钮（半透明玻璃拟态） ===== */
#waifu-toggle-btn {
	position: fixed;
	left: 20px;
	bottom: 40px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2147483647;
	/* 默认隐藏：只有看板娘真正隐藏后才由脚本淡入，避免与看板娘同时出现 */
	opacity: 0;
	pointer-events: none;
	color: #6b7280;
	background: rgba(255, 255, 255, 0.45);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	backdrop-filter: blur(14px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 6px 20px rgba(31, 38, 135, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.5);
	transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), background .3s ease, box-shadow .3s ease;
	will-change: transform, opacity;
}

#waifu-toggle-btn svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

#waifu-toggle-btn:hover {
	transform: translateY(-3px) scale(1.06);
	background: rgba(255, 255, 255, 0.62);
	box-shadow: 0 10px 28px rgba(31, 38, 135, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

#waifu-toggle-btn:active {
	transform: translateY(-1px) scale(0.97);
}

/* 暗黑模式：深色玻璃 */
html.dark #waifu-toggle-btn {
	color: #d1d5db;
	background: rgba(30, 32, 40, 0.5);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

html.dark #waifu-toggle-btn:hover {
	background: rgba(44, 47, 58, 0.62);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

#waifu {
	bottom: -1000px;
	left: 0;
	line-height: 0;
	margin-bottom: -10px;
	position: fixed;
	transform: translateY(3px);
	transition: transform .3s ease-in-out, bottom 3s ease-in-out;
	z-index: 9999;
}

#waifu:hover {
	transform: translateY(0);
}

#waifu-tips {
	animation: shake 50s ease-in-out 5s infinite;
	background-color: rgba(236, 217, 188, .5);
	border: 1px solid rgba(224, 186, 140, .62);
	border-radius: 12px;
	box-shadow: 0 3px 15px 2px rgba(191, 158, 118, .2);
	font-size: 14px;
	line-height: 24px;
	margin: -30px 20px;
	min-height: 70px;
	opacity: 0;
	overflow: hidden;
	padding: 5px 10px;
	position: absolute;
	text-overflow: ellipsis;
	transition: opacity 1s;
	width: clamp(150px, 55vw, 250px);
	word-break: break-all;
	/* 气泡提示仅作装饰：不拦截指针事件，避免挡住操作区域 */
	pointer-events: none;
}

#waifu-tips.waifu-tips-active {
	opacity: 1;
	transition: opacity .2s;
}

#waifu-tips span {
	color: #0099cc;
}

/* ===== AI 简介模式：借用气泡流式输出长文，允许滚动与交互 ===== */
#waifu-tips.waifu-ai-mode {
	animation: none; /* 停止气泡漂移，便于滚动阅读 */
	pointer-events: auto;
	overflow-y: auto;
	overflow-x: hidden;
	text-overflow: clip;
	width: clamp(230px, 30vw, 320px);
	max-height: min(46vh, 360px);
	min-height: 90px;
	word-break: break-word;
	background-color: rgba(250, 244, 230, .95);
}

#waifu-tips.waifu-ai-mode::-webkit-scrollbar {
	width: 6px;
}

#waifu-tips.waifu-ai-mode::-webkit-scrollbar-thumb {
	background: rgba(150, 120, 90, .45);
	border-radius: 3px;
}

html.dark #waifu-tips.waifu-ai-mode {
	background-color: rgba(38, 38, 48, .95);
	border-color: rgba(120, 120, 150, .6);
	color: #e4e7ed;
}

.waifu-ai-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: #8a6d3b;
	margin-bottom: 4px;
	position: sticky;
	top: 0;
}

html.dark .waifu-ai-header {
	color: #a0a6c0;
}

.waifu-ai-close {
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
	font-size: 14px;
	line-height: 1;
	padding: 0 2px;
}

.waifu-ai-body {
	white-space: pre-wrap;
}

.waifu-ai-cursor {
	display: inline-block;
	width: 2px;
	height: 1em;
	background: currentColor;
	vertical-align: -2px;
	animation: waifu-ai-blink 1s steps(2) infinite;
}

/* ===== 看板娘聊天入口按钮：并入 #waifu-tool 工具列，尺寸/排布与其他按钮一致 ===== */
#waifu-chat-btn {
	cursor: pointer;
	color: #ff6a88;
	transition: transform .2s ease, color .2s ease;
}

/* 提高特异性：覆盖 #waifu-tool svg 的灰色填充，聊天图标用描边风格 */
#waifu-tool #waifu-chat-btn svg {
	stroke: currentColor;
	fill: none;
}

#waifu-chat-btn:hover {
	color: #ff3d63;
	transform: scale(1.15);
}

html.dark #waifu-chat-btn {
	color: #8ea2ff;
}

html.dark #waifu-chat-btn:hover {
	color: #aebcff;
}

/* 聊天进行中固定工具列可见，避免失去 hover 后按钮淡出 */
#waifu.waifu-tool-pinned #waifu-tool {
	opacity: 1;
}

/* ===== 聊天气泡内的消息样式 ===== */
.waifu-chat-msgs {
	font-size: 13px;
	line-height: 19px;
}

.waifu-chat-msg {
	max-width: 86%;
	padding: 6px 10px;
	border-radius: 12px;
	word-break: break-word;
	white-space: pre-wrap;
}

.waifu-chat-assistant {
	align-self: flex-start;
	background: rgba(255, 255, 255, .75);
	border: 1px solid rgba(224, 186, 140, .4);
	border-bottom-left-radius: 3px;
	color: #4a3f35;
}

.waifu-chat-user {
	align-self: flex-end;
	background: #e8837b;
	color: #fff;
	border-bottom-right-radius: 3px;
}

.waifu-chat-error {
	color: #c0392b;
	font-style: italic;
}

html.dark .waifu-chat-assistant {
	background: rgba(60, 60, 76, .8);
	border-color: rgba(120, 120, 150, .4);
	color: #d7dbec;
}

html.dark .waifu-chat-user {
	background: #5b6bb5;
}

.waifu-chat-msgs::-webkit-scrollbar {
	width: 6px;
}

.waifu-chat-msgs::-webkit-scrollbar-thumb {
	background: rgba(150, 120, 90, .45);
	border-radius: 3px;
}

@keyframes waifu-ai-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

#live2d {
	cursor: grab;
	position: relative;
	width: clamp(160px, 22vw, 320px);
	height: clamp(160px, 22vw, 320px);
}

#live2d:active {
	cursor: grabbing;
}

#waifu-tool {
	color: #aaa;
	opacity: 0;
	position: absolute;
	right: clamp(-8px, -1.2vw, -4px);
	bottom: clamp(48px, 8vw, 72px);
	transition: opacity 1s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(6px, 1.4vw, 14px);
}

#waifu:hover #waifu-tool {
	opacity: 1;
}

#waifu-tool span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(16px, 2.2vw, 28px);
	text-align: center;
}

#waifu-tool svg {
	fill: #7b8c9d;
	cursor: pointer;
	height: clamp(13px, 1.8vw, 22px);
	width: clamp(13px, 1.8vw, 22px);
	transition: fill .3s;
}

#waifu-tool svg:hover {
	fill: #0684bd; /* #34495e */
}

@keyframes shake {
	2% {
		transform: translate(.5px, -1.5px) rotate(-.5deg);
	}

	4% {
		transform: translate(.5px, 1.5px) rotate(1.5deg);
	}

	6% {
		transform: translate(1.5px, 1.5px) rotate(1.5deg);
	}

	8% {
		transform: translate(2.5px, 1.5px) rotate(.5deg);
	}

	10% {
		transform: translate(.5px, 2.5px) rotate(.5deg);
	}

	12% {
		transform: translate(1.5px, 1.5px) rotate(.5deg);
	}

	14% {
		transform: translate(.5px, .5px) rotate(.5deg);
	}

	16% {
		transform: translate(-1.5px, -.5px) rotate(1.5deg);
	}

	18% {
		transform: translate(.5px, .5px) rotate(1.5deg);
	}

	20% {
		transform: translate(2.5px, 2.5px) rotate(1.5deg);
	}

	22% {
		transform: translate(.5px, -1.5px) rotate(1.5deg);
	}

	24% {
		transform: translate(-1.5px, 1.5px) rotate(-.5deg);
	}

	26% {
		transform: translate(1.5px, .5px) rotate(1.5deg);
	}

	28% {
		transform: translate(-.5px, -.5px) rotate(-.5deg);
	}

	30% {
		transform: translate(1.5px, -.5px) rotate(-.5deg);
	}

	32% {
		transform: translate(2.5px, -1.5px) rotate(1.5deg);
	}

	34% {
		transform: translate(2.5px, 2.5px) rotate(-.5deg);
	}

	36% {
		transform: translate(.5px, -1.5px) rotate(.5deg);
	}

	38% {
		transform: translate(2.5px, -.5px) rotate(-.5deg);
	}

	40% {
		transform: translate(-.5px, 2.5px) rotate(.5deg);
	}

	42% {
		transform: translate(-1.5px, 2.5px) rotate(.5deg);
	}

	44% {
		transform: translate(-1.5px, 1.5px) rotate(.5deg);
	}

	46% {
		transform: translate(1.5px, -.5px) rotate(-.5deg);
	}

	48% {
		transform: translate(2.5px, -.5px) rotate(.5deg);
	}

	50% {
		transform: translate(-1.5px, 1.5px) rotate(.5deg);
	}

	52% {
		transform: translate(-.5px, 1.5px) rotate(.5deg);
	}

	54% {
		transform: translate(-1.5px, 1.5px) rotate(.5deg);
	}

	56% {
		transform: translate(.5px, 2.5px) rotate(1.5deg);
	}

	58% {
		transform: translate(2.5px, 2.5px) rotate(.5deg);
	}

	60% {
		transform: translate(2.5px, -1.5px) rotate(1.5deg);
	}

	62% {
		transform: translate(-1.5px, .5px) rotate(1.5deg);
	}

	64% {
		transform: translate(-1.5px, 1.5px) rotate(1.5deg);
	}

	66% {
		transform: translate(.5px, 2.5px) rotate(1.5deg);
	}

	68% {
		transform: translate(2.5px, -1.5px) rotate(1.5deg);
	}

	70% {
		transform: translate(2.5px, 2.5px) rotate(.5deg);
	}

	72% {
		transform: translate(-.5px, -1.5px) rotate(1.5deg);
	}

	74% {
		transform: translate(-1.5px, 2.5px) rotate(1.5deg);
	}

	76% {
		transform: translate(-1.5px, 2.5px) rotate(1.5deg);
	}

	78% {
		transform: translate(-1.5px, 2.5px) rotate(.5deg);
	}

	80% {
		transform: translate(-1.5px, .5px) rotate(-.5deg);
	}

	82% {
		transform: translate(-1.5px, .5px) rotate(-.5deg);
	}

	84% {
		transform: translate(-.5px, .5px) rotate(1.5deg);
	}

	86% {
		transform: translate(2.5px, 1.5px) rotate(.5deg);
	}

	88% {
		transform: translate(-1.5px, .5px) rotate(1.5deg);
	}

	90% {
		transform: translate(-1.5px, -.5px) rotate(-.5deg);
	}

	92% {
		transform: translate(-1.5px, -1.5px) rotate(1.5deg);
	}

	94% {
		transform: translate(.5px, .5px) rotate(-.5deg);
	}

	96% {
		transform: translate(2.5px, -.5px) rotate(-.5deg);
	}

	98% {
		transform: translate(-1.5px, -1.5px) rotate(-.5deg);
	}

	0%, 100% {
		transform: translate(0, 0) rotate(0);
	}
}