/* Bubbles.js — chat bubble styles */
.bubble,
.bubble-typing {
  color: #1F2A37;
  background: #E8F5EE;
  padding: 8px 16px;
  border-radius: 5px 15px 15px 15px;
  font-weight: 400;
  font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  font-size: .9375rem;
  letter-spacing: .3px;
  margin: 0 0 4px 0;
  max-width: 72%;
  float: none;
  clear: both;
  line-height: 1.6em;
  word-break: break-word;
  direction: rtl;
  transform-origin: left top;
  transition: all 200ms;
  box-sizing: content-box;
  width: auto !important;
}

.bubble .bubble-content {
  transition: opacity 150ms;
}

.bubble:not(.say) .bubble-content {
  opacity: 0;
}

.bubble-typing.imagine,
.bubble.imagine {
  transform: scale(0);
  transition: all 200ms, height 200ms 1s, padding 200ms 1s;
}

.bubble.imagine {
  margin: 0;
  height: 0;
  padding: 0;
}

/* Images inside bubbles */
.bubble .bubble-content img {
  width: calc(100% + 32px);
  margin: -8px -16px;
  overflow: hidden;
  display: block;
  border-radius: 5px 15px 15px 15px;
}

/* Links inside bubbles */
.bubble .bubble-content a {
  color: #1B8354;
  text-decoration: underline;
  word-break: break-all;
}

.bubble .bubble-content a:hover {
  color: #14573A;
}

/* Recalled interaction styles */
.bubble.history,
.bubble.history .bubble-content,
.bubble.history .bubble-content .bubble-button,
.bubble.history .bubble-content .bubble-button:hover {
  transition: all 0ms !important;
}

.bubble.history {
  opacity: .3;
}