:root{
  --wa-green:#008069; --wa-teal:#00a884; --wa-out:#d9fdd3; --wa-in:#ffffff; --wa-bg:#efeae2; --wa-ink:#111b21; --wa-muted:#667781; --wa-line:#e9edef;
  --wa-chip:#ffffff; --wa-chip-ink:#008069; --tick:#53bdeb;
  --asls:#1BA4A9; --page:#f3f9fa; --ink:#06232a; --ink2:#41595e;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Tahoma, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);background:var(--page);color:var(--wa-ink);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}

/* layout: phone in the middle on desktop, full screen on phones */
.stage{min-height:100%;display:flex;align-items:center;justify-content:center;gap:56px;padding:28px}
.phone{position:relative;width:400px;height:min(860px,calc(100vh - 56px));border-radius:36px;overflow:hidden;display:flex;flex-direction:column;
  background:var(--wa-bg);box-shadow:0 0 0 10px #0b1416,0 0 0 11px #253235,0 40px 90px -30px rgba(6,35,42,.55)}
.pitch{max-width:420px;color:var(--ink)}
.pitch-logo{height:46px;display:block;margin-bottom:28px}
.pitch-kicker{margin:0 0 10px;color:var(--asls);font-weight:700;font-size:15px;line-height:1.8}
.pitch-title{margin:0 0 18px;font-size:30px;line-height:1.55;font-weight:800;text-wrap:balance}
.pitch-list{margin:0 0 26px;padding:0 20px 0 0;color:var(--ink2);font-size:16px;line-height:1.95}
.pitch-list li{margin-bottom:6px;text-wrap:pretty}
.pitch-qr{display:flex;align-items:center;gap:16px;padding:14px;background:#fff;border-radius:18px;box-shadow:0 18px 40px -26px rgba(6,35,42,.45);width:max-content}
.pitch-qr img{width:96px;height:96px;display:block;image-rendering:pixelated}
.pitch-qr span{font-weight:700;color:var(--ink);font-size:15px;line-height:1.7}
.pitch-note{margin:18px 0 0;font-size:12.5px;color:#6b8389;line-height:1.9;max-width:380px}
@media (max-width:900px){
  .stage{padding:0;gap:0}
  .pitch{display:none}
  .phone{width:100%;height:100dvh;border-radius:0;box-shadow:none}
}

/* demo strip */
.demo-strip{display:flex;align-items:center;gap:8px;justify-content:center;padding:6px 12px;background:#06232a;color:#e9f6f7;font-size:12px;line-height:1.7}
.demo-strip img{height:16px;width:auto}

/* header */
.wa-head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 12px;background:var(--wa-green);color:#fff;flex:none}
.icon-btn{background:none;border:0;color:#fff;padding:4px;display:grid;place-items:center}
.icon-btn svg{width:24px;height:24px}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#2a6a4e;flex:none}
.who{display:flex;flex-direction:column;min-width:0;flex:1}
.who strong{font-size:16.5px;font-weight:600;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{font-size:12.5px;opacity:.88;line-height:1.5}
.head-icons{display:flex;gap:18px;padding-inline-start:6px}
.head-icons svg{width:22px;height:22px}

/* body + doodle-like pattern (own drawing, not WhatsApp's) */
.wa-body{flex:1;overflow-y:auto;padding:12px 12px 6px;display:flex;flex-direction:column;gap:4px;
  background-color:var(--wa-bg);background-image:url("/static/pattern.svg");background-size:240px 240px;scroll-behavior:smooth}
.day-chip,.enc-chip{align-self:center;background:#fff;color:var(--wa-muted);font-size:12.5px;line-height:1.7;padding:5px 12px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);margin:6px 0}
.enc-chip{background:#ffeecd;color:#54656f;text-align:center;max-width:86%}

.msg{max-width:82%;padding:6px 9px 8px;border-radius:9px;box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:15px;line-height:1.85;white-space:pre-wrap;word-wrap:break-word;position:relative;margin-top:2px;animation:pop .18s ease-out}
.msg.in{align-self:flex-start;background:var(--wa-in);border-top-right-radius:0}
.msg.out{align-self:flex-end;background:var(--wa-out);border-top-left-radius:0}
.msg .meta{display:flex;align-items:center;gap:3px;justify-content:flex-end;font-size:11px;color:var(--wa-muted);margin-top:2px;line-height:1.4}
.msg .meta svg{width:16px;height:11px;color:var(--tick)}
@keyframes pop{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

/* product cards (image messages) */
.cards{align-self:flex-start;display:flex;flex-direction:column;gap:6px;max-width:82%;margin-top:2px}
.card{background:#fff;border-radius:9px;overflow:hidden;box-shadow:0 1px .5px rgba(11,20,26,.13);width:270px;max-width:100%;animation:pop .2s ease-out}
.card button.ph{display:block;border:0;padding:3px 3px 0;background:none;width:100%}
.card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:7px;background:#f0f2f5}
.card .cb{padding:6px 10px 4px}
.card h4{margin:0;font-size:15px;line-height:1.75;font-weight:600}
.card p{margin:0;font-size:13px;color:var(--wa-muted);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .price{display:flex;justify-content:space-between;align-items:center;padding:4px 10px 8px;font-weight:700;font-size:14px;color:var(--wa-ink)}
.card .add{border:0;background:none;color:var(--wa-teal);font-weight:700;font-size:14px;padding:4px 0}
.card .cta{display:block;width:100%;border:0;border-top:1px solid var(--wa-line);background:#fff;color:var(--wa-teal);font-weight:600;font-size:14.5px;padding:9px 0;line-height:1.6}

/* order button message */
.order{align-self:flex-start;background:#fff;border-radius:9px;box-shadow:0 1px .5px rgba(11,20,26,.13);overflow:hidden;width:270px;max-width:82%;animation:pop .2s ease-out}
.order a{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;color:var(--wa-teal);font-weight:700;text-decoration:none;font-size:15px;line-height:1.6}
.order a svg{width:18px;height:18px}

/* typing */
.typing{align-self:flex-start;background:#fff;border-radius:9px;border-top-right-radius:0;padding:10px 14px;display:flex;gap:4px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.typing i{width:7px;height:7px;border-radius:50%;background:#9aa7ad;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* quick replies */
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 10px 2px;background:transparent;flex:none;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips:empty{display:none}
.chip{flex:none;border:0;background:var(--wa-chip);color:var(--wa-chip-ink);font-weight:600;font-size:14px;padding:7px 14px;border-radius:18px;box-shadow:0 1px .5px rgba(11,20,26,.18);line-height:1.6;white-space:nowrap}
.chip:active{transform:scale(.97)}

/* composer */
.wa-input{display:flex;align-items:center;gap:6px;padding:6px 8px calc(8px + env(safe-area-inset-bottom));flex:none}
.field{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border-radius:24px;padding:0 12px;min-height:46px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.field input{flex:1;border:0;outline:0;font:inherit;font-size:16px;background:none;color:var(--wa-ink);line-height:1.6;padding:10px 0}
.emo{width:24px;height:24px;color:#8696a0;flex:none}
.send{width:48px;height:48px;border-radius:50%;border:0;background:var(--wa-teal);color:#fff;display:grid;place-items:center;flex:none}
.send svg{width:22px;height:22px;transform:scaleX(-1)}
.send:disabled{opacity:.6}

/* product sheet */
.sheet{border:0;border-radius:16px;padding:0;width:min(92vw,380px);overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.sheet::backdrop{background:rgba(11,20,26,.55)}
.sheet img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sheet-body{padding:14px 16px 4px}
.sheet-body h3{margin:0 0 6px;font-size:18px;line-height:1.7}
.sheet-body p{margin:0 0 8px;color:var(--wa-muted);line-height:1.9;font-size:14.5px}
.sheet-close{display:block;width:100%;border:0;border-top:1px solid var(--wa-line);background:#fff;color:var(--wa-teal);font-weight:700;padding:12px;font-size:15px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}