#oth-aics-chat-root {
	--oth-aics-color: #2271b1;
	--oth-aics-offset-x: 20px;
	--oth-aics-offset-y: 20px;
	position: fixed;
	bottom: var(--oth-aics-offset-y);
	z-index: 2147483000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	/* Creates its own stacking context so no ancestor z-index/opacity/transform
	   on the page can pull another element on top of the launcher. */
	isolation: isolate;
	pointer-events: none;
}

#oth-aics-chat-root * {
	pointer-events: auto;
	box-sizing: border-box;
}

#oth-aics-chat-root.oth-aics-pos-right {
	right: var(--oth-aics-offset-x);
}

#oth-aics-chat-root.oth-aics-pos-left {
	left: var(--oth-aics-offset-x);
}

.oth-aics-fab {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 56px;
	min-width: 56px;
	padding: 0 18px 0 15px;
	border-radius: 28px;
	background: var(--oth-aics-color);
	color: #fff;
	border: none;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.oth-aics-fab-icon {
	display: flex;
	flex-shrink: 0;
}

.oth-aics-fab-label {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.oth-aics-fab-label:empty {
	display: none;
}

.oth-aics-fab-label:empty + .oth-aics-fab-icon,
.oth-aics-fab:has(.oth-aics-fab-label:empty) {
	padding-left: 0;
	padding-right: 0;
}

.oth-aics-fab-icon-mobile {
	display: none;
}

.oth-aics-fab-icon-mobile img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	display: block;
}

.oth-aics-greeting {
	position: absolute;
	bottom: 68px;
	max-width: 260px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	padding: 14px 30px 14px 14px;
	font-size: 13px;
	line-height: 1.5;
	cursor: pointer;
}

.oth-aics-pos-right .oth-aics-greeting {
	right: 0;
}

.oth-aics-pos-left .oth-aics-greeting {
	left: 0;
}

.oth-aics-greeting p {
	margin: 0;
}

.oth-aics-greeting-close {
	position: absolute;
	top: 4px;
	right: 6px;
	background: none;
	border: none;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: #646970;
}

.oth-aics-panel {
	position: absolute;
	bottom: 68px;
	width: 340px;
	max-width: calc(100vw - 40px);
	height: 460px;
	max-height: calc(100vh - 120px);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* The [hidden] attribute selector has the same specificity as the class
   selector above, and author CSS always wins over the browser's built-in
   "[hidden] { display: none }" rule at equal specificity — so without this,
   .oth-aics-panel's own "display: flex" silently overrides the hidden
   attribute and the panel renders open on every page load, before any
   click ever calls openPanel(). */
.oth-aics-panel[hidden] {
	display: none;
}

.oth-aics-pos-right .oth-aics-panel {
	right: 0;
}

.oth-aics-pos-left .oth-aics-panel {
	left: 0;
}

.oth-aics-panel-header {
	background: var(--oth-aics-color);
	color: #fff;
	padding: 10px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
}

.oth-aics-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	padding: 0 0.5em;
}

.oth-aics-messages {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.oth-aics-message {
	max-width: 85%;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.5;
	white-space: pre-wrap;
}

.oth-aics-message-user {
	align-self: flex-end;
	background: var(--oth-aics-color);
	color: #fff;
}

.oth-aics-message-assistant {
	align-self: flex-start;
	background: #f0f0f1;
	color: #1d2327;
}

.oth-aics-message.is-thinking {
	padding: 12px 16px;
}

.oth-aics-typing-dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.oth-aics-typing-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8c8f94;
	animation: oth-aics-typing-bounce 1.2s infinite ease-in-out both;
}

.oth-aics-typing-dots span:nth-child(1) { animation-delay: -0.24s; }
.oth-aics-typing-dots span:nth-child(2) { animation-delay: -0.12s; }
.oth-aics-typing-dots span:nth-child(3) { animation-delay: 0; }

@keyframes oth-aics-typing-bounce {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
	40% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.oth-aics-typing-dots span {
		animation: none;
	}
}

.oth-aics-quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 4px;
}

.oth-aics-quick-reply {
	background: #fff;
	border: 1.5px solid var(--oth-aics-color);
	color: var(--oth-aics-color);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.oth-aics-quick-reply:hover {
	background: var(--oth-aics-color);
	color: #fff;
}

.oth-aics-feedback {
	display: flex;
	gap: 4px;
	padding: 0 4px;
}

.oth-aics-feedback-btn {
	background: none;
	border: none;
	font-size: 14px;
	line-height: 1;
	padding: 3px 5px;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.oth-aics-feedback-btn:hover {
	opacity: 1;
	background: #f0f0f1;
}

.oth-aics-feedback.is-rated .oth-aics-feedback-btn {
	cursor: default;
}

.oth-aics-feedback.is-rated .oth-aics-feedback-btn:not(.is-selected) {
	opacity: 0.25;
}

.oth-aics-feedback.is-rated .oth-aics-feedback-btn:not(.is-selected):hover {
	background: none;
}

.oth-aics-feedback-btn.is-selected {
	opacity: 1;
	background: #f0f0f1;
}

.oth-aics-related-cards {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 4px 6px;
	scroll-snap-type: x proximity;
	/* Setting overflow-x here makes the browser compute overflow-y as
	   "auto" too (can't have one axis visible and the other scrolling),
	   which per the flexbox spec drops this item's automatic minimum
	   height to 0 — so once .oth-aics-messages had enough other content
	   to be short on space, this row got crushed down to just its
	   padding/border instead of showing the cards. flex-shrink: 0 keeps
	   it at its natural content height regardless. */
	flex-shrink: 0;
}

.oth-aics-related-card {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 140px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e2e2e3;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: #1d2327;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.oth-aics-related-card-image {
	width: 100%;
	height: 80px;
	object-fit: cover;
	background: #f0f0f1;
	display: block;
}

.oth-aics-related-card-title {
	font-size: 12px;
	line-height: 1.4;
	padding: 8px 8px 2px;
}

.oth-aics-related-card-excerpt {
	font-size: 11px;
	line-height: 1.4;
	color: #646970;
	padding: 0 8px 8px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.oth-aics-handoff {
	display: inline-block;
	margin: 4px;
	font-size: 12px;
	color: #d63638;
	text-decoration: underline;
}

.oth-aics-form {
	display: flex;
	border-top: 1px solid #dcdcde;
	padding: 8px;
	gap: 6px;
}

.oth-aics-input {
	flex: 1;
	resize: none;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 13px;
	font-family: inherit;
}

.oth-aics-send {
	background: var(--oth-aics-color);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0 14px;
	cursor: pointer;
	font-size: 13px;
}

/* Semantic search bar */
.oth-aics-search-root {
	position: relative;
	max-width: 480px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.oth-aics-search-input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
}

.oth-aics-search-results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	max-height: 360px;
	overflow-y: auto;
	z-index: 9999;
}

.oth-aics-search-result {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 12px;
	text-decoration: none;
	border-bottom: 1px solid #f0f0f1;
	color: #1d2327;
}

.oth-aics-search-result-image {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	background: #f0f0f1;
}

.oth-aics-search-result-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.oth-aics-search-result-text strong {
	font-size: 13px;
}

.oth-aics-search-result-text span {
	font-size: 12px;
	color: #646970;
}

.oth-aics-search-empty,
.oth-aics-search-suggest-chat {
	padding: 10px 12px;
	font-size: 13px;
	color: #646970;
	margin: 0;
}

/* Mobile: icon-only launcher (no text label, headset+smiley mark instead of
   the default chat-bubble icon), no auto-greeting bubble, and a narrower
   panel — there's not enough screen width for the desktop sizing to sit
   comfortably alongside page content. Placed at the end of the file (rather
   than earlier, next to the rules it overrides) so it wins the cascade
   regardless of source order, since every selector here has the same
   specificity as the base rule it's overriding. */
@media (max-width: 680px) {
	.oth-aics-greeting {
		display: none !important;
	}

	.oth-aics-fab-label {
		display: none;
	}

	.oth-aics-fab-icon-desktop {
		display: none;
	}

	.oth-aics-fab-icon-mobile {
		display: flex;
	}

	.oth-aics-fab {
		padding: 0;
		width: 56px;
		justify-content: center;
		/* The launcher icon already carries its own colors (navy headset,
		   green bubble), so the admin-configured theme color is dropped in
		   favor of a plain white circle on mobile rather than tinting it. */
		background: #fff;
	}

	/* #oth-aics-chat-root prefix bumps specificity above the
	   .oth-aics-pos-right/.oth-aics-pos-left "anchor to a side" rules
	   (two classes each) so the panel centers regardless of the
	   admin-configured launcher position. Height is a custom property
	   (rather than a plain value) so the keyboard-open rule below can
	   halve it with calc() instead of duplicating a hardcoded number. */
	#oth-aics-chat-root {
		--oth-aics-panel-height: 65vh;
	}

	#oth-aics-chat-root .oth-aics-panel {
		width: 75vw;
		height: var(--oth-aics-panel-height);
		max-height: calc(100vh - 120px);
		position: fixed;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	.oth-aics-panel-header span {
		font-size: 0.9em;
	}

	/* Kept at 16px rather than shrunk further: iOS Safari auto-zooms the
	   whole page when a focused text input's font-size is under 16px, which
	   is what was making the page appear to "widen" when the panel opened.
	   Padding is trimmed instead to keep the field visually compact. */
	.oth-aics-input {
		font-size: 16px;
		padding: 4px 6px;
	}

	.oth-aics-send {
		font-size: 12px;
		padding: 0 10px;
	}

	.oth-aics-message {
		font-size: 12px;
	}

	/* Set by chat-widget.js via the VisualViewport API when the on-screen
	   keyboard is detected as open — see the resize listener there. */
	#oth-aics-chat-root.oth-aics-keyboard-open .oth-aics-panel {
		height: calc(var(--oth-aics-panel-height) * 0.55);
	}
}