/* ==========================================================================
   AVM Advocacia — Validador (/analise/)
   Tela única, 100dvh, safe-area. O chat rola por baixo do topo e da base de vidro.
   ========================================================================== */

:root {
	--navy: #13263B;
	--petrol: #2F5D62;
	--sand: #EFE8DD;
	--offwhite: #FBF9F6;
	--gold: #B8955A;
	--font-heading: "Fraunces", Georgia, serif;
	--font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--muted: #364556;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.vd {
	margin: 0;
	background: var(--offwhite);
	color: var(--navy);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}
.admin-bar .vd-app { top: 46px; height: calc(100dvh - 46px); }
@media (min-width: 783px) { .admin-bar .vd-app { top: 32px; height: calc(100dvh - 32px); } }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 10px; }
.vd-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vd-app {
	--top-h: 92px;
	--dock-h: 120px;
	position: fixed;
	inset: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background:
		radial-gradient(70% 45% at 100% 0%, rgba(47, 93, 98, .10), transparent 70%),
		radial-gradient(60% 40% at 0% 100%, rgba(184, 149, 90, .12), transparent 70%),
		var(--offwhite);
}

/* Luzes de fundo (refratadas pelo vidro) */
.vd-orbs span { position: absolute; width: 420px; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: .18; pointer-events: none; }
.vd-orbs span:first-child { background: var(--petrol); top: -120px; right: -140px; }
.vd-orbs span:last-child { background: var(--gold); bottom: 10%; left: -180px; opacity: .16; }

/* ---------- Vidro (liquid glass claro) ---------- */
.vd-glass {
	background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .56));
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), 0 1px 0 rgba(19, 38, 59, .06);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .vd-glass { background: rgba(255, 255, 255, .97); } }
@media (prefers-reduced-transparency: reduce) { .vd-glass { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- Topo fixo ---------- */
.vd-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	padding-top: env(safe-area-inset-top);
	border-bottom: 1px solid rgba(255, 255, 255, .8);
}
.vd-top__inner {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
}
.vd-avatar {
	position: relative;
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 30% 25%, #3C7279, var(--petrol) 65%);
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .04em;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 6px 16px -6px rgba(47, 93, 98, .6);
}
.vd-online { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 50%; background: #1F9D55; border: 2.5px solid #fff; }
.vd-who { flex: 1; min-width: 0; }
.vd-who__name { font-weight: 700; font-size: 19px; line-height: 1.25; }
.vd-who__role { font-size: 18px; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-mono { display: grid; place-items: center; width: 56px; height: 48px; flex: none; border-radius: 14px; }
.vd-mono .monogram { width: 52px; height: auto; }
.vd-progress { height: 4px; background: rgba(184, 149, 90, .18); }
.vd-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #CDAE76, var(--gold)); border-radius: 0 4px 4px 0; transition: width .5s var(--ease); }

/* ---------- Área do chat ---------- */
.vd-scroll {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: calc(var(--top-h) + 20px) 0 calc(var(--dock-h) + 16px);
	display: flex;
	flex-direction: column;
}
.vd-log {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.vd-row { display: flex; animation: vd-in .35s var(--ease) both; scroll-margin-bottom: calc(var(--dock-h) + 18px); scroll-margin-top: calc(var(--top-h) + 12px); }
.vd-row--user { justify-content: flex-end; }
.vd-bubble {
	max-width: min(86%, 560px);
	padding: 14px 18px;
	font-size: 18px;
	line-height: 1.5;
	border-radius: 22px;
	overflow-wrap: anywhere;
}
.vd-bubble--bot {
	background: #fff;
	border: 1px solid var(--sand);
	border-bottom-left-radius: 6px;
	color: var(--navy);
	box-shadow: 0 1px 2px rgba(19, 38, 59, .04), 0 8px 20px -14px rgba(19, 38, 59, .25);
}
.vd-row--bot + .vd-row--bot .vd-bubble--bot { border-top-left-radius: 8px; }
.vd-bubble--user {
	background: linear-gradient(160deg, #1B344F, var(--navy));
	color: #fff;
	border-bottom-right-radius: 6px;
	font-weight: 600;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px -14px rgba(19, 38, 59, .8);
}
.vd-typing { display: inline-flex; gap: 6px; align-items: center; padding: 18px 20px; }
.vd-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--petrol); opacity: .35; animation: vd-dot 1s infinite; }
.vd-typing i:nth-child(3) { animation-delay: .15s; }
.vd-typing i:nth-child(4) { animation-delay: .3s; }
@keyframes vd-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes vd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.vd-noscript { max-width: 720px; margin: 20px auto; padding: 16px; background: #fff; border-radius: 16px; }

/* Rodapé mínimo */
.vd-foot {
	width: 100%;
	max-width: 760px;
	margin: 28px auto 0;
	padding: 16px 16px 4px;
	text-align: center;
	color: var(--muted);
	font-size: 18px;
	line-height: 1.5;
	display: grid;
	gap: 4px;
	border-top: 1px solid rgba(19, 38, 59, .1);
}
.vd-foot a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Base com respostas ---------- */
.vd-dock {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	border-top: 1px solid rgba(255, 255, 255, .85);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), 0 -12px 32px -18px rgba(19, 38, 59, .3);
	padding-bottom: env(safe-area-inset-bottom);
}
.vd-dock__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 12px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
}
.vd-options:empty { display: none; }
.vd-options { max-height: 56dvh; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.vd-opts { display: grid; gap: 8px; }
@media (min-width: 640px) { .vd-opts { grid-template-columns: 1fr 1fr; } }

.vd-opt {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 10px 18px;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	color: var(--navy);
	text-decoration: none;
	cursor: pointer;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, .95);
	background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	backdrop-filter: blur(14px) saturate(170%);
	box-shadow:
		inset 0 1px 1px #fff,
		inset 0 -2px 6px rgba(19, 38, 59, .05),
		0 0 0 1px rgba(19, 38, 59, .10),
		0 6px 16px -10px rgba(19, 38, 59, .4);
	transition: transform .15s var(--ease), box-shadow .2s, background .2s;
	-webkit-tap-highlight-color: transparent;
}
.vd-opt:hover { background: #fff; box-shadow: inset 0 1px 1px #fff, 0 0 0 1.5px var(--petrol), 0 10px 20px -12px rgba(19, 38, 59, .45); }
.vd-opt:active { transform: scale(.98); }
.vd-opt--primary {
	color: var(--navy);
	border-color: rgba(255, 255, 255, .5);
	background: linear-gradient(180deg, #D7BC86 0%, var(--gold) 55%, #A8854B 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 8px rgba(90, 60, 20, .25), 0 12px 24px -12px rgba(184, 149, 90, .9);
	font-size: 19px;
}
.vd-opt--primary:hover { background: linear-gradient(180deg, #DCC390 0%, #C09D62 55%, #A8854B 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 14px 26px -12px rgba(184, 149, 90, 1); }
.vd-opt--cta { min-height: 60px; }

.vd-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.vd-input {
	min-height: 56px;
	width: 100%;
	padding: 0 18px;
	font: 600 18px/1.2 var(--font-body);
	color: var(--navy);
	border-radius: 18px;
	border: 1.5px solid rgba(19, 38, 59, .25);
	background: rgba(255, 255, 255, .95);
	box-shadow: inset 0 2px 4px rgba(19, 38, 59, .06);
}
.vd-input::placeholder { color: #5A6878; font-weight: 400; }
.vd-input:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(47, 93, 98, .25); }
.vd-send { width: auto; padding: 0 22px; }
.vd-error { grid-column: 1 / -1; color: #8A2E1F; font-weight: 600; font-size: 18px; }

.vd-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	margin: 6px auto 0;
	padding: 0 14px;
	border: 0;
	background: transparent;
	color: var(--petrol);
	font: 700 18px/1.2 var(--font-body);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
	border-radius: 12px;
}
.vd-back[hidden] { display: none; }
.vd-back svg { width: 22px; height: 22px; }
.vd-dock__inner { display: flex; flex-direction: column; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}