/* Root container */
#kaari-proof-pulse-root {
	* {
		font-family: Raleway, Helvetica, Arial, sans-serif;
		white-space: nowrap;
	}
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 2147483647;
	width: min-content;
	max-width: min(480px, calc(100vw - 36px));
	pointer-events: none; /* so it doesn’t block page interactions */

	.kaari-proof-card {
		position: relative;
		pointer-events: auto; /* clickable button */
		display: flex;
		align-items: center;
		gap: 12px;

		padding: 10px 30px 10px 10px;
		border-radius: 108px;
		background: #ffffff;

		border: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.35s ease, transform 0.35s ease;

		&.is-visible {
			opacity: 1;
			transform: translateY(0);
		}

		&:hover,
		&:focus-within {
			.kaari-proof-close {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.kaari-proof-avatar {
			width: 60px;
			height: 60px;
			min-height: 60px;
			min-width: 60px;
			border-radius: 999px;
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--brand_accent);
			svg {
				margin-bottom: 6px;
				height: 28px;
				width: auto;
			}
		}

		.kaari-proof-text {
			flex: 1 1 auto;
			min-width: 0;
			padding: 0px 0;

			.kaari-proof-title {
				font-size: 16px;
				line-height: 1.15;
				font-weight: 500;

				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: var(--brand_heading);

				strong {
					font-weight: 700 !important;
				}
			}

			.kaari-proof-sub {
				margin-top: 4px;
				font-size: 14px;
				line-height: 1.25;
				color: var(--brand_heading);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.kaari-proof-meta {
				margin-top: 6px;
				display: flex;
				align-items: center;
				gap: 10px;

				.kaari-proof-time {
					font-size: 13px;
					line-height: 1;
					white-space: nowrap;
					opacity: 0.7;
					color: var(--brand_heading);
				}

				.kaari-proof-btn {
					margin-left: auto;
					margin-right: 18px;
					display: none;
					align-items: center;
					justify-content: center;

					font-size: 13px;
					line-height: 1;
					font-weight: 800;

					padding: 8px 10px;
					border-radius: 999px;

					text-decoration: none;
					user-select: none;

					background: #f97316; /* orange */
					color: #ffffff;

					transition: transform 0.06s ease, filter 0.2s ease;

					&:hover {
						filter: brightness(0.98);
					}

					&:active {
						transform: translateY(1px);
					}

					&:focus-visible {
						outline: 2px solid rgba(249, 115, 22, 0.45);
						outline-offset: 2px;
					}
				}
			}
		}
	}
}

#kaari-proof-pulse-root .kaari-proof-close {
	position: absolute;
	top: 0px;
	right: 0px;

	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: 0;
	padding: 0;

	display: grid;
	place-items: center;

	background: rgba(255, 255, 255, 1);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	cursor: pointer;

	opacity: 0;
	transform: translateY(2px);
	transition: opacity 0.18s ease, transform 0.18s ease;

	/* so the icon inherits your dark text color */
	color: #023037;

	&:focus-visible {
		outline: 2px solid rgba(2, 48, 55, 0.35);
		outline-offset: 2px;
	}

	svg {
		display: block;
		fill: currentColor;
	}
}

/* Small screens: make it feel less “pill” */
@media (max-width: 420px) {
	#kaari-proof-pulse-root {
		left: 12px;
		bottom: 12px;
		width: calc(100vw - 24px);
		max-width: 100%;

		.kaari-proof-card {
			border-radius: 16px;
			padding: 12px 14px;
			width: 100%;
			max-width: 100%;

			.kaari-proof-avatar {
				width: 40px;
				height: 40px;
				flex-basis: 40px;
			}

			.kaari-proof-text {
				.kaari-proof-title {
					font-size: 15px;
				}
				.kaari-proof-sub {
					font-size: 13px;
				}
			}
		}
	}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	#kaari-proof-pulse-root {
		.kaari-proof-card {
			transition: none;
			transform: none;

			&.is-visible {
				transform: none;
			}
		}
	}
}