.friend-graph{position:relative;width:100%;user-select:none;min-height:calc(100vh - 100px);border-radius:8px;padding:60px 0 0;overflow:hidden}#friend-edges{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.friend-edge{stroke:#e0e0e0;stroke-width:1;transition:stroke 0.3s}.friend-node{position:absolute;width:3.8rem;cursor:move;z-index:2;transition:transform 0.3s}.friend-node.dragging{z-index:3;transform:scale(1.05)}.node-icon{display:flex;justify-content:center;align-items:center;width:3.8rem;height:3.8rem;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 4px 6px rgb(0 0 0 / .1);background:#fff;margin-bottom:8px}.node-icon img{width:75%;height:75%;pointer-events:none;user-select:none;object-fit:cover}.node-info{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;background:rgb(255 255 255 / .9);padding:15px;border-radius:8px;box-shadow:0 2px 4px rgb(0 0 0 / .05);opacity:0;transition:opacity 0.3s;pointer-events:none;position:absolute;width:240px;left:50%;z-index:1001;transform:translateX(-50%)}.friend-node:hover{z-index:1001}.friend-node:hover .node-info{opacity:1}.node-info h3{margin:0 0 4px;font-size:14px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-info p{margin:0;font-size:12px;color:#666;display:-webkit-box;overflow:hidden}@media (max-width:767px){.friend-node{position:absolute;width:2.5rem}.node-icon{width:2.5rem;height:2.5rem}}