.demo{--paper:#fafafa;--ink:#0a0a0a;--ink-2:#4b5563;--ink-3:#9ca3af;--line:#e5e7eb;--card:#fff;--accent:#9333ea;--accent-soft:#f3e8ff;--wa:#25d366;--wa-dark:#075e54;--wa-wall:#efe7dd;--bubble-me:#dcf8c6;--bubble-in:#fff;--ig-blue:#0095f6;--ig-bubble:#efefef;--ig-me:#3797f0;--ok:#16a34a;color:var(--ink);font-size:16px;line-height:1.5}.demo .phone{width:min(100%,320px);margin-inline:auto;background:#141414;border-radius:40px;padding:11px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);max-width:100%;cursor:pointer}.demo .screen{background:var(--paper);border-radius:30px;overflow:hidden;height:590px;display:flex;flex-direction:column;position:relative;text-align:left}.demo .status{height:26px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;font-size:11px;font-weight:600;flex:none}.demo .status.dark{background:var(--wa-dark);color:#fff}.demo .avatar{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}.demo .urlbar{background:var(--card);padding:8px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}.demo .urlbar .u{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo .urlbar .u b{color:var(--ink);font-weight:600}.demo .langs{display:flex;gap:3px}.demo .langs span{font-size:9px;font-weight:700;color:var(--ink-3);padding:2px 4px;border-radius:4px}.demo .langs span.on{background:var(--ink);color:var(--paper)}.demo .scr-head{background:var(--card);padding:10px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}.demo .scr-head .who{font-size:14px;font-weight:600;line-height:1.1}.demo .scr-head .who small{display:block;font-weight:400;color:var(--ok);font-size:11px}.demo .chat{flex:1;overflow:hidden;padding:12px 10px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}.demo .msg{max-width:84%;padding:8px 11px;border-radius:14px;font-size:13.5px;line-height:1.35;background:var(--card);color:var(--ink);box-shadow:0 1px 1px rgba(0,0,0,.06);animation:demo-pop .35s ease-out both}.demo .msg.me{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:4px}.demo .msg.bot{align-self:flex-start;border-bottom-left-radius:4px}.demo .msg.hint{align-self:center;background:transparent;box-shadow:none;color:var(--ink-3);font-size:12px;text-align:center}@keyframes demo-pop{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}.demo .styles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}.demo .sw{aspect-ratio:1;border-radius:8px;border:2px solid transparent;position:relative;overflow:hidden}.demo .sw.sel{border-color:var(--accent)}.demo .sw span{position:absolute;left:0;right:0;bottom:0;font-size:9px;padding:2px 4px;background:rgba(0,0,0,.55);color:#fff;text-align:center}.demo .sw.s1{background:repeating-linear-gradient(135deg,#f3f3f3 0 6px,#c9c9c9 6px 7px)}.demo .sw.s2{background:radial-gradient(circle at 40% 35%,#777 0,#222 60%)}.demo .sw.s3{background:conic-gradient(from 20deg,#c0392b,#f1c40f,#27ae60,#2c3e50,#c0392b)}.demo .sw.s4{background:linear-gradient(160deg,#111 55%,#f4f4f4 0)}.demo .opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.demo .opt{font-size:12px;padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:var(--card)}.demo .opt.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}.demo .typing{display:inline-flex;gap:3px;padding:10px 12px;align-self:flex-start;background:var(--card);border-radius:14px;border-bottom-left-radius:4px}.demo .typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:demo-blink 1s infinite}.demo .typing i:nth-child(2){animation-delay:.2s}.demo .typing i:nth-child(3){animation-delay:.4s}@keyframes demo-blink{0%,80%,to{opacity:.25}40%{opacity:1}}.demo .summary{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:12.5px;display:grid;gap:5px;margin-top:6px}.demo .summary h5{margin:0;font-size:12px;font-weight:700}.demo .summary div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:4px}.demo .summary div span:first-child{color:var(--ink-3)}.demo .btn-wa{margin-top:8px;background:var(--wa);color:#fff;font-weight:700;font-size:13px;text-align:center;padding:10px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px}.demo .btn-wa.press{animation:demo-press .5s ease-out}@keyframes demo-press{50%{transform:scale(.96)}}.demo .scr-foot{background:var(--card);padding:8px 12px;font-size:12px;color:var(--ink-3);border-top:1px solid var(--line);display:flex;justify-content:space-between}.demo .scr-foot b{color:var(--ink);font-weight:600}.demo .wa-screen{position:absolute;inset:0;background:var(--wa-wall);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}.demo .wa-screen.in{transform:none}.demo .wa-static{transform:none;position:relative;inset:auto;flex:1}.demo .wa-head{background:var(--wa-dark);color:#fff;padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.demo .wa-head small{display:block;font-weight:400;font-size:11px;opacity:.85}.demo .wa-head .avatar{background:#fff;color:var(--wa-dark)}.demo .wa-head .back{font-size:18px;opacity:.9;margin-right:-4px}.demo .wa-head .ic{margin-left:auto;display:flex;gap:14px;font-size:14px;opacity:.9}.demo .wa-body{flex:1;padding:12px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden;background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 0);background-size:14px 14px}.demo .wa-msg{max-width:88%;border-radius:10px;padding:7px 9px;font-size:12px;line-height:1.4;white-space:pre-line;box-shadow:0 1px 1px rgba(0,0,0,.1);color:var(--ink);position:relative;animation:demo-pop .35s ease-out both}.demo .wa-msg.out{align-self:flex-end;background:var(--bubble-me);border-top-right-radius:2px}.demo .wa-msg.in{align-self:flex-start;background:var(--bubble-in);border-top-left-radius:2px}.demo .wa-msg b{font-weight:700}.demo .wa-msg .tick{display:block;text-align:right;font-size:10px;color:var(--ink-3);margin-top:3px}.demo .wa-msg .tick i{color:#53bdeb;font-style:normal}.demo .wa-msg a{color:#027eb5;text-decoration:none}.demo .wa-prev{margin:6px -3px 0;background:rgba(0,0,0,.06);border-left:4px solid var(--wa);border-radius:6px;padding:6px 8px;display:grid;gap:2px}.demo .wa-prev b{font-size:11.5px}.demo .wa-prev span{font-size:10.5px;color:var(--ink-2)}.demo .wa-prev small{font-size:10px;color:var(--ink-3)}.demo .wa-note{background:rgba(0,0,0,.08);color:var(--ink-2);padding:4px 10px;border-radius:999px}.demo .wa-day,.demo .wa-note{align-self:center;font-size:10.5px}.demo .wa-day{padding:3px 9px;border-radius:7px;box-shadow:0 1px 1px rgba(0,0,0,.08)}.demo .wa-day,.demo .wa-foot{background:var(--card);color:var(--ink-3)}.demo .wa-foot{padding:8px 10px;font-size:12px;display:flex;gap:8px;align-items:center;border-top:1px solid var(--line)}.demo .wa-foot span{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 12px}.demo .wa-foot em{width:32px;height:32px;border-radius:50%;background:var(--wa-dark);display:grid;place-items:center;font-style:normal;color:#fff;font-size:13px}.demo .wa-typing{align-self:flex-start;background:var(--bubble-in);border-radius:10px}.demo .ig{background:var(--card);color:var(--ink);flex:1;display:flex;flex-direction:column;overflow:hidden}.demo .ig-top{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font-weight:700;font-size:15px}.demo .ig-top span{font-size:16px;color:var(--ink-2)}.demo .ig-prof{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:4px 14px;align-items:center}.demo .ring{width:76px;height:76px;border-radius:50%;padding:3px;background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}.demo .ring div{width:100%;height:100%;border-radius:50%;background:var(--ink);border:3px solid var(--card);display:grid;place-items:center;color:var(--paper);font-weight:800;font-size:22px}.demo .stats{display:flex;justify-content:space-around;text-align:center;font-size:11px;color:var(--ink-2)}.demo .stats b{display:block;font-size:15px;color:var(--ink)}.demo .bio{padding:8px 14px 0;font-size:12.5px;line-height:1.45}.demo .bio b{display:block;font-weight:600}.demo .bio .lnk{display:flex;align-items:center;gap:5px;color:#00376b;font-weight:600;margin-top:4px;background:var(--ig-bubble);border-radius:7px;padding:5px 8px;width:-moz-max-content;width:max-content;max-width:100%;font-size:12px}.demo .ig-btns{display:flex;gap:6px;padding:10px 14px}.demo .ig-btns span{flex:1;text-align:center;font-size:12.5px;font-weight:600;padding:7px;border-radius:8px;background:var(--ig-bubble)}.demo .ig-btns span.f{background:var(--ig-blue);color:#fff}.demo .ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:6px;flex:1;align-content:start}.demo .ig-grid i{aspect-ratio:1;display:block}.demo .ig-grid i:first-child{background:radial-gradient(circle at 30% 30%,#777,#111)}.demo .ig-grid i:nth-child(2){background:repeating-linear-gradient(45deg,#eee 0 7px,#999 7px 8px)}.demo .ig-grid i:nth-child(3){background:linear-gradient(160deg,#111 50%,#444 0)}.demo .ig-grid i:nth-child(4){background:conic-gradient(#333,#000,#555,#333)}.demo .ig-grid i:nth-child(5){background:radial-gradient(circle at 70% 60%,#555,#1a1a1a)}.demo .ig-grid i:nth-child(6){background:repeating-radial-gradient(circle,#ddd 0 4px,#333 4px 5px)}.demo .scene{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--paper);transform:translateY(100%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}.demo .scene.in{transform:none}.demo .scene.fade{transform:none;opacity:0;transition:opacity .4s;pointer-events:none}.demo .scene.fade.in{opacity:1}.demo .tap{position:relative}.demo .tap:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--accent);opacity:0;pointer-events:none}.demo .tap.go:after{animation:demo-tap .7s ease-out both}@keyframes demo-tap{0%{opacity:.6;transform:scale(.6)}to{opacity:0;transform:scale(3.2)}}.demo .overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.18);z-index:5}.demo .overlay span{width:64px;height:64px;border-radius:50%;background:var(--card);color:var(--ink);display:grid;place-items:center;font-size:24px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding-left:4px}.demo .sk{flex:1;display:flex;flex-direction:column;gap:10px;padding:16px}.demo .sk i{display:block;height:12px;border-radius:6px;background:var(--line);animation:demo-blink 1.2s infinite}.demo .sk i:first-child{width:60%}.demo .sk i:nth-child(2){width:85%}.demo .sk i:nth-child(3){width:40%}.demo .ctrl{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px}.demo .ctrl button{font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px}.demo .ctrl button:hover{border-color:var(--ink)}.demo .ctrl button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.demo .ctrl .state{font-size:12px;color:var(--ink-3)}.demo .link-chip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--card);border:1px solid var(--line);padding:8px 12px;border-radius:10px;display:inline-flex;gap:8px;align-items:center}.demo .link-chip i{width:8px;height:8px;border-radius:50%;background:var(--ok)}.demo .mini-chat{width:100%;display:flex;flex-direction:column;gap:5px}.demo .mini-chat .m{font-size:11.5px;padding:5px 8px;border-radius:9px;background:var(--card);border:1px solid var(--line);max-width:80%}.demo .mini-chat .m.me{align-self:flex-end;background:var(--ink);color:var(--paper);border-color:var(--ink)}.demo .quote{width:100%;display:grid;gap:6px}.demo .q-msg{background:var(--bubble-me);border-radius:10px;border-top-left-radius:2px;padding:7px 9px;font-size:11px;line-height:1.3;color:var(--ink);box-shadow:0 1px 1px rgba(0,0,0,.08)}.demo .q-msg ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:2px}.demo .q-msg li{display:flex;gap:6px;align-items:center}.demo .q-msg li:before{content:"✓";color:var(--ok);font-weight:700;font-size:11px}.demo .q-save{display:grid;gap:1px;font-size:11.5px;font-weight:700;color:var(--ok);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 9px}.demo .q-save small{font-weight:500;color:var(--ink-3);font-size:10.5px}.demo .dm-wall{position:relative;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:9px;overflow:hidden}.demo .dm{display:flex;gap:9px;align-items:flex-start}.demo .dm .av{width:28px;height:28px;border-radius:50%;flex:none;background:linear-gradient(135deg,#f58529,#dd2a7b 55%,#8134af)}.demo .dm .b{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:7px 10px;font-size:14px}.demo .dm .t{font-size:11px;color:var(--ink-3);margin-top:2px}.demo .dm-wall .fade{position:absolute;inset:auto 0 0 0;height:70px;background:linear-gradient(to bottom,transparent,var(--card))}.demo.small .phone{width:min(100%,280px);padding:9px;border-radius:34px}.demo.small .screen{height:520px;border-radius:26px}@media (prefers-reduced-motion:reduce){.demo .btn-wa.press,.demo .msg,.demo .sk i,.demo .typing i,.demo .wa-msg{animation:none}.demo .scene,.demo .wa-screen{transition:none}}.demo.small .ig-prof{grid-template-columns:64px 1fr;gap:10px}.demo.small .ring{width:64px;height:64px}.demo.small .ring div{font-size:18px}.demo.small .stats{font-size:10px;justify-content:space-between}.demo.small .stats b{font-size:14px}.demo .pop{animation:demo-pop .35s ease-out both}.demo .press{animation:demo-press .5s ease-out}