/* -------------------------------------------------------------------
   All custom properties are namespaced (--vfw-*) and scoped to
   .vfw-root so the host theme's variables can never leak in, and
   these can never leak out.
   ------------------------------------------------------------------- */
.vfw-root {
	--vfw-surface: #111f30;
	--vfw-surface-raised: #16283c;
	--vfw-text: #f3f6fa;
	--vfw-text-muted: rgba(243, 246, 250, 0.62);
	--vfw-border: rgba(255, 255, 255, 0.11);
	--vfw-brand: #00d4ff;
	--vfw-brand-deep: #7b2ff7;
	--vfw-call: #22c55e;
	--vfw-call-deep: #16a34a;
	--vfw-error: #ff5470;
	--vfw-radius: 18px;
	--vfw-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.65);

	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 2147483000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: var(--vfw-text);
	-webkit-font-smoothing: antialiased;
}

.vfw-root *,
.vfw-root *::before,
.vfw-root *::after { box-sizing: border-box; }

.vfw-root button {
	font: inherit;
	color: inherit;
	margin: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* ---------- Backdrop (mobile only) ---------- */
.vfw-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(6, 13, 22, 0.6);
	backdrop-filter: blur(2px);
	border: 0;
	padding: 0;
	z-index: -1;
}

/* ---------- Launcher ---------- */
.vfw-launcher {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 10px;
	background: rgba(17, 31, 48, 0.94);
	backdrop-filter: blur(12px);
	border: 1px solid var(--vfw-border);
	border-radius: 999px;
	box-shadow: var(--vfw-shadow);
	transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.18s ease;
}
.vfw-launcher:hover { transform: translateY(-2px); }
.vfw-launcher:focus-visible {
	outline: 2px solid var(--vfw-brand);
	outline-offset: 3px;
}

.vfw-avatar {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	flex-shrink: 0;
	overflow: hidden;
	background: linear-gradient(135deg, var(--vfw-brand), var(--vfw-brand-deep));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.01em;
}
.vfw-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
	border-radius: 50%;
}
.vfw-root.vfw-has-avatar .vfw-avatar img { display: block; }
.vfw-root.vfw-has-avatar .vfw-avatar-monogram { display: none; }

.vfw-launcher-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	padding-right: 4px;
}
.vfw-launcher-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.vfw-launcher-status {
	font-size: 13px;
	color: var(--vfw-text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}
.vfw-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vfw-call);
	flex-shrink: 0;
}

.vfw-launcher-action {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--vfw-call), var(--vfw-call-deep));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
}
.vfw-launcher-action svg { width: 21px; height: 21px; }

/* Gentle attention pulse — one ring, stops after the widget is opened once. */
.vfw-launcher-action::after {
	content: "";
	position: absolute;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 2px solid var(--vfw-call);
	animation: vfw-ring 2.4s ease-out infinite;
	pointer-events: none;
}
.vfw-root.vfw-engaged .vfw-launcher-action::after { display: none; }
@keyframes vfw-ring {
	0%   { transform: scale(1);   opacity: 0.7; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- Panel ---------- */
.vfw-panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	width: 380px;
	max-height: calc(100vh - 120px);
	background: var(--vfw-surface);
	border: 1px solid var(--vfw-border);
	border-radius: var(--vfw-radius);
	box-shadow: var(--vfw-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transform-origin: bottom right;
	animation: vfw-panel-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.vfw-panel[hidden] { display: none; }

@keyframes vfw-panel-in {
	from { opacity: 0; transform: translateY(10px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.vfw-panel-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 16px 18px;
	background: linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(123, 47, 247, 0.14));
	border-bottom: 1px solid var(--vfw-border);
	flex-shrink: 0;
}
.vfw-panel-header .vfw-avatar { width: 40px; height: 40px; font-size: 15px; }
.vfw-panel-identity { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vfw-panel-name { font-weight: 700; font-size: 15px; }
.vfw-panel-status {
	font-size: 12.5px;
	color: var(--vfw-text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.vfw-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vfw-text-muted);
	flex-shrink: 0;
	transition: background 0.18s ease, color 0.18s ease;
}
.vfw-close:hover { background: rgba(255, 255, 255, 0.13); color: var(--vfw-text); }
.vfw-close:focus-visible { outline: 2px solid var(--vfw-brand); outline-offset: 2px; }
.vfw-close svg { width: 15px; height: 15px; }

.vfw-panel-body {
	padding: 20px 18px;
	overflow-y: auto;
	flex: 1;
}

.vfw-intro {
	font-size: 13.5px;
	color: var(--vfw-text-muted);
	margin: 0 0 16px;
}

/* ---------- Steps ---------- */
.vfw-step { display: none; }
.vfw-step.vfw-active { display: block; animation: vfw-fade 0.22s ease; }
@keyframes vfw-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Fields ---------- */
.vfw-field { margin-bottom: 13px; }
.vfw-field label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vfw-text-muted);
	margin-bottom: 6px;
}
.vfw-optional { text-transform: none; font-weight: 400; opacity: 0.72; letter-spacing: 0; }

.vfw-field input,
.vfw-field textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--vfw-border);
	border-radius: 10px;
	padding: 11px 13px;
	font-family: inherit;
	font-size: 15px; /* 15px+ stops iOS Safari zooming on focus */
	line-height: 1.4;
	color: var(--vfw-text);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.vfw-field textarea { resize: vertical; min-height: 66px; }
.vfw-field input::placeholder,
.vfw-field textarea::placeholder { color: rgba(243, 246, 250, 0.34); }
.vfw-field input:focus,
.vfw-field textarea:focus {
	outline: none;
	border-color: var(--vfw-brand);
	box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.18);
}
.vfw-field input.vfw-invalid,
.vfw-field textarea.vfw-invalid { border-color: var(--vfw-error); }

.vfw-hint { display: block; font-size: 11.5px; color: var(--vfw-text-muted); margin-top: 5px; }
.vfw-error { display: block; font-size: 12px; color: var(--vfw-error); margin-top: 5px; }
.vfw-error:empty { display: none; }

/* Honeypot — hidden from people, visible to naive bots. */
.vfw-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------- Buttons ---------- */
.vfw-btn {
	width: 100%;
	border: none;
	border-radius: 11px;
	padding: 13px 18px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--vfw-brand), var(--vfw-brand-deep));
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	transition: transform 0.18s ease, opacity 0.18s ease;
}
.vfw-btn:hover:not(:disabled) { transform: translateY(-1px); }
.vfw-btn:focus-visible { outline: 2px solid var(--vfw-brand); outline-offset: 2px; }
.vfw-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.vfw-btn-call { background: linear-gradient(135deg, var(--vfw-call), var(--vfw-call-deep)); }
.vfw-btn-call:focus-visible { outline-color: var(--vfw-call); }
.vfw-btn-call svg { width: 17px; height: 17px; }

.vfw-btn-quiet {
	width: 100%;
	background: none;
	border: 1px solid var(--vfw-border);
	border-radius: 11px;
	padding: 10px 16px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--vfw-text-muted);
	margin-top: 9px;
	transition: color 0.16s ease, border-color 0.16s ease;
}
.vfw-btn-quiet:hover { color: var(--vfw-text); border-color: rgba(255, 255, 255, 0.24); }
.vfw-btn-quiet:focus-visible { outline: 2px solid var(--vfw-brand); outline-offset: 2px; }

.vfw-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	animation: vfw-spin 0.7s linear infinite;
}
.vfw-btn.vfw-loading .vfw-spinner { display: inline-block; }
@keyframes vfw-spin { to { transform: rotate(360deg); } }

.vfw-form-error {
	display: none;
	font-size: 12.5px;
	color: var(--vfw-error);
	margin-top: 11px;
	text-align: center;
	line-height: 1.5;
}

/* ---------- Confirm step ---------- */
.vfw-check {
	width: 40px;
	height: 40px;
	margin: 4px auto 14px;
	color: var(--vfw-call);
	display: block;
}
.vfw-confirm-title {
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}
.vfw-confirm-sub {
	text-align: center;
	font-size: 13.5px;
	color: var(--vfw-text-muted);
	margin: 0 0 18px;
}
.vfw-confirm-sub strong { color: var(--vfw-text); font-weight: 600; }

/* ---------- Calling step ---------- */
.vfw-pulse {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 7px;
	height: 34px;
	margin: 6px 0 18px;
}
.vfw-pulse span {
	width: 7px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--vfw-call), var(--vfw-call-deep));
	animation: vfw-bounce 1s ease-in-out infinite;
}
.vfw-pulse span:nth-child(2) { animation-delay: 0.15s; }
.vfw-pulse span:nth-child(3) { animation-delay: 0.3s; }
@keyframes vfw-bounce { 0%, 100% { height: 10px; } 50% { height: 30px; } }

.vfw-calling-title { text-align: center; font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.vfw-calling-sub { text-align: center; font-size: 13.5px; color: var(--vfw-text-muted); margin: 0; }

.vfw-retry { margin-top: 20px; }
.vfw-retry[hidden] { display: none; }
.vfw-retry-label {
	text-align: center;
	font-size: 12.5px;
	color: var(--vfw-text-muted);
	margin: 0 0 8px;
}

/* ---------- Footer ---------- */
.vfw-panel-footer {
	padding: 11px 18px 13px;
	border-top: 1px solid var(--vfw-border);
	font-size: 11px;
	color: var(--vfw-text-muted);
	text-align: center;
	flex-shrink: 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
	.vfw-root { right: 16px; bottom: 16px; left: 16px; }
	.vfw-launcher { width: -moz-fit-content; width: fit-content; margin-left: auto; }
	.vfw-root.vfw-open .vfw-backdrop { display: block; }
	.vfw-panel {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 12px;
		top: auto;
		width: auto;
		max-height: min(86vh, calc(100vh - 24px));
	}
	.vfw-root.vfw-open .vfw-launcher { display: none; }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
	.vfw-root *,
	.vfw-root *::before,
	.vfw-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.vfw-launcher:hover, .vfw-btn:hover:not(:disabled) { transform: none; }
}

.vfw-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}