@cometchat/chat-uikit-react 6.0.6 → 6.1.0

package/dist/styles/components/CometChatSearch.css

@@ -0,0 +1,948 @@
+.cometchat-search {
+  width: 100%;
+  margin: 0 auto;
+  background: var(--cometchat-background-color-01);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding-3, 12px);
+
+}
+
+.cometchat-search__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: flex-start;
+  min-height: 64px;
+  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+
+}
+
+.cometchat-search__search-bar {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+}
+
+.cometchat-search__input {
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
+  gap: var(--cometchat-spacing-1, 4px);
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: var(--cometchat-radius-max, 1000px);
+  border: 1px solid var(--cometchat-border-color-dark, #DCDCDC);
+  background: var(--cometchat-background-color-03, #F5F5F5);
+  justify-content: flex-start;
+  overflow-x: auto;
+}
+
+.cometchat-search__input input {
+  border: none;
+  flex: 1;
+  min-width: 50px;
+  outline: none;
+  background: transparent;
+  color: var(--cometchat-text-color-primary, #141414);
+  font: var(--cometchat-font-heading4-regular);
+}
+
+.cometchat-search__input-clear-button {
+  border: none;
+  background: none;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cometchat-search__input-clear-button .cometchat-button,
+.cometchat-search__back-button .cometchat-button {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  height: fit-content;
+  width: fit-content;
+}
+
+.cometchat-search__input-clear-button .cometchat-button .cometchat-button__icon,
+.cometchat-search__back-button .cometchat-button .cometchat-button__icon {
+  height: 24px;
+  width: 24px;
+  background: var(--cometchat-icon-color-secondary);
+}
+
+.cometchat-search__back-button .cometchat-button .cometchat-button__icon {
+  background: var(--cometchat-icon-color-primary);
+
+}
+
+.cometchat-search__body {
+  padding: 0px var(--cometchat-padding-4, 16px);
+
+}
+
+.cometchat-search__body-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cometchat-padding-2, 8px) var(--cometchat-padding-2, 8px);
+}
+
+.cometchat-search__body-filter,
+.cometchat-search__body-filter .cometchat-button {
+  cursor: pointer;
+  border-radius: var(--Radius-radius_Max, 1000px);
+  background: var(--cometchat-background-color-03);
+  display: flex;
+  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
+  align-items: center;
+  align-content: center;
+  gap: 4px var(--cometchat-padding-1, 4px);
+
+}
+
+.cometchat-search__body-filters .cometchat-button {
+  flex-wrap: wrap;
+}
+
+.cometchat-search__body-filter .cometchat-button {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  height: fit-content;
+  width: fit-content;
+  font: var(--cometchat-font-body-regular);
+  color: var(--cometchat-text-color-secondary, #727272);
+
+}
+
+.cometchat-search__body-filter .cometchat-button .cometchat-button__icon {
+  height: 16px;
+  width: 16px;
+  background: var(--cometchat-icon-color-secondary);
+}
+
+.cometchat-search__initial-view {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.cometchat-search__initial-view-icon {
+  mask: url("../../assets/search_message_icon.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/search_message_icon.svg") center center no-repeat;
+  background: var(--cometchat-icon-color-secondary);
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  width: 120px;
+  height: 120px;
+  flex-shrink: 0;
+
+}
+
+.cometchat-search__initial-view-title {
+  color: var(--cometchat-text-color-primary, #141414);
+  text-align: center;
+  font: var(--cometchat-font-heading3-bold);
+}
+
+.cometchat-search__initial-view-subtitle {
+  color: var(--cometchat-text-color-secondary, #727272);
+  text-align: center;
+  font: var(--cometchat-font-body-regular);
+}
+
+
+
+
+
+.cometchat-search-conversations__see-more .cometchat-button,
+.cometchat-search-messages__see-more .cometchat-button {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  margin: 0;
+  height: fit-content;
+  width: fit-content;
+
+}
+
+.cometchat-search-conversations__see-more .cometchat-button__text,
+.cometchat-search-messages__see-more .cometchat-button__text {
+  color: var(--cometchat-primary-color);
+}
+
+.cometchat-search .cometchat-list-item__trailing-view {
+  width: fit-content;
+  height: fit-content;
+  align-self: flex-start;
+}
+
+.cometchat-search__conversations .cometchat-search__conversations-subtitle-text-wrapper,
+.cometchat-search__conversations .cometchat-search__conversations-subtitle {
+  display: flex;
+  flex-direction: row;
+  gap: var(--cometchat-padding, 2px);
+
+
+}
+
+.cometchat-search__conversations .cometchat-search__conversations-subtitle-text,
+.cometchat-search__conversations .cometchat-search__conversations-subtitle-text-sender,
+.cometchat-search-messages__list-item .cometchat-search-messages__subtitle-text {
+  overflow: hidden;
+  color: var(--cometchat-text-color-secondary, #727272);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--cometchat-font-body-regular, 14px);
+}
+
+.cometchat-search__conversations-subtitle-text-sender {
+  font: var(--cometchat-font-body-bold, 14px);
+
+}
+
+.cometchat-search__conversations-subtitle-receipts {
+  height: 16px;
+  width: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  align-self: center;
+  background: var(--cometchat-icon-color-secondary, #A1A1A1);
+  flex-shrink: 0;
+}
+
+
+.cometchat-search__conversations-subtitle-receipts-sent {
+  -webkit-mask: url("../../assets/conversations_sent.svg") center center no-repeat;
+  mask: url("../../assets/conversations_sent.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+.cometchat-search__conversations-subtitle-receipts-delivered {
+  -webkit-mask: url("../../assets/conversations_delivered.svg") center center no-repeat;
+  mask: url("../../assets/conversations_delivered.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+
+.cometchat-search__conversations-subtitle-receipts-read {
+  -webkit-mask: url("../../assets/conversations_read.svg") center center no-repeat;
+  mask: url("../../assets/conversations_read.svg") center center no-repeat;
+  background: var(--cometchat-message-seen-color, #56E8A7);
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+
+.cometchat-search .cometchat-text-highlight {
+  font: var(--cometchat-font-body-bold);
+  color: var(--cometchat-text-color-primary);
+
+}
+
+.cometchat-search__results,
+.cometchat-search__conversations,
+.cometchat-search__messages {
+  overflow: hidden;
+  height: fit-content;
+}
+
+.cometchat-search__results {
+  overflow: scroll;
+  height: 100%;
+}
+
+.cometchat-search__conversations-full,
+.cometchat-search__messages-full {
+  height: 100%;
+}
+
+.cometchat-search__conversations-list-item {
+  cursor: pointer;
+}
+
+.cometchat-search__conversations-list-item-active .cometchat-list-item {
+  background-color: var(--cometchat-white-pressed, #E8E8E8);
+}
+
+.cometchat-search__conversations-subtitle {
+  display: flex;
+  gap: var(--cometchat-padding-1, 4px);
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cometchat-search__conversations-subtitle-text-wrapper {
+  display: flex;
+  gap: var(--cometchat-padding, 2px);
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cometchat-search__conversations-subtitle-text {
+  overflow: hidden;
+  color: var(--cometchat-text-color-secondary, #727272);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--cometchat-font-body-regular);
+  width: 100%;
+}
+
+.cometchat-search__conversations-subtitle-text-sender {
+  overflow: hidden;
+  color: var(--cometchat-text-color-secondary, #727272);
+  text-overflow: ellipsis;
+  font: var(--cometchat-font-body-medium);
+  flex-shrink: 0;
+}
+
+.cometchat-search__conversations-subtitle-typing {
+  overflow: hidden;
+  color: var(--cometchat-text-color-highlight, #6852D6);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--cometchat-font-body-regular);
+}
+
+.cometchat-search__conversations-trailing-view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding-1, 4px);
+}
+
+.cometchat-search__conversations-trailing-view-date {
+  font: var(--cometchat-font-caption1-regular);
+}
+
+.cometchat-search__conversations-trailing-view-badge {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--cometchat-padding-1, 4px);
+}
+
+.cometchat-search__conversations-trailing-view-badge-count {
+  display: flex;
+  height: 20px;
+  padding: 0px 8px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  background: var(--cometchat-primary-color, #6852D6);
+  overflow: hidden;
+  color: var(--cometchat-static-white, #FFF);
+  text-align: center;
+  text-overflow: ellipsis;
+  font: var(--cometchat-font-caption1-regular);
+}
+
+.cometchat-search__conversations-subtitle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  border: none;
+  align-self: center;
+  background: var(--cometchat-icon-color-secondary, #A1A1A1);
+  height: 16px;
+  width: 16px;
+  flex-shrink: 0;
+}
+
+.cometchat-search__conversations-subtitle-icon-incoming-audio-call,
+.cometchat-search__conversations-subtitle-icon-incoming-video-call {
+  background-color: var(--cometchat-error-color, #F44649);
+}
+
+.cometchat-search__conversations-subtitle-icon-incoming-audio-call {
+  -webkit-mask: url("../../assets/conversations_missed-voice-call.svg") center center no-repeat;
+  mask: url("../../assets/conversations_missed-voice-call.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-incoming-video-call {
+  -webkit-mask: url("../../assets/conversations_missed-video-call.svg") center center no-repeat;
+  mask: url("../../assets/conversations_missed-video-call.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-outgoing-audio-call {
+  -webkit-mask: url("../../assets/conversations_outgoing-voice-call.svg") center center no-repeat;
+  mask: url("../../assets/conversations_outgoing-voice-call.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-outgoing-video-call {
+  -webkit-mask: url("../../assets/conversations_outgoing-video-call.svg") center center no-repeat;
+  mask: url("../../assets/conversations_outgoing-video-call.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-image {
+  -webkit-mask: url("../../assets/conversations_image-message.svg") center center no-repeat;
+  mask: url("../../assets/conversations_image-message.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-file {
+  -webkit-mask: url("../../assets/conversations_file-message.svg") center center no-repeat;
+  mask: url("../../assets/conversations_file-message.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-video {
+  -webkit-mask: url("../../assets/conversations_video-message.svg") center center no-repeat;
+  mask: url("../../assets/conversations_video-message.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-audio {
+  -webkit-mask: url("../../assets/conversations_audio-message.svg") center center no-repeat;
+  mask: url("../../assets/conversations_audio-message.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-poll {
+  -webkit-mask: url("../../assets/conversations_poll-message.svg") center center no-repeat;
+  mask: url("../../assets/conversations_poll-message.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-sticker {
+  -webkit-mask: url("../../assets/conversations_sticker-message.svg") center center no-repeat;
+  mask: url("../../assets/conversations_sticker-message.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-collaborative-document {
+  -webkit-mask: url("../../assets/conversations_collaborative-document-message.svg") center center no-repeat;
+  mask: url("../../assets/conversations_collaborative-document-message.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-collaborative-whiteboard {
+  -webkit-mask: url("../../assets/conversations_collaborative-whiteboard-message.svg") center center no-repeat;
+  mask: url("../../assets/conversations_collaborative-whiteboard-message.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-deleted {
+  -webkit-mask: url("../../assets/conversations_delete.svg") center center no-repeat;
+  mask: url("../../assets/conversations_delete.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-link {
+  -webkit-mask: url("../../assets/conversations_link.svg") center center no-repeat;
+  mask: url("../../assets/conversations_link.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-thread {
+  -webkit-mask: url("../../assets/conversations_thread.svg") center center no-repeat;
+  mask: url("../../assets/conversations_thread.svg") center center no-repeat;
+}
+
+.cometchat-search__conversations-subtitle-icon-none {
+  display: none;
+}
+
+/* See more button */
+.cometchat-search-conversations__see-more {
+  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+  display: flex;
+  justify-content: flex-start;
+}
+
+.cometchat-search-conversations__see-more .cometchat-button {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  margin: 0;
+  height: fit-content;
+  width: fit-content;
+  padding: 0;
+}
+
+.cometchat-search-conversations__see-more .cometchat-button__text {
+  color: var(--cometchat-primary-color, #6852D6);
+  font: var(--cometchat-font-body-medium);
+}
+
+.cometchat-search-messages {
+  overflow: hidden;
+  height: fit-content;
+}
+
+.cometchat-search__shimmer {
+  width: 100%;
+  height: 100%;
+  background: var(--cometchat-background-color-01, #FFF);
+}
+
+.cometchat-search__shimmer-item {
+  width: 100%;
+  height: 72px;
+  display: flex;
+  min-width: 240px;
+  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+  align-items: center;
+  gap: 12px;
+}
+
+.cometchat-search__shimmer-item-avatar {
+  display: flex;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--cometchat-radius-max, 1000px);
+  background: var(--cometchat-shimmer-gradient-color,
+      linear-gradient(90deg, #e0e0e0 0%, #eee 100%));
+}
+
+.cometchat-search__shimmer-item-body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding-2, 8px);
+}
+
+.cometchat-search__shimmer-item-body-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.cometchat-search__shimmer-item-body-title {
+  width: 50%;
+  height: 22px;
+  flex-shrink: 0;
+  border-radius: var(--cometchat-radius-2, 8px);
+  background: var(--cometchat-shimmer-gradient-color,
+      linear-gradient(90deg, #e0e0e0 0%, #eee 100%));
+  animation: shimmerAnimation 1.5s infinite linear;
+}
+
+.cometchat-search__shimmer-item-body-subtitle {
+  width: 100%;
+  height: 12px;
+  flex-shrink: 0;
+  border-radius: var(--cometchat-radius-2, 8px);
+  background: var(--cometchat-shimmer-gradient-color,
+      linear-gradient(90deg, #e0e0e0 0%, #eee 100%));
+  animation: shimmerAnimation 1.5s infinite linear;
+}
+
+.cometchat-search__shimmer-item-body-tail {
+  width: 60px;
+  height: 22px;
+  min-height: 22px;
+  border-radius: var(--cometchat-radius-2, 8px);
+  background: var(--cometchat-shimmer-gradient-color,
+      linear-gradient(90deg, #e0e0e0 0%, #eee 100%));
+  animation: shimmerAnimation 3.5s infinite linear;
+}
+
+.cometchat-search__empty-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding-5, 20px);
+  justify-content: center;
+  align-items: center;
+  background: var(--cometchat-background-color-01, #FFF);
+}
+
+.cometchat-search__empty-view-icon {
+  height: 120px;
+  width: 120px;
+  mask: url("../../assets/search_message_icon.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/search_message_icon.svg") center center no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background: var(--cometchat-icon-color-secondary, #A1A1A1);
+}
+
+.cometchat-search__empty-view-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding, 2px);
+}
+
+.cometchat-search__empty-view-body-title {
+  width: 280px;
+  color: var(--cometchat-text-color-primary, #141414);
+  text-align: center;
+  font: var(--cometchat-font-heading3-bold);
+}
+
+.cometchat-search__empty-view-body-description {
+  width: 280px;
+  color: var(--cometchat-text-color-secondary, #727272);
+  text-align: center;
+  font: var(--cometchat-font-body-regular);
+}
+
+/* Error state */
+.cometchat-search__error-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding-5, 20px);
+  justify-content: center;
+  align-items: center;
+  background: var(--cometchat-background-color-01, #FFF);
+}
+
+.cometchat-search__error-view-icon {
+  height: 120px;
+  width: 120px;
+  mask: url("../../assets/list_error_state_icon.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/list_error_state_icon.svg") center center no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background: var(--cometchat-error-color, #F44649);
+}
+
+.cometchat-search__error-view-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding, 2px);
+}
+
+.cometchat-search__error-view-body-title {
+  width: 280px;
+  color: var(--cometchat-text-color-primary, #141414);
+  text-align: center;
+  font: var(--cometchat-font-heading3-bold);
+}
+
+.cometchat-search__error-view-body-description {
+  width: 280px;
+  color: var(--cometchat-text-color-secondary, #727272);
+  text-align: center;
+  font: var(--cometchat-font-body-regular);
+}
+
+.cometchat-search-messages__list-item {
+  cursor: pointer;
+  width: 100%;
+}
+
+.cometchat-search-messages__list-item .cometchat-list-item__body-subtitle,
+.cometchat-search-messages__list-item .cometchat-search-messages__subtitle {
+  display: flex;
+  gap: var(--cometchat-padding-1, 4px);
+  width: 100%;
+  max-width: 98%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cometchat-search-messages__subtitle-text {
+  overflow: hidden;
+  color: var(--cometchat-text-color-secondary, #727272);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--cometchat-font-body-regular);
+  width: 100%;
+}
+
+.cometchat-search-messages__trailing-view {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--cometchat-padding-1, 4px);
+}
+
+.cometchat-search-messages .cometchat-date {
+  font: var(--cometchat-font-caption1-regular);
+  color: var(--cometchat-text-color-secondary, #727272);
+}
+
+.cometchat-search-messages__see-more {
+  gap: var(--cometchat-padding-3, 12px) 0px;
+  display: flex;
+  justify-content: flex-start;
+  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+
+}
+
+.cometchat-search-messages__see-more .cometchat-button {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  margin: 0;
+  height: fit-content;
+  width: fit-content;
+  padding: 0;
+}
+
+.cometchat-search-messages__see-more .cometchat-button__text {
+  color: var(--cometchat-primary-color, #6852D6);
+  font: var(--cometchat-font-body-medium);
+}
+
+/* Animation for shimmer effect */
+@keyframes shimmerAnimation {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+}
+
+.cometchat-search__messages-leading-view {
+  background: var(--cometchat-background-color-01);
+  height: 40px;
+  width: 48px;
+  border-radius: var(--cometchat-radius-max, 1000px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cometchat-search__messages-leading-view-link>.cometchat-search__messages-leading-view-icon {
+  -webkit-mask: url("../../assets/link_icon_2x.svg") center center no-repeat;
+  mask: url("../../assets/link_icon_2x.svg") center center no-repeat;
+  background: var(--cometchat-icon-color-secondary, #A1A1A1);
+  height: 16px;
+  width: 16px;
+  transform: scale(2);
+
+
+}
+
+
+
+.cometchat-search__messages-leading-view-audio.cometchat-search__messages-leading-view {
+  background-color: var(--cometchat-primary-color, #6852D6);
+}
+
+.cometchat-search__messages-leading-view-audio>.cometchat-search__messages-leading-view-icon {
+  mask: url("../../assets/play_arrow.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/play_arrow.svg") center center no-repeat;
+  background: var(--cometchat-static-white, #A1A1A1);
+  height: 16px;
+  width: 16px;
+  transform: scale(2);
+
+
+}
+
+.cometchat-search__body-filter .cometchat-button__text {
+  color: var(--cometchat-text-color-primary, #141414);
+  font: var(--cometchat-font-body-regular);
+}
+
+
+
+.cometchat-search-messages__subtitle {
+  font: var(--cometchat-font-body-regular);
+  color: var(--cometchat-text-color-secondary, #727272);
+}
+
+.cometchat-search-messages__date-separator .cometchat-date {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  color: var(--cometchat-text-color-secondary, #727272);
+  font: var(--cometchat-font-caption1-regular);
+
+}
+
+.cometchat-search-messages__date-separator {
+  padding: 0px var(--cometchat-padding-2, 8px);
+
+}
+
+.cometchat-search__messages-trailing-view {
+  height: 80px;
+  width: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.cometchat-search__messages-trailing-view img,
+.cometchat-search__messages-trailing-view video {
+  max-height: 80px;
+  max-width: 80px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.cometchat-search__messages-video-play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 30px;
+  height: 30px;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+}
+
+.cometchat-search__messages-video-play-button:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-left: 12px solid white;
+  margin-left: 3px;
+}
+
+.cometchat-search__messages-trailing-view-video {
+  position: relative;
+}
+
+.cometchat-search .cometchat-list__header-title {
+  color: var(--cometchat-text-color-secondary, #727272);
+
+  font: var(--cometchat-font-body-regular)
+}
+
+.cometchat-search__conversations,
+.cometchat-search__messages {
+  min-height: 110px;
+  height: fit-content;
+}
+
+.cometchat-search__results::-webkit-scrollbar,
+.cometchat-search__input::-webkit-scrollbar {
+  display: none;
+}
+
+.cometchat-search__results::-webkit-scrollbar-thumb,
+.cometchat-search__input::-webkit-scrollbar-thumb {
+  display: none;
+}
+
+.cometchat-search__conversations-list-item-online .cometchat-list-item__status,
+.cometchat-search__conversations-list-item-password .cometchat-list-item__status,
+.cometchat-search__conversations-list-item-private .cometchat-list-item__status {
+  width: 14px;
+  height: 14px;
+  margin-right: -14px;
+  position: relative;
+  top: 20px;
+  right: 15px;
+  border-radius: var(--cometchat-radius-max, 1000px);
+  min-width: 14px;
+  border: 2px solid var(--cometchat-neutral-color-50, #FFF);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cometchat-search__conversations-list-item-online .cometchat-list-item__status {
+  margin-right: -12px;
+  background: var(--cometchat-success-color, #09C26F);
+}
+
+.cometchat-search__conversations-list-item-password .cometchat-list-item__status {
+  background-color: var(--cometchat-success-color, #09C26F);
+}
+
+.cometchat-search__conversations-list-item-private .cometchat-list-item__status {
+  background-color: var(--cometchat-warning-color, #FFAB00);
+}
+
+.cometchat-search__conversations-list-item-password .cometchat-list-item__status-icon {
+  -webkit-mask: url("../../assets/lock.svg") center center no-repeat;
+  mask: url("../../assets/lock.svg") center center no-repeat;
+  height: 8px;
+  width: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  border: none;
+  align-self: center;
+  background: var(--cometchat-static-white, #FFF);
+}
+
+.cometchat-search__conversations-list-item-private .cometchat-list-item__status-icon {
+  -webkit-mask: url("../../assets/shield.svg") center center no-repeat;
+  mask: url("../../assets/shield.svg") center center no-repeat;
+  height: 8px;
+  width: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  border: none;
+  align-self: center;
+  background: var(--cometchat-static-white, #FFF);
+}
+
+
+.cometchat-search .cometchat-list__header-title {
+  padding: 0px var(--cometchat-padding-4, 16px);
+}
+
+.cometchat-search__initial-view {
+  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+}
+
+.cometchat-search .cometchat-list .cometchat-list__header,
+.cometchat-search .cometchat-list .cometchat-list__body {
+  border: none;
+}
+
+.cometchat-search__body-filter-active {
+  border-radius: var(--cometchat-radius-max, 1000px);
+  border: 1px solid var(--cometchat-neutral-color-800, #434343);
+  background: var(--cometchat-neutral-color-900, #141414);
+
+}
+
+.cometchat-search__body-filter-active .cometchat-button__text {
+  color: var(--cometchat-neutral-color-50, #141414);
+}
+
+.cometchat-search__body-filter-active .cometchat-button__icon {
+  background: var(--cometchat-neutral-color-50, #141414);
+}
+
+.cometchat-search__messages-leading-view-file {
+  height: 32px;
+  width: 32px;
+}
+
+.cometchat-list-item__body-title {
+  color: var(--cometchat-text-color-secondary, #727272);
+}
+
+.cometchat-search__messages-subtitle-icon-thread{
+  height: 16px;
+  width: 16px;
+  border: none;
+  border-radius: 0;
+  background: var(--cometchat-icon-color-secondary, #A1A1A1);
+  -webkit-mask: url("../../assets/conversations_thread.svg") center center no-repeat;
+  mask: url("../../assets/conversations_thread.svg") center center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}