@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--color-primary:#6c63ff;--color-primary-hover:#5952d9;--color-background:#f5f6fa;--color-surface:#fff;--color-surface-secondary:#f0f1f5;--color-text-primary:#24252a;--color-text-secondary:#747680;--color-text-muted:#a3a5ad;--color-border:#e2e3e8;--color-danger:#e05252;--color-danger-hover:#c94343;--color-white:#fff;--font-family:"Inter", sans-serif;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family)}h1,h2,h3{font-weight:var(--font-weight-bold)}button,input,textarea{font-family:inherit;font-size:1rem}button,.nav__link{font-weight:var(--font-weight-semibold);font-size:1rem}p{font-weight:var(--font-weight-regular)}.page{width:100%;min-height:100vh}.page .page__form-container{border:1px solid var(--color-border);border-radius:15px;flex-direction:column;gap:1rem;padding:1rem;display:flex}.wrapper{max-width:1100px;margin:0 auto}@media screen and (width<=1132px){.wrapper{padding:0 1rem}}.homepage .homepage__top{justify-content:space-between;align-items:center;padding:2rem 0;display:flex}.button-group{gap:1rem;display:flex}@media screen and (width<=600px){.homepage .homepage__top{flex-direction:column;gap:1rem}.homepage .homepage__top .button{align-self:stretch}}.header{padding:1rem 0;box-shadow:0 0 5px #000000b3}.header .header__wrapper{justify-content:space-between;align-items:center;display:flex}.header .header__wrapper .header__title{color:var(--color-primary);letter-spacing:1.5px}.nav{gap:2rem;display:flex}.nav .nav__link{color:var(--color-text-primary);border-radius:5px;padding:.5rem 1rem;text-decoration:none;transition:all .3s;position:relative}.nav .nav__link:after{content:"";background-color:var(--color-primary);width:0;height:2px;transition:width .3s;position:absolute;bottom:0;left:1rem}.nav .nav__link:hover:after{width:calc(100% - 2rem)}.nav .username{color:var(--color-text-primary);border-radius:5px;padding:.5rem -16px .5rem 1rem;font-weight:500;position:relative}.button{color:#fff;background-color:var(--color-primary);border:2px solid var(--color-primary);cursor:pointer;border-radius:5px;padding:.5rem 1rem;font-family:inherit;font-weight:600;transition:background-color .2s,color .2s,border-color .2s}.button:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.button--outline{color:var(--color-primary);border-color:var(--color-primary);background-color:#0000}.button--outline:hover{color:#fff;background-color:var(--color-primary);border-color:var(--color-primary)}.button--disabled{background-color:var(--color-text-secondary);color:var(--color-text-primary);border-color:var(--color-text-secondary)}.button--disabled:hover{background-color:var(--color-text-secondary);border-color:var(--color-text-secondary)}.message-flow{flex-direction:column;gap:1.5rem;display:flex}.message{border:1px solid var(--color-text-muted);background-color:var(--color-surface);border-radius:15px;gap:1.5rem;width:100%;padding:1.25rem 1.25rem 1.5rem;display:flex;position:relative}.message .message__initials{aspect-ratio:1;background-color:var(--color-primary);color:#fff;border-radius:50%;flex-shrink:0;align-self:center;place-items:center;width:3.5rem;margin:0;font-size:1.25rem;display:grid}.message .message__content{flex-direction:column;gap:.75rem;width:100%;min-width:0;display:flex}.message .message__content .message__content-top{justify-content:space-between;align-items:center;column-gap:1rem;width:100%;display:flex}.message .message__content .message__content-top .message-link{cursor:pointer;color:inherit;min-width:0;text-decoration:none}.message .message__content .message__content-top .message__user{white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:700;overflow:hidden}.message .message__content .message__content-top .message__icon-group{flex-shrink:0;align-items:center;gap:1rem;display:flex}.message .message__content .message__content-top .message__icon-group .icon{cursor:pointer;transition:transform .2s,opacity .2s}.message .message__content .message__content-top .message__icon-group .icon:hover{transform:scale(1.15)}.message .message__content .message__content-top .message__icon-group .icon:active{transform:scale(1)}.message .message__content .message__content-top .message__icon-group .icon--pencil{color:var(--color-primary)}.message .message__content .message__content-top .message__icon-group .icon--trash{color:var(--color-danger)}.message .message__content .message__text{overflow-wrap:anywhere;word-break:break-word;margin:0;line-height:1.5}.message .message__date{background-color:var(--color-surface);border:1px solid var(--color-text-muted);color:var(--color-text-primary);white-space:nowrap;border-radius:8px;margin:0;padding:.2rem .5rem;font-size:.8rem;position:absolute;bottom:-11px;right:16px}@media (width<=600px){.message{gap:1rem;padding:1rem 1rem 1.5rem}.message .message__initials{width:3rem;font-size:1.1rem}}.back-icon{cursor:pointer;align-items:center;gap:.5rem;padding:1rem 0;display:flex}.login-form{flex-direction:column;gap:1rem;display:flex}.login-form .login-form__label{color:var(--color-text-primary);flex-direction:column;align-items:stretch;gap:.4rem;font-size:.875rem;font-weight:600;display:flex}.login-form .login-form__label .login-form__input{width:100%;color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;outline:none;padding:.75rem 1rem;font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}.login-form .login-form__label .login-form__input::placeholder{color:var(--color-text-muted)}.login-form .login-form__label .login-form__input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #6c63ff1f}.login-form .login-form__message{align-self:center}.login-form .login-form__message .login-form__message-link{color:var(--color-primary);text-decoration:none}.register-form{flex-direction:column;gap:1rem;display:flex}.register-form .register-form__label{color:var(--color-text-primary);flex-direction:column;align-items:stretch;gap:.4rem;font-size:.875rem;font-weight:600;display:flex}.register-form .register-form__label .register-form__input{width:100%;color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;outline:none;padding:.75rem 1rem;font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}.register-form .register-form__label .register-form__input::placeholder{color:var(--color-text-muted)}.register-form .register-form__label .register-form__input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #6c63ff1f}.register-form .register-form__label .register-form__input:invalid{border-color:red}.register-form .register-form__label .register-form__input:invalid:focus{box-shadow:0 0 0 3px #ff18181f}.register-form .register-form__message{align-self:center}.register-form .register-form__message .register-form__message-link{color:var(--color-primary);text-decoration:none}.message-form{flex-direction:column;gap:1rem;display:flex}.message-form .message-form__label{color:var(--color-text-primary);flex-direction:column;align-items:stretch;gap:.4rem;font-size:.875rem;font-weight:600;display:flex}.message-form .message-form__label .message-form__input,.message-form .message-form__label .message-form__textarea{width:100%;color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;outline:none;padding:.75rem 1rem;font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}:is(.message-form .message-form__label .message-form__input,.message-form .message-form__label .message-form__textarea)::placeholder{color:var(--color-text-muted)}:is(.message-form .message-form__label .message-form__input,.message-form .message-form__label .message-form__textarea):focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #6c63ff1f}.message-form .message-form__label .message-form__textarea{resize:none;min-height:120px}.message-form .message-form__textarea-wrapper{position:relative}.message-form .message-form__textarea-wrapper .message-form__textarea{padding-bottom:2rem;display:block}.message-form .message-form__textarea-wrapper .message-form__counter{color:var(--color-text-muted);pointer-events:none;font-size:.75rem;font-weight:400;position:absolute;bottom:.6rem;right:.75rem}
