/* Dialog mode (multiple messages) */
.joinchat__dialog .joinchat__message {
  transform-origin: 0 50%;
  -webkit-animation: joinchat_msg 250ms cubic-bezier(0, 0, 0.58, 1.19) 10ms both;
  animation: joinchat_msg 250ms cubic-bezier(0, 0, 0.58, 1.19) 10ms both;
}

.joinchat__dialog .joinchat__message--loading {
  width: 70px;
  border: none;
  background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle cx="4" cy="12" r="3"><animate id="a" begin="0;b.end+0.1s" attributeName="cy" calcMode="spline" dur="0.4s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle><circle cx="12" cy="12" r="3"><animate begin="a.begin+0.1s" attributeName="cy" calcMode="spline" dur="0.4s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle><circle cx="20" cy="12" r="3"><animate id="b" begin="a.begin+0.2s" attributeName="cy" calcMode="spline" dur="0.4s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33"/></circle></svg>') 20px 20px no-repeat;
  transform-origin: 50%;
  -webkit-animation: joinchat_msg 100ms ease-out 10ms both;
  animation: joinchat_msg 100ms ease-out 10ms both;
}

.joinchat__dialog .joinchat__message--loading::before ,
.joinchat__dialog .joinchat__message--note::before {
  content: none;
}

.joinchat__dialog .joinchat__message+.joinchat__message {
  margin-top: -10px;
}

.joinchat__dialog .joinchat__message--note {
  min-height: 0;
  padding: 0;
  background: none;
  font-size: 13px;
  line-height: 1.33;
  filter: none;
  animation: none;
}

@media (prefers-reduced-motion) {
  .joinchat__dialog .joinchat__message {
    -webkit-animation: none;
    animation: none;
  }
}

/* Message content */
.joinchat__iframe,
.joinchat__video {
  display: inline-block;
  position: relative;
  max-width: 100%;
  width: 400px;
  height: 0;
  padding-top: 56.25%;
  margin: 0.2em 0 -0.2em;
  border-radius: 4px;
  overflow: hidden;
}

.joinchat__video {
  background: #888 center;
  background-size: cover;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
  cursor: pointer;
}

.joinchat__video::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .1) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="%23fff"><path d="M500 990C229.8 990 10 770.2 10 500S229.8 10 500 10s490 219.8 490 490-219.8 490-490 490zm0-933.3C255.5 56.7 56.7 255.5 56.7 500S255.6 943.3 500 943.3c244.5 0 443.3-198.9 443.3-443.3 0-244.5-198.8-443.3-443.3-443.3z"/><path d="M362.1 287.9L725 500 362.1 699.7V287.9z"/></svg>') no-repeat center;
  background-size: 60px;
  transform: scale3d(1, 1, 1);
  transition: transform 0.2s cubic-bezier(0.42, 0, 0.05, 1);
}

.joinchat__video:hover::before {
  transform: scale3d(1.2, 1.2, 1);
}

.joinchat__iframe iframe,
.joinchat__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.joinchat__message .joinchat__iframe+br,
.joinchat__message .joinchat__video+br,
.joinchat__message hr+br {
  display: none;
}

.joinchat__message a {
  color: var(--msg) !important;
  font-size: 1em;
  text-decoration: underline;
}

.joinchat__message a.joinchat__btn {
  display: inline-block;
  min-height: 46px;
  max-width: 100%;
  padding: 10px 20px;
  margin: 5px 0;
  border: 3px solid var(--msg);
  border-radius: 23px;
  line-height: 20px;
  text-align: center;
  text-decoration: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.joinchat__message a.joinchat__btn+a.joinchat__btn {
  margin-top: -5px;
}

.joinchat__message a:hover,
.joinchat__message a:active {
  color: var(--hover) !important;
  border-color: var(--hover);
}

.joinchat__message img,
.joinchat__message video {
  max-width: 100%;
  height: auto;
  margin: 0.2em 0;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
}

.joinchat__message .joinchat-inline {
  display: inline-block;
  margin: -10px 0;
  border-radius: 0;
  box-shadow: none;
  vertical-align: middle;
}

.joinchat__message code {
  padding: 2px 5px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}

.joinchat__message hr {
  width: 100% !important;
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-top: 2px solid var(--msg) !important;
  margin: 10px 0 !important;
}

.joinchat__message .calendly-inline-widget {
  max-width: 100%;
  width: 400px;
  height: 600px;
  overflow: hidden !important;
}

.joinchat__message--media {
  padding: 5px;
}

.joinchat__message--media img,
.joinchat__message--media video,
.joinchat__message--media .joinchat__video,
.joinchat__message--media .joinchat__iframe,
.joinchat__message--media .joinchat-inline,
.joinchat__message--media .calendly-inline-widget {
  display: block;
  margin: 0;
  border-radius: 21px;
}

[dir="rtl"] .joinchat__dialog .joinchat__message {
  transform-origin: 100% 50%;
}

[dir="rtl"] .joinchat__dialog .joinchat__message--loading {
  transform-origin: 50%;
}

/* Dark mode */

.joinchat--dark .joinchat__dialog .joinchat__message--loading {
  filter: invert(.5);
}

@media (prefers-color-scheme: dark) {
  .joinchat--dark-auto .joinchat__dialog .joinchat__message--loading {
    filter: invert(.5);
  }
}

@-webkit-keyframes joinchat_msg {
  from {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes joinchat_msg {
  from {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}