/* ----

# Pio Plugin
# By: Dreamer-Paul
# Last Update: 2022.8.12

一个支持更换 Live2D 模型的 Typecho 插件。

本代码为奇趣保罗原创，并遵守 GPL 2.0 开源协议。欢迎访问我的博客：https://paugram.com

---- */

.pio-container {
	bottom: 0;
	z-index: 52;
	color: #666;
	position: fixed;
	user-select: none;
}

.pio-container .pio-show {
	left: -1em;
	/* 上移至 myhkw 底部歌词框（高约 40px）之上并留出余量，避免再现按钮被歌词遮挡 */
	bottom: 50px;
	width: 3em;
	height: 3em;
	display: none;
	cursor: pointer;
	position: absolute;
	border-radius: 3em;
	border: 3px solid #fff;
	transition: transform 0.3s;
	background: url(avatar.jpg) center / contain;
}

.pio-container.hidden .pio-show {
	display: block;
}
.pio-container.hidden .pio-show:hover {
	transform: translateX(0.5em);
}
/* 右侧停靠时 hover 向屏幕内（左）移动 */
.pio-container.hidden.right .pio-show:hover {
	transform: translateX(-0.5em);
}

/* 再现按钮 hover 提示 */
.pio-container .pio-show::after {
	content: "点击召唤Pio";
	position: absolute;
	left: calc(100% + 0.6em);
	top: 50%;
	transform: translateY(-50%);
	padding: 0.45em 0.9em;
	border: 1px solid #eee;
	border-radius: 0.8em;
	background: #fff;
	color: #666;
	font-size: 0.9em;
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.3s,
		visibility 0.3s;
}
.pio-container.hidden .pio-show:hover::after {
	opacity: 1;
	visibility: visible;
}
/* 右侧停靠时提示翻到按钮左侧，避免溢出视口右缘 */
.pio-container.right .pio-show::after {
	left: auto;
	right: calc(100% + 0.6em);
}
@media (prefers-reduced-motion: reduce) {
	.pio-container .pio-show::after {
		transition: none;
	}
}

.pio-container.hidden #pio,
.pio-container.hidden .pio-action,
.pio-container.hidden .pio-dialog {
	display: none;
}

.pio-container.left {
	left: 0;
}
.pio-container.right {
	right: 0;
}
.pio-container.active {
	cursor: move;
}
.pio-container.static {
	pointer-events: none;
}

.pio-container .pio-action {
	/* 上移一个按钮尺寸（3em → 1em，含按钮 1.5em + 间距 0.5em 的占位）：
	   避免按钮被 myhkw 播放器展开面板（视口底部 679px 起）遮挡；模型本体保持贴底 */
	top: 1em;
	opacity: 0;
	position: absolute;
	transition: opacity 0.3s;
}
.pio-container.left .pio-action {
	right: 0;
}
.pio-container.right .pio-action {
	left: 0;
}
.pio-container:hover .pio-action {
	opacity: 1;
}

.pio-action span {
	color: #fff;
	width: 1.5em;
	height: 1.5em;
	display: block;
	cursor: pointer;
	text-align: center;
	border-radius: 66%;
	margin-bottom: 0.5em;
	border: 1px solid #666;
	background: #fff center / 70% no-repeat;
}
.pio-action .pio-home {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTg5My43IDUwNS45SDEyOS4zYy0xMyAwLTI0LjgtNy45LTI5LjgtMTkuOS01LTEyLTIuMi0yNS45IDctMzUuMmwzMDctMzA3YzI2LjEtMjYuMSA2MC45LTQwLjUgOTgtNDAuNXM3MS45IDE0LjQgOTggNDAuNWwzMDcgMzA3YzkuMiA5LjIgMTIgMjMuMSA3IDM1LjItNSAxMi4xLTE2LjcgMTkuOS0yOS44IDE5Ljl6TTY3My4yIDkxOS45aC0zMS41Yy0xNy44IDAtMzIuMy0xNC40LTMyLjMtMzIuM3YtNzcuNGMwLTIzLjEtMTguOC00Mi4xLTQxLjktNDIuNC0yMi4zIDAuMy00MS4xIDE5LjMtNDEuMSA0Mi40djc3LjRjMCAxNy44LTE0LjQgMzIuMy0zMi4zIDMyLjNIMzQ5LjhjLTcwLjkgMC0xMjguNy02My43LTEyOC43LTE0MS45VjU4MS45YzAtMTcuOCAxNC40LTMyLjMgMzIuMy0zMi4zaDUxNi4yYzE3LjggMCAzMi4zIDE0LjQgMzIuMyAzMi4zVjc3OGMtMC4xIDc4LjMtNTcuOCAxNDEuOS0xMjguNyAxNDEuOXoiPjwvcGF0aD48L3N2Zz4=);
}
.pio-action .pio-close {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1NS4yNTIgOTQzLjgyNWMtMTkuMjEzIDAtMzguNDI5LTcuMzMyLTUzLjA4OS0yMS45ODgtMjkuMzE3LTI5LjMyMS0yOS4zMTctNzYuODU1IDAtMTA2LjE3NWw3MTMuNDk0LTcxMy40OTRjMjkuMzE3LTI5LjMyMSA3Ni44NTMtMjkuMzIxIDEwNi4xNzUgMCAyOS4zMTcgMjkuMzE3IDI5LjMxNyA3Ni44NTUgMCAxMDYuMTc1bC03MTMuNDk0IDcxMy40OTRjLTE0LjY2IDE0LjY2LTMzLjg3NCAyMS45ODgtNTMuMDg5IDIxLjk4OHoiIGZpbGw9IiI+PC9wYXRoPjxwYXRoIGQ9Ik04NjguNzQ5IDk0My44MjRjLTE5LjIxMyAwLTM4LjQyOC03LjMzMi01My4wODktMjEuOTg4bC03MTMuNDk0LTcxMy40OTNjLTI5LjMxNy0yOS4zMTctMjkuMzE3LTc2Ljg1NyAwLTEwNi4xNzUgMjkuMzE2LTI5LjMxNyA3Ni44NTUtMjkuMzIxIDEwNi4xNzQgMGw3MTMuNDk0IDcxMy40OTJjMjkuMzE3IDI5LjMyMSAyOS4zMTcgNzYuODU1IDAgMTA2LjE3NS0xNC42NTcgMTQuNjYxLTMzLjg3MSAyMS45OTMtNTMuMDg3IDIxLjk5M3oiIGZpbGw9IiI+PC9wYXRoPjwvc3ZnPg==);
}
.pio-action .pio-skin {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTk2NS45MTEgMzEwLjUzMWwtMTc0LjQtMTc0LjM5OGMtMTMuMDIyLTEzLjAyMS0zMC45MzMtMTkuNjQ5LTQ5LjM4MS0xOC4yMjgtMS43NC0wLjE1LTMuNDIyLTAuMjI0LTUuMDctMC4yMjRsLTkyLjkxNCAwLTYuNTE3IDMuNjI1Yy0zNC40MjEgMTkuMTQ2LTc4LjM0MSAyOS42ODktMTIzLjY2OCAyOS42ODktNDUuMzI4IDAtODkuMjQ2LTEwLjU0My0xMjMuNjY3LTI5LjY4OWwtNi41MTgtMy42MjVMMjkwLjg2IDExNy42ODFjLTIzLjY5MSAwLTQ0Ljk4NiAxMi45MjQtNTUuOTk1IDMzLjQ1MUw2Mi40NzcgMzIzLjUyMWMtMTEuOSAxMS44OTktMTguNDU0IDI3LjcyLTE4LjQ1NCA0NC41NDggMCAxNi44MjkgNi41NTQgMzIuNjQ5IDE4LjQ1MyA0NC41NDlsMTI1Ljk1MyAxMjUuOTU1YzEwLjU0IDEwLjUzOCAyNC4xNTcgMTYuODc4IDM4LjgyNiAxOC4xODFsMCAzMDQuMzk5YzAgMzUuMDczIDI4LjUzMyA2My42MDYgNjMuNjA0IDYzLjYwNmw0NDYuMTk5IDBjMzUuMDc0IDAgNjMuNjA3LTI4LjUzMyA2My42MDctNjMuNjA2bC0wLjAwMS0zMTcuMzQ1YzE0Ljg0NC0xLjIxMSAyOC42MzktNy41NzcgMzkuMjg4LTE4LjIyNEw5NjUuOTEgMzk5LjYyOEM5OTAuNDc1IDM3NS4wNjQgOTkwLjQ3NSAzMzUuMDk1IDk2NS45MTEgMzEwLjUzMXoiPjwvcGF0aD48L3N2Zz4=);
}
.pio-action .pio-info {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTY4Mi45IDgyNS45SDI2Ny44Yy0yMS44IDAtMzkuNS0xNy43LTM5LjUtMzkuNXMxNy43LTM5LjUgMzkuNS0zOS41aDQxNS4xYzIxLjggMCAzOS41IDE3LjcgMzkuNSAzOS41cy0xNy43IDM5LjUtMzkuNSAzOS41ek04NjQuNyAxMDAuNGMtMTguNSAzLjctMzEuMyAyMC45LTMxLjMgMzkuN3Y2NDUuOGMwIDQ4LTM4LjkgODctODcgODdIMjE5LjNjLTE2LjQgMC0yOS42LTEzLjMtMjkuNi0yOS42VjczMi43YzAtMTYuMSAxMy4xLTI5LjIgMjkuMi0yOS4yaDM3NS45Yzg4LjEgMCAxNTkuNS03MS40IDE1OS41LTE1OS41VjE4NS41YzAtNjYuMi01My43LTExOS45LTExOS45LTExOS45aC00MDRjLTY2LjIgMC0xMTkuOSA1My43LTExOS45IDExOS45djY1Ny44YzAgNjAgNDguNyAxMDguNyAxMDguNyAxMDguN2g1MjcuMWM5MS43IDAgMTY2LjEtNzQuMyAxNjYuMS0xNjYuMVYxMzkuMWMwLjEtMjQuNi0yMi4yLTQzLjktNDcuNy0zOC43eiI+PC9wYXRoPjwvc3ZnPg==);
}
.pio-action .pio-night {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiAyMDkuNDAzMjQxYy0yMDEuNzMxNTE0IDAtMzc0LjAwOTIwNiAxMjUuNDc2NzgzLTQ0My44MDg5MjIgMzAyLjU5Njc1OSA2OS43OTg2OTIgMTc3LjExOTk3NyAyNDIuMDc3NDA4IDMwMi41OTY3NTkgNDQzLjgwODkyMiAzMDIuNTk2NzU5IDIwMS45MzMxMDUgMCAzNzQuMDEwMjI5LTEyNS40NzY3ODMgNDQzLjgwODkyMi0zMDIuNTk2NzU5Qzg4Ni4wMDkyMDYgMzM0Ljg4MDAyMyA3MTMuOTMzMTA1IDIwOS40MDMyNDEgNTEyIDIwOS40MDMyNDF6TTUxMiA3MTMuNzMxNTE0Yy0xMTEuMzU1MTU3IDAtMjAxLjczMTUxNC05MC4zNzUzMzQtMjAxLjczMTUxNC0yMDEuNzMxNTE0czkwLjM3NTMzNC0yMDEuNzMxNTE0IDIwMS43MzE1MTQtMjAxLjczMTUxNCAyMDEuNzMxNTE0IDkwLjM3NTMzNCAyMDEuNzMxNTE0IDIwMS43MzE1MTRTNjIzLjM1NTE1NyA3MTMuNzMxNTE0IDUxMiA3MTMuNzMxNTE0ek01MTIgMzkwLjk2MTI5NmMtNjYuNzcyNzc2IDAtMTIxLjAzODcwNCA1NC4yNjU5MjgtMTIxLjAzODcwNCAxMjEuMDM4NzA0czU0LjI2NTkyOCAxMjEuMDM4NzA0IDEyMS4wMzg3MDQgMTIxLjAzODcwNCAxMjEuMDM4NzA0LTU0LjI2NTkyOCAxMjEuMDM4NzA0LTEyMS4wMzg3MDRTNTc4Ljc3Mjc3NiAzOTAuOTYxMjk2IDUxMiAzOTAuOTYxMjk2eiI+PC9wYXRoPjwvc3ZnPg==);
}

/* 停靠切换按钮：右向三角，右侧停靠时翻转向左 */
.pio-action .pio-side {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03MjMgNDczTDM5OSAxNDljLTE1LTE1LTQxLTQtNDEgMTd2NjQ4YzAgMjEgMjYgMzIgNDEgMTdsMzI0LTMyNGM5LTkgOS0yNCAwLTM0eiIvPjwvc3ZnPg==);
}
.pio-container.right .pio-side {
	transform: scaleX(-1);
}
/* 右侧停靠时折叠按钮跟进到右缘 */
.pio-container.right .pio-show {
	left: auto;
	right: -1em;
}

.pio-container .pio-dialog {
	bottom: 90%;
	bottom: calc(100% - 2em);
	opacity: 0;
	z-index: -1;
	font-size: 0.8em;
	min-width: 12em;
	/* 限宽为容器宽：消息框居中于人物，过长时左缘自动贴容器左缘而不溢出视口；
	   width: max-content 防止 shrink-to-fit 把长消息压窄到半容器宽 */
	max-width: 100%;
	width: max-content;
	background: #fff;
	padding: 0.75em 1em;
	border-radius: 1em;
	visibility: hidden;
	position: absolute;
	word-break: break-all;
	border: 1px solid #eee;
	transform: translateX(-50%);
	left: 50%;
	transition:
		opacity 0.3s,
		visibility 0.3s;
}
/* 消息框底部中央的三角形尾巴，指向人物；
   双层三角：外层与边框同色补出边框延续，内层白色上移 1px 盖住边框线 */
.pio-container .pio-dialog::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 0.6em solid transparent;
	border-top-color: #eee;
}
.pio-container .pio-dialog::after {
	content: "";
	position: absolute;
	top: calc(100% - 1px);
	left: 50%;
	transform: translateX(-50%);
	border: 0.6em solid transparent;
	border-top-color: #fff;
}
.pio-container .pio-dialog.active {
	opacity: 1;
	visibility: visible;
}

.pio-container.left .pio-dialog {
	left: 50%;
}
.pio-container.right .pio-dialog {
	right: auto;
	left: 50%;
}

#pio {
	vertical-align: middle;
}

@media screen and (max-width: 768px) {
	#pio {
		width: 8em;
	}
	.pio-container {
		pointer-events: none;
	}
}