/* Balien AI: black, white and light grey only, like the BFE stencil logo. */

#balien-root,
#balien-root * {
	box-sizing: border-box;
}

#balien-root {
	position: fixed;
	right: 20px;
	bottom: 16px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 18px;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: #0a0a0a;
	pointer-events: none;
}

#balien-root > * {
	pointer-events: auto;
}

/* ---------- Speech balloon ---------- */

#balien-root .bl-panel {
	display: none;
	position: relative;
	width: min(350px, calc(100vw - 40px));
	background: #fff;
	border: 2.5px solid #0a0a0a;
	border-radius: 18px;
	box-shadow: 5px 5px 0 #0a0a0a;
	padding: 16px 14px 12px;
	transform-origin: bottom right;
}

#balien-root.bl-open .bl-panel {
	display: block;
	animation: bl-pop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

/* tail pointing down at the head */
#balien-root .bl-panel::after {
	content: "";
	position: absolute;
	right: 38px;
	bottom: -11px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-right: 2.5px solid #0a0a0a;
	border-bottom: 2.5px solid #0a0a0a;
	transform: rotate(45deg);
}

#balien-root .bl-close {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	color: #777;
	cursor: pointer;
}

#balien-root .bl-close:hover {
	color: #0a0a0a;
	background: #eee;
}

#balien-root .bl-thread {
	display: flex;
	flex-direction: column;
	gap: 9px;
	max-height: min(44vh, 310px);
	overflow-y: auto;
	padding-right: 6px;
	scrollbar-width: thin;
}

#balien-root .bl-msg {
	margin: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

#balien-root .bl-bot {
	font-size: 15px;
}

#balien-root .bl-bot.bl-first {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

#balien-root .bl-bot a {
	color: #0a0a0a;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#balien-root .bl-user {
	align-self: flex-end;
	max-width: 85%;
	background: #0a0a0a;
	color: #fff;
	font-size: 14px;
	padding: 6px 12px;
	border-radius: 14px 14px 3px 14px;
}

#balien-root .bl-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

#balien-root .bl-links a {
	display: inline-block;
	padding: 7px 13px;
	background: #0a0a0a;
	color: #fff;
	border: 2px solid #0a0a0a;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

#balien-root .bl-links a:hover,
#balien-root .bl-links a:focus-visible {
	background: #fff;
	color: #0a0a0a;
}

/* thinking dots */
#balien-root .bl-dots span {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 4px;
	border-radius: 50%;
	background: #0a0a0a;
	animation: bl-dot 1s infinite ease-in-out;
}
#balien-root .bl-dots span:nth-child(2) { animation-delay: 0.15s; }
#balien-root .bl-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ---------- Light grey prompt options ---------- */

#balien-root .bl-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 6px;
	margin-top: 10px;
}

#balien-root .bl-chips:empty {
	display: none;
}

#balien-root .bl-chips button {
	margin: 0;
	padding: 7px 13px;
	background: #ececec;
	color: #5b5b5b;
	border: 1px solid #d5d5d5;
	border-radius: 999px;
	font: inherit;
	font-size: 13.5px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	animation: bl-reveal 0.5s steps(22, end) both;
	animation-delay: calc(var(--i, 0) * 0.18s);
}

#balien-root .bl-chips button:hover,
#balien-root .bl-chips button:focus-visible {
	background: #dedede;
	color: #0a0a0a;
}

/* ---------- Free text ---------- */

#balien-root .bl-form {
	display: flex;
	gap: 6px;
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1.5px solid #e4e4e4;
}

#balien-root .bl-form[hidden] {
	display: none;
}

#balien-root .bl-form input {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 8px 12px;
	background: #fff;
	color: #0a0a0a;
	border: 1.5px solid #cfcfcf;
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	box-shadow: none;
}

#balien-root .bl-form input::placeholder {
	color: #9a9a9a;
}

#balien-root .bl-form input:focus {
	outline: none;
	border-color: #0a0a0a;
}

#balien-root .bl-form button {
	flex: none;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: #0a0a0a;
	color: #fff;
	border: 0;
	border-radius: 50%;
	font-size: 16px;
	cursor: pointer;
}

#balien-root .bl-form button:disabled {
	background: #b9b9b9;
	cursor: default;
}

/* ---------- Balien (the head) ---------- */

#balien-root .bl-head {
	position: relative;
	display: block;
	width: 92px;
	height: 106px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	animation: bl-enter 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

#balien-root .bl-head svg {
	display: block;
	width: 92px;
	height: 92px;
	overflow: visible;
	animation: bl-float 4.2s ease-in-out infinite;
}

#balien-root .bl-head:focus-visible {
	outline: 3px solid #0a0a0a;
	outline-offset: 3px;
}

#balien-root .bl-shadow {
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 56px;
	height: 8px;
	margin-left: -28px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.24);
	animation: bl-shadow 4.2s ease-in-out infinite;
}

/* SVG parts */
#balien-root .bl-eye,
#balien-root .bl-eye3,
#balien-root .bl-mouth,
#balien-root .bl-stem {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.08s ease-out;
}

#balien-root .bl-mouth,
#balien-root .bl-stem {
	transform-origin: center top;
}

#balien-root .bl-blink .bl-eye,
#balien-root .bl-blink .bl-eye3 {
	transform: scaleY(0.08);
}

#balien-root .bl-talking .bl-mouth {
	animation: bl-talk 0.32s ease-in-out infinite;
}

#balien-root .bl-talking .bl-stem {
	transform: scaleY(0.3);
}

#balien-root .bl-talking svg {
	animation: bl-float 4.2s ease-in-out infinite, bl-bob 0.32s ease-in-out infinite;
}

/* ---------- Motion ---------- */

@keyframes bl-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

@keyframes bl-shadow {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(0.72); opacity: 0.6; }
}

@keyframes bl-enter {
	from { transform: scale(0.2) translateY(30px); opacity: 0; }
	to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes bl-pop {
	from { transform: scale(0.85); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

@keyframes bl-talk {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(3); }
}

@keyframes bl-bob {
	0%, 100% { scale: 1; }
	50% { scale: 1.025; }
}

@keyframes bl-dot {
	0%, 100% { opacity: 0.25; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes bl-reveal {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
	#balien-root .bl-head,
	#balien-root .bl-head svg,
	#balien-root .bl-shadow,
	#balien-root .bl-chips button,
	#balien-root.bl-open .bl-panel,
	#balien-root .bl-talking .bl-mouth,
	#balien-root .bl-talking svg {
		animation: none;
	}
}

@media (max-width: 480px) {
	#balien-root {
		right: 12px;
		bottom: 10px;
	}
}

/* anonymous-log note under the input */
#balien-root .bl-note {
	margin: 6px 2px 0;
	font-size: 11px;
	line-height: 1.3;
	color: #8a8a8a;
}