.chat-container.data-v-c5c3bce2 { display: flex; flex-direction: column; overflow-y: auto; background-color: #f0f0f0; padding: 10px; } .messages.data-v-c5c3bce2 { flex-grow: 1; overflow-y: auto; } .message.data-v-c5c3bce2 { display: flex; justify-content: flex-end; align-items: flex-end; margin-bottom: 10px; flex-direction: column; } .text.data-v-c5c3bce2{ width: 70%; background: white; border-radius: 5px; padding: 10px; margin: 5px 0 10px; box-sizing: border-box; font-size: 16px; } .bubble.data-v-c5c3bce2 { width:100px; padding: 10px 20px 10px 20px; justify-content: flex-end; margin-right: 10px; background-color: rgb(131 235 96); border-radius: 5px; display: flex; align-items: right; position: relative; } .bubble.data-v-c5c3bce2::after { content: ""; width: 0px; height: 0px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #83eb60; position: absolute; top: 14px; right: -5px; } .duration.data-v-c5c3bce2 { color: #000; font-size: 16px; } .audioPaly.data-v-c5c3bce2 { width: 12px; height: 12px; } .input-area.data-v-c5c3bce2 { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgb(245, 245, 245); display: flex; justify-content: center; padding: 10px; box-sizing: border-box; } .input-area>button.data-v-c5c3bce2 { display: block; width: 100%; background-color: #FFFFFF; border: none; padding: 3px 0; border-radius: 5px; color: #333333; font-size: 16px; font-weight: bold; text-align: center; outline: none; cursor: pointer; } .input-area>.button-hover.data-v-c5c3bce2 { background-color: #f0f0f0 !important; } .input-area>button.data-v-c5c3bce2:after { border: none; } .recording-overlay.data-v-c5c3bce2 { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 20px; border-radius: 10px; text-align: center; } .recording-overlay view.data-v-c5c3bce2 { margin: 5px 0; }