.chats-list-container {
  @apply com-relative;

  .chats-list {
    @apply com-hidden com-border-0 com-m-0 com-absolute com-w-[360px] com-overflow-hidden com-right-3 com-bottom-32 com-shadow-Chat-box;
    @apply md:com-bottom-24;

    &.active {
      @apply com-flex;
    }

    nb-card-header {
      @apply com-p-3;
    }

    nb-card-body {
      @apply com-p-0 com-max-h-[60vh];
    }
  }

  .chats-list-toggle {
    @apply com-absolute com-w-10 com-h-10 com-right-3 com-p-2 com-bottom-20;
    @apply md:com-bottom-6 com-shadow-Chat-box;

    nb-icon {
      @apply com-ml-0 #{!important};
    }
  }

  nb-list {
    @apply com-w-full;
    nb-list-item {
      @apply com-px-3 com-py-2 com-flex com-flex-col com-justify-between com-items-start;

      .user-profile {
        @apply com-flex com-flex-row com-justify-between com-w-full;

        .date {
          @apply com-m-0 com-text-xs com-font-normal com-text-gray-500 com-pt-2;
        }
      }

      .latest-message-count {
        @apply com-flex com-flex-row com-justify-between com-m-0 com-pl-12 com-mt-[-16px] com-w-full;

        .last_message {
          @apply com-text-xs com-font-normal com-text-black com-m-0 com-line-clamp-2;
        }
      }
    }
  }

  .selectedUser {
    @apply com-bg-slate-100;
  }
}
