@use "../variables";
.main-chart-wrapper {
  position: relative;
  overflow: hidden;

  .chat-info,
  .main-chat-area,
  .chat-user-details {
    background-color: variables.$custom-white;
    height: calc(100vh - 12.7rem);
    border-radius: variables.$default-radius;
  }

  .chat-users-tab,
  .chat-groups-tab,
  .chat-contacts-tab {
    max-height: calc(100vh - 26rem);
  }
  @media (min-width: 320px) and (max-width: 360px) {
    .chat-content {
      max-height: calc(100vh - 24.75rem) !important;
    }
  }
  .chat-content {
    max-height: calc(100vh - 22.5rem);

    .simplebar-content-wrapper .simplebar-content {
      margin-top: auto;
    }

    ul li {
      margin-block-end: 1rem;

      &:last-child {
        margin-block-end: 0;
      }
    }
  }

  .responsive-chat-close,
  button.responsive-userinfo-open {
    display: none;
  }

  .chat-info {
    position: relative;

    .tab-style-6 {
      padding: 1rem;
      border-radius: 0;
    }

    .tab-pane {
      padding: 0;
    }

    .chat-groups-tab {
      li {
        padding: 0.625rem 1.25rem;
      }

      .group-indivudial {
        color: variables.$default-text-color;
        font-weight: 500;
      }
    }

    .chat-contacts-tab {
      >li {
        padding: 0.625rem 1.25rem;
      }

      .incoming-call-success,
      .outgoing-call-success {
        i {
          color: variables.$success;
          font-size: 0.875rem;
        }
      }

      .incoming-call-failed,
      .outgoing-call-failed {
        i {
          color: variables.$danger;
          font-size: 0.875rem;
        }
      }
    }

    .chat-users-tab,
    .chat-groups-tab {
      li {
        padding: 0.625rem 1.25rem;
        border-inline-start: 2px solid transparent;
        .chat-msg {
          color: variables.$text-muted;
          max-width: 15.25rem;
          display: inline-block;
        }

        .chat-msg-typing {
          .chat-msg {
            color: variables.$success !important;
          }

          .chat-read-icon {
            display: none;
          }
        }

        .chat-read-icon {
          line-height: 1;

          i {
            font-size: 1rem;
            color: variables.$success;
          }
        }
        &.active {
          background-color: variables.$primary-005;
          color: variables.$default-text-color;
          border-inline-start: 2px solid variables.$primary;
        }
        &.chat-msg-unread {
          &.active {
            background-color: variables.$primary-005;
          }

          .chat-msg {
            color: variables.$default-text-color;
          }

          .chat-read-icon {
            i {
              color: variables.$text-muted;
            }
          }
        }

        &.chat-inactive {
          .chat-read-icon {
            display: none;
          }
        }
      }
    }
  }

  .main-chat-area {
    position: relative;
    .main-chat-head {
      padding: .58rem 0.75rem;
    }
    .chatnameperson,.chatting-user-info {
      font-weight: 600;
    }
    .chat-content {
      position: relative;
      z-index: 1;
      padding: 2.5rem;
      .chat-content-background {
        position: absolute;
        width: 100%;
        height: 100%;
        inset-inline-start: 0;
        inset-block-start: 0;
        z-index: -1;
        opacity: 0.03;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .chatting-user-info {
        color: variables.$default-text-color;
        font-size: 0.813rem;

        .msg-sent-time {
          color: variables.$text-muted;
          font-size: 0.75rem;
          font-weight: 500;

          .chat-read-mark {
            i {
              color: variables.$success;
              margin-inline-end: 0.3rem;
            }
          }
        }
      }

      .main-chat-msg div {
        margin-block-start: 0.4rem;
        padding: 1rem;
        width: fit-content;

        p {
          font-size: 0.85rem;
        }

        .chat-media-image {
          width: 6.25rem;
          height: 6.25rem;
          border-radius: variables.$default-radius;
        }
      }

      .chat-item-start {
        .main-chat-msg div {
          background-color: rgba(var(--primary-rgb), 0.1);
          color: variables.$default-text-color;
          border-start-start-radius: 0px;
          border-start-end-radius: 20px;
          border-end-end-radius: 20px;
          border-end-start-radius: 0px;
          font-weight: 500;
          position: relative;
          &:first-child {
            border-start-start-radius: 20px;
            border-start-end-radius: 20px;
            border-end-end-radius: 20px;
            border-end-start-radius: 0px;
          }
          &:last-child {
            border-start-start-radius: 0px;
            border-start-end-radius: 20px;
            border-end-end-radius: 20px;
            border-end-start-radius: 20px;
          }
          &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: variables.$custom-white;
            inset-inline-start: 0;
            inset-block-start: 0;
            inset-inline-end: 0;
            inset-block-end: 0;
            z-index: -1;
          }
        }
        
        .msg-sent-time {
          margin-inline-start: 0.25rem;
        }
      }
      
      .chat-item-end {
        justify-content: end;
        text-align: end;
        
        .main-chat-msg div {
          background-color: variables.$primary-09;
          color: variables.$white;
          border-start-start-radius: 20px;
          border-start-end-radius: 0;
          border-end-end-radius: 0;
          border-end-start-radius: 20px;
          font-weight: 500;
          &:first-child {
            border-start-start-radius: 20px;
            border-start-end-radius: 20px;
            border-end-end-radius: 0;
            border-end-start-radius: 20px;
          }
          &:last-child {
            border-start-start-radius: 20px;
            border-start-end-radius: 0;
            border-end-end-radius: 20px;
            border-end-start-radius: 20px;
          }
        }

        .msg-sent-time {
          margin-inline-end: 0.25rem;
        }
      }

      .chat-item-start,
      .chat-item-end {
        display: flex;

        .chat-list-inner {
          display: flex;
          align-items: top;
          max-width: 75%;
        }
      }
    }

    .chat-footer {
      width: 100%;
      box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
    }

    .chat-footer {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      height: 4.75rem;
      padding: 0 1.5rem;
      border-top: 1px solid variables.$default-border;
      background-color: variables.$custom-white;
      position: absolute;
      inset-inline-start: auto;
      inset-inline-end: auto;
      inset-block-end: 0;
      z-index: 1;
    }

    .chat-day-label {
      text-align: center;
      color: variables.$text-muted;
      margin-block-end: 2rem;
      opacity: 1;
      position: relative;

      span {
        padding: 0.188rem 0.5rem;
        font-size: 0.7rem;
        background-color: variables.$light;
        border-radius: 0.3rem;
        border: 1px dashed variables.$default-border;
        color: variables.$default-text-color;
      }
    }
  }

  @media (min-width: 992px) {
    .chat-info {
      min-width: 25rem;
      max-width: 25rem;
    }
  }

  .main-chat-area {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  @media (max-width: 1275.98px) and (min-width: 992px) {
    .chat-info {
      min-width: 25rem;
      max-width: 25rem;
    }

    .main-chat-area {
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }
  }

  @media (max-width: 991.98px) {
    .chat-info {
      width: 100%;
    }

    .main-chat-area {
      display: none;
      min-width: 100%;
      max-width: 100%;
    }

    .responsive-chat-close {
      display: block;
    }
  }
}

.chat-user-details {
  padding: 1rem;

  .shared-files {
    li {
      margin-block-end: 1rem;

      &:last-child {
        margin-block-end: 0;
      }
    }

    .shared-file-icon i {
      width: 1rem;
      height: 1rem;
      line-height: 1rem;
      border-radius: 0.3rem;
      display: flex;
      align-items: center;
      padding: 1.125rem;
      justify-content: center;
      font-size: 1.125rem;
    }
  }

  .chat-media {
    img {
      width: 100%;
      border-radius: variables.$default-radius;
      margin-bottom: 1.25rem;
    }
  }
}

@media (max-width:1400px) {
  .chat-user-details {

    &.open {
      display: block;
      inset-inline-end: 0;
      inset-block-start: 0.5rem;
      box-shadow: variables.$box-shadow;
      border-inline-start: 1px solid variables.$default-border;
    }
  }

  button.responsive-userinfo-open {
    display: block;
  }
}

@media (max-width:991.98px) {
  .main-chart-wrapper {
    &.responsive-chat-open {
      .chat-info {
        display: none;
      }

      .main-chat-area {
        display: block;
      }
    }
  }
}

@media (max-width: 767.98px) {
  .main-chart-wrapper .main-chat-area .chat-content .main-chat-msg div .chat-media-image {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (max-width: 354px) {

  .main-chart-wrapper .chat-contacts-tab,
  .main-chart-wrapper .chat-groups-tab,
  .main-chart-wrapper .chat-users-tab {
    max-height: calc(100vh - 25.4rem);
  }
}
.chat-contacts-tab li {
  border-bottom: 1px solid variables.$default-border;
  &:last-child {
    border-bottom: 0;
  }
}
[data-page-style="modern"] {
  .main-chat-area {
    .rightIcons .btn-outline-light {
      border-color: variables.$default-border;
    }
  }
}

[dir="rtl"] {
  .chat-footer .btn-send {
    transform: rotate(180deg);
  }
}

[data-theme-mode="dark"] {
  .main-chat-area {
    .chat-content {
      &:before {
        filter: invert(1);
      }
    }
  }
}

@media (max-width: 456px) {
  .main-chart-wrapper .chat-users-tab, .main-chart-wrapper .chat-groups-tab, .main-chart-wrapper .chat-contacts-tab {
    max-height: calc(100vh - 27.5rem);
  }
}
@media (max-width: 360px) {
  .main-chart-wrapper .chat-users-tab, .main-chart-wrapper .chat-groups-tab, .main-chart-wrapper .chat-contacts-tab {
    max-height: calc(100vh - 28.5rem);
  }
}

@media (min-width: 992px) and (max-width: 1282px) {
  .total-mails .mail-messages {
    max-height: calc(100vh - 21.4rem) !important;
  }
}
@media (max-width: 390px) {
  .main-chart-wrapper .chat-info .chat-users-tab li .chat-msg, .main-chart-wrapper .chat-info .chat-groups-tab li .chat-msg {
    max-width: 10.25rem;
  }
}
.fg-emoji-picker {
  left: auto !important;
  right: 6.4rem !important;
}