/* ============ 网站公告 - 右下角弹窗（samsara pf-messages 毛玻璃风格） ============ */

#wa-announcement {
	/* 优先继承主题变量，主题未定义时回退到 samsara 同值 */
	--primary-opacity-3: rgba(31, 139, 255, .2);
	--primary-gray: #475669;
	--white-opacity-8: rgba(255, 255, 255, .8);
	--white-opacity-7: rgba(255, 255, 255, .7);
	--gray-opacity-1: rgba(50, 64, 87, .1);
	--gray-opacity-15: rgba(50, 64, 87, .15);

	/* 提示颜色：跟随主题色（JS 指定具体颜色时会覆盖 --background-color / --color） */
	--background-color: var(--primary-opacity-3);
	--color: var(--primary-gray);

	position: fixed;
	right: 10px;
	bottom: 16px;
	z-index: 99999;
	width: 300px;
	max-width: calc(100vw - 20px);

	background-color: #fff6;
	background-image:
		linear-gradient(#fff, rgba(255, 255, 255, .65) 12px, rgba(255, 255, 255, .53) 12px, rgba(255, 255, 255, .8)),
		linear-gradient(-90deg, transparent, var(--background-color));
	border-radius: .5em;
	box-shadow:
		0 0 0 1px var(--white-opacity-8) inset,
		0 0 1px var(--gray-opacity-1),
		0 8px 10px var(--gray-opacity-15);
	-webkit-backdrop-filter: blur(3px) brightness(60%) saturate(600%);
	backdrop-filter: blur(3px) brightness(60%) saturate(600%);

	color: var(--color);
	font-family: Play, "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	overflow: visible;

	transform-origin: right bottom;
	opacity: 0;
	transform: scale(0);
	transition: transform cubic-bezier(.4, 1.5, .5, 1) .75s, opacity .5s;
}

#wa-announcement.wa-visible {
	opacity: 1;
	transform: scale(1);
}

/* ---------- 悬浮圆形图标（主题同款，位于左上角外侧） ---------- */
#wa-announcement .wa-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	background: #fff linear-gradient(#fff, var(--background-color));
	width: 26px;
	height: 26px;
	position: absolute;
	left: -12px;
	top: -10px;
	border-radius: 50%;
	box-shadow: 0 5px 8px var(--background-color), 0 0 0 1px #ffffff80 inset;
	transform-origin: right bottom;
}

#wa-announcement .wa-icon svg {
	width: 16px;
	height: 16px;
}

/* 图标弹性入场（比卡片晚 0.3s，同主题动效节奏） */
#wa-announcement.wa-visible .wa-icon {
	transition: transform cubic-bezier(.4, 2, .5, 1) .6s .3s;
}
#wa-announcement:not(.wa-visible) .wa-icon {
	transform: translate(20px) scale(0);
}

/* ---------- 标题（默认隐藏色，用 --color 文字色） ---------- */
#wa-announcement .wa-title {
	font-size: 15px;
	font-weight: 600;
	padding: 14px 16px 2px;
	text-shadow: 0 1px var(--white-opacity-7);
}

/* 标题弹性入场（比图标晚 0.1s） */
#wa-announcement.wa-visible .wa-title {
	transition: transform cubic-bezier(.5, 2, .5, 1) .6s .4s, opacity .5s .4s;
}
#wa-announcement:not(.wa-visible) .wa-title {
	opacity: 0;
	transform: translateY(1em);
}

/* ---------- 内容 ---------- */
#wa-announcement .wa-content {
	padding: 4px 16px 8px;
	max-height: 40vh;
	overflow-y: auto;
	word-break: break-word;
	white-space: pre-wrap;
	text-shadow: 0 1px var(--white-opacity-7);
}

#wa-announcement .wa-content :where(img, video) {
	max-width: 100%;
	height: auto;
}

#wa-announcement .wa-content :where(a) {
	color: var(--color);
	text-decoration: underline;
}

/* 内容跟随标题入场 */
#wa-announcement.wa-visible .wa-content,
#wa-announcement.wa-visible .wa-footer {
	transition: transform cubic-bezier(.5, 2, .5, 1) .6s .45s, opacity .5s .45s;
}
#wa-announcement:not(.wa-visible) .wa-content,
#wa-announcement:not(.wa-visible) .wa-footer {
	opacity: 0;
	transform: translateY(1em);
}

/* ---------- 底部按钮区 ---------- */
#wa-announcement .wa-footer {
	display: flex;
	justify-content: flex-end;
	padding: 8px 16px 14px;
}

#wa-announcement .wa-btn {
	appearance: none;
	cursor: pointer;
	padding: 5px 16px;
	font-size: 13px;
	font-family: inherit;
	line-height: 1.5;
	color: var(--color);
	background: #fff linear-gradient(#fff, var(--background-color));
	border: none;
	border-radius: .4em;
	box-shadow: 0 0 0 1px var(--white-opacity-8) inset, 0 2px 4px var(--gray-opacity-15);
	transition: box-shadow .2s, transform .2s;
	text-shadow: 0 1px var(--white-opacity-7);
}

#wa-announcement .wa-btn:hover {
	box-shadow: 0 0 0 1px var(--white-opacity-8) inset, 0 4px 8px var(--gray-opacity-15);
	transform: translateY(-1px);
}

/* ---------- 关闭角标 ---------- */
#wa-announcement .wa-close {
	position: absolute;
	top: 4px;
	right: 8px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: var(--primary-gray);
	opacity: .6;
	padding: 4px;
	transition: opacity .2s;
}

#wa-announcement .wa-close:hover {
	opacity: 1;
}

/* ---------- 倒计时进度条 ---------- */
#wa-announcement .wa-progress {
	height: 2px;
	margin: 0 16px 8px;
	border-radius: 1px;
	background: var(--color);
	opacity: .35;
	width: auto;
	transform-origin: left;
}

/* ---------- 形态变化：仅微调圆角/宽度 ---------- */
#wa-announcement.wa-shape-toast {
	border-radius: .35em;
	width: 260px;
}

#wa-announcement.wa-shape-bubble {
	border-radius: 1em;
	width: 320px;
}

/* ---------- 移动端 ---------- */
@media (max-width: 480px) {
	#wa-announcement {
		right: 8px;
		bottom: 8px;
		width: calc(100vw - 28px);
	}
}