.cn-widget,
.cn-widget * { box-sizing: border-box; }

.cn-widget {
	--cn-accent: #2457d6;
	--cn-avatar-size: 32px;
	--cn-avatar-color: #fff;
	--cn-panel-width: 440px;
	--cn-panel-height: 560px;
	--cn-font-family: inherit;
	--cn-font-size: 16px;
	--cn-close-icon-size: 24px;
	--cn-avatar-animation-duration: 2400ms;
	--cn-surface: #fff;
	--cn-text: #172033;
	position: fixed;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	z-index: 99999;
	font-family: var(--cn-font-family);
	font-size: var(--cn-font-size);
	font-weight: 400;
	line-height: 1.45;
	color: var(--cn-text);
	text-align: left;
}

.cn-widget--right { right: max(1.25rem, env(safe-area-inset-right)); }
.cn-widget--left { left: max(1.25rem, env(safe-area-inset-left)); }
.cn-widget--embedded { position: relative; inset: auto; max-width: 100%; }
.cn-widget button,
.cn-widget input,
.cn-widget a { font: inherit; letter-spacing: normal; text-transform: none; }
.cn-widget button { margin: 0; }
.cn-widget [hidden] { display: none !important; }
.cn-widget__toggle,
.cn-widget__form button,
.cn-widget__action { border: 0; border-radius: 999px; cursor: pointer; }
.cn-widget__toggle { display: flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .6rem 1rem .6rem .65rem; background: var(--cn-accent); color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.cn-widget__avatar { display: grid; flex: 0 0 var(--cn-avatar-size); place-items: center; width: var(--cn-avatar-size); height: var(--cn-avatar-size); color: var(--cn-avatar-color); transform-origin: center; }
.cn-widget__avatar-position--right { order: 2; }
.cn-widget__avatar svg { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; fill: currentColor; }
.cn-widget--launcher-avatar_only .cn-widget__toggle { justify-content: center; min-width: max(44px, var(--cn-avatar-size)); min-height: max(44px, var(--cn-avatar-size)); padding: 0; border-radius: .5rem; background: transparent; box-shadow: none; }
.cn-widget--launcher-avatar_only .cn-widget__toggle-label { display: none; }
.cn-widget--launcher-avatar_only .cn-widget__avatar { filter: drop-shadow(0 2px 4px rgba(18,31,57,.35)); transition: filter .2s ease; }
.cn-widget--launcher-avatar_only .cn-widget__toggle:hover .cn-widget__avatar { filter: drop-shadow(0 3px 7px rgba(18,31,57,.55)); }
.cn-widget__panel { position: absolute; bottom: calc(100% + .75rem); display: flex; flex-direction: column; width: min(var(--cn-panel-width), calc(100vw - 2rem)); height: min(var(--cn-panel-height), calc(100vh - 7rem)); height: min(var(--cn-panel-height), calc(100dvh - 7rem)); overflow: hidden; border: 1px solid #d8deea; border-radius: 1rem; background: var(--cn-surface); box-shadow: 0 16px 44px rgba(18,31,57,.24); }
.cn-widget--right .cn-widget__panel { right: 0; }
.cn-widget--left .cn-widget__panel { left: 0; }
.cn-widget--embedded .cn-widget__panel { position: relative; inset: auto; margin-top: .75rem; }
.cn-widget__header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem; background: var(--cn-accent); color: #fff; }
.cn-widget__header strong { color: inherit; font-size: 1rem; }
.cn-widget .cn-widget__close { display: grid; place-items: center; width: 44px; height: 44px; margin: -.4rem -.4rem -.4rem 0; padding: 0; border: 0; background: transparent; color: inherit; font-size: var(--cn-close-icon-size); line-height: 1; cursor: pointer; }
.cn-widget__suggestions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .45rem; max-height: 9.5rem; overflow-y: auto; padding: .75rem 1rem; border-bottom: 1px solid #e1e5ed; background: #fbfcfa; }
.cn-widget__suggestion { margin: 0; padding: .42rem .7rem; border: 1px solid #ced8f3; border-color: color-mix(in srgb, var(--cn-accent) 24%, #fff); border-radius: 999px; background: #eef3ff; background: color-mix(in srgb, var(--cn-accent) 9%, #fff); color: var(--cn-accent); cursor: pointer; font-size: .86em; line-height: 1.25; text-align: left; }
.cn-widget__suggestion:hover { background: #e2eaff; background: color-mix(in srgb, var(--cn-accent) 16%, #fff); }
.cn-widget__messages { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 1rem; background: #f6f8fc; overscroll-behavior: contain; }
.cn-widget__message { width: fit-content; max-width: 85%; margin: 0 0 .65rem; padding: .65rem .8rem; border-radius: .8rem; overflow-wrap: anywhere; color: var(--cn-text); }
.cn-widget__message p:first-child { margin-top: 0; }
.cn-widget__message p:last-child { margin-bottom: 0; }
.cn-widget__message--assistant { background: #fff; border: 1px solid #e1e5ed; }
.cn-widget__message--user { margin-left: auto; background: var(--cn-accent); color: #fff; }
.cn-widget__message--typing { min-width: 4.25rem; cursor: pointer; }
.cn-widget__typing { display: inline-flex; align-items: center; gap: .28rem; min-height: 1.1rem; }
.cn-widget__typing i { width: .42rem; height: .42rem; border-radius: 50%; background: #7a8499; animation: cn-typing 1.1s ease-in-out infinite; }
.cn-widget__typing i:nth-child(2) { animation-delay: .16s; }
.cn-widget__typing i:nth-child(3) { animation-delay: .32s; }
.cn-widget__actions { display: flex; flex-wrap: wrap; gap: .45rem; margin: -.2rem 0 .8rem; }
.cn-widget__action { display: inline-block; padding: .5rem .7rem; border: 1px solid var(--cn-accent); background: #fff; color: var(--cn-accent); text-decoration: none; }
.cn-widget__form { display: flex; flex: 0 0 auto; gap: .5rem; margin: 0; padding: .75rem; border-top: 1px solid #e1e5ed; background: #fff; }
.cn-widget__form input { min-width: 0; flex: 1; height: auto; margin: 0; padding: .65rem .7rem; border: 1px solid #aeb8cb; border-radius: .5rem; background: #fff; color: var(--cn-text); }
.cn-widget__form button { padding: .65rem .9rem; background: var(--cn-accent); color: #fff; white-space: nowrap; }
.cn-widget .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; }
.cn-widget button:focus-visible,
.cn-widget input:focus-visible,
.cn-widget a:focus-visible { outline: 3px solid #f1b82d; outline-offset: 2px; }

.cn-widget--fade .cn-widget__panel:not([hidden]) { animation: cn-fade .25s ease-out; }
.cn-widget--slide .cn-widget__panel:not([hidden]) { animation: cn-slide .3s ease-out; }
.cn-widget--float .cn-widget__toggle { animation: cn-float 3s ease-in-out infinite; }
.cn-widget__avatar--pulse { animation: cn-pulse var(--cn-avatar-animation-duration) ease-in-out infinite; }
.cn-widget__avatar--bounce { animation: cn-bounce var(--cn-avatar-animation-duration) ease-in-out infinite; }
.cn-widget__avatar--float { animation: cn-float var(--cn-avatar-animation-duration) ease-in-out infinite; }
.cn-widget__avatar--tilt { animation: cn-tilt var(--cn-avatar-animation-duration) ease-in-out infinite; }
.cn-widget__avatar--breathe { animation: cn-breathe var(--cn-avatar-animation-duration) ease-in-out infinite; }
.cn-widget__avatar--random-pulse { animation: cn-pulse var(--cn-avatar-animation-duration) ease-in-out 1; }
.cn-widget__avatar--random-bounce { animation: cn-bounce var(--cn-avatar-animation-duration) ease-in-out 1; }
.cn-widget__avatar--random-float { animation: cn-float var(--cn-avatar-animation-duration) ease-in-out 1; }
.cn-widget__avatar--random-tilt { animation: cn-tilt var(--cn-avatar-animation-duration) ease-in-out 1; }
.cn-widget__avatar--random-breathe { animation: cn-breathe var(--cn-avatar-animation-duration) ease-in-out 1; }
@keyframes cn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cn-slide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cn-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes cn-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes cn-bounce { 0%,75%,100% { transform: translateY(0); } 82% { transform: translateY(-6px); } 90% { transform: translateY(0); } 95% { transform: translateY(-3px); } }
@keyframes cn-tilt { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-4deg); } 65% { transform: rotate(4deg); } }
@keyframes cn-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes cn-typing { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

@media (max-width: 480px) {
	.cn-widget { right: .75rem; left: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); }
	.cn-widget--left .cn-widget__toggle { margin-right: auto; }
	.cn-widget--right .cn-widget__toggle { margin-left: auto; }
	.cn-widget:not(.cn-widget--embedded) .cn-widget__panel { position: fixed; top: max(.75rem, env(safe-area-inset-top)); right: .75rem !important; bottom: calc(max(.75rem, env(safe-area-inset-bottom)) + max(4rem, calc(var(--cn-avatar-size) + 1rem))); left: .75rem !important; width: auto; height: auto; max-height: var(--cn-panel-height); }
	.cn-widget__suggestions { max-height: 7.5rem; }
	.cn-widget__toggle-label { display: none; }
	.cn-widget__toggle { padding: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
	.cn-widget *, .cn-widget *::before, .cn-widget *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}