.nielss-bricks-element {
	width: 100%;
	min-width: 0;
}

.nielss {
	--nielss-agent: var(--primary, #d7194a);
	--nielss-agent-text: var(--neutral, #000);
	--nielss-user: var(--primary-ultra-light, #fff0f2);
	--nielss-user-text: var(--neutral, #000);
	--nielss-accent: var(--neutral-dark, #292929);
	--nielss-radius: var(--radius, 0);
	--nielss-gap: var(--space-m, 1.25rem);
	--nielss-bubble-width: 40rem;
	box-sizing: border-box;
	width: 100%;
	max-width: 75rem;
	margin-inline: auto;
	padding-block-end: var(--space-l, 2rem);
	font-family: var(--text-font-family, inherit);
	font-size: var(--text-m, 1.125rem);
	line-height: var(--text-line-height, 1.5);
}

.nielss .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.nielss__history {
	display: flex;
	flex-direction: column;
	gap: var(--nielss-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nielss__message {
	display: flex;
	align-items: flex-start;
	gap: var(--space-s, 0.75rem);
	max-width: min(85%, calc(var(--nielss-bubble-width) + 3.5rem));
	animation: nielss-in var(--transition-duration, 300ms) ease-out both;
}

.nielss__message--user {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.nielss__message--agent {
	flex-direction: row;
	color: var(--nielss-agent-text);
}

.nielss__avatar {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 var(--space-l, 2.75rem);
	width: var(--space-l, 2.75rem);
	height: var(--space-l, 2.75rem);
	padding: 0.25em;
	border-radius: var(--radius-circle, 50%);
	background: var(--nielss-agent);
	color: var(--white, #fff);
	font-size: var(--text-m, 1.125rem);
}

.nielss__avatar[hidden] { display: none; }
.nielss__avatar--agent { padding: 0; background: transparent; }
.nielss__avatar--agent img { display: block; width: 100%; height: 100%; border-radius: var(--radius-circle, 50%); object-fit: cover; }
.nielss__message--user .nielss__avatar { flex-basis: 2.5rem; width: 2.5rem; height: 2.5rem; padding: 0; background: var(--nielss-accent); }
.nielss__avatar svg { position: absolute; top: 50%; left: 50%; display: block; width: 64%; height: 64%; transform: translate(-50%, -50%); fill: currentColor; }

.nielss__bubble {
	max-width: var(--nielss-bubble-width);
	padding: var(--space-xs, 0.75rem) var(--space-s, 1rem);
	border-radius: var(--nielss-radius);
	border-start-start-radius: 0;
	background: var(--nielss-agent);
	color: var(--nielss-agent-text);
	line-height: var(--text-line-height, 1.5);
}

.nielss__message--agent .nielss__bubble {
	padding: var(--space-xs, 0.75rem) var(--space-s, 1rem);
	border-radius: 0;
	background: var(--neutral-ultra-light, #f2f2f2);
}

.nielss__message--user .nielss__bubble {
	border-start-start-radius: var(--nielss-radius);
	border-start-end-radius: 0;
	background: var(--nielss-user);
	color: var(--nielss-user-text);
}

.nielss__links { display: grid; gap: var(--space-xs, 0.5rem); margin-top: var(--space-xs, 0.5rem); }
.nielss__link {
	display: block;
	text-decoration: none;
}

.nielss__composer { margin-top: var(--space-l, 2rem); }
.nielss__choice-group { margin-inline-start: auto; width: 100%; }
.nielss__choice-label { margin: 0 0 var(--space-xs, 0.5rem); text-align: end; color: var(--neutral-semi-dark, #646970); }
.nielss__choices { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs, 0.5rem); }

.nielss__choice,
.nielss__control,
.nielss__link {
	min-height: 2.75rem;
	min-width: var(--btn-min-width, 8.75rem);
	padding: var(--btn-padding-block, 0.75em) var(--btn-padding-inline, 1em);
	border: 0;
	border-radius: var(--btn-radius, 0);
	background: var(--neutral-dark, #292929);
	color: var(--neutral-ultra-light, #f2f2f2);
	font: inherit;
	font-size: var(--btn-font-size, 1rem);
	font-weight: var(--btn-font-weight, 700);
	line-height: var(--btn-line-height, 1);
	letter-spacing: var(--btn-letter-spacing, 0);
	text-align: var(--btn-text-align, center);
	text-transform: var(--btn-text-transform, uppercase);
	cursor: pointer;
	transition: transform var(--transition, 300ms ease-in-out);
}

.nielss__choice:hover,
.nielss__control:hover,
.nielss__link:hover {
	transform: scale(1.04);
}

.nielss__choice:focus-visible,
.nielss__control:focus-visible,
.nielss__link:focus-visible {
	outline: var(--focus-width, 3px) solid var(--focus-color, #1e73be);
	outline-offset: var(--focus-offset, 3px);
}

.nielss__controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-s, 0.75rem);
	margin-top: var(--space-xl, 3rem);
}

.nielss__controls[hidden] { display: none; }
.nielss__ended { flex-basis: 100%; text-align: center; color: var(--neutral-semi-dark, #646970); }

.nielss__typing { align-items: center; }
.nielss__typing .nielss__bubble { display: inline-flex; align-items: center; gap: var(--space-xs, 0.5rem); color: var(--neutral-semi-dark, #646970); font-size: var(--text-s, 0.875rem); }
.nielss__typing-dots { display: inline-flex; gap: 0.3rem; }
.nielss__typing-dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--nielss-agent); animation: nielss-dot 900ms infinite alternate; }
.nielss__typing-dots i:nth-child(2) { animation-delay: 180ms; }
.nielss__typing-dots i:nth-child(3) { animation-delay: 360ms; }

@keyframes nielss-in { from { opacity: 0; transform: translateY(0.6rem); } }
@keyframes nielss-dot { to { opacity: 0.25; transform: translateY(-0.2rem); } }

@media (max-width: 600px) {
	.nielss__message { max-width: 100%; }
	.nielss__avatar { flex-basis: var(--space-l, 2.25rem); width: var(--space-l, 2.25rem); height: var(--space-l, 2.25rem); }
	.nielss__choices { display: grid; grid-template-columns: 1fr; }
	.nielss__choice { width: 100%; text-align: center; }
	.nielss__choice-label { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
	.nielss *, .nielss *::before, .nielss *::after {
		scroll-behavior: auto !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}

.nielss__message--preview-target .nielss__bubble { outline: 2px solid #64748b; outline-offset: 5px; }
