:root {
  --full-height: 100%;
  --primary: #3b87f5;
  --primary-active: #ebf3fe;
  --primary-pressed: #2e75e0;
  --avatar-gray: #8593a8;
  --page-bg: #ffffff;
  --chat-bg: #f5f6f8;
  --search-bg: #f2f3f5;
  --chat-bubble: #ffffff;
  --chat-bubble-sender: #d6e7fc;
  --base-black: #1d2129;
  --sub-text: #86909c;
  --warn-text: #f53f3f;
  --gap-text: #eeeeee;
  --banner-bg: #3a3f47;
  --mask-bg: #000000;
  --success: #00b42a;
  --warning: #ff7d00;
  --searchbar-height: 2.5rem;
  --call-wait-bg: #f2f8ff;
  --radius-control: 8px;
  --radius-modal: 12px;
}

@media only screen and (max-width: 600px) {
  .no-mobile {
    display: none;
  }
}

html {
  height: var(--full-height);

  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  div {
    color: var(--base-black);
  }
}

body,
#root {
  height: var(--full-height);
  overflow: hidden;
  user-select: none;
}

::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

#chat-list {
  &::-webkit-scrollbar {
    width: 8px;
  }
}

.no-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
}

.emojione {
  width: 16px !important;
  height: 16px !important;
  display: inline-block;
}

.image-el {
  vertical-align: bottom;
  display: inline-block;
  max-width: 30vw;
  max-height: 15vh;
  object-fit: contain;
  cursor: pointer;
}

.at-el {
  display: inline-block;
  color: var(--primary);
  width: fit-content;
}

.link-el {
  color: var(--primary);
  cursor: pointer;
}

.member-el {
  margin: 0 4px;
}

.app-drag {
  -webkit-app-region: drag;
}

.app-no-drag {
  -webkit-app-region: no-drag;
}

.text-break {
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
}

#scrollableDiv {
  position: relative;
}

.growable::before {
  content: "";
  flex-grow: 1;
}

#video_player {
  position: unset !important;
}

.video-img {
  position: relative;
  display: inline-block;
}

.video-image-mask:hover {
  opacity: 1;
}

.video-image-mask {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
  inset: 0;
}

.no-scrollbar {
  ::-webkit-scrollbar {
    width: 0px;
    display: none;
  }
}

img {
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.custom-form-item > label {
  color: var(--sub-text) !important;
  margin-bottom: 4px !important;
}

.lk-participant-media-video {
  object-fit: contain !important;
}
