#chat-container { margin: 20px; background-color: var(--ov-light-color); border-radius: 5px; height: -webkit-fill-available; height: -moz-available; } .header-container { padding: 10px; display: flex; } .header-container h3 { margin-left: 5px; margin-top: auto; margin-bottom: auto; } .header-container button { margin-left: auto; } .text-container{ /* padding: 5px; */ background-color: var(--ov-light-dark-color); color: var(--ov-dark-color); text-align: center; /* margin: 5px 5px; */ font-size: 12px; } .messages-container { display: block !important; overflow-y: auto; overflow-x: hidden; padding: 10px; } .input-container { height: 25px; display: flex; background-color: var(--ov-light-dark-color); padding: 10px; margin: 10px; border-radius: 5px; } .input-container textarea { width: 100%; height: 16px; margin: auto; background-color: transparent; display: block; border: none; padding: 0; word-wrap: break-word; white-space: pre-wrap; resize: none; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif; } .message { position: relative; padding: 3px 0; } .msg-detail { width: 95%; display: inline-block; } .msg-detail p { margin: 0; font-size: 14px; } .nickname-container p { font-size: 13px; font-weight: bold; color: var(--ov-dark-color); } .msg-content { position: relative; border-radius: 5px; padding: 8px; color: #000000; width: auto; max-width: 95%; font-size: 13px; word-break: break-all; } /* Start message from other user */ .message.left .msg-detail .nickname-container { text-align: left; } .message.left .msg-detail .msg-content { float: left; } /* End message from other user */ /* Start my messages */ .message.right .msg-detail .nickname-container { text-align: right; } .message.right .msg-detail .msg-content { float: right; } /* End my messages */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background-color: #6b6b6b; } ::ng-deep a:-webkit-any-link { color: #1a73e8; }