/* =============================================================
   AnimeChat.gg Promo Banner
   - Floating site-wide strip (non-reader pages)
   - Inline card injected inside the end-of-chapter card (reader)
   Sakura gradient: #FF6B9D (pink) -> #A452F6 (purple)
   ============================================================= */

/* ---- shared gradient token ---- */
:root {
	--ac-pink: #ff6b9d;
	--ac-purple: #a452f6;
	--ac-grad: linear-gradient(135deg, #ff6b9d 0%, #a452f6 100%);
}

/* =============================================================
   1. FLOATING STRIP  (bottom, dismissable)
   ============================================================= */
.ac-float {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%) translateY(120%);
	z-index: 940; /* below auth modal, above content */
	width: calc(100% - 24px);
	max-width: 620px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 16px;
	background: var(--ac-grad);
	box-shadow: 0 10px 30px rgba(164, 82, 246, .35),
	            0 2px 8px rgba(0, 0, 0, .25);
	color: #fff;
	opacity: 0;
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
	will-change: transform, opacity;
}

.ac-float.ac-in {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

.ac-float__icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	font-size: 20px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .18);
}

.ac-float__body {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.3;
}

.ac-float__label {
	display: inline-block;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 1px 7px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .24);
	margin-bottom: 3px;
}

.ac-float__text {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ac-float__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 14px;
	border-radius: 10px;
	background: #fff;
	color: #a1379e;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease;
}

.ac-float__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
	color: #a1379e;
}

.ac-float__close {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-left: 2px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}

.ac-float__close:hover {
	background: rgba(255, 255, 255, .32);
}

/* keep clear of the mobile bottom nav (~62px) */
body:not(.aqua-reader-page) .ac-float {
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 680px) {
	.ac-float {
		bottom: 70px; /* sit above mobile bottom nav */
		gap: 9px;
		padding: 9px 11px;
	}
	.ac-float__icon { width: 34px; height: 34px; font-size: 18px; }
	.ac-float__label { font-size: 9px; }
	.ac-float__text { font-size: 12px; }
	.ac-float__cta { padding: 7px 11px; font-size: 12px; }
}

@media (max-width: 400px) {
	.ac-float__text { font-size: 11.5px; }
}

/* =============================================================
   2. INLINE CARD  (inside end-of-chapter card)
   ============================================================= */
.ac-inline {
	max-width: 640px;
	margin: 22px auto 8px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--ac-grad);
	color: #fff;
	text-align: center;
	box-shadow: 0 8px 24px rgba(164, 82, 246, .28);
}

.ac-inline__tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .22);
	margin-bottom: 9px;
}

.ac-inline__title {
	margin: 0 0 5px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
}

.ac-inline__sub {
	margin: 0 0 13px;
	font-size: 12.5px;
	font-weight: 500;
	opacity: .92;
	line-height: 1.45;
}

.ac-inline__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: 11px;
	background: #fff;
	color: #a1379e;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

.ac-inline__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
	color: #a1379e;
}