.comm-main{padding:20px;text-align:center}.show-friend-list-btn{width:150px;background-color:#4f73ff;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;padding:12px 24px;border-radius:10px;font-size:1rem;transition:background-color .3s,transform .3s}.friend-list-container{width:300px;position:absolute;margin-right:30px;right:0;border:1px solid #000;color:#000;background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.1)}.friend-item{display:flex;justify-content:center;margin:10px 0}.friend-card{width:300px;border:1px solid #000;background-color:#fff;border-radius:10px;padding:10px 15px;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:transform .2s}.friend-card:hover{transform:scale(1.05)}.topmain{flex-direction:column;align-items:center;font-size:24px;font-weight:700}.search-bar,.topmain{display:flex;justify-content:center;margin-bottom:20px}.search-bar{gap:30px;height:60px}.new-message-indicator{position:absolute;top:10px;right:10px;color:red;font-size:18px}.add-friend-btn{padding:8px 15px;background-color:#34d399;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}.add-friend-btn:hover{background-color:#059669}.friend-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center}.show-friend-list-btn{margin:10px 0;padding:10px;background-color:#60a5fa;color:#fff;border:none;cursor:pointer}.friend-list-container{margin-top:20px}.friend-list-container ul{list-style:none;padding:0}.friend-list-container li{padding:5px 0}.friend-menu{background-color:#fff;color:#000;padding:20px;border-radius:10px;text-align:center;width:300px;box-shadow:0 4px 15px rgba(0,0,0,.2)}.close-btn{background:none;font-size:18px;position:absolute;top:10px;right:10px}.cancel-btn,.close-btn{border:none;cursor:pointer}.cancel-btn{padding:10px 20px;background-color:#f87171;color:#fff;border-radius:5px;margin-left:10px}.cancel-btn:hover{background-color:#ef4444}.confirm-add-btn{padding:10px 20px;background-color:#60a5fa;color:#fff;border:none;border-radius:5px;cursor:pointer;margin-top:20px}.confirm-add-btn:hover{background-color:#3b82f6}.search-input{width:300px;padding:10px;border-radius:25px;border:2px solid #ccc;font-size:16px;outline:none;transition:all .3s ease}.user-name:after{content:"wanna visit";position:absolute;top:-25px;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:5px 10px;border-radius:4px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;white-space:nowrap;z-index:1000}.user-name:hover:after{opacity:1}.user-bio:after{content:"add friend";position:absolute;top:-25px;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:5px 10px;border-radius:4px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;white-space:nowrap;z-index:1000}.user-bio:hover:after{opacity:1}.search-input:focus{border-color:tomato;box-shadow:0 0 8px rgba(255,99,71,.5)}.cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;justify-items:center}.user-card{border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.1);padding:25px;text-align:center;transition:transform .3s ease;width:220px;height:200px;display:flex;flex-direction:column;justify-content:space-between}.user-card:hover{transform:translateY(-5px);box-shadow:0 6px 12px rgba(0,0,0,.15)}.user-name{position:relative;margin-top:-15px;font-size:15px;font-weight:500;color:#000}.user-emoji{margin-top:-10px;font-size:25px;color:tomato}.user-bio,.user-emoji{position:relative}.found-user{background-color:#fcc;border:2px solid tomato;box-shadow:0 4px 10px rgba(255,99,71,.2)}@media (max-width:600px){.cards-container{grid-template-columns:1fr}}