/* Converse chat widget: neutral styling driven by the accent variable. */

.sbaConverse {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	font-family: inherit;
}

.sbaConverseToggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: var(--sbaConverseAccent, #005FD7);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.sbaConverseToggle:hover,
.sbaConverseToggle:focus {
	transform: scale(1.06);
}

.sbaConverseIcon {
	display: block;
}

.sbaConversePanel {
	position: absolute;
	right: 0;
	bottom: 60px;
	width: 90vw;
	max-width: 360px;
	max-height: 480px;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: #1a1a1a;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.sbaConverseHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	background: var(--sbaConverseAccent, #005FD7);
	color: #fff;
}

.sbaConverseTitle {
	font-size: 15px;
	font-weight: 600;
}

.sbaConverseClose {
	border: none;
	background: transparent;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.sbaConverseMessages {
	flex: 1 1 auto;
	min-height: 120px;
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbaConverseBubble {
	max-width: 85%;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.45;
	overflow-wrap: break-word;
}

.sbaConverseBubbleVisitor {
	align-self: flex-end;
	background: #e3edfa;
	background: color-mix(in srgb, var(--sbaConverseAccent, #005FD7) 12%, #fff);
	border: 1px solid #b5cdf0;
	border: 1px solid color-mix(in srgb, var(--sbaConverseAccent, #005FD7) 30%, #fff);
}

.sbaConverseBubbleAssistant {
	align-self: flex-start;
	background: #f0f1f3;
	border: 1px solid #e0e2e6;
}

.sbaConverseBubble p {
	margin: 0 0 6px;
}

.sbaConverseBubble p:last-child {
	margin-bottom: 0;
}

.sbaConverseSource a {
	color: var(--sbaConverseAccent, #005FD7);
	font-size: 13px;
	text-decoration: underline;
}

.sbaConverseDisclaimer {
	margin: 0;
	padding: 6px 12px;
	font-size: 11px;
	line-height: 1.4;
	color: #6b6f76;
	border-top: 1px solid #eceef0;
}

.sbaConverseForm {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid #eceef0;
}

.sbaConverseInput {
	flex: 1 1 auto;
	padding: 8px 10px;
	border: 1px solid #c9cdd3;
	border-radius: 8px;
	font-size: 14px;
}

.sbaConverseInput:focus {
	outline: 2px solid var(--sbaConverseAccent, #005FD7);
	outline-offset: 1px;
}

.sbaConverseHoneypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sbaConverseSend {
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	background: var(--sbaConverseAccent, #005FD7);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}

.sbaConverseSend:disabled,
.sbaConverseInput:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Invitation banner: offered by the search need model, above the toggle. */

.sbaConverseInvite {
	position: absolute;
	right: 0;
	bottom: 60px;
	width: 80vw;
	max-width: 320px;
	box-sizing: border-box;
	padding: 12px 14px;
	background: #fff;
	color: #1a1a1a;
	border: 1px solid #e0e2e6;
	border-left: 4px solid var(--sbaConverseAccent, #005FD7);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.sbaConverseInvite[hidden] {
	display: none;
}

.sbaConverseInviteVisible {
	animation: sbaConverseInviteEnter 0.24s ease-out both;
}

@keyframes sbaConverseInviteEnter {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sbaConverseInviteText {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.45;
}

.sbaConverseInviteActions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sbaConverseInviteAccept {
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	background: var(--sbaConverseAccent, #005FD7);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}

.sbaConverseInviteDismiss {
	border: 1px solid #c9cdd3;
	border-radius: 8px;
	padding: 8px 14px;
	background: transparent;
	color: #4a4e55;
	font-size: 14px;
	cursor: pointer;
}

.sbaConverseInviteAccept:focus,
.sbaConverseInviteDismiss:focus {
	outline: 2px solid var(--sbaConverseAccent, #005FD7);
	outline-offset: 2px;
}

/* Microphone control inside the question form. */

.sbaConverseMic {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid #c9cdd3;
	border-radius: 50%;
	background: #fff;
	color: var(--sbaConverseAccent, #005FD7);
	cursor: pointer;
	align-self: center;
}

.sbaConverseMic[hidden] {
	display: none;
}

.sbaConverseMic:focus {
	outline: 2px solid var(--sbaConverseAccent, #005FD7);
	outline-offset: 1px;
}

.sbaConverseMic.sbaConverseListening {
	background: var(--sbaConverseAccent, #005FD7);
	color: #fff;
	border-color: var(--sbaConverseAccent, #005FD7);
	animation: sbaConverseListenPulse 1.4s ease-out infinite;
}

@keyframes sbaConverseListenPulse {
	from {
		box-shadow: 0 0 0 0 rgba(0, 95, 215, 0.5);
	}

	to {
		box-shadow: 0 0 0 10px rgba(0, 95, 215, 0);
	}
}

/* Read aloud control inside an assistant bubble. */

.sbaConverseSpeak {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 6px;
	border: 1px solid #d6d9dd;
	border-radius: 50%;
	background: #fff;
	color: var(--sbaConverseAccent, #005FD7);
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
}

.sbaConverseSpeak:focus {
	outline: 2px solid var(--sbaConverseAccent, #005FD7);
	outline-offset: 1px;
}

/* On a phone the panel is a sheet: it sits on the bottom edge, it uses the
   dynamic viewport height so the browser bar cannot cut it off, it keeps the
   home indicator free, and it scrolls inside itself instead of dragging the page
   along. The input is sixteen pixels, because anything smaller makes iOS zoom in
   on focus and the visitor is left in a zoomed page they then have to pinch back
   out of. */

@media (max-width: 767px) {
	.sbaConversePanel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		max-width: none;
		height: min(78dvh, 640px);
		max-height: none;
		border-radius: 16px 16px 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0);
		touch-action: pan-y;
	}

	.sbaConversePanel .sbaConverseMessages {
		flex: 1 1 auto;
		min-height: 0;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.sbaConversePanel input,
	.sbaConversePanel textarea,
	.sbaConversePanel select {
		font-size: 16px;
	}

	.sbaConverseMessage {
		max-width: 92%;
		overflow-wrap: anywhere;
	}

	.sbaConverseInvite {
		position: fixed;
		left: 0.6rem;
		right: 0.6rem;
		bottom: calc(84px + env(safe-area-inset-bottom, 0px));
		width: auto;
		max-width: none;
		border-radius: 14px;
		border-left: none;
		border-top: 4px solid var(--sbaConverseAccent, #005FD7);
	}

	.sbaConverseToggle {
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
		width: 56px;
		height: 56px;
		touch-action: manipulation;
	}

	/* While the sheet is open the page behind it stays put. */
	body.sbaConverseOpen {
		overflow: hidden;
	}
}

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

	.sbaConverseToggle:hover,
	.sbaConverseToggle:focus {
		transform: none;
	}

	.sbaConverseInviteVisible {
		animation: none;
	}

	.sbaConverseMic.sbaConverseListening {
		animation: none;
	}
}