:root{--chat-background:rgba(10,14,14,.95);--chat-panel-background:#131719;--chat-bubble-background:#14181a;--chat-add-button-background:#212324;--chat-send-button-background:#8147fc;--chat-text-color:#a3a3a3;--chat-options-svg:#a3a3a3}.demo_chat{background:var(--chat-background);min-width:300px;max-width:450px;margin:25px auto;box-sizing:border-box;padding:1em;border-radius:12px;position:relative}.demo_chat:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);background-size:cover;z-index:-1}.demo_chat .btn-icon{position:relative;cursor:pointer}.demo_chat .btn-icon svg{stroke:#fff;fill:#fff;width:50%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.demo_chat .chat__conversation-board{padding:1em 0 2em;height:450px;overflow-y:auto;-webkit-overflow-scrolling:touch}.demo_chat .chat__conversation-board__message-container.reversed{flex-direction:row-reverse}.demo_chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__bubble{position:relative}.demo_chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__bubble span:not(:last-child){margin:0 0 2em}.demo_chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__person{margin:0 0 0 1.2em}.demo_chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__options{align-self:center;position:absolute;left:0;display:none}.demo_chat .chat__conversation-board__message-container{position:relative;display:flex;flex-direction:row}.demo_chat .chat__conversation-board__message-container:hover .chat__conversation-board__message__options{display:flex;align-items:center}.demo_chat .chat__conversation-board__message-container:hover .option-item:not(:last-child){margin:0 .5em 0 0}.demo_chat .chat__conversation-board__message-container:not(:last-child){margin:0 0 2em}.demo_chat .chat__conversation-board__message__person{text-align:center;margin:0 1.2em 0 0}.demo_chat .chat__conversation-board__message__person__avatar{height:35px;width:35px;overflow:hidden;border-radius:50%;-webkit-user-select:none;-moz-user-select:none;user-select:none;ms-user-select:none;position:relative}.demo_chat .chat__conversation-board__message__person__avatar:before{content:"";position:absolute;height:100%;width:100%}.demo_chat .chat__conversation-board__message__person__avatar img{height:100%;width:auto}.demo_chat .chat__conversation-board__message__person__nickname{font-size:9px;color:#484848;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:none}.demo_chat .chat__conversation-board__message__context{max-width:55%;align-self:flex-end}.demo_chat .chat__conversation-board__message__options{align-self:center;position:absolute;right:0;display:none}.demo_chat .chat__conversation-board__message__options .option-item{border:0;background:0;padding:0;margin:0;height:16px;width:16px;outline:none}.demo_chat .chat__conversation-board__message__options .emoji-button svg,.demo_chat .chat__conversation-board__message__options .more-button svg{stroke:var(--chat-options-svg);fill:transparent;width:100%}.demo_chat .chat__conversation-board__message__bubble span{width:-moz-fit-content;width:fit-content;display:inline-table;word-wrap:break-word;background:var(--chat-bubble-background);font-size:13px;color:var(--chat-text-color);padding:.5em .8em;line-height:1.5;border-radius:6px;font-family:Lato,sans-serif}.demo_chat .chat__conversation-board__message__bubble:not(:last-child){margin:0 0 .3em}.demo_chat .chat__conversation-board__message__bubble:active{background:var(--chat-bubble-active-background)}.demo_chat .chat__conversation-panel{background:var(--chat-panel-background);border-radius:12px;padding:0 1em;height:55px;margin:.5em 0 0}.demo_chat .chat__conversation-panel__container{display:flex;flex-direction:row;align-items:center;height:100%}.demo_chat .chat__conversation-panel__container .panel-item:not(:last-child){margin:0 1em 0 0}.demo_chat .chat__conversation-panel__button{background:grey;height:20px;width:30px;border:0;padding:0;outline:none;cursor:pointer}.demo_chat .chat__conversation-panel .add-file-button{height:23px;min-width:23px;width:23px;background:var(--chat-add-button-background);border-radius:50%}.demo_chat .chat__conversation-panel .add-file-button svg{width:70%;stroke:#54575c}.demo_chat .chat__conversation-panel .emoji-button{min-width:23px;width:23px;height:23px;background:transparent;border-radius:50%}.demo_chat .chat__conversation-panel .emoji-button svg{width:100%;fill:transparent;stroke:#54575c}.demo_chat .chat__conversation-panel .send-message-button{background:var(--chat-send-button-background);height:30px;min-width:30px;border-radius:50%;transition:.3s ease}.demo_chat .chat__conversation-panel .send-message-button:active{transform:scale(.97)}.demo_chat .chat__conversation-panel .send-message-button svg{margin:1px -1px}.demo_chat .chat__conversation-panel__input{width:100%;height:100%;outline:none;position:relative;color:var(--chat-text-color);font-size:13px;background:transparent;border:0;font-family:Lato,sans-serif;resize:none}@media only screen and (max-width:600px){.demo_chat{margin:0}.demo_chat .chat__conversation-board__message__options{display:none!important}}