:root{--background-color: #eaeaea;--link-background-color: #3369f3;--primary-text-color: #fff;--secondary-text-color: #242424;--link-text-color: #535bf2;--link-hover-color: #646cff;--error-color: #f82d17;--form-primary-text-color: #999;--form-secondary-text-color: #242424;--message-color: #e4edfd;--font-family-common: inter, system-ui, avenir, helvetica, arial, sans-serif;font-family:var(--font-family-common);line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--secondary-text-color);background-color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.link{font-size:14px;font-weight:500;color:var(--link-text-color);text-decoration:inherit}.link:hover{color:var(--link-hover-color)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;height:100vh}#app{position:relative;display:flex;flex-direction:column;flex:1;height:100%}#app .page,#app .page-wrapper{display:flex;flex:1;flex-direction:column}#app .profile-page,#app .chat-page{flex-direction:row}*{box-sizing:border-box}h1,h2,h3,h4{margin-top:0}h1{font-size:32px;margin-bottom:40px}h2{font-size:24px;margin-bottom:30px}h4{font-size:16px;margin-bottom:20px}.button{cursor:pointer;border:none;padding:0;margin:0}.button[type=submit]{font-size:14px;font-weight:500;height:38px;width:100%;display:flex;justify-content:center;align-items:center;border-radius:8px;background-color:var(--link-background-color);color:var(--primary-text-color)}.button:hover{border-color:var(--link-hover-color)}.button:focus,.button:focus-visible{outline:none}.button.small{width:40px}input{border:none;outline:none}.modal{width:100vw;height:100vh;background-color:#00000080;position:absolute;top:0;left:0;display:flex}.modal__form{min-width:35vw;margin:auto;padding:40px 30px;background-color:#fff;border-radius:12px;box-shadow:0,0,6,0 #00000024}.modal__form .form.form-field,.modal__form .button{margin-top:30px}.avatar-change{width:130px;height:130px;border-radius:50%;position:relative;background-color:var(--background-color);background-repeat:no-repeat;background-position:center center}.avatar-change input{opacity:0;position:absolute;top:0;bottom:0;width:inherit;height:inherit;display:block;border-radius:inherit}.avatar-change__placeholder{display:none;width:min-content;font-size:12px;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.avatar-change:hover:before{content:"";background-color:#000;opacity:.5;width:inherit;height:inherit;display:block;border-radius:inherit}.avatar-change:hover .avatar-change__placeholder{display:flex}.form-field-error{color:var(--error-color)}.chat-user{display:flex;align-items:center;margin-top:20px}.chat-user .button{margin-top:0;margin-left:auto}.chat-user-avatar{width:47px;height:47px;border-radius:50%;position:relative;background-color:var(--form-primary-text-color);background-repeat:no-repeat;background-position:center center;margin-right:15px}.chat-user-name{margin-right:15px;color:var(--secondary-text-color)}.chat-user-name-first{font-size:16px}.chat-user-name-second{font-size:12px}.profile{margin:15% auto}.profile__form{display:flex;flex-direction:column;align-items:center;align-self:baseline;width:560px}.profile section{width:100%}.profile section~section{margin-top:50px}.profile .form-field{display:flex;justify-content:space-between;align-items:center;width:100%;height:36px}.profile .form-field__label{font-weight:500;font-size:14px;color:var(--form-secondary-text-color);flex-shrink:0;margin-right:20px}.profile .form-field__input{color:var(--form-primary-text-color);font-weight:500;font-size:14px;text-align:end;flex-grow:1}.profile .form-field .link.exit-link{color:var(--error-color)}.profile section~.button{margin-top:50px}.form-field.form{display:flex;flex-direction:column;width:100%}.form-field.form .form-field__label{font-size:14px;color:var(--form-primary-text-color)}.form-field.form .form-field__input{padding:8px 0;border-bottom:1px solid var(--link-background-color);background-color:transparent;color:var(--form-secondary-text-color);font-size:14px}.form-field.form .form-field~.button{margin-top:auto}.form-field.form~.form-field.form{margin-top:16px}.auth-form{display:flex;flex-direction:column;margin:auto;align-items:center;box-shadow:0 0 6px #00000024;border-radius:12px;padding:50px 30px 30px;width:340px;min-height:450px;background-color:var(--primary-text-color)}.auth-form .button~.link{margin-top:14px}.profile .form-field:not(:last-child){border-bottom:1px solid var(--background-color)}.auth-form .form-field:last-child{margin-bottom:40px}.back-link{min-height:inherit;width:64px;background-color:var(--background-color);display:flex;align-items:center;justify-content:center}.back-link__arrow{width:28px;height:28px;border-radius:50%;background:var(--link-background-color) url(/arrow_left.svg) no-repeat center center}.error-form{display:flex;flex-direction:column;margin:auto;align-items:center}.dev-mode-nav ul{display:flex}.dev-mode-nav ul li{display:flex;flex:1}.chat-page .chat{padding:12px 0;display:flex;border-bottom:1px solid var(--background-color)}.chat-page .chat.active{background-color:#e4edfd}.chat-page .chat .chat-avatar{width:47px;height:47px;border-radius:50%;position:relative;background-color:var(--form-primary-text-color);background-repeat:no-repeat;background-position:center center}.chat-page .chat .chat-avatar input{opacity:0;position:absolute;top:0;bottom:0;width:inherit;height:inherit;display:block;border-radius:inherit}.chat-page .chat .chat-avatar:hover{cursor:pointer}.chat-page .chat__info{padding:0 15px 0 10px;flex-grow:1;display:flex;flex-direction:column;justify-content:center}.chat-page .chat__info__name{color:var(--secondary-text-color);margin-bottom:4px;font-weight:600;font-size:13px}.chat-page .chat__info__message{color:var(--form-primary-text-color);font-size:12px}.chat-page .chat__info__message__mine{color:var(--secondary-text-color);font-weight:600;font-size:inherit}.chat-page .chat__description{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.chat-page .chat__description__time{color:var(--secondary-text-color);font-size:10px}.chat-page .chat__description__count{color:var(--primary-text-color);font-size:12px;width:20px;height:20px;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:var(--link-background-color)}.chat-page__chats{display:flex;flex-direction:column;width:310px;max-width:30%;background:#fbfbfb;border-right:1px solid var(--background-color);padding:0 10px}.chat-page__chats .link-to-profile{display:flex;padding:20px}.chat-page__chats .link-to-profile .link{margin-left:auto}.chat-page__chats__header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--background-color)}.chat-page__chats__content{flex:1;overflow-y:auto}.chat-page__empty-chat{flex:1;display:flex;justify-content:center;align-items:center}.chat-page__chat{padding:0 20px;flex:1;display:flex;flex-direction:column}.chat-page__chat__messages{flex-grow:1;display:flex;flex-direction:column;gap:10px;margin-bottom:20px;max-height:calc(100vh - 160px);overflow-y:auto;scrollbar-color:var(--link-text-color) var(--background-color);scrollbar-width:thin;transition:scrollbar-color .3s ease-out;padding:10px}.chat-page__chat__messages .message{display:flex;border-radius:12px;background-color:var(--background-color);font-size:12px;font-weight:600;place-self:flex-start;padding:12px}.chat-page__chat__messages .message.mine{background-color:var(--message-color);place-self:flex-end}.chat-page__chat__bottom{display:flex;border-top:1px solid var(--background-color);padding:10px 0}.chat-page__chat__bottom .message-field-wrapper{border-radius:30px;flex-grow:1;background-color:var(--background-color);margin-right:16px}.chat-page__chat__bottom .message-field-wrapper .form-field__input{width:100%;border-radius:36px;padding:0 15px;height:36px;background-color:inherit;color:var(--secondary-text-color);font-weight:500;font-size:14px;text-align:start}.chat-page__chat__bottom .button-send{width:30px}