/**
 * 09GUA P9 §七 —— 官方 Telegram 引流卡片（2026-09-29 改为左下角公告卡样式）。
 *
 * 放在**左下角**：右下角是浮动广告的位置（main.css .ed-ad--floating），
 * 两者不会叠在一起。手机上浮动广告是贴底通栏，卡片与小圆钮整体上移让开。
 *
 * 颜色：卡片本身走主题令牌（明暗两套都成立）；按钮、徽章、强调字用
 * Telegram 蓝 —— 读者一眼认得出这是去 Telegram 的入口。
 */

.ed-tg-cta,
.ed-tg-cta-bubble {
	--ed-tg-blue: #229ed9;
	--ed-tg-blue-2: #2b6ee8;
	--ed-tg-lift: 0px;
}

.ed-tg-cta {
	position: fixed;
	z-index: 9000;                 /* age-gate 在它之上；两者互斥，见 PHP 侧 */
	left: max(16px, env(safe-area-inset-left, 0px));
	bottom: calc(16px + var(--ed-tg-lift) + env(safe-area-inset-bottom, 0px));
	right: auto;
	width: min(330px, calc(100vw - 32px));
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .22s ease, transform .22s ease;
}

.ed-tg-cta.is-in {
	opacity: 1;
	transform: translateY(0);
}

.ed-tg-cta__box {
	position: relative;
	padding: 16px 18px 12px;
	border-radius: 16px;
	background: var( --ed-card );
	color: var( --ed-text );
	border: 1px solid var( --ed-border );
	box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
	text-align: left;
}

.ed-tg-cta__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	line-height: 1;
	font-size: 18px;
	border: 0;
	border-radius: 50%;
	background: var( --ed-bg-soft );
	color: var( --ed-text-muted );
	cursor: pointer;
}

.ed-tg-cta__close:hover,
.ed-tg-cta__close:focus-visible {
	color: var( --ed-text );
}

.ed-tg-cta__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: #1a9a4b;
	background: rgba(26, 154, 75, .1);
	border: 1px solid rgba(26, 154, 75, .25);
}

.ed-tg-cta__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22c55e;
}

.ed-tg-cta__title {
	margin: 10px 28px 6px 0;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 800;
}

.ed-tg-cta__accent {
	color: var( --ed-tg-blue-2 );
}

.ed-tg-cta__body {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var( --ed-text-muted );
}

.ed-tg-cta__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.ed-tg-cta__chip {
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 11.5px;
	color: var( --ed-text );
	border: 1px solid var( --ed-border );
	background: var( --ed-bg-soft );
}

.ed-tg-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.ed-tg-cta__btn + .ed-tg-cta__btn {
	margin-top: 8px;
}

.ed-tg-cta__btn--primary {
	color: #fff;
	background: linear-gradient(90deg, var( --ed-tg-blue ), var( --ed-tg-blue-2 ));
	box-shadow: 0 6px 16px rgba(43, 110, 232, .3);
}

.ed-tg-cta__btn--primary:hover,
.ed-tg-cta__btn--primary:focus-visible {
	color: #fff;
	filter: brightness(1.06);
}

.ed-tg-cta__btn-icon {
	width: 18px;
	height: 18px;
	flex: none;
}

.ed-tg-cta__btn--ghost {
	font-size: 13px;
	font-weight: 600;
	color: var( --ed-tg-blue-2 );
	background: transparent;
	border-color: rgba(43, 110, 232, .35);
}

.ed-tg-cta__btn--ghost:hover,
.ed-tg-cta__btn--ghost:focus-visible {
	background: rgba(43, 110, 232, .08);
}

.ed-tg-cta__dismiss {
	display: block;
	width: 100%;
	margin: 8px 0 0;
	padding: 6px;
	border: 0;
	background: transparent;
	font-size: 12.5px;
	color: var( --ed-text-muted );
	cursor: pointer;
}

.ed-tg-cta__dismiss:hover,
.ed-tg-cta__dismiss:focus-visible {
	color: var( --ed-text );
}

.ed-tg-cta__note {
	margin: 0;
	font-size: 11px;
	text-align: center;
	color: var( --ed-text-muted );
	opacity: .75;
}

/* 左下角常驻的 Telegram 小圆钮（2026-09-30 起所有页面都有；卡片打开时隐藏）。 */
.ed-tg-cta-bubble {
	position: fixed;
	z-index: 8999;
	left: max(16px, env(safe-area-inset-left, 0px));
	bottom: calc(16px + var(--ed-tg-lift) + env(safe-area-inset-bottom, 0px));
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, var( --ed-tg-blue ), var( --ed-tg-blue-2 ));
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ed-tg-cta-bubble[hidden] {
	display: none;
}

/* 没点开过的访客：右上角一个红点，点开一次卡片后永久消失。 */
.ed-tg-cta-bubble__dot {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff3b30;
	border: 2px solid #fff;
	box-sizing: border-box;
	animation: ed-tg-dot 1.6s ease-in-out infinite;
}

@keyframes ed-tg-dot {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.18); }
}

.ed-tg-cta-bubble__icon {
	width: 24px;
	height: 24px;
	margin-left: -2px;
}

@media ( max-width: 767px ) {
	.ed-tg-cta {
		left: 12px;
		right: 12px;
		width: auto;
		max-width: 400px;
	}

	/* 手机上只有读者自己点开才会出现，做得紧凑一点。 */
	.ed-tg-cta__box {
		padding: 14px 14px 10px;
	}

	.ed-tg-cta__title {
		font-size: 16px;
		margin-top: 8px;
	}

	.ed-tg-cta-bubble {
		width: 44px;
		height: 44px;
	}

	/* 手机上浮动广告是贴底通栏（约 60–72px 高），整体上移让开。 */
	body:has( #ed-ad-floating:not(.is-hidden) ) .ed-tg-cta,
	body:has( #ed-ad-floating:not(.is-hidden) ) .ed-tg-cta-bubble {
		--ed-tg-lift: 80px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ed-tg-cta__dot,
	.ed-tg-cta-bubble__dot {
		animation: none;
	}

	.ed-tg-cta {
		transition: none;
		transform: none;
	}
}