/*
 * Left activity card.
 *
 * Every colour, radius, shadow and easing is the theme's own token, with a
 * literal fallback so the card still looks right if tokens.css is not present
 * on some page. Nothing here is a generic toast: the surface is the site's
 * translucent panel, the border is its muted gold hairline, and the glow is the
 * same soft one used across KamenRun.
 */

.krlive-activity {
	position: fixed;
	left: clamp(1.25rem, 2vw, 1.875rem);
	bottom: clamp(1.5rem, 3vh, 2.5rem);
	z-index: 90; /* Below the theme's own overlay layer (--kr-z-overlay: 100). */
	width: min(20.5rem, calc(100vw - 2.5rem));
	pointer-events: none;
}

.krlive-activity[hidden] {
	display: none;
}

.krlive-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--kr-space-sm, 0.75rem);
	align-items: center;

	padding: var(--kr-space-sm, 0.75rem) var(--kr-space-md, 1rem);
	border: 1px solid var(--kr-color-line, rgba(224, 173, 95, 0.2));
	border-radius: var(--kr-radius-lg, 0.75rem);

	background:
		linear-gradient(180deg, rgba(233, 183, 96, 0.05), transparent 62%),
		var(--kr-color-panel-strong, rgba(10, 23, 31, 0.94));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	box-shadow:
		var(--kr-shadow-card, 0 1rem 2.5rem rgba(0, 0, 0, 0.22)),
		var(--kr-glow-soft, 0 0 1.25rem rgba(233, 183, 96, 0.24));

	color: var(--kr-color-text, #e8dfd2);
	font-family: var(--kr-font-body, Inter, "Segoe UI", Roboto, Arial, sans-serif);

	opacity: 0;
	transform: translateX(-15px);
	transition:
		opacity var(--kr-duration-base, 260ms) var(--kr-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)),
		transform var(--kr-duration-base, 260ms) var(--kr-ease-standard, cubic-bezier(0.22, 1, 0.36, 1));
	pointer-events: auto;
}

.krlive-card.is-in {
	opacity: 1;
	transform: translateX(0);
}

/* A commercial card earns a slightly stronger hairline — nothing louder. */
.krlive-card.is-buy {
	border-color: var(--kr-color-line-strong, rgba(224, 173, 95, 0.42));
}

.krlive-card__mark {
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: var(--kr-radius-round, 999px);
	border: 1px solid var(--kr-color-line, rgba(224, 173, 95, 0.2));
	background: hsl(var(--krlive-hue, 38) 26% 16%);
	color: var(--kr-color-gold-300, #f5d18b);
	font-family: var(--kr-font-display, Georgia, "Times New Roman", serif);
	font-size: 0.95rem;
	line-height: 1;
}

.krlive-card__body {
	min-width: 0;
}

.krlive-card__name {
	font-family: var(--kr-font-display, Georgia, serif);
	font-size: 0.95rem;
	line-height: 1.2;
	color: var(--kr-color-ivory, #f7efe3);
}

.krlive-card__what {
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--kr-color-muted, #a99f92);
	overflow-wrap: anywhere;
}

.krlive-card__what b {
	font-weight: 500;
	color: var(--kr-color-gold-400, #e9b760);
}

.krlive-card__ago {
	margin-top: 0.2rem;
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	color: var(--kr-color-faint, #716a61);
}

/* --- Responsive ---------------------------------------------------------- */

/*
 * Below 768px the card moves to the top and shrinks: the bottom-left corner on
 * a phone is where sticky CTAs, the checkout button and the chat launcher live,
 * and an activity card must never sit on top of any of them.
 */
@media (max-width: 767px) {
	.krlive-activity {
		left: 0.625rem;
		right: 0.625rem;
		bottom: auto;
		top: 0.625rem;
		width: auto;
	}

	.krlive-card {
		padding: 0.5rem 0.75rem;
		border-radius: var(--kr-radius-md, 0.5rem);
	}

	.krlive-card__mark {
		inline-size: 1.875rem;
		block-size: 1.875rem;
		font-size: 0.8125rem;
	}

	.krlive-card__name {
		font-size: 0.875rem;
	}

	.krlive-card__what {
		font-size: 0.75rem;
	}
}

/* While the chat is open the left card steps aside entirely (§33). */
body.krlive-chat-open .krlive-activity {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--kr-duration-fast, 160ms) linear;
}

@media (prefers-reduced-motion: reduce) {
	.krlive-card {
		transition: opacity var(--kr-duration-fast, 160ms) linear;
		transform: none;
	}

	.krlive-card.is-in {
		transform: none;
	}
}