.ndn-chatbot {
	--ndn: #17233b;
	--ndn-accent: #d99b2b;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999999;
	font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ndn-chatbot * { box-sizing: border-box; }
.ndn-chatbot [hidden] { display: none !important; }
.ndn-chatbot .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.ndn-chatbot__bubble {
	width: 58px;
	height: 58px;
	border: 0;
	border-radius: 50%;
	background: var(--ndn);
	color: #fff;
	font-size: 25px;
	box-shadow: 0 8px 28px #0004;
	cursor: pointer;
}

.ndn-chatbot__teaser {
	position: absolute;
	right: 72px;
	bottom: 7px;
	width: max-content;
	max-width: min(300px, calc(100vw - 115px));
	padding: 11px 14px;
	border: 1px solid #d8dbe1;
	border-radius: 12px;
	background: #fff;
	color: #17233b;
	font: inherit;
	line-height: 1.35;
	text-align: left;
	box-shadow: 0 7px 24px #0003;
	cursor: pointer;
	animation: ndn-chatbot-teaser-in .25s ease-out;
}

.ndn-chatbot__teaser[hidden] { display: none; }
.ndn-chatbot__teaser::after {
	content: "";
	position: absolute;
	right: -8px;
	bottom: 16px;
	width: 14px;
	height: 14px;
	border-top: 1px solid #d8dbe1;
	border-right: 1px solid #d8dbe1;
	background: #fff;
	transform: rotate(45deg);
}

@keyframes ndn-chatbot-teaser-in {
	from { opacity: 0; transform: translateX(8px); }
	to { opacity: 1; transform: translateX(0); }
}

.ndn-chatbot__panel {
	position: absolute;
	right: 0;
	bottom: 72px;
	display: flex;
	flex-direction: column;
	width: min(540px, calc(100vw - 28px));
	height: min(590px, calc(100vh - 110px));
	background: #fff;
	border: 1px solid #d8dbe1;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 12px 45px #0005;
}

.ndn-chatbot__panel[hidden] { display: none; }
.ndn-chatbot__panel header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	padding: 12px 16px;
	background: var(--ndn);
	color: #fff;
}

.ndn-chatbot__identity strong { display: block; font-size: 17px; }
.ndn-chatbot__panel header small { display: block; margin-top: 2px; opacity: .9; }
.ndn-chatbot__online-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 5px;
	border-radius: 50%;
	background: #35d06f;
}

.ndn-chatbot__header-actions { display: flex; align-items: center; gap: 4px; }
.ndn-chatbot__close,
.ndn-chatbot__restart {
	width: 38px;
	height: 38px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.ndn-chatbot__restart { font-size: 25px; }
.ndn-chatbot__messages {
	flex: 1;
	min-height: 0;
	padding: 16px;
	overflow: auto;
	background: #fff;
}

.ndn-chatbot__message {
	max-width: 82%;
	margin: 0 0 11px;
	padding: 10px 12px;
	border-radius: 11px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ndn-chatbot__message a { color: #075a9c; text-decoration: underline; font-weight: 600; }
.ndn-chatbot__message.is-bot { background: #f2f0ed; border: 1px solid #ebe8e4; }
.ndn-chatbot__message.is-user { margin-left: auto; background: var(--ndn); color: #fff; }
.ndn-chatbot__message.is-thinking {
	display: flex;
	align-items: center;
	gap: 5px;
	width: 58px;
	min-height: 39px;
}

.ndn-chatbot__thinking-dot {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #7a808a;
	animation: ndn-chatbot-thinking 1.2s infinite ease-in-out;
}

.ndn-chatbot__thinking-dot:nth-child(3) { animation-delay: .15s; }
.ndn-chatbot__thinking-dot:nth-child(4) { animation-delay: .3s; }

@keyframes ndn-chatbot-thinking {
	0%, 60%, 100% { opacity: .35; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-4px); }
}
.ndn-chatbot__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 9px 12px 3px;
	background: #fff;
}

.ndn-chatbot__suggestions[hidden] { display: none; }
.ndn-chatbot__suggestions button {
	padding: 6px 9px;
	border: 1px solid var(--ndn);
	border-radius: 9px;
	background: #fff;
	color: #17233b;
	font-size: 12px;
	line-height: 1.25;
	cursor: pointer;
}

.ndn-chatbot__suggestions button:hover,
.ndn-chatbot__suggestions button:focus { background: #f0f3f8; }
.ndn-chatbot__form {
	display: flex;
	gap: 8px;
	padding: 9px 12px;
	border-top: 1px solid #e4e5e8;
}

.ndn-chatbot__form input {
	min-width: 0;
	flex: 1;
	padding: 11px 12px;
	border: 1px solid #c8ccd2;
	border-radius: 10px;
}

.ndn-chatbot__form button {
	width: 45px;
	border: 0;
	border-radius: 10px;
	background: var(--ndn-accent);
	color: #111;
	cursor: pointer;
}

.ndn-chatbot__note {
	min-height: 27px;
	margin: 0;
	padding: 0 12px 8px;
	color: #60656f;
	font-size: 11px;
	line-height: 15px;
	text-align: center;
}

.ndn-chatbot__contact-open {
	align-self: center;
	margin: 0 12px 10px;
	padding: 6px 14px;
	border: 1px solid var(--ndn);
	border-radius: 9px;
	background: #fff;
	color: var(--ndn);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.ndn-chatbot__contact-suggestion {
	display: block;
	margin-top: 10px;
	padding: 7px 10px;
	border: 1px solid var(--ndn);
	border-radius: 8px;
	background: #fff;
	color: var(--ndn);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.ndn-chatbot__contact {
	flex: 1;
	min-height: 0;
	padding: 14px 16px 16px;
	overflow: auto;
	background: #fff;
}

.ndn-chatbot__contact-heading {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
	color: var(--ndn);
	font-size: 16px;
}

.ndn-chatbot__contact-back {
	width: 34px;
	height: 34px;
	border: 1px solid #d8dbe1;
	border-radius: 50%;
	background: #fff;
	color: var(--ndn);
	font-size: 20px;
	cursor: pointer;
}

.ndn-chatbot__contact-form {
	display: grid;
	gap: 6px;
}

.ndn-chatbot__contact-form > label:not(.ndn-chatbot__consent) {
	margin-top: 4px;
	color: #303641;
	font-size: 12px;
	font-weight: 600;
}

.ndn-chatbot__contact-form input:not([type="checkbox"]),
.ndn-chatbot__contact-form textarea {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #c8ccd2;
	border-radius: 9px;
	background: #fff;
	color: #1d2327;
	font: inherit;
}

.ndn-chatbot__contact-form textarea { min-height: 100px; resize: vertical; }
.ndn-chatbot__contact-form input:focus,
.ndn-chatbot__contact-form textarea:focus {
	border-color: #2271b1;
	outline: 2px solid #2271b133;
}

.ndn-chatbot__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 8px;
	color: #4d535c;
	font-size: 11px;
	line-height: 1.35;
}

.ndn-chatbot__consent input { flex: 0 0 auto; margin-top: 2px; }
.ndn-chatbot__consent a { color: #075a9c; text-decoration: underline; }
.ndn-chatbot__honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.ndn-chatbot__contact-status {
	min-height: 19px;
	margin: 4px 0 0;
	font-size: 12px;
}

.ndn-chatbot__contact-status.is-success { color: #087b23; }
.ndn-chatbot__contact-status.is-error { color: #b32d2e; }
.ndn-chatbot__contact-submit {
	padding: 10px 14px;
	border: 0;
	border-radius: 9px;
	background: var(--ndn-accent);
	color: #111;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ndn-chatbot__contact-submit:disabled { opacity: .65; cursor: wait; }

@media (max-width: 600px) {
	.ndn-chatbot { right: 14px; bottom: 14px; }
	.ndn-chatbot__panel { position: fixed; inset: 12px; width: auto; height: auto; }
	.ndn-chatbot__message { max-width: 90%; }
	.ndn-chatbot__contact { padding: 12px; }
	.ndn-chatbot__contact-form textarea { min-height: 84px; }
}

@media (max-width: 380px) {
	.ndn-chatbot__suggestions { max-height: 92px; overflow: auto; }
	.ndn-chatbot__panel header { min-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
	.ndn-chatbot__thinking-dot,
	.ndn-chatbot__teaser { animation: none; }
	.ndn-chatbot__thinking-dot { opacity: .75; }
}