.area-input {
  display: flex;
  align-items: center;
  border-radius: 22px;
  background-color: #ffffff;
  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: 44px;
    height: 44px;

    image {
      width: 22px;
      height: 22px;
    }
  }

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

  .hold-to-talk-button {
    width: 100%;
    height: 44px;
    color: #333333;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    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: 44px;
    height: 44px;

    .input-container-send-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    image {
      width: 28px;
      height: 28px;
    }
  }

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

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

    &:focus {
      outline: none;
    }
  }
}