.area-input {
  display: flex;
  align-items: center;
  border-radius: 24px;
  background-color: $uni-bg-color;
  box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
  margin: 0 12px;
  margin-bottom: 8px;

  .input-container-voice {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 48px;
    height: 48px;

    .voice-icon {
      width: 24px;
      height: 24px;
    }
  }

  .input-button-container {
    flex: 1;
    position: relative;
  }

  .hold-to-talk-button {
    width: 100%;
    height: 44px;
    color: $uni-text-color;
    font-size: $uni-font-size-lg;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $uni-bg-color;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
  }

  .input-container-send {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 48px;
    height: 48px;

    .input-container-send-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: radial-gradient(
          39% 39% at 97% 81%,
          #79dffb 0%,
          rgba(138, 227, 252, 0) 100%
        ),
        radial-gradient(
          54% 54% at 3% 70%,
          #8afcf8 0%,
          rgba(138, 252, 248, 0) 100%
        ),
        #2d91ff;
    }

    .send-icon {
      width: 24px;
      height: 24px;
    }

    .send-stop {
      width: 12px;
      height: 12px;
      background: #ffffff;
      border-radius: 4px;
    }
  }

  .textarea {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    max-height: 92px;
    min-height: 22px;
    font-size: $uni-font-size-lg;
    line-height: 22px;
    margin: 6px 0;

    &::placeholder {
      color: #cccccc;
      line-height: normal;
    }

    &:focus {
      outline: none;
    }
  }
}