/* ==========================================================================
   Realcognita Assistant -- the chat widget's look and motion.

   Loaded after every other stylesheet. The widget's older rules are spread
   over main.css, inner-pages.css, premium-enhancements.css and
   design-system.css, several with !important, so this layer scopes itself to
   the widget's ids (#chatbotPanel, #chatbotLauncher) and wins on specificity
   instead of editing all four.

   Motion uses transform and opacity only, so it stays on the GPU and smooth.
   Everything stops for visitors who ask for reduced motion (end of file).
   ========================================================================== */

#chatbotPanel,
#chatbotLauncher {
	--cb-ink: #0d3833;
	--cb-ink-2: #0f4c45;
	--cb-green: #26d07c;
	--cb-teal: #00a499;
	--cb-user: linear-gradient(135deg, #12806f 0%, #0f5c52 100%);
	--cb-orb: radial-gradient(120% 120% at 30% 20%, #3be08f 0%, #00a499 48%, #0f4c45 100%);
	--cb-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--cb-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
}
#chatbotPanel {
	--cb-glass: rgba(255, 255, 255, 0.84);
	--cb-solid: #ffffff;
	--cb-canvas-top: #f7fbf9;
	--cb-canvas-end: #edf5f1;
	--cb-bubble: #ffffff;
	--cb-text: #10231f;
	--cb-muted: #5b6b67;
	--cb-edge: rgba(13, 56, 51, 0.08);
	--cb-line: rgba(13, 56, 51, 0.1);
	--cb-field: #ffffff;
	--cb-chip: #ffffff;
	--cb-chip-text: #0f5c52;
	--cb-shadow: 0 1px 2px rgba(13, 56, 51, 0.05), 0 10px 26px -16px rgba(13, 56, 51, 0.35);
}
[data-theme="dark"] #chatbotPanel {
	--cb-glass: rgba(14, 19, 18, 0.86);
	--cb-solid: #0f1514;
	--cb-canvas-top: #0e1413;
	--cb-canvas-end: #0b100f;
	--cb-bubble: #17201e;
	--cb-text: #e6efec;
	--cb-muted: #9db0aa;
	--cb-edge: rgba(255, 255, 255, 0.06);
	--cb-line: rgba(255, 255, 255, 0.08);
	--cb-field: #141b1a;
	--cb-chip: #142019;
	--cb-chip-text: #5fe3a1;
	--cb-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -16px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   Launcher: a glowing orb with a light sweep, and a one-time hint beside it
   -------------------------------------------------------------------------- */
#chatbotLauncher {
	width: 60px !important;
	height: 60px !important;
	background: var(--cb-orb) !important;
	box-shadow: 0 14px 30px -8px rgba(0, 164, 153, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
	isolation: isolate;
	transition: opacity 0.45s var(--cb-ease), transform 0.55s var(--cb-spring), visibility 0.45s, box-shadow 0.3s var(--cb-ease) !important;
}
#chatbotLauncher::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
	background-size: 260% 100%;
	animation: cb-sheen 5s ease-in-out infinite;
}
#chatbotLauncher::after { border-color: rgba(38, 208, 124, 0.65) !important; }
#chatbotLauncher.is-visible:hover {
	transform: translateY(-3px) scale(1.06) !important;
	box-shadow: 0 20px 40px -10px rgba(0, 164, 153, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}
#chatbotLauncher.is-visible:active { transform: scale(0.94) !important; }
#chatbotLauncher svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18)); }

#chatbotLauncher .chatbot-teaser {
	position: absolute;
	top: 50%;
	right: calc(100% + 14px);
	padding: 10px 14px;
	border-radius: 16px 16px 4px 16px;
	background: #ffffff;
	color: #10231f;
	font: 600 13px/1.25 inherit;
	font-family: inherit;
	white-space: nowrap;
	box-shadow: 0 14px 34px -10px rgba(13, 56, 51, 0.4), 0 0 0 1px rgba(13, 56, 51, 0.06);
	opacity: 0;
	transform: translate(10px, -50%) scale(0.94);
	transform-origin: right center;
	transition: opacity 0.35s var(--cb-ease), transform 0.5s var(--cb-spring);
	pointer-events: none;
}
#chatbotLauncher .chatbot-teaser b { color: #0f7a68; }
[data-theme="dark"] #chatbotLauncher .chatbot-teaser { background: #17201e; color: #e6efec; }
[data-theme="dark"] #chatbotLauncher .chatbot-teaser b { color: #5fe3a1; }
#chatbotLauncher.is-teasing:not(.is-open) .chatbot-teaser { opacity: 1; transform: translate(0, -50%) scale(1); }

/* --------------------------------------------------------------------------
   Panel: frosted glass that springs open from the launcher
   -------------------------------------------------------------------------- */
#chatbotPanel {
	width: 392px !important;
	height: min(620px, calc(100vh - 8.5rem)) !important;
	max-height: none !important;
	bottom: 6.75rem !important;
	border-radius: 24px !important;
	background: var(--cb-glass) !important;
	-webkit-backdrop-filter: blur(22px) saturate(1.6);
	backdrop-filter: blur(22px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	box-shadow: 0 0 0 1px rgba(13, 56, 51, 0.06), 0 32px 80px -24px rgba(13, 56, 51, 0.5), 0 14px 32px -14px rgba(0, 0, 0, 0.2) !important;
	transform: translateY(20px) scale(0.92) !important;
	transform-origin: calc(100% - 30px) calc(100% + 48px) !important;
	transition: opacity 0.3s var(--cb-ease), transform 0.6s var(--cb-spring), visibility 0.3s, width 0.45s var(--cb-ease), height 0.45s var(--cb-ease) !important;
	will-change: transform, opacity;
}
[data-theme="dark"] #chatbotPanel { border-color: rgba(255, 255, 255, 0.08) !important; }
#chatbotPanel.open { transform: none !important; }
#chatbotPanel.is-maximized {
	width: min(880px, calc(100vw - 2.5rem)) !important;
	height: min(780px, calc(100vh - 4rem)) !important;
	bottom: 2rem !important;
}

/* The inside arrives a beat after the frame, top to bottom. */
#chatbotPanel .chatbot-header,
#chatbotPanel .chatbot-messages,
#chatbotPanel .chatbot-quick-replies,
#chatbotPanel .chatbot-input-row {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.45s var(--cb-ease), transform 0.55s var(--cb-ease);
}
#chatbotPanel.open .chatbot-header { opacity: 1; transform: none; transition-delay: 0.05s; }
#chatbotPanel.open .chatbot-messages { opacity: 1; transform: none; transition-delay: 0.11s; }
#chatbotPanel.open .chatbot-quick-replies { opacity: 1; transform: none; transition-delay: 0.17s; }
#chatbotPanel.open .chatbot-input-row { opacity: 1; transform: none; transition-delay: 0.22s; }
#chatbotPanel.open.is-locked .chatbot-input-row { opacity: 0.5; }

/* --------------------------------------------------------------------------
   Header: deep green with a slow aurora and a glowing AI badge
   -------------------------------------------------------------------------- */
#chatbotPanel .chatbot-header {
	position: relative;
	overflow: hidden;
	gap: 12px !important;
	padding: 16px 16px 16px 18px !important;
	background: linear-gradient(135deg, #0f4c45 0%, #0d3833 55%, #0a2925 100%) !important;
	color: #ffffff !important;
}
#chatbotPanel .chatbot-header::before {
	content: "";
	position: absolute;
	inset: -70% -25%;
	pointer-events: none;
	background:
		radial-gradient(38% 48% at 22% 32%, rgba(38, 208, 124, 0.38), transparent 70%),
		radial-gradient(34% 44% at 78% 72%, rgba(0, 164, 153, 0.4), transparent 70%);
	animation: cb-aurora 11s ease-in-out infinite alternate;
}
#chatbotPanel .chatbot-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(38, 208, 124, 0.7), transparent);
}
#chatbotPanel .chatbot-header > * { position: relative; z-index: 1; }
#chatbotPanel .chatbot-avatar {
	position: relative;
	display: grid !important;
	place-items: center;
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
	box-shadow: 0 0 22px rgba(38, 208, 124, 0.45);
}
#chatbotPanel .chatbot-avatar::before {
	content: "";
	position: absolute;
	inset: -2px;
	padding: 2px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #26d07c, #00a499 35%, transparent 60%, #26d07c);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: cb-spin 5s linear infinite;
}
#chatbotPanel .chatbot-avatar svg { width: 20px !important; height: 20px !important; animation: cb-twinkle 3.2s ease-in-out infinite; }
#chatbotPanel .chatbot-header-text h4 { font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: #ffffff !important; }
#chatbotPanel .chatbot-header-text p { font-size: 12px !important; opacity: 0.86 !important; }
#chatbotPanel .chatbot-status-dot { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: cb-ping 2.2s ease-out infinite !important; }
#chatbotPanel .chatbot-action-btn {
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
	transition: background 0.25s var(--cb-ease), transform 0.35s var(--cb-spring) !important;
}
#chatbotPanel .chatbot-action-btn:hover { background: rgba(255, 255, 255, 0.2) !important; transform: scale(1.08); }

/* --------------------------------------------------------------------------
   Conversation
   -------------------------------------------------------------------------- */
#chatbotPanel .chatbot-messages {
	gap: 12px !important;
	padding: 18px 16px 12px !important;
	background: linear-gradient(180deg, var(--cb-canvas-top) 0%, var(--cb-canvas-end) 100%) !important;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(13, 56, 51, 0.22) transparent;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}
#chatbotPanel .chatbot-msg {
	max-width: 86% !important;
	padding: 11px 14px !important;
	font-size: 0.86rem !important;
	line-height: 1.6 !important;
	border-radius: 18px !important;
}
#chatbotPanel .chatbot-msg.bot {
	align-self: flex-start;
	background: var(--cb-bubble) !important;
	color: var(--cb-text) !important;
	border: 1px solid var(--cb-edge) !important;
	border-bottom-left-radius: 6px !important;
	box-shadow: var(--cb-shadow) !important;
	transform-origin: left bottom;
	animation: cb-in-left 0.55s var(--cb-spring) both !important;
}
#chatbotPanel .chatbot-msg.user {
	align-self: flex-end;
	background: var(--cb-user) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-bottom-right-radius: 6px !important;
	box-shadow: 0 12px 24px -14px rgba(15, 92, 82, 0.85) !important;
	transform-origin: right bottom;
	animation: cb-in-right 0.5s var(--cb-spring) both !important;
}
/* Paragraph spacing comes from the paragraphs; the blank-line <br>s between them would double it. */
#chatbotPanel .chatbot-msg.bot > br { display: none; }
#chatbotPanel .chatbot-msg.bot p { margin: 0 0 8px !important; }
#chatbotPanel .chatbot-msg.bot p:last-child { margin-bottom: 0 !important; }
#chatbotPanel .chatbot-msg.bot a.chatbot-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s var(--cb-ease); }
#chatbotPanel .chatbot-msg.bot a.chatbot-link:hover { background-size: 100% 1px; }

#chatbotPanel .chatbot-typing {
	gap: 5px !important;
	padding: 13px 15px !important;
	background: var(--cb-bubble) !important;
	border: 1px solid var(--cb-edge);
	border-radius: 18px 18px 18px 6px !important;
	box-shadow: var(--cb-shadow);
	animation: cb-in-left 0.45s var(--cb-spring) both;
}
#chatbotPanel .chatbot-typing span {
	width: 7px !important;
	height: 7px !important;
	background: linear-gradient(135deg, #26d07c, #00a499) !important;
	animation: cb-dot 1.1s ease-in-out infinite !important;
}
#chatbotPanel .chatbot-typing span:nth-child(2) { animation-delay: 0.14s !important; }
#chatbotPanel .chatbot-typing span:nth-child(3) { animation-delay: 0.28s !important; }

/* Suggested next questions under a reply (an older rule in main.css hid them). */
#chatbotPanel .chatbot-msg-chips {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px !important;
	max-width: 100% !important;
	margin-top: -2px !important;
	animation: none !important;
}

/* Pills: the quick replies and the suggestions share one look. */
#chatbotPanel .chatbot-quick-btn {
	padding: 8px 14px !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	color: var(--cb-chip-text) !important;
	background: var(--cb-chip) !important;
	border: 1px solid rgba(38, 208, 124, 0.38) !important;
	border-radius: 999px !important;
	box-shadow: 0 2px 10px -6px rgba(13, 56, 51, 0.35) !important;
	transition: transform 0.3s var(--cb-spring), background 0.25s var(--cb-ease), color 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}
#chatbotPanel .chatbot-quick-btn:hover,
#chatbotPanel .chatbot-quick-btn:focus-visible {
	background: var(--cb-user) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 22px -12px rgba(15, 92, 82, 0.9) !important;
}
#chatbotPanel .chatbot-quick-btn:active { transform: scale(0.96) !important; }
#chatbotPanel .chatbot-msg-chips .chatbot-quick-btn { animation: cb-pop 0.5s var(--cb-spring) both; }
#chatbotPanel .chatbot-msg-chips .chatbot-quick-btn:nth-child(2) { animation-delay: 0.07s; }
#chatbotPanel .chatbot-msg-chips .chatbot-quick-btn:nth-child(3) { animation-delay: 0.14s; }
#chatbotPanel .chatbot-msg-chips .chatbot-quick-btn:nth-child(4) { animation-delay: 0.21s; }
/* The starter questions are for an empty chat; once talking, the suggestions under each reply take over. */
#chatbotPanel.has-chatted .chatbot-quick-replies { display: none !important; }
#chatbotPanel .chatbot-quick-replies {
	gap: 8px !important;
	padding: 6px 14px 10px !important;
	background: var(--cb-canvas-end) !important;
}

/* --------------------------------------------------------------------------
   Message box
   -------------------------------------------------------------------------- */
#chatbotPanel .chatbot-input-row {
	gap: 10px !important;
	padding: 12px 14px 14px !important;
	background: var(--cb-solid) !important;
	border-top: 1px solid var(--cb-line) !important;
}
#chatbotPanel .chatbot-input-row input {
	height: 46px;
	padding: 0 18px !important;
	font-size: 0.88rem !important;
	color: var(--cb-text) !important;
	background: var(--cb-field) !important;
	border: 1px solid var(--cb-line) !important;
	border-radius: 999px !important;
	box-shadow: inset 0 1px 2px rgba(13, 56, 51, 0.05) !important;
	outline: none !important; /* the glow below is the focus ring */
	transition: border-color 0.25s var(--cb-ease), box-shadow 0.3s var(--cb-ease) !important;
}
#chatbotPanel .chatbot-input-row input::placeholder { color: var(--cb-muted) !important; }
#chatbotPanel .chatbot-input-row input:focus {
	border-color: rgba(38, 208, 124, 0.75) !important;
	box-shadow: 0 0 0 4px rgba(38, 208, 124, 0.16) !important;
}
#chatbotPanel .chatbot-send-btn {
	width: 46px !important;
	height: 46px !important;
	background: var(--cb-orb) !important;
	box-shadow: 0 10px 20px -10px rgba(0, 164, 153, 0.9) !important;
	transition: transform 0.35s var(--cb-spring), opacity 0.25s var(--cb-ease), box-shadow 0.25s !important;
}
#chatbotPanel .chatbot-input-row:not(.has-text) .chatbot-send-btn { opacity: 0.5; transform: scale(0.9) !important; }
#chatbotPanel .chatbot-input-row.has-text .chatbot-send-btn:hover { transform: scale(1.07) rotate(-10deg) !important; }
#chatbotPanel .chatbot-send-btn svg { width: 18px !important; height: 18px !important; }
#chatbotPanel .chatbot-send-btn.is-sending svg { animation: cb-fly 0.65s var(--cb-ease); }

/* --------------------------------------------------------------------------
   The notice visitors accept before chatting
   -------------------------------------------------------------------------- */
#chatbotPanel .chatbot-consent {
	position: relative;
	overflow: hidden;
	margin: 2px 0 !important;
	padding: 18px 18px 16px !important;
	border-radius: 20px !important;
	background: var(--cb-bubble) !important;
	color: var(--cb-text) !important;
	border: 1px solid var(--cb-edge) !important;
	box-shadow: 0 22px 44px -26px rgba(13, 56, 51, 0.55) !important;
	animation: cb-rise 0.7s var(--cb-spring) both;
	transition: opacity 0.3s var(--cb-ease), transform 0.35s var(--cb-ease);
}
#chatbotPanel .chatbot-consent.is-leaving { opacity: 0; transform: translateY(-10px) scale(0.97); }
#chatbotPanel .chatbot-consent::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, #26d07c, #00a499, #0f4c45, #26d07c);
	background-size: 200% 100%;
	animation: cb-flow 6s linear infinite;
}
#chatbotPanel .chatbot-consent-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
#chatbotPanel .chatbot-consent-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: var(--cb-orb);
	color: #ffffff;
	box-shadow: 0 8px 18px -8px rgba(0, 164, 153, 0.9);
}
#chatbotPanel .chatbot-consent-icon svg { width: 18px; height: 18px; }
#chatbotPanel .chatbot-consent .chatbot-consent-title { margin: 0 !important; font-size: 0.98rem !important; font-weight: 700 !important; letter-spacing: -0.01em; }
#chatbotPanel .chatbot-consent ul { margin: 0 0 14px !important; padding: 0 !important; list-style: none !important; }
#chatbotPanel .chatbot-consent li {
	position: relative;
	margin: 0 0 8px !important;
	padding-left: 24px;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--cb-text);
}
#chatbotPanel .chatbot-consent li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: rgba(38, 208, 124, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a68' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
#chatbotPanel .chatbot-consent-check { font-size: 0.82rem; font-weight: 500; }
#chatbotPanel .chatbot-consent-check input { width: 18px !important; height: 18px !important; margin-top: 1px !important; }
#chatbotPanel .chatbot-consent-btn {
	position: relative;
	overflow: hidden;
	height: 46px;
	border-radius: 999px !important;
	background: var(--cb-user) !important;
	font-size: 0.88rem !important;
	letter-spacing: 0.01em;
	box-shadow: 0 14px 26px -14px rgba(15, 92, 82, 0.9);
	transition: transform 0.35s var(--cb-spring), opacity 0.3s var(--cb-ease), box-shadow 0.3s !important;
}
#chatbotPanel .chatbot-consent-btn:disabled { opacity: 0.4 !important; box-shadow: none; }
#chatbotPanel .chatbot-consent-btn:not(:disabled)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
	transform: translateX(-100%);
	animation: cb-shine 2.8s ease-in-out infinite;
}
#chatbotPanel .chatbot-consent-btn:not(:disabled):hover { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   End chat, the follow-up form and the goodbye card
   -------------------------------------------------------------------------- */
#chatbotPanel .chatbot-end-btn {
	display: none;
	align-self: center;
	height: 30px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font: 600 12px/1 inherit;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.25s var(--cb-ease), transform 0.3s var(--cb-spring);
}
#chatbotPanel.has-chatted .chatbot-end-btn { display: inline-flex; align-items: center; }
#chatbotPanel .chatbot-end-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-1px); }
#chatbotPanel.is-form .chatbot-end-btn { display: none; }
#chatbotPanel.is-form .chatbot-quick-replies { display: none !important; }
#chatbotPanel.open.is-form .chatbot-input-row { opacity: 0.5; pointer-events: none; }

#chatbotPanel .chatbot-lead,
#chatbotPanel .chatbot-bye {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	padding: 18px 18px 16px;
	border-radius: 20px;
	background: var(--cb-bubble);
	color: var(--cb-text);
	border: 1px solid var(--cb-edge);
	box-shadow: 0 22px 44px -26px rgba(13, 56, 51, 0.55);
	animation: cb-rise 0.6s var(--cb-spring) both;
	transition: opacity 0.3s var(--cb-ease), transform 0.35s var(--cb-ease);
}
#chatbotPanel .chatbot-lead::before,
#chatbotPanel .chatbot-bye::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, #26d07c, #00a499, #0f4c45, #26d07c);
	background-size: 200% 100%;
	animation: cb-flow 6s linear infinite;
}
#chatbotPanel .chatbot-lead.is-leaving { opacity: 0; transform: translateY(-10px) scale(0.97); }
#chatbotPanel .chatbot-lead-title,
#chatbotPanel .chatbot-bye-title { margin: 0 0 4px; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; }
#chatbotPanel .chatbot-lead-sub,
#chatbotPanel .chatbot-bye p:not(.chatbot-bye-title) { margin: 0 0 12px; font-size: 0.8rem; line-height: 1.5; color: var(--cb-muted); }
#chatbotPanel .chatbot-lead-field { display: block; margin: 0 0 10px; }
@media (min-width: 481px) {
	#chatbotPanel .chatbot-lead-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
}
#chatbotPanel .chatbot-lead-field span { display: block; margin: 0 0 4px; font-size: 0.74rem; font-weight: 600; color: var(--cb-muted); }
#chatbotPanel .chatbot-lead-field b { color: #0f7a68; }
#chatbotPanel .chatbot-lead-field i { font-style: normal; font-weight: 500; opacity: 0.8; }
#chatbotPanel .chatbot-lead-field input,
#chatbotPanel .chatbot-lead-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--cb-line);
	border-radius: 12px;
	background: var(--cb-field);
	color: var(--cb-text);
	font: 500 16px/1.4 inherit; /* 16px: no zoom on iPhone */
	font-family: inherit;
	outline: none;
	resize: vertical;
	transition: border-color 0.25s var(--cb-ease), box-shadow 0.3s var(--cb-ease);
}
@media (min-width: 481px) {
	#chatbotPanel .chatbot-lead-field input,
	#chatbotPanel .chatbot-lead-field textarea { font-size: 0.86rem; }
}
#chatbotPanel .chatbot-lead-field input:focus,
#chatbotPanel .chatbot-lead-field textarea:focus { border-color: rgba(38, 208, 124, 0.75); box-shadow: 0 0 0 4px rgba(38, 208, 124, 0.16); }
#chatbotPanel .chatbot-lead .chatbot-consent-check { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 8px; font-size: 0.78rem; line-height: 1.45; cursor: pointer; }
#chatbotPanel .chatbot-lead .chatbot-consent-check input { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; accent-color: #0f7a68; }
#chatbotPanel .chatbot-lead a,
#chatbotPanel .chatbot-lead-error a { color: #0f7a68; font-weight: 600; text-decoration: underline; }
[data-theme="dark"] #chatbotPanel .chatbot-lead a { color: #5fe3a1; }
#chatbotPanel .chatbot-lead-error { min-height: 0; margin: 0 0 8px; font-size: 0.78rem; font-weight: 600; color: #c2410c; }
#chatbotPanel .chatbot-lead-error:empty { display: none; }
#chatbotPanel .chatbot-lead-actions { display: flex; flex-direction: column; gap: 6px; }
#chatbotPanel .chatbot-lead .chatbot-consent-btn,
#chatbotPanel .chatbot-bye .chatbot-consent-btn { width: 100%; border: 0; color: #ffffff; font-weight: 700; cursor: pointer; }
#chatbotPanel .chatbot-lead-skip {
	height: 36px;
	border: 0;
	background: none;
	color: var(--cb-muted);
	font: 600 0.8rem/1 inherit;
	font-family: inherit;
	cursor: pointer;
	border-radius: 999px;
	transition: background 0.2s var(--cb-ease), color 0.2s;
}
#chatbotPanel .chatbot-lead-skip:hover { background: rgba(13, 56, 51, 0.06); color: var(--cb-text); }
/* The bot trap: off-screen for people, still filled in by naive bots. */
#chatbotPanel .chatbot-lead-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* --------------------------------------------------------------------------
   Screen sizes. dvh follows the visible height on phones (address bar and
   keyboard), with vh as the fallback for older browsers.
   -------------------------------------------------------------------------- */
#chatbotPanel .chatbot-header-actions { display: flex; gap: 6px; }

/* Large screens */
@media (min-width: 1600px) {
	#chatbotPanel { width: 420px !important; height: min(700px, calc(100vh - 9rem)) !important; }
}

/* iPad and tablets, portrait and landscape */
@media (min-width: 641px) and (max-width: 1180px) {
	#chatbotPanel {
		right: 1.5rem !important;
		width: 420px !important;
		max-width: calc(100vw - 3rem) !important;
		height: min(680px, calc(100vh - 9rem)) !important;
		height: min(680px, calc(100dvh - 9rem)) !important;
		bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* Large phones and small tablets */
@media (min-width: 481px) and (max-width: 640px) {
	#chatbotPanel {
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		max-width: none !important;
		height: min(640px, calc(100vh - 8rem)) !important;
		height: min(640px, calc(100dvh - 8rem)) !important;
		bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* Phones: a sheet that uses the width; maximise is pointless here */
@media (max-width: 480px) {
	#chatbotPanel {
		left: 10px !important;
		right: 10px !important;
		width: auto !important;
		max-width: none !important;
		height: min(640px, calc(100vh - 7.75rem)) !important;
		height: min(640px, calc(100dvh - 7.75rem)) !important;
		bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px)) !important;
		border-radius: 22px !important;
	}
	#chatbotPanel #chatbotMaximize { display: none !important; }
	#chatbotPanel .chatbot-header { padding: 14px 12px 14px 14px !important; }
	#chatbotPanel .chatbot-header-text p { white-space: nowrap; }
	#chatbotPanel .chatbot-lead { padding: 16px 14px 14px; }
	#chatbotPanel .chatbot-msg { max-width: 90% !important; }
	#chatbotPanel .chatbot-consent { padding: 14px 14px 12px !important; }
	#chatbotPanel .chatbot-consent-head { margin-bottom: 8px; }
	#chatbotPanel .chatbot-consent li { margin-bottom: 6px !important; font-size: 0.8rem; line-height: 1.5; }
	#chatbotPanel .chatbot-consent ul { margin-bottom: 10px !important; }
	#chatbotPanel .chatbot-messages { padding: 12px 10px 10px !important; }
	#chatbotPanel .chatbot-input-row input { font-size: 16px !important; } /* 16px stops iPhone zooming in on focus */
	#chatbotLauncher { width: 56px !important; height: 56px !important; }
	#chatbotLauncher .chatbot-teaser { font-size: 12px; }
}

/* Phones turned sideways: little height, so use nearly all of it */
@media (max-height: 520px) and (orientation: landscape) {
	#chatbotPanel {
		top: 0.75rem !important;
		bottom: 0.75rem !important;
		height: auto !important;
		max-height: none !important;
		right: 6.5rem !important; /* clear of the launcher */
		left: auto !important;
		width: min(440px, calc(100vw - 8rem)) !important;
	}
	#chatbotPanel #chatbotMaximize { display: none !important; }
	#chatbotPanel .chatbot-header { padding: 10px 12px !important; }
	#chatbotPanel .chatbot-avatar { width: 34px !important; height: 34px !important; }
	#chatbotPanel .chatbot-consent li { margin-bottom: 4px !important; font-size: 0.8rem; line-height: 1.45; }
	#chatbotPanel .chatbot-consent-btn { height: 40px; }
	#chatbotLauncher .chatbot-teaser { display: none; }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes cb-sheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@keyframes cb-aurora { from { transform: translate3d(-7%, -5%, 0) rotate(0deg); } to { transform: translate3d(7%, 5%, 0) rotate(10deg); } }
@keyframes cb-spin { to { transform: rotate(1turn); } }
@keyframes cb-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(0.86) rotate(12deg); opacity: 0.85; } }
@keyframes cb-ping { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); } 80%, 100% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }
@keyframes cb-in-left { from { opacity: 0; transform: translate3d(-10px, 12px, 0) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes cb-in-right { from { opacity: 0; transform: translate3d(10px, 12px, 0) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes cb-dot { 0%, 60%, 100% { transform: translateY(0) scale(0.85); opacity: 0.45; } 30% { transform: translateY(-5px) scale(1); opacity: 1; } }
@keyframes cb-pop { from { opacity: 0; transform: translateY(8px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes cb-rise { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes cb-flow { to { background-position: -200% 0; } }
@keyframes cb-shine { 0%, 40% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes cb-fly {
	0% { transform: none; opacity: 1; }
	45% { transform: translate(18px, -18px) scale(0.6); opacity: 0; }
	55% { transform: translate(-14px, 14px) scale(0.6); opacity: 0; }
	100% { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#chatbotPanel,
	#chatbotPanel *,
	#chatbotPanel *::before,
	#chatbotPanel *::after,
	#chatbotLauncher,
	#chatbotLauncher *,
	#chatbotLauncher::before,
	#chatbotLauncher::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}