:root {
	--gray: #231f20;
	--gray-50: #fafafa;
	--gray-100: #f2f2f2;
	--gray-200: #d9d9d9;
	--gray-300: #bfc0c0;
	--gray-400: #a5a7a7;
	--gray-500: #8b8d8e;
	--gray-600: #717374;
	--gray-700: #585a5a;
	--gray-800: #3f4041;
	--gray-900: #262627;

	--black: #000;
	--white: #fff;

	--font-sans: 'din-2014', 'Calibri', Arial, Helvetica, sans-serif !important;
}

/* Force override Copilot font styles */
.webchat__css-custom-properties {
	--webchat__font--primary: 'din-2014', 'Calibri', Arial, Helvetica, sans-serif !important;
}

#webchat,
#webchat .webchat__suggested-action,
#webchat .webchat__send-box-text-box .webchat__send-box-text-box__input,
#webchat .webchat__link-definitions .webchat__link-definitions__list-item-body {
	font-family: var(--font-sans) !important;
}

.copilot-container {
	margin-left: 16px;
	margin-right: 16px;
	right: 0;
	bottom: 0;
	display: none; /* Hidden by default */
	position: fixed;
	max-width: 420px; /* Set a width for the popup */
	z-index: 9999 !important;
	border-radius: 4px;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	border: 1px solid var(--gray-200);
}

@media only screen and (min-width: 500px) {
	.copilot-container {
		right: 16px;
		bottom: 12px;
		margin-left: 0;
		margin-right: 0;
	}
}

.webchat__text-content p,
.webchat__text-content ul,
.webchat__text-content ol,
.webchat__bubble__content p,
.webchat__bubble__content ul,
.webchat__bubble__content ol {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--gray-800);
}

.webchat__bubble__content ul {
	list-style-type: disc;
	margin-left: 0.75rem;
}

.webchat__text-content li,
.webchat__bubble__content li {
	margin-bottom: 0.875rem;
}

.webchat__render-markdown.webchat__render-markdown--message-activity > :last-child {
	padding-bottom: 0;
}

.webchat__text-content a {
	color: var(--black);
}

#webchat .webchat__suggested-action {
	font-size: 0.875rem;
	color: var(--black);
	border-color: var(--black);
	padding: 0 1rem;
	transition: 0.3s ease;
}

#webchat .webchat__link-definitions__list-item-text {
	font-size: 0.875rem;
	color: var(--black);
}

#webchat .webchat__link-definitions__open-in-new-window-icon {
	color: var(--black);
}

#webchat .webchat__suggested-action:hover {
	background-color: var(--black);
	color: var(--white);
}

/* Style for the chatbot popup button */
.chatbot-btn {
	position: fixed;
	bottom: 12px;
	right: 16px;
	padding: 12px 16px;
	background-color: var(--black);
	border-radius: 8px;
	border-style: solid;
	border-color: var(--gray-900);
	cursor: pointer;
	z-index: 9998;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--white);
	filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
	transition: 0.3s ease;
}

.chatbot-btn:hover {
	background-color: var(--gray-800);
}

.chatbot-btn svg {
	color: var(--gray-50);
}

.chatbot-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--white);
	filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

.chatbot-heading h3 {
	color: var(--black);
	font-family: var(--font-sans);
	font-size: 1.1rem !important;
	line-height: 1;
	margin: 0;
	padding: 1rem;
}

/* svg color */
.chatbot-heading h3 span {
	color: var(--gray-500);
}

#webchat {
	background-color: var(--white);
	height: 500px;
	padding: 4px;
}

.close-icon {
	color: var(--gray-900);
	cursor: pointer;
	transition: 0.3s ease;
	padding: 1rem;
}

.close-icon:hover {
	color: var(--gray-600);
}

.close-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}