@font-face{font-family:ZenKaku;src:url(/fonts/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Light.woff2) format("woff2");font-weight:300;font-style:normal}@font-face{font-family:ZenKaku;src:url(/fonts/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Regular.woff2) format("woff2");font-weight:400;font-style:normal}@font-face{font-family:ZenKaku;src:url(/fonts/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Medium.woff2) format("woff2");font-weight:500;font-style:normal}@font-face{font-family:ZenKaku;src:url(/fonts/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Bold.woff2) format("woff2");font-weight:700;font-style:normal}@font-face{font-family:ZenKaku;src:url(/fonts/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Black.woff2) format("woff2");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(/fonts/Roboto/Roboto-Light.woff2) format("woff2");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(/fonts/Roboto/Roboto-Regular.woff2) format("woff2");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(/fonts/Roboto/Roboto-Medium.woff2) format("woff2");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(/fonts/Roboto/Roboto-Bold.woff2) format("woff2");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(/fonts/Roboto/Roboto-Black.woff2) format("woff2");font-weight:900;font-style:normal}:root{--color-dark-950: #212121;--color-dark-900: #242424;--color-dark-700: #424242;--color-gray-950: #080707;--color-gray-600: #616161;--color-gray-500: #757575;--color-gray-550: #747881;--color-gray-400: #b4b7bb;--color-gray-450: #bdbdbd;--color-gray-300: #dbdde1;--color-gray-200: #E9EAED;--color-gray-100: #eeeeee;--color-gray-150: #fafafa;--color-gray-50: #f5f5f5;--color-red-600: #ff3742;--color-green-500: #20e070;--color-blue-50: #ccdfff;--color-blue-100: #e0f0ff;--color-blue-300: #669fff;--color-blue-500: #005fff;--color-blue-600: #005fff;--color-white: #ffffff;--color-primary: #7b76f1;--font-ZenKaku: "ZenKaku", sans-serif;--font-Roboto: "Roboto", sans-serif}*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}html,body,#root{height:100%}body{font-family:var(--font-Roboto)}button{border:none}a{text-decoration:none}ul,ol{list-style:none}input{all:unset}.auth-wrapper{width:100%;height:100vh;display:flex;font-family:var(--font-ZenKaku)}.auth-left-wrapper{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;row-gap:40px;height:100%;background-image:url(/assets/bg-left-Dlz-P4H8.jpg);background-position:center;background-repeat:no-repeat;background-size:cover;padding:40px 0}.auth-left-img{max-width:424px;max-height:356px;width:100%;object-fit:contain}.auth-left-content{width:380px;display:flex;flex-direction:column;text-align:center;row-gap:16px}.auth-left-content h2{font-size:31px;font-weight:700;color:var(--color-white)}.auth-left-content p{color:var(--color-gray-50);font-size:16px;font-weight:400}.auth-right-wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;padding:20px}.auth-logo-box{display:none}.form-box{max-width:380px;width:100%;display:flex;flex-direction:column;row-gap:30px}.form-title{color:var(--color-dark-900);font-weight:700;font-size:31px;text-align:center}.auth-btn.google{width:100%;display:flex;justify-content:center;align-items:center;column-gap:16px;padding:12px 22px;border-radius:20px;border:1px solid;border-color:var(--color-gray-100);background-color:var(--color-gray-150);font-size:12px;line-height:22px;font-weight:400;cursor:pointer}.auth-form{display:flex;flex-direction:column;row-gap:20px;margin:20px 0}.auth-form-label{font-size:12px;line-height:22px;font-weight:400;color:var(--color-gray-500);-webkit-user-select:none;user-select:none}.auth-form-input{font-size:16px;line-height:28px;font-weight:400;color:var(--color-dark-950);border-radius:10px 10px 0 0}.input-error-text{position:absolute;color:var(--color-red-600);font-size:12px;bottom:-16px}.line-bottom{display:flex;flex-direction:column;border-bottom:1px solid var(--color-gray-200)}.input-error{position:relative;border-bottom:1px solid var(--color-red-600)}.form-password{display:flex;justify-content:space-between}.password-btn-eye{background-color:transparent}.form-btn-submit{background-color:var(--color-primary);font-size:12px;line-height:22px;font-weight:700;color:var(--color-white);padding:12px 22px;border-radius:20px;cursor:pointer}.submit-error-text{color:var(--color-red-600);font-size:12px;text-align:center;line-height:0}.form-link{text-align:center;font-size:12px;color:var(--color-dark-700)}.form-link a{color:var(--color-dark-950)}@media only screen and (max-width: 1024px){.auth-left-img{max-width:374px;max-height:306px}}@media only screen and (max-width: 768px){.auth-left-wrapper{display:none}.auth-logo-box{display:block}.form-title{font-size:28px}.form-box{row-gap:20px}.auth-form{margin:10px 0}}@media only screen and (max-width: 420px){.form-title{font-size:26px}.form-box{row-gap:10px}.auth-form{margin:4px 0}}.auth-logo{display:flex;align-items:center;column-gap:14px}.auth-logo-title{color:var(--color-white);font-size:32px;font-weight:500}@media only screen and (max-width: 768px){.auth-logo{margin-bottom:20px}.auth-logo-title{color:var(--color-black);font-size:32px;font-weight:600}}.btn-logOut{background-color:var(--color-primary);border-radius:16px;color:var(--color-white);font-size:16px;padding:10px;cursor:pointer;-webkit-user-select:none;user-select:none}@media only screen and (max-width: 768px){.btn-logOut{font-size:15px;padding:8px}}.menu-modal-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background-color:#0000004d;display:none}.menu-modal-box{background-color:#fff;width:80%;height:100%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.menu-modal-top{position:relative;background:#9a96ff;background:radial-gradient(circle,#9a96ff,#5454ff)}.menu-modal-closeBtn{position:absolute;background-color:transparent;top:6px;right:6px;cursor:pointer}.menu-modal-bottom{padding:6px}@media only screen and (max-width: 768px){.menu-modal-wrapper.show{display:none}}@media only screen and (max-width: 420px){.menu-modal-wrapper.show{display:flex}}.user-profile{background-color:transparent;display:flex;align-items:center;column-gap:8px;font-size:20px;color:var(--color-white);font-weight:700;cursor:pointer}.user-profile-img{border-radius:50%;object-fit:cover;width:50px;height:50px}.default-img{display:flex;align-items:center;justify-content:center;background-color:var(--color-primary);color:var(--color-white)}@media only screen and (max-width: 768px){.user-profile{font-size:16px}.user-profile-img{width:40px;height:40px}}@media only screen and (max-width: 420px){.user-profile{row-gap:4px;padding:4px 6px;color:var(--color-black)}}.profile-modal-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background-color:#0000004d}.profile-box{width:300px;height:fit-content;overflow:hidden;display:flex;flex-direction:column;border-radius:8px}.profile-box-img{position:relative;width:100%;height:300px}.profile-box-img img{width:100%;height:100%;object-fit:cover;object-position:center}.profile-edit-img{top:10px;right:10px;position:absolute;background-color:transparent;cursor:pointer}.profile-box-content{width:100%;height:fit-content;background-color:var(--color-white);flex-basis:100%}.profile-form{display:flex;flex-direction:column;padding:8px;height:100%}.profile-form label{font-size:14px;color:var(--color-gray-400)}.profile-form-text{display:flex;align-items:center;justify-content:space-between}.profile-edit-text{cursor:pointer;background-color:transparent}.profile-form input{border:1px solid black;border-radius:6px;padding:4px;font-size:16px}.profile-form span{padding:4px;font-size:16px}.header-search{display:flex;align-items:center;max-width:100%}.header-search-btn{padding-right:8px;cursor:pointer}.hidden{display:none}.block{display:block}.header-search-input{display:flex;align-items:center;background:#fff;border-radius:20px;column-gap:8px;padding:4px 8px;border:1px solid var(--color-gray-300)}.header-search-input input{width:100%;display:flex;align-items:center;line-height:18px;font-size:16px}.header-search-clear{display:flex;align-items:center;background-color:transparent;padding:0 2px;cursor:pointer}.header-wrapper{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;font-family:var(--font-ZenKaku);background:#9a96ff;background:radial-gradient(circle,#9a96ff,#5454ff)}.header-left{display:flex;align-items:center;column-gap:4px}.header-right{display:flex;align-items:center}.header-logo{display:flex;align-items:center;column-gap:16px;color:var(--color-white);cursor:pointer}.header-menu{display:none;align-items:center;background-color:transparent;color:var(--color-white);cursor:pointer;line-height:16px}.header-menu svg{width:30px;height:30px}.header-logo svg{width:100%;height:100%}.header-logo-title{font-size:32px;height:fit-content;line-height:32px;-webkit-user-select:none;user-select:none}.header-actions{display:flex;align-items:center;column-gap:24px}.header-search{display:none}.header-search-btn{background-color:transparent;color:#fff}@media only screen and (max-width: 768px){.header-wrapper{padding:4px 8px}.header-logo{column-gap:8px}.header-logo svg{width:40px;height:40px}.header-logo-title{font-size:30px;line-height:30px}.header-actions{column-gap:16px}}@media only screen and (max-width: 420px){.header-logo{cursor:pointer}.header-logo-svg{display:none}.header-logo-title{cursor:pointer}.header-menu{display:flex}.header-actions{display:none}.header-search{display:flex}}.home-wrapper{width:100%;height:100vh;background-image:url(/messages_light_colour_background.jpg);background-size:cover;display:flex;flex-direction:column}.main-wrapper{display:flex;justify-content:center;width:100%;flex:1 1 auto;overflow:hidden}.user-img-wrapper{position:relative;display:inline-block;width:fit-content;height:fit-content}.user-img{border-radius:50%;object-fit:cover;display:flex}.username-img{border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary);color:#fff;font-weight:500;font-size:24px}.user-img-49{width:49px!important;height:49px!important}.user-img-40{width:40px!important;height:40px!important}.user-img-36{width:36px!important;height:36px!important}.user-img-active-dot{position:absolute;bottom:2px;right:2px;width:12px;height:12px;background-color:var(--color-green-500);border:1px solid white;border-radius:50%}.user-img-active-dot-top{top:0;right:0}.search-box{display:flex;align-items:center;column-gap:8px;padding:8px 16px;border:1px solid var(--color-gray-300);border-radius:20px}.search-input{width:100%}@media only screen and (max-width: 420px){.search-wrapper{display:none}}.contact-box{display:flex;position:relative;width:100%;column-gap:8px;cursor:pointer}.contact-box-gap{column-gap:18px}.contact-context{width:100%;padding:2px 0;display:flex;flex-direction:column;justify-content:center;gap:6px}.contact-context-gap{row-gap:6px;padding:0}.contact-name{font-size:16px;color:var(--color-gray-950);font-weight:500}.contact-massege-box{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:14px;column-gap:6px;color:var(--color-gray-550)}.contact-massage{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-time{width:40px}.contact-massage-count{position:absolute;width:fit-content;height:fit-content;background-color:var(--color-red-600);color:var(--color-white);border-radius:18px;padding:8px;font-size:12px;line-height:8px;font-weight:700;right:8px;top:2px}@media only screen and (max-width: 768px){.contact-massage{max-width:150px}}@media only screen and (max-width: 600px){.contact-massage{max-width:290px}}@media only screen and (max-width: 420px){.contact-massage{max-width:180px}}.user-message-box{padding:0 8px;display:flex;max-width:60%;width:fit-content;float:right}.right-message{align-self:flex-end}.user-message{padding:8px;overflow:hidden}.blue{background-color:var(--color-blue-100);border-radius:20px 20px 0;float:inline-end}.gray{border-radius:20px 20px 20px 0;background-color:var(--color-gray-200);float:inline-start}.user-message-time{-webkit-user-select:none;user-select:none;display:flex;column-gap:8px;align-items:end;padding:4px}@media only screen and (max-width: 1024px){.user-message-box{max-width:70%}}@media only screen and (max-width: 768px){.user-message-box{max-width:80%}}@media only screen and (max-width: 420px){.user-message-box{max-width:90%}}.chat-profile-wrapper{display:flex;align-items:center;column-gap:4px;padding:0 4px}.user-contact-profile{padding:9px 8px;display:flex;align-items:center;column-gap:18px;cursor:pointer}.back-contact-btn{width:40px;height:40px;background-color:transparent;cursor:pointer}.contact-profile-context{display:flex;flex-direction:column;justify-content:space-between;row-gap:4px}.contact-profile-name{font-size:16px;color:var(--color-gray-950);font-weight:500}.profile-last-time{font-size:14px;color:var(--color-gray-550)}.user-contact-list{display:flex;flex-direction:column;flex:1;overflow-y:auto;padding-right:4px;gap:8px;scrollbar-width:thin;scrollbar-color:#888 transparent}.user-contact-list::-webkit-scrollbar{width:6px}.user-contact-list::-webkit-scrollbar-thumb{background:#888;border-radius:8px}.user-contact-list::-webkit-scrollbar-track{background:transparent}.chat-wrapper{max-width:1024px;width:100%;height:100%;background-color:var(--color-white);border-radius:16px;display:flex}.contacts-box{width:350px;padding:10px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--color-gray-300)}.chat-box-wrapper{width:100%}.chat-box{width:100%;height:calc(100% - 124px);display:flex;flex-direction:column;row-gap:4px;padding:8px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#888 transparent}.chat-box::-webkit-scrollbar{width:6px}.chat-box::-webkit-scrollbar-thumb{background:#888;border-radius:8px}.chat-box::-webkit-scrollbar-track{background:transparent}.chat-send-form{width:100%;padding:8px 8px 10px;display:flex;align-items:center;gap:10px}.send-form-input{width:100%;padding:10px 10px 10px 20px;border:1px solid var(--color-gray-300);border-radius:20px}.send-form-btn{cursor:pointer;padding:8px;border-radius:50%;background-color:var(--color-gray-400);display:flex;align-items:center;justify-content:center}@media only screen and (max-width: 768px){.contacts-box{width:280px}}@media only screen and (max-width: 600px){.contacts-box{width:100%}.hidden{display:none}.block{display:flex}.chat-empty{display:none}}