/* TODO: Integrate this with theme SCSS. */

/* # Variables */

:root {
	--hey-blue-dark: #1c3041;
	--hey-blue-bright: #7ec7e1;
	--hey-green-bright: #9ac455;
	--beacon-green: #53b949;
	--border-width: 10px;
	--border-style: var(--border-width) solid var(--beacon-green);
}

html[data-mantine-color-scheme="light"] {
	--tooltip-border-color: rgba(255, 255, 255, 0.5);
}

html[data-mantine-color-scheme="dark"] {
	--tooltip-border-color: rgba(0, 0, 0, 0.5);
}

/* # Components */

/* # – General/Mantine */

.mantine-ActionIcon-root {
	border-radius: 50%;
}

.mantine-Tooltip-tooltip {
	filter: drop-shadow(1px 1px 0 var(--tooltip-border-color)) drop-shadow(-1px -1px 0 var(--tooltip-border-color)) drop-shadow(1px -1px 0 var(--tooltip-border-color)) drop-shadow(-1px 1px 0 var(--tooltip-border-color));
	border-radius: 5px;
}

html[data-mantine-color-scheme="light"] .mantine-Tooltip-tooltip {
	background: var(--hey-blue-dark);
}

/* # – CD AI Chat */

/* # –– Titlebar */

.justask-AIChatTitlebar-root {
	border-top: var(--border-style);
	border-radius: 0;
}

.justask-AIChatTitlebar-titleImage {
	width: 6rem;
}

.justask-ColorSchemeToggle-root,
.justask-ColorSchemeToggle-root:hover {
	background: var(--hey-blue-dark);
}

/* # –– Footer */

.justask-AIChat-footer {
	background: var(--hey-blue-dark);
	border-top: var(--border-style);
}

.justask-AIChat-input .mantine-ActionIcon-root {
	transform: scale(1.1);
}

.justask-AIChat-input .mantine-TextInput-input {
	border-radius: 999vw;
}

/* # –– View */

.justask-AIChat-welcome {
	font-size: var(--mantine-font-size-lg);
	padding-top: calc(var(--border-width) * 2);
}

.justask-AIChat-welcome a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

html[data-mantine-color-scheme="light"] .justask-AIChat-welcome a {
	color: var(--hey-blue-dark);
}

html[data-mantine-color-scheme="dark"] .justask-AIChat-welcome a {
	color: var(--hey-blue-bright);
}

/* # Breakpoints */

/* # – Small */

@container (min-width: 40em) {
	.justask-AIChatConversationView-message {
		--padding-h: var(--mantine-spacing-xl);
		font-size: var(--mantine-font-size-lg);
	}

	.justask-AIChat-input .mantine-TextInput-input {
		--input-fz: var(--mantine-font-size-lg);
	}
} /* container */