:root{--color-1: #007bff}.online-chat-content{border:none;padding:10px;box-sizing:border-box;font-family:Arial,sans-serif;background-color:#f8f8f8;display:flex;height:75%;width:95%;flex-direction:column;max-width:560px;margin:auto;margin-top:10vh;border-radius:10px}.online-chat-content a{margin:0;padding:0}.online-chat-content textarea{font-family:Microsoft JhengHei,Arial,"Microsoft Sans Serif",Lucida Sans Unicode;letter-spacing:.4px}.online-chat-content .btn{margin-left:6px;margin-right:6px;background-color:var(--color-1);text-align:center;color:#fff;padding:9px 10px;font-size:16px;border:none;border-radius:7px;cursor:pointer;min-width:70px;display:inline-block}.online-chat-content .chat-box{height:300px;flex:1;overflow-y:scroll;border:1px solid #ccc;padding:10px;margin-bottom:10px;display:flex;flex-direction:column;background-color:#f8f8f8}.online-chat-content .message-item{padding:9px 11px;border-radius:12px;font-size:.9rem;min-width:50px;margin:7px 0;max-width:85%;word-wrap:break-word;position:relative}.online-chat-content .message-item .time{font-size:12px;transform:translateY(5px);padding:2px 0 3px;text-align:right;float:right;color:#fff;display:inline}.online-chat-content .message-item .text{margin-right:8px;font-size:15px;line-height:20px}.online-chat-content .photo{width:100%}.online-chat-content .message-item.role-system .time{color:#888}.online-chat-content .message-item.role-system{align-self:flex-start;background-color:#fff;color:#555}.online-chat-content .message-item.role-user{align-self:flex-end;background-color:#2196f3;color:#fff}.online-chat-content #message-input{min-height:90px;width:100%;box-sizing:border-box;padding:10px;font-size:16px;border-radius:5px;border:1px solid #ccc;margin-right:10px;resize:none}.online-chat-content #message-input:focus-visible{outline-color:#2196f3;outline-style:auto;outline-width:.5px}.online-chat-content #error{color:red}.online-chat-content #system-message{color:gray}@media only screen and (max-width: 600px){.online-chat-content #chat-box{height:200px;font-size:14px}.online-chat-content #message-input{font-size:16px;margin-right:5px;height:120px}}.online-chat-content .btn-container{display:flex;margin-top:10px;justify-content:right}.online-chat-content #image-upload{position:fixed;inset:0;background-color:#0000008a}.online-chat-content .img-container{display:block;margin:auto;margin-top:10vh;width:70%;max-width:400px;background-color:#fff;padding:10px 8px;border-radius:10px}.online-chat-content .img-container .imgPreview{width:100%;padding:0 0 8px}.online-chat-content .img-container .desc{display:block;font-size:17px;color:#1b1b1b;padding:0 0 10px}.online-chat-content .file{position:relative;line-height:40px;height:40px;padding-right:10px;color:var(--color-1)}.online-chat-content .file input{position:absolute;font-size:0px;right:0;top:0;opacity:0;width:100%;height:100%}.online-chat-content html,.online-chat-content iframe,.online-chat-content body{padding:0;margin:0}.online-chat-content .iframe{border:none;width:100%;box-sizing:border-box;height:80vh}.online-chat-content .user-info{flex-direction:row;display:flex;justify-content:space-between;padding:2px 0 8px;color:#555}.online-chat-content .user-info .change{color:var(--color-1)}.online-chat-content .user-info .clear{margin-left:10px;color:var(--color-1)}.online-chat-content .header{display:flex;flex-direction:row;justify-content:space-between;height:35px;margin-bottom:10px;align-items:center}.online-chat-content .header .title{font-weight:600;color:#3a3a3a;font-size:19px}.online-chat-content .header .close-btn{height:80%}