.contacts.wrapper{flex-direction:column;display:flex}.contacts.wrapper .header{justify-content:space-between;align-items:center;display:flex}.contacts.list{flex-direction:column;gap:20px;max-width:400px;display:flex}.contacts.list .card.contact{background-color:#fff;border-radius:20px;gap:20px;padding:20px;display:flex;position:relative}.contacts.list .card.contact:hover{color:var(--secondary);cursor:pointer}.contacts.list .card.contact .avatar{color:#333;background-color:#f0f0f0}.contacts.list .card.contact .details .badge{position:absolute;top:10px;right:10px}.preview-contact{border-radius:20px;max-width:360px;margin:auto;padding:24px}.preview-contact-header{align-items:center;gap:12px;margin-bottom:20px;display:flex}.preview-contact-avatar{background:#f0f0f0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-weight:600;display:flex;overflow:hidden}.preview-contact-avatar img{object-fit:cover;width:100%;height:100%}.preview-contact-title{flex:1}.preview-contact-title h3{margin:0 0 4px;font-size:16px}.preview-contact-badge{color:#555;background:#eee;border-radius:12px;align-items:center;gap:4px;padding:2px 8px;font-size:12px;display:inline-flex}.preview-contact-badge-agent{color:#1a56db;background:#e8f0fe}.preview-contact-close{cursor:pointer;color:#888;background:0 0;border:none}.preview-contact-body{flex-direction:column;gap:12px;display:flex}.preview-contact-row{color:#333;align-items:center;gap:10px;font-size:14px;display:flex}.preview-contact-row a{color:inherit;text-decoration:none}.preview-contact-row a:hover{text-decoration:underline}.preview-contact-notes{border-top:1px solid #eee;margin-top:8px;padding-top:12px}.preview-contact-notes h4{color:#888;margin:0 0 6px;font-size:13px}.preview-contact-notes p{color:#444;margin:0;font-size:14px}