.friend-heading,.friend-person,.friend-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.friend-heading{justify-content:space-between}.friend-card{background:white;border:1px solid #dce7e9;border-radius:22px;padding:18px;margin:12px 0}.friend-person{margin-bottom:14px;min-width:0}.friend-person .avatar{width:48px;height:48px;font-size:22px;flex-shrink:0}.friend-person strong{overflow-wrap:anywhere}.friend-actions button,.friend-heading button,#directOlder{border:1px solid #c8dde0;background:#e3f3f2;color:#163b48;border-radius:12px;padding:12px 16px;font:inherit;min-height:44px}.friend-actions button:disabled{opacity:.55}.friend-count{display:inline-flex;align-items:center;justify-content:center;background:#ae374e;color:white;border-radius:20px;min-width:20px;padding:2px 5px;font-size:12px;margin-left:4px}#friendPanel h2{font-size:1.25rem;margin:24px 0 12px}#directDialog{width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow-y:auto;overflow-x:hidden}#directDialog .modal{width:100%;max-width:100%;box-sizing:border-box;padding:24px}#directDialog h2{overflow-wrap:anywhere}#directDialog textarea{box-sizing:border-box;display:block;width:100%;max-width:100%;font:inherit;font-size:16px;border:1px solid #c8dde0;border-radius:14px;padding:12px;margin:8px 0 12px;resize:vertical}#directSend{width:100%;padding:14px;border-radius:14px;background:#0b303e;color:white;font:inherit}#directStatus{color:#9f384e;overflow-wrap:anywhere}#directForm label{display:block;margin-top:16px}.direct-messages{max-height:42dvh;overflow-y:auto;overscroll-behavior:contain;padding:12px 0;min-height:80px}.direct-messages .bubble{min-width:0;max-width:100%;overflow-wrap:anywhere}.direct-messages .message-row{align-items:flex-start}.direct-messages .avatar{width:36px;height:36px;font-size:18px;flex-shrink:0}.direct-body{white-space:pre-wrap;overflow-wrap:anywhere}.direct-messages .meta{font-size:12px;margin-top:8px}#directOlder{margin-top:12px}body:has(#directDialog[open]){overflow:hidden}
.mutual-friends{display:inline-flex;align-items:center;gap:6px;margin:10px 0 4px;padding:8px 12px;border-radius:999px;background:#e5f5f2;color:#176d6d;font-size:.88rem;font-weight:850}.profile-share-button{display:block;width:100%;margin:12px 0 0;padding:13px 16px;border:1px solid #8acbc5;border-radius:14px;background:#e8f6f2;color:#145b69;font:inherit;font-weight:900}.friend-qr-modal{text-align:center}.friend-qr-modal .modal-head{text-align:left}.friend-qr-frame{display:grid;place-items:center;margin:18px auto;padding:14px;width:min(292px,100%);box-sizing:border-box;border:1px solid #d6e8e7;border-radius:22px;background:#fff}.friend-qr-frame img{display:block;width:min(260px,100%);height:auto;aspect-ratio:1}.friend-share-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.friend-share-actions button{min-height:48px;border:1px solid #c8dde0;border-radius:13px;background:#edf7f6;color:#163b48;font:inherit;font-weight:850}.friend-share-actions .primary{background:#0b303e;color:#fff}.friend-qr-modal #friendShareStatus{min-height:1.5em;color:#287783;font-weight:800}@media(max-width:420px){.friend-share-actions{grid-template-columns:1fr}}