/* src/components/CometChatAIAssistantChat/CometChatAIAssistantChatHistory.css */
.cometchat-ai-assistant-chat-history {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--cometchat-background-color-01, #ffffff);
  border-radius: var(--cometchat-radius-3, 12px);
  overflow: hidden;
}
.cometchat-ai-assistant-chat-history__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cometchat-spacing-4, 16px);
  flex-shrink: 0;
}
.cometchat-ai-assistant-chat-history__title {
  font: var(--cometchat-font-heading3-bold, 700 16px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-ai-assistant-chat-history__close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--cometchat-spacing-1, 4px);
  border-radius: var(--cometchat-radius-1, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}
.cometchat-ai-assistant-chat-history__close-btn:hover {
  background-color: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-ai-assistant-chat-history__close-btn:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6851d6);
  outline-offset: 2px;
}
.cometchat-ai-assistant-chat-history__close-icon {
  display: block;
  width: 20px;
  height: 20px;
  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: 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-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-icon-color-secondary, #727272);
}
.cometchat-ai-assistant-chat-history__new-chat-row {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-3, 12px);
  width: 100%;
  padding: var(--cometchat-spacing-3, 12px) var(--cometchat-spacing-4, 16px);
  background: none;
  border: none;
  border-bottom: 1px solid var(--cometchat-border-color-light, #e8e8e8);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}
.cometchat-ai-assistant-chat-history__new-chat-row:hover {
  background-color: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-ai-assistant-chat-history__new-chat-row:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6851d6);
  outline-offset: -2px;
}
.cometchat-ai-assistant-chat-history__new-chat-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  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_8399" 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_8399)">%0A<path d="M11.25 12.75H6.25C6.0375 12.75 5.85942 12.6781 5.71575 12.5342C5.57192 12.3904 5.5 12.2122 5.5 11.9997C5.5 11.7871 5.57192 11.609 5.71575 11.4655C5.85942 11.3218 6.0375 11.25 6.25 11.25H11.25V6.25C11.25 6.0375 11.3219 5.85942 11.4658 5.71575C11.6096 5.57192 11.7878 5.5 12.0003 5.5C12.2129 5.5 12.391 5.57192 12.5345 5.71575C12.6782 5.85942 12.75 6.0375 12.75 6.25V11.25H17.75C17.9625 11.25 18.1406 11.3219 18.2843 11.4658C18.4281 11.6096 18.5 11.7878 18.5 12.0003C18.5 12.2129 18.4281 12.391 18.2843 12.5345C18.1406 12.6782 17.9625 12.75 17.75 12.75H12.75V17.75C12.75 17.9625 12.6781 18.1406 12.5342 18.2843C12.3904 18.4281 12.2122 18.5 11.9997 18.5C11.7871 18.5 11.609 18.4281 11.4655 18.2843C11.3218 18.1406 11.25 17.9625 11.25 17.75V12.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center 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<mask id="mask0_740_8399" 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_8399)">%0A<path d="M11.25 12.75H6.25C6.0375 12.75 5.85942 12.6781 5.71575 12.5342C5.57192 12.3904 5.5 12.2122 5.5 11.9997C5.5 11.7871 5.57192 11.609 5.71575 11.4655C5.85942 11.3218 6.0375 11.25 6.25 11.25H11.25V6.25C11.25 6.0375 11.3219 5.85942 11.4658 5.71575C11.6096 5.57192 11.7878 5.5 12.0003 5.5C12.2129 5.5 12.391 5.57192 12.5345 5.71575C12.6782 5.85942 12.75 6.0375 12.75 6.25V11.25H17.75C17.9625 11.25 18.1406 11.3219 18.2843 11.4658C18.4281 11.6096 18.5 11.7878 18.5 12.0003C18.5 12.2129 18.4281 12.391 18.2843 12.5345C18.1406 12.6782 17.9625 12.75 17.75 12.75H12.75V17.75C12.75 17.9625 12.6781 18.1406 12.5342 18.2843C12.3904 18.4281 12.2122 18.5 11.9997 18.5C11.7871 18.5 11.609 18.4281 11.4655 18.2843C11.3218 18.1406 11.25 17.9625 11.25 17.75V12.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-text-color-primary, #141414);
}
.cometchat-ai-assistant-chat-history__new-chat-label {
  font: var(--cometchat-font-body-bold, 600 14px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-ai-assistant-chat-history__list {
  list-style: none;
  margin: 0;
  padding: var(--cometchat-spacing-2, 8px);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-1, 4px);
}
.cometchat-ai-assistant-chat-history__list::-webkit-scrollbar {
  width: 4px;
}
.cometchat-ai-assistant-chat-history__list::-webkit-scrollbar-thumb {
  background: var(--cometchat-border-color-light, #e8e8e8);
  border-radius: 2px;
}
.cometchat-ai-assistant-chat-history__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cometchat-spacing-3, 12px);
  border-radius: var(--cometchat-radius-2, 8px);
  cursor: pointer;
  gap: var(--cometchat-spacing-2, 8px);
  list-style: none;
}
.cometchat-ai-assistant-chat-history__item:hover {
  background-color: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-ai-assistant-chat-history__item:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6851d6);
  outline-offset: -2px;
}
.cometchat-ai-assistant-chat-history__item-text {
  flex: 1;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-ai-assistant-chat-history__delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--cometchat-spacing-1, 4px);
  border-radius: var(--cometchat-radius-1, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.cometchat-ai-assistant-chat-history__item:hover .cometchat-ai-assistant-chat-history__delete-btn,
.cometchat-ai-assistant-chat-history__item:focus-within .cometchat-ai-assistant-chat-history__delete-btn {
  opacity: 1;
}
.cometchat-ai-assistant-chat-history__delete-btn:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6851d6);
  outline-offset: 2px;
  opacity: 1;
}
.cometchat-ai-assistant-chat-history__delete-icon {
  display: block;
  width: 24px;
  height: 24px;
  mask: url('data:image/svg+xml,%0A<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.73364 20.8332C6.29731 20.8332 5.92431 20.6785 5.61464 20.369C5.30514 20.0595 5.15039 19.6865 5.15039 19.25V5.55H4.94614C4.72397 5.55 4.53581 5.47266 4.38164 5.318C4.22747 5.16316 4.15039 4.97566 4.15039 4.7555C4.15039 4.53516 4.22747 4.34858 4.38164 4.19575C4.53581 4.04308 4.72397 3.96675 4.94614 3.96675H8.83689V3.95425C8.83689 3.73558 8.91339 3.54966 9.06639 3.3965C9.21956 3.24333 9.40731 3.16675 9.62964 3.16675H14.3961C14.612 3.16675 14.7972 3.244 14.9519 3.3985C15.1064 3.55317 15.1836 3.73841 15.1836 3.95425V3.96675H19.0831C19.2975 3.96675 19.4817 4.04425 19.6359 4.19925C19.7901 4.35441 19.8671 4.54033 19.8671 4.757C19.8671 4.98017 19.7898 5.16808 19.6351 5.32075C19.4806 5.47358 19.2955 5.55 19.0796 5.55H18.8671V19.25C18.8671 19.6865 18.7123 20.0595 18.4026 20.369C18.0931 20.6785 17.7201 20.8332 17.2836 20.8332H6.73364ZM17.2836 5.55H6.73364V19.25H17.2836V5.55ZM9.99489 17.1707C10.2127 17.1707 10.3986 17.0951 10.5526 16.9437C10.7066 16.7924 10.7836 16.6056 10.7836 16.3832V8.4C10.7836 8.17783 10.7061 7.98966 10.5509 7.8355C10.3959 7.68133 10.2101 7.60425 9.99339 7.60425C9.77022 7.60425 9.58231 7.68133 9.42964 7.8355C9.27681 7.98966 9.20039 8.17783 9.20039 8.4V16.3832C9.20039 16.6056 9.27839 16.7924 9.43439 16.9437C9.59022 17.0951 9.77706 17.1707 9.99489 17.1707ZM14.0284 17.1707C14.2462 17.1707 14.4321 17.0951 14.5861 16.9437C14.7401 16.7924 14.8171 16.6056 14.8171 16.3832V8.4C14.8171 8.17783 14.7396 7.98966 14.5844 7.8355C14.4292 7.68133 14.2433 7.60425 14.0266 7.60425C13.8036 7.60425 13.6157 7.68133 13.4629 7.8355C13.3101 7.98966 13.2336 8.17783 13.2336 8.4V16.3832C13.2336 16.6056 13.3116 16.7924 13.4676 16.9437C13.6236 17.0951 13.8106 17.1707 14.0284 17.1707Z" fill="%23141414"/>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,%0A<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.73364 20.8332C6.29731 20.8332 5.92431 20.6785 5.61464 20.369C5.30514 20.0595 5.15039 19.6865 5.15039 19.25V5.55H4.94614C4.72397 5.55 4.53581 5.47266 4.38164 5.318C4.22747 5.16316 4.15039 4.97566 4.15039 4.7555C4.15039 4.53516 4.22747 4.34858 4.38164 4.19575C4.53581 4.04308 4.72397 3.96675 4.94614 3.96675H8.83689V3.95425C8.83689 3.73558 8.91339 3.54966 9.06639 3.3965C9.21956 3.24333 9.40731 3.16675 9.62964 3.16675H14.3961C14.612 3.16675 14.7972 3.244 14.9519 3.3985C15.1064 3.55317 15.1836 3.73841 15.1836 3.95425V3.96675H19.0831C19.2975 3.96675 19.4817 4.04425 19.6359 4.19925C19.7901 4.35441 19.8671 4.54033 19.8671 4.757C19.8671 4.98017 19.7898 5.16808 19.6351 5.32075C19.4806 5.47358 19.2955 5.55 19.0796 5.55H18.8671V19.25C18.8671 19.6865 18.7123 20.0595 18.4026 20.369C18.0931 20.6785 17.7201 20.8332 17.2836 20.8332H6.73364ZM17.2836 5.55H6.73364V19.25H17.2836V5.55ZM9.99489 17.1707C10.2127 17.1707 10.3986 17.0951 10.5526 16.9437C10.7066 16.7924 10.7836 16.6056 10.7836 16.3832V8.4C10.7836 8.17783 10.7061 7.98966 10.5509 7.8355C10.3959 7.68133 10.2101 7.60425 9.99339 7.60425C9.77022 7.60425 9.58231 7.68133 9.42964 7.8355C9.27681 7.98966 9.20039 8.17783 9.20039 8.4V16.3832C9.20039 16.6056 9.27839 16.7924 9.43439 16.9437C9.59022 17.0951 9.77706 17.1707 9.99489 17.1707ZM14.0284 17.1707C14.2462 17.1707 14.4321 17.0951 14.5861 16.9437C14.7401 16.7924 14.8171 16.6056 14.8171 16.3832V8.4C14.8171 8.17783 14.7396 7.98966 14.5844 7.8355C14.4292 7.68133 14.2433 7.60425 14.0266 7.60425C13.8036 7.60425 13.6157 7.68133 13.4629 7.8355C13.3101 7.98966 13.2336 8.17783 13.2336 8.4V16.3832C13.2336 16.6056 13.3116 16.7924 13.4676 16.9437C13.6236 17.0951 13.8106 17.1707 14.0284 17.1707Z" fill="%23141414"/>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-error-color, #f44649);
}
.cometchat-ai-assistant-chat-history__date-separator {
  display: flex;
  align-items: center;
  padding: var(--cometchat-spacing-2, 8px) var(--cometchat-spacing-3, 12px);
  list-style: none;
}
.cometchat-ai-assistant-chat-history__date-separator-text {
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-ai-assistant-chat-history__shimmer-list {
  list-style: none;
  margin: 0;
  padding: var(--cometchat-spacing-2, 8px);
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-ai-assistant-chat-history__shimmer-item {
  padding: var(--cometchat-spacing-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-1, 4px);
}
.cometchat-ai-assistant-chat-history__shimmer-line {
  height: 12px;
  border-radius: var(--cometchat-radius-1, 4px);
  background-color: var(--cometchat-background-color-02, #f5f5f5);
  animation: cometchat-history-shimmer 1.5s infinite;
}
.cometchat-ai-assistant-chat-history__shimmer-line--title {
  width: 70%;
}
.cometchat-ai-assistant-chat-history__shimmer-line--subtitle {
  width: 45%;
}
@keyframes cometchat-history-shimmer {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
.cometchat-ai-assistant-chat-history__empty-state,
.cometchat-ai-assistant-chat-history__error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--cometchat-spacing-6, 24px);
  text-align: center;
  gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-ai-assistant-chat-history__empty-title,
.cometchat-ai-assistant-chat-history__error-title {
  font: var(--cometchat-font-heading3-bold, 700 16px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  margin: 0;
}
.cometchat-ai-assistant-chat-history__empty-subtitle,
.cometchat-ai-assistant-chat-history__error-subtitle {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-ai-assistant-chat-history__shimmer-line {
    animation: 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/CometChatMessageList/CometChatMessageList.css */
.cometchat-message-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--cometchat-message-list-bg);
}
.cometchat-message-list__scroll-wrapper {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}
.cometchat-message-list__scroll-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: auto;
  display: flex;
  flex-direction: column;
  padding: var(--cometchat-padding-3, 12px) 0;
}
.cometchat-message-list__scroll-container--hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-message-list__scroll-container--hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.cometchat-message-list__top-sentinel {
  height: 1px;
  overflow-anchor: none;
}
.cometchat-message-list__bottom-sentinel {
  height: 1px;
  overflow-anchor: none;
}
.cometchat-message-list__messages {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}
.cometchat-message-list__date-separator {
  display: flex;
  justify-content: center;
  padding: var(--cometchat-padding-2, 8px) 0;
}
.cometchat-message-list__floating-date {
  position: absolute;
  top: var(--cometchat-padding-2, 8px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 5;
}
.cometchat-message-list__new-message-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cometchat-spacing-4, 16px);
  width: 100%;
  padding: var(--cometchat-padding-4, 16px) var(--cometchat-padding-7, 28px);
  box-sizing: border-box;
}
.cometchat-message-list__new-message-divider span {
  white-space: nowrap;
  font: var(--cometchat-font-body-medium, 500 14px / 16.8px Roboto);
  color: var(--cometchat-error-color, #f44336);
}
.cometchat-message-list__new-message-divider div {
  width: 100%;
  height: 1px;
  background: var(--cometchat-error-color, #f44336);
}
.cometchat-message-list__scroll-to-bottom {
  position: absolute;
  bottom: 8px;
  right: 12px;
  z-index: 10;
  display: flex;
  padding: var(--cometchat-padding-2, 8px);
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-static-black, #000);
  border: none;
  cursor: pointer;
}
.cometchat-message-list__scroll-to-bottom:hover {
  cursor: pointer;
}
.cometchat-message-list__scroll-to-bottom:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-message-list__scroll-to-bottom-icon {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  background: var(--cometchat-static-white, #fff);
  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_8306" 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_8306)">%0A<path d="M11.9998 14.677C11.8793 14.677 11.7671 14.6578 11.6633 14.6193C11.5594 14.5808 11.4607 14.5148 11.367 14.4213L6.87276 9.92701C6.73442 9.78851 6.66359 9.61443 6.66026 9.40476C6.65709 9.19526 6.72792 9.01801 6.87276 8.87301C7.01776 8.72818 7.19342 8.65576 7.39976 8.65576C7.60609 8.65576 7.78176 8.72818 7.92676 8.87301L11.9998 12.9463L16.0728 8.87301C16.2113 8.73468 16.3853 8.66385 16.595 8.66051C16.8045 8.65735 16.9818 8.72818 17.1268 8.87301C17.2716 9.01801 17.344 9.19368 17.344 9.40001C17.344 9.60635 17.2716 9.78201 17.1268 9.92701L12.6325 14.4213C12.5388 14.5148 12.4401 14.5808 12.3363 14.6193C12.2324 14.6578 12.1203 14.677 11.9998 14.677Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center 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<mask id="mask0_740_8306" 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_8306)">%0A<path d="M11.9998 14.677C11.8793 14.677 11.7671 14.6578 11.6633 14.6193C11.5594 14.5808 11.4607 14.5148 11.367 14.4213L6.87276 9.92701C6.73442 9.78851 6.66359 9.61443 6.66026 9.40476C6.65709 9.19526 6.72792 9.01801 6.87276 8.87301C7.01776 8.72818 7.19342 8.65576 7.39976 8.65576C7.60609 8.65576 7.78176 8.72818 7.92676 8.87301L11.9998 12.9463L16.0728 8.87301C16.2113 8.73468 16.3853 8.66385 16.595 8.66051C16.8045 8.65735 16.9818 8.72818 17.1268 8.87301C17.2716 9.01801 17.344 9.19368 17.344 9.40001C17.344 9.60635 17.2716 9.78201 17.1268 9.92701L12.6325 14.4213C12.5388 14.5148 12.4401 14.5808 12.3363 14.6193C12.2324 14.6578 12.1203 14.677 11.9998 14.677Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
}
.cometchat-message-list__scroll-to-bottom-badge {
  color: var(--cometchat-static-white, #fff);
  text-align: center;
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  background: var(--cometchat-primary-color, #6852d6);
  border-radius: var(--cometchat-radius-max, 1000px);
  height: 20px;
  padding: 0 var(--cometchat-padding-2, 8px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cometchat-message-list__empty-state {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: var(--cometchat-padding-5, 24px);
  box-sizing: border-box;
  background: var(--cometchat-message-list-bg);
}
.cometchat-message-list__error-state {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--cometchat-padding-6, 24px);
  box-sizing: border-box;
  background: var(--cometchat-message-list-bg);
}
.cometchat-message-list__error-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-spacing-4, 16px);
  text-align: center;
}
.cometchat-message-list__error-state-icon {
  width: 120px;
  height: 120px;
  background-color: var(--cometchat-error-color, #f44336);
  opacity: 0.8;
  mask: url('data:image/svg+xml,<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_7089_707053" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">%0A<path d="M120 60C120 68.9108 118.054 77.3757 114.559 84.9811C105.089 105.649 84.2189 120 60 120C35.7811 120 14.9108 105.649 5.44054 84.9811C1.94595 77.3757 0 68.9108 0 60C0 26.8622 26.8622 0 60 0C93.1378 0 120 26.8622 120 60Z" fill="%23F4F7FC"/>%0A</mask>%0A<g mask="url(%23mask0_7089_707053)">%0A<path d="M2.625 84L22.5 79.875L39 86.25L24 94.5L2.625 84Z" fill="%23DCDCDC"/>%0A<path d="M117.375 84L97.5 79.875L81 86.25L96 94.5L117.375 84Z" fill="%23DCDCDC"/>%0A<path opacity="0.6" d="M39 86.25H81L96 94.5H24L39 86.25Z" fill="%23A1A1A1"/>%0A<path d="M45.0793 50.5798C51.8385 46.6773 60.4814 48.9932 64.3838 55.7524C68.2863 62.5115 65.9704 71.1545 59.2112 75.0569L51.2626 79.646L49.1291 89.2059C48.8661 90.3844 47.2924 90.6255 46.6887 89.5798L43.0171 83.2205C37.4837 83.9945 31.7809 81.424 28.8155 76.2878C24.9131 69.5286 27.229 60.8857 33.9882 56.9833L45.0793 50.5798Z" fill="%23E8E8E8"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 54.8662 58.7017)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 47.217 63.1196)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 39.568 67.5317)" fill="%23FAFAFA"/>%0A<path d="M68.7319 23.6854C58.716 21.0017 48.4209 26.9456 45.7371 36.9615C43.0534 46.9774 48.9973 57.2726 59.0132 59.9563L70.7932 63.1128L76.8182 74.647C77.5609 76.0689 79.6633 75.8372 80.0785 74.2876L82.6036 64.864C89.9703 63.9541 96.404 58.6946 98.4433 51.0841C101.127 41.0681 95.1831 30.773 85.1672 28.0892L68.7319 23.6854Z" fill="%23DCDCDC"/>%0A<circle cx="61.039" cy="41.0622" r="2.93362" transform="rotate(15 61.039 41.0622)" fill="%23FAFAFA"/>%0A<circle cx="72.3738" cy="44.0973" r="2.93362" transform="rotate(15 72.3738 44.0973)" fill="%23FAFAFA"/>%0A<circle cx="83.7081" cy="47.1384" r="2.93362" transform="rotate(15 83.7081 47.1384)" fill="%23FAFAFA"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6951 32.7839C42.2994 32.6391 42.6718 32.0319 42.527 31.4277C42.3822 30.8234 41.775 30.451 41.1708 30.5958L38.2534 31.2949C37.6492 31.4397 37.2768 32.0469 37.4216 32.6511C37.5663 33.2553 38.1735 33.6278 38.7777 33.483L41.6951 32.7839ZM52.5122 19.092C52.5109 19.7133 52.0063 20.216 51.385 20.2148C50.7637 20.2136 50.261 19.7089 50.2622 19.0876L50.268 16.0876C50.2692 15.4663 50.7739 14.9636 51.3952 14.9648C52.0165 14.966 52.5192 15.4707 52.518 16.092L52.5122 19.092ZM43.1169 26.0355C42.9758 26.6405 42.3709 27.0167 41.7658 26.8756L38.8442 26.1942C38.2391 26.0531 37.863 25.4482 38.0041 24.8431C38.1452 24.2381 38.7501 23.8619 39.3552 24.003L42.2768 24.6844C42.8819 24.8255 43.258 25.4304 43.1169 26.0355ZM46.7835 20.5285C47.0607 21.0846 46.8345 21.76 46.2784 22.0372C45.7224 22.3143 45.0469 22.0882 44.7698 21.5321L43.4316 18.8471C43.1544 18.291 43.3805 17.6156 43.9366 17.3384C44.4927 17.0613 45.1682 17.2874 45.4453 17.8435L46.7835 20.5285Z" fill="%23DCDCDC"/>%0A<rect x="24" y="94.5" width="72" height="63" fill="%23DCDCDC"/>%0A</g>%0A</svg>%0A') center center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_7089_707053" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">%0A<path d="M120 60C120 68.9108 118.054 77.3757 114.559 84.9811C105.089 105.649 84.2189 120 60 120C35.7811 120 14.9108 105.649 5.44054 84.9811C1.94595 77.3757 0 68.9108 0 60C0 26.8622 26.8622 0 60 0C93.1378 0 120 26.8622 120 60Z" fill="%23F4F7FC"/>%0A</mask>%0A<g mask="url(%23mask0_7089_707053)">%0A<path d="M2.625 84L22.5 79.875L39 86.25L24 94.5L2.625 84Z" fill="%23DCDCDC"/>%0A<path d="M117.375 84L97.5 79.875L81 86.25L96 94.5L117.375 84Z" fill="%23DCDCDC"/>%0A<path opacity="0.6" d="M39 86.25H81L96 94.5H24L39 86.25Z" fill="%23A1A1A1"/>%0A<path d="M45.0793 50.5798C51.8385 46.6773 60.4814 48.9932 64.3838 55.7524C68.2863 62.5115 65.9704 71.1545 59.2112 75.0569L51.2626 79.646L49.1291 89.2059C48.8661 90.3844 47.2924 90.6255 46.6887 89.5798L43.0171 83.2205C37.4837 83.9945 31.7809 81.424 28.8155 76.2878C24.9131 69.5286 27.229 60.8857 33.9882 56.9833L45.0793 50.5798Z" fill="%23E8E8E8"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 54.8662 58.7017)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 47.217 63.1196)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 39.568 67.5317)" fill="%23FAFAFA"/>%0A<path d="M68.7319 23.6854C58.716 21.0017 48.4209 26.9456 45.7371 36.9615C43.0534 46.9774 48.9973 57.2726 59.0132 59.9563L70.7932 63.1128L76.8182 74.647C77.5609 76.0689 79.6633 75.8372 80.0785 74.2876L82.6036 64.864C89.9703 63.9541 96.404 58.6946 98.4433 51.0841C101.127 41.0681 95.1831 30.773 85.1672 28.0892L68.7319 23.6854Z" fill="%23DCDCDC"/>%0A<circle cx="61.039" cy="41.0622" r="2.93362" transform="rotate(15 61.039 41.0622)" fill="%23FAFAFA"/>%0A<circle cx="72.3738" cy="44.0973" r="2.93362" transform="rotate(15 72.3738 44.0973)" fill="%23FAFAFA"/>%0A<circle cx="83.7081" cy="47.1384" r="2.93362" transform="rotate(15 83.7081 47.1384)" fill="%23FAFAFA"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6951 32.7839C42.2994 32.6391 42.6718 32.0319 42.527 31.4277C42.3822 30.8234 41.775 30.451 41.1708 30.5958L38.2534 31.2949C37.6492 31.4397 37.2768 32.0469 37.4216 32.6511C37.5663 33.2553 38.1735 33.6278 38.7777 33.483L41.6951 32.7839ZM52.5122 19.092C52.5109 19.7133 52.0063 20.216 51.385 20.2148C50.7637 20.2136 50.261 19.7089 50.2622 19.0876L50.268 16.0876C50.2692 15.4663 50.7739 14.9636 51.3952 14.9648C52.0165 14.966 52.5192 15.4707 52.518 16.092L52.5122 19.092ZM43.1169 26.0355C42.9758 26.6405 42.3709 27.0167 41.7658 26.8756L38.8442 26.1942C38.2391 26.0531 37.863 25.4482 38.0041 24.8431C38.1452 24.2381 38.7501 23.8619 39.3552 24.003L42.2768 24.6844C42.8819 24.8255 43.258 25.4304 43.1169 26.0355ZM46.7835 20.5285C47.0607 21.0846 46.8345 21.76 46.2784 22.0372C45.7224 22.3143 45.0469 22.0882 44.7698 21.5321L43.4316 18.8471C43.1544 18.291 43.3805 17.6156 43.9366 17.3384C44.4927 17.0613 45.1682 17.2874 45.4453 17.8435L46.7835 20.5285Z" fill="%23DCDCDC"/>%0A<rect x="24" y="94.5" width="72" height="63" fill="%23DCDCDC"/>%0A</g>%0A</svg>%0A') center center / contain no-repeat;
}
.cometchat-message-list__error-state-text {
  margin: 0;
  font: var(--cometchat-font-body-regular, 400 14px / 16.8px Roboto);
  color: var(--cometchat-error-color, #f44336);
}
.cometchat-message-list__shimmer {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-3, 12px);
  padding: var(--cometchat-padding-3, 12px);
  flex: 1;
  background: var(--cometchat-message-list-bg);
}
.cometchat-message-list__shimmer-header {
  display: flex;
  width: 50px;
  align-self: center;
}
.cometchat-message-list__shimmer-body {
  display: flex;
  width: 286px;
  flex-direction: column;
  gap: var(--cometchat-spacing-1, 4px);
}
.cometchat-message-list__shimmer-leading-view {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%) );
  background-size: 200% 100%;
  animation: cometchat-shimmer 0.8s infinite;
}
.cometchat-message-list__shimmer-item-header {
  display: flex;
  width: 120px;
  height: 12px;
  border-radius: var(--cometchat-radius-1, 4px);
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%) );
  background-size: 200% 100%;
  animation: cometchat-shimmer 0.8s infinite;
}
.cometchat-message-list__shimmer-item {
  width: 100%;
  height: 53px;
  border-radius: var(--cometchat-radius-3, 12px);
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%) );
  background-size: 200% 100%;
  animation: cometchat-shimmer 0.8s infinite;
}
.cometchat-message-list__shimmer-header .cometchat-message-list__shimmer-item {
  height: 22px;
}
@keyframes cometchat-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.cometchat-message-list__header-view {
  flex-shrink: 0;
}
.cometchat-message-list__footer-view {
  flex-shrink: 0;
}
.cometchat-message-list__live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.cometchat-message-list__emoji-picker-overlay {
  position: absolute;
  z-index: 100;
  border-radius: var(--cometchat-radius-3, 12px);
  box-shadow: var(--cometchat-shadow-high, 0 8px 32px rgba(0, 0, 0, 0.1));
  overflow: hidden;
}
.cometchat-message-list__message-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cometchat-overlay-background-heavy, rgba(0, 0, 0, 0.6));
}
.cometchat-message-list__message-info-panel {
  width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: var(--cometchat-radius-5, 20px);
  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);
  overflow: hidden;
}
@keyframes cometchat-background-fade {
  0% {
    background-color: var(--cometchat-extended-primary-color-200, rgba(104, 82, 214, 0.2));
  }
  50% {
    background-color: var(--cometchat-extended-primary-color-100, rgba(104, 82, 214, 0.1));
  }
  75%, 100% {
    background-color: transparent;
  }
}
.cometchat-message-list__bubble-highlight {
  animation: cometchat-background-fade 3s ease-out forwards;
  display: block;
  width: 100%;
}

/* 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/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) 0;
  cursor: pointer;
  font: var( --cometchat-font-caption1-medium, 500 12px var(--cometchat-font-family, "Inter", sans-serif) );
  color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-bubble__thread-button:hover {
  text-decoration: underline;
}
.cometchat-message-bubble__thread-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
  border-radius: var(--cometchat-radius-1, 4px);
}
@media (max-width: 768px) {
  .cometchat-message-bubble {
    max-width: 88%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-message-bubble__options {
    transition: none;
  }
}
.cometchat-message-bubble-wrapper {
  display: flex;
  width: 100%;
  padding: var(--cometchat-spacing-2, 8px) 0;
}
.cometchat-message-bubble-wrapper--left {
  justify-content: flex-start;
}
.cometchat-message-bubble-wrapper--right {
  justify-content: flex-end;
}
.cometchat-message-bubble-wrapper--center {
  justify-content: center;
}
.cometchat-message-bubble-wrapper--batch-first {
  padding-bottom: var(--cometchat-spacing-half, 2px);
}
.cometchat-message-bubble-wrapper--batch-middle {
  padding-top: var(--cometchat-spacing-half, 2px);
  padding-bottom: var(--cometchat-spacing-half, 2px);
}
.cometchat-message-bubble-wrapper--batch-last {
  padding-top: var(--cometchat-spacing-half, 2px);
}
div:has(> .cometchat-message-bubble-wrapper--batch-first .cometchat-message-bubble__leading-view) ~ div:has(> .cometchat-message-bubble-wrapper--batch-middle) .cometchat-message-bubble-wrapper--batch-middle:has(.cometchat-message-bubble-incoming),
div:has(> .cometchat-message-bubble-wrapper--batch-first .cometchat-message-bubble__leading-view) ~ div:has(> .cometchat-message-bubble-wrapper--batch-last) .cometchat-message-bubble-wrapper--batch-last:has(.cometchat-message-bubble-incoming) {
  margin-left: 40px;
}

/* src/components/CometChatReactions/CometChatReactions.css */
.cometchat-reactions {
  display: flex;
  padding: 0 var(--cometchat-padding-1, 4px);
  align-items: flex-start;
  align-content: flex-start;
  gap: 2px;
  align-self: stretch;
  min-width: 100%;
  height: fit-content;
}
.cometchat-reactions__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 100%;
}
.cometchat-reactions__chip {
  display: inline-flex;
  height: 24px;
  padding: 2px var(--cometchat-padding-2, 8px);
  align-items: center;
  gap: var(--cometchat-padding-1, 4px);
  flex-shrink: 0;
  border-radius: 20px;
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-reactions__chip {
    transition: none;
  }
}
.cometchat-reactions__chip:hover {
  border-color: var(--cometchat-border-color-default, #e8e8e8);
}
.cometchat-reactions__chip--active {
  border: 1px solid var(--cometchat-extended-primary-color-300, #ccc4f1);
  background: var(--cometchat-extended-primary-color-100, #edeafa);
}
.cometchat-reactions__chip:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-reactions__chip-emoji {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
.cometchat-reactions__chip-count {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
}
.cometchat-reactions__overflow {
  display: inline-flex;
  height: 24px;
  padding: 2px var(--cometchat-padding-2, 8px);
  align-items: center;
  gap: var(--cometchat-padding-1, 4px);
  flex-shrink: 0;
  border-radius: 20px;
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  cursor: pointer;
}
.cometchat-reactions__overflow:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-reactions__overflow-count {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
}
.cometchat-reactions__info-wrapper .cometchat-popover__content {
  background: transparent;
  box-shadow: none;
  border: none;
}
.cometchat-reactions__info {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  border-radius: var(--cometchat-radius-2, 8px);
}
.cometchat-reactions__info-content {
  display: flex;
  padding: 8px var(--cometchat-padding-2, 8px);
  flex-direction: column;
  align-items: center;
  border-radius: var(--cometchat-radius-1, 4px);
  background: var(--cometchat-static-black, #141414);
  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  margin: -1px;
  min-height: 77px;
  min-width: 77px;
  justify-content: center;
}
.cometchat-reactions__info-emoji-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-padding-1, 4px);
}
.cometchat-reactions__info-emoji {
  color: var(--cometchat-static-white, #f9f8fd);
  text-align: center;
  font: var(--cometchat-font-heading1-regular, 400 24px Roboto);
}
.cometchat-reactions__info-title {
  color: var(--cometchat-static-white, #f9f8fd);
  text-align: center;
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
}
.cometchat-reactions__info-description {
  color: var(--cometchat-text-color-tertiary, #a1a1a1);
  text-align: center;
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
}
.cometchat-reactions__info-error {
  color: var(--cometchat-error-color, #f44649);
  text-align: center;
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
}
.cometchat-reactions__info-loading {
  height: 24px;
  width: 24px;
  border: 4px solid var(--cometchat-background-color-04, #e8e8e8);
  border-radius: 50%;
  border-top: 4px solid transparent;
  animation: cometchat-reactions-spin 2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-reactions__info-loading {
    animation: none;
  }
}
@keyframes cometchat-reactions-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.cometchat-reactions__list {
  display: flex;
  width: 280px;
  flex-direction: column;
  overflow: hidden;
  align-items: flex-start;
  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: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.cometchat-reactions__list-error {
  display: flex;
  height: 200px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  color: var(--cometchat-text-color-secondary, #727272);
  text-align: center;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
.cometchat-reactions__list-tabs {
  display: flex;
  padding-top: var(--cometchat-padding-2, 8px);
  max-width: 280px;
  align-items: center;
  align-self: stretch;
  overflow-x: auto;
  border-bottom: 1px solid var(--cometchat-border-color-default, #e8e8e8);
  background: var(--cometchat-background-color-01, #fff);
}
.cometchat-reactions__list-tabs-tab {
  display: flex;
  height: 40px;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  align-items: center;
  gap: var(--cometchat-padding-1, 4px);
  cursor: pointer;
  border: none;
  background: none;
  border-radius: 4px 4px 0 0;
}
.cometchat-reactions__list-tabs-tab:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: -2px;
}
.cometchat-reactions__list-tabs-tab--active {
  border-bottom: 2px solid var(--cometchat-primary-color, #6852d6);
}
.cometchat-reactions__list-tabs-tab-emoji,
.cometchat-reactions__list-tabs-tab-count {
  color: var(--cometchat-text-color-secondary, #727272);
  text-align: center;
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
}
.cometchat-reactions__list-tabs-tab-emoji--active,
.cometchat-reactions__list-tabs-tab-count--active {
  color: var(--cometchat-text-color-highlight, #6852d6);
}
.cometchat-reactions__list-items {
  display: flex;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: var(--cometchat-radius-0, 0);
  background: var(--cometchat-background-color-01, #fff);
  overflow-y: auto;
  height: 200px;
}
.cometchat-reactions__list-item {
  width: 280px;
  cursor: pointer;
}
.cometchat-reactions__list-item .cometchat-list-item__leading-view,
.cometchat-reactions__list-item .cometchat-list-item__body {
  padding: 0;
  flex-shrink: inherit;
}
.cometchat-reactions__list-item .cometchat-avatar,
.cometchat-reactions__list-item .cometchat-avatar__image,
.cometchat-reactions__list-item .cometchat-list-item__leading-view {
  height: 32px;
  width: 32px;
}
.cometchat-reactions__list-shimmer {
  display: flex;
  width: 280px;
  height: 200px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  background: var(--cometchat-background-color-01, #fff);
}
.cometchat-reactions__list-shimmer-item {
  display: flex;
  width: 280px;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  align-items: center;
  gap: var(--cometchat-padding-3, 12px);
  flex: 1 0 0;
  background: var(--cometchat-background-color-01, #fff);
}
.cometchat-reactions__list-shimmer-item-icon {
  background: var(--cometchat-shimmer-gradient-color);
  display: flex;
  border-radius: var(--cometchat-radius-max, 1000px);
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  animation: cometchat-reactions-shimmer 10s infinite linear;
}
.cometchat-reactions__list-shimmer-item-content {
  background: var(--cometchat-shimmer-gradient-color);
  border-radius: var(--cometchat-radius-2, 8px);
  display: flex;
  height: 20px;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  animation: cometchat-reactions-shimmer 5s infinite linear;
}
.cometchat-reactions__list-shimmer-item-tailview {
  background: var(--cometchat-shimmer-gradient-color);
  display: flex;
  width: 24px;
  height: 24px;
  border-radius: var(--cometchat-radius-max, 1000px);
  justify-content: center;
  align-items: center;
  animation: cometchat-reactions-shimmer 10s infinite linear;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-reactions__list-shimmer-item-icon,
  .cometchat-reactions__list-shimmer-item-content,
  .cometchat-reactions__list-shimmer-item-tailview {
    animation: none;
  }
}
@keyframes cometchat-reactions-shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

/* src/components/CometChatReactionList/CometChatReactionList.css */
.cometchat-reaction-list {
  display: flex;
  width: 280px;
  flex-direction: column;
  overflow: hidden;
  align-items: flex-start;
  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: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.cometchat-reaction-list__tabs {
  display: flex;
  padding-top: var(--cometchat-padding-2, 8px);
  max-width: 280px;
  align-items: center;
  align-self: stretch;
  overflow-x: auto;
  border-bottom: 1px solid var(--cometchat-border-color-default, #e8e8e8);
  background: var(--cometchat-background-color-01, #fff);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-reaction-list__tabs::-webkit-scrollbar {
  display: none;
}
.cometchat-reaction-list__tabs-tab {
  display: flex;
  height: 40px;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  align-items: center;
  gap: var(--cometchat-padding-1, 4px);
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: none;
  border-radius: 4px 4px 0 0;
}
.cometchat-reaction-list__tabs-tab:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: -2px;
}
.cometchat-reaction-list__tabs-tab--active {
  border-bottom: 2px solid var(--cometchat-primary-color, #6852d6);
}
.cometchat-reaction-list__tabs-tab-emoji {
  color: var(--cometchat-text-color-secondary, #727272);
  text-align: center;
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
}
.cometchat-reaction-list__tabs-tab-emoji--active {
  color: var(--cometchat-text-color-highlight, #6852d6);
}
.cometchat-reaction-list__tabs-tab-count {
  color: var(--cometchat-text-color-secondary, #727272);
  text-align: center;
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
}
.cometchat-reaction-list__tabs-tab-count--active {
  color: var(--cometchat-text-color-highlight, #6852d6);
}
.cometchat-reaction-list__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  height: 200px;
  overflow-y: auto;
  background: var(--cometchat-background-color-01, #fff);
}
.cometchat-reaction-list__list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  gap: var(--cometchat-padding-3, 12px);
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
.cometchat-reaction-list__list-item--current-user {
  cursor: pointer;
}
.cometchat-reaction-list__list-item--current-user:hover {
  background: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-reaction-list__list-item--current-user:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: -2px;
}
.cometchat-reaction-list__list-item--readonly {
  cursor: default;
}
.cometchat-reaction-list__item-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}
.cometchat-reaction-list__item-avatar .cometchat-avatar,
.cometchat-reaction-list__item-avatar .cometchat-avatar__image {
  width: 32px;
  height: 32px;
}
.cometchat-reaction-list__item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.cometchat-reaction-list__item-name {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-reaction-list__item-hint {
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
}
.cometchat-reaction-list__item-emoji {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}
.cometchat-reaction-list__shimmer {
  display: flex;
  width: 280px;
  height: 200px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  background: var(--cometchat-background-color-01, #fff);
}
.cometchat-reaction-list__shimmer-item {
  display: flex;
  width: 100%;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  align-items: center;
  gap: var(--cometchat-padding-3, 12px);
  flex: 1 0 0;
  background: var(--cometchat-background-color-01, #fff);
  box-sizing: border-box;
}
.cometchat-reaction-list__shimmer-item-icon {
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) );
  background-size: 400% 100%;
  display: flex;
  border-radius: var(--cometchat-radius-max, 1000px);
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  animation: cometchat-reaction-list-shimmer 1.5s infinite linear;
}
.cometchat-reaction-list__shimmer-item-content {
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) );
  background-size: 400% 100%;
  border-radius: var(--cometchat-radius-2, 8px);
  display: flex;
  height: 20px;
  flex: 1 0 0;
  animation: cometchat-reaction-list-shimmer 1.5s infinite linear;
}
.cometchat-reaction-list__shimmer-item-tailview {
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) );
  background-size: 400% 100%;
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--cometchat-radius-max, 1000px);
  animation: cometchat-reaction-list-shimmer 1.5s infinite linear;
}
@keyframes cometchat-reaction-list-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-reaction-list__shimmer-item-icon,
  .cometchat-reaction-list__shimmer-item-content,
  .cometchat-reaction-list__shimmer-item-tailview {
    animation: none;
  }
}
.cometchat-reaction-list__error {
  display: flex;
  height: 200px;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--cometchat-padding-2, 8px);
  background: var(--cometchat-background-color-01, #fff);
  padding: 0 var(--cometchat-padding-4, 16px);
  box-sizing: border-box;
}
.cometchat-reaction-list__error-text {
  color: var(--cometchat-text-color-secondary, #727272);
  text-align: center;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  margin: 0;
  word-break: break-word;
}
.cometchat-reaction-list__retry-button {
  display: inline-flex;
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-3, 12px);
  align-items: center;
  justify-content: center;
  border-radius: var(--cometchat-radius-2, 8px);
  border: 1px solid var(--cometchat-primary-color, #6852d6);
  background: none;
  color: var(--cometchat-primary-color, #6852d6);
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
  cursor: pointer;
  transition: background-color 0.15s;
}
.cometchat-reaction-list__retry-button:hover {
  background: var(--cometchat-extended-primary-color-100, #edeafa);
}
.cometchat-reaction-list__retry-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-reaction-list__retry-button {
    transition: none;
  }
}
.cometchat-reaction-list__empty {
  display: flex;
  height: 200px;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--cometchat-background-color-01, #fff);
}
.cometchat-reaction-list__empty-text {
  color: var(--cometchat-text-color-secondary, #727272);
  text-align: center;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  margin: 0;
}
.cometchat-reaction-list__loading-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--cometchat-padding-2, 8px);
  width: 100%;
}
.cometchat-reaction-list__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--cometchat-border-color-default, #e8e8e8);
  border-top-color: var(--cometchat-primary-color, #6852d6);
  border-radius: 50%;
  animation: cometchat-reaction-list-spin 0.8s linear infinite;
}
@keyframes cometchat-reaction-list-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-reaction-list__spinner {
    animation: none;
    border-top-color: var(--cometchat-border-color-default, #e8e8e8);
  }
}
@media (prefers-contrast: high) {
  .cometchat-reaction-list {
    border: 2px solid ButtonText;
  }
  .cometchat-reaction-list__tabs-tab--active {
    border-bottom: 3px solid ButtonText;
  }
  .cometchat-reaction-list__tabs-tab-emoji--active,
  .cometchat-reaction-list__tabs-tab-count--active {
    color: ButtonText;
  }
  .cometchat-reaction-list__list-item--current-user:focus-visible {
    outline: 3px solid ButtonText;
  }
  .cometchat-reaction-list__retry-button {
    border: 2px solid ButtonText;
    color: ButtonText;
  }
}

/* src/components/base/CometChatPopover/CometChatPopover.css */
.cometchat-popover {
  position: relative;
  display: inline-block;
}
.cometchat-popover__trigger {
  display: inline-block;
  cursor: pointer;
}
.cometchat-popover__trigger:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
  border-radius: var(--cometchat-radius-1, 4px);
}
.cometchat-popover__trigger:focus {
  outline: none;
}
.cometchat-popover__content {
  position: fixed;
  z-index: var(--cometchat-popover-content-z-index, 1000);
  background-color: var(--cometchat-popover-content-background, transparent);
  color: var(--cometchat-text-color-primary, #141414);
  font: var( --cometchat-font-body-regular, 400 14px var(--cometchat-font-family, "Inter", sans-serif) );
  border: none;
  border-radius: var(--cometchat-popover-content-border-radius, 0);
  padding: var(--cometchat-popover-content-padding, 0);
  max-width: var(--cometchat-popover-content-max-width, 300px);
  box-shadow: var(--cometchat-popover-content-box-shadow, none);
  word-wrap: break-word;
  opacity: 0;
  pointer-events: none;
}
.cometchat-popover__content--positioned {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .cometchat-popover__content--positioned {
    animation: cometchatPopoverFadeIn var(--cometchat-popover-animation-duration, 0.15s) ease-out;
  }
}
@keyframes cometchatPopoverFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.cometchat-popover__content .cometchat-popover__content {
  z-index: var(--cometchat-popover-nested-z-index, 1001);
}
.cometchat-popover__content--top {
}
.cometchat-popover__content--bottom {
}
.cometchat-popover__content--left {
}
.cometchat-popover__content--right {
}
.cometchat-popover__content:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: -2px;
}
.cometchat-popover__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.cometchat-popover__arrow--top {
  bottom: calc(-1 * var(--cometchat-popover-arrow-size, 8px));
  left: 50%;
  transform: translateX(-50%);
  border-width: var(--cometchat-popover-arrow-size, 8px) var(--cometchat-popover-arrow-size, 8px) 0 var(--cometchat-popover-arrow-size, 8px);
  border-color: var(--cometchat-popover-arrow-color, var(--cometchat-background-color-01, #fff)) transparent transparent transparent;
}
.cometchat-popover__arrow--bottom {
  top: calc(-1 * var(--cometchat-popover-arrow-size, 8px));
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 var(--cometchat-popover-arrow-size, 8px) var(--cometchat-popover-arrow-size, 8px) var(--cometchat-popover-arrow-size, 8px);
  border-color: transparent transparent var(--cometchat-popover-arrow-color, var(--cometchat-background-color-01, #fff)) transparent;
}
.cometchat-popover__arrow--left {
  right: calc(-1 * var(--cometchat-popover-arrow-size, 8px));
  top: 50%;
  transform: translateY(-50%);
  border-width: var(--cometchat-popover-arrow-size, 8px) 0 var(--cometchat-popover-arrow-size, 8px) var(--cometchat-popover-arrow-size, 8px);
  border-color: transparent transparent transparent var(--cometchat-popover-arrow-color, var(--cometchat-background-color-01, #fff));
}
.cometchat-popover__arrow--right {
  left: calc(-1 * var(--cometchat-popover-arrow-size, 8px));
  top: 50%;
  transform: translateY(-50%);
  border-width: var(--cometchat-popover-arrow-size, 8px) var(--cometchat-popover-arrow-size, 8px) var(--cometchat-popover-arrow-size, 8px) 0;
  border-color: transparent var(--cometchat-popover-arrow-color, var(--cometchat-background-color-01, #fff)) transparent transparent;
}

/* src/components/CometChatMessageBubble/CometChatMessageReplyPreview.css */
.cometchat-message-reply-preview {
  padding: var(--cometchat-padding-2, 8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 30px;
  width: 0;
  min-width: 100px;
  cursor: pointer;
  border: none;
  border-radius: var(--cometchat-radius-1, 4px);
  box-sizing: border-box;
  gap: var(--cometchat-padding-1, 4px);
  position: relative;
  background-color: var(--cometchat-background-color-03, #f5f5f5);
  border-left: 3px solid var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-reply-preview--incoming {
  background-color: var(--cometchat-neutral-color-400, #e0e0e0);
  border-left-color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-reply-preview--outgoing {
  background: var(--cometchat-extended-primary-color-700, #4a3aa0);
  border-left-color: var(--cometchat-static-white, #fff);
}
.cometchat-message-reply-preview__title {
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  width: 100%;
  text-align: left;
  color: var(--cometchat-primary-color, #6852d6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-message-reply-preview--outgoing .cometchat-message-reply-preview__title {
  color: var(--cometchat-static-white, #fff);
}
.cometchat-message-reply-preview__subtitle {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  text-align: left;
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  overflow: hidden;
}
.cometchat-message-reply-preview--outgoing .cometchat-message-reply-preview__subtitle {
  color: var(--cometchat-static-white, #fff);
}
.cometchat-message-reply-preview__subtitle-text {
  text-align: left;
  overflow: hidden;
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.cometchat-message-reply-preview__subtitle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  border: none;
  align-self: center;
  background: var(--cometchat-icon-color-secondary, #a1a1a1);
  height: 16px;
  width: 16px;
  flex-shrink: 0;
}
.cometchat-message-reply-preview--outgoing .cometchat-message-reply-preview__subtitle-icon {
  background: var(--cometchat-static-white, #fff);
}
.cometchat-message-reply-preview__deleted {
  display: flex;
  gap: 2px;
  height: 100%;
  justify-content: left;
  width: 100%;
  color: var(--cometchat-neutral-color-600, #999);
}
.cometchat-message-reply-preview--outgoing .cometchat-message-reply-preview__deleted {
  color: var(--cometchat-static-white, #fff);
}
.cometchat-message-reply-preview__deleted-icon {
  height: 14px;
  width: 14px;
  flex: 0 0 auto;
  mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_5689_683456" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="17">%0A<rect y="0.5" width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_5689_683456)">%0A<path d="M8.001 14.8334C7.125 14.8334 6.30161 14.6672 5.53084 14.3347C4.76006 14.0023 4.08961 13.5511 3.5195 12.9812C2.94939 12.4114 2.498 11.7412 2.16534 10.9707C1.83278 10.2003 1.6665 9.37714 1.6665 8.50125C1.6665 7.62525 1.83273 6.80186 2.16517 6.03108C2.49761 5.2603 2.94878 4.58986 3.51867 4.01975C4.08856 3.44964 4.75873 2.99825 5.52917 2.66558C6.29961 2.33303 7.12278 2.16675 7.99867 2.16675C8.87467 2.16675 9.69806 2.33297 10.4688 2.66541C11.2396 2.99786 11.9101 3.44903 12.4802 4.01891C13.0503 4.5888 13.5017 5.25897 13.8343 6.02941C14.1669 6.79986 14.3332 7.62303 14.3332 8.49891C14.3332 9.37491 14.1669 10.1983 13.8345 10.9691C13.5021 11.7399 13.0509 12.4103 12.481 12.9804C11.9111 13.5505 11.2409 14.0019 10.4705 14.3346C9.70006 14.6671 8.87689 14.8334 8.001 14.8334ZM7.99984 13.8334C8.62528 13.8334 9.22761 13.7276 9.80684 13.5161C10.3859 13.3045 10.9152 12.9984 11.3947 12.5976L3.90234 5.10525C3.50578 5.58469 3.20067 6.11397 2.987 6.69308C2.77334 7.2723 2.6665 7.87464 2.6665 8.50008C2.6665 9.98897 3.18317 11.2501 4.2165 12.2834C5.24984 13.3167 6.51095 13.8334 7.99984 13.8334ZM12.0973 11.8949C12.4981 11.4155 12.8043 10.8862 13.0158 10.3071C13.2274 9.72786 13.3332 9.12553 13.3332 8.50008C13.3332 7.01119 12.8165 5.75008 11.7832 4.71675C10.7498 3.68341 9.48873 3.16675 7.99984 3.16675C7.37284 3.16675 6.76906 3.27147 6.1885 3.48091C5.60806 3.69025 5.08023 3.99747 4.605 4.40258L12.0973 11.8949Z" fill="%23A1A1A1"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_5689_683456" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="17">%0A<rect y="0.5" width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_5689_683456)">%0A<path d="M8.001 14.8334C7.125 14.8334 6.30161 14.6672 5.53084 14.3347C4.76006 14.0023 4.08961 13.5511 3.5195 12.9812C2.94939 12.4114 2.498 11.7412 2.16534 10.9707C1.83278 10.2003 1.6665 9.37714 1.6665 8.50125C1.6665 7.62525 1.83273 6.80186 2.16517 6.03108C2.49761 5.2603 2.94878 4.58986 3.51867 4.01975C4.08856 3.44964 4.75873 2.99825 5.52917 2.66558C6.29961 2.33303 7.12278 2.16675 7.99867 2.16675C8.87467 2.16675 9.69806 2.33297 10.4688 2.66541C11.2396 2.99786 11.9101 3.44903 12.4802 4.01891C13.0503 4.5888 13.5017 5.25897 13.8343 6.02941C14.1669 6.79986 14.3332 7.62303 14.3332 8.49891C14.3332 9.37491 14.1669 10.1983 13.8345 10.9691C13.5021 11.7399 13.0509 12.4103 12.481 12.9804C11.9111 13.5505 11.2409 14.0019 10.4705 14.3346C9.70006 14.6671 8.87689 14.8334 8.001 14.8334ZM7.99984 13.8334C8.62528 13.8334 9.22761 13.7276 9.80684 13.5161C10.3859 13.3045 10.9152 12.9984 11.3947 12.5976L3.90234 5.10525C3.50578 5.58469 3.20067 6.11397 2.987 6.69308C2.77334 7.2723 2.6665 7.87464 2.6665 8.50008C2.6665 9.98897 3.18317 11.2501 4.2165 12.2834C5.24984 13.3167 6.51095 13.8334 7.99984 13.8334ZM12.0973 11.8949C12.4981 11.4155 12.8043 10.8862 13.0158 10.3071C13.2274 9.72786 13.3332 9.12553 13.3332 8.50008C13.3332 7.01119 12.8165 5.75008 11.7832 4.71675C10.7498 3.68341 9.48873 3.16675 7.99984 3.16675C7.37284 3.16675 6.76906 3.27147 6.1885 3.48091C5.60806 3.69025 5.08023 3.99747 4.605 4.40258L12.0973 11.8949Z" fill="%23A1A1A1"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-neutral-color-600, #999);
}
.cometchat-message-reply-preview--outgoing .cometchat-message-reply-preview__deleted-icon {
  background: var(--cometchat-static-white, #fff);
}
.cometchat-message-reply-preview__deleted-text {
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cometchat-message-reply-preview__subtitle-icon-image {
  mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_5689_680692" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="17">%0A<rect y="0.5" width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_5689_680692)">%0A<path d="M3.53866 14.1666C3.20188 14.1666 2.91683 14.0499 2.6835 13.8166C2.45016 13.5833 2.3335 13.2982 2.3335 12.9614V4.03842C2.3335 3.70164 2.45016 3.41659 2.6835 3.18325C2.91683 2.94992 3.20188 2.83325 3.53866 2.83325H12.4617C12.7984 2.83325 13.0835 2.94992 13.3168 3.18325C13.5502 3.41659 13.6668 3.70164 13.6668 4.03842V12.9614C13.6668 13.2982 13.5502 13.5833 13.3168 13.8166C13.0835 14.0499 12.7984 14.1666 12.4617 14.1666H3.53866ZM5.10283 11.6666H10.9488C11.0694 11.6666 11.1587 11.6119 11.2168 11.5024C11.2749 11.3931 11.2659 11.2871 11.1898 11.1846L9.60016 9.05509C9.53772 8.97475 9.45738 8.93458 9.35916 8.93458C9.26083 8.93458 9.1805 8.97475 9.11816 9.05509L7.48733 11.1794L6.395 9.77942C6.33266 9.70331 6.25339 9.66525 6.15716 9.66525C6.06105 9.66525 5.98177 9.70547 5.91933 9.78592L4.86816 11.1846C4.78783 11.2871 4.77672 11.3931 4.83483 11.5024C4.89294 11.6119 4.98227 11.6666 5.10283 11.6666Z" fill="%23A1A1A1"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_5689_680692" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="17">%0A<rect y="0.5" width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_5689_680692)">%0A<path d="M3.53866 14.1666C3.20188 14.1666 2.91683 14.0499 2.6835 13.8166C2.45016 13.5833 2.3335 13.2982 2.3335 12.9614V4.03842C2.3335 3.70164 2.45016 3.41659 2.6835 3.18325C2.91683 2.94992 3.20188 2.83325 3.53866 2.83325H12.4617C12.7984 2.83325 13.0835 2.94992 13.3168 3.18325C13.5502 3.41659 13.6668 3.70164 13.6668 4.03842V12.9614C13.6668 13.2982 13.5502 13.5833 13.3168 13.8166C13.0835 14.0499 12.7984 14.1666 12.4617 14.1666H3.53866ZM5.10283 11.6666H10.9488C11.0694 11.6666 11.1587 11.6119 11.2168 11.5024C11.2749 11.3931 11.2659 11.2871 11.1898 11.1846L9.60016 9.05509C9.53772 8.97475 9.45738 8.93458 9.35916 8.93458C9.26083 8.93458 9.1805 8.97475 9.11816 9.05509L7.48733 11.1794L6.395 9.77942C6.33266 9.70331 6.25339 9.66525 6.15716 9.66525C6.06105 9.66525 5.98177 9.70547 5.91933 9.78592L4.86816 11.1846C4.78783 11.2871 4.77672 11.3931 4.83483 11.5024C4.89294 11.6119 4.98227 11.6666 5.10283 11.6666Z" fill="%23A1A1A1"/>%0A</g>%0A</svg>%0A') center center no-repeat;
}
.cometchat-message-reply-preview__subtitle-icon-video {
  mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_5689_702310" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="17">%0A<rect y="0.5" width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_5689_702310)">%0A<path d="M3.03166 13.5C2.69499 13.5 2.40999 13.3833 2.17666 13.15C1.94333 12.9167 1.82666 12.6316 1.82666 12.2948V4.70517C1.82666 4.36839 1.94333 4.08333 2.17666 3.85C2.40999 3.61667 2.69499 3.5 3.03166 3.5H10.6215C10.9582 3.5 11.2432 3.61667 11.4765 3.85C11.7098 4.08333 11.8265 4.36839 11.8265 4.70517V7.7565L13.6573 5.92567C13.7557 5.82733 13.8661 5.80278 13.9887 5.852C14.1113 5.90111 14.1727 5.99489 14.1727 6.13333V10.8667C14.1727 11.0051 14.1113 11.0989 13.9887 11.148C13.8661 11.1972 13.7557 11.1727 13.6573 11.0743L11.8265 9.2435V12.2948C11.8265 12.6316 11.7098 12.9167 11.4765 13.15C11.2432 13.3833 10.9582 13.5 10.6215 13.5H3.03166Z" fill="%23A1A1A1"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_5689_702310" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="17">%0A<rect y="0.5" width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_5689_702310)">%0A<path d="M3.03166 13.5C2.69499 13.5 2.40999 13.3833 2.17666 13.15C1.94333 12.9167 1.82666 12.6316 1.82666 12.2948V4.70517C1.82666 4.36839 1.94333 4.08333 2.17666 3.85C2.40999 3.61667 2.69499 3.5 3.03166 3.5H10.6215C10.9582 3.5 11.2432 3.61667 11.4765 3.85C11.7098 4.08333 11.8265 4.36839 11.8265 4.70517V7.7565L13.6573 5.92567C13.7557 5.82733 13.8661 5.80278 13.9887 5.852C14.1113 5.90111 14.1727 5.99489 14.1727 6.13333V10.8667C14.1727 11.0051 14.1113 11.0989 13.9887 11.148C13.8661 11.1972 13.7557 11.1727 13.6573 11.0743L11.8265 9.2435V12.2948C11.8265 12.6316 11.7098 12.9167 11.4765 13.15C11.2432 13.3833 10.9582 13.5 10.6215 13.5H3.03166Z" fill="%23A1A1A1"/>%0A</g>%0A</svg>%0A') center center no-repeat;
}
.cometchat-message-reply-preview__subtitle-icon-audio {
  mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_5689_680227" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="17">%0A<rect y="0.5" width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_5689_680227)">%0A<path d="M7.99974 9.50008C7.53397 9.50008 7.13974 9.33875 6.81708 9.01608C6.49441 8.69341 6.33308 8.29919 6.33308 7.83341V3.83341C6.33308 3.36764 6.49441 2.97341 6.81708 2.65075C7.13974 2.32808 7.53397 2.16675 7.99974 2.16675C8.46552 2.16675 8.85975 2.32808 9.18241 2.65075C9.50508 2.97341 9.66641 3.36764 9.66641 3.83341V7.83341C9.66641 8.29919 9.50508 8.69341 9.18241 9.01608C8.85975 9.33875 8.46552 9.50008 7.99974 9.50008ZM7.49974 13.8334V12.1359C6.50741 12.0214 5.65697 11.6137 4.94841 10.9129C4.23997 10.212 3.82502 9.35775 3.70358 8.35008C3.68569 8.20819 3.72286 8.08664 3.81508 7.98541C3.90741 7.88408 4.02452 7.83341 4.16641 7.83341C4.3083 7.83341 4.42708 7.88236 4.52274 7.98025C4.61852 8.07803 4.68224 8.19786 4.71391 8.33975C4.83524 9.15608 5.20852 9.8313 5.83375 10.3654C6.45897 10.8996 7.18097 11.1667 7.99974 11.1667C8.82963 11.1667 9.55441 10.8969 10.1741 10.3571C10.7937 9.81741 11.1642 9.14497 11.2856 8.33975C11.3172 8.19786 11.381 8.07803 11.4767 7.98025C11.5724 7.88236 11.6912 7.83341 11.8331 7.83341C11.975 7.83341 12.0921 7.88408 12.1844 7.98541C12.2766 8.08664 12.3138 8.20819 12.2959 8.35008C12.1745 9.33553 11.7623 10.1832 11.0594 10.8931C10.3564 11.6029 9.50319 12.0171 8.49974 12.1359V13.8334C8.49974 13.9753 8.45186 14.0941 8.35608 14.1897C8.26041 14.2855 8.14163 14.3334 7.99974 14.3334C7.85786 14.3334 7.73908 14.2855 7.64341 14.1897C7.54763 14.0941 7.49974 13.9753 7.49974 13.8334Z" fill="%23A1A1A1"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_5689_680227" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="17">%0A<rect y="0.5" width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_5689_680227)">%0A<path d="M7.99974 9.50008C7.53397 9.50008 7.13974 9.33875 6.81708 9.01608C6.49441 8.69341 6.33308 8.29919 6.33308 7.83341V3.83341C6.33308 3.36764 6.49441 2.97341 6.81708 2.65075C7.13974 2.32808 7.53397 2.16675 7.99974 2.16675C8.46552 2.16675 8.85975 2.32808 9.18241 2.65075C9.50508 2.97341 9.66641 3.36764 9.66641 3.83341V7.83341C9.66641 8.29919 9.50508 8.69341 9.18241 9.01608C8.85975 9.33875 8.46552 9.50008 7.99974 9.50008ZM7.49974 13.8334V12.1359C6.50741 12.0214 5.65697 11.6137 4.94841 10.9129C4.23997 10.212 3.82502 9.35775 3.70358 8.35008C3.68569 8.20819 3.72286 8.08664 3.81508 7.98541C3.90741 7.88408 4.02452 7.83341 4.16641 7.83341C4.3083 7.83341 4.42708 7.88236 4.52274 7.98025C4.61852 8.07803 4.68224 8.19786 4.71391 8.33975C4.83524 9.15608 5.20852 9.8313 5.83375 10.3654C6.45897 10.8996 7.18097 11.1667 7.99974 11.1667C8.82963 11.1667 9.55441 10.8969 10.1741 10.3571C10.7937 9.81741 11.1642 9.14497 11.2856 8.33975C11.3172 8.19786 11.381 8.07803 11.4767 7.98025C11.5724 7.88236 11.6912 7.83341 11.8331 7.83341C11.975 7.83341 12.0921 7.88408 12.1844 7.98541C12.2766 8.08664 12.3138 8.20819 12.2959 8.35008C12.1745 9.33553 11.7623 10.1832 11.0594 10.8931C10.3564 11.6029 9.50319 12.0171 8.49974 12.1359V13.8334C8.49974 13.9753 8.45186 14.0941 8.35608 14.1897C8.26041 14.2855 8.14163 14.3334 7.99974 14.3334C7.85786 14.3334 7.73908 14.2855 7.64341 14.1897C7.54763 14.0941 7.49974 13.9753 7.49974 13.8334Z" fill="%23A1A1A1"/>%0A</g>%0A</svg>%0A') center center no-repeat;
}
.cometchat-message-reply-preview__subtitle-icon-file {
  mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_5689_680464" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="17">%0A<rect y="0.5" width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_5689_680464)">%0A<path d="M6 12.3334H10C10.1417 12.3334 10.2604 12.2855 10.3562 12.1896C10.4521 12.0937 10.5 11.9749 10.5 11.8332C10.5 11.6915 10.4521 11.5727 10.3562 11.4771C10.2604 11.3813 10.1417 11.3334 10 11.3334H6C5.85833 11.3334 5.73961 11.3814 5.64383 11.4772C5.54794 11.5731 5.5 11.6919 5.5 11.8336C5.5 11.9754 5.54794 12.0941 5.64383 12.1897C5.73961 12.2855 5.85833 12.3334 6 12.3334ZM6 9.66675H10C10.1417 9.66675 10.2604 9.6188 10.3562 9.52291C10.4521 9.42703 10.5 9.30825 10.5 9.16658C10.5 9.0248 10.4521 8.90608 10.3562 8.81041C10.2604 8.71464 10.1417 8.66675 10 8.66675H6C5.85833 8.66675 5.73961 8.71469 5.64383 8.81058C5.54794 8.90647 5.5 9.02525 5.5 9.16691C5.5 9.30869 5.54794 9.42741 5.64383 9.52308C5.73961 9.61886 5.85833 9.66675 6 9.66675ZM4.20517 14.8334C3.86839 14.8334 3.58333 14.7167 3.35 14.4834C3.11667 14.2501 3 13.965 3 13.6282V3.37191C3 3.03514 3.11667 2.75008 3.35 2.51675C3.58333 2.28341 3.86839 2.16675 4.20517 2.16675H9.00133C9.16389 2.16675 9.31883 2.19797 9.46617 2.26041C9.6135 2.32275 9.74189 2.40864 9.85133 2.51808L12.6487 5.31541C12.7581 5.42486 12.844 5.55325 12.9063 5.70058C12.9688 5.84791 13 6.00286 13 6.16541V13.6282C13 13.965 12.8833 14.2501 12.65 14.4834C12.4167 14.7167 12.1316 14.8334 11.7948 14.8334H4.20517ZM9 5.56675C9 5.73675 9.0575 5.87925 9.1725 5.99425C9.2875 6.10925 9.43 6.16675 9.6 6.16675H12L9 3.16675V5.56675Z" fill="%23A1A1A1"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_5689_680464" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="17">%0A<rect y="0.5" width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_5689_680464)">%0A<path d="M6 12.3334H10C10.1417 12.3334 10.2604 12.2855 10.3562 12.1896C10.4521 12.0937 10.5 11.9749 10.5 11.8332C10.5 11.6915 10.4521 11.5727 10.3562 11.4771C10.2604 11.3813 10.1417 11.3334 10 11.3334H6C5.85833 11.3334 5.73961 11.3814 5.64383 11.4772C5.54794 11.5731 5.5 11.6919 5.5 11.8336C5.5 11.9754 5.54794 12.0941 5.64383 12.1897C5.73961 12.2855 5.85833 12.3334 6 12.3334ZM6 9.66675H10C10.1417 9.66675 10.2604 9.6188 10.3562 9.52291C10.4521 9.42703 10.5 9.30825 10.5 9.16658C10.5 9.0248 10.4521 8.90608 10.3562 8.81041C10.2604 8.71464 10.1417 8.66675 10 8.66675H6C5.85833 8.66675 5.73961 8.71469 5.64383 8.81058C5.54794 8.90647 5.5 9.02525 5.5 9.16691C5.5 9.30869 5.54794 9.42741 5.64383 9.52308C5.73961 9.61886 5.85833 9.66675 6 9.66675ZM4.20517 14.8334C3.86839 14.8334 3.58333 14.7167 3.35 14.4834C3.11667 14.2501 3 13.965 3 13.6282V3.37191C3 3.03514 3.11667 2.75008 3.35 2.51675C3.58333 2.28341 3.86839 2.16675 4.20517 2.16675H9.00133C9.16389 2.16675 9.31883 2.19797 9.46617 2.26041C9.6135 2.32275 9.74189 2.40864 9.85133 2.51808L12.6487 5.31541C12.7581 5.42486 12.844 5.55325 12.9063 5.70058C12.9688 5.84791 13 6.00286 13 6.16541V13.6282C13 13.965 12.8833 14.2501 12.65 14.4834C12.4167 14.7167 12.1316 14.8334 11.7948 14.8334H4.20517ZM9 5.56675C9 5.73675 9.0575 5.87925 9.1725 5.99425C9.2875 6.10925 9.43 6.16675 9.6 6.16675H12L9 3.16675V5.56675Z" fill="%23A1A1A1"/>%0A</g>%0A</svg>%0A') center center no-repeat;
}
.cometchat-message-reply-preview__subtitle-icon-poll {
  mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M11.2692 13.5C11.0985 13.5 10.9554 13.4422 10.8398 13.3267C10.7244 13.2112 10.6667 13.0681 10.6667 12.8973V10.1667C10.6667 9.996 10.7244 9.85289 10.8398 9.73733C10.9554 9.62189 11.0985 9.56417 11.2692 9.56417H12.3973C12.5681 9.56417 12.7112 9.62189 12.8267 9.73733C12.9422 9.85289 13 9.996 13 10.1667V12.8973C13 13.0681 12.9422 13.2112 12.8267 13.3267C12.7112 13.4422 12.5681 13.5 12.3973 13.5H11.2692ZM7.43583 13.5C7.26517 13.5 7.12206 13.4422 7.0065 13.3267C6.89106 13.2112 6.83333 13.0681 6.83333 12.8973V4.10267C6.83333 3.93189 6.89106 3.78878 7.0065 3.67333C7.12206 3.55778 7.26517 3.5 7.43583 3.5H8.56417C8.73483 3.5 8.87794 3.55778 8.9935 3.67333C9.10894 3.78878 9.16667 3.93189 9.16667 4.10267V12.8973C9.16667 13.0681 9.10894 13.2112 8.9935 13.3267C8.87794 13.4422 8.73483 13.5 8.56417 13.5H7.43583ZM3.60267 13.5C3.43189 13.5 3.28878 13.4422 3.17333 13.3267C3.05778 13.2112 3 13.0681 3 12.8973V7.37483C3 7.20106 3.05778 7.05667 3.17333 6.94167C3.28878 6.82678 3.43189 6.76933 3.60267 6.76933H4.73083C4.9015 6.76933 5.04461 6.82706 5.16017 6.9425C5.27561 7.05794 5.33333 7.20106 5.33333 7.37183V12.8943C5.33333 13.0682 5.27561 13.2126 5.16017 13.3275C5.04461 13.4425 4.9015 13.5 4.73083 13.5H3.60267Z" fill="%23A1A1A1"/>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M11.2692 13.5C11.0985 13.5 10.9554 13.4422 10.8398 13.3267C10.7244 13.2112 10.6667 13.0681 10.6667 12.8973V10.1667C10.6667 9.996 10.7244 9.85289 10.8398 9.73733C10.9554 9.62189 11.0985 9.56417 11.2692 9.56417H12.3973C12.5681 9.56417 12.7112 9.62189 12.8267 9.73733C12.9422 9.85289 13 9.996 13 10.1667V12.8973C13 13.0681 12.9422 13.2112 12.8267 13.3267C12.7112 13.4422 12.5681 13.5 12.3973 13.5H11.2692ZM7.43583 13.5C7.26517 13.5 7.12206 13.4422 7.0065 13.3267C6.89106 13.2112 6.83333 13.0681 6.83333 12.8973V4.10267C6.83333 3.93189 6.89106 3.78878 7.0065 3.67333C7.12206 3.55778 7.26517 3.5 7.43583 3.5H8.56417C8.73483 3.5 8.87794 3.55778 8.9935 3.67333C9.10894 3.78878 9.16667 3.93189 9.16667 4.10267V12.8973C9.16667 13.0681 9.10894 13.2112 8.9935 13.3267C8.87794 13.4422 8.73483 13.5 8.56417 13.5H7.43583ZM3.60267 13.5C3.43189 13.5 3.28878 13.4422 3.17333 13.3267C3.05778 13.2112 3 13.0681 3 12.8973V7.37483C3 7.20106 3.05778 7.05667 3.17333 6.94167C3.28878 6.82678 3.43189 6.76933 3.60267 6.76933H4.73083C4.9015 6.76933 5.04461 6.82706 5.16017 6.9425C5.27561 7.05794 5.33333 7.20106 5.33333 7.37183V12.8943C5.33333 13.0682 5.27561 13.2126 5.16017 13.3275C5.04461 13.4425 4.9015 13.5 4.73083 13.5H3.60267Z" fill="%23A1A1A1"/>%0A</svg>%0A') center center no-repeat;
}
.cometchat-message-reply-preview__subtitle-icon-sticker {
  mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M2.6665 12.4112V4.58897C2.6665 3.8035 3.30325 3.16675 4.08873 3.16675H11.9109C12.6964 3.16675 13.3332 3.8035 13.3332 4.58897V8.85564H11.1998C9.82526 8.85564 8.71095 9.96995 8.71095 11.3445V13.8334H4.08873C3.30325 13.8334 2.6665 13.1967 2.6665 12.4112Z" fill="%23A1A1A1"/>%0A<path d="M13.3128 9.56675H11.1998C10.218 9.56675 9.42206 10.3627 9.42206 11.3445V13.8334H9.44999L13.3128 9.56675Z" fill="%23A1A1A1"/>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M2.6665 12.4112V4.58897C2.6665 3.8035 3.30325 3.16675 4.08873 3.16675H11.9109C12.6964 3.16675 13.3332 3.8035 13.3332 4.58897V8.85564H11.1998C9.82526 8.85564 8.71095 9.96995 8.71095 11.3445V13.8334H4.08873C3.30325 13.8334 2.6665 13.1967 2.6665 12.4112Z" fill="%23A1A1A1"/>%0A<path d="M13.3128 9.56675H11.1998C10.218 9.56675 9.42206 10.3627 9.42206 11.3445V13.8334H9.44999L13.3128 9.56675Z" fill="%23A1A1A1"/>%0A</svg>%0A') center center no-repeat;
}
.cometchat-message-reply-preview__subtitle-icon-collaborative-document {
  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 fill-rule="evenodd" clip-rule="evenodd" d="M2 4.14748C2 2.40917 3.40918 1 5.14749 1H15.8489C17.5873 1 18.9964 2.40918 18.9964 4.14749V9.5388C18.9964 9.70329 18.932 9.86125 18.8171 9.97886L14.75 14.1389L8.93259 19.7101C8.81541 19.8223 8.65943 19.8849 8.49719 19.8849H5.14749C3.40918 19.8849 2 18.4757 2 16.7374V4.14748ZM9.2393 3.95166C8.783 3.95166 8.41309 4.32157 8.41309 4.77788C8.41309 5.23418 8.783 5.60409 9.2393 5.60409H15.2195C15.6758 5.60409 16.0457 5.23418 16.0457 4.77788C16.0457 4.32157 15.6758 3.95166 15.2195 3.95166H9.2393ZM5.77641 7.41455C5.3201 7.41455 4.9502 7.78446 4.9502 8.24077C4.9502 8.69707 5.3201 9.06698 5.77641 9.06698H15.2189C15.6752 9.06698 16.0451 8.69707 16.0451 8.24077C16.0451 7.78446 15.6752 7.41455 15.2189 7.41455H5.77641ZM5.77641 10.876C5.3201 10.876 4.9502 11.2459 4.9502 11.7022C4.9502 12.1585 5.3201 12.5284 5.77641 12.5284H13.3304C13.7867 12.5284 14.1566 12.1585 14.1566 11.7022C14.1566 11.2459 13.7867 10.876 13.3304 10.876H5.77641Z" fill="%23141414"/>%0A<path d="M21.1275 11.3341C20.6359 10.8424 19.8387 10.8424 19.3471 11.3341L11.4128 19.2684C11.3622 19.319 11.3294 19.3846 11.3193 19.4553L10.9521 22.0259C10.9209 22.244 11.1079 22.431 11.326 22.3998L13.8965 22.0326C13.9673 22.0225 14.0329 21.9897 14.0835 21.9391L22.0178 14.0048C22.5095 13.5132 22.5095 12.716 22.0178 12.2243L21.1275 11.3341Z" fill="%23141414"/>%0A</svg>%0A') center center 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<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.14748C2 2.40917 3.40918 1 5.14749 1H15.8489C17.5873 1 18.9964 2.40918 18.9964 4.14749V9.5388C18.9964 9.70329 18.932 9.86125 18.8171 9.97886L14.75 14.1389L8.93259 19.7101C8.81541 19.8223 8.65943 19.8849 8.49719 19.8849H5.14749C3.40918 19.8849 2 18.4757 2 16.7374V4.14748ZM9.2393 3.95166C8.783 3.95166 8.41309 4.32157 8.41309 4.77788C8.41309 5.23418 8.783 5.60409 9.2393 5.60409H15.2195C15.6758 5.60409 16.0457 5.23418 16.0457 4.77788C16.0457 4.32157 15.6758 3.95166 15.2195 3.95166H9.2393ZM5.77641 7.41455C5.3201 7.41455 4.9502 7.78446 4.9502 8.24077C4.9502 8.69707 5.3201 9.06698 5.77641 9.06698H15.2189C15.6752 9.06698 16.0451 8.69707 16.0451 8.24077C16.0451 7.78446 15.6752 7.41455 15.2189 7.41455H5.77641ZM5.77641 10.876C5.3201 10.876 4.9502 11.2459 4.9502 11.7022C4.9502 12.1585 5.3201 12.5284 5.77641 12.5284H13.3304C13.7867 12.5284 14.1566 12.1585 14.1566 11.7022C14.1566 11.2459 13.7867 10.876 13.3304 10.876H5.77641Z" fill="%23141414"/>%0A<path d="M21.1275 11.3341C20.6359 10.8424 19.8387 10.8424 19.3471 11.3341L11.4128 19.2684C11.3622 19.319 11.3294 19.3846 11.3193 19.4553L10.9521 22.0259C10.9209 22.244 11.1079 22.431 11.326 22.3998L13.8965 22.0326C13.9673 22.0225 14.0329 21.9897 14.0835 21.9391L22.0178 14.0048C22.5095 13.5132 22.5095 12.716 22.0178 12.2243L21.1275 11.3341Z" fill="%23141414"/>%0A</svg>%0A') center center no-repeat;
}
.cometchat-message-reply-preview__subtitle-icon-collaborative-whiteboard {
  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<rect width="24" height="24" fill="white" fill-opacity="0.11"/>%0A<path d="M19.4679 4H20.24C21.135 4 21.887 4.61242 22.0998 5.44108L16.6916 10.8492C16.6549 10.886 16.6073 10.9098 16.5559 10.9171L14.576 11.2C14.4176 11.2226 14.2818 11.0868 14.3044 10.9284L14.5873 8.94854C14.5946 8.89713 14.6184 8.84949 14.6552 8.81277L19.4679 4Z" fill="%23141414"/>%0A<path d="M17.3466 4L13.5945 7.75211C13.3283 8.01833 13.1556 8.3637 13.1024 8.7364L12.8195 10.7163C12.6555 11.8646 13.6397 12.8489 14.7881 12.6849L16.768 12.402C17.1407 12.3488 17.4861 12.1761 17.7523 11.9099L22.16 7.50218V17.92C22.16 18.9804 21.3004 19.84 20.24 19.84H3.92C2.85962 19.84 2 18.9804 2 17.92V14.03C2.13801 14.0301 2.27769 13.9922 2.40275 13.9126L2.58606 13.7959C3.58623 13.1593 5.7211 11.8003 6.3322 11.4511C6.43421 11.3928 6.63006 11.3244 6.87351 11.298C7.11445 11.2719 7.33773 11.2938 7.5019 11.354C7.65327 11.4095 7.73091 11.4857 7.77426 11.5815C7.82369 11.6908 7.8772 11.9357 7.75398 12.4121C7.51412 13.3396 7.26658 14.4095 7.33946 15.3038C7.37704 15.765 7.50392 16.2502 7.82249 16.6542C8.15314 17.0735 8.62627 17.3246 9.19678 17.4197C10.3338 17.6092 11.3768 16.938 12.107 16.3036C12.8753 15.6361 13.5146 14.8173 13.8801 14.3299C14.1286 13.9985 14.0615 13.5284 13.7301 13.2799C13.3987 13.0314 12.9286 13.0985 12.6801 13.4299C12.3256 13.9025 11.7649 14.6137 11.1232 15.1712C10.4434 15.7619 9.86635 16.0106 9.4434 15.9401C9.17392 15.8952 9.06101 15.8023 9.00036 15.7254C8.92763 15.6332 8.85796 15.4699 8.8345 15.182C8.78531 14.5784 8.95777 13.7483 9.2062 12.7877C9.38299 12.1041 9.37649 11.484 9.14093 10.9633C8.89928 10.4291 8.46692 10.1102 8.01829 9.94573C7.58246 9.78593 7.11574 9.76292 6.71167 9.80677C6.31013 9.85035 5.90598 9.967 5.58799 10.1487C4.98422 10.4937 3.05774 11.7176 2 12.3909V5.92C2 4.85961 2.85961 4 3.92 4H17.3466Z" fill="%23141414"/>%0A</svg>%0A') center center 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<rect width="24" height="24" fill="white" fill-opacity="0.11"/>%0A<path d="M19.4679 4H20.24C21.135 4 21.887 4.61242 22.0998 5.44108L16.6916 10.8492C16.6549 10.886 16.6073 10.9098 16.5559 10.9171L14.576 11.2C14.4176 11.2226 14.2818 11.0868 14.3044 10.9284L14.5873 8.94854C14.5946 8.89713 14.6184 8.84949 14.6552 8.81277L19.4679 4Z" fill="%23141414"/>%0A<path d="M17.3466 4L13.5945 7.75211C13.3283 8.01833 13.1556 8.3637 13.1024 8.7364L12.8195 10.7163C12.6555 11.8646 13.6397 12.8489 14.7881 12.6849L16.768 12.402C17.1407 12.3488 17.4861 12.1761 17.7523 11.9099L22.16 7.50218V17.92C22.16 18.9804 21.3004 19.84 20.24 19.84H3.92C2.85962 19.84 2 18.9804 2 17.92V14.03C2.13801 14.0301 2.27769 13.9922 2.40275 13.9126L2.58606 13.7959C3.58623 13.1593 5.7211 11.8003 6.3322 11.4511C6.43421 11.3928 6.63006 11.3244 6.87351 11.298C7.11445 11.2719 7.33773 11.2938 7.5019 11.354C7.65327 11.4095 7.73091 11.4857 7.77426 11.5815C7.82369 11.6908 7.8772 11.9357 7.75398 12.4121C7.51412 13.3396 7.26658 14.4095 7.33946 15.3038C7.37704 15.765 7.50392 16.2502 7.82249 16.6542C8.15314 17.0735 8.62627 17.3246 9.19678 17.4197C10.3338 17.6092 11.3768 16.938 12.107 16.3036C12.8753 15.6361 13.5146 14.8173 13.8801 14.3299C14.1286 13.9985 14.0615 13.5284 13.7301 13.2799C13.3987 13.0314 12.9286 13.0985 12.6801 13.4299C12.3256 13.9025 11.7649 14.6137 11.1232 15.1712C10.4434 15.7619 9.86635 16.0106 9.4434 15.9401C9.17392 15.8952 9.06101 15.8023 9.00036 15.7254C8.92763 15.6332 8.85796 15.4699 8.8345 15.182C8.78531 14.5784 8.95777 13.7483 9.2062 12.7877C9.38299 12.1041 9.37649 11.484 9.14093 10.9633C8.89928 10.4291 8.46692 10.1102 8.01829 9.94573C7.58246 9.78593 7.11574 9.76292 6.71167 9.80677C6.31013 9.85035 5.90598 9.967 5.58799 10.1487C4.98422 10.4937 3.05774 11.7176 2 12.3909V5.92C2 4.85961 2.85961 4 3.92 4H17.3466Z" fill="%23141414"/>%0A</svg>%0A') center center no-repeat;
}
.cometchat-message-reply-preview__subtitle-icon-unsupported {
  mask: url('data:image/svg+xml,<svg width="22" height="27" viewBox="0 0 22 27" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M21.5996 6.66895V24.5361C21.5995 25.7142 20.6449 26.6689 19.4668 26.6689H2.13379C0.955654 26.6689 0.000105137 25.7142 0 24.5361V2.13574C0.000106552 0.957623 0.955645 0.00292969 2.13379 0.00292969H14.9336L21.5996 6.66895ZM10.1338 19V20.333H11.4668V19H10.1338ZM10.8672 9.66699C10.4005 9.66699 9.99961 9.73291 9.59961 9.86621C9.13322 9.9996 8.79999 10.2 8.4668 10.5332C8.1335 10.7999 7.8667 11.1335 7.7334 11.4668C7.60002 11.8002 7.4668 12.3334 7.4668 13H8.7998C8.79982 11.6667 9.46671 10.7335 10.7998 10.7334C11.3998 10.7334 11.8669 10.9333 12.2002 11.2666C12.5336 11.6 12.7334 11.9337 12.7334 12.4004C12.7333 12.8668 12.6001 13.2004 12.4668 13.4004C12.3334 13.6004 11.9996 13.9339 11.5332 14.4004C11.0667 14.8668 10.8669 15.2003 10.667 15.4668C10.4671 15.7334 10.3333 15.9998 10.2666 16.333C10.1999 16.6663 10.1338 17.0004 10.1338 17.667H11.4668C11.4668 17.0004 11.3998 16.7999 11.5332 16.5332C11.6665 16.2665 11.7336 15.9998 11.9336 15.7998C12.1335 15.5998 12.334 15.2663 12.8672 14.7998C13.4003 14.3332 13.7339 13.9328 13.8672 13.5996C14.0004 13.2664 14.1338 12.933 14.1338 12.5332C14.1338 11.6666 13.8001 11.0001 13.2002 10.4668C12.5337 9.93357 11.8003 9.66707 10.8672 9.66699Z" fill="%23CCCCCC"/>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="22" height="27" viewBox="0 0 22 27" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M21.5996 6.66895V24.5361C21.5995 25.7142 20.6449 26.6689 19.4668 26.6689H2.13379C0.955654 26.6689 0.000105137 25.7142 0 24.5361V2.13574C0.000106552 0.957623 0.955645 0.00292969 2.13379 0.00292969H14.9336L21.5996 6.66895ZM10.1338 19V20.333H11.4668V19H10.1338ZM10.8672 9.66699C10.4005 9.66699 9.99961 9.73291 9.59961 9.86621C9.13322 9.9996 8.79999 10.2 8.4668 10.5332C8.1335 10.7999 7.8667 11.1335 7.7334 11.4668C7.60002 11.8002 7.4668 12.3334 7.4668 13H8.7998C8.79982 11.6667 9.46671 10.7335 10.7998 10.7334C11.3998 10.7334 11.8669 10.9333 12.2002 11.2666C12.5336 11.6 12.7334 11.9337 12.7334 12.4004C12.7333 12.8668 12.6001 13.2004 12.4668 13.4004C12.3334 13.6004 11.9996 13.9339 11.5332 14.4004C11.0667 14.8668 10.8669 15.2003 10.667 15.4668C10.4671 15.7334 10.3333 15.9998 10.2666 16.333C10.1999 16.6663 10.1338 17.0004 10.1338 17.667H11.4668C11.4668 17.0004 11.3998 16.7999 11.5332 16.5332C11.6665 16.2665 11.7336 15.9998 11.9336 15.7998C12.1335 15.5998 12.334 15.2663 12.8672 14.7998C13.4003 14.3332 13.7339 13.9328 13.8672 13.5996C14.0004 13.2664 14.1338 12.933 14.1338 12.5332C14.1338 11.6666 13.8001 11.0001 13.2002 10.4668C12.5337 9.93357 11.8003 9.66707 10.8672 9.66699Z" fill="%23CCCCCC"/>%0A</svg>%0A') center center no-repeat;
}

/* src/components/base/CometChatModerationView/CometChatModerationView.css */
.cometchat-moderation-view {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--cometchat-spacing-2, 4px);
  padding: var(--cometchat-padding-2, 4px) var(--cometchat-padding-2, 8px);
  background: var(--cometchat-error-color-90, rgba(244, 67, 54, 0.08));
  border-radius: 0 0 var(--cometchat-radius-3, 12px) var(--cometchat-radius-3, 12px);
  min-width: 240px;
  box-sizing: border-box;
}
.cometchat-moderation-view__icon {
  flex: 0 0 auto;
  min-width: 16px;
  min-height: 16px;
  width: 16px;
  height: 16px;
  background-color: var(--cometchat-error-color, #f44336);
  mask: 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<mask id="mask0_11824_20768" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">%0A<rect width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_11824_20768)">%0A<path d="M2.28303 13.6667C2.17003 13.6667 2.06853 13.639 1.97853 13.5838C1.88853 13.5286 1.81858 13.4558 1.7687 13.3653C1.7167 13.2755 1.68808 13.1783 1.68286 13.0737C1.67764 12.969 1.70586 12.8653 1.76753 12.7627L7.4747 2.90399C7.53647 2.80133 7.6137 2.72544 7.70636 2.67633C7.79914 2.62722 7.89681 2.60266 7.99936 2.60266C8.10192 2.60266 8.19958 2.62722 8.29236 2.67633C8.38503 2.72544 8.46225 2.80133 8.52403 2.90399L14.2312 12.7627C14.2929 12.8653 14.3211 12.969 14.3159 13.0737C14.3106 13.1783 14.282 13.2755 14.23 13.3653C14.1801 13.4558 14.1102 13.5286 14.0202 13.5838C13.9302 13.639 13.8287 13.6667 13.7157 13.6667H2.28303ZM7.99936 11.8718C8.15192 11.8718 8.27981 11.8202 8.38303 11.717C8.48625 11.6138 8.53786 11.4859 8.53786 11.3333C8.53786 11.1808 8.48625 11.0529 8.38303 10.9497C8.27981 10.8464 8.15192 10.7948 7.99936 10.7948C7.84681 10.7948 7.71892 10.8464 7.6157 10.9497C7.51247 11.0529 7.46086 11.1808 7.46086 11.3333C7.46086 11.4859 7.51247 11.6138 7.6157 11.717C7.71892 11.8202 7.84681 11.8718 7.99936 11.8718ZM7.99953 10.1282C8.14131 10.1282 8.26003 10.0803 8.3557 9.98449C8.45147 9.88861 8.49936 9.76983 8.49936 9.62816V7.29483C8.49936 7.15316 8.45142 7.03444 8.35553 6.93866C8.25964 6.84277 8.14086 6.79483 7.9992 6.79483C7.85742 6.79483 7.7387 6.84277 7.64303 6.93866C7.54725 7.03444 7.49936 7.15316 7.49936 7.29483V9.62816C7.49936 9.76983 7.54731 9.88861 7.6432 9.98449C7.73908 10.0803 7.85786 10.1282 7.99953 10.1282Z" fill="%23F44649"/>%0A</g>%0A</svg>%0A') center / contain no-repeat;
  -webkit-mask: 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<mask id="mask0_11824_20768" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">%0A<rect width="16" height="16" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_11824_20768)">%0A<path d="M2.28303 13.6667C2.17003 13.6667 2.06853 13.639 1.97853 13.5838C1.88853 13.5286 1.81858 13.4558 1.7687 13.3653C1.7167 13.2755 1.68808 13.1783 1.68286 13.0737C1.67764 12.969 1.70586 12.8653 1.76753 12.7627L7.4747 2.90399C7.53647 2.80133 7.6137 2.72544 7.70636 2.67633C7.79914 2.62722 7.89681 2.60266 7.99936 2.60266C8.10192 2.60266 8.19958 2.62722 8.29236 2.67633C8.38503 2.72544 8.46225 2.80133 8.52403 2.90399L14.2312 12.7627C14.2929 12.8653 14.3211 12.969 14.3159 13.0737C14.3106 13.1783 14.282 13.2755 14.23 13.3653C14.1801 13.4558 14.1102 13.5286 14.0202 13.5838C13.9302 13.639 13.8287 13.6667 13.7157 13.6667H2.28303ZM7.99936 11.8718C8.15192 11.8718 8.27981 11.8202 8.38303 11.717C8.48625 11.6138 8.53786 11.4859 8.53786 11.3333C8.53786 11.1808 8.48625 11.0529 8.38303 10.9497C8.27981 10.8464 8.15192 10.7948 7.99936 10.7948C7.84681 10.7948 7.71892 10.8464 7.6157 10.9497C7.51247 11.0529 7.46086 11.1808 7.46086 11.3333C7.46086 11.4859 7.51247 11.6138 7.6157 11.717C7.71892 11.8202 7.84681 11.8718 7.99936 11.8718ZM7.99953 10.1282C8.14131 10.1282 8.26003 10.0803 8.3557 9.98449C8.45147 9.88861 8.49936 9.76983 8.49936 9.62816V7.29483C8.49936 7.15316 8.45142 7.03444 8.35553 6.93866C8.25964 6.84277 8.14086 6.79483 7.9992 6.79483C7.85742 6.79483 7.7387 6.84277 7.64303 6.93866C7.54725 7.03444 7.49936 7.15316 7.49936 7.29483V9.62816C7.49936 9.76983 7.54731 9.88861 7.6432 9.98449C7.73908 10.0803 7.85786 10.1282 7.99953 10.1282Z" fill="%23F44649"/>%0A</g>%0A</svg>%0A') center / contain no-repeat;
  display: inline-block;
}
.cometchat-moderation-view__message {
  margin: 0;
  text-align: left;
  font: var(--cometchat-font-body-regular, 400 14px / 17px Roboto);
  color: var(--cometchat-error-color, #f44336);
  word-break: break-word;
}

/* src/components/base/CometChatConfirmDialog/CometChatConfirmDialog.css */
.cometchat-confirm-dialog__backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cometchat-overlay-background-heavy, rgba(0, 0, 0, 0.6));
  z-index: 1000;
}
.cometchat-confirm-dialog {
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 400px;
  padding: var(--cometchat-padding-6, 24px) var(--cometchat-padding-6, 24px) var(--cometchat-padding-3, 12px) var(--cometchat-padding-6, 24px);
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-spacing-3, 12px);
  border-radius: var(--cometchat-radius-4, 16px);
  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);
  overflow: hidden;
}
.cometchat-confirm-dialog:focus,
.cometchat-confirm-dialog:focus-visible {
  outline: none;
}
.cometchat-confirm-dialog__icon {
  display: flex;
  width: 80px;
  height: 80px;
  padding: var(--cometchat-padding-4, 16px);
  justify-content: center;
  align-items: center;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-background-color-02, #f5f5f5);
  flex-shrink: 0;
}
.cometchat-confirm-dialog__icon-default {
  height: 48px;
  width: 48px;
  display: block;
  object-fit: contain;
}
.cometchat-confirm-dialog__icon--danger .cometchat-confirm-dialog__icon-default {
  filter: brightness(0) saturate(100%) invert(38%) sepia(82%) saturate(2000%) hue-rotate(335deg) brightness(95%) contrast(97%);
}
.cometchat-confirm-dialog__icon--warning .cometchat-confirm-dialog__icon-default {
  filter: brightness(0) saturate(100%) invert(65%) sepia(63%) saturate(500%) hue-rotate(5deg) brightness(100%) contrast(95%);
}
.cometchat-confirm-dialog__icon--info .cometchat-confirm-dialog__icon-default {
  filter: brightness(0) saturate(100%) invert(45%) sepia(80%) saturate(1500%) hue-rotate(190deg) brightness(100%) contrast(95%);
}
.cometchat-confirm-dialog__content {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing, 4px);
}
.cometchat-confirm-dialog__content-title {
  color: var(--cometchat-text-color-primary, #141414);
  text-align: center;
  font: var(--cometchat-font-heading2-medium, 500 20px Roboto);
  font-style: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
.cometchat-confirm-dialog__content-message {
  width: 100%;
  color: var(--cometchat-text-color-secondary, #8a8a8a);
  text-align: center;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  font-style: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
.cometchat-confirm-dialog__actions {
  display: flex;
  padding: var(--cometchat-padding-3, 12px) 0;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
  align-self: stretch;
  width: 100%;
}
.cometchat-confirm-dialog__actions-cancel {
  flex: 1;
  min-width: 0;
  display: flex;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: var(--cometchat-radius-2, 8px);
}
.cometchat-confirm-dialog__actions-cancel button {
  width: 100%;
  height: 100%;
  border: 1px solid var(--cometchat-border-color-dark, #d1d1d1);
  background: var(--cometchat-background-color-01, #fff) !important;
  color: var(--cometchat-text-color-primary, #141414);
  border-radius: var(--cometchat-radius-2, 8px);
  font: var(--cometchat-font-button-medium, 500 14px Roboto);
  cursor: pointer;
}
.cometchat-confirm-dialog__actions-cancel button:hover,
.cometchat-confirm-dialog__actions-cancel button:hover:not(:disabled),
.cometchat-confirm-dialog__actions-cancel button:active {
  background: var(--cometchat-background-color-01, #fff) !important;
}
.cometchat-confirm-dialog__actions-confirm {
  flex: 1;
  min-width: 0;
  display: flex;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: var(--cometchat-radius-2, 8px);
}
.cometchat-confirm-dialog__actions-confirm button {
  width: 100%;
  height: 100%;
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  border-radius: var(--cometchat-radius-2, 8px);
  font: var(--cometchat-font-button-medium, 500 14px Roboto);
  cursor: pointer;
}
.cometchat-confirm-dialog__actions-confirm--danger button {
  background: var(--cometchat-error-color, #f44649) !important;
  color: var(--cometchat-static-white, #fff);
}
.cometchat-confirm-dialog__actions-confirm--danger button:hover,
.cometchat-confirm-dialog__actions-confirm--danger button:hover:not(:disabled) {
  background: var(--cometchat-error-color, #f44649) !important;
}
.cometchat-confirm-dialog__actions-confirm--warning button {
  background: var(--cometchat-warning-color, #f5a623) !important;
  color: var(--cometchat-static-white, #fff);
}
.cometchat-confirm-dialog__actions-confirm--warning button:hover,
.cometchat-confirm-dialog__actions-confirm--warning button:hover:not(:disabled) {
  background: var(--cometchat-warning-color, #f5a623) !important;
}
.cometchat-confirm-dialog__actions-confirm--info button {
  background: var(--cometchat-primary-color, #3399ff) !important;
  color: var(--cometchat-static-white, #fff);
}
.cometchat-confirm-dialog__actions-confirm--info button:hover,
.cometchat-confirm-dialog__actions-confirm--info button:hover:not(:disabled) {
  background: var(--cometchat-primary-color, #3399ff) !important;
}
.cometchat-confirm-dialog__actions-confirm--loading button {
  opacity: 0.7;
  cursor: not-allowed;
}
.cometchat-confirm-dialog__error {
  border-radius: var(--cometchat-radius-4, 12px) var(--cometchat-radius-4, 12px) 0 0;
  background:
    linear-gradient(
      0deg,
      rgba(244, 70, 73, 0.1) 0%,
      rgba(244, 70, 73, 0.1) 100%),
    var(--cometchat-background-color-01, #fff);
  overflow: hidden;
  color: var(--cometchat-error-color, #f44649);
  text-overflow: ellipsis;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  font-style: normal;
  display: flex;
  width: 100%;
  padding: var(--cometchat-padding-2, 8px);
  align-items: flex-start;
  height: 48px;
  justify-content: center;
}
.cometchat-confirm-dialog__actions-cancel button:focus-visible,
.cometchat-confirm-dialog__actions-confirm button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-confirm-dialog__backdrop,
  .cometchat-confirm-dialog {
    animation: none;
    transition: none;
  }
}

/* src/components/base/CometChatButton/CometChatButton.css */
.cometchat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cometchat-padding-1, 4px);
  border: none;
  border-radius: var(--cometchat-radius-2, 8px);
  cursor: pointer;
  font: inherit;
  line-height: 120%;
  box-sizing: border-box;
  position: relative;
  transition: background 150ms ease;
}
.cometchat-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-button--primary {
  background: var(--cometchat-primary-button-background, #6852d6);
  color: var(--cometchat-static-white, #fff);
}
.cometchat-button--primary:hover:not(:disabled) {
  background: var(--cometchat-extended-primary-color-800, #7a6bd6);
}
.cometchat-button--primary:active:not(:disabled) {
  background: var(--cometchat-extended-primary-color-900, #5d49be);
}
.cometchat-button--secondary {
  background: transparent;
  color: var(--cometchat-text-color-primary, #141414);
  border: 1px solid var(--cometchat-border-color-default, #e8e8e8);
}
.cometchat-button--secondary:hover:not(:disabled) {
  background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-button--secondary:active:not(:disabled) {
  background: var(--cometchat-white-pressed, rgba(0, 0, 0, 0.08));
}
.cometchat-button--ghost {
  background: transparent;
  color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-button--ghost:hover:not(:disabled) {
  background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-button--ghost:active:not(:disabled) {
  background: var(--cometchat-white-pressed, rgba(0, 0, 0, 0.08));
}
.cometchat-button--sm {
  height: 32px;
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-3, 12px);
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
}
.cometchat-button--md {
  height: 40px;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
  font: var(--cometchat-font-button-medium, 500 14px Roboto);
}
.cometchat-button--lg {
  height: 48px;
  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-6, 24px);
  font: var(--cometchat-font-heading4-medium, 500 16px Roboto);
}
.cometchat-button--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cometchat-button--loading {
  cursor: wait;
}
.cometchat-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cometchat-button__icon--sm {
  width: 16px;
  height: 16px;
}
.cometchat-button__icon--md {
  width: 20px;
  height: 20px;
}
.cometchat-button__icon--lg {
  width: 24px;
  height: 24px;
}
.cometchat-button__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-button__spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--cometchat-radius-max, 9999px);
  animation: cometchat-button-spin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-button__spinner {
    animation-duration: 1.5s;
  }
}
@keyframes cometchat-button-spin {
  to {
    transform: rotate(360deg);
  }
}
.cometchat-button__content--hidden {
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

/* src/components/CometChatFlagMessageDialog/CometChatFlagMessageDialog.css */
.cometchat-flag-message-dialog__backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--cometchat-overlay-background-heavy, rgba(0, 0, 0, 0.6));
  z-index: 1000;
}
.cometchat-flag-message-dialog {
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 400px;
  padding: var(--cometchat-padding-4, 16px);
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-spacing-3, 12px);
  border-radius: var(--cometchat-radius-4, 16px);
  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);
  overflow: hidden;
}
.cometchat-flag-message-dialog:focus,
.cometchat-flag-message-dialog:focus-visible {
  outline: none;
}
.cometchat-flag-message-dialog__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cometchat-spacing-1, 4px);
  width: 100%;
  padding-bottom: var(--cometchat-padding-3, 12px);
  border-bottom: 1px solid var(--cometchat-border-color-light, #f5f5f5);
}
.cometchat-flag-message-dialog__header-title {
  color: var(--cometchat-text-color-primary, #141414);
  text-align: left;
  font: var(--cometchat-font-heading2-medium, 500 20px Roboto);
  font-style: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
.cometchat-flag-message-dialog__header-subtitle {
  width: 100%;
  color: var(--cometchat-text-color-secondary, #727272);
  text-align: left;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  font-style: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
.cometchat-flag-message-dialog__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cometchat-spacing-2, 8px);
  width: 100%;
  padding: var(--cometchat-padding-2, 8px) 0;
}
.cometchat-flag-message-dialog__reasons:focus,
.cometchat-flag-message-dialog__reasons:focus-visible {
  outline: none;
}
.cometchat-flag-message-dialog__reasons-loading {
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  text-align: center;
  padding: var(--cometchat-padding-3, 12px);
  width: 100%;
}
.cometchat-flag-message-dialog__reason {
  display: inline-flex;
  align-items: center;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  border-radius: var(--cometchat-radius-max, 1000px);
  border: 1px solid var(--cometchat-border-color-dark, #d1d1d1);
  background: var(--cometchat-background-color-01, #fff);
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  cursor: pointer;
  white-space: nowrap;
}
.cometchat-flag-message-dialog__reason:hover {
  background: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-flag-message-dialog__reason--selected {
  border-color: var(--cometchat-primary-color, #6852d6);
  background: var(--cometchat-extended-primary-color-50, #f0edff);
  color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-flag-message-dialog__reason:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-flag-message-dialog__remark {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-1, 4px);
  width: 100%;
}
.cometchat-flag-message-dialog__remark-label {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-1, 4px);
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
}
.cometchat-flag-message-dialog__remark-label span {
  color: var(--cometchat-text-color-tertiary, #b8b8b8);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
}
.cometchat-flag-message-dialog__remark-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
  border-radius: var(--cometchat-radius-2, 8px);
  border: 1px solid var(--cometchat-border-color-default, #d1d1d1);
  background: var(--cometchat-background-color-01, #fff);
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  resize: none;
}
.cometchat-flag-message-dialog__remark-input::placeholder {
  color: var(--cometchat-text-color-tertiary, #b8b8b8);
}
.cometchat-flag-message-dialog__remark-input:focus {
  outline: none;
  border-color: var(--cometchat-primary-color, #6852d6);
  box-shadow: 0 0 0 2px rgba(104, 82, 214, 0.1);
}
.cometchat-flag-message-dialog__remark-input:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: -2px;
}
.cometchat-flag-message-dialog__remark-counter {
  color: var(--cometchat-text-color-tertiary, #b8b8b8);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  text-align: left;
}
.cometchat-flag-message-dialog__remark-counter--limit {
  color: var(--cometchat-error-color, #f44336);
}
.cometchat-flag-message-dialog__error {
  width: 100%;
  max-width: 400px;
  border-radius: var(--cometchat-radius-4, 12px) var(--cometchat-radius-4, 12px) 0 0;
  background:
    linear-gradient(
      0deg,
      rgba(255, 171, 0, 0.1) 0%,
      rgba(255, 171, 0, 0.1) 100%),
    var(--cometchat-background-color-01, #fff);
  color: var(--cometchat-warning-color, #ffab00);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  padding: var(--cometchat-padding-2, 8px);
  display: flex;
  height: 48px;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  margin-bottom: -16px;
}
.cometchat-flag-message-dialog__actions {
  display: flex;
  padding: var(--cometchat-padding-3, 12px) 0;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
  align-self: stretch;
  width: 100%;
}
.cometchat-flag-message-dialog__actions-cancel {
  flex: 1;
  min-width: 0;
  display: flex;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: var(--cometchat-radius-2, 8px);
}
.cometchat-flag-message-dialog__actions-cancel button {
  width: 100%;
  height: 100%;
  border: 1px solid var(--cometchat-border-color-dark, #d1d1d1);
  background: var(--cometchat-background-color-01, #fff);
  color: var(--cometchat-text-color-primary, #141414);
  border-radius: var(--cometchat-radius-2, 8px);
  font: var(--cometchat-font-button-medium, 500 14px Roboto);
  cursor: pointer;
}
.cometchat-flag-message-dialog__actions-cancel button:hover {
  background: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-flag-message-dialog__actions-cancel button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-flag-message-dialog__actions-submit {
  flex: 1;
  min-width: 0;
  display: flex;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: var(--cometchat-radius-2, 8px);
}
.cometchat-flag-message-dialog__actions-submit button {
  width: 100%;
  height: 100%;
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  border-radius: var(--cometchat-radius-2, 8px);
  background: var(--cometchat-primary-color, #6852d6);
  color: var(--cometchat-static-white, #fff);
  font: var(--cometchat-font-button-medium, 500 14px Roboto);
  cursor: pointer;
}
.cometchat-flag-message-dialog__actions-submit button:hover {
  opacity: 0.9;
}
.cometchat-flag-message-dialog__actions-submit button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cometchat-flag-message-dialog__actions-submit button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-flag-message-dialog__backdrop,
  .cometchat-flag-message-dialog,
  .cometchat-flag-message-dialog__reason {
    animation: none;
    transition: none;
  }
}

/* src/components/base/CometChatToast/CometChatToast.css */
.cometchat-toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cometchat-spacing-2, 8px);
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
  border-radius: var(--cometchat-radius-1, 4px);
  background: var(--cometchat-static-black, #000);
  color: var(--cometchat-static-white, #fff);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  position: absolute;
  bottom: var(--cometchat-toast-bottom, 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 560px;
  min-height: 32px;
  box-sizing: border-box;
  box-shadow: var(--cometchat-shadow-2, 0 2px 8px rgba(0, 0, 0, 0.15));
  animation: cometchat-toast-slide-up 0.3s ease-out;
}
.cometchat-toast--error {
  background: var(--cometchat-error-color, #f44649);
  color: var(--cometchat-static-white, #fff);
}
@keyframes cometchat-toast-slide-up {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.cometchat-toast__content {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
  flex: 1;
  min-width: 0;
}
.cometchat-toast__text {
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.cometchat-toast__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  border-radius: var(--cometchat-radius-1, 4px);
  transition: background-color 0.2s ease;
}
.cometchat-toast__close:hover {
  background: rgba(255, 255, 255, 0.1);
}
.cometchat-toast__close:active {
  background: rgba(255, 255, 255, 0.2);
}
.cometchat-toast__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}
.cometchat-toast__close-icon {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  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: 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-size: contain;
  -webkit-mask-size: contain;
}
@media (max-width: 640px) {
  .cometchat-toast {
    min-width: 200px;
    max-width: calc(100vw - 32px);
  }
  @keyframes cometchat-toast-slide-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-toast {
    animation: none;
  }
  .cometchat-toast__close {
    transition: none;
  }
}

/* src/components/base/CometChatSearchBar/CometChatSearchBar.css */
.cometchat-search-bar {
  display: flex;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
  align-items: center;
  align-self: stretch;
  gap: var(--cometchat-padding-1, 4px);
  border-radius: var(--cometchat-radius-max, 1000px);
  border: 1px solid var(--cometchat-border-color-light, #e0e0e0);
  background: var(--cometchat-background-color-03, #f5f5f5);
  flex: 1 0 0;
  box-sizing: border-box;
  min-height: 42px;
}
.cometchat-search-bar--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.cometchat-search-bar__icon {
  -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_8292" 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_8292)">%0A<path d="M9.51955 15.6153C7.81188 15.6153 6.36571 15.023 5.18105 13.8385C3.99655 12.6538 3.4043 11.2077 3.4043 9.50002C3.4043 7.79235 3.99655 6.34618 5.18105 5.16152C6.36571 3.97702 7.81188 3.38477 9.51955 3.38477C11.2272 3.38477 12.6734 3.97702 13.858 5.16152C15.0425 6.34618 15.6348 7.79235 15.6348 9.50002C15.6348 10.2142 15.515 10.8963 15.2753 11.5463C15.0355 12.1963 14.7155 12.7616 14.3155 13.2423L20.0695 18.9963C20.208 19.1346 20.2789 19.3086 20.282 19.5183C20.2852 19.7279 20.2144 19.9052 20.0695 20.05C19.9247 20.1948 19.749 20.2673 19.5425 20.2673C19.3362 20.2673 19.1606 20.1948 19.0158 20.05L13.2618 14.296C12.7618 14.7088 12.1868 15.0319 11.5368 15.2653C10.8868 15.4986 10.2144 15.6153 9.51955 15.6153ZM9.51955 14.1155C10.808 14.1155 11.8994 13.6683 12.7935 12.774C13.6879 11.8798 14.135 10.7885 14.135 9.50002C14.135 8.21152 13.6879 7.12018 12.7935 6.22601C11.8994 5.33168 10.808 4.88452 9.51955 4.88452C8.23105 4.88452 7.13971 5.33168 6.24555 6.22601C5.35121 7.12018 4.90405 8.21152 4.90405 9.50002C4.90405 10.7885 5.35121 11.8798 6.24555 12.774C7.13971 13.6683 8.23105 14.1155 9.51955 14.1155Z" 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_8292" 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_8292)">%0A<path d="M9.51955 15.6153C7.81188 15.6153 6.36571 15.023 5.18105 13.8385C3.99655 12.6538 3.4043 11.2077 3.4043 9.50002C3.4043 7.79235 3.99655 6.34618 5.18105 5.16152C6.36571 3.97702 7.81188 3.38477 9.51955 3.38477C11.2272 3.38477 12.6734 3.97702 13.858 5.16152C15.0425 6.34618 15.6348 7.79235 15.6348 9.50002C15.6348 10.2142 15.515 10.8963 15.2753 11.5463C15.0355 12.1963 14.7155 12.7616 14.3155 13.2423L20.0695 18.9963C20.208 19.1346 20.2789 19.3086 20.282 19.5183C20.2852 19.7279 20.2144 19.9052 20.0695 20.05C19.9247 20.1948 19.749 20.2673 19.5425 20.2673C19.3362 20.2673 19.1606 20.1948 19.0158 20.05L13.2618 14.296C12.7618 14.7088 12.1868 15.0319 11.5368 15.2653C10.8868 15.4986 10.2144 15.6153 9.51955 15.6153ZM9.51955 14.1155C10.808 14.1155 11.8994 13.6683 12.7935 12.774C13.6879 11.8798 14.135 10.7885 14.135 9.50002C14.135 8.21152 13.6879 7.12018 12.7935 6.22601C11.8994 5.33168 10.808 4.88452 9.51955 4.88452C8.23105 4.88452 7.13971 5.33168 6.24555 6.22601C5.35121 7.12018 4.90405 8.21152 4.90405 9.50002C4.90405 10.7885 5.35121 11.8798 6.24555 12.774C7.13971 13.6683 8.23105 14.1155 9.51955 14.1155Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: flex;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  justify-content: center;
  align-items: center;
  background: var(--cometchat-icon-color-secondary, #999);
}
.cometchat-search-bar__input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-heading4-regular, 400 14px/20px sans-serif);
  font-style: normal;
  outline: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.cometchat-search-bar__input:focus-visible {
  outline: none;
}
.cometchat-search-bar__input::placeholder {
  color: var(--cometchat-text-color-tertiary, #aaa);
  font: var(--cometchat-font-heading4-regular, 400 14px/20px sans-serif);
  font-style: normal;
}
.cometchat-search-bar__input:disabled {
  cursor: not-allowed;
}
.cometchat-search-bar__clear-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--cometchat-radius-max, 1000px);
}
.cometchat-search-bar__clear-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-search-bar__clear-button:disabled {
  cursor: not-allowed;
}
.cometchat-search-bar__clear-button-icon {
  -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;
  display: block;
  width: 16px;
  height: 16px;
  background: var(--cometchat-icon-color-secondary, #999);
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-search-bar,
  .cometchat-search-bar__input,
  .cometchat-search-bar__clear-button {
    transition: none;
  }
}

/* src/components/base/CometChatEmojiKeyboard/CometChatEmojiKeyboard.css */
.cometchat-emoji-keyboard {
  display: flex;
  flex-direction: column;
  width: var(--cometchat-emoji-keyboard-width, 320px);
  height: var(--cometchat-emoji-keyboard-height, 380px);
  background: var( --cometchat-emoji-keyboard-background, var(--cometchat-background-color-01, #fff) );
  border-radius: var(--cometchat-emoji-keyboard-border-radius, var(--cometchat-radius-3, 12px));
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  box-shadow: var( --cometchat-emoji-keyboard-box-shadow, 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) );
  overflow: hidden;
}
.cometchat-emoji-keyboard__search {
  padding: var(--cometchat-emoji-keyboard-search-padding, var(--cometchat-padding-3, 12px));
  border-bottom: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  z-index: 1;
  position: relative;
  background: var( --cometchat-emoji-keyboard-search-background, var(--cometchat-background-color-01, #fff) );
}
.cometchat-emoji-keyboard__search .cometchat-search-bar {
  height: 36px;
}
.cometchat-emoji-keyboard__search .cometchat-search-bar input,
.cometchat-emoji-keyboard__search .cometchat-search-bar input::placeholder {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
.cometchat-emoji-keyboard__tabs {
  display: flex;
  gap: var(--cometchat-emoji-keyboard-tabs-gap, var(--cometchat-spacing-1, 4px));
  padding: var(--cometchat-emoji-keyboard-tabs-padding, var(--cometchat-padding-2, 8px));
  border-bottom: 1px solid var(--cometchat-border-color-default, #e8e8e8);
  background: var( --cometchat-emoji-keyboard-tabs-background, var(--cometchat-background-color-01, #fff) );
  z-index: 2;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: scroll-position;
}
.cometchat-emoji-keyboard__tabs::-webkit-scrollbar {
  display: none;
}
.cometchat-emoji-keyboard__tab {
  flex-shrink: 0;
  width: var(--cometchat-emoji-keyboard-tab-size, 40px);
  height: var(--cometchat-emoji-keyboard-tab-size, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: var(--cometchat-emoji-keyboard-tab-border-radius, var(--cometchat-radius-2, 8px));
}
.cometchat-emoji-keyboard__tab:hover {
  background-color: var( --cometchat-emoji-keyboard-tab-background-hover, var(--cometchat-background-color-03, #f5f5f5) );
}
.cometchat-emoji-keyboard__tab--active,
.cometchat-emoji-keyboard__tab--active:hover {
  background: var( --cometchat-emoji-keyboard-tab-background-active, var(--cometchat-extended-primary-color-100, #edeafa) );
}
.cometchat-emoji-keyboard__tab:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-emoji-keyboard__tab-icon {
  width: var(--cometchat-emoji-keyboard-tab-icon-size, 24px);
  height: var(--cometchat-emoji-keyboard-tab-icon-size, 24px);
  display: block;
  object-fit: contain;
}
.cometchat-emoji-keyboard__tab--active .cometchat-emoji-keyboard__tab-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(60%) saturate(2218%) hue-rotate(235deg) brightness(88%) contrast(91%);
}
.cometchat-emoji-keyboard__tab-emoji {
  font-size: 18px;
  line-height: 1;
  user-select: none;
}
.cometchat-emoji-keyboard__list {
  flex: 1;
  overflow-y: auto;
  padding: var( --cometchat-emoji-keyboard-list-padding, 0 var(--cometchat-padding-3, 12px) var(--cometchat-padding-3, 12px) );
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-padding-2, 8px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-emoji-keyboard__list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.cometchat-emoji-keyboard__category-section {
  margin-bottom: var(--cometchat-emoji-keyboard-category-margin, 0);
}
.cometchat-emoji-keyboard__category-title {
  color: var( --cometchat-emoji-keyboard-category-title-color, var(--cometchat-text-color-tertiary, #a1a1a1) );
  font: var( --cometchat-emoji-keyboard-category-title-font, var(--cometchat-font-body-regular, 400 14px Roboto) );
  line-height: 120%;
  text-align: left;
  padding: var(--cometchat-padding-1, 4px) 0;
}
.cometchat-emoji-keyboard__emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--cometchat-emoji-keyboard-emoji-grid-gap, var(--cometchat-spacing-1, 4px));
}
.cometchat-emoji-keyboard__emoji-item {
  width: var(--cometchat-emoji-keyboard-emoji-item-size, 32px);
  height: var(--cometchat-emoji-keyboard-emoji-item-size, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cometchat-emoji-keyboard-emoji-item-font-size, 24px);
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: var( --cometchat-emoji-keyboard-emoji-item-border-radius, var(--cometchat-radius-2, 8px) );
  user-select: none;
}
.cometchat-emoji-keyboard__emoji-item:hover {
  background-color: var( --cometchat-emoji-keyboard-emoji-item-background-hover, var(--cometchat-background-color-03, #f5f5f5) );
}
.cometchat-emoji-keyboard__emoji-item:active {
  background-color: var( --cometchat-emoji-keyboard-emoji-item-background-active, var(--cometchat-background-color-04, #e8e8e8) );
}
.cometchat-emoji-keyboard__emoji-item:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-emoji-keyboard__empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--cometchat-text-color-tertiary, #a1a1a1);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  padding: var(--cometchat-padding-5, 20px);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-emoji-keyboard__tab,
  .cometchat-emoji-keyboard__emoji-item {
    transition: none;
  }
}

/* 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/CometChatSmartReplies/CometChatSmartReplies.css */
.cometchat-smart-replies {
  display: flex;
  width: 100%;
  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  border-radius: var(--cometchat-radius-4, 16px);
  background: var(--cometchat-background-color-01, #fff);
  box-shadow: 0px 12px 16px -4px rgb(16 24 40 / 2%), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  gap: var(--cometchat-padding-2, 8px);
  box-sizing: border-box;
}
.cometchat-smart-replies__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.cometchat-smart-replies__header-title {
  overflow: hidden;
  color: var(--cometchat-text-color-primary, #141414);
  text-overflow: ellipsis;
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
  font-style: normal;
  margin: 0;
  white-space: nowrap;
}
.cometchat-smart-replies__header-close-button {
  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: 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;
  background-color: var(--cometchat-icon-color-primary, #141414);
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.cometchat-smart-replies__header-close-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-smart-replies__body {
  width: 100%;
  flex: 1 0 0;
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  font-style: normal;
  text-align: left;
}
.cometchat-smart-replies__items-container {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-padding-2, 8px);
  justify-content: flex-start;
  width: 100%;
}
.cometchat-smart-replies__item {
  display: flex;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
  align-items: center;
  border-radius: var(--cometchat-radius-max, 9999px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.cometchat-smart-replies__item:hover {
  background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-smart-replies__item:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-smart-replies__shimmer-container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--cometchat-padding-2, 8px);
  flex-direction: row;
}
.cometchat-smart-replies__shimmer-item {
  flex-wrap: wrap;
  width: 20%;
  display: flex;
  height: 33px;
  border-radius: var(--cometchat-radius-max, 9999px);
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  background-size: 800px 104px;
  animation: cometchat-smart-replies-shimmer 1.5s infinite linear;
  box-sizing: border-box;
}
@keyframes cometchat-smart-replies-shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-smart-replies__shimmer-item {
    animation: none;
  }
}
.cometchat-smart-replies__error-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-padding-2, 8px);
  padding: var(--cometchat-padding-3, 12px);
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  text-align: center;
  width: 100%;
}
.cometchat-smart-replies__error-retry {
  display: inline-flex;
  align-items: center;
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-3, 12px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  border-radius: var(--cometchat-radius-max, 9999px);
  background: transparent;
  color: var(--cometchat-primary-color, #3399ff);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  cursor: pointer;
}
.cometchat-smart-replies__error-retry:hover {
  background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-smart-replies__error-retry:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-smart-replies__empty-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cometchat-padding-3, 12px);
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  text-align: center;
  width: 100%;
}

/* src/components/base/CometChatConversationStarter/CometChatConversationStarter.css */
.cometchat-conversation-starter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cometchat-padding-2, 8px);
  width: 100%;
  padding: var(--cometchat-padding-3, 12px);
  box-sizing: border-box;
}
.cometchat-conversation-starter__item {
  display: inline-flex;
  border-radius: var(--cometchat-radius-max, 9999px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  transition: background 150ms ease;
}
.cometchat-conversation-starter__item:hover {
  background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-conversation-starter__item--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.cometchat-conversation-starter__item-button {
  display: inline-flex;
  align-items: center;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  border: none;
  border-radius: var(--cometchat-radius-max, 9999px);
  background: transparent;
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}
.cometchat-conversation-starter__item-button:disabled {
  cursor: not-allowed;
}
.cometchat-conversation-starter__item-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-conversation-starter__shimmer-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cometchat-padding-2, 8px);
  width: 100%;
}
.cometchat-conversation-starter__shimmer-item {
  height: 36px;
  border-radius: var(--cometchat-radius-max, 9999px);
  background-color: var(--cometchat-shimmer-background-color, #e0e0e0);
  background-image: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  background-size: 200% 100%;
  animation: cometchat-conversation-starter-shimmer 1.5s ease-in-out infinite;
}
.cometchat-conversation-starter__shimmer-item:nth-child(1) {
  width: 140px;
}
.cometchat-conversation-starter__shimmer-item:nth-child(2) {
  width: 180px;
}
.cometchat-conversation-starter__shimmer-item:nth-child(3) {
  width: 120px;
}
.cometchat-conversation-starter__shimmer-item:nth-child(n+4) {
  width: 150px;
}
@keyframes cometchat-conversation-starter-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-conversation-starter__shimmer-item {
    animation: none;
  }
}
.cometchat-conversation-starter__error-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-padding-2, 8px);
  padding: var(--cometchat-padding-3, 12px);
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  text-align: center;
}
.cometchat-conversation-starter__error-retry {
  display: inline-flex;
  align-items: center;
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-3, 12px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  border-radius: var(--cometchat-radius-max, 9999px);
  background: transparent;
  color: var(--cometchat-primary-color, #3399ff);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  cursor: pointer;
}
.cometchat-conversation-starter__error-retry:hover {
  background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-conversation-starter__error-retry:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-conversation-starter__empty-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cometchat-padding-3, 12px);
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  text-align: center;
}

/* src/components/base/CometChatConversationSummary/CometChatConversationSummary.css */
.cometchat-conversation-summary {
  display: flex;
  width: 100%;
  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  border-radius: var(--cometchat-radius-2, 8px);
  background: var(--cometchat-background-color-01, #fff);
  box-shadow: 0px 12px 16px -4px rgb(16 24 40 / 2%), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  gap: var(--cometchat-padding-2, 8px);
  box-sizing: border-box;
}
.cometchat-conversation-summary__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.cometchat-conversation-summary__header-title {
  overflow: hidden;
  color: var(--cometchat-text-color-primary, #141414);
  text-overflow: ellipsis;
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
  font-style: normal;
  margin: 0;
  white-space: nowrap;
}
.cometchat-conversation-summary__header-close-button {
  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: 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;
  background-color: var(--cometchat-icon-color-primary, #141414);
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.cometchat-conversation-summary__header-close-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-conversation-summary__body {
  width: 100%;
  flex: 1 0 0;
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  font-style: normal;
  text-align: left;
}
.cometchat-conversation-summary__body p {
  margin: 0;
}
.cometchat-conversation-summary__shimmer-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--cometchat-padding-2, 8px);
}
.cometchat-conversation-summary__shimmer-item {
  width: 100%;
  height: 14px;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
  border-radius: var(--cometchat-radius-max, 9999px);
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  background-size: 800px 104px;
  animation: cometchat-conversation-summary-shimmer 1.5s infinite linear;
  box-sizing: border-box;
}
.cometchat-conversation-summary__shimmer-item:last-child {
  width: 70%;
}
@keyframes cometchat-conversation-summary-shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-conversation-summary__shimmer-item {
    animation: none;
  }
}
.cometchat-conversation-summary__error-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-padding-2, 8px);
  padding: var(--cometchat-padding-3, 12px);
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  text-align: center;
  width: 100%;
}
.cometchat-conversation-summary__error-retry {
  display: inline-flex;
  align-items: center;
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-3, 12px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  border-radius: var(--cometchat-radius-max, 9999px);
  background: transparent;
  color: var(--cometchat-primary-color, #3399ff);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  cursor: pointer;
}
.cometchat-conversation-summary__error-retry:hover {
  background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-conversation-summary__error-retry:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-conversation-summary__empty-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cometchat-padding-3, 12px);
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  text-align: center;
  width: 100%;
}

/* src/components/CometChatMessageComposer/CometChatMessageComposer.css */
.cometchat-message-composer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  width: 100%;
  background: var(--cometchat-background-color-01, #fff);
  border-radius: var(--cometchat-radius-2, 8px);
  box-sizing: border-box;
}
.cometchat-message-composer *,
.cometchat-message-composer *::before,
.cometchat-message-composer *::after {
  box-sizing: border-box;
}
.cometchat-message-composer__header {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-1, 4px);
  width: 100%;
  padding: var(--cometchat-padding-1, 4px);
}
.cometchat-message-composer .cometchat-toast {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}
.cometchat-message-composer__validation-error-text {
  color: var(--cometchat-static-white, #fff);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
@keyframes composerErrorFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cometchat-message-composer__edit-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: transparent;
  gap: var(--cometchat-spacing-2, 8px);
  margin: 4px;
  width: calc(100% - 8px);
}
.cometchat-message-composer__edit-preview-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--cometchat-padding-2, 8px);
  min-height: 30px;
  width: 100%;
  min-width: 0;
  border-radius: var(--cometchat-radius-1, 4px);
  gap: var(--cometchat-spacing-1, 4px);
  position: relative;
  background-color: var(--cometchat-background-color-03, #f5f5f5);
  overflow: hidden;
  box-sizing: border-box;
}
.cometchat-message-composer__edit-preview-title {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-message-composer__edit-preview-label {
  font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-composer__edit-preview-subtitle {
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  max-width: 300px;
  word-break: break-word;
  width: 100%;
}
.cometchat-message-composer__edit-preview-subtitle p {
  margin: 0;
  padding: 0;
  display: inline;
}
.cometchat-message-composer__edit-preview-subtitle blockquote {
  margin: 0;
  padding: 0 0 0 8px;
  border-left: 3px solid var(--cometchat-neutral-color-300, #b0b0b0);
  display: inline;
}
.cometchat-message-composer__edit-preview-subtitle pre {
  display: inline;
  margin: 0;
}
.cometchat-message-composer__edit-preview-subtitle code {
  font-family: monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 3px;
  border-radius: 3px;
}
.cometchat-message-composer__edit-preview-close {
  position: absolute;
  top: var(--cometchat-padding-2, 8px);
  right: var(--cometchat-padding-2, 8px);
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cometchat-icon-color-primary, #141414);
  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: 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-size: contain;
  -webkit-mask-size: contain;
  border: none;
  padding: 0;
  cursor: pointer;
}
.cometchat-message-composer__edit-preview-close:hover {
  background: var(--cometchat-icon-color-secondary, #727272);
}
.cometchat-message-composer__edit-preview-close:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
  border-radius: var(--cometchat-radius-1, 4px);
}
.cometchat-message-composer__edit-preview-subtitle--media {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cometchat-message-composer__edit-preview-media-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}
.cometchat-message-composer__edit-preview-media-label {
  flex-shrink: 0;
  font: var(--cometchat-font-caption1-regular, 400 12px/16px Inter);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-composer__edit-preview-separator {
  flex-shrink: 0;
  font: var(--cometchat-font-caption1-regular, 400 12px/16px Inter);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-composer__edit-preview-caption {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: var(--cometchat-font-caption1-regular, 400 12px/16px Inter);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-composer__reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: transparent;
  gap: var(--cometchat-spacing-2, 8px);
  margin: 4px;
  width: calc(100% - 8px);
}
.cometchat-message-composer__reply-preview-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--cometchat-padding-2, 8px);
  min-height: 30px;
  width: 100%;
  min-width: 0;
  border-radius: var(--cometchat-radius-1, 4px);
  gap: var(--cometchat-spacing-1, 4px);
  position: relative;
  background-color: var(--cometchat-background-color-03, #f5f5f5);
  border-left: 3px solid var(--cometchat-primary-color, #6852d6);
  overflow: hidden;
  box-sizing: border-box;
}
.cometchat-message-composer__reply-preview-title {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-message-composer__reply-preview-label {
  font: var(--cometchat-font-caption2-regular, 400 10px Roboto);
  color: var(--cometchat-text-color-tertiary, #a1a1a1);
}
.cometchat-message-composer__reply-preview-sender {
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  color: var(--cometchat-primary-color, #6852d6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-message-composer__reply-preview-subtitle {
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  color: var(--cometchat-text-color-secondary, #727272);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  max-width: 300px;
  word-break: break-word;
  width: 100%;
}
.cometchat-message-composer__reply-preview-subtitle blockquote {
  margin: 0;
  padding: 0 0 0 8px;
  border-left: 3px solid var(--cometchat-neutral-color-300, #b0b0b0);
  display: inline;
}
.cometchat-message-composer__reply-preview-subtitle pre {
  display: inline;
  margin: 0;
}
.cometchat-message-composer__reply-preview-subtitle code {
  font-family: monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 3px;
  border-radius: 3px;
}
.cometchat-message-composer__reply-preview-close {
  position: absolute;
  top: var(--cometchat-padding-2, 8px);
  right: var(--cometchat-padding-2, 8px);
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cometchat-icon-color-primary, #141414);
  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: 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-size: contain;
  -webkit-mask-size: contain;
  border: none;
  padding: 0;
  cursor: pointer;
}
.cometchat-message-composer__reply-preview-close:hover {
  background: var(--cometchat-icon-color-secondary, #727272);
}
.cometchat-message-composer__reply-preview-close:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
  border-radius: var(--cometchat-radius-1, 4px);
}
.cometchat-message-composer__reply-preview-subtitle--media {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cometchat-message-composer__reply-preview-media-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}
.cometchat-message-composer__reply-preview-media-label {
  flex-shrink: 0;
  font: var(--cometchat-font-caption1-regular, 400 12px/16px Inter);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-composer__reply-preview-separator {
  flex-shrink: 0;
  font: var(--cometchat-font-caption1-regular, 400 12px/16px Inter);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-composer__reply-preview-caption {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: var(--cometchat-font-caption1-regular, 400 12px/16px Inter);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-composer__body {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--cometchat-spacing-2, 8px);
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  padding: var(--cometchat-padding-3, 12px);
  align-self: stretch;
  background: var(--cometchat-background-color-01, #fff);
  border-radius: var(--cometchat-radius-2, 8px);
  border: 1px solid var(--cometchat-border-color-light, #e8e8e8);
}
.cometchat-message-composer__recording-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
  padding: var(--cometchat-padding-3, 12px);
  background: var(--cometchat-background-color-01, #fff);
  border-radius: var(--cometchat-radius-2, 8px);
  z-index: 4;
}
.cometchat-message-composer--compact .cometchat-message-composer__body {
  flex-direction: row;
  align-items: flex-end;
}
.cometchat-message-composer--multiline .cometchat-message-composer__body {
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 0;
  min-height: 80px;
}
.cometchat-message-composer__input-wrapper {
  flex: 1;
  min-width: 60px;
  position: relative;
  overflow: visible;
  width: 100%;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.cometchat-message-composer--multiline .cometchat-message-composer__input-wrapper {
  width: 100%;
  flex: 1 1 auto;
}
.cometchat-message-composer__input {
  width: 100%;
  min-height: 32px;
  outline: none;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  word-break: break-word;
  white-space: pre-wrap;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  padding: 8px 0;
  border: none;
  background: transparent;
}
.cometchat-message-composer__input::-webkit-scrollbar {
  display: none;
}
.cometchat-message-composer__input p {
  margin: 0;
  padding: 0;
}
.cometchat-message-composer__input blockquote {
  margin: 0;
  padding: 0;
  padding-left: var(--cometchat-padding-3, 12px);
  border-left: 4px solid var(--cometchat-neutral-color-300, #b0b0b0);
  color: var(--cometchat-text-color-primary);
}
.cometchat-message-composer__input code {
  background: var(--cometchat-background-color-03, #f5f5f5);
  color: var(--cometchat-text-color-highlight, #6852d6);
  padding: 1px 4px;
  border-radius: var(--cometchat-radius-1, 4px);
  border: 1px solid var(--cometchat-border-color-default, #e8e8e8);
  font-size: 12px;
  line-height: 1.6;
  font-family:
    "Roboto Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    Courier,
    monospace;
  display: inline;
  vertical-align: middle;
}
.cometchat-message-composer__input pre {
  background: var(--cometchat-background-color-02, #f5f5f5);
  border: 1px solid var(--cometchat-border-color-light, #e8e8e8);
  border-radius: var(--cometchat-radius-2, 8px);
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
  margin: 0;
  overflow-x: auto;
  font: var(--cometchat-font-caption1-regular);
  font-family:
    "Roboto Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    Courier,
    monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.cometchat-message-composer__input pre code {
  background: transparent;
  color: var(--cometchat-text-color-primary);
  padding: 0;
  border: none;
  border-radius: 0;
  font: var(--cometchat-font-caption1-regular);
  font-family:
    "Roboto Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    Courier,
    monospace;
  font-style: normal;
}
.cometchat-message-composer__input code .cometchat-mentions,
.cometchat-message-composer__input code .cometchat-mentions-other,
.cometchat-message-composer__input code .cometchat-mentions-you,
.cometchat-message-composer__input code .cometchat-mention {
  color: inherit !important;
  background: transparent !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}
.cometchat-message-composer__input ol,
.cometchat-message-composer__input ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}
.cometchat-message-composer__input ol {
  list-style-type: decimal;
}
.cometchat-message-composer__input ol ol {
  list-style-type: lower-alpha;
}
.cometchat-message-composer__input ol ol ol {
  list-style-type: lower-roman;
}
.cometchat-message-composer__input ul {
  list-style-type: disc;
}
.cometchat-message-composer__input ul ul {
  list-style-type: circle;
}
.cometchat-message-composer__input ul ul ul {
  list-style-type: square;
}
.cometchat-message-composer__input li {
  display: list-item;
  padding-left: 0;
}
.cometchat-message-composer__input li > ol,
.cometchat-message-composer__input li > ul {
  margin-top: 0;
  margin-bottom: 0;
}
.cometchat-message-composer__input a {
  color: var(--cometchat-link-color, #1264a3);
  text-decoration: underline;
  cursor: pointer;
}
.cometchat-message-composer__input a:hover {
  text-decoration: underline;
  opacity: 0.85;
}
.cometchat-message-composer__input-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 0;
  color: var(--cometchat-text-color-tertiary, #a1a1a1);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  line-height: 1.4;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-message-composer__actions {
  display: flex;
  align-items: flex-end;
  gap: var(--cometchat-spacing-3, 12px);
  flex-shrink: 0;
}
.cometchat-message-composer--multiline .cometchat-message-composer__actions {
  width: 100%;
  padding: var(--cometchat-padding-1, 4px) 0 var(--cometchat-padding-2, 8px) 0;
}
.cometchat-message-composer__attachment-button,
.cometchat-message-composer__emoji-button,
.cometchat-message-composer__sticker-button,
.cometchat-message-composer__voice-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--cometchat-icon-color-secondary, #a1a1a1);
  flex-shrink: 0;
  border-radius: var(--cometchat-radius-1, 4px);
}
.cometchat-message-composer__attachment-button:hover,
.cometchat-message-composer__emoji-button:hover,
.cometchat-message-composer__sticker-button:hover,
.cometchat-message-composer__voice-button:hover {
  color: var(--cometchat-icon-color-primary, #141414);
}
.cometchat-message-composer__attachment-button:focus-visible,
.cometchat-message-composer__emoji-button:focus-visible,
.cometchat-message-composer__sticker-button:focus-visible,
.cometchat-message-composer__voice-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-message-composer__attachment-button--active,
.cometchat-message-composer__emoji-button--active,
.cometchat-message-composer__sticker-button--active {
  color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-composer__voice-button--active {
  color: var(--cometchat-error-color, #f44649);
}
.cometchat-message-composer__attachment-button--disabled,
.cometchat-message-composer__sticker-button--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.cometchat-message-composer__send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cometchat-primary-color, #6852d6);
  border-radius: var(--cometchat-radius-max, 1000px);
  cursor: pointer;
  color: var(--cometchat-static-white, #fff);
  padding: 0;
  flex-shrink: 0;
}
.cometchat-message-composer__send-button:hover {
  opacity: 0.9;
}
.cometchat-message-composer__send-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-message-composer__send-button--disabled {
  background: var(--cometchat-background-color-04, #e8e8e8);
  color: var(--cometchat-icon-color-secondary, #a1a1a1);
  cursor: not-allowed;
}
.cometchat-message-composer__auxiliary-buttons {
  display: flex;
  align-items: flex-end;
  gap: var(--cometchat-spacing-1, 4px);
}
.cometchat-message-composer__footer {
  padding: 0;
  width: 100%;
}
.cometchat-message-composer__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--cometchat-padding-5, 20px);
  gap: var(--cometchat-spacing-3, 12px);
  width: 100%;
}
.cometchat-message-composer--dragging::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(104, 82, 214, 0.08);
  border-radius: var(--cometchat-radius-2, 8px);
  pointer-events: none;
  z-index: 10;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-message-composer__attachment-button,
  .cometchat-message-composer__emoji-button,
  .cometchat-message-composer__sticker-button,
  .cometchat-message-composer__voice-button,
  .cometchat-message-composer__send-button {
    transition: none;
  }
}
.cometchat-message-composer__attachment-button-wrapper,
.cometchat-message-composer__emoji-button-wrapper,
.cometchat-message-composer__sticker-button-wrapper,
.cometchat-message-composer__voice-button-wrapper,
.cometchat-message-composer__send-button-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}
.cometchat-message-composer__attachment-button-wrapper {
  height: 24px;
}
.cometchat-message-composer__emoji-button-wrapper {
  height: 24px;
  width: 24px;
}
.cometchat-message-composer__sticker-button-wrapper {
  height: 24px;
  width: 24px;
}
.cometchat-message-composer__voice-button-wrapper {
  transition:
    width 0.2s ease,
    opacity 0.2s ease,
    margin 0.2s ease;
  width: 24px;
  height: 24px;
  opacity: 1;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
}
.cometchat-message-composer__voice-button-wrapper--hidden {
  width: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.cometchat-message-composer__voice-button--hidden {
  display: none;
}
.cometchat-message-composer--multiline .cometchat-message-composer__send-button-wrapper {
  margin-left: auto;
}
.cometchat-message-composer__button-icon {
  display: block;
  filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}
.cometchat-message-composer__attachment-button:hover .cometchat-message-composer__button-icon,
.cometchat-message-composer__emoji-button:hover .cometchat-message-composer__button-icon,
.cometchat-message-composer__sticker-button:hover .cometchat-message-composer__button-icon,
.cometchat-message-composer__voice-button:hover .cometchat-message-composer__button-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(60%) saturate(2000%) hue-rotate(235deg) brightness(90%) contrast(95%);
}
.cometchat-message-composer__attachment-button--disabled:hover .cometchat-message-composer__button-icon,
.cometchat-message-composer__sticker-button--disabled:hover .cometchat-message-composer__button-icon {
  filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}
.cometchat-message-composer__attachment-button--active .cometchat-message-composer__button-icon,
.cometchat-message-composer__emoji-button--active .cometchat-message-composer__button-icon,
.cometchat-message-composer__sticker-button--active .cometchat-message-composer__button-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(60%) saturate(2000%) hue-rotate(235deg) brightness(90%) contrast(95%);
}
.cometchat-message-composer__voice-button--active .cometchat-message-composer__button-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(90%) saturate(3000%) hue-rotate(340deg) brightness(95%) contrast(95%);
}
.cometchat-message-composer__send-button-icon {
  display: block;
  filter: brightness(0) invert(1);
}
.cometchat-message-composer__send-button--disabled .cometchat-message-composer__send-button-icon {
  filter: brightness(0) invert(1);
  opacity: 0.6;
}
.cometchat-message-composer__link-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cometchat-overlay-background-heavy, rgba(0, 0, 0, 0.6));
}
.cometchat-message-composer__attachment-list {
  display: flex;
  flex-direction: column;
  padding: var(--cometchat-padding-2, 8px) 0;
  min-width: 200px;
  background: var(--cometchat-background-color-01, #fff);
  border-radius: var(--cometchat-radius-3, 12px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.cometchat-message-composer__attachment-option {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-3, 12px);
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  border: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-message-composer__attachment-option:hover {
  background: var(--cometchat-background-color-02, #fafafa);
}
.cometchat-message-composer__attachment-option:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: -2px;
}
.cometchat-message-composer__attachment-option-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.cometchat-message-composer__attachment-option-title {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-message-composer__attachment-option-icon {
  display: block;
  filter: brightness(0) saturate(100%) invert(32%) sepia(60%) saturate(2000%) hue-rotate(235deg) brightness(90%) contrast(95%);
}
.cometchat-message-composer__input-area {
  position: relative;
  flex: 1;
  min-width: 0;
}
.cometchat-message-composer__input-area--hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-message-composer__input-area--hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.cometchat-message-composer__auxiliary-button-view {
  display: flex;
  align-items: center;
}
.cometchat-message-composer__mentions-list {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  width: fit-content;
  min-width: 280px;
  max-height: var(--cometchat-message-composer-mention-suggestions-max-height, 240px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var( --cometchat-message-composer-mention-suggestions-background, var(--cometchat-background-color-01, #fff) );
  border: var( --cometchat-message-composer-mention-suggestions-border, 1px solid var(--cometchat-border-color-light, #e8e8e8) );
  border-radius: var( --cometchat-message-composer-mention-suggestions-border-radius, var(--cometchat-radius-3, 12px) );
  box-shadow: var( --cometchat-message-composer-mention-suggestions-box-shadow, var(--cometchat-shadow-high, 0 4px 16px rgba(0, 0, 0, 0.12)) );
  margin-bottom: var( --cometchat-message-composer-mention-suggestions-margin-bottom, var(--cometchat-margin-1, 4px) );
  padding: var( --cometchat-message-composer-mention-suggestions-padding, var(--cometchat-spacing-1, 4px) 0 );
  z-index: var(--cometchat-message-composer-mention-suggestions-z-index, 100);
}
.cometchat-message-composer__mentions-list::-webkit-scrollbar {
  display: none;
}
.cometchat-message-composer__mentions-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var( --cometchat-message-composer-mention-loading-more-padding, var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px) );
  border-top: 1px solid var(--cometchat-border-color-light, #e8e8e8);
}
.cometchat-message-composer__mentions-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--cometchat-neutral-color-300, #d1d1d1);
  border-top-color: var(--cometchat-primary-color, #6852d6);
  border-radius: 50%;
  animation: cometchat-mention-spin 1s linear infinite;
  display: block;
  box-sizing: border-box;
}
@keyframes cometchat-mention-spin {
  to {
    transform: rotate(360deg);
  }
}
.cometchat-message-composer__mentions-item {
  display: flex;
  align-items: center;
  gap: var(--cometchat-message-composer-mention-option-gap, var(--cometchat-spacing-3, 12px));
  padding: var( --cometchat-message-composer-mention-option-padding, var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px) );
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-radius: var( --cometchat-message-composer-mention-option-border-radius, var(--cometchat-radius-2, 8px) );
}
.cometchat-message-composer__mentions-item:hover,
.cometchat-message-composer__mentions-item--focused {
  background: var( --cometchat-message-composer-mention-option-background-hover, var(--cometchat-background-color-02, #f5f5f5) );
}
.cometchat-message-composer__mentions-item:focus-visible {
  outline: none;
  background: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-message-composer__mentions-item-avatar {
  width: var(--cometchat-message-composer-mention-option-avatar-width, 42px);
  height: var(--cometchat-message-composer-mention-option-avatar-height, 42px);
  border-radius: var( --cometchat-message-composer-mention-option-avatar-border-radius, var(--cometchat-radius-max, 50%) );
  object-fit: cover;
  flex-shrink: 0;
  --cometchat-avatar-size: 42px;
  --cometchat-avatar-width: 42px;
  --cometchat-avatar-height: 42px;
}
.cometchat-message-composer__mentions-item-initials {
  width: var(--cometchat-message-composer-mention-option-avatar-width, 42px);
  height: var(--cometchat-message-composer-mention-option-avatar-height, 42px);
  border-radius: var(--cometchat-radius-max, 50%);
  background: var(--cometchat-extended-primary-color-100, #e6d9ff);
  color: var(--cometchat-primary-color, #6852d6);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var( --cometchat-font-heading4-medium, 500 14px var(--cometchat-font-family, "Inter", sans-serif) );
  flex-shrink: 0;
}
.cometchat-message-composer__mentions-item-all-icon {
  width: var(--cometchat-message-composer-mention-option-avatar-all-width, 42px);
  height: var(--cometchat-message-composer-mention-option-avatar-all-height, 42px);
  border-radius: var( --cometchat-message-composer-mention-option-avatar-all-border-radius, var(--cometchat-radius-max, 50%) );
  background: var( --cometchat-message-composer-mention-option-avatar-all-background, var(--cometchat-primary-color, #6852d6) );
  color: var( --cometchat-message-composer-mention-option-avatar-all-color, var(--cometchat-static-white, #fff) );
  display: flex;
  align-items: center;
  justify-content: center;
  font: var( --cometchat-message-composer-mention-all-icon-font, var(--cometchat-font-heading4-bold, 700 14px var(--cometchat-font-family, "Inter", sans-serif)) );
  flex-shrink: 0;
}
.cometchat-message-composer__mentions-item-name {
  font: var( --cometchat-message-composer-mention-option-name-font, var( --cometchat-font-heading4-medium, 500 14px var(--cometchat-font-family, "Inter", sans-serif) ) );
  color: var( --cometchat-message-composer-mention-option-name-color, var(--cometchat-text-color-primary, #141414) );
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-message-composer__mentions-item-badge {
  font: var( --cometchat-message-composer-mention-option-subtitle-font, var( --cometchat-font-caption1-regular, 400 12px var(--cometchat-font-family, "Inter", sans-serif) ) );
  color: var( --cometchat-message-composer-mention-option-subtitle-color, var(--cometchat-text-color-secondary, #727272) );
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}
.cometchat-message-composer__mentions-list > .cometchat {
  border-radius: inherit;
  background: transparent;
}
.cometchat-message-composer__mentions-list .cometchat-users,
.cometchat-message-composer__mentions-list .cometchat-group-members {
  max-height: none;
  height: auto;
  overflow: visible;
}
.cometchat-message-composer__mentions-list .cometchat-list {
  max-height: none;
}
.cometchat-message-composer__mentions-list .cometchat-list .cometchat-list__body {
  max-height: none;
  overflow-y: visible;
}
.cometchat-message-composer__mentions-list .cometchat-list .cometchat-list__header-title {
  display: none;
}
.cometchat-message-composer__mentions-list .cometchat-list__item-wrapper {
  cursor: pointer;
}
.cometchat-message-composer__mentions-list .cometchat-group-members__list {
  max-height: none;
  overflow-y: visible;
}
.cometchat-message-composer__mentions-list .cometchat-users__list {
  max-height: none;
  overflow-y: visible;
}
.cometchat-message-composer__ai-button-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  height: 24px;
  width: 24px;
}
.cometchat-message-composer__ai-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--cometchat-icon-color-secondary, #a1a1a1);
  flex-shrink: 0;
  border-radius: var(--cometchat-radius-1, 4px);
}
.cometchat-message-composer__ai-button:hover {
  color: var(--cometchat-icon-color-primary, #141414);
}
.cometchat-message-composer__ai-button:hover .cometchat-message-composer__button-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(60%) saturate(2000%) hue-rotate(235deg) brightness(90%) contrast(95%);
}
.cometchat-message-composer__ai-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-message-composer__ai-button--active {
  color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-composer__ai-button--active .cometchat-message-composer__button-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(60%) saturate(2000%) hue-rotate(235deg) brightness(90%) contrast(95%);
}
.cometchat-message-composer__ai-menu {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: var(--cometchat-padding-2, 8px) 0;
}
.cometchat-message-composer__ai-menu-header {
  display: flex;
  align-items: center;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
}
.cometchat-message-composer__ai-menu-title {
  font: var(--cometchat-font-heading4-bold, 600 14px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-message-composer__ai-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cometchat-message-composer__ai-menu-item {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-3, 12px);
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  border: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-message-composer__ai-menu-item:hover {
  background: var(--cometchat-background-color-02, #fafafa);
}
.cometchat-message-composer__ai-menu-item:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: -2px;
}
.cometchat-message-composer__ai-menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.cometchat-message-composer__ai-menu-item-title {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-message-composer__ai-panel {
  min-width: 280px;
  max-width: 400px;
  max-height: 320px;
  overflow-y: auto;
}
.cometchat-message-composer__drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: inherit;
  background: var(--cometchat-drop-overlay-background, rgba(40, 40, 40, 0.95));
  pointer-events: none;
}
.cometchat-message-composer__drop-overlay-icon {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
}
.cometchat-message-composer__drop-overlay-text {
  font: var(--cometchat-font-body-medium, 500 14px/17px sans-serif);
  color: var(--cometchat-static-white, #fff);
}

/* src/components/CometChatCreatePoll/CometChatCreatePoll.css */
.cometchat-create-poll__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cometchat-overlay-background-heavy, rgba(0, 0, 0, 0.6));
}
.cometchat-create-poll {
  display: flex;
  flex-direction: column;
  width: var(--cometchat-create-poll-width, 360px);
  max-width: 90%;
  max-height: 80vh;
  background: var(--cometchat-background-color-01, #fff);
  border-radius: var(--cometchat-radius-4, 16px);
  box-shadow: var(--cometchat-shadow-high, 0 8px 32px rgba(0, 0, 0, 0.16));
  overflow: hidden;
}
.cometchat-create-poll__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cometchat-padding-4, 16px);
  border-bottom: 1px solid var(--cometchat-border-color-light, #e8e8e8);
}
.cometchat-create-poll__header-title {
  font: var(--cometchat-font-heading4-bold);
  color: var(--cometchat-text-color-primary);
  margin: 0;
}
.cometchat-create-poll__header-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-mask-image: 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');
  mask-image: 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');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--cometchat-icon-color-primary, #141414);
}
.cometchat-create-poll__header-close:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-create-poll__body {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-4, 16px);
  padding: var(--cometchat-padding-4, 16px);
  overflow-y: auto;
  flex: 1;
}
.cometchat-create-poll__question {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-1, 4px);
}
.cometchat-create-poll__question-label {
  font: var(--cometchat-font-caption1-medium);
  color: var(--cometchat-text-color-secondary);
}
.cometchat-create-poll__question-input {
  font: var(--cometchat-font-body-regular);
  color: var(--cometchat-text-color-primary);
  background: var(--cometchat-background-color-03, #f5f5f5);
  border: 1px solid var(--cometchat-border-color-light, #e8e8e8);
  border-radius: var(--cometchat-radius-2, 8px);
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
  outline: none;
}
.cometchat-create-poll__question-input:focus-visible {
  border-color: var(--cometchat-primary-color, #3399ff);
  box-shadow: 0 0 0 1px var(--cometchat-primary-color, #3399ff);
}
.cometchat-create-poll__question-input::placeholder {
  color: var(--cometchat-text-color-tertiary, #999);
}
.cometchat-create-poll__options-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-create-poll__options-label {
  font: var(--cometchat-font-caption1-medium);
  color: var(--cometchat-text-color-secondary);
}
.cometchat-create-poll__options {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-create-poll__option {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-create-poll__option-input {
  flex: 1;
  font: var(--cometchat-font-body-regular);
  color: var(--cometchat-text-color-primary);
  background: var(--cometchat-background-color-03, #f5f5f5);
  border: 1px solid var(--cometchat-border-color-light, #e8e8e8);
  border-radius: var(--cometchat-radius-2, 8px);
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
  outline: none;
}
.cometchat-create-poll__option-input:focus-visible {
  border-color: var(--cometchat-primary-color, #3399ff);
  box-shadow: 0 0 0 1px var(--cometchat-primary-color, #3399ff);
}
.cometchat-create-poll__option-input::placeholder {
  color: var(--cometchat-text-color-tertiary, #999);
}
.cometchat-create-poll__option-remove {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-mask-image: 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');
  mask-image: 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');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--cometchat-icon-color-secondary, #999);
}
.cometchat-create-poll__option-remove:hover {
  background-color: var(--cometchat-error-color, #f44336);
}
.cometchat-create-poll__option-remove:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-create-poll__add-button {
  font: var(--cometchat-font-caption1-medium);
  color: var(--cometchat-primary-color);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--cometchat-padding-1, 4px) 0;
  text-align: left;
}
.cometchat-create-poll__add-button:hover:not(:disabled) {
  text-decoration: underline;
}
.cometchat-create-poll__add-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cometchat-create-poll__add-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-create-poll__footer {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-2, 8px);
  padding: var(--cometchat-padding-4, 16px);
  border-top: 1px solid var(--cometchat-border-color-light, #e8e8e8);
}
.cometchat-create-poll__error {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-1, 4px);
  color: var(--cometchat-error-color, #f44336);
}
.cometchat-create-poll__error-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--cometchat-error-color, #f44336);
  -webkit-mask-image: 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_8435" 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_8435)">%0A<path d="M3.4246 20.5C3.2551 20.5 3.10285 20.4586 2.96785 20.3757C2.83285 20.2929 2.72794 20.1837 2.6531 20.048C2.5751 19.9133 2.53219 19.7675 2.52435 19.6105C2.51652 19.4535 2.55885 19.298 2.65135 19.144L11.2121 4.35599C11.3048 4.20199 11.4206 4.08816 11.5596 4.01449C11.6988 3.94083 11.8453 3.90399 11.9991 3.90399C12.1529 3.90399 12.2994 3.94083 12.4386 4.01449C12.5776 4.08816 12.6934 4.20199 12.7861 4.35599L21.3469 19.144C21.4394 19.298 21.4817 19.4535 21.4739 19.6105C21.466 19.7675 21.4231 19.9133 21.3451 20.048C21.2703 20.1837 21.1654 20.2929 21.0304 20.3757C20.8954 20.4586 20.7431 20.5 20.5736 20.5H3.4246ZM11.9991 17.8077C12.2279 17.8077 12.4198 17.7303 12.5746 17.5755C12.7294 17.4207 12.8069 17.2288 12.8069 17C12.8069 16.7712 12.7294 16.5793 12.5746 16.4245C12.4198 16.2697 12.2279 16.1922 11.9991 16.1922C11.7703 16.1922 11.5784 16.2697 11.4236 16.4245C11.2688 16.5793 11.1914 16.7712 11.1914 17C11.1914 17.2288 11.2688 17.4207 11.4236 17.5755C11.5784 17.7303 11.7703 17.8077 11.9991 17.8077ZM11.9994 15.1922C12.212 15.1922 12.3901 15.1204 12.5336 14.9767C12.6773 14.8329 12.7491 14.6547 12.7491 14.4422V10.9422C12.7491 10.7297 12.6772 10.5517 12.5334 10.408C12.3895 10.2642 12.2114 10.1922 11.9989 10.1922C11.7862 10.1922 11.6081 10.2642 11.4646 10.408C11.3209 10.5517 11.2491 10.7297 11.2491 10.9422V14.4422C11.2491 14.6547 11.321 14.8329 11.4649 14.9767C11.6087 15.1204 11.7869 15.1922 11.9994 15.1922Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  mask-image: 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_8435" 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_8435)">%0A<path d="M3.4246 20.5C3.2551 20.5 3.10285 20.4586 2.96785 20.3757C2.83285 20.2929 2.72794 20.1837 2.6531 20.048C2.5751 19.9133 2.53219 19.7675 2.52435 19.6105C2.51652 19.4535 2.55885 19.298 2.65135 19.144L11.2121 4.35599C11.3048 4.20199 11.4206 4.08816 11.5596 4.01449C11.6988 3.94083 11.8453 3.90399 11.9991 3.90399C12.1529 3.90399 12.2994 3.94083 12.4386 4.01449C12.5776 4.08816 12.6934 4.20199 12.7861 4.35599L21.3469 19.144C21.4394 19.298 21.4817 19.4535 21.4739 19.6105C21.466 19.7675 21.4231 19.9133 21.3451 20.048C21.2703 20.1837 21.1654 20.2929 21.0304 20.3757C20.8954 20.4586 20.7431 20.5 20.5736 20.5H3.4246ZM11.9991 17.8077C12.2279 17.8077 12.4198 17.7303 12.5746 17.5755C12.7294 17.4207 12.8069 17.2288 12.8069 17C12.8069 16.7712 12.7294 16.5793 12.5746 16.4245C12.4198 16.2697 12.2279 16.1922 11.9991 16.1922C11.7703 16.1922 11.5784 16.2697 11.4236 16.4245C11.2688 16.5793 11.1914 16.7712 11.1914 17C11.1914 17.2288 11.2688 17.4207 11.4236 17.5755C11.5784 17.7303 11.7703 17.8077 11.9991 17.8077ZM11.9994 15.1922C12.212 15.1922 12.3901 15.1204 12.5336 14.9767C12.6773 14.8329 12.7491 14.6547 12.7491 14.4422V10.9422C12.7491 10.7297 12.6772 10.5517 12.5334 10.408C12.3895 10.2642 12.2114 10.1922 11.9989 10.1922C11.7862 10.1922 11.6081 10.2642 11.4646 10.408C11.3209 10.5517 11.2491 10.7297 11.2491 10.9422V14.4422C11.2491 14.6547 11.321 14.8329 11.4649 14.9767C11.6087 15.1204 11.7869 15.1922 11.9994 15.1922Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.cometchat-create-poll__error-text {
  font: var(--cometchat-font-caption1-regular);
}
.cometchat-create-poll__create-button {
  width: 100%;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  font: var(--cometchat-font-button-medium);
  color: var(--cometchat-static-white);
  background: var(--cometchat-primary-color);
  border: none;
  border-radius: var(--cometchat-radius-2, 8px);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.cometchat-create-poll__create-button:hover:not(:disabled) {
  opacity: 0.9;
}
.cometchat-create-poll__create-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cometchat-create-poll__create-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .cometchat-create-poll {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-create-poll__create-button {
    transition: none;
  }
}

/* src/components/CometChatStickersKeyboard/CometChatStickersKeyboard.css */
.cometchat-stickers-keyboard {
  display: flex;
  flex-direction: column;
  height: var(--cometchat-stickers-keyboard-height, 100%);
  width: var(--cometchat-stickers-keyboard-width, 300px);
  min-height: var(--cometchat-stickers-keyboard-min-height, 280px);
  max-height: var(--cometchat-stickers-keyboard-max-height, 320px);
  background-color: var( --cometchat-stickers-keyboard-background, var(--cometchat-neutral-color-50, #ffffff) );
  border-radius: var(--cometchat-stickers-keyboard-border-radius, var(--cometchat-radius-3, 12px));
  box-shadow: var( --cometchat-stickers-keyboard-box-shadow, 0px 4px 16px rgba(20, 20, 20, 0.12), 0px 0px 4px rgba(20, 20, 20, 0.06) );
  overflow: hidden;
}
.cometchat-stickers-keyboard__tabs {
  display: flex;
  gap: var(--cometchat-spacing-2, 8px);
  padding: var(--cometchat-padding-3, 12px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--cometchat-border-color-light, rgba(20, 20, 20, 0.08));
  flex-shrink: 0;
}
.cometchat-stickers-keyboard__tabs::-webkit-scrollbar {
  display: none;
}
.cometchat-stickers-keyboard__tab {
  flex-shrink: 0;
  width: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--cometchat-radius-2, 8px);
  transition: background-color 0.2s ease;
  background-color: transparent;
  border: none;
  padding: var(--cometchat-padding-1, 4px);
}
.cometchat-stickers-keyboard__tab:hover {
  background-color: var(--cometchat-neutral-color-200, #f5f5f5);
}
.cometchat-stickers-keyboard__tab--active {
  background-color: var(--cometchat-extended-primary-color-100, #e8e3f8);
}
.cometchat-stickers-keyboard__tab-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: var(--cometchat-radius-1, 4px);
}
.cometchat-stickers-keyboard__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cometchat-spacing-2, 8px);
  padding: var(--cometchat-padding-3, 12px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-stickers-keyboard__grid::-webkit-scrollbar {
  display: none;
}
.cometchat-stickers-keyboard__sticker-item {
  aspect-ratio: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--cometchat-radius-2, 8px);
  transition: background-color 0.2s ease, transform 0.15s ease;
  padding: var(--cometchat-padding-1, 4px);
  background-color: transparent;
  border: none;
}
.cometchat-stickers-keyboard__sticker-item:hover {
  background-color: var(--cometchat-neutral-color-200, #f5f5f5);
  transform: scale(1.05);
}
.cometchat-stickers-keyboard__sticker-item:active {
  background-color: var(--cometchat-neutral-color-300, #e0e0e0);
  transform: scale(0.98);
}
.cometchat-stickers-keyboard__sticker-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cometchat-stickers-keyboard__sticker-image--loaded {
  opacity: 1;
}
.cometchat-stickers-keyboard__sticker-shimmer {
  position: absolute;
  inset: 0;
  border-radius: var(--cometchat-radius-2, 8px);
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  background-size: 200% 100%;
  animation: cometchat-stickers-shimmer 1.5s infinite;
}
.cometchat-stickers-keyboard__shimmer {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cometchat-stickers-keyboard__shimmer-tabs {
  display: flex;
  padding: var(--cometchat-padding-2, 8px);
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
  border-bottom: 1px solid var(--cometchat-border-color-default, #e8e8e8);
  flex-shrink: 0;
}
.cometchat-stickers-keyboard__shimmer-tab {
  width: 50px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--cometchat-radius-2, 8px);
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  background-size: 200% 100%;
  animation: cometchat-stickers-shimmer 1.5s infinite;
}
.cometchat-stickers-keyboard__shimmer-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cometchat-spacing-3, 12px);
  padding: var(--cometchat-padding-3, 12px);
  overflow: hidden;
}
.cometchat-stickers-keyboard__shimmer-sticker {
  aspect-ratio: 1;
  border-radius: var(--cometchat-radius-2, 8px);
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  background-size: 200% 100%;
  animation: cometchat-stickers-shimmer 1.5s infinite;
}
@keyframes cometchat-stickers-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.cometchat-stickers-keyboard__error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cometchat-spacing-3, 12px);
  padding: var(--cometchat-padding-4, 16px);
}
.cometchat-stickers-keyboard__error-icon {
  color: var(--cometchat-error-color, #f44649);
  opacity: 0.8;
  width: 48px;
  height: 48px;
}
.cometchat-stickers-keyboard__error-icon-mask {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_7089_707053" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">%0A<path d="M120 60C120 68.9108 118.054 77.3757 114.559 84.9811C105.089 105.649 84.2189 120 60 120C35.7811 120 14.9108 105.649 5.44054 84.9811C1.94595 77.3757 0 68.9108 0 60C0 26.8622 26.8622 0 60 0C93.1378 0 120 26.8622 120 60Z" fill="%23F4F7FC"/>%0A</mask>%0A<g mask="url(%23mask0_7089_707053)">%0A<path d="M2.625 84L22.5 79.875L39 86.25L24 94.5L2.625 84Z" fill="%23DCDCDC"/>%0A<path d="M117.375 84L97.5 79.875L81 86.25L96 94.5L117.375 84Z" fill="%23DCDCDC"/>%0A<path opacity="0.6" d="M39 86.25H81L96 94.5H24L39 86.25Z" fill="%23A1A1A1"/>%0A<path d="M45.0793 50.5798C51.8385 46.6773 60.4814 48.9932 64.3838 55.7524C68.2863 62.5115 65.9704 71.1545 59.2112 75.0569L51.2626 79.646L49.1291 89.2059C48.8661 90.3844 47.2924 90.6255 46.6887 89.5798L43.0171 83.2205C37.4837 83.9945 31.7809 81.424 28.8155 76.2878C24.9131 69.5286 27.229 60.8857 33.9882 56.9833L45.0793 50.5798Z" fill="%23E8E8E8"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 54.8662 58.7017)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 47.217 63.1196)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 39.568 67.5317)" fill="%23FAFAFA"/>%0A<path d="M68.7319 23.6854C58.716 21.0017 48.4209 26.9456 45.7371 36.9615C43.0534 46.9774 48.9973 57.2726 59.0132 59.9563L70.7932 63.1128L76.8182 74.647C77.5609 76.0689 79.6633 75.8372 80.0785 74.2876L82.6036 64.864C89.9703 63.9541 96.404 58.6946 98.4433 51.0841C101.127 41.0681 95.1831 30.773 85.1672 28.0892L68.7319 23.6854Z" fill="%23DCDCDC"/>%0A<circle cx="61.039" cy="41.0622" r="2.93362" transform="rotate(15 61.039 41.0622)" fill="%23FAFAFA"/>%0A<circle cx="72.3738" cy="44.0973" r="2.93362" transform="rotate(15 72.3738 44.0973)" fill="%23FAFAFA"/>%0A<circle cx="83.7081" cy="47.1384" r="2.93362" transform="rotate(15 83.7081 47.1384)" fill="%23FAFAFA"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6951 32.7839C42.2994 32.6391 42.6718 32.0319 42.527 31.4277C42.3822 30.8234 41.775 30.451 41.1708 30.5958L38.2534 31.2949C37.6492 31.4397 37.2768 32.0469 37.4216 32.6511C37.5663 33.2553 38.1735 33.6278 38.7777 33.483L41.6951 32.7839ZM52.5122 19.092C52.5109 19.7133 52.0063 20.216 51.385 20.2148C50.7637 20.2136 50.261 19.7089 50.2622 19.0876L50.268 16.0876C50.2692 15.4663 50.7739 14.9636 51.3952 14.9648C52.0165 14.966 52.5192 15.4707 52.518 16.092L52.5122 19.092ZM43.1169 26.0355C42.9758 26.6405 42.3709 27.0167 41.7658 26.8756L38.8442 26.1942C38.2391 26.0531 37.863 25.4482 38.0041 24.8431C38.1452 24.2381 38.7501 23.8619 39.3552 24.003L42.2768 24.6844C42.8819 24.8255 43.258 25.4304 43.1169 26.0355ZM46.7835 20.5285C47.0607 21.0846 46.8345 21.76 46.2784 22.0372C45.7224 22.3143 45.0469 22.0882 44.7698 21.5321L43.4316 18.8471C43.1544 18.291 43.3805 17.6156 43.9366 17.3384C44.4927 17.0613 45.1682 17.2874 45.4453 17.8435L46.7835 20.5285Z" fill="%23DCDCDC"/>%0A<rect x="24" y="94.5" width="72" height="63" fill="%23DCDCDC"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask: url('data:image/svg+xml,<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_7089_707053" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">%0A<path d="M120 60C120 68.9108 118.054 77.3757 114.559 84.9811C105.089 105.649 84.2189 120 60 120C35.7811 120 14.9108 105.649 5.44054 84.9811C1.94595 77.3757 0 68.9108 0 60C0 26.8622 26.8622 0 60 0C93.1378 0 120 26.8622 120 60Z" fill="%23F4F7FC"/>%0A</mask>%0A<g mask="url(%23mask0_7089_707053)">%0A<path d="M2.625 84L22.5 79.875L39 86.25L24 94.5L2.625 84Z" fill="%23DCDCDC"/>%0A<path d="M117.375 84L97.5 79.875L81 86.25L96 94.5L117.375 84Z" fill="%23DCDCDC"/>%0A<path opacity="0.6" d="M39 86.25H81L96 94.5H24L39 86.25Z" fill="%23A1A1A1"/>%0A<path d="M45.0793 50.5798C51.8385 46.6773 60.4814 48.9932 64.3838 55.7524C68.2863 62.5115 65.9704 71.1545 59.2112 75.0569L51.2626 79.646L49.1291 89.2059C48.8661 90.3844 47.2924 90.6255 46.6887 89.5798L43.0171 83.2205C37.4837 83.9945 31.7809 81.424 28.8155 76.2878C24.9131 69.5286 27.229 60.8857 33.9882 56.9833L45.0793 50.5798Z" fill="%23E8E8E8"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 54.8662 58.7017)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 47.217 63.1196)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 39.568 67.5317)" fill="%23FAFAFA"/>%0A<path d="M68.7319 23.6854C58.716 21.0017 48.4209 26.9456 45.7371 36.9615C43.0534 46.9774 48.9973 57.2726 59.0132 59.9563L70.7932 63.1128L76.8182 74.647C77.5609 76.0689 79.6633 75.8372 80.0785 74.2876L82.6036 64.864C89.9703 63.9541 96.404 58.6946 98.4433 51.0841C101.127 41.0681 95.1831 30.773 85.1672 28.0892L68.7319 23.6854Z" fill="%23DCDCDC"/>%0A<circle cx="61.039" cy="41.0622" r="2.93362" transform="rotate(15 61.039 41.0622)" fill="%23FAFAFA"/>%0A<circle cx="72.3738" cy="44.0973" r="2.93362" transform="rotate(15 72.3738 44.0973)" fill="%23FAFAFA"/>%0A<circle cx="83.7081" cy="47.1384" r="2.93362" transform="rotate(15 83.7081 47.1384)" fill="%23FAFAFA"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6951 32.7839C42.2994 32.6391 42.6718 32.0319 42.527 31.4277C42.3822 30.8234 41.775 30.451 41.1708 30.5958L38.2534 31.2949C37.6492 31.4397 37.2768 32.0469 37.4216 32.6511C37.5663 33.2553 38.1735 33.6278 38.7777 33.483L41.6951 32.7839ZM52.5122 19.092C52.5109 19.7133 52.0063 20.216 51.385 20.2148C50.7637 20.2136 50.261 19.7089 50.2622 19.0876L50.268 16.0876C50.2692 15.4663 50.7739 14.9636 51.3952 14.9648C52.0165 14.966 52.5192 15.4707 52.518 16.092L52.5122 19.092ZM43.1169 26.0355C42.9758 26.6405 42.3709 27.0167 41.7658 26.8756L38.8442 26.1942C38.2391 26.0531 37.863 25.4482 38.0041 24.8431C38.1452 24.2381 38.7501 23.8619 39.3552 24.003L42.2768 24.6844C42.8819 24.8255 43.258 25.4304 43.1169 26.0355ZM46.7835 20.5285C47.0607 21.0846 46.8345 21.76 46.2784 22.0372C45.7224 22.3143 45.0469 22.0882 44.7698 21.5321L43.4316 18.8471C43.1544 18.291 43.3805 17.6156 43.9366 17.3384C44.4927 17.0613 45.1682 17.2874 45.4453 17.8435L46.7835 20.5285Z" fill="%23DCDCDC"/>%0A<rect x="24" y="94.5" width="72" height="63" fill="%23DCDCDC"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.cometchat-stickers-keyboard__error-text {
  font: var(--cometchat-font-body-regular);
  color: var(--cometchat-text-color-primary, #141414);
  text-align: center;
}
.cometchat-stickers-keyboard__retry-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cometchat-primary-button-text, #ffffff);
  background-color: var(--cometchat-primary-button-background, #6852d6);
  border: none;
  border-radius: var(--cometchat-radius-2, 8px);
  padding: var(--cometchat-spacing-1, 4px) var(--cometchat-spacing-3, 12px);
  font: var(--cometchat-font-button-medium);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.cometchat-stickers-keyboard__retry-button:hover {
  opacity: 0.9;
}
.cometchat-stickers-keyboard__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cometchat-spacing-3, 12px);
  padding: var(--cometchat-padding-4, 16px);
}
.cometchat-stickers-keyboard__empty-icon {
  color: var(--cometchat-icon-color-tertiary, rgba(20, 20, 20, 0.38));
  opacity: 0.6;
  width: 48px;
  height: 48px;
}
.cometchat-stickers-keyboard__empty-icon-mask {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -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 fill-rule="evenodd" clip-rule="evenodd" d="M6.42541 3.53198C4.94956 3.84953 3.82566 4.99078 3.52746 6.47483C3.45601 6.83038 3.44886 7.46378 3.46296 12.1748C3.47766 17.0965 3.48521 17.4962 3.56836 17.7748C3.88646 18.8403 4.62136 19.7197 5.57396 20.1745C6.31606 20.5288 6.19271 20.5178 9.60841 20.5369C12.2688 20.5517 12.7376 20.5434 13.0283 20.476C13.7571 20.3069 13.7108 20.3468 17.0291 17.0285C20.3474 13.7102 20.3075 13.7565 20.4766 13.0277C20.544 12.737 20.5523 12.2682 20.5375 9.60783C20.5183 6.18968 20.5292 6.30943 20.1734 5.57483C19.7047 4.60688 18.8447 3.88703 17.7754 3.56778C17.4962 3.48438 17.1045 3.47743 12.1254 3.46743C7.52016 3.45818 6.72671 3.46713 6.42541 3.53198ZM6.68181 5.00533C6.57531 5.03033 6.33286 5.13243 6.14306 5.23218C5.56891 5.53388 5.13371 6.10523 4.99936 6.73373C4.96531 6.89288 4.95251 8.73443 4.96161 12.1536L4.97541 17.3324L5.18781 17.761C5.51596 18.4232 6.05221 18.8491 6.74036 18.994C6.91436 19.0307 7.83586 19.0498 9.42486 19.0498H11.8444L11.8635 16.9873C11.8846 14.7089 11.8881 14.6806 12.2277 13.9694C12.5812 13.2291 13.2312 12.5798 13.974 12.2252C14.6807 11.8877 14.7113 11.884 16.9879 11.8629L19.0504 11.8438L19.0498 9.38433C19.0492 6.68873 19.0469 6.66358 18.7481 6.10313C18.468 5.57753 17.8902 5.14013 17.2948 5.00288C17.0151 4.93838 6.95691 4.94073 6.68181 5.00533ZM15.0818 13.4053C14.4926 13.5437 13.8387 14.0729 13.5792 14.6213C13.3666 15.0709 13.3474 15.277 13.3618 16.9625L13.3754 18.5502L15.9752 15.95L18.5751 13.3498L16.9252 13.3548C16.0178 13.3576 15.1883 13.3803 15.0818 13.4053Z" fill="%23A1A1A1"/>%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<path fill-rule="evenodd" clip-rule="evenodd" d="M6.42541 3.53198C4.94956 3.84953 3.82566 4.99078 3.52746 6.47483C3.45601 6.83038 3.44886 7.46378 3.46296 12.1748C3.47766 17.0965 3.48521 17.4962 3.56836 17.7748C3.88646 18.8403 4.62136 19.7197 5.57396 20.1745C6.31606 20.5288 6.19271 20.5178 9.60841 20.5369C12.2688 20.5517 12.7376 20.5434 13.0283 20.476C13.7571 20.3069 13.7108 20.3468 17.0291 17.0285C20.3474 13.7102 20.3075 13.7565 20.4766 13.0277C20.544 12.737 20.5523 12.2682 20.5375 9.60783C20.5183 6.18968 20.5292 6.30943 20.1734 5.57483C19.7047 4.60688 18.8447 3.88703 17.7754 3.56778C17.4962 3.48438 17.1045 3.47743 12.1254 3.46743C7.52016 3.45818 6.72671 3.46713 6.42541 3.53198ZM6.68181 5.00533C6.57531 5.03033 6.33286 5.13243 6.14306 5.23218C5.56891 5.53388 5.13371 6.10523 4.99936 6.73373C4.96531 6.89288 4.95251 8.73443 4.96161 12.1536L4.97541 17.3324L5.18781 17.761C5.51596 18.4232 6.05221 18.8491 6.74036 18.994C6.91436 19.0307 7.83586 19.0498 9.42486 19.0498H11.8444L11.8635 16.9873C11.8846 14.7089 11.8881 14.6806 12.2277 13.9694C12.5812 13.2291 13.2312 12.5798 13.974 12.2252C14.6807 11.8877 14.7113 11.884 16.9879 11.8629L19.0504 11.8438L19.0498 9.38433C19.0492 6.68873 19.0469 6.66358 18.7481 6.10313C18.468 5.57753 17.8902 5.14013 17.2948 5.00288C17.0151 4.93838 6.95691 4.94073 6.68181 5.00533ZM15.0818 13.4053C14.4926 13.5437 13.8387 14.0729 13.5792 14.6213C13.3666 15.0709 13.3474 15.277 13.3618 16.9625L13.3754 18.5502L15.9752 15.95L18.5751 13.3498L16.9252 13.3548C16.0178 13.3576 15.1883 13.3803 15.0818 13.4053Z" fill="%23A1A1A1"/>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.cometchat-stickers-keyboard__empty-text {
  font: var(--cometchat-font-body-regular);
  color: var(--cometchat-text-color-secondary, rgba(20, 20, 20, 0.58));
  text-align: center;
}
.cometchat-stickers-keyboard__tab:focus-visible,
.cometchat-stickers-keyboard__sticker-item:focus-visible,
.cometchat-stickers-keyboard__retry-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-stickers-keyboard__tab,
  .cometchat-stickers-keyboard__sticker-item,
  .cometchat-stickers-keyboard__sticker-image,
  .cometchat-stickers-keyboard__retry-button {
    transition: none;
  }
  .cometchat-stickers-keyboard__sticker-item:hover,
  .cometchat-stickers-keyboard__sticker-item:active {
    transform: none;
  }
  .cometchat-stickers-keyboard__shimmer-tab,
  .cometchat-stickers-keyboard__shimmer-sticker,
  .cometchat-stickers-keyboard__sticker-shimmer {
    animation: none;
  }
}

/* src/components/base/CometChatCheckbox/CometChatCheckbox.css */
.cometchat-checkbox {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.cometchat-checkbox__label {
  display: flex;
  align-items: center;
  gap: var(--cometchat-radius-2, 8px);
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  cursor: pointer;
}
.cometchat-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.cometchat-checkbox__checkmark {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--cometchat-radius-1, 4px);
  border: 1.5px solid var(--cometchat-border-color-default, #e8e8e8);
  box-sizing: border-box;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.cometchat-checkbox__label:hover .cometchat-checkbox__checkmark {
  border-color: var(--cometchat-border-color-dark, #dcdcdc);
}
.cometchat-checkbox__input:focus-visible + .cometchat-checkbox__checkmark {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-checkbox__input:checked + .cometchat-checkbox__checkmark {
  border-color: var(--cometchat-primary-color, #6852d6);
  background-color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-checkbox__checkmark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: var(--cometchat-static-white, #fff);
  mask: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="check">%0A<path id="Icon" d="M11.6663 3.5L5.24967 9.91667L2.33301 7" stroke="%236852D6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="check">%0A<path id="Icon" d="M11.6663 3.5L5.24967 9.91667L2.33301 7" stroke="%236852D6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  transform: translate(-50%, -50%);
  display: none;
}
.cometchat-checkbox__input:checked + .cometchat-checkbox__checkmark::after {
  display: block;
}
.cometchat-checkbox__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-checkbox--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.cometchat-checkbox--disabled .cometchat-checkbox__label {
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-checkbox__checkmark {
    transition: none;
  }
}

/* src/components/base/CometChatRadioButton/CometChatRadioButton.css */
.cometchat-radio-button {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.cometchat-radio-button__label {
  display: inline-flex;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
  cursor: pointer;
  user-select: none;
  position: relative;
}
.cometchat-radio-button__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.cometchat-radio-button__custom {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--cometchat-border-color-default, #e8e8e8);
  border-radius: var(--cometchat-radius-max, 1000px);
  background-color: var(--cometchat-background-color-01, #fff);
  box-sizing: border-box;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.cometchat-radio-button__custom::after {
  content: "";
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: var(--cometchat-radius-max, 1000px);
  background-color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-radio-button__input:checked + .cometchat-radio-button__custom {
  border-color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-radio-button__input:checked + .cometchat-radio-button__custom::after {
  display: block;
}
.cometchat-radio-button__label:hover .cometchat-radio-button__custom {
  border-color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-radio-button__input:focus-visible + .cometchat-radio-button__custom {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-radio-button__text {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}
.cometchat-radio-button--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.cometchat-radio-button--disabled .cometchat-radio-button__label {
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-radio-button__custom {
    transition: none;
  }
}

/* src/components/CometChatUsers/CometChatUsers.css */
.cometchat-users {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--cometchat-background-color-01, #fff);
  border-radius: var(--cometchat-border-radius-3, 8px);
  font-family: var(--cometchat-font-family, inherit);
}
.cometchat-users__header {
  display: flex;
  width: 100%;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  align-items: center;
  justify-content: space-between;
  gap: var(--cometchat-padding-3, 12px);
  align-self: stretch;
  border-bottom: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  min-height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.cometchat-users__header-title {
  overflow: hidden;
  color: var(--cometchat-text-color-primary, #141414);
  text-overflow: ellipsis;
  font: var(--cometchat-font-heading1-bold, 700 24px Roboto);
  margin: 0;
}
.cometchat-users__search-bar {
  padding: 12px 16px;
  flex-shrink: 0;
}
.cometchat-users__list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.cometchat-users__list--hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-users__list--hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.cometchat-users__section-header {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cometchat-background-color-01, #fff);
}
.cometchat-users__section-header-text {
  font-size: var(--cometchat-font-caption1-medium, 12px);
  font-weight: 500;
  color: var(--cometchat-primary-color, #6852d6);
  text-transform: uppercase;
}
.cometchat-users__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  position: relative;
}
.cometchat-users__item:hover:not(.cometchat-users__item--active) {
  background: var(--cometchat-background-color-02, #fafafa);
}
.cometchat-users__item--active {
  background-color: var(--cometchat-background-color-04, #e8e8e8);
}
.cometchat-users__item--selected {
  background: var(--cometchat-extended-primary-color-50, #f0f0ff);
}
.cometchat-users__item--active.cometchat-users__item--selected {
  background-color: var(--cometchat-background-color-04, #e8e8e8);
}
.cometchat-users__item:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: -2px;
  border-radius: 4px;
}
.cometchat-users__item-avatar {
  position: relative;
  flex-shrink: 0;
}
.cometchat-users__item-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--cometchat-background-color-01, #fff);
}
.cometchat-users__item-status--online {
  background: var(--cometchat-success-color, #09c26f);
}
.cometchat-users__item-status--offline {
  background: var(--cometchat-neutral-color-300, #b5b5b5);
}
.cometchat-users__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cometchat-users__item-title {
  font-size: var(--cometchat-font-body-regular, 14px);
  font-weight: 500;
  color: var(--cometchat-text-color-primary, #141414);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-users__item-subtitle {
  font-size: var(--cometchat-font-caption1-regular, 12px);
  font-weight: 400;
  color: var(--cometchat-text-color-secondary, #727272);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-users__item-trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.cometchat-users__item-menu {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cometchat-users__item:hover .cometchat-users__item-menu {
  opacity: 1;
}
.cometchat-users__sentinel {
  height: 1px;
  width: 100%;
}
.cometchat-users__loading-state {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  flex: 1;
}
.cometchat-users__shimmer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
}
.cometchat-users__shimmer-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  background-size: 800px 100%;
  animation: cometchat-users-shimmer 1.5s infinite linear;
  flex-shrink: 0;
}
.cometchat-users__shimmer-item-title {
  height: 14px;
  width: 120px;
  border-radius: var(--cometchat-border-radius-2, 8px);
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  background-size: 800px 100%;
  animation: cometchat-users-shimmer 1.5s infinite linear;
}
@keyframes cometchat-users-shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-users__shimmer-item-avatar,
  .cometchat-users__shimmer-item-title {
    animation: none;
  }
}
.cometchat-users__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  flex: 1;
  text-align: center;
}
.cometchat-users__empty-state-icon {
  width: 100px;
  height: 68px;
  margin-bottom: 12px;
  opacity: 0.6;
}
.cometchat-users__empty-state-title {
  font-size: var(--cometchat-font-heading4-bold, 16px);
  font-weight: 600;
  color: var(--cometchat-text-color-primary, #141414);
  margin-bottom: 4px;
}
.cometchat-users__empty-state-subtitle {
  font-size: var(--cometchat-font-body-regular, 14px);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-users__error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  flex: 1;
  text-align: center;
}
.cometchat-users__error-state-icon {
  width: 100px;
  height: 68px;
  margin-bottom: 12px;
  opacity: 0.6;
}
.cometchat-users__error-state-title {
  font-size: var(--cometchat-font-heading4-bold, 16px);
  font-weight: 600;
  color: var(--cometchat-text-color-primary, #141414);
  margin-bottom: 4px;
}
.cometchat-users__error-state-subtitle {
  font-size: var(--cometchat-font-body-regular, 14px);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-users__selected-preview {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: var(--cometchat-padding-4, 16px);
  padding-left: var(--cometchat-padding-4, 16px);
  padding-right: var(--cometchat-padding-4, 16px);
  padding-bottom: var(--cometchat-padding-2, 8px);
  background: var(--cometchat-background-color-01, #fff);
  border-top: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  box-sizing: border-box;
  overflow: hidden;
  z-index: 10;
}
.cometchat-users__selected-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cometchat-padding-2, 8px);
  max-height: calc(2 * (32px + var(--cometchat-padding-2, 8px)));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-users__selected-preview-container::-webkit-scrollbar {
  display: none;
}
.cometchat-users__selected-preview--hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-users__selected-preview--hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.cometchat-users__selected-preview-chip {
  display: flex;
  align-items: center;
  gap: var(--cometchat-padding-2, 8px);
  border: 1px solid var(--cometchat-border-color-default, #e8e8e8);
  padding: var(--cometchat-padding-1, 4px);
  background: var(--cometchat-background-color-03, #f5f5f5);
  border-radius: var(--cometchat-radius-max, 1000px);
  height: 32px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.cometchat-users__selected-preview-chip-avatar {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.cometchat-users__selected-preview-chip-avatar [data-size] {
  width: 24px;
  height: 24px;
}
.cometchat-users__selected-preview-chip-avatar [data-size] img {
  width: 24px;
  height: 24px;
}
.cometchat-users__selected-preview-chip-avatar [data-size] span {
  font: var(--cometchat-font-caption1-bold, 700 12px Roboto);
}
.cometchat-users__selected-preview-chip-name {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
  max-width: 48px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-users__selected-preview-chip-close {
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--cometchat-icon-color-secondary, #a1a1a1);
}
.cometchat-users__selected-preview-chip-close:hover {
  color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-users__selected-preview-chip-close:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 1px;
}

/* src/components/CometChatGroupMembers/CometChatGroupMembers.css */
.cometchat-group-members {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--cometchat-background-color-01, #fff);
  border-radius: var(--cometchat-border-radius-3, 8px);
  font-family: var(--cometchat-font-family, inherit);
  position: relative;
}
.cometchat-group-members__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  flex-shrink: 0;
}
.cometchat-group-members__header-title {
  font-size: var(--cometchat-font-heading4-bold, 16px);
  font-weight: 700;
  color: var(--cometchat-text-color-primary, #141414);
  margin: 0;
}
.cometchat-group-members__search-bar {
  padding: 0 16px 12px;
  flex-shrink: 0;
}
.cometchat-group-members__list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-group-members__list::-webkit-scrollbar {
  display: none;
}
.cometchat-group-members__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  position: relative;
}
.cometchat-group-members__item:hover {
  background: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-group-members__item--active {
  background: var(--cometchat-background-color-03, #ebebeb);
}
.cometchat-group-members__item--selected {
  background: var(--cometchat-extended-primary-color-50, #f0f0ff);
}
.cometchat-group-members__item:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: -2px;
  border-radius: 4px;
}
.cometchat-group-members__item-avatar {
  position: relative;
  flex-shrink: 0;
}
.cometchat-group-members__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cometchat-group-members__item-title {
  font-size: var(--cometchat-font-body-regular, 14px);
  font-weight: 500;
  color: var(--cometchat-text-color-primary, #141414);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-group-members__item-trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cometchat-group-members__item-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--cometchat-border-radius-max, 1000px);
  font: var(--cometchat-font-caption2-medium, 500 11px/16px var(--cometchat-font-family, inherit));
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.cometchat-group-members__item-role-badge--owner {
  background: var(--cometchat-primary-color, #6852d6);
  color: var(--cometchat-static-white, #fff);
}
.cometchat-group-members__item-role-badge--admin {
  background: transparent;
  color: var(--cometchat-text-color-highlight, #6852d6);
  border: 1px solid var(--cometchat-border-color-highlight, #6852d6);
}
.cometchat-group-members__item-role-badge--moderator {
  background: transparent;
  color: var(--cometchat-text-color-secondary, #727272);
  border: 1px solid var(--cometchat-neutral-color-300, #c4c4c4);
}
.cometchat-group-members__item-menu {
  display: none;
}
.cometchat-group-members__item:hover .cometchat-group-members__item-menu {
  display: flex;
}
.cometchat-group-members__item-menu [aria-haspopup=true] {
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
  width: auto;
  height: auto;
  border-radius: 0;
}
.cometchat-group-members__item-menu [aria-haspopup=true]:hover {
  background: none;
}
.cometchat-group-members__item:hover .cometchat-group-members__item-role-badge--has-menu {
  display: none;
}
.cometchat-group-members__sentinel {
  height: 1px;
  width: 100%;
}
.cometchat-group-members__loading-state {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  flex: 1;
}
.cometchat-group-members__shimmer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
}
.cometchat-group-members__shimmer-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  background-size: 800px 100%;
  animation: cometchat-group-members-shimmer 1.5s infinite linear;
  flex-shrink: 0;
}
.cometchat-group-members__shimmer-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cometchat-group-members__shimmer-item-title {
  height: 14px;
  width: 60%;
  border-radius: var(--cometchat-border-radius-2, 8px);
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  background-size: 800px 100%;
  animation: cometchat-group-members-shimmer 1.5s infinite linear;
}
.cometchat-group-members__shimmer-item-subtitle {
  height: 10px;
  width: 40%;
  border-radius: var(--cometchat-border-radius-2, 8px);
  background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  background-size: 800px 100%;
  animation: cometchat-group-members-shimmer 1.5s infinite linear;
}
@keyframes cometchat-group-members-shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-group-members__shimmer-item-avatar,
  .cometchat-group-members__shimmer-item-title,
  .cometchat-group-members__shimmer-item-subtitle {
    animation: none;
    background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%) );
  }
}
.cometchat-group-members__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  flex: 1;
  text-align: center;
  height: 100%;
}
.cometchat-group-members__empty-state-icon {
  width: 100px;
  height: 68px;
  margin-bottom: 12px;
}
.cometchat-group-members__empty-state-title {
  font-size: var(--cometchat-font-heading4-bold, 16px);
  font-weight: 600;
  color: var(--cometchat-text-color-primary, #141414);
  margin: 0 0 4px;
}
.cometchat-group-members__empty-state-subtitle {
  font-size: var(--cometchat-font-body-regular, 14px);
  color: var(--cometchat-text-color-secondary, #727272);
  margin: 0;
}
.cometchat-group-members__error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  flex: 1;
  text-align: center;
}
.cometchat-group-members__error-state-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 16px;
}
.cometchat-group-members__error-state-title {
  font-size: var(--cometchat-font-heading4-bold, 16px);
  font-weight: 600;
  color: var(--cometchat-text-color-primary, #141414);
  margin: 0 0 4px;
}
.cometchat-group-members__error-state-subtitle {
  font-size: var(--cometchat-font-body-regular, 14px);
  color: var(--cometchat-text-color-secondary, #727272);
  margin: 0;
}
.cometchat-group-members__backdrop {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* src/components/base/CometChatChangeScope/CometChatChangeScope.css */
.cometchat-change-scope {
  display: flex;
  width: 400px;
  padding: var(--cometchat-padding-6, 24px) var(--cometchat-padding-6, 24px) var(--cometchat-padding-3, 12px) var(--cometchat-padding-6, 24px);
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-padding-3, 12px);
  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;
}
.cometchat-change-scope:focus,
.cometchat-change-scope:focus-visible {
  outline: none;
}
.cometchat-change-scope__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-padding-2, 8px);
  align-self: stretch;
}
.cometchat-change-scope__icon-container {
  display: flex;
  width: 80px;
  height: 80px;
  justify-content: center;
  align-items: center;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-background-color-02, #fafafa);
}
.cometchat-change-scope__icon {
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  object-fit: contain;
}
.cometchat-change-scope__title {
  align-self: stretch;
  color: var(--cometchat-text-color-primary, #141414);
  text-align: center;
  font: var(--cometchat-font-heading2-medium, 500 20px Roboto);
  line-height: 120%;
  margin: 0;
}
.cometchat-change-scope__description {
  align-self: stretch;
  color: var(--cometchat-text-color-secondary, #727272);
  text-align: center;
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  line-height: 120%;
  margin: 0;
}
.cometchat-change-scope__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cometchat-padding-2, 8px);
  align-self: stretch;
  border-radius: var(--cometchat-radius-2, 8px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  height: fit-content;
  overflow: auto;
}
.cometchat-change-scope__list-item {
  display: flex;
  min-width: 240px;
  max-width: 1440px;
  height: 48px;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  align-items: center;
  gap: var(--cometchat-padding-3, 12px);
  flex: 1 0 0;
  align-self: stretch;
  background: var(--cometchat-background-color-01, #fff);
  cursor: pointer;
  box-sizing: border-box;
  margin: 0;
}
.cometchat-change-scope__list-item:hover {
  background: var(--cometchat-white-hover, #fafafa);
}
.cometchat-change-scope__list-item-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  color: var(--cometchat-text-color-primary, #141414);
  text-overflow: ellipsis;
  font: var(--cometchat-font-heading4-medium, 500 16px Roboto);
  flex: 1 0 0;
  text-align: left;
}
.cometchat-change-scope__button-container {
  display: flex;
  padding: var(--cometchat-padding-3, 12px) 0;
  align-items: center;
  gap: var(--cometchat-padding-2, 8px);
  align-self: stretch;
}
.cometchat-change-scope__cancel-button {
  flex: 1;
  height: 40px;
  line-height: 120%;
}
.cometchat-change-scope__submit-button {
  flex: 1;
  height: 40px;
  line-height: 120%;
}
.cometchat-change-scope__error-view {
  color: var(--cometchat-error-color, #f44649);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  font-style: normal;
  display: flex;
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--cometchat-padding-1, 4px);
  align-self: stretch;
  border-radius: var(--cometchat-radius-2, 8px);
  background: rgba(244, 70, 73, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-change-scope,
  .cometchat-change-scope * {
    animation-duration: 0s;
    transition-duration: 0s;
  }
}

/* src/components/base/CometChatTooltip/CometChatTooltip.css */
.cometchat-tooltip {
  --cometchat-tooltip-bg: var(--cometchat-neutral-color-900, #141414);
  position: fixed;
  z-index: 1000;
  max-width: 200px;
  width: max-content;
  padding: 6px 8px;
  border-radius: var(--cometchat-radius-2, 8px);
  background: var(--cometchat-tooltip-bg);
  color: var(--cometchat-static-white, #f9f8fd);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  text-align: center;
  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  pointer-events: none;
}
[data-theme=dark] .cometchat-tooltip {
  --cometchat-tooltip-bg: var(--cometchat-neutral-color-300, #383838);
}
.cometchat-tooltip--arrow-left {
  --cometchat-tooltip-arrow-left: 16px;
}
.cometchat-tooltip--arrow-middle {
  --cometchat-tooltip-arrow-left: 50%;
}
.cometchat-tooltip--arrow-right {
  --cometchat-tooltip-arrow-left: calc(100% - 16px);
}
.cometchat-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--cometchat-tooltip-arrow-left, 50%);
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--cometchat-tooltip-bg);
}

/* src/components/CometChatMessageComposer/CometChatMessageComposerTray.css */
:root {
  --cometchat-tray-tile-size: 64px;
}
.cometchat-message-composer__tray {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 0;
}
.cometchat-message-composer__tray-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 12px 4px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.cometchat-message-composer__tray-list::-webkit-scrollbar {
  display: none;
}
.cometchat-message-composer__tray-tile {
  position: relative;
  flex: 0 0 auto;
  height: var(--cometchat-tray-tile-size);
  box-sizing: border-box;
  overflow: visible;
}
.cometchat-message-composer__tray-tile--image,
.cometchat-message-composer__tray-tile--video {
  width: var(--cometchat-tray-tile-size);
}
.cometchat-message-composer__tray-tile--failed .cometchat-message-composer__tray-thumbnail,
.cometchat-message-composer__tray-tile--rejected .cometchat-message-composer__tray-thumbnail {
  box-sizing: border-box;
  border: 1.5px solid var(--cometchat-error-color, #f44649);
}
.cometchat-message-composer__tray-tile--failed .cometchat-message-composer__tray-card,
.cometchat-message-composer__tray-tile--rejected .cometchat-message-composer__tray-card {
  border-color: var(--cometchat-error-color, #f44649);
}
.cometchat-message-composer__tray-thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--cometchat-radius-3, 8px);
  overflow: hidden;
  background-color: var(--cometchat-neutral-color-300, #dcdcdc);
}
.cometchat-message-composer__tray-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cometchat-message-composer__tray-thumbnail--blank {
  background-color: var(--cometchat-background-color-01, #ffffff);
}
.cometchat-message-composer__tray-thumbnail--interactive {
  cursor: pointer;
}
.cometchat-message-composer__tray-thumbnail--interactive:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-message-composer__tray-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: rgba(0, 0, 0, 0.45);
  background: rgba(127, 127, 127, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cometchat-message-composer__tray-play img {
  filter: brightness(0) invert(1);
}
.cometchat-message-composer__tray-duration {
  position: absolute;
  bottom: 2px;
  left: 4px;
  padding: 1px 4px;
  border-radius: var(--cometchat-radius-1, 4px);
  background: rgba(0, 0, 0, 0.5);
  font: var(--cometchat-font-caption2-medium, 500 10px/12px sans-serif);
  color: var(--cometchat-static-neutral-100, #f5f5f5);
  pointer-events: none;
}
.cometchat-message-composer__tray-card {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  width: 200px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--cometchat-neutral-color-300);
  border-radius: var(--cometchat-radius-3, 8px);
  background: var(--cometchat-background-color-03, #fafafa);
}
.cometchat-message-composer__tray-card-icon {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--cometchat-radius-2, 6px);
}
.cometchat-message-composer__tray-card-icon img.cometchat-message-composer__tray-card-icon--file {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.cometchat-message-composer__tray-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.cometchat-message-composer__tray-filename {
  font: var(--cometchat-font-body-medium, 500 14px/17px sans-serif);
  color: var(--cometchat-text-color-primary, #141414);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-message-composer__tray-card-meta {
  display: flex;
  align-items: center;
  min-width: 0;
  font: var(--cometchat-font-caption1-regular, 400 12px/16px sans-serif);
  color: var(--cometchat-text-color-secondary, #727272);
  text-transform: uppercase;
}
.cometchat-message-composer__tray-status-text {
  color: var(--cometchat-error-color, #f44649);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-message-composer__tray-card-meta .cometchat-message-composer__tray-status-text::before {
  content: "\b7";
  margin: 0 4px;
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-composer__tray-status-text--audio {
  font: var(--cometchat-font-caption1-regular, 400 11px/14px sans-serif);
}
.cometchat-message-composer__tray-card--audio {
  width: 200px;
  gap: 10px;
  padding: 0 14px 0 8px;
}
.cometchat-message-composer__tray-audio-btn-wrap {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
}
.cometchat-message-composer__tray-audio-btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-composer__tray-audio-btn img.cometchat-message-composer__tray-audio-btn--play-icon {
  filter: brightness(0) invert(1);
}
.cometchat-message-composer__tray-audio-btn {
  border: none;
  cursor: pointer;
  padding: 0;
}
.cometchat-message-composer__tray-audio-btn:disabled {
  cursor: default;
}
.cometchat-message-composer__tray-audio-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.cometchat-message-composer__tray-audio-body:has(.cometchat-message-composer__tray-status-text) {
  gap: 1px;
}
.cometchat-message-composer__tray-audio-name {
  margin-bottom: 4px;
  font: var(--cometchat-font-caption1-medium, 500 12px/16px sans-serif);
  color: var(--cometchat-text-color-primary, #141414);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-message-composer__tray-audio-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-neutral-color-300, #dcdcdc);
  cursor: pointer;
}
.cometchat-message-composer__tray-audio-slider:disabled {
  cursor: default;
}
.cometchat-message-composer__tray-audio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-static-white, #fff);
  border: none;
}
.cometchat-message-composer__tray-audio-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-primary-color, #6852d6);
  border: none;
}
.cometchat-message-composer__tray-audio-slider::-moz-range-track {
  background: transparent;
}
.cometchat-message-composer__tray-audio-time {
  margin-top: 4px;
  font: var(--cometchat-font-caption2-regular, 400 11px/14px sans-serif);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-composer__tray-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
}
.cometchat-message-composer__tray-card-icon .cometchat-message-composer__tray-overlay {
  border-radius: var(--cometchat-radius-2, 8px);
}
.cometchat-message-composer__tray-audio-btn-wrap .cometchat-message-composer__tray-overlay {
  border-radius: var(--cometchat-radius-max, 1000px);
}
.cometchat-message-composer__tray-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cometchat-message-composer__tray-progress svg {
  transform: rotate(-90deg);
}
.cometchat-message-composer__tray-progress-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 3;
}
.cometchat-message-composer__tray-progress-indicator {
  fill: none;
  stroke: var(--cometchat-static-white, #fff);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.2s ease;
}
.cometchat-message-composer__tray-progress--indeterminate svg {
  animation: cometchat-message-composer__tray-progress-spin 0.9s linear infinite;
}
.cometchat-message-composer__tray-progress--indeterminate .cometchat-message-composer__tray-progress-indicator {
  transition: none;
}
@keyframes cometchat-message-composer__tray-progress-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-message-composer__tray-progress--indeterminate svg {
    animation: none;
  }
}
.cometchat-message-composer__tray-retry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: var(--cometchat-radius-max, 1000px);
}
.cometchat-message-composer__tray-rejected-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  border-radius: 50%;
}
.cometchat-message-composer__tray-remove-button {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  border: 3px solid var(--cometchat-background-color-01, #fff);
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-static-neutral-700, #a1a1a1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.cometchat-message-composer__tray-tile:hover .cometchat-message-composer__tray-remove-button,
.cometchat-message-composer__tray-remove-button:focus-visible {
  opacity: 1;
  visibility: visible;
}
.cometchat-message-composer__tray-remove-button img {
  filter: brightness(0) invert(1);
}
.cometchat-message-composer__tray-remove-button:hover {
  background: var(--cometchat-static-neutral-400, #727272);
}
.cometchat-message-composer__tray-remove-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}

/* src/components/base/CometChatFullScreenViewer/CometChatFullScreenViewer.css */
.cometchat-fullscreen-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  outline: none;
}
.cometchat-fullscreen-viewer__header {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
  background: var(--cometchat-background-color-01, #fff);
  border-bottom: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  z-index: 10;
  box-sizing: border-box;
}
.cometchat-fullscreen-viewer__header-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.cometchat-fullscreen-viewer__header-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  padding: 0 var(--cometchat-padding-4, 16px);
  overflow: hidden;
}
.cometchat-fullscreen-viewer__header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-fullscreen-viewer__sender-info {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-fullscreen-viewer__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--cometchat-radius-max, 1000px);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--cometchat-neutral-color-300, #d1d1d1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cometchat-fullscreen-viewer__avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cometchat-fullscreen-viewer__avatar-initials {
  font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-fullscreen-viewer__sender-details {
  display: flex;
  flex-direction: column;
}
.cometchat-fullscreen-viewer__sender-name {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cometchat-fullscreen-viewer__sender-status {
  color: var(--cometchat-success-color, #09c26f);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  white-space: nowrap;
}
.cometchat-fullscreen-viewer__sender-date {
  color: var(--cometchat-text-color-tertiary, #8a8a8a);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  white-space: nowrap;
}
.cometchat-fullscreen-viewer__file-info-header {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
  color: var(--cometchat-text-color-secondary, #666);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  overflow: hidden;
}
.cometchat-fullscreen-viewer__file-info-name {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}
.cometchat-fullscreen-viewer__file-info-separator {
  color: var(--cometchat-text-color-tertiary, #8a8a8a);
}
.cometchat-fullscreen-viewer__file-info-size,
.cometchat-fullscreen-viewer__file-info-type {
  color: var(--cometchat-text-color-secondary, #666);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  white-space: nowrap;
}
.cometchat-fullscreen-viewer__index-display {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
  background-color: var(--cometchat-background-color-02, #f5f5f5);
  border-radius: var(--cometchat-radius-2, 8px);
  white-space: nowrap;
}
.cometchat-fullscreen-viewer__action-button {
  background: transparent;
  border: none;
  padding: var(--cometchat-padding-2, 8px);
  border-radius: var(--cometchat-radius-2, 8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: background-color 150ms ease;
}
.cometchat-fullscreen-viewer__action-button:hover {
  background-color: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-fullscreen-viewer__action-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-fullscreen-viewer__close-icon {
  width: 20px;
  height: 20px;
  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: 100%;
  mask-size: 100%;
}
.cometchat-fullscreen-viewer__download-action-icon {
  width: 20px;
  height: 20px;
  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_8320" 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_8320)">%0A<path d="M12 15.4115C11.8795 15.4115 11.7673 15.3923 11.6635 15.3538C11.5597 15.3154 11.4609 15.2494 11.3672 15.1558L8.25775 12.0463C8.10908 11.8974 8.03567 11.7233 8.0375 11.524C8.0395 11.3247 8.11292 11.1474 8.25775 10.9922C8.41292 10.8372 8.59108 10.7572 8.79225 10.752C8.99358 10.7468 9.17183 10.8218 9.327 10.977L11.25 12.9V5.25C11.25 5.03717 11.3218 4.859 11.4655 4.7155C11.609 4.57183 11.7872 4.5 12 4.5C12.2128 4.5 12.391 4.57183 12.5345 4.7155C12.6782 4.859 12.75 5.03717 12.75 5.25V12.9L14.673 10.977C14.8218 10.8283 14.9984 10.7549 15.2028 10.7568C15.4073 10.7588 15.5871 10.8372 15.7423 10.9922C15.8871 11.1474 15.9621 11.3231 15.9672 11.5192C15.9724 11.7154 15.8974 11.8911 15.7423 12.0463L12.6328 15.1558C12.5391 15.2494 12.4403 15.3154 12.3365 15.3538C12.2327 15.3923 12.1205 15.4115 12 15.4115ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V15.7308C4.5 15.5179 4.57183 15.3398 4.7155 15.1962C4.859 15.0526 5.03717 14.9808 5.25 14.9808C5.46283 14.9808 5.641 15.0526 5.7845 15.1962C5.92817 15.3398 6 15.5179 6 15.7308V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V15.7308C18 15.5179 18.0718 15.3398 18.2155 15.1962C18.359 15.0526 18.5372 14.9808 18.75 14.9808C18.9628 14.9808 19.141 15.0526 19.2845 15.1962C19.4282 15.3398 19.5 15.5179 19.5 15.7308V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" 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_8320" 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_8320)">%0A<path d="M12 15.4115C11.8795 15.4115 11.7673 15.3923 11.6635 15.3538C11.5597 15.3154 11.4609 15.2494 11.3672 15.1558L8.25775 12.0463C8.10908 11.8974 8.03567 11.7233 8.0375 11.524C8.0395 11.3247 8.11292 11.1474 8.25775 10.9922C8.41292 10.8372 8.59108 10.7572 8.79225 10.752C8.99358 10.7468 9.17183 10.8218 9.327 10.977L11.25 12.9V5.25C11.25 5.03717 11.3218 4.859 11.4655 4.7155C11.609 4.57183 11.7872 4.5 12 4.5C12.2128 4.5 12.391 4.57183 12.5345 4.7155C12.6782 4.859 12.75 5.03717 12.75 5.25V12.9L14.673 10.977C14.8218 10.8283 14.9984 10.7549 15.2028 10.7568C15.4073 10.7588 15.5871 10.8372 15.7423 10.9922C15.8871 11.1474 15.9621 11.3231 15.9672 11.5192C15.9724 11.7154 15.8974 11.8911 15.7423 12.0463L12.6328 15.1558C12.5391 15.2494 12.4403 15.3154 12.3365 15.3538C12.2327 15.3923 12.1205 15.4115 12 15.4115ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V15.7308C4.5 15.5179 4.57183 15.3398 4.7155 15.1962C4.859 15.0526 5.03717 14.9808 5.25 14.9808C5.46283 14.9808 5.641 15.0526 5.7845 15.1962C5.92817 15.3398 6 15.5179 6 15.7308V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V15.7308C18 15.5179 18.0718 15.3398 18.2155 15.1962C18.359 15.0526 18.5372 14.9808 18.75 14.9808C18.9628 14.9808 19.141 15.0526 19.2845 15.1962C19.4282 15.3398 19.5 15.5179 19.5 15.7308V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
}
.cometchat-fullscreen-viewer__body {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  max-height: 80%;
}
.cometchat-fullscreen-viewer__body-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.cometchat-fullscreen-viewer__video-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 80vh;
}
.cometchat-fullscreen-viewer__body-video {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--cometchat-radius-2, 8px);
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.cometchat-fullscreen-viewer__body-video:focus {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-fullscreen-viewer__body-video--loading {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cometchat-fullscreen-viewer__audio-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-spacing-4, 16px);
  padding: var(--cometchat-padding-6, 24px);
  background-color: var(--cometchat-background-color-03, #f0f0f0);
  border-radius: var(--cometchat-radius-3, 12px);
  min-width: 300px;
}
.cometchat-fullscreen-viewer__audio-icon {
  width: 64px;
  height: 64px;
  background-color: var(--cometchat-primary-color, #6852d6);
  -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="M7.375 16.8077V7.19225C7.375 6.97975 7.44692 6.80167 7.59075 6.658C7.73458 6.51417 7.91275 6.44225 8.12525 6.44225C8.33792 6.44225 8.516 6.51417 8.6595 6.658C8.80317 6.80167 8.875 6.97975 8.875 7.19225V16.8077C8.875 17.0203 8.80308 17.1983 8.65925 17.342C8.51542 17.4858 8.33725 17.5577 8.12475 17.5577C7.91208 17.5577 7.734 17.4858 7.5905 17.342C7.44683 17.1983 7.375 17.0203 7.375 16.8077ZM11.25 20.75V3.25C11.25 3.0375 11.3219 2.85942 11.4658 2.71575C11.6096 2.57192 11.7878 2.5 12.0003 2.5C12.2129 2.5 12.391 2.57192 12.5345 2.71575C12.6782 2.85942 12.75 3.0375 12.75 3.25V20.75C12.75 20.9625 12.6781 21.1406 12.5343 21.2843C12.3904 21.4281 12.2122 21.5 11.9998 21.5C11.7871 21.5 11.609 21.4281 11.4655 21.2843C11.3218 21.1406 11.25 20.9625 11.25 20.75ZM3.5 12.9038V11.0962C3.5 10.8837 3.57192 10.7056 3.71575 10.5617C3.85958 10.4181 4.03775 10.3462 4.25025 10.3462C4.46292 10.3462 4.641 10.4181 4.7845 10.5617C4.92817 10.7056 5 10.8837 5 11.0962V12.9038C5 13.1163 4.92808 13.2944 4.78425 13.4383C4.64042 13.5819 4.46225 13.6538 4.24975 13.6538C4.03708 13.6538 3.859 13.5819 3.7155 13.4383C3.57183 13.2944 3.5 13.1163 3.5 12.9038ZM15.125 16.8077V7.19225C15.125 6.97975 15.1969 6.80167 15.3408 6.658C15.4846 6.51417 15.6628 6.44225 15.8753 6.44225C16.0879 6.44225 16.266 6.51417 16.4095 6.658C16.5532 6.80167 16.625 6.97975 16.625 7.19225V16.8077C16.625 17.0203 16.5531 17.1983 16.4093 17.342C16.2654 17.4858 16.0872 17.5577 15.8748 17.5577C15.6621 17.5577 15.484 17.4858 15.3405 17.342C15.1968 17.1983 15.125 17.0203 15.125 16.8077ZM19 12.9038V11.0962C19 10.8837 19.0719 10.7056 19.2158 10.5617C19.3596 10.4181 19.5378 10.3462 19.7502 10.3462C19.9629 10.3462 20.141 10.4181 20.2845 10.5617C20.4282 10.7056 20.5 10.8837 20.5 11.0962V12.9038C20.5 13.1163 20.4281 13.2944 20.2843 13.4383C20.1404 13.5819 19.9622 13.6538 19.7498 13.6538C19.5371 13.6538 19.359 13.5819 19.2155 13.4383C19.0718 13.2944 19 13.1163 19 12.9038Z" fill="%23141414"/>%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<path d="M7.375 16.8077V7.19225C7.375 6.97975 7.44692 6.80167 7.59075 6.658C7.73458 6.51417 7.91275 6.44225 8.12525 6.44225C8.33792 6.44225 8.516 6.51417 8.6595 6.658C8.80317 6.80167 8.875 6.97975 8.875 7.19225V16.8077C8.875 17.0203 8.80308 17.1983 8.65925 17.342C8.51542 17.4858 8.33725 17.5577 8.12475 17.5577C7.91208 17.5577 7.734 17.4858 7.5905 17.342C7.44683 17.1983 7.375 17.0203 7.375 16.8077ZM11.25 20.75V3.25C11.25 3.0375 11.3219 2.85942 11.4658 2.71575C11.6096 2.57192 11.7878 2.5 12.0003 2.5C12.2129 2.5 12.391 2.57192 12.5345 2.71575C12.6782 2.85942 12.75 3.0375 12.75 3.25V20.75C12.75 20.9625 12.6781 21.1406 12.5343 21.2843C12.3904 21.4281 12.2122 21.5 11.9998 21.5C11.7871 21.5 11.609 21.4281 11.4655 21.2843C11.3218 21.1406 11.25 20.9625 11.25 20.75ZM3.5 12.9038V11.0962C3.5 10.8837 3.57192 10.7056 3.71575 10.5617C3.85958 10.4181 4.03775 10.3462 4.25025 10.3462C4.46292 10.3462 4.641 10.4181 4.7845 10.5617C4.92817 10.7056 5 10.8837 5 11.0962V12.9038C5 13.1163 4.92808 13.2944 4.78425 13.4383C4.64042 13.5819 4.46225 13.6538 4.24975 13.6538C4.03708 13.6538 3.859 13.5819 3.7155 13.4383C3.57183 13.2944 3.5 13.1163 3.5 12.9038ZM15.125 16.8077V7.19225C15.125 6.97975 15.1969 6.80167 15.3408 6.658C15.4846 6.51417 15.6628 6.44225 15.8753 6.44225C16.0879 6.44225 16.266 6.51417 16.4095 6.658C16.5532 6.80167 16.625 6.97975 16.625 7.19225V16.8077C16.625 17.0203 16.5531 17.1983 16.4093 17.342C16.2654 17.4858 16.0872 17.5577 15.8748 17.5577C15.6621 17.5577 15.484 17.4858 15.3405 17.342C15.1968 17.1983 15.125 17.0203 15.125 16.8077ZM19 12.9038V11.0962C19 10.8837 19.0719 10.7056 19.2158 10.5617C19.3596 10.4181 19.5378 10.3462 19.7502 10.3462C19.9629 10.3462 20.141 10.4181 20.2845 10.5617C20.4282 10.7056 20.5 10.8837 20.5 11.0962V12.9038C20.5 13.1163 20.4281 13.2944 20.2843 13.4383C20.1404 13.5819 19.9622 13.6538 19.7498 13.6538C19.5371 13.6538 19.359 13.5819 19.2155 13.4383C19.0718 13.2944 19 13.1163 19 12.9038Z" fill="%23141414"/>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
}
.cometchat-fullscreen-viewer__body-audio {
  width: 100%;
  max-width: 400px;
}
.cometchat-fullscreen-viewer__body-audio:focus {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-fullscreen-viewer__audio-filename {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-medium, 500 14px Roboto);
  text-align: center;
  word-break: break-word;
}
.cometchat-fullscreen-viewer__file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-spacing-4, 16px);
  padding: var(--cometchat-padding-8, 32px);
  background-color: var(--cometchat-background-color-03, #f0f0f0);
  border-radius: var(--cometchat-radius-3, 12px);
  min-width: 280px;
  max-width: 400px;
}
.cometchat-fullscreen-viewer__file-icon {
  position: relative;
  width: 80px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cometchat-fullscreen-viewer__file-icon-inner {
  width: 100%;
  height: 100%;
  background-color: var(--cometchat-icon-color-secondary, #a1a1a1);
  -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_8414" 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_8414)">%0A<path d="M9 17.75H15C15.2125 17.75 15.3906 17.6781 15.5343 17.5343C15.6781 17.3904 15.75 17.2122 15.75 16.9998C15.75 16.7871 15.6781 16.609 15.5343 16.4655C15.3906 16.3218 15.2125 16.25 15 16.25H9C8.7875 16.25 8.60942 16.3219 8.46575 16.4658C8.32192 16.6096 8.25 16.7878 8.25 17.0003C8.25 17.2129 8.32192 17.391 8.46575 17.5345C8.60942 17.6782 8.7875 17.75 9 17.75ZM9 13.75H15C15.2125 13.75 15.3906 13.6781 15.5343 13.5343C15.6781 13.3904 15.75 13.2122 15.75 12.9998C15.75 12.7871 15.6781 12.609 15.5343 12.4655C15.3906 12.3218 15.2125 12.25 15 12.25H9C8.7875 12.25 8.60942 12.3219 8.46575 12.4658C8.32192 12.6096 8.25 12.7878 8.25 13.0003C8.25 13.2129 8.32192 13.391 8.46575 13.5345C8.60942 13.6782 8.7875 13.75 9 13.75ZM6.30775 21.5C5.80258 21.5 5.375 21.325 5.025 20.975C4.675 20.625 4.5 20.1974 4.5 19.6923V4.30775C4.5 3.80258 4.675 3.375 5.025 3.025C5.375 2.675 5.80258 2.5 6.30775 2.5H13.502C13.7458 2.5 13.9782 2.54683 14.1992 2.6405C14.4202 2.734 14.6128 2.86283 14.777 3.027L18.973 7.223C19.1372 7.38717 19.266 7.57975 19.3595 7.80075C19.4532 8.02175 19.5 8.25417 19.5 8.498V19.6923C19.5 20.1974 19.325 20.625 18.975 20.975C18.625 21.325 18.1974 21.5 17.6923 21.5H6.30775ZM13.5 7.6C13.5 7.855 13.5863 8.06875 13.7587 8.24125C13.9312 8.41375 14.145 8.5 14.4 8.5H18L13.5 4V7.6Z" 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_8414" 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_8414)">%0A<path d="M9 17.75H15C15.2125 17.75 15.3906 17.6781 15.5343 17.5343C15.6781 17.3904 15.75 17.2122 15.75 16.9998C15.75 16.7871 15.6781 16.609 15.5343 16.4655C15.3906 16.3218 15.2125 16.25 15 16.25H9C8.7875 16.25 8.60942 16.3219 8.46575 16.4658C8.32192 16.6096 8.25 16.7878 8.25 17.0003C8.25 17.2129 8.32192 17.391 8.46575 17.5345C8.60942 17.6782 8.7875 17.75 9 17.75ZM9 13.75H15C15.2125 13.75 15.3906 13.6781 15.5343 13.5343C15.6781 13.3904 15.75 13.2122 15.75 12.9998C15.75 12.7871 15.6781 12.609 15.5343 12.4655C15.3906 12.3218 15.2125 12.25 15 12.25H9C8.7875 12.25 8.60942 12.3219 8.46575 12.4658C8.32192 12.6096 8.25 12.7878 8.25 13.0003C8.25 13.2129 8.32192 13.391 8.46575 13.5345C8.60942 13.6782 8.7875 13.75 9 13.75ZM6.30775 21.5C5.80258 21.5 5.375 21.325 5.025 20.975C4.675 20.625 4.5 20.1974 4.5 19.6923V4.30775C4.5 3.80258 4.675 3.375 5.025 3.025C5.375 2.675 5.80258 2.5 6.30775 2.5H13.502C13.7458 2.5 13.9782 2.54683 14.1992 2.6405C14.4202 2.734 14.6128 2.86283 14.777 3.027L18.973 7.223C19.1372 7.38717 19.266 7.57975 19.3595 7.80075C19.4532 8.02175 19.5 8.25417 19.5 8.498V19.6923C19.5 20.1974 19.325 20.625 18.975 20.975C18.625 21.325 18.1974 21.5 17.6923 21.5H6.30775ZM13.5 7.6C13.5 7.855 13.5863 8.06875 13.7587 8.24125C13.9312 8.41375 14.145 8.5 14.4 8.5H18L13.5 4V7.6Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.cometchat-fullscreen-viewer__file-extension {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--cometchat-primary-color, #6852d6);
  color: var(--cometchat-static-white, #fff);
  font: var(--cometchat-font-caption2-bold, 700 10px Roboto);
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
  border-radius: var(--cometchat-radius-1, 4px);
  text-transform: uppercase;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-fullscreen-viewer__file-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-spacing-1, 4px);
  width: 100%;
}
.cometchat-fullscreen-viewer__file-preview-name {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-heading4-medium, 500 16px Roboto);
  text-align: center;
  word-break: break-word;
}
.cometchat-fullscreen-viewer__file-preview-size {
  color: var(--cometchat-text-color-secondary, #666);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
}
.cometchat-fullscreen-viewer__download-button {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
  background-color: var(--cometchat-primary-button-background, #6852d6);
  color: var(--cometchat-primary-button-text, #fff);
  font: var(--cometchat-font-button-medium, 500 14px Roboto);
  border-radius: var(--cometchat-radius-2, 8px);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 150ms ease;
}
.cometchat-fullscreen-viewer__download-button:hover {
  opacity: 0.9;
}
.cometchat-fullscreen-viewer__download-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-fullscreen-viewer__download-icon {
  width: 16px;
  height: 16px;
  background-color: var(--cometchat-primary-button-icon, #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<mask id="mask0_740_8320" 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_8320)">%0A<path d="M12 15.4115C11.8795 15.4115 11.7673 15.3923 11.6635 15.3538C11.5597 15.3154 11.4609 15.2494 11.3672 15.1558L8.25775 12.0463C8.10908 11.8974 8.03567 11.7233 8.0375 11.524C8.0395 11.3247 8.11292 11.1474 8.25775 10.9922C8.41292 10.8372 8.59108 10.7572 8.79225 10.752C8.99358 10.7468 9.17183 10.8218 9.327 10.977L11.25 12.9V5.25C11.25 5.03717 11.3218 4.859 11.4655 4.7155C11.609 4.57183 11.7872 4.5 12 4.5C12.2128 4.5 12.391 4.57183 12.5345 4.7155C12.6782 4.859 12.75 5.03717 12.75 5.25V12.9L14.673 10.977C14.8218 10.8283 14.9984 10.7549 15.2028 10.7568C15.4073 10.7588 15.5871 10.8372 15.7423 10.9922C15.8871 11.1474 15.9621 11.3231 15.9672 11.5192C15.9724 11.7154 15.8974 11.8911 15.7423 12.0463L12.6328 15.1558C12.5391 15.2494 12.4403 15.3154 12.3365 15.3538C12.2327 15.3923 12.1205 15.4115 12 15.4115ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V15.7308C4.5 15.5179 4.57183 15.3398 4.7155 15.1962C4.859 15.0526 5.03717 14.9808 5.25 14.9808C5.46283 14.9808 5.641 15.0526 5.7845 15.1962C5.92817 15.3398 6 15.5179 6 15.7308V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V15.7308C18 15.5179 18.0718 15.3398 18.2155 15.1962C18.359 15.0526 18.5372 14.9808 18.75 14.9808C18.9628 14.9808 19.141 15.0526 19.2845 15.1962C19.4282 15.3398 19.5 15.5179 19.5 15.7308V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" 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_8320" 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_8320)">%0A<path d="M12 15.4115C11.8795 15.4115 11.7673 15.3923 11.6635 15.3538C11.5597 15.3154 11.4609 15.2494 11.3672 15.1558L8.25775 12.0463C8.10908 11.8974 8.03567 11.7233 8.0375 11.524C8.0395 11.3247 8.11292 11.1474 8.25775 10.9922C8.41292 10.8372 8.59108 10.7572 8.79225 10.752C8.99358 10.7468 9.17183 10.8218 9.327 10.977L11.25 12.9V5.25C11.25 5.03717 11.3218 4.859 11.4655 4.7155C11.609 4.57183 11.7872 4.5 12 4.5C12.2128 4.5 12.391 4.57183 12.5345 4.7155C12.6782 4.859 12.75 5.03717 12.75 5.25V12.9L14.673 10.977C14.8218 10.8283 14.9984 10.7549 15.2028 10.7568C15.4073 10.7588 15.5871 10.8372 15.7423 10.9922C15.8871 11.1474 15.9621 11.3231 15.9672 11.5192C15.9724 11.7154 15.8974 11.8911 15.7423 12.0463L12.6328 15.1558C12.5391 15.2494 12.4403 15.3154 12.3365 15.3538C12.2327 15.3923 12.1205 15.4115 12 15.4115ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V15.7308C4.5 15.5179 4.57183 15.3398 4.7155 15.1962C4.859 15.0526 5.03717 14.9808 5.25 14.9808C5.46283 14.9808 5.641 15.0526 5.7845 15.1962C5.92817 15.3398 6 15.5179 6 15.7308V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V15.7308C18 15.5179 18.0718 15.3398 18.2155 15.1962C18.359 15.0526 18.5372 14.9808 18.75 14.9808C18.9628 14.9808 19.141 15.0526 19.2845 15.1962C19.4282 15.3398 19.5 15.5179 19.5 15.7308V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
}
.cometchat-fullscreen-viewer__nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-color: rgba(20, 20, 20, 0.6);
  border: none;
  border-radius: var(--cometchat-radius-2, 8px);
  cursor: pointer;
  transition: background-color 150ms ease;
  z-index: 10;
}
.cometchat-fullscreen-viewer__nav-button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.2);
}
.cometchat-fullscreen-viewer__nav-button:active:not(:disabled) {
  transform: translateY(-50%) scale(0.95);
}
.cometchat-fullscreen-viewer__nav-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-fullscreen-viewer__nav-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cometchat-fullscreen-viewer__nav-button--prev {
  left: var(--cometchat-spacing-4, 16px);
}
.cometchat-fullscreen-viewer__nav-button--next {
  right: var(--cometchat-spacing-4, 16px);
}
.cometchat-fullscreen-viewer__nav-icon-prev,
.cometchat-fullscreen-viewer__nav-icon-next {
  width: 24px;
  height: 24px;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: var(--cometchat-static-white, #fff);
}
.cometchat-fullscreen-viewer__nav-icon-prev {
  -webkit-mask-image: 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_8318" 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_8318)">%0A<path d="M7.37295 12.75L12.5422 17.9192C12.6909 18.0679 12.7643 18.2419 12.7625 18.4412C12.7605 18.6406 12.682 18.8178 12.527 18.973C12.3718 19.1178 12.1961 19.1928 12 19.198C11.8038 19.2032 11.6281 19.1282 11.473 18.973L5.1327 12.6327C5.03904 12.5391 4.97304 12.4403 4.9347 12.3365C4.8962 12.2327 4.87695 12.1205 4.87695 12C4.87695 11.8795 4.8962 11.7673 4.9347 11.6635C4.97304 11.5597 5.03904 11.4609 5.1327 11.3672L11.473 5.02699C11.6115 4.88849 11.783 4.81766 11.9875 4.81449C12.192 4.81133 12.3718 4.88216 12.527 5.02699C12.682 5.18216 12.7595 5.36033 12.7595 5.56149C12.7595 5.76283 12.682 5.94108 12.527 6.09624L7.37295 11.25H18.75C18.9628 11.25 19.141 11.3218 19.2845 11.4655C19.4281 11.609 19.5 11.7872 19.5 12C19.5 12.2128 19.4281 12.391 19.2845 12.5345C19.141 12.6782 18.9628 12.75 18.75 12.75H7.37295Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  mask-image: 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_8318" 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_8318)">%0A<path d="M7.37295 12.75L12.5422 17.9192C12.6909 18.0679 12.7643 18.2419 12.7625 18.4412C12.7605 18.6406 12.682 18.8178 12.527 18.973C12.3718 19.1178 12.1961 19.1928 12 19.198C11.8038 19.2032 11.6281 19.1282 11.473 18.973L5.1327 12.6327C5.03904 12.5391 4.97304 12.4403 4.9347 12.3365C4.8962 12.2327 4.87695 12.1205 4.87695 12C4.87695 11.8795 4.8962 11.7673 4.9347 11.6635C4.97304 11.5597 5.03904 11.4609 5.1327 11.3672L11.473 5.02699C11.6115 4.88849 11.783 4.81766 11.9875 4.81449C12.192 4.81133 12.3718 4.88216 12.527 5.02699C12.682 5.18216 12.7595 5.36033 12.7595 5.56149C12.7595 5.76283 12.682 5.94108 12.527 6.09624L7.37295 11.25H18.75C18.9628 11.25 19.141 11.3218 19.2845 11.4655C19.4281 11.609 19.5 11.7872 19.5 12C19.5 12.2128 19.4281 12.391 19.2845 12.5345C19.141 12.6782 18.9628 12.75 18.75 12.75H7.37295Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
}
.cometchat-fullscreen-viewer__nav-icon-next {
  -webkit-mask-image: 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_8340" 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_8340)">%0A<path d="M16.627 12.75H5.25C5.03717 12.75 4.859 12.6782 4.7155 12.5345C4.57183 12.391 4.5 12.2128 4.5 12C4.5 11.7872 4.57183 11.609 4.7155 11.4655C4.859 11.3218 5.03717 11.25 5.25 11.25H16.627L11.4577 6.08076C11.3091 5.93209 11.2357 5.75809 11.2375 5.55876C11.2395 5.35942 11.318 5.18217 11.473 5.02701C11.6282 4.88217 11.8038 4.80717 12 4.80201C12.1962 4.79684 12.3718 4.87184 12.527 5.02701L18.8673 11.3673C18.9609 11.4609 19.0269 11.5597 19.0652 11.6635C19.1037 11.7673 19.123 11.8795 19.123 12C19.123 12.1205 19.1037 12.2327 19.0652 12.3365C19.0269 12.4403 18.9609 12.5391 18.8673 12.6328L12.527 18.973C12.3885 19.1115 12.217 19.1823 12.0125 19.1855C11.808 19.1887 11.6282 19.1178 11.473 18.973C11.318 18.8178 11.2405 18.6397 11.2405 18.4385C11.2405 18.2372 11.318 18.0589 11.473 17.9038L16.627 12.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  mask-image: 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_8340" 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_8340)">%0A<path d="M16.627 12.75H5.25C5.03717 12.75 4.859 12.6782 4.7155 12.5345C4.57183 12.391 4.5 12.2128 4.5 12C4.5 11.7872 4.57183 11.609 4.7155 11.4655C4.859 11.3218 5.03717 11.25 5.25 11.25H16.627L11.4577 6.08076C11.3091 5.93209 11.2357 5.75809 11.2375 5.55876C11.2395 5.35942 11.318 5.18217 11.473 5.02701C11.6282 4.88217 11.8038 4.80717 12 4.80201C12.1962 4.79684 12.3718 4.87184 12.527 5.02701L18.8673 11.3673C18.9609 11.4609 19.0269 11.5597 19.0652 11.6635C19.1037 11.7673 19.123 11.8795 19.123 12C19.123 12.1205 19.1037 12.2327 19.0652 12.3365C19.0269 12.4403 18.9609 12.5391 18.8673 12.6328L12.527 18.973C12.3885 19.1115 12.217 19.1823 12.0125 19.1855C11.808 19.1887 11.6282 19.1178 11.473 18.973C11.318 18.8178 11.2405 18.6397 11.2405 18.4385C11.2405 18.2372 11.318 18.0589 11.473 17.9038L16.627 12.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
}
.cometchat-fullscreen-viewer__error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-spacing-3, 12px);
  padding: var(--cometchat-padding-6, 24px);
  background-color: var(--cometchat-background-color-03, #f0f0f0);
  border-radius: var(--cometchat-radius-3, 12px);
}
.cometchat-fullscreen-viewer__error-icon {
  width: 48px;
  height: 48px;
  background-color: var(--cometchat-error-color, #f44649);
  -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_8435" 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_8435)">%0A<path d="M3.4246 20.5C3.2551 20.5 3.10285 20.4586 2.96785 20.3757C2.83285 20.2929 2.72794 20.1837 2.6531 20.048C2.5751 19.9133 2.53219 19.7675 2.52435 19.6105C2.51652 19.4535 2.55885 19.298 2.65135 19.144L11.2121 4.35599C11.3048 4.20199 11.4206 4.08816 11.5596 4.01449C11.6988 3.94083 11.8453 3.90399 11.9991 3.90399C12.1529 3.90399 12.2994 3.94083 12.4386 4.01449C12.5776 4.08816 12.6934 4.20199 12.7861 4.35599L21.3469 19.144C21.4394 19.298 21.4817 19.4535 21.4739 19.6105C21.466 19.7675 21.4231 19.9133 21.3451 20.048C21.2703 20.1837 21.1654 20.2929 21.0304 20.3757C20.8954 20.4586 20.7431 20.5 20.5736 20.5H3.4246ZM11.9991 17.8077C12.2279 17.8077 12.4198 17.7303 12.5746 17.5755C12.7294 17.4207 12.8069 17.2288 12.8069 17C12.8069 16.7712 12.7294 16.5793 12.5746 16.4245C12.4198 16.2697 12.2279 16.1922 11.9991 16.1922C11.7703 16.1922 11.5784 16.2697 11.4236 16.4245C11.2688 16.5793 11.1914 16.7712 11.1914 17C11.1914 17.2288 11.2688 17.4207 11.4236 17.5755C11.5784 17.7303 11.7703 17.8077 11.9991 17.8077ZM11.9994 15.1922C12.212 15.1922 12.3901 15.1204 12.5336 14.9767C12.6773 14.8329 12.7491 14.6547 12.7491 14.4422V10.9422C12.7491 10.7297 12.6772 10.5517 12.5334 10.408C12.3895 10.2642 12.2114 10.1922 11.9989 10.1922C11.7862 10.1922 11.6081 10.2642 11.4646 10.408C11.3209 10.5517 11.2491 10.7297 11.2491 10.9422V14.4422C11.2491 14.6547 11.321 14.8329 11.4649 14.9767C11.6087 15.1204 11.7869 15.1922 11.9994 15.1922Z" 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_8435" 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_8435)">%0A<path d="M3.4246 20.5C3.2551 20.5 3.10285 20.4586 2.96785 20.3757C2.83285 20.2929 2.72794 20.1837 2.6531 20.048C2.5751 19.9133 2.53219 19.7675 2.52435 19.6105C2.51652 19.4535 2.55885 19.298 2.65135 19.144L11.2121 4.35599C11.3048 4.20199 11.4206 4.08816 11.5596 4.01449C11.6988 3.94083 11.8453 3.90399 11.9991 3.90399C12.1529 3.90399 12.2994 3.94083 12.4386 4.01449C12.5776 4.08816 12.6934 4.20199 12.7861 4.35599L21.3469 19.144C21.4394 19.298 21.4817 19.4535 21.4739 19.6105C21.466 19.7675 21.4231 19.9133 21.3451 20.048C21.2703 20.1837 21.1654 20.2929 21.0304 20.3757C20.8954 20.4586 20.7431 20.5 20.5736 20.5H3.4246ZM11.9991 17.8077C12.2279 17.8077 12.4198 17.7303 12.5746 17.5755C12.7294 17.4207 12.8069 17.2288 12.8069 17C12.8069 16.7712 12.7294 16.5793 12.5746 16.4245C12.4198 16.2697 12.2279 16.1922 11.9991 16.1922C11.7703 16.1922 11.5784 16.2697 11.4236 16.4245C11.2688 16.5793 11.1914 16.7712 11.1914 17C11.1914 17.2288 11.2688 17.4207 11.4236 17.5755C11.5784 17.7303 11.7703 17.8077 11.9991 17.8077ZM11.9994 15.1922C12.212 15.1922 12.3901 15.1204 12.5336 14.9767C12.6773 14.8329 12.7491 14.6547 12.7491 14.4422V10.9422C12.7491 10.7297 12.6772 10.5517 12.5334 10.408C12.3895 10.2642 12.2114 10.1922 11.9989 10.1922C11.7862 10.1922 11.6081 10.2642 11.4646 10.408C11.3209 10.5517 11.2491 10.7297 11.2491 10.9422V14.4422C11.2491 14.6547 11.321 14.8329 11.4649 14.9767C11.6087 15.1204 11.7869 15.1922 11.9994 15.1922Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
}
.cometchat-fullscreen-viewer__error-text {
  color: var(--cometchat-text-color-secondary, #666);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  text-align: center;
}
.cometchat-fullscreen-viewer__unsupported-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
  padding: var(--cometchat-padding-8, 32px) var(--cometchat-padding-6, 24px);
  border-radius: var(--cometchat-radius-3, 12px);
  text-align: center;
}
.cometchat-fullscreen-viewer__unsupported-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: color-mix(in srgb, var(--cometchat-static-white, #4c4c4c) 10%, transparent);
  margin-bottom: var(--cometchat-spacing-2, 8px);
}
.cometchat-fullscreen-viewer__unsupported-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.cometchat-fullscreen-viewer__unsupported-title {
  color: var(--cometchat-static-white, #fff);
  font: var(--cometchat-font-heading4-medium, 500 18px Roboto);
}
.cometchat-fullscreen-viewer__unsupported-subtitle {
  color: var(--cometchat-static-white-70, rgba(255, 255, 255, 0.7));
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
.cometchat-fullscreen-viewer__unsupported-download {
  align-self: stretch;
  margin-top: var(--cometchat-spacing-4, 16px);
}
.cometchat-fullscreen-viewer__body-download-progress {
  position: relative;
  width: 100px;
  height: 100px;
}
.cometchat-fullscreen-viewer__body-download-progress svg {
  width: 100px;
  height: 100px;
  transform: rotate(-90deg);
}
.cometchat-fullscreen-viewer__body-download-progress-background {
  stroke: var(--cometchat-static-white, #fff);
  stroke-dasharray: 113 113;
  stroke-width: 2;
  fill: none;
  opacity: 0.2;
}
.cometchat-fullscreen-viewer__body-download-progress-foreground {
  stroke: var(--cometchat-static-white, #fff);
  stroke-dasharray: 0 113;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
@media (max-width: 768px) {
  .cometchat-fullscreen-viewer__header {
    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
  }
  .cometchat-fullscreen-viewer__header-center {
    display: none;
  }
  .cometchat-fullscreen-viewer__nav-button {
    width: 40px;
    height: 40px;
  }
  .cometchat-fullscreen-viewer__nav-icon-prev,
  .cometchat-fullscreen-viewer__nav-icon-next {
    width: 20px;
    height: 20px;
  }
  .cometchat-fullscreen-viewer__nav-button--prev {
    left: var(--cometchat-spacing-2, 8px);
  }
  .cometchat-fullscreen-viewer__nav-button--next {
    right: var(--cometchat-spacing-2, 8px);
  }
  .cometchat-fullscreen-viewer__body {
    max-width: 95%;
    max-height: 85%;
  }
}
@media (max-width: 480px) {
  .cometchat-fullscreen-viewer__nav-button {
    width: 36px;
    height: 36px;
  }
  .cometchat-fullscreen-viewer__nav-icon-prev,
  .cometchat-fullscreen-viewer__nav-icon-next {
    width: 18px;
    height: 18px;
  }
  .cometchat-fullscreen-viewer__avatar {
    width: 28px;
    height: 28px;
  }
  .cometchat-fullscreen-viewer__action-button {
    width: 28px;
    height: 28px;
    padding: var(--cometchat-padding-1, 4px);
  }
  .cometchat-fullscreen-viewer__close-icon,
  .cometchat-fullscreen-viewer__download-action-icon {
    width: 16px;
    height: 16px;
  }
  .cometchat-fullscreen-viewer__unsupported-download {
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-fullscreen-viewer__nav-button,
  .cometchat-fullscreen-viewer__action-button,
  .cometchat-fullscreen-viewer__download-button {
    transition: none;
  }
}

/* src/components/base/CometChatFormattingToolbar/CometChatFormattingToolbar.css */
.cometchat-formatting-toolbar {
  display: flex;
  align-items: center;
  gap: var(--cometchat-padding-4, 16px);
  padding: 8px;
  background: var(--cometchat-background-color-02);
  border-radius: var(--cometchat-radius-2, 8px) var(--cometchat-radius-2, 8px) 0 0;
  font-family: var(--cometchat-font-family);
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
}
.cometchat-formatting-toolbar::-webkit-scrollbar {
  display: none;
}
.cometchat-formatting-toolbar__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--cometchat-radius-1);
  background: transparent;
  color: var(--cometchat-icon-color-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.cometchat-formatting-toolbar__button:hover {
  color: var(--cometchat-icon-color-primary);
}
.cometchat-formatting-toolbar__button--active {
  border-radius: var(--cometchat-radius-1, 4px);
  background: var(--cometchat-background-color-04);
  color: var(--cometchat-icon-color-primary);
}
.cometchat-formatting-toolbar__button--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.cometchat-formatting-toolbar__button--disabled:hover {
  background: transparent;
  color: var(--cometchat-icon-color-secondary);
}
.cometchat-formatting-toolbar__button:focus {
  outline: 2px solid var(--cometchat-border-color-highlight);
  outline-offset: 1px;
}
.cometchat-formatting-toolbar__button:focus:not(:focus-visible) {
  outline: none;
}
.cometchat-formatting-toolbar__icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}
.cometchat-formatting-toolbar__icon--bold {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(7, 5)">%0A    <path d="M1.51925 13.25C1.09742 13.25 0.73875 13.1023 0.44325 12.8068C0.14775 12.5113 0 12.1526 0 11.7308V1.51925C0 1.09742 0.14775 0.73875 0.44325 0.44325C0.73875 0.14775 1.09742 0 1.51925 0H4.8615C5.88067 0 6.80217 0.317334 7.626 0.952C8.44967 1.5865 8.8615 2.441 8.8615 3.5155C8.8615 4.26283 8.681 4.87208 8.32 5.34325C7.95917 5.81442 7.57042 6.15642 7.15375 6.36925C7.66658 6.54608 8.15633 6.89575 8.623 7.41825C9.08967 7.94075 9.323 8.64425 9.323 9.52875C9.323 10.8069 8.85183 11.7467 7.9095 12.348C6.96717 12.9493 6.01783 13.25 5.0615 13.25H1.51925ZM2.15 11.2578H4.98075C5.76792 11.2578 6.32433 11.0392 6.65 10.602C6.97567 10.1648 7.1385 9.74558 7.1385 9.34425C7.1385 8.94292 6.97567 8.52367 6.65 8.0865C6.32433 7.64933 5.7525 7.43075 4.9345 7.43075H2.15V11.2578ZM2.15 5.5H4.74425C5.35192 5.5 5.83367 5.32625 6.1895 4.97875C6.54517 4.63142 6.723 4.21542 6.723 3.73075C6.723 3.21542 6.53492 2.79425 6.15875 2.46725C5.78242 2.14042 5.32117 1.977 4.775 1.977H2.15V5.5Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(7, 5)">%0A    <path d="M1.51925 13.25C1.09742 13.25 0.73875 13.1023 0.44325 12.8068C0.14775 12.5113 0 12.1526 0 11.7308V1.51925C0 1.09742 0.14775 0.73875 0.44325 0.44325C0.73875 0.14775 1.09742 0 1.51925 0H4.8615C5.88067 0 6.80217 0.317334 7.626 0.952C8.44967 1.5865 8.8615 2.441 8.8615 3.5155C8.8615 4.26283 8.681 4.87208 8.32 5.34325C7.95917 5.81442 7.57042 6.15642 7.15375 6.36925C7.66658 6.54608 8.15633 6.89575 8.623 7.41825C9.08967 7.94075 9.323 8.64425 9.323 9.52875C9.323 10.8069 8.85183 11.7467 7.9095 12.348C6.96717 12.9493 6.01783 13.25 5.0615 13.25H1.51925ZM2.15 11.2578H4.98075C5.76792 11.2578 6.32433 11.0392 6.65 10.602C6.97567 10.1648 7.1385 9.74558 7.1385 9.34425C7.1385 8.94292 6.97567 8.52367 6.65 8.0865C6.32433 7.64933 5.7525 7.43075 4.9345 7.43075H2.15V11.2578ZM2.15 5.5H4.74425C5.35192 5.5 5.83367 5.32625 6.1895 4.97875C6.54517 4.63142 6.723 4.21542 6.723 3.73075C6.723 3.21542 6.53492 2.79425 6.15875 2.46725C5.78242 2.14042 5.32117 1.977 4.775 1.977H2.15V5.5Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
}
.cometchat-formatting-toolbar__icon--italic {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <path d="M6.29828 18.625C6.04528 18.625 5.83136 18.5376 5.65653 18.3628C5.48186 18.1878 5.39453 17.9736 5.39453 17.7203C5.39453 17.4671 5.48186 17.2533 5.65653 17.0787C5.83136 16.9044 6.04528 16.8173 6.29828 16.8173H9.21178L12.4523 7.18275H9.53878C9.28578 7.18275 9.07186 7.09525 8.89703 6.92025C8.72236 6.74542 8.63503 6.53133 8.63503 6.278C8.63503 6.02467 8.72236 5.81083 8.89703 5.6365C9.07186 5.46217 9.28578 5.375 9.53878 5.375H16.885C17.138 5.375 17.3519 5.46242 17.5265 5.63725C17.7014 5.81225 17.7888 6.02642 17.7888 6.27975C17.7888 6.53292 17.7014 6.74675 17.5265 6.92125C17.3519 7.09558 17.138 7.18275 16.885 7.18275H14.279L11.0388 16.8173H13.6445C13.8975 16.8173 14.1114 16.9047 14.2863 17.0798C14.4609 17.2546 14.5483 17.4687 14.5483 17.722C14.5483 17.9753 14.4609 18.1892 14.2863 18.3635C14.1114 18.5378 13.8975 18.625 13.6445 18.625H6.29828Z" fill="%23A1A1A1"/>%0A</svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <path d="M6.29828 18.625C6.04528 18.625 5.83136 18.5376 5.65653 18.3628C5.48186 18.1878 5.39453 17.9736 5.39453 17.7203C5.39453 17.4671 5.48186 17.2533 5.65653 17.0787C5.83136 16.9044 6.04528 16.8173 6.29828 16.8173H9.21178L12.4523 7.18275H9.53878C9.28578 7.18275 9.07186 7.09525 8.89703 6.92025C8.72236 6.74542 8.63503 6.53133 8.63503 6.278C8.63503 6.02467 8.72236 5.81083 8.89703 5.6365C9.07186 5.46217 9.28578 5.375 9.53878 5.375H16.885C17.138 5.375 17.3519 5.46242 17.5265 5.63725C17.7014 5.81225 17.7888 6.02642 17.7888 6.27975C17.7888 6.53292 17.7014 6.74675 17.5265 6.92125C17.3519 7.09558 17.138 7.18275 16.885 7.18275H14.279L11.0388 16.8173H13.6445C13.8975 16.8173 14.1114 16.9047 14.2863 17.0798C14.4609 17.2546 14.5483 17.4687 14.5483 17.722C14.5483 17.9753 14.4609 18.1892 14.2863 18.3635C14.1114 18.5378 13.8975 18.625 13.6445 18.625H6.29828Z" fill="%23A1A1A1"/>%0A</svg>');
}
.cometchat-formatting-toolbar__icon--underline {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(5, 3.5)">%0A    <path d="M0.75 16.7115C0.5375 16.7115 0.359333 16.6396 0.2155 16.4957C0.0718332 16.3519 0 16.1737 0 15.961C0 15.7485 0.0718332 15.5704 0.2155 15.4267C0.359333 15.2832 0.5375 15.2115 0.75 15.2115H12.5575C12.77 15.2115 12.9482 15.2834 13.092 15.4272C13.2357 15.5711 13.3075 15.7492 13.3075 15.9618C13.3075 16.1744 13.2357 16.3525 13.092 16.496C12.9482 16.6397 12.77 16.7115 12.5575 16.7115H0.75ZM6.65375 13.1152C5.09858 13.1152 3.88483 12.6432 3.0125 11.699C2.14 10.7548 1.70375 9.48975 1.70375 7.90375V0.91925C1.70375 0.666917 1.79683 0.450583 1.983 0.27025C2.16917 0.0900833 2.38842 0 2.64075 0C2.89292 0 3.10875 0.0900833 3.28825 0.27025C3.46775 0.450583 3.5575 0.666917 3.5575 0.91925V7.996C3.5575 9.00633 3.82608 9.816 4.36325 10.425C4.90042 11.034 5.66392 11.3385 6.65375 11.3385C7.64358 11.3385 8.40708 11.034 8.94425 10.425C9.48142 9.816 9.75 9.00633 9.75 7.996V0.91925C9.75 0.666917 9.84308 0.450583 10.0293 0.27025C10.2154 0.0900833 10.4347 0 10.687 0C10.9392 0 11.155 0.0900833 11.3345 0.27025C11.514 0.450583 11.6038 0.666917 11.6038 0.91925V7.90375C11.6038 9.48975 11.1675 10.7548 10.295 11.699C9.42267 12.6432 8.20892 13.1152 6.65375 13.1152Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(5, 3.5)">%0A    <path d="M0.75 16.7115C0.5375 16.7115 0.359333 16.6396 0.2155 16.4957C0.0718332 16.3519 0 16.1737 0 15.961C0 15.7485 0.0718332 15.5704 0.2155 15.4267C0.359333 15.2832 0.5375 15.2115 0.75 15.2115H12.5575C12.77 15.2115 12.9482 15.2834 13.092 15.4272C13.2357 15.5711 13.3075 15.7492 13.3075 15.9618C13.3075 16.1744 13.2357 16.3525 13.092 16.496C12.9482 16.6397 12.77 16.7115 12.5575 16.7115H0.75ZM6.65375 13.1152C5.09858 13.1152 3.88483 12.6432 3.0125 11.699C2.14 10.7548 1.70375 9.48975 1.70375 7.90375V0.91925C1.70375 0.666917 1.79683 0.450583 1.983 0.27025C2.16917 0.0900833 2.38842 0 2.64075 0C2.89292 0 3.10875 0.0900833 3.28825 0.27025C3.46775 0.450583 3.5575 0.666917 3.5575 0.91925V7.996C3.5575 9.00633 3.82608 9.816 4.36325 10.425C4.90042 11.034 5.66392 11.3385 6.65375 11.3385C7.64358 11.3385 8.40708 11.034 8.94425 10.425C9.48142 9.816 9.75 9.00633 9.75 7.996V0.91925C9.75 0.666917 9.84308 0.450583 10.0293 0.27025C10.2154 0.0900833 10.4347 0 10.687 0C10.9392 0 11.155 0.0900833 11.3345 0.27025C11.514 0.450583 11.6038 0.666917 11.6038 0.91925V7.90375C11.6038 9.48975 11.1675 10.7548 10.295 11.699C9.42267 12.6432 8.20892 13.1152 6.65375 13.1152Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
}
.cometchat-formatting-toolbar__icon--strikethrough {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(2, 4)">%0A    <path d="M9.9 15.496C8.90133 15.496 7.97858 15.2313 7.13175 14.7018C6.28492 14.1723 5.61925 13.4633 5.13475 12.575C5.02958 12.3788 5.01675 12.1733 5.09625 11.9585C5.17575 11.7438 5.31867 11.5839 5.525 11.4788C5.74167 11.3634 5.96758 11.3455 6.20275 11.425C6.43808 11.5045 6.62175 11.6526 6.75375 11.8693C7.08592 12.4461 7.53342 12.9038 8.09625 13.2423C8.65892 13.5808 9.27042 13.75 9.93075 13.75C10.7603 13.75 11.4875 13.5058 12.1125 13.0173C12.7375 12.5288 13.05 11.8961 13.05 11.1193C13.05 11.0103 13.0404 10.9013 13.0212 10.7923C13.0019 10.6833 12.9634 10.5807 12.9057 10.4845C12.8866 10.2473 12.9552 10.0409 13.1115 9.86525C13.268 9.68958 13.4648 9.59217 13.702 9.573C13.9392 9.55367 14.1497 9.62225 14.3335 9.77875C14.5175 9.93508 14.6192 10.1318 14.6385 10.369C14.709 10.5088 14.7554 10.6598 14.7778 10.822C14.8003 10.9842 14.8115 11.1448 14.8115 11.3038C14.8115 12.5371 14.3179 13.5442 13.3307 14.325C12.3436 15.1057 11.2 15.496 9.9 15.496ZM0.75 7.55375C0.537167 7.55375 0.359 7.48192 0.2155 7.33825C0.0718334 7.19475 0 7.01658 0 6.80375C0 6.59092 0.0718334 6.41275 0.2155 6.26925C0.359 6.12558 0.537167 6.05375 0.75 6.05375H18.75C18.9628 6.05375 19.141 6.12558 19.2845 6.26925C19.4282 6.41275 19.5 6.59092 19.5 6.80375C19.5 7.01658 19.4282 7.19475 19.2845 7.33825C19.141 7.48192 18.9628 7.55375 18.75 7.55375H0.75ZM5.998 3.97675C5.78517 3.87425 5.63517 3.71017 5.548 3.4845C5.46083 3.25883 5.46858 3.03967 5.57125 2.827C5.81475 1.9475 6.33617 1.25642 7.1355 0.753751C7.93483 0.251251 8.823 0 9.8 0C10.5552 0 11.2661 0.158668 11.9327 0.476001C12.5994 0.793168 13.1583 1.24925 13.6095 1.84425C13.7417 2.01975 13.7856 2.2175 13.7413 2.4375C13.6971 2.65733 13.5821 2.83325 13.3962 2.96525C13.1897 3.10758 12.9689 3.16017 12.7337 3.123C12.4984 3.08583 12.2962 2.96917 12.127 2.773C11.8448 2.4255 11.5051 2.1675 11.1077 1.999C10.7102 1.83033 10.2846 1.746 9.83075 1.746C9.20775 1.746 8.63817 1.90342 8.122 2.21825C7.606 2.53292 7.28133 2.97167 7.148 3.5345C7.0455 3.75767 6.88142 3.91283 6.65575 4C6.43008 4.08717 6.21083 4.07942 5.998 3.97675Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(2, 4)">%0A    <path d="M9.9 15.496C8.90133 15.496 7.97858 15.2313 7.13175 14.7018C6.28492 14.1723 5.61925 13.4633 5.13475 12.575C5.02958 12.3788 5.01675 12.1733 5.09625 11.9585C5.17575 11.7438 5.31867 11.5839 5.525 11.4788C5.74167 11.3634 5.96758 11.3455 6.20275 11.425C6.43808 11.5045 6.62175 11.6526 6.75375 11.8693C7.08592 12.4461 7.53342 12.9038 8.09625 13.2423C8.65892 13.5808 9.27042 13.75 9.93075 13.75C10.7603 13.75 11.4875 13.5058 12.1125 13.0173C12.7375 12.5288 13.05 11.8961 13.05 11.1193C13.05 11.0103 13.0404 10.9013 13.0212 10.7923C13.0019 10.6833 12.9634 10.5807 12.9057 10.4845C12.8866 10.2473 12.9552 10.0409 13.1115 9.86525C13.268 9.68958 13.4648 9.59217 13.702 9.573C13.9392 9.55367 14.1497 9.62225 14.3335 9.77875C14.5175 9.93508 14.6192 10.1318 14.6385 10.369C14.709 10.5088 14.7554 10.6598 14.7778 10.822C14.8003 10.9842 14.8115 11.1448 14.8115 11.3038C14.8115 12.5371 14.3179 13.5442 13.3307 14.325C12.3436 15.1057 11.2 15.496 9.9 15.496ZM0.75 7.55375C0.537167 7.55375 0.359 7.48192 0.2155 7.33825C0.0718334 7.19475 0 7.01658 0 6.80375C0 6.59092 0.0718334 6.41275 0.2155 6.26925C0.359 6.12558 0.537167 6.05375 0.75 6.05375H18.75C18.9628 6.05375 19.141 6.12558 19.2845 6.26925C19.4282 6.41275 19.5 6.59092 19.5 6.80375C19.5 7.01658 19.4282 7.19475 19.2845 7.33825C19.141 7.48192 18.9628 7.55375 18.75 7.55375H0.75ZM5.998 3.97675C5.78517 3.87425 5.63517 3.71017 5.548 3.4845C5.46083 3.25883 5.46858 3.03967 5.57125 2.827C5.81475 1.9475 6.33617 1.25642 7.1355 0.753751C7.93483 0.251251 8.823 0 9.8 0C10.5552 0 11.2661 0.158668 11.9327 0.476001C12.5994 0.793168 13.1583 1.24925 13.6095 1.84425C13.7417 2.01975 13.7856 2.2175 13.7413 2.4375C13.6971 2.65733 13.5821 2.83325 13.3962 2.96525C13.1897 3.10758 12.9689 3.16017 12.7337 3.123C12.4984 3.08583 12.2962 2.96917 12.127 2.773C11.8448 2.4255 11.5051 2.1675 11.1077 1.999C10.7102 1.83033 10.2846 1.746 9.83075 1.746C9.20775 1.746 8.63817 1.90342 8.122 2.21825C7.606 2.53292 7.28133 2.97167 7.148 3.5345C7.0455 3.75767 6.88142 3.91283 6.65575 4C6.43008 4.08717 6.21083 4.07942 5.998 3.97675Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
}
.cometchat-formatting-toolbar__icon--link {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <path d="M7.04822 16.8837C5.69739 16.8837 4.5463 16.408 3.59497 15.4567C2.64364 14.5054 2.16797 13.3533 2.16797 12.0004C2.16797 10.6476 2.64364 9.49552 3.59497 8.54419C4.5463 7.59285 5.69739 7.11719 7.04822 7.11719H10.3637C10.5796 7.11719 10.7648 7.19477 10.9195 7.34994C11.074 7.50494 11.1512 7.69077 11.1512 7.90744C11.1512 8.13061 11.074 8.31852 10.9195 8.47119C10.7648 8.62402 10.5796 8.70044 10.3637 8.70044H7.05122C6.13739 8.70044 5.35889 9.02169 4.71572 9.66419C4.07272 10.3067 3.75122 11.0844 3.75122 11.9974C3.75122 12.9106 4.07272 13.6894 4.71572 14.3337C5.35889 14.9782 6.13739 15.3004 7.05122 15.3004H10.3637C10.5796 15.3004 10.7648 15.378 10.9195 15.5332C11.074 15.6884 11.1512 15.8743 11.1512 16.0909C11.1512 16.3139 11.074 16.5019 10.9195 16.6547C10.7648 16.8074 10.5796 16.8837 10.3637 16.8837H7.04822ZM8.94697 12.7837C8.7248 12.7837 8.53664 12.7064 8.38247 12.5517C8.2283 12.397 8.15122 12.2095 8.15122 11.9892C8.15122 11.7689 8.2283 11.5824 8.38247 11.4297C8.53664 11.2769 8.7248 11.2004 8.94697 11.2004H15.0637C15.2796 11.2004 15.4647 11.278 15.6192 11.4332C15.7739 11.5884 15.8512 11.7743 15.8512 11.9909C15.8512 12.2139 15.7739 12.4019 15.6192 12.5547C15.4647 12.7074 15.2796 12.7837 15.0637 12.7837H8.94697ZM13.647 16.8837C13.4248 16.8837 13.2366 16.8064 13.0825 16.6517C12.9283 16.497 12.8512 16.3095 12.8512 16.0892C12.8512 15.8689 12.9283 15.6824 13.0825 15.5297C13.2366 15.3769 13.4248 15.3004 13.647 15.3004H16.9555C17.8681 15.3004 18.6456 14.9792 19.288 14.3367C19.9301 13.6942 20.2512 12.9164 20.2512 12.0034C20.2512 11.0903 19.9301 10.3115 19.288 9.66719C18.6456 9.02269 17.8681 8.70044 16.9555 8.70044H13.647C13.4248 8.70044 13.2366 8.6231 13.0825 8.46844C12.9283 8.3136 12.8512 8.1261 12.8512 7.90594C12.8512 7.6856 12.9283 7.49902 13.0825 7.34619C13.2366 7.19352 13.4248 7.11719 13.647 7.11719H16.9512C18.3041 7.11719 19.4561 7.59285 20.4075 8.54419C21.3588 9.49552 21.8345 10.6476 21.8345 12.0004C21.8345 13.3533 21.3588 14.5054 20.4075 15.4567C19.4561 16.408 18.3041 16.8837 16.9512 16.8837H13.647Z" fill="%23A1A1A1"/>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <path d="M7.04822 16.8837C5.69739 16.8837 4.5463 16.408 3.59497 15.4567C2.64364 14.5054 2.16797 13.3533 2.16797 12.0004C2.16797 10.6476 2.64364 9.49552 3.59497 8.54419C4.5463 7.59285 5.69739 7.11719 7.04822 7.11719H10.3637C10.5796 7.11719 10.7648 7.19477 10.9195 7.34994C11.074 7.50494 11.1512 7.69077 11.1512 7.90744C11.1512 8.13061 11.074 8.31852 10.9195 8.47119C10.7648 8.62402 10.5796 8.70044 10.3637 8.70044H7.05122C6.13739 8.70044 5.35889 9.02169 4.71572 9.66419C4.07272 10.3067 3.75122 11.0844 3.75122 11.9974C3.75122 12.9106 4.07272 13.6894 4.71572 14.3337C5.35889 14.9782 6.13739 15.3004 7.05122 15.3004H10.3637C10.5796 15.3004 10.7648 15.378 10.9195 15.5332C11.074 15.6884 11.1512 15.8743 11.1512 16.0909C11.1512 16.3139 11.074 16.5019 10.9195 16.6547C10.7648 16.8074 10.5796 16.8837 10.3637 16.8837H7.04822ZM8.94697 12.7837C8.7248 12.7837 8.53664 12.7064 8.38247 12.5517C8.2283 12.397 8.15122 12.2095 8.15122 11.9892C8.15122 11.7689 8.2283 11.5824 8.38247 11.4297C8.53664 11.2769 8.7248 11.2004 8.94697 11.2004H15.0637C15.2796 11.2004 15.4647 11.278 15.6192 11.4332C15.7739 11.5884 15.8512 11.7743 15.8512 11.9909C15.8512 12.2139 15.7739 12.4019 15.6192 12.5547C15.4647 12.7074 15.2796 12.7837 15.0637 12.7837H8.94697ZM13.647 16.8837C13.4248 16.8837 13.2366 16.8064 13.0825 16.6517C12.9283 16.497 12.8512 16.3095 12.8512 16.0892C12.8512 15.8689 12.9283 15.6824 13.0825 15.5297C13.2366 15.3769 13.4248 15.3004 13.647 15.3004H16.9555C17.8681 15.3004 18.6456 14.9792 19.288 14.3367C19.9301 13.6942 20.2512 12.9164 20.2512 12.0034C20.2512 11.0903 19.9301 10.3115 19.288 9.66719C18.6456 9.02269 17.8681 8.70044 16.9555 8.70044H13.647C13.4248 8.70044 13.2366 8.6231 13.0825 8.46844C12.9283 8.3136 12.8512 8.1261 12.8512 7.90594C12.8512 7.6856 12.9283 7.49902 13.0825 7.34619C13.2366 7.19352 13.4248 7.11719 13.647 7.11719H16.9512C18.3041 7.11719 19.4561 7.59285 20.4075 8.54419C21.3588 9.49552 21.8345 10.6476 21.8345 12.0004C21.8345 13.3533 21.3588 14.5054 20.4075 15.4567C19.4561 16.408 18.3041 16.8837 16.9512 16.8837H13.647Z" fill="%23A1A1A1"/>%0A</svg>%0A');
}
.cometchat-formatting-toolbar__icon--ordered-list {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(3.5, 2.5)">%0A    <path d="M0.59625 19C0.423917 19 0.2815 18.9438 0.169 18.8313C0.0563332 18.7188 0 18.5764 0 18.4042C0 18.2323 0.0563332 18.0898 0.169 17.977C0.2815 17.8642 0.423917 17.8078 0.59625 17.8078H2.5V16.75H1.59625C1.42392 16.75 1.2815 16.6938 1.169 16.5813C1.05633 16.4688 1 16.3264 1 16.1542C1 15.9823 1.05633 15.8398 1.169 15.727C1.2815 15.6142 1.42392 15.5577 1.59625 15.5577H2.5V14.5H0.59625C0.423917 14.5 0.2815 14.4438 0.169 14.3313C0.0563332 14.2188 0 14.0764 0 13.9043C0 13.7323 0.0563332 13.5898 0.169 13.477C0.2815 13.3642 0.423917 13.3077 0.59625 13.3077H2.84625C3.08592 13.3077 3.28683 13.3888 3.449 13.551C3.61117 13.7132 3.69225 13.9141 3.69225 14.1538V15.3462C3.69225 15.5859 3.61117 15.7868 3.449 15.949C3.28683 16.1112 3.08592 16.1923 2.84625 16.1923C3.08592 16.1923 3.28683 16.2733 3.449 16.4355C3.61117 16.5977 3.69225 16.7987 3.69225 17.0385V18.1538C3.69225 18.3936 3.61117 18.5946 3.449 18.7568C3.28683 18.9189 3.08592 19 2.84625 19H0.59625ZM0.68275 12.3463C0.49175 12.3463 0.330167 12.2802 0.198 12.148C0.0659999 12.016 0 11.8545 0 11.6635V9.75C0 9.51033 0.0810832 9.30933 0.24325 9.147C0.405417 8.98483 0.606417 8.90375 0.84625 8.90375H2.5V7.84625H0.59625C0.423917 7.84625 0.2815 7.78992 0.169 7.67725C0.0563332 7.56475 0 7.4225 0 7.2505C0 7.07833 0.0563332 6.93583 0.169 6.823C0.2815 6.71017 0.423917 6.65375 0.59625 6.65375H2.84625C3.08592 6.65375 3.28683 6.73483 3.449 6.897C3.61117 7.05933 3.69225 7.26033 3.69225 7.5V9.25C3.69225 9.48967 3.61117 9.69067 3.449 9.853C3.28683 10.0152 3.08592 10.0963 2.84625 10.0963H1.19225V11.1538H3.09625C3.26842 11.1538 3.41083 11.2101 3.5235 11.3228C3.636 11.4353 3.69225 11.5775 3.69225 11.7495C3.69225 11.9217 3.636 12.0642 3.5235 12.177C3.41083 12.2898 3.26842 12.3463 3.09625 12.3463H0.68275ZM2.09675 5.69225C1.92458 5.69225 1.78208 5.636 1.66925 5.5235C1.55642 5.41083 1.5 5.26842 1.5 5.09625V1.19225H0.59625C0.423917 1.19225 0.2815 1.136 0.169 1.0235C0.0563332 0.911 0 0.76875 0 0.59675C0 0.424583 0.0563332 0.282084 0.169 0.16925C0.2815 0.0564172 0.423917 0 0.59625 0H2.01925C2.21025 0 2.37017 0.0644162 2.499 0.19325C2.62783 0.322083 2.69225 0.482 2.69225 0.673V5.09625C2.69225 5.26842 2.636 5.41083 2.5235 5.5235C2.411 5.636 2.26875 5.69225 2.09675 5.69225ZM6.55775 16.25C6.34525 16.25 6.16708 16.1781 6.02325 16.0343C5.87958 15.8904 5.80775 15.7122 5.80775 15.4998C5.80775 15.2871 5.87958 15.109 6.02325 14.9655C6.16708 14.8218 6.34525 14.75 6.55775 14.75H16.25C16.4625 14.75 16.6406 14.8219 16.7843 14.9658C16.9281 15.1096 17 15.2878 17 15.5003C17 15.7129 16.9281 15.891 16.7843 16.0345C16.6406 16.1782 16.4625 16.25 16.25 16.25H6.55775ZM6.55775 10.25C6.34525 10.25 6.16708 10.1781 6.02325 10.0343C5.87958 9.89042 5.80775 9.71225 5.80775 9.49975C5.80775 9.28708 5.87958 9.109 6.02325 8.9655C6.16708 8.82183 6.34525 8.75 6.55775 8.75H16.25C16.4625 8.75 16.6406 8.82192 16.7843 8.96575C16.9281 9.10958 17 9.28775 17 9.50025C17 9.71292 16.9281 9.891 16.7843 10.0345C16.6406 10.1782 16.4625 10.25 16.25 10.25H6.55775ZM6.55775 4.25C6.34525 4.25 6.16708 4.17808 6.02325 4.03425C5.87958 3.89042 5.80775 3.71225 5.80775 3.49975C5.80775 3.28708 5.87958 3.109 6.02325 2.9655C6.16708 2.82183 6.34525 2.75 6.55775 2.75H16.25C16.4625 2.75 16.6406 2.82192 16.7843 2.96575C16.9281 3.10958 17 3.28775 17 3.50025C17 3.71292 16.9281 3.891 16.7843 4.0345C16.6406 4.17817 16.4625 4.25 16.25 4.25H6.55775Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(3.5, 2.5)">%0A    <path d="M0.59625 19C0.423917 19 0.2815 18.9438 0.169 18.8313C0.0563332 18.7188 0 18.5764 0 18.4042C0 18.2323 0.0563332 18.0898 0.169 17.977C0.2815 17.8642 0.423917 17.8078 0.59625 17.8078H2.5V16.75H1.59625C1.42392 16.75 1.2815 16.6938 1.169 16.5813C1.05633 16.4688 1 16.3264 1 16.1542C1 15.9823 1.05633 15.8398 1.169 15.727C1.2815 15.6142 1.42392 15.5577 1.59625 15.5577H2.5V14.5H0.59625C0.423917 14.5 0.2815 14.4438 0.169 14.3313C0.0563332 14.2188 0 14.0764 0 13.9043C0 13.7323 0.0563332 13.5898 0.169 13.477C0.2815 13.3642 0.423917 13.3077 0.59625 13.3077H2.84625C3.08592 13.3077 3.28683 13.3888 3.449 13.551C3.61117 13.7132 3.69225 13.9141 3.69225 14.1538V15.3462C3.69225 15.5859 3.61117 15.7868 3.449 15.949C3.28683 16.1112 3.08592 16.1923 2.84625 16.1923C3.08592 16.1923 3.28683 16.2733 3.449 16.4355C3.61117 16.5977 3.69225 16.7987 3.69225 17.0385V18.1538C3.69225 18.3936 3.61117 18.5946 3.449 18.7568C3.28683 18.9189 3.08592 19 2.84625 19H0.59625ZM0.68275 12.3463C0.49175 12.3463 0.330167 12.2802 0.198 12.148C0.0659999 12.016 0 11.8545 0 11.6635V9.75C0 9.51033 0.0810832 9.30933 0.24325 9.147C0.405417 8.98483 0.606417 8.90375 0.84625 8.90375H2.5V7.84625H0.59625C0.423917 7.84625 0.2815 7.78992 0.169 7.67725C0.0563332 7.56475 0 7.4225 0 7.2505C0 7.07833 0.0563332 6.93583 0.169 6.823C0.2815 6.71017 0.423917 6.65375 0.59625 6.65375H2.84625C3.08592 6.65375 3.28683 6.73483 3.449 6.897C3.61117 7.05933 3.69225 7.26033 3.69225 7.5V9.25C3.69225 9.48967 3.61117 9.69067 3.449 9.853C3.28683 10.0152 3.08592 10.0963 2.84625 10.0963H1.19225V11.1538H3.09625C3.26842 11.1538 3.41083 11.2101 3.5235 11.3228C3.636 11.4353 3.69225 11.5775 3.69225 11.7495C3.69225 11.9217 3.636 12.0642 3.5235 12.177C3.41083 12.2898 3.26842 12.3463 3.09625 12.3463H0.68275ZM2.09675 5.69225C1.92458 5.69225 1.78208 5.636 1.66925 5.5235C1.55642 5.41083 1.5 5.26842 1.5 5.09625V1.19225H0.59625C0.423917 1.19225 0.2815 1.136 0.169 1.0235C0.0563332 0.911 0 0.76875 0 0.59675C0 0.424583 0.0563332 0.282084 0.169 0.16925C0.2815 0.0564172 0.423917 0 0.59625 0H2.01925C2.21025 0 2.37017 0.0644162 2.499 0.19325C2.62783 0.322083 2.69225 0.482 2.69225 0.673V5.09625C2.69225 5.26842 2.636 5.41083 2.5235 5.5235C2.411 5.636 2.26875 5.69225 2.09675 5.69225ZM6.55775 16.25C6.34525 16.25 6.16708 16.1781 6.02325 16.0343C5.87958 15.8904 5.80775 15.7122 5.80775 15.4998C5.80775 15.2871 5.87958 15.109 6.02325 14.9655C6.16708 14.8218 6.34525 14.75 6.55775 14.75H16.25C16.4625 14.75 16.6406 14.8219 16.7843 14.9658C16.9281 15.1096 17 15.2878 17 15.5003C17 15.7129 16.9281 15.891 16.7843 16.0345C16.6406 16.1782 16.4625 16.25 16.25 16.25H6.55775ZM6.55775 10.25C6.34525 10.25 6.16708 10.1781 6.02325 10.0343C5.87958 9.89042 5.80775 9.71225 5.80775 9.49975C5.80775 9.28708 5.87958 9.109 6.02325 8.9655C6.16708 8.82183 6.34525 8.75 6.55775 8.75H16.25C16.4625 8.75 16.6406 8.82192 16.7843 8.96575C16.9281 9.10958 17 9.28775 17 9.50025C17 9.71292 16.9281 9.891 16.7843 10.0345C16.6406 10.1782 16.4625 10.25 16.25 10.25H6.55775ZM6.55775 4.25C6.34525 4.25 6.16708 4.17808 6.02325 4.03425C5.87958 3.89042 5.80775 3.71225 5.80775 3.49975C5.80775 3.28708 5.87958 3.109 6.02325 2.9655C6.16708 2.82183 6.34525 2.75 6.55775 2.75H16.25C16.4625 2.75 16.6406 2.82192 16.7843 2.96575C16.9281 3.10958 17 3.28775 17 3.50025C17 3.71292 16.9281 3.891 16.7843 4.0345C16.6406 4.17817 16.4625 4.25 16.25 4.25H6.55775Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
}
.cometchat-formatting-toolbar__icon--bullet-list {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(3.5, 4)">%0A    <path d="M6.55775 14.4135C6.34525 14.4135 6.16708 14.3416 6.02325 14.1977C5.87958 14.0539 5.80775 13.8757 5.80775 13.6632C5.80775 13.4506 5.87958 13.2725 6.02325 13.129C6.16708 12.9853 6.34525 12.9135 6.55775 12.9135H16.25C16.4625 12.9135 16.6406 12.9854 16.7843 13.1292C16.9281 13.2731 17 13.4513 17 13.6637C17 13.8764 16.9281 14.0545 16.7843 14.198C16.6406 14.3417 16.4625 14.4135 16.25 14.4135H6.55775ZM6.55775 8.4135C6.34525 8.4135 6.16708 8.34158 6.02325 8.19775C5.87958 8.05392 5.80775 7.87575 5.80775 7.66325C5.80775 7.45058 5.87958 7.2725 6.02325 7.129C6.16708 6.98533 6.34525 6.9135 6.55775 6.9135H16.25C16.4625 6.9135 16.6406 6.98542 16.7843 7.12925C16.9281 7.27308 17 7.45125 17 7.66375C17 7.87642 16.9281 8.0545 16.7843 8.198C16.6406 8.34167 16.4625 8.4135 16.25 8.4135H6.55775ZM6.55775 2.4135C6.34525 2.4135 6.16708 2.34158 6.02325 2.19775C5.87958 2.05392 5.80775 1.87575 5.80775 1.66325C5.80775 1.45058 5.87958 1.2725 6.02325 1.129C6.16708 0.985333 6.34525 0.913499 6.55775 0.913499H16.25C16.4625 0.913499 16.6406 0.985416 16.7843 1.12925C16.9281 1.27308 17 1.45125 17 1.66375C17 1.87642 16.9281 2.0545 16.7843 2.198C16.6406 2.34167 16.4625 2.4135 16.25 2.4135H6.55775ZM1.6635 15.327C1.206 15.327 0.814417 15.1641 0.48875 14.8382C0.162917 14.5126 0 14.121 0 13.6635C0 13.206 0.162917 12.8144 0.48875 12.4887C0.814417 12.1629 1.206 12 1.6635 12C2.121 12 2.51258 12.1629 2.83825 12.4887C3.16408 12.8144 3.327 13.206 3.327 13.6635C3.327 14.121 3.16408 14.5126 2.83825 14.8382C2.51258 15.1641 2.121 15.327 1.6635 15.327ZM1.6635 9.327C1.206 9.327 0.814417 9.16408 0.48875 8.83825C0.162917 8.51258 0 8.121 0 7.6635C0 7.206 0.162917 6.81442 0.48875 6.48875C0.814417 6.16292 1.206 6 1.6635 6C2.121 6 2.51258 6.16292 2.83825 6.48875C3.16408 6.81442 3.327 7.206 3.327 7.6635C3.327 8.121 3.16408 8.51258 2.83825 8.83825C2.51258 9.16408 2.121 9.327 1.6635 9.327ZM1.6635 3.327C1.206 3.327 0.814417 3.16408 0.48875 2.83825C0.162917 2.51258 0 2.121 0 1.6635C0 1.206 0.162917 0.814416 0.48875 0.48875C0.814417 0.162916 1.206 0 1.6635 0C2.121 0 2.51258 0.162916 2.83825 0.48875C3.16408 0.814416 3.327 1.206 3.327 1.6635C3.327 2.121 3.16408 2.51258 2.83825 2.83825C2.51258 3.16408 2.121 3.327 1.6635 3.327Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(3.5, 4)">%0A    <path d="M6.55775 14.4135C6.34525 14.4135 6.16708 14.3416 6.02325 14.1977C5.87958 14.0539 5.80775 13.8757 5.80775 13.6632C5.80775 13.4506 5.87958 13.2725 6.02325 13.129C6.16708 12.9853 6.34525 12.9135 6.55775 12.9135H16.25C16.4625 12.9135 16.6406 12.9854 16.7843 13.1292C16.9281 13.2731 17 13.4513 17 13.6637C17 13.8764 16.9281 14.0545 16.7843 14.198C16.6406 14.3417 16.4625 14.4135 16.25 14.4135H6.55775ZM6.55775 8.4135C6.34525 8.4135 6.16708 8.34158 6.02325 8.19775C5.87958 8.05392 5.80775 7.87575 5.80775 7.66325C5.80775 7.45058 5.87958 7.2725 6.02325 7.129C6.16708 6.98533 6.34525 6.9135 6.55775 6.9135H16.25C16.4625 6.9135 16.6406 6.98542 16.7843 7.12925C16.9281 7.27308 17 7.45125 17 7.66375C17 7.87642 16.9281 8.0545 16.7843 8.198C16.6406 8.34167 16.4625 8.4135 16.25 8.4135H6.55775ZM6.55775 2.4135C6.34525 2.4135 6.16708 2.34158 6.02325 2.19775C5.87958 2.05392 5.80775 1.87575 5.80775 1.66325C5.80775 1.45058 5.87958 1.2725 6.02325 1.129C6.16708 0.985333 6.34525 0.913499 6.55775 0.913499H16.25C16.4625 0.913499 16.6406 0.985416 16.7843 1.12925C16.9281 1.27308 17 1.45125 17 1.66375C17 1.87642 16.9281 2.0545 16.7843 2.198C16.6406 2.34167 16.4625 2.4135 16.25 2.4135H6.55775ZM1.6635 15.327C1.206 15.327 0.814417 15.1641 0.48875 14.8382C0.162917 14.5126 0 14.121 0 13.6635C0 13.206 0.162917 12.8144 0.48875 12.4887C0.814417 12.1629 1.206 12 1.6635 12C2.121 12 2.51258 12.1629 2.83825 12.4887C3.16408 12.8144 3.327 13.206 3.327 13.6635C3.327 14.121 3.16408 14.5126 2.83825 14.8382C2.51258 15.1641 2.121 15.327 1.6635 15.327ZM1.6635 9.327C1.206 9.327 0.814417 9.16408 0.48875 8.83825C0.162917 8.51258 0 8.121 0 7.6635C0 7.206 0.162917 6.81442 0.48875 6.48875C0.814417 6.16292 1.206 6 1.6635 6C2.121 6 2.51258 6.16292 2.83825 6.48875C3.16408 6.81442 3.327 7.206 3.327 7.6635C3.327 8.121 3.16408 8.51258 2.83825 8.83825C2.51258 9.16408 2.121 9.327 1.6635 9.327ZM1.6635 3.327C1.206 3.327 0.814417 3.16408 0.48875 2.83825C0.162917 2.51258 0 2.121 0 1.6635C0 1.206 0.162917 0.814416 0.48875 0.48875C0.814417 0.162916 1.206 0 1.6635 0C2.121 0 2.51258 0.162916 2.83825 0.48875C3.16408 0.814416 3.327 1.206 3.327 1.6635C3.327 2.121 3.16408 2.51258 2.83825 2.83825C2.51258 3.16408 2.121 3.327 1.6635 3.327Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
}
.cometchat-formatting-toolbar__icon--blockquote {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <path d="M4.25 20.5C4.0375 20.5 3.85942 20.4281 3.71575 20.2843C3.57192 20.1404 3.5 19.9622 3.5 19.7498C3.5 19.5371 3.57192 19.359 3.71575 19.2155C3.85942 19.0718 4.0375 19 4.25 19H19.75C19.9625 19 20.1406 19.0719 20.2843 19.2158C20.4281 19.3596 20.5 19.5378 20.5 19.7502C20.5 19.9629 20.4281 20.141 20.2843 20.2845C20.1406 20.4282 19.9625 20.5 19.75 20.5H4.25ZM4.25 16.625C4.0375 16.625 3.85942 16.5531 3.71575 16.4093C3.57192 16.2654 3.5 16.0872 3.5 15.8748C3.5 15.6621 3.57192 15.484 3.71575 15.3405C3.85942 15.1968 4.0375 15.125 4.25 15.125H13.75C13.9625 15.125 14.1406 15.1969 14.2843 15.3408C14.4281 15.4846 14.5 15.6628 14.5 15.8753C14.5 16.0879 14.4281 16.266 14.2843 16.4095C14.1406 16.5532 13.9625 16.625 13.75 16.625H4.25ZM4.25 12.75C4.0375 12.75 3.85942 12.6781 3.71575 12.5343C3.57192 12.3904 3.5 12.2122 3.5 11.9998C3.5 11.7871 3.57192 11.609 3.71575 11.4655C3.85942 11.3218 4.0375 11.25 4.25 11.25H19.75C19.9625 11.25 20.1406 11.3219 20.2843 11.4658C20.4281 11.6096 20.5 11.7878 20.5 12.0003C20.5 12.2129 20.4281 12.391 20.2843 12.5345C20.1406 12.6782 19.9625 12.75 19.75 12.75H4.25ZM4.25 8.875C4.0375 8.875 3.85942 8.80308 3.71575 8.65925C3.57192 8.51542 3.5 8.33725 3.5 8.12475C3.5 7.91208 3.57192 7.734 3.71575 7.5905C3.85942 7.44683 4.0375 7.375 4.25 7.375H13.75C13.9625 7.375 14.1406 7.44692 14.2843 7.59075C14.4281 7.73458 14.5 7.91275 14.5 8.12525C14.5 8.33792 14.4281 8.516 14.2843 8.6595C14.1406 8.80317 13.9625 8.875 13.75 8.875H4.25ZM4.25 5C4.0375 5 3.85942 4.92808 3.71575 4.78425C3.57192 4.64042 3.5 4.46225 3.5 4.24975C3.5 4.03708 3.57192 3.859 3.71575 3.7155C3.85942 3.57183 4.0375 3.5 4.25 3.5H19.75C19.9625 3.5 20.1406 3.57192 20.2843 3.71575C20.4281 3.85958 20.5 4.03775 20.5 4.25025C20.5 4.46292 20.4281 4.641 20.2843 4.7845C20.1406 4.92817 19.9625 5 19.75 5H4.25Z" fill="%23A1A1A1"/>%0A</svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <path d="M4.25 20.5C4.0375 20.5 3.85942 20.4281 3.71575 20.2843C3.57192 20.1404 3.5 19.9622 3.5 19.7498C3.5 19.5371 3.57192 19.359 3.71575 19.2155C3.85942 19.0718 4.0375 19 4.25 19H19.75C19.9625 19 20.1406 19.0719 20.2843 19.2158C20.4281 19.3596 20.5 19.5378 20.5 19.7502C20.5 19.9629 20.4281 20.141 20.2843 20.2845C20.1406 20.4282 19.9625 20.5 19.75 20.5H4.25ZM4.25 16.625C4.0375 16.625 3.85942 16.5531 3.71575 16.4093C3.57192 16.2654 3.5 16.0872 3.5 15.8748C3.5 15.6621 3.57192 15.484 3.71575 15.3405C3.85942 15.1968 4.0375 15.125 4.25 15.125H13.75C13.9625 15.125 14.1406 15.1969 14.2843 15.3408C14.4281 15.4846 14.5 15.6628 14.5 15.8753C14.5 16.0879 14.4281 16.266 14.2843 16.4095C14.1406 16.5532 13.9625 16.625 13.75 16.625H4.25ZM4.25 12.75C4.0375 12.75 3.85942 12.6781 3.71575 12.5343C3.57192 12.3904 3.5 12.2122 3.5 11.9998C3.5 11.7871 3.57192 11.609 3.71575 11.4655C3.85942 11.3218 4.0375 11.25 4.25 11.25H19.75C19.9625 11.25 20.1406 11.3219 20.2843 11.4658C20.4281 11.6096 20.5 11.7878 20.5 12.0003C20.5 12.2129 20.4281 12.391 20.2843 12.5345C20.1406 12.6782 19.9625 12.75 19.75 12.75H4.25ZM4.25 8.875C4.0375 8.875 3.85942 8.80308 3.71575 8.65925C3.57192 8.51542 3.5 8.33725 3.5 8.12475C3.5 7.91208 3.57192 7.734 3.71575 7.5905C3.85942 7.44683 4.0375 7.375 4.25 7.375H13.75C13.9625 7.375 14.1406 7.44692 14.2843 7.59075C14.4281 7.73458 14.5 7.91275 14.5 8.12525C14.5 8.33792 14.4281 8.516 14.2843 8.6595C14.1406 8.80317 13.9625 8.875 13.75 8.875H4.25ZM4.25 5C4.0375 5 3.85942 4.92808 3.71575 4.78425C3.57192 4.64042 3.5 4.46225 3.5 4.24975C3.5 4.03708 3.57192 3.859 3.71575 3.7155C3.85942 3.57183 4.0375 3.5 4.25 3.5H19.75C19.9625 3.5 20.1406 3.57192 20.2843 3.71575C20.4281 3.85958 20.5 4.03775 20.5 4.25025C20.5 4.46292 20.4281 4.641 20.2843 4.7845C20.1406 4.92817 19.9625 5 19.75 5H4.25Z" fill="%23A1A1A1"/>%0A</svg>');
}
.cometchat-formatting-toolbar__icon--code {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <path d="M4.46891 12.0149L8.52666 16.0724C8.66499 16.2109 8.73582 16.385 8.73916 16.5946C8.74232 16.8041 8.67149 16.9814 8.52666 17.1264C8.38166 17.2712 8.20599 17.3436 7.99966 17.3436C7.79332 17.3436 7.61766 17.2712 7.47266 17.1264L2.97841 12.6321C2.88491 12.5385 2.81891 12.4397 2.78041 12.3359C2.74191 12.232 2.72266 12.1199 2.72266 11.9994C2.72266 11.8789 2.74191 11.7667 2.78041 11.6629C2.81891 11.559 2.88491 11.4603 2.97841 11.3666L7.47266 6.87238C7.62149 6.72371 7.79816 6.64779 8.00266 6.64463C8.20699 6.64146 8.38674 6.71738 8.54191 6.87238C8.69707 7.02754 8.77466 7.20579 8.77466 7.40713C8.77466 7.60829 8.69707 7.78646 8.54191 7.94163L4.46891 12.0149ZM19.5304 11.9839L15.4727 7.92638C15.3343 7.78788 15.2635 7.61379 15.2602 7.40413C15.257 7.19463 15.3278 7.01738 15.4727 6.87238C15.6177 6.72754 15.7933 6.65513 15.9997 6.65513C16.206 6.65513 16.3817 6.72754 16.5267 6.87238L21.0209 11.3666C21.1144 11.4603 21.1804 11.559 21.2189 11.6629C21.2574 11.7667 21.2767 11.8789 21.2767 11.9994C21.2767 12.1199 21.2574 12.232 21.2189 12.3359C21.1804 12.4397 21.1144 12.5385 21.0209 12.6321L16.5267 17.1264C16.3778 17.275 16.2037 17.3484 16.0044 17.3464C15.8051 17.3445 15.6278 17.266 15.4727 17.1109C15.3177 16.9557 15.2402 16.7775 15.2402 16.5764C15.2402 16.375 15.3177 16.1968 15.4727 16.0416L19.5304 11.9839Z" fill="%23A1A1A1"/>%0A</svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <path d="M4.46891 12.0149L8.52666 16.0724C8.66499 16.2109 8.73582 16.385 8.73916 16.5946C8.74232 16.8041 8.67149 16.9814 8.52666 17.1264C8.38166 17.2712 8.20599 17.3436 7.99966 17.3436C7.79332 17.3436 7.61766 17.2712 7.47266 17.1264L2.97841 12.6321C2.88491 12.5385 2.81891 12.4397 2.78041 12.3359C2.74191 12.232 2.72266 12.1199 2.72266 11.9994C2.72266 11.8789 2.74191 11.7667 2.78041 11.6629C2.81891 11.559 2.88491 11.4603 2.97841 11.3666L7.47266 6.87238C7.62149 6.72371 7.79816 6.64779 8.00266 6.64463C8.20699 6.64146 8.38674 6.71738 8.54191 6.87238C8.69707 7.02754 8.77466 7.20579 8.77466 7.40713C8.77466 7.60829 8.69707 7.78646 8.54191 7.94163L4.46891 12.0149ZM19.5304 11.9839L15.4727 7.92638C15.3343 7.78788 15.2635 7.61379 15.2602 7.40413C15.257 7.19463 15.3278 7.01738 15.4727 6.87238C15.6177 6.72754 15.7933 6.65513 15.9997 6.65513C16.206 6.65513 16.3817 6.72754 16.5267 6.87238L21.0209 11.3666C21.1144 11.4603 21.1804 11.559 21.2189 11.6629C21.2574 11.7667 21.2767 11.8789 21.2767 11.9994C21.2767 12.1199 21.2574 12.232 21.2189 12.3359C21.1804 12.4397 21.1144 12.5385 21.0209 12.6321L16.5267 17.1264C16.3778 17.275 16.2037 17.3484 16.0044 17.3464C15.8051 17.3445 15.6278 17.266 15.4727 17.1109C15.3177 16.9557 15.2402 16.7775 15.2402 16.5764C15.2402 16.375 15.3177 16.1968 15.4727 16.0416L19.5304 11.9839Z" fill="%23A1A1A1"/>%0A</svg>');
}
.cometchat-formatting-toolbar__icon--code-block {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(3.5, 3.5)">%0A    <path d="M4.96925 8.5L6.61725 6.852C6.76592 6.70317 6.84192 6.52908 6.84525 6.32975C6.84842 6.13042 6.77242 5.95317 6.61725 5.798C6.46208 5.643 6.28392 5.5655 6.08275 5.5655C5.88142 5.5655 5.70317 5.643 5.548 5.798L3.47875 7.86725C3.38525 7.96092 3.31925 8.05967 3.28075 8.1635C3.24225 8.26733 3.223 8.3795 3.223 8.5C3.223 8.6205 3.24225 8.73267 3.28075 8.8365C3.31925 8.94033 3.38525 9.03908 3.47875 9.13275L5.55775 11.2115C5.70642 11.3602 5.883 11.4362 6.0875 11.4395C6.292 11.4427 6.47183 11.3667 6.627 11.2115C6.782 11.0563 6.8595 10.8807 6.8595 10.6845C6.8595 10.4885 6.782 10.3129 6.627 10.1578L4.96925 8.5ZM12.0307 8.5L10.373 10.1578C10.2243 10.3064 10.1484 10.4804 10.1453 10.6798C10.1421 10.8791 10.218 11.0563 10.373 11.2115C10.5282 11.3667 10.7064 11.4443 10.9078 11.4443C11.1089 11.4443 11.2871 11.3667 11.4423 11.2115L13.5212 9.13275C13.6147 9.03908 13.6808 8.94033 13.7193 8.8365C13.7578 8.73267 13.777 8.6205 13.777 8.5C13.777 8.3795 13.7578 8.26733 13.7193 8.1635C13.6808 8.05967 13.6147 7.96092 13.5212 7.86725L11.4423 5.7885C11.3679 5.71417 11.2843 5.65842 11.1913 5.62125C11.0984 5.58408 11.0055 5.5655 10.9125 5.5655C10.8195 5.5655 10.7249 5.58408 10.6288 5.62125C10.5328 5.65842 10.4475 5.71417 10.373 5.7885C10.218 5.94367 10.1405 6.11933 10.1405 6.3155C10.1405 6.5115 10.218 6.68708 10.373 6.84225L12.0307 8.5ZM1.80775 17C1.30258 17 0.875 16.825 0.525 16.475C0.175 16.125 0 15.6974 0 15.1923V1.80775C0 1.30258 0.175 0.875 0.525 0.525C0.875 0.175 1.30258 0 1.80775 0H15.1923C15.6974 0 16.125 0.175 16.475 0.525C16.825 0.875 17 1.30258 17 1.80775V15.1923C17 15.6974 16.825 16.125 16.475 16.475C16.125 16.825 15.6974 17 15.1923 17H1.80775ZM1.80775 15.5H15.1923C15.2692 15.5 15.3398 15.4679 15.4038 15.4038C15.4679 15.3398 15.5 15.2692 15.5 15.1923V1.80775C15.5 1.73075 15.4679 1.66025 15.4038 1.59625C15.3398 1.53208 15.2692 1.5 15.1923 1.5H1.80775C1.73075 1.5 1.66025 1.53208 1.59625 1.59625C1.53208 1.66025 1.5 1.73075 1.5 1.80775V15.1923C1.5 15.2692 1.53208 15.3398 1.59625 15.4038C1.66025 15.4679 1.73075 15.5 1.80775 15.5Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">%0A  <g transform="translate(3.5, 3.5)">%0A    <path d="M4.96925 8.5L6.61725 6.852C6.76592 6.70317 6.84192 6.52908 6.84525 6.32975C6.84842 6.13042 6.77242 5.95317 6.61725 5.798C6.46208 5.643 6.28392 5.5655 6.08275 5.5655C5.88142 5.5655 5.70317 5.643 5.548 5.798L3.47875 7.86725C3.38525 7.96092 3.31925 8.05967 3.28075 8.1635C3.24225 8.26733 3.223 8.3795 3.223 8.5C3.223 8.6205 3.24225 8.73267 3.28075 8.8365C3.31925 8.94033 3.38525 9.03908 3.47875 9.13275L5.55775 11.2115C5.70642 11.3602 5.883 11.4362 6.0875 11.4395C6.292 11.4427 6.47183 11.3667 6.627 11.2115C6.782 11.0563 6.8595 10.8807 6.8595 10.6845C6.8595 10.4885 6.782 10.3129 6.627 10.1578L4.96925 8.5ZM12.0307 8.5L10.373 10.1578C10.2243 10.3064 10.1484 10.4804 10.1453 10.6798C10.1421 10.8791 10.218 11.0563 10.373 11.2115C10.5282 11.3667 10.7064 11.4443 10.9078 11.4443C11.1089 11.4443 11.2871 11.3667 11.4423 11.2115L13.5212 9.13275C13.6147 9.03908 13.6808 8.94033 13.7193 8.8365C13.7578 8.73267 13.777 8.6205 13.777 8.5C13.777 8.3795 13.7578 8.26733 13.7193 8.1635C13.6808 8.05967 13.6147 7.96092 13.5212 7.86725L11.4423 5.7885C11.3679 5.71417 11.2843 5.65842 11.1913 5.62125C11.0984 5.58408 11.0055 5.5655 10.9125 5.5655C10.8195 5.5655 10.7249 5.58408 10.6288 5.62125C10.5328 5.65842 10.4475 5.71417 10.373 5.7885C10.218 5.94367 10.1405 6.11933 10.1405 6.3155C10.1405 6.5115 10.218 6.68708 10.373 6.84225L12.0307 8.5ZM1.80775 17C1.30258 17 0.875 16.825 0.525 16.475C0.175 16.125 0 15.6974 0 15.1923V1.80775C0 1.30258 0.175 0.875 0.525 0.525C0.875 0.175 1.30258 0 1.80775 0H15.1923C15.6974 0 16.125 0.175 16.475 0.525C16.825 0.875 17 1.30258 17 1.80775V15.1923C17 15.6974 16.825 16.125 16.475 16.475C16.125 16.825 15.6974 17 15.1923 17H1.80775ZM1.80775 15.5H15.1923C15.2692 15.5 15.3398 15.4679 15.4038 15.4038C15.4679 15.3398 15.5 15.2692 15.5 15.1923V1.80775C15.5 1.73075 15.4679 1.66025 15.4038 1.59625C15.3398 1.53208 15.2692 1.5 15.1923 1.5H1.80775C1.73075 1.5 1.66025 1.53208 1.59625 1.59625C1.53208 1.66025 1.5 1.73075 1.5 1.80775V15.1923C1.5 15.2692 1.53208 15.3398 1.59625 15.4038C1.66025 15.4679 1.73075 15.5 1.80775 15.5Z" fill="%23A1A1A1"/>%0A  </g>%0A</svg>%0A');
}
.cometchat-formatting-toolbar__separator {
  width: 1px;
  height: 20px;
  background: var(--cometchat-border-color-default);
  margin: 0 var(--cometchat-margin-1, 4px);
  flex-shrink: 0;
}
.cometchat-formatting-toolbar--floating {
  position: fixed;
  z-index: 1000;
  transform: translateX(-50%);
  background: var(--cometchat-background-color-02);
  border-radius: var(--cometchat-radius-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--cometchat-border-color-light);
  width: auto;
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
  gap: var(--cometchat-spacing-1, 4px);
}
.cometchat-formatting-toolbar--floating .cometchat-formatting-toolbar__button {
  width: 22px;
  height: 22px;
}
.cometchat-formatting-toolbar--floating .cometchat-formatting-toolbar__icon {
  width: 16px;
  height: 16px;
}
.cometchat-formatting-toolbar--floating .cometchat-formatting-toolbar__separator {
  height: 16px;
  margin: 0 var(--cometchat-margin-1, 4px);
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-formatting-toolbar__button {
    transition: none;
  }
}

/* src/components/base/CometChatLinkDialog/CometChatLinkDialog.css */
.cometchat-link-dialog {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 360px;
  max-width: 400px;
  padding: var(--cometchat-padding-5, 20px);
  flex-direction: column;
  gap: var(--cometchat-spacing-4, 16px);
  border-radius: var(--cometchat-radius-3, 12px);
  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);
  overflow: hidden;
}
.cometchat-link-dialog__title {
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-heading3-medium, 500 18px Roboto);
  word-break: break-word;
  overflow-wrap: break-word;
}
.cometchat-link-dialog__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-3, 12px);
}
.cometchat-link-dialog__input-group {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-1, 4px);
}
.cometchat-link-dialog__label {
  color: var(--cometchat-text-color-secondary, #8a8a8a);
  font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
}
.cometchat-link-dialog__input {
  box-sizing: border-box;
  width: 100%;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
  border-radius: var(--cometchat-radius-2, 8px);
  border: 1px solid var(--cometchat-border-color-default, #d1d1d1);
  background: var(--cometchat-background-color-01, #fff);
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  outline: none;
  transition: border-color 0.2s ease;
}
.cometchat-link-dialog__input::placeholder {
  color: var(--cometchat-text-color-tertiary, #b8b8b8);
}
.cometchat-link-dialog__input:focus {
  border-color: var(--cometchat-primary-color, #6852d6);
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: -1px;
}
.cometchat-link-dialog__input[aria-invalid=true] {
  border-color: var(--cometchat-error-color, #f44649);
}
.cometchat-link-dialog__input[aria-invalid=true]:focus {
  outline-color: var(--cometchat-error-color, #f44649);
}
.cometchat-link-dialog__error {
  color: var(--cometchat-error-color, #f44649);
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  padding: var(--cometchat-padding-1, 4px) 0;
}
.cometchat-link-dialog__button-group {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
  width: 100%;
}
.cometchat-link-dialog__button-group-cancel,
.cometchat-link-dialog__button-group-save {
  flex: 1;
  min-width: 0;
  display: flex;
  height: 36px;
}
.cometchat-link-dialog__button-group-cancel > button,
.cometchat-link-dialog__button-group-save > button {
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-link-dialog__input {
    transition: none;
  }
}

/* src/components/base/CometChatLinkPopover/CometChatLinkPopover.css */
.cometchat-link-popover {
  position: absolute;
  z-index: 1000;
  bottom: 0;
  left: 0;
}
.cometchat-link-popover__content {
  position: relative;
  background: var(--cometchat-background-color-01, #fff);
  border-radius: var(--cometchat-radius-4, 16px);
  padding: var(--cometchat-padding-6, 24px);
  width: 320px;
  max-width: 90vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-3, 12px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.cometchat-link-popover__close {
  position: absolute;
  top: var(--cometchat-spacing-4, 16px);
  right: var(--cometchat-spacing-4, 16px);
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--cometchat-icon-color-secondary, #727272);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cometchat-radius-1, 4px);
  padding: 0;
  transition: background-color 0.2s ease;
}
.cometchat-link-popover__close:hover {
  background: var(--cometchat-background-color-02, #f5f5f5);
  color: var(--cometchat-icon-color-primary, #141414);
}
.cometchat-link-popover__close:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-link-popover__title {
  font: var(--cometchat-font-heading4-bold, 700 16px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  padding-right: var(--cometchat-padding-7, 28px);
  word-break: break-word;
  text-align: left;
}
.cometchat-link-popover__url {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  color: var(--cometchat-primary-color, #6852d6);
  text-decoration: none;
  display: block;
  word-break: break-all;
  text-align: left;
}
.cometchat-link-popover__url:hover {
  text-decoration: underline;
}
.cometchat-link-popover__url:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #6852d6);
  outline-offset: 2px;
}
.cometchat-link-popover__actions {
  display: flex;
  gap: var(--cometchat-spacing-3, 12px);
}
.cometchat-link-popover__button--edit {
  flex: 1;
  height: 40px;
}
.cometchat-link-popover__button--remove {
  flex: 1;
  height: 40px;
  background: var(--cometchat-error-color, #f44649) !important;
  border: none !important;
}
.cometchat-link-popover__button--remove:hover {
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-link-popover__close,
  .cometchat-link-popover__button--edit,
  .cometchat-link-popover__button--remove {
    transition: none;
  }
}

/* src/components/base/CometChatMediaRecorder/CometChatMediaRecorder.css */
.cometchat-media-recorder__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cometchat-media-recorder--inline {
  display: flex;
  gap: var(--cometchat-spacing-2, 8px);
  width: fit-content;
  height: 100%;
  padding: 0 var(--cometchat-padding-2, 8px);
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
}
.cometchat-media-recorder__controls {
  display: contents;
}
.cometchat-media-recorder__inline-delete {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--cometchat-radius-max, 9999px);
  transition: background-color 0.15s ease;
}
.cometchat-media-recorder__inline-delete:hover {
  background: var(--cometchat-background-color-02, rgba(0, 0, 0, 0.04));
}
.cometchat-media-recorder__inline-delete-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  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_8465" 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_8465)">%0A<path d="M7.30775 20.5C6.81058 20.5 6.385 20.323 6.031 19.969C5.677 19.615 5.5 19.1894 5.5 18.6923V6H5.25C5.0375 6 4.85942 5.92808 4.71575 5.78425C4.57192 5.64042 4.5 5.46225 4.5 5.24975C4.5 5.03708 4.57192 4.859 4.71575 4.7155C4.85942 4.57183 5.0375 4.5 5.25 4.5H9C9 4.25517 9.08625 4.0465 9.25875 3.874C9.43108 3.70167 9.63967 3.6155 9.8845 3.6155H14.1155C14.3603 3.6155 14.5689 3.70167 14.7413 3.874C14.9138 4.0465 15 4.25517 15 4.5H18.75C18.9625 4.5 19.1406 4.57192 19.2843 4.71575C19.4281 4.85959 19.5 5.03775 19.5 5.25025C19.5 5.46292 19.4281 5.641 19.2843 5.7845C19.1406 5.92817 18.9625 6 18.75 6H18.5V18.6923C18.5 19.1894 18.323 19.615 17.969 19.969C17.615 20.323 17.1894 20.5 16.6923 20.5H7.30775ZM10.1543 17C10.3668 17 10.5448 16.9282 10.6885 16.7845C10.832 16.6407 10.9037 16.4625 10.9037 16.25V8.75C10.9037 8.5375 10.8318 8.35933 10.688 8.2155C10.5443 8.07183 10.3662 8 10.1535 8C9.941 8 9.76292 8.07183 9.61925 8.2155C9.47575 8.35933 9.404 8.5375 9.404 8.75V16.25C9.404 16.4625 9.47583 16.6407 9.6195 16.7845C9.76333 16.9282 9.94158 17 10.1543 17ZM13.8465 17C14.059 17 14.2371 16.9282 14.3807 16.7845C14.5243 16.6407 14.596 16.4625 14.596 16.25V8.75C14.596 8.5375 14.5242 8.35933 14.3805 8.2155C14.2367 8.07183 14.0584 8 13.8458 8C13.6333 8 13.4552 8.07183 13.3115 8.2155C13.168 8.35933 13.0962 8.5375 13.0962 8.75V16.25C13.0962 16.4625 13.1682 16.6407 13.312 16.7845C13.4557 16.9282 13.6338 17 13.8465 17Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center 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<mask id="mask0_740_8465" 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_8465)">%0A<path d="M7.30775 20.5C6.81058 20.5 6.385 20.323 6.031 19.969C5.677 19.615 5.5 19.1894 5.5 18.6923V6H5.25C5.0375 6 4.85942 5.92808 4.71575 5.78425C4.57192 5.64042 4.5 5.46225 4.5 5.24975C4.5 5.03708 4.57192 4.859 4.71575 4.7155C4.85942 4.57183 5.0375 4.5 5.25 4.5H9C9 4.25517 9.08625 4.0465 9.25875 3.874C9.43108 3.70167 9.63967 3.6155 9.8845 3.6155H14.1155C14.3603 3.6155 14.5689 3.70167 14.7413 3.874C14.9138 4.0465 15 4.25517 15 4.5H18.75C18.9625 4.5 19.1406 4.57192 19.2843 4.71575C19.4281 4.85959 19.5 5.03775 19.5 5.25025C19.5 5.46292 19.4281 5.641 19.2843 5.7845C19.1406 5.92817 18.9625 6 18.75 6H18.5V18.6923C18.5 19.1894 18.323 19.615 17.969 19.969C17.615 20.323 17.1894 20.5 16.6923 20.5H7.30775ZM10.1543 17C10.3668 17 10.5448 16.9282 10.6885 16.7845C10.832 16.6407 10.9037 16.4625 10.9037 16.25V8.75C10.9037 8.5375 10.8318 8.35933 10.688 8.2155C10.5443 8.07183 10.3662 8 10.1535 8C9.941 8 9.76292 8.07183 9.61925 8.2155C9.47575 8.35933 9.404 8.5375 9.404 8.75V16.25C9.404 16.4625 9.47583 16.6407 9.6195 16.7845C9.76333 16.9282 9.94158 17 10.1543 17ZM13.8465 17C14.059 17 14.2371 16.9282 14.3807 16.7845C14.5243 16.6407 14.596 16.4625 14.596 16.25V8.75C14.596 8.5375 14.5242 8.35933 14.3805 8.2155C14.2367 8.07183 14.0584 8 13.8458 8C13.6333 8 13.4552 8.07183 13.3115 8.2155C13.168 8.35933 13.0962 8.5375 13.0962 8.75V16.25C13.0962 16.4625 13.1682 16.6407 13.312 16.7845C13.4557 16.9282 13.6338 17 13.8465 17Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-icon-color-secondary, #727272);
}
.cometchat-media-recorder__recording-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: var(--cometchat-radius-max, 9999px);
  background: var(--cometchat-error-color, #f44336);
}
@media (prefers-reduced-motion: no-preference) {
  .cometchat-media-recorder__recording-dot {
    animation: cometchat-recording-pulse 1.5s ease-in-out infinite;
  }
}
@keyframes cometchat-recording-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.cometchat-media-recorder__inline-record {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--cometchat-radius-max, 9999px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  transition: background-color 0.15s ease;
}
.cometchat-media-recorder__inline-record:hover {
  background: var(--cometchat-background-color-02, rgba(0, 0, 0, 0.04));
}
.cometchat-media-recorder__inline-record-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  mask: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Base_Icon">%0A<mask id="mask0_3522_63973" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">%0A<rect id="Bounding box" width="32" height="32" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_3522_63973)">%0A<path id="mic" d="M15.9995 18C15.0679 18 14.2795 17.6773 13.6342 17.032C12.9888 16.3867 12.6662 15.5982 12.6662 14.6667V6.66667C12.6662 5.73511 12.9888 4.94667 13.6342 4.30134C14.2795 3.656 15.0679 3.33334 15.9995 3.33334C16.931 3.33334 17.7195 3.656 18.3648 4.30134C19.0102 4.94667 19.3328 5.73511 19.3328 6.66667V14.6667C19.3328 15.5982 19.0102 16.3867 18.3648 17.032C17.7195 17.6773 16.931 18 15.9995 18ZM14.9995 26.6667V23.2717C13.0148 23.0426 11.3139 22.2272 9.89682 20.8257C8.47993 19.4239 7.65005 17.7153 7.40716 15.7C7.37138 15.4162 7.44571 15.1731 7.63016 14.9707C7.81482 14.768 8.04905 14.6667 8.33282 14.6667C8.6166 14.6667 8.85416 14.7646 9.04549 14.9603C9.23705 15.1559 9.36449 15.3956 9.42782 15.6793C9.67049 17.312 10.417 18.6624 11.6675 19.7307C12.9179 20.7991 14.3619 21.3333 15.9995 21.3333C17.6593 21.3333 19.1088 20.7936 20.3482 19.714C21.5875 18.6347 22.3285 17.2898 22.5712 15.6793C22.6345 15.3956 22.7619 15.1559 22.9535 14.9603C23.1448 14.7646 23.3824 14.6667 23.6662 14.6667C23.9499 14.6667 24.1842 14.768 24.3688 14.9707C24.5533 15.1731 24.6276 15.4162 24.5918 15.7C24.3489 17.6709 23.5246 19.3662 22.1188 20.786C20.7128 22.2056 19.0064 23.0341 16.9995 23.2717V26.6667C16.9995 26.9504 16.9037 27.188 16.7122 27.3793C16.5208 27.5709 16.2833 27.6667 15.9995 27.6667C15.7157 27.6667 15.4782 27.5709 15.2868 27.3793C15.0953 27.188 14.9995 26.9504 14.9995 26.6667Z" fill="%23F44649"/>%0A</g>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Base_Icon">%0A<mask id="mask0_3522_63973" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">%0A<rect id="Bounding box" width="32" height="32" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_3522_63973)">%0A<path id="mic" d="M15.9995 18C15.0679 18 14.2795 17.6773 13.6342 17.032C12.9888 16.3867 12.6662 15.5982 12.6662 14.6667V6.66667C12.6662 5.73511 12.9888 4.94667 13.6342 4.30134C14.2795 3.656 15.0679 3.33334 15.9995 3.33334C16.931 3.33334 17.7195 3.656 18.3648 4.30134C19.0102 4.94667 19.3328 5.73511 19.3328 6.66667V14.6667C19.3328 15.5982 19.0102 16.3867 18.3648 17.032C17.7195 17.6773 16.931 18 15.9995 18ZM14.9995 26.6667V23.2717C13.0148 23.0426 11.3139 22.2272 9.89682 20.8257C8.47993 19.4239 7.65005 17.7153 7.40716 15.7C7.37138 15.4162 7.44571 15.1731 7.63016 14.9707C7.81482 14.768 8.04905 14.6667 8.33282 14.6667C8.6166 14.6667 8.85416 14.7646 9.04549 14.9603C9.23705 15.1559 9.36449 15.3956 9.42782 15.6793C9.67049 17.312 10.417 18.6624 11.6675 19.7307C12.9179 20.7991 14.3619 21.3333 15.9995 21.3333C17.6593 21.3333 19.1088 20.7936 20.3482 19.714C21.5875 18.6347 22.3285 17.2898 22.5712 15.6793C22.6345 15.3956 22.7619 15.1559 22.9535 14.9603C23.1448 14.7646 23.3824 14.6667 23.6662 14.6667C23.9499 14.6667 24.1842 14.768 24.3688 14.9707C24.5533 15.1731 24.6276 15.4162 24.5918 15.7C24.3489 17.6709 23.5246 19.3662 22.1188 20.786C20.7128 22.2056 19.0064 23.0341 16.9995 23.2717V26.6667C16.9995 26.9504 16.9037 27.188 16.7122 27.3793C16.5208 27.5709 16.2833 27.6667 15.9995 27.6667C15.7157 27.6667 15.4782 27.5709 15.2868 27.3793C15.0953 27.188 14.9995 26.9504 14.9995 26.6667Z" fill="%23F44649"/>%0A</g>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-primary-color, #3399ff);
}
.cometchat-media-recorder__waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  height: 28px;
  min-width: 0;
  overflow: hidden;
}
.cometchat-media-recorder__waveform-bar {
  width: 3px;
  min-height: 4px;
  border-radius: var(--cometchat-radius-max, 9999px);
  background: var(--cometchat-icon-color-secondary, #727272);
  flex-shrink: 0;
  transition: height 0.15s ease;
}
.cometchat-media-recorder__waveform-bar--active {
  background: var(--cometchat-primary-color, #3399ff);
}
.cometchat-media-recorder__timer {
  font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
  color: var(--cometchat-text-color-primary, #141414);
  flex-shrink: 0;
  min-width: 32px;
  text-align: center;
  user-select: none;
}
.cometchat-media-recorder__inline-pause {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--cometchat-radius-max, 9999px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  transition: background-color 0.15s ease;
}
.cometchat-media-recorder__inline-pause:hover {
  background: var(--cometchat-background-color-02, rgba(0, 0, 0, 0.04));
}
.cometchat-media-recorder__inline-pause-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  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_8317" 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_8317)">%0A<path d="M15.5 18.5C15.091 18.5 14.7387 18.3523 14.4432 18.0568C14.1477 17.7613 14 17.409 14 17V7C14 6.591 14.1477 6.23875 14.4432 5.94325C14.7387 5.64775 15.091 5.5 15.5 5.5H16.25C16.659 5.5 17.0113 5.64775 17.3068 5.94325C17.6023 6.23875 17.75 6.591 17.75 7V17C17.75 17.409 17.6023 17.7613 17.3068 18.0568C17.0113 18.3523 16.659 18.5 16.25 18.5H15.5ZM7.75 18.5C7.341 18.5 6.98875 18.3523 6.69325 18.0568C6.39775 17.7613 6.25 17.409 6.25 17V7C6.25 6.591 6.39775 6.23875 6.69325 5.94325C6.98875 5.64775 7.341 5.5 7.75 5.5H8.5C8.909 5.5 9.26125 5.64775 9.55675 5.94325C9.85225 6.23875 10 6.591 10 7V17C10 17.409 9.85225 17.7613 9.55675 18.0568C9.26125 18.3523 8.909 18.5 8.5 18.5H7.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center 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<mask id="mask0_740_8317" 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_8317)">%0A<path d="M15.5 18.5C15.091 18.5 14.7387 18.3523 14.4432 18.0568C14.1477 17.7613 14 17.409 14 17V7C14 6.591 14.1477 6.23875 14.4432 5.94325C14.7387 5.64775 15.091 5.5 15.5 5.5H16.25C16.659 5.5 17.0113 5.64775 17.3068 5.94325C17.6023 6.23875 17.75 6.591 17.75 7V17C17.75 17.409 17.6023 17.7613 17.3068 18.0568C17.0113 18.3523 16.659 18.5 16.25 18.5H15.5ZM7.75 18.5C7.341 18.5 6.98875 18.3523 6.69325 18.0568C6.39775 17.7613 6.25 17.409 6.25 17V7C6.25 6.591 6.39775 6.23875 6.69325 5.94325C6.98875 5.64775 7.341 5.5 7.75 5.5H8.5C8.909 5.5 9.26125 5.64775 9.55675 5.94325C9.85225 6.23875 10 6.591 10 7V17C10 17.409 9.85225 17.7613 9.55675 18.0568C9.26125 18.3523 8.909 18.5 8.5 18.5H7.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-icon-color-secondary, #727272);
}
.cometchat-media-recorder__inline-resume {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--cometchat-radius-max, 9999px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  transition: background-color 0.15s ease;
}
.cometchat-media-recorder__inline-resume:hover {
  background: var(--cometchat-background-color-02, rgba(0, 0, 0, 0.04));
}
.cometchat-media-recorder__inline-resume-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  mask: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Base_Icon">%0A<mask id="mask0_3522_63973" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">%0A<rect id="Bounding box" width="32" height="32" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_3522_63973)">%0A<path id="mic" d="M15.9995 18C15.0679 18 14.2795 17.6773 13.6342 17.032C12.9888 16.3867 12.6662 15.5982 12.6662 14.6667V6.66667C12.6662 5.73511 12.9888 4.94667 13.6342 4.30134C14.2795 3.656 15.0679 3.33334 15.9995 3.33334C16.931 3.33334 17.7195 3.656 18.3648 4.30134C19.0102 4.94667 19.3328 5.73511 19.3328 6.66667V14.6667C19.3328 15.5982 19.0102 16.3867 18.3648 17.032C17.7195 17.6773 16.931 18 15.9995 18ZM14.9995 26.6667V23.2717C13.0148 23.0426 11.3139 22.2272 9.89682 20.8257C8.47993 19.4239 7.65005 17.7153 7.40716 15.7C7.37138 15.4162 7.44571 15.1731 7.63016 14.9707C7.81482 14.768 8.04905 14.6667 8.33282 14.6667C8.6166 14.6667 8.85416 14.7646 9.04549 14.9603C9.23705 15.1559 9.36449 15.3956 9.42782 15.6793C9.67049 17.312 10.417 18.6624 11.6675 19.7307C12.9179 20.7991 14.3619 21.3333 15.9995 21.3333C17.6593 21.3333 19.1088 20.7936 20.3482 19.714C21.5875 18.6347 22.3285 17.2898 22.5712 15.6793C22.6345 15.3956 22.7619 15.1559 22.9535 14.9603C23.1448 14.7646 23.3824 14.6667 23.6662 14.6667C23.9499 14.6667 24.1842 14.768 24.3688 14.9707C24.5533 15.1731 24.6276 15.4162 24.5918 15.7C24.3489 17.6709 23.5246 19.3662 22.1188 20.786C20.7128 22.2056 19.0064 23.0341 16.9995 23.2717V26.6667C16.9995 26.9504 16.9037 27.188 16.7122 27.3793C16.5208 27.5709 16.2833 27.6667 15.9995 27.6667C15.7157 27.6667 15.4782 27.5709 15.2868 27.3793C15.0953 27.188 14.9995 26.9504 14.9995 26.6667Z" fill="%23F44649"/>%0A</g>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Base_Icon">%0A<mask id="mask0_3522_63973" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">%0A<rect id="Bounding box" width="32" height="32" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_3522_63973)">%0A<path id="mic" d="M15.9995 18C15.0679 18 14.2795 17.6773 13.6342 17.032C12.9888 16.3867 12.6662 15.5982 12.6662 14.6667V6.66667C12.6662 5.73511 12.9888 4.94667 13.6342 4.30134C14.2795 3.656 15.0679 3.33334 15.9995 3.33334C16.931 3.33334 17.7195 3.656 18.3648 4.30134C19.0102 4.94667 19.3328 5.73511 19.3328 6.66667V14.6667C19.3328 15.5982 19.0102 16.3867 18.3648 17.032C17.7195 17.6773 16.931 18 15.9995 18ZM14.9995 26.6667V23.2717C13.0148 23.0426 11.3139 22.2272 9.89682 20.8257C8.47993 19.4239 7.65005 17.7153 7.40716 15.7C7.37138 15.4162 7.44571 15.1731 7.63016 14.9707C7.81482 14.768 8.04905 14.6667 8.33282 14.6667C8.6166 14.6667 8.85416 14.7646 9.04549 14.9603C9.23705 15.1559 9.36449 15.3956 9.42782 15.6793C9.67049 17.312 10.417 18.6624 11.6675 19.7307C12.9179 20.7991 14.3619 21.3333 15.9995 21.3333C17.6593 21.3333 19.1088 20.7936 20.3482 19.714C21.5875 18.6347 22.3285 17.2898 22.5712 15.6793C22.6345 15.3956 22.7619 15.1559 22.9535 14.9603C23.1448 14.7646 23.3824 14.6667 23.6662 14.6667C23.9499 14.6667 24.1842 14.768 24.3688 14.9707C24.5533 15.1731 24.6276 15.4162 24.5918 15.7C24.3489 17.6709 23.5246 19.3662 22.1188 20.786C20.7128 22.2056 19.0064 23.0341 16.9995 23.2717V26.6667C16.9995 26.9504 16.9037 27.188 16.7122 27.3793C16.5208 27.5709 16.2833 27.6667 15.9995 27.6667C15.7157 27.6667 15.4782 27.5709 15.2868 27.3793C15.0953 27.188 14.9995 26.9504 14.9995 26.6667Z" fill="%23F44649"/>%0A</g>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-primary-color, #3399ff);
}
.cometchat-media-recorder__inline-error {
  display: flex;
  align-items: center;
  gap: var(--cometchat-spacing-2, 8px);
  flex: 1;
  min-width: 0;
}
.cometchat-media-recorder__inline-error-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  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_8402" 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_8402)">%0A<path d="M16.5213 13.9018C16.3456 13.8069 16.2292 13.6557 16.172 13.448C16.115 13.2403 16.1339 13.0487 16.2288 12.873C16.3263 12.7025 16.4013 12.5211 16.4538 12.3287C16.5064 12.1364 16.5462 11.9416 16.573 11.7443C16.6205 11.5314 16.716 11.3542 16.8595 11.2125C17.0032 11.0708 17.1814 11 17.3943 11C17.6071 11 17.7827 11.0776 17.921 11.2327C18.0595 11.3877 18.1185 11.5717 18.098 11.7845C18.0608 12.0973 17.999 12.4067 17.9125 12.7125C17.826 13.0182 17.7052 13.3088 17.55 13.5845C17.4552 13.7667 17.3055 13.8888 17.101 13.951C16.8965 14.0132 16.7033 13.9968 16.5213 13.9018ZM12.8288 9.7385L9.67127 6.5615C9.5071 6.39733 9.37827 6.20408 9.28477 5.98175C9.1911 5.75925 9.14427 5.5275 9.14427 5.2865V5C9.14427 4.30133 9.38627 3.71 9.87027 3.226C10.3543 2.742 10.9456 2.5 11.6443 2.5C12.3429 2.5 12.9343 2.742 13.4183 3.226C13.9023 3.71 14.1443 4.30133 14.1443 5V9.1865C14.1443 9.534 13.9865 9.77442 13.671 9.90775C13.3557 10.0411 13.0749 9.98467 12.8288 9.7385ZM10.8943 20V17.4578C9.40577 17.2832 8.1301 16.6704 7.06727 15.6193C6.00443 14.5679 5.38202 13.2865 5.20002 11.775C5.17318 11.5622 5.22893 11.3798 5.36727 11.228C5.50577 11.076 5.68143 11 5.89427 11C6.1071 11 6.28527 11.0734 6.42877 11.2203C6.57243 11.3669 6.66793 11.5467 6.71527 11.7595C6.89743 12.984 7.45743 13.9968 8.39527 14.798C9.3331 15.5993 10.4161 16 11.6443 16C12.2878 16 12.8926 15.8852 13.4588 15.6557C14.0248 15.4262 14.5257 15.1083 14.9615 14.702L16.0308 15.771C15.5474 16.225 14.9974 16.5988 14.3808 16.8923C13.7641 17.1859 13.1019 17.3744 12.3943 17.4578V20C12.3943 20.2128 12.3224 20.391 12.1788 20.5345C12.0353 20.6782 11.8571 20.75 11.6443 20.75C11.4314 20.75 11.2532 20.6782 11.1095 20.5345C10.966 20.391 10.8943 20.2128 10.8943 20ZM19.3405 21.1885L2.20577 4.05375C2.06727 3.91525 1.99643 3.74125 1.99327 3.53175C1.9901 3.32208 2.06093 3.14483 2.20577 3C2.3506 2.85517 2.52627 2.78275 2.73277 2.78275C2.9391 2.78275 3.11468 2.85517 3.25952 3L20.3943 20.1345C20.5328 20.273 20.6036 20.4471 20.6068 20.6568C20.6099 20.8663 20.5391 21.0435 20.3943 21.1885C20.2494 21.3333 20.0738 21.4058 19.8673 21.4058C19.6609 21.4058 19.4853 21.3333 19.3405 21.1885Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center 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<mask id="mask0_740_8402" 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_8402)">%0A<path d="M16.5213 13.9018C16.3456 13.8069 16.2292 13.6557 16.172 13.448C16.115 13.2403 16.1339 13.0487 16.2288 12.873C16.3263 12.7025 16.4013 12.5211 16.4538 12.3287C16.5064 12.1364 16.5462 11.9416 16.573 11.7443C16.6205 11.5314 16.716 11.3542 16.8595 11.2125C17.0032 11.0708 17.1814 11 17.3943 11C17.6071 11 17.7827 11.0776 17.921 11.2327C18.0595 11.3877 18.1185 11.5717 18.098 11.7845C18.0608 12.0973 17.999 12.4067 17.9125 12.7125C17.826 13.0182 17.7052 13.3088 17.55 13.5845C17.4552 13.7667 17.3055 13.8888 17.101 13.951C16.8965 14.0132 16.7033 13.9968 16.5213 13.9018ZM12.8288 9.7385L9.67127 6.5615C9.5071 6.39733 9.37827 6.20408 9.28477 5.98175C9.1911 5.75925 9.14427 5.5275 9.14427 5.2865V5C9.14427 4.30133 9.38627 3.71 9.87027 3.226C10.3543 2.742 10.9456 2.5 11.6443 2.5C12.3429 2.5 12.9343 2.742 13.4183 3.226C13.9023 3.71 14.1443 4.30133 14.1443 5V9.1865C14.1443 9.534 13.9865 9.77442 13.671 9.90775C13.3557 10.0411 13.0749 9.98467 12.8288 9.7385ZM10.8943 20V17.4578C9.40577 17.2832 8.1301 16.6704 7.06727 15.6193C6.00443 14.5679 5.38202 13.2865 5.20002 11.775C5.17318 11.5622 5.22893 11.3798 5.36727 11.228C5.50577 11.076 5.68143 11 5.89427 11C6.1071 11 6.28527 11.0734 6.42877 11.2203C6.57243 11.3669 6.66793 11.5467 6.71527 11.7595C6.89743 12.984 7.45743 13.9968 8.39527 14.798C9.3331 15.5993 10.4161 16 11.6443 16C12.2878 16 12.8926 15.8852 13.4588 15.6557C14.0248 15.4262 14.5257 15.1083 14.9615 14.702L16.0308 15.771C15.5474 16.225 14.9974 16.5988 14.3808 16.8923C13.7641 17.1859 13.1019 17.3744 12.3943 17.4578V20C12.3943 20.2128 12.3224 20.391 12.1788 20.5345C12.0353 20.6782 11.8571 20.75 11.6443 20.75C11.4314 20.75 11.2532 20.6782 11.1095 20.5345C10.966 20.391 10.8943 20.2128 10.8943 20ZM19.3405 21.1885L2.20577 4.05375C2.06727 3.91525 1.99643 3.74125 1.99327 3.53175C1.9901 3.32208 2.06093 3.14483 2.20577 3C2.3506 2.85517 2.52627 2.78275 2.73277 2.78275C2.9391 2.78275 3.11468 2.85517 3.25952 3L20.3943 20.1345C20.5328 20.273 20.6036 20.4471 20.6068 20.6568C20.6099 20.8663 20.5391 21.0435 20.3943 21.1885C20.2494 21.3333 20.0738 21.4058 19.8673 21.4058C19.6609 21.4058 19.4853 21.3333 19.3405 21.1885Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-error-color, #f44336);
}
.cometchat-media-recorder__inline-error-text {
  font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
  color: var(--cometchat-error-color, #f44336);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cometchat-media-recorder__inline-close {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--cometchat-radius-max, 9999px);
  transition: background-color 0.15s ease;
}
.cometchat-media-recorder__inline-close:hover {
  background: var(--cometchat-background-color-02, rgba(0, 0, 0, 0.04));
}
.cometchat-media-recorder__inline-close-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  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: 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-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-icon-color-secondary, #727272);
}
.cometchat-media-recorder__inline-play {
  display: flex;
  width: 28px;
  height: 28px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--cometchat-radius-max, 9999px);
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  background: var(--cometchat-background-color-01, #fff);
  transition: background-color 0.15s ease;
}
.cometchat-media-recorder__inline-play:hover {
  background: var(--cometchat-background-color-02, rgba(0, 0, 0, 0.04));
}
.cometchat-media-recorder__inline-play-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  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_8334" 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_8334)">%0A<path d="M8.5 16.4442V7.55573C8.5 7.29173 8.59058 7.07506 8.77175 6.90573C8.95292 6.73656 9.16433 6.65198 9.406 6.65198C9.4815 6.65198 9.56067 6.66289 9.6435 6.68473C9.72633 6.70639 9.80542 6.73906 9.88075 6.78273L16.8767 11.2365C17.0141 11.3301 17.117 11.4423 17.1855 11.573C17.2542 11.7038 17.2885 11.8461 17.2885 12C17.2885 12.1538 17.2542 12.2961 17.1855 12.427C17.117 12.5576 17.0141 12.6698 16.8767 12.7635L9.88075 17.2172C9.80525 17.2609 9.72592 17.2936 9.64275 17.3152C9.55975 17.3371 9.4805 17.348 9.405 17.348C9.16317 17.348 8.95192 17.2634 8.77125 17.0942C8.59042 16.9249 8.5 16.7082 8.5 16.4442Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center 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<mask id="mask0_740_8334" 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_8334)">%0A<path d="M8.5 16.4442V7.55573C8.5 7.29173 8.59058 7.07506 8.77175 6.90573C8.95292 6.73656 9.16433 6.65198 9.406 6.65198C9.4815 6.65198 9.56067 6.66289 9.6435 6.68473C9.72633 6.70639 9.80542 6.73906 9.88075 6.78273L16.8767 11.2365C17.0141 11.3301 17.117 11.4423 17.1855 11.573C17.2542 11.7038 17.2885 11.8461 17.2885 12C17.2885 12.1538 17.2542 12.2961 17.1855 12.427C17.117 12.5576 17.0141 12.6698 16.8767 12.7635L9.88075 17.2172C9.80525 17.2609 9.72592 17.2936 9.64275 17.3152C9.55975 17.3371 9.4805 17.348 9.405 17.348C9.16317 17.348 8.95192 17.2634 8.77125 17.0942C8.59042 16.9249 8.5 16.7082 8.5 16.4442Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-primary-color, #3399ff);
}
.cometchat-media-recorder__inline-play-icon--playing {
  mask-image: 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_8317" 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_8317)">%0A<path d="M15.5 18.5C15.091 18.5 14.7387 18.3523 14.4432 18.0568C14.1477 17.7613 14 17.409 14 17V7C14 6.591 14.1477 6.23875 14.4432 5.94325C14.7387 5.64775 15.091 5.5 15.5 5.5H16.25C16.659 5.5 17.0113 5.64775 17.3068 5.94325C17.6023 6.23875 17.75 6.591 17.75 7V17C17.75 17.409 17.6023 17.7613 17.3068 18.0568C17.0113 18.3523 16.659 18.5 16.25 18.5H15.5ZM7.75 18.5C7.341 18.5 6.98875 18.3523 6.69325 18.0568C6.39775 17.7613 6.25 17.409 6.25 17V7C6.25 6.591 6.39775 6.23875 6.69325 5.94325C6.98875 5.64775 7.341 5.5 7.75 5.5H8.5C8.909 5.5 9.26125 5.64775 9.55675 5.94325C9.85225 6.23875 10 6.591 10 7V17C10 17.409 9.85225 17.7613 9.55675 18.0568C9.26125 18.3523 8.909 18.5 8.5 18.5H7.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  -webkit-mask-image: 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_8317" 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_8317)">%0A<path d="M15.5 18.5C15.091 18.5 14.7387 18.3523 14.4432 18.0568C14.1477 17.7613 14 17.409 14 17V7C14 6.591 14.1477 6.23875 14.4432 5.94325C14.7387 5.64775 15.091 5.5 15.5 5.5H16.25C16.659 5.5 17.0113 5.64775 17.3068 5.94325C17.6023 6.23875 17.75 6.591 17.75 7V17C17.75 17.409 17.6023 17.7613 17.3068 18.0568C17.0113 18.3523 16.659 18.5 16.25 18.5H15.5ZM7.75 18.5C7.341 18.5 6.98875 18.3523 6.69325 18.0568C6.39775 17.7613 6.25 17.409 6.25 17V7C6.25 6.591 6.39775 6.23875 6.69325 5.94325C6.98875 5.64775 7.341 5.5 7.75 5.5H8.5C8.909 5.5 9.26125 5.64775 9.55675 5.94325C9.85225 6.23875 10 6.591 10 7V17C10 17.409 9.85225 17.7613 9.55675 18.0568C9.26125 18.3523 8.909 18.5 8.5 18.5H7.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  background: var(--cometchat-primary-color, #3399ff);
}
.cometchat-media-recorder__inline-delete:focus-visible,
.cometchat-media-recorder__inline-record:focus-visible,
.cometchat-media-recorder__inline-pause:focus-visible,
.cometchat-media-recorder__inline-resume:focus-visible,
.cometchat-media-recorder__inline-play:focus-visible,
.cometchat-media-recorder__inline-close:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-media-recorder__inline-delete,
  .cometchat-media-recorder__inline-record,
  .cometchat-media-recorder__inline-pause,
  .cometchat-media-recorder__inline-resume,
  .cometchat-media-recorder__inline-close,
  .cometchat-media-recorder__waveform-bar {
    transition: none;
  }
  .cometchat-media-recorder__recording-dot {
    animation: none;
  }
}
@media (max-width: 480px) {
  .cometchat-media-recorder__waveform {
    max-width: 45%;
  }
}

/* src/components/CometChatMessageHeader/CometChatMessageHeader.css */
.cometchat-message-header {
  max-height: var(--cometchat-message-header-max-height, 65px);
  display: flex;
  align-items: center;
  width: var(--cometchat-message-header-width, 100%);
  box-sizing: border-box;
  padding: var(--cometchat-message-header-padding, 12px 0px);
  background: var( --cometchat-message-header-background, var(--cometchat-background-color-01, #fff) );
  border-bottom: var( --cometchat-message-header-border-bottom, 1px solid var(--cometchat-border-color-light, #e8e8e8) );
  gap: var(--cometchat-message-header-gap, 8px);
}
.cometchat-message-header__back-button-wrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cometchat-message-header__back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cometchat-message-header__back-button:hover .cometchat-message-header__back-button-icon {
  background-color: var(--cometchat-primary-color, #3399ff);
}
.cometchat-message-header__back-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-message-header__back-button-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_8318" 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_8318)">%0A<path d="M7.37295 12.75L12.5422 17.9192C12.6909 18.0679 12.7643 18.2419 12.7625 18.4412C12.7605 18.6406 12.682 18.8178 12.527 18.973C12.3718 19.1178 12.1961 19.1928 12 19.198C11.8038 19.2032 11.6281 19.1282 11.473 18.973L5.1327 12.6327C5.03904 12.5391 4.97304 12.4403 4.9347 12.3365C4.8962 12.2327 4.87695 12.1205 4.87695 12C4.87695 11.8795 4.8962 11.7673 4.9347 11.6635C4.97304 11.5597 5.03904 11.4609 5.1327 11.3672L11.473 5.02699C11.6115 4.88849 11.783 4.81766 11.9875 4.81449C12.192 4.81133 12.3718 4.88216 12.527 5.02699C12.682 5.18216 12.7595 5.36033 12.7595 5.56149C12.7595 5.76283 12.682 5.94108 12.527 6.09624L7.37295 11.25H18.75C18.9628 11.25 19.141 11.3218 19.2845 11.4655C19.4281 11.609 19.5 11.7872 19.5 12C19.5 12.2128 19.4281 12.391 19.2845 12.5345C19.141 12.6782 18.9628 12.75 18.75 12.75H7.37295Z" 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_8318" 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_8318)">%0A<path d="M7.37295 12.75L12.5422 17.9192C12.6909 18.0679 12.7643 18.2419 12.7625 18.4412C12.7605 18.6406 12.682 18.8178 12.527 18.973C12.3718 19.1178 12.1961 19.1928 12 19.198C11.8038 19.2032 11.6281 19.1282 11.473 18.973L5.1327 12.6327C5.03904 12.5391 4.97304 12.4403 4.9347 12.3365C4.8962 12.2327 4.87695 12.1205 4.87695 12C4.87695 11.8795 4.8962 11.7673 4.9347 11.6635C4.97304 11.5597 5.03904 11.4609 5.1327 11.3672L11.473 5.02699C11.6115 4.88849 11.783 4.81766 11.9875 4.81449C12.192 4.81133 12.3718 4.88216 12.527 5.02699C12.682 5.18216 12.7595 5.36033 12.7595 5.56149C12.7595 5.76283 12.682 5.94108 12.527 6.09624L7.37295 11.25H18.75C18.9628 11.25 19.141 11.3218 19.2845 11.4655C19.4281 11.609 19.5 11.7872 19.5 12C19.5 12.2128 19.4281 12.391 19.2845 12.5345C19.141 12.6782 18.9628 12.75 18.75 12.75H7.37295Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.cometchat-message-header__content {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 12px;
  padding: 4px 8px;
  border-radius: var(--cometchat-radius-2, 8px);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cometchat-message-header__content:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-message-header__leading {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cometchat-message-header__avatar-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cometchat-message-header__status-indicator {
  position: absolute;
  bottom: 2px;
  right: 4px;
  transform: translate(25%, 25%);
  width: var(--cometchat-message-header-status-indicator-width, 14px);
  height: var(--cometchat-message-header-status-indicator-height, 14px);
  border-radius: var(--cometchat-radius-max, 1000px);
  border: 2px solid var(--cometchat-background-color-01, #fff);
  background-color: var(--cometchat-neutral-color-400, #999);
  z-index: 2;
}
.cometchat-message-header__status-indicator--online {
  background-color: var(--cometchat-success-color, #09c26f);
}
.cometchat-message-header__status-indicator--offline {
  display: none;
}
.cometchat-message-header__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.cometchat-message-header__title-wrapper {
  display: flex;
  align-items: center;
  min-width: 0;
}
.cometchat-message-header__title {
  font: var(--cometchat-font-heading4-medium, 500 16px/20px Inter, sans-serif);
  color: var(--cometchat-text-color-primary, #141414);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.cometchat-message-header__subtitle-wrapper {
  display: flex;
  align-items: center;
  min-width: 0;
}
.cometchat-message-header__subtitle {
  font: var(--cometchat-font-caption1-regular, 400 12px/14.4px Inter, sans-serif);
  color: var(--cometchat-text-color-secondary, #727272);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.cometchat-message-header__subtitle--typing {
  color: var(--cometchat-primary-color, #3399ff);
  display: flex;
  align-items: center;
  gap: 4px;
}
.cometchat-message-header__typing-text {
  color: var(--cometchat-primary-color, #3399ff);
}
.cometchat-message-header__typing-dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
.cometchat-message-header__typing-dot {
  width: 4px;
  height: 4px;
  border-radius: var(--cometchat-radius-max, 1000px);
  background-color: var(--cometchat-primary-color, #3399ff);
  animation: cometchat-typing-bounce 1.4s infinite ease-in-out both;
}
.cometchat-message-header__typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}
.cometchat-message-header__typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}
.cometchat-message-header__typing-dot:nth-child(3) {
  animation-delay: 0s;
}
@keyframes cometchat-typing-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-message-header__typing-dot {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }
}
.cometchat-message-header__subtitle--online {
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-header__subtitle--last-active {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cometchat-message-header__last-seen-label {
  font: var(--cometchat-font-caption1-regular, 400 12px/14.4px Inter, sans-serif);
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-header__subtitle--members {
  color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-message-header__trailing {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}
.cometchat-message-header__call-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cometchat-message-header__call-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cometchat-message-header__call-button:hover .cometchat-message-header__call-button-icon {
  background-color: var(--cometchat-primary-color, #3399ff);
}
.cometchat-message-header__call-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-message-header__call-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cometchat-message-header__call-button-icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--cometchat-icon-color-primary, #141414);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.cometchat-message-header__call-button-icon--voice {
  -webkit-mask-image: 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<path id="Vector" d="M19.7512 20.8335C17.8234 20.8335 15.8692 20.3772 13.8887 19.4647C11.9082 18.5522 10.086 17.2572 8.42197 15.5795C6.7443 13.9155 5.44922 12.0947 4.53672 10.117C3.62422 8.13916 3.16797 6.18199 3.16797 4.24549C3.16797 3.94033 3.27114 3.68424 3.47747 3.47724C3.6838 3.27041 3.94172 3.16699 4.25122 3.16699H7.81797C8.0513 3.16699 8.25055 3.24541 8.41572 3.40224C8.58105 3.55924 8.69288 3.75858 8.75122 4.00024L9.41672 7.19424C9.44522 7.41774 9.43655 7.62324 9.39072 7.81074C9.34488 7.99824 9.25822 8.15708 9.13072 8.28724L6.70547 10.7502C7.10814 11.4447 7.54305 12.0956 8.01022 12.7027C8.47755 13.3101 8.99264 13.8884 9.55547 14.4377C10.1276 15.0266 10.7339 15.5687 11.3742 16.064C12.0144 16.5592 12.6901 17.0046 13.4012 17.4002L15.7852 14.9835C15.9376 14.8197 16.1118 14.7072 16.308 14.646C16.5041 14.585 16.7019 14.5697 16.9012 14.6002L19.9822 15.2492C20.2282 15.3082 20.4318 15.4351 20.593 15.6297C20.754 15.8246 20.8345 16.0425 20.8345 16.2835V19.7502C20.8345 20.0597 20.7313 20.3177 20.525 20.524C20.3186 20.7303 20.0607 20.8335 19.7512 20.8335ZM5.92197 9.28349L7.82197 7.36699L7.28447 4.75024H4.77197C4.81097 5.43358 4.92072 6.14749 5.10122 6.89199C5.28172 7.63633 5.5553 8.43349 5.92197 9.28349ZM14.8887 18.1502C15.5471 18.4557 16.2563 18.703 17.0165 18.892C17.7766 19.0808 18.5216 19.1947 19.2512 19.2335V16.717L16.7845 16.196L14.8887 18.1502Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  mask-image: 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<path id="Vector" d="M19.7512 20.8335C17.8234 20.8335 15.8692 20.3772 13.8887 19.4647C11.9082 18.5522 10.086 17.2572 8.42197 15.5795C6.7443 13.9155 5.44922 12.0947 4.53672 10.117C3.62422 8.13916 3.16797 6.18199 3.16797 4.24549C3.16797 3.94033 3.27114 3.68424 3.47747 3.47724C3.6838 3.27041 3.94172 3.16699 4.25122 3.16699H7.81797C8.0513 3.16699 8.25055 3.24541 8.41572 3.40224C8.58105 3.55924 8.69288 3.75858 8.75122 4.00024L9.41672 7.19424C9.44522 7.41774 9.43655 7.62324 9.39072 7.81074C9.34488 7.99824 9.25822 8.15708 9.13072 8.28724L6.70547 10.7502C7.10814 11.4447 7.54305 12.0956 8.01022 12.7027C8.47755 13.3101 8.99264 13.8884 9.55547 14.4377C10.1276 15.0266 10.7339 15.5687 11.3742 16.064C12.0144 16.5592 12.6901 17.0046 13.4012 17.4002L15.7852 14.9835C15.9376 14.8197 16.1118 14.7072 16.308 14.646C16.5041 14.585 16.7019 14.5697 16.9012 14.6002L19.9822 15.2492C20.2282 15.3082 20.4318 15.4351 20.593 15.6297C20.754 15.8246 20.8345 16.0425 20.8345 16.2835V19.7502C20.8345 20.0597 20.7313 20.3177 20.525 20.524C20.3186 20.7303 20.0607 20.8335 19.7512 20.8335ZM5.92197 9.28349L7.82197 7.36699L7.28447 4.75024H4.77197C4.81097 5.43358 4.92072 6.14749 5.10122 6.89199C5.28172 7.63633 5.5553 8.43349 5.92197 9.28349ZM14.8887 18.1502C15.5471 18.4557 16.2563 18.703 17.0165 18.892C17.7766 19.0808 18.5216 19.1947 19.2512 19.2335V16.717L16.7845 16.196L14.8887 18.1502Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
}
.cometchat-message-header__call-button-icon--video {
  -webkit-mask-image: 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<path id="Vector" d="M3.77881 19.8504C3.35165 19.8504 2.98098 19.6933 2.66681 19.3791C2.35248 19.0648 2.19531 18.6941 2.19531 18.2671V5.73364C2.19531 5.30664 2.35248 4.93597 2.66681 4.62164C2.98098 4.30747 3.35165 4.15039 3.77881 4.15039H16.3156C16.7344 4.15039 17.1024 4.30747 17.4196 4.62164C17.7367 4.93597 17.8953 5.30664 17.8953 5.73364V10.8336L21.1288 7.60039C21.251 7.47822 21.3954 7.44839 21.5621 7.51089C21.7287 7.57339 21.8121 7.69214 21.8121 7.86714V16.1371C21.8121 16.309 21.7287 16.4264 21.5621 16.4894C21.3954 16.5522 21.251 16.5226 21.1288 16.4004L17.8953 13.1671V18.2671C17.8953 18.6941 17.7367 19.0648 17.4196 19.3791C17.1024 19.6933 16.7344 19.8504 16.3156 19.8504H3.77881ZM3.77881 18.2671H16.3121V5.73364H3.77881V18.2671Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  mask-image: 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<path id="Vector" d="M3.77881 19.8504C3.35165 19.8504 2.98098 19.6933 2.66681 19.3791C2.35248 19.0648 2.19531 18.6941 2.19531 18.2671V5.73364C2.19531 5.30664 2.35248 4.93597 2.66681 4.62164C2.98098 4.30747 3.35165 4.15039 3.77881 4.15039H16.3156C16.7344 4.15039 17.1024 4.30747 17.4196 4.62164C17.7367 4.93597 17.8953 5.30664 17.8953 5.73364V10.8336L21.1288 7.60039C21.251 7.47822 21.3954 7.44839 21.5621 7.51089C21.7287 7.57339 21.8121 7.69214 21.8121 7.86714V16.1371C21.8121 16.309 21.7287 16.4264 21.5621 16.4894C21.3954 16.5522 21.251 16.5226 21.1288 16.4004L17.8953 13.1671V18.2671C17.8953 18.6941 17.7367 19.0648 17.4196 19.3791C17.1024 19.6933 16.7344 19.8504 16.3156 19.8504H3.77881ZM3.77881 18.2671H16.3121V5.73364H3.77881V18.2671Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
}
.cometchat-message-header__menu-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
}
.cometchat-message-header__menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cometchat-message-header__menu-button:hover .cometchat-message-header__menu-button-icon {
  background-color: var(--cometchat-primary-color, #3399ff);
}
.cometchat-message-header__menu-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-message-header__menu-button-icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--cometchat-icon-color-primary, #141414);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.cometchat-message-header__menu-button-icon--search {
  -webkit-mask-image: 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_8292" 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_8292)">%0A<path d="M9.51955 15.6153C7.81188 15.6153 6.36571 15.023 5.18105 13.8385C3.99655 12.6538 3.4043 11.2077 3.4043 9.50002C3.4043 7.79235 3.99655 6.34618 5.18105 5.16152C6.36571 3.97702 7.81188 3.38477 9.51955 3.38477C11.2272 3.38477 12.6734 3.97702 13.858 5.16152C15.0425 6.34618 15.6348 7.79235 15.6348 9.50002C15.6348 10.2142 15.515 10.8963 15.2753 11.5463C15.0355 12.1963 14.7155 12.7616 14.3155 13.2423L20.0695 18.9963C20.208 19.1346 20.2789 19.3086 20.282 19.5183C20.2852 19.7279 20.2144 19.9052 20.0695 20.05C19.9247 20.1948 19.749 20.2673 19.5425 20.2673C19.3362 20.2673 19.1606 20.1948 19.0158 20.05L13.2618 14.296C12.7618 14.7088 12.1868 15.0319 11.5368 15.2653C10.8868 15.4986 10.2144 15.6153 9.51955 15.6153ZM9.51955 14.1155C10.808 14.1155 11.8994 13.6683 12.7935 12.774C13.6879 11.8798 14.135 10.7885 14.135 9.50002C14.135 8.21152 13.6879 7.12018 12.7935 6.22601C11.8994 5.33168 10.808 4.88452 9.51955 4.88452C8.23105 4.88452 7.13971 5.33168 6.24555 6.22601C5.35121 7.12018 4.90405 8.21152 4.90405 9.50002C4.90405 10.7885 5.35121 11.8798 6.24555 12.774C7.13971 13.6683 8.23105 14.1155 9.51955 14.1155Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  mask-image: 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_8292" 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_8292)">%0A<path d="M9.51955 15.6153C7.81188 15.6153 6.36571 15.023 5.18105 13.8385C3.99655 12.6538 3.4043 11.2077 3.4043 9.50002C3.4043 7.79235 3.99655 6.34618 5.18105 5.16152C6.36571 3.97702 7.81188 3.38477 9.51955 3.38477C11.2272 3.38477 12.6734 3.97702 13.858 5.16152C15.0425 6.34618 15.6348 7.79235 15.6348 9.50002C15.6348 10.2142 15.515 10.8963 15.2753 11.5463C15.0355 12.1963 14.7155 12.7616 14.3155 13.2423L20.0695 18.9963C20.208 19.1346 20.2789 19.3086 20.282 19.5183C20.2852 19.7279 20.2144 19.9052 20.0695 20.05C19.9247 20.1948 19.749 20.2673 19.5425 20.2673C19.3362 20.2673 19.1606 20.1948 19.0158 20.05L13.2618 14.296C12.7618 14.7088 12.1868 15.0319 11.5368 15.2653C10.8868 15.4986 10.2144 15.6153 9.51955 15.6153ZM9.51955 14.1155C10.808 14.1155 11.8994 13.6683 12.7935 12.774C13.6879 11.8798 14.135 10.7885 14.135 9.50002C14.135 8.21152 13.6879 7.12018 12.7935 6.22601C11.8994 5.33168 10.808 4.88452 9.51955 4.88452C8.23105 4.88452 7.13971 5.33168 6.24555 6.22601C5.35121 7.12018 4.90405 8.21152 4.90405 9.50002C4.90405 10.7885 5.35121 11.8798 6.24555 12.774C7.13971 13.6683 8.23105 14.1155 9.51955 14.1155Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
}
.cometchat-message-header__menu-button-icon--summary {
  -webkit-mask-image: 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="M9.30228 7.86546C9.40188 7.37818 10.0981 7.37818 10.1977 7.86547C10.8088 10.855 13.145 13.1912 16.1345 13.8023C16.6218 13.9019 16.6218 14.5981 16.1345 14.6977C13.145 15.3088 10.8088 17.645 10.1977 20.6345C10.0981 21.1218 9.40188 21.1218 9.30228 20.6345C8.69125 17.645 6.35497 15.3088 3.36546 14.6977C2.87818 14.5981 2.87818 13.9019 3.36547 13.8023C6.35497 13.1912 8.69125 10.855 9.30228 7.86546Z" stroke="%23141414" stroke-width="1.5"/>%0A<path d="M17.5954 3.02417C17.602 2.99194 17.648 2.99194 17.6546 3.02417C17.9964 4.69659 19.3034 6.00356 20.9758 6.34539C21.0081 6.35198 21.0081 6.39802 20.9758 6.40461C19.3034 6.74644 17.9964 8.05341 17.6546 9.72583C17.648 9.75806 17.602 9.75806 17.5954 9.72583C17.2536 8.05341 15.9466 6.74644 14.2742 6.40461C14.2419 6.39802 14.2419 6.35198 14.2742 6.34539C15.9466 6.00356 17.2536 4.69659 17.5954 3.02417Z" stroke="%23141414" stroke-width="1.5"/>%0A</svg>');
  mask-image: 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="M9.30228 7.86546C9.40188 7.37818 10.0981 7.37818 10.1977 7.86547C10.8088 10.855 13.145 13.1912 16.1345 13.8023C16.6218 13.9019 16.6218 14.5981 16.1345 14.6977C13.145 15.3088 10.8088 17.645 10.1977 20.6345C10.0981 21.1218 9.40188 21.1218 9.30228 20.6345C8.69125 17.645 6.35497 15.3088 3.36546 14.6977C2.87818 14.5981 2.87818 13.9019 3.36547 13.8023C6.35497 13.1912 8.69125 10.855 9.30228 7.86546Z" stroke="%23141414" stroke-width="1.5"/>%0A<path d="M17.5954 3.02417C17.602 2.99194 17.648 2.99194 17.6546 3.02417C17.9964 4.69659 19.3034 6.00356 20.9758 6.34539C21.0081 6.35198 21.0081 6.39802 20.9758 6.40461C19.3034 6.74644 17.9964 8.05341 17.6546 9.72583C17.648 9.75806 17.602 9.75806 17.5954 9.72583C17.2536 8.05341 15.9466 6.74644 14.2742 6.40461C14.2419 6.39802 14.2419 6.35198 14.2742 6.34539C15.9466 6.00356 17.2536 4.69659 17.5954 3.02417Z" stroke="%23141414" stroke-width="1.5"/>%0A</svg>');
}
.cometchat-message-header__menu-button-icon--more {
  -webkit-mask-image: 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_8302" 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_8302)">%0A<path d="M12 19.2693C11.5875 19.2693 11.2344 19.1223 10.9408 18.8285C10.6469 18.5348 10.5 18.1818 10.5 17.7693C10.5 17.3568 10.6469 17.0036 10.9408 16.7098C11.2344 16.4161 11.5875 16.2693 12 16.2693C12.4125 16.2693 12.7656 16.4161 13.0592 16.7098C13.3531 17.0036 13.5 17.3568 13.5 17.7693C13.5 18.1818 13.3531 18.5348 13.0592 18.8285C12.7656 19.1223 12.4125 19.2693 12 19.2693ZM12 13.5C11.5875 13.5 11.2344 13.3531 10.9408 13.0593C10.6469 12.7656 10.5 12.4125 10.5 12C10.5 11.5875 10.6469 11.2344 10.9408 10.9408C11.2344 10.6469 11.5875 10.5 12 10.5C12.4125 10.5 12.7656 10.6469 13.0592 10.9408C13.3531 11.2344 13.5 11.5875 13.5 12C13.5 12.4125 13.3531 12.7656 13.0592 13.0593C12.7656 13.3531 12.4125 13.5 12 13.5ZM12 7.73075C11.5875 7.73075 11.2344 7.58392 10.9408 7.29025C10.6469 6.99642 10.5 6.64325 10.5 6.23075C10.5 5.81825 10.6469 5.46517 10.9408 5.1715C11.2344 4.87767 11.5875 4.73075 12 4.73075C12.4125 4.73075 12.7656 4.87767 13.0592 5.1715C13.3531 5.46517 13.5 5.81825 13.5 6.23075C13.5 6.64325 13.3531 6.99642 13.0592 7.29025C12.7656 7.58392 12.4125 7.73075 12 7.73075Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  mask-image: 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_8302" 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_8302)">%0A<path d="M12 19.2693C11.5875 19.2693 11.2344 19.1223 10.9408 18.8285C10.6469 18.5348 10.5 18.1818 10.5 17.7693C10.5 17.3568 10.6469 17.0036 10.9408 16.7098C11.2344 16.4161 11.5875 16.2693 12 16.2693C12.4125 16.2693 12.7656 16.4161 13.0592 16.7098C13.3531 17.0036 13.5 17.3568 13.5 17.7693C13.5 18.1818 13.3531 18.5348 13.0592 18.8285C12.7656 19.1223 12.4125 19.2693 12 19.2693ZM12 13.5C11.5875 13.5 11.2344 13.3531 10.9408 13.0593C10.6469 12.7656 10.5 12.4125 10.5 12C10.5 11.5875 10.6469 11.2344 10.9408 10.9408C11.2344 10.6469 11.5875 10.5 12 10.5C12.4125 10.5 12.7656 10.6469 13.0592 10.9408C13.3531 11.2344 13.5 11.5875 13.5 12C13.5 12.4125 13.3531 12.7656 13.0592 13.0593C12.7656 13.3531 12.4125 13.5 12 13.5ZM12 7.73075C11.5875 7.73075 11.2344 7.58392 10.9408 7.29025C10.6469 6.99642 10.5 6.64325 10.5 6.23075C10.5 5.81825 10.6469 5.46517 10.9408 5.1715C11.2344 4.87767 11.5875 4.73075 12 4.73075C12.4125 4.73075 12.7656 4.87767 13.0592 5.1715C13.3531 5.46517 13.5 5.81825 13.5 6.23075C13.5 6.64325 13.3531 6.99642 13.0592 7.29025C12.7656 7.58392 12.4125 7.73075 12 7.73075Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
}
.cometchat-message-header__overflow-menu {
  display: flex;
  align-items: center;
}
.cometchat-message-header__auxiliary-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 991px) {
  .cometchat-message-header {
    padding: 8px 12px;
  }
  .cometchat-message-header__content {
    gap: 8px;
  }
  .cometchat-message-header__status-indicator {
    width: var(--cometchat-message-header-status-indicator-width-tablet, 12px);
    height: var(--cometchat-message-header-status-indicator-height-tablet, 12px);
  }
  .cometchat-message-header__call-button,
  .cometchat-message-header__menu-button {
    width: 32px;
    height: 32px;
  }
  .cometchat-message-header__call-button-icon,
  .cometchat-message-header__menu-button-icon,
  .cometchat-message-header__back-button-icon {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 767px) {
  .cometchat-message-header {
    padding: 8px;
  }
  .cometchat-message-header__content {
    gap: 8px;
    padding: 4px;
  }
  .cometchat-message-header__title {
    font: var(--cometchat-font-body-medium, 500 14px/18px Inter, sans-serif);
  }
  .cometchat-message-header__subtitle {
    font: var(--cometchat-font-caption2-regular, 400 11px/13.2px Inter, sans-serif);
  }
  .cometchat-message-header__call-button,
  .cometchat-message-header__menu-button {
    width: 28px;
    height: 28px;
  }
  .cometchat-message-header__back-button {
    width: 18px;
    height: 18px;
  }
  .cometchat-message-header__call-button-icon,
  .cometchat-message-header__menu-button-icon,
  .cometchat-message-header__back-button-icon {
    width: 18px;
    height: 18px;
  }
  .cometchat-message-header__call-buttons {
    gap: 0;
  }
  .cometchat-message-header__menu-buttons {
    gap: 0;
  }
  .cometchat-message-header__status-indicator {
    width: 8px;
    height: 8px;
    border-width: 1px;
  }
  .cometchat-message-header__typing-dot {
    width: 3px;
    height: 3px;
  }
}
@media (max-width: 575px) {
  .cometchat-message-header {
    padding: 4px 8px;
  }
  .cometchat-message-header__title {
    max-width: 120px;
  }
  .cometchat-message-header__trailing {
    gap: 4px;
  }
}
@media (prefers-contrast: high) {
  .cometchat-message-header {
    border-bottom: 2px solid currentColor;
  }
  .cometchat-message-header__back-button:focus-visible,
  .cometchat-message-header__content:focus-visible,
  .cometchat-message-header__call-button:focus-visible,
  .cometchat-message-header__menu-button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
}

/* src/components/CometChatOutgoingCall/CometChatOutgoingCall.css */
.cometchat-outgoing-call {
  display: flex;
  width: 360px;
  height: 540px;
  padding: var(--cometchat-padding-5, 20px) 0px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  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);
}
.cometchat-outgoing-call__title-container {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-spacing-2, 8px);
  align-items: center;
}
.cometchat-outgoing-call__title {
  color: var(--cometchat-text-color-primary, #141414);
  text-align: center;
  font: var(--cometchat-font-title-medium, 500 28px Roboto);
}
.cometchat-outgoing-call__subtitle {
  color: var(--cometchat-text-color-secondary, #727272);
  text-align: center;
  font: var(--cometchat-font-heading4-regular, 400 16px Roboto);
}
.cometchat-outgoing-call__avatar {
  display: flex;
  width: 160px;
  height: 160px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--cometchat-radius-max, 1000px);
}
.cometchat-outgoing-call__avatar [data-size] {
  width: 160px;
  height: 160px;
}
.cometchat-outgoing-call__avatar [data-size=large] span[aria-label] {
  font: 700 64px/76.8px var(--cometchat-font-family, Roboto);
  height: fit-content;
  width: fit-content;
  font-style: normal;
}
.cometchat-outgoing-call__button {
  display: flex;
  padding: var(--cometchat-padding-4, 16px);
  align-items: center;
  justify-content: center;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: var(--cometchat-error-color, #f44649);
  border: none;
  cursor: pointer;
  height: fit-content;
  width: fit-content;
}
.cometchat-outgoing-call__button:hover {
  opacity: 0.9;
}
.cometchat-outgoing-call__button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-outgoing-call__button-icon {
  display: flex;
  width: 24px;
  height: 24px;
  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<mask id="mask0_740_8330" 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_8330)">%0A<path d="M11.9997 8.25C13.9087 8.25 15.7917 8.633 17.6487 9.399C19.5057 10.165 21.1311 11.2756 22.5247 12.7308C22.7311 12.9373 22.8359 13.1786 22.8392 13.4548C22.8424 13.7311 22.7407 13.9693 22.5342 14.1693L20.6285 16.025C20.426 16.2212 20.1991 16.3308 19.9477 16.3538C19.6966 16.3769 19.4646 16.3103 19.2517 16.1537L16.7362 14.2422C16.5709 14.1166 16.4485 13.9775 16.369 13.825C16.2895 13.6725 16.2497 13.5001 16.2497 13.3078V10.4865C15.5267 10.2417 14.8222 10.0577 14.1362 9.9345C13.4504 9.8115 12.7382 9.75 11.9997 9.75C11.2612 9.75 10.5491 9.8115 9.86323 9.9345C9.17723 10.0577 8.47273 10.2417 7.74973 10.4865V13.3078C7.74973 13.5001 7.70998 13.6725 7.63048 13.825C7.55098 13.9775 7.42856 14.1166 7.26323 14.2422L4.74773 16.1537C4.53489 16.3103 4.30289 16.3769 4.05173 16.3538C3.80039 16.3308 3.57348 16.2212 3.37098 16.025L1.46523 14.1693C1.25873 13.9693 1.15706 13.7311 1.16023 13.4548C1.16356 13.1786 1.26839 12.9373 1.47473 12.7308C2.85806 11.2756 4.48081 10.165 6.34298 9.399C8.20514 8.633 10.0907 8.25 11.9997 8.25Z" 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_8330" 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_8330)">%0A<path d="M11.9997 8.25C13.9087 8.25 15.7917 8.633 17.6487 9.399C19.5057 10.165 21.1311 11.2756 22.5247 12.7308C22.7311 12.9373 22.8359 13.1786 22.8392 13.4548C22.8424 13.7311 22.7407 13.9693 22.5342 14.1693L20.6285 16.025C20.426 16.2212 20.1991 16.3308 19.9477 16.3538C19.6966 16.3769 19.4646 16.3103 19.2517 16.1537L16.7362 14.2422C16.5709 14.1166 16.4485 13.9775 16.369 13.825C16.2895 13.6725 16.2497 13.5001 16.2497 13.3078V10.4865C15.5267 10.2417 14.8222 10.0577 14.1362 9.9345C13.4504 9.8115 12.7382 9.75 11.9997 9.75C11.2612 9.75 10.5491 9.8115 9.86323 9.9345C9.17723 10.0577 8.47273 10.2417 7.74973 10.4865V13.3078C7.74973 13.5001 7.70998 13.6725 7.63048 13.825C7.55098 13.9775 7.42856 14.1166 7.26323 14.2422L4.74773 16.1537C4.53489 16.3103 4.30289 16.3769 4.05173 16.3538C3.80039 16.3308 3.57348 16.2212 3.37098 16.025L1.46523 14.1693C1.25873 13.9693 1.15706 13.7311 1.16023 13.4548C1.16356 13.1786 1.26839 12.9373 1.47473 12.7308C2.85806 11.2756 4.48081 10.165 6.34298 9.399C8.20514 8.633 10.0907 8.25 11.9997 8.25Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
@media (max-width: 600px) {
  .cometchat-outgoing-call {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: var(--cometchat-spacing-20, 80px) var(--cometchat-spacing-5, 20px) var(--cometchat-spacing-15, 60px) var(--cometchat-spacing-5, 20px);
  }
  .cometchat-outgoing-call__title {
    font: var(--cometchat-font-heading1-bold, 700 24px Roboto);
  }
  .cometchat-outgoing-call__subtitle {
    font: var(--cometchat-font-body-regular, 400 14px Roboto);
  }
  .cometchat-outgoing-call__avatar {
    margin-bottom: auto;
    margin-top: var(--cometchat-margin-10, 40px);
  }
  .cometchat-outgoing-call__avatar [data-size] {
    width: 120px;
    height: 120px;
  }
  .cometchat-outgoing-call__avatar [data-size=large] span[aria-label] {
    font: 700 50px/60px var(--cometchat-font-family, Roboto);
  }
}

/* src/components/CometChatCallButtons/CometChatCallButtons.css */
.cometchat-call-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cometchat-call-buttons__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--cometchat-radius-max, 1000px);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cometchat-call-buttons__button:hover .cometchat-call-buttons__button-icon {
  background-color: var(--cometchat-primary-color, #3399ff);
}
.cometchat-call-buttons__button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-call-buttons__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cometchat-call-buttons__button:disabled:hover .cometchat-call-buttons__button-icon {
  background-color: var(--cometchat-icon-color-primary, #141414);
}
.cometchat-call-buttons__button-icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--cometchat-icon-color-primary, #141414);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.cometchat-call-buttons__button-icon--voice {
  -webkit-mask-image: 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<path id="Vector" d="M19.7512 20.8335C17.8234 20.8335 15.8692 20.3772 13.8887 19.4647C11.9082 18.5522 10.086 17.2572 8.42197 15.5795C6.7443 13.9155 5.44922 12.0947 4.53672 10.117C3.62422 8.13916 3.16797 6.18199 3.16797 4.24549C3.16797 3.94033 3.27114 3.68424 3.47747 3.47724C3.6838 3.27041 3.94172 3.16699 4.25122 3.16699H7.81797C8.0513 3.16699 8.25055 3.24541 8.41572 3.40224C8.58105 3.55924 8.69288 3.75858 8.75122 4.00024L9.41672 7.19424C9.44522 7.41774 9.43655 7.62324 9.39072 7.81074C9.34488 7.99824 9.25822 8.15708 9.13072 8.28724L6.70547 10.7502C7.10814 11.4447 7.54305 12.0956 8.01022 12.7027C8.47755 13.3101 8.99264 13.8884 9.55547 14.4377C10.1276 15.0266 10.7339 15.5687 11.3742 16.064C12.0144 16.5592 12.6901 17.0046 13.4012 17.4002L15.7852 14.9835C15.9376 14.8197 16.1118 14.7072 16.308 14.646C16.5041 14.585 16.7019 14.5697 16.9012 14.6002L19.9822 15.2492C20.2282 15.3082 20.4318 15.4351 20.593 15.6297C20.754 15.8246 20.8345 16.0425 20.8345 16.2835V19.7502C20.8345 20.0597 20.7313 20.3177 20.525 20.524C20.3186 20.7303 20.0607 20.8335 19.7512 20.8335ZM5.92197 9.28349L7.82197 7.36699L7.28447 4.75024H4.77197C4.81097 5.43358 4.92072 6.14749 5.10122 6.89199C5.28172 7.63633 5.5553 8.43349 5.92197 9.28349ZM14.8887 18.1502C15.5471 18.4557 16.2563 18.703 17.0165 18.892C17.7766 19.0808 18.5216 19.1947 19.2512 19.2335V16.717L16.7845 16.196L14.8887 18.1502Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  mask-image: 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<path id="Vector" d="M19.7512 20.8335C17.8234 20.8335 15.8692 20.3772 13.8887 19.4647C11.9082 18.5522 10.086 17.2572 8.42197 15.5795C6.7443 13.9155 5.44922 12.0947 4.53672 10.117C3.62422 8.13916 3.16797 6.18199 3.16797 4.24549C3.16797 3.94033 3.27114 3.68424 3.47747 3.47724C3.6838 3.27041 3.94172 3.16699 4.25122 3.16699H7.81797C8.0513 3.16699 8.25055 3.24541 8.41572 3.40224C8.58105 3.55924 8.69288 3.75858 8.75122 4.00024L9.41672 7.19424C9.44522 7.41774 9.43655 7.62324 9.39072 7.81074C9.34488 7.99824 9.25822 8.15708 9.13072 8.28724L6.70547 10.7502C7.10814 11.4447 7.54305 12.0956 8.01022 12.7027C8.47755 13.3101 8.99264 13.8884 9.55547 14.4377C10.1276 15.0266 10.7339 15.5687 11.3742 16.064C12.0144 16.5592 12.6901 17.0046 13.4012 17.4002L15.7852 14.9835C15.9376 14.8197 16.1118 14.7072 16.308 14.646C16.5041 14.585 16.7019 14.5697 16.9012 14.6002L19.9822 15.2492C20.2282 15.3082 20.4318 15.4351 20.593 15.6297C20.754 15.8246 20.8345 16.0425 20.8345 16.2835V19.7502C20.8345 20.0597 20.7313 20.3177 20.525 20.524C20.3186 20.7303 20.0607 20.8335 19.7512 20.8335ZM5.92197 9.28349L7.82197 7.36699L7.28447 4.75024H4.77197C4.81097 5.43358 4.92072 6.14749 5.10122 6.89199C5.28172 7.63633 5.5553 8.43349 5.92197 9.28349ZM14.8887 18.1502C15.5471 18.4557 16.2563 18.703 17.0165 18.892C17.7766 19.0808 18.5216 19.1947 19.2512 19.2335V16.717L16.7845 16.196L14.8887 18.1502Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
}
.cometchat-call-buttons__button-icon--video {
  -webkit-mask-image: 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<path id="Vector" d="M3.77881 19.8504C3.35165 19.8504 2.98098 19.6933 2.66681 19.3791C2.35248 19.0648 2.19531 18.6941 2.19531 18.2671V5.73364C2.19531 5.30664 2.35248 4.93597 2.66681 4.62164C2.98098 4.30747 3.35165 4.15039 3.77881 4.15039H16.3156C16.7344 4.15039 17.1024 4.30747 17.4196 4.62164C17.7367 4.93597 17.8953 5.30664 17.8953 5.73364V10.8336L21.1288 7.60039C21.251 7.47822 21.3954 7.44839 21.5621 7.51089C21.7287 7.57339 21.8121 7.69214 21.8121 7.86714V16.1371C21.8121 16.309 21.7287 16.4264 21.5621 16.4894C21.3954 16.5522 21.251 16.5226 21.1288 16.4004L17.8953 13.1671V18.2671C17.8953 18.6941 17.7367 19.0648 17.4196 19.3791C17.1024 19.6933 16.7344 19.8504 16.3156 19.8504H3.77881ZM3.77881 18.2671H16.3121V5.73364H3.77881V18.2671Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
  mask-image: 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<path id="Vector" d="M3.77881 19.8504C3.35165 19.8504 2.98098 19.6933 2.66681 19.3791C2.35248 19.0648 2.19531 18.6941 2.19531 18.2671V5.73364C2.19531 5.30664 2.35248 4.93597 2.66681 4.62164C2.98098 4.30747 3.35165 4.15039 3.77881 4.15039H16.3156C16.7344 4.15039 17.1024 4.30747 17.4196 4.62164C17.7367 4.93597 17.8953 5.30664 17.8953 5.73364V10.8336L21.1288 7.60039C21.251 7.47822 21.3954 7.44839 21.5621 7.51089C21.7287 7.57339 21.8121 7.69214 21.8121 7.86714V16.1371C21.8121 16.309 21.7287 16.4264 21.5621 16.4894C21.3954 16.5522 21.251 16.5226 21.1288 16.4004L17.8953 13.1671V18.2671C17.8953 18.6941 17.7367 19.0648 17.4196 19.3791C17.1024 19.6933 16.7344 19.8504 16.3156 19.8504H3.77881ZM3.77881 18.2671H16.3121V5.73364H3.77881V18.2671Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
}
@media (max-width: 768px) {
  .cometchat-call-buttons__button {
    width: 32px;
    height: 32px;
  }
  .cometchat-call-buttons__button-icon {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 480px) {
  .cometchat-call-buttons__button {
    width: 28px;
    height: 28px;
  }
  .cometchat-call-buttons__button-icon {
    width: 18px;
    height: 18px;
  }
  .cometchat-call-buttons {
    gap: 0;
  }
}

/* src/components/CometChatAIAssistantChat/CometChatAIAssistantChat.css */
.cometchat-ai-assistant-chat__wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.cometchat-ai-assistant-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--cometchat-background-color-02);
  align-items: center;
}
.cometchat-ai-assistant-chat .cometchat-message-header {
  border-bottom: 1px solid var(--cometchat-border-color-light);
  width: 100%;
  padding: 12px 16px;
}
.cometchat-ai-assistant-chat .cometchat-message-header .cometchat-list-item {
  gap: var(--cometchat-spacing-2);
}
.cometchat-ai-assistant-chat .cometchat-message-header .cometchat-list-item__body-title {
  display: block;
}
.cometchat-ai-assistant-chat .cometchat-message-header .cometchat-message-header__subtitle {
  color: var(--cometchat-text-color-secondary);
}
.cometchat-ai-assistant-chat__header-auxiliary-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cometchat-spacing-2);
}
.cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__header-auxiliary-view .cometchat-button {
  display: flex;
  height: fit-content;
  width: fit-content;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  padding: 6px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
.cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__header-auxiliary-view .cometchat-button__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--cometchat-icon-color-secondary);
  height: 24px;
  width: 24px;
  cursor: pointer;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__header-auxiliary-view .cometchat-button__icon:hover {
  background: var(--cometchat-icon-color-primary);
  transition: background 0.4s ease-in-out;
}
.cometchat-ai-assistant-chat__icon--new-chat {
  -webkit-mask-image: 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.1668 12.8332H5.83325C5.59725 12.8332 5.39933 12.7532 5.2395 12.593C5.07983 12.4327 5 12.234 5 11.997C5 11.7602 5.07983 11.5626 5.2395 11.4043C5.39933 11.2459 5.59725 11.1667 5.83325 11.1667H11.1668V5.83325C11.1668 5.59725 11.2468 5.39933 11.407 5.2395C11.5673 5.07983 11.766 5 12.003 5C12.2398 5 12.4374 5.07983 12.5957 5.2395C12.7541 5.39933 12.8333 5.59725 12.8333 5.83325V11.1667H18.1667C18.4028 11.1667 18.6007 11.2468 18.7605 11.407C18.9202 11.5673 19 11.766 19 12.003C19 12.2398 18.9202 12.4374 18.7605 12.5957C18.6007 12.7541 18.4028 12.8332 18.1667 12.8332H12.8333V18.1667C12.8333 18.4028 12.7532 18.6007 12.593 18.7605C12.4327 18.9202 12.234 19 11.997 19C11.7602 19 11.5626 18.9202 11.4043 18.7605C11.2459 18.6007 11.1668 18.4028 11.1668 18.1667V12.8332Z" fill="%23A1A1A1"/>%0A</svg>%0A');
  mask-image: 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.1668 12.8332H5.83325C5.59725 12.8332 5.39933 12.7532 5.2395 12.593C5.07983 12.4327 5 12.234 5 11.997C5 11.7602 5.07983 11.5626 5.2395 11.4043C5.39933 11.2459 5.59725 11.1667 5.83325 11.1667H11.1668V5.83325C11.1668 5.59725 11.2468 5.39933 11.407 5.2395C11.5673 5.07983 11.766 5 12.003 5C12.2398 5 12.4374 5.07983 12.5957 5.2395C12.7541 5.39933 12.8333 5.59725 12.8333 5.83325V11.1667H18.1667C18.4028 11.1667 18.6007 11.2468 18.7605 11.407C18.9202 11.5673 19 11.766 19 12.003C19 12.2398 18.9202 12.4374 18.7605 12.5957C18.6007 12.7541 18.4028 12.8332 18.1667 12.8332H12.8333V18.1667C12.8333 18.4028 12.7532 18.6007 12.593 18.7605C12.4327 18.9202 12.234 19 11.997 19C11.7602 19 11.5626 18.9202 11.4043 18.7605C11.2459 18.6007 11.1668 18.4028 11.1668 18.1667V12.8332Z" fill="%23A1A1A1"/>%0A</svg>%0A');
}
.cometchat-ai-assistant-chat__icon--chat-history {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M18.9166 9.58333L17.2505 11.25L15.5833 9.58333M17.4542 10.8333C17.4845 10.5597 17.5 10.2817 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C12.3561 17.5 14.4584 16.4136 15.8333 14.7144M10 5.83333V10L12.5 11.6667" stroke="%23A4A7AE" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M18.9166 9.58333L17.2505 11.25L15.5833 9.58333M17.4542 10.8333C17.4845 10.5597 17.5 10.2817 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C12.3561 17.5 14.4584 16.4136 15.8333 14.7144M10 5.83333V10L12.5 11.6667" stroke="%23A4A7AE" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A');
}
.cometchat-ai-assistant-chat .cometchat-message-list {
  background: transparent;
  max-width: calc(100% + (var(--cometchat-padding-4) * 2));
  margin: 0 auto 17px auto;
  width: 100%;
}
.cometchat-ai-assistant-chat .cometchat-message-list .cometchat-list__body {
  border: none;
  height: 100%;
}
.cometchat-ai-assistant-chat .cometchat-message-list__body {
  padding: 0 var(--cometchat-padding-1);
  padding-bottom: var(--cometchat-padding-2);
}
.cometchat-ai-assistant-chat .cometchat-message-list__messages {
  margin-top: 0;
}
.cometchat-ai-assistant-chat .cometchat-message-list__shimmer {
  background: transparent;
}
.cometchat-ai-assistant-chat .cometchat-message-list__empty-state {
  background: transparent;
}
.cometchat-ai-assistant-chat .cometchat-list__body > .cometchat-list__body-intersection-top {
  visibility: hidden;
}
.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming {
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-self: flex-start;
  padding-top: 3px;
}
.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming .cometchat-message-bubble__body-content-view,
.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming .cometchat-message-bubble__body-wrapper,
.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming > div,
.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming .cometchat-message-bubble__body {
  min-width: 100%;
  width: 100%;
  max-width: 100%;
}
.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body,
.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-text-bubble {
  background: var(--cometchat-background-color-03);
  border: 1px solid var(--cometchat-border-color-light, #e8e8e8);
  border-radius: var(--cometchat-radius-4, 16px);
}
.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-text-bubble__body-text,
.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-date {
  color: var(--cometchat-text-color-primary);
}
.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing {
  max-width: 100%;
}
.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming .cometchat-message-bubble__body {
  background: transparent;
}
.cometchat-ai-assistant-chat .cometchat-message-bubble__wrapper {
  gap: var(--cometchat-spacing-2);
  padding: var(--cometchat-padding-2);
}
.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body-status-info-view {
  color: var(--cometchat-text-color-secondary);
  --cometchat-date-color: var(--cometchat-text-color-secondary);
}
.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-message-bubble__status-info-view-helper-text {
  color: var(--cometchat-text-color-secondary);
}
.cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text {
  -webkit-line-clamp: initial;
  line-clamp: initial;
  line-height: 1.75;
}
.cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__read-more,
.cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__read-less {
  display: none;
}
.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming .cometchat-message-bubble__body-status-info-view {
  display: none;
}
.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view-receipts-sent .cometchat-message-list__receipt,
.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view-receipts-wait .cometchat-message-list__receipt,
.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view-receipts-delivered .cometchat-message-list__receipt {
  background-color: var(--cometchat-icon-color-secondary);
}
.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view {
  gap: var(--cometchat-padding-1);
}
.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-message-bubble__status-info-view {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cometchat-ai-assistant-chat input[type=file] {
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.cometchat-ai-assistant-chat .cometchat-message-composer__attachment-button-wrapper {
  display: none;
}
.cometchat-ai-assistant-chat__message-composer-view {
  width: 100%;
  background: transparent;
  box-sizing: border-box;
  flex-shrink: 0;
  height: fit-content;
}
.cometchat-ai-assistant-chat__message-composer-view--disabled {
  cursor: not-allowed;
  caret-color: transparent;
  position: relative;
}
.cometchat-ai-assistant-chat__message-composer-view--disabled * {
  pointer-events: none;
}
.cometchat-ai-assistant-chat .cometchat-message-composer {
  border-radius: var(--cometchat-radius-4);
  border: 1px solid var(--cometchat-border-color-default);
  background: var(--cometchat-background-color-01);
  margin: 0 8px 8px 8px;
  width: auto;
  align-self: stretch;
  box-shadow: none;
  min-height: unset;
  box-sizing: border-box;
  flex-shrink: 0;
}
.cometchat-ai-assistant-chat .cometchat-message-composer__input {
  border: none;
  outline: none;
  box-shadow: none;
}
.cometchat-ai-assistant-chat .cometchat-message-composer__body {
  background: transparent;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}
.cometchat-ai-assistant-chat .cometchat-message-composer__input-area {
  flex: 1;
  width: 100%;
  padding: 12px 12px 0 12px;
}
.cometchat-ai-assistant-chat .cometchat-message-composer__actions {
  background: transparent;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 8px 8px 8px;
  gap: 0;
  min-height: unset;
}
.cometchat-ai-assistant-chat .cometchat-message-composer__send-button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cometchat-ai-assistant-chat__send-button-view {
  height: 44px;
  width: 44px;
  border-radius: var(--cometchat-radius-max);
  padding: var(--cometchat-padding-3);
  border: 1px solid var(--cometchat-border-color-light);
  background: var(--cometchat-background-color-04);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  opacity: 0.4;
  transition: opacity 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.cometchat-ai-assistant-chat__send-button-view--active {
  opacity: 1;
  background: var(--cometchat-secondary-button-background);
}
.cometchat-ai-assistant-chat__send-button-view--streaming {
  opacity: 1;
  background: var(--cometchat-secondary-button-background);
  pointer-events: all;
  cursor: not-allowed;
}
.cometchat-ai-assistant-chat__send-button-icon {
  mask: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334" stroke="white" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334" stroke="white" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  height: 20px;
  width: 20px;
  background: var(--cometchat-icon-color-white);
  display: block;
}
.cometchat-ai-assistant-chat__send-button-view--streaming .cometchat-ai-assistant-chat__send-button-icon {
  mask: 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="M2 5.2C2 4.0799 2 3.51984 2.21799 3.09202C2.40973 2.71569 2.71569 2.40973 3.09202 2.21799C3.51984 2 4.0799 2 5.2 2H10.8C11.9201 2 12.4802 2 12.908 2.21799C13.2843 2.40973 13.5903 2.71569 13.782 3.09202C14 3.51984 14 4.0799 14 5.2V10.8C14 11.9201 14 12.4802 13.782 12.908C13.5903 13.2843 13.2843 13.5903 12.908 13.782C12.4802 14 11.9201 14 10.8 14H5.2C4.0799 14 3.51984 14 3.09202 13.782C2.71569 13.5903 2.40973 13.2843 2.21799 12.908C2 12.4802 2 11.9201 2 10.8V5.2Z" fill="white"/>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: 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="M2 5.2C2 4.0799 2 3.51984 2.21799 3.09202C2.40973 2.71569 2.71569 2.40973 3.09202 2.21799C3.51984 2 4.0799 2 5.2 2H10.8C11.9201 2 12.4802 2 12.908 2.21799C13.2843 2.40973 13.5903 2.71569 13.782 3.09202C14 3.51984 14 4.0799 14 5.2V10.8C14 11.9201 14 12.4802 13.782 12.908C13.5903 13.2843 13.2843 13.5903 12.908 13.782C12.4802 14 11.9201 14 10.8 14H5.2C4.0799 14 3.51984 14 3.09202 13.782C2.71569 13.5903 2.40973 13.2843 2.21799 12.908C2 12.4802 2 11.9201 2 10.8V5.2Z" fill="white"/>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  height: 16px;
  width: 16px;
}
.cometchat-ai-assistant-chat__empty-state {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.cometchat-ai-assistant-chat__empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--cometchat-padding-2);
}
.cometchat-ai-assistant-chat__empty-state-icon {
  padding-bottom: var(--cometchat-padding-5);
}
.cometchat-ai-assistant-chat__empty-state-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.cometchat-ai-assistant-chat__empty-state-greeting-message {
  color: var(--cometchat-text-color-primary);
  text-align: center;
  font: var(--cometchat-font-heading4-medium);
}
.cometchat-ai-assistant-chat__empty-state-intro-message {
  color: var(--cometchat-text-color-tertiary);
  text-align: center;
  font: var(--cometchat-font-body-regular);
  padding-top: var(--cometchat-padding-1);
}
.cometchat-ai-assistant-chat__empty-state-suggested-messages {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: var(--cometchat-padding-5);
  max-width: 85%;
}
.cometchat-ai-assistant-chat__suggested-message-pill {
  border: 1px solid var(--cometchat-border-color-default);
  background: transparent;
  border-radius: var(--cometchat-radius-max);
  min-height: 32px;
  min-width: 80px;
  color: var(--cometchat-text-color-secondary);
  font: var(--cometchat-font-body-regular);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--cometchat-spacing-2);
  padding: var(--cometchat-padding-2) var(--cometchat-padding-3);
  box-sizing: border-box;
  cursor: pointer;
}
.cometchat-ai-assistant-chat__suggested-message-pill:hover {
  background: var(--cometchat-background-color-01);
  transition: all 0.4s ease-in-out;
}
.cometchat-ai-assistant-chat__suggested-message-icon {
  height: 16px;
  width: 16px;
  mask: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M2.5 6H9.5M9.5 6L6 2.5M9.5 6L6 9.5" stroke="%23717680" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A') center center no-repeat;
  -webkit-mask: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M2.5 6H9.5M9.5 6L6 2.5M9.5 6L6 9.5" stroke="%23717680" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A') center center no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background: var(--cometchat-icon-color-secondary);
  display: inline-block;
}
.cometchat-ai-assistant-chat__sidebar {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  max-width: 420px;
  height: 100%;
  background: var(--cometchat-background-color-01);
  border-left: 1px solid var(--cometchat-border-color-light);
  z-index: 1000;
  display: none;
  flex-direction: column;
}
.cometchat-ai-assistant-chat__sidebar--open {
  display: flex;
}
.cometchat-ai-assistant-chat__sidebar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cometchat-background-color-02);
}
.cometchat-ai-assistant-chat__sidebar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
}
@media (max-width: 768px) {
  .cometchat-ai-assistant-chat {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
  }
  .cometchat-ai-assistant-chat__sidebar {
    position: fixed;
    z-index: 1000;
  }
  .cometchat-ai-assistant-chat__sidebar-overlay {
    position: fixed;
    z-index: 999;
  }
  .cometchat-ai-assistant-chat__empty-state-suggested-messages {
    max-width: 90%;
  }
}
@media (max-width: 680px) {
  .cometchat-ai-assistant-chat__empty-state-suggested-messages {
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .cometchat-ai-assistant-chat__sidebar {
    position: fixed;
    z-index: 1000;
  }
  .cometchat-ai-assistant-chat__sidebar--open {
    width: 100%;
    max-width: none;
  }
  .cometchat-ai-assistant-chat__sidebar-overlay {
    position: fixed;
    z-index: 999;
  }
}