/* Vavoza AI floating bubble (v2.1). Everything is scoped under #vzai-bubble; the chat inside uses chat.css
 * (#vzai-app). --vzai-top is the measured header bottom (bubble.js); --vzai-z sits just below the header. */
#vzai-bubble {
	--vzai-top: 8px;
	--vzai-z: 9990;
	--vzai-bubble-blue: var(--vz-blue, #0970ff);
	--vzai-bubble-line: var(--vz-line, #dce6f2);
	--vzai-bubble-gradient: var(--vz-gradient, linear-gradient(180deg, #4632da 0%, #0970ff 100%));
	position: fixed; right: 20px; bottom: 20px; z-index: var(--vzai-z);
	font-family: var(--vz-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
#vzai-bubble *, #vzai-bubble *::before, #vzai-bubble *::after { box-sizing: border-box; }
#vzai-bubble button { font-family: inherit; line-height: 1.2; text-transform: none; letter-spacing: normal; min-height: 0; }

#vzai-bubble .vzai-bubble-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; padding: 0;
	border: 0; border-radius: 999px; background: var(--vzai-bubble-gradient); color: #fff; cursor: pointer;
	box-shadow: 0 10px 28px rgba(14, 42, 92, .25); transition: transform .2s ease;
}
#vzai-bubble .vzai-bubble-btn:hover { transform: translateY(-2px); }
#vzai-bubble .vzai-bubble-btn:focus-visible { outline: 3px solid var(--vzai-bubble-blue); outline-offset: 3px; }

#vzai-bubble .vzai-bubble-panel {
	position: fixed; right: 20px; bottom: 90px;
	width: 400px; max-width: calc(100vw - 40px);
	height: 600px; max-height: calc(100vh - var(--vzai-top) - 110px);
	display: flex; flex-direction: column; min-width: 0;
	background: var(--vz-surface, #fff); border: 1px solid var(--vzai-bubble-line); border-radius: 18px;
	box-shadow: 0 24px 60px rgba(14, 42, 92, .22); overflow: hidden;
}
#vzai-bubble .vzai-bubble-panel[hidden] { display: none; }
/* 2.3.0: no separate bubble bar. Close sits in the chat's own top bar (styled by chat.css). 2.10.0: no Expand (Vlad). */
#vzai-bubble .vzai-bubble-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* The chat inside the panel fills it (chat.css rules are #vzai-app ...; these win on specificity). */
#vzai-bubble #vzai-app { max-width: none; width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; height: 100%; display: flex; flex-direction: column; min-height: 0; }
#vzai-bubble #vzai-app { --vzai-gutter: 14px; }
#vzai-bubble #vzai-app .vzai-head { padding: 0 6px 0 14px; flex-wrap: nowrap; }
#vzai-bubble #vzai-app .vzai-log { height: auto; flex: 1 1 auto; min-height: 0; padding: 14px; }
#vzai-bubble #vzai-app .vzai-memory { flex: 1 1 auto; min-height: 0; max-height: none; }
#vzai-bubble #vzai-app .vzai-form { padding: 8px 14px 4px; flex-shrink: 0; }
#vzai-bubble #vzai-app .vzai-msg { font-size: 13.5px; line-height: 1.55; }
/* 2.5.0: smaller text in the bubble (Vlad). The full-page tab keeps its sizes. */
#vzai-bubble #vzai-app .vzai-starter { font-size: 13px; padding: 7px 12px; }
#vzai-bubble #vzai-app .vzai-cites { font-size: 12px; }
/* 2.5.3 (Vlad): phones get 14px answers in the bubble; desktop keeps 13.5px. */
@media (max-width: 839px) { #vzai-bubble #vzai-app .vzai-msg { font-size: 14px; } #vzai-bubble #vzai-app .vzai-starter { font-size: 13.5px; } }
/* 2.11.0 (Vlad): answers slightly larger on phones (14px -> 15px in the bubble, like 15px -> 16px in the tab). */
@media (max-width: 600px) { #vzai-bubble #vzai-app .vzai-msg { font-size: 15px; } }
@media (min-width: 840px) { #vzai-bubble #vzai-app .vzai-form .vzai-row textarea, #vzai-bubble #vzai-app .vzai-form .vzai-row textarea:focus { font-size: 14px; } }
#vzai-bubble #vzai-app .vzai-me { max-width: 85%; }
#vzai-bubble #vzai-app .vzai-disclaimer { padding: 6px 14px 8px; font-size: 12px; flex-shrink: 0; }

@media (max-width: 839px) {
	#vzai-bubble { right: 14px; bottom: 14px; }
	#vzai-bubble .vzai-bubble-panel {
		left: 0; right: 0; top: var(--vzai-top); bottom: 0; width: 100%; max-width: 100%;
		height: auto; max-height: none; border-radius: 0; border-left: 0; border-right: 0;
	}
	#vzai-bubble.vzai-bubble-open .vzai-bubble-btn { display: none; }
	html.vzai-bubble-on, html.vzai-bubble-on body { overflow: hidden; }
}
/* ReadyLaunch mobile nav dropdown (#mepr-account-nav.open, z-index 1000): the menu must open over the bubble. */
html:has(#mepr-account-nav.open) #vzai-bubble { z-index: 999 !important; }

/* 2.4.0: launcher animation (transform/opacity only, no layout shift). The star twinkles every few seconds (item 18:
 * the submark itself never moves), a soft ring breathes, the button lifts on hover and presses in on click; all of it
 * pauses while the panel is open. The panel fades and scales in from the button's corner (@starting-style; browsers
 * without it simply open instantly) and fades out on close (display transitions as allow-discrete). */
#vzai-bubble .vzai-bubble-btn { position: relative; isolation: isolate; transition: transform .2s ease, box-shadow .2s ease; will-change: transform; }
#vzai-bubble .vzai-bubble-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 0 0 6px rgba(9, 112, 255, .22); opacity: 0; pointer-events: none; animation: vzai-ring 4.8s ease-in-out infinite; }
#vzai-bubble .vzai-bubble-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px rgba(14, 42, 92, .28); }
#vzai-bubble .vzai-bubble-btn:active { transform: translateY(0) scale(.96); transition-duration: .08s; }
#vzai-bubble .vzai-bubble-btn svg.vzai-launch-icon { display: block; width: 100%; height: 100%; }
#vzai-bubble .vzai-bubble-btn svg .vzai-star { transform-box: fill-box; transform-origin: center; animation: vzai-twinkle 4.8s ease-in-out infinite; }
@keyframes vzai-twinkle { 0%, 64%, 100% { transform: scale(1); opacity: 1; } 72% { transform: scale(1.35); opacity: .6; } 80% { transform: scale(.85); opacity: 1; } 88% { transform: scale(1.1); opacity: .85; } }
@keyframes vzai-ring { 0%, 55%, 100% { opacity: 0; transform: scale(1); } 70% { opacity: .9; transform: scale(1.06); } 85% { opacity: 0; transform: scale(1.14); } }
#vzai-bubble.vzai-bubble-open .vzai-bubble-btn::after, #vzai-bubble.vzai-bubble-open .vzai-bubble-btn svg .vzai-star { animation-play-state: paused; }
#vzai-bubble .vzai-bubble-panel { transform-origin: bottom right; opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease, display .18s allow-discrete, overlay .18s allow-discrete; }
#vzai-bubble .vzai-bubble-panel[hidden] { opacity: 0; transform: translateY(8px) scale(.98); }
@starting-style { #vzai-bubble .vzai-bubble-panel { opacity: 0; transform: translateY(8px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
	#vzai-bubble .vzai-bubble-btn, #vzai-bubble .vzai-bubble-panel { transition: none; }
	#vzai-bubble .vzai-bubble-btn::after, #vzai-bubble .vzai-bubble-btn svg .vzai-star { animation: none; }
	#vzai-bubble .vzai-bubble-btn:hover, #vzai-bubble .vzai-bubble-btn:active { transform: none; }
}

/* 2.10.0 (Vlad): answers in the bubble use the phone layout on every screen: the small mark sits at the start of the
 * first line and the text wraps under it at full width (no avatar gutter). Same for members and visitors. */
#vzai-bubble #vzai-app .vzai-bot { display: flow-root; padding-left: 0; max-width: 100%; }
#vzai-bubble #vzai-app .vzai-bot::before { position: relative; left: auto; top: 0; float: left; width: 20px; height: 20px; margin: 1px 8px -8px 0; background-size: 100%, auto; } /* 2.11.0: the icon fills the circle (was the old 11px mark) */
#vzai-bubble #vzai-app .vzai-bot > p:first-child, #vzai-bubble #vzai-app .vzai-bot > ul:first-child, #vzai-bubble #vzai-app .vzai-bot > ol:first-child { margin-top: 0; }
#vzai-bubble #vzai-app .vzai-starters { padding-left: 0; }
/* The rule above outranks chat.css's :empty and thinking rules; keep the empty answer placeholder hidden and the thinking row as it was. */
#vzai-bubble #vzai-app .vzai-msg.vzai-bot:empty { display: none; }
#vzai-bubble #vzai-app .vzai-msg.vzai-thinking { display: inline-flex; }

/* 2.11.16 (Vlad): roomier bubble. 40px wider so the bars, BETA and the icons fit, and 20px side padding (was 14px)
 * for the header, messages, composer and disclaimer. The header's right padding is smaller because the icons
 * have their own inset. */
@media (min-width: 840px) { #vzai-bubble .vzai-bubble-panel { width: 440px; } } /* desktop only: phones keep the full-screen panel */
#vzai-bubble #vzai-app { --vzai-gutter: 20px; }
#vzai-bubble #vzai-app .vzai-head { padding: 0 12px 0 20px; }
#vzai-bubble #vzai-app .vzai-log { padding: 16px 20px; }
#vzai-bubble #vzai-app .vzai-form { padding: 8px 20px 4px; }
#vzai-bubble #vzai-app .vzai-disclaimer { padding: 6px 20px 8px; }
/* 2.11.17 (Vlad): at every bubble width, the 20px message icon sits centred under the 24px header icon (2px in). */
#vzai-bubble #vzai-app .vzai-bot::before { margin-left: 2px; }