/* Colors pulled from the site's own Elementor global kit (Site Settings > Global Colors)
   and the live header gradient, so the widget looks native to GIMA's branding. */
#gima-chatbot-root {
	--gima-brand-start: #0700dd;
	--gima-brand-end: #00f2ff;
	--gima-brand-gradient: linear-gradient(130deg, var(--gima-brand-start) 0%, var(--gima-brand-end) 100%);
	--gima-accent: #ffd100;
	--gima-text: #203b54;
	--gima-bg-soft: #f3fcff;

	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999999;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#gima-chatbot-launcher {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--gima-brand-gradient);
	color: #fff;
	border: none;
	font-size: 24px;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(7, 0, 221, 0.35);
	transition: transform 0.15s ease;
}

#gima-chatbot-launcher:hover {
	transform: scale(1.06);
}

#gima-chatbot-panel {
	position: fixed;
	bottom: 90px;
	right: 20px;
	width: 340px;
	max-width: calc(100vw - 40px);
	height: 460px;
	max-height: calc(100vh - 140px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 36px rgba(7, 0, 221, 0.22);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(0, 242, 255, 0.25);
}

#gima-chatbot-header {
	background: var(--gima-brand-gradient);
	color: #fff;
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	font-size: 15px;
}

#gima-chatbot-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	opacity: 0.9;
}

#gima-chatbot-close:hover {
	opacity: 1;
}

#gima-chatbot-messages {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--gima-bg-soft);
	scrollbar-width: thin;
	scrollbar-color: rgba(7, 0, 221, 0.3) transparent;
}

#gima-chatbot-messages::-webkit-scrollbar {
	width: 6px;
}

#gima-chatbot-messages::-webkit-scrollbar-track {
	background: transparent;
}

#gima-chatbot-messages::-webkit-scrollbar-thumb {
	background: rgba(7, 0, 221, 0.3);
	border-radius: 3px;
}

/* Prevent the page behind the chat from scrolling while it's open, so only
   one scrollbar (the messages list above) is ever visible at a time.
   JS pins body to `position: fixed` (works on mobile touch-scroll too);
   this overflow rule is a harmless belt-and-braces backup for desktop. */
html:has(body.gima-chatbot-body-lock) {
	overflow: hidden !important;
}

body.gima-chatbot-body-lock {
	overflow: hidden !important;
	width: 100%;
}

.gima-chatbot-msg {
	max-width: 85%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--gima-text);
	/* Flex items with a non-visible overflow get their auto min-height
	   treated as 0, which let messages get squashed down to a sliver with
	   their own tiny scrollbar instead of keeping their natural height.
	   flex-shrink: 0 keeps every message at its full content height so
	   only the outer messages list (below) ever scrolls. */
	flex-shrink: 0;
}

.gima-chatbot-user {
	align-self: flex-end;
	background: var(--gima-brand-gradient);
	color: #fff;
	white-space: pre-wrap;
	border-bottom-right-radius: 4px;
}

.gima-chatbot-assistant {
	align-self: flex-start;
	background: #fff;
	max-width: 92%;
	border: 1px solid #e3f4fa;
	border-bottom-left-radius: 4px;
}

/* Horizontal scroll lives on this wrapper (only present around tables),
   never on the message bubble itself. */
.gima-chatbot-table-wrap {
	overflow-x: auto;
	margin: 0 0 8px;
}

.gima-chatbot-table-wrap .gima-chatbot-table {
	margin: 0;
}

.gima-chatbot-assistant p {
	margin: 0 0 8px;
}

.gima-chatbot-assistant p:last-child {
	margin-bottom: 0;
}

.gima-chatbot-assistant a {
	color: var(--gima-brand-start);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gima-chatbot-assistant a:hover {
	color: var(--gima-brand-end);
}

.gima-chatbot-assistant ul,
.gima-chatbot-assistant ol {
	margin: 0 0 8px;
	padding-left: 20px;
}

.gima-chatbot-assistant h1,
.gima-chatbot-assistant h2,
.gima-chatbot-assistant h3,
.gima-chatbot-assistant h4,
.gima-chatbot-assistant h5,
.gima-chatbot-assistant h6 {
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--gima-brand-start);
}

.gima-chatbot-assistant code {
	background: var(--gima-bg-soft);
	padding: 1px 4px;
	border-radius: 4px;
	font-size: 13px;
}

.gima-chatbot-table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	margin: 0 0 8px;
	font-size: 12px;
}

.gima-chatbot-table th,
.gima-chatbot-table td {
	border: 1px solid #dcefff;
	padding: 4px 6px;
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
	word-break: break-word;
	white-space: normal;
}

.gima-chatbot-table th {
	background: var(--gima-bg-soft);
	color: var(--gima-brand-start);
}

#gima-chatbot-form {
	display: flex;
	border-top: 1px solid #e3f4fa;
	background: #fff;
}

#gima-chatbot-input {
	flex: 1;
	border: none;
	padding: 12px 14px;
	font-size: 14px;
	outline: none;
	color: var(--gima-text);
	font-family: inherit;
}

#gima-chatbot-input::placeholder {
	color: #9db3c2;
}

#gima-chatbot-form button[type="submit"] {
	background: var(--gima-brand-gradient);
	color: #fff;
	border: none;
	padding: 0 18px;
	cursor: pointer;
	font-weight: 600;
	font-family: inherit;
}

#gima-chatbot-form button[type="submit"]:hover {
	filter: brightness(1.08);
}

/* Quick-reply chips (used both in the teaser popup and at the start of the chat) */
.gima-chatbot-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.gima-chatbot-chip-btn {
	background: #fff;
	border: 1.5px solid var(--gima-brand-start, #0700dd);
	color: var(--gima-brand-start, #0700dd);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
	transition: background 0.15s ease, color 0.15s ease;
}

.gima-chatbot-chip-btn:hover {
	background: var(--gima-brand-gradient, linear-gradient(130deg, #0700dd 0%, #00f2ff 100%));
	color: #fff;
	border-color: transparent;
}

/* Teaser popup shown above the launcher while the chat is closed */
#gima-chatbot-teaser {
	position: fixed;
	bottom: 90px;
	right: 20px;
	width: 260px;
	max-width: calc(100vw - 40px);
	background: #fff;
	border-radius: 16px;
	padding: 14px 16px;
	box-shadow: 0 10px 30px rgba(7, 0, 221, 0.25);
	border: 1px solid rgba(0, 242, 255, 0.3);
	cursor: pointer;
	animation: gima-chatbot-pop-in 0.25s ease;
}

#gima-chatbot-teaser::after {
	content: '';
	position: absolute;
	bottom: -8px;
	right: 24px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-right: 1px solid rgba(0, 242, 255, 0.3);
	border-bottom: 1px solid rgba(0, 242, 255, 0.3);
	transform: rotate(45deg);
}

#gima-chatbot-teaser-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: none;
	font-size: 16px;
	line-height: 1;
	color: #9db3c2;
	cursor: pointer;
	padding: 4px;
}

#gima-chatbot-teaser-close:hover {
	color: var(--gima-brand-start, #0700dd);
}

#gima-chatbot-teaser-text {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gima-text, #203b54);
	padding-right: 14px;
	line-height: 1.35;
}

@keyframes gima-chatbot-pop-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 480px) {
	#gima-chatbot-panel {
		width: calc(100vw - 24px);
		right: 12px;
	}

	#gima-chatbot-root {
		right: 12px;
		bottom: 12px;
	}

	#gima-chatbot-teaser {
		right: 12px;
		width: calc(100vw - 24px);
	}
}