.demo-main{max-width:1120px}.phones{display:grid;grid-template-columns:1fr 1fr;gap:24px}.phone{border:5px solid #21352a;border-radius:32px;padding:20px;min-width:0}.phone h2{margin-top:0}.demo-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.demo-messages{height:260px;overflow-y:auto;background:#f7f8f4;border-radius:12px;padding:10px}.demo-messages article{padding:12px;margin:8px 0}.demo-messages article.sent{background:#eee3c8}.demo-messages p{white-space:pre-wrap;overflow-wrap:anywhere}.phone form>button{margin:10px 6px 0 0}.demo-messages button{font-size:.8rem;padding:8px}.demo-messages small{display:block}.phone audio{max-width:100%}@media(max-width:700px){.phones{gap:10px}.phone{padding:10px;border-width:3px}.phone form>button{width:100%;font-size:.85rem;padding:8px}.phone textarea{font-size:.9rem}.demo-main{padding:18px 10px}.demo-messages{height:230px}.phone h2{font-size:1rem}.phone .note{font-size:.72rem}}
.demo-calendar{margin-top:24px;border-top:2px solid #d5ddd4;padding-top:16px}.demo-calendar article{padding:12px;margin:10px 0}.demo-calendar h4{margin:0}.demo-calendar button{margin:8px 6px 0 0;font-size:.85rem}.demo-calendar form{padding:12px;background:#f7f8f4;border-radius:12px}.demo-calendar input,.demo-calendar select{min-width:0}.demo-messages button{margin:5px 5px 0 0}