
:root{--bg:#080a08;--panel:#1e1f1e;--gold:#c8a24e;--gold-bright:#e2bf6d;--green:#0fad0c;--fg:#f6f5f2;--muted:#a3a6a2;font-family:Arial,"Helvetica Neue",sans-serif}
*{box-sizing:border-box}
html,body{height:100%;min-height:100%;margin:0;background:#070907;color:var(--fg)}
button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}
a{color:var(--gold-bright);text-underline-offset:3px}
.page{height:100dvh;min-height:450px;display:flex;justify-content:center;align-items:center;background:#050705}
.chat{display:flex;flex-direction:column;position:relative;width:min(100%,640px);height:100dvh;min-height:450px;overflow:hidden;background:var(--bg);box-shadow:0 0 90px #0008}
.chat-header{flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(#050805,#0c100b);height:136px;padding:13px 12px 10px;z-index:3}
.brand-logo{max-height:90px;max-width:240px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 10px #c99e3220)}
.brand-caption{font-size:9px;letter-spacing:.22em;font-weight:700;color:#a8a69b;margin-top:7px}
.brand-caption span{color:var(--gold)}
.goldline{height:3px;flex:0 0 3px;background:linear-gradient(90deg,#694a15,#e8c46d 20%,#af8128 78%,#6c4812);box-shadow:0 1px 11px #cfa84770;z-index:5}
.chat-main{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.grid-background{pointer-events:none;position:absolute;inset:0;opacity:.72;background-color:#080a08;background-image:linear-gradient(#b6a16a0c 1px,transparent 1px),linear-gradient(90deg,#b6a16a0b 1px,transparent 1px),radial-gradient(circle at 50% 0%,#54402016,transparent 60%);background-size:47px 47px,47px 47px,100% 100%}
.messages{z-index:1;position:relative;flex:1;min-height:0;overflow-y:auto;padding:24px 20px 35px 18px;scroll-behavior:smooth;display:flex;flex-direction:column;gap:19px;overscroll-behavior:contain}
.turn{display:flex;gap:12px;align-items:flex-end;width:100%;animation:rise .18s ease both}
.turn.bot{align-self:flex-start}
.turn.user{align-self:flex-end;justify-content:flex-end}
.avatar{width:39px;height:39px;flex:0 0 39px;border:2px solid #d3c6a9;border-radius:50%;object-fit:cover;object-position:center 25%;background:#292d2d;box-shadow:0 2px 13px #0008}
.bubble{border-radius:21px;padding:16px 19px;max-width:min(84%,430px);font-size:17px;line-height:1.58;letter-spacing:-.015em;overflow-wrap:anywhere}
.bot .bubble{background:#1e201f;border:1px solid #282b29;border-bottom-left-radius:6px;box-shadow:0 2px 14px #0005}
.user .bubble{background:#11170f;border:1px solid #8a762d;border-radius:24px;border-bottom-right-radius:6px;box-shadow:0 0 16px #a7861c10;max-width:min(82%,405px)}
.highlight{color:var(--gold-bright);font-weight:800}
.typing{display:flex;gap:5px;width:65px;height:39px;align-items:center;justify-content:center}
.typing i{height:6px;width:6px;border-radius:50%;background:#d8ba67;animation:bounce 1s infinite;opacity:.3}
.typing i:nth-child(2){animation-delay:.13s}.typing i:nth-child(3){animation-delay:.26s}
@keyframes bounce{0%,70%,100%{transform:translateY(0);opacity:.35}35%{transform:translateY(-4px);opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.composer{z-index:2;flex:0 0 auto;position:relative;background:linear-gradient(180deg,#070807fa,#090a08);padding:12px 20px max(17px,env(safe-area-inset-bottom));border-top:1px solid #b08b2825}
.composer[hidden],.choices[hidden],.answer-form[hidden],.multi-wrap[hidden],.consent[hidden],#otherWrap[hidden],.whatsapp[hidden]{display:none!important}
.choices{display:grid;gap:9px;max-height:44dvh;overflow-y:auto;padding-right:4px}
.choice{border:1px solid #8b7832;color:#f4eee1;background:#11160e;padding:13px 17px;font-size:15px;text-align:left;border-radius:15px;line-height:1.3;min-height:48px;transition:background .18s,border .18s}
.choice:active,.choice:hover,.choice:focus-visible{background:#2b2717;border-color:var(--gold-bright);outline:0}
.answer-form{display:flex;gap:10px;align-items:center}
.answer-form input,#otherInput{border:1px solid #5b5133;background:#191b17;color:#fff;font-size:16px;padding:14px 16px;border-radius:14px;min-width:0;width:100%;outline:0}
.answer-form input:focus,#otherInput:focus{border-color:var(--gold-bright);box-shadow:0 0 0 2px #cfac5622}
.answer-form input::placeholder,#otherInput::placeholder{color:#a3a19a}
.send{background:var(--gold);color:#12120f;flex:0 0 51px;height:49px;display:grid;place-items:center;border:0;border-radius:14px}
.multi-wrap{max-height:min(54dvh,460px);overflow-y:auto}.multi-list{display:grid;grid-template-columns:1fr;gap:8px}
.hint{color:#b1b0a6;font-size:12px;margin:0 0 9px}
.multi-choice{display:flex;width:100%;align-items:center;gap:10px;border:1px solid #725f2c;border-radius:13px;background:#11160e;color:#fff;min-height:45px;padding:11px 13px;text-align:left;font-size:14px}
.multi-choice .check{width:18px;height:18px;flex:0 0 18px;border:1px solid #ad9559;border-radius:5px;display:grid;place-items:center;color:transparent;font-weight:800;font-size:13px}
.multi-choice.selected{border-color:#e3bd65;background:#282414}.multi-choice.selected .check{background:var(--gold);border-color:var(--gold);color:#111}
.field-label{display:block;font-size:12px;margin:11px 0 5px;color:#c9c4b9}
.next{border:0;background:var(--gold);color:#14130b;border-radius:12px;width:100%;font-weight:800;letter-spacing:.02em;min-height:47px;margin-top:10px}
.next span{font-size:21px;vertical-align:-1px;margin-left:5px}
.consent{border-top:1px solid #42391f;margin-top:12px;padding-top:10px;color:#c5c3b7;font-size:11px;line-height:1.5}
.consent label{display:flex;gap:9px;align-items:flex-start;cursor:pointer}
.consent input{accent-color:var(--gold);min-width:15px;height:15px;margin:1px 0 0}
.consent p{font-size:10px;margin:5px 0 0 24px;color:#958e7d}
.feedback{color:#f0b1a6;font-size:12px;line-height:1.5;margin:7px 0 0}.feedback:empty{display:none}
.whatsapp{min-height:60px;width:100%;border:1px solid #64d456;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:18px;font-weight:800;letter-spacing:.015em;text-decoration:none;background:linear-gradient(180deg,#23c622,#078e08);color:#fff;box-shadow:0 10px 25px #06710730}
.whatsapp:hover{filter:brightness(1.06)}
@media(min-width:700px){.page{padding:18px}.chat{height:min(92dvh,920px);border:1px solid #28231a;border-radius:16px}.messages{padding-left:24px;padding-right:24px}}
@media(max-width:440px){.chat-header{height:112px;padding-top:8px}.brand-logo{max-height:74px;max-width:200px}.brand-caption{font-size:8px}.messages{gap:16px;padding:18px 13px 20px 12px}.avatar{width:33px;height:33px;flex-basis:33px}.turn{gap:9px}.bubble{font-size:15.5px;padding:13px 15px;max-width:calc(100% - 45px)}.composer{padding:10px 14px max(13px,env(safe-area-inset-bottom))}.choice{font-size:14px;padding:12px 13px;min-height:46px}.multi-choice{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;scroll-behavior:auto!important}}

.demo-notice{font-size:10px;color:#999183;margin:10px 0 0 1px;line-height:1.4}
.demo-notice[hidden]{display:none!important}
