@layer components {
  .status-circle {
    @apply w-3 h-3 absolute rounded-[50%] border-2 border-solid border-[rgba(var(--white),1)] left-11 top-1;
  }
  .left-sidebar-wrapper {
    @apply z-[1] border-[rgba(var(--white),1)] p-5 !rounded-[10px_0_0_10px] border-2 border-solid;
    border-right: unset;
    .left-sidebar-chat {
      .input-group {
        .input-group-text {
          @apply bg-[rgba(var(--chart-progress-light),1)] mr-px pr-0;
          border: none;
          svg {
            @apply w-4 h-4;
          }
        }
        > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
          @apply rounded-tl-none rounded-bl-none;
        }
        .form-control {
          @apply bg-[rgba(var(--chart-progress-light),1)];
          border-left: unset;
          &:focus-visible {
            @apply border-[rgba(var(--chart-progress-light),1)] shadow-[unset];
          }
        }
      }
    }
    .advance-options {
      ul {
        @apply !m-0 p-0 items-center flex-nowrap;
        li {
          .tab-link {
            @apply text-[rgba(var(--body-font-color),1)] bg-transparent block px-[50px] py-4 border-b-2 border-b-transparent border-solid;
            text-decoration: unset;
            &:active,
            &.active {
              @apply border-b-[rgba(var(--theme-default),1)] !text-[rgba(var(--theme-default),1)] border-b-2 border-solid;
            }
          }
        }
        &.border-tab{
          &.tab-links{
            @apply flex-nowrap justify-center;
          }
        }
      }
      .common-space {
        @apply px-0 py-[11px];
        p {
          @apply text-[rgba(var(--chart-text-color),1)] m-0;
        }
        .header-top {
          .btn {
            @apply px-3 py-1.5 hover:border-[rgba(var(--transparent-color),1)];
            &:hover {
              i {
                @apply text-[rgba(var(--white),1)];
              }
            }
          }
        }
      }
      .chats-user {
        @apply h-[541px] overflow-y-auto;
        border-bottom: unset;
        li {
          @apply w-full gap-2.5 border-b-[rgba(var(--chart-dashed-border),1)] cursor-pointer flex-wrap !p-[11px] rounded-none border-b border-solid;
          &:hover,
          &:active,
          &.active {
            @apply bg-[rgba(var(--light-slate),1)];
          }
          .chat-time {
            @apply flex gap-2.5 items-center;
          }
          > div:not(.chat-time) {
            @apply ml-auto;
          }
          &.active {
            @apply bg-[rgba(var(--theme-default),1)];
            .chat-time {
              span,
              p {
                @apply text-[rgba(var(--white),1)];
              }
            }
            p {
              @apply text-[rgba(var(--white),1)];
            }
          }
          &:last-child {
            border-bottom: unset;
          }
        }
        .common-space {
          .badge {
            @apply inline-block;
          }
        }
      }
    }
  }
  .active-profile {
    @apply relative;
    img {
      @apply w-[42px] h-[42px];
    }
    .status {
      @apply absolute h-3.5 w-3.5 border-[rgba(var(--white),1)] rounded-[100%] border-[3px] border-solid -right-0.5 bottom-[5%];
    }
  }
  .offcanvas-right-icon {
    @apply gap-1.5;
    .contact-edit {
      &.chat-alert {
        @apply w-[29px] h-[29px];
        svg {
          @apply w-4 h-4 stroke-[rgba(var(--chart-text-color),1)];
        }
        .dropdown-menu {
          .dropdown-item {
            @apply bg-[rgba(var(--white),1)] text-[rgba(var(--dark-editor-document),1)] opacity-60 text-[13px] border-t-[rgba(var(--light-semi-gray),1)] px-3 py-1.5 border-t border-solid hover:bg-[rgba(var(--light-background),1)] hover:opacity-100;
            &:hover {
              text-decoration: unset;
            }
          }
        }
      }
    }
  }
  .contact-edit {
    .dropdown-toggle {
      @apply bg-transparent p-0;
    }
    .dropdown-menu {
      @apply right-0;
      white-space: wrap;
      a {
        @apply block;
      }
    }
  }
  .contact-edit {
    svg {
      @apply cursor-pointer w-[18px] h-[18px] stroke-[rgba(var(--badge-light-color),1)];
    }
    .dropdown-menu {
      .dropdown-item {
        &:hover {
          @apply bg-[rgba(var(--light-background),1)] opacity-100;
          text-decoration: unset;
        }
      }
    }
    &.chat-alert {
      @apply bg-[rgba(var(--light-slate),1)] w-10 h-10 flex justify-center items-center rounded-[5px];
    }
  }
  .search-contacts {
    @apply flex items-center justify-center relative;
    .form-control {
      @apply px-[35px];
      &:focus {
        @apply shadow-[unset] border-[rgba(var(--chart-dashed-border),1)];
      }
    }
    svg {
      @apply stroke-[rgba(var(--chart-text-color),1)] w-[18px] h-[18px] absolute left-2.5 top-2.5;
    }
    .mic-search {
      @apply absolute left-[unset] right-2.5 top-2.5;
    }
  }
  .contact-wrapper {
    @apply h-[503px] overflow-y-auto pt-3.5 border-b-[unset];
    .dropdown-toggle {
      @apply bg-transparent p-0;
    }
    .dropdown-menu {
      @apply right-0;
      white-space: wrap;
      a {
        @apply block;
      }
    }
    > p {
      @apply leading-[0] text-lg font-medium text-[rgba(var(--body-font-color),1)] m-0 px-0 py-3;
    }
    ul {
      li {
        @apply w-full cursor-pointer;
        .chat-time {
          @apply flex items-center gap-2.5;
          img {
            @apply w-[42px] h-[42px];
          }
          > div {
            span {
              @apply text-[rgba(var(--body-font-color),1)];
            }
          }
        }
        svg {
          @apply w-[18px] h-[18px];
        }
      }
      &:last-child {
        .common-space {
          @apply pb-[unset];
        }
      }
    }
  }
  .right-sidebar-chat {
    /* @apply border-[rgba(var(--white),1)] !rounded-tl-none !rounded-bl-none border-2 border-solid; */
    @apply border-[rgba(var(--white),1)] !rounded-tl-none !rounded-bl-none border-solid;
    border-left: unset;
  }
  .right-sidebar-title {
    @apply flex justify-between shadow-[0px_12px_13px_-17px_rgba(131,131,131,0.67)] px-[25px] py-[13px];
    .active-profile-chat {
      @apply relative;
      img {
        @apply w-[42px] h-[42px];
      }
      .status {
        @apply absolute h-3.5 w-3.5 border-[rgba(var(--white),1)] rounded-[100%] border-[3px] border-solid -right-0.5 bottom-[5%];
      }
    }
    .offcanvas-body {
      .btn {
        @apply bg-[rgba(var(--theme-default),10%)];
        svg {
          @apply w-[13px] h-[13px] fill-[rgba(var(--theme-default),1)] align-middle transition-[0.5s];
        }
        &:hover {
          svg {
            @apply translate-x-[5px] transition-[0.5s];
          }
        }
      }
    }
    .common-space {
      @apply w-full;
      .offcanvas-header {
        h6 {
          @apply text-[rgba(var(--body-font-color),1)];
        }
      }
      .chat-time-chat {
        @apply flex gap-2.5 items-center;
        .active-profile {
          img {
            @apply w-[42px] h-[42px];
          }
        }
        div {
          p {
            @apply text-[rgba(var(--chart-text-color),1)] m-0;
          }
        }
        ul {
          li {
            img {
              @apply w-[42px] h-[42px];
            }
          }
        }
        &.group-chat {
          ul {
            @apply flex;
            li {
              img {
                @apply border-[3px] border-solid border-transparent w-[38px] h-[38px];
              }
              + li {
                @apply -ml-3;
                img {
                  @apply border-[rgba(var(--white-bg),1)] border-[3px] border-solid;
                }
              }
              .profile-count {
                @apply w-[38px] h-[38px];
              }
            }
          }
        }
      }
    }
  }
  .msger-chat {
    @apply flex-1 overflow-y-auto !bg-[url(../images/chats/chat-bg.png)] h-[600px] p-2.5;
    background: linear-gradient(0deg, #f5f6fa, #f5f6fa), linear-gradient(0deg, #ffffff, #ffffff);
    &::-webkit-scrollbar {
      @apply w-1.5;
    }
    &::-webkit-scrollbar-track {
      background: var(--ps-light-border);
    }

    &::-webkit-scrollbar-thumb {
      background: #bdbdbd;
    }
  }
  .msg {
    @apply flex items-end mb-2.5 last-of-type:m-0;
  }
  .msg-img {
    @apply w-[50px] h-[50px] bg-[rgba(var(--ps-light-border),1)] bg-no-repeat bg-center bg-cover mr-2.5 rounded-[50%];
  }
  .msg-bubble {
    @apply max-w-[450px] p-[15px] rounded-[15px];
  }
  .msg-info {
    @apply mb-2.5 flex justify-between items-center;
  }
  .msg-info-name {
    @apply mr-2.5;
    font-weight: bold;
  }
  .msg-info-time {
    @apply text-[0.85em];
  }
  .left-msg {
    .msg-img {
      @apply bg-[url(../images/dashboard/user/13.jpg)] w-[33px] h-[33px];
    }
    .msg-bubble {
      @apply bg-[rgba(var(--light-color),1)] relative text-[rgba(var(--chart-text-color),1)] w-[calc(100%_-_33px)] rounded-[15px];
    }
  }
  .right-msg {
    @apply flex-row-reverse;
    .msg-bubble {
      @apply bg-[rgba(var(--theme-default),1)] text-[rgba(var(--white),1)] w-[calc(100%_-_33px)];
    }
    .msg-img {
      @apply ml-2.5 mr-0 my-0 bg-[url(../images/dashboard-11/user/10.jpg)] w-[33px] h-[33px];
    }
  }
  .msger-inputarea {
    @apply flex border-t-[rgba(var(--chart-dashed-border),1)] items-center cursor-pointer p-2.5 rounded-[0_0_15px_0] border-t border-solid;
    background: linear-gradient(0deg, #f5f6fa, #f5f6fa), linear-gradient(0deg, rgba(var(--white-bg), 1), rgba(var(--white-bg), 1));
    .dropdown-toggle {
      @apply h-[36px] bg-transparent p-2.5 after:content-[unset];
      .dropdown-menu {
        @apply !inset-[unset];
      }
    }
    .dropdown-form {
      @apply relative grid place-content-center mr-2.5 rounded-[100%] hover:bg-[rgba(var(--theme-default),0.1)];
      i {
        @apply text-base font-black text-[rgba(var(--theme-default),1)] cursor-pointer p-0;
      }
      .chat-icon {
        @apply absolute shadow-[unset] !left-0 !bottom-[50px];
        background: transparent !important;
        div {
          @apply w-[47px] h-[47px] flex justify-center items-center bg-[rgba(var(--white),1)] opacity-100 p-0 rounded-[50%] hover:!bg-[rgba(var(--theme-default),1)] hover:opacity-100;
          svg {
            @apply cursor-pointer w-[42px] h-[42px];
          }
          &:nth-child(1) {
            svg {
              @apply fill-[rgba(var(--chart-text-color),1)] stroke-none;
            }
          }
          &:nth-child(2) {
            svg {
              @apply stroke-[rgba(var(--chart-text-color),1)] fill-none;
            }
          }
          &:hover {
            &:nth-child(1) {
              svg {
                @apply fill-[rgba(var(--white),1)];
              }
            }
            &:nth-child(2) {
              svg {
                @apply stroke-[rgba(var(--white),1)];
              }
            }
          }
        }
      }
    }
    .msger-send-btn {
      i {
        @apply text-[rgba(var(--white),1)];
      }
    }
    * {
      @apply text-[1em] p-2.5 rounded-[3px] border-[none];
    }
  }
  .msger-input {
    @apply flex-1 bg-[rgba(var(--white-bg),1)] w-full text-[rgba(var(--body-font-color),1)];
    &:focus,
    &:focus-visible {
      outline: unset;
    }
  }
  .fg-emoji-container {
    @apply !left-[calc(10px_+_(1405_-_10)_*_((100vw_-_320px)_/_(1920_-_320)))];
    .fg-emoji-nav {
      @apply bg-[rgba(var(--theme-secondary),1)];
      ul {
        li {
          &:last-child {
            a {
              @apply bg-[rgba(var(--badge-light-color),50%)];
            }
          }
        }
      }
    }
    #fg-emoji-picker-move {
      @apply hidden;
    }
  }
  .open-emoji {
    @apply p-0;
    button {
      @apply z-0 relative px-3.5 py-0 before:content-["\f118"] before:z-[1] before:relative before:text-xl before:text-[rgba(var(--chart-text-color),1)];
      background: transparent;
      &::before {
        font-family: "FontAwesome";
      }
    }
  }
  .second-btn {
    @apply bg-[rgba(var(--transparent-color),1)] z-0 relative px-3.5 py-0 before:content-["\f118"] before:z-[1] before:relative before:text-xl before:text-[rgba(var(--chart-text-color),1)];
    &::before {
      font-family: "FontAwesome";
    }
  }
  .msger-send-btn {
    @apply bg-[rgba(var(--theme-default),1)] w-10 h-[39px] font-[bold] cursor-pointer transition-all duration-[0.23s] flex items-center justify-center ml-2.5;
    svg {
      @apply w-px h-3;
    }
  }
  .custom-name {
    @apply w-[42px] h-[42px] flex justify-center items-center rounded-[50px];
  }
  .offcanvas-wrapper {
    .offcanvas {
      @apply fixed bg-[rgba(var(--white),1)] z-[1045];
    }
  }

  .fg-emoji-picker-search {
    .fg-emoji-picker-search-icon {
      @apply !flex;
    }
  }
}