/* LiveAvatar video assistant. Always dark, like the Tavus widget from plugin 1.0.1, in the site's navy and gold.
   Every rule is scoped to .ekla and resets inherited theme styles, because Enfold styles buttons and inputs globally. */
.ekla {
	--ekla-navy: #071226;
	--ekla-navy-2: #0c1d36;
	--ekla-stage: #03060c;
	--ekla-line: #1e3354;
	--ekla-ink: #e8edf5;
	--ekla-muted: #9aabc3;
	--ekla-gold: #e0b048;
	--ekla-red: #b3261e;
	font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ekla-ink);
}
.ekla *, .ekla *::before, .ekla *::after { box-sizing: border-box; }
.ekla [hidden] { display: none !important; }
.ekla button, .ekla input { all: unset; box-sizing: border-box; font: inherit; color: inherit; }
.ekla button { cursor: pointer; }
.ekla button:focus-visible, .ekla input:focus-visible { outline: 3px solid var(--ekla-gold); outline-offset: 2px; }
.ekla p { margin: 0; }
.ekla svg { display: block; width: 20px; height: 20px; flex: none; }

/* The Tavus element stays on the page when its script isn't loaded; keep it out of the way. */
tavus-widget { display: none !important; }

.ekla .ekla-launcher {
	position: fixed;
	right: calc(24px + env(safe-area-inset-right, 0px));
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 2147483000;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px 12px 16px;
	border-radius: 999px;
	background: var(--ekla-gold);
	color: var(--ekla-navy);
	font-weight: 600;
	font-size: 16px;
	box-shadow: 0 8px 24px rgba(3, 6, 12, .35);
	transition: transform .15s ease, box-shadow .15s ease;
}
.ekla .ekla-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(3, 6, 12, .45); }
.ekla .ekla-launcher:focus-visible { outline-color: var(--ekla-navy); }

.ekla .ekla-panel {
	position: fixed;
	right: calc(24px + env(safe-area-inset-right, 0px));
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	width: 360px;
	height: min(640px, calc(100vh - 48px));
	border: 1px solid var(--ekla-line);
	border-radius: 16px;
	overflow: hidden;
	background: var(--ekla-navy-2);
	box-shadow: 0 16px 48px rgba(3, 6, 12, .5);
}

/* Logged-in admins (the only viewers while testing) have WordPress's 32px toolbar at the top. */
.admin-bar .ekla .ekla-panel { height: min(640px, calc(100vh - 80px)); }

.ekla .ekla-stage { position: relative; flex: 1; min-height: 0; background: var(--ekla-stage); }
.ekla .ekla-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.ekla .ekla-top {
	position: absolute;
	inset: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 8px 28px 16px;
	background: linear-gradient(rgba(3, 6, 12, .85), rgba(3, 6, 12, 0));
}
.ekla .ekla-title { font-weight: 600; }
.ekla .ekla-title small {
	margin-left: 6px;
	padding: 1px 6px;
	border: 1px solid var(--ekla-gold);
	border-radius: 4px;
	color: var(--ekla-gold);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: 2px;
}
.ekla .ekla-time { margin-left: auto; color: var(--ekla-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ekla .ekla-time[hidden] + .ekla-close { margin-left: auto; }

.ekla .ekla-middle {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	text-align: center;
	pointer-events: none;
}
.ekla .ekla-middle > * { pointer-events: auto; }
.ekla .ekla-status { max-width: 26ch; }
.ekla .ekla-status:empty { display: none; }
.ekla[data-state="connecting"] .ekla-status::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto 14px;
	border: 3px solid var(--ekla-line);
	border-top-color: var(--ekla-gold);
	border-radius: 50%;
	animation: ekla-spin 1s linear infinite;
}
@keyframes ekla-spin { to { transform: rotate(360deg); } }

.ekla .ekla-pill { padding: 10px 18px; border-radius: 999px; background: var(--ekla-gold); color: var(--ekla-navy); font-weight: 600; }

.ekla .ekla-caption {
	position: absolute;
	inset: auto 0 0;
	max-height: 40%;
	overflow-y: auto;
	padding: 32px 16px 12px;
	background: linear-gradient(rgba(3, 6, 12, 0), rgba(3, 6, 12, .9) 40%);
}
.ekla .ekla-caption:empty { display: none; }

.ekla .ekla-bar { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px 6px; }
.ekla .ekla-bar[inert] { opacity: .45; }
.ekla .ekla-input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--ekla-line);
	border-radius: 999px;
	background: var(--ekla-navy);
	font-size: 14px;
}
.ekla .ekla-input::placeholder { color: var(--ekla-muted); opacity: 1; }
.ekla .ekla-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border: 1px solid var(--ekla-line);
	border-radius: 50%;
}
.ekla .ekla-icon:hover { background: var(--ekla-line); }
.ekla .ekla-mic[aria-pressed="true"] { color: var(--ekla-gold); border-color: var(--ekla-gold); }
.ekla .ekla-end { background: var(--ekla-red); border-color: var(--ekla-red); }
.ekla .ekla-end:hover { background: #8f1e18; }
.ekla .ekla-close { border: 0; }
.ekla .ekla-notice { padding: 0 12px 10px; color: var(--ekla-muted); font-size: 11px; text-align: center; }

@media (max-width: 600px) {
	.ekla .ekla-launcher { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
	.ekla .ekla-panel, .admin-bar .ekla .ekla-panel {
		inset: 0;
		width: auto;
		height: auto;
		border: 0;
		border-radius: 0;
		padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ekla .ekla-launcher { transition: none; }
	.ekla[data-state="connecting"] .ekla-status::before { animation: none; }
}