*{box-sizing:border-box;padding:0;margin:0}a{color:inherit;text-decoration:none}li{list-style-type:none}button{outline:none;border:none}img{max-height:100%;max-width:100%;vertical-align:top}input{outline:none;border:none}textarea{border:none}textarea:focus{outline:none}:root{font-family:Roboto,sans-serif}.form-background{background:url(/images/form-background.jpeg) no-repeat center center;background-size:cover;height:100vh;width:100vw;display:flex;align-items:center;justify-content:center}.form-container{width:480px;padding:40px 60px;border-radius:16px;background-color:var(--background-surface-m);display:flex;flex-direction:column;align-items:center;gap:24px}.form-container__head{display:flex;flex-direction:column;align-items:center;gap:32px}.form-container__title{font-size:24px}.form{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:24px}.form__input{padding:16px 20px;font-size:16px;font-weight:400;background-color:var(--background-base-primary);border:1px solid var(--border-base-main);border-radius:12px}.form__input:focus{border:1px solid var(--border-base-main-focus)}.form__button{padding:16px 0;font-size:16px;border-radius:12px;background-color:var(--background-accent-default);color:var(--content-base-accent-on);cursor:pointer}.form__button:hover{background-color:var(--background-accent-hover)}.redirect-link{margin-top:4px;font-size:16px;color:var(--background-accent-default)}@media(max-width:475px){.background{padding:0 20px}.form-container{padding:20px 40px;gap:22px}.form-container__head{gap:24px}.form-container__title{white-space:nowrap;font-size:20px}.form{gap:20px}.form__input{padding:12px 16px}.redirect-link{margin-top:0}}.layout{display:grid;height:100vh;grid-template-areas:"header header" "list chat";grid-template-columns:320px 1fr;grid-template-rows:72px 1fr;overflow:hidden}.header{grid-area:header;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-base-secondary)}.header__greet{display:flex;gap:16px;align-items:center}.header__user-name{font-size:18px;font-weight:600}.header__leave-button{padding:8px;background-color:transparent;border:1px solid var(--border-base-main);border-radius:12px}.header__leave-button:hover{background-color:var(--background-transparent-hover)}.chat-list{grid-area:list;border-right:1px solid var(--border-base-secondary);display:flex;flex-direction:column;height:100%;overflow:hidden}.chat-list__container{display:flex;flex-direction:column;height:100%;overflow:hidden}.chat-list__header{flex-shrink:0;display:flex;padding:16px 24px;justify-content:space-between;align-items:center}.chat-list__title{font-size:18px;line-height:28px;font-weight:600}.chat-list__add-container{position:relative}.chat-list__add-button{padding:10px;border-radius:12px;border:1px solid var(--content-accent-default);background-color:transparent;cursor:pointer}.chat-list__add-button:hover{background-color:var(--background-transparent-hover)}.chats{padding:0 12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;align-items:stretch;flex:1}.chats::-webkit-scrollbar{width:6px}.chats::-webkit-scrollbar-thumb{background:#6a9de0b3;border-radius:4px}.chats::-webkit-scrollbar-thumb:hover{background:#6197ddb3}.chat-item{padding:8px 12px;border-radius:12px}.chat-item.chat-item--focused{background-color:var(--background-base-primary)}.chat-item__category{color:var(--content-base-secondary);font-size:10px;font-weight:600;line-height:16px}.chat-item__info{margin-top:4px;display:flex;justify-content:space-between;align-items:center}.chat-item__username{font-size:14px;font-weight:600;color:var(--content-base-primary)}.chat-item__new-message-count{padding:1.3px 6px;background-color:#141414;color:#fff;font-size:10px;line-height:16px;font-weight:600;border-radius:15px}.chat-item__message{margin-top:6px;display:flex;justify-content:space-between;align-items:center}.chat-item__message-text{font-size:13px;line-height:16px;color:var(--content-base-primary)}.chat-item__time{font-size:13px;line-height:16px;color:var(--content-base-tertiary)}.empty-list{margin-top:180px;display:flex;flex-direction:column;align-items:center}.empty-list__text{font-size:18px;font-weight:600;color:var(--content-base-primary)}.empty-list__buttons-container{margin-top:16px;display:flex;gap:8px;align-items:center}.empty-list__add-button{padding:12px;border-radius:12px;border:1px solid var(--content-accent-default);color:var(--content-accent-default);background-color:transparent}.empty-list__add-button:hover{background-color:var(--background-transparent-hover)}.chat{grid-area:chat;display:grid;grid-template-areas:"chat-header" "dialog" "footer";grid-template-columns:auto;grid-template-rows:auto 1fr auto;background-color:var(--background-base-primary);overflow:hidden}.chat__header{grid-area:chat-header;padding:18px 24px;background-color:var(--background-surface-m)}.chat__header-title{font-weight:600;font-size:18px;line-height:28px}.chat__header-online{color:var(--content-accent-default);font-size:15px}.chat__header-typing{color:var(--content-accent-default);font-size:14px;height:17px}.chat__header-title-container{display:flex;justify-content:start;align-items:center;gap:15px}.dialog{grid-area:dialog;display:flex;flex-direction:column;padding:24px 24px 0;overflow-y:scroll;flex:1}.dialog__loading{color:var(--content-base-tertiary);font-size:16px;align-self:center}.dialog__message-parent{margin-bottom:12px;display:grid}.dialog__message-parent:first-child{margin-top:auto}@keyframes message-appear{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.empty-messages{height:100%;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:8px}.empty-messages__img{width:450px}.empty-messages__title{font-size:16px;color:var(--content-base-tertiary);font-weight:500}.message{display:flex;flex-direction:column;background-color:var(--background-surface-m);padding:8px 12px;border-radius:8px;justify-self:start;max-width:60%;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;animation:message-appear .3s ease forwards}.message__text{font-size:14px;color:var(--content-base-primary)}.message__image{max-width:450px;border-radius:8px;display:block;margin:4px 0}.message__time{align-self:flex-end;font-size:10px;color:var(--content-base-secondary);line-height:16px}.my-message{background-color:var(--background-accent-light);justify-self:end}.chat__footer{grid-area:footer;margin:24px 20px}.chat__footer-file-input{display:none}.chat__send-container{display:flex;border:1px solid var(--border-base-secondary);background-color:var(--background-surface-m);border-radius:16px;padding:8px 8px 8px 20px}.chat__send-input{flex:1;color:var(--content-base-tertiary);font-weight:600;font-size:14px;resize:none;overflow:hidden}.chat__send-icon{width:16px;height:16px}.chat__upload-button{border-radius:6px;margin-right:8px;background-color:var(--background-base-disabled)}.chat__upload-button:hover{background-color:var(--background-base-disabled-hover)}.chat__send-button{padding:12px;color:var(--content-base-tertiary);background-color:var(--background-base-disabled);font-size:13px;border-radius:12px}.chat__send-button:hover{background-color:var(--background-base-disabled-hover)}.add-popUp{position:absolute;z-index:100;top:110%;left:0;background-color:var(--background-surface-m);border:1px solid var(--border-base-secondary);border-radius:12px;width:180px}.add-popUp__options-list{display:flex;gap:2px;flex-direction:column;align-items:stretch}.add-popUp__button{padding:14px 12px;display:block;width:100%;text-align:left;background-color:transparent;font-size:14px;line-height:20px;cursor:pointer;color:var(--content-base-primary)}.modal-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{padding:24px;background-color:var(--background-surface-m);border-radius:24px;width:480px;display:flex;flex-direction:column;gap:16px;align-items:stretch}.modal__close-btn{align-self:end;width:16px;height:16px;background-color:transparent}.modal__header{display:flex;justify-content:space-between;align-items:start}.modal__title{font-weight:700;font-size:24px;color:var(--content-base-primary)}.modal__subtitle{font-size:18px;font-weight:600}.modal__text{font-weight:500;font-size:14px;color:var(--content-base-secondary)}.modal__input{color:var(--content-base-secondary);background-color:var(--background-base-primary);border:1px solid var(--border-base-main);border-radius:12px;padding:14px 16px}.modal__users-list{display:flex;flex-direction:column;gap:8px;align-items:stretch;justify-content:start;max-height:328px;overflow-y:auto}.modal__user{padding:12px 16px;background-color:var(--background-base-primary);border-radius:12px;display:flex;justify-content:space-between;align-items:start}.modal__user-info-container{display:flex;flex-direction:column;align-items:start;gap:4px}.modal__user-nickname{color:var(--content-base-primary);font-weight:700;font-size:14px}.modal__user-info{color:var(--content-base-tertiary);font-weight:500;font-size:12px;line-height:16px}.modal__user-loading{font-size:16px;color:var(--content-base-tertiary)}.modal__buttons-container{align-self:flex-end;display:flex;gap:12px}.modal__button{background-color:transparent;color:var(--content-base-primary);border:1px solid var(--border-base-main);padding:14px 16px;border-radius:12px}.modal__button:hover{background-color:var(--background-transparent-hover)}.modal__button--accent{background-color:var(--background-accent-default);border:none;color:var(--content-base-accent-on)}.modal__button--accent:hover{background-color:var(--background-accent-hover)}.modal__loading{color:var(--content-base-tertiary);font-size:16px}:root{--background-surface-m: rgb(255, 255, 255, 1);--background-base-primary: rgb(245, 245, 245, 1);--background-base-disabled: rgb(232, 232, 232, 1);--background-base-disabled-hover: rgb(226, 226, 226, 1);--background-accent-default: rgb(79, 117, 167, 1);--background-accent-hover: rgb(70, 104, 149);--background-accent-hover-light: rgb(107, 159, 227);--background-accent-light: rgb(177, 202, 235);--background-transparent-hover: rgba(0, 0, 0, .03);--content-base-primary: rgb(33, 33, 33, 1);--content-base-secondary: rgb(110, 109, 109, 1);--content-base-tertiary: rgb(148, 148, 148, 1);--content-base-accent-on: rgb(255, 255, 255, 1);--content-accent-default: rgb(106, 157, 224);--content-error: rgb(224, 106, 106);--content-success: rgb(106, 224, 114);--border-base-main: rgb(200, 198, 198, 1);--border-base-main-focus: rgb(150, 150, 150);--border-base-secondary: rgb(232, 232, 232, 1)}.form__error{color:var(--content-error);font-size:16px}