speech-bubbles.css

/**
 * @name ClearVision Add-on: Speech Bubbles
 * @author Leozard
 * @version 1.0.0
 */

 
/* OPTIONAL
:root {
    --bubble-color: #fff;
    --bubble-hover-color: #fff:
} 
*/

.cozy_c19a55 .messageContent_c19a55 {
  width: fit-content;
  max-width: 80%;
  background-color: var(--bubble-color,hsla(0, 0%, 100%, 0.1));
  padding: 10px;
  border-radius: 0 10px 10px 10px;
  margin-top: 5px;
  margin-left: 0px;
}
.markup__75297 pre {
  max-width: 100%;
}


/* EMBEDS */
.cozy_c19a55:not(:has(.messageContent_c19a55 span)) .container_b7e1cb:has(:is(.mediaAttachmentsContainer__242e2, .embedWrapper_b7e1cb, .invite__4d3fa)) {
  max-width: fit-content;
}
.cozy_c19a55 .container_b7e1cb:has(:is(.mediaAttachmentsContainer__242e2, .embedWrapper_b7e1cb, .invite__4d3fa)) {
  padding: 10px;
}
.cozy_c19a55 .container_b7e1cb:has(:is(.mediaAttachmentsContainer__242e2, .embedWrapper_b7e1cb, .invite__4d3fa)):before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--bubble-color,hsla(0, 0%, 100%, 0.1));
  border-radius: 0 10px 10px 10px;
  padding: 10px;
}
.cozy_c19a55 .container_b7e1cb:has(.reactions__23977):before {
  height: calc(100% - 63px);
}
.cozy_c19a55 .container_b7e1cb:has(:is(.mediaAttachmentsContainer__242e2, .embedWrapper_b7e1cb, .invite__4d3fa)) .reactions__23977 {
  margin-top: 20px;
}


/* TEXT + EMBEDS */
.cozy_c19a55 .contents_c19a55:has(+ .container_b7e1cb :is(.mediaAttachmentsContainer__242e2, .embedWrapper_b7e1cb, .invite__4d3fa)) .messageContent_c19a55 {
  width: 60%;
  padding-bottom: 0;
  border-radius: 0 10px 0px 0px;
}
.cozy_c19a55:has(.messageContent_c19a55 span) .container_b7e1cb :is(.mediaAttachmentsContainer__242e2, .embedWrapper_b7e1cb, .invite__4d3fa) {
  width: 60%;
}
.cozy_c19a55:has(.messageContent_c19a55 span) .container_b7e1cb:has(:is(.mediaAttachmentsContainer__242e2, .embedWrapper_b7e1cb, .invite__4d3fa))::before {
  width: 60%;
  border-radius: 0 0 10px 10px;
}

/* REPLYING TO MESSAGE */
.repliedTextPreview_c19a55 {
  max-height: unset;
}
.cozy_c19a55 .repliedTextContent_c19a55.messageContent_c19a55 {
  max-width: fit-content;
  max-height: fit-content;
  border-radius: 10px;
  padding: 5px;
}

/* HOVER */
.cozy_c19a55:hover .messageContent_c19a55, 
.cozy_c19a55:hover .container_b7e1cb::before {
  background-color: var(--bubble-hover-color, hsla(0, 0%, 100%, 0.15));
}