/* bituch-site · Keren's bubble (KerenBubble), the only part of the chat on the page before it is opened.
   From the canvas (Chat.dc.html / Chat-Mobile.dc.html): bottom-left, a pill with the line, the "קרן · דמות AI"
   tag and the 56px bust; on phones the bust and "דמות AI" only. It sits above the accessibility button
   (bituch-site, 52px at bottom-left 16px) and rises with it over the cookie banner (--bituch-consent-h). */

.bkw {
	--bkw-ink: var(--wp--preset--color--ink, #221D37);
	--bkw-ink-soft: var(--wp--preset--color--ink-soft, #524E69);
	--bkw-canvas: var(--wp--preset--color--canvas, #FBFAF6);
	--bkw-surface: var(--wp--preset--color--surface, #FFFEFB);
	--bkw-rule: var(--wp--preset--color--rule, #D7D4D7);
	--bkw-line: var(--wp--preset--color--line, #8A8496);
	--bkw-brand: var(--wp--preset--color--brand, #624BBC);
	--bkw-brand-deep: var(--wp--preset--color--brand-deep, #432C8B);
	--bkw-soft: var(--wp--preset--color--soft, #F7F4FC);
	--bkw-marker: var(--wp--preset--color--marker, #FFE228);
	--bkw-face: #F3EEE9;
	--bkw-font: var(--wp--preset--font-family--plex, "IBM Plex Sans Hebrew", "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", Arial, sans-serif);
	--bkw-fs: var(--bituch-a11y-fs, 1);
	--bkw-lift: calc(80px + var(--bituch-consent-h, 0px));

	position: fixed;
	z-index: 2147482400; /* under the accessibility toolbar (2147483000), over the cookie banner (2147482000) */
	left: 24px;
	bottom: var(--bkw-lift);
	direction: rtl;
	font-family: var(--bkw-font);
	font-weight: 400;
	line-height: 1.55;
	color: var(--bkw-ink);
	text-align: start;
}

.bkw[hidden],
.bkw [hidden] {
	display: none !important;
}

.bkw *,
.bkw *::before,
.bkw *::after {
	box-sizing: border-box;
}

.bkw-bubble {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 6px 18px 6px 6px;
	border: 1px solid var(--bkw-rule);
	border-radius: 999px;
	background: var(--bkw-surface);
	color: var(--bkw-ink);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.bkw-bubble:hover {
	border-color: var(--bkw-line);
}

.bkw-bubble:focus-visible {
	outline: 3px solid var(--bkw-brand);
	outline-offset: 3px;
}

.bkw-bubble[aria-busy="true"] {
	cursor: progress;
}

.bkw-bubble__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.bkw-bubble__title {
	font-size: calc(15px * var(--bkw-fs));
	font-weight: 700;
	line-height: 1.3;
}

.bkw-pill {
	display: inline-block;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--bkw-ink);
	color: var(--bkw-canvas);
	font-size: calc(12px * var(--bkw-fs));
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.bkw-bubble__face {
	position: relative;
	display: block;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--bkw-face);
}

.bkw-bubble__face img {
	display: block;
	width: 100%;
	height: 100%;
}

/* The open window takes the bubble's place. */
.bkw--open .bkw-bubble {
	display: none;
}

/* Folded: the picture over the "דמות AI" tag (the phone layout; on wide screens after the first scroll). */
.bkw--compact .bkw-bubble {
	flex-direction: column-reverse;
	gap: 2px;
	width: 64px;
	padding: 0;
	border: 0;
	background: transparent;
}

.bkw--compact .bkw-bubble__title,
.bkw--compact .bkw-bubble__name {
	display: none;
}

.bkw--compact .bkw-bubble__face {
	border: 1.5px solid var(--bkw-ink);
}

@media (max-width: 600px) {
	.bkw {
		left: 16px;
	}

	.bkw-bubble {
		flex-direction: column-reverse;
		gap: 2px;
		width: 64px;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.bkw-bubble__title,
	.bkw-bubble__name {
		display: none;
	}

	.bkw-bubble__face {
		border: 1.5px solid var(--bkw-ink);
	}

	/* Out of the way: the keyboard is up for a field on the page, or the questionnaire is on screen. */
	.bkw--away:not(.bkw--open),
	.bkw--q:not(.bkw--open) {
		display: none;
	}
}

@media print {
	.bkw {
		display: none !important;
	}
}