:root{--border-color: #d9d9d9}*{padding:0;margin:0}html,body,#root{height:100%;width:100%}.h-full{width:100%}.v-full{height:100%}.left-side{border-right:var(--border-color) 1px solid;width:300px;padding:1.2rem .8rem}.chat-container{padding:1.2rem .8rem;width:calc(100% - 300px)}.chat-content-container{height:calc(100% - 136px - 2rem);border:var(--border-color) 1px solid;border-radius:10px;padding:1.2rem .8rem;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column}.chat-input-container{border:var(--border-color) 1px solid;border-radius:10px;padding:1.2rem .8rem;height:96px}.chat-message{padding:1.2rem .8rem;max-width:70%;border-radius:.4rem}.left-message{align-self:flex-start;background-color:#d0d0d0;margin-left:10px}.right-message{align-self:flex-end;background-color:#a5eace;margin-right:10px}.left-message :before{content:"";display:inline-block;position:relative;left:-18px;top:-8px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:8px solid #D0D0D0}.right-message :after{content:"";display:inline-block;position:relative;right:-18px;top:-8px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #A5EACE}