.supernova-chat-widget [data-supernova-action="navigate"] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-self: flex-start;
	max-width: 85%;
	margin: 0;
}

/* Outline pill matching the site's .callback__button-book + .trigger-transparent-hover-2,
   filled with the chat body's surface color (not the widget's outer background) instead of transparent */
.supernova-chat-widget [data-supernova-action="navigate"] .supernova-chat-action__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 60px;
	border: 1px solid var(--supernova-chat-font-color);
	border-radius: 100px;
	color: var(--supernova-chat-font-color);
	background: var(--supernova-chat-surface);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 16px;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
	.supernova-chat-widget [data-supernova-action="navigate"] .supernova-chat-action__link:hover {
		background: var(--supernova-chat-secondary-color);
		border-color: var(--supernova-chat-secondary-color);
		color: #ffffff;
	}
}

.supernova-chat-widget [data-supernova-action="navigate"] .supernova-chat-action__link:active {
	background: var(--supernova-chat-font-color);
	border-color: var(--supernova-chat-font-color);
	color: #ffffff;
}

/* Dark theme: white outline on the chat body's surface color; hover inverts (Dark-Blue would vanish on #07163E),
   same as .trigger-transparent-hover on dark site sections */
.supernova-chat-widget.supernova-chat--dark [data-supernova-action="navigate"] .supernova-chat-action__link,
.is-light .supernova-chat-widget [data-supernova-action="navigate"] .supernova-chat-action__link {
	background: var(--chat--theme-surface);
	border-color: var(--chat--theme-text);
	color: var(--chat--theme-text);
}

@media (hover: hover) and (pointer: fine) {
	.supernova-chat-widget.supernova-chat--dark [data-supernova-action="navigate"] .supernova-chat-action__link:hover,
	.is-light .supernova-chat-widget [data-supernova-action="navigate"] .supernova-chat-action__link:hover {
		background: #ffffff;
		border-color: #ffffff;
		color: var(--supernova-chat-font-color);
	}
}

.supernova-chat-widget.supernova-chat--dark [data-supernova-action="navigate"] .supernova-chat-action__link:active,
.is-light .supernova-chat-widget [data-supernova-action="navigate"] .supernova-chat-action__link:active {
	background: var(--supernova-chat-hover-surface);
	border-color: var(--supernova-chat-hover-surface);
	color: var(--supernova-chat-font-color);
}

.supernova-chat-widget [data-supernova-action="navigate"] .supernova-chat-action__link:focus-visible {
	outline: 2px solid var(--chat--color-primary);
	outline-offset: 3px;
}

@media (max-width: 480px) {
	.supernova-chat-widget [data-supernova-action="navigate"] .supernova-chat-action__link {
		padding: 0 32px;
	}
}