@cometchat/chat-uikit-react/dist/CometChatMessageInformationRoot-IDSXM2HT.css

Ready-to-use Chat UI Components for React

/* src/components/CometChatMessageInformation/CometChatMessageInformation.css */
.cometchat-message-information {
  display: flex;
  flex-direction: column;
  max-width: 420px;
  width: 100%;
  height: fit-content;
  max-height: 100%;
  flex-shrink: 0;
  border-radius: var(--cometchat-radius-5, 20px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  box-sizing: border-box;
  overflow: hidden;
}
.cometchat-message-information:focus,
.cometchat-message-information:focus-visible {
  outline: none;
}
.cometchat-message-information__header {
  display: flex;
  height: 64px;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  align-items: center;
  gap: var(--cometchat-padding-3, 12px);
  align-self: stretch;
  border-bottom: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  border-left: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  flex-shrink: 0;
}
.cometchat-message-information__header-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  font: var(--cometchat-font-heading3-bold, 700 20px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-message-information__header-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.cometchat-message-information__header-close-button:hover {
  background: transparent;
}
.cometchat-message-information__header-close-button:hover .cometchat-message-information__header-close-icon {
  background-color: var(--cometchat-icon-color-highlight, #6852d6);
}
.cometchat-message-information__header-close-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-message-information__header-close-button:focus:not(:focus-visible) {
  outline: none;
}
.cometchat-message-information__header-close-button:active {
  background: transparent;
}
.cometchat-message-information__header-close-icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--cometchat-icon-color-primary, #141414);
  -webkit-mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_740_8321" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8321)">%0A<path d="M11.9995 13.0538L6.92652 18.127C6.78802 18.2653 6.61394 18.3362 6.40427 18.3395C6.19477 18.3427 6.01752 18.2718 5.87252 18.127C5.72769 17.982 5.65527 17.8063 5.65527 17.6C5.65527 17.3937 5.72769 17.218 5.87252 17.073L10.9458 12L5.87252 6.92701C5.73419 6.78851 5.66336 6.61443 5.66002 6.40476C5.65686 6.19526 5.72769 6.01801 5.87252 5.87301C6.01752 5.72818 6.19319 5.65576 6.39952 5.65576C6.60586 5.65576 6.78152 5.72818 6.92652 5.87301L11.9995 10.9463L17.0725 5.87301C17.211 5.73468 17.3851 5.66385 17.5948 5.66051C17.8043 5.65735 17.9815 5.72818 18.1265 5.87301C18.2714 6.01801 18.3438 6.19368 18.3438 6.40001C18.3438 6.60635 18.2714 6.78201 18.1265 6.92701L13.0533 12L18.1265 17.073C18.2649 17.2115 18.3357 17.3856 18.339 17.5953C18.3422 17.8048 18.2714 17.982 18.1265 18.127C17.9815 18.2718 17.8059 18.3443 17.5995 18.3443C17.3932 18.3443 17.2175 18.2718 17.0725 18.127L11.9995 13.0538Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_740_8321" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8321)">%0A<path d="M11.9995 13.0538L6.92652 18.127C6.78802 18.2653 6.61394 18.3362 6.40427 18.3395C6.19477 18.3427 6.01752 18.2718 5.87252 18.127C5.72769 17.982 5.65527 17.8063 5.65527 17.6C5.65527 17.3937 5.72769 17.218 5.87252 17.073L10.9458 12L5.87252 6.92701C5.73419 6.78851 5.66336 6.61443 5.66002 6.40476C5.65686 6.19526 5.72769 6.01801 5.87252 5.87301C6.01752 5.72818 6.19319 5.65576 6.39952 5.65576C6.60586 5.65576 6.78152 5.72818 6.92652 5.87301L11.9995 10.9463L17.0725 5.87301C17.211 5.73468 17.3851 5.66385 17.5948 5.66051C17.8043 5.65735 17.9815 5.72818 18.1265 5.87301C18.2714 6.01801 18.3438 6.19368 18.3438 6.40001C18.3438 6.60635 18.2714 6.78201 18.1265 6.92701L13.0533 12L18.1265 17.073C18.2649 17.2115 18.3357 17.3856 18.339 17.5953C18.3422 17.8048 18.2714 17.982 18.1265 18.127C17.9815 18.2718 17.8059 18.3443 17.5995 18.3443C17.3932 18.3443 17.2175 18.2718 17.0725 18.127L11.9995 13.0538Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.cometchat-message-information__message-preview {
  display: flex;
  flex-direction: column;
  padding: var(--cometchat-padding-5, 20px) var(--cometchat-padding-4, 16px);
  border-bottom: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  max-height: 300px;
  overflow: hidden auto;
  background: var(--cometchat-background-color-02, #fafafa);
}
.cometchat-message-information__message-preview--hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-message-information__message-preview--hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.cometchat-message-information__message-preview-content {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  word-break: break-word;
}
.cometchat-message-information__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  height: 260px;
}
.cometchat-message-information__content--hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-message-information__content--hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.cometchat-message-information__section {
  display: flex;
  flex-direction: column;
  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
}
.cometchat-message-information__section-title {
  font: var(--cometchat-font-heading4-medium, 500 16px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  margin: 0 0 var(--cometchat-padding-1, 4px) 0;
}
.cometchat-message-information__section-time {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
  padding: 0;
}
.cometchat-message-information__section-time [class*=cometchat-date] {
  padding: 0;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-information__section-empty-dash {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
  padding: 0;
}
.cometchat-message-information__user-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cometchat-message-information__user-item {
  display: flex;
  align-items: flex-start;
  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
  border-bottom: 1px solid var(--cometchat-border-color-light, #f5f5f5);
}
.cometchat-message-information__user-item:last-child {
  border-bottom: none;
}
.cometchat-message-information__user-item-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex-shrink: 0;
  margin-right: var(--cometchat-padding-3, 12px);
}
.cometchat-message-information__user-item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--cometchat-padding-1, 4px);
}
.cometchat-message-information__user-item-name {
  font: var(--cometchat-font-heading4-medium, 500 16px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-message-information__user-item-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.cometchat-message-information__user-item-receipt-label {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-information__user-item-receipt-time {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
  white-space: nowrap;
}
.cometchat-message-information__user-item-receipt-time [class*=cometchat-date] {
  padding: 0;
}
.cometchat-message-information__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--cometchat-padding-6, 24px);
  flex: 1;
}
.cometchat-message-information__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--cometchat-border-color-light, #f5f5f5);
  border-top-color: var(--cometchat-primary-color, #6852d6);
  border-radius: 50%;
  animation: cometchat-message-information-spin 0.8s linear infinite;
}
@keyframes cometchat-message-information-spin {
  to {
    transform: rotate(360deg);
  }
}
.cometchat-message-information__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cometchat-padding-3, 12px);
  padding: var(--cometchat-padding-6, 24px);
  text-align: center;
  flex: 1;
}
.cometchat-message-information__error-text {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-information__error-retry-button {
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  background: var(--cometchat-primary-color, #6852d6);
  color: var(--cometchat-static-white, #fff);
  border: none;
  border-radius: var(--cometchat-radius-2, 8px);
  font: var(--cometchat-font-button-medium, 500 14px Roboto);
  cursor: pointer;
  transition: background-color 0.2s ease;
  outline: none;
}
.cometchat-message-information__error-retry-button:hover {
  background: var(--cometchat-extended-primary-color-700, #5841b8);
}
.cometchat-message-information__error-retry-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-message-information__empty {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--cometchat-padding-6, 24px);
  flex: 1;
}
.cometchat-message-information__empty-text {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-message-information__spinner {
    animation: none;
  }
  .cometchat-message-information__error-retry-button {
    transition: none;
  }
}
@media (prefers-contrast: high) {
  .cometchat-message-information {
    border: 2px solid currentColor;
  }
  .cometchat-message-information__header {
    border-bottom: 2px solid currentColor;
  }
  .cometchat-message-information__message-preview {
    border-bottom: 2px solid currentColor;
  }
  .cometchat-message-information__header-close-button:focus-visible,
  .cometchat-message-information__error-retry-button:focus-visible {
    outline: 3px solid currentColor;
  }
}
@media (max-width: 767px) {
  .cometchat-message-information {
    max-width: 100%;
    border-radius: var(--cometchat-radius-3, 12px);
  }
  .cometchat-message-information__header-title {
    font: var(--cometchat-font-heading4-medium, 500 16px Roboto);
  }
  .cometchat-message-information__user-item-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

/* src/components/base/CometChatAvatar/CometChatAvatar.css */
.cometchat-avatar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-extended-primary-color-500, #aa9ee8);
}
.cometchat-avatar[data-size=small] {
  width: 32px;
  height: 32px;
}
.cometchat-avatar[data-size=medium] {
  width: 40px;
  height: 40px;
}
.cometchat-avatar[data-size=large] {
  width: 48px;
  height: 48px;
}
.cometchat-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--cometchat-radius-max, 1000px);
  overflow: hidden;
}
.cometchat-avatar__initials {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--cometchat-static-white, #fff);
  text-align: center;
  user-select: none;
}
.cometchat-avatar[data-size=small] .cometchat-avatar__initials {
  font: var(--cometchat-font-body-bold, 700 12px Roboto);
}
.cometchat-avatar[data-size=medium] .cometchat-avatar__initials {
  font: var(--cometchat-font-heading4-bold, 700 14px Roboto);
}
.cometchat-avatar[data-size=large] .cometchat-avatar__initials {
  font: var(--cometchat-font-heading3-bold, 700 20px Roboto);
}
.cometchat-avatar__status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: var(--cometchat-radius-max, 1000px);
  border: 2px solid var(--cometchat-background-color-01, #fff);
}
.cometchat-avatar[data-size=small] .cometchat-avatar__status-indicator {
  width: 8px;
  height: 8px;
}
.cometchat-avatar[data-size=medium] .cometchat-avatar__status-indicator {
  width: 10px;
  height: 10px;
}
.cometchat-avatar[data-size=large] .cometchat-avatar__status-indicator {
  width: 12px;
  height: 12px;
}
.cometchat-avatar__status-indicator[data-status=online] {
  background: var(--cometchat-success-color, #09c26f);
}
.cometchat-avatar__status-indicator[data-status=offline] {
  display: none;
}

/* src/components/base/CometChatDate/CometChatDate.css */
.cometchat-date {
  display: inline-flex;
  align-items: center;
  background: transparent;
  text-align: center;
  font-style: normal;
  padding: var(--cometchat-date-padding, 3px 10px);
}
.cometchat-date[data-variant=caption] {
  font: var(--cometchat-date-font, var(--cometchat-font-caption1-regular, 400 12px Roboto));
  color: var(--cometchat-date-color, var(--cometchat-neutral-color-600, #727272));
}
.cometchat-date[data-variant=caption2] {
  font: var(--cometchat-font-caption2-regular, 400 10px Roboto);
  color: var(--cometchat-date-color, var(--cometchat-neutral-color-600, #727272));
}
.cometchat-date[data-variant=body] {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-date-color, var(--cometchat-neutral-color-600, #727272));
}
.cometchat-date[data-variant=label] {
  font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
  color: var(--cometchat-date-color, var(--cometchat-neutral-color-600, #727272));
}
.cometchat-date[data-variant=separator] {
  font: var( --cometchat-date-separator-font, var(--cometchat-font-caption1-medium, 500 12px Roboto) );
  color: var( --cometchat-date-separator-color, var(--cometchat-text-color-secondary, rgba(20, 20, 20, 0.58)) );
  justify-content: center;
  align-items: center;
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
  border-radius: var(--cometchat-radius-1, 4px);
  border: 1px solid var(--cometchat-border-color-dark, #dcdcdc);
  background: var(--cometchat-background-color-01, #f5f5f5);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.cometchat-date__text {
  display: inline;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-date {
    transition: none;
  }
}

/* src/components/base/CometChatThreadView/CometChatThreadView.css */
.cometchat-thread-view {
  display: inline-flex;
  align-items: center;
  gap: var(--cometchat-spacing-1, 4px);
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
  border-radius: var(--cometchat-radius-2, 8px);
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
}
.cometchat-thread-view:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-thread-view {
    transition: none;
  }
}
.cometchat-thread-view--right {
  justify-content: flex-end;
}
.cometchat-thread-view--left {
  justify-content: flex-start;
}
.cometchat-thread-view--unread .cometchat-thread-view__count {
  font: var(--cometchat-font-caption1-bold, 700 12px / 14.4px Roboto);
}
.cometchat-thread-view__icon {
  display: inline-block;
  height: 16px;
  width: 16px;
  flex-shrink: 0;
  background-color: var(--cometchat-icon-color-secondary, #727272);
  mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Base_Icon">%0A<mask id="mask0_3985_363515" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="24">%0A<rect id="Bounding box" x="0.00390625" width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_3985_363515)">%0A<path id="subdirectory_arrow_right" d="M13.4769 19.9578C13.3219 19.8026 13.246 19.6253 13.2492 19.426C13.2523 19.2267 13.3282 19.0526 13.4769 18.9038L16.6309 15.75H7.31166C6.81299 15.75 6.38699 15.5734 6.03366 15.2203C5.68049 14.8669 5.50391 14.4409 5.50391 13.9423V5.25C5.50391 5.03717 5.57574 4.859 5.71941 4.7155C5.86291 4.57183 6.04107 4.5 6.25391 4.5C6.46674 4.5 6.64491 4.57183 6.78841 4.7155C6.93207 4.859 7.00391 5.03717 7.00391 5.25V13.9423C7.00391 14.0321 7.03274 14.1058 7.09041 14.1635C7.14807 14.2212 7.22182 14.25 7.31166 14.25H16.6309L13.4617 11.0807C13.3065 10.9256 13.2315 10.7499 13.2367 10.5538C13.2418 10.3578 13.3168 10.1822 13.4617 10.027C13.6168 9.87183 13.7941 9.79333 13.9934 9.7915C14.1927 9.7895 14.3667 9.86283 14.5154 10.0115L18.8712 14.3673C18.9648 14.4609 19.0308 14.5597 19.0692 14.6635C19.1077 14.7673 19.1269 14.8795 19.1269 15C19.1269 15.1205 19.1077 15.2327 19.0692 15.3365C19.0308 15.4403 18.9648 15.5391 18.8712 15.6328L14.5462 19.9578C14.391 20.1128 14.2128 20.1902 14.0117 20.1902C13.8103 20.1902 13.6321 20.1128 13.4769 19.9578Z" fill="%23A1A1A1"/>%0A</g>%0A</g>%0A</svg>%0A') center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Base_Icon">%0A<mask id="mask0_3985_363515" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="24">%0A<rect id="Bounding box" x="0.00390625" width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_3985_363515)">%0A<path id="subdirectory_arrow_right" d="M13.4769 19.9578C13.3219 19.8026 13.246 19.6253 13.2492 19.426C13.2523 19.2267 13.3282 19.0526 13.4769 18.9038L16.6309 15.75H7.31166C6.81299 15.75 6.38699 15.5734 6.03366 15.2203C5.68049 14.8669 5.50391 14.4409 5.50391 13.9423V5.25C5.50391 5.03717 5.57574 4.859 5.71941 4.7155C5.86291 4.57183 6.04107 4.5 6.25391 4.5C6.46674 4.5 6.64491 4.57183 6.78841 4.7155C6.93207 4.859 7.00391 5.03717 7.00391 5.25V13.9423C7.00391 14.0321 7.03274 14.1058 7.09041 14.1635C7.14807 14.2212 7.22182 14.25 7.31166 14.25H16.6309L13.4617 11.0807C13.3065 10.9256 13.2315 10.7499 13.2367 10.5538C13.2418 10.3578 13.3168 10.1822 13.4617 10.027C13.6168 9.87183 13.7941 9.79333 13.9934 9.7915C14.1927 9.7895 14.3667 9.86283 14.5154 10.0115L18.8712 14.3673C18.9648 14.4609 19.0308 14.5597 19.0692 14.6635C19.1077 14.7673 19.1269 14.8795 19.1269 15C19.1269 15.1205 19.1077 15.2327 19.0692 15.3365C19.0308 15.4403 18.9648 15.5391 18.8712 15.6328L14.5462 19.9578C14.391 20.1128 14.2128 20.1902 14.0117 20.1902C13.8103 20.1902 13.6321 20.1128 13.4769 19.9578Z" fill="%23A1A1A1"/>%0A</g>%0A</g>%0A</svg>%0A') center / contain no-repeat;
}
.cometchat-thread-view__icon--custom {
  mask: none;
  -webkit-mask: none;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.cometchat-thread-view__count {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  white-space: nowrap;
}
.cometchat-thread-view__unread-indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-primary-color, #3399ff);
  flex-shrink: 0;
}

/* src/components/base/CometChatContextMenu/CometChatContextMenu.css */
.cometchat-context-menu {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cometchat-padding-2, 8px);
  background: transparent;
}
.cometchat-context-menu__top-menu {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cometchat-context-menu__top-menu-item {
  display: flex;
  width: 24px;
  height: 24px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-background-color-01, #fff);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--cometchat-icon-color-secondary, #a1a1a1);
  cursor: pointer;
}
.cometchat-context-menu__top-menu-item:hover:not(:disabled) {
  background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-context-menu__top-menu-item:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-context-menu__top-menu-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cometchat-context-menu__top-menu-item-icon {
  display: flex;
  width: 16px;
  height: 16px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}
.cometchat-context-menu__trigger {
  display: flex;
  width: 24px;
  height: 24px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-background-color-01, #fff);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--cometchat-icon-color-secondary, #a1a1a1);
  cursor: pointer;
  z-index: 1000;
}
.cometchat-context-menu__trigger:hover {
  background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-context-menu__trigger:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-context-menu__trigger-icon {
  display: flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}
.cometchat-context-menu__trigger-wrapper {
  position: relative;
  display: inline-flex;
}
.cometchat-context-menu__dropdown {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 160px;
  width: max-content;
  max-width: 280px;
  padding: 0;
  overflow: hidden;
  border-radius: var(--cometchat-radius-2, 8px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.cometchat-context-menu__dropdown--hidden {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cometchat-context-menu__dropdown {
    animation: contextMenuFadeIn 150ms ease-out;
  }
}
@keyframes contextMenuFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cometchat-context-menu__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--cometchat-padding-2, 8px);
  width: 100%;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
  border: none;
  background: var(--cometchat-background-color-01, #fff);
  cursor: pointer;
  text-align: start;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}
.cometchat-context-menu__dropdown-item:hover:not(:disabled) {
  background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-context-menu__dropdown-item:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: -2px;
}
.cometchat-context-menu__dropdown-item:disabled,
.cometchat-context-menu__dropdown-item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cometchat-context-menu__dropdown-item-icon {
  display: flex;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: var(--cometchat-icon-color-secondary, #a1a1a1);
  filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}
.cometchat-context-menu__dropdown-item-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  line-height: 120%;
  text-align: start;
}
.cometchat-context-menu__overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: transparent;
}

/* src/components/CometChatMessageBubble/CometChatMessageBubble.css */
.cometchat-message-bubble__wrapper {
  display: flex;
  position: relative;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--cometchat-padding-3, 12px);
  align-items: flex-start;
  gap: var(--cometchat-spacing-2, 8px);
  flex: 1 0 0;
}
.cometchat-message-bubble__wrapper:focus {
  outline: none;
}
.cometchat-message-bubble__wrapper:focus-visible {
  outline: none;
}
.cometchat-message-bubble__wrapper--outgoing {
  flex-direction: row-reverse;
}
.cometchat-message-bubble__wrapper--selected {
  background: var(--cometchat-extended-primary-color-50, #f9f8fd);
}
.cometchat-message-bubble__wrapper--moderation-disapproved:has(.cometchat-message-bubble__body-bottom-view) .cometchat-message-bubble__body {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.cometchat-message-bubble__wrapper--moderation-disapproved .cometchat-message-bubble__body-wrapper,
.cometchat-message-bubble__wrapper--moderation-disapproved .cometchat-message-bubble__body {
  min-width: 240px;
  box-sizing: border-box;
}
.cometchat-message-bubble__body-bottom-view:has(.cometchat-moderation-view) {
  max-width: 240px;
}
.cometchat-message-bubble__leading-view {
  flex-shrink: 0;
  align-self: flex-start;
  --cometchat-avatar-width: 36px;
  --cometchat-avatar-height: 36px;
}
.cometchat-message-bubble__leading-view [role=button] {
  cursor: pointer;
}
.cometchat-message-bubble__leading-view [role=button]:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
  border-radius: var(--cometchat-radius-max, 1000px);
}
.cometchat-message-bubble {
  display: flex;
  flex-direction: column;
  max-width: 65%;
  min-width: fit-content;
}
.cometchat-message-bubble-incoming {
  align-items: flex-start;
}
.cometchat-message-bubble-outgoing {
  align-items: flex-end;
  margin-left: auto;
}
.cometchat-message-bubble-action {
  align-items: center;
  margin: 0 auto;
  max-width: 100%;
}
.cometchat-message-bubble__header-view {
  padding: 0 0 var(--cometchat-padding-1, 4px) 0;
}
.cometchat-message-bubble__sender-name {
  font: var( --cometchat-font-caption1-medium, 500 12px var(--cometchat-font-family, "Inter", sans-serif) );
  color: var(--cometchat-text-color-highlight, var(--cometchat-primary-color, #6852d6));
}
.cometchat-message-bubble__body-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: inherit;
  position: relative;
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__body-container {
  flex-direction: row;
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__body-container {
  flex-direction: row;
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__options {
  order: 3;
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__options {
  order: 1;
}
.cometchat-message-bubble__options {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  display: flex;
  align-items: center;
  align-self: flex-start;
  padding: 0px var(--cometchat-padding-2, 8px);
}
.cometchat-message-bubble__options--visible {
  opacity: 1;
  pointer-events: auto;
}
.cometchat-message-bubble__body-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  order: 2;
}
.cometchat-message-bubble__body {
  display: flex;
  padding: var(--cometchat-padding-1, 4px);
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--cometchat-radius-3, 12px);
  overflow: hidden;
  max-width: 100%;
}
.cometchat-message-bubble__body:has(.cometchat-files-bubble__container--multi),
.cometchat-message-bubble__body:has(.cometchat-audios-bubble__container--multi) {
  padding: 8px;
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__text-message {
  background: var(--cometchat-neutral-color-300, #e8e8e8);
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__text-message {
  background: var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__audio-message,
.cometchat-message-bubble-incoming .cometchat-message-bubble__file-message {
  background: var(--cometchat-neutral-color-300, #e8e8e8);
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__audio-message,
.cometchat-message-bubble-outgoing .cometchat-message-bubble__file-message {
  background: var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-bubble__image-message,
.cometchat-message-bubble__video-message {
  background: var(--cometchat-neutral-color-300, #e8e8e8);
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__image-message,
.cometchat-message-bubble-outgoing .cometchat-message-bubble__video-message {
  background: var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__delete-message {
  background: var(--cometchat-neutral-color-300, #e8e8e8);
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__delete-message {
  background: var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__card-message {
  background: var(--cometchat-neutral-color-300, #e8e8e8);
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__card-message {
  background: var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-bubble__group-message {
  background: transparent;
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__assistant-message {
  background: var(--cometchat-neutral-color-300, #e8e8e8);
  width: fit-content;
  max-width: 100%;
  align-items: flex-start;
}
.cometchat-ai-assistant-chat .cometchat-message-bubble__assistant-message {
  background: transparent;
}
.cometchat-message-bubble__assistant-message .cometchat-message-bubble__body-content-view {
  padding: var(--cometchat-text-bubble-padding, var(--cometchat-padding-2, 8px));
}
.cometchat-ai-assistant-chat .cometchat-message-bubble__assistant-message .cometchat-message-bubble__body-content-view {
  padding: 0;
}
.cometchat-message-bubble-incoming:has(.cometchat-message-bubble__assistant-message) {
  min-width: 0;
}
.cometchat-message-bubble-action .cometchat-message-bubble__body-wrapper {
  align-items: center;
}
.cometchat-message-bubble-action .cometchat-message-bubble__body {
  background: transparent;
}
.cometchat-message-bubble-action .cometchat-message-bubble__options {
  display: none;
}
.cometchat-message-bubble__body-content-view {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow: hidden;
}
.cometchat-message-bubble__text-message .cometchat-message-bubble__body-content-view:not(:has(.cometchat-delete-bubble)),
.cometchat-message-bubble__body:has(.cometchat-message-bubble__status-info-view) .cometchat-message-bubble__body-content-view:has(.cometchat-text-bubble):not(:has(.cometchat-delete-bubble)) {
  margin-bottom: calc(var(--cometchat-margin-2, 8px) * -1);
}
.cometchat-message-bubble__body-status-info-view {
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-2, 8px) 0 var(--cometchat-padding-2, 8px);
}
.cometchat-message-bubble__status-info-view {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-1, 4px);
  justify-content: flex-end;
  white-space: nowrap;
  --cometchat-date-padding: 0;
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__body-status-info-view {
  color: var(--cometchat-static-white, #fff);
  --cometchat-date-color: var(--cometchat-static-white, #fff);
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__status-info-view-helper-text {
  color: var(--cometchat-static-white, #fff);
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__body-status-info-view {
  color: var(--cometchat-text-color-secondary, #727272);
  --cometchat-date-color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__status-info-view-helper-text {
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-bubble__status-info-view-helper-text {
  font: var( --cometchat-font-caption2-regular, 400 10px var(--cometchat-font-family, "Inter", sans-serif) );
}
.cometchat-receipts {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 16px;
  height: 16px;
}
.cometchat-message-list__receipt {
  width: 16px;
  height: 16px;
  visibility: hidden;
}
.cometchat-receipts::before {
  content: "";
  width: 16px;
  height: 16px;
  -webkit-mask: center center / contain no-repeat;
  mask: center center / contain no-repeat;
  background: currentColor;
  position: absolute;
}
.cometchat-receipts-sent::before {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="State=Send">%0A<path id="Vector" d="M6.32227 10.3446L12.2389 4.4279C12.3522 4.31679 12.4842 4.26123 12.6349 4.26123C12.7858 4.26123 12.9168 4.31695 13.0279 4.4284C13.139 4.53995 13.1946 4.67234 13.1946 4.82556C13.1946 4.9789 13.139 5.11112 13.0279 5.22223L6.71127 11.5446C6.60016 11.6557 6.47049 11.7112 6.32227 11.7112C6.17416 11.7112 6.04455 11.6557 5.93344 11.5446L2.95561 8.56673C2.84449 8.45518 2.79172 8.32262 2.79727 8.16906C2.80283 8.01562 2.86138 7.88334 2.97294 7.77223C3.08438 7.66112 3.21677 7.60556 3.37011 7.60556C3.52344 7.60556 3.65566 7.66112 3.76677 7.77223L6.32227 10.3446Z" fill="%23F9F8FD"/>%0A</g>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="State=Send">%0A<path id="Vector" d="M6.32227 10.3446L12.2389 4.4279C12.3522 4.31679 12.4842 4.26123 12.6349 4.26123C12.7858 4.26123 12.9168 4.31695 13.0279 4.4284C13.139 4.53995 13.1946 4.67234 13.1946 4.82556C13.1946 4.9789 13.139 5.11112 13.0279 5.22223L6.71127 11.5446C6.60016 11.6557 6.47049 11.7112 6.32227 11.7112C6.17416 11.7112 6.04455 11.6557 5.93344 11.5446L2.95561 8.56673C2.84449 8.45518 2.79172 8.32262 2.79727 8.16906C2.80283 8.01562 2.86138 7.88334 2.97294 7.77223C3.08438 7.66112 3.21677 7.60556 3.37011 7.60556C3.52344 7.60556 3.65566 7.66112 3.76677 7.77223L6.32227 10.3446Z" fill="%23F9F8FD"/>%0A</g>%0A</svg>%0A');
  background: var(--cometchat-receipt-color, currentColor);
}
.cometchat-receipts-delivered::before {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="State=Delivered">%0A<path id="Vector" d="M1.39994 8.62199C1.28883 8.51088 1.23605 8.37943 1.24161 8.22765C1.24716 8.07576 1.3055 7.94426 1.41661 7.83315C1.52772 7.72571 1.65922 7.6711 1.81111 7.66932C1.96289 7.66743 2.09433 7.72204 2.20544 7.83315L4.76111 10.3998C4.824 10.4628 4.89066 10.5295 4.96111 10.5998L5.16111 10.7998C5.27222 10.9109 5.32683 11.0405 5.32494 11.1887C5.32305 11.3369 5.26655 11.4665 5.15544 11.5777L5.14444 11.5887C5.03333 11.6961 4.90366 11.7508 4.75544 11.7527C4.60733 11.7544 4.47772 11.6998 4.36661 11.5887L1.39994 8.62199ZM7.89994 10.3943L13.8221 4.47199C13.9332 4.36088 14.0647 4.30626 14.2166 4.30815C14.3685 4.31004 14.5 4.36654 14.6111 4.47765C14.7184 4.58876 14.7731 4.72021 14.7749 4.87199C14.7768 5.02388 14.7222 5.15538 14.6111 5.26649L8.28877 11.5887C8.17766 11.6998 8.04805 11.7553 7.89994 11.7553C7.75183 11.7553 7.62222 11.6998 7.51111 11.5887L4.54444 8.62199C4.437 8.51465 4.38511 8.3841 4.38877 8.23032C4.39255 8.07665 4.44811 7.94426 4.55544 7.83315C4.66655 7.72204 4.799 7.66649 4.95277 7.66649C5.10644 7.66649 5.23883 7.72204 5.34994 7.83315L7.89994 10.3943ZM11.4611 5.27199L8.28877 8.44432C8.18144 8.55165 8.05277 8.60349 7.90277 8.59982C7.75277 8.59615 7.62222 8.5406 7.51111 8.43315C7.4 8.32204 7.34444 8.18965 7.34444 8.03599C7.34444 7.88221 7.4 7.74976 7.51111 7.63865L10.6721 4.47765C10.7796 4.37021 10.9101 4.31649 11.0638 4.31649C11.2176 4.31649 11.35 4.37021 11.4611 4.47765C11.5722 4.58876 11.6278 4.72115 11.6278 4.87482C11.6278 5.02849 11.5722 5.16088 11.4611 5.27199Z" fill="%23F9F8FD"/>%0A</g>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="State=Delivered">%0A<path id="Vector" d="M1.39994 8.62199C1.28883 8.51088 1.23605 8.37943 1.24161 8.22765C1.24716 8.07576 1.3055 7.94426 1.41661 7.83315C1.52772 7.72571 1.65922 7.6711 1.81111 7.66932C1.96289 7.66743 2.09433 7.72204 2.20544 7.83315L4.76111 10.3998C4.824 10.4628 4.89066 10.5295 4.96111 10.5998L5.16111 10.7998C5.27222 10.9109 5.32683 11.0405 5.32494 11.1887C5.32305 11.3369 5.26655 11.4665 5.15544 11.5777L5.14444 11.5887C5.03333 11.6961 4.90366 11.7508 4.75544 11.7527C4.60733 11.7544 4.47772 11.6998 4.36661 11.5887L1.39994 8.62199ZM7.89994 10.3943L13.8221 4.47199C13.9332 4.36088 14.0647 4.30626 14.2166 4.30815C14.3685 4.31004 14.5 4.36654 14.6111 4.47765C14.7184 4.58876 14.7731 4.72021 14.7749 4.87199C14.7768 5.02388 14.7222 5.15538 14.6111 5.26649L8.28877 11.5887C8.17766 11.6998 8.04805 11.7553 7.89994 11.7553C7.75183 11.7553 7.62222 11.6998 7.51111 11.5887L4.54444 8.62199C4.437 8.51465 4.38511 8.3841 4.38877 8.23032C4.39255 8.07665 4.44811 7.94426 4.55544 7.83315C4.66655 7.72204 4.799 7.66649 4.95277 7.66649C5.10644 7.66649 5.23883 7.72204 5.34994 7.83315L7.89994 10.3943ZM11.4611 5.27199L8.28877 8.44432C8.18144 8.55165 8.05277 8.60349 7.90277 8.59982C7.75277 8.59615 7.62222 8.5406 7.51111 8.43315C7.4 8.32204 7.34444 8.18965 7.34444 8.03599C7.34444 7.88221 7.4 7.74976 7.51111 7.63865L10.6721 4.47765C10.7796 4.37021 10.9101 4.31649 11.0638 4.31649C11.2176 4.31649 11.35 4.37021 11.4611 4.47765C11.5722 4.58876 11.6278 4.72115 11.6278 4.87482C11.6278 5.02849 11.5722 5.16088 11.4611 5.27199Z" fill="%23F9F8FD"/>%0A</g>%0A</svg>%0A');
  background: var(--cometchat-receipt-color, currentColor);
}
.cometchat-receipts-wait::before {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="State=Sending">%0A<path id="Vector" d="M8.5665 7.78867V5.08034C8.5665 4.93467 8.51545 4.81073 8.41334 4.7085C8.31123 4.60639 8.18728 4.55534 8.0415 4.55534C7.8915 4.55534 7.76556 4.60639 7.66367 4.7085C7.56189 4.81073 7.511 4.93467 7.511 5.08034V7.997C7.511 8.06734 7.5235 8.13312 7.5485 8.19434C7.5735 8.25556 7.60928 8.31295 7.65584 8.3665L9.97684 10.7477C10.0792 10.8621 10.2072 10.9174 10.361 10.9137C10.5147 10.91 10.6452 10.8544 10.7527 10.747C10.8563 10.6433 10.9082 10.5165 10.9082 10.3665C10.9082 10.2165 10.8566 10.0881 10.7533 9.98117L8.5665 7.78867ZM8.0005 14.5553C7.10106 14.5553 6.25234 14.3826 5.45434 14.0372C4.65623 13.6916 3.96106 13.2222 3.36884 12.6288C2.7765 12.0354 2.30767 11.3403 1.96234 10.5435C1.617 9.74673 1.44434 8.89906 1.44434 8.0005C1.44434 7.10106 1.61706 6.25234 1.9625 5.45434C2.30806 4.65623 2.7775 3.96106 3.37084 3.36884C3.96428 2.7765 4.65939 2.30767 5.45617 1.96234C6.25295 1.617 7.10061 1.44434 7.99917 1.44434C8.89861 1.44434 9.74734 1.61706 10.5453 1.9625C11.3434 2.30806 12.0386 2.7775 12.6308 3.37084C13.2232 3.96428 13.692 4.65939 14.0373 5.45617C14.3827 6.25295 14.5553 7.10062 14.5553 7.99917C14.5553 8.89862 14.3826 9.74734 14.0372 10.5453C13.6916 11.3434 13.2222 12.0386 12.6288 12.6308C12.0354 13.2232 11.3403 13.692 10.5435 14.0373C9.74673 14.3827 8.89906 14.5553 8.0005 14.5553ZM7.997 13.4998C9.50811 13.4998 10.8031 12.9614 11.8818 11.8845C12.9605 10.8077 13.4998 9.51378 13.4998 8.00267C13.4998 6.49156 12.9606 5.19661 11.882 4.11784C10.8034 3.03917 9.50939 2.49984 7.99984 2.49984C6.48684 2.49984 5.19195 3.03911 4.11517 4.11767C3.03828 5.19623 2.49984 6.49028 2.49984 7.99984C2.49984 9.51284 3.03828 10.8077 4.11517 11.8845C5.19195 12.9614 6.48589 13.4998 7.997 13.4998Z" fill="%23F9F8FD"/>%0A</g>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="State=Sending">%0A<path id="Vector" d="M8.5665 7.78867V5.08034C8.5665 4.93467 8.51545 4.81073 8.41334 4.7085C8.31123 4.60639 8.18728 4.55534 8.0415 4.55534C7.8915 4.55534 7.76556 4.60639 7.66367 4.7085C7.56189 4.81073 7.511 4.93467 7.511 5.08034V7.997C7.511 8.06734 7.5235 8.13312 7.5485 8.19434C7.5735 8.25556 7.60928 8.31295 7.65584 8.3665L9.97684 10.7477C10.0792 10.8621 10.2072 10.9174 10.361 10.9137C10.5147 10.91 10.6452 10.8544 10.7527 10.747C10.8563 10.6433 10.9082 10.5165 10.9082 10.3665C10.9082 10.2165 10.8566 10.0881 10.7533 9.98117L8.5665 7.78867ZM8.0005 14.5553C7.10106 14.5553 6.25234 14.3826 5.45434 14.0372C4.65623 13.6916 3.96106 13.2222 3.36884 12.6288C2.7765 12.0354 2.30767 11.3403 1.96234 10.5435C1.617 9.74673 1.44434 8.89906 1.44434 8.0005C1.44434 7.10106 1.61706 6.25234 1.9625 5.45434C2.30806 4.65623 2.7775 3.96106 3.37084 3.36884C3.96428 2.7765 4.65939 2.30767 5.45617 1.96234C6.25295 1.617 7.10061 1.44434 7.99917 1.44434C8.89861 1.44434 9.74734 1.61706 10.5453 1.9625C11.3434 2.30806 12.0386 2.7775 12.6308 3.37084C13.2232 3.96428 13.692 4.65939 14.0373 5.45617C14.3827 6.25295 14.5553 7.10062 14.5553 7.99917C14.5553 8.89862 14.3826 9.74734 14.0372 10.5453C13.6916 11.3434 13.2222 12.0386 12.6288 12.6308C12.0354 13.2232 11.3403 13.692 10.5435 14.0373C9.74673 14.3827 8.89906 14.5553 8.0005 14.5553ZM7.997 13.4998C9.50811 13.4998 10.8031 12.9614 11.8818 11.8845C12.9605 10.8077 13.4998 9.51378 13.4998 8.00267C13.4998 6.49156 12.9606 5.19661 11.882 4.11784C10.8034 3.03917 9.50939 2.49984 7.99984 2.49984C6.48684 2.49984 5.19195 3.03911 4.11517 4.11767C3.03828 5.19623 2.49984 6.49028 2.49984 7.99984C2.49984 9.51284 3.03828 10.8077 4.11517 11.8845C5.19195 12.9614 6.48589 13.4998 7.997 13.4998Z" fill="%23F9F8FD"/>%0A</g>%0A</svg>%0A');
  background: var(--cometchat-receipt-color, currentColor);
}
.cometchat-receipts-read::before {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M1.39994 8.62199C1.28883 8.51088 1.23605 8.37943 1.24161 8.22765C1.24716 8.07576 1.3055 7.94426 1.41661 7.83315C1.52772 7.72571 1.65922 7.6711 1.81111 7.66932C1.96289 7.66743 2.09433 7.72204 2.20544 7.83315L4.76111 10.3998C4.824 10.4628 4.89066 10.5295 4.96111 10.5998L5.16111 10.7998C5.27222 10.9109 5.32683 11.0405 5.32494 11.1887C5.32305 11.3369 5.26655 11.4665 5.15544 11.5777L5.14444 11.5887C5.03333 11.6961 4.90366 11.7508 4.75544 11.7527C4.60733 11.7544 4.47772 11.6998 4.36661 11.5887L1.39994 8.62199ZM7.89994 10.3943L13.8221 4.47199C13.9332 4.36088 14.0647 4.30626 14.2166 4.30815C14.3685 4.31004 14.5 4.36654 14.6111 4.47765C14.7184 4.58876 14.7731 4.72021 14.7749 4.87199C14.7768 5.02388 14.7222 5.15538 14.6111 5.26649L8.28877 11.5887C8.17766 11.6998 8.04805 11.7553 7.89994 11.7553C7.75183 11.7553 7.62222 11.6998 7.51111 11.5887L4.54444 8.62199C4.437 8.51465 4.38511 8.3841 4.38877 8.23032C4.39255 8.07665 4.44811 7.94426 4.55544 7.83315C4.66655 7.72204 4.799 7.66649 4.95277 7.66649C5.10644 7.66649 5.23883 7.72204 5.34994 7.83315L7.89994 10.3943ZM11.4611 5.27199L8.28877 8.44432C8.18144 8.55165 8.05277 8.60349 7.90277 8.59982C7.75277 8.59615 7.62222 8.5406 7.51111 8.43315C7.4 8.32204 7.34444 8.18965 7.34444 8.03599C7.34444 7.88221 7.4 7.74976 7.51111 7.63865L10.6721 4.47765C10.7796 4.37021 10.9101 4.31649 11.0638 4.31649C11.2176 4.31649 11.35 4.37021 11.4611 4.47765C11.5722 4.58876 11.6278 4.72115 11.6278 4.87482C11.6278 5.02849 11.5722 5.16088 11.4611 5.27199Z" fill="%23F9F8FD"/>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M1.39994 8.62199C1.28883 8.51088 1.23605 8.37943 1.24161 8.22765C1.24716 8.07576 1.3055 7.94426 1.41661 7.83315C1.52772 7.72571 1.65922 7.6711 1.81111 7.66932C1.96289 7.66743 2.09433 7.72204 2.20544 7.83315L4.76111 10.3998C4.824 10.4628 4.89066 10.5295 4.96111 10.5998L5.16111 10.7998C5.27222 10.9109 5.32683 11.0405 5.32494 11.1887C5.32305 11.3369 5.26655 11.4665 5.15544 11.5777L5.14444 11.5887C5.03333 11.6961 4.90366 11.7508 4.75544 11.7527C4.60733 11.7544 4.47772 11.6998 4.36661 11.5887L1.39994 8.62199ZM7.89994 10.3943L13.8221 4.47199C13.9332 4.36088 14.0647 4.30626 14.2166 4.30815C14.3685 4.31004 14.5 4.36654 14.6111 4.47765C14.7184 4.58876 14.7731 4.72021 14.7749 4.87199C14.7768 5.02388 14.7222 5.15538 14.6111 5.26649L8.28877 11.5887C8.17766 11.6998 8.04805 11.7553 7.89994 11.7553C7.75183 11.7553 7.62222 11.6998 7.51111 11.5887L4.54444 8.62199C4.437 8.51465 4.38511 8.3841 4.38877 8.23032C4.39255 8.07665 4.44811 7.94426 4.55544 7.83315C4.66655 7.72204 4.799 7.66649 4.95277 7.66649C5.10644 7.66649 5.23883 7.72204 5.34994 7.83315L7.89994 10.3943ZM11.4611 5.27199L8.28877 8.44432C8.18144 8.55165 8.05277 8.60349 7.90277 8.59982C7.75277 8.59615 7.62222 8.5406 7.51111 8.43315C7.4 8.32204 7.34444 8.18965 7.34444 8.03599C7.34444 7.88221 7.4 7.74976 7.51111 7.63865L10.6721 4.47765C10.7796 4.37021 10.9101 4.31649 11.0638 4.31649C11.2176 4.31649 11.35 4.37021 11.4611 4.47765C11.5722 4.58876 11.6278 4.72115 11.6278 4.87482C11.6278 5.02849 11.5722 5.16088 11.4611 5.27199Z" fill="%23F9F8FD"/>%0A</svg>%0A');
  background: var(--cometchat-message-seen-color, #56e8a7);
}
.cometchat-message-bubble-outgoing .cometchat-receipts-sent,
.cometchat-message-bubble-outgoing .cometchat-receipts-delivered,
.cometchat-message-bubble-outgoing .cometchat-receipts-wait {
  --cometchat-receipt-color: var(--cometchat-static-white, #fff);
}
.cometchat-receipts-error {
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cometchat-error-color, #f44336);
  border-radius: var(--cometchat-radius-max, 1000px);
  position: relative;
}
.cometchat-receipts-error::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--cometchat-static-white, #fff);
  -webkit-mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M11.9974 16.9168C12.2439 16.9168 12.4476 16.8372 12.6086 16.678C12.7698 16.5189 12.8504 16.316 12.8504 16.0695C12.8504 15.8232 12.7708 15.6195 12.6116 15.4583C12.4525 15.2973 12.2497 15.2168 12.0034 15.2168C11.7569 15.2168 11.5531 15.2964 11.3921 15.4555C11.231 15.6147 11.1504 15.8175 11.1504 16.0638C11.1504 16.3101 11.23 16.5139 11.3891 16.675C11.5483 16.8362 11.7511 16.9168 11.9974 16.9168ZM12.0616 13.1168C12.282 13.1168 12.4685 13.0397 12.6211 12.8855C12.774 12.7314 12.8504 12.5431 12.8504 12.3208V7.7543C12.8504 7.53846 12.7728 7.35321 12.6176 7.19855C12.4625 7.04405 12.2766 6.9668 12.0599 6.9668C11.8369 6.9668 11.649 7.04405 11.4961 7.19855C11.3435 7.35321 11.2671 7.53846 11.2671 7.7543V12.3208C11.2671 12.5431 11.3445 12.7314 11.4991 12.8855C11.6538 13.0397 11.8413 13.1168 12.0616 13.1168Z" fill="%23141414"/>%0A</svg>%0A') center center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M11.9974 16.9168C12.2439 16.9168 12.4476 16.8372 12.6086 16.678C12.7698 16.5189 12.8504 16.316 12.8504 16.0695C12.8504 15.8232 12.7708 15.6195 12.6116 15.4583C12.4525 15.2973 12.2497 15.2168 12.0034 15.2168C11.7569 15.2168 11.5531 15.2964 11.3921 15.4555C11.231 15.6147 11.1504 15.8175 11.1504 16.0638C11.1504 16.3101 11.23 16.5139 11.3891 16.675C11.5483 16.8362 11.7511 16.9168 11.9974 16.9168ZM12.0616 13.1168C12.282 13.1168 12.4685 13.0397 12.6211 12.8855C12.774 12.7314 12.8504 12.5431 12.8504 12.3208V7.7543C12.8504 7.53846 12.7728 7.35321 12.6176 7.19855C12.4625 7.04405 12.2766 6.9668 12.0599 6.9668C11.8369 6.9668 11.649 7.04405 11.4961 7.19855C11.3435 7.35321 11.2671 7.53846 11.2671 7.7543V12.3208C11.2671 12.5431 11.3445 12.7314 11.4991 12.8855C11.6538 13.0397 11.8413 13.1168 12.0616 13.1168Z" fill="%23141414"/>%0A</svg>%0A') center center / contain no-repeat;
  position: absolute;
}
.cometchat-message-bubble__body-footer-view,
.cometchat-message-bubble__body-thread-view {
  margin-top: var(--cometchat-margin-1, 4px);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}
.cometchat-message-bubble__body-footer-view {
  margin-top: -4px;
}
.cometchat-message-bubble__body-reply-view {
  min-width: 100%;
  margin-bottom: var(--cometchat-padding-1, 4px);
}
.cometchat-message-bubble__body-bottom-view {
  margin-top: 0;
}
.cometchat-message-bubble__thread-button {
  background: none;
  border: none;
  padding: var(--cometchat-padding-1, 4px