.message-wrapper[data-v-f8c98eff] {
  display:flex;
  width:100%;
  line-height:0
}
.message-wrapper.self[data-v-f8c98eff] {
  justify-content:flex-end
}
.message-wrapper[data-v-f8c98eff]:not(.self) {
  justify-content:flex-start
}
.sending-status[data-v-f8c98eff] {
  display:flex;
  justify-content:center;
  align-items:center
}
.sending-status .send-failed[data-v-f8c98eff] {
  background:none;
  border:none;
  padding:0;
  cursor:pointer
}
.sending-status img[data-v-f8c98eff] {
  width:16px;
  height:16px
}
.sending-status .loading[data-v-f8c98eff] {
  animation:rotate-center-f8c98eff 1s linear infinite
}
@keyframes rotate-center-f8c98eff {
  0% {
    transform:rotate(0)
  }
  to {
    transform:rotate(360deg)
  }
}
.message-bubble[data-v-f8c98eff] {
  display:inline-block;
  padding:10px;
  margin:0 10px;
  word-wrap:break-word;
  max-width:360px;
  font-family:PingFangSC,PingFang SC;
  font-weight:500;
  font-size:13px;
  color:#24252c;
  line-height:18px;
  text-align:left;
  font-style:normal
}
.message-bubble.self[data-v-f8c98eff] {
  background-color:#fff;
  text-align:left;
  border:1px solid #f5f5f5;
  border-radius:10px 0 10px 10px
}
.message-bubble[data-v-f8c98eff]:not(.self) {
  background-color:#f5f5f5;
  text-align:left;
  border-radius:0 10px 10px
}
.media-content[data-v-f8c98eff] {
  display:nline-block;
  max-width:80%;
  overflow:hidden;
  margin:0 10px
}
.media-content.self[data-v-f8c98eff] {
  justify-content:flex-end
}
.media-content[data-v-f8c98eff]:not(.self) {
  justify-content:flex-start
}
.media-content img[data-v-f8c98eff] {
  max-width:300px;
  max-height:300px;
  object-fit:contain
}
.media-content img.self[data-v-f8c98eff] {
  background-color:#fff;
  border-radius:10px 0 10px 10px;
  border:1px solid #eeeeee
}
.media-content img[data-v-f8c98eff]:not(.self) {
  background-color:#f5f5f5;
  border:1px solid #eeeeee;
  border-radius:0 10px 10px
}
.media-content video[data-v-f8c98eff] {
  max-width:300px;
  max-height:250px;
  object-fit:contain;
  background-color:#fff;
  border-radius:10px 0 10px 10px;
  border:1px solid #eeeeee
}
.file-content[data-v-f8c98eff] {
  padding:10px;
  margin:0 10px
}
.file-content.self[data-v-f8c98eff] {
  background-color:#fff;
  border-radius:10px 0 10px 10px
}
.file-content[data-v-f8c98eff]:not(.self) {
  background-color:#f5f5f5;
  border-radius:0 10px 10px
}
.message-list[data-v-b7726209] {
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  margin-bottom:10px
}
.message-item[data-v-b7726209] {
  margin:10px 0
}
.message-time[data-v-b7726209] {
  font-family:PingFangSC,PingFang SC;
  text-align:center;
  font-size:12px;
  color:#adadad;
  margin-bottom:20px;
  margin-top:10px
}
.container[data-v-6276c215] {
  padding:10px;
  display:flex;
  flex-direction:column
}
.container .bottom-option[data-v-6276c215] {
  display:flex;
  flex-direction:row
}
.container .loggedin-option[data-v-6276c215] {
  display:flex;
  align-items:center;
  justify-content:space-between;
  align-self:flex-end
}
.container .message-input[data-v-6276c215] {
  background:#f4f6f7;
  border-radius:10px;
  padding:0 7px;
  display:flex;
  height:100%
}
.container .file-upload-button[data-v-6276c215] {
  padding:5px 0;
  align-self:flex-end
}
.container .message-input textarea[data-v-6276c215]::placeholder {
  color:#d8d8d8;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block
}
.container .seleced img[data-v-6276c215] {
  background:#fff
}
.container .message-input textarea[data-v-6276c215] {
  flex:1;
  border:none;
  background:none;
  outline:none;
  resize:none;
  overflow:hidden;
  padding:10px;
  border-radius:10px;
  font-family:PingFangSC,PingFang SC;
  font-weight:500;
  font-size:13px;
  color:#24252c;
  text-align:left
}
.container .separator[data-v-6276c215] {
  display:flex;
  background:#d8d8d8;
  width:1px;
  height:14px;
  align-self:flex-end;
  margin:12px 7px
}
.container .message-input button[data-v-6276c215] {
  background:none;
  padding:5px 0;
  color:gray;
  border:none;
  border-radius:20px;
  align-self:flex-end;
  cursor:pointer
}
.container .message-input .send-btn[data-v-6276c215] {
  opacity:1;
  transition:opacity .3s ease
}
.container .message-input .send-btn[data-v-6276c215]:disabled {
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none
}
.container .message-input img[data-v-6276c215] {
  max-width:30px;
  max-height:30px;
  object-fit:contain;
  vertical-align:middle
}
.container .focusable[data-v-6276c215]:hover {
  background:#fff;
  border-radius:6px;
  cursor:pointer
}
.container .options-popup[data-v-6276c215] {
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translate(-50%);
  background-color:#fff;
  padding:10px;
  border-radius:10px;
  box-shadow:0 0 20px #00000012;
  z-index:10;
  width:120px
}
.container .option-btn[data-v-6276c215] {
  display:block;
  padding:5px 0;
  width:100%;
  text-align:left;
  border:none;
  background:none;
  cursor:pointer;
  line-height:0
}
.container .option-btn span[data-v-6276c215] {
  font-size:13px;
  color:#24252c
}
.container .option-btn.isMobile[data-v-6276c215] {
  display:flex;
  flex-direction:column;
  align-items:center;
  -webkit-tap-highlight-color:transparent;
  padding:10px 0;
  width:25%
}
.container .option-btn.isMobile img[data-v-6276c215] {
  width:30px;
  height:30px;
  padding:10px;
  background:#f4f6f7;
  border-radius:10px;
  margin:5px
}
.container .option-btn.isMobile span[data-v-6276c215] {
  font-family:PingFangSC,PingFang SC;
  font-weight:500;
  font-size:11px;
  color:#24252c;
  line-height:16px;
  text-align:center;
  font-style:normal
}
.container .option-btn[data-v-6276c215]:hover:not(.isMobile) {
  background-color:#f4f6f7;
  border-radius:6px
}
.container .add-btn-container[data-v-6276c215] {
  position:relative;
  display:flex;
  justify-content:center
}
.page[data-v-4d1b8550] {
  display:flex;
  flex-direction:column;
  height:100vh;
  overscroll-behavior:none
}
.page .loading[data-v-4d1b8550] {
  display:flex;
  font-family:PingFangSC,PingFang SC;
  justify-content:center;
  align-items:center;
  position:fixed;
  background:#fff;
  width:100%;
  height:100%
}
.page .loading-img[data-v-4d1b8550] {
  animation:rotate-center-4d1b8550 1s linear infinite
}
@keyframes rotate-center-4d1b8550 {
  0% {
    transform:rotate(0)
  }
  to {
    transform:rotate(360deg)
  }
}
.header[data-v-4d1b8550] {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.back[data-v-4d1b8550] {
  font-family:PingFangSC,PingFang SC;
  font-size:22px;
  line-height:0;
  color:#24252c;
  background:none;
  border:none;
  z-index:99;
  margin:3px 0 6px;
  padding:20px
}
.back span[data-v-4d1b8550]:hover {
  cursor:pointer
}
.title[data-v-4d1b8550] {
  font-weight:500;
  font-size:12px;
  color:#24252c;
  text-align:center;
  position:absolute;
  left:50%;
  font-family:PingFangSC,PingFang SC;
  transform:translate(-50%);
  z-index:99
}
.list-wrapper[data-v-4d1b8550] {
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain
}
.input[data-v-4d1b8550] {
  display:flex;
  border-top:1px solid #F4F6F7
}