.demo-chat{--page-bg:#f4f1ec;--page-ink:#2b2926;--wa-header:#075e54;--wa-accent:#128c7e;--wa-chat-bg:#e7ddd3;--wa-bubble-bot:#fff;--wa-bubble-sent:#dcf8c6;--wa-ink:#1f2c34;--wa-ink-soft:#667781;--panel-line:#d8d2c8;background:var(--page-bg);color:var(--page-ink);font-family:-apple-system,Segoe UI,Helvetica Neue,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:40px 20px 60px}.demo-chat *{box-sizing:border-box}.demo-chat .page-head{max-width:640px;text-align:center;margin-bottom:28px}.demo-chat .page-head .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--wa-accent);font-weight:700;margin:0 0 10px}.demo-chat .page-head h1{font-size:clamp(22px,3.4vw,30px);margin:0 0 10px;text-wrap:balance}.demo-chat .page-head p{font-size:14.5px;line-height:1.55;color:#5b5750;margin:0}.demo-chat .stage{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;justify-content:center}.demo-chat .phone{width:375px;max-width:90vw;background:#000;border-radius:36px;padding:10px;box-shadow:0 20px 50px rgba(43,41,38,.25),0 2px 8px rgba(43,41,38,.12)}.demo-chat .phone-screen{background:var(--wa-chat-bg);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;height:700px}.demo-chat .wa-header{background:var(--wa-header);color:#fff;padding:14px 16px;gap:12px}.demo-chat .wa-avatar,.demo-chat .wa-header{display:flex;align-items:center;flex-shrink:0}.demo-chat .wa-avatar{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--wa-header);justify-content:center;font-weight:700;font-size:15px}.demo-chat .wa-header-text{flex:1 1;min-width:0}.demo-chat .wa-header-name{font-size:15.5px;font-weight:600;line-height:1.2}.demo-chat .wa-header-status{font-size:12.5px;opacity:.85;line-height:1.2}.demo-chat .wa-transcript{flex:1 1;overflow-y:auto;padding:14px 10px;display:flex;flex-direction:column;gap:6px}.demo-chat .bubble-row{display:flex}.demo-chat .bubble-row.bot{justify-content:flex-start}.demo-chat .bubble-row.sent{justify-content:flex-end}.demo-chat .bubble{max-width:78%;padding:7px 11px 8px;border-radius:8px;font-size:14px;line-height:1.42;white-space:pre-wrap;box-shadow:0 1px .5px rgba(0,0,0,.08);position:relative}.demo-chat .bubble.bot{background:var(--wa-bubble-bot);color:var(--wa-ink);border-top-left-radius:2px}.demo-chat .bubble.sent{background:var(--wa-bubble-sent);color:var(--wa-ink);border-top-right-radius:2px}.demo-chat .bubble .time{display:block;text-align:right;font-size:10.5px;color:var(--wa-ink-soft);margin-top:3px}.demo-chat .typing-row{display:flex;justify-content:flex-start}.demo-chat .typing-bubble{background:var(--wa-bubble-bot);border-radius:8px;border-top-left-radius:2px;padding:10px 14px;display:flex;gap:4px;box-shadow:0 1px .5px rgba(0,0,0,.08)}.demo-chat .typing-bubble span{width:6px;height:6px;border-radius:50%;background:var(--wa-ink-soft);opacity:.5;animation:demo-chat-blink 1.2s ease-in-out infinite}.demo-chat .typing-bubble span:nth-child(2){animation-delay:.15s}.demo-chat .typing-bubble span:nth-child(3){animation-delay:.3s}@keyframes demo-chat-blink{0%,80%,to{opacity:.3}40%{opacity:.9}}@media (prefers-reduced-motion:reduce){.demo-chat .typing-bubble span{animation:none;opacity:.6}}.demo-chat .wa-quickreplies{flex-shrink:0;border-top:1px solid #d8d2c8;background:#f7f5f2;padding:10px 10px 12px;display:flex;flex-direction:column;gap:8px}.demo-chat .qr-options{display:flex;flex-wrap:wrap;gap:8px}.demo-chat .qr-btn{border:1.5px solid var(--wa-accent);color:var(--wa-accent);background:#fff;border-radius:18px;padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;line-height:1.2}.demo-chat .qr-btn:hover{background:#e8f6f4}.demo-chat .qr-btn:focus-visible{outline:2px solid var(--wa-accent);outline-offset:2px}.demo-chat .qr-btn:active{transform:translateY(1px)}.demo-chat .qr-utility{display:flex;gap:8px;justify-content:space-between;border-top:1px dashed #d8d2c8;padding-top:8px}.demo-chat .qr-utility-btn{border:none;background:none;color:var(--wa-ink-soft);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 6px}.demo-chat .qr-utility-btn:hover{color:var(--wa-ink)}.demo-chat .qr-utility-btn.restart{color:#b0413e}.demo-chat .side-panel{width:300px;max-width:90vw;background:#fff;border:1px solid var(--panel-line);border-radius:10px;padding:20px 20px 22px;box-shadow:0 1px 3px rgba(43,41,38,.05)}.demo-chat .side-panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--wa-accent);margin:0 0 12px;font-weight:700}.demo-chat .side-panel .step-name{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px;background:#f4f1ec;border-radius:5px;padding:8px 10px;margin:0 0 16px;color:#5b5750;word-break:break-word}.demo-chat .side-panel p{font-size:13.5px;line-height:1.6;color:#5b5750;margin:0 0 10px}.demo-chat .side-panel .hint{font-size:12.5px;color:var(--wa-ink-soft);border-top:1px solid var(--panel-line);padding-top:12px;margin-top:14px}