/* =====================================================================
 * USAR Chat Assistant — frontend widget styles.
 * Scoped under #usar-chat-root to coexist with Education Hub Pro + Elementor.
 * Uses !important liberally because the theme forces backgrounds/colors at
 * virtually every selector.
 * ===================================================================*/

#usar-chat-root,
#usar-chat-root *,
#usar-chat-root *::before,
#usar-chat-root *::after {
	box-sizing: border-box !important;
}

#usar-chat-root {
	position: fixed !important;
	right: 20px !important;
	bottom: 20px !important;
	z-index: 2147483000 !important;    /* above Elementor modals + theme overlays */
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	color: #1a1a1a !important;
}

/* ---------- Launcher button ---------- */
.usar-chat-launcher {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 18px 12px 14px !important;
	background: linear-gradient(135deg, var(--usar-chat-primary, #294a70) 0%, #1a3354 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	box-shadow: 0 10px 30px rgba(26, 51, 84, 0.28), 0 2px 6px rgba(26, 51, 84, 0.18) !important;
	transition: transform .15s ease, box-shadow .15s ease !important;
}
.usar-chat-launcher:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 14px 36px rgba(26, 51, 84, 0.36), 0 2px 8px rgba(26, 51, 84, 0.24) !important;
}
.usar-chat-launcher-icon {
	color: var(--usar-chat-accent, #e69b1e) !important;
}
.usar-chat-launcher-label {
	letter-spacing: .2px !important;
}
.usar-chat-launcher.-open {
	display: none !important;
}

/* ---------- Panel ---------- */
.usar-chat-panel {
	display: none;
	position: absolute !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 380px !important;
	max-width: calc(100vw - 40px) !important;
	height: min(640px, calc(100vh - 60px)) !important;
	background: #f7f8fb !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 60px rgba(20, 35, 60, 0.28), 0 6px 16px rgba(20, 35, 60, 0.14) !important;
	overflow: hidden !important;
	border: 1px solid rgba(26, 51, 84, 0.06) !important;
	flex-direction: column !important;
}
.usar-chat-panel.-open {
	display: flex !important;
}

/* ---------- Header ---------- */
.usar-chat-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 16px !important;
	background: linear-gradient(135deg, var(--usar-chat-primary, #294a70) 0%, #1a3354 100%) !important;
	color: #ffffff !important;
}
.usar-chat-header-title {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}
.usar-chat-brand {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: .2px !important;
}
.usar-chat-status {
	font-size: 11.5px !important;
	opacity: .82 !important;
	margin-top: 1px !important;
}
.usar-chat-dot {
	display: inline-block !important;
	width: 8px !important; height: 8px !important;
	border-radius: 999px !important;
	background: #35d17b !important;
	box-shadow: 0 0 0 4px rgba(53, 209, 123, 0.22) !important;
}
.usar-chat-close {
	background: transparent !important;
	color: #ffffff !important;
	border: none !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 2px 6px !important;
	opacity: .8 !important;
}
.usar-chat-close:hover { opacity: 1 !important; }

/* ---------- Transcript ---------- */
.usar-chat-transcript {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	padding: 16px !important;
	background: #f7f8fb !important;
	scroll-behavior: smooth !important;
}
.usar-chat-msg {
	max-width: 85% !important;
	margin-bottom: 10px !important;
	padding: 10px 13px !important;
	border-radius: 14px !important;
	white-space: pre-wrap !important;
	word-wrap: break-word !important;
}
.usar-chat-msg.-bot {
	background: #ffffff !important;
	color: #1a1a1a !important;
	border: 1px solid rgba(26, 51, 84, 0.08) !important;
	margin-right: auto !important;
	border-top-left-radius: 4px !important;
}
.usar-chat-msg.-user {
	background: var(--usar-chat-primary, #294a70) !important;
	color: #ffffff !important;
	margin-left: auto !important;
	border-top-right-radius: 4px !important;
}
.usar-chat-msg.-staff {
	background: #fffaf0 !important;
	color: #1a1a1a !important;
	border: 1px solid var(--usar-chat-accent, #e69b1e) !important;
	margin-right: auto !important;
	border-top-left-radius: 4px !important;
	position: relative !important;
}
.usar-chat-msg.-staff::before {
	content: 'Our team' !important;
	display: block !important;
	font-family: 'Playfair Display', Georgia, serif !important;
	font-size: 11px !important;
	color: var(--usar-chat-accent, #e69b1e) !important;
	font-weight: 700 !important;
	letter-spacing: .5px !important;
	text-transform: uppercase !important;
	margin-bottom: 4px !important;
}
.usar-chat-msg a {
	color: inherit !important;
	text-decoration: underline !important;
}
.usar-chat-msg.-user a {
	color: #ffd078 !important;
}
.usar-chat-msg.-bot a {
	color: var(--usar-chat-primary, #294a70) !important;
}

.usar-chat-typing {
	display: inline-flex !important;
	gap: 4px !important;
	padding: 10px 13px !important;
	background: #ffffff !important;
	border-radius: 14px !important;
	border: 1px solid rgba(26, 51, 84, 0.08) !important;
	margin-bottom: 10px !important;
}
.usar-chat-typing span {
	width: 6px !important; height: 6px !important;
	border-radius: 999px !important;
	background: #8a95a7 !important;
	animation: usarChatBlink 1.4s infinite both !important;
}
.usar-chat-typing span:nth-child(2) { animation-delay: .2s !important; }
.usar-chat-typing span:nth-child(3) { animation-delay: .4s !important; }
@keyframes usarChatBlink {
	0%, 60%, 100% { opacity: .35; transform: translateY(0); }
	30%           { opacity: 1;    transform: translateY(-2px); }
}

/* ---------- Quick replies ---------- */
.usar-chat-quickreplies {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	padding: 0 12px 10px !important;
	background: #f7f8fb !important;
}
.usar-chat-chip {
	background: #ffffff !important;
	color: var(--usar-chat-primary, #294a70) !important;
	border: 1.5px solid var(--usar-chat-primary, #294a70) !important;
	border-radius: 999px !important;
	padding: 7px 12px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background .12s ease, color .12s ease !important;
	font-family: 'Inter', sans-serif !important;
	line-height: 1.2 !important;
}
.usar-chat-chip:hover {
	background: var(--usar-chat-primary, #294a70) !important;
	color: #ffffff !important;
}
.usar-chat-chip.-action {
	background: var(--usar-chat-accent, #e69b1e) !important;
	color: #ffffff !important;
	border-color: var(--usar-chat-accent, #e69b1e) !important;
}
.usar-chat-chip.-action:hover {
	background: #cf8a15 !important;
	border-color: #cf8a15 !important;
}
.usar-chat-chip.-link {
	background: transparent !important;
	color: var(--usar-chat-primary, #294a70) !important;
	border-style: dashed !important;
}

/* ---------- Form ---------- */
.usar-chat-form {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 12px !important;
	background: #ffffff !important;
	border-top: 1px solid rgba(26, 51, 84, 0.08) !important;
}
.usar-chat-input {
	flex: 1 1 auto !important;
	border: 1px solid rgba(26, 51, 84, 0.12) !important;
	border-radius: 999px !important;
	padding: 10px 14px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	color: #1a1a1a !important;
	background: #f7f8fb !important;
	outline: none !important;
	transition: border-color .12s ease, background .12s ease !important;
}
.usar-chat-input:focus {
	border-color: var(--usar-chat-primary, #294a70) !important;
	background: #ffffff !important;
}
.usar-chat-send {
	background: var(--usar-chat-primary, #294a70) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px !important;
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 14px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	cursor: pointer !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .2px !important;
	transition: background .12s ease, transform .12s ease !important;
}
.usar-chat-send:hover {
	background: #1a3354 !important;
	transform: translateY(-1px) !important;
}
/* Belt-and-suspenders — Education Hub Pro + Elementor CSS frequently
   strip currentColor-based SVG strokes, so we force white stroke + fill
   explicitly on every descendant of the send button. */
.usar-chat-send svg,
.usar-chat-send svg * {
	stroke: #ffffff !important;
	color: #ffffff !important;
}
.usar-chat-send svg path {
	fill: none !important;
	stroke: #ffffff !important;
}
.usar-chat-send-text {
	color: #ffffff !important;
	text-transform: none !important;
}
/* Shrink to icon-only on the narrowest panels */
@media (max-width: 360px) {
	.usar-chat-send-text { display: none !important; }
	.usar-chat-send { min-width: 40px !important; padding: 0 !important; }
}

/* ---------- Footer ---------- */
.usar-chat-footer {
	padding: 8px 12px !important;
	font-size: 11px !important;
	color: #6a7585 !important;
	background: #f1f3f7 !important;
	text-align: center !important;
	border-top: 1px solid rgba(26, 51, 84, 0.06) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
	#usar-chat-root {
		right: 12px !important;
		bottom: 12px !important;
	}
	.usar-chat-panel {
		width: calc(100vw - 24px) !important;
		height: calc(100vh - 80px) !important;
		max-width: none !important;
		bottom: 0 !important;
	}
	.usar-chat-launcher-label {
		display: none !important;
	}
	.usar-chat-launcher {
		padding: 12px !important;
	}
}