/* Layout for my own answers in the home page chat: my bubbles sit on the right,
   theirs stay on the left. Loaded on top of style.css. */

.chat-container .singlerecomendation.myreply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  column-gap: 10px;
  align-items: end;
  box-sizing: border-box;
  padding-left: 40px;
}

.myreply .myAvatar {
  grid-column: 2;
  grid-row: 1;
  margin-left: 0;
  border-radius: 50%;
  background: var(--action);
  object-fit: contain;
  opacity: 1;
  filter: none;
}

.chat-wrapper {
  width: 100%;
  justify-content: center;
}

.chat-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  background: none;
}

.myreply .recommendation {
  background-color: var(--action);
}

/* Fills the row so the bubble's percentage max-width has a definite box to
   resolve against, otherwise the typing indicator collapses to zero width. */
.myReplyStack {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1 1 auto;
  min-width: 0;
}

/* Giant emoji sits above the worded bubble, no background / no avatar / no name. */
.myreply .recommendation.bigEmoji {
  background: none;
  font-size: 4em;
  line-height: 1;
  padding: 0;
  margin-bottom: 4px;
}

.myreply .recommendation.bigEmoji:before,
.myreply .recommendation.bigEmoji::after {
  display: none;
}

/* Keep the emoji hidden while this reply is still the "typing" bubble. */
.chat-container .singlerecomendation:first-child .recommendation.bigEmoji {
  display: none;
}

.myreply .recommendation:before {
  border-left: none;
  border-right: 1rem solid var(--action);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0.8rem 0.7rem;
  left: auto;
  right: -0.35rem;
}

.myreply .recommendation::after {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0.5rem;
  left: auto;
  right: 20px;
  transform: translate(30px, -2px);
}

.myreply .recommendationAuthor {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: right;
  margin-bottom: 0;
}

.myreply .recommendationAuthorRole {
  grid-column: 1 / -1;
  grid-row: 3;
  text-align: right;
  margin-bottom: 24px;
  width: 100%;
}