/* Vancity AI Assistant — chat widget.
   Every interactive element is styled with !important because the site's
   Elementor kit applies global button/input styling (orange pills, large
   padding) that would otherwise bleed into the widget. */
:root {
	--vai-orange: #E87A1E;
	--vai-orange-dark: #D06A0E;
	--vai-orange-light: #FFF3E8;
	--vai-dark: #1A1A1A;
	--vai-charcoal: #333333;
	--vai-grey: #888888;
	--vai-border: #E8E8E8;
}

#vai-root, #vai-root * {
	box-sizing: border-box !important;
	font-family: 'DM Sans', -apple-system, sans-serif !important;
}
#vai-root svg { flex: none !important; display: block !important; }

/* Neutralize theme/kit chrome on all widget controls */
#vai-root button {
	margin: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	outline: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto;
	line-height: 1.3 !important;
}

/* ── Launcher bubble ── */
#vai-launcher {
	position: fixed !important; right: 22px !important; bottom: 22px !important; z-index: 99998 !important;
	width: 60px !important; height: 60px !important; padding: 0 !important;
	border-radius: 50% !important;
	background: var(--vai-orange) !important; color: #fff !important;
	border: none !important; cursor: pointer !important;
	box-shadow: 0 8px 24px rgba(232, 122, 30, 0.45) !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	transition: transform .2s, box-shadow .2s, background .2s !important;
}
#vai-launcher:hover { transform: translateY(-2px) scale(1.05) !important; background: var(--vai-orange-dark) !important; }
#vai-launcher svg {
	width: 28px !important; height: 28px !important;
	fill: none !important; stroke: #fff !important; stroke-width: 2 !important;
}
#vai-launcher .vai-badge {
	position: absolute !important; top: 2px !important; right: 2px !important;
	width: 13px !important; height: 13px !important;
	background: #2ecc71 !important; border: 2px solid #fff !important; border-radius: 50% !important;
	display: block !important; padding: 0 !important;
}
@keyframes vai-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	#vai-launcher { animation: vai-pop .35s ease-out; }
}

/* ── Panel ── */
#vai-panel {
	position: fixed !important; right: 22px !important; bottom: 96px !important; z-index: 99999 !important;
	width: 384px !important; max-width: calc(100vw - 32px) !important;
	height: 600px !important; max-height: calc(100vh - 130px) !important;
	background: #fff !important; border-radius: 18px !important; overflow: hidden !important;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.10) !important;
	display: none; flex-direction: column !important;
	border: 1px solid var(--vai-border) !important;
	text-align: left !important;
}
#vai-panel.vai-open { display: flex !important; }
@media (prefers-reduced-motion: no-preference) {
	#vai-panel.vai-open { animation: vai-pop .22s ease-out; transform-origin: bottom right; }
}
@media (max-width: 520px) {
	#vai-panel { right: 8px !important; left: 8px !important; width: auto !important; bottom: 86px !important; height: 76vh !important; }
}

/* ── Header ── */
.vai-header {
	background: linear-gradient(135deg, var(--vai-dark) 0%, var(--vai-charcoal) 100%) !important;
	color: #fff !important; padding: 14px 16px !important;
	display: flex !important; align-items: center !important; gap: 12px !important;
	flex: none !important;
}
.vai-header img {
	width: 42px !important; height: 42px !important; border-radius: 50% !important;
	object-fit: cover !important; border: 2px solid var(--vai-orange) !important;
	max-width: none !important; margin: 0 !important;
}
.vai-header-info { flex: 1 !important; min-width: 0 !important; }
.vai-header-name {
	font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important;
	font-size: 15px !important; letter-spacing: .2px !important; color: #fff !important;
}
.vai-header-sub {
	font-size: 11.5px !important; color: #cfcfcf !important; margin-top: 2px !important;
	display: flex !important; align-items: center !important; gap: 6px !important;
}
.vai-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #2ecc71 !important; flex: none !important; }
#vai-panel .vai-close {
	background: transparent !important; border: none !important;
	color: #c9c9c9 !important; cursor: pointer !important;
	font-size: 18px !important; line-height: 1 !important;
	width: 32px !important; height: 32px !important; padding: 0 !important;
	border-radius: 8px !important; flex: none !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
}
#vai-panel .vai-close:hover { color: #fff !important; background: rgba(255,255,255,0.12) !important; }

/* ── Messages ── */
.vai-body {
	flex: 1 !important; overflow-y: auto !important; padding: 16px 14px !important;
	background: #FAFAF8 !important;
	scrollbar-width: thin; scrollbar-color: #d9d9d9 transparent;
}
.vai-body::-webkit-scrollbar { width: 6px; }
.vai-body::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }
.vai-body::-webkit-scrollbar-track { background: transparent; }

.vai-msg { display: flex !important; margin: 0 0 10px !important; }
.vai-msg-inner {
	max-width: 82% !important; padding: 10px 14px !important; border-radius: 14px !important;
	font-size: 13.5px !important; line-height: 1.55 !important; color: var(--vai-charcoal) !important;
	white-space: pre-wrap !important; word-wrap: break-word !important;
}
.vai-msg.vai-bot .vai-msg-inner { background: #fff !important; border: 1px solid var(--vai-border) !important; border-bottom-left-radius: 4px !important; }
.vai-msg.vai-user { justify-content: flex-end !important; }
.vai-msg.vai-user .vai-msg-inner { background: var(--vai-orange) !important; color: #fff !important; border-bottom-right-radius: 4px !important; }
.vai-msg-inner a { color: var(--vai-orange-dark) !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 2px; }
.vai-msg.vai-user .vai-msg-inner a { color: #fff !important; }

/* Typing indicator */
.vai-typing {
	display: inline-flex !important; gap: 4px !important; padding: 12px 14px !important;
	background: #fff !important; border: 1px solid var(--vai-border) !important;
	border-radius: 14px !important; border-bottom-left-radius: 4px !important;
}
.vai-typing span { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #c9c9c9 !important; animation: vai-blink 1.2s infinite; }
.vai-typing span:nth-child(2) { animation-delay: .18s; }
.vai-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes vai-blink { 0%, 70%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

/* Source + area chips */
.vai-chips { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: -4px 0 12px 2px !important; }
#vai-panel .vai-chip {
	font-size: 11px !important; font-weight: 600 !important; color: var(--vai-charcoal) !important;
	background: var(--vai-orange-light) !important; border: 1px solid #F4CBA4 !important;
	padding: 4px 10px !important; border-radius: 999px !important; text-decoration: none !important;
	transition: background .15s !important; line-height: 1.5 !important;
}
#vai-panel .vai-chip:hover { background: #FFE7D0 !important; color: var(--vai-orange-dark) !important; }

/* Quick questions — small white pills, NOT the theme's orange buttons */
.vai-quick { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 4px 0 12px !important; }
#vai-panel .vai-quick button {
	font-size: 12px !important; font-weight: 600 !important; color: var(--vai-charcoal) !important;
	background: #fff !important; border: 1.5px solid var(--vai-border) !important;
	border-radius: 999px !important; padding: 7px 13px !important;
	cursor: pointer !important; transition: border-color .15s, color .15s !important;
	width: auto !important; display: inline-block !important;
}
#vai-panel .vai-quick button:hover {
	border-color: var(--vai-orange) !important; color: var(--vai-orange-dark) !important;
	background: #fff !important; transform: none !important;
}

/* Lead form card */
.vai-lead {
	background: #fff !important; border: 1px solid var(--vai-border) !important; border-radius: 14px !important;
	padding: 14px !important; margin: 2px 0 12px !important; max-width: 92% !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
	position: relative !important;
}
.vai-lead h4 { margin: 0 0 8px !important; font-family: 'Montserrat', sans-serif !important; font-size: 13px !important; color: var(--vai-dark) !important; }
#vai-panel .vai-lead input, #vai-panel .vai-lead textarea {
	width: 100% !important; margin: 0 0 8px !important; padding: 9px 11px !important;
	font-size: 13px !important; color: var(--vai-charcoal) !important; background: #fff !important;
	border: 1.5px solid var(--vai-border) !important; border-radius: 9px !important;
	outline: none !important; box-shadow: none !important; min-height: 0 !important;
}
#vai-panel .vai-lead input:focus, #vai-panel .vai-lead textarea:focus {
	border-color: var(--vai-orange) !important; box-shadow: 0 0 0 3px rgba(232,122,30,.14) !important;
}
#vai-panel .vai-lead button {
	width: 100% !important; background: var(--vai-orange) !important; color: #fff !important;
	border: none !important; padding: 10px !important; border-radius: 999px !important;
	font-weight: 700 !important; font-size: 13px !important; letter-spacing: .4px !important;
	cursor: pointer !important; text-transform: uppercase !important;
	font-family: 'Montserrat', sans-serif !important;
}
#vai-panel .vai-lead button:hover { background: var(--vai-orange-dark) !important; transform: none !important; }
.vai-lead .vai-hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; }

/* ── Composer ── */
.vai-composer {
	display: flex !important; gap: 8px !important; padding: 12px !important;
	border-top: 1px solid var(--vai-border) !important; background: #fff !important;
	flex: none !important;
}
#vai-panel .vai-composer textarea {
	flex: 1 !important; resize: none !important; overflow-y: auto !important;
	border: 1.5px solid var(--vai-border) !important; border-radius: 12px !important;
	padding: 10px 12px !important; font-size: 13.5px !important; line-height: 1.4 !important;
	max-height: 92px !important; min-height: 0 !important; outline: none !important;
	background: #fff !important; color: var(--vai-charcoal) !important; box-shadow: none !important;
	margin: 0 !important;
	scrollbar-width: none;
}
#vai-panel .vai-composer textarea::-webkit-scrollbar { display: none; }
#vai-panel .vai-composer textarea:focus { border-color: var(--vai-orange) !important; box-shadow: 0 0 0 3px rgba(232,122,30,.14) !important; }
#vai-panel .vai-send {
	width: 42px !important; height: 42px !important; padding: 0 !important; flex: none !important;
	align-self: flex-end !important;
	background: var(--vai-orange) !important; color: #fff !important;
	border: none !important; border-radius: 50% !important;
	cursor: pointer !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	transition: background .15s, transform .15s !important;
}
#vai-panel .vai-send:hover { background: var(--vai-orange-dark) !important; transform: scale(1.06) !important; }
#vai-panel .vai-send:disabled { background: #ddd !important; cursor: default !important; transform: none !important; }
#vai-panel .vai-send svg {
	width: 18px !important; height: 18px !important;
	fill: none !important; stroke: #fff !important; stroke-width: 2 !important;
}
.vai-foot {
	text-align: center !important; font-size: 10px !important; color: #a8a8a8 !important;
	padding: 0 10px 8px !important; background: #fff !important; flex: none !important;
}
.vai-foot a { color: var(--vai-orange-dark) !important; text-decoration: none !important; font-weight: 600 !important; }