#bisi-widget-root {
	--bisi-header-bg: #AF101F;
	--bisi-header-text: #FFFFFF;
	--bisi-launcher-bg: #AF101F;
	--bisi-launcher-icon: #FFFFFF;
	--bisi-window-bg: #FFFFFF;
	--bisi-messages-bg: #F5F7FA;
	--bisi-bot-bubble-bg: #FFFFFF;
	--bisi-bot-bubble-text: #0E121B;
	--bisi-user-bubble-bg: #4D4CC8;
	--bisi-user-bubble-text: #FFFFFF;
	--bisi-input-bg: #F5F7FA;
	--bisi-input-text: #0E121B;
	--bisi-contact-btn-bg: #FFFFFF;
	--bisi-contact-btn-text: #AF101F;
	--bisi-border: #E5E5E5;
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999999;
	font-family: var(--bisi-font-family, "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* Reset native control chrome first (iOS/Android browsers paint their own
   default appearance over custom buttons and text inputs unless this is
   disabled — this is what caused the invisible header icons, and the
   heavy black focus outline on the text field). Everything below layers
   its own look on top with selectors specific enough to win. */
#bisi-widget-root button,
#bisi-widget-root input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: none;
	border: none;
	margin: 0;
	font: inherit;
	color: inherit;
	line-height: normal;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.bisi-bubble {
	width: 60px;
	height: 60px;
	border-radius: var(--bisi-bubble-radius, 18px);
	background: var(--bisi-launcher-bg);
	color: var(--bisi-launcher-icon);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,0.28), 0 0 0 0 rgba(0,0,0,0.2);
	transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
	overflow: hidden;
	animation: bisi-bubble-pulse 2.6s ease-in-out infinite;
}
.bisi-bubble:hover { transform: scale(1.08); animation-play-state: paused; }
.bisi-bubble:active { transform: scale(0.96); }
.bisi-bubble img { width: 28px; height: 28px; object-fit: contain; }
.bisi-bubble svg { display: block; }

@keyframes bisi-bubble-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.28), 0 0 0 0 rgba(0,0,0,0.18); }
	50% { box-shadow: 0 4px 14px rgba(0,0,0,0.28), 0 0 0 8px rgba(0,0,0,0); }
}

.bisi-window {
	position: absolute;
	bottom: 76px;
	right: 10px;
	width: 340px;
	max-width: calc(100vw - 32px);
	height: 460px;
	max-height: 70vh;
	background: var(--bisi-window-bg);
	border-radius: 16px;
	box-shadow: 0 14px 44px rgba(16,24,40,0.22), 0 2px 8px rgba(16,24,40,0.08);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
	animation: bisi-window-in 0.22s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes bisi-window-in {
	from { opacity: 0; transform: scale(0.9) translateY(10px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

.bisi-header {
	background: var(--bisi-header-bg);
	color: var(--bisi-header-text);
	padding: 12px 16px;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 15px;
	gap: 10px;
}
.bisi-header-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.bisi-header-brand img {
	width: 24px;
	height: 24px;
	border-radius: 5px;
	object-fit: contain;
	background: #fff;
	flex-shrink: 0;
}
.bisi-header-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#bisi-widget-root .bisi-close,
#bisi-widget-root .bisi-reset {
	background: rgba(255,255,255,0.22);
	border: 1.5px solid rgba(255,255,255,0.55);
	color: var(--bisi-header-text);
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.bisi-close svg,
.bisi-reset svg {
	width: 16px;
	height: 16px;
	display: block;
	overflow: visible;
}
#bisi-widget-root .bisi-close:hover { background: rgba(255,255,255,0.4); transform: rotate(90deg); }
#bisi-widget-root .bisi-reset:hover { background: rgba(255,255,255,0.4); transform: rotate(-45deg); }

.bisi-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.bisi-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	background: var(--bisi-messages-bg);
	scrollbar-width: thin;
	scrollbar-color: #cbd1db transparent;
}
.bisi-messages::-webkit-scrollbar { width: 6px; }
.bisi-messages::-webkit-scrollbar-thumb { background: #cbd1db; border-radius: 3px; }
.bisi-messages::-webkit-scrollbar-track { background: transparent; }

.bisi-msg { margin-bottom: 10px; display: flex; animation: bisi-msg-in 0.18s ease; }
.bisi-msg-bot { justify-content: flex-start; }
.bisi-msg-user { justify-content: flex-end; }

@keyframes bisi-msg-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.bisi-msg-content {
	display: flex;
	flex-direction: column;
	max-width: 82%;
}
.bisi-msg-bot .bisi-msg-content { align-items: flex-start; }
.bisi-msg-user .bisi-msg-content { align-items: flex-end; }

.bisi-bubble-text {
	max-width: 100%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.4;
	white-space: pre-wrap;
	word-break: break-word;
	box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.bisi-msg-bot .bisi-bubble-text {
	background: var(--bisi-bot-bubble-bg);
	border: 1px solid var(--bisi-border);
	color: var(--bisi-bot-bubble-text);
	border-bottom-left-radius: 4px;
}
.bisi-msg-user .bisi-bubble-text {
	background: var(--bisi-user-bubble-bg);
	color: var(--bisi-user-bubble-text);
	border-bottom-right-radius: 4px;
}

.bisi-msg-time {
	font-size: 10.5px;
	color: #9aa1ab;
	margin-top: 3px;
	padding: 0 4px;
}
.bisi-msg-user .bisi-msg-time { text-align: right; }

.bisi-source { margin-top: 6px; font-size: 12px; }
.bisi-source a { color: var(--bisi-user-bubble-bg); text-decoration: none; }
.bisi-source a:hover { text-decoration: underline; }
.bisi-bubble-text a { color: var(--bisi-user-bubble-bg); text-decoration: underline; word-break: break-word; font-size: inherit !important; font-family: inherit !important; }
.bisi-msg-user .bisi-bubble-text a { color: inherit; }

/* Contact chips (Contact form / Call / Email) — clean, full-pill style. */
.bisi-contact-options {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bisi-contact-options a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	background: var(--bisi-contact-btn-bg);
	color: var(--bisi-contact-btn-text);
	padding: 8px 16px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	border: 1.5px solid var(--bisi-border);
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.bisi-contact-options a:hover {
	border-color: var(--bisi-contact-btn-text);
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.bisi-typing .bisi-bubble-text { display: flex; gap: 4px; align-items: center; }
.bisi-typing span {
	width: 6px; height: 6px; border-radius: 50%;
	background: #9ca3af;
	display: inline-block;
	animation: bisi-blink 1.2s infinite ease-in-out;
}
.bisi-typing span:nth-child(2) { animation-delay: 0.2s; }
.bisi-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bisi-blink {
	0%, 80%, 100% { opacity: 0.2; }
	40% { opacity: 1; }
}

/* Contact buttons: at most two, side by side, compact. */
#bisi-widget-root .bisi-contact-options {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	margin-top: 8px;
}
#bisi-widget-root .bisi-contact-options a {
	flex: 0 1 auto;
	min-width: 0;
	justify-content: center;
	padding: 7px 10px;
	font-size: 12.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#bisi-widget-root .bisi-contact-options a span { overflow: hidden; text-overflow: ellipsis; }
#bisi-widget-root .bisi-contact-options.bisi-contact-single a { flex: 0 1 auto; padding: 7px 16px; }

/* Send button, sitting inside the input's pill at the right edge. */
#bisi-widget-root .bisi-input-row { position: relative; align-items: center; }
#bisi-widget-root .bisi-input-row input { padding-right: 48px; }
#bisi-widget-root .bisi-send {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bisi-user-bubble-bg);
	color: var(--bisi-user-bubble-text);
	cursor: pointer;
	transition: filter 0.15s ease, opacity 0.15s ease;
}
#bisi-widget-root .bisi-send:hover { filter: brightness(1.1); }
#bisi-widget-root .bisi-send svg { width: 17px; height: 17px; display: block; }

/* Seamless input: no boxy border, just a soft filled pill that blends
   into the window, with a subtle ring only on focus — no harsh outline. */
.bisi-input-row {
	display: flex;
	border-top: 1px solid var(--bisi-border);
	padding: 10px;
	gap: 8px;
	background: var(--bisi-window-bg);
}
#bisi-widget-root .bisi-input-row input {
	flex: 1;
	width: 100%;
	background: var(--bisi-input-bg);
	border-radius: 999px;
	padding: 11px 18px;
	font-size: 14px;
	color: var(--bisi-input-text);
	font-family: inherit;
	transition: box-shadow 0.15s ease;
	box-shadow: 0 0 0 1px transparent;
}
#bisi-widget-root .bisi-input-row input::placeholder {
	color: #9aa1ab;
	opacity: 1;
}
#bisi-widget-root .bisi-input-row input:focus {
	box-shadow: 0 0 0 2px var(--bisi-user-bubble-bg);
}

@media (max-width: 480px) {
	#bisi-widget-root { bottom: 14px; right: 14px; }
	.bisi-window {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		border-radius: 0;
	}
}
/* Prevents background scroll behind the fullscreen chat on small screens. */
body.bisi-open-lock { overflow: hidden; }

/* Visually hidden but still present in the DOM for form semantics
   (guarantees Enter-to-submit works consistently across all browsers)
   without showing a visible send button, per request. */
.bisi-visually-hidden {
	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;
}