.topbarContainer{height:50px;width:100%;background-color:#1877f2;display:flex;align-items:center;position:sticky;top:0;z-index:999}.topbarLeft{flex:3}.logo{font-size:24px;margin-left:20px;font-weight:700;color:#fff;cursor:pointer}.topbarCenter{flex:3;display:flex;align-items:center;justify-content:center}.topbarCenter .search-container{width:100%;margin:0}.searchbar{width:100%;height:30px;background-color:#fff;border-radius:30px;display:flex;align-items:center}.searchIcon{font-size:20px!important;margin-left:10px}.searchInput{border:none;width:70%}.searchInput:focus{outline:none}.topbarRight{flex:4;display:flex;align-items:center;justify-content:flex-end;color:#fff;gap:25px;padding-right:25px}.topbarLink{margin-right:10px;font-size:14px;cursor:pointer}.topbarIcons{display:flex;align-items:center}.topbarIconItem{cursor:pointer;position:relative}.topbarIconBadge{width:15px;height:15px;background-color:red;border-radius:50%;color:#fff;position:absolute;top:-5px;right:-5px;display:flex;align-items:center;justify-content:center;font-size:12px}.topbarImg{width:32px;height:32px;border-radius:50%;object-fit:cover;cursor:pointer}.notification-panel{position:absolute;top:50px;right:0;width:300px;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;z-index:1000}.notification-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #eee}.notification-header h3{margin:0;font-size:16px;color:#333}.clear-btn{background:none;border:none;color:#1877f2;cursor:pointer;font-size:14px;padding:4px 8px;border-radius:4px}.clear-btn:hover{background-color:#f0f2f5}.notification-list{max-height:400px;overflow-y:auto}.notification-item{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid #eee;transition:background-color .2s}.notification-item:hover{background-color:#f0f2f5}.notification-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-right:12px}.notification-content{flex:1}.notification-text{margin:0 0 4px;font-size:14px;color:#333}.notification-time{font-size:12px;color:#65676b}.no-notifications{padding:20px;text-align:center;color:#65676b;font-size:14px}.notification-list::-webkit-scrollbar{width:6px}.notification-list::-webkit-scrollbar-track{background:#f1f1f1}.notification-list::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.notification-list::-webkit-scrollbar-thumb:hover{background:#555}.search-container{position:relative;width:100%;max-width:600px;margin:0 auto}.search-input{width:100%;padding:12px 20px;border:1px solid #ddd;border-radius:20px;font-size:16px;outline:none;transition:border-color .3s ease}.search-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a}.search-results{position:absolute;top:100%;left:0;right:0;background:#fff;border-radius:8px;box-shadow:0 4px 12px #0000001a;margin-top:8px;z-index:1000;max-height:400px;overflow-y:auto}.search-section{padding:4px 8px;border-bottom:1px solid #eee}.search-section:last-child{border-bottom:none}.section-title{font-size:14px;font-weight:600;color:#666;margin:0 0 4px;padding:0 8px}.suggestions-list{list-style:none;padding:0;margin:0}.suggestion-item{padding:6px 12px;cursor:pointer;border-radius:4px;transition:background-color .2s ease}.suggestion-item:hover{background-color:#f5f5f5}.user-item{display:flex;align-items:center;gap:12px}.user-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.user-info{display:flex;flex-direction:column;flex:1}.user-fullname{font-weight:600;color:#1a1a1a;font-size:14px}.user-username{font-size:13px;color:#666}.post-item{display:flex;gap:12px;align-items:flex-start}.post-thumbnail{width:80px;height:60px;object-fit:cover;border-radius:4px;flex-shrink:0}.post-content{display:flex;flex-direction:column;gap:2px;flex:1}.post-creator{display:flex;align-items:center;gap:6px;margin-bottom:2px}.creator-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}.creator-username{font-size:13px;color:#666}.post-title{margin:0;font-size:14px;font-weight:500;color:#1a1a1a;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.search-section+.search-section{margin-top:8px}.sidebar{flex:3;height:100vh;overflow-y:auto;position:sticky;top:50px;background-color:#fff;z-index:99}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:#ccc;border-radius:10px}::-webkit-scrollbar-thumb{background-color:#b3b3b3}.sidebarWrapper{padding:20px;position:sticky;top:0}.sidebarList{padding:0;margin:0;list-style:none;top:0}.sidebarListItem{display:flex;align-items:center;margin-bottom:20px;cursor:pointer;padding:8px 12px;border-radius:8px;transition:background-color .2s}.sidebarListItem:hover{background-color:#f0f2f5}.sidebarIcon{margin-right:15px}.sidebarButton{width:150px;border:none;padding:10px;border-radius:5px;font-weight:500}.sidebarHr{margin:20px 0}.sidebarFriendList{padding:0;margin:0;list-style:none}.profile-dropdown{position:relative}.dropdown-arrow{margin-left:auto;transition:transform .2s}.profile-dropdown.active .dropdown-arrow{transform:rotate(180deg)}.profile-dropdown-content{margin-left:20px;margin-top:-10px;margin-bottom:10px;border-left:2px solid #e4e6eb;padding-left:10px}.profile-dropdown-content .sidebarListItem{margin-bottom:12px}.rightbar{flex:2.5;width:300px;padding:16px;background-color:#f9fafb;border-left:1px solid #e5e7eb;height:100vh;overflow-y:auto;position:sticky;top:0}@media (max-width: 768px){.rightbar{display:none}}.usercard-item{display:flex;align-items:center;margin-bottom:16px;padding:10px;border-radius:8px;background:#f7f7f7}.usercard-user{display:flex;align-items:center;width:100%}.usercard-username{font-size:1rem;font-weight:500}.usercard-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-right:12px}.btn-follow{background:#1976d2;color:#fff;border:none;padding:6px 16px;border-radius:5px;cursor:pointer;margin-left:16px}.btn-unfollow{background:#e53935;color:#fff;border:none;padding:6px 16px;border-radius:5px;cursor:pointer;margin-left:16px}.feed{flex:5}.sidebarFriend{display:flex;align-items:center;margin-bottom:15px}.sidebarFriendImg{width:32px;height:32px;border-radius:50%;object-fit:cover;margin-right:10px}.postTopLeft,.postTopRight{display:flex;align-items:center;gap:1rem}.postSkillName{font-weight:700;color:#1976d2}.postMenu{position:relative}.postDropdownMenu{position:absolute;right:0;top:2rem;background:#fff;border:1px solid #eee;border-radius:6px;box-shadow:0 2px 8px #0000001a;z-index:10}.menuItem{display:block;width:100%;padding:.5rem 1rem;border:none;background:none;text-align:left}.deleteMenuItem{color:red}.postTitle{font-weight:700;font-size:1.2rem;margin:.5rem 0}.postCommentIconActive{color:#222;font-size:24px!important}.postCommentIconInactive{color:#1976d2;font-size:24px!important}.post{width:100%;border-radius:10px;-webkit-box-shadow:0px 0px 16px -8px rgba(0,0,0,.68);box-shadow:0 0 16px -8px #000000ad;margin:30px 0}.postWrapper{padding:10px}.postTop{display:flex;align-items:center;justify-content:space-between}.postTopLeft{display:flex;align-items:center}.postProfileImg{width:32px;height:32px;border-radius:50%;object-fit:cover}.postUsername{font-size:15px;font-weight:500;margin:0 10px}.postDate{font-size:12px}.postCenter{margin:20px 0}.postImg{margin-top:20px;width:100%;max-height:500px;object-fit:contain}.postBottom{display:flex;align-items:center;justify-content:space-between}.postBottomLeft{display:flex;align-items:center}.likeIcon{width:24px;height:24px;margin-right:5px;cursor:pointer}.postLikeCounter{font-size:15px}.postCommentText{cursor:pointer;background:none;border:none;padding:4px 8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}.postCommentText:hover{background:#e3eafc}.postMedia{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;width:100%}.mediaItem{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:8px}.postImg,.postVideo{width:100%;height:100%;object-fit:cover}.postTopRight{display:flex;align-items:center;gap:10px}.deleteIcon{cursor:pointer;color:#f44;transition:color .2s ease}.deleteIcon:hover{color:#c00}.postDropdownMenu{opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .2s,transform .2s}.postMenu .postDropdownMenu{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.menuItem{display:block;width:100%;padding:10px 16px;background:none;border:none;text-align:left;cursor:pointer;font-size:15px}.menuItem:focus,.menuItem:hover{background:#f0f0f0}.deleteMenuItem{color:#d32f2f}.comments-columns{display:flex;gap:2rem}.general-comments{flex:1;background:#fff;border-radius:8px;padding:1rem;margin-right:.5rem}.feedback-comments{flex:1;background:#f5faff;border-radius:8px;padding:1rem;margin-left:.5rem}.comment-type-select{padding:.4rem .7rem;border-radius:5px;border:1px solid #ccc;margin-right:.5rem}.comments-container{padding:1rem;background:#f9f9f9;border-radius:8px}.comment-item{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;background:#f7f7f7;border-radius:8px;padding:8px 14px;box-shadow:0 1px 4px #0000000a}.comment-content{display:flex;flex-direction:column;gap:2px}.comment-author{font-weight:600;color:#1976d2;font-size:.98rem}.comment-text{font-size:1rem;color:#222;word-break:break-word;margin-top:2px}.comment-time{color:#999;font-size:.8rem;margin-left:.5rem}.delete-btn{background:none;color:#e53935;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background .2s;display:flex;align-items:center}.delete-btn:hover{background:#ffeaea}.comment-input-area{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}.comment-input-area input{flex:1;padding:.5rem .8rem;border-radius:6px;border:1px solid #ccc;font-size:1rem}.comment-post-btn{background:#1976d2;color:#fff;border:none;border-radius:6px;padding:6px 18px;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s}.comment-post-btn:hover{background:#1565c0}.emoji-picker{position:absolute;z-index:100}.share{width:100%;border-radius:10px;-webkit-box-shadow:0px 0px 16px -8px rgba(0,0,0,.68);box-shadow:0 0 16px -8px #000000ad}.shareWrapper{padding:10px}.shareTop{display:flex;align-items:center}.shareProfileImg{width:50px;height:50px;border-radius:50%;object-fit:cover;margin-right:10px}.shareInput{border:none;width:80%}.shareInput:focus{outline:none}.shareHr{margin:20px}.shareBottom{display:flex;align-items:center;justify-content:space-between}.shareOptions{display:flex;margin-left:20px}.shareOption{display:flex;align-items:center;margin-right:15px;cursor:pointer}.shareIcon{font-size:18px;margin-right:3px}.shareOptionText{font-size:14px;font-weight:500}.shareButton{border:none;padding:7px;border-radius:5px;background-color:green;font-weight:500;margin-right:20px;cursor:pointer;color:#fff}.shareImgContainer{padding:0 20px 10px;position:relative}.shareImg{width:100%;object-fit:cover}.shareCancelImg{position:absolute;top:0;right:20px;cursor:pointer;opacity:.7}.homeContainer{display:flex;width:100%}.login{width:100vw;height:100vh;background-color:#f0f2f5;display:flex;align-items:center;justify-content:center}.loginWrapper{width:70%;height:70%;display:flex}.loginLeft,.loginRight{flex:1;display:flex;flex-direction:column;justify-content:center}.loginLogo{font-size:50px;font-weight:800;color:#1775ee;margin-bottom:10px}.loginDesc{font-size:24px}.loginBox{height:300px;padding:20px;background-color:#fff;border-radius:10px;display:flex;flex-direction:column;justify-content:space-between}.loginInput{height:50px;border-radius:10px;border:1px solid gray;font-size:18px;padding-left:20px}.loginInput:focus{outline:none}.loginButton{height:50px;border-radius:10px;border:none;background-color:#1775ee;color:#fff;font-size:20px;font-weight:500;cursor:pointer}.loginButton:focus{outline:none}.loginButton:disabled{cursor:not-allowed}.loginForgot{text-align:center;color:#1775ee}.loginRegisterButton{width:60%;align-self:center;height:50px;border-radius:10px;border:none;background-color:#42b72a;color:#fff;font-size:20px;font-weight:500;cursor:pointer}.editBioBtn{background:#007bff14;color:#007bff;border:none;padding:6px 14px;border-radius:16px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-size:14px;margin-left:10px;transition:background .2s}.editBioBtn:hover{background:#007bff2e}.editBioIcon{font-size:18px}.editBioTextarea{width:100%;resize:vertical;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:15px;margin-top:6px;margin-bottom:6px;background:#f8faff;color:#222}.editBioActions{display:flex;gap:8px;margin-top:8px;justify-content:center}.saveBioBtn{background:#007bff;color:#fff;border:none;padding:6px 16px;border-radius:16px;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;gap:4px;transition:background .2s}.saveBioBtn:hover{background:#0056b3}.cancelBioBtn{background:#f0f0f0;color:#333;border:none;padding:6px 16px;border-radius:16px;cursor:pointer;font-size:14px;transition:background .2s}.cancelBioBtn:hover{background:#e0e0e0}.profile{display:flex;background-size:cover;background-position:center;min-height:100vh}.profileRight{flex:9;min-height:100vh}.profileRightTop{position:sticky;height:100%;top:0;z-index:100;background-color:#fff;box-shadow:0 2px 4px #0000001a}.profileCover{height:320px;position:relative}.profileCoverImg{position:absolute;top:0;left:0;width:100%;height:250px;object-fit:cover}.editCoverBtn{position:absolute;top:10px;right:10px;background:#00000080;color:#fff;border:none;padding:8px 16px;border-radius:20px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px;transition:all .2s ease}.editCoverBtn:hover{background:#000000b3}.editIcon{font-size:18px}.profileUserImg{width:150px;height:150px;border-radius:50%;object-fit:cover;position:absolute;left:0;right:0;margin:auto;top:150px;border:3px solid white;cursor:pointer;transition:all .2s ease}.profileUserImg:hover{transform:scale(1.05)}.profileInfo{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px}.profileInfoName{font-size:24px;font-weight:600;margin:0}.profileUsername,.profileEmail,.profileInfoDesc{font-weight:300;color:#555;margin:5px 0;text-align:center;word-break:break-word}.profileSkills ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}.profileSkills li{margin-bottom:6px;color:#444;background-color:#f0f0f0;padding:5px 10px;border-radius:20px}.profileStatus,.profileTimestamps{width:100%;max-width:600px;margin-top:20px;color:#333}.profileStatus p,.profileTimestamps p{margin:4px 0;font-size:14px;color:#333}.profileRightBottom{display:flex;margin-top:20px;gap:20px}.modalOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:999}.modalBox{background-color:#1c1c1e;padding:20px;border-radius:16px;width:500px;max-width:90%;max-height:90vh;overflow-y:auto;color:#fff}.modalHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #333}.modalTitle{margin:0;font-size:20px;font-weight:600}.modalCloseBtn{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;line-height:1}.modalContent{display:flex;flex-direction:column;gap:20px}.modalSection{display:flex;flex-direction:column;align-items:center;gap:15px;padding:15px;background:#2c2c2e;border-radius:12px}.modalSection h4{margin:0;font-size:16px;font-weight:500}.modalProfileImage{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid white}.modalCoverImage{width:100%;height:150px;object-fit:cover;border-radius:8px}.modalBtn{width:100%;padding:12px;margin:6px 0;font-size:14px;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.modalBtn:disabled{opacity:.7;cursor:not-allowed}.upload{background-color:#0095f6;color:#fff}.upload:hover:not(:disabled){background-color:#0081d6}.modalBox::-webkit-scrollbar{width:8px}.modalBox::-webkit-scrollbar-track{background:#1c1c1e}.modalBox::-webkit-scrollbar-thumb{background:#333;border-radius:4px}.modalBox::-webkit-scrollbar-thumb:hover{background:#444}.profileSkills{margin-top:20px;width:100%;max-width:600px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000012;padding:18px 24px;margin-bottom:24px}.skillList{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px;min-height:32px}.skillItem{background:#eaf4ff;padding:6px 14px;border-radius:16px;display:flex;align-items:center;gap:8px;font-size:14px}.skillInput{display:flex;gap:8px;margin-bottom:20px;margin-top:8px}.skillInput input{flex:1;padding:8px;border:1px solid #b3d1ff;border-radius:8px;font-size:15px}.skillInput button,.saveSkillsBtn{background:#007bff;color:#fff;border:none;padding:8px 18px;border-radius:16px;cursor:pointer;font-size:14px;transition:background .2s ease}.skillInput button:hover,.saveSkillsBtn:hover{background:#0056b3}.skillItem button{background:transparent;border:none;color:#f44;cursor:pointer;padding:0;font-size:15px}input[type=text]{padding:6px;width:70%;border-radius:4px;border:1px solid #ccc}.profileSkills{width:100%;max-width:600px;margin-top:20px;text-align:left}.profileSkills h3{margin-top:20px;margin-bottom:10px;font-size:18px;color:#333}.skillList{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}.skillItem{margin-bottom:6px;color:#444;background-color:#f0f0f0;padding:5px 10px;border-radius:20px}.skillInput{display:flex;margin-bottom:10px}.skillInput input{flex:1;padding:5px;border:1px solid #ccc;border-radius:5px}.skillInput button{padding:5px 10px;background-color:#007bff;color:#fff;border:none;cursor:pointer;border-radius:5px}.saveSkillsBtn{padding:10px 15px;background-color:#28a745;color:#fff;border:none;cursor:pointer;border-radius:5px}body{margin:0;padding:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.login{background-image:url(/assets/gift/image1.png);background-size:cover;width:100vw;height:100vh;background:url(/assets/gift/background.jpg) center center / cover no-repeat;display:flex;align-items:center;justify-content:center}.loginWrapper{width:100%;max-width:450px;background-color:gray;padding:40px;border-radius:8px;box-shadow:0 0 20px #3a4ea1b3;color:#fff}.loginLeft{display:none}.loginRight{width:100%}.loginLogo{font-size:32px;font-weight:700;color:red;text-align:center;margin-bottom:20px}.loginDesc{text-align:center;margin-bottom:20px;color:#c71111}.loginBox{display:flex;height:90%;flex-direction:column}.loginInput{height:70px;margin-bottom:12px;padding:0 15px;border:none;border-radius:4px;background-color:#525b63;color:#fff;font-size:20px;font-weight:300;outline:none}.loginInput::placeholder{color:#999}.loginInput:focus{border:2px solid rgb(86,80,80)}.uploadInput{margin-bottom:20px;color:#fff}.previewImage{width:100%;max-height:150px;object-fit:cover;border-radius:4px;margin-bottom:20px}.loginButton{height:45px;width:35%;margin:auto auto 10px;border:none;border-radius:4px;background-color:red;color:#fff;font-size:16px;font-weight:700;cursor:pointer}.loginButton:hover{background-color:#e50914}.loginRegisterButton{background:none;color:#336b4b;font-size:14px;border:none;cursor:pointer;text-align:center}.loginRegisterButton:hover{text-decoration:underline}.your-posts-container{display:flex;width:100%}.your-posts-container>*{display:block;width:100%}.your-posts-container{flex:5}.your-posts-title{font-size:24px;margin:20px;color:#333}.your-post-card{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a}.like-container{display:flex;width:100%}.liked-posts-container{flex:5}.liked-posts-title{font-size:24px;margin-bottom:20px;color:#333}.liked-post-card{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a}.post-title{font-size:20px;margin-bottom:10px;color:#222}.post-media{max-width:100%;height:auto;border-radius:4px;margin:10px 0}.post-date{color:#666;font-size:14px;display:block;margin:10px 0}.post-description{color:#444;line-height:1.5;margin:10px 0}.post-actions{display:flex;gap:10px;margin-top:15px}.edit-button,.delete-button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-weight:500}.edit-button{background-color:#4caf50;color:#fff}.delete-button{background-color:#f44336;color:#fff}.loading{text-align:center;padding:20px;color:#666}.error{color:#f44336;text-align:center;padding:20px}.no-posts-message{text-align:center;color:#666;padding:20px}.chat-page{min-height:100vh;background:#f7f9fa;display:flex;flex-direction:column}.chat-container{flex:1;display:flex;flex-direction:column;max-height:calc(100vh - 60px)}.chat-mobile-header{display:none;padding:12px 16px;background:#fff;border-bottom:1px solid #e1e8ed;position:sticky;top:60px;z-index:10}.mobile-menu-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;color:#14171a;font-size:14px;font-weight:500;cursor:pointer;padding:8px 12px;border-radius:20px;transition:background-color .2s ease}.mobile-menu-toggle:hover{background:#f7f9fa}.chat-content{flex:1;display:flex;overflow:hidden}.chat-sidebar{flex-shrink:0;background:#fff;z-index:5}.chat-main{flex:1;display:flex;flex-direction:column;background:#fff;min-width:0}.chat-messages{flex:1;overflow:hidden;display:flex;flex-direction:column}.chat-input{flex-shrink:0}.mobile-overlay{display:none}@media (max-width: 768px){.chat-mobile-header{display:block}.chat-content{position:relative}.chat-sidebar{position:fixed;top:120px;left:0;width:100%;height:calc(100vh - 120px);background:#fff;transform:translate(-100%);transition:transform .3s ease;z-index:20;overflow-y:auto}.chat-sidebar.mobile-open{transform:translate(0)}.mobile-overlay{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:15}.chat-main{width:100%;height:calc(100vh - 120px)}}@media (max-width: 1024px) and (min-width: 769px){.chat-sidebar{min-width:240px;max-width:260px}}.chat-loading{display:flex;align-items:center;justify-content:center;height:200px;color:#657786}.chat-error{display:flex;align-items:center;justify-content:center;height:200px;color:#e1306c;text-align:center;padding:20px}.chat-error h3{margin-bottom:8px}.chat-error p{font-size:14px;opacity:.8}.chat-sidebar,.chat-main{transition:all .3s ease}@media (prefers-color-scheme: dark){.chat-page{background:#15202b}.chat-mobile-header{background:#15202b;border-bottom-color:#38444d}.mobile-menu-toggle{color:#fff}.mobile-menu-toggle:hover{background:#192734}.chat-main{background:#15202b}}@media (prefers-reduced-motion: reduce){.chat-sidebar,.chat-main,.mobile-menu-toggle{transition:none}}.mobile-menu-toggle:focus{outline:2px solid #1da1f2;outline-offset:2px}@media (prefers-contrast: high){.chat-page{background:#fff}.chat-sidebar,.chat-main{border:2px solid #000}.mobile-menu-toggle{border:1px solid #000}}.room-selector{background:#fff;border-right:1px solid #e1e8ed;height:100%;display:flex;flex-direction:column;min-width:280px;max-width:320px}.room-selector-header{padding:20px 16px 16px;border-bottom:1px solid #e1e8ed;display:flex;justify-content:space-between;align-items:center}.room-selector-header h3{margin:0;color:#14171a;font-size:18px;font-weight:700}.room-count{font-size:12px;color:#657786;background:#f7f9fa;padding:4px 8px;border-radius:12px}.room-list{flex:1;overflow-y:auto;padding:8px 0}.room-item{display:flex;align-items:center;padding:12px 16px;cursor:pointer;transition:all .2s ease;border-left:3px solid transparent;margin:2px 0}.room-item:hover{background:#f7f9fa}.room-item.active{background:#e8f5fe;border-left-color:#1da1f2}.room-item.active .room-name{color:#1da1f2;font-weight:600}.room-icon{margin-right:12px;flex-shrink:0}.room-image{width:40px;height:40px;border-radius:8px;object-fit:cover}.room-emoji{font-size:28px;display:block;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f7f9fa;border-radius:8px}.room-info{flex:1;min-width:0}.room-name{font-weight:500;color:#14171a;font-size:14px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-description{font-size:12px;color:#657786;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:8px}.online-indicator{display:flex;align-items:center;gap:4px;font-size:11px;color:#657786}.online-dot{width:6px;height:6px;background:#17bf63;border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.online-count{font-weight:500}.active-indicator{color:#1da1f2}.no-rooms{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}.no-rooms-content{text-align:center;color:#657786}.no-rooms-icon{font-size:48px;display:block;margin-bottom:12px;opacity:.5}.no-rooms-content p{margin-bottom:4px;font-weight:500;color:#14171a}.no-rooms-content small{font-size:12px}.room-list::-webkit-scrollbar{width:6px}.room-list::-webkit-scrollbar-track{background:transparent}.room-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.room-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.room-section{margin-bottom:8px}.room-section-header{padding:8px 16px 4px;margin-top:12px}.section-title{font-size:12px;font-weight:600;color:#657786;text-transform:uppercase;letter-spacing:.5px}.room-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #e1e8ed}.last-message{font-style:italic;color:#657786}@media (max-width: 768px){.room-selector{min-width:100%;max-width:100%;border-right:none;border-bottom:none;height:100%;max-height:none}.room-selector-header{padding:12px 16px}.room-selector-header h3{font-size:16px}.room-list{max-height:none;height:auto;padding-bottom:20px}.room-item{padding:10px 16px}.room-emoji{font-size:24px;width:32px;height:32px}.room-image{width:32px;height:32px}.room-icon{margin-right:10px}}@media (prefers-color-scheme: dark){.room-selector{background:#15202b;border-right-color:#38444d}.room-selector-header{border-bottom-color:#38444d}.room-selector-header h3{color:#fff}.room-count{background:#192734;color:#8899a6}.room-item:hover{background:#192734}.room-item.active{background:#1e3a5f}.room-name{color:#fff}.room-description{color:#8899a6}.room-emoji{background:#192734}.section-title{color:#8899a6}.room-avatar{border-color:#38444d}.last-message{color:#8899a6}}.message{display:flex;margin-bottom:16px;padding:0 16px;max-width:100%}.message-avatar{flex-shrink:0;margin:0 8px}.avatar-img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #e1e8ed}.message-content{flex:1;max-width:calc(100% - 60px)}.message-header{display:flex;align-items:center;margin-bottom:4px;gap:8px}.message-sender{font-weight:600;color:#1da1f2;font-size:14px}.message-time,.own-time{font-size:12px;color:#657786}.message-text{background:#f7f9fa;padding:12px 16px;border-radius:18px;word-wrap:break-word;line-height:1.4;color:#14171a;position:relative}.own-message{flex-direction:row-reverse}.own-message .message-content{text-align:right}.own-message .message-text{background:#1da1f2;color:#fff}.own-message .message-header{justify-content:flex-end}.own-message .own-time{margin-top:4px;font-size:11px}.other-message .message-text:before{content:"";position:absolute;left:-6px;top:12px;width:0;height:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent #f7f9fa transparent transparent}.own-message .message-text:before{content:"";position:absolute;right:-6px;top:12px;width:0;height:0;border-style:solid;border-width:6px 0 6px 6px;border-color:transparent transparent transparent #1da1f2}.edited-indicator{font-size:11px;color:#ffffffb3;margin-left:6px;font-style:italic}.other-message .edited-indicator{color:#657786}@media (max-width: 768px){.message{padding:0 12px;margin-bottom:12px}.avatar-img{width:32px;height:32px}.message-content{max-width:calc(100% - 50px)}.message-text{padding:10px 14px;font-size:14px}.message-sender{font-size:13px}}.message-list-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.message-list{flex:1;overflow-y:auto;padding:16px 0;scroll-behavior:smooth}.message-list::-webkit-scrollbar{width:6px}.message-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.message-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.message-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.loading-messages{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#657786}.loading-spinner{width:32px;height:32px;border:3px solid #f3f3f3;border-top:3px solid #1da1f2;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}.message-list-error{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}.error-content{text-align:center;color:#e1306c}.error-icon{font-size:48px;display:block;margin-bottom:12px}.error-content p{font-weight:600;margin-bottom:4px}.error-content small{color:#657786}.no-messages{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}.no-messages-content{text-align:center;color:#657786}.no-messages-icon{font-size:64px;display:block;margin-bottom:16px;opacity:.5}.no-messages-content h3{color:#14171a;margin-bottom:8px;font-weight:600}.no-messages-content p{font-size:14px}.typing-indicators{padding:0 16px;margin-bottom:8px}.typing-indicator{display:flex;align-items:center;margin-bottom:8px;opacity:.8}.typing-avatar{flex-shrink:0;margin-right:8px}.typing-content{display:flex;flex-direction:column}.typing-name{font-size:12px;color:#657786;margin-bottom:2px}.typing-animation{display:flex;align-items:center;gap:2px;background:#f7f9fa;padding:8px 12px;border-radius:16px;width:fit-content}.typing-animation span{width:6px;height:6px;background:#657786;border-radius:50%;animation:typing 1.4s ease-in-out infinite}.typing-animation span:nth-child(2){animation-delay:.2s}.typing-animation span:nth-child(3){animation-delay:.4s}@keyframes typing{0%,60%,to{transform:scale(1);opacity:.5}30%{transform:scale(1.2);opacity:1}}@media (max-width: 768px){.message-list{padding:12px 0}.no-messages{padding:30px 15px}.no-messages-icon{font-size:48px}.loading-messages{height:150px}}.message-input-container{background:#fff;border-top:1px solid #e1e8ed;padding:16px}.message-input-header{margin-bottom:8px}.room-indicator{font-size:12px;color:#657786;font-weight:500;display:flex;align-items:center;gap:4px}.message-input-box{position:relative}.input-wrapper{display:flex;align-items:flex-end;gap:8px;background:#f7f9fa;border:1px solid #e1e8ed;border-radius:20px;padding:8px 12px;transition:border-color .2s ease}.input-wrapper:focus-within{border-color:#1da1f2;box-shadow:0 0 0 2px #1da1f21a}.message-textarea{flex:1;background:transparent;border:none;outline:none;resize:none;font-family:inherit;font-size:14px;line-height:1.4;color:#14171a;min-height:20px;max-height:120px;overflow-y:auto;padding:4px 0}.message-textarea::placeholder{color:#657786}.message-textarea::-webkit-scrollbar{width:4px}.message-textarea::-webkit-scrollbar-track{background:transparent}.message-textarea::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:2px}.send-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:50%;background:#1da1f2;color:#fff;cursor:pointer;transition:all .2s ease;flex-shrink:0}.send-button:hover:not(.disabled){background:#1991db;transform:scale(1.05)}.send-button:active:not(.disabled){transform:scale(.95)}.send-button.disabled{background:#aab8c2;cursor:not-allowed;transform:none}.sending-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.character-count{position:absolute;bottom:-20px;right:0;font-size:11px;color:#657786}.character-count .warning{color:#e1306c;font-weight:600}.message-textarea:focus{outline:none}.input-wrapper:focus-within .send-button:not(.disabled){background:#1991db}.message-textarea:disabled{opacity:.7;cursor:not-allowed}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.message-input-container{padding:12px}.input-wrapper{padding:6px 10px}.message-textarea{font-size:16px}.send-button{width:28px;height:28px}}@media (prefers-color-scheme: dark){.message-input-container{background:#15202b;border-top-color:#38444d}.input-wrapper{background:#192734;border-color:#38444d}.input-wrapper:focus-within{border-color:#1da1f2}.message-textarea{color:#fff}.message-textarea::placeholder{color:#8899a6}.room-indicator{color:#8899a6}}.explore-container{display:flex;width:100%}.explore{flex:5;overflow-y:auto}.explore h1{margin-bottom:20px;color:#333;font-size:2rem}.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.skill-card{border:1px solid #ddd;border-radius:12px;padding:15px;background:#fff;text-align:center;box-shadow:0 2px 5px #0000000d;transition:transform .2s ease,box-shadow .2s ease}.skill-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.skill-card img{width:100%;height:120px;object-fit:cover;border-radius:10px}.skill-card h3{margin:10px 0 5px;color:#333}.skill-card p{font-size:.9rem;color:#555;margin-bottom:15px}.skill-card button{margin-top:10px;padding:8px 16px;background-color:#1976d2;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color .2s ease}.skill-card button:hover{background-color:#1565c0}.skill-card button:active{transform:scale(.98)}@media (max-width: 768px){.explore-container{flex-direction:column}.explore{margin-left:0;padding:15px}.explore h1{font-size:1.5rem}.skill-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}}.followingsContainer{display:flex;width:100%}.followingsFeed{flex:6;padding:20px;background:#fff;min-height:100vh}.followingsList{list-style:none;padding:0}.followingItem{display:flex;align-items:center;margin-bottom:16px;padding:10px;border-radius:8px;background:#f7f7f7}.followingAvatar{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-right:12px}