@import "../../_common/style/web/base.less";

:host {
  width: 100%;
}

.@{prefix}-chat__input {
  position: relative;
  width: 100%;
  box-sizing: border-box;

  & *, *::before, *::after {
    box-sizing: border-box;
  }

  // 主体区
  &__content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: var(--td-chat-input-padding);
    border: 1px solid var(--td-chat-input-content-default-border);
    border-radius: var(--td-chat-input-radius);
    background: var(--td-chat-input-background);
    transition: all .3s;
    z-index: 1;
    box-shadow: var(--td-chat-input-box-shadow);

    &:focus-within {
      border-color: var(--td-chat-input-hover-border);
      box-shadow: var(--td-chat-input-shadow);
    }

    &:hover {
      border-color: var(--td-chat-input-hover-border);
      box-shadow: var(--td-shadow-1);
    }
  }

  // 附件区
  &__attachments {
    display: block;
    margin: var(--td-chat-input-attachments-margin);

    &::part(@{prefix}-attachment-list-wrap) {
      top: -4px;
    }
  }

  &__textarea__wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    width: 100%;
  }

  // 输入框
  &__textarea {
    flex: 1;
    min-width: 0;
    max-height: var(--td-chat-input-textarea-max-height);
    display: flex;
    flex-direction: column;
         
    &::part(@{prefix}-textarea) {
      flex: 1;
      min-height: 0;
      width: 100%;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: var(--td-chat-input-textarea-scrollbar-width);
      }
      &::-webkit-scrollbar-thumb {
        border-radius: var(--td-chat-input-textarea-scrollbar-thumb-radius);
        background-color: var(--td-chat-input-textarea-scrollbar-color);
        cursor: pointer;
      }
      &::-webkit-scrollbar-thumb:hover {
        background-color: var(--td-chat-input-textarea-scrollbar-hover-color);
      }
    }

    &::part(@{prefix}-textarea__inner) {
      padding: 0 0 var(--td-comp-paddingTB-s) 0;
      border: none;
      font-size: var(--td-chat-input-font-size);
      background: none;
      box-shadow: none;
      min-height: 60px;
    }

    &::part(@{prefix}-textarea__inner):placeholder {
      color: var(--td-text-color-secondary);
    }
  }

  &__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--td-comp-margin-s);
    min-height: 32px;

    &__right {
      display: flex;
      align-items: center;
    }
  }

  // 功能区
  &__actions {
    display: flex;
    align-items: center;
    gap: var(--td-chat-input-actions-gap);
    margin: var(--td-chat-input-actions-margin);

    &__item__wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--td-chat-input-actions-item-wh);
      height: var(--td-chat-input-actions-item-wh);
      border-radius: var(--td-chat-input-actions-item-radius);
      font-size: var(--td-chat-input-actions-item-font-size);
      background: var(--td-chat-input-actions-item-bg);

      &:hover {
        background: var(--td-chat-input-actions-item-hover-bg);
      }
    }

    &__icon {
      display: flex;
    }

    &__upload {
      &::part(@{prefix}-upload__trigger) {
        display: flex;
      }
    }

    &__tooltip {
      display: flex;
      color: var(--td-chat-input-actions-item-color);
      cursor: pointer;
    }
  }

  &__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: var(--td-comp-size-s);
    text-align: center;
    cursor: pointer;
   

    &::part(@{prefix}-button) {
      transform: rotate(-90deg);
      width: var(--td-comp-size-s);
      height: var(--td-comp-size-s);
      border-radius: var(--td-radius-circle);
      background: var(--td-chat-input-button-default-bg);
      color: var(--td-chat-input-button-default-color);
      border-width: 0;
    }
    
    &--focus::part(@{prefix}-button) {
      background: var(--td-brand-color);
      color: var(--td-text-color-anti);
    }

    &:hover::part(@{prefix}-button) {
      background: var(--td-brand-color-hover);
    }

    &:focus::part(@{prefix}-button) {
      background: var(--td-brand-color-active);
    }

    &__icon {
      display: flex;
      align-items: center;
      justify-content: center;

      .@{prefix}-icon {
        font-size: @font-size-l;
      }
    }

    &__stop {
      .@{prefix}-icon {
        font-size: 28px;
      }
    }
  }

  &__stopbtn {
    flex: 0 0 auto;
    margin-left: var(--td-comp-margin-l);

    .@{prefix}-button {
      width: 100px;
      height: var(--td-comp-size-xxxxl);
      border-radius: var(--td-radius-round);
      background: var(--td-bg-color-secondarycontainer);
      color: var(--td-text-color-primary);
      font-size: @font-size-l;

      &__text {
        align-items: center;
      }

      .@{prefix}-icon {
        font-size: @font-size-xl;
        margin-right: var(--td-comp-margin-s);
      }
    }
  }
}


.@{prefix}-portal-wrapper {
  .@{prefix}-chat__input__model-dropdown {
    border: none;
  }
}