.chat-dialog,
.chat-wrapper {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.chat-body {
  height: 100%;

  & > div {
    height: 100%;
  }

  .app-chat-form {
    position: fixed;
    bottom: 20px;
    left: 45%;
    width: 43%;

    .app-chat-input-field {
      width: 85%;
    }

    .smile-icon {
      margin-right: 6px;
    }
  }
}

.app-topic-add-btn {
  min-width: 24px;
  padding: 0;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;

  .toolbar-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #888;

    .add-button-icon {
      position: relative;
      top: 3px;
      right: 3px;
    }
  }
}

.app-chat-container {
  height: 100%;
  background: var(--chat-bg-image);
  background-size: cover;

  .app-chat-comments-wrapper {
    height: 100%;
  }
}

// .comments {
// }

.interlayer {
  height: 32px;
  background-color: #f2f2f2;
  border-bottom: 1px solid rgb(0 0 0 / 12%);
}

:host ::ng-deep {
  .mat-tab-header {
    background-color: var(--chat-dialog-header-bg-color);
  }

  .mat-tab-group,
  .mat-tab-body-wrapper,
  .mat-tab-body {
    height: 100%;
  }

  .mat-tab-label {
    min-width: 20px;
    height: 25px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 0;
    padding-left: 10px;

    font-size: 14px;
    font-weight: 400;
    color: #888;

    .mat-tab-label-content {
      .mat-icon-button {
        width: 24px;
        height: 24px;
        line-height: 1;
      }
    }
  }

  .mat-tab-label:last-child {
    padding-left: 5px;
    opacity: 1;

    .material-icons {
      font-size: 20px;
    }
  }

  .mat-tab-group.mat-primary .mat-ink-bar {
    height: 3px;
    background-color: #9cf;
  }
}

::ng-deep .mat-menu-panel.topic-executors-detail {
  max-width: 250px;
  max-height: 70vh;

  .topic-executors-add-wrapper {
    cursor: pointer;

    display: flex;
    align-items: center;

    margin-right: 5px;
    padding: 0;
    padding-left: 10px;

    .executor-add-icon {
      position: relative;
      top: 1px;
      display: flex;
      padding-right: 5px;
    }
  }

  .topic-executors-content-wrapper {
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0;
    padding-left: 10px;

    &:hover {
      .executor-delete-icon {
        opacity: 1;
      }
    }

    .executor-delete-icon {
      cursor: pointer;

      display: flex;
      align-items: center;

      margin-right: 10px;

      opacity: 0;
    }

    .topic-executors-content {
      display: flex;
      align-items: center;
      width: 200px;

      .topic-executors-content-avatar {
        display: flex;
      }

      .topic-executors-detail-name {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;

        margin-right: 5px;
        padding-left: 5px;

        -webkit-line-clamp: 2;
      }
    }
  }
}