.loader-container{display:flex;justify-content:center;align-items:center;min-height:80vh}.spinner{width:40px;height:40px;border:4px solid #f3f3f3}.info-popup-container{position:relative;display:inline-block}.popup-content{position:absolute;top:120%;left:50%;transform:translateX(-50%);background-color:#fff;border:1px solid #ccc;box-shadow:0 4px 8px rgba(0,0,0,.1);border-radius:4px;width:250px;max-width:calc(100vw - 20px);z-index:1000;word-wrap:break-word}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background-color:#0070f3;color:#fff;border-top-left-radius:4px;border-top-right-radius:4px}.popup-body{padding:12px;font-size:14px;color:#333;.participantInfo{margin:2px;padding:2px;border-bottom:1px solid rgba(27,26,26,.1);div{font-size:small}}}.chat-container{.top{padding:20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(27,26,26,.1);.user{display:flex;align-items:center;gap:20px;img{width:50px;height:50px;border-radius:50%;object-fit:cover}.texts{display:flex;flex-direction:column;gap:5px;span{font-size:16px;font-weight:500}p{font-size:14px;font-weight:300;color:rgb(45,46,48)}}}.icons{display:flex;align-items:center;position:relative;gap:20px;img{width:20px;height:20px;cursor:pointer}}}.center{padding:20px;flex:1 1;overflow-y:auto;display:flex;flex-direction:column;gap:20px;.message{max-width:70%;display:flex;gap:20px;min-width:70%;word-break:break-word;a{text-decoration:underline}&.own{margin-left:auto;max-width:70%;.texts{align-items:end;p{background-color:#e0f2f1;color:#004d40}span{display:flex;flex-direction:row-reverse}}}img{width:30px;height:30px;border-radius:50%;object-fit:cover}.texts{flex:1 1;display:flex;flex-direction:column;gap:5px;img{width:100%;height:300px;object-fit:cover}img,p{border-radius:10px}p{padding:20px;background-color:#e7eaeb;display:block}span{font-size:12px;font-weight:300;color:rgb(45,46,48)}}}}.bottom{padding:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(27,26,26,.1);margin-top:auto;img{width:20px;height:20px;cursor:pointer}.icons{display:flex;gap:20px}textarea{flex:1 1;background-color:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.1);justify-content:center;outline:none;color:black;padding:20px;border-radius:10px;font-size:16px}.emoji{position:relative;.picker{position:absolute;bottom:50px;left:0}}.sendButton{background-color:rgb(57,121,241);color:white;padding:10px 20px;border:none;border-radius:5px;cursor:pointer}}}.chat-container{display:flex;flex-direction:column;flex:2 1;border-left:1px solid rgba(27,26,26,.1);border-right:1px solid rgba(27,26,26,.1);height:100%;.create-group{padding-left:20px;display:flex;border-bottom:1px solid rgba(27,26,26,.1);flex-direction:row;min-height:64px;width:100%;align-items:center;.start-group-button{padding-right:10px;button{background-color:#007bff;color:white;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:16px;font-weight:500}}.selected-phones{background-color:#e0e0e0;flex-wrap:wrap;margin-bottom:8px;display:contents}.selected-phone{background-color:#e0e0e0;color:#333;border-radius:4px;padding:4px 8px;margin-right:4px;margin-bottom:4px;font-size:14px;display:flex;align-items:center}.remove-button{background:none;border:none;color:#888;font-size:16px;margin-left:4px;cursor:pointer}.remove-button:hover{color:#f00}}.topConv{padding-left:20px;display:flex;border-bottom:1px solid rgba(27,26,26,.1);flex-direction:row;align-items:center;min-height:64px;width:100%;.input-field{flex:1 1;display:flex;flex-direction:column;overflow:visible;padding:12px 10px;position:relative;input{font-size:16px;font-weight:400;line-height:24px;font-family:Roboto,Helvetica Neue,sans-serif;letter-spacing:.1px;background-color:rgba(26,24,24,0);border:none;outline:none;flex-basis:0;line-height:40px}.popup{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;z-index:1000;max-height:200px;overflow-y:auto;max-width:300px}.popup ul{list-style:none;margin:0;padding:0}.popup li{padding:8px 10px;cursor:pointer}.popup li:hover{background:#f0f0f0}.name{font-size:14px}}}}.list-container{display:flex;flex-direction:column;width:25%}.group-info{padding:20px;display:flex;align-items:center;justify-content:space-between;.group{display:flex;align-items:center;gap:20px;img{width:50px;height:50px;border-radius:50%;object-fit:cover}}.icons{display:flex;gap:20px;img{width:30px;height:30px;cursor:pointer}}}.group-list{overflow-y:auto;.search{display:flex;align-items:center;padding:20px;gap:20px;.searchBar{flex:1 1;background-color:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.1);display:flex;align-items:center;gap:20px;border-radius:10px;padding:10px;input{background-color:transparent;color:rgb(0,0,0);border:none;outline:none;flex:1 1}img{width:20px;height:20px}}.add{width:36px;height:36px;background-color:rgba(17,25,40,.5);padding:10px;border-radius:10px;cursor:pointer}}.items{display:flex;align-items:center;padding:10px 0;cursor:pointer;border-bottom:1px solid rgba(27,26,26,.1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&:hover{background-color:#f1f3f4}&.selected{background-color:#dddedf}img{width:50px;height:50px;border-radius:50%;object-fit:cover}.texts{display:flex;flex-direction:column;gap:10px;span{font-weight:500}p{font-size:14px;font-weight:100;color:#5f6368}}.unread{.text-snippet,span{font-weight:900!important}}}}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;background:linear-gradient(90deg,#6a11cb,#2575fc)}.login-form{background:#fff;padding:2rem;border-radius:8px;width:30%;box-shadow:0 4px 6px rgba(0,0,0,.1);text-align:center}.login-form h2{margin-bottom:1rem;color:#333;font-size:1.5rem}.login-form input[type=password]{width:100%;padding:.75rem;margin-bottom:1rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.login-form button{width:100%;padding:.75rem;background:#2575fc;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background .3s ease}.login-form button:hover{background:#1a5fcc}.error-message{color:#d32f2f;margin-top:.5rem}@media (max-width:900px){.login-form{width:300px;padding:1.75rem}.login-form h2{font-size:1.4rem}.login-form button,.login-form input[type=password]{font-size:.95rem;padding:.65rem}}@media (max-width:600px){.login-form{width:90%;padding:1.5rem}.login-form h2{font-size:1.3rem}.login-form button,.login-form input[type=password]{font-size:.9rem;padding:.6rem}}.loader-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(83,81,81,.8);display:flex;align-items:center;justify-content:center;z-index:9999}.loader{text-align:center}.spinner{border:8px solid #f3f3f3;border-top-color:#3498db;border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.welcome-container{display:flex;width:100%;justify-content:center;flex-direction:column;align-items:center;flex:2 1;border-left:1px solid rgba(27,26,26,.1);border-right:1px solid rgba(27,26,26,.1);height:100%;.hi{h2{color:#202124;font-size:32px;font-weight:400;line-height:40px;font-family:Google Sans,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0;position:relative}}.welcome-message{color:#5f6368;font-size:14px;font-weight:400;line-height:20px;font-family:Roboto,Helvetica Neue,sans-serif;letter-spacing:.2px;margin:8px 0 0;position:relative;&.unread{color:#202124;font-weight:900!important}}}