/**
 * Сторінка агента.
 *
 * Головне тут — поле вводу: саме з ним людина проводить весь час. Тому воно
 * велике, з м'яким світінням позаду, а решта сторінки навмисно тиха: світлий
 * фон, майже без рамок, ніяких кольорових плашок навколо. Світіння оживає,
 * поки агент працює, — це єдина анімація, яка щось означає.
 */

.vz-agent {
	--vz-ink: #101322;
	--vz-soft: #6b7280;
	--vz-line: rgba( 16, 19, 34, 0.08 );
	--vz-card: rgba( 255, 255, 255, 0.74 );
	--vz-accent: #5b57e8;
	--vz-accent-2: #8b5cf6;
	--vz-warm: #f0abfc;
	--vz-glow: rgba( 91, 87, 232, 0.22 );

	position: relative;
	display: flex;
	flex-direction: column;
	height: calc( 100vh - 100px );
	min-height: 460px;
	margin: 16px 20px 0 0;
	border-radius: 22px;
	overflow: hidden;
	font-size: 14px;
	color: var( --vz-ink );
	background:
		radial-gradient( 900px 420px at 12% -8%, rgba( 99, 102, 241, 0.14 ), transparent 60% ),
		radial-gradient( 760px 380px at 92% 4%, rgba( 240, 171, 252, 0.13 ), transparent 62% ),
		linear-gradient( 180deg, #f8f9ff 0%, #fdfdff 40% );
}

/* --- Шапка ------------------------------------------------------------- */

.vz-agent__top {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 24px 14px;
	background: transparent;
}

.vz-agent__mark {
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background:
		radial-gradient( circle at 34% 28%, rgba( 255, 255, 255, 0.85 ), transparent 42% ),
		radial-gradient( circle at 70% 74%, var( --vz-warm ), transparent 55% ),
		linear-gradient( 140deg, var( --vz-accent ), var( --vz-accent-2 ) );
	box-shadow: 0 6px 18px var( --vz-glow );
}

.vz-agent.is-working .vz-agent__mark {
	animation: vz-pulse 2.2s ease-in-out infinite;
}

@keyframes vz-pulse {
	0%, 100% { box-shadow: 0 6px 18px var( --vz-glow ); }
	50% { box-shadow: 0 6px 26px rgba( 91, 87, 232, 0.5 ); }
}

.vz-agent__title h1 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

/* Довга назва сайту не повинна ламати шапку на два поверхи. */

.vz-agent__title {
	min-width: 0;
}

.vz-agent__title p {
	margin: 2px 0 0;
	font-size: 12px;
	color: var( --vz-soft );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vz-agent__mode {
	margin-left: auto;
}

/* --- Перемикач режиму: така сама пігулка, як решта дрібних кнопок ------- */

.vz-agent__switch {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px 7px 11px;
	background: rgba( 255, 255, 255, 0.7 );
	border: 1px solid var( --vz-line );
	border-radius: 999px;
	cursor: pointer;
	font-size: 12.5px;
	color: var( --vz-soft );
	user-select: none;
	white-space: nowrap;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.vz-agent__switch:hover {
	border-color: rgba( 91, 87, 232, 0.35 );
}

.vz-agent__switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.vz-agent__slider {
	width: 34px;
	height: 19px;
	border-radius: 999px;
	background: #d6d9e2;
	position: relative;
	transition: background 0.2s;
	flex: none;
}

.vz-agent__slider::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 16, 19, 34, 0.22 );
	transition: transform 0.2s;
}

.vz-agent__switch input:checked + .vz-agent__slider {
	background: linear-gradient( 90deg, var( --vz-accent ), var( --vz-accent-2 ) );
}

.vz-agent__switch input:checked + .vz-agent__slider::after {
	transform: translateX( 15px );
}

.vz-agent__switch:has( input:checked ) {
	background: rgba( 91, 87, 232, 0.08 );
	border-color: rgba( 91, 87, 232, 0.3 );
	color: var( --vz-accent );
}

.vz-agent__switch input:focus-visible + .vz-agent__slider {
	outline: 2px solid var( --vz-accent );
	outline-offset: 2px;
}

/* --- Стрічка ----------------------------------------------------------- */

.vz-agent__thread {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 10px 24px 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-behavior: smooth;
}

.vz-msg {
	display: flex;
	max-width: 760px;

	/*
	 * Без цього довгий рядок задає ширину по вмісту, і репліка вилазить за
	 * праву межу — саме те, що було видно на екрані з переліком уміння агента.
	 */
	min-width: 0;
}

.vz-msg--user {
	align-self: flex-end;
	justify-content: flex-end;
}

.vz-msg__body {
	min-width: 0;
	max-width: 100%;
	padding: 12px 17px;
	border-radius: 20px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* Репліку людини показуємо як є, зі збереженням переносів. */

.vz-msg--user .vz-msg__body {
	white-space: pre-wrap;
}

/* --- Розмітка у відповіді агента ---------------------------------------- */

.vz-msg--agent .vz-msg__body > :first-child { margin-top: 0; }
.vz-msg--agent .vz-msg__body > :last-child { margin-bottom: 0; }

.vz-msg--agent .vz-msg__body p {
	margin: 0 0 10px;
}

.vz-msg--agent .vz-msg__body h4 {
	margin: 14px 0 6px;
	font-size: 14px;
	font-weight: 600;
}

.vz-msg--agent .vz-msg__body ul,
.vz-msg--agent .vz-msg__body ol {
	margin: 0 0 10px;
	padding-left: 20px;
	list-style: outside;
}

.vz-msg--agent .vz-msg__body ul { list-style-type: disc; }
.vz-msg--agent .vz-msg__body ol { list-style-type: decimal; }

.vz-msg--agent .vz-msg__body li {
	margin: 0 0 4px;
}

.vz-msg--agent .vz-msg__body code {
	padding: 1px 5px;
	background: rgba( 16, 19, 34, 0.06 );
	border-radius: 5px;
	font-size: 12.5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.vz-msg--agent .vz-msg__body pre {
	margin: 0 0 10px;
	padding: 12px 14px;
	overflow-x: auto;
	background: #12141d;
	border-radius: 12px;
}

.vz-msg--agent .vz-msg__body pre code {
	padding: 0;
	background: none;
	color: #e6e8ec;
	font-size: 11.5px;
	line-height: 1.55;
}

.vz-msg--agent .vz-msg__body a {
	color: var( --vz-accent );
}

.vz-msg--user .vz-msg__body {
	background: linear-gradient( 135deg, var( --vz-accent ), var( --vz-accent-2 ) );
	color: #fff;
	border-bottom-right-radius: 7px;
	box-shadow: 0 6px 18px rgba( 91, 87, 232, 0.22 );
}

.vz-msg--agent .vz-msg__body {
	background: var( --vz-card );
	border: 1px solid var( --vz-line );
	border-bottom-left-radius: 7px;
	backdrop-filter: blur( 10px );
}

.vz-msg__shot {
	display: block;
	max-width: 260px;
	margin-bottom: 8px;
	border-radius: 13px;
}

/* --- Робота інструментів ----------------------------------------------- */

.vz-tool {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 14px;
	background: rgba( 255, 255, 255, 0.6 );
	border: 1px solid var( --vz-line );
	border-radius: 999px;
	font-size: 12px;
	color: var( --vz-soft );
	align-self: flex-start;
	max-width: 760px;
}

.vz-tool__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #c8ccd6;
	flex: none;
}

.vz-tool--live .vz-tool__dot {
	background: var( --vz-accent );
	animation: vz-ping 1.4s ease-out infinite;
}

@keyframes vz-ping {
	0% { box-shadow: 0 0 0 0 var( --vz-glow ); }
	100% { box-shadow: 0 0 0 7px rgba( 91, 87, 232, 0 ); }
}

.vz-tool--ok .vz-tool__dot { background: #16a34a; }
.vz-tool--bad .vz-tool__dot { background: #dc2626; }

.vz-tool__what {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var( --vz-ink );
}

.vz-tool__note {
	margin-left: auto;
	padding-left: 14px;
	white-space: nowrap;
}

/* Знімок сторінки, на який дивиться агент: дрібно, щоб не заступав розмову. */
.vz-shot {
	align-self: flex-start;
	display: block;
	width: auto;
	max-width: min( 320px, 100% );
	max-height: 220px;
	object-fit: cover;
	object-position: top;
	border: 1px solid var( --vz-line );
	border-radius: 10px;
}

/* --- «Працюю» -------------------------------------------------------------
   Стоїть у стрічці, під останньою реплікою: людина дивиться саме туди, куди
   щойно написала, а не в підвал сторінки.
   ------------------------------------------------------------------------ */

.vz-think {
	display: flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 9px 16px 9px 14px;
	background: var( --vz-card );
	border: 1px solid var( --vz-line );
	border-radius: 999px;
	font-size: 12.5px;
	color: var( --vz-soft );
	backdrop-filter: blur( 10px );
}

.vz-think__dots {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: none;
}

.vz-think__dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --vz-accent );
	animation: vz-bounce 1.2s ease-in-out infinite;
}

.vz-think__dots i:nth-child( 2 ) { animation-delay: 0.16s; }
.vz-think__dots i:nth-child( 3 ) { animation-delay: 0.32s; }

@keyframes vz-bounce {
	0%, 60%, 100% { opacity: 0.26; transform: translateY( 0 ); }
	30% { opacity: 1; transform: translateY( -3px ); }
}

/* --- Запит дозволу ------------------------------------------------------ */

.vz-ask {
	align-self: flex-start;
	max-width: 760px;
	width: 100%;
	padding: 16px;
	background: rgba( 255, 255, 255, 0.86 );
	border: 1px solid rgba( 91, 87, 232, 0.34 );
	border-radius: 18px;
	box-shadow: 0 12px 32px rgba( 91, 87, 232, 0.14 );
	backdrop-filter: blur( 10px );
}

.vz-ask__what {
	font-weight: 600;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
}

.vz-ask__why {
	margin-top: 5px;
	color: var( --vz-soft );
	font-size: 13px;
}

.vz-ask__code {
	max-height: 260px;
	overflow: auto;
	margin: 12px 0 0;
	padding: 12px;
	background: #12141d;
	color: #e6e8ec;
	border-radius: 12px;
	font-size: 11.5px;
	line-height: 1.55;
	white-space: pre;
}

.vz-ask__row {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.vz-ask__yes,
.vz-ask__no {
	padding: 9px 19px;
	border-radius: 999px;
	border: 1px solid var( --vz-line );
	background: #fff;
	cursor: pointer;
	font-size: 13px;
}

.vz-ask__yes {
	background: linear-gradient( 135deg, var( --vz-accent ), var( --vz-accent-2 ) );
	border-color: transparent;
	color: #fff;
	font-weight: 500;
	box-shadow: 0 6px 16px rgba( 91, 87, 232, 0.28 );
}

/* --- Вітання ------------------------------------------------------------ */

.vz-agent__hello {
	margin: auto;
	text-align: center;
	max-width: 540px;
	padding: 20px 0 30px;
}

.vz-agent__orb {
	width: 74px;
	height: 74px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background:
		radial-gradient( circle at 32% 26%, rgba( 255, 255, 255, 0.9 ), transparent 46% ),
		radial-gradient( circle at 74% 78%, var( --vz-warm ), transparent 58% ),
		linear-gradient( 145deg, var( --vz-accent ), var( --vz-accent-2 ) );
	box-shadow: 0 18px 50px rgba( 91, 87, 232, 0.3 );
	animation: vz-float 6s ease-in-out infinite;
}

@keyframes vz-float {
	0%, 100% { transform: translateY( 0 ) scale( 1 ); }
	50% { transform: translateY( -8px ) scale( 1.03 ); }
}

.vz-agent__hello h2 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.vz-agent__hello p {
	margin: 0 0 24px;
	color: var( --vz-soft );
	line-height: 1.6;
}

.vz-agent__hints {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.vz-agent__hint {
	padding: 9px 16px;
	background: rgba( 255, 255, 255, 0.72 );
	border: 1px solid var( --vz-line );
	border-radius: 999px;
	font-size: 12.5px;
	color: var( --vz-soft );
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

.vz-agent__hint:hover {
	border-color: rgba( 91, 87, 232, 0.4 );
	color: var( --vz-accent );
	transform: translateY( -1px );
}

/* --- Поле вводу --------------------------------------------------------- */

.vz-agent__composer {
	position: relative;
	padding: 12px 24px 20px;
}

/*
 * Світіння під полем — не прикраса: поки агент працює, воно дихає, і людині
 * видно, що щось відбувається, навіть коли вона дивиться на інший край екрана.
 */

.vz-agent__composer::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 26px;
	width: min( 620px, 76% );
	height: 74px;
	transform: translateX( -50% );
	border-radius: 999px;
	background: linear-gradient( 90deg, var( --vz-accent ), var( --vz-accent-2 ), var( --vz-warm ) );
	filter: blur( 34px );
	opacity: 0.3;
	pointer-events: none;
	transition: opacity 0.5s;
}

.vz-agent.is-working .vz-agent__composer::before {
	opacity: 0.62;
	animation: vz-breathe 2.6s ease-in-out infinite;
}

@keyframes vz-breathe {
	0%, 100% { filter: blur( 34px ); opacity: 0.44; }
	50% { filter: blur( 44px ); opacity: 0.72; }
}

/*
 * «Не закривайте сторінку» — поки агент працює.
 *
 * Тихо, але помітно: жовтуватий фон читається як попередження, а не як
 * помилка, і не сперечається з фіолетовим акцентом панелі.
 */
.vz-agent__keep {
	margin: 0 0 10px;
	padding: 8px 12px;
	border-radius: 10px;
	background: #fef6e0;
	color: #7a4b00;
	font-size: 12.5px;
	line-height: 1.45;
}

.vz-agent__files {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.vz-agent__field {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 9px 9px 9px 10px;
	border: 1px solid rgba( 255, 255, 255, 0.8 );
	border-radius: 26px;
	background: rgba( 255, 255, 255, 0.9 );
	box-shadow:
		0 1px 2px rgba( 16, 19, 34, 0.05 ),
		0 18px 44px rgba( 16, 19, 34, 0.09 );
	backdrop-filter: blur( 14px );
	transition: box-shadow 0.2s, border-color 0.2s;
}

.vz-agent__field:focus-within,
.vz-agent__field.is-drop {
	border-color: rgba( 91, 87, 232, 0.34 );
	box-shadow:
		0 0 0 4px rgba( 91, 87, 232, 0.1 ),
		0 20px 50px rgba( 16, 19, 34, 0.12 );
}

/*
 * Адмінка WordPress малює власну синю рамку навколо textarea у фокусі. Тут
 * рамку тримає сама «пігулка» поля, а друга рамка всередині виглядала як вада.
 */

.vz-agent__field textarea,
.vz-agent__field textarea:focus {
	box-shadow: none;
	outline: 0;
	border: 0;
}

.vz-agent__field textarea {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	resize: none;
	outline: none;
	padding: 9px 4px;
	font-size: 15px;
	line-height: 1.5;
	font-family: inherit;
	color: var( --vz-ink );
	max-height: 220px;
}

/*
 * Підказка в один рядок: textarea заввишки в рядок, і довгий текст просто
 * зникав під краєм — виглядало як обрізаний інтерфейс.
 */

.vz-agent__field textarea::placeholder {
	color: #9aa0ad;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Кругла кнопка скріпки — як у знайомих чатах, щоб не шукати. */

.vz-agent__clip {
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 16, 19, 34, 0.05 );
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s, transform 0.15s;
}

.vz-agent__clip:hover {
	background: rgba( 91, 87, 232, 0.12 );
	transform: scale( 1.05 );
}

.vz-agent__send {
	width: 36px;
	height: 36px;
	flex: none;
	border: 0;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --vz-accent ), var( --vz-accent-2 ) );
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 0 6px 16px rgba( 91, 87, 232, 0.32 );
	transition: opacity 0.15s, transform 0.15s;
}

.vz-agent__send:hover:not( :disabled ) {
	transform: scale( 1.05 );
}

.vz-agent__send:disabled {
	opacity: 0.32;
	cursor: default;
	box-shadow: none;
}

/* Стрілка вгору малюється рамками — окремої картинки не потрібно. */

.vz-agent__send span {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 8px solid #fff;
	transition: border-radius 0.15s;
}

/* Поки агент працює, та сама кнопка стає квадратиком «стоп». */

.vz-agent__send.is-stop {
	background: #12141d;
	box-shadow: 0 6px 16px rgba( 16, 19, 34, 0.28 );
}

.vz-agent__send.is-stop span {
	width: 11px;
	height: 11px;
	border: 0;
	border-radius: 3px;
	background: #fff;
}

.vz-agent__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	margin: 10px 6px 0;
	font-size: 11.5px;
	color: var( --vz-soft );
	min-height: 15px;
}

/* На телефоні рахунок кроків не має тулитися до вибору моделі. */
.vz-agent__cost {
	text-align: right;
}

.vz-agent__cost {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.vz-agent__cost--low {
	color: #b45309;
	font-weight: 600;
}

/* --- Прикріплені файли -------------------------------------------------- */

.vz-file {
	position: relative;
	width: 62px;
	height: 62px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var( --vz-line );
	background: rgba( 255, 255, 255, 0.8 );
	box-shadow: 0 4px 14px rgba( 16, 19, 34, 0.07 );
}

.vz-file img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vz-file__x {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 16, 19, 34, 0.66 );
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.vz-file__wait {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba( 255, 255, 255, 0.66 );
	font-size: 18px;
	color: var( --vz-accent );
}

/* Файл зі списком показуємо карткою: мініатюри в нього немає. */

.vz-file--doc {
	width: auto;
	max-width: 200px;
	height: auto;
	padding: 11px 28px 11px 13px;
	display: flex;
	align-items: center;
}

.vz-file__name {
	font-size: 12px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Хто просив менше руху — отримує спокійну сторінку. */

@media ( prefers-reduced-motion: reduce ) {
	.vz-agent__orb,
	.vz-agent__mark,
	.vz-tool--live .vz-tool__dot,
	.vz-think__dots i,
	.vz-agent.is-working .vz-agent__composer::before {
		animation: none;
	}
}

@media ( max-width: 782px ) {
	.vz-agent {
		height: calc( 100vh - 76px );
		margin: 10px 10px 0 0;
	}

	/*
	 * Шапка в один рядок на телефоні не вміщалася: назва ховалася під кнопками,
	 * а перемикач «Ask before changes» виїжджав за край екрана. Хай кнопки
	 * переходять на другий рядок.
	 */
	.vz-agent__top {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.vz-agent__title {
		flex: 1 1 150px;
	}

	.vz-agent__past {
		order: 3;
	}

	.vz-agent__mode {
		order: 4;
		margin-left: 0;
	}

	.vz-agent__top,
	.vz-agent__thread,
	.vz-agent__composer {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* --- Вибір моделі просто в розмові -------------------------------------- */

.vz-agent__model select {
	max-width: 260px;
	padding: 3px 22px 3px 9px;
	border: 1px solid var( --vz-line );
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.7 );
	color: var( --vz-soft );
	font-size: 11.5px;
	line-height: 1.5;
	cursor: pointer;
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, currentColor 50% ), linear-gradient( 135deg, currentColor 50%, transparent 50% );
	background-position: right 11px center, right 7px center;
	background-size: 4px 4px, 4px 4px;
	background-repeat: no-repeat;
}

.vz-agent__model select:hover {
	border-color: rgba( 91, 87, 232, 0.35 );
	color: var( --vz-accent );
}

.vz-agent__model select:focus-visible {
	outline: 2px solid var( --vz-accent );
	outline-offset: 1px;
}

/* --- Минулі розмови ----------------------------------------------------- */

.vz-agent__past {
	position: relative;
	display: flex;
	gap: 6px;
	margin-left: auto;
	margin-right: 10px;
}

.vz-agent__chip {
	padding: 7px 13px;
	background: rgba( 255, 255, 255, 0.7 );
	border: 1px solid var( --vz-line );
	border-radius: 999px;
	font-size: 12.5px;
	color: var( --vz-soft );
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s, color 0.15s;
}

.vz-agent__chip:hover {
	border-color: rgba( 91, 87, 232, 0.35 );
	color: var( --vz-accent );
}

.vz-agent__list {
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	z-index: 20;
	width: 340px;
	max-height: 360px;
	overflow-y: auto;
	padding: 6px;
	background: #fff;
	border: 1px solid var( --vz-line );
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba( 16, 19, 34, 0.14 );
}

.vz-past {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 11px;
	border-radius: 9px;
	cursor: pointer;
}

.vz-past:hover {
	background: rgba( 91, 87, 232, 0.07 );
}

.vz-past__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
}

.vz-past__when {
	color: var( --vz-soft );
	font-size: 11px;
	white-space: nowrap;
}

.vz-past__x {
	flex: none;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --vz-soft );
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.vz-past__x:hover {
	background: rgba( 220, 38, 38, 0.1 );
	color: #dc2626;
}

.vz-agent__list p {
	margin: 0;
	padding: 14px 11px;
	color: var( --vz-soft );
	font-size: 12.5px;
}

/* Ціна роботи — тихо, але до того, як людина почала. */

.vz-agent__price {
	max-width: 470px;
	margin: -12px auto 22px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var( --vz-soft );
}

.vz-warn {
	align-self: flex-start;
	max-width: 760px;
	padding: 10px 16px;
	background: rgba( 245, 158, 11, 0.09 );
	border: 1px solid rgba( 180, 83, 9, 0.28 );
	border-radius: 14px;
	font-size: 12.5px;
	line-height: 1.55;
	color: #92400e;
}

/*
 * Вітання для щойно встановленого плагіна.
 *
 * До підписки чат нічого корисного зробити не може, тому замість підказок
 * показуємо два шляхи: спробувати безкоштовно або подивитися тарифи.
 */
.vz-agent__welcome {
	margin: 18px auto 0;
	max-width: 520px;
	text-align: center;
}

.vz-agent__welcome-text {
	margin: 0 0 16px;
	color: #3c434a;
	font-size: 15px;
	line-height: 1.5;
}

.vz-agent__welcome-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.vz-agent__cta {
	display: inline-block;
	padding: 11px 20px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient( 120deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100% );
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 79, 70, 229, .35 );
	transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}

/*
 * Тільки для яскравої кнопки.
 *
 * Без цього уточнення білий колір тексту діставався й тихій кнопці поруч —
 * на наведення напис на ній ставав білим по білому й просто зникав.
 */
.vz-agent__cta:not( .vz-agent__cta--quiet ):hover:not( :disabled ) {
	filter: brightness( 1.08 );
	box-shadow: 0 4px 14px rgba( 79, 70, 229, .45 );
	transform: translateY( -1px );
	color: #fff;
}

.vz-agent__cta:disabled {
	filter: grayscale( .5 );
	box-shadow: none;
	cursor: default;
}

.vz-agent__cta--quiet {
	background: none;
	border: 1px solid #c3c4c7;
	color: #2c3338;
	box-shadow: none;
}

.vz-agent__cta--quiet:hover {
	border-color: #4f46e5;
	background: none;
	color: #4f46e5;
	filter: none;
	box-shadow: none;
	transform: translateY( -1px );
}

.vz-agent__welcome-claim {
	margin: 12px 0 0;
	font-size: 13px;
}

.vz-agent__welcome-claim a {
	color: #50575e;
}

.vz-agent__welcome-note {
	margin: 14px 0 0;
	color: #50575e;
	font-size: 13px;
}

/* Межі проби — помітно, але не тривожно. */
.vz-agent__price--trial {
	margin-top: 8px;
	color: #92400e;
}

/*
 * Сервіс ще не підключено: поле вводу ховаємо, щоб кнопка згоди не опинилася
 * під ним на невеликому екрані.
 */
.vz-agent--locked .vz-agent__composer {
	display: none;
}