/* ==========================================================================
   AVM Odonto Premium · Validador (/avaliacao/)
   Tela única, mobile-first, 100dvh com safe-area.
   ========================================================================== */

:root {
	--c-bg: #0E0C0B;
	--c-bg2: #1A1512;
	--c-accent: #D9C3A5;
	--c-text: #F3EEE8;
	--c-muted: rgba(243, 238, 232, .72);
	--c-line: rgba(217, 195, 165, .18);
	--f-title: 'Manrope', system-ui, sans-serif;
	--f-body: 'Inter', system-ui, sans-serif;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--safe-t: env(safe-area-inset-top, 0px);
	--safe-b: env(safe-area-inset-bottom, 0px);
	--safe-l: env(safe-area-inset-left, 0px);
	--safe-r: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.validador {
	margin: 0; background: var(--c-bg); color: var(--c-text);
	font: 400 1rem/1.5 var(--f-body);
	-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
	overflow: hidden;
}
p { margin: 0; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.v-app {
	height: 100vh; height: 100dvh;
	display: flex; flex-direction: column;
	max-width: 680px; margin: 0 auto;
	background:
		radial-gradient(120% 60% at 0% 0%, rgba(217, 195, 165, .07), transparent 60%),
		var(--c-bg);
}
@media (min-width: 720px) {
	.v-app { border-left: 1px solid var(--c-line); border-right: 1px solid var(--c-line); }
}

/* ---------- topo ---------- */
.v-top {
	flex: none; position: relative; z-index: 2;
	padding: calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) 0 calc(14px + var(--safe-l));
	background: rgba(14, 12, 11, .92);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.v-top__row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding-bottom: 10px; }
.v-back {
	flex: none; width: 44px; height: 44px; margin-left: -6px; border: 0; border-radius: 50%;
	background: transparent; color: var(--c-muted); display: grid; place-items: center; cursor: pointer;
}
.v-back:hover { color: var(--c-text); background: rgba(243, 238, 232, .06); }
.v-back[hidden] { display: none; }
.v-avatar {
	position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
	background: var(--c-accent); color: #0E0C0B; display: grid; place-items: center;
	font: 500 1rem/1 var(--f-title); letter-spacing: .04em;
}
.v-online {
	position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%;
	background: #3BD16F; border: 2px solid var(--c-bg);
}
.v-who { flex: 1; min-width: 0; }
.v-who__name { font-weight: 500; line-height: 1.25; }
.v-who__role { color: var(--c-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-mono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.v-mono svg { width: 32px; height: 32px; }
.v-progress { height: 2px; background: var(--c-line); margin: 0 calc(-14px - var(--safe-r)) 0 calc(-14px - var(--safe-l)); }
.v-progress__bar { display: block; height: 100%; width: 0; background: var(--c-accent); transition: width .6s var(--ease); }

/* ---------- conversa ---------- */
.v-chat {
	flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	display: flex; flex-direction: column;
	padding: 20px calc(16px + var(--safe-r)) 12px calc(16px + var(--safe-l));
	scrollbar-width: thin; scrollbar-color: var(--c-line) transparent;
}
.v-thread { display: flex; flex-direction: column; gap: 10px; }

.v-msg {
	max-width: 86%; padding: 12px 16px; border-radius: 20px;
	font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere;
	animation: msgIn .35s var(--ease) both;
}
.v-msg--bot {
	align-self: flex-start; background: var(--c-bg2); color: var(--c-text);
	border: 1px solid rgba(217, 195, 165, .1); border-bottom-left-radius: 6px;
}
.v-msg--user {
	align-self: flex-end; background: var(--c-accent); color: #0E0C0B;
	border-bottom-right-radius: 6px; font-weight: 500; margin: 6px 0;
}
.v-msg--bot + .v-msg--bot { margin-top: -4px; }

.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-accent); opacity: .35; animation: dot 1s infinite ease-in-out; }
.v-typing span:nth-child(2) { animation-delay: .15s; }
.v-typing span:nth-child(3) { animation-delay: .3s; }

.v-fallback { display: grid; gap: 14px; justify-items: start; padding: 16px; border: 1px solid var(--c-line); border-radius: 18px; }
.v-fallback[hidden] { display: none; }

.v-foot {
	margin-top: auto; padding-top: 32px;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px;
	color: var(--c-muted); font-size: 1rem; line-height: 1.6; text-align: center;
}
.v-foot > * { white-space: nowrap; }
.v-foot a { text-underline-offset: 3px; }
.v-foot .signature { flex-basis: 100%; white-space: normal; }
.v-foot .signature a { color: var(--c-accent); }

/* ---------- respostas ---------- */
.v-dock {
	flex: none; max-height: 60dvh; overflow-y: auto;
	padding: 12px calc(16px + var(--safe-r)) calc(14px + var(--safe-b)) calc(16px + var(--safe-l));
	border-top: 1px solid var(--c-line);
	background: var(--c-bg);
}
.v-dock:empty { padding: 0; border: 0; }
.v-dock > * { opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.v-dock.is-ready > * { opacity: 1; transform: none; }

.v-options { display: grid; gap: 8px; }
.v-opt {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	width: 100%; min-height: 48px; padding: 10px 22px; border-radius: 26px;
	border: 1px solid var(--c-accent); background: transparent; color: var(--c-text);
	font-size: 1rem; line-height: 1.35; text-align: center; cursor: pointer;
	transition: background-color .2s, color .2s, transform .15s;
	-webkit-tap-highlight-color: transparent;
}
.v-opt:hover { background: rgba(217, 195, 165, .1); }
.v-opt:active, .v-opt.is-picked { background: var(--c-accent); color: #0E0C0B; }
.v-opt:active { transform: scale(.985); }
.v-options.is-locked .v-opt:not(.is-picked) { opacity: .45; }
.v-opt--arcada { justify-content: flex-start; text-align: left; padding: 8px 18px 8px 12px; min-height: 60px; }

.v-arcada { flex: none; color: var(--c-accent); }
.v-arcada .on { fill: currentColor; }
.v-arcada .off { fill: none; stroke: currentColor; stroke-width: .8; opacity: .45; }
.v-arcada .q { fill: var(--c-bg); stroke: currentColor; stroke-width: 1; }
.v-arcada .qt { fill: currentColor; font: 600 12px/1 var(--f-body); }
.v-opt.is-picked .v-arcada, .v-opt:active .v-arcada { color: #0E0C0B; }
.v-opt.is-picked .v-arcada .q, .v-opt:active .v-arcada .q { fill: var(--c-accent); }

.v-form { display: flex; gap: 8px; }
.v-input {
	flex: 1; min-width: 0; min-height: 52px; padding: 0 20px; border-radius: 999px;
	background: var(--c-bg2); color: var(--c-text); border: 1px solid var(--c-line);
	font: 400 1rem/1 var(--f-body); /* 16px evita zoom no iOS */
}
.v-input::placeholder { color: rgba(243, 238, 232, .5); }
.v-input:focus { outline: none; border-color: var(--c-accent); }
.v-form.is-error .v-input { border-color: #E89A8A; }
.v-send {
	flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--c-accent); color: #0E0C0B; display: grid; place-items: center;
}

.v-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 26px; border-radius: 999px; cursor: pointer;
	font: 500 1rem/1 var(--f-body); text-decoration: none; border: 1px solid transparent;
	transition: background-color .2s, transform .15s;
}
.v-btn:active { transform: scale(.985); }
.v-btn--solid { background: var(--c-text); color: #0E0C0B; }
.v-btn--solid:hover { background: #fff; }
.v-btn--ghost { border-color: var(--c-accent); color: var(--c-text); background: transparent; }
.v-btn--start, .v-final .v-btn { width: 100%; }
.v-final { display: grid; gap: 10px; }

/* ---------- animações ---------- */
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.v-typing span { opacity: .8; }
}