/*
 * SGEG Grace — website chatbot widget
 * CSS is namespaced under .sgeg-* classes to avoid colliding with the
 * host theme. Every rule targets either a widget class or a descendant
 * of one, so nothing here leaks onto the rest of the site.
 */

.sgeg-launcher,
.sgeg-panel,
.sgeg-panel * {
	box-sizing: border-box;
}

.sgeg-panel,
.sgeg-panel input,
.sgeg-panel button {
	font-family: 'Nunito', system-ui, -apple-system, sans-serif;
}

.sgeg-launcher,
.sgeg-panel {
	--sgeg-blue:      #1F3A8C;
	--sgeg-blue-dark: #162B6D;
	--sgeg-blue-soft: #EEF1FA;
	--sgeg-pink:      #E91A5C;
	--sgeg-pink-dark: #C01348;
	--sgeg-teal:      #16B8B0;
	--sgeg-teal-dark: #0E928B;
	--sgeg-yellow:    #F5C518;
	--sgeg-ink:       #1A1F3A;
	--sgeg-ink-soft:  #5B607A;
	--sgeg-cream:     #FFFCF7;
	--sgeg-hair:      #E7E9F2;
	--sgeg-radius-lg: 22px;
	--sgeg-radius-md: 14px;
	--sgeg-radius-pill: 999px;
	--sgeg-shadow-lg: 0 24px 60px -18px rgba(31, 58, 140, 0.35);
	--sgeg-shadow-md: 0 8px 24px -10px rgba(31, 58, 140, 0.25);
}

/* ------------------------------------------------------------------
   Launcher
------------------------------------------------------------------ */
.sgeg-launcher {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--sgeg-pink);
	color: #fff;
	border: none;
	cursor: pointer;
	box-shadow: var(--sgeg-shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999998;
	transition: transform 200ms ease, background 200ms ease;
	padding: 0;
}
.sgeg-launcher:hover { transform: scale(1.05); background: var(--sgeg-pink-dark); }
.sgeg-launcher svg { width: 30px; height: 30px; }
.sgeg-launcher .pulse {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 3px solid var(--sgeg-pink);
	animation: sgegPulse 2s infinite;
	pointer-events: none;
}
@keyframes sgegPulse {
	0% { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(1.3); opacity: 0; }
}
.sgeg-launcher .nudge {
	position: absolute;
	bottom: 78px;
	right: 0;
	background: #fff;
	color: var(--sgeg-ink);
	padding: 10px 16px;
	border-radius: var(--sgeg-radius-md);
	box-shadow: var(--sgeg-shadow-md);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	animation: sgegFadeIn 400ms ease 1.2s both;
}
.sgeg-launcher .nudge:after {
	content: "";
	position: absolute;
	bottom: -5px;
	right: 28px;
	width: 10px;
	height: 10px;
	background: #fff;
	transform: rotate(45deg);
}
@keyframes sgegFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------
   Panel
------------------------------------------------------------------ */
.sgeg-panel {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 400px;
	max-width: calc(100vw - 32px);
	height: 640px;
	max-height: calc(100vh - 48px);
	background: #fff;
	border-radius: var(--sgeg-radius-lg);
	box-shadow: var(--sgeg-shadow-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 999999;
	transform-origin: bottom right;
	animation: sgegOpenPanel 240ms cubic-bezier(0.16, 1, 0.3, 1);
	color: var(--sgeg-ink);
}
@keyframes sgegOpenPanel {
	from { opacity: 0; transform: translateY(20px) scale(0.92); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sgeg-panel.hidden { display: none; }

/* Header */
.sgeg-header {
	background: var(--sgeg-blue);
	color: #fff;
	padding: 18px 18px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	overflow: hidden;
}
.sgeg-header:before {
	content: "";
	position: absolute;
	top: -20px; right: -20px;
	width: 80px; height: 80px;
	background: var(--sgeg-pink);
	border-radius: 50%;
	opacity: 0.6;
}
.sgeg-header:after {
	content: "";
	position: absolute;
	bottom: -30px; right: 60px;
	width: 50px; height: 50px;
	background: var(--sgeg-yellow);
	border-radius: 50%;
	opacity: 0.5;
}
.sgeg-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--sgeg-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 20px;
	color: #fff;
	z-index: 1;
	border: 3px solid #fff;
}
.sgeg-title { z-index: 1; flex: 1; }
.sgeg-title h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: #fff;
}
.sgeg-title .status {
	font-size: 12px;
	font-weight: 600;
	opacity: 0.85;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}
.sgeg-title .status .dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #54E68B;
}
.sgeg-header-actions { display: flex; gap: 6px; z-index: 1; }
.sgeg-icon-btn {
	background: rgba(255,255,255,0.15);
	color: #fff;
	border: none;
	width: 32px; height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.sgeg-icon-btn:hover { background: rgba(255,255,255,0.25); }
.sgeg-icon-btn svg { width: 16px; height: 16px; }

/* Breadcrumb */
.sgeg-breadcrumb {
	background: var(--sgeg-blue-soft);
	padding: 8px 18px;
	font-size: 12px;
	color: var(--sgeg-blue);
	font-weight: 700;
	display: none;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--sgeg-hair);
}
.sgeg-breadcrumb.show { display: flex; }
.sgeg-breadcrumb .back {
	background: none; border: none;
	color: var(--sgeg-blue);
	font-weight: 800;
	cursor: pointer;
	padding: 0;
	font-size: 12px;
}
.sgeg-breadcrumb .back:hover { text-decoration: underline; }

/* Messages */
.sgeg-messages {
	flex: 1;
	padding: 18px;
	overflow-y: auto;
	background: var(--sgeg-cream);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sgeg-messages::-webkit-scrollbar { width: 6px; }
.sgeg-messages::-webkit-scrollbar-thumb { background: #D7DBE8; border-radius: 3px; }

.sgeg-panel .msg {
	max-width: 85%;
	padding: 12px 16px;
	border-radius: 18px;
	font-size: 14.5px;
	line-height: 1.5;
	animation: sgegMsgIn 220ms ease;
	word-wrap: break-word;
}
@keyframes sgegMsgIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sgeg-panel .msg-bot {
	background: #fff;
	color: var(--sgeg-ink);
	border-bottom-left-radius: 6px;
	align-self: flex-start;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sgeg-panel .msg-user {
	background: var(--sgeg-teal);
	color: #fff;
	border-bottom-right-radius: 6px;
	align-self: flex-end;
	font-weight: 600;
}
.sgeg-panel .msg-bot strong { color: var(--sgeg-blue); }
.sgeg-panel .msg-bot a { color: var(--sgeg-blue); font-weight: 700; }

.sgeg-panel .msg-bot .result-card {
	margin-top: 10px;
	padding: 14px;
	border-radius: 14px;
	background: var(--sgeg-blue-soft);
	border-left: 4px solid var(--sgeg-pink);
}
.sgeg-panel .msg-bot .result-card h4 {
	margin: 0 0 6px;
	color: var(--sgeg-blue);
	font-size: 15px;
}
.sgeg-panel .msg-bot .result-card p {
	margin: 0;
	font-size: 13.5px;
	color: var(--sgeg-ink-soft);
}

/* Typing */
.sgeg-panel .msg-typing {
	background: #fff;
	border-bottom-left-radius: 6px;
	align-self: flex-start;
	padding: 14px 18px;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
	display: flex;
	gap: 4px;
}
.sgeg-panel .msg-typing span {
	width: 7px; height: 7px;
	background: #B8BDD1;
	border-radius: 50%;
	animation: sgegBounce 1.2s infinite;
}
.sgeg-panel .msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.sgeg-panel .msg-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes sgegBounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30% { transform: translateY(-5px); opacity: 1; }
}

/* Quick replies */
.sgeg-panel .sgeg-replies {
	padding: 8px 18px 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--sgeg-cream);
}
.sgeg-panel .reply-btn {
	background: #fff;
	border: 1.5px solid var(--sgeg-blue);
	color: var(--sgeg-blue);
	padding: 11px 16px;
	border-radius: var(--sgeg-radius-pill);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	text-align: left;
	transition: all 160ms ease;
	animation: sgegMsgIn 280ms ease both;
}
.sgeg-panel .reply-btn:hover {
	background: var(--sgeg-blue);
	color: #fff;
}
.sgeg-panel .reply-btn.primary {
	background: var(--sgeg-pink);
	color: #fff;
	border-color: var(--sgeg-pink);
}
.sgeg-panel .reply-btn.primary:hover { background: var(--sgeg-pink-dark); border-color: var(--sgeg-pink-dark); }
.sgeg-panel .reply-btn.secondary {
	background: var(--sgeg-teal);
	color: #fff;
	border-color: var(--sgeg-teal);
}
.sgeg-panel .reply-btn.secondary:hover { background: var(--sgeg-teal-dark); border-color: var(--sgeg-teal-dark); }
.sgeg-panel .reply-btn.ghost {
	border-color: var(--sgeg-hair);
	color: var(--sgeg-ink-soft);
	font-weight: 600;
}
.sgeg-panel .reply-btn.ghost:hover { background: var(--sgeg-blue-soft); color: var(--sgeg-blue); border-color: var(--sgeg-blue-soft); }

/* Multi-select chips */
.sgeg-panel .sgeg-multi {
	padding: 8px 18px 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	background: var(--sgeg-cream);
}
.sgeg-panel .chip-btn {
	background: #fff;
	border: 1.5px solid var(--sgeg-hair);
	color: var(--sgeg-ink);
	padding: 8px 14px;
	border-radius: var(--sgeg-radius-pill);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 140ms ease;
}
.sgeg-panel .chip-btn:hover { border-color: var(--sgeg-blue); color: var(--sgeg-blue); }
.sgeg-panel .chip-btn.active {
	background: var(--sgeg-blue);
	color: #fff;
	border-color: var(--sgeg-blue);
}
.sgeg-panel .chip-confirm {
	background: var(--sgeg-pink);
	color: #fff;
	border: none;
	padding: 10px 18px;
	border-radius: var(--sgeg-radius-pill);
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	margin-left: auto;
}
.sgeg-panel .chip-confirm:hover { background: var(--sgeg-pink-dark); }
.sgeg-panel .chip-confirm:disabled { background: #C8CBDA; cursor: not-allowed; }

/* Lead capture */
.sgeg-panel .sgeg-lead {
	padding: 14px 18px 4px;
	background: var(--sgeg-cream);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sgeg-panel .sgeg-lead-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sgeg-panel .sgeg-lead-input {
	flex: 1 1 140px;
	min-width: 0;
	padding: 11px 14px;
	border: 1.5px solid var(--sgeg-hair);
	border-radius: var(--sgeg-radius-pill);
	font-family: inherit;
	font-size: 14px;
	outline: none;
	background: #fff;
	color: var(--sgeg-ink);
	transition: border-color 140ms ease;
}
.sgeg-panel .sgeg-lead-input::placeholder { color: var(--sgeg-ink-soft); }
.sgeg-panel .sgeg-lead-input:focus { border-color: var(--sgeg-blue); }
.sgeg-panel .sgeg-lead-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.sgeg-panel .sgeg-lead-skip {
	background: transparent;
	border: none;
	color: var(--sgeg-ink-soft);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	padding: 8px 4px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sgeg-panel .sgeg-lead-skip:hover { color: var(--sgeg-blue); }
.sgeg-panel .sgeg-lead-submit {
	background: var(--sgeg-pink);
	color: #fff;
	border: none;
	padding: 10px 18px;
	border-radius: var(--sgeg-radius-pill);
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}
.sgeg-panel .sgeg-lead-submit:hover { background: var(--sgeg-pink-dark); }
.sgeg-panel .sgeg-lead-submit:disabled { background: #C8CBDA; cursor: not-allowed; }
.sgeg-panel .sgeg-lead-note {
	font-size: 11.5px;
	color: var(--sgeg-ink-soft);
	line-height: 1.4;
	padding: 0 2px;
}

/* Free-form input */
.sgeg-panel .sgeg-input {
	padding: 12px 14px;
	background: #fff;
	border-top: 1px solid var(--sgeg-hair);
	display: flex;
	gap: 8px;
	align-items: center;
}
.sgeg-panel .sgeg-input input {
	flex: 1;
	padding: 11px 16px;
	border: 1.5px solid var(--sgeg-hair);
	border-radius: var(--sgeg-radius-pill);
	font-family: inherit;
	font-size: 14px;
	outline: none;
	transition: border-color 140ms ease;
	color: var(--sgeg-ink);
	background: #fff;
}
.sgeg-panel .sgeg-input input:focus { border-color: var(--sgeg-blue); }
.sgeg-panel .sgeg-input button {
	width: 42px; height: 42px;
	background: var(--sgeg-blue);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.sgeg-panel .sgeg-input button:hover { background: var(--sgeg-blue-dark); }
.sgeg-panel .sgeg-input button svg { width: 16px; height: 16px; }

.sgeg-panel .sgeg-footer {
	text-align: center;
	padding: 8px;
	background: #fff;
	border-top: 1px solid var(--sgeg-hair);
	font-size: 11px;
	color: var(--sgeg-ink-soft);
	font-weight: 700;
}
.sgeg-panel .sgeg-footer a { color: var(--sgeg-blue); text-decoration: none; }

/* CTA block inside a bot message */
.sgeg-panel .msg-bot .cta-block {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sgeg-panel .msg-bot .cta-link {
	display: inline-block;
	background: var(--sgeg-pink);
	color: #fff;
	padding: 9px 14px;
	border-radius: var(--sgeg-radius-pill);
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	text-align: center;
}
.sgeg-panel .msg-bot .cta-link.alt { background: #fff; color: var(--sgeg-blue); border: 1.5px solid var(--sgeg-blue); }

@media (max-width: 520px) {
	.sgeg-panel { bottom: 0; right: 0; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
	.sgeg-launcher { bottom: 16px; right: 16px; }
}