body{margin:0}.app{background-image:url(https://gifdb.com/images/high/black-background-blue-meteor-shower-96b6ypkabnn7d0jm.gif);background-repeat:no-repeat;background-position:center;background-size:cover}.login-container{height:100vh;display:flex;justify-content:center;align-items:center;padding:1rem}form{display:flex;flex-direction:column;background-color:#0f172a;min-height:60%;width:100%;max-width:400px;padding:2rem;justify-content:center;align-items:center;box-shadow:0 0 10px #0000001a;color:#fff;font-size:24px;border:4px solid;border-image:linear-gradient(90deg,#3b82f6,#9333ea,#ec4899) 1;box-shadow:0 0 30px #3b82f64d;animation:slideFadeIn .6s ease forwards}.form-content{display:flex;flex-direction:column;width:100%;margin-bottom:1.5rem}.form-content label{margin-bottom:.5rem;font-size:16px}input{width:100%;padding:.6rem;border-radius:6px;border:none;font-size:16px;box-sizing:border-box;transition:.3s;background-color:#0f172a;outline:2px solid #3b82f6;color:#fff}input:focus{outline:2px solid #3b82f6;background-color:#fff;color:#000}input:active{outline:2px solid #3b82f6;background-color:#fff;color:#000}.login-textarea{width:100%;padding:.6rem;border-radius:6px;border:none;font-size:16px;box-sizing:border-box;transition:.3s;background-color:#0f172a;outline:2px solid #3b82f6;color:#fff}.login-textarea:focus{outline:2px solid #3b82f6;background-color:#fff;color:#000}.login-textarea:active{outline:2px solid #3b82f6;background-color:#fff;color:#000}button{background:linear-gradient(90deg,#2563eb,#9333ea,#ec4899);background-size:200% 200%;color:#fff;font-size:16px;font-weight:700;padding:.8rem 1.5rem;border:none;border-radius:8px;cursor:pointer;transition:all .4s ease;box-shadow:0 4px 15px #0000004d}button:hover{background-position:right center;transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px #0006}.home{display:flex;flex-direction:column;min-height:100vh;background-color:#0006}.top-component{height:90vh;background-color:#0f172a;background-image:url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExMWc0cmExbnAwcGw3dnY4cHZ6cTEyYnh3MnFwbXd6N3F4OGI5amJrbCZlcD12MV9naWZzX3NlYXJjaCZjdD1n/ITRemFlr5tS39AzQUL/giphy.webp);background-repeat:no-repeat;background-position:center;background-size:cover}.bottom-component{height:10vh;background-color:#0f172a;display:flex;justify-content:space-around;align-items:center;border-top:2px solid white;border-image:linear-gradient(90deg,#00f,green,red);border-image-slice:1;color:#fff}.group-container{width:60%;height:100%;background-color:#0f172a;margin:0 auto;border-right:2px solid white;border-left:2px solid white;border-image:linear-gradient(90deg,#00f,green,red);border-image-slice:1;border:none;display:flex;flex-direction:column}.group-header{height:10vh;background-color:#0f172a;display:flex;justify-content:center;align-items:center;font-size:16px;color:#fff}.group-content{background:linear-gradient(180deg,#0f172a,#1e293b);flex:1;height:60vh;width:96%;overflow-y:auto;padding:1rem;box-shadow:inset 0 0 10px #00000080;scroll-behavior:smooth}.message{display:flex;align-items:flex-start;margin-bottom:10px;gap:8px;color:#fff;animation:slideFadeIn .6s ease forwards}.message.incoming{flex-direction:row}.message.outgoing{flex-direction:row-reverse}.profile-group-pic{width:35px;height:35px;border-radius:50%;margin-top:3px;background-color:#ccc;background-size:cover;background-position:center}.message-body{max-width:60%;padding:.75rem 1rem;border-radius:12px;font-size:.95rem;display:flex;flex-direction:column;gap:.3rem}.message.incoming .message-body{background:#ffffff0d;border:1px solid transparent;border-image:linear-gradient(90deg,#3b82f6,#9333ea,#ec4899) 1;align-self:flex-start}.message.outgoing .message-body{background:#3b82f633;border:1px solid transparent;border-image:linear-gradient(90deg,#22d3ee,#3b82f6) 1;align-self:flex-end}.sender{margin:0;font-size:.8rem;font-weight:700;color:#60a5fa}.text{line-height:1.4;flex-wrap:wrap;word-break:break-word;overflow-wrap:anywhere}.time{font-size:.7rem;opacity:.6;align-self:flex-end}.group-chatbox{height:10vh;color:#fff;display:flex;justify-content:center;align-items:center}.form{min-width:47.5rem;color:#fff;display:flex;flex-direction:row;padding:0;border:none;justify-content:space-evenly;height:100%}.form>input{width:75%;border:2px solid;border-image:linear-gradient(90deg,#3b82f6,#9333ea,#ec4899) 1;outline:none}.profile-container{display:flex;flex-direction:column;align-items:center;padding:20px}.profile-pic{width:120px;height:120px;border-radius:50%;border:4px solid #ddd;background-size:cover;background-position:center;box-shadow:0 4px 8px #00000026}.profile-info{text-align:center;margin-top:15px}.profile-name{font-size:1.5rem;font-weight:700;color:#fff}.profile-status{color:green;font-weight:500}.profile-description{font-size:.9rem;color:#666;margin-top:8px;max-width:200px}.profile-image-input{display:flex;align-items:center}.profile-image-input input{padding:6px 10px;border:1px solid #ccc;border-radius:4px;width:200px;font-size:14px;outline:none}.profile-image-input input:focus{border-color:#007bff;box-shadow:0 0 4px #007bff66}.profile-image-input button{margin-left:6px;padding:6px 12px;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-size:14px;transition:background-color .4s,transform .1s ease-in-out;transition:.4s}.profile-image-input button:hover{background-color:#0056b3}.profile-image-input button:active{background-color:#004494;transform:scale(.96)}.friends-container{height:100%;width:100%}.form-container{margin:0;height:100px;padding:0;width:727px;display:flex;justify-content:center;align-items:center}.friends-search-form{min-width:700px;margin:0;padding:0;border:none;display:flex;flex-direction:row;gap:5%}.friends-search-input{width:100%;height:32px;padding:6px 8px;font-size:14px;border:1px solid #334155;border-radius:4px;box-sizing:border-box}.friend-card{display:flex;align-items:center;padding:8px;background-color:#1e293b;border-radius:6px;margin-bottom:8px;cursor:pointer;transition:background-color .2s ease}.friend-card:hover{background-color:#334155}.friend-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-right:10px}.friend-info{display:flex;flex-direction:column}.friend-name{font-size:14px;font-weight:700;color:#fff}.friend-status{font-size:12px;color:#94a3b8}@media (max-width: 1024px){.group-container{width:80%}.form{min-width:unset;width:90%}.form>input{width:70%}.friends-search-form{min-width:unset;width:90%}}@media (max-width: 768px){.group-container{width:95%}.group-chatbox{width:100%;padding:.5rem}.form{flex-direction:column;gap:.5rem;height:auto;width:100%}.form>input{width:100%}.form>button{width:100%}.friends-search-form{flex-direction:column;gap:.5rem;width:100%}.friends-search-input{width:100%}.message-body{max-width:80%}}@media (max-width: 480px){.group-chatbox{padding:.25rem}.group-chatbox>form{min-width:100%;margin-bottom:15px}.group-btn{width:50%}.form>input,.friends-search-input{font-size:14px;padding:.4rem .5rem}.form>button,.friends-search-form>button{font-size:14px;padding:.4rem .5rem}.message-body{font-size:.85rem;padding:.5rem .75rem;max-width:90%}.sender{font-size:.7rem}.time{font-size:.6rem}.profile-group-pic{width:28px;height:28px}}@media (max-width: 1024px){.profile-form{flex-direction:row;gap:.5rem;width:80%}.profile-form input{width:60%}.profile-form button{width:auto;padding:.5rem 1rem}.friends-search-form{width:80%}.friends-search-input{width:70%}.friends-search-form button{width:auto}}@media (max-width: 768px){.profile-form{flex-direction:column;width:100%;gap:.5rem}.profile-form input,.profile-form button{width:100%}.friends-search-form{flex-direction:column;width:100%;gap:.5rem}.friends-search-input,.friends-search-form button{width:100%}}@media (max-width: 480px){.profile-form{display:flex;flex-direction:column;width:100%;gap:.5rem}.profile-form input,.profile-form button{width:100%;font-size:14px;padding:.5rem}.form-container{width:100%}.friends-search-form{display:flex;flex-direction:column;width:100%;height:100%;gap:.5rem}.group-container{display:flex;justify-content:center;align-items:center}.group-header{width:100vw}.friends-search-input,.friends-search-form button{width:40%;font-size:14px;padding:.5rem}}@keyframes slideFadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.friends-search-form{display:flex;flex-direction:row;gap:.5rem;animation:slideFadeIn .6s ease forwards}