.wp-block-vaula-mcp-conversation,
.wp-block-vaula-mcp-conversation-en {
	--mcp-bg: #0b1618;
	--mcp-panel: rgba(8, 24, 27, .52);
	--mcp-panel-2: rgba(7, 20, 23, .42);
	--mcp-line: rgba(179, 235, 233, .13);
	--mcp-ink: #eaf2f1;
	--mcp-dim: #8ca09d;
	--mcp-green: #67ff71;
	--mcp-cyan: #2bd9d9;
	width: 100%;
	color: var(--mcp-ink);
	font-family: inherit;
}

.vaula-mcp-demo__viewport {
	position: relative;
	isolation: isolate;
	contain: paint;
	width: 100%;
	aspect-ratio: 1.09 / 1;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 100%);
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 100%);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	transform: translateZ(0);
}

.vaula-mcp-demo__intro {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: .55rem;
	width: min(82%, 24rem);
	color: rgba(234,242,241,.58);
	text-align: center;
	transform: translate(-50%, -50%);
	transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}

.vaula-mcp-demo__intro.is-hidden { opacity: 0; transform: translate(-50%, -46%); }
.vaula-mcp-demo__intro-status { animation: vaula-mcp-intro-breathe 1.8s ease-in-out infinite; }
.vaula-mcp-demo__intro strong { font-size: clamp(.85rem, 1.55vw, 1.35rem); font-weight: 600; }
.vaula-mcp-demo__intro-mark {
	width: clamp(2.4rem, 4vw, 3.8rem);
	height: clamp(2.4rem, 4vw, 3.8rem);
	background: rgba(255,255,255,.82);
	-webkit-mask: url("../../assets/images/vaula-mark.png") center / contain no-repeat;
	mask: url("../../assets/images/vaula-mark.png") center / contain no-repeat;
}
.vaula-mcp-demo__intro-status { display: inline-flex; align-items: center; gap: .45rem; color: rgba(140,160,157,.55); font-size: clamp(.68rem, 1.05vw, .9rem); }
.vaula-mcp-demo__intro-status i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--mcp-green); box-shadow: 0 0 .7rem rgba(103,255,113,.45); }

.vaula-mcp-demo__stream {
	position: absolute;
	top: 0;
	right: 1.5%;
	left: 1.5%;
	z-index: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(.7rem, 1.6vw, 1.5rem);
	opacity: 1;
	transition: opacity .9s ease, filter .9s ease;
	will-change: transform;
}

.vaula-mcp-demo__stream.is-fading { opacity: 0; filter: blur(.2rem); }

.vaula-mcp-demo__stream > * { flex: 0 0 auto; }

.vaula-mcp-demo__bubble,
.vaula-mcp-demo__agent-copy,
.vaula-mcp-demo__result,
.vaula-mcp-demo__draft {
	font-size: clamp(.78rem, 1.65vw, 1.55rem);
	line-height: 1.38;
}

.vaula-mcp-demo__bubble {
	align-self: flex-end;
	max-width: 73%;
	padding: clamp(.65rem, 1.4vw, 1.15rem) clamp(.9rem, 1.8vw, 1.45rem);
	border: 0;
	border-radius: clamp(1rem, 1.8vw, 1.5rem) clamp(1rem, 1.8vw, 1.5rem) clamp(.35rem, .7vw, .65rem) clamp(1rem, 1.8vw, 1.5rem);
	background: rgba(7, 24, 27, .72);
	box-shadow: inset 0 0 0 1px rgba(179,235,233,.07), 0 .45rem 1.5rem rgba(0,0,0,.08);
}

.vaula-mcp-demo__agent {
	display: flex;
	max-width: 92%;
	gap: clamp(.65rem, 1.4vw, 1.25rem);
	align-items: flex-start;
}

.vaula-mcp-demo__agent-icon {
	position: relative;
	width: clamp(1.65rem, 2.7vw, 2.85rem);
	height: clamp(1.65rem, 2.7vw, 2.85rem);
	margin-top: .05em;
	flex: 0 0 auto;
}

.vaula-mcp-demo__agent-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mcp-cyan);
	-webkit-mask: url("../../assets/images/vaula-mark.png") center / contain no-repeat;
	mask: url("../../assets/images/vaula-mark.png") center / contain no-repeat;
	filter: drop-shadow(0 0 .55rem rgba(43,217,217,.2));
}

.vaula-mcp-demo__agent-body { display: flex; min-width: 0; flex-direction: column; gap: .75rem; }

.vaula-mcp-demo__tool {
	display: flex;
	gap: .65rem;
	align-items: center;
	color: var(--mcp-dim);
	font-size: clamp(.68rem, 1.25vw, 1.15rem);
}

.vaula-mcp-demo__dots { display: inline-flex; gap: .3rem; }
.vaula-mcp-demo__dots i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--mcp-cyan); animation: vaula-mcp-dot 1s ease-in-out infinite alternate; }
.vaula-mcp-demo__dots i:nth-child(2) { animation-delay: .16s; }
.vaula-mcp-demo__dots i:nth-child(3) { animation-delay: .32s; }
.vaula-mcp-demo__meta { color: rgba(140,160,157,.65); font-size: .72em; letter-spacing: .08em; }

.vaula-mcp-demo__result,
.vaula-mcp-demo__draft {
	width: min(78%, 42rem);
	box-sizing: border-box;
	padding: clamp(.75rem, 1.6vw, 1.4rem);
	border: 0;
	border-radius: clamp(.75rem, 1.5vw, 1.25rem);
	background: rgba(7, 24, 27, .42);
	box-shadow: 0 .45rem 1.5rem rgba(0,0,0,.045);
}

.vaula-mcp-demo__metric { display: flex; gap: .8rem; align-items: baseline; padding: .28rem 0; }
.vaula-mcp-demo__metric:not(:last-child),
.vaula-mcp-demo__result-line:not(:last-child) { border-bottom: 1px solid rgba(179,235,233,.08); }
.vaula-mcp-demo__metric strong { min-width: 2.2em; color: var(--mcp-green); font-size: 1.65em; }
.vaula-mcp-demo__metric span,
.vaula-mcp-demo__result-line span:first-child { color: var(--mcp-dim); }
.vaula-mcp-demo__result-title { margin-bottom: .65rem; font-weight: 700; }
.vaula-mcp-demo__result-line { display: flex; gap: 1rem; justify-content: space-between; padding: .3rem 0; font-size: .8em; }
.vaula-mcp-demo__result--leads { width: min(90%, 48rem); }
.vaula-mcp-demo__result--leads .vaula-mcp-demo__result-line { padding: .22rem 0; border-bottom: 1px solid var(--mcp-line); }
.vaula-mcp-demo__result--leads .vaula-mcp-demo__result-line:last-child { border-bottom: 0; }
.vaula-mcp-demo__draft {
	border: 0;
	background: rgba(7, 24, 27, .42);
	box-shadow: 0 .5rem 1.6rem rgba(0,0,0,.055);
}
.vaula-mcp-demo__draft-line + .vaula-mcp-demo__draft-line { margin-top: .55rem; }

.vaula-mcp-demo__checks { display: flex; flex-direction: column; gap: .55rem; color: var(--mcp-dim); font-size: clamp(.72rem, 1.3vw, 1.2rem); }
.vaula-mcp-demo__check { display: flex; gap: .65rem; align-items: center; opacity: 0; transform: translateY(.35rem); transition: opacity .4s ease, transform .4s ease; }
.vaula-mcp-demo__check.is-visible { opacity: 1; transform: none; }
.vaula-mcp-demo__check-icon { display: inline-grid; width: 1.15rem; height: 1.15rem; flex: 0 0 1.15rem; border: 1px solid rgba(103,255,113,.5); border-radius: 50%; color: var(--mcp-green); place-items: center; font-size: .7rem; }
.vaula-mcp-demo__caret { color: var(--mcp-cyan); animation: vaula-mcp-caret .8s steps(1) infinite; }
.vaula-mcp-demo__reveal { animation: vaula-mcp-reveal .5s cubic-bezier(.22,1,.36,1) both; }

@keyframes vaula-mcp-reveal { from { opacity: 0; transform: translateY(.7rem); } to { opacity: 1; transform: none; } }
@keyframes vaula-mcp-caret { 50% { opacity: 0; } }
@keyframes vaula-mcp-dot { from { opacity: .3; } to { opacity: 1; } }
@keyframes vaula-mcp-intro-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .32; } }

@media (max-width: 781px) {
	.vaula-mcp-demo__viewport { height: clamp(18rem, 70vw, 22rem); min-height: 0; aspect-ratio: auto; }
	.vaula-mcp-demo__stream { right: 0; left: 0; gap: .9rem; }
	.vaula-mcp-demo__bubble,
	.vaula-mcp-demo__agent-copy,
	.vaula-mcp-demo__result,
	.vaula-mcp-demo__draft { font-size: .92rem; }
	.vaula-mcp-demo__bubble { max-width: 82%; padding: .5rem .85rem; border-radius: 1rem 1rem .4rem 1rem; }
	.vaula-mcp-demo__agent { max-width: 100%; }
	.vaula-mcp-demo__agent-icon { width: 1.55rem; height: 1.55rem; }
	.vaula-mcp-demo__intro-mark { width: 2.25rem; height: 2.25rem; }
	.vaula-mcp-demo__intro strong { font-size: .9rem; }
	.vaula-mcp-demo__tool,
	.vaula-mcp-demo__checks { font-size: .8rem; }
	.vaula-mcp-demo__dots { gap: .22rem; }
	.vaula-mcp-demo__dots i { width: .34rem; height: .34rem; }
}

@media (prefers-reduced-motion: reduce) {
	.vaula-mcp-demo__reveal,
	.vaula-mcp-demo__caret,
	.vaula-mcp-demo__dots i { animation: none; }
	.vaula-mcp-demo__intro-status i { animation: none; }
	.vaula-mcp-demo__check { transition: none; }
}