.phone-mockup{width:300px;height:520px;background:#000;border-radius:32px;border:8px solid #1f2937;box-shadow:0 20px 40px #0000001a;overflow:hidden;margin:0 auto;position:relative}.phone-screen{width:100%;height:100%;position:relative;background:#000;display:flex;flex-direction:column;color:#fff}.media-column{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}.use-case-selector{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;background:#ffffff08;padding:6px;border-radius:100px;border:1px solid rgba(255,255,255,.1)}.uc-chip{display:flex;align-items:center;gap:8px;background:transparent;border:none;padding:8px 16px;border-radius:20px;color:#a3a3a3;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.uc-chip:hover{color:#7c3aed;background:#7c3aed1a;border-color:#7c3aed33}.uc-chip.active{background:#7c3aed;color:#fff;box-shadow:0 2px 10px #7c3aed4d;font-weight:600}.uc-chip i{opacity:.8}.uc-chip.active i{opacity:1}.chat-header{height:50px;background:#1a1a1a;display:flex;align-items:center;padding:0 16px;gap:10px;border-bottom:1px solid #333;flex-shrink:0;z-index:10}.header-avatar{width:28px;height:28px;border-radius:50%;background-image:url(https://images.unsplash.com/photo-1556740758-90de374c12ad?w=100&auto=format&fit=crop&q=60);background-size:cover}.header-info{display:flex;flex-direction:column}.header-name{font-size:13px;font-weight:600;color:#fff;line-height:1.2}.header-status{font-size:10px;color:#a3a3a3}.chat-area{padding:20px 20px 40px;display:flex;flex-direction:column;justify-content:flex-end;gap:0;height:100%;overflow:hidden}.msg-item{opacity:0;max-height:0;margin-top:0;overflow:hidden;padding:0 16px;transform:translateY(20px)}.msg-right{align-self:flex-end;background:#262626;color:#fff;border-radius:18px 18px 4px;font-size:13px;max-width:85%;position:relative;margin-left:auto}.msg-left{align-self:flex-start;background:#0084ff;color:#fff;border-radius:4px 18px 18px;font-size:13px;max-width:85%;margin-right:auto}.msg-context{font-size:9px;color:#ffffffb3;margin-top:4px;font-style:italic}.msg-avatar-small{width:16px;height:16px;border-radius:50%;background-image:url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&auto=format&fit=crop&q=60);background-size:cover;position:absolute;right:-20px;bottom:0}.system-actions{align-self:center;display:flex;flex-direction:column;gap:4px;align-items:center;width:100%}.sys-action-row{display:flex;align-items:center;gap:6px;color:#a3a3a3;font-size:11px;justify-content:center}.sys-tag{padding:2px 6px;border-radius:4px;font-weight:600;font-size:10px}.folder-hot{background:#7f1d1d;color:#fca5a5}.folder-email{background:#1e3a8a;color:#93c5fd}.folder-cold{background:#374151;color:#9ca3af}.folder-purchased{background:#064e3b;color:#6ee7b7}.folder-payment{background:#5b21b6;color:#c4b5fd}.voice-msg{display:flex;align-items:center;gap:12px;padding:4px 0;min-width:160px}.voice-play{width:32px;height:32px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#000;flex-shrink:0;cursor:pointer}.voice-wave{display:flex;align-items:center;gap:3px;height:20px;flex:1}.voice-bar{width:3px;background:#fff6;border-radius:2px;animation:wave 1.2s infinite ease-in-out}.voice-bar:nth-child(odd){animation-duration:.8s}.voice-bar:nth-child(2n){animation-duration:1.1s}.voice-bar:nth-child(3n){animation-duration:1.3s}.voice-duration{font-size:11px;color:#ffffffb3;margin-left:4px;font-weight:500;min-width:24px}@keyframes wave{0%,to{height:4px}50%{height:100%}}.msg-options{display:flex;gap:6px;flex-wrap:wrap;max-width:85%}.opt-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:20px;font-size:12px;color:#fff}.btn-card{align-self:flex-start;background:#0084ff;border-radius:12px;overflow:hidden;width:100%;max-width:200px}.btn-text{padding:12px;text-align:center;font-weight:600;font-size:13px;background:#ffffff1a;cursor:pointer}.time-sep{align-self:center;color:#525252;font-size:10px;font-weight:600;text-transform:uppercase;margin:8px 0;text-align:center}.chat-area{padding:20px 20px 80px;display:flex;flex-direction:column;justify-content:flex-end;gap:0;flex:1;min-height:0;overflow:hidden}.chat-area .msg-item{animation-duration:30s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.25,1,.5,1);transform-origin:bottom center;flex-shrink:0}.chat-area .item-0{animation-name:reveal-small-stable;animation-delay:0s}.chat-area .item-1{animation-name:item1-anim}@keyframes item1-anim{0%,3%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}4%,95%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}.chat-area .item-2{animation-name:item2-anim}@keyframes item2-anim{0%,7%{opacity:0;max-height:0;margin:0;transform:translateY(10px)}8%,95%{opacity:1;max-height:60px;margin:4px 0;transform:translateY(0)}to{opacity:0;max-height:0;margin:0;transform:translateY(-10px)}}.chat-area .item-3{animation-name:item3-anim}@keyframes item3-anim{0%,11%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}12%,95%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}.chat-area .item-4{animation-name:item4-anim}@keyframes item4-anim{0%,15%{opacity:0;max-height:0;margin-top:0;transform:translateY(20px)}16%,23%{opacity:1;max-height:100px;margin-top:8px;transform:translateY(0)}24%,to{opacity:0;max-height:0;margin-top:0;transform:translateY(-10px)}}.chat-area .item-5{animation-name:item5-anim}@keyframes item5-anim{0%,21%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}22%,95%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}.chat-area .item-6{animation-name:item6-anim}@keyframes item6-anim{0%,25%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}26%,95%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}.chat-area .item-7{animation-name:item7-anim}@keyframes item7-anim{0%,29%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}30%,95%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}.chat-area .item-8{animation-name:item8-anim}@keyframes item8-anim{0%,34%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}35%,95%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}.chat-area .item-9{animation-name:item9-anim}@keyframes item9-anim{0%,38%{opacity:0;max-height:0;margin:0;transform:translateY(10px)}39%,95%{opacity:1;max-height:60px;margin:4px 0;transform:translateY(0)}to{opacity:0;max-height:0;margin:0;transform:translateY(-10px)}}.chat-area .item-10{animation-name:item10-anim}@keyframes item10-anim{0%,41%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}42%,95%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}.chat-area .item-11{animation-name:item11-anim}@keyframes item11-anim{0%,45%{opacity:0;max-height:0;margin-top:0;transform:translateY(20px)}46%,95%{opacity:1;max-height:60px;margin-top:4px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;transform:translateY(-20px)}}.chat-area .item-12{animation-name:item12-anim}@keyframes item12-anim{0%,49%{opacity:0;max-height:0;margin:0;transform:translateY(10px)}50%,95%{opacity:1;max-height:40px;margin:8px 0;transform:translateY(0)}to{opacity:0;max-height:0;margin:0;transform:translateY(-10px)}}.chat-area .item-ghost{animation-name:itemghost-anim}@keyframes itemghost-anim{0%,53%{opacity:0;max-height:0;margin:0;transform:translateY(10px)}54%,95%{opacity:1;max-height:40px;margin:8px 0;transform:translateY(0)}to{opacity:0;max-height:0;margin:0;transform:translateY(-10px)}}.chat-area .item-13{animation-name:item13-anim}@keyframes item13-anim{0%,57%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}58%,95%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}.chat-area .item-14{animation-name:item14-anim}@keyframes item14-anim{0%,61%{opacity:0;max-height:0;margin:0;transform:translateY(10px)}62%,95%{opacity:1;max-height:40px;margin:8px 0;transform:translateY(0)}to{opacity:0;max-height:0;margin:0;transform:translateY(-10px)}}.chat-area .item-15{animation-name:item15-anim}@keyframes item15-anim{0%,65%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}66%,95%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}.chat-area .item-16{animation-name:item16-anim}@keyframes item16-anim{0%,69%{opacity:0;max-height:0;margin:0;transform:translateY(10px)}70%,95%{opacity:1;max-height:40px;margin:8px 0;transform:translateY(0)}to{opacity:0;max-height:0;margin:0;transform:translateY(-10px)}}.chat-area .item-17{animation-name:item17-anim}@keyframes item17-anim{0%,73%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}74%,95%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}.chat-area .item-18{animation-name:item18-anim}@keyframes item18-anim{0%,79%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}80%,95%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}.chat-area .item-19{animation-name:item19-anim}@keyframes item19-anim{0%,84%{opacity:0;max-height:0;margin:0;transform:translateY(10px)}85%,95%{opacity:1;max-height:60px;margin:4px 0;transform:translateY(0)}to{opacity:0;max-height:0;margin:0;transform:translateY(-10px)}}.chat-area .item-20{animation-name:item20-anim}@keyframes item20-anim{0%,89%{opacity:0;max-height:0;margin:0;transform:translateY(10px)}90%,95%{opacity:1;max-height:40px;margin:8px 0;transform:translateY(0)}to{opacity:0;max-height:0;margin:0;transform:translateY(-10px)}}.chat-area[data-scenario=webinar] .item-4{animation-name:item4-webinar-persist!important}@keyframes item4-webinar-persist{0%,15%{opacity:0;max-height:0;margin:0;transform:translateY(10px)}18%,95%{opacity:1;max-height:80px;margin:4px 0;transform:translateY(0)}to{opacity:0;max-height:0;margin:0;transform:translateY(-10px)}}.chat-area[data-scenario=webinar] .item-5{animation-name:item5-webinar-temp!important}@keyframes item5-webinar-temp{0%,22%{opacity:0;max-height:0;margin:0;transform:translateY(10px)}23%,29%{opacity:1;max-height:60px;margin:8px 0;transform:translateY(0)}33%,to{opacity:0;max-height:0;margin:0;transform:translateY(-10px)}}@keyframes reveal-stable{0%{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(20px)}1%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}96%{opacity:1;max-height:200px;margin-top:10px;padding-top:12px;padding-bottom:12px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-20px)}}@keyframes reveal-small-stable{0%{opacity:0;max-height:0;margin:0;transform:translateY(10px)}1%{opacity:1;max-height:60px;margin:4px 0;transform:translateY(0)}96%{opacity:1;max-height:60px;margin:4px 0;transform:translateY(0)}to{opacity:0;max-height:0;margin:0;transform:translateY(-10px)}}@keyframes reveal-btn-stable{0%{opacity:0;max-height:0;margin-top:0;transform:translateY(20px)}1%{opacity:1;max-height:60px;margin-top:4px;transform:translateY(0)}96%{opacity:1;max-height:60px;margin-top:4px;transform:translateY(0)}to{opacity:0;max-height:0;margin-top:0;transform:translateY(-20px)}}@keyframes reveal-and-hide-options{0%{opacity:0;max-height:0;margin-top:0;transform:translateY(20px)}1%{opacity:1;max-height:100px;margin-top:8px;transform:translateY(0)}5%{opacity:1;max-height:100px;margin-top:8px;transform:translateY(0)}6%{opacity:0;max-height:0;margin-top:0;transform:translateY(-10px)}to{opacity:0;max-height:0;margin-top:0;transform:translateY(-10px)}}