:root{--msger-bg: #fff;--border: 2px solid #ddd;--left-msg-bg: #ececec;--right-msg-bg: #579ffb}html{box-sizing:border-box}*,*:before,*:after{margin:0;padding:0;box-sizing:inherit}body{display:flex;justify-content:center;align-items:center;font-family:Helvetica,sans-serif}.msger{display:flex;flex-flow:column wrap;justify-content:space-between;width:100%;max-width:867px;margin:25px 10px;height:calc(100dvh - 50px);min-height:calc(fill-available - 50px);min-height:calc(-webkit-fill-available - 50px);border:var(--border);border-radius:5px;background:var(--msger-bg);box-shadow:0 15px 15px -5px #0003}@media screen and (max-height: 600px){.msger{margin:0;height:calc(100% - 50px)}}.msger-header{display:flex;justify-content:space-between;padding:10px;border-bottom:var(--border);background:#eee;color:#666}.msger-chat{flex:1;overflow-y:auto;padding:10px;background-color:#fcfcfe}.msger-chat::-webkit-scrollbar{width:6px}.msger-chat::-webkit-scrollbar-track{background:#ddd}.msger-chat::-webkit-scrollbar-thumb{background:#bdbdbd}.msg{display:flex;align-items:flex-end;margin-bottom:10px}.msg:last-of-type{margin:0}.msg-img{width:50px;height:50px;margin-right:10px;background:#ddd;background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:50%;min-width:50px;flex-shrink:0}.msg-bubble{max-width:450px;padding:15px;border-radius:15px;background:var(--left-msg-bg)}.msg-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.msg-info-name{margin-right:10px;font-weight:700}.msg-info-time{font-size:.85em}.msg-text{white-space:pre-wrap;word-wrap:break-word}.left-msg .msg-bubble{border-bottom-left-radius:0}.right-msg{flex-direction:row-reverse}.right-msg .msg-bubble{background:var(--right-msg-bg);color:#fff;border-bottom-right-radius:0}.right-msg .msg-img{margin:0 0 0 10px}.msger-inputarea{display:flex;padding:10px;border-top:var(--border);background:#eee}.msger-inputarea *{padding:10px;border:none;border-radius:3px;font-size:1em}.msger-input{flex:1;background:#ddd}.msger-send-btn{margin-left:10px;background:rgb(69,5,94);color:#fff;font-weight:700;cursor:pointer;transition:background .23s}.msger-send-btn:disabled{background:#808080;cursor:not-allowed}.msger-send-btn:hover{background:rgb(69,5,94)}.msger-send-btn:hover:disabled{background:#808080;cursor:not-allowed}