/**
 * SAS COBRA Search Stuff
 *
 * Rules lifted from sas_cobra_search_mockup.html. Class names are unchanged.
 * Differences from the mockup, all deliberate:
 *   - The launcher and panel are position:fixed rather than absolute, since
 *     the mockup positioned them inside a demo frame.
 *   - Colors read theme custom properties with the mockup values as
 *     fallbacks, so the theme wins where it defines them.
 *   - Bootstrap is not shipped. The theme already enqueues it.
 *   - The mockup's demo chrome is omitted.
 */

/* ================= HEADER SEARCH ================= */
.hdr-search-icon-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f2f9;
	border: 1px solid var(--cobra-border, #d9dce8);
	color: var(--cobra-navy, #1b2a47);
	transition: .15s ease;
	padding: 0;
	cursor: pointer;
}

.hdr-search-icon-btn:hover {
	background: var(--primary-color, #0071ce);
	color: #fff;
	border-color: var(--primary-color, #0071ce);
}

.hdr-search-expanded {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 380px;
	max-width: 90vw;
	background: #fff;
	border: 1px solid var(--cobra-border, #d9dce8);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(27, 42, 71, .16);
	padding: 10px;
	z-index: 50;
}

.hdr-search-expanded .form-control {
	border-radius: 8px;
}

.hdr-dropdown-results {
	margin-top: 8px;
}

.hdr-result-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 10px;
	border-radius: 8px;
	cursor: pointer;
}

.hdr-result-row:hover,
.hdr-result-row:focus {
	background: #f0f2f9;
}

.hdr-result-row .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--primary-color, #0071ce);
	flex: 0 0 auto;
}

.hdr-result-row .snippet {
	font-size: .78rem;
	color: #8a8fa3;
}

.hdr-no-match {
	padding: 10px 10px;
	font-size: .82rem;
	color: #8a8fa3;
}

/* ================= CHAT WIDGET ================= */
.chat-widget {
	max-width: 520px;
	margin: 0 auto;
	border: 1px solid var(--cobra-border, #d9dce8);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 4px 24px rgba(27, 42, 71, .08);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 380px;
}

.chat-widget-header {
	background: var(--primary-color, #0071ce);
	color: #fff;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 8px 8px 0 0;
	flex: 0 0 auto;
}

.chat-widget-header .badge-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3ecf6f;
}

.chat-widget-header .title {
	font-weight: 700;
	font-size: .95rem;
}

.chat-widget-header .subtitle {
	font-size: .72rem;
	color: #b9c2d9;
}

.chat-widget-header .close-x {
	margin-left: auto;
	cursor: pointer;
	opacity: .75;
	font-size: 1.1rem;
	line-height: 1;
}

.chat-widget-header .close-x:hover {
	opacity: 1;
}

.chat-body-wrap {
	position: relative;
	flex: 1;
	min-height: 0;
}

.chat-body {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	padding: 18px;
	background: #f7f8fc;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.chat-body > * {
	flex-shrink: 0;
}

.scroll-down-btn {
	position: absolute;
	bottom: 12px;
	right: 14px;
	z-index: 5;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cobra-navy, #1b2a47);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(27, 42, 71, .3);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}

.scroll-down-btn.visible {
	opacity: 1;
	pointer-events: auto;
}

.scroll-down-btn:hover {
	transform: translateY(2px);
}

.bubble-bot {
	background: #fff;
	border: 1px solid var(--cobra-border, #d9dce8);
	border-radius: 8px;
	padding: 12px 15px;
	font-size: .9rem;
	max-width: 88%;
	align-self: flex-start;
}

.bubble-user {
	background: var(--primary-color, #0071ce);
	color: #fff;
	border-radius: 8px;
	padding: 10px 15px;
	font-size: .9rem;
	max-width: 80%;
	align-self: flex-end;
}

.result-option {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--cobra-border, #d9dce8);
	border-radius: 8px;
	padding: 12px 14px;
	cursor: pointer;
	transition: .15s ease;
	font-size: .87rem;
	font-weight: 600;
	color: var(--cobra-navy, #1b2a47);
}

.result-option:hover,
.result-option:focus {
	border-color: var(--primary-color, #0071ce);
	background: #f0f5fc;
}

.result-option .num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cobra-navy, #1b2a47);
	color: #fff;
	font-size: .72rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-weight: 700;
}

.doc-stub {
	background: #fff;
	border: 1px solid var(--cobra-border, #d9dce8);
	border-radius: 8px;
	overflow: hidden;
	align-self: stretch;
}

.doc-stub-bar {
	background: #eef1f9;
	border-bottom: 1px solid var(--cobra-border, #d9dce8);
	padding: 8px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .7rem;
	color: #8a8fa3;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.doc-stub-body {
	padding: 16px 18px;
}

.doc-stub-body h3 {
	font-size: 1.05rem;
	color: var(--cobra-navy, #1b2a47);
	margin-bottom: 8px;
}

.doc-stub-body p {
	font-size: .87rem;
	margin-bottom: 0;
}

.doc-stub-body p + p {
	margin-top: .6rem;
}

.doc-stub-footer {
	padding: 10px 18px 14px;
	display: flex;
	gap: 10px;
}

/* Self-contained button chrome, no Bootstrap classes at all. Bootstrap's
   own btn-outline-secondary:hover fills the button solid dark gray, and
   depending on stylesheet load order that rule was winning over this one,
   which is what made the hover state look too dark. Removed the Bootstrap
   classes from the markup instead of fighting the cascade, since this
   stylesheet already fully covers the button on its own. */
.doc-stub-footer button,
.doc-stub-footer .sas-cobra-search-btn {
	display: inline-block;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 6px 14px;
	border: 1px solid var(--cobra-border, #d9dce8);
	border-radius: 8px;
	color: var(--cobra-navy, #1b2a47);
	background: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.doc-stub-footer .sas-cobra-search-btn:hover,
.doc-stub-footer .sas-cobra-search-btn:focus {
	border-color: var(--primary-color, #0071ce);
	background: #f0f5fc;
	color: var(--primary-color, #0071ce);
	text-decoration: none;
}

.cta-nudge {
	background: #fff7e6;
	border: 1px solid #f0d999;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: .84rem;
	align-self: flex-start;
	max-width: 90%;
}

.cta-nudge p {
	margin: 0;
}

.cta-nudge a {
	color: var(--accent-color, #e01f1f);
	font-weight: 700;
	text-decoration: none;
	display: block;
	margin-top: 4px;
}

.cta-nudge a:hover {
	text-decoration: underline;
}

.typing-dots span {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #b9c2d9;
	margin-right: 3px;
	animation: sas-blink 1.2s infinite;
}

.typing-dots span:nth-child(2) {
	animation-delay: .2s;
}

.typing-dots span:nth-child(3) {
	animation-delay: .4s;
}

@keyframes sas-blink {
	0%, 80%, 100% { opacity: .3; }
	40% { opacity: 1; }
}

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

.chat-input-row {
	border-top: 1px solid var(--cobra-border, #d9dce8);
	padding: 12px 14px;
	display: flex;
	gap: 8px;
	background: #fff;
	border-radius: 0 0 8px 8px;
	flex: 0 0 auto;
}

.chat-input-row input {
	border-radius: 8px;
	font-size: .87rem;
}

.chat-input-row button {
	border-radius: 8px;
	font-size: .85rem;
	font-weight: 700;
}

#sas-cobra-search-submit {
	background: var(--primary-color, #0071ce);
	border-color: var(--primary-color, #0071ce);
}

.no-results-bubble {
	border-color: #e8c7c7;
	background: #fff5f5;
}

.no-results-bubble a {
	color: var(--accent-color, #e01f1f);
	font-weight: 700;
}

/* ================= FLOATING LAUNCHER ================= */
.launcher-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9998;
	background: var(--primary-color, #0071ce);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 13px 20px 13px 16px;
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: .85rem;
	box-shadow: 0 10px 24px rgba(27, 42, 71, .28);
	cursor: pointer;
	transition: .15s ease;
}

.launcher-btn:hover {
	background: var(--primary-color-dark, #0060af);
	color: #fff;
}

.chat-panel-float {
	position: fixed;
	/* Matches .launcher-btn's bottom offset exactly. The panel used to sit
	   82px up to leave room for the launcher underneath it, but the launcher
	   is now hidden the entire time the panel is open, so that gap was just
	   empty space where the button used to be. Anchoring here instead means
	   the panel opens from exactly where the button was, not floating above
	   a void. */
	bottom: 20px;
	right: 20px;
	z-index: 9999;
	width: 360px;
	max-width: calc(100vw - 40px);
}

.chat-panel-float .chat-widget {
	/* Taller by default. Capped by both a max pixel height and the viewport,
	   so it grows on desktop without running off the top of a short window
	   or a mobile screen. */
	height: min(680px, calc(100vh - 140px));
	max-width: none;
	margin: 0;
}

@media (max-width: 480px) {
	.chat-panel-float {
		right: 12px;
		left: 12px;
		width: auto;
		max-width: none;
	}
}

/* Honeypot. Off screen rather than display:none, since some bots skip
   hidden inputs entirely and would slip the check. */
.sas-cobra-search-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none;
}