.ate-bubble {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: 346px;
	padding: 12px;
	background-color: #ffffff;
	border: 1px solid #eaeaea;
	border-radius: 24px;
	box-shadow: 0 16px 12px rgba(0, 0, 0, 0.1);
}

.ate-bubble * {
	box-sizing: border-box;
}

/* Fixed to screen: corner from the side classes, offsets from the
   --ate-bubble-x / --ate-bubble-y controls. Width never exceeds the
   viewport minus the offset on both sides. */
.ate-bubble--fixed {
	position: fixed;
	z-index: 999;
	width: calc(100vw - 2 * var(--ate-bubble-x, 24px));
}

.ate-bubble--fixed.ate-bubble--right {
	right: var(--ate-bubble-x, 24px);
}

.ate-bubble--fixed.ate-bubble--left {
	left: var(--ate-bubble-x, 24px);
}

.ate-bubble--fixed.ate-bubble--bottom {
	bottom: var(--ate-bubble-y, 24px);
	bottom: calc(var(--ate-bubble-y, 24px) + env(safe-area-inset-bottom, 0px));
}

.ate-bubble--fixed.ate-bubble--top {
	top: var(--ate-bubble-y, 24px);
}

/* Close button (fixed bubbles). 32px target (WCAG 2.5.8 asks for 24px). */
.ate-bubble--closable .ate-bubble__head {
	padding-right: 28px;
}

.ate-bubble__close {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #5c5c5c;
	cursor: pointer;
}

.ate-bubble__close:hover {
	background: #f0f0f0;
	color: #1a1a1a;
}

.ate-bubble__close svg {
	display: block;
	width: 16px;
	height: 16px;
}

.ate-bubble[hidden] {
	display: none !important;
}

/* Delay option: hidden (space kept) until --ate-bubble-delay has passed,
   then fades and slides in. opacity/visibility are also set inline on the
   element so it can't flash before this stylesheet loads; the animation
   overrides those inline values once it runs. */
.ate-bubble--delayed {
	opacity: 0;
	visibility: hidden;
	animation: ate-bubble-in 0.4s ease-out var(--ate-bubble-delay, 0s) both;
}

@keyframes ate-bubble-in {
	from {
		opacity: 0;
		visibility: visible;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ate-bubble--delayed {
		animation-name: ate-bubble-in-plain;
		animation-duration: 0.01s;
	}

	@keyframes ate-bubble-in-plain {
		to {
			opacity: 1;
			visibility: visible;
		}
	}
}

.ate-bubble__head {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
}

.ate-bubble__icon {
	display: block;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
}

.ate-bubble__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ate-bubble__text {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: #222222;
	font-family: "DM Sans", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	overflow-wrap: break-word;
}

.ate-bubble__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	color: #2667ff;
	text-decoration: none;
	cursor: pointer;
}

.ate-bubble__link:hover,
.ate-bubble__link:focus {
	text-decoration: none;
}

.ate-bubble__link-text {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 27px;
	text-transform: uppercase;
}

.ate-bubble__arrow {
	display: inline-block;
	flex-shrink: 0;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 27px;
	transition: transform 0.2s ease-out;
}

.ate-bubble__link:hover .ate-bubble__arrow,
.ate-bubble__link:focus-visible .ate-bubble__arrow {
	transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
	.ate-bubble__arrow {
		transition: none;
	}
}