/* GradezUp assistant widget.
 *
 * Colours follow the site: GradezUp green (#12a450, taken from the checkout's Login button) for
 * the launcher and the member's own messages, cream/white surfaces for everything else.
 * Everything is scoped under .gza-chat so none of it leaks into the theme.
 */

.gza-chat {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998; /* under the WhatsApp button's own layer, not fighting it */
	font-family: inherit;
}

/* --- launcher ------------------------------------------------------------------------ */
.gza-chat__launch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background: #12a450;
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 6px 18px rgba(0, 0, 0, .12);
	transition: background-color .15s ease, box-shadow .15s ease;
}

.gza-chat__launch:hover {
	background: #0e8c43;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .22), 0 10px 26px rgba(0, 0, 0, .14);
}

.gza-chat.is-open .gza-chat__launch {
	display: none;
}

/* --- panel --------------------------------------------------------------------------- */
.gza-chat__panel {
	display: none;
	flex-direction: column;
	width: min(360px, calc(100vw - 32px));
	height: min(520px, calc(100vh - 120px));
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .14), 0 16px 40px rgba(0, 0, 0, .16);
}

.gza-chat.is-open .gza-chat__panel {
	display: flex;
}

.gza-chat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: #12a450;
	color: #fff;
}

.gza-chat__title {
	font-size: 14px;
	font-weight: 600;
}

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

.gza-chat__x:hover {
	opacity: 1;
}

/* --- log ----------------------------------------------------------------------------- */
.gza-chat__log {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 14px;
	background: #fdfaf2; /* the site's cream */
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gza-chat__msg {
	max-width: 85%;
	padding: 9px 12px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.45;
}

.gza-chat__msg p {
	margin: 0;
	/* Model output can contain long unbroken strings (URLs, codes) — don't let them widen the
	   panel or overflow the bubble. */
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.gza-chat__msg--me {
	align-self: flex-end;
	background: #12a450;
	color: #fff;
	border-bottom-right-radius: 4px;
}

.gza-chat__msg--bot {
	align-self: flex-start;
	background: #fff;
	color: #1f1f1f;
	border: 1px solid #e8e6df;
	border-bottom-left-radius: 4px;
}

.gza-chat__wa {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #12a450;
	text-decoration: underline;
}

/* --- composer ------------------------------------------------------------------------ */
.gza-chat__form {
	display: flex;
	gap: 8px;
	padding: 10px;
	background: #fff;
	border-top: 1px solid #e8e6df;
}

.gza-chat__input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #d4d7db;
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
	color: #1f1f1f;
}

.gza-chat__input:focus {
	outline: 2px solid #12a450;
	outline-offset: -1px;
}

.gza-chat__send {
	flex: 0 0 auto;
	padding: 10px 16px;
	background: #12a450;
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.gza-chat__send:hover {
	background: #0e8c43;
}

.gza-chat.is-busy .gza-chat__send,
.gza-chat.is-busy .gza-chat__input {
	opacity: .6;
	cursor: default;
}

@media (max-width: 480px) {
	.gza-chat {
		right: 12px;
		bottom: 12px;
	}
	.gza-chat__panel {
		height: min(72vh, calc(100vh - 96px));
	}
}

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