/* Intelligent Finn — IBSi website chatbot. Everything is scoped under #ibsi-finn
   so the theme's Bootstrap / customStyles rules can't leak in (and ours can't leak out). */

#ibsi-finn {
	--finn-ink: #231F20;
	--finn-muted: #4A4B53;
	--finn-blue: #005895;
	--finn-blue-dark: #003E6B;
	--finn-sky: #00A2E1;
	--finn-teal: #00AAA9;
	--finn-row: #EAF4FA;
	--finn-row-hover: #D7ECF8;
	--finn-grad: linear-gradient(135deg, #005895, #00A2E1);
	--finn-orb: radial-gradient(circle at 30% 25%, #7FD8F5, #00A2E1 45%, #005895);
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 99990;
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	color: var(--finn-ink);
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
}
#ibsi-finn *, #ibsi-finn *::before, #ibsi-finn *::after { box-sizing: border-box; }
#ibsi-finn button {
	font: inherit; margin: 0; text-transform: none; letter-spacing: normal;
	-webkit-appearance: none; appearance: none; outline-offset: 2px;
}
#ibsi-finn button:focus-visible, #ibsi-finn a:focus-visible, #ibsi-finn input:focus-visible {
	outline: 2px solid var(--finn-sky);
}
#ibsi-finn a { color: var(--finn-blue); }
#ibsi-finn a:hover { color: var(--finn-blue-dark); }
#ibsi-finn svg { display: block; }
#ibsi-finn [hidden] { display: none !important; }

/* ---------- animations ---------- */
@keyframes finnBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes finnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes finnIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes finnDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -14px); } }
#ibsi-finn .finn-eyes { transform-origin: 12px 10px; animation: finnBlink 4s infinite; }
#ibsi-finn .finn-float { animation: finnFloat 4s ease-in-out infinite; }
#ibsi-finn .finn-in { animation: finnIn .35s ease-out both; }
#ibsi-finn .finn-blob { animation: finnDrift 12s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
	#ibsi-finn *, #ibsi-finn *::before, #ibsi-finn *::after { animation: none !important; transition: none !important; }
}

/* ---------- orb (avatar) ---------- */
#ibsi-finn .finn-orb {
	border-radius: 50%; background: var(--finn-orb); display: flex; align-items: center;
	justify-content: center; flex: none; box-shadow: 0 6px 16px rgba(0, 88, 149, .35);
}

/* ---------- closed state: teaser + launcher ---------- */
#ibsi-finn .finn-launcher { display: flex; align-items: flex-end; gap: 12px; }
#ibsi-finn .finn-teaser {
	max-width: 270px; background: #FFFFFF; border-radius: 22px 22px 6px 22px; padding: 14px 18px;
	font-size: 15px; font-weight: 500; line-height: 1.45; box-shadow: 0 16px 40px rgba(0, 88, 149, .18);
	cursor: pointer;
}
#ibsi-finn .finn-open { border: none; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
#ibsi-finn .finn-open .finn-orb { width: 64px; height: 64px; }

/* ---------- panel ---------- */
#ibsi-finn .finn-panel {
	position: relative; width: 412px; height: 748px; max-height: calc(100vh - 56px);
	background: linear-gradient(180deg, #E8F5FC 0%, #F7FBFE 38%, #FFFFFF 100%);
	border-radius: 34px; box-shadow: 0 34px 80px rgba(0, 88, 149, .28);
	display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
}
#ibsi-finn .finn-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#ibsi-finn .finn-blob { position: absolute; border-radius: 50%; filter: blur(50px); }
#ibsi-finn .finn-blob-1 { width: 260px; height: 260px; background: var(--finn-sky); opacity: .16; top: -80px; right: -60px; }
#ibsi-finn .finn-blob-2 { width: 220px; height: 220px; background: var(--finn-teal); opacity: .14; top: 220px; left: -90px; animation-delay: -6s; }

#ibsi-finn .finn-head { padding: 16px 14px 8px 16px; display: flex; align-items: center; gap: 12px; }
#ibsi-finn .finn-head .finn-orb { width: 44px; height: 44px; }
#ibsi-finn .finn-icon-btn {
	width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 88, 149, .08); border: none;
	cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; padding: 0;
}
#ibsi-finn .finn-title { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
#ibsi-finn .finn-name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--finn-ink); line-height: 1.3; }
#ibsi-finn .finn-status { font-size: 12px; color: var(--finn-muted); display: flex; align-items: center; gap: 6px; }
#ibsi-finn .finn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--finn-teal); box-shadow: 0 0 0 3px rgba(0, 170, 169, .2); flex: none; }

/* ---------- message log ---------- */
#ibsi-finn .finn-log {
	flex: 1; min-height: 0; overflow-y: auto; padding: 10px 16px 16px;
	display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain;
}
#ibsi-finn .finn-bot { display: flex; gap: 10px; align-items: flex-end; }
#ibsi-finn .finn-bot .finn-orb { width: 28px; height: 28px; box-shadow: none; }
#ibsi-finn .finn-bot-text {
	max-width: 82%; background: #FFFFFF; border-radius: 24px 24px 24px 8px; padding: 12px 16px;
	font-size: 15px; font-weight: 500; line-height: 1.5; box-shadow: 0 6px 20px rgba(0, 88, 149, .08);
	overflow-wrap: anywhere;
}
#ibsi-finn .finn-user { display: flex; justify-content: flex-end; }
#ibsi-finn .finn-user-text {
	max-width: 80%; background: var(--finn-grad); color: #FFFFFF; border-radius: 24px 24px 8px 24px;
	padding: 11px 16px; font-size: 14px; font-weight: 500; line-height: 1.45;
	box-shadow: 0 8px 20px rgba(0, 88, 149, .22); overflow-wrap: anywhere;
}
#ibsi-finn .finn-indent { padding-left: 38px; }

/* links */
#ibsi-finn .finn-links { display: flex; flex-direction: column; gap: 8px; }
#ibsi-finn a.finn-link {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none;
	font-weight: 700; font-size: 14px; border-radius: 999px; padding: 12px 18px; min-height: 46px; line-height: 1.3;
	transition: transform .15s ease, filter .15s ease;
}
#ibsi-finn a.finn-link:hover { transform: translateY(-2px); filter: brightness(1.08); }
#ibsi-finn a.finn-link-solid { background: var(--finn-grad); color: #FFFFFF; box-shadow: 0 8px 20px rgba(0, 88, 149, .22); }
#ibsi-finn a.finn-link-outline { background: #FFFFFF; color: var(--finn-blue); box-shadow: 0 6px 18px rgba(0, 88, 149, .1); }

/* consent card */
#ibsi-finn .finn-consent {
	margin-left: 38px; background: #FFFFFF; border-radius: 24px; padding: 16px;
	box-shadow: 0 6px 20px rgba(0, 88, 149, .08); display: flex; flex-direction: column; gap: 12px;
}
#ibsi-finn .finn-consent label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; margin: 0; font-weight: 400; }
#ibsi-finn .finn-consent input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--finn-blue); }
#ibsi-finn .finn-submit {
	font-size: 15px; font-weight: 700; background: var(--finn-grad); color: #FFFFFF; border: none;
	border-radius: 999px; min-height: 48px; cursor: pointer; transition: transform .15s ease, filter .15s ease;
}
#ibsi-finn .finn-submit:hover { transform: translateY(-2px); filter: brightness(1.08); }
#ibsi-finn .finn-consent-done { margin-left: 38px; font-size: 13px; color: var(--finn-muted); }

/* option pills */
#ibsi-finn .finn-opts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-left: 38px; }
#ibsi-finn .finn-pill {
	width: 100%; display: flex; align-items: center; text-align: left; border: none; border-radius: 999px;
	cursor: pointer; font-weight: 600; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
#ibsi-finn .finn-pill:hover { transform: translateY(-2px); background-color: var(--finn-row-hover) !important; box-shadow: 0 6px 14px rgba(0, 88, 149, .15); }
#ibsi-finn .finn-pill-row { padding: 10px 18px; min-height: 44px; background: var(--finn-row); color: var(--finn-blue-dark); font-size: 14px; line-height: 1.35; }
#ibsi-finn .finn-pill-chip { padding: 10px 18px; min-height: 42px; background: #FFFFFF; color: var(--finn-blue); font-size: 13px; line-height: 1.3; box-shadow: 0 4px 14px rgba(0, 88, 149, .12); }

/* ---------- footer ---------- */
#ibsi-finn .finn-foot { padding: 6px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
#ibsi-finn .finn-quick { display: flex; gap: 8px; justify-content: center; }
#ibsi-finn .finn-quick .finn-pill {
	width: auto; font-size: 13px; background: rgba(0, 88, 149, .08); color: var(--finn-blue);
	padding: 0 14px; min-height: 34px;
}
#ibsi-finn .finn-inputbar {
	display: flex; gap: 6px; align-items: center; background: #FFFFFF; border-radius: 999px;
	padding: 6px 6px 6px 18px; box-shadow: 0 10px 30px rgba(0, 88, 149, .14);
}
#ibsi-finn .finn-input {
	flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 0; margin: 0; border: none; outline: none;
	min-height: 44px; height: 44px; background: transparent; color: var(--finn-ink); box-shadow: none;
}
#ibsi-finn .finn-input:focus, #ibsi-finn .finn-input:focus-visible { outline: none; box-shadow: none; border: none; }
#ibsi-finn .finn-inputbar:focus-within { box-shadow: 0 0 0 2px var(--finn-sky), 0 10px 30px rgba(0, 88, 149, .14); }
#ibsi-finn .finn-send {
	width: 44px; height: 44px; border-radius: 50%; background: var(--finn-grad); border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center; flex: none; padding: 0;
	transition: transform .15s ease, filter .15s ease;
}
#ibsi-finn .finn-send:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---------- small screens ---------- */
@media (max-width: 600px) {
	#ibsi-finn { right: 16px; bottom: 16px; }
	#ibsi-finn .finn-teaser { display: none; }
	#ibsi-finn.is-open { left: 8px; right: 8px; bottom: 8px; }
	#ibsi-finn .finn-panel { width: 100%; height: calc(100vh - 16px); height: calc(100dvh - 16px); max-height: none; border-radius: 24px; }
	#ibsi-finn .finn-input { font-size: 16px; } /* stops iOS zooming into the field */
}