.demo{display:grid;grid-template-columns:440px minmax(0,1fr);height:100dvh;overflow:hidden;background:var(--ground)}
.demo-left{display:flex;flex-direction:column;gap:18px;padding:28px 32px;overflow-y:auto;background:linear-gradient(180deg,var(--kohl) 0,var(--kohl) 260px,var(--ground) 260px)}
.demo-intro{color:var(--on-kohl)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:12px;background:rgba(255,255,255,.12)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lamp-dot)}
.demo-intro h1{font-size:var(--fs-3xl);line-height:1.1;margin:10px 0 8px}
.demo-intro p{opacity:.85;font-size:var(--fs-s)}
.demo-right{min-width:0;min-height:0;display:flex}
.demo-right .console{flex:1;grid-template-columns:minmax(280px,340px) minmax(0,1fr);height:100%}
.phone{width:100%;max-width:376px;height:680px;align-self:center;display:flex;flex-direction:column;background:var(--sheet);border-radius:36px;border:8px solid #0E1024;box-shadow:var(--sh-3);overflow:hidden;position:relative}
.phone-top{display:flex;align-items:center;gap:10px;padding:14px 14px 10px;border-bottom:1px solid var(--rule);background:var(--sheet)}
.phone-top b{display:block;font-size:14.5px;line-height:1.2}
.phone-top span{font-size:11.5px;color:var(--ink-3)}
.pav{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#6E1F2B;color:#F6E7C8;font-family:var(--display);font-weight:700;flex:none}
.pav.lg{width:72px;height:72px;font-size:28px}
.phone-msgs{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:6px;background:var(--sheet)}
.phone-msgs .m{max-width:86%}
.phone-msgs .m.out .bub{background:#3A6FF0;color:#fff;border-bottom-right-radius:6px}
.phone-msgs .m.in .bub{background:var(--sunk);box-shadow:none;border-bottom-left-radius:6px}
.phone-msgs .m.in.staff .bub,.phone-msgs .m.in.ai .bub{background:var(--sunk)}
.phone-msgs .pcard{width:210px}
.phone-msgs .pcard .img{height:130px}
.phone-msgs .quick{justify-content:flex-start}
.phone-msgs .quick button{border-color:#3A6FF0;color:#3A6FF0}
.phone-msgs .pcard .acts button{color:#3A6FF0}
.phone-msgs .m.in .carousel{direction:ltr}
.phone-msgs .receipt{width:240px}
.phone-msgs .photo{width:150px;height:166px}
.phone-hello{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:30px 10px 10px;margin:auto 0}
.phone-hello b{font-size:17px;margin-top:6px}
.phone-hello > span:not(.pav){font-size:12px;color:var(--ink-3)}
.starters{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:16px}
.starters button{padding:8px 14px;border-radius:18px;border:1px solid var(--rule-2);font-size:13px;background:var(--sheet)}
.starters button:hover{border-color:#3A6FF0;color:#3A6FF0}
.phone-bar{display:flex;align-items:center;gap:4px;padding:8px 8px 12px;border-top:1px solid var(--rule)}
.phone-bar input{flex:1;min-width:0;height:40px;border-radius:20px;border:0;background:var(--sunk);padding:0 14px;outline:none}
.pbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#3A6FF0;flex:none}
.pbtn:hover{background:var(--sunk)}
.photo-pick{position:absolute;left:10px;right:10px;bottom:64px;background:var(--sheet);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--sh-3);padding:12px;font-size:12px;color:var(--ink-3)}
.photo-pick div{display:flex;gap:8px;margin-top:8px}
.photo-pick button{border-radius:10px;overflow:hidden;line-height:0;border:2px solid transparent}
.photo-pick button:hover{border-color:#3A6FF0}
.dots{display:inline-flex;gap:4px;padding:4px 2px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:dot 1.1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (max-width:1100px){
  .demo{grid-template-columns:1fr;height:auto;overflow:visible}
  .demo-right{height:100dvh}
  .demo-left{align-items:center}
  .demo-intro{max-width:376px}
}
@media (max-width:760px){
  .demo-right .console{grid-template-columns:1fr}
  .demo-right .pane{display:none}
  .demo-right .thread{display:flex}
  .demo-left{padding:20px 16px}
  .phone{height:620px;border-width:6px}
}