/* Chat estilo conversa (hero e demonstração). Só cores e formas, sem marca de terceiros. Escopo: .wa-* */
.wa{font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;color:#111b21;line-height:1.32}
.stage{--w:clamp(290px,24cqw,500px);position:absolute;z-index:1;pointer-events:none;bottom:clamp(64px,10%,90px);right:clamp(24px,5%,120px);width:var(--w);font-size:max(13px,calc(var(--w)/24))}
.wa-head{display:flex;align-items:center;gap:.6em;margin-bottom:.7em;align-self:flex-start;background:rgba(255,255,255,.96);border-radius:2em;padding:.35em 1.1em .35em .35em;box-shadow:0 .1em .7em rgba(0,0,0,.22);width:max-content;max-width:100%}
.wa-av{width:2.5em;height:2.5em;border-radius:50%;background:#0A0A0A;display:grid;place-items:center;flex:none}
.wa-av svg{width:1.4em;height:1.4em}
.wa-head b{display:block;font-weight:600;line-height:1.15}
.wa-head small{display:block;font-size:.9em;line-height:1.2;color:#5d6b73}
.wa-head small.typing{color:#007a62}
.wa-msgs{display:flex;flex-direction:column;justify-content:flex-end;gap:.4em;height:25em;overflow:hidden;padding:.5em .2em .9em;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3.5em);mask-image:linear-gradient(180deg,transparent 0,#000 3.5em);transition:opacity .5s}
.wa-msgs.fade{opacity:0}
.wa-b{position:relative;flex:none;max-width:88%;padding:.5em .65em .3em;border-radius:.6em;background:#fff;box-shadow:0 1px .5px rgba(11,20,26,.18);opacity:0;transform:translateY(.9em) scale(.95);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.wa-b.show{opacity:1;transform:none}
.wa-b.in{align-self:flex-start;border-top-left-radius:0;transform-origin:0 0}
.wa-b.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:0;transform-origin:100% 0}
.wa-b.in::before,.wa-b.out::before{content:"";position:absolute;top:0;width:.55em;height:.7em}
.wa-b.in::before{left:-.5em;background:#fff;clip-path:polygon(100% 0,100% 100%,0 0)}
.wa-b.out::before{right:-.5em;background:#d9fdd3;clip-path:polygon(0 0,0 100%,100% 0)}
.wa-b.wide{max-width:94%;min-width:0}
.wa-b::after{content:"";display:table;clear:both}
.wa-meta{float:right;margin:.75em 0 -.1em .8em;font-size:.8em;line-height:1;color:#5d6b73;display:inline-flex;gap:.3em;align-items:center;white-space:nowrap}
.wa-ticks{width:1.3em;height:.9em;fill:none;stroke:#7b8a93;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.wa-ticks .t2{opacity:0;transition:opacity .2s}
.wa-ticks[data-s="delivered"] .t2,.wa-ticks[data-s="read"] .t2{opacity:1}
.wa-ticks[data-s="read"]{stroke:#53bdeb}
.wa-dots{display:flex;gap:.28em;padding:.35em .2em .25em}
.wa-dots i{width:.5em;height:.5em;border-radius:50%;background:#8696a0;animation:wadot 1.1s infinite}
.wa-dots i:nth-child(2){animation-delay:.18s}.wa-dots i:nth-child(3){animation-delay:.36s}
@keyframes wadot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-.3em);opacity:1}}
.wa-spin{display:flex;align-items:center;gap:.6em;padding:.2em 0 .25em;color:#3b4a54;font-size:.95em}
.wa-spin i{width:1.05em;height:1.05em;border-radius:50%;border:.16em solid #d1d7db;border-top-color:#00a884;animation:waspin .8s linear infinite;flex:none}
@keyframes waspin{to{transform:rotate(360deg)}}
.wa-card-h{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-weight:600;padding-bottom:.4em;margin-bottom:.45em;border-bottom:1px solid #e1e6e9}
.wa-rows{display:grid;gap:.3em;font-size:.95em}
.wa-rows div{display:flex;justify-content:space-between;gap:1em}
.wa-rows span:last-child{text-align:right;font-weight:600}
.wa-rows span:first-child{color:#4d5d66}
.wa-track{display:flex;gap:.3em;margin:.55em 0 .2em}
.wa-track i{flex:1;height:.4em;border-radius:1em;background:#dfe5e8}
.wa-track i.on{background:#25a244}
.wa-tl{display:flex;justify-content:space-between;font-size:.85em;color:#4d5d66;margin-bottom:.35em}
.wa-qr{display:flex;flex-wrap:wrap;gap:.35em;margin-top:.5em}
.wa-qr span{border:1px solid #cfd8dc;border-radius:1em;padding:.2em .7em;color:#0b57d0;font-weight:600;font-size:.92em;background:#fff;transition:background .2s,color .2s,border-color .2s}
.wa-qr span.sel{background:#0b57d0;color:#fff;border-color:#0b57d0}
.wa-ok{background:#e7f6ec;border:1px solid #8ad7a8;border-radius:.6em;padding:.45em .6em;margin:.1em 0 .2em}
.wa-ok .wa-card-h{border-bottom-color:#b9e3c8;color:#0b6b3a}
.wa-ok svg{width:1.2em;height:1.2em;flex:none}
.wa-photo{margin:-.2em -.35em .35em;border-radius:.45em;overflow:hidden;line-height:0}
.wa-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}

@media (prefers-reduced-motion:reduce){.wa-b,.wa-msgs{transition:none}.wa-dots i,.wa-spin i{animation:none}}