.contact-selector { padding: 8px 0; } .loading { padding: 8px; color: #666; } .card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .row { display:flex; align-items:center; gap:12px; } .avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; background:#f2f2f2; display:flex; align-items:center; justify-content:center; } .avatar img { width:100%; height:100%; object-fit:cover; } .info { flex:1; min-width:0; } .name { font-weight:600; font-size:15px; } .meta { margin-top:4px; color:#666; display:flex; gap:6px; flex-wrap:wrap; } .chip { background:#f3f6ff; color:#2b4eff; border-radius:10px; padding:2px 8px; font-size:12px; } .actions { display:flex; gap:8px; } .btn { padding:6px 10px; border:1px solid #ccc; border-radius:6px; cursor:pointer; background:#fff; } .btn.primary { background:#2b4eff; color:#fff; border-color:#2b4eff; } .btn.outline { background:#fff; } .toolbar { margin:8px 0; } .search { width:100%; padding:8px; border:1px solid #ddd; border-radius:6px; } .section { margin-top:12px; } .section-title { font-size:13px; color:#555; margin-bottom:6px; } .list { display:flex; flex-direction:column; gap:8px; } .item { display:flex; align-items:center; padding:8px; border:1px solid #eee; border-radius:8px; background:#fff; } .item:hover { background:#fafafa; } .thumb { width:36px; height:36px; border-radius:50%; overflow:hidden; background:#f2f2f2; display:flex; align-items:center; justify-content:center; } .thumb img { width:100%; height:100%; object-fit:cover; } .detail { flex:1; min-width:0; margin-left:10px; } .title { font-size:14px; font-weight:500; } .sub { font-size:12px; color:#777; } .ops { display:flex; align-items:center; } .overlay { position:fixed; inset:0; background:rgba(0,0,0,0.2); } @media (max-width: 768px) { .customer-panel { width:100vw!important; height:100vh!important; top:0px!important; left:0px; position: absolute; } } .customer-panel { z-index:100;position:fixed; right:20px; top:60px; width:480px; height:90vh; background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.1); overflow:auto; padding:8px; } .customer-panel .close { position:absolute; right:12px; top:10px; padding:6px 10px; }