.demo{z-index:1;position:relative}.phone{background:linear-gradient(#241a12,#17100c);border:1px solid #ffffff24;border-radius:26px;max-width:430px;margin-inline:auto;padding:12px;box-shadow:0 40px 80px -40px #000000e6,0 0 0 6px #ffffff08}.phone-top{border-bottom:1px solid #ffffff14;align-items:center;gap:8px;padding:4px 6px 12px;display:flex}.dot{background:var(--accent);width:9px;height:9px;box-shadow:0 0 12px var(--accent);border-radius:50%}.phone-title{letter-spacing:-.01em;font-size:.92rem;font-weight:800}.phone-sub{color:#cdb8a6;margin-left:auto;font-size:.72rem;font-weight:600}.call-bar{color:#cdb8a6;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;align-items:center;gap:8px;margin:10px 2px 0;padding:8px 10px;font-size:.72rem;animation:.3s both pop;display:flex}.live{color:#86efac;align-items:center;gap:6px;font-weight:800;display:inline-flex}.live i{background:#22c55e;border-radius:50%;width:7px;height:7px;animation:1.1s infinite pulse}.callee{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.timer{font-variant-numeric:tabular-nums;margin-left:auto}.thread::-webkit-scrollbar{display:none}.thread{scrollbar-width:none;flex-direction:column;gap:10px;min-height:330px;max-height:400px;padding:12px 4px 8px;display:flex;overflow-y:auto}@media (width>=480px){.thread{min-height:360px;max-height:430px}}.msg{max-width:88%;animation:.34s cubic-bezier(.22,1,.36,1) both pop}.msg .who{letter-spacing:.08em;text-transform:uppercase;color:#a89080;margin-bottom:4px;font-size:.66rem;font-weight:800}.bubble{border-radius:16px;padding:10px 13px;font-size:.9rem;line-height:1.45}.msg.you{text-align:right;align-self:flex-end}.msg.you .bubble{color:#fff;text-align:left;background:linear-gradient(120deg,#f43f8e,#ff8fc0);border-bottom-right-radius:5px}.msg.them .bubble{color:#fdf3ea;background:#ffffff12;border:1px solid #ffffff1a;border-bottom-left-radius:5px}.msg.them .trans{color:#ffd6e8;border-left:2px solid var(--accent);margin-top:6px;padding-left:10px;font-size:.86rem;animation:.4s both fade}.msg.melanie .bubble{color:#ffe0ef;background:#ff8fc024;border:1px dashed #f43f8e80}.msg.melanie .wave{vertical-align:-1px;align-items:flex-end;gap:2px;height:12px;margin-right:7px;display:inline-flex}.msg.melanie .wave i{background:var(--accent);border-radius:2px;width:2px;animation:.9s ease-in-out infinite eq}.msg.melanie .wave i:nth-child(2){animation-delay:.12s}.msg.melanie .wave i:nth-child(3){animation-delay:.24s}.msg.melanie .wave i:nth-child(4){animation-delay:.36s}.sys{color:#cdb8a6;text-align:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:999px;align-self:center;padding:6px 12px;font-size:.74rem;animation:.3s both pop}.summary{background:linear-gradient(140deg,#22c55e29,#ff8fc024);border:1px solid #22c55e59;border-radius:16px;align-self:stretch;padding:14px;animation:.4s both pop}.summary h4{align-items:center;gap:7px;margin:0 0 8px;font-size:.92rem;display:flex}.summary ul{gap:5px;display:grid}.summary li{color:#f0e4d8;padding-left:14px;font-size:.84rem;position:relative}.summary li:before{content:"•";color:#86efac;position:absolute;left:2px}.typing{gap:3px;display:inline-flex}.typing i{opacity:.75;background:#fff;border-radius:50%;width:5px;height:5px;animation:1s infinite blink}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}.composer{background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:10px;margin-top:6px;padding:10px 8px 10px 14px;display:flex}.composer-text{color:#cdb8a6;text-align:left;flex:1;min-height:1.2em;font-size:.86rem}.composer-text.ph{color:#8a7263}.composer-text .caret{vertical-align:-2px;background:#f43f8e;width:1px;height:1em;animation:.8s step-end infinite blink;display:inline-block}.send{color:#fff;background:linear-gradient(120deg,#f43f8e,#ff8fc0);border-radius:50%;flex:none;place-items:center;width:32px;height:32px;display:grid}.demo-ctl{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:16px;display:flex}.ctl{cursor:pointer;color:#fdf3ea;font:inherit;background:0 0;border:1px solid #ffffff29;border-radius:999px;align-items:center;gap:7px;padding:7px 14px;font-size:.82rem;font-weight:700;display:inline-flex}.ctl:hover{border-color:#ff8fc0}.ctl-note{color:#6f5a4a;font-size:.78rem}@keyframes pop{0%{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes blink{0%,60%{opacity:1}61%,to{opacity:.2}}@keyframes pulse{0%{box-shadow:0 0 #22c55e8c}70%{box-shadow:0 0 0 7px #22c55e00}to{box-shadow:0 0 #22c55e00}}@keyframes eq{0%,to{height:4px}50%{height:12px}}