.jnpf-chat-modal {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 9999;
  display: flex;
  height: 640px;
  overflow: hidden;
  background: radial-gradient(circle at -30% -30%, #9f9ff8 0%, #bae3ff 56%, #e5f1ff 85%, #f1f4f8 100%);
  border-radius: 10px;
  box-shadow: 0 10px 10px rgb(20 44 72 / 10%);

  &.jnpf-chat-modal-fullScreen {
    inset: 0;
    height: 100vh;

    .chat-modal-center-pane {
      flex: 1;
      min-width: 0;

      .chat-content {
        flex: 1;

        .chat-content-empty,
        .im-container {
          width: 100%;
        }

        .chatBox {
          width: 100%;
        }
      }

      .contacts-pane {
        width: 100%;
      }
    }
  }

  * {
    box-sizing: border-box;
  }

  .chat-modal-left-pane {
    flex-shrink: 0;
    width: 60px;
    height: 100%;
    padding: 60px 6px 6px;

    .chat-tabs {
      .chat-tab-item {
        width: 48px;
        height: 48px;
        margin-bottom: 8px;
        line-height: 48px;
        text-align: center;
        cursor: pointer;
        border-radius: 8px;

        &.chat-tab-item__active {
          color: var(--primary-color);
          background: var(--component-background);
        }

        i {
          font-size: 20px;
        }
      }
    }
  }

  .chat-modal-center-pane {
    height: 100%;

    .chat-modal-center-pane__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      padding-right: 20px;

      .chat-header-title {
        font-size: 18px;
        line-height: 60px;
      }

      .chat-header-actions {
        display: flex;
        align-items: center;

        .chat-header-actions-item {
          margin-left: 14px;
          cursor: pointer;
        }
      }
    }

    .chat-modal-center-pane__main {
      height: calc(100% - 60px);
      background: rgb(255 255 255 / 40%);
      border-radius: 10px 0 0;
    }
  }

  .common-pane {
    display: flex;
    height: 100%;

    .chat-list-header,
    .pane-header {
      display: flex;
      align-items: center;
      height: 60px;
      padding: 0 10px;

      .ant-input-affix-wrapper {
        background: rgb(255 255 255 / 40%);
        border-radius: 16px;
      }

      .lucide-search-icon {
        color: var(--text-color-label);
        cursor: pointer;
      }

      .add-chat-btn {
        font-size: 14px;
        color: var(--primary-color);
        cursor: pointer;
        user-select: none;

        .anticon {
          margin-right: 6px;
        }
      }
    }

    .chat-list {
      flex-shrink: 0;
      width: 240px;
      height: 100%;

      .chat-list-main {
        height: calc(100% - 60px);
        overflow: hidden;
        background: rgb(255 255 255 / 40%);
        border-radius: 0 10px 0 0;
      }
    }

    .chat-content {
      display: flex;
      height: 100%;

      .im-container {
        display: flex;
        height: 100%;
      }

      .chat-content-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 660px;
        height: 100%;
      }

      .chat-content-header {
        display: flex;
        align-items: center;
        height: 60px;
        padding: 0 10px;

        .name {
          margin-left: 10px;
        }
      }

      .chatBox {
        width: 650px;
        height: calc(100% - 60px);
        margin-left: 10px;
      }

      .chat-content-main {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 10px;
        background: var(--component-background);
        border-radius: 10px 0 0;

        .writeBox {
          height: 118px;
          padding: 0 10px;
          background-color: #f5f9fd;
          border-radius: 8px;

          .toolBox {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 38px;
            font-size: 0;
            border-bottom: 1px solid var(--border-color-base1);

            i {
              margin-right: 10px;
              font-size: 20px;
              line-height: 35px;
              color: #6b7a99;
              cursor: pointer;
            }

            .toolBox-left {
              .uploadImg-btn {
                display: inline-block;
              }

              .question-link {
                display: inline-block;
                height: 24px;
                padding: 0 10px;
                margin-right: 8px;
                font-size: 12px;
                line-height: 24px;
                color: var(--text-color-label);
                cursor: pointer;
                user-select: none;
                background-color: var(--component-background);
                border-radius: 4px;

                &:hover {
                  color: var(--primary-color);
                }
              }
            }

            .toolBox-right {
              display: flex;
              align-items: center;
              font-size: 14px;
              line-height: 35px;
              color: #6b7a99;
              cursor: pointer;

              i {
                margin-right: 5px;
                font-size: 18px;
              }
            }
          }

          .writeBox-main {
            display: flex;
            align-items: flex-end;
            height: 80px;
            padding: 6px 0;

            .ant-input {
              height: 100%;
              resize: none;
              background-color: transparent;
              border: none !important;
              box-shadow: none !important;
            }
          }

          .send-btn {
            margin-bottom: 4px;
            margin-left: 10px;
          }
        }

        .chat-tip {
          flex-shrink: 0;
          margin-top: 10px;
          font-size: 12px;
          line-height: 14px;
          color: var(--text-color-secondary);
          text-align: center;
        }
      }

      .historyBox {
        flex-shrink: 0;
        width: 300px;
        height: 100%;
        border-left: 1px solid var(--border-color-base1);

        .historyBox-header {
          display: flex;
          align-items: center;
          height: 60px;
          padding: 0 20px;

          .ant-input-affix-wrapper {
            background: rgb(255 255 255 / 40%);
            border-radius: 16px;
          }

          .lucide-search-icon {
            color: var(--text-color-label);
            cursor: pointer;
          }
        }

        .historyList-box {
          height: calc(100% - 60px);
          padding: 5px;
          overflow: auto;
          overflow-x: hidden;
          background: var(--component-background);
        }
      }

      .chat-content-list {
        flex: 1;
        padding: 5px 0;
        overflow: auto;
        overflow-x: hidden;

        .chat-content-list-item {
          position: relative;
          font-size: 0;
          text-align: left;

          .chat-content-list-time {
            position: absolute;
            left: 3px;
            display: inline-block;
            display: none;
            vertical-align: top;

            cite {
              position: absolute;
              top: -28px;
              left: 0;
              font-size: 12px;
              font-style: normal;
              line-height: 20px;
              color: var(--text-color-secondary);
              text-align: left;
              white-space: nowrap;
            }
          }

          .chat-content-list-text {
            position: relative;
            display: inline-block;
            max-width: 75%;
            padding: 8px 15px;
            margin-top: 20px;
            font-size: 14px;
            line-height: 22px;
            vertical-align: top;
            word-break: break-all;
            background: radial-gradient(circle at top left, #dde0ff 0%, #e8f7ff 41%, #e8f7ff 100%);
            border-radius: 8px 8px 8px 0;

            &:hover {
              .chat-content-list-time {
                display: block;
              }
            }

            .chat-content-list__msg--text {
              line-height: 24px;

              img {
                display: inline-block;
                width: 24px;
                height: 24px;
                vertical-align: top;
              }
            }
          }

          &.chat-content-list-item--mine {
            text-align: right;

            .chat-content-list-time {
              right: 3px;
              left: auto;
            }

            .chat-content-list-time cite {
              right: 0;
              left: auto;
              text-align: right;
            }

            .chat-content-list-text {
              margin-left: 0;
              color: #fff;
              text-align: left;
              background: var(--primary-color);
              border-radius: 8px 8px 0;
            }
          }

          &.chat-content-list-item--history {
            .chat-content-list-text {
              max-width: 94%;
              background: var(--app-main-background);

              .chat-content-list-time {
                display: block;
              }
            }

            .chat-content-list__msg--audio {
              width: 230px;
            }
          }

          .chat-content-list__msg--video,
          .chat-content-list__msg--file {
            position: relative;
            display: block;
            width: 100%;
            min-width: 200px;
            max-width: 100%;
            margin: 10px 0;
            overflow: hidden;
            cursor: pointer;
            border-radius: 5px;
          }

          .chat-content-list__msg--img {
            position: relative;
            display: block;
            width: 100%;
            max-width: 200px;
            margin: 10px 0;
            overflow: hidden;
            cursor: pointer;
            border-radius: 5px;
          }
        }
      }
    }
  }

  .reply-pane {
    .reply-list {
      .reply-list-item {
        position: relative;
        padding: 0 10px;
        cursor: pointer;
        // background-color: var(--component-background);

        .offLine {
          filter: grayscale(1);
        }

        &.reply-list-item__active,
        &:hover {
          background-color: var(--component-background);
        }

        .reply-list-item-main {
          display: flex;
          align-items: center;
          height: 60px;
          cursor: pointer;
          border-bottom: 1px solid var(--border-color-base1);

          .ant-avatar {
            flex-shrink: 0;
          }
        }

        .reply-list-txt {
          flex: 1;
          min-width: 0;
          padding-top: 1px;
          margin-left: 10px;
          overflow: hidden;

          .reply-list-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 20px;
            margin-bottom: 5px;
            overflow: hidden;
            font-size: 14px;
            line-height: 20px;

            .title-left {
              flex: 1;
              min-width: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .ant-badge {
              flex-shrink: 0;
              margin-left: 5px;
            }
          }

          .reply-list-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 18px;
            font-size: 12px;
            color: var(--text-color-secondary);

            .reply-list-content {
              display: inline-block;
              flex: 1;
              min-width: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .reply-list-time {
              flex-shrink: 0;
              margin-left: 5px;
            }
          }
        }
      }
    }
  }

  .ai-chat-pane {
    .chat-content-list {
      .chat-content-list-item {
        &.chat-content-list-item--mine {
          .chat-content-list-text {
            .chat-content-list-actions {
              display: none;
            }
          }
        }

        .chat-content-list-text {
          margin-top: 0 !important;
          margin-bottom: 30px;

          .chat-content-list-actions {
            position: absolute;
            bottom: -30px;
            left: 0;
            display: inline-block;
            vertical-align: top;

            .action-btn {
              height: 28px;
              padding: 0 4px;
              margin-right: 6px;
              line-height: 28px;
              border-radius: 4px;

              .anticon {
                font-size: 16px;
                color: var(--text-color-secondary);
              }
            }
          }
        }
      }
    }

    .ai-chat-list {
      .ai-chat-list-item {
        padding: 0 8px;
        cursor: pointer;

        &.ai-chat-list-item__active,
        &:hover {
          background: var(--component-background);
        }

        .ai-chat-list-item-main {
          display: flex;
          align-items: center;
          height: 60px;
          padding: 0 8px;
          border-bottom: 1px solid var(--border-color-base1);
          border-radius: 4px;

          .ai-chat-list-title {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            white-space: nowrap;
          }

          .ai-chat-list-time {
            margin-left: 6px;
            font-size: 12px;
            color: var(--text-color-label);
          }

          .icon-ym {
            flex-shrink: 0;
            margin-left: 6px;
            color: var(--text-color-label);

            &:hover {
              color: var(--error-color);
            }
          }
        }
      }
    }

    .welcome-message {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

      .welcome-message-main {
        font-size: 14px;
        transform: translateY(-60px);

        .welcome-message-title {
          display: flex;
          align-items: flex-end;
          margin-bottom: 10px;
          line-height: 20px;

          .welcome-message-icon {
            width: 28px;
            margin-right: 10px;
          }

          span {
            font-weight: 600;
          }
        }
      }
    }
  }

  .contacts-pane {
    display: flex;
    width: 900px;

    .org-pane,
    .user-pane {
      display: flex;
      flex-shrink: 0;
      flex-direction: column;
      width: 240px;
      height: 100%;

      .pane-main {
        flex: 1;
        overflow: hidden;

        .tree-main {
          height: 100%;
          overflow: auto;
        }
      }
    }

    .org-pane {
      border-right: 1px solid var(--border-color-base1);

      .jnpf-tree {
        background: rgb(255 255 255 / 40%);

        .ant-tree {
          background: transparent;

          .ant-tree-treenode {
            &:hover,
            &.ant-tree-treenode-selected {
              background: rgb(255 255 255 / 60%);
            }
          }
        }
      }
    }

    .user-pane {
      .user-list {
        background: rgb(255 255 255 / 40%);
        border-radius: 0 10px 0 0;

        .user-list-item {
          position: relative;
          display: block;
          padding: 0 20px;
          cursor: pointer;
          user-select: none;

          &.user-list-item-active,
          &:hover {
            background: rgb(255 255 255 / 60%);
          }
        }

        .user-list-item-main {
          display: flex;
          align-items: center;
          height: 60px;
          cursor: pointer;
          border-bottom: 1px solid var(--border-color-base1);
        }

        .user-list-txt {
          flex: 1;
          min-width: 0;
          padding-top: 1px;
          margin-left: 10px;
          overflow: hidden;

          .title {
            height: 20px;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            line-height: 20px;
            white-space: nowrap;
          }

          .position {
            height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
            line-height: 18px;
            color: var(--text-color-secondary);
            white-space: nowrap;
          }
        }
      }
    }

    .info-pane {
      display: flex;
      flex: 1;
      justify-content: center;
      padding-top: 60px;
      margin-left: 10px;
      overflow: hidden;

      .user-info {
        width: 100%;
        padding: 20px 20px 0;
        background: var(--component-background);
        border-radius: 10px 0 0;

        &.org-info {
          padding-top: 100px;
          font-size: 24px;
          text-align: center;

          .org-info-subTitle {
            margin-bottom: 16px;
            font-size: 18px;
            color: var(--primary-color);
          }
        }

        .user-info-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 98px;
          margin-bottom: 23px;
          border-bottom: 1px solid var(--border-color-base);

          .user-info-header-txt {
            flex: 1;
            min-width: 0;
            font-size: 14px;
            line-height: 25px;

            .txt-name {
              margin-bottom: 4px;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 18px;
              white-space: nowrap;
            }

            .txt-position {
              overflow: hidden;
              text-overflow: ellipsis;
              color: var(--text-color-secondary);
              white-space: nowrap;
            }
          }

          .ant-avatar {
            flex-shrink: 0;
            margin-left: 20px;
          }
        }

        .user-info-cell {
          display: flex;
          margin-bottom: 16px;
          font-size: 14px;
          line-height: 20px;

          .user-info-cell-label {
            flex-shrink: 0;
            width: 80px;
            color: var(--text-color-label);
          }

          .user-info-cell-value {
            flex: 1;
            white-space: wrap;
          }
        }

        .user-info-btns {
          display: flex;
          justify-content: center;
          margin-top: 100px;
        }
      }
    }
  }
}

.emojiBox {
  width: 300px;
  height: 150px;
  overflow: auto;
  text-align: left;

  .emoji {
    padding: 0;
  }

  li {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
  }
}

.emoji-popover {
  z-index: 1000000 !important;

  .ant-popover-inner {
    padding: unset;
  }

  .ant-popover-inner-content {
    padding: 10px;
  }
}

.dark,
.dark[data-theme='custom'],
.dark[data-theme='default'] {
  .jnpf-chat-modal {
    background: #384669;

    .chat-modal-center-pane__main {
      background-color: rgb(0 0 0 / 20%);
    }

    .chat-list .chat-list-main {
      background: rgb(0 0 0 / 20%);
    }

    .chat-modal-left-pane .chat-tabs .chat-tab-item.chat-tab-item__active {
      background: #333;
    }

    .common-pane .chat-content {
      .chat-content-main .writeBox {
        background: rgb(51 51 51 / 80%);
      }

      .chat-content-list .chat-content-list-item:not(.chat-content-list-item--mine) {
        .chat-content-list-text {
          background: var(--app-main-background);
        }
      }
    }

    .ant-input-affix-wrapper {
      background-color: rgb(0 0 0 / 20%);
    }

    .org-pane {
      .jnpf-tree {
        background: rgb(0 0 0 / 20%);

        .ant-tree {
          .ant-tree-treenode {
            &:hover,
            &.ant-tree-treenode-selected {
              background: rgb(0 0 0 / 40%);
            }
          }
        }
      }
    }

    .user-pane {
      .user-list {
        background: rgb(0 0 0 / 20%);

        .user-list-item {
          &.user-list-item-active,
          &:hover {
            background: rgb(0 0 0 / 40%);
          }
        }
      }
    }
  }
}