/* ==========================================================================
   AVM Psicologia · página do validador (/agendar/)
   ========================================================================== */

:root {
	--c-bg: #FFFDF9;
	--c-mist: #EEF2F5;
	--c-ink: #1E3F5A;
	--c-blue: #8FA9BF;
	--c-peach: #F2C7A5;
	--c-gold: #E9C98B;
	--c-text: #2B2F33;
	--c-muted: #56616B;
	--f-head: "Cormorant Garamond", Georgia, serif;
	--f-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--grad: linear-gradient(120deg, var(--c-peach) 0%, var(--c-gold) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.is-validador {
	margin: 0;
	background: var(--c-mist);
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}
a { color: var(--c-ink); }
:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; border-radius: 8px; }

.v-app {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	max-width: 620px;
	margin: 0 auto;
	background: var(--c-bg);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	overflow: hidden;
	box-shadow: 0 0 80px -30px rgba(30, 63, 90, .25);
}
/* Nuvens suaves e estáticas na base */
.v-app::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 260px;
	background: url("../img/nuvem-frente.png") center bottom / 160% auto no-repeat, linear-gradient(to bottom, rgba(238,242,245,0), rgba(238,242,245,.55));
	opacity: .55;
	pointer-events: none;
	z-index: 0;
}

/* Topo ------------------------------------------------------------------- */
.v-top { position: relative; z-index: 2; flex-shrink: 0; background: rgba(255, 253, 249, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding-top: env(safe-area-inset-top); border-bottom: 1px solid rgba(143, 169, 191, .25); }
.v-top__row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.v-avatar { position: relative; display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--c-peach); color: var(--c-ink); font-weight: 700; font-size: 17px; letter-spacing: .04em; }
.v-online { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #2FB35C; box-shadow: 0 0 0 2px var(--c-bg); }
.v-top__who { flex: 1; min-width: 0; line-height: 1.25; }
.v-top__who strong { display: block; font-size: 17px; }
.v-top__who span { display: block; font-size: 17px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-top__brand { flex-shrink: 0; font-family: var(--f-head); font-size: 20px; font-weight: 600; color: var(--c-ink); text-decoration: none; display: none; }
@media (min-width: 480px) { .v-top__brand { display: block; } }
.v-progress { height: 3px; background: rgba(143, 169, 191, .2); }
.v-progress span { display: block; height: 100%; width: 0; background: var(--c-blue); transition: width .8s var(--ease); }

/* Conversa --------------------------------------------------------------- */
.v-chat { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 16px 8px; -webkit-overflow-scrolling: touch; }
.v-thread { display: flex; flex-direction: column; gap: 10px; min-height: 40%; }
.v-msg { max-width: 86%; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.v-msg.is-in { opacity: 1; transform: none; }
.v-msg p { margin: 0; }
.v-msg--bot { align-self: flex-start; background: #fff; padding: 12px 16px; border-radius: 6px 20px 20px 20px; box-shadow: 0 10px 26px -16px rgba(30, 63, 90, .35), 0 2px 6px -3px rgba(30, 63, 90, .08); }
.v-msg--user { align-self: flex-end; background: var(--c-ink); color: #fff; padding: 12px 16px; border-radius: 20px 6px 20px 20px; }
.v-typing { display: inline-flex; gap: 5px; align-items: center; padding: 16px 18px; }
.v-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-blue); animation: v-dot 1s ease-in-out infinite; }
.v-typing span:nth-child(2) { animation-delay: .15s; }
.v-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes v-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.v-foot { margin-top: 28px; padding: 16px 4px 8px; border-top: 1px solid rgba(143, 169, 191, .25); color: var(--c-muted); font-size: 17px; line-height: 1.5; }
.v-foot p { margin: 0 0 8px; }

/* Respostas -------------------------------------------------------------- */
.v-answers { position: relative; z-index: 2; flex-shrink: 0; max-height: 58dvh; overflow-y: auto; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(255,253,249,0), rgba(255,253,249,.96) 18px); }
.v-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; margin-bottom: 4px; border: 0; background: none; color: var(--c-muted); font: inherit; font-size: 17px; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.v-back[hidden] { display: none; }
.v-back span { font-size: 22px; line-height: 1; text-decoration: none; }
.v-options { display: flex; flex-direction: column; gap: 10px; }
.v-options:empty { display: none; }

.v-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 12px 20px;
	border: 1.5px solid var(--c-blue);
	border-radius: 999px;
	background: #fff;
	color: var(--c-ink);
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
	-webkit-tap-highlight-color: transparent;
}
.v-pill:hover { border-color: var(--c-ink); }
.v-pill:active { background: var(--c-ink); color: #fff; border-color: var(--c-ink); transform: scale(.99); }
.v-pill--check[aria-pressed="true"] { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.v-pill--check[aria-pressed="true"]::before { content: "✓"; margin-right: 8px; }
.v-pill--primary { background: var(--grad); border-color: transparent; color: var(--c-ink); font-weight: 700; box-shadow: 0 12px 26px -14px rgba(214, 160, 110, .95); }
.v-pill--primary:hover { border-color: transparent; }
.v-pill--primary:active { background: var(--grad); color: var(--c-ink); }
.v-pill:disabled { opacity: .45; cursor: default; }

.v-form { display: flex; gap: 10px; }
.v-form input {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	padding: 0 20px;
	border: 1.5px solid var(--c-blue);
	border-radius: 999px;
	background: #fff;
	color: var(--c-text);
	font: inherit;
	font-size: 17px;
}
.v-form input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(30, 63, 90, .15); }
.v-form input.is-error { border-color: #B4532A; animation: v-shake .4s; }
@keyframes v-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.v-send { width: auto; flex-shrink: 0; padding: 0 22px; }

@media (min-width: 621px) {
	.v-app { border-radius: 0; }
	.v-chat { padding: 26px 26px 8px; }
	.v-answers { padding-left: 26px; padding-right: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.v-msg { opacity: 1; transform: none; transition: none; }
	.v-typing span { animation: none; opacity: .7; }
	.v-progress span, .v-pill { transition: none; }
}