/* Demonstração interativa do robô (demo.js) e diagnóstico grátis (diagnostico.js) */
.demo-robo { max-width: 560px; margin: 0 auto; }
.demo-config, .demo-chat, .diag { display: grid; gap: .9rem; padding: 1.5rem; border-radius: 1.25rem; }
.demo-config h3, .diag h3 { margin: 0; font-size: 1.1rem; }
.demo-ajuda { margin: -.4rem 0 0; color: #94a3b8; font-size: .88rem; }
.demo-config label, .diag label { display: grid; gap: .4rem; font-size: .9rem; font-weight: 600; }
.demo-config input, .demo-config select, .demo-digitar input,
.diag input[type="text"], .diag input[type="tel"], .diag input[type="email"], .diag select {
	width: 100%; box-sizing: border-box; padding: .75rem .9rem; border-radius: .6rem;
	border: 1px solid rgb(148 163 184 / .26); background: #0b1328; color: #f8fafc; font: inherit; font-weight: 400;
}
.demo-config input:focus, .demo-config select:focus, .demo-digitar input:focus, .diag input:focus, .diag select:focus { outline: 2px solid #00c7f6; outline-offset: 1px; }

.demo-chat { gap: .75rem; padding: 0; overflow: hidden; }
.demo-cab { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; background: rgb(255 255 255 / .05); border-bottom: 1px solid rgb(148 163 184 / .16); }
.demo-cab div { display: grid; flex: 1; min-width: 0; }
.demo-cab strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-cab small { color: #22c55e; font-size: .78rem; }
.demo-avatar { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: linear-gradient(135deg, #2d7bff, #00c7f6); color: #fff; font-weight: 800; flex: none; }
.demo-refazer { border: 1px solid rgb(148 163 184 / .26); border-radius: 999px; padding: .35rem .75rem; background: transparent; color: #94a3b8; font: inherit; font-size: .8rem; cursor: pointer; }
.demo-refazer:hover { color: #f8fafc; }
.demo-log { display: flex; flex-direction: column; gap: .55rem; height: 340px; overflow-y: auto; padding: .5rem 1rem; scroll-behavior: smooth; }
.demo-log .msg { margin: 0; padding: .6rem .85rem; border-radius: 1rem; font-size: .92rem; line-height: 1.45; max-width: 85%; white-space: pre-line; overflow-wrap: anywhere; }
.demo-log .cliente { align-self: flex-end; background: #2d7bff; color: #fff; border-bottom-right-radius: .3rem; }
.demo-log .robo { align-self: flex-start; background: rgb(255 255 255 / .08); border-bottom-left-radius: .3rem; }
.demo-log .digitando { color: #94a3b8; font-style: italic; }
.demo-rapidas { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 1rem; }
.demo-chip { border: 1px solid rgb(0 199 246 / .45); border-radius: 999px; padding: .4rem .8rem; background: rgb(0 199 246 / .08); color: #e2f8ff; font: inherit; font-size: .84rem; cursor: pointer; }
.demo-chip:hover { background: rgb(0 199 246 / .18); }
.demo-digitar { display: flex; gap: .5rem; padding: 0 1rem; }
.demo-digitar input { flex: 1; min-width: 0; }
.demo-digitar .btn { flex: none; }
.demo-cta { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem; }
.demo-cta .btn { flex: 1 1 200px; justify-content: center; }
.demo-aviso { margin: 0; padding: 0 1rem 1rem; color: #94a3b8; font-size: .78rem; line-height: 1.5; }

.sub-secao a, .nota-planos a { color: #00c7f6; text-decoration: underline; text-underline-offset: 3px; }

/* Diagnóstico */
.diag { max-width: 640px; margin: 0 auto; }
.diag-legenda { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.diag-pergunta { position: relative; margin: 0; min-width: 0; display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: .9rem; background: rgb(255 255 255 / .03); border: 1px solid rgb(148 163 184 / .14); }
.diag-pergunta p { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.45; }
.diag-opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.diag-opcoes label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; padding: .4rem .8rem; border-radius: 999px; border: 1px solid rgb(148 163 184 / .26); cursor: pointer; }
.diag-opcoes input { accent-color: #2d7bff; }
.diag-opcoes label:has(input:checked) { border-color: #2d7bff; background: rgb(45 123 255 / .15); }
.diag-resultado { display: grid; gap: .75rem; }
.diag-nota { display: flex; align-items: baseline; gap: .5rem; }
.diag-nota strong { font-size: 2.4rem; line-height: 1; }
.diag-barra { height: .6rem; border-radius: 999px; background: rgb(255 255 255 / .08); overflow: hidden; }
.diag-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2d7bff, #00c7f6); transition: width .6s ease; }
.diag-dicas { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; color: #cbd5e1; font-size: .93rem; line-height: 1.5; }
.diag-dicas b { color: #f8fafc; }
.diag .consentimento { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; color: #94a3b8; line-height: 1.5; }
.diag .consentimento input { width: auto; margin-top: .2rem; }
.diag .consentimento a { text-decoration: underline; }